/* ============================================================================
   home-v6.css — Version 7 landing page.
   Pixel-accurate recreation of /Users/mcosx/Desktop/SS/2.jpeg.

   The hero is built on a fixed 1536×1024 "design canvas". Every element uses
   absolute reference pixel coordinates taken from 2.jpeg, then the whole canvas
   is scaled (contain + centered) to the viewport via --hero-scale, which is set
   in script.js. This keeps the layout proportionally identical to the reference
   at any size, and a flow fallback (bottom of file) handles narrow screens.

   NOTE: no em-dashes in copy (Deniz's standing rule).
============================================================================ */

:root {
  --bg-main:               #FAF8F5;
  --bg-warm:               #F2EFEB;
  --ink-black:             #080808;
  --ink-body:              #2F2D2A;
  --ink-muted:             #5F5A55;
  --headline-warm-gray:    #D3C9BF;
  --rule-light:            #D9D2CA;
  --accent-gold:           #C6B18B;
  --accent-gold-soft:      #D7C7AD;
  --signature-ink:         #3E3A35;
}

/* ---- canvas ------------------------------------------------------------- */
.home-v6 {
  background:
    radial-gradient(120% 90% at 78% 92%, rgba(214,199,173,0.16) 0%, rgba(214,199,173,0) 55%),
    var(--bg-main);
  background-color: var(--bg-main);
  color: var(--ink-body);
  font-family: "Avenir Next", "Helvetica Neue", "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===========================================================================
   NAVIGATION — small, elegant, widely tracked (matches reference header).
=========================================================================== */
.home-v6 .nav {
  position: fixed;              /* same as the sub-pages: sticky + scroll-hide */
  top: 0; left: 0; right: 0;
  width: auto;
  box-sizing: border-box;
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;   /* match base box so centring is identical */
  height: var(--nav-h);        /* identical height/centring to the other pages */
  /* side inset shrinks with the viewport so the row never overflows */
  padding: 0 clamp(22px, 4.4vw, 63px);
  align-items: center;          /* brand + menu share one centre line */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* keep the home nav transparent even when scrolled (it lives over the hero);
   the base shell would otherwise drop a dark bar on scroll. */
.home-v6 .nav.is-scrolled { background: transparent; border-bottom-color: transparent; }

/* logo lockup — plain "DC" mark, no box */
.home-v6 .nav__brand { gap: clamp(16px, 3.2vw, 50px); align-items: center; }
.home-v6 .dc-mark {
  color: var(--ink-black);
  font-family: "Cormorant Garamond", "Helvetica Neue", "Helvetica", serif;
  font-weight: 500;
  letter-spacing: -1px;
  border: none;
  background: none;
  font-size: 32px;
  line-height: 1;
  padding: 0;
}
.home-v6 .nav__brand-text {
  color: var(--ink-black);
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: clamp(10px, 0.83vw, 12px);
  font-weight: 600;
  letter-spacing: clamp(1.5px, 0.18vw, 2.6px);
  text-transform: uppercase;
  align-self: center;
  white-space: nowrap;
}

/* menu items — gaps + type tighten as the window narrows (full size at large) */
.home-v6 .nav__right { gap: clamp(12px, 1.6vw, 34px); align-items: center; padding-top: 0; }
/* flex-centre the list + each item so the menu caps sit on the exact same line
   as the DC mark, brand, Listen and toggle (an inline line-box quirk made them
   ~1.4px low). */
.home-v6 .nav__list { gap: clamp(9px, 1.2vw, 22px); align-items: center; line-height: 1; }
.home-v6 .nav__list li { display: flex; align-items: center; }
.home-v6 .nav__list a {
  display: flex;
  align-items: center;
  color: var(--ink-black);
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: clamp(10px, 0.83vw, 12px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: clamp(1.2px, 0.16vw, 2.4px);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.92;
}
.home-v6 .nav__list a:hover { opacity: 1; }

/* listen pill — light, small, elegant */
.home-v6 .listen-pill {
  border: 1px solid var(--accent-gold);
  background: transparent;
  color: var(--ink-black);
  padding: 7px 16px;
  gap: 8px;
}
.home-v6 .listen-pill .label {
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.home-v6 .listen-pill .dot { background: var(--accent-gold); width: 6px; height: 6px; flex-shrink: 0; animation: dc-listen-pulse 2.4s ease-in-out infinite; }
@keyframes dc-listen-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214,178,105,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(214,178,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(214,178,105,0); }
}

/* ===========================================================================
   HERO — fixed design canvas, scaled to the viewport.
=========================================================================== */
.home-v6 .hero6 {
  position: relative;
  width: 100%;
  height: 100vh;
  background: transparent;
  overflow: hidden;
  /* centre the text canvas over the full-bleed video */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The text/cards canvas is scaled with `zoom`, NOT transform: scale().
   zoom re-rasterises glyphs at the final size so the headline stays razor
   sharp at any viewport; transform: scale() stretched the rendered bitmap
   and softened the type. */
.home-v6 .hero6__canvas {
  position: relative;
  z-index: 3;                /* above the full-bleed video (1) and wash (2) */
  flex: 0 0 auto;
  width: 1536px;
  height: 1024px;
  zoom: var(--hero-scale, 1);
}

/* ---- loop video media layer (v4 treatment: full-bleed, no crop) ---------- */
.home-v6 .hero6__art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-v6 .hero6__art video,
.home-v6 .hero6__art img {
  width: 100%;
  height: 100%;
  display: block;
  /* light mode: show the hero video as-is, full-bleed, no mask. */
  object-fit: cover;
  object-position: center center;
}

/* Light mode: gentle left->right wash only, just enough to keep the left-column
   copy legible over the video. No radial mask / vignette. */
.home-v6 .hero6__wash {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(250,248,245,0.92) 0%,
    rgba(250,248,245,0.70) 28%,
    rgba(250,248,245,0.20) 48%,
    rgba(250,248,245,0) 66%
  );
}

/* ---- headline ----------------------------------------------------------- */
.home-v6 .manifesto6 {
  position: absolute;
  z-index: 3;
  left: 127px;
  top: 150px;
  margin: 0;
  /* Inter (web-loaded) sits before Arial so the headline never falls back to
     the much wider Arial Black; if Neue Haas / Helvetica Neue Black is present
     locally it is used first. */
  font-family: "Neue Haas Grotesk Display", "Helvetica Neue", "Inter", "Helvetica", "Arial", sans-serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 67px;
  /* open, even tracking to match reference.png (was a cramped -2.2px). */
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.home-v6 .manifesto6__line { display: block; white-space: nowrap; }
.home-v6 .manifesto6__line.is-strong { color: var(--ink-black); }
.home-v6 .manifesto6__line.is-weak   { color: var(--headline-warm-gray); }

/* ---- signature (kept exactly — Allura script) --------------------------- */
.home-v6 .signature {
  position: absolute;
  z-index: 3;
  left: 130px;
  top: 514px;
  margin: 0;
  font-family: "Allura", cursive;
  font-size: 32px;
  line-height: 1;
  color: var(--signature-ink);
  opacity: 0.9;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- profession line ---------------------------------------------------- */
.home-v6 .roles6 {
  position: absolute;
  z-index: 3;
  left: 132px;
  top: 599px;
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--ink-body);
}

/* ---- body paragraph ----------------------------------------------------- */
.home-v6 .hero6__body {
  position: absolute;
  z-index: 3;
  left: 131px;
  top: 642px;
  width: 342px;
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.5px;
  letter-spacing: 0;
  color: var(--ink-body);
}
.home-v6 .hero6__body strong { font-weight: 700; color: var(--ink-black); }

/* ---- CTA ---------------------------------------------------------------- */
.home-v6 .cta6 {
  position: absolute;
  z-index: 3;
  left: 131px;
  top: 771px;
  width: 360px;
  height: 45px;
  text-decoration: none;
  color: var(--ink-black);
  display: block;
}
.home-v6 .cta6__text {
  position: absolute;
  left: 0;
  top: 17px;
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.home-v6 .cta6__text::after {
  content: "";
  position: absolute;
  left: 0; top: 20px;          /* underline at reference y 808 */
  width: 125px; height: 2px;
  background: var(--accent-gold);
}
.home-v6 .cta6__circle {
  position: absolute;
  left: 159px;                 /* reference circle x 290 - cta x 131 */
  top: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--accent-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-black);
  transition: transform .35s ease;
}
.home-v6 .cta6:hover .cta6__circle { transform: translateX(6px); }

/* ===========================================================================
   LEFT VERTICAL SCROLL LABEL + RULE
=========================================================================== */
.home-v6 .scroll6 {
  position: absolute;
  z-index: 3;
  left: 44px;
  top: 672px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-body);
  white-space: nowrap;
}
.home-v6 .scroll6__rule {
  position: absolute;
  z-index: 3;
  left: 52px;
  top: 855px;
  width: 1px;
  height: 127px;
  background: #A8A199;
  /* v5 (port 7575) scroll animation: a vertical line that draws and undraws
     (the text itself never fades). */
  transform-origin: top;
  animation: scrollLinePulse 2.4s ease-in-out infinite;
}
@keyframes scrollLinePulse {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ===========================================================================
   BOTTOM FEATURE CARDS — museum labels, sitting low like the reference.
=========================================================================== */
.home-v6 .pillars6 {
  position: absolute;
  z-index: 3;
  left: 130px;
  top: 868px;
  width: 690px;
  height: 120px;
}
.home-v6 .pillar6 {
  position: absolute;
  top: 0;
  width: 150px;
}
.home-v6 .pillar6:nth-child(1) { left: 0;   }
.home-v6 .pillar6:nth-child(2) { left: 180px; }
.home-v6 .pillar6:nth-child(3) { left: 350px; }
.home-v6 .pillar6:nth-child(4) { left: 508px; }

/* thin vertical separators between cards */
.home-v6 .pillar6:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 2px;
  width: 1px;
  height: 90px;
  background: var(--rule-light);
}

.home-v6 .pillar6__num {
  display: block;
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--ink-body);
  margin-bottom: 10px;
}
.home-v6 .pillar6__title {
  margin: 0 0 12px 0;
  font-family: "Avenir Next", "Helvetica Neue", "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--ink-black);
}
.home-v6 .pillar6__desc {
  margin: 0 0 12px 0;
  font-family: "Avenir Next", "Helvetica Neue", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
  color: #3B3935;
}
.home-v6 .pillar6__stroke {
  display: block;
  width: 24px;
  height: 1px;
  background: #AFA8A0;
}

/* ===========================================================================
   RESPONSIVE — narrow / portrait fallback: drop the scaled canvas, flow.
   Breakpoint matches the nav collapse (1200px) so the page is never part
   desktop / part mobile.
=========================================================================== */
@media (max-width: 1200px), (max-aspect-ratio: 11/10) {
  .home-v6 .hero6 {
    display: block;                 /* stack, not the desktop flex-centre */
    height: auto;
    min-height: auto;
    overflow: visible;
    /* clear the absolute header regardless of whether the video has loaded */
    padding-top: clamp(72px, 13vw, 96px);
  }
  .home-v6 .hero6__canvas {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none !important;
    zoom: 1 !important;                       /* drop the design-canvas scaling */
    padding: 12px clamp(22px, 6vw, 40px) 72px; /* nav cleared by the video banner */
    box-sizing: border-box;
  }

  /* video becomes a contained banner above the copy (it sits before the canvas
     in the DOM, so it naturally stacks on top once the hero is block flow). */
  .home-v6 .hero6__art {
    position: relative;
    inset: auto;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin: 0 auto 8px;
  }
  .home-v6 .hero6__art video,
  .home-v6 .hero6__art img {
    width: 100%;
    height: auto;
    object-fit: contain;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .home-v6.theme-dark .hero6__art video,
  .home-v6.theme-dark .hero6__art img {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .home-v6 .hero6__wash { display: none; }

  .home-v6 .manifesto6 {
    position: relative;
    left: auto; top: auto;
    font-size: clamp(30px, 9vw, 60px);   /* always fits the narrowest phones */
    line-height: 0.96;
    letter-spacing: -1px;
    margin-bottom: 24px;
  }
  .home-v6 .manifesto6__line { white-space: normal; overflow-wrap: break-word; }

  .home-v6 .signature   { position: relative; left: auto; top: auto; margin: 8px 0 0 0; }
  .home-v6 .roles6      { position: relative; left: auto; top: auto; margin: 24px 0 16px 0;
                          font-size: clamp(8px, 1.7vw, 10px); letter-spacing: clamp(2px, 0.5vw, 5px); }
  .home-v6 .hero6__body { position: relative; left: auto; top: auto; width: 100%; max-width: 420px; margin: 0 0 32px 0; }
  .home-v6 .cta6        { position: relative; left: auto; top: auto; height: 48px; margin-bottom: 56px; }

  .home-v6 .scroll6, .home-v6 .scroll6__rule { display: none; }

  .home-v6 .pillars6 {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
  }
  .home-v6 .pillar6 {
    position: relative;
    left: auto !important;
    width: auto;
  }
  .home-v6 .pillar6::before { display: none; }
}

@media (max-width: 560px) {
  .home-v6 .pillars6 { grid-template-columns: 1fr; }
  /* phones: the DC mark is enough — drop the long name so the DC logo, theme
     toggle, Listen, and burger all fit without crowding. */
  .home-v6 .nav__brand-text { display: none; }
}

/* ===========================================================================
   NAV COLLAPSE — the inline menu can't fit below ~1200px, so collapse it to the
   burger overlay earlier than the base shell's 880px. (Base styles the overlay
   only at <=880px; we re-declare it at <=1200px scoped to the landing page.)
=========================================================================== */
@media (max-width: 1300px) {
  .home-v6 .nav__list {
    position: fixed;
    inset: 0;
    margin: 0;
    /* overlay follows the light/dark toggle: cream in light, near-black in dark */
    background: rgba(245, 242, 236, 0.97);
    -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transform: translateY(-100%);
    transition: transform 0.5s ease, background 0.3s ease;
    z-index: 30;
  }
  .home-v6 .nav__list.is-open { transform: translateY(0); }
  .home-v6 .nav__list a {
    color: var(--ink-black);
    font-size: 16px;
    letter-spacing: 0.22em;
    opacity: 1;
  }
  .home-v6.theme-dark .nav__list { background: rgba(13, 12, 11, 0.97); }
  .home-v6.theme-dark .nav__list a { color: #d6b269; }
  .home-v6 .nav__burger { display: block; z-index: 31; }
  /* keep the burger bars readable on the light page */
  .home-v6 .nav__burger span { background: var(--ink-black); }
}

/* ===========================================================================
   BELOW-HERO SECTIONS — warm cream palette borrowed from the screen-scoring
   page (port 7777) so scrolling reads as a continuous beige document instead
   of flat white. Alternating light / dark bands separate the content, exactly
   like 7777's --paper / --paper-soft / --paper-deep rhythm.

   Scoped to .home-v6 (landing only) and loaded after style.css, so the HERO
   and every other page stay exactly as they are. Hero is NOT touched.
     --paper      #f4f1ea  (light)
     --paper-soft #ece7db  (darker, alternating)
     --paper-deep #e4ddcd  (deepest — cards / footer)
=========================================================================== */
.home-v6 .section  { background: #f4f1ea; }   /* Featured Work — light beige   */
.home-v6 .two-up   { background: #ece7db; }   /* Itera + ADE Duo — darker beige */
.home-v6 .two-up__cell { background: #e4ddcd; } /* cards read as deeper wells   */
.home-v6 .pull     { background: #f4f1ea; }   /* Golden Boy note — light beige  */
.home-v6 .contact  { background: #ece7db; }   /* Contact — darker beige         */
.home-v6 .foot     { background: #e4ddcd; }   /* Footer — deepest beige ground  */

/* ===========================================================================
   THEME TOGGLE BUTTON — small, delicate circle in the header. Moon = "go dark"
   (shown in light mode); sun = "go light" (shown in dark mode).
=========================================================================== */
.home-v6 .theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-gold);
  background: transparent;
  color: var(--ink-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.home-v6 .theme-toggle:hover { background: rgba(198,177,139,0.14); }
.home-v6 .theme-toggle__moon { display: none; }
.home-v6.theme-dark .theme-toggle__sun { display: none; }
.home-v6.theme-dark .theme-toggle__moon  { display: block; }

/* ===========================================================================
   DARK THEME — toggled by `.theme-dark` on <body>. The bright version is the
   default and is never affected by anything below. Most of the hero + nav flip
   automatically because they read the CSS variables we redefine here.
=========================================================================== */
.home-v6.theme-dark {
  /* Warm espresso + muted gold (Deniz's chosen dark palette), matched to the sub-pages. */
  --bg-main:            #14110e;   /* espresso page ground */
  --bg-warm:            #1a1714;
  --ink-black:          #d1ab65;   /* muted gold — headline, nav, titles, CTA   */
  --ink-body:           #c0b5a4;   /* warm light grey — body/roles, kept legible */
  --ink-muted:          #8a8175;
  --headline-warm-gray: #6e5d36;   /* muted bronze — weak headline lines         */
  --rule-light:         #2f2a23;
  --accent-gold:        #d1ab65;   /* muted brand gold                           */
  --accent-gold-soft:   #b88f48;
  --signature-ink:      #d1ab65;   /* gold signature flourish                    */
}

/* hero hardcoded colours that don't come from a variable */
.home-v6.theme-dark .scroll6__rule { background: #6b645b; }
.home-v6.theme-dark .pillar6__desc { color: #a59d92; }
.home-v6.theme-dark .pillar6__stroke { background: #4a443d; }

/* Dark readability wash. Two layers, both BELOW the headline/nav so only the
   video is dimmed:
   1) a top scrim that darkens the header strip so the gold menu stays legible
      where it crosses the bright sculpture (top-right);
   2) the left->right wash that keeps the left-column copy crisp. */
.home-v6.theme-dark .hero6__wash {
  background:
    /* top scrim — keeps the menu legible */
    linear-gradient(
      to bottom,
      rgba(13,12,11,0.92) 0,
      rgba(13,12,11,0.62) 64px,
      rgba(13,12,11,0) 150px
    ),
    /* bottom scrim — darkens behind the four cards (centre/left), fades out to
       the right so the falling feathers stay visible */
    radial-gradient(
      ellipse 78% 58% at 34% 106%,
      rgba(13,12,11,0.94) 0%,
      rgba(13,12,11,0.7) 42%,
      rgba(13,12,11,0.28) 66%,
      rgba(13,12,11,0) 84%
    ),
    /* left vignette — keeps the copy column crisp */
    radial-gradient(
      ellipse 60% 108% at 12% 50%,
      rgba(13,12,11,0.97) 0%,
      rgba(13,12,11,0.9) 38%,
      rgba(13,12,11,0.5) 58%,
      rgba(13,12,11,0.12) 76%,
      rgba(13,12,11,0) 90%
    );
}

/* Dark mode: cream loop video on the black page, faded into the dark with a
   LARGE radial mask. It is sized to keep the whole sculpture — the right-side
   dust and the falling fragments at the bottom — visible, only feathering the
   far edges so there is no hard cream rectangle. */
.home-v6.theme-dark .hero6__art video,
.home-v6.theme-dark .hero6__art img {
  -webkit-mask-image: radial-gradient(ellipse 70% 92% at 56% 52%, #000 62%, transparent 97%);
          mask-image: radial-gradient(ellipse 70% 92% at 56% 52%, #000 62%, transparent 97%);
  filter: brightness(0.96) contrast(1.04);
}

/* ---- below-hero sections: dark counterparts of the beige rhythm ---------- */
.home-v6.theme-dark .section { background: #1a1714; }
.home-v6.theme-dark .two-up  { background: #221d18; border-top-color: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.05); }
.home-v6.theme-dark .two-up__cell { background: #2a231b; }
.home-v6.theme-dark .pull    { background: #1a1714; }
.home-v6.theme-dark .contact { background: #221d18; }
.home-v6.theme-dark .foot    { background: #2a231b; border-top-color: rgba(255,255,255,0.05); }

/* ---- below-hero text flips light (beats style.css .home-manifesto rules) -- */
.home-v6.theme-dark .featured__copy h2,
.home-v6.theme-dark .two-up__cell h3,
.home-v6.theme-dark .pull__quote,
.home-v6.theme-dark .contact h2,
.home-v6.theme-dark .foot__brand { color: var(--accent-gold); }
.home-v6.theme-dark .featured__copy p,
.home-v6.theme-dark .two-up__cell p { color: #b3aaa0; }
.home-v6.theme-dark .two-up__cell .meta,
.home-v6.theme-dark .pull__cite,
.home-v6.theme-dark .foot__base { color: #8a8276; }
.home-v6.theme-dark .foot,
.home-v6.theme-dark .foot a,
.home-v6.theme-dark .foot__brand p { color: #a59d92; }
.home-v6.theme-dark .foot a:hover { color: var(--accent-gold); }
.home-v6.theme-dark .contact .btn { color: #f1ece4; border-color: rgba(255,255,255,0.20); }
.home-v6.theme-dark .contact .btn--gold { border-color: var(--accent-gold); color: #f1ece4; }
.home-v6.theme-dark .contact .btn--gold:hover { background: var(--accent-gold); color: #161310; }

/* ===========================================================================
   PHONE-ONLY refinements (Deniz 2026-07-03, from iPhone screenshots).
   Desktop/tablet untouched: everything scoped to <=760px + .home-v6.
=========================================================================== */
@media (max-width: 760px) {
  /* 1. video sits right under the 64px header; whole intro tightened so
        EXPLORE WORKS + the scroll line fit the first screen */
  .home-v6 .hero6 { padding-top: 64px; }
  .home-v6 .hero6__canvas { padding: 6px clamp(22px, 6vw, 40px) 10px; }
  .home-v6 .hero6__art { margin: 0 auto 2px; }
  .home-v6 .manifesto6 { font-size: clamp(26px, 8vw, 40px); margin-bottom: 10px; }
  .home-v6 .signature { margin: 2px 0 0 0; }
  .home-v6 .roles6 { margin: 10px 0 8px 0; }
  .home-v6 .hero6__body { margin: 0 0 14px 0; font-size: 15px; line-height: 1.55; }
  .home-v6 .cta6 { margin-bottom: 10px; }

  /* 2. the 01-04 pillars (SOUND/IMMERSE/DATA/IMAGINATION) are gone on phones;
        scrolling goes straight into Shadows */
  .home-v6 .pillars6 { display: none; }

  /* 3. scroll cue returns, horizontal + centered, same draw/undraw animation */
  .home-v6 .scroll6 {
    display: block; position: relative; left: auto; top: auto;
    writing-mode: horizontal-tb; transform: none; text-align: center;
    margin: 4px auto 6px;
  }
  .home-v6 .scroll6__rule {
    display: block; position: relative; left: auto; top: auto;
    width: 1px; height: 44px; margin: 0 auto;
    transform-origin: top;
    animation: scrollLinePulse 2.4s ease-in-out infinite;
  }
}

/* MENU-LEAK FIX (all widths where the overlay menu is active): the header's
   scroll transform turns the list's fixed positioning into nav-relative, so
   the "hidden" menu could bleed over the page. visibility makes hidden mean
   hidden; the burger toggle (.is-open) restores it. */
@media (max-width: 1300px) {
  .home-v6 .nav__list { visibility: hidden; }
  .home-v6 .nav__list.is-open { visibility: visible; }
}


/* ================================================================
   PHONE HERO v2 (2026-07-04, Deniz's mockup) — index.html ONLY
   (scoped to .hero-mv2 so the protected index-prev keeps the old
   layout). Video: tall, edge-to-edge at the top; the manifesto
   title overlaps the video's lower third; signature/roles/body
   continue on paper right under the video edge.
   ================================================================ */
@media (max-width: 760px) {
  .home-v6.hero-mv2 .hero6 { padding-top: 0; }
  .home-v6.hero-mv2 .hero6__art {
    position: relative;
    margin: 0;
    max-width: none;
    width: 100%;
    height: 62svh;   /* video finishes in the gap between "YET EXIST." and the signature */
    overflow: hidden;
    z-index: 1;
  }
  .home-v6.hero-mv2 .hero6__art video,
  .home-v6.hero-mv2 .hero6__art img {
    width: 100%; height: 100%;
    /* Deniz's hand-tuned framing (hero-tuner SAVE 2026-07-04): cover fill,
       window at 78% across = head/mass in frame. !important so the starter
       video's inline object-position cannot override on phones. */
    object-fit: cover !important; object-position: 78% 50% !important;
  }
  /* text canvas rides up over the video's lower third */
  .home-v6.hero-mv2 .hero6__canvas {
    position: relative; z-index: 2;
    /* extra -9svh cancels the taller video so the title/signature stay put
       while the cream image extends down to just under the signature */
    margin-top: calc(-5 * 1.06 * clamp(26px, 8vw, 40px) - 18px + 2svh);
    padding-top: 0;
  }
  /* LIGHT theme: the title sits ON the bright video -> dark ink + soft
     light halo. DARK theme keeps the site's two-tone gold (is-strong /
     is-weak via --ink-black / --headline-warm-gray, as on the live dark
     index), with a soft dark halo so gold reads over the dimmed video. */
  .home-v6.hero-mv2:not(.theme-dark) .manifesto6 {
    color: #2c261d;
    background: none; -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: #2c261d;
    text-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 3px rgba(255,255,255,0.4);
  }
  .home-v6.hero-mv2.theme-dark .manifesto6 {
    text-shadow: 0 0 14px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.4);
  }
  /* DARK theme: phone version of the desktop wash trick - a soft near-black
     scrim rises from the video's bottom edge under the title zone, feathering
     to nothing above it, so the gold headline reads over the bright lake. */
  .home-v6.hero-mv2.theme-dark .hero6__art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(13,12,11,0) 34%,
      rgba(13,12,11,0.38) 52%,
      rgba(13,12,11,0.72) 72%,
      rgba(13,12,11,0.92) 100%
    );
  }
  /* signature starts BELOW the video edge (mockup: only the title overlaps) */
  .home-v6.hero-mv2 .signature { margin-top: 30px; }
  /* header floats transparent over the video top */
  .home-v6.hero-mv2 .nav6 { background: transparent; }

  /* stop the intro paragraph running off the right edge: constrain to the
     canvas width and force wrapping (Deniz's down-arrow annotation) */
  .home-v6.hero-mv2 .hero6,
  .home-v6.hero-mv2 .hero6__canvas { overflow-x: hidden; }
  .home-v6.hero-mv2 .hero6__canvas { box-sizing: border-box; max-width: 100%; }
  .home-v6.hero-mv2 .hero6__body {
    /* cap the intro paragraph so it never runs past the phone edge; min() keeps
       it safe on the narrowest phones and inside the design-canvas heritage */
    width: auto !important;
    max-width: min(340px, calc(100vw - 48px)) !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }
}