/* Site engine — shared styles for every generated site (tokens come from the page's :root). */
/* D-23: the gutter is a real 5 % edge margin on phones and tablets (19.5 px at 390), capped at 56 px as before */
:root{--gut:clamp(16px,5vw,56px);--max:1360px;--r:16px;--ease:cubic-bezier(.16,1,.3,1);--line:color-mix(in srgb,var(--ink) 14%,transparent);--soft:color-mix(in srgb,var(--ink) 6%,transparent);--glass:color-mix(in srgb,var(--surface) 72%,transparent);--h1:clamp(2.75rem,7.4vw,7.75rem);--h2:clamp(2.125rem,4.6vw,4.5rem)}
.s-r-sharp{--r:2px}.s-r-round{--r:30px}
html{background:var(--bg);color:var(--ink);scroll-padding-top:84px}
/* User (2026-10-11): never the OS scrollbar. The page bar is thin and quiet: its thumb is ink mixed into the ground to
   3:1 (--sb, build_site.mjs) on a ground-coloured track; descendants inherit the colours (scrollbar-color inherits) */
/* Standard properties override Chrome/Safari custom scrollbar styling; reserve them for Firefox. */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:var(--sb,color-mix(in srgb,var(--ink) 45%,var(--bg))) var(--bg)}
  .s-menu{scrollbar-width:thin}
}
html::-webkit-scrollbar{width:10px;height:10px;background:var(--bg)}
html::-webkit-scrollbar-thumb{background:var(--sb,color-mix(in srgb,var(--ink) 45%,var(--bg)));border:2px solid var(--bg);border-radius:10px}
html::-webkit-scrollbar-track{background:var(--bg)}
html::-webkit-scrollbar-button,.s-menu::-webkit-scrollbar-button{display:none}
.s-dark{color-scheme:dark}.s-light{color-scheme:light}
/* D-15: while the corner menu is open the page behind is inert and does not scroll (the gutter keeps the layout still) */
html.s-locked{overflow:hidden;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:clamp(1rem,1.02vw,1.125rem);line-height:1.6;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.s-skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--accent);color:var(--on-accent);border-radius:999px;text-decoration:none;font-weight:600}
.s-skip:focus-visible{top:12px}
/* K87: a section reached by an in-page jump takes focus for the next Tab; it draws no ring of its own */
.s-jump:focus{outline:none}
.s-wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.s-nw{white-space:nowrap}
.s-accent{font-family:var(--font-a);font-style:italic;font-weight:400;color:var(--accent-text,var(--accent));letter-spacing:-.01em}

/* ---------------------------------------------------------------- type */
.s-h1{font-family:var(--font-d);font-weight:var(--dw);font-size:var(--h1);line-height:.96;letter-spacing:-.035em;margin:0;text-wrap:balance}
.s-h2{font-family:var(--font-d);font-weight:var(--dw);font-size:var(--h2);line-height:1;letter-spacing:-.03em;margin:0;text-wrap:balance}
.s-h2--xl{font-size:clamp(2.5rem,6vw,6rem)}
.s-upper .s-h1,.s-upper .s-h2,.s-upper .s-wordmark{text-transform:uppercase;letter-spacing:-.01em}
.s-label,.s-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;font-weight:600}
.s-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);color:var(--ink)}
.s-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:s-ping 2.4s infinite}
@keyframes s-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}
.s-sub,.s-lead{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.55;color:color-mix(in srgb,var(--ink) 78%,transparent);max-width:56ch;margin:22px 0 0;text-wrap:pretty}
.s-head{max-width:900px;margin-bottom:clamp(36px,5vw,72px)}
.s-head .s-lead{margin-top:18px}

/* ---------------------------------------------------------------- buttons */
.s-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.s-btn{--h:54px;position:relative;display:inline-flex;align-items:center;gap:12px;min-height:var(--h);height:auto;padding:0 26px;border-radius:calc(var(--r) + 12px);font:600 15px/1 var(--font-b);text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.s-r-sharp .s-btn{border-radius:2px}
.s-btn[hidden]{display:none}
.s-btn--sm{--h:42px;padding:0 18px;font-size:14px}
.s-btn--primary{background:var(--accent);color:var(--on-accent)}
.s-btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.s-btn--primary:hover::before{transform:none}
.s-btn--primary:hover{color:var(--bg)}
.s-btn--ghost{border-color:var(--line);color:var(--ink);background:var(--glass);backdrop-filter:blur(10px)}
.s-btn--ghost:hover{border-color:var(--ink)}
.s-btn i{font-style:normal;transition:transform .4s var(--ease)}
.s-btn:hover i{transform:translateX(4px)}
/* D-22 (K36): a tag is flat text, not a pill that reads as a filter chip */
.s-chip{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------------------------------------------------------------- nav */
/* K49: UI motion on tier tokens (motion-tokens.md): menu/header --dur-small, toggles --dur-micro, panels --dur-panel */
.s-nav{position:fixed;inset:0 0 auto;z-index:100;transition:background var(--dur-small) var(--ease-out),backdrop-filter var(--dur-small) var(--ease-out),transform var(--dur-small) var(--ease-out),border-color var(--dur-small) var(--ease-out);border-bottom:1px solid transparent}
.s-nav.is-scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.3);border-color:var(--line)}
.s-nav.is-hidden{transform:translateY(-100%)}
.s-nav__in{display:flex;align-items:center;gap:28px;height:76px}
/* K101: the nav CTA sits at least twice the link gap (2 x 26 px) from the links, so it groups apart */
.s-nav__in > .s-btn--sm{margin-inline-start:24px}
.s-logo{font-family:var(--font-d);font-weight:var(--dw);font-size:22px;letter-spacing:-.02em;text-decoration:none;margin-right:auto;white-space:nowrap}
.s-nav__links{display:flex;gap:26px}
.s-nav__links a{font-size:14px;text-decoration:none;color:color-mix(in srgb,var(--ink) 75%,transparent);position:relative}
.s-nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-small) var(--ease-out)}
.s-nav__links a:hover{color:var(--ink)}.s-nav__links a:hover::after{transform:none;transform-origin:left}
/* K27: the link of the section in view (aria-current, site.js spy) is underlined, so the cue is not colour alone */
.s-nav__links a[aria-current]{color:var(--ink)}.s-nav__links a[aria-current]::after{transform:none;height:2px}
.s-menu a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.s-burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);position:relative;cursor:pointer}
.s-burger i{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);transition:transform var(--dur-small) var(--ease-out)}
.s-burger i:first-child{top:18px}.s-burger i:last-child{top:25px}
.s-burger[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}.s-burger[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* K42: the menu enters (opacity + clip from the top, --dur-small) and leaves faster (--dur-micro) instead of a one-frame
   swap; hidden = visibility hidden (out of the tab order and the accessibility tree). Reduced motion: instant. */
.s-menu{position:fixed;inset:76px 0 auto;background:var(--bg);border-bottom:1px solid var(--line);padding:16px var(--gut) 28px;display:grid;gap:4px;visibility:visible;opacity:1;clip-path:inset(0 0 0 0);transition:opacity var(--dur-small) var(--ease-out),clip-path var(--dur-small) var(--ease-out),visibility 0s;max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain}
/* (a long menu on a short screen scrolls inside its sheet, on the page's thin token bar, never the OS default) */
.s-menu::-webkit-scrollbar{width:6px}.s-menu::-webkit-scrollbar-thumb{background:var(--sb,color-mix(in srgb,var(--ink) 45%,var(--bg)));border-radius:6px}.s-menu::-webkit-scrollbar-track{background:transparent}
.s-menu[hidden]{display:grid;visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);pointer-events:none;transition:opacity var(--dur-micro) var(--ease-in),clip-path var(--dur-micro) var(--ease-in),visibility 0s linear var(--dur-micro)}
@media (prefers-reduced-motion:reduce){.s-menu,.s-menu[hidden]{transition:none}}
.s-menu a{font-family:var(--font-d);font-size:30px;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------------- media + living */
.s-media{position:absolute;inset:0;overflow:hidden;background:var(--surface)}
.s-media__img,.s-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-media canvas{opacity:0;transition:opacity 1.2s ease}
.s-media canvas.is-on{opacity:1}
.s-living-cut{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.s-living-cut.is-on{opacity:1}
.s-scrim{position:absolute;inset:0;pointer-events:none;z-index:1}
.s-scrim--bottom{background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 45%,transparent) 38%,transparent 70%),linear-gradient(to right,color-mix(in srgb,var(--bg) 55%,transparent),transparent 60%)}
.s-scrim--center{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 60%,transparent),color-mix(in srgb,var(--bg) 30%,transparent) 60%,color-mix(in srgb,var(--bg) 70%,transparent))}
.s-scrim--left{background:linear-gradient(to right,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 45%,transparent 80%)}

/* ---------------------------------------------------------------- heroes */
.s-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.s-hero__inner,.s-hero__center,.s-hero__low{position:relative;z-index:4;padding-bottom:clamp(40px,7vh,88px);padding-top:120px}
.s-hero--cinematic .s-h1{max-width:13ch}
.s-hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px}
.s-hero__foot .s-sub{margin-top:24px}
.s-meta{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;padding:22px 0 0;margin:30px 0 0;border-top:1px solid var(--line);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.s-meta li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
.s-scrollcue{position:absolute;right:var(--gut);bottom:40px;z-index:5;width:26px;height:44px;border:1px solid var(--line);border-radius:20px}
.s-scrollcue span{position:absolute;left:50%;top:9px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:s-cue 2s var(--ease) infinite}
@keyframes s-cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(16px);opacity:0}}
/* centered */
.s-hero--centered{justify-content:center;text-align:center}
.s-hero__center{display:flex;flex-direction:column;align-items:center;padding-top:140px}
.s-hero__center .s-h1{max-width:16ch}.s-hero__center .s-sub{margin-inline:auto}
.s-hero__center .s-ctas,.s-hero__center .s-meta{justify-content:center}
/* depth */
.s-hero--depth{justify-content:flex-start;min-height:0}
.s-depth__stage{position:relative;height:min(84svh,64vw);min-height:440px;overflow:hidden}
.s-depth__fade{position:absolute;inset:auto 0 0;height:34%;z-index:4;pointer-events:none;background:linear-gradient(to top,var(--bg),transparent)}
.s-hero--depth .s-hero__low{padding-top:8px;padding-bottom:clamp(40px,6vh,72px);margin-top:-6vh}
.s-hero__back{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 var(--gut);pointer-events:none}
.s-h1--giant{font-size:clamp(3rem,calc(150vw / var(--gl,10)),14.375rem);line-height:.86;text-align:center;max-width:none;letter-spacing:-.045em;color:var(--ink);text-shadow:0 2px 60px color-mix(in srgb,var(--bg) 40%,transparent)}
.s-hero__low{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 48px}
.s-h1--low{grid-column:1/-1;font-size:clamp(2.125rem,4.4vw,4.5rem);max-width:18ch}
.s-hero__low .s-eyebrow{grid-column:1/-1;justify-self:start}
.s-hero__low .s-ctas{margin-top:0}
.s-hero__low .s-meta{grid-column:1/-1;margin-top:14px}
/* split + app */
.s-hero--split,.s-hero--app{justify-content:center}
.s-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center;padding-top:120px;padding-bottom:70px;position:relative;z-index:4}
.s-hero--split .s-h1{font-size:clamp(2.625rem,6vw,6.25rem)}
.s-hero__frame{position:relative;aspect-ratio:4/5;border-radius:calc(var(--r) * 1.5);overflow:visible}
.s-hero__frame .s-media{border-radius:inherit}
.s-float{position:absolute;z-index:5;pointer-events:none}
.s-float__in{animation:s-bob 7s ease-in-out infinite}
.s-float__img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.s-float--a{width:46%;left:-18%;bottom:-6%}
.s-float--b{width:clamp(110px,13vw,220px);right:4%;top:14%}
.s-float--b .s-float__in{animation-delay:-3s;animation-duration:9s}
.s-float--center{width:clamp(180px,26vw,420px);left:50%;top:clamp(90px,16vh,190px);margin-left:calc(clamp(180px,26vw,420px) / -2)}
@keyframes s-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
/* wordmark */
.s-hero--wordmark{justify-content:flex-start;padding-top:96px}
.s-wordmark-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:clamp(270px,34vw,490px);overflow:hidden}
.s-wordmark-stage .s-float--center{top:20px;bottom:20px;display:grid;place-items:center}
.s-wordmark-stage .s-float__in{height:100%;width:100%;display:grid;place-items:center;min-height:0}
.s-wordmark-stage .s-float__img{max-height:100%;width:100%;object-fit:contain}
.s-wordmark{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(2.5rem,calc(160vw / var(--wl,8)),22.5rem);line-height:.8;letter-spacing:-.06em;text-align:center;white-space:nowrap;margin:2vh 0 0;color:var(--ink);position:relative;z-index:1}
.s-hero__row{display:grid;grid-template-columns:auto 1.2fr 1fr;gap:20px 40px;align-items:end;margin-top:clamp(20px,5vh,60px);position:relative;z-index:4}
.s-hero__row .s-h1{font-size:clamp(1.875rem,3.6vw,3.625rem)}
.s-hero__row .s-sub{margin-top:0}.s-hero__row .s-ctas{margin-top:18px}
.s-hero__strip{position:relative;height:clamp(200px,34vh,420px);margin-top:36px;border-radius:var(--r);overflow:hidden}
/* editorial */
.s-hero--editorial{justify-content:flex-start;padding-top:96px;padding-bottom:40px}
.s-hero__edtop{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.s-hero__edtop .s-eyebrow{margin:0}
.s-issue{font-family:var(--font-a);font-style:italic;font-size:18px;color:var(--muted);text-align:right}
.s-hero__edgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);padding-top:clamp(24px,5vh,56px);align-items:end}
.s-hero--editorial .s-h1{font-size:clamp(3rem,8.2vw,9.375rem);line-height:.9}
.s-hero__tall{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden}
/* bento */
.s-hero--bento{padding-top:96px;padding-bottom:24px;justify-content:flex-start}
.s-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);gap:12px;width:100%}
.s-tile--media{min-height:360px}
.s-tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.s-tile img{width:100%;height:100%;object-fit:cover}
.s-tile--copy{grid-column:span 2;grid-row:span 2;padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;justify-content:flex-end}
.s-tile--copy .s-h1{font-size:clamp(2.5rem,4.8vw,5.25rem)}
.s-tile--media{grid-column:span 2;grid-row:span 2}
.s-tile--obj{display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--accent) 35%,var(--surface)),var(--surface) 70%)}
.s-tile--obj img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.3))}
.s-tile--stat{padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:var(--accent);color:var(--on-accent);border:0}
.s-tile--stat strong{font-family:var(--font-d);font-size:clamp(1.375rem,2.2vw,2.125rem);line-height:1.05;font-weight:var(--dw)}
.s-tile--stat span{font-size:13px;opacity:.8}
/* app */
.s-phone{justify-self:center;width:min(320px,80vw);aspect-ratio:9/19;border-radius:44px;padding:12px;background:#0c0c0f;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 120px rgba(0,0,0,.5);position:relative}
.s-phone__screen{height:100%;border-radius:34px;overflow:hidden;background:var(--bg);padding:20px 16px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.s-phone__bar{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.s-phone__bar span{width:28px;height:28px;border-radius:50%;background:var(--accent)}
.s-phone__card{border-radius:20px;overflow:hidden;background:var(--surface);position:relative}
.s-phone__card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.s-phone__card p{margin:0;padding:10px 12px;font-size:12px;color:var(--muted)}
.s-phone__row{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--soft);font-size:12px;line-height:1.3}
.s-phone__row i{font-style:normal;color:var(--accent);font-weight:700}
.s-phone__row b{display:block;font-size:13px}.s-phone__row span{color:var(--muted)}
.s-phone__cta{margin-top:auto;text-align:center;padding:12px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px}

/* ---------------------------------------------------------------- sections */
.s-sec{position:relative;padding:clamp(80px,12vw,180px) 0}
.s-marquee{border-block:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--surface)}
.s-marquee__track{gap:34px;align-items:center;font-family:var(--font-d);font-size:clamp(1.625rem,3.4vw,3.25rem);letter-spacing:-.02em;white-space:nowrap;padding-right:34px}
.s-marquee__track i{font-style:normal;color:var(--accent);font-size:.6em}
.s-manifesto__text{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.875rem,4.3vw,4.25rem);line-height:1.1;letter-spacing:-.025em;margin:0;max-width:22ch;max-width:1180px}
.s-manifesto__text .s-w{opacity:.16;transition:opacity .3s}
.s-manifesto__text .s-w.is-lit{opacity:1}
/* cards */
.s-cards{display:grid;gap:16px;grid-template-columns:repeat(var(--cols,3),1fr)}
.s-cards--3{--cols:3}.s-cards--4{--cols:2}.s-cards--2{--cols:2}
@media (max-width:1000px){.s-cards--3{--cols:2}}
@media (min-width:1100px){.s-cards--4{--cols:4}}
.s-card{position:relative;padding:clamp(24px,2.6vw,38px);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);overflow:hidden;min-height:280px;display:flex;flex-direction:column;gap:12px}
/* D-22 (K36): service cards are not links, so they have no hover state */
.s-card__n{font-family:var(--font-d);font-size:15px;color:var(--accent)}
.s-card .s-chip{position:absolute;top:24px;right:24px}
.s-card h3{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.375rem,1.9vw,1.875rem);line-height:1.1;letter-spacing:-.02em;margin:auto 0 0}
.s-card p{margin:0;color:color-mix(in srgb,var(--ink) 72%,transparent);font-size:1rem}
.s-card__price{font-weight:600;color:var(--ink)!important;padding-top:12px;border-top:1px solid var(--line)}
/* feature */
.s-feature__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.s-feature__stage{position:relative;aspect-ratio:1;display:grid;place-items:center}
.s-feature__halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent),transparent 65%);filter:blur(30px);opacity:.7;z-index:0}
.s-feature__stage::before{content:"";position:absolute;inset:4%;border-radius:50%;border:1px solid var(--line)}
.s-feature__stage::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px dashed var(--line);animation:s-spin 60s linear infinite}
@keyframes s-spin{to{transform:rotate(360deg)}}
/* K47: the drop-shadow sits on an unrotated wrapper, so the light stays put while the object turns */
.s-feature__lift{position:relative;z-index:1;width:78%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.35))}
.s-feature__obj{position:relative;width:100%;will-change:transform}
.s-feature__obj img{width:100%;height:auto}
.s-points{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:p}
.s-points li{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:20px 0;border-top:1px solid var(--line);counter-increment:p}
.s-points li::before{content:"0" counter(p);grid-row:span 2;font-family:var(--font-d);color:var(--accent)}
.s-points b{font-size:18px}.s-points span{color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:1rem}
/* story */
.s-story{position:relative;height:calc(var(--steps) * 75vh + 100vh)}
.s-story__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.s-story__media,.s-story__frame{position:absolute;inset:0;margin:0}
.s-story__frame{clip-path:inset(100% 0 0 0);will-change:clip-path}
.s-story__frame:first-child{clip-path:none}
.s-story__frame img,.s-story__seq{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.18 - var(--fp,0) * .18));will-change:transform}
.s-story__seq{position:absolute;inset:0}
.s-story__shade{position:absolute;inset:0;background:linear-gradient(to right,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 30%,transparent) 60%,transparent)}
.s-story__text{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:var(--max)}
.s-story__text .s-h2{max-width:14ch;margin-bottom:34px}
.s-story__steps{list-style:none;padding:0;margin:0;position:relative;max-width:460px;min-height:220px}
/* D-6: start states exist only where scripting runs; without JS every step, quote and rule shows at its end state, and
   the story reads as the reduced-motion still */
.s-story__steps li{transition:opacity .6s,transform .8s var(--ease)}
@media (scripting:enabled){.s-story__steps li{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(30px)}}
@media (scripting:none){.s-story{height:auto}.s-story__stage{position:relative;height:auto;min-height:100vh}.s-story__steps{min-height:0}.s-story__steps li{margin-bottom:24px}}
.s-story__steps li.is-on{opacity:1;transform:none}
.s-story__steps span{font-family:var(--font-d);color:var(--accent);font-size:15px}
.s-story__steps h3{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.625rem,2.6vw,2.5rem);letter-spacing:-.02em;margin:8px 0 10px;line-height:1.05}
.s-story__steps p{margin:0;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.s-story__bar{width:min(460px,100%);height:2px;background:var(--line);margin-top:28px;border-radius:2px;overflow:hidden}
.s-story__bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--sp,0))}
/* gallery */
.s-gallery__rail{display:flex;gap:16px;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.s-gallery__rail::-webkit-scrollbar{display:none}
/* D-20 (K24): the hidden-bar rail has previous/next buttons and keyboard reach (focusable rail; arrows scroll it) */
.s-gallery__rail:active,.s-quotes__rail:active{cursor:grabbing}
/* the rail controls (gallery and reviews): a position mark (thumb = the visible share, moved by transform) and 44 px
   previous/next buttons; kept in place but hidden when everything fits (no layout shift) */
.s-rail__ctl{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px}
.s-rail__ctl.is-idle{visibility:hidden}
.s-rail__track{position:relative;flex:1;max-width:240px;height:2px;margin-right:auto;border-radius:2px;background:var(--line);overflow:hidden}
.s-rail__track i{position:absolute;inset:0 auto 0 0;width:var(--tw,30%);border-radius:inherit;background:var(--ink);transform:translateX(calc(var(--off,0) * 1%))}
.s-rail__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:border-color var(--dur-hover-out) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
.s-rail__btn:hover{border-color:var(--ink)}
.s-rail__btn[aria-disabled=true]{opacity:.35;cursor:default;border-color:var(--line)}
[data-hscroll] .s-rail__ctl{display:none}
@media (scripting:none){.s-rail__ctl{display:none}}
.s-gallery__item{flex:0 0 clamp(260px,34vw,520px);margin:0;scroll-snap-align:start;position:relative}
.s-gallery__item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);transition:transform 1.2s var(--ease)}
.s-gallery__item:nth-child(even) img{aspect-ratio:1/1;margin-top:60px}
.s-gallery__item.is-obj img{object-fit:contain;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,var(--surface)),var(--surface) 70%);padding:12%}
.s-gallery__item figcaption{margin-top:12px;font-size:1rem;color:var(--muted)}
[data-hscroll]{padding:0}
[data-hscroll] .s-gallery__pin{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:110px 0 60px}
[data-hscroll] .s-gallery__rail{overflow:visible;scroll-snap-type:none;width:max-content;will-change:transform;cursor:default}
[data-hscroll] .s-gallery__item{flex-basis:clamp(260px,30vw,460px)}
[data-hscroll] .s-head{margin-bottom:36px}
/* stats */
.s-stats{padding:clamp(60px,8vw,110px) 0;border-block:1px solid var(--line)}
.s-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.s-stat strong{display:block;font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(2.75rem,5.5vw,5.75rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.s-stat span{display:block;margin-top:12px;color:var(--muted);font-size:14px;max-width:24ch}
/* process */
.s-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px;position:relative}
.s-steps li{padding:28px 0 0;border-top:1px solid var(--line);position:relative}
.s-steps li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform-origin:left;transition:transform 1.4s var(--ease) calc(var(--delay,0ms) + 200ms)}
@media (scripting:enabled){.s-steps li::before{transform:scaleX(0)}}
.s-steps li.k-in::before{transform:none}
.s-steps__n{font-family:var(--font-d);font-size:clamp(2.5rem,4vw,4rem);color:transparent;-webkit-text-stroke:1px var(--accent);line-height:1}
.s-steps h3{font-family:var(--font-d);font-weight:var(--dw);font-size:24px;margin:16px 0 8px;letter-spacing:-.015em}
.s-steps p{margin:0;color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:1rem}
/* quotes */
/* User (2026-10-11): the reviews rail hides the native bar (no room kept for it) and gets the rail controls */
.s-quotes__rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,32vw,440px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.s-quotes__rail::-webkit-scrollbar{display:none}
.s-quote{margin:0;padding:32px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);scroll-snap-align:start;display:flex;flex-direction:column;gap:18px;position:relative}
.s-quote__mark{font-family:var(--font-a);font-size:80px;line-height:.6;color:var(--accent);height:30px}
.s-quote blockquote{margin:0;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.5}
.s-quote figcaption{margin-top:auto;display:grid;grid-template-columns:44px 1fr;gap:0 12px;align-items:center;font-size:14px}
.s-quote figcaption span:last-child{color:var(--muted);grid-column:2}
.s-avatar{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px}
/* pricing */
.s-toggle{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line);margin-bottom:28px;background:var(--surface)}
.s-toggle button{border:0;background:none;color:var(--muted);padding:10px 18px;border-radius:999px;font:600 14px var(--font-b);cursor:pointer}
.s-toggle button.is-on{background:var(--ink);color:var(--bg)}
.s-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;align-items:stretch}
.s-plan{padding:34px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.s-plan.is-featured{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface) 60%);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.s-plan h3{margin:0;font-size:18px}
/* K91: the featured plan's text label (build_site.mjs); the tint stays */
.s-plan .s-plan__badge{margin:0 0 -4px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent-small,var(--accent))}
.s-plan__price{margin:0;font-family:var(--font-d);font-size:clamp(2.5rem,4vw,3.75rem);letter-spacing:-.03em;line-height:1}
.s-plan__price small{font-family:var(--font-b);font-size:14px;color:var(--muted);margin-left:6px;letter-spacing:0}
.s-plan p{margin:0;color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:1rem}
.s-plan ul{list-style:none;padding:12px 0 0;margin:0 0 auto;border-top:1px solid var(--line);display:grid;gap:8px;font-size:1rem}
.s-plan li::before{content:"✓";color:var(--accent);margin-right:10px}
.s-plan .s-btn{justify-content:center;margin-top:18px}
/* faq */
.s-faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:start}
.s-faq__item{border-bottom:1px solid var(--line)}
.s-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:clamp(1.0625rem,1.4vw,1.3125rem);font-weight:500}
.s-faq__item summary::-webkit-details-marker{display:none}
.s-faq__item summary i{flex:none;width:22px;height:22px;position:relative}
.s-faq__item summary i::before,.s-faq__item summary i::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:1.5px;background:var(--accent);transition:transform .4s var(--ease)}
.s-faq__item summary i::after{transform:rotate(90deg)}
.s-faq__item[open] summary i::after{transform:rotate(0)}
.s-faq__item p{margin:0 0 24px;color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:62ch}
/* cta */
.s-cta__box{position:relative;border-radius:calc(var(--r) * 1.6);overflow:hidden;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;isolation:isolate}
.s-cta__bg{position:absolute;inset:0;z-index:-1}
.s-cta__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.s-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 35%,transparent))}
.s-cta__copy{padding:clamp(28px,5vw,72px);max-width:760px;position:relative;z-index:2}
.s-cta__obj{position:absolute;right:4%;top:8%;width:clamp(140px,22vw,340px);z-index:1}
.s-cta__obj img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));animation:s-bob 8s ease-in-out infinite}
/* footer */
.s-footer{padding:clamp(60px,9vw,120px) 0 36px;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
.s-footer__top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:56px}
.s-footer__brand{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(3rem,10vw,10.625rem);line-height:.85;letter-spacing:-.05em;margin:0}
.s-footer__note{color:var(--muted);max-width:32ch;margin:0}
.s-footer__cols{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:28px}
.s-footer h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.s-footer p,.s-footer ul{margin:0 0 6px;font-size:1rem;list-style:none;padding:0}
.s-footer a{text-decoration:none}.s-footer a:hover{color:var(--accent)}
.s-news label{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:600}
.s-news div{display:flex;gap:8px}
.s-news [hidden]{display:none}
.s-news input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:calc(var(--r) + 8px);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:max(16px,1rem) var(--font-b)}
.s-news .s-btn{--h:48px}
.s-news__msg{min-height:1.4em;font-size:1rem;color:var(--accent);margin-top:8px!important}
/* K10: a widget error stays beside its control until it is fixed (hidden, so it takes no space at rest) */
.w-err{margin:10px 0 0;font-size:1rem;font-weight:600;color:var(--error,var(--ink))}
/* K77: errors carry their own colour (--error, kept ≥ 30° of hue from the accent, build_site.mjs) and a mark, not colour alone */
.s-news__msg.is-err,.s-e2 .s-news__msg.is-err{color:var(--error,var(--ink))}
.w-err::before,.s-news__msg.is-err::before{content:"!";display:inline-grid;place-items:center;width:1.2em;height:1.2em;margin-right:.45em;border-radius:50%;background:var(--error,var(--ink));color:var(--bg);font-size:.8em;font-weight:800;line-height:1;vertical-align:.12em}
.w-err[hidden]{display:none}
.s-footer__legal{margin-top:56px!important;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---------------------------------------------------------------- widgets */
.s-widget{border-radius:calc(var(--r) * 1.4);border:1px solid var(--line);background:var(--surface);padding:clamp(18px,3vw,40px);position:relative;overflow:hidden}
.s-widget::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 65%);pointer-events:none}
.w-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(18px,3vw,40px);position:relative}
.w-steps{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.w-steps span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.w-steps span.is-on{background:var(--accent);color:var(--on-accent);border-color:transparent}
.w-steps span.is-done{color:var(--ink);border-color:var(--ink)}
.w-title{font-family:var(--font-d);font-size:clamp(1.375rem,2vw,1.875rem);margin:0 0 16px;font-weight:var(--dw);letter-spacing:-.02em}
.w-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.w-opt{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px;border-radius:calc(var(--r) * .8 + 4px);border:1px solid var(--line);background:var(--soft);display:flex;flex-direction:column;gap:4px;transition:border-color .25s,background .25s,transform .25s}
.w-opt:hover{border-color:var(--ink);transform:translateY(-2px)}
.w-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.w-opt.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
/* D-24 (K78): one selected style for options, days and times: an ink fill with ground-coloured text (as tabs and
   toggles); the builder's "in the box" state above is not a selection and keeps its tint */
.w-opt[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.w-opt[aria-pressed=true] small{color:color-mix(in srgb,var(--bg) 80%,transparent)}
.w-opt b{font-size:16px}.w-opt small{color:var(--muted);font-size:14px}
.w-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.w-day{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:10px 4px;border-radius:12px;border:1px solid var(--line);font-size:14px;line-height:1.3}
.w-day b{display:block;font-size:18px}
.w-day[disabled]{opacity:.3;cursor:not-allowed}
/* K12: a closed day says so in words */
.w-closed{display:block;font-size:12px}
.w-day[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:transparent}
.w-slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.w-slot{all:unset;cursor:pointer;padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px}
.w-slot[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.w-slot[disabled]{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.w-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.w-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.w-field.is-wide{grid-column:1/-1}
.w-field input,.w-field select,.w-field textarea{height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:max(16px,1rem) var(--font-b)}
.w-field textarea{height:90px;padding:12px 14px;resize:vertical}
.w-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.w-summary{border-radius:var(--r);background:var(--bg);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px;align-self:start;position:sticky;top:100px}
.w-summary h4{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.w-row{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.w-row span:first-child{color:var(--muted)}
.w-total{font-family:var(--font-d);font-size:clamp(2.25rem,3.6vw,3.5rem);letter-spacing:-.03em;line-height:1;margin:6px 0}
.w-note{font-size:1rem;color:var(--muted);margin:0}
.w-done{text-align:center;padding:30px 10px}
.w-done .w-check{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:28px;animation:w-pop .42s var(--ease-out) both}

.w-range{display:grid;gap:8px;margin-bottom:18px}
.w-range label{display:flex;justify-content:space-between;font-size:14px}
.w-range output{font-weight:600;color:var(--accent)}
input[type=range].w-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--line) var(--p,50%));outline-offset:6px}
input[type=range].w-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ink);border:4px solid var(--accent);cursor:grab}
input[type=range].w-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);border:4px solid var(--accent);cursor:grab}
.w-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;cursor:pointer}
.w-switch input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;transition:background var(--dur-micro) var(--ease-out);flex:none}
.w-switch input::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:transform var(--dur-micro) var(--ease-out)}
.w-switch input:checked{background:var(--accent)}.w-switch input:checked::after{transform:translateX(20px);background:var(--on-accent)}
.w-select{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.w-preview{position:relative;border-radius:var(--r);background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--accent) 28%,var(--bg)),var(--bg) 70%);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.w-preview img{width:76%;height:76%;object-fit:contain;transition:filter .6s var(--ease),transform .8s var(--ease);filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
.w-swatch{position:relative;width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;box-shadow:inset 0 0 0 3px var(--surface);transition:scale var(--dur-micro) var(--ease-back)}
/* K19: the picked swatch is marked by size and a check mark, not by its border colour alone (kit swatches() scale) */
.w-swatch[aria-pressed=true]{border-color:var(--ink);scale:1.16}
.w-swatch[aria-pressed=true]::after{content:"\2713";position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 12px/18px var(--font-b);text-align:center}
.w-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.w-tab{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:14px}
.w-tab[aria-selected=true],.w-tab[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:transparent}
/* all:unset strips the focus ring from these controls: give keyboard users a visible one back */
.w-tab:focus-visible,.w-day:focus-visible,.w-slot:focus-visible,.w-pin:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.w-list{display:grid;gap:0}
.w-item{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line);animation:w-in .5s var(--ease) both}
@keyframes w-in{from{opacity:0;transform:translateY(10px)}}
.w-item b{font-size:17px}.w-item p{grid-column:1;margin:0;color:var(--muted);font-size:1rem}
.w-item .w-price{font-family:var(--font-d);font-size:20px;color:var(--accent);grid-row:span 2;align-self:center}
.w-tags{display:flex;gap:4px 14px;flex-wrap:wrap;grid-column:1}
/* D-22 (K36): menu tags are flat text; the tag filter buttons above the list are the controls */
.w-tags span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.w-search{width:100%;height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:max(16px,1rem) var(--font-b);margin-bottom:16px}
/* K14: a visible label above the menu search (the placeholder is only an example) */
.w-lab{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0}
.w-lab .w-search{display:block;margin-top:8px}
/* K14: the countdown waitlist field sits inside its visible label; the button stays beside it */
.s-news .w-wait__row{align-items:end}
.s-news .w-wait__field{flex:1;min-width:0;display:grid;gap:10px;margin:0;text-align:left}
.s-news .w-wait__field input{width:100%}
.w-quiz{max-width:760px;margin:0 auto;text-align:center}
.w-quiz .w-opts{margin-top:20px}
.w-progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:28px}
/* K95: a full-width bar revealed by clip-path from the last value to the new one (no width animation) */
.w-progress i{display:block;height:100%;width:100%;background:var(--accent);clip-path:inset(0 calc(100% - var(--to,0%)) 0 0);animation:w-prog var(--dur-panel) var(--ease-out) both}
@keyframes w-prog{from{clip-path:inset(0 calc(100% - var(--from,0%)) 0 0)}}
.w-result{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;text-align:left}
.w-result img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--r);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 25%,var(--bg)),var(--bg) 70%)}
.w-map{position:relative;aspect-ratio:16/10;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);overflow:hidden}
.w-map svg{position:absolute;inset:0;width:100%;height:100%}
.w-pin{all:unset;position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent);cursor:pointer;transition:transform .3s var(--ease)}
.w-pin[aria-pressed=true]{transform:scale(1.4);background:var(--ink)}
.w-pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent)}
/* K71: the ping is a ring that scales out and fades (transform + opacity on its own pseudo-element), not a box-shadow */
.w-pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:w-ping 2.4s var(--ease-out) infinite}
@keyframes w-ping{from{transform:scale(1);opacity:.9}to{transform:scale(2.2);opacity:0}}
.w-count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}
.w-count div{border-radius:var(--r);background:var(--bg);border:1px solid var(--line);padding:18px 8px;text-align:center}
.w-count b{display:block;font-family:var(--font-d);font-size:clamp(2.125rem,4vw,4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.w-count span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.w-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:14px}
.w-card{border-radius:var(--r);overflow:hidden;background:var(--bg);border:1px solid var(--line);animation:w-in .5s var(--ease) both}
.w-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.w-card img.w-card__object{object-fit:contain;padding:18px;background:var(--soft)}
.w-remove{border:1px solid var(--line);border-radius:50%;width:30px;height:30px;color:var(--ink);background:var(--surface);cursor:pointer;font:18px/1 var(--font-b);margin-left:6px}
.w-card div{padding:16px}.w-card b{display:block;font-size:17px}.w-card span{font-size:13.5px;color:var(--muted)}
.w-card .w-price{float:right;color:var(--accent);font-weight:600}
.w-timeline{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:0}
.w-timeline li{display:grid;grid-template-columns:28px 1fr;gap:4px 14px;padding:0 0 22px;position:relative;opacity:.4;transition:opacity .5s}
.w-timeline li.is-done,.w-timeline li.is-now{opacity:1}
.w-timeline li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line);margin-top:4px;grid-row:span 2;background:var(--bg)}
.w-timeline li.is-done::before{background:var(--accent);border-color:var(--accent)}
.w-timeline li.is-now::before{border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent)}
.w-timeline li::after{content:"";position:absolute;left:8px;top:22px;bottom:2px;width:1px;background:var(--line)}
.w-timeline li:last-child::after{display:none}
.w-timeline p{margin:0;color:var(--muted);font-size:1rem}
.w-chart:not([data-widget]){position:relative;height:280px}
.w-chart svg{width:100%;height:100%;overflow:visible}
.w-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;margin-bottom:18px}
.w-kpi{border-radius:var(--r);background:var(--bg);border:1px solid var(--line);padding:16px}
.w-kpi b{display:block;font-family:var(--font-d);font-size:30px;letter-spacing:-.02em}
.w-kpi span{font-size:13px;color:var(--muted)}.w-kpi em{font-style:normal;color:var(--accent);font-size:13px;margin-left:6px}
.w-basket{display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
.w-basket span{font-size:12.5px;padding:6px 10px;border-radius:999px;background:var(--soft)}
.w-table{display:grid;gap:8px}
.w-session{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);animation:w-in .5s var(--ease) both}
.w-session time{font-family:var(--font-d);font-size:20px}
.w-session small{display:block;color:var(--muted);font-size:13px}
.w-session .s-btn{--h:44px;padding:0 14px;font-size:14px}
.w-toast{position:fixed;left:50%;bottom:24px;z-index:300;transform:translate(-50%,140%);background:var(--ink);color:var(--bg);padding:14px 20px;border-radius:999px;font-size:14px;font-weight:600;transition:transform .5s var(--ease);max-width:calc(100vw - 32px)}
.w-toast.is-on{transform:translate(-50%,0)}

/* ---------------------------------------------------------------- intro curtain */
.s-curtain{position:fixed;inset:0;z-index:500;background:var(--bg);display:grid;place-items:center;pointer-events:none;transition:clip-path 1s var(--ease) .1s;clip-path:inset(0 0 0 0)}
.s-curtain span{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(2.5rem,8vw,7.5rem);letter-spacing:-.04em;overflow:hidden;display:block}
.s-curtain span i{display:inline-block;font-style:normal;transform:translateY(110%);animation:s-rise .8s var(--ease) forwards;animation-delay:calc(var(--i) * 35ms)}
@keyframes s-rise{to{transform:none}}
.s-curtain.is-out{clip-path:inset(0 0 100% 0)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .s-nav__links{display:none}.s-burger{display:block}.s-nav .s-btn--sm{display:none}
  .s-hero__grid,.s-feature__grid,.s-faq__grid,.w-grid,.s-hero__edgrid{grid-template-columns:1fr}
  .s-hero__row{grid-template-columns:1fr}
  .s-hero__frame{max-width:520px;width:100%;justify-self:center}
  .s-stats__grid{grid-template-columns:repeat(2,1fr)}
  .s-footer__cols{grid-template-columns:1fr 1fr}
  .s-bento{grid-template-columns:repeat(2,1fr)}
  .w-summary{position:static}
  .s-hero__tall{aspect-ratio:4/3}
}
@media (max-width:760px){
  .s-cards,.s-cards--4,.s-cards--2{--cols:1}
  .s-hero__low{grid-template-columns:1fr}
  .s-float--a{left:-4%;width:40%}
  .s-float--b{display:none}
  .s-h1--giant{font-size:clamp(2.5rem,calc(170vw / var(--gl,10)),6rem)}
  .s-hero--depth .s-hero__back{align-items:flex-start;padding-top:16vh}
  .s-depth__stage{height:62svh;min-height:380px}
  .s-tile--copy,.s-tile--media{grid-column:1/-1}
  .s-bento{grid-auto-rows:minmax(150px,auto)}
  .s-tile--media{min-height:260px}
  .s-footer__cols{grid-template-columns:1fr}
  .w-form{grid-template-columns:1fr}
  .w-result{grid-template-columns:1fr}
  .w-days{grid-template-columns:repeat(4,1fr)}
  .s-cta__obj{width:120px;top:4%;right:2%}
  .s-gallery__item:nth-child(even) img{margin-top:0}
  .s-scrollcue{display:none}
  .s-scrim--bottom{background:linear-gradient(to top,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 55%,color-mix(in srgb,var(--bg) 35%,transparent) 100%)}
  .s-story__shade{background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 20%,color-mix(in srgb,var(--bg) 40%,transparent))}
  .s-story__text{justify-content:flex-end;padding-bottom:12vh}
  .s-hero__edtop{flex-direction:column;align-items:flex-start}.s-issue{text-align:left}
  .s-wordmark{margin-top:4vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .s-story{height:auto}.s-story__stage{position:relative;height:auto;min-height:100vh}
  .s-story__steps{min-height:0}.s-story__steps li{position:relative;opacity:1;transform:none;margin-bottom:24px}
  .s-manifesto__text .s-w{opacity:1}
  [data-hscroll] .s-gallery__pin{position:relative;min-height:0}
  [data-hscroll] .s-gallery__rail{overflow-x:auto;width:auto}
}

/* ---------------------------------------------------------------- services: rows variant */
.s-rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
/* D-22 (K35, K39): a row is not a link: no arrow, no hover tint, no hover shift (so no padding animation); the
   01-06 column exists only when the system owns numerals (.s-row--n). The picture beside the pointer stays. */
.s-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 28px;align-items:center;padding:clamp(22px,2.6vw,36px) 0;border-bottom:1px solid var(--line);cursor:default}
.s-row--n{grid-template-columns:64px minmax(0,1fr) auto auto}
.s-row__n{font-family:var(--font-d);color:var(--accent);font-size:15px}
.s-row h3{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.625rem,3.2vw,3.125rem);line-height:1;letter-spacing:-.03em;margin:0}
.s-row p{margin:8px 0 0;color:color-mix(in srgb,var(--ink) 72%,transparent);font-size:1rem;max-width:60ch}
.s-row__price{font-weight:600;white-space:nowrap;grid-column:-2}
.s-rows__float{position:fixed;left:0;top:0;width:clamp(200px,20vw,320px);aspect-ratio:4/5;pointer-events:none;z-index:60;border-radius:var(--r);overflow:hidden;opacity:0;transform:scale(.85);transition:opacity .35s,transform .45s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.s-rows__float.is-on{opacity:1;transform:scale(1)}
.s-rows__float img{width:100%;height:100%;object-fit:cover;background:var(--surface)}
.s-rows__float.is-obj img{object-fit:contain;padding:12%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,var(--surface)),var(--surface) 70%)}
@media (max-width:760px){.s-row{grid-template-columns:minmax(0,1fr);gap:6px 14px}.s-row--n{grid-template-columns:40px minmax(0,1fr)}.s-row .s-chip{display:none}.s-row__price{grid-column:1}.s-row--n .s-row__price{grid-column:2}.s-rows__float{display:none}}
/* ---------------------------------------------------------------- testimonials: spotlight variant */
.s-spot{position:relative;display:grid;min-height:clamp(260px,30vw,380px);align-items:center}
.s-spot__q{margin:0;transition:opacity var(--dur-panel) var(--ease-out),transform var(--dur-panel) var(--ease-out)}
@media (scripting:enabled){.s-spot__q{grid-area:1/1;opacity:0;transform:translateY(24px);pointer-events:none}}
@media (scripting:none){.s-spot{gap:40px}.s-spot__nav{display:none}}
.s-spot__q.is-on{opacity:1;transform:none;pointer-events:auto}
.s-spot__q blockquote{margin:0;font-family:var(--font-a);font-size:clamp(1.75rem,3.8vw,3.875rem);line-height:1.12;letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.s-spot__q figcaption{margin-top:28px;color:var(--muted);font-size:1rem}
.s-spot__q figcaption b{color:var(--ink)}
.s-spot__q figcaption > span{display:block;margin-top:4px}
/* D-25 (K80): 44 px arrows and an "n of N" count beside the bars */
.s-spot__nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:36px}
.s-spot__arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:border-color var(--dur-hover-out) var(--ease-out)}
.s-spot__arrow:hover{border-color:var(--ink)}
.s-spot__count{margin:0;min-width:4.5em;text-align:center;font-size:14px;font-variant-numeric:tabular-nums;color:var(--muted)}
.s-spot__dots{display:flex;gap:10px;margin-left:10px}
.s-spot__dots button{width:44px;height:28px;border:0;background:none;cursor:pointer;padding:0;display:grid;align-items:center}
.s-spot__dots i{display:block;height:3px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.s-spot__dots i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
.s-spot__dots button[aria-pressed=true] i::after{animation:s-dotfill 6s linear forwards}
@keyframes s-dotfill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.s-spot__dots button[aria-pressed=true] i::after{animation:none;transform:scaleX(1)}}
.s-stats--band{background:var(--accent);color:var(--on-accent);border:0}
.s-stats--band .s-stat strong{color:var(--on-accent)}
.s-stats--band .s-stat span{color:color-mix(in srgb,var(--on-accent) 72%,transparent)}

/* ================================================================ engine 2 (html.s-e2, factory/build_site.mjs)
   The renderer emits labels, eyebrows, meta rows and headline accents only when the design system owns them
   (systems.css styles the owned variants); everything else is plain and sentence case, and nothing on the page idles
   (no pulsing dots, no endless cue loops on UI chrome). Older builds without .s-e2 keep their look until rebuilt. */
.s-e2 [data-reveal=lines]{--line-k:1}
.s-e2 .s-h2[data-reveal=lines]{--stagger:90ms}
.s-e2 [data-reveal=chars]:not(.k-in) .k-char{filter:none}
/* diversity pass reveal vocabularies (build_site.mjs REVEALS): no blur in word reveals; scale starts at .96 */
.s-e2 [data-reveal=words]:not(.k-in) .k-word{filter:none}
.s-e2 .k-ready [data-reveal=scale]:not(.k-in),.s-e2.k-ready [data-reveal=scale]:not(.k-in){transform:scale(.96)}
.s-e2 .s-accent{font:inherit;color:inherit;letter-spacing:inherit}
.s-e2 .s-label{font-size:15px;line-height:1.4;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted);margin:0 0 14px}
.s-e2 .s-dot{animation:none}
.s-e2 .s-scrollcue span{animation-iteration-count:3}
.s-e2 .s-feature__stage::after{animation:none}
.s-e2 .w-pin::before{animation:none}
.s-e2 .w-pin[aria-pressed=true]::before{animation:w-ping 1.2s var(--ease-out) 1}
.s-e2 .s-cta__obj img{animation:none}
.s-e2 .s-spot__dots button[aria-pressed=true] i::after{animation:none;transform:scaleX(1)}
/* small accent-coloured text uses the 4.5:1 variant (--accent-small, build_site.mjs) */
.s-e2 .s-card__n,.s-e2 .s-story__steps span,.s-e2 .s-news__msg,.s-e2 .w-range output,.s-e2 .w-item .w-price,.s-e2 .w-card .w-price,.s-e2 .w-kpi em,.s-e2 .s-row__n,.s-e2 .s-phone__row i,.s-e2 .w-tag,.s-e2 .s-points li::before{color:var(--accent-small,var(--accent))}
.s-e2 .s-chip{font-size:12.5px;letter-spacing:0;text-transform:none}
.s-e2 .w-steps span{font-size:13px;letter-spacing:0;text-transform:none}
.s-e2 .w-summary h4{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.s-e2 .w-count span{font-size:13px;letter-spacing:0;text-transform:none}
.s-e2 .w-tags span{font-size:12px;letter-spacing:0;text-transform:none}
.s-e2 .s-footer h3,.s-e2 .s-news label{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.s-e2 .s-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
/* D-19: links inside running text are underlined (colour alone does not mark a link); nav, menu and buttons keep none */
.s-e2 p a:not(.s-btn),.s-e2 li a:not(.s-btn){text-decoration:underline;text-decoration-thickness:max(1px,.06em);text-underline-offset:.15em}
.w-facts{display:flex;flex-wrap:wrap;gap:2px 14px}
/* content strings split into pieces (widgets.js / build_site.mjs bits()): spacing, not separator glyphs */
.s-bits{display:inline-flex;flex-wrap:wrap;column-gap:.9em;row-gap:0}
.w-pick{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px}
.s-phone-wrap{justify-self:center}
.s-tile__tilt{width:100%;height:100%;display:grid;place-items:center}
.w-tag{color:var(--accent-text,var(--accent));margin-left:8px}
/* hero: kept facts are plain lines (no bullets, no tracking); the headline carries the hero */
.s-e2 .s-facts{margin:20px 0 0;font-size:15px;line-height:1.45;color:color-mix(in srgb,var(--ink) 74%,transparent);text-wrap:balance}
.s-e2 .s-facts span{display:block}
.s-e2 .s-hero__center .s-facts{text-align:center}
.s-e2 .s-hero__say{max-width:60ch}
.s-e2 .s-hero__say .s-sub{margin-top:26px}
.s-e2 .s-hero--cinematic .s-h1{max-width:14ch;font-size:clamp(2.875rem,8vw,8.5rem)}
.s-e2 .s-hero--cinematic .s-hero__inner{padding-bottom:clamp(48px,9vh,110px)}
.s-e2 .s-hero__center .s-h1{font-size:clamp(2.875rem,9vw,9rem)}
.s-e2 .s-hero--app .s-h1{font-size:clamp(2.875rem,8.2vw,8.5rem)}
.s-e2 .s-hero__center .s-ctas{margin-top:34px}
.s-e2 .s-hero--split .s-h1{font-size:clamp(2.75rem,6.6vw,6.875rem)}
.s-e2 .s-hero--split .s-hero__copy,.s-e2 .s-hero--app .s-hero__copy{padding-top:clamp(0px,4vh,40px)}
/* wordmark: without an eyebrow the row is headline | sub + actions */
.s-e2 .s-hero__row--two{grid-template-columns:1.25fr 1fr;gap:20px clamp(28px,5vw,80px)}
.s-e2 .s-hero__row--two .s-h1{font-size:clamp(2.125rem,4.4vw,4.5rem);max-width:16ch}
/* editorial: the top rule carries the brand line, facts sit at its right end */
.s-e2 .s-hero__edtop--plain{align-items:flex-end}
.s-e2 .s-hero__edtop--plain .s-issue{text-align:left;font-family:var(--font-b);font-style:normal;font-size:17px;color:var(--ink)}
.s-e2 .s-hero__edtop .s-facts{margin:0;text-align:right;font-size:14px}
/* bento: the brand line tile replaces the stat tile */
.s-tile--note{padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;background:var(--accent);color:var(--on-accent);border:0}
.s-tile--note p{margin:0;font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.25rem,1.9vw,1.875rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.s-tile--note span{display:block;font-size:14px;line-height:1.35;font-weight:500}
.s-e2 .s-steps__n{color:var(--accent-text,var(--accent));-webkit-text-stroke:0}
.s-e2 .w-note{font-size:1rem}
.s-e2 .s-nav__links a{color:color-mix(in srgb,var(--ink) 90%,transparent)}
.s-e2 .s-plan.is-featured .s-plan__price small{color:color-mix(in srgb,var(--ink) 82%,transparent)}
.s-e2 .s-footer__legal,.s-e2 .s-footer__note{color:color-mix(in srgb,var(--ink) 78%,transparent)}
@media (max-width:1000px){.s-e2 .s-hero__row--two{grid-template-columns:1fr}}
@media (max-width:760px){
  .s-e2 .s-scrim--left{background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 86%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,color-mix(in srgb,var(--bg) 88%,transparent) 100%)}
  .s-e2 .s-hero__edtop--plain{align-items:flex-start}
  .s-e2 .s-hero__edtop .s-facts{text-align:left}
  .s-e2 .s-hero--cinematic .s-h1,.s-e2 .s-hero__center .s-h1{font-size:clamp(2.625rem,11.5vw,4rem)}
}
/* isolation preview (?only=…, site.js isolate): one section in place, or one widget on a bare page */
.s-only .s-only-host{display:block;max-width:var(--max);margin:0 auto;padding:clamp(24px,6vw,72px) var(--gut)}
.s-only main > section:first-child:not(.s-hero){padding-top:clamp(48px,8vw,96px)}
/* stats.chart figures (build_site statItem + site.js charts(), drawn by kit/fx/data.js) */
.s-stat__chart{--chart-accent:var(--accent);--chart-ink:var(--ink);--chart-dot:var(--accent);--chart-track:color-mix(in srgb,var(--ink) 12%,transparent);--picto-on:var(--accent);--picto-off:color-mix(in srgb,var(--ink) 14%,transparent);display:grid;gap:12px;justify-items:start}
.s-stats--ring .s-stat__chart{width:min(132px,40vw);justify-items:center;position:relative}
.s-stats--ring .s-stat__chart [data-chart-value]{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(1.375rem,2.4vw,2rem)}
.s-stats--bars .s-stat__chart{width:100%}
.s-stats--pictograph .s-stat__chart{--picto-size:14px;--picto-gap:6px}
/* widget states (C54, motion-tokens.md -> Widget states): success pops .9 -> 1.07 -> 1 and draws its check; errors
   shake (widgets.js shake) and ring; disabled 55 %; focus rings grow in; threshold pips spring in; transfer ghost */
@keyframes w-pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.07);opacity:1}100%{transform:scale(1)}}
.w-check svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.w-check svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:w-draw var(--dur-small) var(--ease-out) .18s forwards}
@keyframes w-draw{to{stroke-dashoffset:0}}
.is-error{outline:2px solid var(--error,color-mix(in srgb,#d64545 80%,var(--ink)));outline-offset:4px;transition:outline-color var(--dur-panel) var(--ease-out)}
.s-widget :focus-visible{animation:w-ring var(--dur-micro) var(--ease-out)}
@keyframes w-ring{from{outline-offset:0;outline-color:transparent}}
.w-ghost{position:fixed;z-index:160;pointer-events:none;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 40%,transparent)}
.w-pips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.w-pips i{width:12px;height:12px;border-radius:3px;background:var(--accent);opacity:.22;transform:scale(.9);transition:transform var(--dur-small) var(--ease-back),opacity var(--dur-micro) var(--ease-out)}
.w-pips i.is-on{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.w-done .w-check,.w-check svg path,.s-widget :focus-visible{animation:none}.w-check svg path{stroke-dashoffset:0}.w-pips i,.w-swatch{transition:none}}

/* ================================================================ diversity pass: closing CTA and footer lockups
   (brief engine.cta / engine.footer, build_site.mjs). Same facts in every variant; only the arrangement changes. */
.s-cta__split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.s-cta__split .s-cta__copy{padding:0;max-width:none}
.s-cta__frame{margin:0;position:relative;border-radius:calc(var(--r) * 1.2);overflow:hidden;aspect-ratio:4/5;max-height:72vh;justify-self:end;width:100%}
.s-cta__frame img{width:100%;height:100%;object-fit:cover}
.s-cta--band{background:var(--surface);border-block:1px solid var(--line)}
.s-cta__band{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:end}
.s-cta__band .s-lead{margin-top:0}
.s-footer__name{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.375rem,2vw,1.75rem);letter-spacing:-.02em;line-height:1.05;margin:0}
.s-footer__split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px clamp(28px,5vw,80px);align-items:end}
.s-footer__reach{display:grid;gap:18px;align-content:end}
.s-footer__big{display:grid;gap:4px}
.s-footer__big a{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.75rem,3.4vw,3.5rem);line-height:1.05;letter-spacing:-.025em;text-decoration:none;overflow-wrap:anywhere}
.s-footer__big a:hover{color:var(--accent)}
.s-footer__aside{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.s-footer__aside .s-news{grid-column:1/-1}
.s-footer__split .s-footer__legal{grid-column:1/-1;margin-top:16px!important}
.s-footer__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 28px;margin-bottom:28px}
.s-footer__index{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));column-gap:28px;border-top:1px solid var(--line);margin-bottom:48px}
.s-footer__index a{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(1.5rem,2.6vw,2.5rem);letter-spacing:-.02em;line-height:1.1;text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line)}
.s-footer__index a:hover{color:var(--accent)}
.s-footer__cols--3{grid-template-columns:repeat(3,1fr)}
.s-footer__letters{margin-top:40px;max-width:560px}
.s-footer__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;padding-bottom:20px}
.s-footer__line .s-footer__name{margin-right:auto}
.s-footer__facts,.s-footer__reachline{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0!important}
.s-footer__social{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:0;padding:0}
.s-footer__line-extra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 32px;align-items:end;padding-top:20px}
.s-footer--line .s-footer__legal{margin-top:20px!important}
.s-footer__lead{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.s-footer__lead .s-news{display:grid;grid-template-columns:1fr minmax(0,1fr);gap:16px clamp(24px,4vw,64px);align-items:end}
.s-e2 .s-footer__lead .s-news label{font-family:var(--font-d);font-weight:var(--dw);font-size:clamp(2rem,4.4vw,4.25rem);line-height:1;letter-spacing:-.03em;margin:0;color:var(--ink)}
.s-footer__lead .s-news__msg{grid-column:2}
.s-footer__sign{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:40px}
@media (max-width:1000px){.s-footer__cols--3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.s-cta__split,.s-cta__band,.s-footer__split,.s-footer__aside,.s-footer__lead .s-news,.s-footer__cols--3,.s-footer__line-extra{grid-template-columns:1fr}.s-cta__frame{justify-self:stretch;aspect-ratio:4/3}.s-footer__lead .s-news__msg{grid-column:auto}.s-footer__line .s-footer__name{margin-right:0;width:100%}}