/* v2 sections — cyos-website-v2 (generated; do not edit).
   Extension of the house system (styles.css + home.css). Only the NEW
   sections live here: the hero MacBook frame + bleed-out glow (Monish
   2026-09-16), hero CTA slot, the chooser slider (criteria intro +
   teaching words + animated field visuals + worry line), How We Work, FAQ,
   fndwall (sept founders + logo wall). Tokens/geometry inherited from
   styles.css :root. */

/* ---- 1 · hero: CTA slot under the subtitle ---- */
.h78-cta{margin-top:26px}
.h78-cta .btn{min-width:180px}

/* ---- 1b · hero: the slide card as a MacBook frame (Monish 2026-09-16:
   "put a macbook frame around the images and maybe put a bleed out
   background not solid but kinda gives it depth"). Dark slate lid + wider
   base deck with thumb scoop around each screenshot; a soft warm bloom
   bleeds out behind the stage (no solid slab), a contact shadow grounds
   the laptop. v2-only: this file never loads on the sept build, whose
   .h78-card keeps its plain white frame. ---- */
.home-v4 .hero78{position:relative;isolation:isolate}
.home-v4 .hero78::before{content:'';position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(64% 50% at 50% 64%, rgba(196,131,59,.21) 0%,
      rgba(196,131,59,.085) 46%, transparent 72%),
    radial-gradient(92% 70% at 50% 56%, rgba(196,131,59,.07) 0%, transparent 68%),
    radial-gradient(38% 9% at 50% 96%, rgba(196,131,59,.11), transparent 72%)}
.home-v4 .h78-card{position:relative;display:block;width:100%;padding:0;border:0;
  background:transparent;border-radius:0;box-shadow:none;color:inherit;
  transform:translateY(0);transition:transform .45s var(--h2-ease)}
.home-v4 .h78-card:focus-visible{outline:2px solid var(--h2-amber-deep);
  outline-offset:10px;border-radius:10px}
/* the lid — dark slate bezel around the screenshot */
.home-v4 .h78-screen{position:relative;z-index:1;padding:12px;
  background:linear-gradient(180deg,#26333F 0%,#15212C 52%,#0B141D 100%);
  border-radius:22px 22px 15px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 26px 52px -22px rgba(7,17,26,.40)}
/* hairline rim where the LCD meets the bezel */
.home-v4 .h78-screen::after{content:'';position:absolute;inset:12px;
  border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  pointer-events:none}
.home-v4 .h78-card img{border-radius:7px;background:#0B141D}
/* 2026-09-27 (Leonard: "the laptop size and the sizing ... strange"): the
   screen was a fixed clamp() height on a fluid width — 2.06:1 at desktop,
   squarer on tall windows — and cover-cropped every screenshot (11–21% of
   the bottom, or the sides). Now: a true 11/6 screen (Monish's MacBook
   aspect), the screenshot fitted whole on a white LCD, and the laptop sized
   to the viewport so it never swallows the fold. */
.home-v4 .h78-stage{width:min(760px,100%,max(520px,calc((100svh - 300px) * 1.83)))}
.home-v4 .h78-card img,.home-v4 .h78-card .pj-hero--slot{width:100%;height:auto;aspect-ratio:11/6;
  object-fit:contain;object-position:top center;background:#fff}
/* camera housing dipping into the screen (the MacBook notch) */
.home-v4 .h78-cam{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:clamp(64px,11%,110px);height:19px;z-index:2;
  background:linear-gradient(180deg,#1B2833,#0B141D);border-radius:0 0 9px 9px;
  box-shadow:0 1px 0 rgba(255,255,255,.05)}
/* the base deck — wider than the lid, thumb scoop on its top edge */
.home-v4 .h78-deck{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:108%;height:17px;border-radius:3px 3px 20px 20px;
  background:linear-gradient(180deg,#3E4C58 0%,#1F2B35 42%,#0B141D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.45),
    0 8px 16px -8px rgba(7,17,26,.45)}
.home-v4 .h78-deck i{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:12%;min-width:72px;height:7px;background:#0B141D;
  border-radius:0 0 10px 10px;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
/* floor contact shadow grounding the laptop */
.home-v4 .h78-card::before{content:'';position:absolute;top:100%;left:50%;
  width:78%;height:32px;margin-top:9px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(7,17,26,.34) 0%,
    rgba(7,17,26,.13) 46%,transparent 74%);
  opacity:.65;transition:opacity .4s var(--h2-ease),transform .4s var(--h2-ease)}
/* hover: the laptop lifts, the floor shadow deepens and spreads */
@media(hover:hover){
  .home-v4 .h78-card:hover{transform:translateY(-6px)}
  .home-v4 .h78-card:hover::before{opacity:.9;
    transform:translateX(-50%) translateY(5px) scale(1.05)}
}
/* the missing-hero slot renders as a dark screen inside the bezel */
.home-v4 .h78-card .pj-hero--slot{height:clamp(330px,52svh,550px);
  border-radius:7px;background:#0C1620;border-color:rgba(157,178,194,.22)}
.home-v4 .h78-card .pj-hero--slot span{color:#7B93A3}
@media(max-width:640px){
  .home-v4 .h78-screen{padding:7px;border-radius:14px 14px 10px 10px}
  .home-v4 .h78-screen::after{inset:7px;border-radius:5px}
  .home-v4 .h78-card img{border-radius:5px}
  .home-v4 .h78-cam{top:7px;height:12px;width:24%;border-radius:0 0 6px 6px}
  .home-v4 .h78-deck{width:105.5%;height:10px;border-radius:2px 2px 13px 13px}
  .home-v4 .h78-deck i{width:16%;min-width:44px;height:4px;border-radius:0 0 7px 7px}
  .home-v4 .h78-card::before{width:82%;height:18px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  .home-v4 .h78-card,.home-v4 .h78-card:hover{transform:none;transition:none}
  .home-v4 .h78-card::before,.home-v4 .h78-card:hover::before{
    transform:translateX(-50%);opacity:.65;transition:none}
}

/* ---- 4 · chooser slider ---- */
/* motion vocabulary (r4 polish, 2026-09-25 — hyperframes animation doctrine):
   the house settle --ease-out (expo-style) carries entrances, pops, drops and
   draws; text fades ride a calmer power2-style curve (--cv-ez-text); ambient
   loops and ghost blooms ride sine (--cv-ez-calm). Smooth beats bouncy — no
   overshoot anywhere; every visual's verdict line lands by ~2.7s. */
.choose{padding:104px 0 96px;
  --cv-ez-text:cubic-bezier(.25,.46,.45,.94);
  --cv-ez-calm:cubic-bezier(.37,0,.63,1)}
.choose .sec-head{max-width:52rem}
/* intro: the two criteria (Monish 2026-09 draft, lightly edited) */
.choose__intro{margin:16px auto 0;max-width:44rem;color:var(--text-2);
  font-size:1.02rem;line-height:1.62;text-wrap:pretty}
.choose__crit{list-style:none;margin:26px auto 0;padding:0;max-width:860px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.choose__crit li{display:flex;gap:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;
  font-size:.92rem;line-height:1.55;color:var(--text-2)}
.choose__crit b{color:var(--text)}
.choose__crit-n{font-family:var(--font-mono);font-weight:700;
  color:var(--signal-deep);font-size:.8rem;padding-top:2px}
.choose__slider{margin-top:40px}
.choose__stage{position:relative}
/* no-JS: all seven stacked and readable */
.choose__slide{display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 18px 44px rgba(10,15,22,.07);overflow:hidden}
html.js .choose__slide{display:none}
html.js .choose__slide.is-in{display:grid;animation:chIn .45s var(--ease-out) both}
@keyframes chIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* the floating white block: white hover effect + shadow (Monish spec) */
@media (hover:hover){
  html.js .choose__slide.is-in{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  html.js .choose__slide.is-in:hover{transform:translateY(-4px);
    box-shadow:0 34px 80px rgba(10,15,22,.13)}
}
.choose__words{padding:clamp(30px,4vw,58px);display:flex;flex-direction:column;
  justify-content:center;gap:14px}
.choose__no{font-family:var(--font-mono,monospace);font-size:.8rem;
  letter-spacing:.18em;color:var(--signal-deep);font-weight:600}
.choose__fear{font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.9rem);
  line-height:1.22;color:var(--text);max-width:24ch;font-weight:600}
.choose__desc{color:var(--text-2);font-size:.98rem;line-height:1.62;
  max-width:56ch;text-wrap:pretty}
.choose__points{list-style:none;padding:0;margin:2px 0 0;display:flex;
  flex-direction:column;gap:8px}
.choose__points li{position:relative;padding-left:16px;font-size:.9rem;
  line-height:1.5;color:var(--text-2)}
.choose__points li::before{content:'';position:absolute;left:0;top:.5em;
  width:6px;height:6px;border-radius:50%;background:var(--signal)}
.choose__flags{margin-top:4px;padding-top:12px;border-top:1px dashed var(--line)}
.choose__flags-k{font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--error);
  font-weight:700}
/* red flags stack (Leonard 2026-09-27): the inline dot-separated run read
   as one run-on line — one flag per line, a red dash marks each */
.choose__flags-list{list-style:none;display:flex;flex-direction:column;gap:6px;
  padding:0;margin:10px 0 0}
.choose__flags-list li{position:relative;padding-left:20px;font-size:.95rem;
  line-height:1.5;color:var(--text-2)}
.choose__flags-list li::before{content:'';position:absolute;left:2px;top:.75em;
  width:9px;height:2px;border-radius:1px;background:var(--error)}
.choose__visual{background:var(--bg-subtle);border-left:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:clamp(22px,3vw,44px);
  min-height:380px}
.choose__ctl{display:flex;align-items:center;gap:14px;margin-top:22px;
  justify-content:center}
.choose__btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--text);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:border-color .2s,color .2s}
.choose__btn:hover{border-color:var(--signal);color:var(--signal-deep)}
.choose__dots{display:flex;gap:10px}
.choose__dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line-strong);transition:background .2s,transform .2s}
.choose__dot.is-active{background:var(--signal);transform:scale(1.25)}
.choose__dot:focus-visible{outline:2px solid var(--signal-deep);outline-offset:3px}

/* the field visual — one animated diagram per concern (Monish 2026-09:
   "short description, key points, red flags at the end, then the visuals
   that relate"). SHEET GRAMMAR (r3, Monish-approved: full sheet, all 7):
   every visual carries a mono header (sh-h), a body that fills the canvas,
   and a bronze verdict caption. ANIMATION LAW: every element's base state
   is the FINAL frame — keyframes start from an earlier state and are scoped
   to html.js .choose__slide.is-in, so each activation replays the sequence
   while no-JS and reduced motion render the complete, still diagram.
   MOTION CAP (r4): sequences run ~2.1-2.7s, never the 4s+ of the r2 stack;
   each verdict caption lands last (note primitive), after its visual settles. */
.chvis{width:min(500px,100%)}
.chvis svg{width:100%;height:auto;display:block}
.chvis text{font-family:var(--font-mono);letter-spacing:.08em;
  fill:var(--text-3)}
.chvis .sh-h{font-weight:700;letter-spacing:.14em}
.chvis .t-strong{fill:var(--text);font-weight:700}
.chvis .t-deep{fill:var(--signal-deep);font-weight:700}
.chvis .t-err{fill:var(--error);font-weight:700}
.chvis .t-2{fill:var(--text-2)}
.chvis .s-line{stroke:var(--line-strong);fill:none;stroke-width:1.5}
.chvis .s-rule{stroke:var(--line);fill:none;stroke-width:1}
.chvis .s-sig{stroke:var(--signal);fill:none;stroke-width:2;stroke-linecap:round}
.chvis .s-deep{stroke:var(--signal-deep);fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.chvis .s-err{stroke:var(--error);fill:none;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.chvis .ck{stroke:var(--bg);fill:none;stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round}
.chvis .f-card{fill:var(--bg);stroke:var(--line)}
.chvis .f-soft{fill:var(--signal-glow);stroke:var(--signal-line)}
.chvis .f-ok{fill:var(--signal)}
.chvis .f-err{fill:var(--error)}
.chvis .f-mute{fill:var(--line)}
.chvis .f-ghost{fill:none;stroke:var(--line-strong);stroke-dasharray:3 4}
.chvis .cv-tl-dot{fill:var(--line-strong)}
.chvis .cv-ds-chip{fill:var(--bg);stroke:var(--line-strong);stroke-dasharray:3 3}
.chvis .cv-ds-frame{fill:none;stroke:var(--signal-line);stroke-width:1.5}
.chvis .cv-lg-fill{fill:var(--error);opacity:.82}
.chvis .cv6-av{fill:var(--signal-deep)}
.chvis .cv6-av2{stroke:var(--signal-deep);stroke-width:2;fill:none}
.chvis .cv6-hand{stroke:var(--text);stroke-width:2;stroke-linecap:round}

/* animation primitives — scoped to the active slide so each visit replays.
   r4: fades calm down (secondary elements), verdict captions get their own
   settle (note = short rise + fade), entrances keep the house expo settle. */
/* the dash lives only inside the keyframes: the rest state is a plain solid
   stroke (Safari drops pathLength-normalised dashes at rest, so drawn lines
   vanished once the animation ended; reduced motion never dashes at all) */
html.js .choose__slide.is-in .d{animation:cvDraw .7s var(--ease-out) both}
html.js .choose__slide.is-in .pop{transform-box:fill-box;
  transform-origin:center;animation:cvPop .5s var(--ease-out) both}
html.js .choose__slide.is-in .fade{animation:cvFade .7s var(--cv-ez-text) both}
html.js .choose__slide.is-in .rise{transform-box:fill-box;
  transform-origin:center bottom;animation:cvRise .6s var(--ease-out) both}
html.js .choose__slide.is-in .drop{animation:cvDrop .6s var(--ease-out) both}
html.js .choose__slide.is-in .note{transform-box:fill-box;
  animation:cvNote .6s var(--cv-ez-text) both}
@keyframes cvDraw{0%{stroke-dasharray:1;stroke-dashoffset:1}
  99.9%{stroke-dasharray:1;stroke-dashoffset:0}
  100%{stroke-dasharray:none;stroke-dashoffset:0}}
@keyframes cvPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes cvFade{from{opacity:0}to{opacity:1}}
@keyframes cvRise{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes cvDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes cvNote{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* per-visual motion */
/* the uncertain zone: blooms softly, then settles to the 18% ghost (base
   state = the settled ghost; the animation only supplies the transition) */
.cv-ghost{opacity:.18}
html.js .choose__slide.is-in .cv-ghost{animation:cvGhost .85s var(--cv-ez-calm) 1.5s both}
@keyframes cvGhost{0%{opacity:0}55%{opacity:.55}100%{opacity:.18}}
.cv-ds-world{transform-box:view-box;transform-origin:128px 129px}
html.js .choose__slide.is-in .cv-ds-world{animation:cvZoom 1.4s var(--ease-out) both}
@keyframes cvZoom{0%,18%{transform:scale(2.7)}100%{transform:scale(1)}}
/* the unknown fourth bar keeps regrowing — ambient, so it rides sine */
.cv-lg-bar{transform-box:fill-box;transform-origin:center bottom}
html.js .choose__slide.is-in .cv-lg-bar{animation:cvRegrow 2.4s var(--cv-ez-calm) 1s infinite alternate}
@keyframes cvRegrow{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
/* severity clocks: one decelerating spin that settles on each committed
   mark (circ-style out) — P1 settles first, P3 last, no hold-then-whip */
.cv6-hand{transform-box:view-box}
html.js .choose__slide.is-in .cv6-hand1{transform-origin:160px 72px;
  animation:cvSpin 1.15s cubic-bezier(.19,.8,.22,1) .8s both}
html.js .choose__slide.is-in .cv6-hand2{transform-origin:160px 124px;
  animation:cvSpin 1.25s cubic-bezier(.19,.8,.22,1) 1s both}
html.js .choose__slide.is-in .cv6-hand3{transform-origin:160px 176px;
  animation:cvSpin 1.35s cubic-bezier(.19,.8,.22,1) 1.2s both}
@keyframes cvSpin{0%{transform:rotate(-660deg)}100%{transform:rotate(0)}}
html.js .choose__slide.is-in .cv6-card{animation:cvUp .6s var(--ease-out) 2.05s both}
@keyframes cvUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cv7-doc{transform-box:view-box}
html.js .choose__slide.is-in .cv7-doc{animation:cv7Slide 2.2s var(--ease-out) both}
@keyframes cv7Slide{0%,45%{transform:translateX(-150px)}75%,100%{transform:translateX(0)}}

/* the worry line (end of the section): question + blank + mailto handoff */
.choose__worry{margin-top:46px;display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center}
.choose__worry-q{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--text)}
.choose__worry-form{display:flex;gap:10px;width:min(600px,100%);margin-top:2px}
.choose__worry-form .input{flex:1;min-width:0}
.choose__worry-form .btn{flex:0 0 auto}
/* no JS → no composed mail: hide the blank, keep the direct mailto note */
html:not(.js) .choose__worry-form{display:none}
.choose__worry-note{font-size:.8rem;color:var(--text-3)}
.choose__worry-note a{color:var(--signal-deep);font-weight:400;text-decoration:none}
.choose__worry-note a:hover{text-decoration:underline}
@media (max-width:560px){.choose__worry-form{flex-direction:column}}

/* ---- 5 · how we work — SIX CLIENT BENEFITS as flip cards (Monish
   2026-09-21): numbered title + big icon on very transparent liquid-
   gradient cards; hover flips the card (3D rotateY) for the description;
   CTA under the grid → /projects.html (the proof).
   ROBUSTNESS LAW (probe-caught): the STATIC STACK is the default — the 3D
   flip is an enhancement layered on ONLY inside
   @media (hover:hover) and (pointer:fine); reduced motion reverts it.
   Touch devices that lie about hover can never trap the description. */
.hww{padding:104px 0;background:var(--bg-subtle);
  --hww-grad:
    radial-gradient(120% 120% at var(--ga,12%) var(--gb,18%),
      rgba(196,131,59,.13), transparent 58%),
    radial-gradient(95% 95% at var(--gc,88%) var(--gd,6%),
      rgba(138,84,20,.09), transparent 62%),
    radial-gradient(140% 120% at 50% 120%, rgba(61,76,90,.07), transparent 60%),
    linear-gradient(168deg, rgba(255,255,255,.78), rgba(255,255,255,.42))}
.hww__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
/* six per-card gradient seeds — one amber/bronze/slate family, anchors
   rotated per card so the wall reads liquid, not tiled */
.hww__card:nth-of-type(1){--ga:10%;--gb:16%;--gc:90%;--gd:4%;--ha:20%;--hb:-8%}
.hww__card:nth-of-type(2){--ga:88%;--gb:10%;--gc:14%;--gd:82%;--ha:84%;--hb:-6%}
.hww__card:nth-of-type(3){--ga:16%;--gb:84%;--gc:86%;--gd:12%;--ha:24%;--hb:104%}
.hww__card:nth-of-type(4){--ga:84%;--gb:16%;--gc:10%;--gd:88%;--ha:78%;--hb:-8%}
.hww__card:nth-of-type(5){--ga:12%;--gb:12%;--gc:88%;--gd:86%;--ha:18%;--hb:-6%}
.hww__card:nth-of-type(6){--ga:86%;--gb:80%;--gc:12%;--gd:14%;--ha:80%;--hb:104%}
/* --- default: static stack (front, divider, description) --- */
.hww__card{position:relative;min-width:0;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:0 12px 32px rgba(10,15,22,.05);
  background:var(--hww-grad)}
.hww__flip{display:block;position:relative}
.hww__face{display:flex;flex-direction:column;border:0;background:none;
  box-shadow:none}
.hww__face--front{padding:22px 24px 8px}
.hww__face--front h3{margin-top:14px;font-family:var(--font-display);
  font-size:1.32rem;font-weight:600;letter-spacing:-.01em}
.hww__face--back{padding:14px 24px 20px;border-top:1px solid var(--line-soft)}
/* static stack: the back face is the description alone — number + title
   already established on the front above (no duplication on touch) */
.hww__face--back .hww__no,.hww__face--back h3{display:none}
.hww__ico{display:block;width:46px;height:46px;color:var(--signal-deep);margin-top:18px}
.hww__ico svg{width:100%;height:100%;display:block}
.hww__no{font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;color:var(--text-3)}
.hww__hint{display:none}
.hww__face--back h3{margin-top:12px;font-family:var(--font-display);
  font-size:1.08rem;font-weight:600}
.hww__desc{margin-top:10px;font-size:.95rem;line-height:1.62;color:var(--text-2);
  max-width:34ch}
.hww__cta{margin-top:44px;display:flex;justify-content:center}
/* --- enhancement: the 3D flip, fine pointers with hover only --- */
@media (hover:hover) and (pointer:fine){
  .hww__card{height:256px;border:0;box-shadow:none;background:none;outline:none;
    perspective:1200px}
  .hww__card:focus-visible{outline:2px solid var(--signal-deep);outline-offset:3px}
  .hww__flip{height:100%;transform-style:preserve-3d;
    transition:transform .7s var(--h2-ease)}
  .hww__card:hover .hww__flip,.hww__card:focus-within .hww__flip{transform:rotateY(180deg)}
  .hww__face{position:absolute;inset:0;overflow:hidden;
    border:1px solid var(--line);border-radius:var(--r-xl);
    -webkit-backface-visibility:hidden;backface-visibility:hidden;
    background:var(--hww-grad);
    box-shadow:0 12px 32px rgba(10,15,22,.05)}
  /* the liquid layer: a warmer blob pair that drifts in on hover —
     compositor-only (opacity + transform), never touches layout */
  .hww__face::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
    pointer-events:none;
    background:
      radial-gradient(110% 110% at var(--ha,26%) var(--hb,-6%),
        rgba(196,131,59,.22), transparent 56%),
      radial-gradient(130% 110% at 104% 106%, rgba(138,84,20,.17), transparent 58%);
    opacity:0;transform:translate3d(0,5%,0) scale(1.02);
    transition:opacity .5s var(--ease-out),transform 1.1s var(--h2-ease)}
  .hww__card:hover .hww__face::before,
  .hww__card:focus-within .hww__face::before{opacity:1;
    transform:translate3d(0,0,0) scale(1)}
  .hww__face > *{position:relative;z-index:1}
  .hww__face--front{padding:24px 26px 22px}
  .hww__face--front h3{margin-top:auto}
  .hww__ico{margin-top:24px}
  .hww__face--back{padding:24px 26px 22px;border:0;transform:rotateY(180deg)}
  /* Safari ignores backface-visibility once a face has composited children
     (the z-indexed content, the liquid ::before) — the back showed through
     mirrored. Swap visibility at the half-turn (.35s of the .7s flip) so no
     browser ever paints a face's reverse side. */
  .hww__face--front{transform:rotateY(0deg);visibility:visible;transition:visibility 0s .35s}
  .hww__face--back{visibility:hidden;transition:visibility 0s .35s}
  .hww__card:hover .hww__face--front,.hww__card:focus-within .hww__face--front{visibility:hidden}
  .hww__card:hover .hww__face--back,.hww__card:focus-within .hww__face--back{visibility:visible}
  .hww__face--back .hww__no,.hww__face--back h3{display:block}
  .hww__hint{display:block;margin-top:10px;font-family:var(--font-mono);
    font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-3)}
}
/* reduced motion: revert the flip to the static stack (later block wins —
   hover affordances become readable content, the site's static-truth law) */
@media (prefers-reduced-motion:reduce){
  .hww__card{height:auto;border:1px solid var(--line);
    box-shadow:0 12px 32px rgba(10,15,22,.05);background:var(--hww-grad)}
  .hww__card:hover .hww__flip,.hww__card:focus-within .hww__flip,
  .hww__flip{transform:none !important;transform-style:flat;transition:none}
  .hww__face,.hww__card:hover .hww__face,.hww__card:focus-within .hww__face{visibility:visible !important;transition:none}
  .hww__face{position:static;overflow:visible;border:0;box-shadow:none;
    background:none;
    -webkit-backface-visibility:visible;backface-visibility:visible}
  .hww__face::before{display:none}
  .hww__face--front{padding:22px 24px 8px}
  .hww__face--front h3{margin-top:14px}
  .hww__face--back{transform:none;padding:14px 24px 20px;
    border-top:1px solid var(--line-soft)}
  .hww__face--back .hww__no,.hww__face--back h3{display:none}
  .hww__ico{margin-top:18px}
  .hww__hint{display:none}
}

/* ---- 6 · FAQ ---- */
.faq{padding:104px 0 96px}
.faq .sec-head{max-width:52rem}
.faq__list{max-width:52rem;margin-left:auto;margin-right:auto;display:flex;
  flex-direction:column;gap:12px}
.faq__item{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  transition:box-shadow .3s var(--ease-out)}
.faq__item:hover{box-shadow:0 14px 36px rgba(10,15,22,.08)}
.faq__item summary{display:flex;align-items:center;gap:14px;padding:18px 22px;
  cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;color:var(--text)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:2px solid var(--signal-deep);outline-offset:-2px;
  border-radius:var(--r)}
.faq__item summary i{margin-left:auto;width:22px;height:22px;position:relative;
  flex:0 0 auto}
.faq__item summary i::before,.faq__item summary i::after{content:'';position:absolute;
  background:var(--signal-deep);border-radius:2px;transition:transform .25s var(--ease-out)}
.faq__item summary i::before{width:14px;height:2px;left:4px;top:10px}
.faq__item summary i::after{width:2px;height:14px;left:10px;top:4px}
.faq__item[open] summary i::after{transform:scaleY(0)}
.faq__a{padding:0 22px 20px}
.faq__a p{font-size:.95rem;line-height:1.66;color:var(--text-2);max-width:62ch;
  text-wrap:pretty;margin:12px 0 0}
/* short-answer lead — the verdict line, then the reasoning (2026-09-17) */
.faq__sa{font-weight:400;color:var(--text)}
/* Q2 comparison table (no bolds inside — Monish's call) */
.faq__table{width:100%;border-collapse:collapse;margin:14px 0 2px;font-size:.92rem}
.faq__table th{font-weight:400;text-align:left;vertical-align:top;
  padding:9px 14px 9px 0;width:34%;color:var(--text)}
.faq__table td{vertical-align:top;padding:9px 0;color:var(--text-2)}
.faq__table tr+tr th,.faq__table tr+tr td{border-top:1px solid var(--line)}
.faq__a ul{margin:8px 0 4px;padding-left:20px;font-size:.95rem;line-height:1.66;
  color:var(--text-2);max-width:62ch}
.faq__a ul li+li{margin-top:4px}
.faq__a a{color:var(--text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--signal-deep)}
.faq__a a:hover{text-decoration-color:var(--text)}
/* FAQ as hairline rows — same as /projects and /services (Leonard 2026-09-27) */
.faq .sec-head{max-width:760px}
.faq__list{max-width:760px;gap:0}
.faq__item{background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item:hover{box-shadow:none}
.faq__item summary{padding:22px 0;font-family:var(--font-display);font-size:17px;font-weight:500;
  line-height:1.4;letter-spacing:-.01em;color:var(--text);transition:color .2s}
.faq__item summary:hover{color:var(--signal-deep)}
.faq__item summary i{width:14px;height:14px}
.faq__item summary i::before{width:12px;height:1.5px;left:1px;top:6px;background:var(--text-3)}
.faq__item summary i::after{width:1.5px;height:12px;left:6.25px;top:1px;background:var(--text-3)}
.faq__a{padding:0 0 24px}
.faq__a p,.faq__a ul{font-size:16px;line-height:1.7;max-width:640px}
.faq__table{font-family:var(--font-display);font-size:14px;line-height:1.55}
@media (max-width:640px){
  /* stacked rows at phone width — the 390 fold law, table included */
  .faq__table,.faq__table tbody,.faq__table tr,.faq__table th,.faq__table td{
    display:block;width:100%}
  .faq__table th{padding:10px 0 2px}
  .faq__table td{padding:0 0 10px}
  .faq__table tr+tr th{border-top:1px solid var(--line);padding-top:12px}
  .faq__table tr+tr td{border-top:0}
}

/* ---- fndwall: the sept homepage founders + logo-wall pairing as its own
   last section (home-v2.css loads on the v2 homepage only — the sept build
   never sees this). The sept cred__cols grid (1.45fr : 1fr, founders left)
   applies untouched; only its 110px top margin is reset. ---- */
.fndwall{padding:104px 0 96px;background:var(--bg)}
.fndwall .cred__cols{margin-top:0}

/* ---- responsive ---- */
@media (max-width:900px){
  .choose{padding:72px 0 64px}
  .choose__slide{grid-template-columns:1fr}
  .choose__visual{border-left:0;border-top:1px solid var(--line);min-height:300px}
  .choose__crit{grid-template-columns:1fr}
  /* benefit cards: 2-up below 900px (the static-stack media above handles
     phones — no accordion flex-basis to reset anymore) */
  .hww__grid{grid-template-columns:1fr 1fr}
  .hww{padding:72px 0 64px}
  .faq{padding:72px 0 64px}
  .fndwall{padding:72px 0 64px}
}
/* grid children must never contribute their min-content width to the track —
   the blueprint sheet (min-width:480px) pans INSIDE its own overflow-x:auto
   panel (390px overflow = 162px without this) */
.choose__slide > *{min-width:0}
.hww__card{min-width:0}
@media (max-width:520px){
  .choose__words{padding:24px 22px}
  .choose__visual{min-height:260px;padding:14px}
  .hww__grid{grid-template-columns:1fr}
  .hww__cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html.js .choose__slide.is-in{animation:none}
  /* field visuals freeze on their final frame (base state = final) */
  html.js .choose__slide.is-in .chvis *{animation:none !important}
}