/* ---------- self-hosted webfonts ---------- */
/* Archivo and IBM Plex are SIL Open Font License 1.1. Served from
   assets/fonts so the site makes no third-party request for type —
   a visitor's IP is no longer disclosed to Google to render a page.
   Archivo and IBM Plex Sans are variable fonts: one file covers the
   whole weight range declared — if the design ever needs a weight outside
   those ranges, the font file must be re-fetched, not just the CSS edited. */

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

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

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

:root{
  --paper:#F1F2F4;
  --paper-tint:#E9EBEF;
  --card:#F7F8FA;
  --line:#DCDFE5;
  --ink:#12141A;
  --navy:#1B2A4E;
  --navy-soft:#3A4A70;
  --silver:#9AA2AF;      /* decorative only — fails AA as text */
  --muted:#5F6875;       /* muted text — 5.03:1 on paper, 4.73:1 on tint */
  --electric:#1E5BD6;
  --electric-dark:#164AB0;
  --electric-tint:#E4EBFA;

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --wrap:1120px;
  --radius:10px;
  --nav-h:70px;   /* fixed-nav height — the sticky stage reserves this */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);color:var(--navy);line-height:1.1;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:4px}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--electric);margin-bottom:18px;
}
.eyebrow-warn{color:var(--muted)}

.lede{color:var(--navy-soft);font-size:19px;line-height:1.55}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:16px;font-weight:600;
  padding:14px 26px;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--electric);border-color:var(--electric);color:#fff}
.btn-p:hover{background:var(--electric-dark);border-color:var(--electric-dark)}
.btn-g{background:transparent;border-color:var(--line);color:var(--navy)}
.btn-g:hover{border-color:var(--navy)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(241,242,244,0);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.nav.stuck{
  background:rgba(241,242,244,.88);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:30px;height:auto;mix-blend-mode:multiply}
.brand-name{
  font-family:var(--display);font-weight:800;font-size:17px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:15px;font-weight:500;color:var(--navy-soft)}
.nav-links a:hover{color:var(--electric)}
.nav-btn{padding:10px 20px;font-size:15px;white-space:nowrap}
@media(max-width:800px){
  .nav-links{display:none}
  .nav-btn{padding:9px 15px;font-size:14px}
}
@media(max-width:460px){
  .nav-btn{display:none}
}

/* ---------- scroll stage ---------- */
.stage{position:relative;height:520vh}
/* The panels are centred inside this box, so it has to exclude the fixed nav —
   otherwise centring in a full 100vh puts tall hero copy underneath it. The
   canvas is positioned against the padding box, so it still fills the stage. */
.stage-sticky{
  position:sticky;top:0;height:100vh;
  padding-top:var(--nav-h);
  display:flex;align-items:center;overflow:hidden;
}
.viz{position:absolute;inset:0;width:100%;height:100%;display:block}

.panels{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;z-index:2}
/* Panels cross-fade in place, so without real movement the swap reads as
   nothing happening. Outgoing copy lifts away, incoming rises into place,
   and the children stagger so the change is impossible to miss. */
.panel{
  position:absolute;top:50%;left:24px;right:24px;
  transform:translateY(calc(-50% + 54px));
  max-width:620px;
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:
    opacity .45s cubic-bezier(.4,0,.2,1),
    transform .62s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear .45s;
}
.panel.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%);
  transition:
    opacity .5s cubic-bezier(.4,0,.2,1),
    transform .68s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear 0s;
}
.panel > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.9,.3,1);
}
.panel.on > *{opacity:1;transform:none}
.panel.on > *:nth-child(1){transition-delay:.06s}
.panel.on > *:nth-child(2){transition-delay:.14s}
.panel.on > *:nth-child(3){transition-delay:.22s}
.panel.on > *:nth-child(4){transition-delay:.30s}
.panel.on > *:nth-child(5){transition-delay:.38s}
.panel h1{font-size:clamp(40px,6.4vw,72px);font-weight:800}
.panel h2{font-size:clamp(32px,5vw,56px);font-weight:800}
.panel .lede{margin-top:22px;max-width:34ch}

.scroll-hint{
  margin-top:46px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.scroll-hint::after{
  content:"";display:block;width:1px;height:34px;margin-top:10px;
  background:linear-gradient(var(--silver),transparent);
}

@media(max-width:760px){
  .stage{height:460vh}
  .panel{max-width:none}
  .panel .lede{font-size:17px}
}

/* Short viewports. Reserving the nav height above is not enough on its own:
   panel 0 is the tallest and still outgrows the space it has. Scale the
   heading against viewport height as well as width and tighten the vertical
   rhythm, in steps, so the copy keeps clear of the nav instead of sliding
   under it or being clipped by the stage's overflow:hidden. Nothing here
   fires above 800px tall, so the design is untouched where it already fits. */
@media(max-height:800px){
  .panel h1{font-size:clamp(36px,min(6.4vw,7.6vh),64px)}
  .panel h2{font-size:clamp(30px,min(5vw,6.2vh),50px)}
  .panel .lede{margin-top:16px}
  .panel .cta-row{margin-top:24px}
  .scroll-hint{margin-top:28px}
}
@media(max-height:720px){
  .panel .lede{font-size:17px;margin-top:14px}
  .panel .cta-row{margin-top:20px}
  .scroll-hint{margin-top:18px}
  .scroll-hint::after{height:20px;margin-top:8px}
}
@media(max-height:620px){
  .scroll-hint{display:none}
}
/* Landscape phones (~375px tall) leave ~305px once the nav is reserved, which
   the hero still exceeds. Pull in the heading floor and the internal spacing
   rather than dropping any copy. */
@media(max-height:460px){
  .panel h1{font-size:clamp(26px,min(6.4vw,7.6vh),40px)}
  .panel h2{font-size:clamp(24px,min(5vw,6.2vh),36px)}
  .panel .eyebrow{margin-bottom:10px}
  .panel .lede{margin-top:10px}
  .panel .cta-row{margin-top:14px}
  .panel .btn{padding:10px 20px}
}

/* ---------- sources band ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0;background:var(--card)}
.band-label{
  text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px;
}
.band-note{
  margin-top:20px;text-align:center;font-size:14px;
  color:var(--muted);font-style:italic;
}
.sources{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.sources li{
  font-size:14px;font-weight:500;color:var(--navy-soft);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:var(--paper);
}

/* ---------- section shells ---------- */
.blk{padding:110px 0}
.blk-tint{background:var(--paper-tint)}
.head{max-width:640px;margin-bottom:56px}
.head h2{font-size:clamp(30px,4vw,44px);font-weight:800}
.head .lede{margin-top:18px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3{grid-template-columns:1fr}}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px;
  transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:var(--navy-soft);transform:translateY(-3px)}
.card h3{font-size:20px;font-weight:700}
.card p{margin-top:10px;color:var(--navy-soft);font-size:15.5px;line-height:1.6}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.steps-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.steps:not(.steps-4){grid-template-columns:1fr}}
@media(max-width:620px){.steps-4{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.step-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--electric)}
.step h3{font-size:20px;font-weight:700;margin-top:14px}
.step p{margin-top:10px;color:var(--navy-soft);font-size:15.5px;line-height:1.6}

/* ---------- shared tick list ---------- */
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:22px;font-size:15px;color:var(--navy-soft);line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--electric);
}

/* ---------- services ---------- */
.svc{display:flex;flex-direction:column}
.svc-n{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--muted);margin-bottom:14px;
}
.svc h3{font-size:22px}
.svc-benefit{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;color:var(--electric-dark);font-weight:500;
}

/* ---------- case studies ---------- */
.cases{display:flex;flex-direction:column;gap:20px}
.case{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:34px 32px}
.case-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:18px;
}
.case-head h3{font-size:27px;font-weight:800}
.case-kind{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:6px}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;white-space:nowrap;
}
.chip-done{background:var(--navy);color:#fff}
.chip-live{background:var(--electric-tint);color:var(--electric-dark);border:1px solid var(--electric)}
.case-body{color:var(--navy-soft);font-size:16.5px;line-height:1.65;max-width:70ch}
.case-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:28px 44px;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
}
@media(max-width:700px){.case-cols{grid-template-columns:1fr;gap:22px}}
.case-cols h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:14px;
}
.case-note{font-size:15px;color:var(--navy-soft);line-height:1.55}

/* ---------- shared sub-heading ---------- */
.subhead{margin:56px 0 24px;max-width:620px}
.subhead h3{font-size:clamp(22px,2.6vw,27px);font-weight:800;color:var(--navy)}
.subhead p{margin-top:9px;font-size:16px;color:var(--navy-soft);line-height:1.6}

/* ---------- client logo slot ---------- */
.case-id{display:flex;align-items:center;gap:16px}
/* Fixed height, flexible width: a stacked lockup and a wide wordmark both
   sit on the same optical baseline instead of being forced into a square.
   White plate so logos supplied on a white background blend seamlessly. */
.case-logo{
  height:64px;flex:none;padding:11px 15px;
  border-radius:13px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.case-logo img{
  max-height:100%;width:auto;max-width:140px;
  object-fit:contain;display:block;
}
.case-logo-wide img{max-width:172px}
@media(max-width:560px){
  .case-logo{height:56px;padding:9px 12px}
  .case-logo img{max-width:112px}
  .case-logo-wide img{max-width:138px}
}

/* ---------- pricing ---------- */
.consult{
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  background:var(--navy);border-radius:18px;padding:38px 36px;
}
.consult-body{max-width:64ch}
.consult-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#93B4FF;margin-bottom:12px;
}
.consult h3{font-size:clamp(23px,3vw,29px);font-weight:800;color:#fff}
.consult-body p{margin-top:13px;font-size:16px;line-height:1.68;color:rgba(255,255,255,.78)}
.consult .btn-p{background:#fff;color:var(--navy);border-color:#fff;flex:none}
.consult .btn-p:hover{background:#E4EBFA;border-color:#E4EBFA}

.factor h4{font-size:18px;font-weight:700;color:var(--navy)}
.factor p{margin-top:10px;font-size:15px;color:var(--navy-soft);line-height:1.6}
.price-foot{
  margin-top:34px;font-size:15px;color:var(--navy-soft);line-height:1.6;
  padding-top:22px;border-top:1px solid var(--line);
}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:4px 44px}
@media(max-width:760px){.faq{grid-template-columns:1fr}}
.qa{padding:22px 0;border-bottom:1px solid var(--line)}
.qa h3{font-size:17px;font-weight:700}
.qa p{margin-top:9px;color:var(--navy-soft);font-size:15.5px;line-height:1.6}

/* ---------- final cta ---------- */
.final{
  position:relative;overflow:hidden;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:78px 32px;
}
.final-mark{
  position:absolute;right:-60px;bottom:-70px;width:300px;
  opacity:.07;mix-blend-mode:multiply;pointer-events:none;
}
.final h2{font-size:clamp(28px,4vw,44px);font-weight:800;position:relative}
.final .lede{margin:18px auto 0;max-width:52ch;position:relative}
.final .cta-row{justify-content:center;position:relative}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--card)}
.foot-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-brand{max-width:320px}
.foot-brand .brand-mark{width:34px;margin-bottom:14px}
.foot-brand p{font-size:14.5px;color:var(--navy-soft);line-height:1.6}
.foot-brand .foot-tagline{
  font-family:var(--display);font-weight:700;font-size:16.5px;
  color:var(--navy);letter-spacing:-.01em;line-height:1.3;margin-bottom:10px;
}
.foot-links{display:flex;gap:60px;flex-wrap:wrap}
.foot-links h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:14px;
}
.foot-links a{display:block;font-size:15px;color:var(--navy-soft);margin-bottom:10px}
.foot-links a:hover{color:var(--electric)}
.legal{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}

.legal-links{display:flex;gap:18px;flex-wrap:wrap}
.legal a{
  display:inline-block;padding:3px 0;   /* 26px tap target */
  color:var(--muted);text-decoration:underline;text-underline-offset:2px;
}
.legal a:hover{color:var(--electric)}

/* ---------- legal / prose documents ---------- */
/* Doc pages don't load main.js, so the nav never gets .stuck — pin it solid. */
.nav-solid{
  background:rgba(241,242,244,.88);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.mono{font-family:var(--mono);font-size:.92em}
.doc{padding:104px 0 72px}
/* Cap the measure on the children, not on .wrap itself — overriding .wrap's
   max-width while it still has margin:0 auto would centre the column and
   break alignment with the nav and footer. Measure is in rem, not ch, so the
   mono/heading children don't each resolve it against their own font-size. */
.doc-in > *{max-width:42rem}
.doc h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;margin-bottom:14px}
.doc-meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);
  padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line);
}
.doc-meta span{display:block;margin-bottom:5px}
.doc-lede{font-size:19px;color:var(--navy-soft);line-height:1.6;margin-bottom:14px}
.doc h2{
  font-size:21px;font-weight:700;margin-top:44px;margin-bottom:14px;
  padding-top:22px;border-top:1px solid var(--line);
}
.doc h3{font-size:16.5px;font-weight:700;margin-top:26px;margin-bottom:10px;color:var(--navy-soft)}
.doc p{margin-bottom:15px;color:var(--ink);line-height:1.68}
.doc ul{list-style:disc;padding-left:24px;margin-bottom:16px}
.doc li{margin-bottom:9px;line-height:1.62}
.doc a{color:var(--electric);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--electric-dark)}
.doc strong{font-weight:600;color:var(--navy)}
.doc .note{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--electric);
  border-radius:var(--radius);padding:18px 20px;margin:24px 0;
}
.doc .note p:last-child{margin-bottom:0}
.doc .caps{font-size:15px;color:var(--navy-soft)}
@media(max-width:760px){
  .doc{padding:88px 0 56px}
  .doc h2{margin-top:36px}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .panel,.panel.on{transition:none}
  .panel{transform:translateY(-50%)}
  .panel > *,.panel.on > *{opacity:1;transform:none;transition:none;transition-delay:0s}
}