/* MJCX homepage v2 (rebrand) — loads after styles.css, index.html only */
*,*::before,*::after{box-sizing:border-box;margin:0}
:root{
  --h2-t2:#3D4C5A;--h2-t3:#5C6B7A;
  --h2-line:#E2E8ED;
  --h2-ease:cubic-bezier(.16,1,.3,1);
  --h2-amber:#C4833B;--h2-amber-deep:#8A5414;--h2-paper:#F6F1E7;
}
.home-v4 h2,.home-v4 h3{font-family:var(--font-display);font-weight:600;line-height:1.1}
/* audit 2026-09-05: was var(--font-s) — token never existed, so every h2/h3
   silently fell back to Inter and broke the Space Grotesk display law. */
.home-v4 .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.home-v4 .wrap{padding:0 18px}}

/* ---------- 0 · INTRO — stairs opening (skiper9 homage): black cover, the
   positioning line staggers in, the cover splits into columns that fly up.
   JS-gated via html.intro-pending (head script): no-JS and reduced-motion
   never see it; once per session. ?intro=1 replays, ?intro=0 skips. */
.intro{position:fixed;inset:0;z-index:999;display:none}
html.intro-pending{overflow:hidden}
html.intro-pending .intro{display:block}
.intro__cols{position:absolute;inset:0}
.intro__col{position:absolute;top:0;bottom:0;left:calc(var(--i)*16.6667%);width:16.6667%;background:var(--bg-dark);
  transform:translateY(0);will-change:transform}
html.intro-pending .intro.is-out .intro__col{transform:translateY(-102%);
  transition:transform .58s cubic-bezier(.76,0,.24,1);transition-delay:var(--d,0ms)}
.intro__words{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0 .3em;
  margin:0;padding:0 24px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,5.2vw,3.8rem);letter-spacing:-.03em;line-height:1.05;
  color:#fff;text-align:center}
.intro__words span{display:inline-block;opacity:0;transform:translateY(.45em);
  animation:introWord .5s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.12s + var(--w)*90ms)}
.intro__words span:last-child{color:var(--h2-amber)}
@keyframes introWord{to{opacity:1;transform:none}}
html.intro-pending .intro.is-out .intro__words{opacity:0;transition:opacity .26s ease .04s}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}}

/* ---------- 1 · HERO — create your own system; no buttons; slider below */
.home-v4 .hero2{padding:calc(72px + 8svh) 0 40px;text-align:center;background:var(--bg)}
.home-v4 .hero2 h1{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:500;letter-spacing:-.035em;line-height:1.02;color:var(--ink)} /* 500 = Futura Medium (Monish: 600 snapped to Bold — too thick; 400 was skinny) */
.home-v4 .hero2 .hero2-sub{margin:22px auto 0;max-width:30em;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;
  color:var(--text-2);font-weight:400}
/* "1 reliable system" — plain text, no effect (Monish 2026-09-06: the
   squircle highlight read as noise) */
.home-v4 .hero2 .hero2-sub .u{text-decoration:none;color:inherit}

/* ---------- 1b · HERO78 — skiper78 "Dia Browser's Carousal" carousel hero
   (promoted to production from index-test.html; vanilla rebuild of the
   pattern — no React/Lenis, no license dependency). */
   Motion contract (mirrors their variants):
   · autoplay: 50ms tick, progress 100→0 (5s/slide), clip-path wipe on the
     active pill dot — inset(0 P% 0 0 round 99px)
   · exit slide: translateX(-30% * dir), blur 4px, opacity 0 — .25s ease-out
   · enter slide: un-blur + fade-in — .3s ease-out with .3s delay
   · image inside card: scale .9 → 1 settle
   · prev/next buttons and dots reset the timer and set the direction
   Reduced motion: instant swaps, no autoplay. No-JS: static stacked gallery. */

.home-v4 .hero78{padding-bottom:76px}

/* kicker + controls row (demo places them between the heading and the card;
   the kicker line was removed on Monish's call 2026-09-06) */
.home-v4 .h78-ctl{display:flex;align-items:center;justify-content:center;gap:20px;margin:26px 0}
.home-v4 .h78-btn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--h2-line);border-radius:50%;
  background:#fff;color:var(--text-2);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.home-v4 .h78-btn:hover{background:var(--bg-subtle);color:var(--ink);border-color:#cfd8df}
.home-v4 .h78-btn:active{transform:scale(.95)}
.home-v4 .h78-dots{display:flex;align-items:center;gap:5px}
.home-v4 .h78-dot{position:relative;width:8px;height:8px;padding:0;border:0;overflow:hidden;
  border-radius:99px;background:var(--h2-line);cursor:pointer;
  transition:width .35s var(--h2-ease),background .2s ease}
.home-v4 .h78-dot:hover{background:#cfd8df}
.home-v4 .h78-dot.is-active{width:30px}
.home-v4 .h78-dot .h78-dot-fill{position:absolute;inset:0;background:var(--h2-amber);
  clip-path:inset(0 100% 0 0 round 99px)}
.home-v4 .h78-btn:focus-visible,.home-v4 .h78-dot:focus-visible{outline:2px solid var(--h2-amber-deep);outline-offset:2px}

/* stage + slides */
.home-v4 .h78-stage{position:relative;width:min(880px,100%);margin:0 auto}
.home-v4 .h78-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;filter:blur(4px);pointer-events:none;
  transform:translateX(calc(var(--dir,1) * -30%));
  transition:opacity .25s ease-out,filter .25s ease-out,transform .25s ease-out}
.home-v4 .h78-slide.is-in{position:relative;opacity:1;filter:none;transform:none;pointer-events:auto;
  transition:opacity .3s ease-out .3s,filter .3s ease-out .3s,transform .3s ease-out .3s}

/* per-slide caption — the demo's single caption line, promoted to one per slide */
.home-v4 .h78-cap{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:0}
.home-v4 .h78-cap b{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink)}
.home-v4 .h78-cap span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)} /* audit 2026-09-24 B3: .66rem was under the .7rem floor */

/* the framed screenshot card (demo: p-1 ring, rounded-4xl, 550px, img zoom) */
.home-v4 .h78-card{display:block;width:100%;padding:5px;border:1px solid var(--h2-line);
  border-radius:26px;background:#fff;text-decoration:none;color:inherit;
  box-shadow:0 24px 60px rgba(10,15,22,.08);
  transition:box-shadow .3s var(--h2-ease)}
.home-v4 .h78-card:hover{box-shadow:0 28px 70px rgba(10,15,22,.13)}
.home-v4 .h78-card img{display:block;width:100%;height:clamp(330px,52svh,550px);
  object-fit:cover;object-position:top;border-radius:21px;background:var(--bg-subtle);
  transform:scale(.94);transition:transform .55s var(--h2-ease)}
.home-v4 .h78-slide.is-in .h78-card img{transform:none}
/* missing-hero slot: same labeled slot the projects page shows, filling the
   card at the img's exact heights so slide height never jumps (2026-09-14) */
.home-v4 .h78-card .pj-hero--slot{aspect-ratio:auto;width:100%;
  height:clamp(330px,52svh,550px);border-radius:21px}

@media(max-width:640px){
  .home-v4 .hero2.hero78{padding-top:calc(72px + 3svh);padding-bottom:56px}
  .home-v4 .h78-ctl{margin:14px 0 20px}
  .home-v4 .h78-card{border-radius:18px;padding:4px}
  .home-v4 .h78-card img{border-radius:14px;height:min(62vw,420px)}
  .home-v4 .h78-card .pj-hero--slot{height:min(62vw,420px);border-radius:14px}
  .home-v4 .h78-cap{gap:8px;flex-wrap:wrap}
}

/* reduced motion: instant swap, no autoplay-driven wipe animation, no fly-out */
@media(prefers-reduced-motion:reduce){
  .home-v4 .h78-slide,.home-v4 .h78-slide.is-in,.home-v4 .h78-card img{
    transition:opacity .01ms;transition-delay:0s;filter:none;transform:none}
  .home-v4 .h78-dot{transition:none}
}

/* no-JS fallback: everything stacked, controls hidden — static proof gallery */
html:not(.js) .home-v4 .h78-ctl{display:none}
html:not(.js) .home-v4 .h78-slide{position:static;opacity:1;filter:none;transform:none;
  pointer-events:auto;margin-bottom:28px}

/* ---------- sk65-style breakpoint markers: wordless vertical ticks that
   open a long scroll block (Monish 2026-09-06: no words — just the marker
   at each block START, so big white stretches never read as broken) */
.home-v4 .bpmark{display:flex;flex-direction:column;align-items:center;
  padding:34px 0 12px}
.home-v4 .bpmark i{display:block;width:1px;height:56px;
  background:linear-gradient(to bottom,transparent,var(--text-3))}

/* configurator header (Monish 2026-09-07 r3): the black-box title sits
   ON the feature component; subtitle = the ownership line in the §4
   opener's support scale (quiet, never competing with the title) */
.home-v4 .cfg4__head{text-align:center;margin:0 0 14px}
.home-v4 .cfg4__title{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.025em;line-height:1.18;
  color:var(--ink);text-align:center;margin:0 auto;max-width:24em}
.home-v4 .cfg4__sub{margin:18px auto 0;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.02rem,1.4vw,1.3rem);letter-spacing:-.01em;line-height:1.4;
  color:var(--text-2);max-width:34em}
@media(max-width:640px){.home-v4 .cfg4__head{margin-bottom:10px}}

/* ---------- 5 · SITUATIONS — black-box title → "Try our AI Agents for
   free" title → floating liquid-gradient deck of five doors (Monish
   2026-09-07). Title 1 carries NO entry effect (no data-reveal): it is
   simply there, centered, and scrolling carries it past while title 2
   scrolls in after it. The deck is a floating, shaded-but-LIGHT block
   wearing the site's liquid amber→bronze gradient (same ramp as the
   cred hover ring, mask-free double-technique not needed here — the
   ring is ::after with an animated gradient wash in ::before). Each
   situation card keeps its "Read this situation" deep link and gains a
   "Request AI Agent access" link to /request-access.html. */
.home-v4 .sit{padding:110px 0 96px;background:var(--bg)}
.home-v4 .sit__t2{font-size:clamp(1.7rem,3.6vw,2.9rem);
  letter-spacing:-.025em;line-height:1.18;color:var(--ink);text-align:center;
  margin:0 auto;max-width:24em}
/* the key takeaway line — amber, same title font (Monish 2026-09-07 r3) */
.home-v4 .sit__t2-key{color:var(--h2-amber-deep)}
/* the floating deck — shaded but light (warm paper ramp, never dark),
   soft lift shadow, liquid gradient ring. The ring is the SAME
   mask-free double-background technique as the cred hover ring
   (::after paints the tint padding-box over the gradient border-box —
   only the 1.5px edge reads as the ring; z:0 so the cards sit ABOVE
   it; a single-background layer here renders as a full gradient slab,
   the exact Safari-class bug the cred ring rebuild fixed). Under
   reduced motion the gradient is static; otherwise both layers drift
   slowly = the liquid. */
.home-v4 .sit__deck{position:relative;margin-top:72px}
.home-v4 .sit__grid{display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px;margin-top:0}
/* Monish 2026-09-12: NO outline on the cards — the glass itself defines
   the card at idle; the focus/hover affordance is the boost (keyboard
   users still get :focus-visible outlines from the links inside) */
.home-v4 .sitcard{position:relative;display:flex;flex-direction:column;background:#fff;
  border:0;border-radius:16px;padding:24px 24px 22px;
  transition:transform .3s var(--h2-ease),box-shadow .3s var(--h2-ease),border-color .3s}
/* no-WebGL fallback ring stays (liquid-ok retires it when the shader is
   live); focus-within keeps a fallback affordance keyboard-reachable. */
/* interactive liquid gradient — "liquid glass" (Monish 2026-09-12:
   'more blurred, like liquid glass... interesting when idle which makes
   them hover, and the words are still legible on hover'). The canvas
   bleeds 30px past the card so the heavy blur never vignettes; the card
   clips it. Idle = soft ambient drift (opacity .5, boost .3 in-shader);
   hover = boost 1 + pointer pull at full opacity. Raw WebGL fbm shader
   (madebybeings Three.js tutorial reference, no vendor lib). */
.home-v4 .sitcard{overflow:hidden}
.home-v4 .sitcard__liquid{position:absolute;inset:-30px;z-index:0;
  width:calc(100% + 60px);height:calc(100% + 60px);
  opacity:.5;filter:blur(18px) saturate(1.08);
  transition:opacity .5s var(--h2-ease);pointer-events:none;will-change:opacity}
.home-v4 .sitcard.liquid-ok:hover .sitcard__liquid,
.home-v4 .sitcard.liquid-ok:focus-within .sitcard__liquid{opacity:1}
/* when the liquid is live it replaces the CSS ring; the ring stays as the
   no-WebGL fallback, and reduced motion hides the canvas (ring lands static) */
.home-v4 .sitcard.liquid-ok::after{display:none}
.home-v4 .sitcard.liquid-ok > :not(.sitcard__liquid){position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.home-v4 .sitcard__liquid{display:none}}
.home-v4 .sitcard::after{content:"";position:absolute;inset:0;z-index:1;
  border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:#fff padding-box,
    linear-gradient(120deg,var(--h2-amber),var(--h2-amber-deep),var(--h2-amber)) border-box;
  background-size:300% 300%;background-position:0% 0%;
  transition:opacity .3s var(--h2-ease)}
.home-v4 .sitcard:hover,.home-v4 .sitcard:focus-within{
  transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,15,22,.1);border-color:transparent}
.home-v4 .sitcard:hover::after,.home-v4 .sitcard:focus-within::after{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .home-v4 .sitcard:hover::after,.home-v4 .sitcard:focus-within::after{
    animation:sit-liquid 6s ease-in-out infinite}
}
@keyframes sit-liquid{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.home-v4 .sitcard__q{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.home-v4 .sitcard__name{margin-top:8px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--h2-amber-deep)}
.home-v4 .sitcard__do{margin-top:14px;font-size:.92rem;line-height:1.55;color:var(--text-2)}
.home-v4 .sitcard__cta{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}/* per-door request access link (Monish 2026-09-07) — the amber primary
   under each situation; hit-area widened like sitcard__more */
.home-v4 .sitcard__req{font-size:.82rem;font-weight:600;color:var(--h2-amber-deep);
  text-decoration:none;border-bottom:1px solid rgba(196,131,59,.5);
  padding:12px 0;margin:-12px 0;transition:color .2s}
.home-v4 .sitcard__req:hover{color:var(--h2-amber)}
.home-v4 .sitcard__req:focus-visible,.home-v4 .sitcard__more:focus-visible{outline:2px solid var(--h2-amber-deep);outline-offset:3px}
.home-v4 .sitcard__more{font-size:.8rem;color:var(--text-3);text-decoration:none;border-bottom:1px solid var(--h2-line);
  padding:12px 0;margin:-12px 0} /* padding widens the hit area; margin keeps the visual rhythm */

/* ---------- 2 · PROBLEM — "the promise fades" scrollytelling (Monish spec
   2026-09-06): line 1 slow-reveals pinned center; the AI-logo row staggers
   in in colour; line 2 types out in the amber accent while the logos drain
   to greyscale; opening fades; then the three point lines return as large
   captions over large stacked visuals (skiper17 deck, vanilla rebuild:
   current frame scales ~.7 + rotates ~5deg while the next slides up).
   Static caption+image pairs when not armed (no-JS / reduced motion). */
.home-v4 .prob2{background:var(--bg)}
/* scroll anchoring fights the per-frame char mutations (page drifts to keep
   a "stable" node in view) — the stage is its own scroll timeline */
.home-v4 .prob2,.home-v4 .prob2 *{overflow-anchor:none}
.home-v4 .prob2__l1,.home-v4 .prob2__l2{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.028em;
  line-height:1.14;color:var(--ink);text-align:center}
.home-v4 .prob2__l1,.home-v4 .prob2__l2{font-size:clamp(1.7rem,4.2vw,3.4rem);max-width:min(92vw,24em)}
.home-v4 .prob2__l2{color:var(--h2-amber-deep)}
.home-v4 .prob2__open{display:flex;flex-direction:column;align-items:center;gap:34px;padding:70px 18px 40px;text-align:center}
.home-v4 .prob2__l1 .wd,.home-v4 .prob2__l2 .wd{display:inline-block;white-space:nowrap}
.home-v4 .prob2__logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:18px 30px;padding:0;margin:0}
.home-v4 .prob2__logos img{display:block;height:45px;width:auto}
.home-v4 .prob2__caret{display:inline-block;width:3px;height:.85em;margin-left:5px;
  vertical-align:-.06em;background:var(--h2-amber);opacity:0}
/* the point deck — REMOVED 2026-09-07 (Monish: drop the 3 points + images
   after the sentences and logos); only the opening scrub remains */
/* scrub mode (JS adds .scrub-on) — pinned stage, absolutely stacked beats */
.prob2.scrub-on .prob2__track{height:calc(100svh + 700svh)} /* JS refines to exact N */
.prob2.scrub-on .prob2__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.prob2.scrub-on .prob2__open{position:absolute;inset:0;padding:0 18px;justify-content:center;
  will-change:transform,opacity}
.prob2.scrub-on .prob2__l1 .wd{opacity:0;will-change:transform,opacity}
.prob2.scrub-on .prob2__l2 .ch{opacity:0}
.prob2.scrub-on .prob2__logos li{opacity:0}
.prob2.scrub-on .prob2__caret{animation:probCaret 1.05s steps(1,end) infinite}
@keyframes probCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:640px){
  .home-v4 .prob2__open{gap:26px;padding:56px 14px 30px}
  .home-v4 .prob2__logos{gap:14px 20px}
  .home-v4 .prob2__logos img{height:36px}
}

/* ---------- 3 · CREDIBILITY — scrollytelling opening (same grammar as §2,
   Monish spec 2026-09-06): since-2024 line slow-reveals pinned center, the
   UNEP shot pops up on the right; the whole opening scrolls up and away;
   the SME focus line slides up and stops on top; two site-visit images
   stack side by side with short captions. Then normal flow: founders
   (hover = horizontal accordion) + three logo rows (hover = vertical
   detail panel per slot). Static flow when not armed. */
.home-v4 .cred{background:var(--bg)}
.home-v4 .cred .wrap{padding-bottom:96px}
.home-v4 .cred,.home-v4 .cred *{overflow-anchor:none}
.home-v4 .cred__l1{font-family:var(--font-display);font-weight:600;letter-spacing:-.028em;
  line-height:1.18;color:var(--ink);font-size:clamp(1.6rem,3.6vw,3rem);
  max-width:min(90vw,24em);text-align:center;margin:0}
.home-v4 .cred__l1 .wd{display:inline-block;white-space:nowrap}
/* Set A strip — full-bleed 4-up photos across the bottom, lifted off the
   screen edge, caption reveals on hover (Monish 2026-09-06: imagery-focused,
   no card chrome) */
.home-v4 .cred__pops{display:flex;gap:8px;width:100%}
.home-v4 .cred__pop{margin:0;position:relative;flex:1;min-width:0;overflow:hidden;border-radius:10px}
.home-v4 .cred__pop img{display:block;width:100%;height:clamp(150px,26svh,250px);object-fit:cover}
.home-v4 .cred__pop figcaption{position:absolute;inset:auto 0 0 0;padding:34px 14px 10px;
  background:linear-gradient(180deg,transparent,rgba(7,12,18,.74));color:#fff;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;opacity:0;transition:opacity .35s var(--h2-ease)}
.home-v4 .cred__pop:hover figcaption{opacity:1}
@media(hover:none){.home-v4 .cred__pop figcaption{opacity:.85}}
.home-v4 .cred__l2{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;
  line-height:1.2;color:var(--ink);font-size:clamp(1.5rem,3.2vw,2.7rem);
  max-width:min(90vw,22em);text-align:center;margin:0}
.home-v4 .cred__l2 em{font-style:normal;color:var(--h2-amber-deep)}
/* Set B — 2 rows of 3, enlarged with air around them (Monish 2026-09-07
   r2: "make them 2 rows of 3 and enlarge the images but keep white space
   around them since we have the space"). Industry caption on hover. The
   Powerline field-testing hero photo moved to the quote band. */
.home-v4 .cred__row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:min(1060px,86vw)}
.home-v4 .cred__cell{margin:0;position:relative;min-width:0;overflow:hidden;border-radius:12px}
.home-v4 .cred__cell img{display:block;width:100%;height:clamp(150px,24svh,230px);object-fit:cover}
.home-v4 .cred__cell figcaption{position:absolute;inset:auto 0 0 0;padding:34px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(7,12,18,.74));color:#fff;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;opacity:0;transition:opacity .35s var(--h2-ease)}
.home-v4 .cred__cell:hover figcaption{opacity:1}
@media(hover:none){.home-v4 .cred__cell figcaption{opacity:.85}}
/* static flow (no-JS / reduced motion / before arming) */
.home-v4 .cred__open{display:flex;flex-direction:column;align-items:center;gap:44px;padding:88px 18px 40px}
.home-v4 .cred__focus{display:flex;flex-direction:column;align-items:center;gap:44px;padding:30px 18px 88px}
/* scrub mode */
.cred.scrub-on .cred__track{height:calc(100svh + 300svh)} /* JS refines to exact */
.cred.scrub-on .cred__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.cred.scrub-on .cred__open{position:absolute;inset:0;padding:15svh 0 0;will-change:transform}
.cred.scrub-on .cred__l1 .wd{opacity:0;will-change:transform,opacity}
/* Set A strip — full-bleed 4-up photos, lifted off the screen edge
   (Monish 2026-09-06), caption reveals on hover */
.cred.scrub-on .cred__pops{position:absolute;inset:auto 0 9svh 0}
.cred.scrub-on .cred__pop{opacity:0;will-change:transform,opacity}
.cred.scrub-on .cred__focus{position:absolute;inset:0;padding:9svh 0 0;justify-content:flex-start;
  opacity:0;will-change:transform,opacity}
.cred.scrub-on .cred__cell{opacity:0;will-change:transform,opacity}
@media(max-width:900px){
  .home-v4 .cred__pops{flex-wrap:wrap}
  .home-v4 .cred__pop{flex:1 1 40%}
  .home-v4 .cred__pop img{height:clamp(90px,19svh,160px)}
  .home-v4 .cred__row{width:min(560px,90vw);gap:12px}
  .home-v4 .cred__cell img{height:clamp(110px,18vw,160px)}
}
@media(max-width:640px){
  .home-v4 .cred__open{padding:64px 14px 30px}
  .home-v4 .cred__focus{padding:20px 14px 64px}
  .cred.scrub-on .cred__open{padding-top:8svh}
  .cred.scrub-on .cred__l1{font-size:clamp(1.35rem,5.4vw,1.7rem)}
  .cred.scrub-on .cred__focus{padding-top:7svh}
  .home-v4 .cred__l2{font-size:clamp(1.25rem,5vw,1.6rem)}
}

/* founders left, WIDE (they are the subject) + one quiet warm logo card right
   (the footnote) — proportion fix per Monish screenshot v2 (2026-09-06:
   "it looks like we're highlighting the logos instead of ourselves").
   1.45fr:1fr ≈ the 930:640 founder:logo split in the reference mock. */
.home-v4 .cred__cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:64px;margin-top:110px;align-items:center}
.home-v4 .cred__fndcol .fnd-row{margin-top:14px;max-width:none}
/* the Founders label — promoted to a proper mini-heading (Monish 2026-09-07
   "more prominent"): display face, ink, a clear step above the pill labels */
.home-v4 .cred__fndcol .lwall__label{font-family:var(--font-display);font-size:1.08rem;
  font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
/* the four logo groups live in ONE rounded warm-paper card so the whole
   credential block reads as a single quiet panel, never a second headline */
/* Monish mock 2026-09-07 ("do this for the founders and logos section"):
   the single warm-paper card is GONE — each logo group is its own floating
   WHITE PILL (border-radius 999px, soft shadow) with the group label in
   Title Case centered ABOVE it. Founders column unchanged. The pending-logo
   wordmark slots stay (no invented official marks) — they shrink to fit the
   single row and swap for real files dropped into workspace-root logos/. */
.home-v4 .cred__logcol{background:none;border:0;border-radius:0;padding:0}
.home-v4 .cred__logcol .lwall{margin-top:0;text-align:center}
.home-v4 .cred__logcol .lwall + .lwall{margin-top:18px}
.home-v4 .cred__logcol .lwall__label{font-family:var(--font-display);font-size:.92rem;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2)}
.home-v4 .cred__logcol .lwall__grid{margin-top:10px;gap:10px;background:#fff;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  border-radius:999px;padding:15px 20px;box-shadow:0 14px 34px rgba(10,15,22,.07);
  align-items:center}
.home-v4 .cred__logcol .lslot{min-width:0;height:42px;padding:0 3px}
.home-v4 .cred__logcol .lslot img{height:min(var(--lh,28px),38px);max-height:none;width:auto;max-width:min(132px,100%)}
/* pending-wordmark tiles: LINKED ones are a.lslot>span (no --wm class) and
   previously fell through to raw serif body text — style every text span in
   the pills as one quiet display-font wordmark, linked or not */
.home-v4 .cred__logcol .lslot span{font-family:var(--font-display);font-weight:600;
  font-size:.7rem;line-height:1.25;letter-spacing:-.01em;color:var(--text-2)}
.home-v4 .cred__logcol .lslot:hover span,.home-v4 .cred__logcol .lslot:focus-visible span{color:var(--ink)}
/* skiper90 hover, round 3 (Monish 2026-09-07: "the liquid gradient hover on
   outline isn't loading well") — the mask-composite ring technique fails on
   some browsers (Safari mixes -webkit-mask and standard mask-composite),
   showing a full gradient slab instead of a ring. Rebuilt with the
   bulletproof DOUBLE-BACKGROUND ring: ::after paints white padding-box over
   the gradient border-box; its center is white-on-white (invisible under
   the z-index:1 logo slots), only the 1.5px edge reads as the ring.
   No mask properties — works in every browser with multiple backgrounds. */
.home-v4 .cred__logcol .lwall__grid{position:relative;isolation:isolate}
.home-v4 .cred__logcol .lwall__grid::after{content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  transition:opacity .35s var(--h2-ease);
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,var(--h2-amber),var(--h2-amber-deep)) border-box}
.home-v4 .cred__logcol .lwall__grid:hover::after,
.home-v4 .cred__logcol .lwall__grid:focus-within::after{opacity:1}
.home-v4 .cred__logcol .lwall__grid .lslot{z-index:1}
/* phones: one row cannot hold 6 wordmarks at 390px — pills reflow to a
   3-across grid inside a soft rounded rectangle (999px only reads as a
   lozenge when it is one row) */
@media(max-width:640px){
  .home-v4 .cred__logcol .lwall__grid{grid-template-columns:repeat(3,1fr);
    border-radius:28px;padding:14px 16px;gap:8px 6px}
  .home-v4 .cred__logcol .lslot{height:38px}
  .home-v4 .cred__logcol .lslot img{height:min(calc(var(--lh,28px)*.85),32px);max-height:none;max-width:96px}
}
.home-v4 .fnd-row{display:flex;gap:20px;max-width:980px}
.home-v4 .fnd{position:relative;display:block;flex:1 1 0;min-width:0;border-radius:16px;overflow:hidden;
  text-decoration:none;color:#fff;background:var(--ink);transition:flex-grow .55s var(--h2-ease)}
.home-v4 .fnd:hover,.home-v4 .fnd:focus-visible{flex-grow:1.9}
.home-v4 .fnd img{display:block;width:100%;height:clamp(400px,58svh,560px);object-fit:cover;object-position:center top}
.home-v4 .fnd__veil{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  background:linear-gradient(180deg,transparent 38%,rgba(7,12,18,.82) 78%)}
.home-v4 .fnd__name{font-family:var(--font-display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.home-v4 .fnd__role{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,242,247,.75);margin-top:4px}
.home-v4 .fnd__line{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s var(--h2-ease),opacity .45s var(--h2-ease),margin-top .55s var(--h2-ease);
  font-size:.92rem;line-height:1.55;color:rgba(234,242,247,.92)}
.home-v4 .fnd:hover .fnd__line,.home-v4 .fnd:focus-visible .fnd__line{max-height:120px;opacity:1;margin-top:12px}
/* touch has no hover: the credential line renders statically (audit 2026-09-05
   P1 — on mobile the founders were names+titles only) */
@media(hover:none){
  .home-v4 .fnd__line{max-height:140px;opacity:1;margin-top:10px}
  .home-v4 .fnd__go{opacity:1;transform:none}
}
.home-v4 .fnd__go{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(7,12,18,.55);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-6px);transition:.35s var(--h2-ease)}
.home-v4 .fnd:hover .fnd__go,.home-v4 .fnd:focus-visible .fnd__go{opacity:1;transform:none}
.home-v4 .fnd__go svg{width:14px;height:14px;color:#fff}
@media(max-width:640px){
  /* stacked cards: reset the accordion flex-basis — .fnd{flex:1 1 0} in a
     COLUMN flex collapses every portrait to 0 height (founders invisible on
     phones; latent since the two-col arrangement). */
  .home-v4 .fnd-row{flex-direction:column;margin-top:72px}
  .home-v4 .fnd{flex:0 0 auto}
  .home-v4 .fnd img{height:min(110vw,420px)}
}

/* logo groups — tight naked-logo formation (Monish 2026-09-06): no boxes,
   no captions; logos LINK to each organisation's site; hover = grow + amber
   glow, nothing more. Wordmark tiles only where official files are pending
   (drop originals into workspace-root logos/ to swap). */
.home-v4 .lwall{margin-top:64px}
.home-v4 .lwall__label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.home-v4 .lwall__grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:20px 24px;margin-top:16px;align-items:center}
.home-v4 .lslot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  height:56px;padding:0 6px;cursor:pointer;text-decoration:none;
  transition:transform .3s var(--h2-ease),filter .3s var(--h2-ease)}
.home-v4 .lslot img{display:block;height:min(calc(var(--lh,28px)*1.2),48px);max-height:none;width:auto;max-width:100%;object-fit:contain}
.home-v4 .lslot:hover,.home-v4 .lslot:focus-visible{transform:scale(1.16);
  filter:drop-shadow(0 0 14px rgba(196,131,59,.55)) brightness(1.05);outline:none}
.home-v4 .lslot--wm span{font-family:var(--font-display);font-weight:600;font-size:.8rem;
  letter-spacing:-.01em;line-height:1.3;color:var(--text-2);transition:color .3s}
.home-v4 .lslot--wm:hover span,.home-v4 .lslot--wm:focus-visible span{color:var(--ink)}
.home-v4 .lwall__note{margin-top:20px;font-size:.78rem;color:var(--text-3)}
@media(max-width:1080px){
  .home-v4 .cred__cols{grid-template-columns:1fr;gap:56px}
  .home-v4 .lwall__grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .home-v4 .lwall__grid{grid-template-columns:repeat(2,1fr);gap:16px 14px}
}

/* ---------- 4 · SERVICES — opening scrollytelling + skiper76-style
   configurator (Monish spec 2026-09-06). Same grammar as §2/§3: two-line
   reveal (line 2 amber), scroll-up exit, focus line stops on top with the
   device visual, then the configurator pulls up in normal flow and every
   option/tab click switches the visual area. ------------------------- */
.home-v4 .svc4{background:var(--bg)}
.home-v4 .svc4 .wrap{padding-bottom:110px}
.home-v4 .svc4,.home-v4 .svc4 *{overflow-anchor:none}
.home-v4 .svc4__l1,.home-v4 .svc4__l2,.home-v4 .svc4__l3{
  font-family:var(--font-display);letter-spacing:-.028em;line-height:1.16;text-align:center}
/* hierarchy fix (Monish 2026-09-07 "try your fix"): the setup clause is
   demoted to the site's label voice (h78-cap pattern — mono, uppercase,
   tracked, --text-3). It stays the first beat of the sentence the trio
   completes, but no longer shouts at title scale. */
.home-v4 .svc4__l1{font-family:var(--font-mono);font-weight:400;
  font-size:clamp(.72rem,.9vw,.8rem);letter-spacing:.12em;text-transform:uppercase;
  line-height:1.5;color:var(--text-3)}
.home-v4 .svc4__l2{font-weight:600;font-size:clamp(1.7rem,4vw,3.2rem);color:var(--h2-amber-deep);margin-top:10px}
/* one point per line (Monish 2026-09-06): the three rows stack instead of
   wrapping together as an inline paragraph */
.home-v4 .svc4__l2 .svc4__row{display:block}
.home-v4 .svc4__l1 .wd,.home-v4 .svc4__l2 .wd,.home-v4 .svc4__l3 .wd{display:inline-block;white-space:nowrap}
/* the answer — the resolve: support scale UNDER the title-scale trio so the
   screen keeps exactly one biggest thing (hierarchy fix 2026-09-07; words
   unchanged, only rank). Financing/IP detail is re-stated one beat later by
   the configurator pills, so the quiet line is not a loss of information. */
.home-v4 .svc4__l3{font-weight:500;font-size:clamp(1.02rem,1.4vw,1.3rem);line-height:1.5;
  letter-spacing:-.005em;color:var(--text-2);max-width:min(92vw,34ch);margin-top:26px}
.home-v4 .svc4__open{display:flex;flex-direction:column;align-items:center;gap:12px;padding:88px 18px 40px;text-align:center}
/* device visual — mac + phone side by side, the nav logo on both screens */
.home-v4 .svc4__devices{display:flex;align-items:flex-end;gap:34px}
.home-v4 .dev{position:relative}
.home-v4 .dev--mac{display:flex;flex-direction:column;align-items:center}
.home-v4 .dev--mac .dev__screen{display:flex;align-items:center;justify-content:center;
  width:min(430px,44vw);aspect-ratio:16/10;background:#fff;border:10px solid #22303C;
  border-radius:14px;box-shadow:0 24px 60px rgba(10,15,22,.14)}
.home-v4 .dev--mac .dev__base{width:min(500px,52vw);height:14px;background:#22303C;
  border-radius:0 0 16px 16px;margin-top:2px}
.home-v4 .dev--phone .dev__screen{display:flex;align-items:center;justify-content:center;
  width:min(150px,20vw);aspect-ratio:9/19;background:#fff;border:7px solid #22303C;
  border-radius:24px;box-shadow:0 24px 60px rgba(10,15,22,.14)}
.home-v4 .dev__screen img{width:56%;height:auto}
@media(max-width:640px){
  .home-v4 .svc4__open{padding:56px 14px 24px}
  .home-v4 .svc4__devices{gap:16px}
  .home-v4 .dev--mac .dev__screen{width:min(300px,62vw)}
  .home-v4 .dev--mac .dev__base{width:min(350px,72vw)}
  .home-v4 .dev--phone .dev__screen{width:min(96px,24vw)}
}
/* scrub mode — beats: opener reveal → hold → answer reveal → the whole
   word block exits up → the configurator arrives as the sole focus */
.svc4.scrub-on .svc4__track{height:calc(100svh + 310svh)} /* JS refines to exact */
.svc4.scrub-on .svc4__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.svc4.scrub-on .svc4__open{position:absolute;inset:0;padding:16svh 18px 0;justify-content:flex-start;will-change:transform}
.svc4.scrub-on .svc4__l1 .wd,.svc4.scrub-on .svc4__l2 .wd,.svc4.scrub-on .svc4__l3 .wd{opacity:0;will-change:transform,opacity}
@media(max-width:640px){
  .svc4.scrub-on .svc4__open{padding-top:9svh}
}

/* configurator — skiper76 Apple-feature-block pattern rebuilt light mode
   (Monish 2026-09-06; 2-col 2026-09-07; FIXED THEATER + GUTTER CHEVRONS
   2026-09-07 v3; SEAMLESS — stage + divider = page white v4.1):
   LEFT ⅓ = feature pills + expansion (the words), RIGHT ⅔ =
   visuals (devices default, swapped art) — words and visuals never overlap.
   The stage is a LOCKED theater: height clamps to one viewport-ish size and
   NEVER resizes — card text, pill reflow and art swaps all adapt inside it.
   Box + divider are painted var(--bg), the page's own white, so the theater
   is seamless — structure stays; only pills/cards/buttons carry their own
   borders and shadows. Idle = devices visual, ZERO chrome; engaged = clicked
   pill expands into a name+description panel (option dots inside), visual
   swaps, close ⊗ pins top-right of the stage, prev/next chevrons pin to the
   LEFT GUTTER — box-anchored, stacked vertically, vertically centered, so
   they never move while the content reflows. */
.home-v4 .svc4__cfg{margin-top:0;scroll-margin-top:110px}
/* Monish 2026-09-11: description card : art = 2/5 : 3/5 of the component
   (was 1/3 : 2/3 — the longer descriptions read squeezed in the old ⅓ col) */
.home-v4 .cfg4__stage{position:relative;display:grid;
  grid-template-columns:minmax(300px,2fr) 3fr;border-radius:26px;overflow:hidden;
  background:var(--bg);height:clamp(600px,84svh,780px)}
/* r4: both columns bias slightly ABOVE stage center (equal padding-bottom
   shift) so the header above the full-width stage reads closer to the
   component — the theater lock and the columns' mutual alignment stay */
/* r4: IDLE-only upward bias — with no card open, both columns sit ~20px
   above stage center so the header above the full-width stage reads closer
   to the component. The engaged card fills the theater EXACTLY (measured
   top 0 / bottom 0), so the bias MUST release when a card opens —
   :has() restores exact centering; without :has support the stage simply
   stays symmetric (current behaviour). */
.home-v4 .cfg4__art{grid-column:2;grid-row:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:56px 48px 96px;border-left:1px solid var(--bg)}
.home-v4 .cfg4__stage:has(.cfg4__pill.is-open) .cfg4__art{padding-bottom:56px}
.home-v4 .cfg4__art img{max-width:100%;max-height:100%;object-fit:contain}
.home-v4 .cfg4__art svg{width:min(640px,86%);height:auto;display:block}
/* Diagnose art = the projects-page service-layer sheet (dg_diagram.py
   templates; Monish 2026-09-11 "same office, supply chain, production line
   diagrams as projects page section 2"): group pre-lit via the baked
   data-active, lighting handled by the .pj-dg rules in styles.css. Size:
   full art width so the sheet reads at projects-panel scale or bigger —
   never the 86% generic-fallback size. */
.home-v4 .cfg4__art .pj-dg{width:100%}
@media(max-width:900px){
  /* the 860-unit sheet cannot shrink to a phone/tight-tablet art cell —
     pan it instead, same pattern as the projects panel (min-width +
     overflow-x). justify flex-start + child auto margins = safe centering:
     everything that fits stays centered, the sheet reaches BOTH edges when
     panned; the JS pre-scrolls the lit side into view. */
  .home-v4 .cfg4__art{justify-content:flex-start}
  .home-v4 .cfg4__art > *{margin-inline:auto}
  .home-v4 .cfg4__art .pj-dg{min-width:640px;width:640px}
  .home-v4 .cfg4__art:has(.pj-dg){overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
}
/* devices default visual */
.home-v4 .svc4__devices{display:flex;align-items:flex-end;gap:30px}
/* ---- Implement arts (Monish 2026-09-11). Shared: white screens, ink
   frames, amber accents; every animated element keeps a COMPLETE static
   frame when animations are killed (content base-visible, transient bits
   base-hidden) — the reduced-motion block at the end of this section. */
.home-v4 .cfg4__art .mwrap,.home-v4 .cfg4__art .inat-wrap,
.home-v4 .cfg4__art .ipro-wrap{display:flex;flex-direction:column;align-items:center}
.home-v4 .cfg4__art .artcap{margin-top:16px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.14em;color:var(--text-3)}
/* the implement device pair reuses .dev--mac/.dev--phone verbatim —
   same layout as the idle visual — with UI filling the screens */
.home-v4 .cfg4__art .dev__screen{position:relative;overflow:hidden}
/* accessible — STATIC dashboards in both screens (Monish 2026-09-11:
   "just show dashboards view on the mobile and pc screen, no need
   animation") — same dashboard, phone-density variant */
.home-v4 .idash{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
.home-v4 .idash-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:0 12px;border-bottom:1px solid var(--h2-line)}
.home-v4 .cfg4__art .idash-bar img{height:14px;width:auto}
.home-v4 .idash-dots{margin-left:auto;display:flex;gap:5px}
.home-v4 .idash-dots i{width:6px;height:6px;border-radius:50%;
  border:1.5px solid rgba(34,48,60,.35)}
.home-v4 .idash-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:9px 12px;min-height:0}
.home-v4 .idash-cards{display:flex;gap:8px}
.home-v4 .idash-card{flex:1;border:1px solid var(--h2-line);border-radius:9px;padding:6px 9px}
.home-v4 .idash-card span{display:block;font-family:var(--font-mono);font-size:7.5px;
  letter-spacing:.1em;color:var(--text-3);margin-bottom:2px}
.home-v4 .idash-card b{font-size:12.5px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.home-v4 .idash-chart{flex:1;display:flex;align-items:flex-end;min-height:0;
  border-bottom:1px solid var(--h2-line)}
.home-v4 .idash-bars{display:flex;align-items:flex-end;gap:5px;width:100%;height:100%}
.home-v4 .idash-bars i{flex:1;border-radius:3px 3px 0 0;background:var(--h2-amber);opacity:.85}
.home-v4 .idash-bars i:last-child{background:var(--h2-amber-deep);opacity:1}
.home-v4 .idash-list{display:flex;flex-direction:column;gap:6px}
.home-v4 .idash-row{display:flex;align-items:center;gap:7px;border:1px solid var(--h2-line);
  border-radius:8px;padding:4px 8px;background:#fff}
.home-v4 .idash-row i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--h2-amber)}
.home-v4 .idash-row b{font-weight:600;font-size:9.5px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.home-v4 .idash-row span{margin-left:auto;font-family:var(--font-mono);font-size:7.5px;
  letter-spacing:.08em;color:#8A5414}
.home-v4 .idash--phone .idash-bar{padding:0 8px}
.home-v4 .cfg4__art .idash--phone .idash-bar img{height:10px;width:auto}
.home-v4 .idash--phone .idash-body{padding:7px;gap:6px}
.home-v4 .idash--phone .idash-card b{font-size:10px}
.home-v4 .idash--phone .idash-row{padding:3px 6px}
.home-v4 .idash--phone .idash-row b{font-size:8px}
.home-v4 .idash--phone .idash-row span{display:none}
/* maintain — reuses the proactive monitor frame (.ipro-*); content per tab:
   uptime tick strips, security checklist, latency chart. All static. */
.home-v4 .mtn-body{position:absolute;inset:42px 0 0;display:flex;flex-direction:column;
  gap:9px;padding:13px 18px}
.home-v4 .mup-hero{display:flex;align-items:baseline;gap:12px}
.home-v4 .mup-hero b{font-family:var(--font-mono);font-size:36px;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;line-height:1}
.home-v4 .mup-hero span{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  color:var(--text-3)}
.home-v4 .mup-row{display:flex;align-items:center;gap:12px}
.home-v4 .mup-row b{flex:0 0 56px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.12em;color:var(--text-2)}
.home-v4 .mup-ticks{flex:1;display:flex;gap:3px}
.home-v4 .mup-ticks i{flex:1;height:15px;border-radius:2px;background:var(--h2-line)}
.home-v4 .mup-ticks i.warn{background:var(--h2-amber)}
.home-v4 .mtn-foot{margin-top:auto;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.12em;color:var(--text-3)}
.home-v4 .msec-row{display:flex;align-items:center;gap:10px;border:1px solid var(--h2-line);
  border-radius:10px;padding:8px 12px;background:#fff}
.home-v4 .msec-row i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  background:var(--h2-amber);position:relative}
.home-v4 .msec-row i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(40deg)}
.home-v4 .msec-row b{font-size:12px;font-weight:600;color:var(--ink)}
.home-v4 .msec-row span{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;
  letter-spacing:.1em;color:#8A5414}
.home-v4 .mperf-chart{position:relative;flex:1;display:flex;align-items:flex-end;
  min-height:0;border-bottom:1px solid var(--h2-line)}
.home-v4 .mperf-line{position:absolute;left:0;right:0;bottom:58%;
  border-top:2px dashed rgba(138,84,20,.5)}
.home-v4 .mperf-line em{position:absolute;right:0;top:-14px;font-style:normal;
  font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;color:#8A5414}
/* financing — schedule cards */
.home-v4 .fin-card{width:min(470px,72vw);background:#fff;border:1px solid var(--h2-line);
  border-radius:18px;box-shadow:0 18px 44px rgba(10,15,22,.12);padding:18px 20px}
.home-v4 .fin-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.home-v4 .fin-head span{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--text-2)}
.home-v4 .fin-head b{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:#8A5414}
.home-v4 .fsegs{display:flex;gap:6px}
.home-v4 .fseg{height:58px;border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
.home-v4 .fseg b{font-family:var(--font-mono);font-size:13px}
.home-v4 .fseg span{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.12em}
.home-v4 .fseg--20{background:var(--h2-amber);color:#fff}
.home-v4 .fseg:not(.fseg--20):not(.fseg--end){background:rgba(196,131,59,.14);color:#8A5414;
  border:1px solid rgba(196,131,59,.4)}
.home-v4 .fseg--end{background:#8A5414;color:#fff}
.home-v4 .fruler{display:flex;margin-top:10px}
.home-v4 .fruler span{flex:1;text-align:center;font-family:var(--font-mono);font-size:7.5px;
  color:var(--text-3);border-left:1px solid var(--h2-line);padding:2px 0}
.home-v4 .fruler span:first-child{border-left:0}
.home-v4 .fin-note{margin-top:10px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.12em;color:var(--text-3)}
.home-v4 .fm-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.home-v4 .fm-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.home-v4 .fm-cell i{width:100%;height:30px;border-radius:5px;background:var(--h2-amber)}
.home-v4 .fm-cell span{font-family:var(--font-mono);font-size:7px;color:var(--text-3)}
/* IP & Data — certificate */
.home-v4 .ip-cert{position:relative;width:min(470px,72vw);background:#fff;
  border:1.5px solid #8A5414;border-radius:16px;padding:18px 20px 16px;
  box-shadow:0 18px 44px rgba(10,15,22,.12)}
.home-v4 .ip-cert::before{content:"";position:absolute;inset:5px;
  border:1px solid rgba(138,84,20,.35);border-radius:12px;pointer-events:none}
.home-v4 .ip-head{text-align:center;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.22em;color:#8A5414;margin-bottom:10px}
.home-v4 .ip-row{display:flex;align-items:center;gap:10px;border-top:1px solid var(--h2-line);
  padding:9px 2px}
.home-v4 .ip-row i{flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  background:var(--h2-amber);position:relative}
.home-v4 .ip-row i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(40deg)}
.home-v4 .ip-row b{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink)}
.home-v4 .ip-row span{margin-left:auto;font-size:10.5px;color:var(--text-2)}
.home-v4 .ip-foot{display:flex;align-items:center;gap:14px;margin-top:12px}
.home-v4 .ip-seal{flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  background:#8A5414;color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--font-mono);font-size:11px;line-height:1.15;
  box-shadow:0 8px 20px rgba(138,84,20,.35)}
.home-v4 .ip-sign{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--text-2)}
/* integrations — chips wrap into one hub */
.home-v4 .ig-board{width:min(470px,72vw);display:grid;grid-template-columns:1fr 150px 1fr;
  gap:12px 30px;align-items:stretch}
.home-v4 .ig-col{display:flex;flex-direction:column;justify-content:space-between;gap:11px;
  grid-row:1 / span 4}
.home-v4 .ig-chip{position:relative;background:#fff;border:1px solid var(--h2-line);
  border-radius:99px;padding:7px 12px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.1em;color:var(--ink);text-align:center;box-shadow:0 6px 16px rgba(10,15,22,.08)}
.home-v4 .ig-chip--l::after,.home-v4 .ig-chip--r::before{content:"";position:absolute;top:50%;
  width:24px;border-top:2px dashed rgba(196,131,59,.55)}
.home-v4 .ig-chip--l::after{left:calc(100% + 3px)}
.home-v4 .ig-chip--r::before{right:calc(100% + 3px)}
.home-v4 .ig-hub{grid-column:2;grid-row:1 / span 4;align-self:center;display:flex;
  flex-direction:column;align-items:center;gap:8px;background:#22303C;border-radius:16px;
  padding:18px 12px;box-shadow:0 18px 44px rgba(10,15,22,.25)}
.home-v4 .ig-hub img{height:20px;width:auto}
.home-v4 .ig-hub span{font-family:var(--font-mono);font-size:8px;letter-spacing:.16em;color:#fff}
@media(max-width:480px){
  .home-v4 .ig-board{grid-template-columns:1fr 104px 1fr;gap:9px 16px}
  .home-v4 .ig-chip--l::after,.home-v4 .ig-chip--r::before{width:10px}
  .home-v4 .ig-chip{font-size:8px;padding:6px 8px}
  .home-v4 .ig-hub{padding:12px 8px}
  .home-v4 .fseg span{display:none}
  .home-v4 .fruler span{font-size:6px}
  .home-v4 .fm-cell span{display:none}
  .home-v4 .mup-hero b{font-size:28px}
  .home-v4 .mtn-body{padding:10px 12px}
}
/* natural — a phone that dollies in, then a chat runs: user asks, the
   assistant types then answers, a voice note plays, one more exchange */
.home-v4 .inat-phone{width:min(232px,62vw);animation:inat-in .65s var(--ease-out) backwards}
.home-v4 .inat-screen{position:relative;display:flex;flex-direction:column;overflow:hidden;
  aspect-ratio:9/19;background:#fff;border:7px solid #22303C;border-radius:24px;
  box-shadow:0 24px 60px rgba(10,15,22,.16)}
@keyframes inat-in{from{transform:scale(1.14);opacity:.25}to{transform:scale(1);opacity:1}}
.home-v4 .inat-head{display:flex;align-items:center;gap:7px;padding:10px 12px 8px;
  border-bottom:1px solid var(--h2-line)}
.home-v4 .inat-head img{height:13px;width:auto}
.home-v4 .inat-head span{font-size:10.5px;font-weight:600;color:var(--ink)}
.home-v4 .inat-head i{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#1E5A47}
.home-v4 .inat-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:10px 10px 6px}
.home-v4 .inat-bub{max-width:82%;padding:7px 10px;border-radius:13px;font-size:11px;
  line-height:1.35;color:var(--ink);animation:inat-pop .45s var(--ease-out) backwards}
.home-v4 .inat-bub--me{align-self:flex-end;background:var(--h2-amber-deep);color:#fff;
  border-bottom-right-radius:4px;animation-delay:.55s}
.home-v4 .inat-bub--sys{align-self:flex-start;background:#fff;border:1px solid var(--h2-line);
  border-bottom-left-radius:4px}
.home-v4 .inat-bub--sys:nth-of-type(3){animation-delay:1.95s}
.home-v4 .inat-bub--me:nth-of-type(5){animation-delay:3.1s}
.home-v4 .inat-bub--sys:nth-of-type(6){animation-delay:3.75s}
.home-v4 .inat-voice{align-self:flex-start;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--h2-line);border-radius:14px;border-bottom-left-radius:4px;
  padding:7px 10px;animation:inat-pop .45s var(--ease-out) backwards;animation-delay:2.5s}
.home-v4 .inat-vplay{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--h2-amber);position:relative}
.home-v4 .inat-vplay::after{content:"";position:absolute;left:7px;top:5px;
  border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.home-v4 .inat-wave{display:flex;align-items:center;gap:2.5px;height:18px}
.home-v4 .inat-wave i{width:2.5px;border-radius:2px;background:var(--h2-amber-deep);
  animation:inat-wave 1.1s ease-in-out infinite}
.home-v4 .inat-wave i:nth-child(1){height:7px}.home-v4 .inat-wave i:nth-child(2){height:13px}
.home-v4 .inat-wave i:nth-child(3){height:17px}.home-v4 .inat-wave i:nth-child(4){height:10px}
.home-v4 .inat-wave i:nth-child(5){height:15px}.home-v4 .inat-wave i:nth-child(6){height:8px}
.home-v4 .inat-wave i:nth-child(7){height:14px}
.home-v4 .inat-wave i:nth-child(odd){animation-delay:.15s}
.home-v4 .inat-wave i:nth-child(4){animation-delay:.3s}
.home-v4 .inat-vsec{font-family:var(--font-mono);font-size:9.5px;color:var(--text-3)}
@keyframes inat-pop{from{opacity:0;transform:translateY(9px) scale(.94)}to{opacity:1;transform:none}}
@keyframes inat-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
/* the typing indicator is TRANSIENT: base-hidden, lit only inside its
   one-shot keyframe window (1.2s-1.9s, just before the reply) — reduced
   motion never shows it, and it never re-appears after the exchange */
.home-v4 .inat-typing{align-self:flex-start;display:flex;gap:4px;padding:9px 12px;
  background:#fff;border:1px solid var(--h2-line);border-radius:13px;
  border-bottom-left-radius:4px;opacity:0;animation:inat-typing 1s ease-in-out 1.2s both}
.home-v4 .inat-typing i{width:5px;height:5px;border-radius:50%;background:var(--text-3);
  animation:inat-typing-dot 1s ease-in-out infinite}
.home-v4 .inat-typing i:nth-child(2){animation-delay:.15s}
.home-v4 .inat-typing i:nth-child(3){animation-delay:.3s}
@keyframes inat-typing{0%{opacity:0}25%,70%{opacity:1}100%{opacity:0}}
@keyframes inat-typing-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.home-v4 .inat-input{display:flex;align-items:center;gap:8px;margin:0 10px 10px;
  padding:8px 12px;border:1px solid var(--h2-line);border-radius:99px;background:#fff}
.home-v4 .inat-input span:first-child{font-size:10.5px;color:var(--text-3)}
.home-v4 .inat-mic{margin-left:auto;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--h2-amber-deep);position:relative}
.home-v4 .inat-mic::after{content:"";position:absolute;left:4px;top:-5px;width:2px;height:8px;
  background:var(--h2-amber-deep);border-radius:2px}
/* proactive — a monitor running an incident log: each event lands with its
   outcome (the system handled it, or drafted it for approval) */
.home-v4 .ipro-monitor{display:flex;flex-direction:column;align-items:center}
.home-v4 .ipro-screen{position:relative;width:min(480px,74vw);aspect-ratio:16/10;background:#fff;
  border:10px solid #22303C;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,15,22,.16)}
.home-v4 .ipro-head{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--h2-line)}
.home-v4 .ipro-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--text-2)}
.home-v4 .ipro-live{margin-left:auto;display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:#8A5414}
.home-v4 .ipro-live i{width:7px;height:7px;border-radius:50%;background:var(--h2-amber);
  animation:ipro-pulse 1.6s ease-in-out infinite}
@keyframes ipro-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.home-v4 .ipro-log{position:absolute;inset:42px 0 0;display:flex;flex-direction:column;
  gap:6px;padding:11px 16px;overflow:hidden}
.home-v4 .ipro-row{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--h2-line);border-radius:10px;padding:8px 12px;
  animation:ipro-in .5s var(--ease-out) backwards;animation-delay:var(--d,0s)}
.home-v4 .ipro-t{flex:0 0 auto;font-family:var(--font-mono);font-size:10px;color:var(--text-3)}
.home-v4 .ipro-what{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.home-v4 .ipro-chip{margin-left:auto;flex:0 0 auto;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.09em;padding:4px 9px;border-radius:99px;white-space:nowrap}
.home-v4 .ipro-chip--done{background:var(--h2-amber-deep);color:#fff}
.home-v4 .ipro-chip--draft{border:1.5px solid var(--h2-amber-deep);color:#8A5414;background:#fff}
.home-v4 .ipro-chip--draft::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--h2-amber-deep);margin-right:5px;vertical-align:1px;
  animation:ipro-pulse 1.6s ease-in-out infinite}
@keyframes ipro-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.home-v4 .ipro-neck{width:26px;height:18px;background:#22303C;margin-top:2px}
.home-v4 .ipro-foot{width:130px;height:10px;background:#22303C;border-radius:0 0 12px 12px}
/* reduced motion: every art lands on its complete static frame (the
   accessible dashboards, maintain/finance/IP/integrations arts are
   static by construction; only the transient chat bits + pulse dots
   animate) */
@media(prefers-reduced-motion:reduce){
  .home-v4 .inat-phone,.home-v4 .inat-bub,.home-v4 .inat-typing,
  .home-v4 .inat-wave i,.home-v4 .inat-vplay::after,.home-v4 .ipro-row,
  .home-v4 .ipro-live i,.home-v4 .ipro-chip--draft::before{
    animation:none!important;transition:none!important}
}
.home-v4 .dev{position:relative}
.home-v4 .dev--mac{display:flex;flex-direction:column;align-items:center}
.home-v4 .dev--mac .dev__screen{display:flex;align-items:center;justify-content:center;
  width:min(400px,40vw);aspect-ratio:16/10;background:#fff;border:10px solid #22303C;
  border-radius:14px;box-shadow:0 24px 60px rgba(10,15,22,.16)}
.home-v4 .dev--mac .dev__base{width:min(470px,47vw);height:13px;background:#22303C;
  border-radius:0 0 16px 16px;margin-top:2px}
.home-v4 .dev--phone .dev__screen{display:flex;align-items:center;justify-content:center;
  width:min(140px,18vw);aspect-ratio:9/19;background:#fff;border:7px solid #22303C;
  border-radius:24px;box-shadow:0 24px 60px rgba(10,15,22,.16)}
.home-v4 .dev__screen img{width:56%;height:auto}
/* pills — the LEFT ⅓ column: normal grid cell, never overlays the art;
   vertically centered like the example (the stack grows symmetrically around
   the box middle when a card opens) and left-padded to RESERVE the chevron
   gutter so an expanded card can never collide with the gutter buttons */
.home-v4 .cfg4__pills{grid-column:1;grid-row:1;position:static;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;
  padding:24px 14px 64px 68px}
.home-v4 .cfg4__stage:has(.cfg4__pill.is-open) .cfg4__pills{padding:24px 14px 24px 68px}
.home-v4 .cfg4__pill{position:relative;display:flex;align-items:center;gap:11px;
  border:0;cursor:pointer;font-family:inherit;text-align:left;
  background:#fff;border:1px solid var(--h2-line);color:var(--ink);
  border-radius:99px;padding:13px 22px 13px 15px;font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  box-shadow:0 10px 26px rgba(10,15,22,.13);
  transition:box-shadow .3s var(--h2-ease),transform .3s var(--h2-ease),background .3s}
.home-v4 .cfg4__pill:hover{box-shadow:0 12px 30px rgba(10,15,22,.16);transform:translateY(-1px)}
.home-v4 .cfg4__pill .pill__ico{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(34,48,60,.5);position:relative}
.home-v4 .cfg4__pill .pill__ico::before{content:"+";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-weight:400;font-size:15px;color:rgba(34,48,60,.65)}
.home-v4 .cfg4__pill.is-active .pill__ico{background:var(--h2-amber);border-color:var(--h2-amber)}
.home-v4 .cfg4__pill.is-active .pill__ico::before{content:""}
/* engaged: the clicked pill becomes the description panel — icon dropped,
   bold name top-aligned (skiper76 card style) */
.home-v4 .cfg4__pill.is-open{border-radius:22px;width:min(480px,calc(100% - 24px));
  padding:18px 22px;cursor:default;background:#fff;align-items:flex-start}
.home-v4 .cfg4__pill .pill__body{display:block}
.home-v4 .cfg4__pill .pill__desc{font-weight:400;font-size:.88rem;line-height:1.55;
  color:var(--text-2);letter-spacing:0}
/* Monish 2026-09-11: the description sits on its own line UNDER the name —
   never behind it (b becomes a block; gap via margin, not the old inline space) */
.home-v4 .cfg4__pill .pill__desc b{display:block;margin-bottom:4px;color:var(--ink)}
.home-v4 .cfg4__opts{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
.home-v4 .pill__opt{cursor:pointer;border:1px solid var(--h2-line);background:#fff;border-radius:99px;
  padding:7px 14px;font-size:.78rem;color:var(--text-2);transition:all .2s;font-family:inherit}
.home-v4 .pill__opt:hover{border-color:var(--h2-amber);color:var(--ink)}
.home-v4 .pill__opt.is-on{background:var(--h2-amber-deep);border-color:var(--h2-amber-deep);color:#fff}
.home-v4 .cfg4__pill .cfg4__cta{display:inline-block;margin-top:12px;font-size:.82rem;font-weight:600;
  color:var(--h2-amber-deep);text-decoration:none;border-bottom:1px solid rgba(138,84,20,.35);padding-bottom:2px}
.home-v4 .cfg4__pill .cfg4__cta:hover{color:var(--h2-amber)}
/* close + chevrons */
.home-v4 .cfg4__close{position:absolute;top:22px;right:22px;z-index:4;width:36px;height:36px;
  border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(10,15,22,.12);
  transition:transform .25s,box-shadow .25s}
.home-v4 .cfg4__close[hidden]{display:none} /* class display:flex would beat the hidden attr */
.home-v4 .cfg4__close:hover{transform:scale(1.08);box-shadow:0 12px 28px rgba(10,15,22,.18)}
/* chevrons — anchored to the STAGE, not the pill flow (skiper76 mechanic):
   stacked vertically in the reserved left gutter, vertically centered on the
   box, so no reflow inside the theater can ever move them; hidden at idle */
.home-v4 .cfg4__chevs{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;gap:8px;margin:0}
.home-v4 .cfg4__chevs[hidden]{display:none} /* display:flex would beat hidden */
.home-v4 .cfg4__chevs button{width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(10,15,22,.1);transition:transform .2s,box-shadow .2s}
.home-v4 .cfg4__chevs button:hover{transform:scale(1.08);box-shadow:0 10px 22px rgba(10,15,22,.16)}
@media(max-width:900px){
  .home-v4 .cfg4__stage{grid-template-columns:minmax(250px,2fr) 3fr}
  .home-v4 .cfg4__pills{padding-left:56px}
  .home-v4 .cfg4__chevs{left:12px}
  .home-v4 .cfg4__art{padding:40px 24px}
  .home-v4 .dev--mac .dev__screen{width:min(300px,52vw)}
  .home-v4 .dev--mac .dev__base{width:min(350px,60vw)}
  .home-v4 .dev--phone .dev__screen{width:min(92px,20vw)}
}
@media(max-width:700px){
  /* single column on phones: features on top, visual below. The height lock
     is a desktop mechanic — phones release it (auto) so nothing clips, and
     the chevrons re-anchor over the ART zone's left edge (still fixed to the
     box, still never moving) */
  .home-v4 .cfg4__stage{grid-template-columns:1fr;height:auto}
  .home-v4 .cfg4__pills{grid-row:1;padding:20px 16px 6px}
  .home-v4 .cfg4__chevs{left:14px;top:auto;bottom:150px;transform:none}
  .home-v4 .cfg4__art{grid-column:1;grid-row:2;min-height:340px;padding:28px 18px;
    border-left:0;border-top:1px solid var(--bg)}
}

/* the real quote + the Powerline field-testing photo — moved 2026-09-07
   (Monish) out of the situations section into its own band between the
   hero and section 2. Text left, photo right; stacked on phones. */
.home-v4 .quoteband{padding:104px 0 96px;background:var(--bg)}
.home-v4 .quoteband__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:56px;align-items:center;margin:0}
.home-v4 .quoteband__text blockquote{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.3rem,2.8vw,2rem);letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.home-v4 .quoteband__text figcaption{margin-top:18px;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.home-v4 .quoteband__media{margin:0}
.home-v4 .quoteband__media img{display:block;width:100%;height:clamp(240px,40svh,380px);
  object-fit:cover;border-radius:18px;box-shadow:0 26px 64px rgba(10,15,22,.13)}
@media(max-width:900px){
  .home-v4 .quoteband{padding:72px 0 64px}
  .home-v4 .cta6{padding:72px 0} /* audit 2026-09-24 B8: mobile cta6 joins the 72 mobile-section token (was unstated → inherited 110) */
  .home-v4 .quoteband__inner{grid-template-columns:1fr;gap:30px}
  .home-v4 .quoteband__media img{height:clamp(200px,48vw,320px)}
}
@media(max-width:1080px){.home-v4 .sit__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.home-v4 .sit__grid{grid-template-columns:1fr}}
/* 5 cards: 3+2 with a hole in the strongest slot (audit 2026-09-05) —
   6-col grid centers the second row pair */
@media(min-width:1081px){
  .home-v4 .sit__grid{grid-template-columns:repeat(6,1fr)}
  .home-v4 .sitcard{grid-column:span 2}
  .home-v4 .sitcard:nth-child(4){grid-column:2/4}
  .home-v4 .sitcard:nth-child(5){grid-column:4/6}
}
/* ---------- 6 · CTA — the bookend (matches inner-page band) */
.home-v4 .cta6{background:var(--bg-dark-2);padding:104px 0;text-align:center;color:#fff}
.home-v4 .cta6 h2{color:#fff;font-size:clamp(1.9rem,4.4vw,3.3rem);letter-spacing:-.03em;line-height:1.14;max-width:22em;margin:0 auto}
.home-v4 .cta6 .cta6-ask{margin-top:20px;font-size:clamp(1rem,1.7vw,1.2rem);color:rgba(234,242,247,.75)}
.home-v4 .cta6__actions{margin-top:38px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.home-v4 .cta6__mail{margin-top:22px;font-size:.9rem}
.home-v4 .cta6__mail a{color:rgba(234,242,247,.65);text-decoration:underline;text-underline-offset:3px}
.home-v4 .cta6__mail a:hover{color:#fff}

/* ---------- reveal (gated on html.js; main.js adds .is-in) ---------- */
html.js .home-v4 [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--h2-ease),transform .8s var(--h2-ease)}
html.js .home-v4 [data-reveal].is-in{opacity:1;transform:none}

/* ---------- reduced motion: static composition complete ---------- */
@media(prefers-reduced-motion:reduce){
  .home-v4 *,.home-v4 *::before,.home-v4 *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .home-v4 .pcard:hover{transform:none}
  .prob2.scrub-on .prob2__track{height:auto}
  .prob2.scrub-on .prob2__stage{position:static;height:auto;overflow:visible}
  .prob2.scrub-on .prob2__open{position:static;padding:70px 18px 40px}
  .prob2.scrub-on .prob2__l1 .wd,.prob2.scrub-on .prob2__l2 .ch{opacity:1!important;transform:none!important;display:inline-block}
  .prob2.scrub-on .prob2__logos{filter:none!important}
  .prob2.scrub-on .prob2__logos li{opacity:1!important}
  .prob2.scrub-on .prob2__caret{display:none}
  .prob2.scrub-on .prob2__pts{display:flex;flex-direction:column;gap:72px;align-items:center;padding:46px 18px 96px}
  .prob2.scrub-on .prob2__cap{position:static;transform:none!important;opacity:1!important;width:auto}
  .prob2.scrub-on .prob2__frame{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important}
  .home-v4 [data-reveal]{opacity:1!important;transform:none!important}
}