/* Basepoint Works · site.css — the shared shell + scroll scenes for every page (home, what we build, pricing, privacy, 404).
   Base rules = the composed static page (no JS, reduced motion, Motion off).
   html.eng adds the scroll scenes: pinned stages (position: sticky, so the browser scrolls natively and phones stay
   smooth), scroll-driven transforms written by js/site.js, and the loader. Only transform, opacity and a few clip-paths
   (desktop only) are animated per frame. Page-specific widgets live in css/<page>.css. */

/* metric fallbacks: the first paint (Motion off has no loader over it) already has the web fonts' widths, so the swap does
   not reflow the hero. Arial has one regular weight, so Geist's lighter and heavier weights each get their own width */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:100 349;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:100.2%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:350 449;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:102.3%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:450 549;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:105.5%}
/* the price line's "$" and "/" are much wider in Geist than in Arial */
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:350 449;unicode-range:U+24;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:116%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:350 449;unicode-range:U+2F;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:148%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:450 549;unicode-range:U+24;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:122%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:450 549;unicode-range:U+2F;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:156%}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:550 900;ascent-override:95.9%;descent-override:28.2%;line-gap-override:0%;size-adjust:100%}
@font-face{font-family:"Instrument Serif Fallback";src:local("Georgia Italic"),local("Georgia-Italic"),local("Times New Roman Italic");font-style:italic;ascent-override:96%;descent-override:26%;line-gap-override:0%;size-adjust:83%}
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New"),local("CourierNewPSMT"),local("Menlo");ascent-override:79%;descent-override:23%;line-gap-override:0%;size-adjust:100%}

:root{
  --ink-0:#141618; --ink-1:#1B1E21; --ink-2:#24282C; --line:#33383D;
  --amber:#F2A93B; --amber-hi:#FFD08A; --on-amber:#1A1307;
  --paper:#F4F1EA; --body:#D9D6CF; --mist:#A7ADB3;
  --hair:rgba(244,241,234,.10); --hair-2:rgba(244,241,234,.18);
  --sans:"Geist","Geist Fallback",Arial,system-ui,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif;
  --gut:clamp(16px,4vw,56px); --max:1328px; --hdr-h:64px;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-io:cubic-bezier(.65,0,.35,1);
  /* one curtain curve for every full-screen wipe (loader, page-to-page, menu close); one quick ease-out for things that
     answer a tap (menu open, hovers) */
  --ease-curtain:cubic-bezier(.5,0,.15,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --svh:100vh; --lvh:100vh;
  /* one type scale for every page: section heads, statement moments, page titles */
  --fs-h2:clamp(36px,4.6vw,76px); --fs-display:clamp(44px,6.6vw,120px); --fs-title:clamp(50px,9vw,140px);
}
@supports (height:100svh){:root{--svh:100svh;--lvh:100lvh}}
@media (min-width:1024px){:root{--hdr-h:72px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--ink-0);color:var(--body);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
html:not(.lenis):not(.still){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.lock{overflow:hidden}
body{background:var(--ink-0);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{color:var(--paper);font-weight:300;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1;letter-spacing:-.03em}
/* the accent: ONE word per heading in an amber italic serif (Instrument Serif), set a touch larger so its x-height
   meets Geist's; the right padding keeps the italic overhang inside the .ln clip of the rising headlines */
h1 em,h2 em,h3 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;line-height:.9;color:var(--amber);padding-right:.05em;font-synthesis:none}
p,li,dd{text-wrap:pretty}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,svg,video{display:block;max-width:100%}
ul,ol{list-style:none}
b,strong{font-weight:500}
::selection{background:rgba(242,169,59,.35);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
@media (max-width:767px){.mono{font-size:12px;letter-spacing:.12em}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.skip{position:fixed;left:12px;top:12px;z-index:300;padding:12px 18px;border-radius:10px;background:var(--amber);color:var(--on-amber);font-weight:500;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none}
main:focus{outline:none}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--amber);flex:none}
.vid{width:100%;height:100%;object-fit:cover;background:#0d0e10}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;line-height:1.1;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn--amber{background:var(--amber);color:var(--on-amber)}
@media (hover:hover){.btn--amber:hover{background:var(--amber-hi)}}
.btn--ghost{border:1px solid var(--hair-2);color:var(--paper);background:rgba(20,22,24,.35)}
@media (hover:hover){.btn--ghost:hover{border-color:var(--amber);color:var(--amber-hi)}}
.btn:active{transform:scale(.97)}
.btn--big{min-height:58px;padding:0 30px;font-size:17px}

/* ---------- loader ---------- */
.ld{display:none}
.eng .ld{display:flex;position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--ink-0);
  box-shadow:0 1px 0 var(--amber),0 40px 80px -20px rgba(0,0,0,.6); /* the same amber leading edge as the page-to-page curtain */
  transition:transform .8s var(--ease-curtain),visibility 0s .8s;animation:ld-safe .4s 9s forwards}
.ld.is-out{transform:translateY(-100%);visibility:hidden}
.ld.is-gone{display:none}
@keyframes ld-safe{to{opacity:0;visibility:hidden}}
/* the mark fills from the bottom on the compositor: the level is a transform transition (it keeps moving while the first
   layout holds the main thread), the ripple on its edge a CSS loop; only the % number is written from JS */
.ld__mk{--mk:clamp(104px,12vw,148px);--lv:0;position:relative;width:var(--mk);height:var(--mk);transition:opacity .3s,transform .8s var(--ease-curtain)}
.ld__mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ld__clip{position:absolute;inset:0;border-radius:4.4%;overflow:hidden;overflow:clip}
.ld__lv,.ld__in{position:absolute;inset:0;overflow:hidden;will-change:transform;transition:transform var(--ld-d,1.2s) var(--ld-e,cubic-bezier(.25,.6,.3,1))}
.ld__lv{transform:translate3d(0,calc(var(--mk) * (1 - var(--lv))),0)}
.ld__in{overflow:visible;transform:translate3d(0,calc(var(--mk) * (var(--lv) - 1)),0)}
.ld__wave{position:absolute;left:0;top:0;width:100%;height:10%;margin-top:-5%;opacity:0;will-change:transform;
  transform:translate3d(0,calc(var(--mk) * (1 - var(--lv))),0);transition:transform var(--ld-d,1.2s) var(--ld-e,cubic-bezier(.25,.6,.3,1)),opacity .3s}
.ld__wave::after{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 60 10%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 5Q7.5 1 15 5T30 5T45 5T60 5%27 fill=%27none%27 stroke=%27%23F2A93B%27 stroke-width=%271.6%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") 0 50%/calc(var(--mk) / 2) 100% repeat-x;animation:ld-ripple .9s linear infinite}
@keyframes ld-ripple{to{transform:translate3d(calc(var(--mk) / -2),0,0)}}
.ld.is-run .ld__wave{opacity:1}
.ld.is-full .ld__wave{opacity:0}
.ld__dim{--t:rgba(244,241,234,.03);--a:rgba(244,241,234,.06);--w:rgba(244,241,234,.08);--k:#16181a;stroke:rgba(244,241,234,.26);stroke-width:7}
.ld__fill{--t:#2b2e33;--a:#F8A407;--w:#FEFEFE;--k:#2b2e33}
.ld__pct{font-size:15px;color:var(--paper);letter-spacing:.08em;font-variant-numeric:tabular-nums;min-width:5ch;text-align:center}
.ld__pct i{font-style:normal;color:var(--amber);margin-left:2px}
.ld__cap{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;opacity:.6}
/* the mark and the count ride up with the curtain (no empty dark beat before it moves), fading on the way */
.ld.is-out .ld__mk,.ld.is-out .ld__pct{opacity:0;transform:translateY(-24px);transition:opacity .3s .22s,transform .8s var(--ease-curtain)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr-h);display:flex;align-items:center;gap:20px;padding:0 var(--gut);padding-top:env(safe-area-inset-top);
  transition:transform .45s var(--ease),background .3s}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,22,24,.86);border-bottom:1px solid var(--hair);opacity:0;transition:opacity .3s}
.hdr.is-solid::before{opacity:1}
.hdr.is-snap::before{transition:none}
@media (min-width:1024px) and (hover:hover){.hdr::before{background:rgba(20,22,24,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.hdr.is-hid{transform:translateY(-110%)}
.hdr__logo{flex:none;margin-right:auto}
.hdr__logo img{width:clamp(124px,12vw,168px);height:auto}
.hdr__nav{display:none;gap:28px;font-size:14.5px;color:var(--body)}
.hdr__nav a{position:relative;padding:6px 0}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
@media (hover:hover){.hdr__nav a:hover{color:var(--paper)}.hdr__nav a:hover::after{transform:none;transform-origin:left}}
.hdr__cta{min-height:40px;padding:0 16px;font-size:14px}
.hdr__menu{width:44px;height:44px;margin-right:-10px;display:grid;place-content:center;gap:6px}
.hdr__menu i{display:block;width:20px;height:1.5px;background:var(--paper);transition:transform .3s var(--ease)}
.hdr__menu[aria-expanded="true"] i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
.hdr__menu[aria-expanded="true"] i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
@media (min-width:1024px){.hdr__nav{display:flex}.hdr__menu{display:none}}
@media (max-width:359px){.hdr__cta{display:none}}

.menu{position:fixed;inset:0;z-index:45;background:#0e0f11;padding:calc(var(--hdr-h) + 32px) var(--gut) 32px;display:flex;flex-direction:column;justify-content:space-between}
.menu nav{display:grid}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:clamp(30px,8vw,44px);font-weight:300;color:var(--paper);letter-spacing:-.02em}
.menu nav a .mono{color:var(--amber)}
.menu__foot{line-height:2}

/* ---------- HUD: chapter + progress ---------- */
.hud{display:none}
.eng .hud{display:block}
.hud__bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:55;pointer-events:none}
.hud__bar b{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}
.hud__ch{position:fixed;right:calc(var(--gut) / 2 - 7px);top:50%;z-index:40;pointer-events:none;color:var(--paper);mix-blend-mode:difference;display:none;writing-mode:vertical-rl;transform:translateY(-50%);white-space:nowrap}

/* ---------- shared scene skeleton ---------- */
.sc{position:relative}
.stage{position:relative}
.eng [data-scene] .stage{position:sticky;top:0;height:var(--lvh);overflow:hidden;overflow:clip}

/* ---------- 00 hero ---------- */
.sc--hero .stage{min-height:var(--svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.eng .sc--hero{height:150vh}
.hero__media{position:absolute;inset:0;overflow:hidden;background:#0d0e10}
.hero__vid{position:absolute;inset:0;transform-origin:50% 55%}
.hero__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,22,24,.6) 0%,rgba(20,22,24,0) 22%,rgba(20,22,24,0) 42%,rgba(20,22,24,.55) 68%,rgba(20,22,24,.92) 100%)}
.hero__copy{position:relative;z-index:2;padding:0 var(--gut) calc(var(--lvh) - var(--svh) + clamp(28px,6vh,64px));max-width:1500px}
.hero__kicker{display:flex;align-items:center;gap:10px;margin-bottom:clamp(14px,2.4vh,26px);color:var(--body)}
.hero__kicker .dot{width:8px;height:8px;background:var(--amber);flex:none;box-shadow:0 0 14px rgba(242,169,59,.7)}
.hero__h1{font-size:clamp(44px,7.3vw,122px);line-height:.95;letter-spacing:-.04em;margin-left:-.04em}
.ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.ln>span{display:inline-block}
/* the lines rise while the loader curtain is still lifting off them (the headline reads ~0.5 s sooner) */
.hero__h1 .ln>span{transition:transform .8s var(--ease) .04s}
.hero__h1 .ln:nth-child(2)>span{transition-delay:.1s}
.hero__h1 .ln:nth-child(3)>span{transition-delay:.16s}
.hero__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(18px,3.4vh,40px);transition:opacity .6s .2s,transform .7s .2s var(--ease)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero__price{font-family:var(--sans);font-size:clamp(15px,1.15vw,17px);font-weight:400;letter-spacing:0;text-transform:none;color:var(--body);line-height:1.4}
.hero__price b{font-weight:500;color:var(--paper)}
.hero__cue{position:absolute;right:var(--gut);bottom:calc(var(--lvh) - var(--svh) + clamp(28px,6vh,64px));z-index:2;display:none;align-items:center;gap:10px}
.hero__cue i{width:1px;height:38px;background:linear-gradient(var(--amber),transparent);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__datum{position:absolute;top:calc(var(--hdr-h) + 18px);right:var(--gut);z-index:2;opacity:.7}
@media (min-width:1024px){.hero__cue{display:flex}.hero__row{max-width:calc(100% - 120px)}}
@media (max-width:767px){.hero__datum{display:none}.hero__ctas .btn{flex:1 1 auto}}
/* intro: lines rise after the loader leaves */
.eng.is-loading .hero__h1 .ln>span{transform:translateY(105%);animation:ld-show 0s 9.2s forwards}
.eng.is-loading .hero__row,.eng.is-loading .hero__kicker{opacity:0;transform:translateY(16px);animation:ld-show 0s 9.2s forwards}
.hero__kicker{transition:opacity .6s .02s,transform .7s .02s var(--ease)}
@keyframes ld-show{to{transform:none;opacity:1}}

/* ---------- 01 statement ---------- */
.sc--say .stage{display:flex;flex-direction:column;justify-content:center;padding:clamp(90px,16vh,160px) var(--gut);max-width:1320px;margin:0 auto}
.eng .sc--say{height:170vh}
.eng .sc--say .stage{max-width:none;height:var(--svh);padding-block:var(--hdr-h) 24px}
.eng .sc--say .stage>*{max-width:1220px;width:100%;margin-inline:0}
@media (min-width:768px){.eng .sc--say .stage>.say__text{max-width:min(1100px,66vw)}}
.say__text{font-size:clamp(25px,min(3.75vw,6.7vh),58px);line-height:1.14;font-weight:300;letter-spacing:-.022em;color:var(--paper)}
.say__text strong{font-weight:300;color:var(--amber)}
.say__text .w{opacity:.17}
.still .say__text .w,html:not(.eng) .say__text .w{opacity:1}

/* ---------- 02 what we build (horizontal track) ---------- */
.sc--build{padding-block:clamp(80px,12vh,140px)}
.build__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;padding:0 var(--gut);margin-bottom:clamp(24px,4vh,48px)}
.build__head .eyebrow{width:100%;margin-bottom:4px}
.build__head h2{flex:1 1 auto;font-size:var(--fs-h2)}
.build__count{color:var(--paper);font-variant-numeric:tabular-nums;display:none}
.sc--build .track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;padding:0 var(--gut)}
.card{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--ink-1);border:1px solid var(--hair)}
.card__media{aspect-ratio:5/4;overflow:hidden;position:relative;background:#0d0e10}
.card__media .vid{transform:scale(1.12)}
.card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.card__n{color:var(--amber)}
.card h3{font-size:clamp(24px,2vw,32px);letter-spacing:-.02em;line-height:1.1}
.card__body>p:not(.mono){font-size:15px;line-height:1.5;color:var(--body)}
.card__price{color:var(--paper);margin-top:auto;padding-top:6px}
.card--next{justify-content:space-between;padding:24px;background:var(--amber);border-color:transparent;color:var(--on-amber);min-height:220px;transition:background .3s}
.card--next .mono{color:rgba(26,19,7,.7)}
@media (hover:hover){.card--next:hover{background:var(--amber-hi)}}
.card--next__big{font-size:clamp(28px,2.6vw,44px);line-height:1.02;letter-spacing:-.03em;font-weight:300}
.build__rail{display:none}

.eng .sc--build{padding:0;height:420vh}
.eng .sc--build .stage{display:flex;flex-direction:column}
.eng .build__wrap,.eng .sc--build .stage>.build__head{flex:none}
.eng .sc--build .build__head{padding-top:calc(var(--hdr-h) + clamp(10px,3vh,40px));margin-bottom:clamp(16px,3vh,36px)}
.eng .build__count{display:block}
.eng .sc--build .track{display:flex;gap:clamp(12px,1.6vw,24px);flex:1 1 auto;min-height:0;max-height:calc(var(--svh) - var(--hdr-h) - 150px);align-items:stretch;width:max-content;will-change:transform}
.eng .card{--cw:clamp(272px,30vw,470px);width:var(--cw);flex:none}
.eng .card__media{aspect-ratio:auto;flex:1 1 0;min-height:110px;max-height:calc(var(--cw) * 1.02)}
.eng .card__media .vid{will-change:transform}
.eng .card--next{--cw:clamp(220px,22vw,340px);min-height:0}
.eng .build__rail{display:block;position:absolute;left:var(--gut);right:var(--gut);bottom:calc(var(--lvh) - var(--svh) + 18px);height:1px;background:var(--hair)}
@media (min-width:1024px){.eng .build__rail{display:none}}
.eng .build__rail b{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}
.eng .sc--build .stage{padding-bottom:calc(var(--lvh) - var(--svh) + 44px)}
@media (max-width:767px){
  .eng .card{--cw:min(80vw,340px)}
  .eng .card__body{padding:16px 18px 18px;gap:6px}
  .eng .card__body>p:not(.mono){font-size:14.5px;line-height:1.45}
  .eng .sc--build .build__head{gap:6px 16px}
  .eng .sc--build h2{font-size:clamp(28px,8vw,36px)}
}
@media (max-width:767px) and (max-height:700px){.eng .card__body>p:not(.mono){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* ---------- 03 AI receptionist ---------- */
.sc--rx{padding-block:clamp(80px,12vh,140px)}
.sc--rx .stage{display:grid;gap:40px;padding:0 var(--gut);max-width:var(--max);margin:0 auto;align-items:center}
@media (min-width:1024px){.sc--rx .stage{grid-template-columns:1.1fr .9fr;gap:56px}}
.rx__glow{position:absolute;inset:0;pointer-events:none;opacity:.34;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 35%,transparent 75%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 35%,transparent 75%)}
@media (min-width:1024px){.rx__glow{left:auto;width:min(64vw,980px)}}
.rx__copy{position:relative;z-index:1}
.rx__copy h2{font-size:var(--fs-h2);margin-bottom:clamp(20px,3.4vh,40px)}
.rx__steps{display:grid;gap:0;border-top:1px solid var(--hair);counter-reset:s}
.rx__steps li{position:relative;border-bottom:1px solid var(--hair);font-size:clamp(16px,1.35vw,20px);color:var(--paper);transition:opacity .45s var(--ease),color .45s}
/* each step is a button (it shows that step in the card); it reads as the list row it always was */
.rx__st{position:relative;display:flex;gap:16px;align-items:baseline;width:100%;padding:clamp(10px,1.8vh,18px) 0;text-align:left;line-height:1.4;border-radius:2px}
.rx__st:focus-visible{outline-offset:2px}
.rx__steps li .mono{color:var(--amber);flex:none;transition:text-shadow .45s var(--ease)}
html:not(.js) .rx__st{cursor:default;pointer-events:none} /* no JavaScript: a plain list */
/* the loop's progress: one thin amber line runs along the active step for that step's time (site.js sets --rx-d) */
.rx__pg{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--amber);box-shadow:0 0 6px rgba(242,169,59,.55);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.eng .sc--rx.is-run .rx__steps li.is-on .rx__pg{opacity:1;animation:rx-pg var(--rx-d,2s) linear both}
.eng .sc--rx.is-paused .rx__steps li.is-on .rx__pg{animation-play-state:paused} /* same specificity as the run rule above (its shorthand resets play-state), later, so it wins */
@keyframes rx-pg{to{transform:none}}
.rx__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3.4vh,36px)}
.rx__phone{position:relative;z-index:1;justify-self:center;width:min(100%,380px)}
.rx__tag,.rx__foot{text-align:center;margin:0 0 12px}
.rx__foot{margin:12px 0 0}
.ph{border-radius:30px;border:1px solid var(--hair-2);background:rgba(23,25,28,.9);padding:16px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;gap:10px;min-height:420px}
.ph__body{display:flex;flex-direction:column;gap:10px}
.ph__in{display:flex;flex-direction:column;gap:10px}
.ph__body>*,.ph__in>*{flex-shrink:0}
.ph__top{display:flex;justify-content:space-between;align-items:center}
.ph__chip{padding:6px 10px;border-radius:999px;border:1px solid var(--amber);color:var(--amber)}
.ph__ring{position:relative;display:grid;justify-items:center;text-align:center;padding:34px 0 26px;gap:4px}
.ph__ico{position:relative;width:58px;height:58px;border-radius:50%;background:var(--amber);color:var(--on-amber);display:grid;place-items:center;margin-bottom:16px;box-shadow:0 0 34px rgba(242,169,59,.45)}
.ph__ico svg{position:relative}
.ph__ring b{font-size:24px;font-weight:300;color:var(--paper);position:relative}
.ph__ring small{font-size:14px;color:var(--mist);position:relative}
.ph__ico i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--amber);opacity:0}
.ph__log{display:grid;gap:8px}
.bub{max-width:88%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.4;color:var(--paper)}
.bub .mono{display:block;font-size:9.5px;margin-bottom:4px}
.bub--ai{background:var(--ink-2);border-bottom-left-radius:5px}
.bub--me{justify-self:end;background:rgba(242,169,59,.16);border:1px solid rgba(242,169,59,.35);border-bottom-right-radius:5px}
.cal{border:1px solid var(--hair);border-radius:16px;padding:12px}
.cal__h{margin-bottom:8px}
.cal__wk{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.cal__wk span{display:grid;gap:6px;align-content:start;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);text-align:center;padding:6px 2px 30px;border-radius:9px;background:rgba(244,241,234,.04);position:relative;overflow:hidden}
.cal__wk b{position:absolute;left:3px;right:3px;bottom:3px;padding:4px 2px;border-radius:6px;background:var(--amber);color:var(--on-amber);font-size:8.5px;letter-spacing:.02em;line-height:1.15;font-weight:500;transform-origin:bottom}
.hand{border-radius:16px;padding:14px;background:var(--paper);color:var(--ink-0)}
.hand__h{color:#6b5a3a;margin-bottom:8px}
.hand dl{display:grid;gap:4px}
.hand dl div{display:flex;justify-content:space-between;font-size:14px}
.hand dt{color:#6d6a63;font-size:10px}
.hand__line{font-size:13px;margin-top:8px;color:#3b3f44}
.rx__rail{display:none}

/* motion: a normal section (no pin, data-mode="pass"); the call plays itself on a loop while the card is on screen
   (site.js sets data-step 1..4 on the stage and .is-sim on the section; with Motion off .is-sim comes with a step tap) */
.eng .sc--rx{padding-block:clamp(72px,11vh,128px) clamp(24px,4vh,48px)}
.eng .sc--rx .stage{position:relative;top:auto;height:auto;overflow:visible;max-width:none;margin:0;padding:0 var(--gut)}
@media (min-width:1024px){.eng .sc--rx .stage{padding-inline:max(var(--gut),calc((100vw - var(--max))/2))}}
.is-sim .rx__steps li{opacity:.4}
.is-sim .rx__steps li.is-done{opacity:.62}
.is-sim .rx__steps li.is-on{opacity:1}
.is-sim .rx__steps li.is-on .mono{text-shadow:0 0 12px rgba(242,169,59,.8)}
@media (hover:hover) and (pointer:fine){.is-sim .rx__steps li:not(.is-on):hover{opacity:.82}}
/* off screen the card takes step 1 at once; the loop's reset back to step 1 is one short calm fade */
.sc--rx.is-snap *{transition:none!important}
.eng .sc--rx.is-reset .rx__ui *{transition-duration:.38s!important;transition-delay:0s!important}
/* every row stays in layout; site.js slides .ph__in up by one transform per step (no layout animation, no shift) */
.eng .ph__body{display:block;flex:1 1 auto;min-height:0;overflow:hidden;contain:layout paint;-webkit-mask-image:linear-gradient(transparent,#000 64px);mask-image:linear-gradient(transparent,#000 64px)}
.eng .ph__in{position:relative;transition:transform .75s var(--ease);will-change:transform}
.eng .s2,.eng .s3,.eng .s4,.eng .ph__ring{transition:opacity .5s var(--ease),transform .65s var(--ease)}
.eng .s2,.eng .s3,.eng .s4{opacity:0;transform:translate3d(0,18px,0)}
.eng .ph__log .s2+.s2,.eng .hand.s4{transition-delay:.12s}
.eng [data-step="2"] .s2,.eng [data-step="3"] .s2,.eng [data-step="4"] .s2,
.eng [data-step="3"] .s3,.eng [data-step="4"] .s3,.eng [data-step="4"] .s4{opacity:1;transform:none}
.eng [data-step="2"] .ph__ring,.eng [data-step="3"] .ph__ring,.eng [data-step="4"] .ph__ring{opacity:0;transform:scale(.94)}
.eng [data-step="0"] .ph__ring i,.eng [data-step="1"] .ph__ring i{animation:ring 2.4s var(--ease) infinite}
.eng .ph__ring i:nth-child(2){animation-delay:.8s!important}
.eng .ph__ring i:nth-child(3){animation-delay:1.6s!important}
@keyframes ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.7);opacity:0}}
.eng .cal__wk b{transform:scaleY(0);transition:transform .5s .25s var(--ease)}
.eng [data-step="3"] .cal__wk b,.eng [data-step="4"] .cal__wk b{transform:none}
.eng .cal__wk .on{transition:background .4s .2s}
.eng [data-step="3"] .cal__wk .on,.eng [data-step="4"] .cal__wk .on{background:rgba(242,169,59,.12)}
.eng .ph{min-height:0;height:min(440px,calc(var(--svh) - var(--hdr-h) - 120px))}
/* phones / tablets: one column. The heading, then the card, then the steps under it (they read like the chapters under a
   video and are the buttons that replay a step), then the buttons: the card is on screen as soon as the section is */
@media (max-width:1023px){
  .eng .sc--rx{padding-top:clamp(56px,8vh,88px)}
  .sc--rx .stage{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .rx__copy{display:contents}
  .rx__copy h2{order:1;font-size:clamp(28px,8vw,44px);margin-bottom:clamp(18px,3vh,28px)}
  .sc--rx .rx__ui{order:2;align-self:center;max-width:560px}
  .rx__steps{order:3;margin-top:clamp(22px,3.4vh,32px)}
  .rx__ctas{order:4}
  .rx__steps li{font-size:clamp(16px,4.4vw,19px)}
  .rx__st{padding-block:13px}
  .eng .rx__tag{margin-bottom:10px}
  .eng .rx__foot{display:none}
  .rx__glow{-webkit-mask-image:radial-gradient(70% 50% at 50% 66%,#000 30%,transparent 75%);mask-image:radial-gradient(70% 50% at 50% 66%,#000 30%,transparent 75%)}
}
@media (max-width:1023px) and (max-height:620px){.eng .bub{font-size:13px;padding:8px 11px}}
.rx__after{display:grid;gap:18px;padding:clamp(36px,6vh,64px) var(--gut) 0;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.rx__after .eyebrow{margin-bottom:0}
.rx__after .howrun{display:grid;gap:16px}
@media (min-width:768px){.rx__after .howrun{grid-template-columns:repeat(3,1fr);gap:28px}}
.rx__after .howrun li{border-top:1px solid var(--hair);padding-top:14px;font-size:15px;color:var(--body)}
.rx__after .howrun b{display:block;margin-bottom:4px;color:var(--paper);font-weight:500}
.rx__after-ctas{display:none;flex-wrap:wrap;gap:10px} /* the section's own buttons show on every screen now (no pinned card hides them) */

/* ---------- 04 marquee + numbers ---------- */
.sc--mq{padding-block:clamp(70px,12vh,150px);overflow:hidden}
.mq{display:grid;gap:.1em;font-size:clamp(54px,10.5vw,190px);line-height:1;font-weight:300;letter-spacing:-.04em;color:var(--paper);white-space:nowrap;margin-bottom:clamp(50px,9vh,110px)}
.mq__row{display:flex;width:max-content;will-change:transform}
.mq__row span{display:flex;align-items:center}
.mq__row i{display:inline-block;width:.2em;height:.2em;background:var(--amber);margin:0 .38em;flex:none}
.mq__row--out{color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.55)}
.mq__row--out i{background:transparent;border:1px solid var(--amber)}
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;padding:0 var(--gut);max-width:var(--max);margin:0 auto}
@media (min-width:1024px){.nums{grid-template-columns:repeat(4,1fr)}}
.nums li{border-top:1px solid var(--hair);padding-top:16px;display:grid;gap:8px;align-content:start}
.nums b{font-size:clamp(36px,4.6vw,70px);font-weight:300;letter-spacing:-.03em;color:var(--paper);line-height:1}
.nums span{font-size:14.5px;color:var(--mist);max-width:28ch}

/* ---------- 05 work ---------- */
.sc--work{padding:clamp(70px,12vh,150px) var(--gut);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.work__head{margin-bottom:clamp(28px,5vh,56px)}
.work__grid{display:grid;gap:clamp(28px,4vw,40px)}
@media (min-width:900px){.work__grid{grid-template-columns:1.55fr 1fr;align-items:start}.job--next{margin-top:clamp(60px,14vh,160px)}}
.job{display:grid;gap:18px}
.job__img{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--ink-1)}
.job__img img{width:100%;height:100%;object-fit:cover;object-position:top;position:absolute;inset:0}
.job__img--next .vid{position:absolute;inset:0}
.job__meta{display:grid;gap:6px}
.job__meta h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.025em;line-height:1.05}
.job__go{color:var(--amber);font-weight:500;margin-top:4px;display:inline-flex;gap:.4em}
.job__go>span[aria-hidden]{display:inline-block;transition:transform .35s var(--ease)}
.job h3{transition:color .3s var(--ease)}
@media (hover:hover){.job:hover .job__go>span[aria-hidden]{transform:translateX(.4em)}.job:hover h3{color:var(--amber-hi)}}
.eng .job__img{will-change:clip-path}

/* ---------- 06 pricing (stacking cards) ---------- */
.sc--price{padding:clamp(70px,12vh,150px) var(--gut) clamp(60px,10vh,120px);max-width:calc(1100px + 2 * var(--gut));margin:0 auto}
.price__head{margin-bottom:clamp(28px,5vh,56px)}
.price__lede{margin-top:16px;font-size:clamp(16px,1.3vw,19px);color:var(--body);max-width:44ch}
.stack{display:grid;gap:18px}
.tier{position:relative;border-radius:28px;background:var(--ink-1);border:1px solid var(--hair);padding:clamp(22px,3.2vw,44px);display:grid;gap:16px;align-content:start;transform-origin:50% 0;
  box-shadow:0 -30px 60px -40px rgba(0,0,0,.9)}
.tier__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.tier__top .mono{color:var(--amber);padding-top:.6em}
.tier__price{font-size:clamp(48px,7vw,104px);font-weight:300;letter-spacing:-.045em;line-height:.9;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.tier__price b{font-weight:300}
.tier__price small{font-size:.24em;letter-spacing:0;color:var(--mist)}
.tier__sub{font-size:clamp(17px,1.5vw,22px);color:var(--paper);max-width:40ch}
.tier ul{display:grid;gap:10px 28px;margin:4px 0 8px}
@media (min-width:768px){.tier ul{grid-template-columns:1fr 1fr}}
.tier li{display:flex;gap:10px;font-size:15px;color:var(--body)}
.tier li::before{content:"";width:6px;height:6px;margin-top:.55em;background:var(--amber);flex:none}
.tier .btn{justify-self:start}
.tier--full{border-color:rgba(242,169,59,.45);background:linear-gradient(160deg,rgba(242,169,59,.12),rgba(242,169,59,0) 55%),var(--ink-1)}
.flat{display:grid}
.flat div{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.flat dt{font-size:clamp(18px,1.7vw,24px);color:var(--paper)}
.flat dd{display:contents}
.flat dd b{font-size:clamp(28px,3vw,44px);font-weight:300;color:var(--paper);letter-spacing:-.03em;grid-row:1/3;grid-column:2;align-self:center}
.flat dd .mono{grid-column:1;text-transform:none;letter-spacing:.02em;font-size:12px}
.tier__dim{position:absolute;inset:-1px;border-radius:inherit;background:#0b0c0d;opacity:0;pointer-events:none}
.eng .tier{position:sticky;top:calc(var(--hdr-h) + 16px + var(--i) * 14px);will-change:transform}
@media (min-width:768px){.eng .tier{min-height:min(62vh,500px)}}

/* ---------- 07 the name (silk) ---------- */
.sc--name .stage{min-height:var(--svh);display:grid;place-items:center;overflow:hidden;padding:clamp(90px,14vh,140px) var(--gut)}
.eng .sc--name{height:160vh}
.eng .sc--name .stage{padding:0 var(--gut) calc(var(--lvh) - var(--svh))}
.name__media{position:absolute;inset:0;overflow:hidden;background:#0d0e10}
.name__vid{position:absolute;inset:0}
.name__shade{position:absolute;inset:0;background:radial-gradient(75% 65% at 50% 50%,rgba(12,13,14,.74),rgba(12,13,14,.42) 70%,rgba(12,13,14,.2))}
.name__copy{position:relative;z-index:1;text-align:center;max-width:1100px}
.name__copy .eyebrow{justify-content:center}
.name__copy h2{font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.name__body{margin:clamp(20px,3.6vh,36px) auto 0;max-width:56ch;font-size:clamp(16px,1.35vw,19px);color:var(--paper);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.eng .name__copy h2 .ln>span{will-change:transform}

/* ---------- 08 cta + footer ---------- */
.sc--cta{padding:clamp(90px,16vh,190px) var(--gut) 0;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;overflow:hidden}
.sc--cta h2{font-size:var(--fs-display);max-width:16ch}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,5vh,48px)}
.cta__mail{margin-top:20px}
@media (hover:hover){.cta__mail a:hover{color:var(--amber)}}
.cta__mark{margin-top:clamp(70px,14vh,160px);padding-bottom:clamp(16px,3vw,40px);overflow:hidden}
.cta__mark img{width:100%;height:auto;opacity:.95}
.foot{border-top:1px solid var(--hair);padding:36px var(--gut) calc(28px + env(safe-area-inset-bottom));max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;display:grid;gap:28px}
.foot__cols{display:grid;gap:24px}
@media (min-width:768px){.foot__cols{grid-template-columns:1fr auto}}
.foot__name{color:var(--paper);font-weight:500;margin-bottom:6px}
.foot__cols .mono{line-height:1.9}
.foot nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px;align-content:start}
@media (hover:hover){.foot nav a:hover,.foot .mono a:hover{color:var(--amber)}}
.foot__base{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-top:20px}
.motion{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--hair-2);border-radius:999px}
.motion .motion__state{color:var(--amber)}
@media (hover:hover){.motion:hover{border-color:var(--amber)}}

/* ---------- the Basepoint: travelling cube (behind main; js/site.js drives it) ---------- */
main,.foot{position:relative;z-index:1}
.orb{display:none}
.eng .orb{display:block;position:fixed;left:0;top:0;width:36vw;height:36vw;z-index:0;pointer-events:none;opacity:0;will-change:transform,opacity}
.orb video{width:100%;height:100%;object-fit:cover;background:transparent;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 99%);mask-image:radial-gradient(closest-side,#000 72%,transparent 99%)}

/* ---------- 05 work intro: the burst ---------- */
.sc--cloud .stage{min-height:var(--svh);display:grid;place-items:center;align-content:center;gap:18px;padding:clamp(90px,14vh,150px) var(--gut) 0;text-align:center}
.cloud{display:none}
.cloud__h{font-size:var(--fs-display);line-height:.95;letter-spacing:-.045em;position:relative;z-index:2}
.cloud__a,.cloud__b{display:inline-block}
.eng .sc--cloud{height:200vh}
.eng .sc--cloud .stage{padding:0;display:block}
.eng .cloud__eb{position:absolute;top:calc(var(--hdr-h) + 20px);left:var(--gut);z-index:2}
.eng .cloud__h{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;padding:0 var(--gut);text-shadow:0 6px 40px rgba(0,0,0,.6)}
.eng .cloud{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.cl{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;opacity:0;will-change:transform,opacity;border-radius:14px;overflow:hidden;background:var(--ink-1);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.cl img{display:block;width:100%;height:100%;object-fit:cover}
.cl--l{width:clamp(210px,22vw,380px);aspect-ratio:16/10}
.cl--m{width:clamp(140px,14vw,250px);aspect-ratio:4/3}
.cl--s{width:clamp(110px,10.5vw,190px);aspect-ratio:4/3}
.cl--xs{width:clamp(96px,8.5vw,150px);aspect-ratio:16/10}
.cl--chip{white-space:nowrap;padding:10px 14px;border-radius:999px;background:rgba(27,30,33,.94);border:1px solid var(--hair-2);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.cl--amber{background:var(--amber);color:var(--on-amber);border-color:transparent}
.cl--chip{z-index:1} /* the text chips always ride above the image cards, so a passing card never covers a label */
@media (max-width:767px){
  .eng .cloud__h{top:calc(var(--hdr-h) + 52px);bottom:calc(var(--lvh) - var(--svh) + 40px);transform:none;flex-direction:column;justify-content:space-between;font-size:clamp(44px,13vw,64px)}
  .cl--l{width:58vw}.cl--m{width:38vw}.cl--s{width:30vw}.cl--xs{width:26vw}
  .cl--chip{font-size:10.5px;padding:8px 11px}
}

/* ---------- cursor dot ---------- */
.cur{position:fixed;left:0;top:0;z-index:250;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cur.is-live{opacity:1}
.cur i{display:block;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#F4F1EA;transition:transform .35s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease)}
.cur.is-on i{transform:scale(2.6);background-color:transparent;box-shadow:inset 0 0 0 .6px #F4F1EA}

/* ---------- phones: simpler, native-feeling (vertical cards, shorter pins) ---------- */
@media (max-width:767px){
  .eng .sc--build{height:auto!important;padding-block:clamp(70px,10vh,120px)}
  .eng .sc--build .stage{position:relative;height:auto;overflow:visible;padding-bottom:0}
  .eng .sc--build .build__head{padding-top:0}
  .eng .sc--build .track{display:grid;width:auto;max-height:none;gap:16px;transform:none!important}
  .eng .card{width:auto}
  .eng .card__media{aspect-ratio:5/4;flex:none;max-height:none}
  .eng .card--next{min-height:150px}
  .eng .build__count,.eng .build__rail{display:none!important}
  .eng .card__body>p:not(.mono){display:block;-webkit-line-clamp:unset;overflow:visible}
  .eng .sc--hero{height:135vh}
  .eng .sc--say{height:150vh}
  .eng .sc--name{height:130vh}
}

/* =====================================================================================================
   Multi-page additions (home + what we build + pricing + privacy + 404 share everything above)
   ===================================================================================================== */

/* ---------- page to page: cross-document view transitions; the loader plays once per visit ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:280ms}
.ld-skip .ld{display:none!important}

/* ---------- nav: the current page ---------- */
.hdr__nav a[aria-current="page"]{color:var(--paper)}
.hdr__nav a[aria-current="page"]::after{transform:none}
.menu nav a[aria-current="page"]{color:var(--amber)}

/* ---------- one-shot reveals: [data-reveal] gets .is-in from site.js the first time it enters ---------- */
.eng [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.eng [data-reveal="fade"]{transform:none}
.eng [data-reveal].is-in{opacity:1;transform:none}
.eng [data-reveal-d="1"]{transition-delay:.08s}
.eng [data-reveal-d="2"]{transition-delay:.16s}
.eng [data-reveal-d="3"]{transition-delay:.24s}
.eng [data-reveal-d="4"]{transition-delay:.32s}

/* ---------- title: a sub-page opener (data-scene="title") ---------- */
.sc--title .stage{min-height:var(--svh);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:calc(var(--hdr-h) + 48px) var(--gut) clamp(40px,8vh,90px)}
.eng .sc--title{height:132vh}
.eng .sc--title .stage{padding-bottom:calc(var(--lvh) - var(--svh) + clamp(40px,8vh,90px))}
.title__media{position:absolute;inset:0;overflow:hidden;background:#0d0e10}
.title__vid{position:absolute;inset:0}
.title__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,22,24,.7) 0%,rgba(20,22,24,.15) 30%,rgba(20,22,24,.25) 55%,rgba(20,22,24,.94) 100%)}
.title__copy{position:relative;z-index:2;max-width:1500px;width:100%}
.title__kicker{display:flex;align-items:center;gap:10px;margin-bottom:clamp(14px,2.4vh,26px);color:var(--body)}
.title__kicker::before{content:"";width:8px;height:8px;background:var(--amber);flex:none;box-shadow:0 0 14px rgba(242,169,59,.7)}
.title__h{font-size:var(--fs-title);line-height:.93;letter-spacing:-.045em;margin-left:-.04em}
.title__lede{margin-top:clamp(16px,3vh,32px);max-width:46ch;font-size:clamp(16px,1.35vw,20px);color:var(--body)}
.title__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:clamp(18px,3.4vh,36px)}
.title__cue{position:absolute;right:var(--gut);bottom:calc(var(--lvh) - var(--svh) + clamp(28px,6vh,64px));z-index:2;display:none;align-items:center;gap:10px}
.title__cue i{width:1px;height:38px;background:linear-gradient(var(--amber),transparent);animation:cue 2.2s var(--ease-io) infinite}
@media (min-width:1024px){.title__cue{display:flex}}
.title__h .ln>span{transition:transform .8s var(--ease) .12s}
.title__h .ln:nth-child(2)>span{transition-delay:.18s}
.title__h .ln:nth-child(3)>span{transition-delay:.24s}
.title__kicker,.title__lede,.title__row{transition:opacity .6s .28s,transform .7s .28s var(--ease)}
.eng.is-loading .title__h .ln>span{transform:translateY(105%);animation:ld-show 0s 9.2s forwards}
.eng.is-loading .title__kicker,.eng.is-loading .title__lede,.eng.is-loading .title__row{opacity:0;transform:translateY(16px);animation:ld-show 0s 9.2s forwards}

/* ---------- feature: a content chapter (data-scene="feature"); media left/right, copy reveals ---------- */
.feat{position:relative;display:grid;gap:clamp(26px,4vw,72px);align-items:center;padding:clamp(70px,12vh,150px) var(--gut);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
@media (min-width:1024px){.feat{grid-template-columns:1.05fr 1fr}.feat--flip .feat__media{order:2}}
.feat__media{position:relative;aspect-ratio:5/4;border-radius:28px;overflow:hidden;background:#0d0e10}
.feat__vid{position:absolute;inset:0}
.feat__vid .vid,.feat__vid img{width:100%;height:100%;object-fit:cover}
.feat__n{color:var(--amber)}
.feat__copy h2{font-size:var(--fs-h2);margin:14px 0 18px}
.feat__copy>p:not(.mono){font-size:clamp(16px,1.3vw,19px);color:var(--body);max-width:52ch}
.feat__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.feat__price b{font-size:clamp(30px,3vw,46px);font-weight:300;color:var(--paper);letter-spacing:-.03em}
.feat__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.eng .feat .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.eng .feat.is-in .rv{opacity:1;transform:none}
.eng .feat.is-in .rv:nth-child(2){transition-delay:.08s}
.eng .feat.is-in .rv:nth-child(3){transition-delay:.16s}
.eng .feat.is-in .rv:nth-child(4){transition-delay:.24s}
.eng .feat.is-in .rv:nth-child(5){transition-delay:.32s}
.eng .feat.is-in .rv:nth-child(n+6){transition-delay:.4s}
.eng .feat__media{will-change:clip-path}

/* ---------- FAQ: native <details> accordion (.qa) ---------- */
.qa{border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;transition:color .3s var(--ease);display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:clamp(18px,2.6vh,26px) 0;color:var(--paper);font-size:clamp(19px,1.9vw,28px);font-weight:300;letter-spacing:-.015em;line-height:1.25}
.qa summary::-webkit-details-marker{display:none}
.qa summary .mono{color:var(--amber);min-width:26px}
.qa summary::after{content:"";width:16px;height:16px;align-self:center;background:linear-gradient(var(--amber),var(--amber)) center/16px 1.5px no-repeat,linear-gradient(var(--amber),var(--amber)) center/1.5px 16px no-repeat;transition:transform .35s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.qa summary:hover{color:var(--amber-hi)}}
.qa__a{padding:0 0 clamp(20px,3vh,30px) 44px;max-width:70ch;color:var(--body);font-size:clamp(15.5px,1.2vw,18px)}
@media (max-width:600px){.qa__a{padding-left:0}}
.sc--faq{padding:clamp(80px,13vh,160px) var(--gut);max-width:calc(1100px + 2 * var(--gut));margin:0 auto}
.faq__head{margin-bottom:clamp(28px,5vh,56px)}
.faq__cta{margin-top:clamp(26px,4vh,40px)}
.tlink{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){.tlink:hover{color:var(--amber-hi)}}

/* ---------- chrome additions: header Call link, menu contact, richer footer ---------- */
.hdr__call{display:none;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--hair-2);border-radius:999px;font-size:14px;color:var(--paper);transition:border-color .25s var(--ease),color .25s var(--ease)}
@media (hover:hover){.hdr__call:hover{border-color:var(--amber);color:var(--amber-hi)}}
.hdr__call-num{display:none}
@media (min-width:1024px){.hdr__call{display:inline-flex}}
@media (min-width:1280px){.hdr__call-num{display:inline}.hdr__call-lbl::after{content:" ·"}}
.menu__foot{display:grid;gap:14px;line-height:1.6}
.menu__contact{display:flex;flex-wrap:wrap;gap:10px}
.menu__contact .btn{flex:1 1 auto}
.menu .motion{justify-self:start}
@media (min-width:768px){.foot__cols{grid-template-columns:1.3fr 1fr auto}}
.foot__tile{width:44px;height:44px;margin-bottom:14px;border-radius:10px}
.foot__h{color:var(--amber);margin-bottom:10px}
.foot__where p:not(.mono){color:var(--body);line-height:1.9}
.foot nav{grid-template-columns:repeat(2,auto)}
.foot nav .foot__h{grid-column:1/-1;margin-bottom:0}

/* ---------- motion off / no JS: composed static versions of the scroll-only scenes ---------- */
html:not(.eng) .mq{font-size:clamp(34px,6vw,90px);white-space:normal}
html:not(.eng) .mq__row{width:auto;flex-wrap:wrap}
html:not(.eng) .mq__row span+span{display:none}
html:not(.eng) .mq__row span{flex-wrap:wrap;row-gap:.1em}
html:not(.eng) .sc--cloud .stage{min-height:0;padding-bottom:clamp(60px,10vh,120px)}
html:not(.eng) .cloud{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:100%;max-width:var(--max);margin:clamp(28px,5vh,48px) auto 0}
html:not(.eng) .cl{position:relative;left:auto;top:auto;translate:none;opacity:1;width:auto}
html:not(.eng) .cl--chip{display:none}
html:not(.eng) .card--next{grid-column:1/-1;min-height:0}

/* ---------- portrait phones: frame the hero loop so the cube sits high and the headline sits clear below it;
   the extra height above also hides the frame edge while the hero sinks on scroll ---------- */
@media (max-width:767px) and (orientation:portrait){
  /* the portrait film (the same translucent amber cube as everywhere else) fills the height; lifted so the cube sits in
     the top third, its foot fading into the page */
  .sc--hero .hero__vid video.vid{height:100%;transform:translateY(-18%);object-position:24% 50%;-webkit-mask-image:linear-gradient(#000 64%,transparent 82%);mask-image:linear-gradient(#000 64%,transparent 82%)}
  .eng .sc--cloud{height:160vh}
}

/* ---------- shared fixes requested by the page builders ---------- */
html{scroll-padding-top:var(--hdr-h)}
/* a #hash landing on a pinned scene starts at the pin (0), not under the header: the browser's own fragment scroll, the head
   script's pagereveal landing and site.js arrive() all read this, so they agree and nothing jumps */
.eng :is([data-scene=hero],[data-scene=title],[data-scene=say],[data-scene=track],[data-scene=steps],[data-scene=cloud],[data-scene=name]):not([data-mode=pass]){scroll-margin-top:calc(-1 * var(--hdr-h))}
.foot nav a[aria-current="page"]{color:var(--amber)}
.still .title__cue i,.still .hero__cue i{animation:none;transform:none}
.hdr.is-hid:focus-within{transform:none}
.still .hdr{transition:none}
/* no JavaScript: a solid header (nothing to toggle it) and no forced native controls on the decorative loops */
html:not(.js) .hdr::before{opacity:1}
html:not(.js) video.vid::-webkit-media-controls{display:none!important}
/* menu on short screens: scrolls inside itself and tightens so Call/Text, email and Motion stay reachable */
.menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;gap:24px}
@media (max-height:760px){.menu{padding-top:calc(var(--hdr-h) + 12px);padding-bottom:20px}.menu nav a{font-size:clamp(24px,6.6vw,30px);padding:9px 0}}
/* while the menu is open the header is solid, so scrolled menu links never slide under the logo */
.hdr.is-menu::before{opacity:1;background:#0e0f11;-webkit-backdrop-filter:none;backdrop-filter:none}
html:not(.js) .hdr__menu{display:none}
/* motion off / no JS: the work-intro grid is held to the page width (an auto column grew to the image grid's width) */
html:not(.eng) .sc--cloud .stage{grid-template-columns:minmax(0,1fr)}
html:not(.eng) .mq{padding-inline:var(--gut)}

/* =====================================================================================================
   Round 1 polish (judge loop): menu motion, pinned phone header, page curtain, HUD detail, one grid
   ===================================================================================================== */

/* ---------- menu: the panel drops from behind the header, links rise in a short stagger; closes faster ---------- */
/* opens with an ease-out (the panel moves on the first frame after the tap, settles in ~0.6 s); closes on the curtain curve */
.eng .menu{visibility:hidden;transform:translate3d(0,-100%,0);box-shadow:0 1px 0 rgba(242,169,59,.55);
  transition:transform .36s var(--ease-curtain),visibility 0s .36s}
.eng .menu.is-open{visibility:visible;transform:none;transition:transform .5s var(--ease-out),visibility 0s}
.eng .menu nav a,.eng .menu__foot{opacity:0;transform:translate3d(0,22px,0);transition:opacity .16s var(--ease),transform .26s var(--ease)}
.eng .menu.is-open nav a,.eng .menu.is-open .menu__foot{opacity:1;transform:none;
  transition:opacity .35s var(--ease) calc(.08s + var(--k,0) * .03s),transform .5s var(--ease-out) calc(.08s + var(--k,0) * .03s)}
.menu nav a:nth-child(2){--k:1}.menu nav a:nth-child(3){--k:2}.menu nav a:nth-child(4){--k:3}.menu nav a:nth-child(5){--k:4}
.menu nav a:nth-child(6){--k:5}.menu nav a:nth-child(7){--k:6}.menu__foot{--k:7}
.menu nav a .mono{min-width:2.4em}
.menu nav a::after{content:"\2192";margin-left:auto;font-size:.5em;color:var(--mist);align-self:center;transition:transform .3s var(--ease),color .3s}
@media (hover:hover){.menu nav a:hover::after{transform:translateX(4px);color:var(--amber)}}

/* ---------- header on phones: stays pinned; Call becomes a round phone button next to Talk to us ---------- */
.hdr__call-ico{display:block;width:17px;height:17px;flex:none;color:var(--amber)}
@media (min-width:1024px){.hdr__call-ico{display:none}}
@media (max-width:1023px){
  .hdr{gap:10px}
  .hdr__logo{display:flex;align-items:center;min-height:44px}
  .hdr__logo img{width:clamp(108px,30vw,140px)}
  .hdr__call{display:inline-flex;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;background:rgba(20,22,24,.35)}
  .hdr__call-lbl,.hdr__call-num{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hdr__cta{min-height:44px}
}
@media (max-width:339px){.hdr__call{display:none}}

/* ---------- page to page: the new page rises over the old one (amber leading edge); the header stays put ---------- */
@media (prefers-reduced-motion:no-preference){
  /* the header is named only while a transition runs (the head script sets it in pageswap/pagereveal and clears it
     when the transition finishes): a named element is a backdrop root, so a permanent name killed the bar's blur */
  ::view-transition-group(bp-hdr){animation:none}
  /* the header holds its place and cross-fades old to new in one short beat (an open menu's X turns into the new
     page's menu icon, a solid bar into a clear one) instead of the old one lingering for the whole curtain */
  ::view-transition-old(bp-hdr){animation:bp-fade-out .36s var(--ease) both}
  ::view-transition-new(bp-hdr){animation:bp-fade-in .36s var(--ease) both}
  ::view-transition-old(root){animation:bp-vt-out .56s var(--ease-curtain) both}
  ::view-transition-new(root){animation:bp-vt-in .64s var(--ease-curtain) both;box-shadow:0 -1px 0 var(--amber),0 -60px 120px -20px rgba(0,0,0,.7)}
}
@keyframes bp-vt-out{to{transform:translate3d(0,-9vh,0);opacity:.25}}
@keyframes bp-vt-in{from{transform:translate3d(0,100vh,0)}}
@keyframes bp-fade-out{to{opacity:0}}
@keyframes bp-fade-in{from{opacity:0}}

/* ---------- a long in-page jump dips the page out and back in instead of gliding through every scene ---------- */
.eng main,.eng .foot{transition:opacity .26s var(--ease)}
/* an ink cover over the page (the header stays): main itself stays painted underneath, so the landing scene is rasterised
   while covered instead of on the first frame of the fade back */
body::after{content:"";position:fixed;inset:0;z-index:44;background:var(--ink-0);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility 0s .3s}
.is-jump body::after{opacity:1;visibility:visible;transition:opacity .12s var(--ease),visibility 0s}
.is-jump .orb{opacity:0!important}
/* a page-to-page landing on a #hash keeps the cube out of the incoming snapshot, then fades it in where it belongs */
.vt-hash .orb{opacity:0!important}
.vt-orb .orb{transition:opacity .5s var(--ease)}

/* ---------- HUD detail: eyebrow rules ending in a mono annotation; amber corner ticks on media frames ---------- */
.eyebrow__hud{display:none}
@media (min-width:1024px){
  .eyebrow:has(.eyebrow__hud)::after{content:"";order:1;flex:1 1 auto;height:1px;margin-left:10px;background:linear-gradient(90deg,var(--hair-2),var(--hair) 70%,rgba(244,241,234,.04))}
  .eyebrow__hud{display:block;order:2;color:var(--mist);letter-spacing:.12em;white-space:nowrap}
  .eyebrow__hud::before{content:"";display:inline-block;width:5px;height:5px;margin:0 10px 1px 0;border:1px solid var(--amber);vertical-align:middle}
  .eyebrow__hud:empty::before{margin-right:0} /* a label that ends in the bare tick (no counter) */
}
.card__media::after,.job__img::after,.feat__media::after{content:"";position:absolute;inset:12px;z-index:2;pointer-events:none;opacity:.5;
  --c:var(--amber);--l:11px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.job__tag{position:absolute;left:14px;top:14px;z-index:3;padding:7px 11px;border-radius:999px;background:rgba(20,22,24,.74);border:1px solid var(--hair-2);color:var(--paper);font-size:11px}
@media (min-width:768px){.job__tag{left:20px;top:20px}}

/* ---------- one grid: pricing + FAQ use the full content width; on desktop the heading holds the left third ---------- */
.sc--price,.sc--faq{max-width:calc(var(--max) + 2 * var(--gut))}
@media (min-width:1024px){
  .sc--price{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 clamp(32px,4vw,72px);align-items:start}
  .price__head{position:sticky;top:calc(var(--hdr-h) + 40px);margin-bottom:0}
  .sc--faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;gap:0 clamp(32px,4vw,72px);align-items:start}
  .faq__head{grid-column:1;grid-row:1;margin-bottom:0}
  .sc--faq .qa{grid-column:2;grid-row:1/3}
  .faq__cta{grid-column:1;grid-row:2;justify-self:start}
}

/* ---------- FAQ: the answer opens at once and rises in (transform/opacity only, no height animation); Motion off: instant ---------- */
.eng .qa details[open] .qa__a{animation:qa-in .55s var(--ease) both}
@keyframes qa-in{from{opacity:0;transform:translate3d(0,-8px,0)}}

/* ---------- hero on short laptops (1280x720, 1366x768): the cube sits higher and the type is capped, so the kicker
   clears the cube ---------- */
@media (min-width:1024px){.hero__vid{inset:-7% 0 0 0}}
@media (min-width:1024px) and (max-height:820px){
  .hero__vid{inset:-15% 0 0 0}
  .hero__h1{font-size:clamp(44px,min(7.3vw,12vh),122px)}
}

/* ---------- statement on phones: the text sits low, the cube holds the top ---------- */
@media (max-width:767px){
  .eng .sc--say .stage{justify-content:flex-end;padding-bottom:calc(var(--lvh) - var(--svh) + clamp(28px,6vh,56px))}
}

/* ---------- work: the screenshot rises over the end of the card burst (no lone-cube screen in between) ---------- */
.eng .sc--cloud + .sc--work{margin-top:-40vh;padding-top:clamp(40px,6vh,70px)} /* home only: the work rises over the end of the card burst */
@media (max-width:767px){.eng .sc--cloud + .sc--work{margin-top:-20vh}}

/* ---------- motion off: the work intro is a composed grid, not a strip of thumbnails ---------- */
html:not(.eng) .cl.dt,html:not(.eng) .cl.nost{display:none}
@media (max-width:767px){html:not(.eng) .cl.no-m{display:none}} /* phones: the Platinum screenshot shows once, as the work card below */
html:not(.eng) .cloud{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html:not(.eng) .cl{aspect-ratio:4/3;border-radius:18px}
html:not(.eng) .cl--l{grid-column:1/-1;aspect-ratio:16/10}
@media (min-width:768px){
  html:not(.eng) .cloud{grid-template-columns:repeat(4,minmax(0,1fr))}
  html:not(.eng) .cl--l{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* ---------- phones: information-carrying mono is readable, targets are 44px ---------- */
@media (max-width:767px){
  .card__price,.job__meta .mono,.flat dd .mono,.feat__price .mono{font-size:12px}
  .foot nav a{padding:10px 0}
  .foot nav{gap:0 40px}
  .foot__id .mono a{display:inline-block;padding:10px 0}
  .motion{min-height:44px}
  .sc--faq{padding-bottom:clamp(48px,8vh,80px)}
  .sc--cta{padding-top:clamp(48px,8vh,80px)}
}
/* phones: the header is always pinned now, so it needs to be nearly opaque (no text showing through) */
@media (max-width:1023px){.hdr::before{background:var(--ink-0)}}

/* =====================================================================================================
   Effects stage (Relay reference): amber light fibres, the serif accent, the amber moment, the product card
   ===================================================================================================== */

/* ---------- light fibres: js/fibers.js draws them live; fixed to the viewport, behind the content ---------- */
.fib{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease)}
main>.fib{z-index:-1}                 /* no slot on the page: first in main's paint order, under every section */
.stage>.fib{z-index:1}                /* the home hero slot: over the film, under the headline (the copy is z-index 2) */
.fib.is-on{opacity:1}
/* everything that follows the hero slot is positioned, so it paints over the fibre layer */
.rx__after{position:relative}
/* motion off, no JavaScript, no WebGL: one composed still frame of the light. It is atmosphere, never a backdrop for
   copy: it sits in the first screen only (absolute, not fixed, so it never runs under later sections or the footer),
   keeps to the right margin (the text column is masked out) and fades out at its foot. Phones: a short band at the top. */
html:not(.eng) main::before,.fib-no main::before{content:"";position:absolute;left:0;top:0;width:100%;height:100vh;height:100svh;z-index:-1;pointer-events:none;
  background:url(../assets/fibers-still.webp) 100% 50%/cover no-repeat;opacity:.5;
  -webkit-mask-image:radial-gradient(54% 74% at 100% 46%,#000 30%,transparent 100%);mask-image:radial-gradient(54% 74% at 100% 46%,#000 30%,transparent 100%)}
@media (max-width:767px) and (orientation:portrait){html:not(.eng) main::before,.fib-no main::before{height:44svh;
  background:url(../assets/fibers-still-m.webp) 50% 0/100% auto no-repeat;
  -webkit-mask-image:linear-gradient(#000 30%,transparent 92%);mask-image:linear-gradient(#000 30%,transparent 92%)}}
/* the footer is an opaque base (full bleed): the strands fade into it at the top and never run behind its links */
.foot::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;
  background:linear-gradient(rgba(20,22,24,.6),var(--ink-0) 90px)}
/* small HUD / mono labels that can sit over the light keep the ink halo the product-card labels use */
.eyebrow,.title__cue{text-shadow:0 0 14px var(--ink-0),0 0 5px var(--ink-0),0 0 2px var(--ink-0)}

/* ---------- 03 AI receptionist: the product card (a node flow + the call log) ---------- */
@media (min-width:1024px){.sc--rx .stage{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}}
.rx__ui{position:relative;z-index:1;width:100%;max-width:640px;justify-self:center}
.ui{position:relative;border-radius:22px;border:1px solid rgba(244,241,234,.12);overflow:hidden;
  background:linear-gradient(180deg,rgba(31,34,38,.94),rgba(17,19,21,.95));
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.ui::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,169,59,.75),transparent)}
.ui__bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--hair)}
.ui__name{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:14px;color:var(--paper);white-space:nowrap}
.ui__mk{width:9px;height:9px;flex:none;background:var(--amber);box-shadow:0 0 12px rgba(242,169,59,.75)}
.rx__tag,.rx__foot{text-shadow:0 0 14px var(--ink-0),0 0 5px var(--ink-0),0 0 2px var(--ink-0)}
.ui__meta{color:var(--mist);white-space:nowrap}
.ui__live{display:flex;align-items:center;gap:7px;color:var(--amber);white-space:nowrap;
  min-width:calc(13 * (1ch + .14em) + 13px)} /* as wide as its longest label ("Handed to you"): a step change never moves the dot */
.ui__live i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(242,169,59,.9)}
.eng .ui__live i{animation:ui-live 1.8s var(--ease-io) infinite}
@keyframes ui-live{50%{opacity:.25}}
.ui__flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px;padding:26px 30px 28px;
  background:radial-gradient(rgba(244,241,234,.075) 1px,transparent 1.3px) 0 0/18px 18px}
.ui__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ui__wires path{fill:none;stroke:rgba(244,241,234,.2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ui__wires .alt{stroke-dasharray:3 4}
.ui__wires .lit{stroke:var(--amber);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.nd{position:relative;z-index:1;display:grid;align-content:center;gap:4px;min-height:60px;padding:11px 13px;border-radius:12px;
  background:#16181b;border:1px solid rgba(242,169,59,.42);transition:border-color .5s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease)}
.nd b{font-size:13.5px;font-weight:500;line-height:1.2;color:var(--paper)}
.nd .mono{font-size:10.5px;letter-spacing:.1em;color:var(--mist)}
.nd::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--amber);border:1px solid var(--amber);transition:background .4s,border-color .4s,box-shadow .4s}
.nd--1{grid-area:1/1}.nd--2{grid-area:1/2}.nd--3{grid-area:1/3}.nd--4{grid-area:2/3}.nd--5{grid-area:2/2}
.nd--x{grid-area:2/1;border:1px dashed rgba(244,241,234,.22);background:rgba(22,24,27,.82)}
.nd--x::before{background:#16181b;border-color:rgba(244,241,234,.35)}
.ui__log{border-top:1px solid var(--hair);padding:14px 18px 10px}
.ui__logh{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
.ui__rows{position:relative;overflow:hidden}
.ui__in{position:relative}
.lg{display:grid;grid-template-columns:7px 62px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid rgba(244,241,234,.06);font-size:13.5px;line-height:1.35;color:var(--paper)}
.lg:first-child{border-top:0}
.lg i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.lg .mono{font-size:10.5px;letter-spacing:.08em}
.lg>span:nth-of-type(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg>span:last-child{color:var(--amber)}
/* the call step by step (data-step 1..4 on the stage) while the section has .is-sim (site.js: the loop with motion on, a step
   tap with Motion off). Without it (Motion off, no JS) the card shows the whole call */
.is-sim .nd{opacity:.5;border-color:rgba(244,241,234,.13)}
.is-sim .nd::before{background:#16181b;border-color:rgba(244,241,234,.3)}
.is-sim .nd--x{opacity:.42;border-color:rgba(244,241,234,.2)}
.ui__wires .lit{transition:stroke-dashoffset .7s var(--ease)}
.is-sim .ui__wires .lit{stroke-dashoffset:1}
.is-sim [data-step="1"] .nd--1,.is-sim [data-step="2"] .nd--3,.is-sim [data-step="3"] .nd--4,.is-sim [data-step="4"] .nd--5{opacity:1;border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(242,169,59,.1),0 0 34px -8px rgba(242,169,59,.75)}
.is-sim :is([data-step="2"],[data-step="3"],[data-step="4"]) :is(.nd--1,.nd--2),.is-sim :is([data-step="3"],[data-step="4"]) .nd--3,.is-sim [data-step="4"] .nd--4{opacity:.92;border-color:rgba(242,169,59,.4)}
.is-sim [data-step="1"] .nd--1::before,.is-sim :is([data-step="2"],[data-step="3"],[data-step="4"]) :is(.nd--1,.nd--2,.nd--3)::before,.is-sim :is([data-step="3"],[data-step="4"]) .nd--4::before,.is-sim [data-step="4"] .nd--5::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 8px rgba(242,169,59,.9)}
.is-sim [data-step="2"] .nd--3{transition-delay:.35s}
.is-sim :is([data-step="2"],[data-step="3"],[data-step="4"]) .ui__wires .w12{stroke-dashoffset:0}
.is-sim :is([data-step="2"],[data-step="3"],[data-step="4"]) .ui__wires .w23{stroke-dashoffset:0;transition-delay:.25s}
.is-sim :is([data-step="3"],[data-step="4"]) .ui__wires .w34{stroke-dashoffset:0}
.is-sim [data-step="4"] .ui__wires .w45{stroke-dashoffset:0}
.lg{transition:opacity .5s var(--ease),transform .6s var(--ease)}
.is-sim .lg{opacity:0;transform:translate3d(0,10px,0)}
.is-sim [data-step="1"] .lg[data-at="1"],
.is-sim [data-step="2"] .lg:is([data-at="1"],[data-at="2"]),
.is-sim [data-step="3"] .lg:is([data-at="1"],[data-at="2"],[data-at="3"]),
.is-sim [data-step="4"] .lg{opacity:1;transform:none}
.is-sim [data-step="2"] .lg[data-at="2"]+.lg[data-at="2"]{transition-delay:.3s}
.ui__in{transition:transform .75s var(--ease)}
@media (max-width:1023px){.rx__ui{max-width:560px}}
/* phones: the flow is a vertical list on one rail (no wires, no branch) and the log shows the newest rows */
@media (max-width:767px){
  .ui{border-radius:18px}
  .ui__bar{padding:10px 14px;gap:10px}
  .ui__meta{display:none}
  .ui__flow{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 14px 12px 34px}
  .ui__flow::before{content:"";position:absolute;left:20px;top:22px;bottom:22px;width:1px;background:rgba(244,241,234,.16)}
  .ui__wires,.ui__flow .nd--x{display:none}
  .nd{grid-area:auto;min-height:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:10px}
  .nd b{font-size:13px}
  .nd .mono{font-size:9.5px;text-align:right}
  .nd::before{left:-18px}
  .ui__log{padding:10px 14px 6px}
  .lg{grid-template-columns:6px 54px minmax(0,1fr);gap:9px;padding:7px 0;font-size:13px}
  .lg>span:last-child{display:none}
}
@media (max-width:767px) and (max-height:700px){.ui__bar{display:none}.nd{padding:6px 10px}.ui__flow{gap:4px}}

/* ---------- 04 the amber moment: one full-bleed panel with dark type (the amber scene opens it) ---------- */
.sc--amber.sc--mq{padding:0;overflow:hidden;overflow:clip}
.amb{position:relative;padding:clamp(80px,13vh,150px) 0 clamp(70px,11vh,130px);color:var(--on-amber);
  background:radial-gradient(rgba(26,19,7,.14) 1px,transparent 1.4px) 0 0/24px 24px,linear-gradient(160deg,#F6B651,var(--amber) 45%,#E99A2C)}
.eng .amb{transform-origin:50% 50%;will-change:transform}
@media (min-width:768px) and (hover:hover){.eng .amb{will-change:clip-path}}
.amb__lbl{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 clamp(26px,5vh,56px);color:rgba(26,19,7,.72)}
.amb__lbl::before,.amb__lbl::after{content:"";width:28px;height:1px;background:rgba(26,19,7,.4)}
.amb .mq{color:var(--on-amber);margin-bottom:clamp(44px,8vh,96px)}
.amb .mq__row i{background:var(--on-amber)}
.amb .mq__row--out{color:transparent;-webkit-text-stroke:1.2px rgba(26,19,7,.62)}
.amb .mq__row--out i{background:transparent;border:1.2px solid var(--on-amber)}
.amb .nums li{border-top-color:rgba(26,19,7,.24)}
.amb .nums b{color:var(--on-amber);font-weight:300}
.amb .nums span{color:rgba(26,19,7,.74)}
.amb ::selection{background:var(--on-amber);color:var(--amber)}

/* =====================================================================================================
   Round 2 (judge loop): a header that never leaves, hovers, one cube, readable phones, quieter Motion off
   ===================================================================================================== */

/* ---------- header: never hides. Past the first screen on desktops it turns compact: the page links fold away,
   the logo, Call and Talk to us stay (and the bar turns solid). Scrolling up or keyboard focus brings the links back ---------- */
@media (min-width:1024px){
  .hdr__nav{transition:opacity .32s var(--ease),transform .4s var(--ease),visibility 0s}
  /* the links stay clickable for as long as they can be seen (they took no clicks while still fading), and fade quickly */
  .hdr.is-compact .hdr__nav{opacity:0;transform:translate3d(0,-6px,0);visibility:hidden;
    transition:opacity .16s var(--ease),transform .4s var(--ease),visibility 0s .16s}
  .hdr.is-compact::before{opacity:1}
}

/* ---------- page to page, going BACK: the curtain runs the other way (the earlier page drops in from above) ---------- */
@media (prefers-reduced-motion:no-preference){
  html:active-view-transition-type(back)::view-transition-old(root){animation-name:bp-vt-out-back}
  html:active-view-transition-type(back)::view-transition-new(root){animation-name:bp-vt-in-back;box-shadow:0 1px 0 var(--amber),0 60px 120px -20px rgba(0,0,0,.7)}
}
@keyframes bp-vt-out-back{to{transform:translate3d(0,9vh,0);opacity:.25}}
@keyframes bp-vt-in-back{from{transform:translate3d(0,-100vh,0)}}

/* ---------- hovers (mouse only, motion on): one transform/opacity language ----------
   buttons: a fill sweeps in from the left and the arrow nudges; media: the picture leans in, the corner ticks close in */
@media (hover:hover) and (pointer:fine){
  .eng .btn{position:relative;overflow:hidden;isolation:isolate}
  .eng .btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--amber-hi);
    transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
  .eng .btn--ghost::before{background:rgba(242,169,59,.13)}
  .eng .btn:hover::before{transform:none;transform-origin:0 50%}
  .eng .btn--amber:hover{background:var(--amber)}
  .eng .btn>span[aria-hidden]{display:inline-block;transition:transform .35s var(--ease)}
  .eng .btn:hover>span[aria-hidden]{transform:translate3d(.25em,0,0)}
  .eng .job__img img,.eng .card__media .vid{transition:scale .9s var(--ease)}
  .eng .job:hover .job__img img{scale:1.035}
  .eng .card:hover .card__media .vid{scale:1.045}
  .eng .card{transition:border-color .4s var(--ease)}
  .eng .card:not(.card--next):hover{border-color:rgba(242,169,59,.38)}
  .eng .card__media::after,.eng .job__img::after{transition:transform .45s var(--ease),opacity .45s var(--ease)}
  .eng .card:hover .card__media::after,.eng .job:hover .job__img::after{transform:scale(.975);opacity:.95}
  .eng .card--next{transition:background .3s,transform .45s var(--ease)}
  .eng .card--next:hover{transform:translate3d(0,-4px,0)}
}

/* ---------- Motion off: nothing eases, not even small icon turns (the menu icon, the FAQ plus, page widgets) ---------- */
.still *,.still *::before,.still *::after{transition-duration:0s!important;transition-delay:0s!important}

/* ---------- hero kicker: the four services read in one glance; items never break inside ---------- */
.hero__ks .k{white-space:nowrap}
@media (max-width:767px){
  .hero__kicker{align-items:flex-start;font-size:12px;letter-spacing:.08em;line-height:1.5;color:var(--paper)}
  .hero__kicker .dot{margin-top:.42em}
  .hero__kicker .k--where{display:none} /* the location is in the statement and the DATUM line */
}

/* ---------- breathing room: the compliance row never touches the amber panel ---------- */
.rx__after{padding-bottom:clamp(64px,11vh,128px)}

/* ---------- phones: readable labels, 44px targets, a bigger statement ---------- */
@media (max-width:767px){
  .eyebrow,.card__n,.foot .mono,.menu__foot .mono,.cta__mail{font-size:12px}
  .nd .mono,.lg .mono{font-size:11px;letter-spacing:.06em}
  .ui__logh{font-size:11px}
  .foot__id .mono a,.cta__mail a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .say__text{font-size:clamp(25px,min(8.2vw,5.2svh),34px);line-height:1.12}
  .eng .sc--hero + .sc--say{margin-top:-25vh} /* the statement's empty top rides under the end of the hero: no dead band */
}
/* phones: the work section is opaque and slides over the end of the card burst (the burst stays until it is covered) */
@media (max-width:767px){
  .eng .sc--cloud + .sc--work{position:relative;z-index:1}
  .eng .sc--cloud + .sc--work::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;
    background:linear-gradient(rgba(20,22,24,0),var(--ink-0) 72px)}
}

/* =====================================================================================================
   Round 3 (judge loop): calmer header over amber, no dead bands, one type scale, quieter loops, neater hand-offs
   ===================================================================================================== */

/* ---------- header over the amber panel: ink-solid (the see-through bar turned olive-brown there); site.js sets .is-amb ---------- */
.hdr.is-amb::before{opacity:1;background:rgba(20,22,24,.94);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- loader: the count appears once it can move (never a stuck 0% while the script loads) ---------- */
.eng .ld:not(.is-run) .ld__pct{opacity:0}
.ld__pct{transition:opacity .25s}

/* ---------- labels that carry information read a size up; the hero kicker says what is sold, so it leads ---------- */
@media (min-width:768px){
  .hero__kicker,.title__kicker{font-size:13px;letter-spacing:.08em}
  .card__price,.rx__tag,.rx__foot,.ui__meta{font-size:12px}
}
.hero__datum{text-shadow:0 0 14px var(--ink-0),0 0 5px var(--ink-0),0 0 2px var(--ink-0)}

/* ---------- 01 statement: one display statement, a lede under it, the amber payoff on its own line ---------- */
.say__lede{margin-top:clamp(18px,3vh,30px);max-width:46ch;font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--body)}
.say__pay{margin-top:clamp(18px,3.2vh,36px)}
/* the lede starts where site.js takes it from (dim and a touch low), so it never shows in full and then drops back */
.eng .say__lede{will-change:opacity,transform;opacity:.2;transform:translate3d(0,14px,0)}
@media (min-width:768px){.eng .sc--hero + .sc--say{margin-top:-45vh}} /* the statement rises while the film dissolves: no empty screen after the hero */
@media (max-width:767px){
  .eng .sc--hero{height:125vh}
  /* (-30vh since the longer lede, owner 2026-10-05: the taller statement block would otherwise rise into the hero's buttons) */
  .eng .sc--hero + .sc--say{margin-top:-30vh}
  .say__lede{font-size:16px;margin-top:14px}
  .say__pay{margin-top:14px}
}

/* the statement slides up over the end of the hero (negative margin above) and has no controls of its own, so it never
   takes the hero's taps: on phones its sticky stage sat over "See it answer a call" / "Talk to us" (main session fix, r4) */
.eng .sc--hero + .sc--say{pointer-events:none}
.eng .sc--hero + .sc--say :is(a,button,input,select,textarea,summary,[tabindex]){pointer-events:auto}

/* ---------- 03 the receptionist demo label sits on a small ink plate (the light never runs through it) ---------- */
.rx__tag{display:table;margin-inline:auto;padding:6px 12px;border-radius:999px;background:rgba(20,22,24,.88);border:1px solid var(--hair)}

/* ---------- 05 the burst: the work sheet rises over it (opaque, like phones); the cards stay until it covers them ---------- */
@media (min-width:768px){
  .eng .sc--cloud + .sc--work{margin-top:-50vh;position:relative;z-index:1}
  .eng .sc--cloud + .sc--work::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;
    background:linear-gradient(rgba(20,22,24,0),rgba(20,22,24,.92) 90px,var(--ink-0) 160px)}
}
@media (max-width:767px){
  .eng .sc--cloud + .sc--work{margin-top:-58vh}
  /* phones: 'Built for businesses.' is one block under the label, so both words are on screen as the burst arrives */
  .eng .cloud__h{bottom:auto;justify-content:flex-start;gap:0;line-height:.98}
}
@media (max-width:767px) and (orientation:portrait){.eng .sc--cloud{height:140vh}}
/* Motion off: the large tile keeps the client site's headline and logo (its left edge) in frame */
html:not(.eng) .cl--l img{object-position:left top}
.sc--work{padding-bottom:clamp(40px,6vh,72px)}

/* ---------- 06 home pricing: shorter cards, the button at the foot; phones get one compact list ---------- */
.sc--price{padding-top:clamp(56px,9vh,110px)}
.sc--price .tier ul{align-content:start}
@media (min-width:768px){
  .eng .sc--price .tier{min-height:min(52vh,430px);grid-template-rows:auto auto 1fr auto}
  .sc--price .tier>.btn{align-self:end}
}
@media (max-width:767px){
  .sc--price .tier ul{display:none}
  .eng .sc--price .tier{position:relative;top:auto}
  .sc--price .tier{padding:20px 20px 22px;gap:12px;border-radius:22px}
  .sc--price .tier__price{font-size:clamp(40px,12vw,54px)}
  .sc--price .tier__sub{font-size:16px}
  .sc--price .flat div{padding:12px 0}
  .sc--price .stack{gap:12px}
}

/* ---------- 07 the silk: the paragraph holds its contrast over the bright highlights ---------- */
.name__shade{background:radial-gradient(75% 65% at 50% 52%,rgba(12,13,14,.82),rgba(12,13,14,.46) 70%,rgba(12,13,14,.22))}
.name__body{text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 26px rgba(0,0,0,.8)}

/* ---------- 09 the closing wordmark sits on an ink base: the light and the cube settle behind it, never through it ---------- */
.sc--cta{overflow:visible}
.cta__mark{position:relative;z-index:0}
.cta__mark::before{content:"";position:absolute;z-index:-1;top:-14vh;bottom:0;left:calc(50% - 50vw);width:100vw;pointer-events:none;
  background:linear-gradient(rgba(20,22,24,0),rgba(20,22,24,.9) 10vh,var(--ink-0) 14vh)}

/* ---------- phones: shorter pins (the home is simpler to thumb through) ---------- */
@media (max-width:767px){
  .eng .sc--say{height:125vh}
  .eng .sc--name{height:115vh}
}

/* ---------- FAQ: the answer fades up a beat after the rows below start gliding (site.js animates the rows) ---------- */
.eng .qa details[open] .qa__a{animation-delay:.06s}

/* ---------- endless CSS loops rest while their section is off screen (site.js marks sections .in-view) ---------- */
.eng main>:not(.in-view),.eng main>:not(.in-view) *,.eng main>:not(.in-view) *::before,.eng main>:not(.in-view) *::after{animation-play-state:paused!important}

/* ---------- a deep landing (#hash from another page): the head script reveals what is on screen before the first frame,
   with transitions held for that one style pass, so the curtain carries a finished composition ---------- */
.vt-pre [data-reveal],.vt-pre .feat .rv,.vt-pre .feat{transition:none!important}
/* desktop: a shorter statement pin (it lights while rising), and the track head follows straight on (no empty half screen) */
@media (min-width:768px){
  .eng .sc--say{height:150vh}
  .eng .sc--say + .sc--build{margin-top:-20vh}
}

/* =====================================================================================================
   Round 4 (judge loop): one composed page end, a press that answers, a readable offer, a simpler phone home
   ===================================================================================================== */

/* ---------- the closing wordmark clips only below: its ink base fades the light out full-bleed above the mark (the
   overflow clip cut the strands and the cube on a hard line at the wordmark's top) ---------- */
.sc--cta .cta__mark{overflow:visible;clip-path:inset(-40vh -100vw 0 -100vw)}

/* ---------- a press on a link to another page answers at once: the page eases back a touch and a thin amber bar runs
   under the header while the next page loads (opacity only on main: a transform would unpin the fixed light layer) ---------- */
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.is-leaving .hdr::after{opacity:1;transform:scaleX(.72);transition:transform 1.1s var(--ease-out),opacity .12s}
.is-leaving main,.is-leaving .foot{opacity:.82;transition:opacity .22s var(--ease)}

/* ---------- the offer reads at a glance: the services line and the prices lead under the headline ---------- */
.hero__price b{color:var(--amber)}
@media (min-width:768px){
  .hero__kicker{font-size:15px;letter-spacing:.06em;color:var(--paper)}
  .hero__price{font-size:clamp(17px,1.35vw,20px)}
}
@media (max-width:767px){.hero__kicker{font-size:13px;letter-spacing:.06em}.hero__price{font-size:15px}}

/* ---------- 01 statement: the lede keeps a comfortable measure (the longer paragraph, owner 2026-10-05: ~60 a line) ---------- */
.eng .sc--say .stage>.say__lede,.say__lede{max-width:46ch}
/* short screens: the statement and its payoff scale with the height too, so the statement, the lede and the payoff fit the
   pinned screen together (clear of the header) */
@media (min-width:768px) and (max-height:820px){.say__text{font-size:clamp(25px,min(3.75vw,5.6vh),58px)}}
@media (max-width:767px) and (max-height:700px){
  .say__text{font-size:clamp(24px,min(8.2vw,4.3svh),34px)}
  .sc--say .eyebrow{margin-bottom:12px}
  .say__lede{font-size:14.5px;line-height:1.45;margin-top:10px}
  .say__pay{margin-top:10px}
  .eng .sc--say .stage{padding-bottom:calc(var(--lvh) - var(--svh) + 20px)}
}

/* ---------- FAQ: the answer fades up once the rows below have mostly settled (no crowding while they glide) ---------- */
@media (min-width:768px){.eng .qa details[open] .qa__a{animation-delay:.14s}}

/* ---------- FAQ on desktop: the heading and its button stay beside the questions (no empty half screen) ---------- */
.faq__side{display:contents}
@media (min-width:1024px){
  .sc--faq .faq__side{display:block;grid-column:1;grid-row:1/3;position:sticky;top:calc(var(--hdr-h) + 40px);align-self:start}
  .sc--faq .faq__side .faq__cta{display:inline-flex}
}
@media (max-width:1023px){
  .sc--faq{display:flex;flex-direction:column}
  .sc--faq .qa{order:1}
  .sc--faq .faq__cta{order:2;align-self:flex-start}
}

/* ---------- 06 home pricing on phones: the Standard line ends cleanly (its list is left out there) ---------- */
.tier__dot{display:none}
@media (max-width:767px){.sc--price .tier__plus{display:none}.sc--price .tier__dot{display:inline}}

/* ---------- phones: the closing row is Talk to us on its own line, then Call and Text side by side ---------- */
@media (max-width:767px){
  .sc--cta .cta__row{gap:10px}
  .sc--cta .cta__row .btn{padding-inline:18px}
  .sc--cta .cta__row .btn--amber{flex:1 1 100%}
  .sc--cta .cta__row .btn--ghost{flex:1 1 auto}
}

/* ---------- phones: one clean work card (the 'Your site here' card repeats what the closing CTA says) ---------- */
@media (max-width:767px){.job--next{display:none}}

/* ---------- phones: a shorter home (fewer screens between the hero and the prices), same content ---------- */
@media (max-width:767px){
  .eng .sc--say{height:115vh}
  .eng .sc--name{height:105vh}
  .eng .sc--build{padding-block:clamp(48px,7vh,72px)}
  .eng .card__media{aspect-ratio:16/10}
  .sc--price{padding-top:clamp(48px,7vh,72px)}
  .sc--faq{padding-top:clamp(48px,7vh,72px)}
  .rx__after{padding-top:clamp(28px,4vh,40px);padding-bottom:clamp(48px,7vh,72px)}
  .sc--work{padding-top:clamp(28px,4vh,44px)}
  /* the amber panel keeps one kinetic row (the services are already listed above it) */
  .amb .mq__row:not(.mq__row--out){display:none}
  .amb .mq{margin-bottom:clamp(32px,6vh,56px)}
  .amb{padding-block:clamp(56px,9vh,96px) clamp(48px,8vh,88px)}
  /* the work card covers the end of the burst stage completely (no strip of cards under it) */
  .eng .sc--cloud + .sc--work{min-height:64vh}
}
@media (max-width:767px) and (orientation:portrait){.eng .sc--cloud{height:130vh}}

/* =====================================================================================================
   Phones and touch screens: NOTHING pins, nothing sticks (owner, 2026-10-05: "scrolling slowly it seemed to magnetize to
   the sections"). Same test as js/site.js BP4.touchy(): no fine pointer (any width; pointer-only since 2026-10-05). There
   the pinned scenes run as 'pass' and every stage is an ordinary block, so each section is as tall as its content and
   scrolls 1:1 with the finger; the scenes draw a calm in-view version instead (opacity / transform on pictures only).
   A mouse / trackpad window of ANY width (a narrow one too) matches none of this and is the desktop page as before.
   Motion off was already static.
   ===================================================================================================== */
@media not all and (hover:hover) and (pointer:fine){
  .eng [data-scene] .stage{position:relative;top:auto;height:auto}
  /* openers now scroll on under the bar (none fades out in a pin any more): the bar is ink-solid on every touch screen, as
     it already was below 1024 px */
  :where(.eng) .hdr::before{background:var(--ink-0)} /* (motion on only; :where keeps the old weight) */
  /* a #hash landing puts a section under the header like any other block (no pin to start from) */
  .eng :is([data-scene=hero],[data-scene=title],[data-scene=say],[data-scene=track],[data-scene=steps],[data-scene=cloud],[data-scene=name]):not([data-mode=pass]){scroll-margin-top:0}

  /* 00 hero: one screen; the film and the copy scroll away together. The stage keeps its own stacking context (the
     sticky stage made one): the light-fibre slot inside it must never paint over the sections below */
  .eng .sc--hero{height:auto}
  .eng .sc--hero .stage{height:var(--svh);min-height:0;isolation:isolate}
  .eng .hero__copy{padding-bottom:clamp(28px,6vh,64px)}
  .eng .hero__cue{bottom:clamp(28px,6vh,64px)}

  /* 01 statement: an ordinary block right after the hero (no overlap, no pin room); site.js lights the words in place */
  .eng .sc--say,.eng .sc--hero + .sc--say{height:auto;margin-top:0}
  .eng .sc--say .stage{height:auto;justify-content:flex-start;padding:clamp(64px,10vh,120px) var(--gut) clamp(40px,7vh,90px)}
  .eng .say__lede{transform:none}

  /* 02 what we build: the vertical list (phones already had it; touch tablets get it too) */
  .eng .sc--build{height:auto!important}
  .eng .sc--say + .sc--build{margin-top:0}
  .eng .sc--build .stage{position:relative;height:auto;overflow:visible;padding-bottom:0}
  .eng .sc--build .build__head{padding-top:0}
  .eng .sc--build .track{display:grid;width:auto;max-height:none;gap:16px;transform:none!important}
  .eng .card{width:auto}
  .eng .card__media{flex:none;max-height:none}
  .eng .card--next{min-height:150px}
  .eng .build__count,.eng .build__rail{display:none!important}
  .eng .card__body>p:not(.mono){display:block;-webkit-line-clamp:unset;overflow:visible}

  /* 05 work intro: the composed grid of the Motion-off page (site.js fades it in once); the work card follows below it */
  .eng .sc--cloud{height:auto}
  .eng .sc--cloud .stage{min-height:0;display:grid;place-items:center;align-content:center;gap:18px;grid-template-columns:minmax(0,1fr);
    padding:clamp(64px,10vh,120px) var(--gut) clamp(36px,6vh,72px);text-align:center}
  .eng .cloud__eb{position:static}
  .eng .cloud__h{position:relative;inset:auto;transform:none;display:block;padding:0;font-size:var(--fs-display);line-height:.95}
  .eng .cloud{display:grid;position:relative;inset:auto;z-index:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:var(--max);margin:clamp(10px,3vh,30px) auto 0}
  .eng .cl{position:relative;left:auto;top:auto;translate:none;opacity:1;width:auto;aspect-ratio:4/3;border-radius:18px;will-change:auto}
  .eng .cl--l{grid-column:1/-1;aspect-ratio:16/10}
  .eng .cl--l img{object-position:left top}
  .eng .cl--chip,.eng .cl.dt,.eng .cl.nost{display:none}
  .eng .cl.no-m{display:none} /* the Platinum screenshot shows once, as the work card below the grid (phones and tablets) */
  .eng .sc--cloud + .sc--work{margin-top:0;min-height:0;padding-top:0}

  /* stacking cards (home pricing, the pricing tiers): a plain list; site.js fades each card up once */
  /* (the home's own card height rule, .eng .sc--price .tier, is matched too: touch cards hug their content) */
  .eng .tier,.eng .sc--price .tier{position:relative;top:auto;min-height:0;will-change:auto}
  /* touch screens >= 1024 px (big iPads): home pricing + FAQ take the stacked layout used below 1024 px, heading above, list
     below (the desktop grid kept the heading in a left column that only made sense while it stuck) */
  @media (min-width:1024px){
    .eng .sc--price{display:block}
    .eng .price__head{position:relative;top:auto;margin-bottom:clamp(28px,5vh,56px)}
    .eng .sc--faq{display:flex;flex-direction:column;align-items:stretch}
    .eng .sc--faq .faq__side{display:contents;position:static}
    .eng .faq__head{margin-bottom:clamp(28px,5vh,56px)}
    .eng .sc--faq .qa{order:1}
    .eng .sc--faq .faq__cta{order:2;align-self:flex-start}
  }

  /* 07 the silk: a full-screen picture with its words, scrolling like any block */
  .eng .sc--name{height:auto}
  .eng .sc--name .stage{min-height:var(--svh);padding:clamp(90px,14vh,140px) var(--gut)}

  /* sub-page openers (title): one screen of copy that scrolls on */
  .eng .sc--title{height:auto}
  .eng .sc--title .stage{min-height:var(--svh);padding-bottom:clamp(40px,8vh,90px)}
}
@media (max-width:767px){
  @media not all and (hover:hover) and (pointer:fine){ /* touch phones only: a narrow mouse window keeps its pinned cloud */
    /* phones: the Platinum screenshot shows once, as the work card below the grid */
    .eng .cl.no-m{display:none}
    .eng .sc--cloud .cloud__h{font-size:var(--fs-display)}
  }
}
@media (min-width:768px){
  @media not all and (hover:hover) and (pointer:fine){
    .eng .cloud{grid-template-columns:repeat(4,minmax(0,1fr))}
    .eng .cl--l{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
    .eng .sc--build{padding-block:clamp(70px,10vh,120px)}
    .eng .card__media{aspect-ratio:5/4}
  }
}