/* ============================================================
   MAINFRAME — Public Website
   Responsive, full-bleed, scroll-driven. GoDaddy-compatible static site.
   ============================================================ */

/* Fonts — Google Fonts (CDN). Geist has wght-only axis; italic "AI" is faux-italic.
   Playfair Display Italic 700 is loaded for editorial bold-italic accents. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Instrument+Serif:ital,wght@0,400;1,400&family=Playfair+Display:ital,wght@1,700&display=swap');

:root {
  --bone:        #F2EBDD;
  --bone-soft:   #F8F3E7;
  --bone-deep:   #E8DFC9;
  --bone-line:   #DCD2BB;
  --ink:         #1A1814;
  --ink-soft:    #4A463F;
  --ink-mute:    #7A746B;
  --ink-faint:   #B5AE9F;
  --rust:        #B84E2F;
  --rust-deep:   #8A3A1F;
  --ember:       #E8A82D;
  --clay:        #9C6244;

  --font-sans:  'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  --hairline: rgba(26,24,20,0.10);
  --hairline-bone: rgba(242,235,221,0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   NAV — fixed top, translucent → solid on scroll
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px clamp(24px, 4vw, 80px);
  /* On notched / dynamic-island devices push the nav below the safe area */
  padding-top: max(24px, env(safe-area-inset-top, 24px));
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(24px, 4vw, 56px);
  background: transparent;
  transition: background 400ms var(--ease-out), backdrop-filter 400ms var(--ease-out), border-bottom 400ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: rgba(242, 235, 221, 0.88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.nav-wordmark {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-12px);
  pointer-events: none;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.nav-wm-img {
  display: block;
  height: clamp(20px, 2.2vw, 28px);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.nav.solid .nav-wordmark {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.nav-links { display: flex; gap: clamp(20px, 3vw, 36px); align-items: center; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.nav.solid .nav-links a { color: var(--ink); }
.nav-links a:hover { border-bottom-color: var(--rust); color: var(--rust); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 18px;
  background: var(--rust);
  color: var(--bone);
  border: 0;
  border-radius: 0;
  transition: background 240ms var(--ease-out);
}
.nav-cta:hover { background: var(--rust-deep); }

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

/* ============================================================
   HERO — full-bleed reel
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--ink);
}
.hero-video, .hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video { z-index: 1; }
.hero-poster { z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,24,20,0.65) 0%, rgba(26,24,20,0.25) 28%, rgba(26,24,20,0.18) 60%, rgba(26,24,20,0.75) 100%);
  z-index: 2;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(96px, 12vh, 160px) clamp(24px, 4vw, 80px) clamp(48px, 6vh, 80px);
  color: var(--bone);
}

/* The lockup: studio overline on the LEFT, wordmark + small mark on the RIGHT.
   Centered vertically as a group on the hero. */
.hero-lockup {
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 56px);
  opacity: 0; transform: translateY(20px);
  animation: hero-rise 1200ms var(--ease-out) 500ms forwards;
  flex-wrap: wrap;
}

.hero-overline {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.9vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  text-align: left;
  font-weight: 400;
  border-left: 1.5px solid var(--rust);
  padding-left: clamp(14px, 1.2vw, 22px);
}

.hero-lockup .ai { font-style: italic; }

/* The block + wordmark — one inseparable unit so the block stays inline
   to the left of the M and doesn't wrap onto its own line. */
.hero-mainmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

/* The image-based wordmark — height-based on desktop (original sizing).
   Mobile/narrow uses width-based sizing via the @media block below to
   prevent the 8.1:1 lockup from being squashed by viewport clamping. */
.hero-wordmark-img {
  display: block;
  height: clamp(70px, 12vw, 200px);
  width: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-bottom {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .hero-lockup { flex-direction: column; gap: 20px; }
  .hero-overline { border-left: 0; border-top: 1.5px solid var(--rust); padding: 14px 0 0; text-align: center; }
  .hero-lockup .lockup-block { margin-top: 4px; }
}
.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  color: var(--bone);
  margin: 0;
  max-width: 18ch;
  opacity: 0; transform: translateY(20px);
  animation: hero-rise 1200ms var(--ease-out) 1200ms forwards;
}
.hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-line);
  text-align: right;
  opacity: 0; transform: translateY(20px);
  animation: hero-rise 1200ms var(--ease-out) 1500ms forwards;
}
.hero-meta div { margin-top: 4px; }
.hero-meta .rust { color: var(--ember); }

@media (max-width: 540px) {
  .hero-bottom { justify-content: center; text-align: center; }
  .hero-meta { text-align: center; }
}

/* ============================================================
   MOBILE HERO — cinematic letterbox layout.
   On portrait viewports the hero video sits as a real landscape
   16:9 band (not cropped to fill the viewport). Content stacks
   above and below the band, on an ink background — like a film
   frame in a cinema.
   ============================================================ */
@media (max-width: 720px) {
  /* Card videos: keep landscape inside their 16:9 thumbnails */
  .what-card .still { background-color: var(--ink); }
  .what-card .still-video { object-fit: cover; object-position: center; }

  /* Hero on mobile: a 3-row CSS grid. The video band and the wordmark
     occupy the SAME middle row ("stage"), so the wordmark naturally
     overlays the video while the overline and tagline sit cleanly above
     and below. */
  .hero {
    height: auto;
    min-height: 100vh;
    background: var(--ink);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "overline"
      "stage"
      "bottom";
    align-content: center;
    align-items: center;
    gap: clamp(28px, 5vh, 56px);
    padding: clamp(96px, 14vh, 140px) 0 clamp(48px, 8vh, 96px);
  }

  /* Dissolve wrappers so children can be addressed by grid-area directly */
  .hero-content { display: contents; color: var(--bone); }
  .hero-lockup { display: contents; }

  /* Overline → top row */
  .hero-overline {
    grid-area: overline;
    border-left: 0;
    border-top: 1.5px solid var(--rust);
    padding: 14px 0 0;
    text-align: center;
    letter-spacing: 0.22em;
    font-size: clamp(15px, 4vw, 18px);
    color: var(--bone-line);
    line-height: 1.4;
    justify-self: center;
  }

  /* Video band → middle row, full-bleed landscape */
  .hero-video,
  .hero-poster {
    grid-area: stage;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    z-index: 1;
  }
  .hero-poster { display: none; }
  .hero-overlay { display: none; }

  /* Wordmark → ALSO middle row, sits on top of the video band */
  .hero-mainmark {
    grid-area: stage;
    z-index: 5;
    justify-self: center;
    align-self: center;
    pointer-events: none;
    /* Subtle drop shadow so the wordmark holds against bright frames */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
  }
  .hero-wordmark-img {
    width: min(92vw, 540px);
    height: auto;
    max-width: 100%;
  }

  /* Tagline + meta → bottom row */
  .hero-bottom {
    grid-area: bottom;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 0 28px;
    color: var(--bone);
  }
  .hero-tagline {
    font-size: clamp(22px, 7vw, 34px);
    max-width: none;
    margin: 0;
    color: var(--bone);
  }
  .hero-meta {
    text-align: center;
    color: var(--bone-line);
  }

  /* Hide the scroll-cue on mobile */
  .scroll-cue { display: none; }

  /* Nav: ensure it clears the iPhone dynamic island / status bar.
     The iOS status bar is ~62px tall; we push the nav down enough that
     links and the CTA pill never sit behind device chrome. */
  .nav {
    padding-top: max(72px, calc(env(safe-area-inset-top, 24px) + 12px));
  }
}

.scroll-cue {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-line);
  opacity: 0;
  animation: hero-rise 1200ms var(--ease-out) 1800ms forwards, scroll-bob 2400ms ease-in-out 2200ms infinite;
}
.scroll-cue::after {
  content: '↓';
  display: block; margin-top: 6px;
  font-size: 16px; color: var(--rust);
}

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   SECTIONS — scroll reveal
   ============================================================ */
section {
  padding: clamp(96px, 14vh, 200px) clamp(24px, 5vw, 96px);
  position: relative;
}
.section-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
}
.section-head {
  display: flex; align-items: baseline; gap: 32px;
  margin-bottom: clamp(40px, 6vh, 96px);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 120px);
  letter-spacing: -0.032em;
  line-height: 0.95;
  margin: 0;
  flex: 1;
  text-wrap: balance;
}
.section-head h2 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

/* Section sub-line — sits beneath the headline, mid-tone weight. */
.section-sub {
  flex-basis: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 32ch;
}
.section-sub em {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* Slide-in reveal — driven by JS IntersectionObserver */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal-right.in { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out); }
.reveal-scale.in { opacity: 1; transform: scale(1); }

.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }
.reveal-delay-4 { transition-delay: 480ms; }

/* ============================================================
   THESIS — manifesto section: "Render now, greenlight later."
   Bone bg, massive editorial type, brandmark anchor on line 1.
   Cinematic character-by-character reveal cascade.
   ============================================================ */
.thesis {
  background: var(--bone);
  padding: clamp(120px, 20vh, 220px) clamp(24px, 5vw, 96px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.thesis-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 7vh, 88px);
}

/* Section key + rust rule wipe */
.thesis-key {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--ink);
}
.thesis-key-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rust);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.thesis-key-rule {
  flex: 1;
  height: 1.5px;
  background: var(--rust);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1200ms var(--ease-out);
}

.thesis-headline {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(60px, 10vw, 168px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 0.04em;
}
.thesis-headline .brandmark {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.thesis-headline .line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.28em;
}
.thesis-headline .line-1 {
  align-items: center;
}

/* Character-by-character reveal — each .ch rises from below with a mask.
   The .word container clips the descender so characters appear to rise
   out of the baseline. */
.thesis-headline .word,
.thesis-headline .serif-word {
  display: inline-flex;
  overflow: hidden;
  line-height: 0.92;
  padding-bottom: 0.1em;
}
.thesis-headline .ch {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 800ms var(--ease-out), opacity 600ms var(--ease-out);
}

/* The italic serif word sits at the heart of the headline.
   Italic serifs have a negative left bearing — add padding-left so the
   'g' (and any other character with left overshoot) doesn't get clipped
   by the overflow:hidden mask. */
.thesis-headline .serif-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
  letter-spacing: -0.02em;
  font-size: 1.08em;
  margin-right: 0.04em;
  padding-left: 0.08em;
}

.thesis-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
  padding-left: clamp(20px, 2vw, 32px);
  position: relative;
}
.thesis-quote::before {
  /* Rust left rule that draws down */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.5px;
  background: var(--rust);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 900ms var(--ease-out);
}
.thesis-quote .qword {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.thesis-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.thesis-foot .mono:first-child { color: var(--ink); }

/* ACTIVE STATE — the cascade. Most timing is on individual elements
   below via JS-assigned transition-delays for per-character stagger. */
.thesis.in .thesis-key-label   { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.thesis.in .thesis-key-rule    { transform: scaleX(1); transition-delay: 200ms; }
.thesis.in .thesis-headline .brandmark { opacity: 1; transform: translateX(0); transition-delay: 400ms; }
.thesis.in .thesis-headline .ch { opacity: 1; transform: translateY(0); }
.thesis.in .thesis-quote::before { transform: scaleY(1); transition-delay: var(--quote-delay, 1500ms); }
.thesis.in .thesis-quote .qword { opacity: 1; transform: translateY(0); }
.thesis.in .thesis-foot { opacity: 1; transform: translateY(0); }

/* ============================================================
   PROMISE — three big phrases stacked within a single viewport.
   The whole composition reveals at once with cascading delays.
   ============================================================ */
.promise {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(96px, 14vh, 180px) clamp(24px, 5vw, 96px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 88px);
  min-height: 100vh;
  justify-content: center;
}

.promise .panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 0;
  gap: clamp(16px, 2vh, 28px);
}

.promise .panel-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rust);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}

.promise .phrase {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(56px, 11vw, 180px);
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(20px, 2vw, 56px);
  row-gap: 0;
  color: var(--bone);
}

.promise .phrase .word,
.promise .phrase .serif {
  display: inline-flex;
  overflow: hidden;
  line-height: 0.88;
  padding-bottom: 0.08em;          /* room for descenders during reveal */
}
.promise .phrase .word > span,
.promise .phrase .serif > span {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}

/* Twelve in big editorial italic serif */
.promise .phrase .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.01em;
}

.promise .phrase .brandmark {
  /* Same relationship as the logo lockup: bar slightly below the
     wordmark's centerline, sitting close to the M. Sized in em so it
     scales perfectly with the type. */
  width: 0.62em;
  height: 0.24em;
  background: var(--rust);
  flex-shrink: 0;
  align-self: center;
  /* Push down — places the mark's center just below the cap centerline */
  margin-top: 0.16em;
  /* Closer to the text */
  margin-right: 0.14em;
  /* Reveal — slide in from the left */
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}

.promise .panel-rule {
  height: 1.5px;
  background: var(--rust);
  width: 0;
  transition: width 1200ms var(--ease-out) 600ms;
}

.promise .panel-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out) 1000ms, transform 700ms var(--ease-out) 1000ms;
}
.promise .panel-foot .mono { color: var(--rust); }

/* Cascade panel reveals — each panel waits longer to start. */
.promise .panel.live .panel-key { opacity: 1; transform: translateY(0); }
.promise .panel.live .phrase .word > span,
.promise .panel.live .phrase .serif > span {
  opacity: 1;
  transform: translateY(0);
}
.promise .panel.live .phrase .brandmark {
  opacity: 1;
  transform: translateX(0);
}
.promise .panel.live .panel-rule { width: 100%; }
.promise .panel.live .panel-foot { opacity: 1; transform: translateY(0); }

@media (max-width: 720px) {
  /* Each phrase fits on one line and stays in the visual rhythm:
     - PDF in. / Reel out. / Twelve days.
     The Twelve word is set in big italic serif (1.1em scale) so we keep
     the base font-size moderate to absorb that lift. */
  .promise .phrase { font-size: clamp(40px, 11vw, 64px); }
  .promise { gap: clamp(28px, 5vh, 56px); padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 96px); }

  /* Brandmark scales with em — keep its relationship inside the phrase */
  .promise .phrase .brandmark { width: 0.6em; height: 0.22em; }

  /* The panel footer is mono and tight; nothing extra needed. */
}

/* ============================================================
   WHAT WE DO — three columns, terracotta section
   ============================================================ */
.what {
  background: var(--rust);
  color: var(--bone);
}
.what .section-head {
  border-bottom-color: var(--bone-line);
}
.what .section-head h2 {
  color: var(--bone);
}
.what .section-head h2 .serif {
  color: var(--ember);
}
.what .section-key {
  color: var(--bone);
}
.what .section-sub {
  color: var(--bone-line);
}
.what .section-sub em {
  color: var(--bone);
}
.what-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.what-card {
  background: var(--bone-soft);
  border: 1px solid var(--rust-deep);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.what-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(26,24,20,0.20);
}
.what-card .label-row {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 14px;
}
.what-card .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 500;
}
.what-card .spec {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
}
.what-card .still {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  background-color: var(--bone-deep);
  background-size: cover; background-position: center;
  filter: saturate(0.85) contrast(1.05);
}
.what-card .still-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Tap-to-play affordance + back/close button overlay for fullscreen mode */
.what-card .still {
  cursor: pointer;
}

/* Close button appears only when the still container is in fullscreen mode.
   iOS Safari uses its own native player + Done button, so this serves the
   desktop / Android Fullscreen API path. */
.what-card .still-close {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: rgba(26, 24, 20, 0.65);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(242, 235, 221, 0.35);
  border-radius: 999px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.what-card .still-close:hover {
  background: var(--rust);
  border-color: var(--rust);
}
.what-card .still-close::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-right: 8px solid var(--bone);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* When the container is fullscreen, reveal the back button */
.what-card .still:fullscreen .still-close,
.what-card .still:-webkit-full-screen .still-close {
  display: inline-flex;
}
.what-card .still:fullscreen,
.what-card .still:-webkit-full-screen {
  background: var(--ink);
  aspect-ratio: auto !important;   /* fill the viewport in fullscreen */
}
.what-card .still:fullscreen .still-video,
.what-card .still:-webkit-full-screen .still-video {
  object-fit: contain;
}

.what-card .play-cue {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(26, 24, 20, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(242, 235, 221, 0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.what-card .play-cue::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 14px solid var(--bone);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.what-card:hover .play-cue,
.what-card:focus-within .play-cue,
.what-card.in .play-cue {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.what-card .still:hover .play-cue {
  background: var(--rust);
  border-color: var(--rust);
  transform: translate(-50%, -50%) scale(1.05);
}
.what-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
  /* Reserve two lines so paragraphs across all three cards align at the same Y */
  min-height: calc(2 * 1.1em);
}
.what-card p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.what-card .num,
.what-card .spec { color: var(--ink); }
.what-card .spec { border-color: var(--bone-line); }

@media (max-width: 900px) {
  .what-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   MOBILE WHAT-WE-DO — cinematic card treatment.
   Desktop keeps its bone-soft tile aesthetic; mobile replaces the
   solid panel with a transparent stage framed by ink corner brackets
   and an animated keyframe entrance.
   ============================================================ */
@media (max-width: 720px) {
  .what {
    /* mobile keeps the terracotta panel — corner brackets and labels
       are flipped to bone for contrast */
    background: var(--rust);
    padding-top: clamp(80px, 12vh, 140px);
    padding-bottom: clamp(80px, 12vh, 140px);
  }

  .what-grid {
    grid-template-columns: 1fr;
    gap: clamp(56px, 8vh, 88px);
  }

  .what-card {
    background: transparent;
    border: 0;
    padding: 22px;
    position: relative;
    box-shadow: none;
  }
  .what-card:hover { transform: none; box-shadow: none; }

  /* Corner brackets in BONE for contrast against the rust ground */
  .what-card::before,
  .what-card::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--bone);
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .what-card::before {
    top: 0; left: 0;
    border-right: 0; border-bottom: 0;
    transform: translate(8px, 8px);
  }
  .what-card::after {
    bottom: 0; right: 0;
    border-left: 0; border-top: 0;
    transform: translate(-8px, -8px);
  }
  .what-card.in::before,
  .what-card.in::after { opacity: 1; transform: translate(0, 0); }

  /* Label row — slate strip in bone tones */
  .what-card .label-row {
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(242, 235, 221, 0.25);
    justify-content: space-between;
  }
  .what-card .num {
    font-size: 11px;
    color: var(--bone);
  }
  .what-card .spec {
    border: 0;
    padding: 0;
    color: var(--bone-line);
  }

  /* Still / video frame: keep the inner brackets bone */
  .what-card .still {
    margin-bottom: 22px;
    position: relative;
    filter: saturate(0.92) contrast(1.05);
  }
  .what-card .still::before,
  .what-card .still::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    border: 1.5px solid var(--bone);
    pointer-events: none;
    z-index: 2;
  }
  .what-card .still::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
  .what-card .still::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

  /* Title + body — bone tones over rust */
  .what-card h3 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.05;
    margin-bottom: 12px;
    color: var(--bone);
  }
  .what-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--bone-line);
  }
  .what-card p em {
    color: inherit;
    font-style: italic;
  }

  /* Reveal animation — card content rises and brackets snap in */
  .what-card .still,
  .what-card .label-row,
  .what-card h3,
  .what-card p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .what-card.in .label-row { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
  .what-card.in .still     { transition-delay: 220ms; opacity: 1; transform: translateY(0); }
  .what-card.in h3         { transition-delay: 340ms; opacity: 1; transform: translateY(0); }
  .what-card.in p          { transition-delay: 460ms; opacity: 1; transform: translateY(0); }

  /* HOW-step process cards on mobile — same hairline / corner-bracket
     vibe so the section visual rhythm matches. */
  .how-step {
    padding-top: 18px;
    position: relative;
  }
}

/* ============================================================
   HOW WE WORK — process strip + intersection chart
   ============================================================ */
.how {
  background: var(--bone-soft);
}
.how-chart {
  margin-bottom: clamp(48px, 6vh, 96px);
  background: transparent;
  border: 0;
}
.how-chart img {
  width: 100%; height: auto;
  max-height: 600px;
  object-fit: contain;
}

/* ============================================================
   CHART animation — curves draw in, bullseye pops, lockup arrives.
   Triggered by the existing .reveal-scale.in class on .how-chart.
   ============================================================ */
.chart-svg {
  width: 100%;
  height: auto;
  max-height: 600px;
  display: block;
}

/* Initial state — everything hidden / pre-animated */
.chart-svg .chart-axes,
.chart-svg .chart-ticks,
.chart-svg .chart-axis-title {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.chart-svg .chart-curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1800ms var(--ease-out);
}

.chart-svg .chart-label {
  opacity: 0;
  transform: translateY(8px);
  transform-origin: center;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.chart-svg .chart-bullseye {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out);
}
.chart-svg .chart-bullseye-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 700ms var(--ease-out);
}
.chart-svg .chart-bullseye-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 500ms var(--ease-out);
}

.chart-svg .chart-lockup {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

/* Active state — when section enters viewport, kick off the cascade */
.reveal-scale.in .chart-svg .chart-axes        { opacity: 1; transition-delay: 0ms; }
.reveal-scale.in .chart-svg .chart-ticks       { opacity: 1; transition-delay: 200ms; }
.reveal-scale.in .chart-svg .chart-axis-title  { opacity: 1; transition-delay: 400ms; }

.reveal-scale.in .chart-svg .chart-curve {
  stroke-dashoffset: 0;
  transition-delay: 500ms;
}

.reveal-scale.in .chart-svg .chart-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1700ms;
}

.reveal-scale.in .chart-svg .chart-bullseye   { opacity: 1; transition-delay: 2100ms; }
.reveal-scale.in .chart-svg .chart-bullseye-ring { transform: scale(1); transition-delay: 2100ms; }
.reveal-scale.in .chart-svg .chart-bullseye-dot  { transform: scale(1); transition-delay: 2350ms; }

.reveal-scale.in .chart-svg .chart-lockup {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2500ms;
}
.how-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.how-step {
  border-top: 1.5px solid var(--ink);
  padding-top: 24px;
}
.how-step .num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--rust);
  letter-spacing: 0.04em;
}
.how-step h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 12px 0 14px;
  color: var(--ink);
}
.how-step p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .how-process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .how-process { grid-template-columns: 1fr; }
}

/* ============================================================
   STUDIO — about the company
   ============================================================ */
.studio {
  background: var(--ink);
  color: var(--bone);
}
.studio .section-head h2 { color: var(--bone); }
.studio .section-head { border-bottom-color: var(--bone-line); }
.studio .section-key { color: var(--ember); }
.studio .section-sub { color: var(--bone-line); }
.studio .section-sub em { color: var(--bone); }

.studio-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.studio-prose .lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
  color: var(--bone);
  margin: 0 0 32px;
  letter-spacing: -0.012em;
}
.studio-prose .body {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--bone-line);
  margin: 0 0 var(--s-5, 24px);
  max-width: 56ch;
}
.studio-prose .body:last-child { margin-bottom: 0; }
/* Editorial emphasis — bold+italic markup renders as Playfair Display italic 700, ember accent */
.studio-prose .body strong em,
.studio-prose .body em strong {
  font-family: 'Playfair Display', var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1em;
  letter-spacing: -0.005em;
  color: var(--ember);
}

.studio-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  padding-top: 16px;
  border-top: 1.5px solid var(--bone-line);
}
.studio-stats .stat .v {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 5.5vw, 88px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ember);
}
.studio-stats .stat .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-line);
  margin-top: 12px;
}

@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SEND A SCRIPT — contact CTA
   ============================================================ */
.send {
  background: var(--bone);
  padding-bottom: clamp(80px, 12vh, 160px);
}
.send-block {
  text-align: left;
  max-width: 1500px;
}
.send-hero {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 160px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 48px;
  text-wrap: balance;
}
.send-hero .rust { color: var(--rust); }
.send-hero .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }

.send-meta {
  display: flex; gap: clamp(32px, 5vw, 96px);
  flex-wrap: wrap; margin-bottom: 48px;
  padding-top: 24px; border-top: 2px solid var(--ink);
}
.send-meta .item {
  display: flex; flex-direction: column; gap: 8px;
}
.send-meta .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.send-meta .value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.018em;
  color: var(--ink);
  transition: color 200ms var(--ease-out);
}
.send-meta a.value:hover {
  color: var(--rust);
}

.send-cta {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 22px 36px;
  background: var(--ink);
  color: var(--bone);
  transition: background 240ms var(--ease-out);
}
.send-cta:hover { background: var(--rust); }
.send-cta::after { content: '→'; font-family: var(--font-sans); }

/* ============================================================
   FOOTER — minimal ink bar
   ============================================================ */



/* ============================================================
   04 — WHY NOW — editorial trajectory layout (replaces chart)
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.why-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(360px, 2.6fr) minmax(220px, 1fr);
  column-gap: clamp(24px, 3vw, 64px);
  row-gap: 16px;
  align-items: center;
  padding: clamp(40px, 6vh, 80px) 0;
}

.why-meta {
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.why-meta .why-key {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
}
.why-meta .why-label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 44px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
  color: var(--ink);
}
.why-meta .why-arrow {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.why-row-rising .why-meta .why-arrow { color: var(--rust); }

.why-trajectory {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr minmax(120px, auto);
  align-items: stretch;
  gap: 12px;
  min-height: 180px;
}
.why-trajectory .why-from,
.why-trajectory .why-to {
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  z-index: 2;
}
.why-trajectory em {
  font-family: var(--font-sans);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(40px, 4.2vw, 68px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
  white-space: nowrap;
}
.why-trajectory .why-from span,
.why-trajectory .why-to span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.why-trajectory .why-to {
  text-align: right;
  align-items: flex-end;
}

/* Vertical placement of the values — make the curve visually start near
   the FROM value and end near the TO value. */
.why-row-falling .why-trajectory .why-from { align-self: flex-start; }
.why-row-falling .why-trajectory .why-to   { align-self: flex-end; }
.why-row-rising  .why-trajectory .why-from { align-self: flex-end; }
.why-row-rising  .why-trajectory .why-to   { align-self: flex-start; }

.why-trajectory .why-curve {
  width: 100%;
  height: 100%;
  color: var(--ink);
  align-self: stretch;
}
.why-row-rising .why-trajectory .why-curve { color: var(--rust); }

.why-trajectory .why-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.reveal.in .why-trajectory .why-path,
.why-grid.in .why-trajectory .why-path {
  stroke-dashoffset: 0;
}
/* Rising curve draws after the falling one for a nice cadence */
.why-row-rising .why-path { transition-delay: 200ms; }

.why-note {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* ── Intersection band — full-bleed dark cell ──────────────── */
.why-intersection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 56px);
  background: var(--ink);
  color: var(--bone);
  padding: clamp(28px, 4vh, 56px) clamp(24px, 4vw, 48px);
  position: relative;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  overflow: hidden;
}
.why-intersection::before,
.why-intersection::after {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(40px, 6vw, 96px);
  height: 1px;
  background: var(--ember, var(--rust-soft));
  opacity: 0.45;
}
.why-intersection::before { left: 8%;  }
.why-intersection::after  { right: 8%; }
.why-int-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone-line);
  white-space: nowrap;
}
.why-int-tag-end { color: var(--rust-soft); }
.why-int-year {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.why-int-mark {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  color: var(--rust);
}

/* Subtle scale-in for the intersection band */
.why-intersection .why-int-mark,
.why-intersection .why-int-year {
  display: inline-block;
  transform-origin: center;
  transform: scale(0.94);
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in .why-intersection .why-int-mark,
.reveal.in .why-intersection .why-int-year,
.why-grid.in .why-intersection .why-int-mark,
.why-grid.in .why-intersection .why-int-year {
  opacity: 1;
  transform: scale(1);
}
.reveal.in .why-intersection .why-int-year,
.why-grid.in .why-intersection .why-int-year {
  transition-delay: 550ms;
}
.reveal.in .why-intersection .why-int-mark,
.why-grid.in .why-intersection .why-int-mark {
  transition-delay: 800ms;
}

/* Mobile collapse */
@media (max-width: 900px) {
  .why-row {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 36px 0;
  }
  .why-trajectory {
    grid-template-columns: 1fr auto 1fr;
    min-height: 120px;
  }
  .why-trajectory em { font-size: clamp(32px, 8vw, 48px); }
  .why-intersection {
    flex-direction: column;
    gap: 12px;
    padding: 36px 24px;
  }
  .why-intersection::before,
  .why-intersection::after { display: none; }
}

/* MAINFRAME lockup inside the intersection band */
.why-int-lockup {
  display: block;
  height: clamp(28px, 3.4vw, 48px);
  width: auto;
  max-width: 100%;
  /* Sits in optical balance with the italic year and × mark */
}
@media (max-width: 900px) {
  .why-int-lockup { height: 32px; }
}


/* ============================================================
   2026-10 PRODUCTION REFRAME — additions
   ============================================================ */

/* ---------- Mobile menu: floating button + sheet ---------- */
.m-fab, .m-menu { display: none; }

@media (max-width: 720px) {
  /* Keep the quote button in the top bar on phones */
  .nav-cta { display: inline-flex; }

  .m-fab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    position: fixed; z-index: 160;
    right: 18px; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
    width: 64px; height: 64px; border-radius: 50%;
    border: 0; padding: 0; cursor: pointer;
    background: var(--rust);
    box-shadow: 0 10px 28px rgba(26, 24, 20, 0.35);
    transition: transform 250ms var(--ease-out), background 250ms;
  }
  .m-fab:active { transform: scale(0.94); }
  .m-fab span {
    display: block; width: 24px; height: 2px; background: var(--bone); border-radius: 2px;
    transition: transform 300ms var(--ease-out), opacity 200ms;
  }
  body.menu-open .m-fab { background: var(--ink); }
  body.menu-open .m-fab span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .m-fab span:nth-child(2) { opacity: 0; }
  body.menu-open .m-fab span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .m-menu { display: block; position: fixed; inset: 0; z-index: 150; }
  .m-menu[hidden] { display: none; }
  .m-menu-backdrop {
    position: absolute; inset: 0;
    background: rgba(26, 24, 20, 0.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 250ms var(--ease-out);
  }
  .m-menu-panel {
    position: absolute; right: 18px; left: 18px;
    bottom: calc(max(22px, calc(env(safe-area-inset-bottom) + 12px)) + 80px);
    display: flex; flex-direction: column;
    background: var(--bone);
    border-radius: 18px;
    padding: 22px 24px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(16px); opacity: 0;
    transition: transform 300ms var(--ease-out), opacity 250ms var(--ease-out);
  }
  body.menu-open .m-menu-backdrop { opacity: 1; }
  body.menu-open .m-menu-panel { transform: none; opacity: 1; }

  .m-menu-key {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--rust); margin-bottom: 6px;
  }
  .m-menu-panel a {
    font-family: var(--font-sans); font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--ink); text-decoration: none;
    padding: 12px 0; border-bottom: 1px solid var(--hairline);
  }
  .m-menu-panel a:active { color: var(--rust); }
  .m-menu-panel .m-menu-cta {
    margin-top: 14px; border-bottom: 0; text-align: center;
    background: var(--rust); color: var(--bone);
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 16px; border-radius: 4px;
  }
  body.menu-open { overflow: hidden; }
  /* Hide the floating button while a clip is playing */
  body.player-open .m-fab { display: none; }
}

/* Clip player */
.player {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26, 24, 20, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.player[hidden] { display: none; }
.player-video {
  width: min(100%, 1400px);
  max-height: calc(100vh - 140px);
  aspect-ratio: 16 / 9;
  background: #000;
}
.player-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top)); right: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bone); background: transparent;
  border: 1px solid var(--hairline-bone); padding: 12px 16px; cursor: pointer;
}
.player-close:hover { border-color: var(--rust); color: var(--rust); }
.player-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-line); margin: 0;
}
body.player-open { overflow: hidden; }

/* Second curve in the economics section draws in rust */
.why-row-rust .why-trajectory .why-curve { color: var(--rust); }
.why-row-rust .why-path { transition-delay: 200ms; }
.why-int-year { white-space: nowrap; font-size: clamp(32px, 4.4vw, 68px) !important; }
.why-int-lockup { max-width: 28%; height: auto; }
@media (max-width: 900px) { .why-int-year { white-space: normal; } }

/* Development: secondary, quieter section */
.develop { background: var(--bone); }
.dev-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.dev-item {
  border-top: 1.5px solid var(--ink);
  padding-top: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px; row-gap: 8px;
  align-items: baseline;
}
.dev-item .num {
  font-family: var(--font-mono); font-size: 14px; color: var(--rust);
}
.dev-item h4 {
  margin: 0;
  font-family: var(--font-sans); font-size: 20px; font-weight: 700; color: var(--ink);
}
.dev-item .spec, .dev-item p { grid-column: 1 / -1; }
.dev-item .spec {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.dev-item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 900px) { .dev-list { grid-template-columns: 1fr; } }

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--bone-line);
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: center; justify-content: space-between;
  padding: 28px clamp(24px, 5vw, 96px) max(28px, env(safe-area-inset-bottom));
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a { color: var(--bone); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* Stop slide-in animations from making phones scroll sideways */
html, body { overflow-x: clip; }

/* Four services across */
.what-grid { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 901px) {
  .what-card h3 { font-size: clamp(24px, 2vw, 32px); }
  .what-card p { font-size: 17px; }
}
.what-link {
  color: var(--rust); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid currentColor;
}
.what-link:hover { color: var(--rust-deep); }
@media (max-width: 1200px) { .what-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .what-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .what-link { color: var(--bone); } }

/* ---------- DISCRETION: "Nobody will know." ---------- */
.secret { background: var(--rust); color: var(--bone); }
.secret .section-head { border-bottom-color: var(--bone-line); }
.secret .section-head h2 { color: var(--bone); }
.secret .section-head h2 .serif { color: var(--ink); }
.secret .section-key { color: var(--bone); }
.secret .section-sub { color: var(--bone); }
.secret-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 96px); align-items: start;
}
.secret-lede {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; margin: 0;
}
.secret-list { display: grid; gap: 0; }
.secret-item {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 6px;
  padding: 22px 0; border-top: 1.5px solid var(--bone-line);
}
.secret-item:last-child { border-bottom: 1.5px solid var(--bone-line); }
.secret-item .num { font-family: var(--font-mono); font-size: 14px; color: var(--ink); grid-row: span 2; padding-top: 4px; }
.secret-item h4 { margin: 0; font-family: var(--font-sans); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.01em; }
.secret-item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--bone-soft); }
@media (max-width: 900px) { .secret-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) and (min-width: 721px) { .nav-links { gap: 16px; } }
/* Bone ring keeps the floating button visible over rust sections */
@media (max-width: 720px) {
  .m-fab { box-shadow: 0 0 0 2px var(--bone), 0 10px 28px rgba(26, 24, 20, 0.35); }
}

/* ---------- Tokens used by team.css (carried over from live site) ---------- */
:root{
  --gutter: clamp(24px,5vw,96px);
  --t-micro:11px; --t-small:14px; --t-tiny:10px;
  --r-1:2px;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --hairline-strong: rgba(26,24,20,0.16);
  --sh-pop:0 8px 24px rgba(26,24,20,0.08);
  --rust-soft:#E8997D;
}
.nav-wm-img { object-fit: contain; object-position: left center; }
@media (max-width: 1100px) and (min-width: 721px) { .nav-links { gap: 14px; } .nav-links a { letter-spacing: 0.12em; } }

/* ============================================================
   05 - THE SHOT THAT BREAKS THE BUDGET - epic-shot economics
   ============================================================ */
.epic { background: var(--ink); color: var(--bone); }
.epic .section-head { border-bottom-color: var(--bone-line); }
.epic .section-head h2 { color: var(--bone); }
.epic .section-head h2 .serif { color: var(--ember); }
.epic .section-key { color: var(--ember); }
.epic .section-sub { color: var(--bone-line); }
.epic .section-sub em { font-family: var(--font-serif); font-style: italic; color: var(--bone); }

.epic-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: center; }
.epic-build-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1.5px solid var(--bone-line); }
.epic-build-key { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); }
.epic-build-sum { font-family: var(--font-sans); font-weight: 800; font-size: clamp(28px,3vw,44px); letter-spacing: -0.03em; color: var(--bone); }
.epic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px,1.8vh,20px); }
.epic-item { display: grid; grid-template-columns: minmax(180px, 1.1fr) 2fr auto; align-items: center; gap: clamp(14px,2vw,28px); }
.epic-name { font-family: var(--font-sans); font-weight: 500; font-size: clamp(14px,1.3vw,17px); color: var(--bone); letter-spacing: -0.01em; }
.epic-sub { color: var(--ink-faint); font-weight: 400; }
.epic-bar { height: 10px; background: rgba(242,235,221,0.10); position: relative; overflow: hidden; }
.epic-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rust); transition: width 1.1s var(--ease-out); }
.reveal.in .epic-fill { width: var(--w); }
.epic-amt { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--bone-line); white-space: nowrap; }
.epic-aside { display: flex; flex-direction: column; gap: 28px; }
.epic-lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px,2.4vw,34px); line-height: 1.25; color: var(--bone); margin: 0; text-wrap: pretty; }
.epic-lede em { color: var(--ember); font-style: italic; }
.epic-compare { display: flex; flex-direction: column; gap: 18px; padding: 24px 0; border-top: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line); }
.epic-compare-row { display: grid; grid-template-columns: minmax(140px,1fr) 1.4fr 104px; align-items: center; gap: 16px; }
.epic-compare-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-line); }
.epic-compare-bar { height: 16px; background: rgba(242,235,221,0.08); position: relative; overflow: hidden; }
.epic-compare-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1.2s var(--ease-out); transition-delay: 300ms; }
.reveal.in .epic-compare-fill { width: var(--w); }
.epic-compare-real { background: var(--ink-faint); }
.epic-compare-mf { background: var(--ember); }
.epic-compare-val { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--bone); white-space: nowrap; text-align: right; }
.epic-compare-val-mf { color: var(--ember); }
.epic-offer { font-family: var(--font-sans); font-weight: 600; font-size: clamp(18px,1.7vw,24px); line-height: 1.35; color: var(--bone); margin: 0; letter-spacing: -0.015em; }
.epic-offer em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ember); }
.epic .film-cta { align-self: flex-start; }
@media (max-width: 900px) {
  .epic-body { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 540px) {
  .epic-item { grid-template-columns: 1fr auto; }
  .epic-item .epic-bar { display: none; }
}