/* ==========================================================================
   AGENCY NEO LIBRARY · agency.css · v2.3 (28 Oct 2026)
   Shared by index.html and josef.html · NEO Library design system 1.0.

   Art direction: a library at sunrise, with a Japanese sense of restraint.
   · Hero (hinode): a night band where the NEO sun rises from a seigaiha sea,
     framed by an ensō ring, kasumi mist, a hanko seal and vertical edge text.
   · Every client is catalogued on a card with a real Dewey class (catalogue).
   · Services stand on a bookshelf (spines on desktop, a stack on phones).
   · The founder stands in the NEO arch window.
   · Night bands bookend the page; the sun rises again at the end.

   Sizing: every length is in rem and the root font size grows with the
   screen (16 px on phones, about 18 px at 1440, 20 px on very wide
   screens), so text and layout scale together. Media queries stay in px.

    1 tokens        6 bookshelf      11 founder        16 onboarding
    2 base          7 timeline       12 ecosystem      17 authority record
    3 header/menu   8 compare        13 faq            18 overlays
    4 hero          9 desk           14 final          19 motion
    5 sections     10 team           15 footer
   ========================================================================== */

/* ---------- 1 · TOKENS ---------- */
:root{
  --surface:#FFFFFF;--surface-alt:#F6F4FB;--surface-raised:#FFFFFF;--line:#E6E2F0;--line-strong:#D3CCE6;
  --ink:#17142A;--ink-muted:#55516B;--accent:#5A3FD6;
  --violet:#5A3FD6;--magenta:#D9367A;--orange:#F0662A;--gold:#F5B427;--teal:#12A08F;--sea:#00A3C4;
  --night:#0F0C1D;--night-2:#17122E;--on-night:#F4F1FF;--on-night-muted:#C9C3E0;
  --btn:#17142A;--btn-ink:#FFFFFF;--wa:#25D366;--wa-ink:#06301A;
  --good:#12A08F;--good-bg:#E3F5F2;--warn:#B26A00;--warn-bg:#FDF1DA;--crit:#C2255C;--crit-bg:#FBE4EC;
  --paper:#FBF8EF;--paper-line:#E9E1CC;--paper-ink:#3A3325;
  /* sunrise scene */
  --sky-1:#5A3FD6;--sky-2:#D9367A;--sky-3:#F0662A;--sky-4:#F5B427;
  --sun-1:#FFD35C;--sun-2:#F0662A;--sea-1:#00A3C4;--sea-2:#00708C;--palm:#1A1233;
  --em:linear-gradient(90deg,#D9367A,#5A3FD6 55%,#12A08F);
  --ribbon:linear-gradient(90deg,#5A3FD6,#D9367A,#F0662A,#F5B427,#12A08F);
  --shadow:0 1.125rem 2.5rem -1.75rem rgba(23,20,42,.35);
  --shadow-lg:0 2.5rem 5rem -2.5rem rgba(23,20,42,.45);
  --f-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --f-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Space Mono",ui-monospace,Menlo,monospace;
  --r-sm:0.875rem;--r-md:1.25rem;--r-lg:1.75rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:80rem;--hdr:4rem;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#0F0C1D;--surface-alt:#161229;--surface-raised:#151128;--line:#2B2645;--line-strong:#3D3660;
  --ink:#F1EEFA;--ink-muted:#ABA5C4;--accent:#A894FF;
  --violet:#8C74FF;--magenta:#FF5C9A;--orange:#FF7D45;--gold:#FFC94A;--teal:#2FD1BC;--sea:#2EC5E8;
  --btn:#F1EEFA;--btn-ink:#0F0C1D;
  --good:#2FD1BC;--good-bg:#10302E;--warn:#FFC94A;--warn-bg:#33270C;--crit:#FF5C9A;--crit-bg:#3A1428;
  --paper:#1C1830;--paper-line:#332D4D;--paper-ink:#E9E3F7;
  --sky-1:#120E2E;--sky-2:#4B33B8;--sky-3:#C42E6E;--sky-4:#F0662A;
  --sea-1:#0A7F99;--sea-2:#073F52;--palm:#07050F;
  --em:linear-gradient(90deg,#FFC94A,#FF5C9A 50%,#A894FF);
  --shadow:0 1.125rem 2.5rem -1.75rem rgba(0,0,0,.8);--shadow-lg:0 2.5rem 5rem -2.5rem rgba(0,0,0,.9);color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:#0F0C1D;--surface-alt:#161229;--surface-raised:#151128;--line:#2B2645;--line-strong:#3D3660;
  --ink:#F1EEFA;--ink-muted:#ABA5C4;--accent:#A894FF;
  --violet:#8C74FF;--magenta:#FF5C9A;--orange:#FF7D45;--gold:#FFC94A;--teal:#2FD1BC;--sea:#2EC5E8;
  --btn:#F1EEFA;--btn-ink:#0F0C1D;
  --good:#2FD1BC;--good-bg:#10302E;--warn:#FFC94A;--warn-bg:#33270C;--crit:#FF5C9A;--crit-bg:#3A1428;
  --paper:#1C1830;--paper-line:#332D4D;--paper-ink:#E9E3F7;
  --sky-1:#120E2E;--sky-2:#4B33B8;--sky-3:#C42E6E;--sky-4:#F0662A;
  --sea-1:#0A7F99;--sea-2:#073F52;--palm:#07050F;
  --em:linear-gradient(90deg,#FFC94A,#FF5C9A 50%,#A894FF);
  --shadow:0 1.125rem 2.5rem -1.75rem rgba(0,0,0,.8);--shadow-lg:0 2.5rem 5rem -2.5rem rgba(0,0,0,.9);color-scheme:dark}
@media (min-width:900px){:root{--hdr:4.75rem}}

/* ---------- 2 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
/* fluid root: 100% (16 px) on phones → 125% (20 px) on very wide screens,
   relative to the visitor's own browser setting (never fixed pixels) */
html{font-size:clamp(100%,.875rem + .3vw,125%);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--f-text);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
img,svg{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:0.5rem}
[tabindex="-1"]:focus{outline:none}
::selection{background:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--ink)}
section[id],main[id]{scroll-margin-top:calc(var(--hdr) + 1rem)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
@media (min-width:600px){.wrap{padding-left:max(2rem,env(safe-area-inset-left,0px));padding-right:max(2rem,env(safe-area-inset-right,0px))}}
@media (min-width:1100px){.wrap{padding-left:max(3rem,env(safe-area-inset-left,0px));padding-right:max(3rem,env(safe-area-inset-right,0px))}}
.skip{position:absolute;left:0.75rem;top:-3.75rem;z-index:100;background:var(--ink);color:var(--surface);padding:0.625rem 1rem;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 0.75rem)}
.eyebrow{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);display:flex;align-items:center;gap:0.625rem}
.eyebrow::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--c,var(--magenta));flex-shrink:0}
.eyebrow.plain::before{display:none}
/* gradient italic: the extra right padding keeps the italic overhang (f, y, .)
   inside the painted box; clone repeats it on every line when it wraps */
.em{font-style:italic;background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.16em;margin-right:-.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font-size:clamp(1.125rem,1.7vw,1.3125rem);line-height:1.6;color:var(--ink-muted);max-width:60ch;text-wrap:pretty}
.small{font-size:0.8438rem;color:var(--ink-muted)}
.mono{font-family:var(--f-mono)}
.ribbon{height:0.625rem;background:linear-gradient(to bottom,var(--violet) 0 20%,var(--magenta) 20% 40%,var(--orange) 40% 60%,var(--gold) 60% 80%,var(--teal) 80% 100%)}
.logo-n{display:none}.logo-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-n{display:block}:root:not([data-theme="light"]) .logo-d{display:none}}
:root[data-theme="dark"] .logo-n{display:block}:root[data-theme="dark"] .logo-d{display:none}
.ic{width:1.375rem;height:1.375rem;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{--b:var(--btn);--bi:var(--btn-ink);display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;min-height:3rem;border-radius:999px;padding:0.75rem 1.375rem;font-weight:600;font-size:0.9688rem;line-height:1.2;border:1.5px solid var(--b);background:var(--b);color:var(--bi);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,border-color .2s,color .2s;position:relative}
.btn:hover{transform:translateY(-2px);box-shadow:0 0.875rem 1.875rem -1rem color-mix(in srgb,var(--b) 80%,transparent)}
.btn:active{transform:translateY(0)}
.btn .arr{width:1.125rem;height:1.125rem;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(0.25rem)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn.sm{min-height:2.5rem;padding:0.5rem 1rem;font-size:0.875rem}
.btn.lg{min-height:3.5rem;padding:1rem 1.75rem;font-size:1.0312rem}
.btn.wa{--b:var(--wa);--bi:var(--wa-ink)}
.btn.block{width:100%}
.chip{display:inline-flex;align-items:center;gap:0.375rem;font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;padding:0.25rem 0.625rem;border-radius:999px;background:var(--surface-alt);color:var(--ink-muted);white-space:nowrap}
.dot{width:0.5rem;height:0.5rem;border-radius:50%;background:currentColor;display:inline-block}

/* ---------- 3 · HEADER & MOBILE MENU ---------- */
.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(0.875rem);backdrop-filter:saturate(1.5) blur(0.875rem);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site.scrolled{border-bottom-color:var(--line);box-shadow:0 0.75rem 1.875rem -1.625rem rgba(23,20,42,.4)}
.site .bar{display:flex;align-items:center;gap:0.75rem;height:var(--hdr)}
.site .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--ribbon);pointer-events:none}
.brand{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:var(--ink);flex-shrink:0;min-width:0}
.brand img{height:1.5rem;width:auto}
.brand .tag{font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);border-left:1px solid var(--line);padding-left:0.75rem;display:none}
@media (min-width:900px){.brand img{height:1.75rem}}
@media (min-width:1440px){.brand .tag{display:block}}
.nav{display:none;gap:2px;margin-left:auto}
.nav a{position:relative;padding:0.5rem 0.75rem;border-radius:999px;font-weight:500;font-size:0.9375rem;color:var(--ink-muted);text-decoration:none;white-space:nowrap;transition:color .2s,background-color .2s}
.nav a:hover{color:var(--ink);background:var(--surface-alt)}
.nav a[aria-current="true"]{color:var(--ink)}
.nav a[aria-current="true"]::after{content:"";position:absolute;left:0.75rem;right:0.75rem;bottom:3px;height:2px;border-radius:2px;background:var(--ribbon)}
.actions{display:flex;gap:0.5rem;align-items:center;margin-left:auto}
.nav+.actions{margin-left:0.5rem}
.icon-btn{width:2.625rem;height:2.625rem;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:1.1875rem;height:1.1875rem}
.lang{position:relative}
.lang>button{height:2.625rem;border-radius:999px;border:1px solid var(--line-strong);background:transparent;cursor:pointer;padding:0 0.875rem;font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.08em;display:flex;align-items:center;gap:0.375rem}
.lang>button:hover{border-color:var(--ink)}
.lang ul{position:absolute;right:0;top:3.125rem;list-style:none;margin:0;padding:0.375rem;background:var(--surface-raised);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow-lg);min-width:12.5rem;z-index:70}
.lang li button{display:flex;gap:0.625rem;align-items:center;width:100%;text-align:left;background:none;border:0;padding:0.625rem 0.75rem;border-radius:0.625rem;cursor:pointer;font-size:0.9375rem}
.lang li button:hover,.lang li button[aria-current="true"]{background:var(--surface-alt)}
.cc{font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.08em;color:var(--ink-muted);width:1.375rem}
.menu-btn{display:grid}
.hide-sm{display:none!important}
@media (min-width:600px){.hide-sm{display:inline-flex!important}}
/* the type grows with the screen, so the full navigation needs more room:
   menu button below 1200 px, header "Sign in" from 1320 px, "Agency" tag from 1440 px */
@media (min-width:1200px){.nav{display:flex}.menu-btn{display:none}}
@media (max-width:1319.98px){#hdrSignin{display:none}}
/* agency.js tightens the header further when a language needs more room:
   hd1 hides the tag, hd2 the header "Sign in", hd3 folds the navigation into the menu */
.hd1 .brand .tag,.hd2 #hdrSignin,.hd3 .nav{display:none!important}
.hd3 .menu-btn{display:grid!important}
/* full-screen menu */
.mnav{position:fixed;inset:0;z-index:75;background:var(--surface);display:flex;flex-direction:column;gap:1.375rem;padding:calc(env(safe-area-inset-top,0px) + 0.75rem) max(1rem,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 1.5rem) max(1rem,env(safe-area-inset-left,0px));overflow-y:auto;animation:menuIn .35s var(--ease) backwards}
.mnav .top{display:flex;justify-content:space-between;align-items:center;min-height:3.25rem}
.mnav .top img{height:1.5rem;width:auto}
.mnav nav{display:grid;border-top:1px solid var(--line)}
.mnav nav a{display:flex;justify-content:space-between;align-items:baseline;gap:0.75rem;font-family:var(--f-display);font-size:clamp(1.875rem,8.4vw,2.75rem);line-height:1.1;letter-spacing:-.02em;padding:0.75rem 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav nav a b{font-weight:400}
.mnav nav a span{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.12em;color:var(--ink-muted)}
.mnav .row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.mnav .row .lbl{font-family:var(--f-mono);font-size:0.7188rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);width:100%}
.pill{border:1.5px solid var(--line-strong);background:transparent;border-radius:999px;padding:0.5625rem 1rem;cursor:pointer;font-size:0.9375rem;display:inline-flex;gap:0.5rem;align-items:center}
.pill[aria-current="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.mnav .stack{display:grid;gap:0.625rem;margin-top:auto}
html.menu-open{overflow:hidden}

/* ---------- 4 · HERO · hinode (sunrise) ----------
   Copy centred at the top, the horizon at the bottom, at least one screen
   tall. --sun is the sun's diameter, --sea the depth of the sea under the
   gold horizon line. --mx/--my (pointer, -1…1) and --hs (scroll, 0…1) are
   set by agency.js for a slow parallax; without JS they stay 0.          */
.hero{position:relative;overflow:clip}
.hero h1{font-variation-settings:"opsz" 144}
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.ctas{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem}
.micro{display:flex;flex-wrap:wrap;gap:0.375rem 1.125rem;margin-top:1.125rem;font-size:0.875rem;color:var(--ink-muted)}
.micro span{display:inline-flex;align-items:center;gap:0.375rem}
.micro svg{width:1rem;height:1rem;color:var(--teal)}

.hinode{--sun:clamp(15rem,min(60vw,50svh),38rem);--sea:clamp(3rem,7svh,5.5rem);--mx:0;--my:0;--hs:0;
  display:flex;flex-direction:column;min-height:calc(100svh - var(--hdr) - .625rem);color:var(--on-night);isolation:isolate;
  background:radial-gradient(70% 55% at 50% 30%,rgba(90,63,214,.16),transparent 70%),linear-gradient(to bottom,#09071A,#0F0C1D 55%)}
/* night sky: stars and vertical edge text (tategaki) */
.hinode .sky{position:absolute;inset:0;z-index:0;pointer-events:none;translate:calc(var(--mx)*-.5rem) calc(var(--my)*-.35rem);transition:translate 1.6s var(--ease)}
.stars{position:absolute;inset:0 0 34%;-webkit-mask:linear-gradient(#000 25%,transparent);mask:linear-gradient(#000 25%,transparent)}
.stars::before,.stars::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,226,140,.85) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(201,195,224,.8) 0 .7px,transparent 1.2px);
  background-size:13.7rem 11.3rem,19.1rem 15.9rem,7.9rem 6.7rem;background-position:1.3rem 2.1rem,9.7rem 7.3rem,4.1rem .7rem;opacity:.45}
.stars::after{background-position:7.3rem 5.9rem,2.9rem 12.1rem,.6rem 4.4rem;opacity:.75}
.tate{position:absolute;top:clamp(2.5rem,9svh,6rem);writing-mode:vertical-rl;font:400 .6875rem/1 var(--f-mono);letter-spacing:.42em;text-transform:uppercase;color:rgba(201,195,224,.5);white-space:nowrap;display:none}
.tate::after{content:"";position:absolute;left:50%;top:calc(100% + 1.25rem);width:1px;margin-left:-.5px;height:clamp(3rem,10svh,7rem);background:linear-gradient(rgba(245,180,39,.7),transparent);transform-origin:50% 0}
.tate.l{left:max(1.75rem,env(safe-area-inset-left,0px))}
.tate.r{right:max(1.75rem,env(safe-area-inset-right,0px))}
@media (min-width:1180px){.tate{display:block}}
/* the copy */
.hinode .hero-copy{position:relative;z-index:2;flex:1 0 auto;display:grid;justify-items:center;align-content:center;text-align:center;max-width:100rem;padding-block:clamp(2rem,7svh,5.5rem) clamp(.5rem,2svh,1.5rem);translate:0 calc(var(--hs)*-2.5rem);opacity:calc(1 - var(--hs)*.6)}
.hinode .eyebrow{display:block;color:var(--on-night-muted);text-wrap:balance;line-height:1.7}
.hinode .eyebrow::before{display:inline-block;vertical-align:.1em;margin-right:.625rem;background:var(--gold)}
.hinode h1{font-size:clamp(2.75rem,4.2vw + 3.2svh,7.25rem);line-height:.97;letter-spacing:-.04em;margin-block:1.25rem 1.375rem;max-width:16em;color:var(--on-night)}
.hinode h1 .em{background-image:linear-gradient(90deg,#FFC94A,#FF8A5C 34%,#FF5C9A 62%,#A894FF)}
.hinode .lede{color:var(--on-night-muted);max-width:min(50rem,100%);font-size:clamp(1.0625rem,1.3vw,1.375rem);text-wrap:pretty}
.hinode .ctas{justify-content:center;margin-top:1.875rem}
.hinode .micro{justify-content:center;color:var(--on-night-muted);margin-top:1.125rem}
.hinode .micro svg{color:var(--gold)}
.hinode .btn{--b:#F5B427;--bi:#0F0C1D}
.hinode .btn:hover{--b:#FFD35C}
.hinode .btn.ghost{background:transparent;color:var(--on-night);border-color:rgba(244,241,255,.35)}
.hinode .btn.ghost:hover{border-color:var(--on-night)}
/* the horizon: sky (glow, ensō, sun, mist, birds, seal) · gold line · sea */
.horizon{position:relative;z-index:1;padding-top:clamp(1rem,3svh,2.5rem);pointer-events:none}
.hz-sky{position:relative;height:calc(var(--sun)*.565);overflow:hidden;background:linear-gradient(to bottom,transparent,rgba(43,29,104,.42))}
.hz-sky::before{content:"";position:absolute;left:50%;bottom:0;width:calc(var(--sun)*2.6);height:calc(var(--sun)*1.15);translate:-50% 50%;background:radial-gradient(closest-side,rgba(240,102,42,.42),rgba(217,54,122,.2) 45%,rgba(90,63,214,.08) 72%,transparent)}
/* the NEO sun: the 70s sliced sunrise, gaps cut with a mask (true transparency).
   --o (0…1) opens the slats; registered so it can animate.                     */
@property --o{syntax:"<number>";inherits:false;initial-value:1}
.hz-sun{--o:1;position:absolute;left:50%;bottom:0;width:var(--sun);aspect-ratio:1;margin-left:calc(var(--sun)*-.5);border-radius:50%;
  translate:calc(var(--mx)*.6rem) 50%;transform:translateY(calc(var(--hs)*22%));transition:translate 1.4s var(--ease);
  background:linear-gradient(to bottom,#FFE08A 0%,#FFC94A 15%,#F7913A 33%,#F0662A 50%);
  -webkit-mask:linear-gradient(#000 0 30%,transparent 0 calc(30% + .8%*var(--o)),#000 0 33.5%,transparent 0 calc(33.5% + 1.2%*var(--o)),#000 0 37%,transparent 0 calc(37% + 1.6%*var(--o)),#000 0 40.5%,transparent 0 calc(40.5% + 2%*var(--o)),#000 0 44%,transparent 0 calc(44% + 2.4%*var(--o)),#000 0 47.8%,transparent 0 calc(47.8% + 2.8%*var(--o)),#000 0);
  mask:linear-gradient(#000 0 30%,transparent 0 calc(30% + .8%*var(--o)),#000 0 33.5%,transparent 0 calc(33.5% + 1.2%*var(--o)),#000 0 37%,transparent 0 calc(37% + 1.6%*var(--o)),#000 0 40.5%,transparent 0 calc(40.5% + 2%*var(--o)),#000 0 44%,transparent 0 calc(44% + 2.4%*var(--o)),#000 0 47.8%,transparent 0 calc(47.8% + 2.8%*var(--o)),#000 0)}
/* ensō: one brush circle around the sun, left open at the end */
.enso{position:absolute;left:50%;bottom:0;width:calc(var(--sun)*1.12);margin-left:calc(var(--sun)*-.56);aspect-ratio:112/57;overflow:visible;fill:none;stroke-linecap:round;translate:calc(var(--mx)*.35rem) 0;transition:translate 1.6s var(--ease)}
.enso .e1{stroke:url(#ensoInk);stroke-width:.42;stroke-dasharray:93 200}
.enso .e2{stroke:#F5B427;stroke-width:.2;opacity:.4;stroke-dasharray:70 130;stroke-dashoffset:-14}
/* kasumi: horizontal bands of dawn mist drifting across the sun */
.mist{position:absolute;inset:0;translate:calc(var(--mx)*-1.1rem) 0;transition:translate 1.8s var(--ease)}
.kasumi{position:absolute;height:clamp(.45rem,.9vw,.8rem);border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,214,170,.22) 18%,rgba(255,170,200,.12) 65%,transparent)}
.kasumi.k1{left:calc(50% - var(--sun)*.78);width:calc(var(--sun)*.92);bottom:60%}
.kasumi.k2{left:calc(50% + var(--sun)*.04);width:calc(var(--sun)*.82);bottom:38%}
.kasumi.k3{left:calc(50% - var(--sun)*.34);width:calc(var(--sun)*.56);bottom:84%;opacity:.7}
.hz-sky .bird{position:absolute;width:clamp(1.1rem,1.8vw,1.75rem);color:rgba(244,241,255,.72);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 70%}
.hz-sky .bird.b1{left:calc(50% - var(--sun)*.38);bottom:62%}
.hz-sky .bird.b2{left:calc(50% - var(--sun)*.27);bottom:73%;width:clamp(.8rem,1.3vw,1.25rem);opacity:.75}
/* hanko: the NEO seal, stamped like an artist's seal on a woodblock print */
.hanko{--sr:-4deg;display:inline-grid;place-items:center;writing-mode:vertical-rl;text-orientation:upright;font:700 .75rem/1 var(--f-mono);letter-spacing:.14em;padding:.6rem .42rem;border-radius:.25rem;background:#D9367A;color:#FFF0F4;box-shadow:inset 0 0 0 .14rem rgba(255,240,244,.38),0 .5rem 1.25rem -.5rem rgba(217,54,122,.7);transform:rotate(var(--sr));user-select:none}
.hz-sky .hanko{position:absolute;left:calc(50% + var(--sun)*.62);bottom:16%}
.hz-line{display:block;position:relative;z-index:2;height:1px;margin-top:-1px;background:linear-gradient(90deg,transparent,rgba(245,180,39,.55) 12%,#FFE3A0 50%,rgba(245,180,39,.55) 88%,transparent)}
/* the sea: a seigaiha wave plane in perspective, drifting slowly, with the
   sun's gold reflection on top. The pattern is opaque so waves overlap.   */
.hz-sea{position:relative;height:var(--sea);overflow:hidden;isolation:isolate;background:#120E2C}
.hz-sea .water{position:absolute;inset:0;z-index:0;overflow:hidden;perspective:12rem;perspective-origin:50% 0}   /* the 3D plane lives in its own box */
.hz-sea .plane{position:absolute;left:-60%;right:-60%;top:0;height:520%;transform-origin:50% 0;transform:rotateX(66deg)}
.hz-sea .wave{position:absolute;top:0;bottom:0;left:0;right:-4rem;background-color:#141033;
  background-image:radial-gradient(circle at 100% 150%,#141033 24%,#2E2766 24% 28%,#141033 28% 36%,#2E2766 36% 40%,transparent 40%),radial-gradient(circle at 0 150%,#141033 24%,#2E2766 24% 28%,#141033 28% 36%,#2E2766 36% 40%,transparent 40%),radial-gradient(circle at 50% 100%,#2E2766 10%,#141033 10% 23%,#2E2766 23% 30%,#141033 30% 43%,#2E2766 43% 50%,#141033 50% 63%,#2E2766 63% 71%,transparent 71%),radial-gradient(circle at 100% 50%,#2E2766 5%,#141033 5% 15%,#2E2766 15% 20%,#141033 20% 29%,#2E2766 29% 34%,#141033 34% 44%,#2E2766 44% 49%,transparent 49%),radial-gradient(circle at 0 50%,#2E2766 5%,#141033 5% 15%,#2E2766 15% 20%,#141033 20% 29%,#2E2766 29% 34%,#141033 34% 44%,#2E2766 44% 49%,transparent 49%);
  background-size:4rem 2rem}
.hz-sea::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(to bottom,rgba(40,28,96,.55),rgba(15,12,29,.1) 30%,rgba(15,12,29,.45) 68%,#0F0C1D)}
.rf{position:absolute;left:50%;z-index:2;height:.28rem;border-radius:999px;translate:calc(-50% + var(--mx)*.6rem) 0;transition:translate 1.4s var(--ease);background:linear-gradient(90deg,transparent,rgba(245,180,39,.85) 20%,#FFD35C 50%,rgba(240,102,42,.85) 80%,transparent)}
.rf.r1{top:12%;width:calc(var(--sun)*.62)}
.rf.r2{top:34%;width:calc(var(--sun)*.44);height:.24rem}
.rf.r3{top:56%;width:calc(var(--sun)*.28);height:.2rem}
.rf.r4{top:76%;width:calc(var(--sun)*.14);height:.16rem}
.hinode .trust{margin-top:0;border-top:0;padding-block:.375rem 1.5rem}
.hinode .trust ul{justify-content:center;gap:.5rem 2.25rem;color:var(--on-night-muted)}
/* trust strip (shared) */
.trust{margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--line);padding-block:1.125rem 1.625rem}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem 1.75rem;justify-content:space-between;font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.trust li{display:flex;align-items:center;gap:0.625rem}
.trust li::before{content:"";width:0.625rem;height:0.625rem;border-radius:50%;background:linear-gradient(var(--gold),var(--orange))}
@media (max-width:599.98px){.trust ul{justify-content:flex-start;gap:0.5rem 1.125rem;font-size:0.6875rem}.hinode .trust ul{justify-content:center}.hz-sky .hanko{left:auto;right:4%;bottom:10%;font-size:.625rem}}

/* ---------- 4b · CATALOGUE · the client card (moved out of the hero) ---------- */
.catalog{overflow:clip}                      /* the arch glow and palms may not widen the page */
.cat-grid{display:grid;gap:clamp(2.25rem,5vw,4.5rem);align-items:center}
@media (min-width:980px){.cat-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.cat-copy .lede{margin-top:1.125rem}
.cat-copy .ctas{margin-top:1.75rem}
.hero-side{justify-self:center;width:100%;max-width:30rem;min-width:0}
.hero-art{position:relative;padding-bottom:9.375rem}
.hero-art::before{content:"";position:absolute;inset:8% -18% 30%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 38%,transparent),transparent);filter:blur(1.5rem);z-index:-1;pointer-events:none}
.arch{position:relative;width:88%;margin-left:auto;aspect-ratio:4/5;border-radius:999px 999px 1.625rem 1.625rem;overflow:hidden;isolation:isolate;box-shadow:var(--shadow-lg);outline:1px solid var(--line-strong);outline-offset:0.625rem}
.arch .sky{position:absolute;inset:0 0 40% 0;overflow:hidden;background:linear-gradient(to bottom,var(--sky-1) 0%,var(--sky-2) 42%,var(--sky-3) 76%,var(--sky-4) 100%)}
.arch .sun{position:absolute;left:24%;width:52%;aspect-ratio:1;bottom:-27%;border-radius:50%;background:linear-gradient(to bottom,var(--sun-1),var(--sun-2) 92%);box-shadow:0 0 3.75rem 0.625rem color-mix(in srgb,var(--gold) 45%,transparent)}
.arch .sea{position:absolute;inset:60% 0 0 0;background:linear-gradient(to bottom,var(--sea-1),var(--sea-2))}
.arch .refl{position:absolute;left:50%;transform:translateX(-50%);height:4.2%;border-radius:0 0 999px 999px;background:linear-gradient(to bottom,var(--sun-2),var(--gold))}
.arch .refl.r1{top:6%;width:48%}
.arch .refl.r2{top:15%;width:36%}
.arch .refl.r3{top:24%;width:22%;opacity:.85}
.arch .glitter{position:absolute;left:50%;top:32%;bottom:0;width:58%;transform:translateX(-50%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:repeating-linear-gradient(to bottom,transparent 0 0.5625rem,rgba(255,226,140,.9) 0.5625rem 0.6875rem,transparent 0.6875rem 1.0625rem,rgba(255,255,255,.55) 1.0625rem 1.125rem);background-size:100% 2.25rem;-webkit-mask:linear-gradient(to bottom,#000 10%,transparent 95%);mask:linear-gradient(to bottom,#000 10%,transparent 95%);opacity:.9}
.arch .palm{position:absolute;bottom:39.6%;color:var(--palm);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;transform-origin:60% 100%}
.arch .palm.p1{right:-7%;width:38%}
.arch .palm.p2{left:-6%;width:24%;transform:scaleX(-1)}
.arch .bird{position:absolute;width:9%;color:var(--palm);opacity:.7;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.arch .bird.b1{top:18%;left:22%}.arch .bird.b2{top:24%;left:33%;width:6%}
/* the client catalogue card */
.card-cat{--rot:-2.5deg;position:absolute;left:0;bottom:0;width:min(86%,25rem);background:var(--paper);color:var(--paper-ink);border-radius:0.375rem;padding:1.375rem 1.375rem 2.875rem;box-shadow:var(--shadow-lg),0 1px 0 var(--paper-line);transform:rotate(var(--rot));background-image:repeating-linear-gradient(to bottom,transparent 0 1.9375rem,var(--paper-line) 1.9375rem 2rem);background-position:0 5.25rem}
.card-cat::after{content:"";position:absolute;left:50%;bottom:0.875rem;width:1rem;height:1rem;margin-left:-0.5rem;border-radius:50%;background:var(--surface);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.card-cat .top{display:flex;justify-content:space-between;gap:0.75rem;font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--magenta);padding-bottom:0.5625rem;margin-bottom:0.75rem}
.card-cat .cbody{transition:opacity .22s,transform .22s var(--ease)}
.card-cat.swap .cbody{opacity:0;transform:translateY(0.375rem)}
.card-cat .call{font-family:var(--f-mono);font-weight:700;font-size:1.3125rem;line-height:1.15;color:var(--magenta);min-height:1.625rem}
.card-cat dl{display:grid;grid-template-columns:auto 1fr;gap:0 0.75rem;margin:0.375rem 0 0;font-size:0.9375rem;line-height:2rem}
.card-cat dt{font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.card-cat dd{margin:0;font-family:var(--f-display);font-size:1.0625rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stamps{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.875rem}
.stamp{--sr:-2deg;font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:0.25rem;padding:3px 0.4375rem;transform:rotate(var(--sr))}
.stamp.s1{color:var(--violet)}.stamp.s2{color:var(--teal)}.stamp.s3{color:var(--orange);--sr:1.5deg}
.hero-meta{margin-top:1.5rem;display:grid;gap:0.75rem}
.card-note{font-family:var(--f-mono);font-size:0.75rem;color:var(--ink-muted);letter-spacing:.06em;min-height:1.0625rem}
.drawer-tabs{display:flex;gap:0.5rem;flex-wrap:wrap}
.drawer-tabs button{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:0.5rem 1rem;font-size:0.875rem;cursor:pointer;color:var(--ink-muted);transition:color .2s,background-color .2s,border-color .2s,transform .25s var(--ease)}
.drawer-tabs button:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.drawer-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
@media (max-width:979.98px){.hero-side{max-width:28rem}}
@media (max-width:599.98px){.hero-art{padding-bottom:10.625rem}.arch{width:84%}.card-cat{width:92%}}

/* ---------- 5 · SECTIONS ---------- */
.band{position:relative;padding-block:clamp(3.5rem,6.5vw,6.5rem);overflow-x:clip}   /* decoration never widens the page */
.band.alt{background:var(--surface-alt)}
.band.night{background:var(--night);color:var(--on-night)}
.band.night .eyebrow,.band.night .lede{color:var(--on-night-muted)}
.sec-head{display:grid;gap:1rem 3rem;align-items:end;margin-bottom:clamp(1.75rem,3.5vw,3rem)}
@media (min-width:900px){.sec-head{grid-template-columns:1fr 1fr}}
.sec-head h2,.h2{font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.03;letter-spacing:-.03em;margin-top:0.875rem}
.grid3{display:grid;gap:1rem}
@media (min-width:640px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid3{grid-template-columns:repeat(3,1fr)}}
/* problems */
/* compact card head: the tile and the kicker share the first row */
.prob{position:relative;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.625rem 1.625rem;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:.875rem;row-gap:0.625rem;align-items:center;align-content:start;min-width:0;transition:transform .35s var(--ease),border-color .25s,box-shadow .35s var(--ease)}
.prob:hover{transform:translateY(-0.25rem);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:var(--shadow)}
.tile{width:3rem;height:3rem;border-radius:0.875rem;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.tile .ic{width:1.5rem;height:1.5rem}
.prob .k{font-family:var(--f-mono);font-size:0.7188rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.prob h3{grid-column:1/-1;font-size:1.5625rem;line-height:1.18;margin-top:.375rem}
.prob p{grid-column:1/-1;color:var(--ink-muted);font-size:0.9688rem}
/* mid-page call to action */
.mid-cta{margin-top:clamp(2rem,4vw,3.25rem);display:grid;gap:1.125rem 2rem;align-items:center;padding:clamp(1.375rem,3vw,2rem);border-radius:var(--r-lg);background:var(--surface-raised);border:1px solid var(--line);position:relative;overflow:hidden}
.mid-cta::before{content:"";position:absolute;inset:0 0 auto;height:0.375rem;background:var(--ribbon)}
.mid-cta .sunlet{width:3.5rem;height:3.5rem}
.mid-cta h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15}
.mid-cta p{color:var(--ink-muted);margin-top:0.375rem}
@media (min-width:820px){.mid-cta{grid-template-columns:auto 1fr auto}}

/* ---------- 6 · BOOKSHELF (services) ---------- */
.shelf{display:grid;gap:0.625rem}
.spine{--h:22.5rem;position:relative;min-width:0;cursor:pointer;border:0;border-radius:0.5rem 0.5rem 3px 3px;background:var(--c);color:#17142A;display:flex;align-items:center;gap:0.875rem;padding:0 1.125rem;min-height:4rem;text-align:left;font:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s;box-shadow:inset -0.625rem 0 1.125rem -0.875rem rgba(0,0,0,.45),inset 0 -3px 0 rgba(0,0,0,.12)}
.spine[data-tone="l"]{color:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spine[data-tone="l"]{color:#0F0C1D}}
:root[data-theme="dark"] .spine[data-tone="l"]{color:#0F0C1D}
.spine .cn{font-family:var(--f-mono);font-weight:700;font-size:0.75rem;letter-spacing:.08em;opacity:.85;min-width:3.875rem}
.spine .t{font-family:var(--f-display);font-size:1.25rem;line-height:1.15;letter-spacing:-.01em;flex:1;min-width:0}
.spine .m{font-family:var(--f-mono);font-size:0.625rem;letter-spacing:.16em;opacity:.7}
@media (max-width:379.98px){.spine .m{display:none}.spine .cn{min-width:3.25rem}.spine{padding:0 .875rem;gap:.625rem}}
.spine .chev{width:1.125rem;height:1.125rem;transition:transform .3s var(--ease)}
.spine[aria-expanded="true"] .chev{transform:rotate(180deg)}
.spine:hover{filter:saturate(1.15) brightness(1.04)}
.book{border-radius:var(--r-md);background:var(--surface-raised);border:1px solid var(--line);border-left:0.375rem solid var(--c);padding:1.375rem;display:grid;gap:1.125rem;animation:bookOpen .45s var(--ease) backwards}
.book .cn{font-family:var(--f-mono);font-weight:700;font-size:0.7812rem;letter-spacing:.12em;color:var(--ink-muted)}
.book h3{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.08;margin-top:0.375rem}
.book p{color:var(--ink-muted);margin-top:0.625rem;max-width:56ch}
.tags{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0.375rem}
.tags li{font-size:0.8125rem;border:1px solid var(--line-strong);border-radius:999px;padding:0.25rem 0.6875rem;color:var(--ink-muted)}
.bk-cta{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:1rem}
.plank{display:none}
html:not(.ui) .book{grid-row:auto!important}
.shelf-hint{margin-top:0.875rem;font-size:0.875rem;color:var(--ink-muted);display:flex;gap:0.5rem;align-items:center}
/* phones and tablets: books lie flat in a stack */
@media (max-width:899.98px){
  .spine:nth-of-type(4n+2){margin-inline:0.625rem 0}.spine:nth-of-type(4n+3){margin-inline:0 0.875rem}.spine:nth-of-type(4n){margin-inline:0.375rem 0.25rem}
  .spine[aria-expanded="true"]{transform:translateX(0.375rem)}
}
/* desktop: books stand on the shelf */
@media (min-width:900px){
  .shelf{grid-template-columns:repeat(9,minmax(0,1fr));gap:0.625rem;align-items:end}
  .spine{grid-row:1;height:var(--h);flex-direction:column;justify-content:space-between;align-items:center;padding:1.125rem 0 1rem;gap:0.625rem;background-image:linear-gradient(to bottom,transparent 0 2.875rem,rgba(0,0,0,.13) 2.875rem 3rem,transparent 3rem calc(100% - 3.625rem),rgba(0,0,0,.13) calc(100% - 3.625rem) calc(100% - 3.5rem),transparent 0)}
  .spine .cn{min-width:0;font-size:0.7188rem}
  .spine .t{writing-mode:vertical-rl;flex:1;font-size:clamp(1.1875rem,1.7vw,1.5rem);max-height:calc(var(--h) - 8.125rem);display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.08}
  .spine .chev{display:none}
  .spine:hover{transform:translateY(-0.625rem)}
  .spine[aria-expanded="true"]{transform:translateY(-1.375rem);box-shadow:inset -0.625rem 0 1.125rem -0.875rem rgba(0,0,0,.45),0 1.625rem 1.875rem -1.375rem rgba(0,0,0,.55)}
  .plank{display:block;grid-row:2;grid-column:1/-1;height:0.75rem;border-radius:3px;background:linear-gradient(to bottom,var(--ink) 0 70%,color-mix(in srgb,var(--ink) 60%,transparent));box-shadow:0 0.875rem 1.125rem -0.75rem rgba(0,0,0,.4);margin-top:-0.625rem}
  .book{grid-row:3;grid-column:1/-1;margin-top:1.375rem;grid-template-columns:1.2fr 1fr;align-items:center;padding:2rem 2.25rem}
}

/* ---------- 7 · TIMELINE (working with us, public view) ---------- */
.timeline{position:relative;display:grid;gap:1.625rem;list-style:none;margin:0;padding:0}
.timeline::before{content:"";position:absolute;left:1.3125rem;top:1.375rem;bottom:1.375rem;width:2px;background:linear-gradient(to bottom,var(--violet),var(--magenta),var(--orange),var(--teal));transform-origin:50% 0;border-radius:2px}
.tstep{position:relative;display:grid;grid-template-columns:2.75rem 1fr;gap:1.125rem;min-width:0;align-content:start}
.tstep .node{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;background:var(--surface-raised);border:2px solid var(--c);font-family:var(--f-mono);font-weight:700;font-size:0.8125rem;color:var(--ink);z-index:1}
.tstep .k{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.tstep h3{font-size:1.625rem;margin-block:0.25rem 0.375rem}
.tstep p{font-size:0.9688rem;color:var(--ink-muted);max-width:34ch}
@media (min-width:900px){
  .timeline{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .timeline::before{left:1.375rem;right:calc(25% - 1.375rem);top:1.3125rem;bottom:auto;width:auto;height:2px;background:var(--ribbon);transform-origin:0 50%}
  .tstep{grid-template-columns:1fr;gap:1rem}
}
.method-note{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:0.625rem;align-items:center;color:var(--ink-muted);font-size:0.9688rem}
.method-note .chip svg{width:0.8125rem;height:0.8125rem}
/* five laws */
.laws{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.laws li{padding:1.5rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:4rem 1fr;gap:0.25rem 1rem;min-width:0;align-content:start}
.laws .n{grid-row:span 2;font-family:var(--f-display);font-size:3.75rem;line-height:.9;background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent}
.laws h3{font-size:1.5rem;line-height:1.18}
.laws p{color:var(--ink-muted);font-size:0.9688rem}
.laws-cite{margin-top:1rem;font-family:var(--f-mono);font-size:0.7188rem;color:var(--ink-muted)}
@media (min-width:1000px){.laws{grid-template-columns:repeat(5,1fr)}.laws li{grid-template-columns:1fr;border-bottom:0;border-right:1px solid var(--line);padding:1.75rem 1.375rem 0.75rem}.laws li:first-child{padding-left:0}.laws li:last-child{border-right:0}.laws .n{grid-row:auto;font-size:4.75rem;margin-bottom:0.5rem}}

/* ---------- 8 · COMPARE ---------- */
.cmp-wrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-raised)}
table.cmp{width:100%;border-collapse:collapse}
.cmp th,.cmp td{text-align:left;padding:1.125rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:top;font-size:0.9688rem}
.cmp thead th{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--ink-muted);background:var(--surface-alt)}
.cmp thead th:last-child{color:var(--accent)}
.cmp tbody th{font-weight:600;width:26%}
.cmp td{color:var(--ink-muted)}
.cmp td.us{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--teal) 7%,transparent)}
.cmp td .mk{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;margin-right:0.625rem;vertical-align:-0.25rem;font-size:0.75rem;font-weight:700}
.cmp td .mk.no{background:var(--surface-alt);color:var(--ink-muted)}
.cmp td .mk.yes{background:var(--teal);color:#fff}
.cmp tbody tr:last-child>*{border-bottom:0}
@media (max-width:699.98px){
  .cmp thead{display:none}
  .cmp tr{display:grid;gap:0.375rem;padding:1.125rem;border-bottom:1px solid var(--line)}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp th,.cmp td{display:block;padding:0;border:0;width:auto}
  .cmp tbody th{font-family:var(--f-display);font-weight:400;font-size:1.375rem;margin-bottom:0.25rem;width:auto}
  .cmp td::before{content:attr(data-label);display:block;font-family:var(--f-mono);font-size:0.6562rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:2px}
  .cmp td.us{background:none;padding:0.625rem 0.75rem;border-radius:0.75rem;background:color-mix(in srgb,var(--teal) 10%,transparent)}
}
/* fit */
.fit{display:grid;gap:1rem}
@media (min-width:600px){.fit{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.fit{grid-template-columns:repeat(4,1fr)}}
.fitc{border-radius:var(--r-md);padding:1.5rem;background:var(--surface-raised);border:1px solid var(--line);display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:.875rem;row-gap:0.75rem;align-items:center;align-content:start;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.fitc:hover{transform:translateY(-0.25rem);box-shadow:var(--shadow)}
.fitc h3{font-size:1.3125rem;line-height:1.15}
.fitc p{grid-column:1/-1;color:var(--ink-muted);font-size:0.9688rem}

/* ---------- 9 · NEO DESK PREVIEW ---------- */
.preview{display:grid;gap:clamp(2.25rem,5vw,4rem);align-items:center}
@media (min-width:980px){.preview{grid-template-columns:.92fr 1.08fr}}
.features{display:grid;gap:1.125rem 1.75rem;margin-top:1.75rem}
@media (min-width:600px){.features{grid-template-columns:1fr 1fr}}
.feat{display:grid;grid-template-columns:1.75rem 1fr;gap:2px 0.625rem;align-content:start}
.feat svg{grid-row:span 2;width:1.375rem;height:1.375rem;color:var(--accent);margin-top:2px}
.feat b{font-weight:600}
.feat span{color:var(--ink-muted);font-size:0.9688rem}
.mock{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-raised);box-shadow:var(--shadow-lg);overflow:hidden;min-width:0}
.mock .bar{display:flex;gap:0.375rem;align-items:center;padding:0.75rem 1rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:0.6875rem;color:var(--ink-muted)}
.mock .bar i{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--line-strong);display:inline-block}
.mock .bar i:nth-child(1){background:#FF6159}.mock .bar i:nth-child(2){background:#FFBD2E}.mock .bar i:nth-child(3){background:#28C941}
.mock .bar .chip{margin-left:auto}
.mtabs{display:flex;gap:0.25rem;padding:0.625rem 0.75rem 0;border-bottom:1px solid var(--line)}
.mtabs button{background:none;border:0;border-bottom:2px solid transparent;padding:0.5rem 0.75rem 0.625rem;font-size:0.875rem;color:var(--ink-muted);cursor:pointer}
.mtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--magenta);font-weight:600}
.mock .body{padding:1.125rem;display:grid;gap:0.75rem;min-height:18.75rem;align-content:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:1rem;min-width:0}
.panel h4{margin:0 0 0.5rem;font-family:var(--f-text);font-size:0.875rem;font-weight:600;letter-spacing:0}
.kv{font-family:var(--f-display);font-size:2rem;line-height:1.05}
.bar-track{height:0.5rem;background:var(--surface-alt);border-radius:999px;overflow:hidden;margin-top:0.625rem}
.bar-track i{display:block;height:100%;border-radius:999px;background:var(--em);transform-origin:0 50%}
.mrow{display:flex;justify-content:space-between;gap:0.75rem;align-items:center;padding:0.625rem 0;border-bottom:1px solid var(--line);font-size:0.9062rem}
.mrow:last-child{border-bottom:0}
.mrow span{color:var(--ink-muted);font-size:0.8125rem;display:block}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.mboard{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem}
.mcol{background:var(--surface-alt);border-radius:0.75rem;padding:0.625rem;display:grid;gap:0.5rem;align-content:start;min-width:0}
.mcol b{font-family:var(--f-mono);font-size:0.6562rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:400}
.mcard{background:var(--surface-raised);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:0.5rem;padding:0.5rem 0.625rem;font-size:0.8125rem;line-height:1.3}
.mchart{display:flex;align-items:flex-end;gap:0.625rem;height:10.625rem;padding-top:0.625rem;border-bottom:1px solid var(--line)}
.mchart i{flex:1;border-radius:0.375rem 0.375rem 0 0;background:linear-gradient(to top,var(--violet),var(--magenta));height:var(--v);transform-origin:50% 100%;position:relative}
.mchart i::after{content:attr(data-v);position:absolute;left:50%;top:-1.125rem;transform:translateX(-50%);font-family:var(--f-mono);font-size:0.625rem;color:var(--ink-muted)}
.mlabels{display:flex;gap:0.625rem;font-family:var(--f-mono);font-size:0.625rem;color:var(--ink-muted)}
.mlabels span{flex:1;text-align:center}

/* ---------- 10 · TEAM ---------- */
.team{display:grid;gap:1.125rem}
@media (min-width:980px){.team{grid-template-columns:1.05fr 1.95fr}}
.core{position:relative;overflow:hidden;background:var(--night);color:var(--on-night);border:1px solid var(--line);border-radius:var(--r-lg);padding:2rem 2rem 9rem;display:flex;flex-direction:column;gap:0.75rem;min-height:20rem}
@media (max-width:599.98px){.core{padding:1.625rem 1.5rem 8rem}.core .coresun{width:13rem;margin-left:-6.5rem}}
.core .eyebrow{color:var(--on-night-muted)}
.core-pic{position:relative;z-index:1;width:3.75rem;height:4.6875rem;object-fit:cover;object-position:50% 25%;border-radius:999px 999px .5rem .5rem;border:2px solid rgba(245,180,39,.85);box-shadow:0 .75rem 1.5rem -1rem rgba(0,0,0,.7);background:linear-gradient(#5A3FD6,#D9367A 50%,#F0662A)}
.core-pic.noimg{display:none}
.core h3{font-size:2rem;line-height:1.1}
.core p{color:var(--on-night-muted);font-size:0.9688rem;position:relative;z-index:1;max-width:40ch}
/* a small hinode at the foot of the card: half sun, slats, gold horizon */
.core .coresun{position:absolute;left:50%;bottom:0;width:15rem;aspect-ratio:2/1;margin-left:-7.5rem;border-radius:999px 999px 0 0;background:linear-gradient(#FFE08A,#FFC94A 30%,#F7913A 65%,#F0662A);
  -webkit-mask:linear-gradient(#000 0 60%,transparent 0 61.6%,#000 0 67%,transparent 0 69.4%,#000 0 74%,transparent 0 77.2%,#000 0 81%,transparent 0 85%,#000 0 88%,transparent 0 92.8%,#000 0);
  mask:linear-gradient(#000 0 60%,transparent 0 61.6%,#000 0 67%,transparent 0 69.4%,#000 0 74%,transparent 0 77.2%,#000 0 81%,transparent 0 85%,#000 0 88%,transparent 0 92.8%,#000 0)}
.core::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,180,39,.75),transparent)}
.addons{display:grid;gap:0.75rem}
@media (min-width:600px){.addons{grid-template-columns:repeat(2,1fr)}}
.addon{position:relative;border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:1.25rem 1.25rem 1.25rem 4.125rem;display:flex;flex-direction:column;gap:0.25rem;background:var(--surface-raised);transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.addon::before{content:"+";position:absolute;left:1.125rem;top:1.125rem;width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:1.125rem;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);transition:transform .35s var(--ease)}
.addon:hover{border-style:solid;border-color:var(--c);transform:translateY(-3px);box-shadow:var(--shadow)}
.addon:hover::before{transform:rotate(90deg)}
.addon h4{margin:0;font-family:var(--f-text);font-weight:600;font-size:1.0625rem;letter-spacing:0}
.addon p{font-size:0.9062rem;color:var(--ink-muted)}
.addon .req{font-family:var(--f-mono);font-size:0.6562rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-top:0.25rem}

/* ---------- 11 · FOUNDER · the librarian in the NEO arch window ---------- */
.why{display:grid;gap:clamp(2.25rem,5vw,4.5rem);align-items:start}
@media (min-width:900px){.why{grid-template-columns:1.05fr .95fr}}
.founder{display:grid;gap:clamp(2.25rem,5vw,5rem);align-items:start}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.founder .portrait{position:sticky;top:calc(var(--hdr) + 2.5rem)}}
.why blockquote,.founder blockquote{position:relative;margin:1.375rem 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(1.75rem,3.2vw,2.875rem);line-height:1.15;letter-spacing:-.018em}
.why blockquote::before,.founder blockquote::before{content:"“";display:block;font-size:2.8em;line-height:.9;height:.42em;margin-left:-.04em;background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.6;pointer-events:none}
.why .cite,.founder .cite{font-family:var(--f-mono);font-size:0.75rem;color:var(--ink-muted);margin-top:1.125rem}
.why .bio,.founder .bio{margin-top:1.5rem;color:var(--ink-muted);display:grid;gap:0.75rem;max-width:62ch}
.facts{border-top:1px solid var(--line)}
.fact{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.fact .y{font-family:var(--f-mono);font-weight:700;font-size:0.8125rem;letter-spacing:.1em;color:var(--accent)}
.founder .facts{margin-top:2.25rem}
@media (max-width:480px){.fact{grid-template-columns:1fr;gap:0.25rem}}
/* portrait: arch frame with a double outline, the sliced sun rising behind it
   and the hanko seal on its edge. If the photo is missing the frame shows the
   NEO sunrise instead (.noimg, set by agency.js).                           */
.portrait{position:relative;margin:0;width:100%;max-width:27rem;justify-self:center;isolation:isolate}
.pframe{position:relative;aspect-ratio:4/5;border-radius:999px 999px 1.5rem 1.5rem;overflow:hidden;isolation:isolate;box-shadow:var(--shadow-lg);outline:1px solid var(--line-strong);outline-offset:.625rem;background:linear-gradient(to bottom,#5A3FD6,#D9367A 46%,#F0662A 76%,#F5B427)}
.pframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:scale 1.2s var(--ease)}
.portrait:hover .pframe img{scale:1.035}
.psun{position:absolute;z-index:-1;right:-11%;bottom:9%;width:46%;aspect-ratio:1;border-radius:50%;background:linear-gradient(to bottom,#FFD35C,#F7913A 45%,#F0662A 70%);
  -webkit-mask:linear-gradient(#000 0 52%,transparent 0 53.5%,#000 0 60%,transparent 0 62.5%,#000 0 68%,transparent 0 71.5%,#000 0 76%,transparent 0 80.5%,#000 0 84.5%,transparent 0 90%,#000 0);
  mask:linear-gradient(#000 0 52%,transparent 0 53.5%,#000 0 60%,transparent 0 62.5%,#000 0 68%,transparent 0 71.5%,#000 0 76%,transparent 0 80.5%,#000 0 84.5%,transparent 0 90%,#000 0)}
.portrait .hanko{position:absolute;left:-.875rem;bottom:20%;z-index:2}
.portrait figcaption{margin-top:1.625rem;display:grid;gap:.25rem;text-align:center}
.portrait figcaption b{font-family:var(--f-display);font-weight:400;font-size:1.3125rem;letter-spacing:-.01em}
.portrait figcaption span{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.portrait.noimg img{display:none}
.portrait.noimg .pframe::after{content:"";position:absolute;left:22%;width:56%;aspect-ratio:1;bottom:-18%;border-radius:50%;background:linear-gradient(#FFD35C,#F0662A)}
@media (max-width:899.98px){.founder .portrait{max-width:18rem}.psun{right:-8%}}

/* ---------- 12 · ECOSYSTEM ---------- */
.eco{display:grid;gap:0.875rem}
@media (min-width:640px){.eco{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.eco{grid-template-columns:repeat(3,1fr)}}
.eco a,.eco div{position:relative;display:grid;gap:0.5rem;align-content:start;padding:1.5rem;border-radius:var(--r-md);border:1px solid rgba(244,241,255,.16);background:rgba(244,241,255,.04);color:var(--on-night);text-decoration:none;min-width:0;overflow:hidden;transition:border-color .25s,transform .35s var(--ease),background-color .25s}
.eco a::after{content:"↗";position:absolute;right:1.25rem;top:1.125rem;font-size:1.125rem;color:var(--on-night-muted);transition:transform .3s var(--ease),color .2s}
.eco a:hover{border-color:rgba(244,241,255,.5);transform:translateY(-3px);background-color:rgba(244,241,255,.07)}
.eco a:hover::after{transform:translate(3px,-3px);color:#FFC94A}
.eco a.give{border-color:#F5B427;background:linear-gradient(140deg,rgba(245,180,39,.18),rgba(217,54,122,.12))}
.eco .u{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.08em;color:#FFC94A;overflow-wrap:anywhere;padding-right:1.5rem}
.eco h3{font-size:1.5625rem}
.eco p{color:var(--on-night-muted);font-size:0.9375rem}
.band.night .sec-head h2{color:var(--on-night)}

/* ---------- 13 · FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
@media (min-width:980px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:4rem}.faq-side{position:sticky;top:calc(var(--hdr) + 2rem);align-self:start}}
.faq-side h2{font-size:clamp(2.25rem,4.8vw,3.75rem);line-height:1.04;letter-spacing:-.028em;margin-top:0.875rem}
.faq-side p{color:var(--ink-muted);margin-top:1rem}
.faq{display:grid;gap:0.625rem}
.faq details{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);padding:2px 1.375rem;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:1.125rem 0;font-weight:600;font-size:1.0625rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--surface-alt) center/0.75rem no-repeat;background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));background-size:0.75rem 2px,2px 0.75rem;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding-bottom:1.25rem;color:var(--ink-muted);max-width:62ch;animation:fadeUp .35s var(--ease) backwards}

/* ---------- 14 · FINAL CALL ---------- */
.final-band{overflow:hidden;padding-bottom:calc(min(18.75rem,44vw) + 2.5rem)}
.final{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:1.25rem}
.final h2{font-size:clamp(2.375rem,5.4vw,4.25rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch;color:var(--on-night)}
.final .ctas{justify-content:center;margin-top:0.25rem}
.final .eyebrow{justify-content:center;text-align:center}.final .eyebrow::before{display:none}
.final-band::after{content:"";position:absolute;left:50%;bottom:-20%;width:min(56.25rem,130vw);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(245,180,39,.32),transparent);pointer-events:none}
.band.night .btn{--b:var(--on-night);--bi:var(--night)}
.band.night .btn.ghost{background:transparent;color:var(--on-night);border-color:rgba(244,241,255,.35)}
.band.night .btn.ghost:hover{border-color:var(--on-night)}
.final-band .btn:not(.ghost){--b:#F5B427;--bi:#0F0C1D}
.final-band .btn:not(.ghost):hover{--b:#FFD35C}
.final-band::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(245,180,39,.7) 30%,#FFE3A0 50%,rgba(245,180,39,.7) 70%,transparent)}
.rise{position:absolute;left:50%;bottom:0;width:min(40rem,92vw);aspect-ratio:2/1;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.rise{z-index:1}
.rise i{position:absolute;left:0;right:0;top:0;aspect-ratio:1;border-radius:50%;background:linear-gradient(to bottom,var(--sun-1),var(--sun-2) 50%)}
/* the 70s sliced sunset: night-coloured bars, thicker toward the horizon, clipped to the circle */
.rise i::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(to bottom,transparent 0 30%,var(--night) 30% 30.8%,transparent 30.8% 33.5%,var(--night) 33.5% 34.7%,transparent 34.7% 37%,var(--night) 37% 38.6%,transparent 38.6% 40.5%,var(--night) 40.5% 42.5%,transparent 42.5% 44%,var(--night) 44% 46.4%,transparent 46.4% 47.8%,var(--night) 47.8% 50.6%,transparent 50.6%)}

/* ---------- 15 · FOOTER ---------- */
footer.ft{border-top:1px solid var(--line);padding-block:3.5rem 1.75rem}
.ft .cols{display:grid;gap:2rem}
@media (min-width:700px){.ft .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ft h4{margin:0 0 0.75rem;font-family:var(--f-mono);font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:400}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem;font-size:0.9375rem}
.ft a{color:var(--ink);text-decoration:none}
.ft a:hover{color:var(--accent);text-decoration:underline}
.ft button.link{background:none;border:0;padding:0;color:var(--ink);cursor:pointer;font-size:0.9375rem;text-align:left}
.ft button.link:hover{color:var(--accent);text-decoration:underline}
.ft .legal{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:0.8125rem;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;justify-content:space-between}
.sel{user-select:all;font-family:var(--f-mono);font-size:0.875rem}

/* ---------- 16 · ONBOARDING (registration desk) ---------- */
.onb{display:grid;gap:clamp(1.5rem,4vw,3.5rem);padding-block:2.5rem 7.5rem;align-items:start}
@media (min-width:900px){.onb{grid-template-columns:18.75rem 1fr}.onb aside{position:sticky;top:calc(var(--hdr) + 1.5rem)}}
.onb aside{display:grid;gap:1rem}
.onb aside h1{font-size:clamp(2.125rem,4vw,3rem);line-height:1.04;letter-spacing:-.03em}
.stepper{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:st}
.stepper li{display:flex;gap:0.75rem;align-items:center;padding:0.5rem 0.75rem;border-radius:0.75rem;color:var(--ink-muted);font-size:0.9375rem;counter-increment:st;transition:background-color .2s,color .2s}
.stepper li::before{content:counter(st,decimal-leading-zero);font-family:var(--f-mono);font-size:0.75rem;width:1.625rem}
.stepper li[aria-current="step"]{background:var(--surface-alt);color:var(--ink);font-weight:600}
.stepper li.done{color:var(--ink)}.stepper li.done::before{content:"✓";color:var(--good)}
@media (max-width:899.98px){.stepper{display:flex;overflow-x:auto;gap:0.25rem;scrollbar-width:none;margin-inline:-0.25rem}.stepper li{flex-shrink:0}}
.form-card{position:relative;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.375rem,4vw,2.75rem);min-width:0;box-shadow:var(--shadow)}
.form-card form.enter{animation:stepIn .35s var(--ease) backwards}
.form-card h2{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.08;margin-block:0.625rem 0.5rem}
.form-card .sub{color:var(--ink-muted);margin-bottom:1.5rem}
.progress-onb{height:0.375rem;background:var(--surface-alt);border-radius:999px;overflow:hidden;margin-bottom:1.625rem}
.progress-onb i{display:block;height:100%;background:var(--ribbon);transition:width .45s var(--ease)}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:0.625rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice span{display:flex;align-items:center;gap:0.75rem;min-height:4.125rem;border:1.5px solid var(--line);border-radius:1rem;padding:0.875rem 1rem;font-size:1rem;font-weight:500;cursor:pointer;background:var(--surface);transition:border-color .15s,transform .2s var(--ease),background-color .15s,color .15s;position:relative}
.choice span svg{width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.choice kbd{margin-left:auto;font-family:var(--f-mono);font-size:0.6875rem;color:var(--ink-muted);border:1px solid var(--line-strong);border-radius:0.375rem;padding:1px 0.375rem;display:none}
@media (hover:hover) and (pointer:fine){.choice kbd{display:inline-block}}
.choice span:hover{border-color:var(--ink);transform:translateY(-2px)}
.choice input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.choice input:checked+span svg,.choice input:checked+span kbd{color:var(--surface);border-color:currentColor}
.choice input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.fields{display:grid;gap:1.125rem}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr}}
.fields .full{grid-column:1/-1}
.field{display:grid;gap:0.375rem;min-width:0}
.field label{font-size:0.875rem;font-weight:600}
input[type=text],input[type=email],input[type=url],input[type=tel],textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:0.75rem 0.875rem;min-width:0;transition:border-color .2s,box-shadow .2s}
textarea{min-height:7.5rem;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 0.25rem color-mix(in srgb,var(--accent) 18%,transparent)}
.field.err input{border-color:var(--crit)}
.msg{font-size:0.8125rem;color:var(--crit)}
.consent{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.9062rem}
.consent input{margin-top:0.25rem;width:1.125rem;height:1.125rem;accent-color:var(--accent);flex-shrink:0}
.hp{position:absolute;left:-624.9375rem;width:1px;height:1px;overflow:hidden}
.form-nav{display:flex;justify-content:space-between;gap:0.75rem;margin-top:1.875rem;flex-wrap:wrap}
.kbd-tip{display:none}
@media (hover:hover) and (pointer:fine){.kbd-tip{display:block;margin-top:0.875rem}}
.onb-trust{display:flex;flex-wrap:wrap;gap:0.375rem 1rem;margin-top:1.375rem;padding-top:1.125rem;border-top:1px solid var(--line);font-size:0.8438rem;color:var(--ink-muted)}
.onb-trust span{display:inline-flex;gap:0.375rem;align-items:center}
.onb-trust svg{width:0.9375rem;height:0.9375rem;color:var(--teal)}
.done-card{text-align:center;display:grid;justify-items:center;gap:1rem;padding-block:1.5rem}
.done-card img{width:5.25rem;height:5.25rem;animation:sunPop .9s var(--ease) backwards}

/* ---------- 17 · AUTHORITY RECORD (josef.html) ---------- */
.rec{background:var(--paper);color:var(--paper-ink);border-radius:0.5rem;padding:clamp(1.25rem,4vw,2.25rem);box-shadow:var(--shadow-lg);font-size:0.9688rem;transform:rotate(.6deg)}
.rec .rh{display:flex;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:0.7188rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--magenta);padding-bottom:0.625rem;margin-bottom:0.5rem}
.rec dl{display:grid;grid-template-columns:4rem 1fr;margin:0}
.rec dt{font-family:var(--f-mono);font-weight:700;color:var(--magenta);padding:0.6875rem 0;border-bottom:1px solid var(--paper-line)}
.rec dd{margin:0;padding:0.6875rem 0;border-bottom:1px solid var(--paper-line);min-width:0}
.rec dd small{display:block;font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
@media (max-width:620px){.rec dl{grid-template-columns:3.25rem 1fr}.rec{transform:none}}
.cite-box{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:1.125rem 1.25rem;font-family:var(--f-mono);font-size:0.8438rem;line-height:1.6;background:var(--surface-raised);overflow-wrap:anywhere}
.works{display:grid;gap:0.875rem}
@media (min-width:640px){.works{grid-template-columns:repeat(2,1fr)}}
.work{position:relative;border:1px solid var(--line);border-radius:var(--r-md);padding:1.375rem;background:var(--surface-raised);text-decoration:none;color:var(--ink);display:grid;gap:0.375rem;align-content:start;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.work::after{content:"↗";position:absolute;right:1.25rem;top:1.125rem;color:var(--ink-muted);transition:transform .3s var(--ease)}
.work:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.work:hover::after{transform:translate(3px,-3px);color:var(--accent)}
.work .u{font-family:var(--f-mono);font-size:0.75rem;color:var(--accent)}
.work h3{font-size:1.625rem}
.work p{color:var(--ink-muted);font-size:0.9375rem}
.page-hero{padding-block:clamp(2rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem)}
.page-hero .hero-grid{align-items:center}
.page-hero h1{font-size:clamp(2.75rem,6.2vw,6rem);line-height:.98;letter-spacing:-.035em;margin-block:1.25rem 1.625rem}
.page-hero .lede{font-size:clamp(1.125rem,1.5vw,1.375rem)}
.page-hero .portrait{max-width:25rem}
/* credentials: the MARC record (sticky on desktop) beside the credentials */
@media (min-width:900px){.rec-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rec-col{position:sticky;top:calc(var(--hdr) + 2rem);align-self:start}}
.rec-grid .facts{margin-top:2rem}

/* ---------- 18 · OVERLAYS: modal, cookies, sticky bar, WhatsApp, toast ---------- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(15,12,29,.6);-webkit-backdrop-filter:blur(0.25rem);backdrop-filter:blur(0.25rem);display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) max(1rem,env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))}
.dialog{background:var(--surface-raised);border-radius:var(--r-lg);padding:2rem;max-width:27.5rem;width:100%;display:grid;gap:0.875rem;position:relative;box-shadow:var(--shadow-lg);animation:dialogIn .4s var(--ease) backwards}
.dialog h2{font-size:2rem;line-height:1.08}
.dialog .x{position:absolute;top:0.875rem;right:0.875rem;width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:0.75rem;width:100%;min-height:3.25rem;border:1.5px solid var(--line-strong);border-radius:999px;padding:0.75rem 1rem;background:var(--surface);font-weight:600;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.sso-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
/* cookie banner: wide, high contrast, asks for an answer (same design as neolibrary.org) */
.ckb{position:fixed;left:50%;transform:translateX(-50%);width:min(calc(100% - 1.5rem),61.25rem);bottom:calc(1rem + env(safe-area-inset-bottom,0px));padding:1.625rem 1.75rem 1.5rem;display:flex;align-items:center;gap:1.125rem 1.75rem;border-radius:1.375rem;background:var(--night);color:var(--on-night);font-size:1.0625rem;line-height:1.5;box-shadow:0 1.875rem 5rem -1.25rem rgba(0,0,0,.6),0 0 0 100vmax rgba(15,12,29,.32);overflow:hidden;z-index:90;animation:ckIn .5s var(--ease) backwards}
.ckb::before{content:"";position:absolute;inset:0 0 auto 0;height:0.375rem;background:linear-gradient(90deg,#5A3FD6 0 20%,#D9367A 20% 40%,#F0662A 40% 60%,#F5B427 60% 80%,#12A08F 80%)}
.ckb p{flex:1;min-width:0}
.ckb a{color:#FFC94A}
.ckb .ckbb{display:flex;gap:0.625rem;flex-shrink:0}
.ckb button{font:600 1rem/1 var(--f-text);padding:1rem 1.5rem;border-radius:999px;border:1.5px solid rgba(244,241,255,.45);background:transparent;color:var(--on-night);cursor:pointer}
.ckb button[data-ck=all]{background:#F5B427;color:#0F0C1D;border-color:#F5B427}
.ckb button[data-ck=all]:hover{background:#fff;border-color:#fff}
@media (max-width:760px){.ckb{flex-direction:column;align-items:stretch;padding:1.375rem 1.25rem 1.25rem}.ckb .ckbb{display:grid;grid-template-columns:1fr 1fr}}
/* sticky call to action on phones */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:0.625rem;align-items:center;padding:0.625rem max(1rem,env(safe-area-inset-right,0px)) calc(0.625rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(0.875rem);backdrop-filter:blur(0.875rem);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
.mbar .btn{flex:1}
.mbar .wa-sq{width:3.25rem;height:3rem;border-radius:999px;display:grid;place-items:center;background:var(--wa);color:#fff;flex-shrink:0}
.mbar .wa-sq svg{width:1.5rem;height:1.5rem}
.past-hero .mbar{transform:none}
.menu-open .mbar,.ck-open .mbar,.on-start .mbar{transform:translateY(110%)}
@media (min-width:760px){.mbar{display:none}}
.wa-float{position:fixed;right:calc(1.25rem + env(safe-area-inset-right,0px));bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));width:3.625rem;height:3.625rem;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 0.875rem 1.875rem -0.625rem rgba(0,0,0,.45);z-index:40;transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:1.75rem;height:1.75rem}
@media (max-width:759.98px){.wa-float{display:none}}
.toast{position:fixed;left:50%;bottom:calc(6rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:0.6875rem 1.125rem;border-radius:999px;font-size:0.9062rem;z-index:95;box-shadow:var(--shadow-lg);animation:fadeUp .35s var(--ease) backwards;max-width:calc(100% - 2rem);text-align:center}

/* ---------- 19 · MOTION ----------
   Entrance animations use fill-mode "backwards", so the resting state is the
   normal style. Scroll reveals only apply when JS has added .rv; content is
   always readable without JS. Reduced motion switches everything off.

   [data-play] scenes (hero horizon, catalogue art, portraits) hold their
   animations until agency.js sees them on screen and adds .go, so a phone
   visitor still sees the sun rise when they scroll to it.                 */
@keyframes fadeUp{from{opacity:0;transform:translateY(0.875rem)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(1.625rem)}}
@keyframes sunrise{from{transform:translateY(62%)}}
@keyframes glow{from{opacity:0}}
@keyframes shimmer{to{background-position:0 2.25rem}}
@keyframes sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.6deg)}}
@keyframes sway2{from{transform:scaleX(-1) rotate(-1deg)}to{transform:scaleX(-1) rotate(1.8deg)}}
@keyframes cardIn{from{opacity:0;transform:translateY(3.125rem) rotate(-7deg)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(var(--sr))}60%{opacity:1;transform:scale(.94) rotate(var(--sr))}100%{transform:scale(1) rotate(var(--sr))}}
@keyframes stamp2{0%{opacity:0;transform:scale(1.9) rotate(var(--sr))}60%{opacity:1;transform:scale(.94) rotate(var(--sr))}100%{transform:scale(1) rotate(var(--sr))}}
@keyframes bookOpen{from{opacity:0;transform:translateY(0.625rem)}}
@keyframes stepIn{from{opacity:0;transform:translateX(1.125rem)}}
@keyframes menuIn{from{opacity:0;transform:translateY(-0.625rem)}}
@keyframes dialogIn{from{opacity:0;transform:translateY(1rem) scale(.98)}}
@keyframes ckIn{from{opacity:0;transform:translate(-50%,1.5rem)}}
@keyframes sunPop{from{opacity:0;transform:translateY(1.25rem) scale(.8)}}
@keyframes fly{from{transform:translate(0,0)}to{transform:translate(1rem,-0.5rem)}}
/* hinode keyframes: slow, eased, one gesture at a time */
@keyframes veil{from{opacity:0;filter:blur(.5rem);transform:translateY(1.25rem)}}
@keyframes lineDraw{from{transform:scaleX(0);opacity:0}}
@keyframes sunUp{from{transform:translateY(64%)}}
@keyframes slats{from{--o:0}}
@keyframes ensoDraw{from{stroke-dashoffset:100}}
@keyframes ensoDraw2{from{stroke-dashoffset:85}}
@keyframes drift{from{translate:-7% 0}to{translate:9% 0}}
@keyframes flyBy{from{translate:0 0}to{translate:calc(var(--sun)*.42) calc(var(--sun)*-.07)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
@keyframes seigaiha{to{transform:translateX(-4rem)}}
@keyframes rfl{0%,100%{transform:scaleX(1);opacity:.95}50%{transform:scaleX(.76);opacity:.55}}
@keyframes twinkle{0%,100%{opacity:.75}50%{opacity:.15}}
@keyframes tateIn{from{opacity:0;letter-spacing:.9em}}
@keyframes hairline{from{transform:scaleY(0)}}
@keyframes pReveal{from{clip-path:inset(100% 0 0 0);scale:1.14}}
@keyframes psunUp{from{opacity:0;transform:translateY(30%)}}
@keyframes tilePop{0%{scale:.55;opacity:0}70%{scale:1.08;opacity:1}100%{scale:1}}
@keyframes ring{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}to{box-shadow:0 0 0 .9rem transparent}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.78}}

/* page-hero (josef.html) entrance */
.js .hero .hero-copy>*{animation:rise .9s var(--ease) backwards}
.js .hero .hero-copy>*:nth-child(2){animation-delay:.08s}
.js .hero .hero-copy>*:nth-child(3){animation-delay:.16s}
.js .hero .hero-copy>*:nth-child(4){animation-delay:.24s}
.js .hero .hero-copy>*:nth-child(5){animation-delay:.32s}
/* hinode entrance: the copy comes out of the night, then the sun rises */
.js .hinode .hero-copy>*{animation:veil 1.5s var(--ease) backwards}
.js .hinode .hero-copy>:nth-child(1){animation-delay:.1s}
.js .hinode .hero-copy>:nth-child(2){animation-delay:.28s;animation-duration:1.8s}
.js .hinode .hero-copy>:nth-child(3){animation-delay:.6s}
.js .hinode .hero-copy>:nth-child(4){animation-delay:.78s}
.js .hinode .hero-copy>:nth-child(5){animation-delay:.92s}
.js .stars{animation:fadeIn 3s ease backwards .2s}
.stars::after{animation:twinkle 5.5s ease-in-out infinite}
.js .tate{animation:tateIn 2.4s var(--ease) backwards 1.1s}
.js .tate::after{animation:hairline 1.8s var(--ease) backwards 2s}
.js .hz-sky::before{animation:glow 3.2s ease backwards .5s}
.js .hz-line{animation:lineDraw 2s var(--ease) backwards .35s}
.js .hz-sun{animation:sunUp 3.2s cubic-bezier(.2,.75,.1,1) backwards .55s,slats 1.8s var(--ease) backwards 2.3s}
.js .enso .e1{animation:ensoDraw 2.8s cubic-bezier(.55,0,.2,1) backwards 1.7s}
.js .enso .e2{animation:ensoDraw2 3.2s cubic-bezier(.55,0,.2,1) backwards 2.1s}
.kasumi.k1{animation:drift 28s ease-in-out infinite alternate}
.kasumi.k2{animation:drift 36s ease-in-out infinite alternate-reverse}
.kasumi.k3{animation:drift 44s ease-in-out infinite alternate}
.js .mist{animation:fadeIn 3s ease backwards 1.8s}
.hz-sky .bird.b1{animation:flyBy 26s ease-in-out infinite alternate}
.hz-sky .bird.b2{animation:flyBy 31s ease-in-out infinite alternate-reverse}
.hz-sky .bird path{animation:flap 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 80%}
.hz-sky .bird.b2 path{animation-duration:1.9s}
.js .hz-sky .hanko{animation:stamp .7s var(--ease) backwards 3.3s}
.hz-sea .wave{animation:seigaiha 10s linear infinite}
.js .hz-sea{animation:fadeIn 2s ease backwards 1s}
.rf{animation:rfl 5.5s ease-in-out infinite}
.rf.r2{animation-duration:6.5s;animation-delay:-1.4s}
.rf.r3{animation-duration:4.8s;animation-delay:-2.6s}
.rf.r4{animation-duration:6s;animation-delay:-.8s}
.js .hinode .trust{animation:fadeUp 1.2s var(--ease) backwards 1.5s}
/* catalogue art: the sunrise arch and the client card */
.js .arch{animation:glow 1s ease backwards}
.js .arch .sun{animation:sunrise 2.4s var(--ease) backwards .2s}
.js .arch .refl{animation:glow 1.2s ease backwards 1.2s}
.arch .glitter{animation:shimmer 3.2s linear infinite}
.arch .palm.p1{animation:sway 6.5s ease-in-out infinite alternate}
.arch .palm.p2{animation:sway2 7.5s ease-in-out infinite alternate}
.arch .bird{animation:fly 9s ease-in-out infinite alternate}
.js .card-cat{animation:cardIn 1.1s var(--ease) backwards .55s}
.js .card-cat .stamp{animation:stamp .55s var(--ease) backwards}
.js .card-cat .stamp.s1{animation-delay:1.35s}.js .card-cat .stamp.s2{animation-delay:1.55s}.js .card-cat .stamp.s3{animation-delay:1.75s}
.js .card-cat.restamp .stamp{animation-name:stamp2}
.js .card-cat.restamp .stamp.s1{animation-delay:.12s}.js .card-cat.restamp .stamp.s2{animation-delay:.24s}.js .card-cat.restamp .stamp.s3{animation-delay:.36s}
/* portraits: the photo is revealed like a curtain, the sun rises, the seal lands */
.js .portrait .pframe img{animation:pReveal 1.6s cubic-bezier(.7,0,.2,1) backwards .15s}
.js .portrait .psun{animation:psunUp 2.2s var(--ease) backwards .7s}
.js .portrait .hanko{animation:stamp .7s var(--ease) backwards 1.5s}
/* hold [data-play] scenes until they are on screen (only when JS runs) */
.ui [data-play]:not(.go),.ui [data-play]:not(.go) *,.ui [data-play]:not(.go) *::before,.ui [data-play]:not(.go) *::after,.ui [data-play]:not(.go)::before{animation-play-state:paused!important}

/* scroll reveal · uses the individual "translate" property so it never
   overrides an element's own transform (tilted cards, hover lifts)      */
.rv{opacity:0;translate:0 1.375rem;transition:opacity .8s var(--ease) var(--d,0ms),translate .8s var(--ease) var(--d,0ms)}
.rv.in{opacity:1;translate:none}
.timeline.rv,.shelf.rv,.rise.rv,.cmp-wrap.rv{opacity:1;translate:none}
.timeline.rv::before{scale:0 1;transition:scale 1.4s var(--ease) .2s}
@media (max-width:899.98px){.timeline.rv::before{scale:1 0}}
.timeline.rv.in::before{scale:1}
.timeline.rv .tstep{opacity:0;translate:0 1rem;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.timeline.rv.in .tstep{opacity:1;translate:none}
.timeline.rv.in .tstep:nth-child(2){transition-delay:.15s}.timeline.rv.in .tstep:nth-child(3){transition-delay:.3s}.timeline.rv.in .tstep:nth-child(4){transition-delay:.45s}
.timeline.rv.in .node{animation:ring 1.2s ease-out backwards .5s}
.timeline.rv.in .tstep:nth-child(2) .node{animation-delay:.65s}.timeline.rv.in .tstep:nth-child(3) .node{animation-delay:.8s}.timeline.rv.in .tstep:nth-child(4) .node{animation-delay:.95s}
.shelf.rv .spine{opacity:0;translate:0 2.5rem;transition:opacity .7s var(--ease),translate .7s var(--ease),transform .35s var(--ease),filter .2s,box-shadow .35s}
.shelf.rv.in .spine{opacity:1;translate:none;transition-delay:calc(var(--i,0) * 60ms),calc(var(--i,0) * 60ms),0s,0s,0s}
.rise.rv i{translate:0 45%;transition:translate 2.2s var(--ease) .2s}
.rise.rv.in i{translate:none}
/* compare: rows slide in one by one, the ticks pop */
.cmp-wrap.rv tbody tr{opacity:0;translate:-1rem 0;transition:opacity .6s var(--ease) calc(var(--r,0) * 90ms + .1s),translate .6s var(--ease) calc(var(--r,0) * 90ms + .1s)}
.cmp-wrap.rv.in tbody tr{opacity:1;translate:none}
.cmp-wrap.rv.in .mk.yes{animation:pop .5s var(--ease) backwards calc(var(--r,0) * 90ms + .45s)}
.mock.in .bar-track i{animation:grow 1.4s var(--ease) backwards .3s}
.mock.in .mchart i{animation:growY 1s var(--ease) backwards}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes grow{from{transform:scaleX(0)}}

/* card life · problems, fit, add-ons, ecosystem, works
   · reveal: the tile pops, its icon draws itself, a colour line sweeps the top
   · hover (mouse): a soft spotlight follows the pointer and the card tilts
     a few degrees (agency.js sets --mx/--my/--rx/--ry)                       */
@property --spot{syntax:"<number>";inherits:true;initial-value:0}
.prob,.fitc,.addon,.eco>a,.work{--rx:0deg;--ry:0deg;background-image:radial-gradient(18rem circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c,var(--accent)) calc(var(--spot) * 11%),transparent),transparent 70%)}
.eco>a{--c:#F5B427}
.prob:hover,.fitc:hover,.addon:hover,.eco>a:hover,.work:hover{--spot:1}
.prob,.fitc{position:relative;overflow:hidden;isolation:isolate;transform:perspective(60rem) translateY(var(--lift,0)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .45s var(--ease),border-color .25s,box-shadow .45s var(--ease),--spot .45s ease}
.prob:hover,.fitc:hover{--lift:-.3rem;transform:perspective(60rem) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry))}
.addon,.eco>a,.work{transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,--spot .45s ease}
.prob::before,.fitc::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 20%,transparent));transform-origin:0 50%}
.tile{transition:rotate .5s var(--ease),scale .5s var(--ease)}
.prob:hover .tile,.fitc:hover .tile{rotate:-6deg;scale:1.08}
.rv .tile{animation:none}
.rv.in .tile{animation:tilePop .9s var(--ease) backwards calc(var(--d,0ms) + .15s)}
.rv .tile .ic{stroke-dasharray:200;stroke-dashoffset:201;transition:stroke-dashoffset 2s var(--ease) calc(var(--d,0ms) + .35s)}
.rv.in .tile .ic{stroke-dashoffset:0}
.prob.rv::before,.fitc.rv::before{transform:scaleX(0);transition:transform 1.3s var(--ease) calc(var(--d,0ms) + .25s)}
.prob.rv.in::before,.fitc.rv.in::before{transform:none}
.rv .feat svg{stroke-dasharray:200;stroke-dashoffset:201;transition:stroke-dashoffset 2s var(--ease) calc(var(--d,0ms) + .3s)}
.rv.in .feat svg{stroke-dashoffset:0}
.mid-cta .sunlet{animation:breathe 6s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.rv .spine,.timeline.rv .tstep,.cmp-wrap.rv tbody tr{opacity:1!important;translate:none!important}
  .rise.rv i{translate:none!important}.timeline.rv::before{scale:1!important}
  .rv .tile .ic,.rv .feat svg{stroke-dashoffset:0!important}.prob.rv::before,.fitc.rv::before{transform:none!important}
  .hinode .hero-copy{translate:none!important;opacity:1!important}
}