/* Page components — index.html
   These were interleaved into the shared tail. They must stay BEFORE
   site.css so the shared overrides continue to win.
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

/* ===== the closing band =====
   The footage that used to run here now opens the page. What is left is the
   question and the three-part ethos, on the same ink plane, so the page still
   crosses a threshold before it asks. */
.film{position:relative;background:var(--ink);border-top:1px solid #2e2d2a;overflow:hidden;padding-block:clamp(44px,5.6vw,68px)}
.film-copy .in{max-width:var(--max);margin:0 auto;padding:0 max(20px,env(safe-area-inset-left))}
.film-copy h2{color:var(--paper);margin-bottom:clamp(16px,1.6vw,22px);max-width:20ch;font-size:clamp(26px,4.2vw,44px)}
.film-copy p{font-family:var(--mono);font-size:clamp(10.5px,1.15vw,12.5px);letter-spacing:.16em;text-transform:uppercase;color:#c9c7bf;display:flex;align-items:center;column-gap:1.25em;row-gap:.6em;flex-wrap:wrap}
/* Each phrase now carries its own arrow, which separates the three as well as
   a dot did and marks them at the same time — so the drawn separator is gone.
   The span keeps an arrow bound to its phrase: the flex gap holds the three
   groups apart, and a wrap can never strand a mark on its own line. */
.film-copy p .ph{display:inline-flex;align-items:center;gap:.5em}
/* the arrows are held back so they mark the phrases without competing with
   them — all three at one weight, so the marks read as a set and the words
   carry the progression on their own */
.film-copy p .ffsym{height:.9em;color:rgb(250 249 246/.42)}

.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--head);font-weight:600;font-size:clamp(16.5px,1.9vw,19px);letter-spacing:-0.014em;display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:19px;color:var(--ink-mute);transition:transform .28s var(--ease)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;font-size:15.5px;color:var(--ink-soft);max-width:70ch}
.faq summary:hover{color:var(--ink-mute)}

.ethos{font-family:var(--mono);text-transform:uppercase;letter-spacing:.07em;font-size:clamp(10.5px,1.15vw,12px);color:var(--ink-mute);margin:-14px 0 26px}

.ethos-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
@media(max-width:820px){.ethos-frames{grid-template-columns:repeat(2,1fr)}}
.ef{border:1px solid var(--line);border-radius:2px;background:var(--paper);overflow:hidden}
.ef canvas{display:block;width:100%;height:120px}
.ef .cap{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);padding:10px 12px;border-top:1px solid var(--line)}
.ethos-two{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
@media(max-width:820px){.ethos-two{grid-template-columns:1fr;gap:18px}}
.ethos-two h3{margin-bottom:8px}
.ethos-two p{font-size:15px;color:var(--ink-soft);max-width:52ch}

/* category descriptor: the first claim on the page, given weight */
.statement .desc.category{font-size:clamp(13.5px,1.9vw,18px);font-weight:700;letter-spacing:.2em;color:var(--ink);margin-bottom:clamp(22px,2.6vw,30px);padding-bottom:clamp(16px,2vw,22px);border-bottom:1px solid var(--line)}
@media(max-width:720px){.statement .desc.category{letter-spacing:.16em;font-size:12.5px}}

/* =====================================================================
   THE HERO · a threshold, not a slideshow
   The footage is the film the page used to close on: a figure walking
   toward a lit doorway. It is very nearly all black, so it is never
   framed as a picture — it bleeds into the ink plane and only the light
   it throws reads. The words stand in the dark to its left and never
   cross the light, so no scrim is needed and nothing is dimmed to make
   type legible. The copy keeps .statement, so every typographic rule
   the shared sheet already writes for it applies unchanged; only the
   plane-dependent colours are restated here.
   ===================================================================== */
/* The hero owns the whole first screen, and the stat ribbon starts below it:
   the page has to be scrolled before a single number is offered.
   The nav sits above the hero in flow, so the hero gets the viewport less the
   nav, plus the gap. The gap is carried as padding rather than as extra height
   alone — with align-items:center the copy centres in the content box, so the
   padding keeps it centred on the screen you can actually see while the box
   itself runs past the fold. Height alone would centre the copy against the
   overhang and push it into the fold.
   --nav-h is the same 52px the shared sheet already assumes when it sizes the
   mobile nav panel. Wider viewports run a slightly taller nav; the few pixels
   that leaves unaccounted for land in the gap, which only helps. */
.hero{--nav-h:52px;--fold-gap:clamp(28px,5svh,64px);position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:calc(100svh - var(--nav-h) + var(--fold-gap));padding-bottom:var(--fold-gap)}
.hero-film{position:absolute;top:0;bottom:0;right:0;width:min(1180px,64vw);z-index:0;pointer-events:none}
.hero-film video,.hero-film img{display:block;width:100%;height:100%;object-fit:cover;
/* graded to the brand's two tones: the doorway lands on paper, not #fff */
filter:grayscale(1) sepia(.2) contrast(1.04) brightness(.94);
opacity:0;animation:filmIn 2.4s var(--ease) .2s forwards}
@keyframes filmIn{to{opacity:1}}
/* the footage dissolves into the plane on every edge: no frame, no card */
.hero-film::after{content:"";position:absolute;inset:0;background:
linear-gradient(to right,#111110 0 8%,rgba(17,17,16,.88) 26%,rgba(17,17,16,0) 62%),
linear-gradient(to bottom,#111110 0,rgba(17,17,16,0) 16%),
linear-gradient(to top,#111110 0,rgba(17,17,16,0) 22%),
linear-gradient(to left,#111110 0,rgba(17,17,16,0) 7%)}

.hero .statement{position:relative;z-index:1;width:100%;border-bottom:none}
.hero .statement-in{padding-block:clamp(72px,8.4vh,104px)}
/* the copy column stops well short of the light; the rule above it does not */
.hero .hero-copy{max-width:min(640px,58%)}
.hero h1{color:var(--paper)}
/* the category descriptor sits back from the headline: paper held at part
   opacity rather than a flat grey, so it keeps the paper hue and lets a trace
   of the film behind it read through where the rule crosses the light */
.hero .desc.category{color:rgb(250 249 246/.72);border-bottom-color:#2e2d2a}
.hero .hero-sub{color:#c9c7bf}
.hero .hero-sub strong{color:var(--paper)}
/* mark is an ink underline on paper; inverted it is a paper word over a raised
   ink bar, which is the same gesture read the other way round */
.hero .hero-sub mark{color:var(--paper);box-shadow:inset 0 -0.42em 0 0 #33322c}
.hero .hero-note{color:#9b9992}
.hero .hero-note strong{color:#c9c7bf}
.hero .hero-note+.hero-note{margin-top:10px}
/* CTAs invert for the ink plane, keeping the shared hover gesture (the ring
   seats itself just inside the edge; nothing reflows) */
.hero .btn.primary{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:inset 0 0 0 3.5px var(--paper),inset 0 0 0 4.5px var(--paper)}
.hero .btn.primary:hover{box-shadow:inset 0 0 0 3.5px var(--paper),inset 0 0 0 4.5px var(--ink)}
.hero .btn.primary:active{box-shadow:inset 0 0 0 2.5px var(--paper),inset 0 0 0 3.5px var(--ink)}
.hero .btn.ghost{color:var(--paper);border-color:var(--paper)}
/* the stat ribbon reads as the ground the doorway stands on */
.hero+.ribbon{border-top:1px solid #2e2d2a}

/* the page arrives in the order the sentence does: the rule draws, then each
   clause of the headline, then the promise under it */
.hero .desc.category,.hero .turn,.hero .hero-sub,.hero .hero-ctas,.hero .hero-note{animation:heroIn .8s var(--ease) both}
.hero .desc.category{animation-delay:.05s}
.hero .turn:first-child{animation-delay:.22s}
.hero .turn+.turn{animation-delay:.36s}
.hero .hero-sub{animation-delay:.5s}
.hero .hero-ctas{animation-delay:.6s}
.hero .hero-note{animation-delay:.68s}
.hero .hero-note+.hero-note{animation-delay:.74s}
@keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:960px){
/* the film becomes the band you meet first, the words follow underneath. The
   hero still claims the first screen and still holds the ribbon back: on a
   phone the stack outruns the fold on its own, but a portrait tablet is tall
   enough that it would not, so the same viewport-less-nav floor applies. It is
   a floor, never a ceiling — where the copy is taller, the hero grows and the
   band simply scrolls. */
/* align-items:stretch undoes the centring the side-by-side layout sets: turned
   on its side that rule is a cross-axis rule, and it would shrink the film to
   its own width and float it in the middle of the band */
.hero{display:flex;flex-direction:column;align-items:stretch;min-height:calc(100svh - var(--nav-h) + var(--fold-gap))}
.hero-film{position:relative;width:auto;height:clamp(260px,42svh,380px);flex:none}
/* the copy takes whatever screen the film leaves and centres in it, which is
   what align-items:center does for the side-by-side layout above */
.hero .statement{flex:1;display:flex;align-items:center}
.hero .statement-in{width:100%}
/* the crop holds the whole scene — lit doorway, figure, ground — rather than
   a letterboxed slice of the light */
.hero-film video,.hero-film img{object-position:50% 56%}
.hero-film::after{background:
linear-gradient(to top,#111110 0,rgba(17,17,16,0) 26%),
linear-gradient(to bottom,#111110 0,rgba(17,17,16,0) 18%)}
.hero .hero-copy{max-width:none}
.hero .statement-in{padding-block:clamp(30px,5vw,44px) clamp(48px,7vw,72px)}
}
@media(prefers-reduced-motion:reduce){
.hero-film video,.hero-film img,.hero .desc.category,.hero .turn,.hero .hero-sub,.hero .hero-ctas,.hero .hero-note{animation:none;opacity:1;transform:none}
}