/* Homepage only. Isolated selectors preserve the shared stylesheet and all other sections. */
/* Reverted from the white-band experiment: kept black like the rest of
   .range-top, and set to a literal pure #000 — darker than the --black
   token (#0a0a0a) the surrounding hero/cards/footer use — per Marton's
   "keep it black... make it darker". Full-bleed either way (no card, no
   max-width), same .wrap-nested-inside markup as before.
   2026-09-07: this exact review quote is about FLOW Two, whose elemental
   identity everywhere else on the site is "Dynamism of the Wave" — see
   element-wave.jpg, the same brandbook grayscale ocean photo already used
   on the FLOW Two product page (products/flow-two.html), right next to
   this same quote. Layered it in here as a full-bleed backdrop instead of
   flat black, per Marton's ask for a natural/brand motif to make this
   section pop. A uniform dark scrim (not a spotlight/vignette centered on
   the text) sits on top of the photo so contrast is even and predictable
   no matter where a given line of text lands — the alternative, darkening
   only around the text, risked the wave's bright whitewash showing through
   unevenly behind the large italic line. Top/bottom 12% are solid #000 so
   the photo fades in/out cleanly into the flat black of .range-top above
   and the ::after fade below, with no hard edge and no reintroduction of
   the --black-vs-#000 seam fixed earlier today. */
.page-home .flow-listening{
  position:relative;margin:0;padding:96px 0;color:var(--white);
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.8) 12%, rgba(0,0,0,.8) 88%, #000 100%),
    url(../img/element-wave.jpg) center 42% / cover no-repeat;
}
/* Fade at the bottom of the quote into the "Range" heading below it, added
   2026-09-07. Originally faded to var(--black) to match .range-top's old
   background — but .range-top is now pure #000 too (see style.css), so
   fading to --black (#0a0a0a) instead of #000 recreated the exact seam
   this was meant to avoid, one gradient over. Fixed to fade #000→#000
   (alpha-only), which still reads as a soft transition because it sits on
   top of the quote's own text/vignette, without introducing a stray
   lighter tone. Sits inside the quote's own bottom padding, not adding
   extra height to the section. */
.page-home .flow-listening::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);pointer-events:none;}
.flow-listening blockquote{margin:0;font-weight:400;}
.flow-listening-opening,.flow-listening-ending{display:block;font-size:clamp(20px,2.6vw,34px);line-height:1.4;letter-spacing:-.035em;}
.flow-listening-focus{display:block;margin:12px 0 16px;font-family:"Liberation Serif",Georgia,serif;font-style:italic;font-size:clamp(44px,7.7vw,108px);line-height:1.02;letter-spacing:-.045em;}
.flow-listening-ending{text-align:right;color:#aaa;}
.flow-listening figcaption{margin-top:42px;position:relative;font-size:10px;line-height:1.8;letter-spacing:.12em;text-transform:uppercase;}
.flow-listening figcaption span{color:#aaa;}
.flow-listening a,.flow-craft a,.flow-press a{display:inline-block;border-bottom:1px solid #996632;padding-bottom:5px;}
.flow-listening a:hover,.flow-craft a:hover,.flow-press a:hover{color:#fff;border-color:#fff;}
.flow-listening a:focus-visible,.flow-craft a:focus-visible,.flow-press a:focus-visible{outline:2px solid currentColor;outline-offset:6px;}
.flow-craft{max-width:1240px;margin:0 auto;padding:128px 40px 120px;color:#fff;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));}
.flow-craft h2{grid-column:1/-1;grid-row:1;margin:0 0 -22px;position:relative;z-index:1;font-family:"Liberation Serif",Georgia,serif;font-size:clamp(46px,6.8vw,94px);font-weight:400;line-height:1;letter-spacing:-.045em;}
.flow-craft h2 span{font-style:italic;}
.flow-craft-portrait{grid-column:1/12;grid-row:2;}
.flow-craft-portrait img{width:100%;aspect-ratio:1.75;object-fit:cover;object-position:38% 30%;filter:grayscale(1);}
.flow-craft-vision{grid-column:7/-1;grid-row:3;margin-top:-140px;background:#0a0a0a;padding:38px 0 0 40px;z-index:1;}
.flow-craft-vision p{font-size:clamp(20px,2.1vw,28px);line-height:1.45;letter-spacing:-.025em;margin:0 0 28px;}
.flow-craft a,.flow-press a{font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1.8;color:#ddd;}
.flow-craft-longevity{grid-column:2/11;display:flex;align-items:center;gap:42px;margin-top:68px;}
.flow-craft-longevity img{width:36%;aspect-ratio:1.65;object-fit:cover;object-position:50% 58%;filter:grayscale(1);}
.flow-craft-longevity p{font-family:"Liberation Serif",Georgia,serif;font-size:27px;line-height:1.25;max-width:340px;margin:0 0 22px;}
.flow-press{max-width:1240px;margin:0 auto;padding:96px 40px 100px;color:#fff;}
.flow-press h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0 0 48px;display:flex;align-items:center;gap:24px;}
.flow-press h2::after{content:"";height:1px;background:#996632;flex:1;}
.flow-press-publications{display:grid;grid-template-columns:1.65fr 1fr;gap:64px;}
.flow-press h3{font-family:"Liberation Serif",Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-.025em;margin:0 0 32px;}
.flow-press-notes{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:end;}
.flow-press-award{font-family:"Montserrat",sans-serif;font-size:clamp(42px,5vw,66px);line-height:.98;letter-spacing:-.065em;margin:0 0 26px;font-weight:400;}
.flow-press-review p{font-family:"Liberation Serif",Georgia,serif;font-size:25px;line-height:1.25;margin:0 0 26px;}
.flow-press-pig{border-left:1px solid #996632;padding-left:56px;}
.flow-press-choice{font-family:"Liberation Serif",Georgia,serif;font-size:clamp(42px,4.7vw,64px);line-height:.98;letter-spacing:-.03em;margin:0 0 26px;}
@media(max-width:700px){
.page-home .flow-listening{padding:56px 0;}
.flow-listening-ending{text-align:left;font-size:19px;}
.flow-listening figcaption{margin-top:28px;font-size:9px;}
.flow-craft{padding:80px 22px;}
.flow-craft h2{font-size:clamp(40px,9vw,62px);margin-bottom:20px;}
.flow-craft h2 span{display:block;}
.flow-craft-portrait{grid-column:1/-1;}
.flow-craft-portrait img{aspect-ratio:1.2;object-position:30% 30%;}
.flow-craft-vision{grid-column:2/-1;margin-top:-24px;padding:26px 0 0 24px;}
.flow-craft-longevity{grid-column:1/-1;gap:22px;margin-top:44px;align-items:start;}
.flow-craft-longevity img{width:34%;aspect-ratio:1;}
.flow-craft-longevity p{font-size:23px;}
.flow-press{padding:64px 22px;}
.flow-press-publications{grid-template-columns:1fr;gap:42px;}
.flow-press h3{font-size:28px;margin-bottom:24px;}
.flow-press-notes{gap:24px;}
.flow-press-review p{font-size:22px;}
.flow-press-pig{border-left:0;border-top:1px solid #996632;padding:28px 0 0;}
.flow-press-choice br{display:none;}
.flow-press-choice em::before{content:" ";}
}

/* Typography refinement: one editorial family, paired with existing Montserrat UI. */
.page-home{--flow-editorial:"Cormorant Garamond","Liberation Serif",Georgia,serif;--flow-hero-size:clamp(42px,6.6vw,81.6px);}
.page-home .hero-tagline{font-size:var(--flow-hero-size);}
.page-home .hero-sub{font-size:21px;max-width:744px;}
.flow-listening-focus{font-family:var(--flow-editorial);font-size:clamp(38.64px,6.072vw,75.072px);letter-spacing:-.025em;line-height:1.08;}
.flow-listening-opening,.flow-listening-ending{font-size:clamp(18px,2.08vw,27.2px);letter-spacing:-.02em;}
.flow-craft h2{font-family:var(--flow-editorial);margin-bottom:-.15em;line-height:1;font-size:clamp(52px,7.4vw,100px);letter-spacing:-.025em;}
@supports(text-box-trim:trim-both){.flow-craft h2{text-box-trim:trim-both;text-box-edge:cap alphabetic;margin-bottom:0;}}
.flow-craft-vision p{font-size:clamp(24px,2.52vw,33.6px);line-height:1.4;}
.flow-craft{padding-bottom:64px;}
.flow-review-interlude{margin:0;background:var(--black);padding:48px 40px 104px;text-align:center;color:#fff;}
.flow-review-interlude blockquote{font-family:var(--flow-editorial);font-style:italic;font-weight:400;font-size:clamp(38px,5.5vw,68px);line-height:1.08;letter-spacing:-.02em;margin:0 auto 28px;max-width:1000px;}
.flow-review-interlude figcaption{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ccc;line-height:1.8;}
.flow-review-interlude a{display:inline-block;border-bottom:1px solid var(--copper);padding-bottom:5px;}
.flow-review-interlude a:focus-visible{outline:2px solid #fff;outline-offset:6px;}
.flow-press-publications{grid-template-columns:1fr 1fr;}
.flow-press h3{font-family:Montserrat,sans-serif;font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;}
.flow-press-notes{display:block;}
.flow-press-award,.flow-press-choice{font-family:var(--flow-editorial);font-style:normal;font-size:clamp(42px,5.3vw,72px);line-height:1.1;letter-spacing:-.025em;}
@media(max-width:700px){
.page-home .hero-sub{font-size:21px;}
.flow-craft h2 span{display:inline;}
.flow-craft-vision p{font-size:24px;}
.flow-review-interlude{padding:40px 22px 72px;}
.flow-press-publications{grid-template-columns:1fr;}
}

/* Final placement refinement. */
.flow-listening-focus{text-align:center;}

/* Quotation punctuation and Range masthead refinement. */
.flow-listening-opening,.flow-listening-ending{position:relative;}
.flow-quote-open,.flow-quote-close{position:absolute;font-family:var(--flow-editorial);font-size:2em;line-height:1;color:#fff;pointer-events:none;}
.flow-quote-open{right:100%;top:-.3em;margin-right:.08em;}
.flow-quote-close{left:100%;top:.25em;margin-left:.06em;}
.page-home .home-range .section-head{max-width:100%;text-align:left;display:grid;grid-template-columns:1fr 2fr;align-items:baseline;gap:32px;margin-bottom:56px;}
.page-home .home-range .section-head .eyebrow{font-size:13.2px;letter-spacing:.16em;color:#ccc;margin:0;}
.page-home .home-range .section-head h2{font-family:var(--flow-editorial);font-size:clamp(28.8px,3.6vw,43.2px);font-weight:400;line-height:1.15;letter-spacing:-.02em;margin:0;color:#fff;}
.page-home .home-range .section-head .vision-link{font-style:italic;color:#fff;border-color:var(--copper);}
.page-home .flow-review-interlude{background:#fff;color:#0a0a0a;}
.page-home .flow-review-interlude figcaption{color:#555;}
.page-home .flow-review-interlude a:focus-visible{outline-color:#0a0a0a;}
@media(max-width:700px){
.flow-listening-opening,.flow-listening-ending{margin-left:14px;margin-right:14px;}
.flow-quote-open,.flow-quote-close{font-size:1.6em;}
.page-home .home-range .section-head{grid-template-columns:1fr;gap:20px;}
}

/* Range returns to a centered, stacked heading; accolades become quiet editorial citations. */
.page-home .home-range .section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;}
.page-home .home-range .section-head h2{font-size:clamp(31.68px,3.96vw,47.52px);}
.flow-press{max-width:1100px;padding-top:88px;padding-bottom:80px;}
.flow-press h2{display:block;text-align:center;color:#bdb6ae;font-size:14.3px;margin-bottom:50px;}
.flow-press h2::after{display:block;content:"";width:28px;height:1px;background:var(--copper);margin:22px auto 0;}
.flow-press-publications{gap:80px;text-align:center;}
.flow-press-pig{border:0;padding:0;}
.flow-press h3{margin:0 0 16px;color:#bdb6ae;font-size:12px;}
.flow-press-award,.flow-press-choice{font-style:italic;font-size:clamp(45.6px,5.28vw,69.6px);margin:0 0 24px;}
.flow-press a{font-size:10.8px;letter-spacing:.14em;border-bottom-color:rgba(153,102,50,.5);}
.page-home .flow-review-interlude{min-height:380px;padding:76px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
@media(max-width:700px){
.flow-press-publications{gap:48px;}
.flow-press{padding:64px 22px;}
.page-home .flow-review-interlude{min-height:340px;padding:64px 22px;}
}

/* Recognition stays white. */
.page-home .flow-press{max-width:none;background:#fff;color:#0a0a0a;padding-left:max(40px,calc((100% - 1020px)/2));padding-right:max(40px,calc((100% - 1020px)/2));}
.page-home .flow-press h2,.page-home .flow-press h3{color:#555;}
.page-home .flow-press a{color:#333;}
.page-home .flow-press a:hover{color:#0a0a0a;border-color:#0a0a0a;}
.page-home .flow-press a:focus-visible{outline-color:#0a0a0a;}
/* Review interlude switched from black back to white, 2026-09-08 — Marton
   asked for it to read lighter, like the mountain section above it, rather
   than solid black. This exact white treatment (background/color/figcaption
   values below) already existed once, at the .page-home .flow-review-interlude
   rule further up this file, before an "alternate light/dark" pass flipped it
   back to black — reactivating it here rather than inventing a new grey: the
   brand guideline is explicitly black/white/copper only, so white keeps this
   on-palette in a way a custom grey tone would not. Net effect on the page's
   rhythm: white Recognition -> dark mountain image -> white quote -> black
   footer, so the quote now reads as a continuation of the mountain image's
   fade into daylight rather than another slab of black stacked on the
   footer. data-nav-theme on this <figure> must flip from "dark" to "light"
   in index.html alongside this change (see nav-theme.js) — otherwise the
   white nav text goes invisible against this now-white background whenever
   it's scrolled under the fixed nav. */
.page-home .flow-review-interlude{background:#fff;color:#0a0a0a;}
.page-home .flow-review-interlude figcaption{color:#555;}
.page-home .flow-review-interlude a:focus-visible{outline-color:#0a0a0a;}
@media(max-width:700px){.page-home .flow-press{padding-left:22px;padding-right:22px;}}
/* Carry the white band through the existing space before the mountain scene. */
.page-home .home-range{padding-bottom:0;}
.page-home .flow-press{padding-bottom:128px;}
@media(max-width:700px){.page-home .flow-press{padding-bottom:112px;}}

/* Recognition detail, added 2026-09-07. Went through two other passes —
   a full-width copper line "through" the text, then an AI-generated
   photoreal bronze laurel — before landing back here, on Marton's call:
   a small laurel wreath (both a natural motif and the universal award
   symbol) set above each publication name. Thin copper line-art to match
   the hairlines already used under the eyebrow/figcaption elsewhere on
   this page, sized small and quiet rather than a big monumental gesture —
   this section is deliberately the site's white/light "breather" between
   dark sections (see "Alternate the press sections between light and
   dark" below), which is also the reasoning this reverted back to. */
.press-laurel{display:block;width:52px;height:auto;margin:0 auto 20px;opacity:.85;}
@media(max-width:700px){.press-laurel{width:44px;margin-bottom:16px;}}

/* ---------- THE RANGE, rebuilt as a stage (2026-09-28) ----------
   Replaces the three boxed .p-card tiles (studio-floor photos sitting in
   rectangles — the same "pasted box" problem the product heroes had).
   Same language as the product pages: the three hand-masked cut-outs stand
   together on one lit horizon, at the same width, so their real heights
   (200 / 150 / 100mm) read as a family. Each <img> is shifted by its own
   --base (fraction of the cut-out where the chassis meets the floor) so all
   three bases sit exactly on the line; the reflection falls below it.
   --vis = visible chassis height / width, used to seat each ghost wordmark
   just behind its amp's top edge.
   Hover (mouse only): the amp lifts, its pool of light warms, its ONE/TWO/
   THREE wordmark rises behind it, and the other two step back. */
.page-home .rg{position:relative;padding:40px 0 110px;background:#000;overflow:hidden;isolation:isolate;}
.rg-light{position:absolute;left:50%;top:0;width:min(1500px,110vw);height:78%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 58% at 50% 62%,rgba(153,102,50,.13) 0%,rgba(153,102,50,.04) 48%,rgba(0,0,0,0) 72%),
             radial-gradient(ellipse 60% 50% at 50% 55%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 70%);}
.rg-row{position:relative;max-width:1480px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;}
/* the horizon: one line under all three */
.rg-row::after{content:"";position:absolute;left:40px;right:40px;top:calc((100% - 0px) * 0);height:1px;display:none;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2) 15%,rgba(255,255,255,.2) 85%,rgba(255,255,255,0));}
.rg-item{position:relative;display:block;color:#fff;text-decoration:none;transition:opacity .8s ease;}
.rg-stage{position:relative;container-type:inline-size;aspect-ratio:1/.6;}
/* horizon drawn per stage but bled across the grid gap so the three read as one line */
.rg-stage::before{content:"";position:absolute;left:-2vw;right:-2vw;bottom:0;height:1px;z-index:1;background:rgba(255,255,255,.2);}
.rg-item:first-child .rg-stage::before{left:-40px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2) 30%);}
.rg-item:last-child .rg-stage::before{right:-40px;background:linear-gradient(90deg,rgba(255,255,255,.2) 70%,rgba(255,255,255,0));}
.rg-amp{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:2;
  transform:translateY(calc((1 - var(--base)) * 100%));
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.65));}
.rg-ghost{position:absolute;left:50%;z-index:1;width:78%;height:auto;pointer-events:none;
  bottom:calc(var(--vis) * 100cqw - 7cqw);transform:translateX(-50%) translateY(10%);opacity:0;}
.rg-pool{position:absolute;left:50%;bottom:0;width:120%;height:130%;transform:translateX(-50%);z-index:0;pointer-events:none;opacity:.35;
  background:radial-gradient(ellipse 46% 44% at 50% 72%,rgba(217,168,105,.22) 0%,rgba(153,102,50,.08) 45%,rgba(0,0,0,0) 72%);}
.rg-meta{position:relative;z-index:3;padding-top:clamp(40px,4vw,64px);text-align:center;}
.rg-element{margin:0 0 16px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-weight:600;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper);padding-left:.3em;}
.rg-logo{display:block;height:clamp(20px,1.9vw,30px);width:auto;max-width:100%;margin:0 auto;}
.rg-price{margin:20px 0 0;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-weight:500;font-size:17px;letter-spacing:.06em;color:#fff;font-variant-numeric:lining-nums;}
.rg-price span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-right:6px;}
.rg-link{display:inline-block;margin-top:18px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:10.8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);border-bottom:1px solid rgba(153,102,50,.7);padding-bottom:4px;transition:color .4s ease,border-color .4s ease;}
.rg-item:focus-visible{outline:1px solid var(--copper);outline-offset:10px;}
@media (hover:hover) and (pointer:fine){
  .rg-amp{transition:scale 1.1s cubic-bezier(.2,.7,.1,1),filter 1.1s ease,opacity 1.6s ease,transform 2s cubic-bezier(.2,.7,.1,1);transform-origin:50% 100%;}
  .rg-ghost{transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.1,1);}
  .rg-pool{transition:opacity 1s ease;}
  .rg-row:has(.rg-item:hover) .rg-item:not(:hover){opacity:.42;}
  .rg-item:hover .rg-amp{scale:1.045;}
  .rg-item:hover .rg-ghost{opacity:1;transform:translateX(-50%) translateY(0);}
  .rg-item:hover .rg-pool{opacity:1;}
  .rg-item:hover .rg-link{color:#fff;border-color:var(--copper);}
}
/* entrance: out of darkness, left to right */
@media (prefers-reduced-motion:no-preference){
  .rg .rg-amp{opacity:0;filter:brightness(.15) drop-shadow(0 26px 40px rgba(0,0,0,.65));}
  .rg .rg-meta{opacity:0;transform:translateY(14px);transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.7,.1,1);}
  .rg.is-in .rg-amp{opacity:1;filter:drop-shadow(0 26px 40px rgba(0,0,0,.65));transition:opacity 1.8s ease,filter 2.2s ease,scale 1.1s cubic-bezier(.2,.7,.1,1);}
  .rg.is-in .rg-meta{opacity:1;transform:none;}
  .rg.is-in .rg-item:nth-child(2) .rg-amp{transition-delay:.25s,.25s,0s;}
  .rg.is-in .rg-item:nth-child(3) .rg-amp{transition-delay:.5s,.5s,0s;}
  .rg.is-in .rg-item:nth-child(1) .rg-meta{transition-delay:.9s;}
  .rg.is-in .rg-item:nth-child(2) .rg-meta{transition-delay:1.05s;}
  .rg.is-in .rg-item:nth-child(3) .rg-meta{transition-delay:1.2s;}
}
@media (max-width:900px){
  .page-home .rg{padding:10px 0 70px;}
  .rg-row{grid-template-columns:1fr;gap:72px;padding:0 22px;}
  .rg-stage{aspect-ratio:1/.58;margin:0 6vw;}
  .rg-row::after{display:none;}
  .rg-stage::before{display:none;}
  .rg-stage::after{content:"";position:absolute;left:-6vw;right:-6vw;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2) 20%,rgba(255,255,255,.2) 80%,rgba(255,255,255,0));}
  .rg-ghost{opacity:.9;transform:translateX(-50%);}
  .rg-pool{opacity:.8;}
  .rg-meta{padding-top:40px;}
}

/* ---------- HERO — "The Reveal" (2026-09-28, v3) ----------
   Deliberately unlike the product pages (which use a Montserrat ghost word
   *behind* a cut-out amp, a glow, and element photography). Here: the
   scroll-scrubbed FLOW One turn (hero.js drives currentTime + scale), and
   the tagline set monumental in italic Cormorant *in front*, split either
   side of the amp. Scrolling opens the words outward like a curtain while
   the amp turns and grows between them (home-reveal.js writes --fx-p).
   A fine copper frame and corner captions give it an editorial, campaign
   feel. No glow, no ghost word, no landscape. */
.fx.hero-wrap{height:230vh;}
.fx .fx-hero{background:#000;}
.fx-media{position:absolute;left:50%;top:50%;width:min(64vw,86vh);aspect-ratio:1;transform:translate(-50%,-47%);z-index:0;}
/* soft edge = a black radial overlay (same look over the black hero as the old
   mask-image, but a plain gradient layer: no per-frame mask re-raster on video) */
.fx-media::after{content:"";position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,0) 46.8%,rgba(0,0,0,.4) 61.3%,#000 80.6%);}
.fx-video{width:100%;height:100%;display:block;object-fit:cover;will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
.fx-title{position:absolute;left:0;right:0;top:50%;z-index:2;margin:0;transform:translateY(-52%);display:flex;justify-content:center;gap:.28em;pointer-events:none;
  font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(64px,11.5vw,210px);line-height:1;letter-spacing:-.02em;color:#fff;white-space:nowrap;}
.fx-w{display:inline-block;will-change:transform,opacity;backface-visibility:hidden;text-shadow:0 10px 60px rgba(0,0,0,.55);}
/* reversed (Marton): the tagline ASSEMBLES as you scroll — words start
   apart and invisible, converge on the amp and are fully set by ~70% of
   the runway, then hold while the hero scrolls away. */
.fx-l{transform:translate3d(calc((1 - min(1, var(--fx-p,0) * 1.45)) * -30vw),0,0);opacity:clamp(0, calc(var(--fx-p,0) * 1.7 - .1), 1);}
.fx-r{transform:translate3d(calc((1 - min(1, var(--fx-p,0) * 1.45)) * 30vw),0,0);opacity:clamp(0, calc(var(--fx-p,0) * 1.7 - .1), 1);}
/* thin copper frame, inset — tightens toward the amp as you scroll */
/* frame is static (it used to close in and cut through the captions) and
   simply fades as the reveal begins; opacity-only = no layout per frame */
.fx-frame{position:absolute;inset:92px 40px 40px;z-index:1;pointer-events:none;border:1px solid rgba(153,102,50,.38);opacity:clamp(0, calc(var(--fx-p,0) * 1.6 - .2), 1);}
.fx-corner{position:absolute;z-index:3;margin:0;opacity:clamp(0, calc(var(--fx-p,0) * 2.2 - .9), 1);}
.fx-bl{left:76px;bottom:78px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:2;color:rgba(255,255,255,.62);}
.fx-br{right:76px;bottom:78px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:#fff;text-decoration:none;}
.fx-br-el{white-space:nowrap;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--copper);}
.fx-br img{height:20px;width:auto;}
.fx-br-link{font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);border-bottom:1px solid rgba(153,102,50,.7);padding-bottom:3px;transition:color .4s,border-color .4s;}
.fx-br:hover .fx-br-link{color:#fff;border-color:var(--copper);}
.fx-cue{position:absolute;left:50%;bottom:62px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;opacity:calc(1 - var(--fx-p,0) * 3);
  font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.fx-cue i{display:block;width:1px;height:46px;background:linear-gradient(180deg,rgba(153,102,50,0),var(--copper));transform-origin:top;}
@media (prefers-reduced-motion:no-preference){
  .fx-cue i{animation:fxCue 2.4s ease-in-out infinite;}
  .fx-media{animation:fxMedia 2.6s ease both;}
}
@keyframes fxCue{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(1);opacity:0;}}
@keyframes fxMedia{from{opacity:0;filter:brightness(.2);}to{opacity:1;filter:none;}}
@keyframes fxInL{from{opacity:0;translate:-6vw 0;}to{opacity:1;translate:0 0;}}
@keyframes fxInR{from{opacity:0;translate:6vw 0;}to{opacity:1;translate:0 0;}}
@media (max-width:700px){
  .fx.hero-wrap{height:190vh;}
  .fx-media{width:118vw;transform:translate(-50%,-50%);}
  .fx-title{flex-direction:column;align-items:center;gap:0;font-size:22vw;line-height:.95;}
  .fx-l{align-self:flex-start;margin-left:8vw;} .fx-r{align-self:flex-end;margin-right:6vw;}
  .fx-frame{inset:84px 16px 20px;}
  .fx-bl{display:none;}
  .fx-br{right:50%;transform:translateX(50%);bottom:48px;align-items:center;} .fx-br img{height:16px;} .fx-br-el{font-size:10px;}
  .fx-cue{display:none;}
}
/* no scroll script under reduced motion: show the assembled state */
/* reduced-motion freeze of the hero removed 2026-10-07 — the reveal is scroll-driven and now runs for everyone (see hero.js) */

/* ---------- FOUNDER, rebuilt (2026-09-29) ----------
   Was a boxed photo with a caption card overlapping it. Now a full-bleed,
   near-full-height cinematic portrait: the photograph's own composition
   (Béla left, open wall right) carries the layout — the right side is
   deepened to black and holds the name, set monumental in the site's
   italic Cormorant, over a copper eyebrow and one quiet line. Slow push-in
   on the portrait and a staggered text rise when it scrolls into view
   (home-range.js observer also toggles .is-in here). */
.page-home .fd{position:relative;min-height:min(100vh,1000px);display:flex;align-items:center;overflow:hidden;background:#000;color:#fff;isolation:isolate;padding:0;}
.fd-photo{position:absolute;inset:0;z-index:-2;}
.fd-photo img{width:100%;height:100%;object-fit:cover;object-position:22% 30%;filter:grayscale(1) contrast(1.06) brightness(.9);transform:scale(1.08);transition:transform 6s cubic-bezier(.2,.6,.2,1);}
.fd.is-in .fd-photo img{transform:scale(1);}
.fd-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.92) 78%,#000 100%),
  linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 72%,#000 100%);}
.fd-copy{position:relative;margin-left:auto;width:min(46%,640px);padding:120px 7vw 120px 0;}
.fd-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 26px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--copper);}
.fd-eyebrow::before{content:"";width:40px;height:1px;background:var(--copper);}
.fd-name{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(64px,8.6vw,150px);line-height:.88;letter-spacing:-.02em;}
.fd-name span{display:block;font-size:.5em;letter-spacing:0;color:rgba(255,255,255,.7);margin-bottom:.1em;}
.fd-text{margin:40px 0 30px;padding-top:30px;border-top:1px solid rgba(153,102,50,.5);max-width:440px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:clamp(16px,1.25vw,19px);line-height:1.65;color:rgba(255,255,255,.78);}
.page-home .fd-link{display:inline-block;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--copper);padding-bottom:5px;text-decoration:none;transition:color .3s;}
.page-home .fd-link:hover{color:#e8bd86;}
@media (prefers-reduced-motion:no-preference){
  .fd-copy > *{opacity:0;transform:translateY(16px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.1,1);}
  .fd.is-in .fd-copy > *{opacity:1;transform:none;}
  .fd.is-in .fd-copy > :nth-child(2){transition-delay:.15s;}
  .fd.is-in .fd-copy > :nth-child(3){transition-delay:.35s;}
  .fd.is-in .fd-copy > :nth-child(4){transition-delay:.5s;}
}
@media (prefers-reduced-motion:reduce){.fd-photo img{transform:none;}}
@media (max-width:900px){
  .page-home .fd{display:block;min-height:0;}
  .fd-photo{position:relative;height:118vw;}
  .fd-photo img{object-position:30% 20%;}
  .fd-shade{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 22vw,rgba(0,0,0,0) 62vw,rgba(0,0,0,.85) 100vw,#000 117vw);}
  .fd-copy{width:auto;margin:-34vw 0 0;padding:0 22px 72px;}
  .fd-name{font-size:17vw;}
}

/* ---------- RECOGNITION, rebuilt (2026-09-29) ----------
   Was a white band with small laurels. Now in the same dark, monumental
   register as the founder section: italic-serif heading, and each accolade
   set as a large award title under a copper laurel that draws itself in
   when the section enters view (home-range.js toggles .is-in), with the
   publication in tracked caps and a copper-ruled link to the source. A
   hairline divides the two; a faint warm light sits behind them. */
.page-home .rc{position:relative;background:#000;color:#fff;padding:140px 40px 150px;overflow:hidden;isolation:isolate;text-align:center;}
.rc-light{position:absolute;left:50%;top:55%;width:min(1400px,120vw);height:80%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(153,102,50,.12) 0%,rgba(153,102,50,.03) 50%,rgba(0,0,0,0) 72%);}
.rc-eyebrow{margin:0 0 18px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--copper);padding-left:.32em;}
.rc-title{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(40px,4vw,62px);line-height:1;color:#fff;}
.rc-grid{max-width:1180px;margin:90px auto 0;display:grid;grid-template-columns:1fr 1fr;}
.rc-item{padding:10px 40px;}
.rc-item + .rc-item{border-left:1px solid rgba(153,102,50,.35);}
.rc-laurel{display:block;width:96px;height:auto;margin:0 auto 26px;color:var(--copper);}
.rc-pub{margin:0 0 22px;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62);padding-left:.3em;}
.rc-award{margin:0;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(50px,5.4vw,96px);line-height:1;letter-spacing:-.015em;color:#fff;white-space:nowrap;}
.rc-context{margin:22px 0 30px;font-family:"Liberation Serif",Georgia,serif;font-style:italic;font-size:17px;color:rgba(255,255,255,.5);}
.page-home .rc-link{display:inline-block;font-family:"Montserrat",Helvetica,Arial,sans-serif;font-size:10.8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);border-bottom:1px solid var(--copper);padding-bottom:5px;text-decoration:none;transition:color .3s;}
.page-home .rc-link:hover{color:#e8bd86;}
@media (prefers-reduced-motion:no-preference){
  .rc-laurel path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1);}
  .rc.is-in .rc-laurel path{stroke-dashoffset:0;}
  .rc-item > :not(.rc-laurel),.rc-head > *{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.1,1);}
  .rc.is-in .rc-item > :not(.rc-laurel),.rc.is-in .rc-head > *{opacity:1;transform:none;}
  .rc.is-in .rc-item > .rc-pub{transition-delay:.15s;} .rc.is-in .rc-item > .rc-award{transition-delay:.25s;}
  .rc.is-in .rc-item > .rc-context{transition-delay:.35s;} .rc.is-in .rc-item > .rc-link{transition-delay:.45s;}
  
}
@media (max-width:900px){
  .page-home .rc{padding:90px 22px 100px;}
  .rc-grid{grid-template-columns:1fr;margin-top:60px;}
  .rc-item{padding:0;}
  .rc-item + .rc-item{border-left:0;border-top:1px solid rgba(153,102,50,.35);margin-top:56px;padding-top:56px;}
  .rc-award{font-size:13vw;}
}
/* Recognition back to white (Marton: homepage too dark end to end) — same
   monumental layout, inverted: ink on white, copper laurels and rules kept. */
.page-home .rc{background:#fff;color:#0a0a0a;}
.rc-light{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(153,102,50,.07) 0%,rgba(153,102,50,.02) 50%,rgba(255,255,255,0) 72%);}
.rc-title,.rc-award{color:#0a0a0a;}
.rc-pub{color:#6b6b6b;}
.rc-context{color:#8a8a8a;}
.page-home .rc-link{color:#222;}
.page-home .rc-link:hover{color:var(--copper);}
.rc-item + .rc-item{border-color:rgba(153,102,50,.4);}

/* Tighter vertical rhythm for Recognition, and the closing FLOW Three quote
   given the same treatment (white, copper eyebrow, monumental italic, faint
   warm light, copper-ruled source link). Reuses the .rc-* text styles. */
.page-home .rc{padding:84px 40px 92px;}
.rc-grid{margin-top:60px;}
.page-home .rq{position:relative;margin:0;padding:84px 40px 96px;background:#fff;color:#0a0a0a;text-align:center;overflow:hidden;isolation:isolate;}
.rq .rc-eyebrow{margin-bottom:26px;}
.rq-quote{margin:0 auto;max-width:1100px;font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(46px,5.6vw,92px);line-height:1.02;letter-spacing:-.015em;color:#0a0a0a;}
.rq figcaption{display:flex;flex-direction:column;align-items:center;}
.rq .rc-context{display:block;margin:26px 0 28px;}
@media (prefers-reduced-motion:no-preference){
  .rq > :not(.rc-light){opacity:0;transform:translateY(14px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.1,1);}
  .rq.is-in > :not(.rc-light){opacity:1;transform:none;}
  .rq.is-in .rq-quote{transition-delay:.2s;} .rq.is-in figcaption{transition-delay:.45s;}
}
@media (max-width:900px){.page-home .rc{padding:64px 22px 72px;}.rc-grid{margin-top:44px;}.page-home .rq{padding:64px 22px 76px;}.rq-quote{font-size:12vw;}}

/* heading removed from Recognition (2026-09-29) — trim the top so the laurels lead */
.page-home .rc{padding-top:72px;padding-bottom:80px;}
.rc-grid{margin-top:0;}
@media (max-width:900px){.page-home .rc{padding-top:56px;padding-bottom:64px;}}
.fd-text em{font-family:"Cormorant Garamond","Liberation Serif",Georgia,serif;font-size:1.28em;color:#fff;}

