/* v2 OFF+BRAND — showcase: home hero, 3D monk, chapter ticker, race card list, home sections.
   Loaded on / and /work only. All timings come from the tokens in site.css. */

/* ---------- HERO (static 1 screen; chapters cycle instead of pinning) ---------- */
.hero{position:relative}
/* Full viewport height, uncapped: the 1000px ceiling meant the home cover
   stopped short of the fold on a tall desktop display (Bailey, 2026-09-22). */
.hero-stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;padding:var(--sp-9) var(--g) var(--sp-5);display:grid;grid-template-rows:1fr auto;gap:var(--sp-f-6)}
.grid-bg{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(var(--g1) 1px,transparent 1px),linear-gradient(90deg,var(--g1) 1px,transparent 1px);background-size:calc(100vw/12) calc(100vw/12);-webkit-mask-image:radial-gradient(circle at 62% 45%,#000 10%,transparent 72%);mask-image:radial-gradient(circle at 62% 45%,#000 10%,transparent 72%);opacity:.8}
.scanl{position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.monk{position:absolute;right:6vw;top:50%;translate:0 -54%;width:min(58vmin,560px);aspect-ratio:1;z-index:-1;perspective:1600px}
/* The mark itself — .monk-rot, .lyr, the @property registrations and the idle
   rotation — moved to site.css when the footer gained the same mark on all 56
   pages. What is left here is the hero's own framing of it: where it sits, how
   big it is, and which way it faces. JS still writes --tx/--ty/--sc for the
   pointer and scroll response, and those compose with the animation's
   --spin/--tilt in one calc(). */
.monk .monk-rot{position:absolute;inset:0;--base-y:-22deg;--base-x:8deg}
.hero-intro{position:relative;z-index:3;max-width:min(980px,100%);align-self:center}
.hero-loc{margin:0 0 var(--sp-2)}
.hero-kicker{margin:0 0 var(--sp-3);max-width:40ch;font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.7vw,26px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase}
.hero-h{margin:0;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(54px,min(9vw,14vh),176px);line-height:var(--lh-mega);letter-spacing:var(--tr-mega);text-transform:uppercase}
.hero-h span{display:block}
.mo .hero-h span{animation:slamIn var(--t-slow) var(--out) both}
.mo .hero-h span+span{animation-delay:30ms}
@keyframes slamIn{0%{transform:translateX(-6%) skewX(-14deg)}100%{transform:none}}
.hero-sub{margin:var(--sp-4) 0 var(--sp-5);max-width:var(--measure);color:var(--g3);font-size:17px}
/* Lower-third telemetry. Was a top-right stack of 26–46px italic display
   numbers, which read as a second headline and fought the real one; it is now
   HUD-sized data on one line, clear of the H1 entirely. */
.hero-bottom{position:relative;z-index:4;display:grid;gap:var(--sp-f-4)}
.telestrip{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin:0;padding:0 0 var(--sp-3);list-style:none}
.telestrip li{display:flex;align-items:baseline;gap:var(--sp-2)}
.telestrip b{font-family:var(--hud);font-weight:600;font-size:16px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--wh)}
.telestrip span{color:var(--g2);max-width:30ch;font-size:13px;letter-spacing:.02em;text-transform:none}
.telestrip .dot{display:inline-block;width:5px;height:5px;margin-right:2px;background:var(--wh);vertical-align:middle}
.mo .telestrip .dot{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (max-width:620px){.telestrip{gap:var(--sp-1) var(--sp-4)}.telestrip li:nth-child(n+4){display:none}}

/* Lifecycle rail. The 1.7s hard-cut ticker showed one word at a time and
   changed faster than the proof line under it could be read. All six phases
   are now permanently legible as a tab rail; only the proof line swaps, it
   advances at 4.2s, and it pauses on hover or focus. */
.chapters{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1)}
/* The tab's edge is the shared plate (declared in site.css, which names .ch-b
   in its list). It draws nothing at rest — the tokens are transparent there —
   gains a grey edge on hover, and the SELECTED tab is filled, so that state
   takes clip-path instead: white lines on a white fill would be invisible and
   the one tab a reader is looking at would be the only square thing in the
   rail. `background-color`, never the shorthand, or the fill erases the plate. */
.ch-b{display:inline-flex;align-items:baseline;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-3);color:var(--g2);cursor:pointer;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.ch-b:hover{color:var(--wh);--pl-line:var(--g1);--pl-hi:var(--wh)}
.ch.on .ch-b{background-color:var(--wh);color:var(--bk);--pl-line:var(--wh);clip-path:var(--bevel)}
.ch-n{font-family:var(--hud);font-size:var(--hud-xs-fs);letter-spacing:var(--hud-xs-tr);font-variant-numeric:tabular-nums}
.ch-w{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(21px,2.2vw,36px);line-height:1;letter-spacing:var(--tr-md);text-transform:uppercase;white-space:nowrap}
.ch-panels{min-height:4.6em}
.ch-panel{display:none;gap:var(--sp-1);max-width:66ch}
.ch-panel.on{display:grid}
.mo .ch-panel.on{animation:rise var(--t-med) var(--out) both}
.ch-s{color:var(--g2)}
.ch-p{margin:0;color:var(--wh);font-size:16px;line-height:1.45}
.ch-who{color:var(--g2)}
@media (max-width:900px){
  .hero-stage{padding:var(--sp-9) var(--g) var(--sp-5);gap:var(--sp-5);grid-template-rows:auto 1fr auto}
  /* was min(44vw,200px) left-aligned — 176px at x=16 in a 400px viewport,
     the smallest and least central thing on the phone hero */
  .monk{position:relative;right:auto;top:auto;translate:none;width:min(78vw,340px);margin:0;justify-self:center;order:-1}
  .hero-intro{align-self:start}
  .ch-b{padding:0 var(--sp-2);gap:var(--sp-1)}
  .ch-w{font-size:clamp(19px,5.2vw,26px)}
  .ch-panels{min-height:6em}
}

/* GEO answer strip */
.answer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:var(--sp-5);padding-block:var(--sec)}
.answer h2{margin:var(--sp-1) 0 0}
.answer p{margin:0;max-width:var(--measure-wide);color:var(--g3)}
@media (max-width:760px){.answer{grid-template-columns:1fr;gap:var(--sp-2)}}

/* ---------- VENTURES: race-grid stack + synced filmstrip ---------- */
.ven-head{display:grid;grid-template-columns:1fr auto;gap:var(--sp-5);align-items:end;padding-block:var(--sec) var(--head-gap)}
.ven-head>p{margin:0;max-width:40ch;color:var(--g3);font-size:18px}
@media (max-width:760px){.ven-head{grid-template-columns:1fr}}
/* ---------- VENTURES: one horizontal card list, at every width -------------
   There were two carousels here, and which one a reader got depended on their
   screen and their motion setting. A scroll-driven pinned stack at >=761px
   with motion allowed — `.race{height:400svh}`, a sticky stage, eight cards at
   `position:absolute;inset:0`, the card index driven by the page's own scroll
   position — and a plain swipe list for phones and for reduced motion.

   The pinned one is deleted. It cost four viewports of scrolling before the
   page continued, it made the page slower to browse rather than richer, and
   it meant the carousel most readers met was not the one the design was
   judged on. What is left is the list, two-up from 761px, and the section is
   now its own natural height. */
.race{position:relative}
.race-stage{position:relative;outline-offset:-4px}
.race-stage.dragging{cursor:grabbing}
/* Snapping is suspended for the length of a drag. Mandatory snap re-snaps on
   every programmatic scrollLeft write, and a drag is a run of them, so the
   two fight and the card springs back under the pointer. */
.race-stage.dragging .race-cards{scroll-snap-type:none}
/* --peek is the sliver of the NEXT card left showing, and it is what makes
   the two-up basis below resolve to two cards rather than two-and-most-of-a-
   third. --card-h is declared once, here, because .card and .card-in both
   need it and two hand-kept copies drift.
   overscroll-behavior-x:contain is load-bearing, not hygiene: it is what
   stops a swipe that runs out of scroller chaining into the page or into the
   browser's back gesture. */
.race-cards{--peek:clamp(48px,6vw,96px);--card-h:min(82svh,720px);
  position:relative;display:flex;gap:var(--sp-2);overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding-inline:var(--g);scroll-padding-inline:var(--g)}
.card{position:relative;flex:0 0 min(88vw,560px);min-height:var(--card-h);
  overflow:hidden;scroll-snap-align:start}
.card.punch{transition:transform 90ms var(--cut)!important;transform:scale(1.05)!important}
.card-media{position:absolute;inset:0;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:grayscale(1) contrast(1.2) brightness(.5)}
.card-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.15) 30%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.94))}
.card-in{position:relative;z-index:2;min-height:var(--card-h);display:grid;grid-template-rows:auto 1fr auto auto auto;gap:var(--sp-4);padding:var(--sp-5) var(--sp-4)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4)}
.card-logo{width:64px;height:64px;object-fit:contain}
.card-word{font-family:var(--disp);font-style:italic;font-weight:900;font-size:22px;text-transform:uppercase}
.card-name{grid-row:3;margin:0;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(46px,14vw,96px);line-height:var(--lh-mega);letter-spacing:var(--tr-mega);text-transform:uppercase;overflow-wrap:anywhere}
.card-meta{grid-row:4;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.card-meta>div{padding:0 var(--sp-4) 0 0}
.card-meta dt{color:var(--g3)}
.card-meta dd{margin:var(--sp-1) 0 0;font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.5vw,24px);line-height:1.05;text-transform:uppercase}
.card-meta .stat{grid-column:1/-1;text-align:left;padding-right:0}
.card-meta .stat dd{font-style:italic;font-weight:900;font-size:clamp(46px,5.6vw,104px);line-height:.8}
.card-meta .stat small{font-size:.4em;margin-left:var(--sp-1)}
.card-foot{grid-row:5;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.card-foot p{margin:0;max-width:56ch;color:var(--g3)}
.card-foot .btn{height:46px}
/* Two-up from 761px — the same width the pinned variant used to switch on at,
   so no reader changes carousel at a width they did not already change at.
   The basis is arithmetic rather than a guess: the flex container's content
   box is the viewport less two page gutters, and two cards, the gap between
   them, the gap before the third and --peek of the third have to add up to
   100% of it. At 1440 that resolves to a 628.48px card.

   The sliver that ACTUALLY shows is wider than --peek, and the reason is
   worth keeping: `100%` in a flex-basis is the container's CONTENT box, but
   the run a reader sees at rest is its PADDING box — the right-hand gutter is
   only consumed once you reach the end of the scroll. So the visible sliver
   is --peek plus one gutter. Measured rather than derived: 127px of a 628px
   card at 1440, 69px of 327px at 761, 140px of 860px at 1920 — a steady
   16–21% of a card right across the range, which is what makes it read as a
   hint at every width rather than only at the one it was tuned for. */
@media (min-width:761px){
  .race-cards{--card-h:clamp(460px,58vw,720px)}
  .card{flex:0 0 calc((100% - 2 * var(--sp-2) - var(--peek)) / 2)}
  .card-in{padding:var(--sp-6) var(--sp-5)}
  .card-name{font-size:clamp(38px,5.2vw,112px)}
}
/* ---------- .race-sm: the same carousel, shorter and three up -------------
   Bailey, 2026-09-23: the case studies end with this instead of the
   next-project card, "but shorter and not so tall, showing 3 carousel at a
   time, its the same one used for the homepage".

   A MODIFIER, not a second carousel. Everything structural — the scroller, the
   snap, the drag, the keyboard handling, the position rail — is the component
   above, so the two can never drift into behaving differently. What changes is
   the height, the count, and the type that has to survive a third of the width.

   The three-up basis is the same arithmetic as the two-up one, with the count
   moved: three cards, the three gaps between and after them, and --peek of the
   fourth add up to 100% of the content box. --peek is cut because a sliver
   tuned against a 628px card reads as a whole column against a 400px one.

   Three up only from 1100px. Between 761 and 1099 it stays two up, and below
   761 one up, exactly like the full-size carousel: a third of 900px is a
   240px card, which is narrower than the meta grid inside it. */
.race-sm .race-cards{--peek:clamp(28px,3vw,56px);--card-h:min(56svh,440px)}
.race-sm .card-name{font-size:clamp(30px,8vw,52px)}
.race-sm .card-in{gap:var(--sp-3)}
/* The summary is the one thing that does not survive the narrower column: at
   three up it runs to six or seven lines and pushes the button out of the
   card. The card still carries sector, location, years and the headline stat,
   which is what the reader is scanning at this size — and the whole card is a
   link to the case study that says the rest. */
.race-sm .card-foot p{display:none}
.race-sm .card-foot{justify-content:flex-start}
@media (min-width:761px){
  .race-sm .race-cards{--card-h:clamp(380px,42vw,440px)}
  .race-sm .card-name{font-size:clamp(32px,4vw,56px)}
  .race-sm .card-in{padding:var(--sp-5) var(--sp-4)}
}
@media (min-width:1100px){
  .race-sm .card{flex:0 0 calc((100% - 3 * var(--sp-2) - var(--peek)) / 3)}
  .race-sm .card-meta{grid-template-columns:1fr 1fr}
}

/* ---------- position rail ------------------------------------------------
   /work listed the same eight ventures three times: the full-bleed cards, a
   thumbnail strip, and a separate "All eight ventures" index. The index is
   deleted and the strip is reduced to the one thing it alone answered — where
   am I in eight. Numeral, current venture name, progress. Each segment stays
   a real >=44px target, so click-to-jump survives.

   The component lives in site.css, because the case-study milestones and
   gallery use it too and those pages load report.css rather than this file.
   Nothing of it is left here: `.pin .prail` pinned the rail to the bottom of
   the sticky stage, and there is no sticky stage any more. It is a block
   under the list, at every width. */
.ven-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5) var(--sp-6);padding-block:var(--sec)}
.ven-cta p{margin:0;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(34px,4.6vw,78px);line-height:var(--lh-lg);letter-spacing:var(--tr-lg);text-transform:uppercase;max-width:18ch}
.ven-cta>div{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* venture row list — shared by /sydney and /ho-chi-minh-city. The /work copy
   of it (the "All eight ventures" index) was deleted in iteration 4: it was
   the weakest of the three listings of the same eight, and every fact on a
   row — name, category, summary, still — is already on that venture's card. */
.fidx-list{list-style:none;margin:0;padding:0}
.fidx{position:relative;display:grid;grid-template-columns:40px 120px minmax(0,1.1fr) minmax(0,1fr) 40px;grid-template-rows:auto auto;column-gap:var(--sp-5);align-items:center;padding:var(--sp-4) 0;isolation:isolate;transition:color var(--t-fast)}
.fidx::before{content:"";position:absolute;inset:0 calc(var(--g) * -1);z-index:-1;background:var(--wh);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-med) var(--cut)}
.fidx:hover,.fidx:focus-visible{color:var(--bk)}
.fidx:hover::before,.fidx:focus-visible::before{transform:scaleY(1)}
.fidx:hover .mute,.fidx:hover .fidx-s,.fidx:hover .fidx-c{color:var(--on-fill)}
/* Only the LEADING numeral spans both rows. This was `.fidx>.hud`, which also
   matched the category span (class="fidx-c hud") and, at 0,2,0, outranked
   .fidx-c's own 0,1,0 placement — so the category was forced to span rows 1–2
   and printed on top of the venture name. Name and category are now placed
   explicitly rather than left to auto-placement. */
.fidx>.hud:first-child{grid-row:1/3}
.fidx-img{grid-row:1/3;width:120px;height:72px;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.fidx-n{grid-column:3;grid-row:1;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(32px,4vw,64px);line-height:var(--lh-md);letter-spacing:var(--tr-md);text-transform:uppercase}
.fidx-c{grid-column:3;grid-row:2;color:var(--g3)}
.fidx-s{grid-column:4;grid-row:1/3;color:var(--g3)}
.fidx-go{grid-column:5;grid-row:1/3;font-size:20px}
/* Phone: three explicit rows, every child explicitly placed.
   This rule previously left .fidx-n unplaced while giving .fidx-s
   `grid-row:auto` against a grid that still declared only two rows, so the
   venture name and its summary auto-placed into the same cell and rendered
   on top of each other. It affects /work as much as the new sector and city
   pages — the component is shared. */
@media (max-width:760px){
  .fidx{grid-template-columns:30px 76px minmax(0,1fr);grid-template-rows:auto auto auto;
        column-gap:var(--sp-3);row-gap:var(--sp-1);align-items:start}
  .fidx>.hud:first-child{grid-row:1/3}
  .fidx-img{grid-row:1/3;width:76px;height:56px}
  .fidx-n{grid-column:3;grid-row:1}
  .fidx-c{grid-column:3;grid-row:2}
  .fidx-s{grid-column:1/-1;grid-row:3;margin-top:var(--sp-2)}
  .fidx-go{display:none}
}

/* ---------- home sections ---------- */
/* .svc moved to site.css — /services uses it and does not load showcase.css,
   so the services index was losing its section rhythm entirely */
.svc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-5);margin-bottom:var(--sp-f-8)}
.svc-copy{display:grid;gap:var(--sp-3);align-content:end;color:var(--g3)}
.svc-copy p{margin:0}
.svc-copy .btn{justify-self:start}
@media (max-width:860px){.svc-head{grid-template-columns:1fr}}
/* The .lt services marquee is gone: it scrolled the seven service names past
   the reader directly above the seven rows that name them, and was
   aria-hidden, so it was a third printing of the same list for sighted users
   only. */
.eng{padding-block:var(--sec) var(--sec-lg);overflow:hidden}
.eng-head{text-align:center;margin-bottom:var(--sp-f-8)}
.eng-head .eyebrow{justify-content:center}
.proc{padding-block:0 var(--sec-lg)}
.proc-line{position:relative;height:3px;background:var(--hair);margin-top:var(--sp-f-8);overflow:hidden}
.proc-line i{position:absolute;inset:0;background:var(--wh);transform-origin:left}
@supports (animation-timeline:view()){.mo .proc-line i{animation:fillX linear both;animation-timeline:view();animation-range:entry 40% cover 55%}}
@keyframes fillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.proc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.step{padding-top:var(--sp-5);display:grid;gap:var(--sp-2);align-content:start}
.step b{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(64px,7vw,130px);line-height:.8;letter-spacing:var(--tr-lg);color:transparent;-webkit-text-stroke:var(--stroke) var(--wh);font-variant-numeric:tabular-nums}
.step h3{margin:0;font-family:var(--disp);font-weight:800;font-size:30px;text-transform:uppercase;line-height:1}
.step p{margin:0;color:var(--g3)}
@media (max-width:860px){.proc-grid{grid-template-columns:1fr 1fr;row-gap:var(--sp-6)}}
@media (max-width:480px){.proc-grid{grid-template-columns:1fr}}
.ops{padding-block:var(--sec-lg) var(--sec);overflow:hidden}
.ops-h{margin:var(--sp-4) 0 0;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(54px,12.5vw,240px);line-height:var(--lh-mega);letter-spacing:var(--tr-mega);text-transform:uppercase}
.ops-h span{display:block}
.ops-h span+span{text-align:right}
@supports (animation-timeline:view()){.mo .ops-h span{animation:slideL linear both;animation-timeline:view();animation-range:entry 0% cover 40%}.mo .ops-h span+span{animation-name:slideR}}
@keyframes slideL{from{transform:translateX(-12vw)}to{transform:none}}
@keyframes slideR{from{transform:translateX(12vw)}to{transform:none}}
.ops-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-f-9);color:var(--g3);font-size:clamp(17px,1.3vw,20px)}
.ops-cols p{margin:0}
.ops-cols p:last-child{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media (max-width:860px){.ops-cols{grid-template-columns:1fr}}
/* The slogan. It sat at 24/24 between neighbours padded 128/96 and 128/128,
   which made it read as a rule between two sections rather than as a
   statement of its own. Full section padding, and the marquee keeps moving —
   Bailey's call, made knowing it reads as a prominent moving band. */
.mq{overflow:hidden;padding-block:var(--sec-lg)}
.mq-track{display:flex;width:max-content}
.mq-track>span{display:flex;align-items:center;gap:var(--sp-6);padding-right:var(--sp-6);font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(44px,6.6vw,120px);line-height:1;text-transform:uppercase;white-space:nowrap}
.mq-track svg{width:.62em;height:.62em;fill:var(--wh)}
.rec{padding-block:var(--sec-lg);background:var(--wh);color:var(--bk);content-visibility:auto;contain-intrinsic-size:auto 900px}
.rec :focus-visible{outline-color:var(--bk)}
.rec .eyebrow{color:var(--on-fill-2)}
.rec .ul{color:var(--on-fill)}
.rec .ul:hover,.rec .ul:focus-visible{color:var(--bk)}
.rec-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-5);margin-top:var(--sp-f-8)}
.num{padding:0 var(--sp-4) 0 0;display:grid;gap:var(--sp-3);align-content:start}
.num b{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(64px,9.6vw,190px);line-height:var(--lh-mega);letter-spacing:var(--tr-mega);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:960px){.rec-grid{grid-template-columns:1fr 1fr}.num{padding-bottom:var(--sp-5)}}
.fnd{padding-block:var(--sec-lg);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-5);align-items:center}
.fnd-mark{grid-column:1/6;position:relative;aspect-ratio:1}
.fnd-mark svg{position:absolute;inset:12%;width:76%;height:76%;fill:var(--wh)}
@supports (animation-timeline:view()){.mo .fnd-mark svg{animation:turn linear both;animation-timeline:view()}}
@keyframes turn{from{transform:perspective(1200px) rotateY(-35deg)}to{transform:perspective(1200px) rotateY(35deg)}}
.fnd-copy{grid-column:7/13;display:grid;gap:var(--sp-4);color:var(--g3);font-size:19px}
.fnd-copy h2{margin:0;color:var(--wh);font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(54px,6.6vw,124px);line-height:var(--lh-lg);letter-spacing:var(--tr-lg);text-transform:uppercase}
.fnd-copy p{margin:0;max-width:52ch}
.fnd-copy p+p:not(:last-child){font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.6vw,42px);line-height:1;text-transform:uppercase;color:var(--wh)}
/* max-width:320px with no margin-inline left the founder mark hard against
   the left gutter on a phone — measured x=16, w=320 in a 400px viewport */
@media (max-width:860px){.fnd{grid-template-columns:1fr}.fnd-mark,.fnd-copy{grid-column:auto}.fnd-mark{max-width:320px;width:100%;margin-inline:auto}}
.faqt{padding-block:0 var(--sec-lg);content-visibility:auto;contain-intrinsic-size:auto 800px}