/* Page-level layout: nav, hero, curtain wrapper, manifesto, section shells */

/* ---------------------------------------------------------------- 12-col grid
   Placement grid, ported verbatim from the portfolio (styles/layout.css §grid).
   Margins reuse --edge (32px >=768 / 16px <768); --gutter 16px<768, 30px>=1200. */
:root{ --gutter:16px; }
@media (min-width:1200px){ :root{ --gutter:30px; } }

.grid{
  display:grid; grid-template-columns:repeat(12, 1fr);
  column-gap:var(--gutter); padding-inline:var(--edge);
}
.grid > *{ grid-column:1 / -1; } /* 375 collapse default: full width, stacked */

@media (min-width:768px){
  .gc-1-9  { grid-column:1  / span 9; }
  .gc-9-4  { grid-column:9  / span 4; }
  .gc-5-7  { grid-column:5  / span 7; }
  .gc-2-8  { grid-column:2  / span 8; }
  .gc-6-7  { grid-column:6  / span 7; }
  .gc-4-6  { grid-column:4  / span 6; }
  .gc-4-3  { grid-column:4  / span 3; }
  /* explicit row assignment: some pairs share overlapping column tracks on
     purpose (a short heading's cell vs. a right-hand aside's cell) — that's
     fine since text never fills its full grid-area width, but it means the
     row axis must be pinned explicitly rather than left to auto-placement's
     overlap-avoidance, which would otherwise bump the second item down. */
  .row-1{ grid-row:1; }
  .row-2{ grid-row:2; }
  .row-3{ grid-row:3; }
}

/* ---------------------------------------------------------------- nav
   No glass bar (BUILD-BRIEF step 2) — the nav is only the orange Menu px-btn
   button, top-right, fixed. Faded in once the sticky hero has scrolled fully
   past (js/nav-float.js, IntersectionObserver on #top — opacity/transform
   only, never a layout-affecting property, so this can't cause a reflow). */
.nav{
  position:fixed; top:1rem; right:var(--edge); z-index:var(--z-nav);
  opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.nav.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
/* hidden while the footer's big buttons are on screen (js/nav-float.js); visibility
   removes it from the tab order only once the fade has finished */
.nav.is-footer-cta{ opacity:0; pointer-events:none; visibility:hidden; transition:opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo), visibility 0s .3s; }
.nav.is-on-field .btn-primary{ background:var(--ink); color:var(--field); }
@media (prefers-reduced-motion:reduce){ .nav{ transition:none; } }

/* ---------------------------------------------------------------- hero (sticky) + black curtain
   position:sticky + a normal-flow, opaque <main> right after it in the DOM is
   the whole mechanism, zero JS: the hero has no scroll room of its own
   (height:100svh, no taller wrapper), so it stays pinned at top:0 while
   <main> — opaque, painted after it — slides up over it. Once <main>'s top
   edge reaches the viewport top, the hero is simply hidden behind it. Hard
   edge only, no fade/shadow on the curtain's top edge (house rule). */
.hero{
  position:sticky; top:0; height:100svh; overflow:hidden; z-index:0;
  background:var(--ink);
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* bottom edge at 10.6svh from the viewport bottom reproduces the wordmark's
   position in the original 1920x1080 frame; width holds the 870:250 ratio
   via height:auto, never stretched. */
/* 2026-10-12: wordmark goes edge to edge (HL-02 "flank + bleed wordmark"; slop-judge
   baseline: at 45vw it read as a splash screen). It keeps the 870:250 ratio. */
.hero-wordmark{
  position:absolute; left:var(--edge); bottom:var(--edge);
  width:min(calc(100% - 2 * var(--edge)), 152svh); height:auto; display:block;
}
/* the flank copy: the real H1 top-left, subline + link on the right flank (Datalands /
   Provider Studio arrangement), so the copy stays one short band above the wordmark */
.hero-copy{
  position:absolute; top:clamp(1.25rem, .5rem + 3svh, 3.5rem); left:var(--edge); right:var(--edge);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 22rem); column-gap:3rem; align-items:start;
}
.hero-title{
  font-size:clamp(2.2rem, .6rem + min(5.2vw, 8.4svh), 6.25rem); font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking); line-height:.93; color:#FFF4EA; max-width:15ch;
}
.hero-sub{
  margin:0; max-width:36ch; color:rgba(255,244,234,.88);
  font-family:var(--font-copy); font-size:clamp(1rem, .9rem + .3vw, 1.15rem); line-height:1.5;
}
.hero-link{
  position:relative; display:inline-block; margin-top:1.25rem; color:#FFF4EA; text-decoration:none;
  font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  padding-bottom:.35rem;
}
/* underline wipe (MicroKit gradient-underline / Kinetics underline family, ported to CSS):
   on hover the line runs out to the right, then a second line draws in from the left */
.hero-link::before, .hero-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transition:transform .5s var(--ease-out-expo);
}
.hero-link::before{ transform-origin:right; }
.hero-link::after{ transform-origin:left; transform:scaleX(0); transition-delay:0s; }
.hero-link:hover::before, .hero-link:focus-visible::before{ transform:scaleX(0); }
.hero-link:hover::after, .hero-link:focus-visible::after{ transform:scaleX(1); transition-delay:.18s; }
.contact-mail{ position:relative; }
@media (prefers-reduced-motion:reduce){ .hero-link::before, .hero-link::after{ transition:none; } }
@media (max-width:767px){
  /* phone: title, then subline + link 32px under it; the wordmark holds the bottom */
  .hero-copy{ display:flex; flex-direction:column; row-gap:2rem; }
  .hero-title{ font-size:clamp(2.6rem, 12.4vw, 3.6rem); }
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* everything after the hero — opaque, higher stacking, is the curtain itself */
.curtain{ position:relative; z-index:1; background:var(--ink); }

/* ---------------------------------------------------------------- manifesto
   2026-10-12 redesign: one statement per 62svh stage, left on the page edge, brand
   display. The REVISION 3 sticky top/bottom fades and the blurred beams canvas are
   gone (slop-judge baseline hard fails: fades + dark-glow template family). The
   feather reveal (js/manifesto.js) still lights each block as it crosses the viewport.
   Block 1 carries no [data-feather] (always full opacity). */
#manifesto{ padding-block:0 8rem; border-top:1px solid var(--divider); }
.manifesto-list{ padding-inline:var(--edge); padding-top:6svh; }
.m-stage{ min-height:56svh; display:grid; align-items:center; }
.m-block{ text-align:left; max-width:100%; }
.m-block > * { margin:0; }
.m-block > * + *{ margin-top:.35em; }

/* punchy lines — Switzer Medium (REVISION 4: Instrument Serif dropped) */
.m-big{
  font-family:var(--font-display); font-weight:var(--display-weight); font-stretch:var(--display-stretch);
  color:var(--text); font-size:var(--text-display); line-height:.92; letter-spacing:var(--display-tracking);
  max-width:13ch;
}
.m-big.m-accent{ color:var(--accent); }
.m-accent{ color:var(--accent); }
.m-big em{ font-style:normal; color:var(--accent); }
/* normal manifesto lines — Switzer. Lit colour here; manifesto.js writes
   per-word opacity on top of it. */
.m-line{
  font-family:var(--font-copy); font-weight:500; color:var(--text);
  font-size:clamp(1.9rem, 1rem + 3.1vw, 3.75rem); line-height:1.12;
  max-width:22ch; letter-spacing:-.02em;
}
.manifesto-more{ padding-top:2rem; }
.manifesto-more .cs-back{ color:var(--text); }
.manifesto-more .cs-back:hover{ color:var(--accent); }
.m-line .q-word, .m-big .q-word{ display:inline-block; }
/* underlined phrases: a flat 3px accent bar under each word (2026-10-12: the
   REVISION 4 neon glow + ignite flicker removed, glows read as the dark-glow
   template family). manifesto.js still folds each word's trailing space into
   its span (white-space:pre) so the bars meet across spaces. */
#manifesto u{ text-decoration:none; }
#manifesto u .q-word{ position:relative; }
#manifesto u .q-word::after{
  content:""; position:absolute; left:0; right:0; bottom:-.06em; height:3px;
  background:var(--accent); pointer-events:none;
}
#manifesto .m-big u .q-word::after{ height:max(4px, .06em); bottom:-.02em; }

/* ---------------------------------------------------------------- section shells */
.reel-section{ border-top:1px solid var(--divider); padding:6rem var(--edge); }
.reel-frame{ aspect-ratio:16/9; border:1px solid var(--divider); border-radius:2px; overflow:hidden; background:var(--panel); }
.reel-video{ display:block; width:100%; height:100%; object-fit:cover; }
.reel-more{ margin:1.25rem 0 0; }
.index-section{ border-top:1px solid var(--divider); padding-bottom:6rem; }
@media (max-width:640px){ .index-section{ padding-bottom:8rem; } } /* room for the fixed Menu chip under the last row */
.rows-section{ border-top:1px solid var(--divider); padding-bottom:6rem; }
.contact-section{
  position:relative; min-height:86svh; display:flex; align-items:center;
  background:var(--field); color:var(--ink); padding-block:6rem 7rem;
  overflow:hidden;
}
.contact-section > .contact-grid{ width:100%; }
.contact-section h2{ font-size:clamp(3rem, .8rem + 8.6vw, 10rem); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); line-height:.88; max-width:11ch; }
/* ponytail bugfix: text-fx.js's oval-reveal (collectUnits) unwraps any child
   whose OWN children end up on different visual rows, promoting its children
   to the parent's flat unit list instead — correct for a pre-built multi-line
   wrapper, but it means that if this h2's wrap point ever falls INSIDE the
   .hl span (e.g. "bisnis" / "Anda" split across lines), the .hl element
   itself gets discarded, losing var(--accent) entirely. nowrap keeps "bisnis
   Anda" as one atomic inline unit so the wrap point can only ever land
   before or after it, never inside it — verified it still fits on its own
   line at 320px. */
.contact-section h2 .hl{ color:#FFF4EA; white-space:nowrap; }
.contact-note{ color:rgba(11,12,14,.82); margin:2rem 0 0; max-width:40ch; font-family:var(--font-copy); font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height:1.5; }
@media (max-width:767px){ .contact-note{ font-size:1rem; } }
.contact-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; justify-self:start; }
.contact-section .btn-primary{ font-size:.95rem; padding:1.1em 2em; background:var(--ink); color:var(--field); }
.contact-section .btn-primary:hover{ background:#000; }
.contact-actions{ align-items:center; column-gap:1.75rem; }
.contact-mail{ color:var(--ink); font-family:var(--font-copy); font-size:1.1rem; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.15rem; }

/* footer: styles/footer.css */