/* MOGGED: Looksmaxxing Simulator - landing page
   No build step. Plain CSS, custom properties, no framework. */

/* ---------- fonts ----------
   Self-hosted rather than loaded from Google. Two reasons: every visitor's IP
   was being sent to Google before they interacted with anything, which the
   privacy policy then had to disclose; and it removes two external
   connections (fonts.googleapis.com for the CSS, fonts.gstatic.com for the
   files) from the critical path.

   Latin subset only. This site is English, and the full set would triple the
   weight for glyphs no page uses. Anything outside the range below falls back
   to the system stack, which is the correct behaviour rather than a bug. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter ships as a variable font: one file covers the whole weight axis, which
   is why Google served the same URL for 400, 500 and 700. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --bg: #08080a;
  --bg-2: #0e0e11;
  --bg-3: #141418;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --ink: #ecebe6;
  --ink-dim: #97948c;
  --red: #ff2323;
  --red-dim: #b81616;

  --display: "Anton", "Impact", "Haettenschweiler", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 0.75rem 1rem;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 var(--pad);
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(8, 8, 10, 0.92);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  margin-right: auto;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.nav-links {
  display: flex;
  gap: 1.6rem;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--ink); }

@media (max-width: 880px) {
  .nav-links { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover { background: var(--red-dim); border-color: var(--red-dim); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.ico {
  width: 2.07em;
  height: 2.07em;
  fill: currentColor;
  flex: none;
  margin-top: -0.1em;
}

.btn-sm { padding: 0.5rem 1rem; font-size: 0.74rem; }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 0.86rem; }

.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(88svh, 820px);
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 10vh, 7rem) var(--pad) clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero-pic {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Phones get a purpose-built portrait crop (hero-mobile.webp) with the face
     already high in frame. The landscape original cannot work here: in a
     portrait box, cover fills the height exactly, leaving no vertical pan room,
     which pins the face at 42% height, directly behind the wordmark. */
  object-position: 50% 50%;
  filter: saturate(0.92) contrast(1.06) brightness(1.5);
}

/* Desktop has room to push the scene right, so the face clears the wordmark.
   The source is only ~170px wider than the frame at this aspect, which is not
   enough pan on its own, hence the scale. */
@media (min-width: 900px) {
  .hero-bg {
    object-position: 0% 42%;
    transform: scale(1.3);
    transform-origin: left center;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Narrow screens read top to bottom: art stays open up top, dark under the
     text. A left-to-right wash would just bury the face on a phone. */
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 10, 0.42) 0%,
    rgba(8, 8, 10, 0.16) 26%,
    rgba(8, 8, 10, 0.74) 54%,
    rgba(8, 8, 10, 0.96) 100%);
}

@media (min-width: 900px) {
  .hero::before {
    background:
      radial-gradient(120% 100% at 68% 42%, rgba(8, 8, 10, 0) 0%, rgba(8, 8, 10, 0.42) 56%, rgba(8, 8, 10, 0.92) 100%),
      linear-gradient(to right, rgba(8, 8, 10, 0.97) 0%, rgba(8, 8, 10, 0.9) 34%, rgba(8, 8, 10, 0.45) 58%, rgba(8, 8, 10, 0.08) 100%);
  }
}

/* Softens the art under the copy. Masked backdrop-filter rather than a baked
   blur in the image, because the hero art is panned and scaled differently per
   breakpoint, so a baked blur would drift out of register with the text.
   Sits above the art but before .hero-inner in the DOM, so the copy stays sharp. */
.hero-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(13px) saturate(0.9);
  -webkit-backdrop-filter: blur(13px) saturate(0.9);
  /* Narrow screens read top to bottom, so blur under the text at the bottom. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, #000 56%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, #000 56%, #000 100%);
}


@media (min-width: 900px) {
  .hero-blur {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 26%, transparent 60%);
            mask-image: linear-gradient(to right, #000 0%, #000 26%, transparent 60%);
  }
}

.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255, 35, 35, 0.55);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 35, 35, 0.5); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 35, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 35, 35, 0); }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* The full product name is one heading: "MOGGED" plus "Looksmaxxing
   Simulator". Visually unchanged, but the page's h1 is now the complete
   title rather than the bare word. */
.hero h1 { margin: 0; }

.hero h1 .title-main {
  display: block;
  font-family: var(--display);
  font-size: clamp(4.2rem, 17vw, 13rem);
  line-height: 0.82;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.sub {
  display: block;
  font-family: var(--display);
  /* Anton ships a single weight. Inside an <h1> it inherits bold and the
     browser fakes it by smearing the glyphs, which reads as mud at this
     letter-spacing. Pin it to the real weight. */
  font-weight: 400;
  font-size: clamp(1.05rem, 3.4vw, 2rem);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0.7rem 0 0;
}

.tag {
  max-width: 42ch;
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: #d6d3cc;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.meta li { display: flex; align-items: center; gap: 1.4rem; }
.meta li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-2);
  margin-left: -0.9rem;
}

/* ---------- shared section chrome ---------- */

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 4.75rem) var(--pad);
}

.h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 2.5rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.num {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--red);
}

.pitch {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad) 0;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.55;
}
.pitch p { margin: 0 0 1.1rem; }
.pitch p:last-child { color: var(--ink-dim); margin-bottom: 0; }
@media (min-width: 860px) {
  .pitch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3.5rem;
  }
  .pitch p { margin-bottom: 0; }
}

/* ---------- the loop ---------- */

.loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.loop-card {
  background: var(--bg-2);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.loop-when {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1.4rem;
}
.loop-card h3 {
  font-size: 1.35rem;
  margin: 0 0 0.7rem;
  line-height: 1.25;
}
.loop-card p { margin: 0; color: var(--ink-dim); }

/* ---------- features ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.card:hover { border-color: var(--line-2); background: var(--bg-3); }
.card h3 {
  font-size: 1.2rem;
  margin: 0 0 0.65rem;
  line-height: 1.3;
}
.card p { margin: 0; color: var(--ink-dim); font-size: 0.97rem; }

/* ---------- gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.shot {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  transition: border-color 0.2s ease;
}
.shot--wide {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 1;
}
@media (max-width: 560px) {
  .shot--wide { aspect-ratio: 16 / 9; }
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.25s ease;
  opacity: 0.88;
}
.shot:hover { border-color: var(--red); }
.shot:hover img { transform: scale(1.035); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .shot img, .shot:hover img { transform: none; transition: opacity 0.2s ease; }
}

/* ---------- threats ---------- */

.threats {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.threats li {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: 1rem 2rem;
  align-items: baseline;
  padding: 1.2rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.threats li:hover { background: var(--bg-2); padding-left: 1rem; }
.threats strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.threats span { color: var(--ink-dim); }
@media (max-width: 620px) {
  .threats li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ---------- cta band ---------- */

.band {
  text-align: center;
  padding: clamp(4rem, 9vw, 6.5rem) var(--pad);
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(255, 35, 35, 0.14) 0%, transparent 62%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 0.8rem;
}
.band p { margin: 0 0 2rem; color: var(--ink-dim); }
.cta-centre { justify-content: center; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 500;
  font-size: 1.05rem;
  position: relative;
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--red);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0 0 1.4rem;
  color: var(--ink-dim);
  max-width: 62ch;
}

/* ---------- footer ---------- */

.foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3rem var(--pad) 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}
.foot-brand img { border-radius: 50%; }
.foot-studio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
}
.foot-studio span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5f5d58;
}
.foot-studio img {
  height: 38px;
  width: auto;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.foot-studio:hover img { opacity: 1; }

.foot-social {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}
.foot-social a {
  display: inline-flex;
  color: var(--ink-dim);
  transition: color 0.18s ease, transform 0.18s ease;
}
.foot-social a:hover { color: var(--ink); transform: translateY(-2px); }
.ico-soc { width: 20px; height: 20px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .foot-social a:hover { transform: none; }
}

.foot-links { display: flex; gap: 1.5rem; }
.foot-links a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ico-sm {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.foot-fine {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.75rem;
  color: #5f5d58;
}

/* ---------- long-form pages (privacy) ---------- */

.prose { max-width: 760px; }
.prose .updated {
  margin: -1.6rem 0 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5f5d58;
}
.prose h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 2.6rem 0 0.8rem;
}
.prose h3 {
  font-size: 1.05rem;
  margin: 1.6rem 0 0.5rem;
}
.prose p { margin: 0 0 1rem; color: #c9c6bf; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }

.prose .plain { list-style: none; padding: 0; margin: 0 0 1rem; }
.prose .plain li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: #c9c6bf;
}
.prose .plain li:first-child { border-top: 1px solid var(--line); }
.prose .plain a { display: inline-block; margin-top: 0.4rem; font-size: 0.9rem; }

.prose .addr {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--line-2);
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}

.callout {
  border-left: 3px solid var(--red);
  background: var(--bg-2);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.5rem;
}
.callout p { margin: 0; color: var(--ink); }

/* ---------- contact form ---------- */

.contact-intro {
  max-width: 52ch;
  margin: -1.4rem 0 2.2rem;
  color: var(--ink-dim);
}

.form { max-width: 620px; }

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field .opt {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #5f5d58;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  border-radius: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field textarea { resize: vertical; min-height: 140px; }

.field input:hover,
.field textarea:hover { border-color: var(--line-2); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: var(--bg-3);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); }

.err {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  color: var(--red);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#cSend[disabled] { opacity: 0.55; cursor: progress; }

.form-status {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  min-height: 1.4em;
}
.form-status.ok { color: #7fd48a; }
.form-status.bad { color: var(--red); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 4, 5, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }

.lb-figure {
  margin: 0;
  max-width: 1400px;
  width: 100%;
  text-align: center;
}
.lb-figure img {
  width: 100%;
  height: auto;
  max-height: 78svh;
  object-fit: contain;
  border: 1px solid var(--line);
}
.lb-figure figcaption {
  margin-top: 1rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

.lb-close,
.lb-nav {
  position: absolute;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.lb-close:hover,
.lb-nav:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--line-2); }

.lb-close {
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  font-size: 2rem;
}
.lb-prev { left: 0.75rem; }
.lb-next { right: 0.75rem; }

@media (max-width: 620px) {
  .lb-nav { top: auto; bottom: 1rem; transform: none; height: 46px; }
  .lb-prev { left: 25%; }
  .lb-next { right: 25%; }
}

body.lb-open { overflow: hidden; }

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- phone overrides ----------
   MUST stay last in the file. Media queries add no specificity, so these
   rules only win by source order. Sitting above the base component styles
   is how .meta, .tag, .cta-row and the h1 size were silently overridden. */

/* Phones. The binding constraint is Safari's real content height, which on an
   iPhone XS is ~635px, not the 812px screen height. Minus the nav that leaves a
   573px hero, and the copy block has to be small enough to leave the face a
   band to sit in. Every trim below buys vertical room for the art. */
@media (max-width: 899px) {
  .hero {
    min-height: calc(100svh - var(--nav-h));
    padding-bottom: 2rem;
  }
  .hero h1 .title-main { font-size: clamp(3.5rem, 15vw, 5rem); }
  .tag { margin-top: 1rem; }
  .cta-row { margin-top: 1.5rem; }

  /* Pan the art to the top of its overflow. At short viewports the portrait
     crop is taller than the hero, so this lifts the face clear of the copy.
     At tall viewports there is no overflow and this is simply a no-op. */
  .hero-bg { object-position: 50% 100%; }

  /* The spec line costs ~60px of the exact space the face needs, and the same
     facts are already in the feature cards and the FAQ. */
  .meta { display: none; }
}