/* GENERATED by tools/build-suite.js from index.html. Do not edit: change the
   home page's stylesheet and re-run the build. Used by every page except the
   home page, which carries these rules inline. */
:root{
  --ground:#EDEEE8; --ground-deep:#E4E6DE; --ground-ink:#151A21;
  --surface:#F7F8F3; --surface-2:#FDFDFA; --surface-3:#E9EBE3;

  --ink:#14181C; --ink-2:#4F565D; --ink-3:#5A5F64; --ink-4:#60676D;

  --rule:#D3D6CC; --rule-strong:#B7BBAF; --rule-faint:#E1E3DA;

  --accent:#3E4095; --accent-2:#2F3175; --accent-ink:#32347A;
  --accent-wash:rgba(62,64,149,.07); --accent-wash-2:rgba(62,64,149,.14);
  --accent-on:#fff;

  --live:#0D735C; --live-wash:rgba(14,127,102,.10);
  --legacy:#A8452F; --legacy-wash:rgba(168,69,47,.09);
  --amber:#835F0F; --amber-wash:rgba(138,100,16,.10);

  --grid-line:rgba(20,24,28,.055);
  --shadow-s:0 1px 2px rgba(20,24,28,.05);
  --shadow:0 1px 0 rgba(20,24,28,.04), 0 14px 34px -20px rgba(20,24,28,.30);
  --shadow-l:0 2px 0 rgba(20,24,28,.03), 0 30px 60px -28px rgba(20,24,28,.38);
  --f-d:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-b:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-s:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1280px;
  --pad:clamp(18px,4.5vw,52px);
  --r:4px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1216; --ground-deep:#0A0C0F; --ground-ink:#05070A;
    --surface:#161A1F; --surface-2:#1D222A; --surface-3:#222831;

    --ink:#E9EAE3; --ink-2:#A5ACB4; --ink-3:#8F959D; --ink-4:#888F9A;

    --rule:#282E36; --rule-strong:#3B434E; --rule-faint:#1E242B;

    --accent:#9095E6; --accent-2:#B0B4F2; --accent-ink:#B0B4F2;
    --accent-wash:rgba(144,149,230,.11); --accent-wash-2:rgba(144,149,230,.20);
    --accent-on:#080A0D;

    --live:#3ECBA3; --live-wash:rgba(62,203,163,.12);
    --legacy:#E58466; --legacy-wash:rgba(229,132,102,.12);
    --amber:#D9AE52; --amber-wash:rgba(217,174,82,.12);

    --grid-line:rgba(233,234,227,.05);
    --shadow-s:0 1px 2px rgba(0,0,0,.45);
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
    --shadow-l:0 2px 0 rgba(0,0,0,.4), 0 36px 70px -30px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1216; --ground-deep:#0A0C0F; --ground-ink:#05070A;
  --surface:#161A1F; --surface-2:#1D222A; --surface-3:#222831;
  --ink:#E9EAE3; --ink-2:#A5ACB4; --ink-3:#8F959D; --ink-4:#888F9A;
  --rule:#282E36; --rule-strong:#3B434E; --rule-faint:#1E242B;
  --accent:#9095E6; --accent-2:#B0B4F2; --accent-ink:#B0B4F2;
  --accent-wash:rgba(144,149,230,.11); --accent-wash-2:rgba(144,149,230,.20);
  --accent-on:#080A0D;
  --live:#3ECBA3; --live-wash:rgba(62,203,163,.12);
  --legacy:#E58466; --legacy-wash:rgba(229,132,102,.12);
  --amber:#D9AE52; --amber-wash:rgba(217,174,82,.12);
  --grid-line:rgba(233,234,227,.05);
  --shadow-s:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-l:0 2px 0 rgba(0,0,0,.4), 0 36px 70px -30px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box;}
/* Matches the stuck nav (66px) plus breathing room. Used by native anchor
   jumps and by keyboard focus; the click handler computes its own offset. */
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-b);font-size:16.5px;line-height:1.6;letter-spacing:-.011em;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--f-d);font-weight:600;letter-spacing:-.028em;line-height:1.06;margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
button{font:inherit;color:inherit;}
::selection{background:var(--accent);color:var(--accent-on);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* Bypass blocks: ~10 nav stops sit before the h1. Off-canvas until focused. */
.skip{
  position:absolute;left:12px;top:-60px;z-index:500;
  background:var(--accent);color:var(--accent-on);
  font-family:var(--f-d);font-size:14px;font-weight:600;
  padding:10px 16px;border-radius:3px;text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{top:12px;}

/* ---------- primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.mono{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;}
.mono-sm{font-family:var(--f-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;}
.num{font-variant-numeric:tabular-nums;}
.sec{padding-block:clamp(58px,7vw,110px);}
.sec--tint{background:var(--ground-deep);}

.rul{display:flex;align-items:center;gap:17px;margin-bottom:clamp(26px,3.6vw,44px);color:var(--ink-3);}
/* The section number is a wayfinding device on a very long page, so it
   gets weight rather than sitting as a faint word inside the rule. */
.rul__id{
  color:var(--accent-on);background:var(--accent);
  font-size:14px;font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  padding:7px 11px;border-radius:3px;line-height:1;
  flex:none;
}
/* Two steps up from the 11px .mono default and set solid, so the section
   marker reads as a heading rather than a caption sitting on the rule. */
.rul__l{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.15em;}
.rul__l{color:var(--ink-2);white-space:nowrap;}
/* At 14px/.15em the longest marker ("MetaLens360 - Flagship accelerator", 326px)
   no longer fits a phone, and nowrap pushed the whole document sideways.
   Releasing nowrap below 420px lets only that one marker wrap; the other ten
   are 221px or under and still set on a single line. Desktop is untouched. */
@media (max-width:420px){.rul__l{white-space:normal;}}
.rul__line{flex:1;height:1px;background:var(--rule-strong);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,.84,.3,1);}
.is-in .rul__line{transform:scaleX(1);}

.hd2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;margin-bottom:clamp(28px,3.6vw,46px);}
@media (max-width:920px){.hd2{grid-template-columns:1fr;align-items:start;}}
.hd2 h2{font-size:clamp(27px,3.8vw,44px);}
.hd2 p{color:var(--ink-2);font-size:17.5px;}

.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--f-d);font-weight:600;font-size:14.5px;
  text-decoration:none;padding:13px 20px;border:1px solid var(--accent);
  border-radius:3px;background:var(--accent);color:var(--accent-on);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px -12px var(--accent);}
.btn:active{transform:translateY(0);}
.btn--g{background:transparent;color:var(--ink);border-color:var(--rule-strong);}
.btn--g:hover{border-color:var(--accent);color:var(--accent-ink);box-shadow:none;}
.btn--s{padding:9px 15px;font-size:13.5px;}
.arw{font-family:var(--f-m);font-size:13px;}


/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:200;background:var(--ground);border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease;}
.nav.stuck{border-bottom-color:var(--rule);box-shadow:0 1px 0 var(--rule-faint);}
/* Reading progress. The page is long; this is the cheapest honest way to
   say how much of it is left. */
.nav__pr{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;}
.nav__prb{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear;}
.nav__in{
  display:flex;align-items:center;gap:8px;height:112px;
  transition:height .32s cubic-bezier(.16,.84,.3,1);
}
.nav.stuck .nav__in{height:66px;}
@media (max-width:820px){.nav__in{height:84px;}.nav.stuck .nav__in{height:62px;}}
.brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-decoration:none;margin-right:auto;
}
.nav.stuck .brand{gap:3px;}
/* Centre the wordmark over its tagline. Nav only — the footer lockup stays
   flush left with the copy beneath it. */
.nav__in .brand{align-items:center;}
/* Real lockup. Two files rather than one, because the artwork carries its
   own indigo-to-charcoal ink: the charcoal end vanishes on a dark ground,
   so the dark theme gets a re-inked copy. A <picture> would only answer
   prefers-color-scheme; the site also has an explicit data-theme toggle,
   so the swap has to be CSS. */
.brand__img{
  display:block;height:88px;width:auto;flex:none;
  transition:height .32s cubic-bezier(.16,.84,.3,1);
}
.nav.stuck .brand__img{height:46px;}
@media (max-width:820px){.brand__img{height:62px;}.nav.stuck .brand__img{height:42px;}}
@media (max-width:520px){.brand__img{height:48px;}.nav.stuck .brand__img{height:38px;}}
.brand__img--ondark{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand__img--onlight{display:none;}
  :root:not([data-theme="light"]) .brand__img--ondark{display:block;}
}
:root[data-theme="dark"] .brand__img--onlight{display:none;}
:root[data-theme="dark"] .brand__img--ondark{display:block;}
.ft__brand .brand__img{height:60px;}
@media (max-width:520px){.brand__img{height:34px;}}

/* Tagline under the wordmark. It is the company's own line, so it carries
   real size and its own pulse rather than sitting in 9px grey. */
.brand__tag{
  display:none;
  margin:0;padding-left:0;border-left:none;
  font-family:var(--f-m);font-size:12.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
  white-space:nowrap;text-align:center;
  transition:font-size .32s cubic-bezier(.16,.84,.3,1);
}
@media (min-width:900px){.brand__tag{display:block;}}
.nav.stuck .brand__tag{font-size:10px;}

/* The whole line pulses, so it reads as one signal rather than a dot
   competing with the words beside it. */
.brand__tag span.brand__tagt{
  display:inline-block;
  color:var(--accent);
  animation:brandTagPulse 2.6s ease-in-out infinite;
}
@keyframes brandTagPulse{
  /* Troughs at .80, not .52: below that the accent on this ground drops
     under 4.5:1 and the line stops being readable at the bottom of the
     beat. Still reads clearly as a pulse. */
  0%,100%{opacity:.8;text-shadow:none;}
  50%{opacity:1;text-shadow:0 0 14px var(--accent-wash-2),0 0 4px var(--accent-wash);}
}
@media (prefers-reduced-motion:reduce){
  .brand__tag span.brand__tagt{animation:none;opacity:1;}
  .nav__in,.brand__img,.brand__tag{transition:none;}
}

/* ---------- announcement bar ---------- */
.ann{position:relative;display:flex;background:var(--accent);color:var(--accent-on);}
.ann[hidden]{display:none;}
.ann__l{
  flex:1;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:9px 46px;text-decoration:none;color:inherit;
  font-family:var(--f-m);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;
}
.ann__l b{font-weight:600;border-bottom:1px solid currentColor;padding-bottom:1px;}
.ann__d{
  width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  animation:annpulse 2.4s ease-in-out infinite;
}
@keyframes annpulse{0%,100%{opacity:.35}50%{opacity:1}}
.ann__a{transition:transform .2s ease;}
.ann__l:hover .ann__a{transform:translateX(4px);}
.ann__x{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:inherit;cursor:pointer;opacity:.72;
  font-size:13px;line-height:1;padding:7px;border-radius:3px;
}
/* Same technique: 25x27 drawn, ~41x43 tappable. The 8px reach stays inside the
   46px right padding reserved on .ann__l, so it never steals the link's text. */
.ann__x::after{content:"";position:absolute;inset:-8px;}
.ann__x:hover{opacity:1;background:rgba(255,255,255,.18);}
@media (prefers-reduced-motion:reduce){.ann__d{animation:none;opacity:1;}}
@media (max-width:620px){
  .ann__l{font-size:9.5px;letter-spacing:.07em;gap:8px;padding:9px 40px;}
}

/* Footer tagline */
.ft__addr{
  font-style:normal;margin-top:15px;font-size:14px;line-height:1.6;color:var(--ink-3);
}
.ft__addr a{color:var(--ink-2);text-decoration:none;}
.ft__addr a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.ft__tag{
  font-family:var(--f-b);font-style:italic;font-size:19px;line-height:1.35;
  color:var(--accent-ink);margin:15px 0 0;
}

/* If JS never runs, the reveal animation must not hide the whole page. */
.no-js .r{opacity:1;transform:none;}
.no-js .ann{display:none;}

.menu{display:flex;align-items:center;gap:2px;}
@media (max-width:1080px){.menu{display:none;}}
.menu__i{position:relative;}
.menu__b{
  display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-family:var(--f-d);font-size:14px;font-weight:500;color:var(--ink-2);
  padding:9px 12px;border-radius:3px;transition:color .16s ease,background .16s ease;
  text-decoration:none;white-space:nowrap;
}
.menu__b:hover,.menu__i.open .menu__b{color:var(--ink);background:var(--accent-wash);}
.menu__b .cv{font-size:9px;color:var(--ink-4);transition:transform .2s ease;}
.menu__i.open .menu__b .cv{transform:rotate(180deg);}

.mega{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:max-content;max-width:min(720px,90vw);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--shadow-l);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:210;
}
.menu__i.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.mega__g{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:2px;}
.mega__g--1{grid-template-columns:minmax(230px,1fr);}
.mega__l{
  display:block;text-decoration:none;padding:10px 12px;border-radius:3px;
  transition:background .14s ease;
}
.mega__l:hover{background:var(--accent-wash);}
.mega__l b{display:block;font-family:var(--f-d);font-size:14px;font-weight:600;letter-spacing:-.012em;margin-bottom:2px;}
.mega__l span{display:block;font-size:14px;line-height:1.42;color:var(--ink-3);}
.mega__ft{
  margin-top:6px;padding:11px 12px;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;color:var(--ink-3);
}
.mega__ft a{color:var(--accent-ink);text-decoration:none;font-family:var(--f-d);font-size:13.5px;font-weight:600;}
.mega__ft a:hover{text-decoration:underline;text-underline-offset:3px;}

.nav__act{display:flex;align-items:center;gap:8px;}
.icobtn{
  border:1px solid var(--rule-strong);background:transparent;color:var(--ink-2);
  border-radius:3px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  font-size:14px;transition:border-color .16s ease,color .16s ease;flex:none;
  position:relative;
}
/* The control is drawn at 34px but must be tappable at 42px. The overlay
   extends the hit area only; it never paints and never affects layout.
   inset is measured from the padding box (32px inside the 1px borders), so
   -5px reaches exactly 4px past the border box - half the 8px .nav__act gap,
   letting neighbouring overlays meet without ever overlapping. */
.icobtn::after{content:"";position:absolute;inset:-5px;}
.icobtn:hover{border-color:var(--accent);color:var(--accent-ink);}
@media (max-width:520px){.nav__act .btn{display:none;}}
.burger{display:none;}
@media (max-width:1080px){.burger{display:grid;}}

.drawer{
  position:fixed;inset:68px 0 0;z-index:190;background:var(--ground);
  overflow-y:auto;padding:16px var(--pad) 60px;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
.dgrp{border-bottom:1px solid var(--rule);}
.dgrp__b{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:none;border:none;cursor:pointer;padding:16px 0;text-align:left;
  font-family:var(--f-d);font-size:17px;font-weight:600;letter-spacing:-.015em;
}
.dgrp__b .cv{color:var(--accent);font-family:var(--f-m);font-size:14px;}
/* Careers has no submenu, so it is a link rather than a disclosure button. */
.dgrp__b--flat{text-decoration:none;color:inherit;}
.dgrp__p{display:none;padding:0 0 14px 2px;flex-direction:column;gap:1px;}
.dgrp.open .dgrp__p{display:flex;}
.dgrp__p a{text-decoration:none;padding:8px 0;color:var(--ink-2);font-size:16px;}
.dgrp__p a:hover{color:var(--accent-ink);}
.drawer .btn{width:100%;margin-top:22px;}



.mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--ink);color:var(--ground);position:relative;overflow:hidden;}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(85% 110% at 12% 50%,#000 0%,transparent 70%);
  mask-image:radial-gradient(85% 110% at 12% 50%,#000 0%,transparent 70%);
}
.cta__in{position:relative;padding-block:clamp(52px,7vw,92px);}
.cta__eyeb{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--ground);opacity:.62;margin-bottom:18px;
}
.cta__d{
  width:6px;height:6px;border-radius:50%;background:var(--live);flex:none;
  box-shadow:0 0 0 0 var(--live-wash);animation:ctaPulse 2.6s ease-out infinite;
}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(62,203,163,.35);}
  70%{box-shadow:0 0 0 8px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
@media (prefers-reduced-motion:reduce){.cta__d{animation:none;box-shadow:none;}}
.cta h2{color:var(--ground);font-size:clamp(30px,4.6vw,54px);max-width:16ch;}
.cta__lede{
  margin-top:16px !important;max-width:46ch;
  font-size:clamp(18px,2.1vw,21px) !important;line-height:1.5;
  color:var(--ground) !important;opacity:.82 !important;
}
/* The three points are the whole argument: this is not a funnel. */
.cta__pts{
  list-style:none;margin:clamp(30px,3.6vw,42px) 0 0;padding:24px 0 0;
  border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.cta__pts b{
  display:block;font-family:var(--f-d);font-weight:600;font-size:15.5px;
  letter-spacing:-.016em;color:var(--ground);
}
.cta__pts span{
  display:block;margin-top:6px;font-size:14.5px;line-height:1.52;
  color:var(--ground);opacity:.62;
}
@media (max-width:820px){.cta__pts{grid-template-columns:1fr;gap:18px;}}
.cta p{margin-top:18px;max-width:54ch;font-size:18px;color:var(--ground);opacity:.72;}
.cta__r{margin-top:28px;display:flex;flex-wrap:wrap;gap:11px;}
.cta .btn{background:var(--ground);color:var(--ink);border-color:var(--ground);}
.cta .btn--g{background:transparent;color:var(--ground);border-color:color-mix(in srgb,currentColor 50%,transparent);}
.cta .btn--g:hover{border-color:var(--ground);color:var(--ground);}
.cta__m{
  margin-top:32px;padding-top:20px;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);
  display:flex;flex-wrap:wrap;gap:26px;font-family:var(--f-m);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ground);
}
.cta__m > div{opacity:.6;}
.cta__m b{display:block;font-weight:500;margin-top:5px;letter-spacing:.06em;opacity:1;}
.cta__m a{color:var(--ground);text-decoration:none;border-bottom:1px solid currentColor;}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--ground-deep);border-top:1px solid var(--rule);}
.ft__g{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:28px;padding-block:clamp(38px,4.5vw,58px);}
@media (max-width:1000px){.ft__g{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.ft__g{grid-template-columns:repeat(2,1fr);}}
.ft__brand{display:flex;flex-direction:column;gap:11px;}
@media (max-width:1000px){.ft__brand{grid-column:1/-1;}}
.ft__brand p{color:var(--ink-2);font-size:15.5px;max-width:34ch;}
.ft__col h3{font-family:var(--f-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink-4);margin-bottom:12px;}
.ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ft__col a{text-decoration:none;color:var(--ink-2);font-size:15px;}
.ft__col a:hover{color:var(--accent-ink);}
.ft__bot{
  border-top:1px solid var(--rule);padding-block:20px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  color:var(--ink-4);
}
.ft__bot nav{display:flex;flex-wrap:wrap;gap:20px;}
.ft__bot a{text-decoration:none;color:var(--ink-4);}
.ft__bot a:hover{color:var(--accent-ink);}



/* ---------- section transition ----------
   Only the main content fades; the nav is outside <main> and stays put,
   so the header reads as persistent chrome across the change. */
#main{transition:opacity .16s ease,transform .16s ease;}
#main.sx-out{opacity:0;transform:translateY(5px);}
@keyframes sxIn{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}
#main.sx-in{animation:sxIn .3s cubic-bezier(.16,.84,.3,1) both;}
/* The nav resizes between its resting and stuck heights. During a jump
   that would be a visible twitch, so it is frozen at its final size while
   the content is hidden. */
.nav--nofx,.nav--nofx *{transition:none !important;}
@media (prefers-reduced-motion:reduce){
  #main,#main.sx-out,#main.sx-in{transition:none;animation:none;opacity:1;transform:none;}
}

/* ---------- reveal ---------- */
.r{opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.16,.84,.3,1),transform .7s cubic-bezier(.16,.84,.3,1);}
.r.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .r{opacity:1;transform:none;}
  .rul__line{transform:scaleX(1);}
  .blk{opacity:1;transform:none;}
  .caret{display:none;}
}