/* =========================================================
   FoundSignal — stylesheet (v3)
   Calm, airy, typographic. One family (Plus Jakarta Sans) at regular weight and large sizes;
   grey imagery; orange only for signals. Left-aligned throughout, including phones.
   1. Tokens & base   2. Nav & menu   3. Hero   4. Clients   5. Services   6. Projects
   7. How we work     8. Focus        9. About  10. People   11. Insights  12. Challenges
   13. Contact footer 14. Dialog      15. Intro 16. Reveals  17. Reduced motion
   ========================================================= */

/* 1. Tokens & base ---------------------------------------- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(assets/fonts/jakarta-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(assets/fonts/jakarta-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ink:#141414;
  --ink-2:#4a4a4a;
  --muted:#8c8c8c;
  --pale:#cfcfcf;
  --line:#e9e9e9;
  --paper:#fff;
  --paper-soft:#f7f7f7;
  --grey-img:#dadada;
  --dark:#141516;
  --chip:#f2f2f2;
  --signal:#ff7904;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --radius:0;
  --radius-lg:0;
  --shadow-lift:0 1px 2px rgba(0,0,0,.04),0 16px 36px -12px rgba(0,0,0,.12);
  --shadow-stack:0 1px 2px rgba(0,0,0,.05),0 22px 48px -16px rgba(0,0,0,.16);
  --shadow-float:0 2px 6px rgba(0,0,0,.05),0 32px 72px -16px rgba(0,0,0,.22);
  /* Type scale, all regular weight */
  --t-hero:clamp(38px,min(4vw,7.2vh),64px);
  --t-h2:clamp(28px,calc(1.2vw + 23px),40px);
  --t-statement:clamp(28px,calc(1.2vw + 23px),40px);
  --t-row:clamp(22px,calc(.6vw + 19.5px),28px);   /* project names */
  --t-row-s:clamp(20px,calc(.4vw + 18.5px),24px);  /* focus rows */
  --t-row-xs:clamp(18px,calc(.2vw + 17px),20px); /* also-work-in rows */
  --t-card:clamp(20px,calc(.4vw + 18.5px),24px);   /* card titles */
  --t-lead:clamp(18px,1.55vw,22px);
  /* Air */
  --gutter:64px;
  --section-y:240px;
  --head-gap:112px;
  --max:1392px; /* content width; with 64px margins the layout tops out at 1520px */
}
@media(max-width:1199px){:root{--gutter:40px;--section-y:160px;--head-gap:96px}}
@media(max-width:767px){:root{--gutter:24px;--section-y:120px;--head-gap:72px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html.menu-open{overflow:hidden}
body{margin:0;color:var(--ink);background:var(--paper);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:400}
a{color:inherit}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--signal);outline-offset:6px}
.skip-link{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;text-decoration:none;font-size:14px;transition:top .2s}
.skip-link:not(:focus){clip-path:inset(50%);opacity:0}
.skip-link:focus{top:16px}

.section{padding:var(--section-y) var(--gutter)}
.section-inner{max-width:var(--max);margin:0 auto}
.label{margin:0 0 28px;font-size:18px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.section-heading{margin:0;max-width:18ch;font:400 var(--t-h2)/1.06 var(--font);letter-spacing:-.03em;text-wrap:balance}
.statement{margin:0;max-width:18ch;font:400 var(--t-statement)/1.1 var(--font);letter-spacing:-.03em;text-wrap:balance}

/* Images are always grey: placeholders are flat grey, real images render in greyscale. */
.about-photo img,.person__photo img,.logo-box img{filter:grayscale(1)}

/* Outlined pill: the one button shape on the site. */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1.5px solid var(--ink);border-radius:99px;background:transparent;color:var(--ink);font-size:17px;line-height:1;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.pill:hover{background:var(--ink);color:#fff}
.pill--solid{background:var(--ink);color:#fff}
.pill--solid:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.pill:disabled{opacity:.42;cursor:not-allowed}
.pill:disabled:hover{background:transparent;color:var(--ink)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:99px;background:var(--ink);color:#fff;font-size:16px;line-height:1;cursor:pointer;text-decoration:none;transition:background-color .2s}
.cta:hover{background:var(--signal);color:var(--ink)}

/* Generated artwork (signal-art.js). Linework fades in on view; the orange signal arrives last. */
[data-art] svg{display:block;width:100%;height:100%}
.lineart .art-lines{opacity:0;transition:opacity .8s ease}
.lineart .art-signal{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.7);transition:opacity .5s ease .5s,transform .8s var(--ease-out) .5s}
.lineart .art-glow{opacity:0;transition:opacity 1.4s ease .8s}
.lineart.is-drawn .art-lines,.lineart.is-drawn .art-signal,.lineart.is-drawn .art-glow{opacity:1;transform:none}

/* 2. Nav & menu -------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;mix-blend-mode:difference;color:#fff;height:88px;padding:0 max(var(--gutter),calc((100% - var(--max)) / 2));display:flex;align-items:center;justify-content:space-between;transition:transform 300ms ease,background-color 300ms ease}
/* No background: the nav is drawn in white with mix-blend-mode:difference, so it reads black over
   light sections and white over dark ones (Insights, footer). */
.nav .brand img{filter:invert(1)}
.nav.nav-scroll-hidden{transform:translateY(-100%);visibility:hidden;transition:transform 300ms ease,visibility 300ms}
.brand{display:block;width:182px;height:23px}
.brand img{display:block}
.menu-toggle{min-height:44px;padding:0 22px;background:transparent;border-color:#fff;color:#fff}
.menu-toggle:hover{background:#fff;color:#000}
.site-menu{position:fixed;inset:0;z-index:55;background:var(--paper);padding:140px var(--gutter) 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.site-menu[hidden]{display:none}
.site-menu__links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.site-menu__links a{font-size:clamp(44px,7vw,104px);line-height:1.08;letter-spacing:-.04em;text-decoration:none;transition:color .3s ease;animation:menu-in 700ms var(--ease-out) both}
.site-menu__links a:nth-child(2){animation-delay:50ms}.site-menu__links a:nth-child(3){animation-delay:100ms}.site-menu__links a:nth-child(4){animation-delay:150ms}.site-menu__links a:nth-child(5){animation-delay:200ms}
.site-menu__links:hover a{color:var(--pale)}
.site-menu__links a:hover,.site-menu__links a:focus-visible{color:var(--ink)}
.site-menu__foot{margin:48px 0 0;font-size:15px;color:var(--muted)}
@keyframes menu-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(max-width:767px){.nav{height:72px}.brand,.brand img{width:150px;height:auto}.menu-toggle{min-height:40px;padding:0 18px;font-size:16px}.site-menu{padding-top:112px}}

/* 3. Hero -------------------------------------------------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden}
.sphere-stage{position:absolute;left:min(74%,calc(50% + var(--max) * .24));top:46%;transform:translate(-50%,-50%);width:min(84vh,50vw,760px);height:min(84vh,50vw,760px);cursor:grab;touch-action:pan-y}
.sphere-stage.dragging{cursor:grabbing}
.sphere-stage canvas{position:absolute;inset:0;width:100%;height:100%}
#fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
#fallback svg{width:89%;height:89%}
.hero-copy{position:absolute;z-index:2;left:max(var(--gutter),calc((100% - var(--max)) / 2));right:50%;bottom:clamp(56px,9vh,104px);pointer-events:none}
.hero-copy:before{content:none}
.hero-copy h1{margin:0;max-width:16ch;font:400 var(--t-hero)/1.12 var(--font);letter-spacing:-.03em;text-wrap:balance}
.hero-foot{display:flex;align-items:center;gap:32px;margin-top:40px;flex-wrap:wrap}
.hero-description{margin:0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--ink-2)}
.hero-cta{pointer-events:auto;background:rgba(255,255,255,.7)}
.scroll-cue{position:absolute;z-index:2;right:max(var(--gutter),calc((100% - var(--max)) / 2));bottom:clamp(56px,9vh,104px);display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);text-decoration:none}
.scroll-cue i{position:relative;display:block;width:1px;height:56px;background:var(--pale);overflow:hidden}
.scroll-cue i:after{content:'';position:absolute;left:-2px;top:-6px;width:5px;height:5px;border-radius:50%;background:var(--signal);animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(62px);opacity:0}}
@media(max-width:1199px){
  .hero{height:auto;min-height:0;display:flex;flex-direction:column;padding:96px var(--gutter) 48px;overflow:visible}
  .sphere-stage{position:relative;left:auto;top:auto;transform:none;flex:none;width:min(calc(100% + 2 * var(--gutter)),640px);height:auto;aspect-ratio:1;margin:0 auto 0 calc(-1 * var(--gutter))}
  .hero-copy{position:relative;left:auto;right:auto;bottom:auto;margin-top:8px}
  .hero-copy h1{font-size:48px;max-width:18ch}
  .scroll-cue{position:relative;right:auto;left:auto;bottom:auto;align-self:flex-start;margin-top:56px;flex-direction:row}
  .scroll-cue i{width:40px;height:1px}
  .scroll-cue i:after{top:-2px;left:-6px;animation-name:cue-x}
}
@media(min-width:768px) and (max-width:1199px){.sphere-stage{width:min(100%,600px);margin:0 auto}}
@media(max-width:767px){
  .hero{padding-top:72px;padding-bottom:40px}
  .hero-copy h1{font-size:38px;line-height:1.14}
  .hero-foot{margin-top:24px;gap:20px;flex-direction:column;align-items:flex-start}
  .hero-description{font-size:16px}
  .scroll-cue{margin-top:44px}
}
@media(max-width:360px){.hero-copy h1{font-size:34px}}
@keyframes cue-x{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(46px);opacity:0}}

/* 4. Clients: logo marquee (grey boxes until the logo files arrive) */
.clients{padding:120px 0 0}
.clients .label{padding:0 var(--gutter);max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto 32px;color:var(--muted)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:20px;width:max-content;margin:0;padding:0;list-style:none;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.logo-box{flex:none;width:176px;height:80px;border-radius:var(--radius);background:var(--chip);display:flex;align-items:center;justify-content:center}
.logo-box img{max-width:70%;max-height:44%;opacity:.7}
@keyframes marquee{to{transform:translateX(calc(-50% - 10px))}}
@media(max-width:767px){.clients{padding-top:88px}.logo-box{width:128px;height:60px}.marquee__track{gap:14px;animation-duration:34s}}

/* 5. Services ---------------------------------------------- */
.services-section .section-heading{margin-bottom:var(--head-gap)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.service-card{position:relative;min-width:0;padding:36px;display:flex;flex-direction:column;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.service-card h3{position:relative;margin:0;padding:4px 0 4px 22px;font:400 var(--t-card)/1.18 var(--font);letter-spacing:-.02em}
.service-card h3:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:20px;background:var(--service-accent);border-radius:99px;filter:blur(1.5px)}
.service-summary{margin:0;max-width:36ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.service-deliverables ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.service-deliverables li{padding:8px 14px;background:var(--chip);border-radius:99px;font-size:14px;line-height:1.35;color:var(--ink-2)}
@media(max-width:1199px){.service-grid{grid-template-columns:1fr;max-width:760px}}
@media(max-width:767px){.service-card{padding:24px}}
.services-section.is-stacking .services-stage .section-inner{max-width:880px}
/* Scroll-driven stacking (stack.js adds .is-stacking when motion is allowed and the deck fits). */
.services-section.is-stacking{height:var(--stack-scroll-height);padding:0}
.is-stacking .services-stage{position:sticky;top:0;height:var(--stage-h,100vh);padding:40px var(--gutter);overflow:hidden;display:flex;align-items:center}
.is-stacking .services-stage .section-inner{width:100%}
.services-section.is-stacking .section-heading{margin:0 auto 64px}
.is-stacking .service-grid{position:relative;display:block;max-width:760px;margin:0 auto;height:var(--stack-height)}
.is-stacking .service-card{position:absolute;inset:0 0 auto;will-change:transform;transform-origin:center top;box-shadow:var(--shadow-stack)}
@media(min-width:768px){.is-stacking .service-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:12px;align-content:start;padding:32px}.is-stacking .service-card h3{grid-column:1}.is-stacking .service-summary{grid-column:1}.is-stacking .service-deliverables{grid-column:2;grid-row:1/span 2;margin-top:6px}}
@media(max-width:767px){.is-stacking .services-stage{padding:20px var(--gutter)}.services-section.is-stacking .section-heading{margin-bottom:36px}}


/* 6. Projects: large cards. Two staggered columns from 768px (the right column starts half a card lower);
   one column on phones. Square image panels in grey until real covers arrive; outlined pill tags. */
.work-grid{list-style:none;margin:var(--head-gap) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);row-gap:72px}
.work-card{min-width:0}
.work-card__media{position:relative;aspect-ratio:5/6;background:var(--grey-img);overflow:hidden}
.work-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.work-card:hover .work-card__media img{transform:scale(1.025)}
.work-card__tags{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.work-card__tags li{border:1px solid var(--ink);border-radius:999px;padding:8px 16px;font-size:15px;line-height:1.3;color:var(--ink)}
.work-card__title{margin:22px 0 0;max-width:24ch;font-size:var(--t-row);line-height:1.22;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
@media(min-width:768px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,7vw,136px);row-gap:clamp(48px,5vw,96px)}
  .work-card{grid-row:span 2}
  .work-card:nth-child(odd){grid-column:1}
  .work-card:nth-child(even){grid-column:2}
  .work-card:nth-child(2){grid-row:2/span 2}
}
@media(max-width:767px){
  .work-card__tags{margin-top:20px;gap:8px}
  .work-card__tags li{font-size:14px;padding:7px 14px}
  .work-card__title{margin-top:16px}
}

/* 7. How we work -------------------------------------------- */
/* 5b. How we work --------------------------------------- */
/* Plain list by default; approach.js pins it (split or compact layout) when motion is allowed and it fits. */
.approach-section{position:relative;background:var(--paper-soft)}
.approach-stage{padding:var(--section-y) var(--gutter)}
.approach-inner{max-width:var(--max);margin:0 auto}
.approach-head{max-width:760px;min-width:0}
.approach-head h2{margin:0;max-width:14ch;font:400 var(--t-h2)/1.06 var(--font);letter-spacing:-.03em;text-wrap:balance}
.approach-lede{margin:28px 0 0;max-width:40ch;font-size:var(--t-lead);line-height:1.6;letter-spacing:-.1px;color:var(--ink-2);text-wrap:pretty}
.approach-body{min-width:0}
.phase-stack{list-style:none;margin:var(--head-gap) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.phase-card{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .3s ease}
.phase-card__art{aspect-ratio:16/9;background:#fbfbfb;overflow:hidden;border-bottom:1px solid var(--line)}
.phase-card__copy{flex:1;min-width:0;padding:24px;display:flex;flex-direction:column;gap:12px}
.phase-card__index{font-size:13px;line-height:1.4;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.phase-card h3{margin:0;font:400 var(--t-card)/1.18 var(--font);letter-spacing:-.02em}
.phase-card p{margin:0;font-size:15px;line-height:1.55;letter-spacing:-.075px;color:var(--ink-2);text-wrap:pretty}
.phase-card .phase-card__outputs{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--muted)}
.phase-card__outputs span{display:block;margin-bottom:4px;color:var(--ink);font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:uppercase}
.approach-detail{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.approach-panel{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:16px}
.approach-panel h3{margin:0;font:400 26px/1.15 var(--font);letter-spacing:-.01em}
.approach-panel p{margin:0;font-size:15px;line-height:1.6;letter-spacing:-.075px;color:var(--ink-2)}
.approach-panel--dark{background:var(--dark);border-color:var(--dark);color:#fff}
.approach-panel--dark p{color:rgba(255,255,255,.76)}
.approach-panel .approach-note{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--ink)}
.approach-panel--dark .approach-note{color:#fff;border-top-color:rgba(255,255,255,.16)}
/* Proposal checklist: each tick draws in turn once the panel is shown (.is-ticked). */
.proposal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.proposal-list li{position:relative;padding:11px 0 11px 28px;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
.proposal-list li:before{content:'';position:absolute;left:3px;top:15px;width:12px;height:7px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg);clip-path:inset(0 100% 0 0);transition:clip-path 420ms var(--ease-out);transition-delay:calc(var(--i,0) * 140ms + 150ms)}
.approach-detail.is-ticked .proposal-list li:before{clip-path:inset(0 0 0 0)}
.approach-rail{display:none}
/* Static list entrance (motion allowed, not pinned) */
.approach-section.is-animated:not(.is-pinned) .phase-card,.approach-section.is-animated:not(.is-pinned) .approach-panel{opacity:0;translate:0 24px;transition:opacity 600ms ease,translate 600ms var(--ease-out);transition-delay:var(--enter-delay,0ms)}
.approach-section.is-animated:not(.is-pinned) .is-in{opacity:1;translate:none}
@media(max-width:767px){.approach-lede{font-size:16px}.phase-stack{grid-template-columns:1fr}.approach-detail{grid-template-columns:1fr}.approach-panel{padding:24px}}

/* Pinned sequence (approach.js). Shared stage: */
.approach-section.is-pinned{height:var(--approach-scroll-height);scroll-margin-top:0}
.is-pinned .approach-stage{position:sticky;top:0;height:var(--stage-h,100vh);padding:40px var(--gutter);display:flex;align-items:center;overflow:hidden}
/* Split layout (≥1200px): heading and rail left, deck right, then the two panels side by side. */
.is-split .approach-inner{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:64px;align-items:center}
.is-split .approach-body{display:grid;align-items:center}
.is-split .phase-stack,.is-split .approach-detail{grid-area:1/1}
.is-split .phase-stack{display:block;position:relative;margin:0;height:var(--phase-stack-height);transform-origin:center top}
.is-split .phase-card{position:absolute;inset:0 0 auto;height:var(--phase-card-height);flex-direction:row;transform-origin:center top;will-change:transform;box-shadow:var(--shadow-stack)}
.is-split .phase-card__art{aspect-ratio:auto;width:42%;flex:none;border-bottom:0;border-right:1px solid var(--line)}
.is-split .phase-card__copy{padding:32px;gap:14px}
.is-split .phase-card h3{font-size:clamp(24px,1.9vw,28px)}
.is-split .phase-card p{font-size:16px}
.is-split .approach-detail{margin:0;pointer-events:none}
.is-split .approach-detail.is-shown{pointer-events:auto}
.is-split .approach-panel{opacity:0;will-change:transform,opacity;box-shadow:var(--shadow-stack)}
/* Progress rail */
.is-split .approach-rail{display:flex;flex-direction:column;position:relative;list-style:none;margin:48px 0 0;padding:0 0 0 24px}
.approach-rail__track,.approach-rail__fill{position:absolute;left:3px;width:1px;top:var(--rail-start,20px)}
.approach-rail__track{height:var(--rail-length,120px);background:#d4d4d4}
.approach-rail__fill{z-index:1;height:var(--rail-fill,0px);background:var(--signal)}
.approach-rail__dot{z-index:2;position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(255,121,4,.15);transform:translateY(var(--rail-y,0px))}
.approach-rail button{display:flex;align-items:baseline;gap:12px;width:100%;padding:9px 0;border:0;background:none;font-size:15px;line-height:1.3;letter-spacing:-.1px;color:#9a9a9a;text-align:left;cursor:pointer;transition:color .3s ease}
.approach-rail .rail-num{font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.approach-rail li.is-past button{color:#555}
.approach-rail li.is-active button,.approach-rail.is-complete li button,.approach-rail li button:hover{color:var(--ink)}
.approach-rail button:focus-visible{outline-offset:3px}

/* Compact layout (phones, tablets): heading and a continuous progress line on top; phases and panels form one six-card deck. */
.is-compact .approach-stage{padding:20px var(--gutter)}
.is-compact .approach-inner{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px}
.is-compact .approach-head h2{font-size:var(--t-h2)}
.is-compact .approach-lede{display:none}
.is-compact .approach-rail{display:none}
.approach-progress{display:none}
.is-compact .approach-progress{display:block;height:3px;margin-top:18px;border-radius:2px;background:#dcdcdc;overflow:hidden}
.approach-progress span{display:block;height:100%;background:var(--signal);transform-origin:left center;transform:scaleX(var(--progress,0))}
.is-compact .approach-body{position:relative;height:var(--deck-height)}
.is-compact .phase-stack,.is-compact .approach-detail{position:absolute;inset:0;margin:0;display:block}
.is-compact .phase-card,.is-compact .approach-panel{position:absolute;inset:0 0 auto;height:var(--deck-card-height);transform-origin:center top;will-change:transform;box-shadow:var(--shadow-stack)}
.is-compact .phase-card__art{aspect-ratio:auto;height:var(--compact-art-h,160px);flex:none}
.is-compact .phase-card__copy{padding:20px 22px;gap:10px}
.is-compact .phase-card h3{font-size:var(--t-card)}
.is-compact .approach-panel{padding:24px}
.is-compact .approach-panel h3{font-size:26px}
@media(min-width:768px){.is-compact .approach-inner{max-width:680px}}


/* 8. Focus: sectors as a large expandable list */
.focus-list{list-style:none;margin:var(--head-gap) 0 0;padding:0}
.focus-list details{border-bottom:1px solid var(--line)}
.focus-list summary{display:flex;align-items:center;gap:20px;padding:26px 0;cursor:pointer;list-style:none;font-size:var(--t-row-s);line-height:1.2;letter-spacing:-.02em;transition:color .3s ease}
.focus-list summary::-webkit-details-marker{display:none}
.focus-list summary>span{flex:1;min-width:0}
.focus-icon{flex:none;width:30px;height:30px;color:var(--muted);transition:color .3s ease}
.focus-list--also .focus-icon{width:24px;height:24px}
details[open] .focus-icon,.focus-list summary:hover .focus-icon{color:var(--signal)}
.focus-list summary:hover{color:var(--ink-2)}
.chev{flex:none;width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .35s var(--ease-out)}
details[open] .chev{transform:rotate(45deg)}
.focus-list details p{margin:0;padding:0 0 30px;max-width:48ch;font-size:var(--t-lead);line-height:1.5;color:var(--ink-2)}
details[open] p{animation:details-in 500ms var(--ease-out)}
@keyframes details-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.focus-also{margin-top:var(--head-gap);color:var(--muted)}
.focus-list--also{margin-top:0}
.focus-list--also summary{font-size:var(--t-row-xs);color:var(--ink-2)}
@media(max-width:767px){.focus-list summary{padding:22px 0}}

/* 9. About -------------------------------------------------- */
.about-section .statement{max-width:16ch}
.about-intro{margin:48px 0 0;max-width:44ch;font-size:clamp(19px,1.6vw,24px);line-height:1.45;letter-spacing:-.015em;color:var(--ink-2)}
.about-photo{margin-top:144px;aspect-ratio:16/9;background:var(--grey-img);border-radius:var(--radius-lg);overflow:hidden}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover}
.principles{list-style:none;margin:120px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.principles h3{margin:0 0 10px;font-size:var(--t-card);line-height:1.2;letter-spacing:-.025em}
.principles p{margin:0;max-width:30ch;color:var(--muted)}
@media(max-width:767px){.about-intro{margin-top:32px}.about-photo{margin-top:88px;aspect-ratio:4/3;border-radius:var(--radius)}.principles{grid-template-columns:1fr;gap:36px;margin-top:80px}}

/* 10. Key people -------------------------------------------- */
.people-section{padding-top:0}
.people-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,8vw,140px);align-items:start}
.people-side{position:sticky;top:120px}
.people-side .label{margin-bottom:40px}
.people-grid{display:grid;gap:72px}
.person{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:40px;align-items:end}
.person__photo{aspect-ratio:4/5;background:var(--grey-img);border-radius:0;overflow:hidden}
.person__photo img{display:block;width:100%;height:100%;object-fit:cover}
.person h3{margin:0 0 2px;font-size:var(--t-card);line-height:1.2;letter-spacing:-.02em}
.person__role{margin:0;color:var(--muted)}
.person__bio{margin:18px 0 0;max-width:38ch;color:var(--ink-2)}
.people-note{margin:0;max-width:24ch;font-size:clamp(20px,1.8vw,26px);line-height:1.35;letter-spacing:-.02em;color:var(--ink-2)}
@media(max-width:1023px){.people-layout{grid-template-columns:1fr;gap:72px}.people-side{position:static}.people-note{max-width:30ch}}
@media(max-width:600px){.person{grid-template-columns:1fr;gap:24px}.person__photo{max-width:320px;aspect-ratio:1}.people-grid{gap:64px}}

/* 11. Insights ---------------------------------------------- */
/* 8. Insights ---------------------------------------------- */
.insights-section{position:relative;height:88vh;min-height:620px;background:var(--dark);display:grid;place-items:center;padding:96px var(--gutter) 32px;isolation:isolate;overflow:hidden;color:#fff}
.insights-art{position:absolute;inset:0;z-index:-1}
.insights-labels{position:absolute;top:40px;left:max(var(--gutter),calc((100% - var(--max)) / 2));right:max(var(--gutter),calc((100% - var(--max)) / 2));display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;font-size:15px;line-height:1.5;letter-spacing:-.075px}
.insights-labels h2{font:inherit;margin:0;text-align:center}
.insights-labels>span:last-child{text-align:right}
.insights-card-zone{width:346px;max-width:100%;padding:20px;position:relative}
.insights-card{background:var(--signal);color:var(--ink);border-radius:var(--radius);padding:24px;min-height:369px;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:40px;transform-origin:center;transition:transform 300ms var(--ease-out),box-shadow 300ms ease}
.insights-card__title{display:flex;flex-direction:column;gap:8px}
.insights-card p{margin:0;font-size:15px;line-height:1.5;letter-spacing:-.075px}
.insights-card h3{margin:0;font:400 24px/1.2 var(--font);letter-spacing:-.01em}
.insights-card__footer{display:flex;flex-direction:column;gap:16px}
.insights-cta{display:flex;align-items:center;justify-content:center;border-radius:99px;width:100%;padding:14px 24px;background:var(--ink);color:#fff;font-size:15px;line-height:1;letter-spacing:-.3px;text-decoration:none;transition:background-color .2s}
.insights-cta:hover{background:var(--ink-soft)}
.insights-cta:focus-visible{outline-color:#fff}
@media(hover:hover) and (pointer:fine){.insights-card-zone:hover .insights-card{transform:translateY(-8px) rotate(5deg);box-shadow:0 2px 6px rgba(0,0,0,.2),0 32px 64px -16px rgba(0,0,0,.55)}}
.insights-card:focus-within{transform:translateY(-8px) rotate(5deg);box-shadow:0 2px 6px rgba(0,0,0,.2),0 32px 64px -16px rgba(0,0,0,.55)}
@media(max-width:767px){.insights-section{min-height:620px;padding:100px 20px 24px}.insights-labels{top:28px;grid-template-columns:1fr 1fr;gap:12px;font-size:13px}.insights-labels h2{grid-column:1/-1;grid-row:2}.insights-labels>span:last-child{grid-column:2;grid-row:1}.insights-card-zone{padding:20px 16px}}
@media(max-height:700px) and (min-width:768px){.insights-section{padding-top:84px;padding-bottom:16px}.insights-labels{top:20px}.insights-card-zone{padding:8px 16px}.insights-card{min-height:0;gap:20px;padding:20px}.insights-card h3{font-size:20px}.insights-card p{font-size:14px}.insights-card__footer{gap:12px}}


/* 12. Challenges -------------------------------------------- */
/* 9. Challenges -------------------------------------------- */
.challenges-section{position:relative;background:var(--paper-soft)}
.challenges-stage{padding:var(--section-y) var(--gutter)}
.challenges-inner{max-width:var(--max);margin:auto}
.challenges-section .section-heading{max-width:698px;margin:0 auto var(--head-gap)}
.challenges-section.is-stacking .section-heading{margin-bottom:80px}
.challenge-stack{display:flex;flex-direction:column;gap:24px;max-width:698px;margin:auto}
.challenge-card{display:flex;gap:28px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;min-width:0}
.challenge-card__image{width:172px;flex:none;align-self:stretch;min-height:158px;background:#fbfbfb;border-radius:0;overflow:hidden}
.challenge-card__copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}
.challenge-card h3{margin:0 0 4px;padding:6px 0;font:400 clamp(19px,calc(.3vw + 17.5px),22px)/1.25 var(--font);letter-spacing:-.02em}
.challenge-card p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5;letter-spacing:-.075px}
.challenge-examples{color:var(--muted)}
/* Scroll-driven stacking (stack.js adds .is-stacking when motion is allowed and the deck fits). */
.challenges-section.is-stacking{height:var(--stack-scroll-height)}
.is-stacking .challenges-stage{position:sticky;top:0;height:var(--stage-h,100vh);padding:40px var(--gutter);overflow:hidden;display:flex;align-items:center}
.is-stacking .challenges-inner{width:100%}
.is-stacking .challenge-stack{position:relative;display:block;height:var(--stack-height)}
.is-stacking .challenge-card{position:absolute;inset:0 0 auto;will-change:transform;transform-origin:center top;box-shadow:var(--shadow-stack)}
@media(max-width:767px){.is-stacking .challenges-stage{padding:20px var(--gutter)}.challenges-section.is-stacking .section-heading{margin-bottom:36px}.is-stacking .challenge-card__image{height:120px}}
@media(max-width:767px){.challenges-stage{padding:96px 20px}.challenge-card{padding:20px;flex-direction:column;gap:16px}.challenge-card__image{width:100%;height:160px;min-height:0}.challenge-card h3{padding:0}.challenge-card__copy{gap:12px}}


/* 13. Contact footer ---------------------------------------- */
.site-footer{padding:var(--section-y) var(--gutter) 0;background:var(--dark);color:#fff}
.site-footer .closing-lede{color:rgba(255,255,255,.68)}
.site-footer .pill--solid{background:#fff;border-color:#fff;color:var(--ink)}
.site-footer .pill--solid:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.site-footer .pill:not(.pill--solid){border-color:rgba(255,255,255,.85);color:#fff}
.site-footer .pill:disabled:hover{background:transparent;color:#fff}
.site-footer .next-steps{border-top-color:rgba(255,255,255,.16)}
.site-footer .next-steps p,.site-footer .contact-grid .label{color:rgba(255,255,255,.5)}
.site-footer .statement{max-width:17ch}
.closing-lede{margin:32px 0 40px;max-width:40ch;font-size:var(--t-lead);line-height:1.5;color:var(--ink-2)}
.next-steps{list-style:none;margin:144px 0 0;padding:32px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.next-steps span{display:block;margin-bottom:14px;font-size:14px;color:var(--signal);font-variant-numeric:tabular-nums}
.next-steps h3{margin:0 0 6px;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.next-steps p{margin:0;color:var(--muted)}
.contact-grid{margin-top:120px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.contact-grid .label{margin-bottom:16px;font-size:15px;color:var(--muted)}
.contact-grid .pill{min-height:44px;font-size:15px;padding:0 18px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.contact-text{margin:0}
/* Night horizon: the sphere rises in light particles at the foot of the dark footer. */
.footer-night{margin:clamp(64px,8vw,120px) calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 40px}
.footer-sunrise{position:relative;height:clamp(200px,30vw,440px);margin:0 calc(var(--gutter) * -1);overflow:hidden;pointer-events:none}
.footer-sunrise canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.site-footer__bottom{max-width:var(--max);margin:0 auto;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.55)}
.site-footer__bottom p{margin:0}
.site-footer__brand{display:block;width:182px}
.site-footer__brand img{display:block;width:100%;height:auto;filter:invert(1)}
.back-top{text-decoration:none;color:#fff}
.back-top:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--signal)}
@media(max-width:1199px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.next-steps{grid-template-columns:1fr;gap:32px;margin-top:96px}.contact-grid{grid-template-columns:1fr;gap:36px;margin-top:88px}.site-footer__bottom{flex-direction:column;align-items:flex-start}}

/* 14. Dialog & form ------------------------------------------ */
/* 12. Dialog & form ---------------------------------------- */
dialog{border:0;border-radius:var(--radius-lg);padding:40px;max-width:560px;width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto;box-shadow:var(--shadow-float)}
dialog::backdrop{background:rgba(0,0,0,.33);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
dialog[open]{animation:dialog-in 300ms var(--ease-out)}
@keyframes dialog-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
dialog h2{margin:0 0 12px;font:400 32px/1.15 var(--font);letter-spacing:-.013em}
dialog p{line-height:1.5}
.dialog-lede{margin:0 0 28px;font-size:15px;color:var(--ink-2)}
.close{position:absolute;right:16px;top:12px;width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer}
.consult-form{display:grid;gap:18px}
.consult-form label{display:grid;gap:8px;font-size:14px;font-weight:500}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consult-form input:not([type=checkbox]),.consult-form textarea{width:100%;padding:12px 14px;border:1px solid #cfcfcf;border-radius:0;background:#fff;font-size:15px;font-weight:400;transition:border-color .2s,box-shadow .2s}
.consult-form textarea{resize:vertical;min-height:110px}
.consult-form input:focus,.consult-form textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,121,4,.25)}
.consult-form [aria-invalid=true]{border-color:#d33!important}
fieldset{border:0;margin:0;padding:0}
legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:500}
.choice-chips{display:flex;flex-wrap:wrap;gap:8px}
.choice-chips label{display:block;font-weight:400;cursor:pointer}
.choice-chips input{position:absolute;opacity:0;pointer-events:none}
.choice-chips span{display:inline-block;padding:9px 12px;border-radius:99px;background:var(--chip);font-size:14px;line-height:1.2;border:1px solid transparent;transition:background-color .2s,border-color .2s}
.choice-chips label:hover span{border-color:#cfcfcf}
.choice-chips input:checked+span{background:var(--ink);color:#fff}
.choice-chips input:focus-visible+span{outline:2px solid var(--signal);outline-offset:3px}
.form-submit{justify-self:start;margin-top:4px}
.form-error{margin:0;font-size:14px;color:#c22}
.form-note{margin:0;font-size:13px;color:#666}
.consult-done p{color:var(--ink-2)}
.consult-done a{color:var(--ink);text-decoration-color:var(--signal);text-underline-offset:3px}
.consult-done .cta{margin-top:12px}
@media(max-width:767px){dialog{padding:28px 20px}.field-row{grid-template-columns:1fr}dialog h2{font-size:28px}}


/* 15. Motion: intro ---------------------------------------- */
/* Sequence (intro.js): sphere forms → centered logo fades → navbar drops in → copy dissolves in. */
.intro-logo{display:none;pointer-events:none}
.intro-play .intro-logo{display:block;position:fixed;z-index:100;left:var(--intro-center-x,50%);top:var(--intro-center-y,50%);width:var(--intro-logo-width,182px);transform:translate(-50%,-50%) scale(1.35)}
.intro-logo img{display:block;width:100%;height:auto}
.intro-play.intro-logo-exit .intro-logo{animation:intro-logo-out 400ms ease both}
.intro-play .nav{opacity:0}
.intro-play .brand{visibility:hidden}
.intro-play.intro-nav .nav{animation:navbar-enter 600ms var(--ease-out) both}
.intro-play.intro-nav .brand,.intro-play.intro-content .brand{visibility:visible}
.intro-play .sphere-stage{animation:fade-in 400ms ease 150ms both}
.intro-play .hero-copy h1,.intro-play .hero-description{opacity:0;filter:blur(9px)}
.intro-play .hero-copy:before{opacity:0}
.intro-play .hero-cta{opacity:0;pointer-events:none}
.intro-play.intro-content .hero-copy h1,.intro-play.intro-content .hero-description{animation:title-dissolve 900ms var(--ease-out) both}
.intro-play.intro-content .hero-copy:before{animation:fade-in 900ms ease both}
.intro-play.intro-content .hero-cta{pointer-events:auto;animation:hero-cta-enter 900ms var(--ease-out) both}
.intro-play.intro-finished .sphere-stage{animation:none;opacity:1}
.intro-play.intro-finished .nav,.intro-play.intro-finished .hero-copy h1,.intro-play.intro-finished .hero-description,.intro-play.intro-finished .hero-copy:before,.intro-play.intro-finished .hero-cta{animation:none;opacity:1;filter:none;transform:none;pointer-events:auto}
.intro-play.intro-finished .hero-copy:before{pointer-events:none}
.intro-play.intro-finished .nav.nav-scroll-hidden{transform:translateY(-100%)}
@keyframes intro-logo-out{from{opacity:1}to{opacity:0}}
/* Desktop sequence: logo centred → glides into the navbar → headline and sphere arrive together. */
.intro-play.intro-desk .intro-logo{opacity:0}
.intro-play.intro-desk .sphere-stage{animation:none;opacity:0}
.intro-play.intro-desk.intro-content .sphere-stage{animation:fade-in 900ms ease both}
.intro-play.intro-desk.intro-nav .nav{animation:fade-in 700ms ease both}
.intro-play.intro-desk.intro-nav .brand{visibility:hidden}
.intro-play.intro-desk.intro-landed .brand{visibility:visible}
.intro-play.intro-finished .brand{visibility:visible!important}
.intro-play.intro-desk .scroll-cue{opacity:0;transition:opacity .9s ease .3s}
.intro-play.intro-desk.intro-content .scroll-cue{opacity:1}
@keyframes navbar-enter{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes title-dissolve{from{opacity:0;filter:blur(9px)}to{opacity:1;filter:blur(0)}}
@keyframes hero-cta-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}


/* 16. Motion: reveals -------------------------------------- */
.section-reveal{opacity:0;transition:opacity 900ms ease,translate 1000ms var(--ease-out);transition-delay:var(--section-reveal-delay,0ms)}
.section-reveal--rise{translate:0 36px}
.section-reveal.section-reveal--visible{opacity:1;translate:none}

/* 17. Reduced motion --------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .intro-logo{display:none!important}
  .intro-play .sphere-stage{animation:none!important;opacity:1}
  .intro-play .nav,.intro-play .hero-copy h1,.intro-play .hero-description,.intro-play .hero-copy:before,.intro-play .hero-cta{animation:none!important;opacity:1;filter:none;transform:none;pointer-events:auto}
  .intro-play .brand{visibility:visible}
  .section-reveal{opacity:1;translate:none}
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--gutter)}
  .logo-box[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .scroll-cue i:after,.site-menu__links a,details[open] p{animation:none}
  .insights-card-zone:hover .insights-card,.insights-card:focus-within{transform:none}
  .challenge-card{will-change:auto}
  dialog[open]{animation:none}
  .lineart .art-lines,.lineart .art-signal{opacity:1;transform:none}
  .proposal-list li:before{clip-path:none}
}

/* 18. Desktop split: Services and Challenges (≥1200px) ------
   Title on the left, card deck on the right, the pair centred in the viewport (same ratio as How We Work). */
@media(min-width:1200px){
  .services-stage>.section-inner,.challenges-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:64px;align-items:start;max-width:var(--max);margin:0 auto}
  .services-section .section-heading,.challenges-section .section-heading,
  .services-section.is-stacking .section-heading,.challenges-section.is-stacking .section-heading{margin:0;max-width:12ch}
  .service-grid{grid-template-columns:1fr;max-width:none}
  .services-section.is-stacking .services-stage .section-inner{max-width:var(--max)}
  .is-stacking .services-stage,.is-stacking .challenges-stage{align-items:center;padding:40px var(--gutter)}
  .is-stacking .service-grid{max-width:none;margin:0}
  .is-stacking .service-card{display:flex;flex-direction:column;gap:16px;padding:36px}
  .is-stacking .service-deliverables{margin-top:4px}
  /* Challenges: square cards, illustration on top */
  .challenge-stack{max-width:none;margin:0;gap:24px}
  .challenge-card{flex-direction:column;gap:0;padding:0;overflow:hidden;width:min(100%,540px,calc(100vh - 240px));aspect-ratio:1}
  .challenge-card__image{width:100%;height:56%;min-height:0;flex:none;border-radius:0;border-bottom:1px solid var(--line)}
  .challenge-card__copy{padding:28px 32px 32px;gap:10px}
  .challenge-card h3{padding:0;margin:0}
}

/* 19. Smooth scrolling (smooth.js + lenis.js, desktop with a mouse only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.smooth-toggle{position:fixed;left:16px;bottom:16px;z-index:200;font:400 14px/1 var(--font);color:#fff;background:var(--ink);border:0;border-radius:999px;padding:12px 18px;min-height:44px;cursor:pointer}
.smooth-toggle[aria-pressed="false"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.smooth-toggle:focus-visible{outline:2px solid var(--signal);outline-offset:3px}