/* ============================================================================
   Fibernatic V3 — "Panel Train"
   Palette lifted from the live fibernatic.com CSS tokens.
   Ground is warm paper everywhere. One navy scene on the whole site.
   ========================================================================== */

@font-face{font-family:Geist;src:url(../fonts/geist.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/geistmono.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* live site tokens */
  --paper:#f8f7f4; --soft:#efede6; --surface:#fff;
  --ink:#272d3a; --ink-soft:#5e6577; --faint:#6b707e;
  --line:#e6e3da;
  --amber:#e0a23e; --amber-deep:#b07c24; --amber-tint:#f6ead2;
  /* WCAG AA on the paper ground (#f8f7f4):
       --amber-deep  #b07c24  3.41:1 — large display text and UI only
       --amber-text  #946517  4.74:1 — anything under 24px / 18.7px bold
       --faint       #6b707e  4.62:1 — was #9298a6 at 2.70:1, which failed
     Every micro-label on the site uses --faint, so that one mattered most. */
  --amber-text:#946517;
  /* --amber-text sits on the amber tint at only 4.26:1, so anything set on
     --amber-tint uses this deeper one instead (4.77:1 there). */
  --amber-on-tint:#8a5e14;
  --navy:#1b2029; --navy-deep:#14181f;

  --ff:Geist,'Geist Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(18px,5vw,64px);
  --maxw:1320px;
  --rad:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(39,45,58,.04),0 12px 34px -18px rgba(39,45,58,.22);
  --shadow-lift:0 2px 4px rgba(39,45,58,.05),0 30px 60px -26px rgba(39,45,58,.3);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.55;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
::selection{background:var(--amber-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px;border-radius:4px}

.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:14px;top:14px;width:auto;height:auto;clip:auto;z-index:999;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:10px}

/* ---------------------------------------------------------------- ground
   The page never changes colour in blocks. Instead a single very soft amber
   bloom drifts with scroll, plus a paper grain. No edges, ever. */
.ground{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--paper)}
.bloom{position:fixed;left:50%;top:50%;width:150vmax;height:150vmax;z-index:-2;pointer-events:none;
  transform:translate3d(-50%,-50%,0);
  background:
    radial-gradient(38% 34% at var(--bx,52%) var(--by,32%),rgba(224,162,62,.16),transparent 70%),
    radial-gradient(44% 40% at var(--bx2,20%) var(--by2,78%),rgba(224,162,62,.08),transparent 72%),
    radial-gradient(50% 44% at 84% 60%,rgba(39,45,58,.05),transparent 70%);
  will-change:transform}
/* Blueprint layer: a faint measured grid with heavier ticks every fifth line.
   It gives the paper something to be — a drawing sheet for infrastructure —
   without ever forming a block or an edge. */
.blueprint{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(39,45,58,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(39,45,58,.055) 1px,transparent 1px),
    linear-gradient(to right,rgba(39,45,58,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(39,45,58,.028) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 78%)}
@media(max-width:700px){.blueprint{background-size:120px 120px,120px 120px,24px 24px,24px 24px;opacity:.38}}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding:clamp(66px,8.5vw,124px) 0}
.sec--tight{padding-block:clamp(44px,6vw,84px)}
main{position:relative;z-index:1}

/* ---------------------------------------------------------------- type */
.h-mega,.h-xl,.h-l{font-weight:600;letter-spacing:-.045em;line-height:.94;text-wrap:balance}
.h-mega{font-size:clamp(2.7rem,9.2vw,7.4rem)}
.h-xl{font-size:clamp(2.3rem,6.6vw,5rem);line-height:.98}
.h-l{font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:1.02}
.h-m{font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.03em;line-height:1.14}
.it{color:var(--amber-deep)}
.dim{color:var(--faint)}
.lede{font-size:clamp(1rem,1.55vw,1.2rem);color:var(--ink-soft);max-width:44ch;line-height:1.6}
.mono{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.muted{color:var(--faint)}
.tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--fm);font-size:.7rem;
  letter-spacing:.12em;text-transform:lowercase;color:var(--amber-text)}
.tag::before{content:'';width:22px;height:1px;background:currentColor;opacity:.6}
.caret{width:6px;height:11px;background:currentColor;display:inline-block;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Section head: the path tag sits out in the margin like a printed folio, and
   the headline gets the full measure instead of a narrow column with dead
   space beside it. */
.sec-head{margin-bottom:clamp(30px,4.2vw,56px);display:grid;
  grid-template-columns:clamp(110px,13vw,190px) minmax(0,1fr);
  gap:0 clamp(16px,2.4vw,40px);align-items:start}
.sec-head .tag{grid-column:1;padding-top:.62em}
.sec-head .h-l{grid-column:2;margin:0;max-width:19ch}
.sec-head--wide .h-l{max-width:26ch}
.sec-head--bare{grid-template-columns:1fr}
.sec-head--bare .h-l{grid-column:1;max-width:22ch}
@media(max-width:860px){
  .sec-head{grid-template-columns:1fr;gap:14px}
  .sec-head .tag{grid-column:1;padding-top:0}
  .sec-head .h-l{grid-column:1;max-width:16ch}
}

.statement{font-size:clamp(1.55rem,4.2vw,3.1rem);font-weight:500;letter-spacing:-.035em;
  line-height:1.12;max-width:20ch;text-wrap:balance}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;
  border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:.94rem;
  letter-spacing:-.01em;border:1px solid var(--ink);position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.btn>*{position:relative;z-index:1}
.btn::before{content:'';position:absolute;inset:0;background:var(--amber);border-radius:inherit;
  transform:translate3d(0,101%,0);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--ink);border-color:var(--amber)}
.btn:hover::before{transform:translate3d(0,0,0)}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);transition:background .4s}
.btn:hover .dot{background:var(--ink)}
.btn svg{width:17px;height:17px;flex:none}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--paper);border-color:var(--ink)}
.btn--amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn--amber::before{background:var(--ink)}
.btn--amber:hover{color:var(--paper);border-color:var(--ink)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.88rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;
  color:var(--amber-text);position:relative}
.link svg{width:16px;height:16px;transition:transform .45s var(--ease)}
.link::after{content:'';position:absolute;left:0;bottom:12px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link:hover svg{transform:translate(3px,-3px)}

/* roll-up label, borrowed from the reference's .roll-up-button */
.roll{display:inline-block;overflow:hidden;vertical-align:bottom;height:1.2em}
.roll i{display:block;font-style:normal;transition:transform .5s var(--ease)}
.roll i::after{content:attr(data-t);display:block}
a:hover .roll i,button:hover .roll i{transform:translateY(-1.2em)}

/* ---------------------------------------------------------------- nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:22px;
  padding:14px var(--gut);transition:background .5s var(--ease),box-shadow .5s var(--ease),
  padding .5s var(--ease)}
.nav::before{content:'';position:absolute;inset:0;backdrop-filter:blur(14px) saturate(1.2);
  background:color-mix(in srgb,var(--paper) 78%,transparent);opacity:0;transition:opacity .45s var(--ease);
  border-bottom:1px solid transparent}
.nav.stuck::before{opacity:1;border-bottom-color:var(--line)}
.nav>*{position:relative;z-index:1}
.prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(var(--p,0));
  transform-origin:left;background:linear-gradient(90deg,var(--amber-deep),var(--amber));z-index:2;
  opacity:0;transition:opacity .4s}
.nav.stuck .prog{opacity:1}

/* Chrome inverts while the navy scene fills the screen, the way the reference
   flips its header on .black-active. Everything transitions, so there is no
   visible switch. */
.nav.on-dark{color:var(--paper)}
.nav.on-dark::before{opacity:1;background:rgba(27,32,41,.72);border-bottom-color:rgba(248,247,244,.12)}
.nav.on-dark .logo{color:var(--paper)}
.nav.on-dark .logo-mark{background:var(--paper)}
.nav.on-dark .nav-links a,.nav.on-dark .nav-links button{color:rgba(248,247,244,.7)}
.nav.on-dark .nav-links a:hover,.nav.on-dark .nav-links button:hover{color:var(--paper);background:rgba(248,247,244,.1)}
.nav.on-dark .nav-links [aria-current=page],.nav.on-dark .nav-links .is-current{color:var(--paper)}
.nav.on-dark .menu-btn{background:transparent;border-color:rgba(248,247,244,.28)}
.nav.on-dark .menu-btn i{background:var(--paper)}
.wa.on-dark{background:var(--amber);color:var(--navy)}
.rail.on-dark span{color:rgba(248,247,244,.5)}
.rail.on-dark span.on{color:var(--amber)}

.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.045em;
  font-size:1.16rem;min-height:44px;margin-right:auto}
.logo-mark{width:19px;height:19px;border-radius:50%;flex:none;position:relative;
  background:var(--ink);display:inline-block}
.logo-mark::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--amber)}
.logo-mark::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--amber);opacity:.45;animation:halo 3.6s var(--ease) infinite}
@keyframes halo{0%{transform:scale(.85);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links>li{position:relative}
.nav-links a,.nav-links button{display:inline-flex;align-items:center;gap:5px;min-height:44px;
  padding:0 13px;border-radius:999px;font-size:.92rem;color:var(--ink-soft);
  transition:color .3s,background .3s}
.nav-links a:hover,.nav-links button:hover,.nav-links [aria-expanded=true]{color:var(--ink);background:var(--soft)}
.nav-links [aria-current=page],.nav-links .is-current{color:var(--ink);font-weight:500}
.nav-links svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.nav-links [aria-expanded=true] svg{transform:rotate(180deg)}

.drop{position:absolute;top:calc(100% + 8px);left:-8px;width:330px;padding:8px;border-radius:18px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s}
.has-drop.open .drop{opacity:1;visibility:visible;transform:none}
.drop--wide{width:380px;columns:1}
.drop a{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;padding:9px 11px;border-radius:12px;
  align-items:center;min-height:52px;color:var(--ink)}
.drop a:hover{background:var(--soft)}
.drop a .fig{grid-row:span 2;width:34px;height:34px}
.drop b{font-weight:500;font-size:.9rem;align-self:end}
.drop .d{font-size:.78rem;color:var(--faint);align-self:start;line-height:1.3}

.nav-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;background:var(--surface)}
.menu-btn i{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--ease)}
.menu-btn[aria-expanded=true] i:first-child{transform:translateY(3.2px) rotate(45deg)}
.menu-btn[aria-expanded=true] i:last-child{transform:translateY(-3.2px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;background:var(--paper);padding:84px var(--gut) 32px;
  overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .68s var(--ease),visibility .68s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu nav a{display:flex;flex-direction:column;gap:2px;padding:14px 0;min-height:56px;
  border-bottom:1px solid var(--line);font-size:1.6rem;font-weight:600;letter-spacing:-.04em;
  opacity:0;transform:translateY(20px)}
.menu.open nav a{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.menu nav a small{font-size:.74rem;font-family:var(--fm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:400}
.menu-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin-top:22px}
.menu-sub a{min-height:44px;display:flex;align-items:center;font-size:.9rem;color:var(--ink-soft)}
.menu-foot{display:flex;flex-direction:column;gap:6px;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--line)}
.menu-foot a{min-height:44px;display:flex;align-items:center;color:var(--amber-text)}

/* Section rail — persistent wayfinding. Ticks only by default so it can never
   collide with the panel headlines; the labels slide out when you reach for it. */
.rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:40;display:none;
  flex-direction:column;gap:14px;padding:10px 6px}
.rail span{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;cursor:default;transition:color .4s}
.rail span::before{content:'';width:11px;height:1.5px;flex:none;background:currentColor;
  border-radius:2px;opacity:.45;transition:width .45s var(--ease),opacity .4s}
.rail span i{font-style:normal;opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.rail span.on{color:var(--amber-text)}
.rail span.on::before{width:24px;opacity:1}
.rail:hover span i{opacity:1;transform:none}
.rail:hover span.on i{opacity:1}
@media(min-width:1180px){.rail{display:flex}}

/* ---------------------------------------------------------------- reveals */
.rv{opacity:0;transform:translate3d(0,26px,0)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>i{display:inline-block;font-style:inherit;transform:translate3d(0,105%,0) rotate(3deg)}
.split.in .w>i{transform:none;transition:transform .9s var(--ease) var(--d,0s)}
.no-js .rv,.no-js .split .w>i{opacity:1;transform:none}

/* ---------------------------------------------------------------- figures
   Every illustration on the site is drawn geometry: amber + ink hairlines on
   paper. Nothing photographic, nothing that could carry an invented logo. */
.fig{display:block;position:relative;color:var(--ink)}
.fig svg{width:100%;height:auto;overflow:visible}
.fig .st{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.fig .st.a{stroke:var(--amber-deep)}
.fig .st.f{fill:var(--amber-tint);stroke:var(--amber-deep)}
.fig .st.p{fill:var(--surface)}
.fig .st.d{opacity:.28}
.fig .sp{fill:var(--amber);stroke:none}
.fig--spin>svg>.rot{transform-origin:50% 50%;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Draw-on. Every figure is stroke geometry, so each shape can be drawn by
   running its own dash offset back to zero. site.js measures each shape and
   writes --len and --d; strokes draw, then fills and amber dots arrive after.
   Skipped for the nav dropdowns, the cursor-follower and the drift layer. */
.fig--draw .st{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  fill-opacity:0}
.fig--draw .sp{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box}
.fig--draw.in .st{stroke-dashoffset:0;fill-opacity:1;
  transition:stroke-dashoffset 1.05s var(--ease) var(--d,0s),
             fill-opacity .5s ease calc(var(--d,0s) + .45s)}
.fig--draw.in .sp{opacity:1;transform:none;
  transition:opacity .45s var(--ease) calc(var(--d,0s) + .5s),
             transform .55s var(--ease) calc(var(--d,0s) + .5s)}

/* Once the draw has finished, drop the dash entirely.
   These strokes use vector-effect:non-scaling-stroke, which makes the browser
   read stroke-dasharray in SCREEN pixels — while getTotalLength() returns USER
   units. On a hero figure scaled 2.3x a 190-unit path renders 439px long but
   the dash is only 190px, so the outline stayed visibly incomplete at rest.
   Clearing the dash makes the resting state a plain continuous stroke at any
   scale, and survives resizing too. */
.fig--draw.drawn .st{stroke-dasharray:none;stroke-dashoffset:0}

/* a still frame or a reduced-motion visitor gets the finished drawing */
html.shot .fig--draw .st,.fig--draw.no-anim .st{stroke-dasharray:none!important;stroke-dashoffset:0!important;fill-opacity:1!important;transition:none!important}
html.shot .fig--draw .sp,.fig--draw.no-anim .sp{opacity:1!important;transform:none!important;transition:none!important}

/* ---------------------------------------------------------------- home hero
   The opening is now a full scene of its own: the brand statement against a
   live orbit graphic, with a measured strip along the bottom. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(110px,15vh,170px) 0 clamp(20px,3vh,36px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,5vw,72px);align-items:center;width:100%}
.hero__i{display:flex;align-items:center;gap:10px;font-family:var(--fm);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:22px}
.hero__i b{color:var(--amber-text);font-weight:500}
.hero__i i{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;
  animation:live 2.4s var(--ease) infinite}
@keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero .h-mega{max-width:11ch}
.hero .lede{margin-top:24px;max-width:40ch}
.hero .ctas{margin-top:34px}

/* the orbit: the aperture motif, stated once at full size */
.orbit{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center;
  display:grid;place-items:center}
.orbit>span{position:absolute;border-radius:50%;border:1px solid var(--line);inset:0}
.orbit>span:nth-child(1){inset:0}
.orbit>span:nth-child(2){inset:13%;border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
.orbit>span:nth-child(3){inset:27%;border-style:dashed;border-color:var(--line)}
.orbit>span:nth-child(4){inset:37%;border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
/* a measured dial: a fine tick every 6°, a heavier amber one every 30° */
.orbit::before,.orbit::after{content:'';position:absolute;inset:2%;border-radius:50%;
  pointer-events:none}
.orbit::before{background:repeating-conic-gradient(from 0deg,var(--ink) 0deg .18deg,transparent .18deg 6deg);
  opacity:.34;
  -webkit-mask:radial-gradient(circle,transparent 0 45.5%,#000 45.5% 50%,transparent 50%);
  mask:radial-gradient(circle,transparent 0 45.5%,#000 45.5% 50%,transparent 50%)}
.orbit::after{background:repeating-conic-gradient(from 0deg,var(--amber) 0deg .5deg,transparent .5deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 43%,#000 43% 50%,transparent 50%);
  mask:radial-gradient(circle,transparent 0 43%,#000 43% 50%,transparent 50%)}
.orbit>em{position:absolute;inset:0;animation:orb 22s linear infinite}
.orbit>em::after{content:'';position:absolute;top:-6px;left:calc(50% - 6px);width:12px;height:12px;
  border-radius:50%;background:var(--amber);box-shadow:0 0 0 7px rgba(224,162,62,.14)}
.orbit>em:nth-of-type(2){animation-duration:36s;animation-direction:reverse;inset:13%}
.orbit>em:nth-of-type(2)::after{width:8px;height:8px;top:-4px;left:calc(50% - 4px);
  background:var(--ink);box-shadow:none}
@keyframes orb{to{transform:rotate(360deg)}}
.orbit>b{position:relative;z-index:1;width:26%;aspect-ratio:1;border-radius:50%;
  background:var(--amber-tint);border:1px solid var(--amber);display:grid;place-items:center;
  font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-on-tint);text-align:center;line-height:1.4}
.orbit>i{position:absolute;width:1px;height:100%;background:var(--line);left:50%}
.orbit>i:nth-of-type(2){width:100%;height:1px;top:50%;left:0}

/* measured strip along the foot of the hero */
.gauge{grid-column:1/-1;display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  margin-top:clamp(28px,5vh,56px);padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.gauge .ticks{flex:1;height:14px;position:relative;overflow:hidden;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:14px 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.gauge .ticks::after{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,var(--amber) 1px,transparent 1px);
  background-size:70px 100%;opacity:.8}
.gauge b{color:var(--ink);font-weight:500}

/* ---------------------------------------------------------------- folio
   A numbered rule opening each section. Editorial, and it gives the long
   paper ground a measurable rhythm. */
.folio{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,3vw,34px)}
.folio span{font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;color:var(--amber-text)}
.folio i{flex:1;height:1px;background:var(--line);position:relative}
.folio i::after{content:'';position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--amber)}
.folio em{font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;color:var(--faint);
  font-style:normal}

/* ---------------------------------------------------------------- the train
   Pinned scene: vertical scroll drives horizontal travel, exactly the device
   the reference uses. A drift layer moves faster than the panels. */
.train{position:relative}
/* The pinned scene is OPAQUE. While it is pinned it sits over whatever the
   document is scrolling behind it, so a transparent panel would let two sets of
   headlines show through each other. It carries its own copy of the blueprint
   ground so it still matches the rest of the page. */
.train-pin{height:100svh;min-height:560px;overflow:hidden;position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.train-pin::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(39,45,58,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(39,45,58,.055) 1px,transparent 1px),
    linear-gradient(to right,rgba(39,45,58,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(39,45,58,.028) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 25%,transparent 78%)}
.train-pin::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 38% at 62% 28%,rgba(224,162,62,.13),transparent 70%)}
.panels{display:flex;align-items:center;will-change:transform;padding-left:var(--gut);
  position:relative;z-index:2}
.panel{flex:0 0 auto;width:min(100vw - var(--gut) * 2,1180px);padding-right:clamp(40px,8vw,140px);
  display:grid;gap:clamp(20px,3vw,48px);align-content:center}
.panel--intro{align-content:center}
.panel__i{font-family:var(--fm);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);display:flex;align-items:center;gap:10px}
.panel__i b{color:var(--amber-text);font-weight:500}
.panel h1,.panel h2{max-width:14ch}
.panel .lede{max-width:38ch}
.panel-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(20px,4vw,60px);align-items:center}
.panel-art{position:relative;aspect-ratio:1/.86;display:grid;place-items:center}
.panel-art .fig{width:82%}
.price-chip{position:absolute;display:flex;flex-direction:column;gap:1px;padding:11px 16px;
  border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.price-chip span{font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.price-chip b{font-size:1.15rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-chip b small{font-size:.66rem;color:var(--ink-soft);font-weight:400}

.hud-name{color:var(--ink)!important;font-weight:500}

/* fallback: no GSAP, no JS, or reduced motion — the panels simply stack */
.train.is-static .train-pin,.no-js .train-pin{height:auto;min-height:0;overflow:visible;
  padding-block:40px}
.train.is-static .panels,.no-js .panels{flex-direction:column;gap:clamp(48px,8vw,90px);
  padding-right:var(--gut)}
.train.is-static .panel,.no-js .panel{width:100%;padding-right:0}
.train.is-static .drift,.train.is-static .train-hud,.no-js .drift,.no-js .train-hud{display:none}

/* drift layer: same scroll, different rate. z-index 1 keeps it above the pinned
   scene's own ground but below the panels. */
.drift{position:absolute;inset:0;pointer-events:none;z-index:1;will-change:transform}
.drift .fig{position:absolute;opacity:.2}

/* train hud */
.train-hud{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(18px,3.4vh,34px);
  display:flex;align-items:center;gap:14px;z-index:4}
.train-hud .rail-line{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.train-hud .rail-line i{position:absolute;inset:0;background:var(--amber);transform:scaleX(var(--p,0));
  transform-origin:left}
.train-hud .mono{color:var(--faint);white-space:nowrap}
.train-hud .steps-n{display:flex;gap:6px}
.train-hud .steps-n b{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .4s,transform .4s}
.train-hud .steps-n b.on{background:var(--amber);transform:scale(1.45)}

/* ---------------------------------------------------------------- aperture
   The handover device. A ring grows until the next scene is seen through it,
   then collapses. No band of colour ever crosses the screen. */
.gate{position:relative;isolation:isolate}
/* The ring is laid out at 1440px and scaled DOWN, not up.
   A transformed element gets promoted to its own compositor layer and rasterised
   ONCE at its layout size, after which the GPU just scales that bitmap. At the
   old 120px it was being blown up to 34x — a 120px texture stretched to 4080px,
   which is why the amber edges were soft while everything beside them was crisp.
   Rasterising at 1440px and scaling down keeps it sharp for the whole handover.
   The matching scale values are in site.js; change the two together.
   vector-effect is deliberately absent: the stroke should grow with the ring, and
   the widths below are tuned so it reads the same weight as before at 1440px. */
.gate__ring{position:fixed;left:50%;top:50%;width:1440px;height:1440px;
  margin:-720px 0 0 -720px;z-index:2;pointer-events:none;opacity:0}
.gate__ring svg{width:100%;height:100%}
/* Widths solve W x (1440/100) x (S/12) = oldWidth x S, i.e. W = oldWidth / 1.2,
   so the ring reads at exactly the weight it did at 120px. */
.gate__ring circle{fill:none;stroke:var(--amber);stroke-width:1.67}
.gate__ring line{stroke:var(--amber);stroke-width:1.17;opacity:.7}

/* ---------------------------------------------------------------- deep scene
   The ONLY dark surface on the site. Reached through the aperture, left the
   same way — it never reads as a colour block you scroll past. */
.deep{position:relative;color:var(--paper);height:100svh;min-height:520px;
  display:grid;place-items:center;overflow:hidden;
  /* --faint was .44 (4.06:1 on navy) — fine for large text, not for the small
     captions it actually carries here. .55 gives 5.52:1. */
  --line:rgba(248,247,244,.14);--ink:#f8f7f4;--ink-soft:rgba(248,247,244,.66);
  --faint:rgba(248,247,244,.55);--surface:rgba(248,247,244,.05)}
.deep-in{position:relative;z-index:1;text-align:center;padding-inline:var(--gut);
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,36px);
  width:100%;max-width:1180px}
/* wide enough for the statement to break into two balanced lines with the amber
   payoff intact — at 19ch it orphaned the last word onto a third line */
.deep-in .statement{max-width:28ch;margin-inline:auto;text-align:center}
.deep-in .points{margin-top:0;max-width:880px;text-align:left}
.deep .tag{color:var(--amber)}
/* the numbers, stated large on the dark — the attention beat of the page */
.deep-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;width:100%;
  background:rgba(248,247,244,.14);border:1px solid rgba(248,247,244,.14);border-radius:var(--rad);
  overflow:hidden;margin-top:6px}
.deep-stats>div{background:var(--navy);padding:clamp(20px,3vw,32px) clamp(14px,2vw,26px);
  display:flex;flex-direction:column;gap:6px;align-items:center}
.deep-stats b{font-size:clamp(2rem,5vw,3.6rem);font-weight:600;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--amber)}
.deep-stats>div>span{font-family:var(--fm);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(248,247,244,.55);text-align:center}
@media(max-width:700px){
  .deep-stats{grid-template-columns:1fr}
  .deep-stats>div{padding-block:18px}
  .deep-stats>div>span{font-size:12.5px}
}
.deep::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--navy);
  clip-path:circle(var(--r,0%) at 50% 50%)}
.deep::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(48% 40% at 22% 20%,rgba(224,162,62,.22),transparent 68%),
             radial-gradient(40% 38% at 84% 82%,rgba(224,162,62,.12),transparent 70%);
  clip-path:circle(var(--r,0%) at 50% 50%)}
.deep .it{color:var(--amber)}
.deep .btn{background:var(--amber);border-color:var(--amber);color:var(--navy)}
.deep .btn::before{background:var(--paper)}
/* .28 gave a 2.44:1 border — a button outline is a UI boundary and needs 3:1 */
.deep .btn--ghost{background:transparent;color:var(--paper);border-color:rgba(248,247,244,.42)}
.deep .btn--ghost::before{background:var(--paper)}
.deep .btn--ghost:hover{color:var(--navy)}

/* ---------------------------------------------------------------- hero (inner pages) */
.phero{position:relative;padding:clamp(120px,15vh,190px) 0 clamp(50px,7vw,90px)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,5vw,72px);align-items:center}
.phero .h-xl{margin:18px 0 0}
.phero .lede{margin-top:20px}
.phero-art{position:relative;display:grid;place-items:center;aspect-ratio:1/.9}
.phero-art .fig{width:90%}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.checks li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-soft)}
.checks li::before{content:'';width:15px;height:15px;border-radius:50%;flex:none;
  background:var(--amber-tint);border:1px solid var(--amber);position:relative}
.checks--col{flex-direction:column;align-items:flex-start;gap:12px}
.checks--col li{font-size:.98rem}

.ticker{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;margin-top:clamp(30px,5vw,58px);background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden}
.ticker>div{background:var(--paper);padding:20px 22px;display:flex;flex-direction:column;gap:3px}
.ticker b{font-size:clamp(1.3rem,2.5vw,1.95rem);font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
/* Direct child only. The figures themselves are <span data-count> nested inside
   the <b>, so a descendant selector here shrinks the number to caption size. */
.ticker>div>span{font-family:var(--fm);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}

.crumbs{margin-bottom:6px}

/* ---------------------------------------------------------------- plans */
.plans{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px;
  border-radius:var(--rad);border:1px solid var(--line);
  background:linear-gradient(175deg,color-mix(in srgb,var(--soft) 55%,var(--surface)),var(--surface) 38%);
  box-shadow:var(--shadow);transition:transform .55s var(--ease),box-shadow .55s var(--ease),
  border-color .45s}
/* No overflow:hidden here. The "Most picked" badge deliberately sits at top:-10px,
   half above the card edge, and clipping sliced it in two. The corner tick below
   is inside the card and the gradient is already clipped by border-radius, so
   nothing needed the clip in the first place. */
/* corner tick — a drawing-sheet register mark */
.plan::after{content:'';position:absolute;right:14px;top:14px;width:9px;height:9px;
  border-top:1px solid var(--line);border-right:1px solid var(--line);transition:border-color .45s}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--amber)}
.plan:hover::after{border-color:var(--amber)}
.plan--on{border-color:var(--amber);background:linear-gradient(180deg,var(--amber-tint),var(--surface) 42%)}
.plan .num{font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;color:var(--faint)}
.plan h3{font-size:1.08rem;font-weight:600;letter-spacing:-.025em}
.badge{position:absolute;top:-10px;left:24px;padding:4px 11px;border-radius:999px;
  background:var(--amber);color:var(--ink);font-family:var(--fm);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.amt{display:flex;align-items:baseline;gap:3px;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:600;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.amt small{font-size:.9rem;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.amt em{font-style:normal;font-size:.82rem;font-weight:400;color:var(--faint);letter-spacing:0}
.amt .from{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);align-self:center;margin-right:3px}
.amt--scope{font-size:clamp(1.4rem,2.2vw,1.7rem);color:var(--ink-soft)}
.plan .meta{font-size:.82rem;color:var(--faint);margin-top:-6px}
.plan ul{display:flex;flex-direction:column;gap:9px;padding-top:14px;margin-top:2px;
  border-top:1px solid var(--line);font-size:.87rem;color:var(--ink-soft)}
.plan ul li{display:flex;justify-content:space-between;gap:12px}
.plan ul li b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.plan ul.ticks li{display:flex;gap:9px;justify-content:flex-start}
.plan ul.ticks li::before{content:'';width:14px;height:14px;border-radius:50%;flex:none;margin-top:3px;
  background:var(--amber-tint);border:1px solid var(--amber)}
.plan .best{font-size:.78rem;color:var(--faint);font-style:italic}
.plan .btn{margin-top:auto;justify-content:center;width:100%}
.plans-foot{margin-top:20px;font-size:.86rem;color:var(--faint)}

/* ---------------------------------------------------------------- cards / grids */
.feats{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.feat{background:var(--paper);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:11px;
  transition:background .45s var(--ease)}
.feat:hover{background:var(--surface)}
.feat svg{width:22px;height:22px;color:var(--amber-deep);stroke-width:1.5}
.feat h3{font-size:1rem;font-weight:500;letter-spacing:-.022em}
.feat p{font-size:.86rem;color:var(--ink-soft)}

.inds{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.inds>div{padding-top:18px;border-top:1px solid var(--ink);position:relative}
.inds>div::before{content:'';position:absolute;left:0;top:-1px;width:26px;height:3px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) var(--d,0s)}
.inds>div.in::before{transform:scaleX(1)}
.inds h3{font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;letter-spacing:-.028em}
.inds p{font-size:.86rem;color:var(--ink-soft);margin-top:5px}

/* steps as a scroll-driven horizontal track — the train device, reused small */
.steps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:1px;
  background:var(--line);border-block:1px solid var(--line)}
.step{background:var(--paper);padding:clamp(20px,2.3vw,30px) clamp(16px,1.8vw,24px);
  display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden}
.step::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) var(--d,0s)}
.step.in::after{transform:scaleX(1)}
.step .num{font-family:var(--fm);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-text)}
.step h3{font-size:1.02rem;font-weight:600;letter-spacing:-.028em}
.step p{font-size:.85rem;color:var(--ink-soft)}

.points,.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(28px,4vw,50px)}
.point{display:flex;flex-direction:column;gap:9px}
.point svg{width:24px;height:24px;color:var(--amber-deep);stroke-width:1.5}
.point h3{font-size:1.05rem;font-weight:600;letter-spacing:-.028em}
.point p{font-size:.88rem;color:var(--ink-soft)}
.minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:40px}

.pills{display:flex;flex-wrap:wrap;gap:9px}
.pills span{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 17px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.89rem;
  color:var(--ink-soft);transition:border-color .4s,color .4s}
.pills span:hover{border-color:var(--amber);color:var(--ink)}
.pills .lead{border-color:var(--amber);background:var(--amber-tint);color:var(--ink);font-weight:500}
.pills .lead small{font-family:var(--fm);font-size:.58rem;letter-spacing:.12em;color:var(--amber-on-tint)}

.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:start}
.hw{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.hw>div{background:var(--paper);padding:22px 24px;display:flex;flex-direction:column;gap:5px}
.hw h3{font-size:1.15rem;font-weight:600;letter-spacing:-.03em}

/* ---------------------------------------------------------------- architecture */
.arch{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;
  gap:clamp(8px,1.2vw,16px)}
.anode{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;gap:2px;min-width:0}
.anode .mono{color:var(--faint)}
.anode b{font-weight:500;font-size:.95rem;letter-spacing:-.02em;white-space:nowrap}
.anode span:not(.mono){font-size:.78rem;color:var(--faint)}
.anode--ghost{border-style:dashed;background:transparent;color:var(--faint)}
.apool{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.apool>p{grid-column:1/-1;margin-top:2px}
.awire{height:1px;background:var(--line);position:relative;overflow:visible;min-width:22px}
.awire i{position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--amber);
  animation:packet 2.6s var(--ease) infinite}
@keyframes packet{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* ---------------------------------------------------------------- tiers */
.tier-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(14px,1.8vw,22px)}
.tier-cols>div{padding:22px;border-radius:var(--rad);border:1px solid var(--line);
  background:var(--surface);display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow)}
.tier-cols i{width:38px;height:38px;border-radius:11px;display:block}
.tier-cols h3{font-size:1.05rem;font-weight:600;letter-spacing:-.03em}
.tier-cols ul{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink-soft)}

/* ---------------------------------------------------------------- stats */
.stats{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(24px,3vw,40px);padding:clamp(34px,5vw,60px) 0;border-block:1px solid var(--line)}
.stats .beat{position:absolute;left:0;right:0;top:50%;height:110px;transform:translateY(-50%);
  z-index:-1;opacity:.85;width:100%}
.beat-line{fill:none;stroke-width:1.4;stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400)}
.beat-line.in{animation:draw 2.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.stat{display:flex;flex-direction:column;gap:4px}
.stat b{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:600;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat>span{font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}

/* ---------------------------------------------------------------- plan train (hosting families) */
.ptrain{position:relative;overflow:hidden;padding-block:8px}
.ptrain-row{display:flex;gap:clamp(12px,1.4vw,18px);will-change:transform;padding-inline:var(--gut)}
.pcard{flex:0 0 clamp(250px,26vw,330px);border-radius:var(--rad);border:1px solid var(--line);
  background:var(--surface);padding:24px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow);transition:border-color .45s,transform .55s var(--ease)}
.pcard:hover{border-color:var(--amber);transform:translateY(-5px)}
.pcard .fig{width:60px;height:60px;margin-bottom:2px}
.pcard h3{font-size:1.1rem;font-weight:600;letter-spacing:-.03em}
.pcard p{font-size:.87rem;color:var(--ink-soft)}
.pcard .amt{font-size:1.75rem;margin-top:auto}
.pcard ul{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--faint);
  font-family:var(--fm);letter-spacing:.04em}
.pcard .link{margin-top:4px}

/* ---------------------------------------------------------------- service list */
.svc-list,.posts{border-top:1px solid var(--line)}
.svc-list li,.posts li{border-bottom:1px solid var(--line)}
.svc-list a,.posts a{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);
  padding:clamp(18px,2.4vw,28px) 0;min-height:64px;position:relative}
.svc-list .p,.posts .cat{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;color:var(--faint);
  flex:0 0 clamp(120px,15vw,210px)}
.svc-list .t,.posts .t{flex:1;font-size:clamp(1.15rem,2.8vw,2.05rem);font-weight:600;
  letter-spacing:-.04em;line-height:1.08;transition:transform .55s var(--ease),color .45s}
.svc-list a:hover .t,.posts a:hover .t{transform:translateX(12px);color:var(--amber-deep)}
.svc-list .r{display:flex;align-items:center;gap:12px;color:var(--faint)}
.svc-list .pr{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.svc-list .go,.posts .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;transition:background .45s,border-color .45s,color .45s}
.svc-list .go svg,.posts .go svg{width:15px;height:15px}
.svc-list a:hover .go,.posts a:hover .go{background:var(--amber);border-color:var(--amber);color:var(--ink)}
/* 20px at weight 600 is not "large" by WCAG (that needs 24px, or 18.66px bold),
   so this one needs the 4.5:1 amber, not the display one */
.svc-list .custom .t{color:var(--amber-text)}
.posts .dt{flex:0 0 clamp(110px,14vw,190px);display:flex;flex-direction:column;gap:2px}
.posts .dt .mono{color:var(--ink-soft)}

/* cursor-following thumbnail for those lists */
.follow{position:fixed;left:0;top:0;width:190px;height:190px;pointer-events:none;z-index:30;
  opacity:0;will-change:transform;display:none}
.follow .fig{position:absolute;inset:0;opacity:0;transform:scale(.86);
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.follow .fig.on{opacity:1;transform:none}
@media(hover:hover) and (min-width:900px){.follow{display:block}}

/* ---------------------------------------------------------------- ports (services index) */
.ports{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(14px,1.8vw,24px)}
.port{border-radius:var(--rad);border:1px solid var(--line);background:var(--surface);
  padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s}
.port:hover{transform:translateY(-6px);border-color:var(--amber);box-shadow:var(--shadow-lift)}
.port .fig{width:78px;height:78px}
.port h3{font-size:1.14rem;font-weight:600;letter-spacing:-.03em}
.port p{font-size:.87rem;color:var(--ink-soft)}

/* ---------------------------------------------------------------- marquee (opposing rows) */
.marq{position:relative;overflow:hidden;padding-block:clamp(16px,2.4vw,30px);
  border-block:1px solid var(--line);margin-block:clamp(30px,5vw,60px)}
.marq-in{display:flex;gap:clamp(24px,3.6vw,52px);width:max-content;will-change:transform}
.marq span{font-size:clamp(1.15rem,2.6vw,2rem);font-weight:600;letter-spacing:-.04em;color:var(--faint);
  display:flex;align-items:center;gap:clamp(24px,3.6vw,52px);white-space:nowrap}
.marq span::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.marq--b .marq-in{margin-top:6px}
.marq--b span{color:var(--line)}

/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line);max-width:860px}
.qa{border-bottom:1px solid var(--line)}
.qa>button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  text-align:left;padding:clamp(17px,2vw,24px) 0;min-height:60px;font-size:clamp(1rem,1.7vw,1.22rem);
  font-weight:500;letter-spacing:-.028em;transition:color .35s}
.qa>button:hover{color:var(--amber-text)}
.pm{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative;
  transition:background .4s,border-color .4s,transform .5s var(--ease)}
.pm::before,.pm::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.4px;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa [aria-expanded=true] .pm{background:var(--amber);border-color:var(--amber);transform:rotate(180deg)}
.qa [aria-expanded=true] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.qa-body>div{overflow:hidden}
.qa.open .qa-body{grid-template-rows:1fr}
.qa-body p{padding-bottom:24px;max-width:62ch;color:var(--ink-soft);font-size:.97rem}

/* ---------------------------------------------------------------- band CTA */
.band{position:relative;padding:clamp(66px,9vw,122px) 0;text-align:center}
.band .h-xl{max-width:17ch;margin-inline:auto}
.band .ctas{justify-content:center;margin-top:30px}
.band::before{content:'';position:absolute;left:50%;top:0;width:min(760px,84vw);height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--amber) 50%,var(--line) 80%,transparent)}

/* ---------------------------------------------------------------- domains */
.dsearch{display:flex;gap:10px;margin-top:26px;max-width:540px}
.dsearch input{flex:1;min-height:52px;padding:0 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:1rem;transition:border-color .4s}
.dsearch input:focus{border-color:var(--amber);outline:none}
.dchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.dchips button{min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--line);
  font-size:.85rem;color:var(--ink-soft);transition:border-color .35s,color .35s}
.dchips button:hover{border-color:var(--amber);color:var(--ink)}
.dresult{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.dresult .row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font-size:.92rem;opacity:0;transform:translateY(10px);animation:pop .5s var(--ease) forwards}
.dresult .row b{font-weight:500}
.dresult .row .ok{color:var(--amber-text);font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase}
.dresult .row .no{color:var(--faint);font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase}
@keyframes pop{to{opacity:1;transform:none}}
.tlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.tld{background:var(--paper);padding:22px 24px;display:flex;flex-direction:column;gap:5px;
  transition:background .4s}
.tld:hover{background:var(--surface)}
.tld .ext{font-size:1.5rem;font-weight:600;letter-spacing:-.04em}
.tld .val{font-size:.88rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tld .link{margin-top:2px}

/* ---------------------------------------------------------------- support / contact */
.ssearch{display:flex;align-items:center;gap:10px;margin-top:26px;max-width:520px;
  padding:6px 6px 6px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.ssearch svg{width:17px;height:17px;color:var(--faint);flex:none}
.ssearch input{flex:1;min-height:44px;border:0;background:none;font-size:.98rem}
.ssearch input:focus{outline:none}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,1.8vw,22px)}
.way{border-radius:var(--rad);border:1px solid var(--line);background:var(--surface);padding:26px;
  display:flex;flex-direction:column;gap:12px;min-height:180px;box-shadow:var(--shadow);
  transition:transform .55s var(--ease),border-color .45s}
.way:hover{transform:translateY(-5px);border-color:var(--amber)}
.way svg{width:24px;height:24px;color:var(--amber-deep);stroke-width:1.5}
.way h3{font-size:1.08rem;font-weight:600;letter-spacing:-.03em}
.way .link{margin-top:auto}

.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(26px,4vw,64px);align-items:start}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.field input,.field textarea{min-height:52px;padding:14px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);font-size:1rem;transition:border-color .4s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--amber);outline:none}
.field.bad input,.field.bad textarea{border-color:#c0392b}
.direct{display:flex;flex-direction:column;gap:2px}
.direct a,.direct div{display:flex;flex-direction:column;gap:2px;padding:15px 0;min-height:60px;
  border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease)}
.direct a:hover{padding-left:10px}
.direct b{font-size:1.02rem;font-weight:500;letter-spacing:-.02em}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);z-index:90;
  padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.9rem;
  box-shadow:var(--shadow-lift);transition:transform .6s var(--ease);max-width:calc(100vw - 32px);
  text-align:center}
.toast.on{transform:translate(-50%,0)}

/* ---------------------------------------------------------------- legal / prose */
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.legal-tabs a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);font-size:.87rem;color:var(--ink-soft);transition:border-color .35s,color .35s}
.legal-tabs a:hover{border-color:var(--amber);color:var(--ink)}
.legal-tabs [aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* ---------------------------------------------------------------- legal pages
   The service agreement alone runs to ~10,000px. A sticky, numbered table of
   contents turns four walls of prose into something navigable, and the nav's
   scroll-progress bar already shows how far through you are. */
.legal-grid{display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(26px,5vw,72px);align-items:start}
.toc{position:sticky;top:96px;max-height:calc(100svh - 140px);overflow-y:auto;
  padding-right:6px;scrollbar-width:thin}
.toc details{border-top:1px solid var(--ink);padding-top:14px}
.toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;min-height:44px}
.toc summary::-webkit-details-marker{display:none}
.toc summary .pm{width:26px;height:26px}
.toc summary .pm::before,.toc summary .pm::after{width:9px}
.toc details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.toc ol{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:baseline;
  padding:9px 0;min-height:44px;font-size:.87rem;line-height:1.35;color:var(--ink-soft);
  border-left:2px solid transparent;padding-left:12px;margin-left:-14px;
  transition:color .3s,border-color .3s}
.toc a .n{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;color:var(--faint)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:500;border-left-color:var(--amber)}
.toc a.on .n{color:var(--amber-text)}

.prose{max-width:74ch;color:var(--ink-soft);font-size:.98rem;line-height:1.72}
.prose h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.032em;color:var(--ink);
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line);
  scroll-margin-top:96px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.prose h2 .n{font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;color:var(--amber-text);
  font-weight:500}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
@media(max-width:900px){
  .legal-grid{grid-template-columns:1fr;gap:22px}
  .toc{position:static;max-height:none;padding-right:0;
    border:1px solid var(--line);border-radius:var(--rad);padding:4px 18px 10px;
    background:var(--surface)}
  .toc details{border-top:0;padding-top:0}
  .toc a{margin-left:0;padding-left:10px}
  .prose h2{grid-template-columns:1fr;gap:4px}
}
.prose h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin:26px 0 8px;letter-spacing:-.024em}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:7px}
.prose a{color:var(--amber-text);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- footer */
.foot{position:relative;padding:clamp(60px,8vw,100px) 0 26px;border-top:1px solid var(--line);
  margin-top:clamp(40px,7vw,90px);overflow:hidden}
.foot-cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,40px)}
.foot-brand p{font-size:.9rem;color:var(--ink-soft);margin:14px 0 10px;max-width:30ch}
.foot h4{font-family:var(--fm);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;font-weight:500}
.foot ul{display:flex;flex-direction:column}
.foot ul a{display:flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--ink-soft);
  transition:color .35s,transform .45s var(--ease)}
.foot ul a:hover{color:var(--amber-text);transform:translateX(4px)}
.wordmark{margin-top:clamp(40px,6vw,72px);font-size:clamp(3.1rem,15.2vw,14rem);font-weight:600;
  letter-spacing:-.06em;line-height:.8;text-align:center;white-space:nowrap;user-select:none;
  /* one continuous band of light crossing the word — never per-letter colour,
     so no fragment of the name is ever picked out on its own */
  background:linear-gradient(90deg,var(--wm) 0%,var(--wm) calc(var(--sx,50%) - 13%),
    var(--amber) var(--sx,50%),var(--wm) calc(var(--sx,50%) + 13%),var(--wm) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;--wm:#ddd8cc}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  padding-top:20px;margin-top:22px;border-top:1px solid var(--line);color:var(--faint);
  text-transform:none;letter-spacing:.02em}

/* Round WhatsApp shortcut: large touch target, clear of browser controls. */
.wa,.wa.on-dark{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:72px;z-index:50;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;min-height:58px;padding:0;border:1px solid #192733;border-radius:50%;background:#25d366;color:#102e23;box-shadow:0 4px 16px #19273325;text-decoration:none;transition:transform .2s,background .2s}
.wa svg{width:30px;height:30px;flex:none}
.wa:hover,.wa.on-dark:hover{background:#46e081;color:#102e23;transform:translateY(-2px)}
.wa:focus-visible{outline:3px solid #192733;outline-offset:4px}
@media(max-width:700px){.wa,.wa.on-dark{right:max(18px,env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));width:60px;height:60px;min-height:60px}.wa svg{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){.wa{transition:none}.wa:hover{transform:none}}

/* ---------------------------------------------------------------- page veil */
.veil{position:fixed;inset:0;z-index:100;background:var(--paper);pointer-events:none;
  transform:translate3d(0,0,0);transition:transform .8s var(--ease)}
.veil.up{transform:translate3d(0,-101%,0)}
.veil.down{transform:translate3d(0,101%,0);transition:none}

/* ===========================================================================
   RESPONSIVE — designed down to 360px, audited at 390px
   ========================================================================= */
@media(max-width:1080px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .foot-cols{grid-template-columns:1fr 1fr;gap:26px}
  .foot-brand{grid-column:1/-1}
  .contact-grid,.split2{grid-template-columns:1fr}
  .phero .wrap{grid-template-columns:1fr}
  .phero-art{order:-1;max-width:400px;aspect-ratio:1/.72}
  .panel-body{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .inds{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .nav{padding-block:10px}
  .panel{width:calc(100vw - var(--gut) * 2);padding-right:clamp(22px,7vw,40px)}
  .panel-art{aspect-ratio:1/.6;max-width:320px}
  .panel-art .fig{width:70%}
  .plans{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .svc-list a,.posts a{flex-wrap:wrap;gap:6px 14px;padding-block:18px}
  .svc-list .p,.posts .dt{flex:0 0 100%;order:-1}
  .posts .dt{flex-direction:row;gap:12px;align-items:baseline}
  .svc-list .t,.posts .t{flex:1 1 auto;font-size:1.22rem}
  .svc-list .r{margin-left:auto}
  .svc-list .pr{display:none}
  .ticker{grid-template-columns:1fr 1fr}
  .arch{grid-template-columns:1fr}
  .awire{width:1px;height:26px;justify-self:center;min-width:0}
  .awire i{left:-2.5px;top:0;animation-name:packet-v}
  @keyframes packet-v{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
  .dsearch{flex-direction:column}
  .dsearch .btn{justify-content:center}
  .foot-cols{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:6px}
  .wordmark{font-size:16.5vw;letter-spacing:-.05em}
  .band .ctas .btn{flex:1 1 100%;justify-content:center}
}
/* Micro-labels: the tracked mono eyebrows, plan numbers, badges and stat
   captions are all sub-12px on desktop by design. On a phone that is simply
   too small to read, so the whole family lifts to a 12.5px floor. */
@media(max-width:700px){
  .mono,.tag,
  .plan .num,.plan .best,.amt .from,.badge,
  .foot h4,.foot-bottom,.ticker>div>span,.stat>span,.step .num,
  .price-chip span,.price-chip b small,.svc-list .p,.posts .cat,.pcard ul,
  .pills .lead small,.field label,.drop .d,.menu nav a small,
  .train-hud .mono,.hud-name,.way .link,.crumbs .tag,
  .panel__i,.anode span:not(.mono),.tier-cols ul,
  .hero__i,.orbit>b,.gauge,.gauge b,.folio span,.folio em,
  .toc a,.toc a .n,.prose h2 .n{font-size:12.5px}
  .gauge{gap:10px}
  .folio{gap:12px}
  .badge{padding:4px 10px}
  .plan .best{font-size:12.6px}
  .price-chip span,.amt .from,.stat>span,.ticker>div>span{letter-spacing:.09em}
}
@media(max-width:420px){
  .feats{grid-template-columns:1fr!important}
  .inds{grid-template-columns:1fr!important}
  .ticker{grid-template-columns:1fr}
  .menu-sub{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- still frames
   #shot mode (design/capture.ps1): land every entrance instantly so a capture
   never freezes a stagger mid-flight. Scroll-driven motion still runs. */
html.shot .rv{opacity:1!important;transform:none!important;transition:none!important}
html.shot .split .w>i{transform:none!important;transition:none!important}
html.shot .inds>div::before,html.shot .step::after{transform:scaleX(1)!important;transition:none!important}
html.shot .beat-line{stroke-dashoffset:0!important;animation:none!important}

/* ---------------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.split .w>i{opacity:1!important;transform:none!important}
  .deep{height:auto;min-height:0;padding-block:clamp(70px,10vw,130px)}
  .deep::before,.deep::after{clip-path:none!important}
  .deep-in{opacity:1!important;visibility:visible!important;transform:none!important}
  .train-pin{height:auto;min-height:0;overflow:visible;padding-block:60px}
  .panels{flex-direction:column;gap:70px;transform:none!important;padding-right:var(--gut)}
  .panel{width:100%;padding-right:0}
  .drift,.gate__ring,.grain,.bloom{display:none}
  .ptrain-row,.marq-in{transform:none!important;flex-wrap:wrap}
}