/* ============================================================
   RootBound Health — Clinic Director site
   Shared design system
   ============================================================ */

/* Brand display typeface (self-hosted) */
@font-face{
  font-family:'RootBound Display';
  src:url('../fonts/Rootbound_Health_Font_Alphabet.ttf') format('truetype');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  /* paper / ink */
  --paper:#F9F5EC;
  --paper-2:#F3ECDD;
  --paper-3:#ECE3D0;
  --ink:#003B4F;
  --ink-soft:#5C6163;
  --muted:#6E7173;
  --line:#E5DCC9;
  --line-2:#D7CDB6;

  /* navy / deep */
  --navy:#003B4F;
  --deep:#012A38;
  --deep-2:#01202B;
  --on-deep:#F9F5EC;
  --on-deep-soft:#D4D9D1;
  --navy-bg:#E9EEEF;

  /* gold */
  --gold:#D4AF37;
  --gold-2:#E0C04A;
  --gold-em:#B0871A;
  --clay:#8A6D18;
  --gold-bg:#F4ECCF;

  --maxw:1240px;
  --nav-h:74px;

  --brand:'RootBound Display','Spectral',Georgia,serif; /* @kind font */
  --serif:'Spectral',Georgia,serif; /* @kind font */
  --sans:'Inter',system-ui,sans-serif; /* @kind font */
  --mono:'IBM Plex Mono',ui-monospace,monospace; /* @kind font */

  --ease:cubic-bezier(.2,.7,.2,1); /* @kind other */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{text-wrap:balance;font-weight:500}
p,li{text-wrap:pretty}
::selection{background:var(--gold);color:var(--deep)}
:focus-visible{outline:2px solid var(--gold-em);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-160%);
  background:var(--deep);color:var(--on-deep);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;border-radius:9px;border:1px solid var(--gold-2);
  box-shadow:0 12px 34px rgba(0,0,0,.45);transition:transform .22s var(--ease)}
.skip-link:focus{transform:translateY(0);outline:none}
.deep-sec :focus-visible,.hero :focus-visible,.pagehead :focus-visible,.site-foot :focus-visible{outline-color:var(--gold-2)}

/* ---- scroll progress bar ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold-em),var(--gold-2));
  transition:width .08s linear}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  padding:0 clamp(20px,4vw,46px);
  transition:background .38s var(--ease),border-color .38s var(--ease),backdrop-filter .38s var(--ease),box-shadow .38s var(--ease);
  border-bottom:1px solid transparent;
  will-change:background,border-color;
}
.nav.solid{
  background:rgba(249,245,236,0.88);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav.on-dark{color:var(--on-deep)}
.nav.solid{box-shadow:0 6px 24px -12px rgba(1,32,43,.28)}
.nav.on-dark.solid{
  background:rgba(1,32,43,0.78);
  border-bottom:1px solid rgba(212,175,55,.22);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.55);
}
.nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--mono);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;white-space:nowrap}
.nav .brand img{height:30px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.nav .links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav .links a{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 15px;border-radius:100px;position:relative;color:inherit;opacity:.78;
  transition:opacity .22s var(--ease),background .22s var(--ease),color .22s var(--ease)}
.nav .links a:hover{opacity:1;background:rgba(138,109,24,.1)}
.nav .links a:focus-visible{opacity:1;outline:2px solid var(--gold-em);outline-offset:2px}
.nav.on-dark:not(.solid) .links a:hover{background:rgba(212,175,55,.14)}
.nav.on-dark .links a:focus-visible{outline-color:var(--gold-2)}
.nav .links a.active{opacity:1;color:var(--gold-em);font-weight:600}
.nav.on-dark .links a.active{color:var(--gold-2)}
.nav .links a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1.5px;background:currentColor;border-radius:2px}
.nav .menu-btn{display:none}
/* floating "Ask anything" trigger on content pages */
.ask-fab-float{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:95}

/* ---- nav search button ---- */
.nav-search-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid rgba(138,109,24,.35);border-radius:100px;
  padding:8px 14px;cursor:pointer;color:inherit;opacity:.78;
  transition:opacity .2s,background .2s,border-color .2s;
  margin-left:4px;
}
.nav-search-btn:hover{opacity:1;background:rgba(138,109,24,.1);border-color:rgba(138,109,24,.55)}
.nav.on-dark:not(.solid) .nav-search-btn{border-color:rgba(212,175,55,.35)}
.nav.on-dark:not(.solid) .nav-search-btn:hover{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.55)}
.nav.on-dark.solid .nav-search-btn{border-color:rgba(212,175,55,.3)}
.nav.solid:not(.on-dark) .nav-search-btn{border-color:rgba(138,109,24,.3)}
.nav-search-label{display:none}
@media(min-width:1100px){.nav-search-label{display:inline}}
/* on mobile the search button lives inside .links which is already the drawer */

/* ============================================================
   SEARCH COMMAND-PALETTE
   ============================================================ */
.search-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(56px,8vh,110px) 16px 0;
}
.search-overlay[hidden]{display:none}
body.search-open{overflow:hidden}

.search-backdrop{
  position:absolute;inset:0;
  background:rgba(1,32,43,.62);
  backdrop-filter:blur(4px);
}
@media(prefers-reduced-motion:no-preference){
  .search-backdrop{animation:sbfadein .18s ease}
  @keyframes sbfadein{from{opacity:0}to{opacity:1}}
}

.search-panel{
  position:relative;z-index:1;
  width:100%;max-width:640px;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:16px;
  box-shadow:0 24px 60px -16px rgba(1,32,43,.55),inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
}
@media(prefers-reduced-motion:no-preference){
  .search-panel{animation:spanelin .18s var(--ease)}
  @keyframes spanelin{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
}

.search-input-wrap{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.search-icon{color:var(--muted);flex:none}
.search-input{
  flex:1;border:0;outline:none;background:transparent;
  font-family:var(--sans);font-size:17px;color:var(--ink);
  caret-color:var(--clay);
}
.search-input::placeholder{color:var(--muted)}
.search-input::-webkit-search-cancel-button{display:none}
.search-close-btn{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:6px;
  padding:4px 8px;cursor:pointer;color:var(--muted);
  transition:border-color .15s,color .15s;flex:none;
}
.search-close-btn:hover{border-color:var(--clay);color:var(--ink)}

.search-results{
  list-style:none;
  max-height:min(52vh, 420px);
  overflow-y:auto;
  padding:6px 0;
  overscroll-behavior:contain;
}
.search-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 20px;cursor:pointer;
  transition:background .12s;
}
.search-item:hover,.search-item.active{background:var(--paper-2)}
.search-item.active{background:var(--paper-3)}
.search-item-group{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);flex:none;width:86px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-item-label{
  flex:1;font-size:15px;color:var(--ink);line-height:1.3;
}
.search-item-label mark{
  background:transparent;color:var(--clay);font-weight:700;text-decoration:underline;text-underline-offset:2px;
}
.search-item-arrow{
  font-size:14px;color:var(--muted);flex:none;
  transition:color .12s,transform .12s;
}
.search-item:hover .search-item-arrow,
.search-item.active .search-item-arrow{color:var(--clay);transform:translateX(2px)}
.search-empty{
  padding:20px 20px;font-size:15px;color:var(--muted);font-style:italic;
}

.search-hint{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:10px 20px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;
  background:var(--paper-2);
}
.search-hint kbd{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line-2);border-radius:4px;
  padding:2px 5px;font-family:var(--mono);font-size:10px;color:var(--ink-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(1,32,43,.08);
}

/* ============================================================
   FOOTER SOCIALS
   ============================================================ */
.foot-socials{
  display:flex;gap:10px;align-items:center;margin-top:22px;
}
.foot-social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  color:var(--on-deep-soft);opacity:.65;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  transition:opacity .2s,border-color .2s,background .2s,transform .2s,color .2s;
}
.foot-social-link:hover{
  opacity:1;color:var(--gold-2);
  border-color:rgba(212,175,55,.45);
  background:rgba(212,175,55,.08);
  transform:translateY(-2px);
}
.foot-social-link:focus-visible{outline-color:var(--gold-2)}

@media (max-width:1024px){
  .nav .links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--deep);padding:10px 18px 22px;transform:translateY(-130%);transition:transform .4s var(--ease);
    border-bottom:1px solid rgba(212,175,55,.22);box-shadow:0 24px 50px rgba(0,0,0,.4)}
  .nav .links.open{transform:translateY(0)}
  .nav .links a{color:var(--on-deep);opacity:.9;padding:15px 8px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav .links a.active::after{display:none}
  .nav .menu-btn{display:flex;flex-direction:column;gap:5px;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
  .nav .menu-btn span{width:24px;height:2px;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
  .nav .menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav .menu-btn.open span:nth-child(2){opacity:0}
  .nav .menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(64px,9vw,128px) 0}
.section.tight{padding:clamp(48px,6vw,84px) 0}
.deep-sec{background:var(--deep);color:var(--on-deep)}
.deep-sec h1,.deep-sec h2,.deep-sec h3{color:var(--on-deep)}
.paper2-sec{background:var(--paper-2)}

.eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--clay);display:inline-flex;align-items:center;gap:12px}
.eyebrow .dot{width:8px;height:8px;background:var(--clay);transform:rotate(45deg);flex:none}
@media (prefers-reduced-motion:no-preference){
  .eyebrow .dot{animation:dotpulse 2.8s var(--ease) infinite}
  @keyframes dotpulse{0%,100%{transform:rotate(45deg) scale(1);opacity:1}50%{transform:rotate(45deg) scale(1.3);opacity:.65}}
}
.deep-sec .eyebrow{color:var(--gold-2)}
.deep-sec .eyebrow .dot{background:var(--gold)}

.h-display{font-family:var(--brand);font-weight:500;line-height:1.0;letter-spacing:-0.02em;
  font-size:clamp(40px,7vw,92px)}
.h1{font-family:var(--serif);font-weight:500;line-height:1.03;letter-spacing:-0.015em;
  font-size:clamp(34px,5.2vw,68px)}
.h2{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-0.012em;
  font-size:clamp(28px,3.8vw,50px)}
.h3{font-family:var(--serif);font-weight:600;line-height:1.15;font-size:clamp(21px,2.4vw,30px)}
.em{font-style:italic;color:var(--gold-em)}
.deep-sec .em{color:var(--gold-2)}
.lead{font-size:clamp(18px,1.5vw,23px);line-height:1.55;color:var(--ink-soft);max-width:64ch;font-weight:400}
.deep-sec .lead{color:var(--on-deep-soft)}
.kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deep-sec .kicker{color:var(--on-deep-soft)}

.hl{color:var(--ink);font-weight:600}
.deep-sec .hl{color:var(--on-deep)}
.hl-g{color:var(--clay);font-weight:600}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(180deg,#E7C351,var(--gold));color:var(--deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px -6px rgba(176,135,26,.5),0 2px 4px rgba(120,90,16,.25)}
.btn-primary>*{position:relative;z-index:1}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);transform:translateX(-130%);transition:transform .65s var(--ease)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 32px -8px rgba(176,135,26,.6),0 3px 6px rgba(120,90,16,.3)}
.btn-primary:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(120,90,16,.4),0 2px 6px -2px rgba(176,135,26,.4)}
.btn-ghost{border-color:currentColor;color:inherit;opacity:.92}
.btn-ghost:hover{background:rgba(212,175,55,.12);opacity:1;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(1,32,43,.35)}
.btn-ghost:active{transform:translateY(0)}
.btn-dark{background:linear-gradient(180deg,#073846,var(--deep));color:var(--on-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px -8px rgba(1,32,43,.5)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 32px -10px rgba(1,32,43,.55)}
.btn-dark:active{transform:translateY(0)}

/* ============================================================
   CARDS / PILLS / STATS / TABLES
   ============================================================ */
.card{background:linear-gradient(180deg,#FCFAF3,var(--paper-2));border:1px solid var(--line);border-radius:12px;padding:clamp(22px,2.4vw,32px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(1,32,43,.04),0 12px 26px -16px rgba(1,32,43,.20);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 7px rgba(1,32,43,.07),0 28px 54px -20px rgba(1,32,43,.36)}
a.card:focus-visible,button.card:focus-visible{transform:translateY(-3px);border-color:var(--clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 7px rgba(1,32,43,.07),0 28px 54px -20px rgba(1,32,43,.36)}
.card,.acc,.pill,.prog-tag,.btn{transform-style:preserve-3d}
.card.navy{background:linear-gradient(180deg,#F0F5F6,var(--navy-bg));border-color:#C4D2D6}
.card.gold{background:linear-gradient(180deg,#FAF3DA,var(--gold-bg));border-color:#E3D08F}
.deep-sec .card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border-color:rgba(212,175,55,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 34px -20px rgba(0,0,0,.65)}
.deep-sec .card:hover{border-color:rgba(212,175,55,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 50px -20px rgba(0,0,0,.7)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14px;letter-spacing:.02em;
  background:linear-gradient(180deg,#FFFFFF,var(--paper));border:1px solid var(--line-2);color:var(--ink-soft);padding:9px 15px;border-radius:100px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 5px rgba(1,32,43,.06)}
.deep-sec .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px -5px rgba(0,0,0,.4)}
.pill b{font-weight:600;color:var(--ink)}
.deep-sec .pill{background:rgba(255,255,255,.10);border-color:rgba(224,192,74,.5);color:var(--on-deep)}
.deep-sec .pill b{color:var(--gold-2)}
.pillrow{display:flex;flex-wrap:wrap;gap:11px}

.stat .n{font-family:var(--serif);font-weight:600;font-size:clamp(44px,5vw,64px);line-height:.95;letter-spacing:-0.02em;color:var(--ink)}
.stat .n .u{font-size:.5em;color:var(--gold-em);font-weight:500}
.stat .l{font-size:clamp(14px,1.1vw,17px);color:var(--ink-soft);margin-top:12px;line-height:1.4;max-width:26ch}
.deep-sec .stat .n{color:var(--on-deep);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.deep-sec .stat .n .u{color:var(--gold-2)}
.deep-sec .stat .l{color:var(--on-deep-soft)}

.prog-tag{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay);background:linear-gradient(180deg,#FAF3DA,var(--gold-bg));border:1px solid #E3D08F;padding:7px 13px;border-radius:7px;display:inline-flex;gap:9px;align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 8px -3px rgba(176,135,26,.3)}

table.tbl{width:100%;border-collapse:collapse;font-size:clamp(14px,1.1vw,17px)}
table.tbl th{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:0 16px 13px;border-bottom:1.5px solid var(--line-2);white-space:nowrap}
table.tbl td{padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-soft);line-height:1.4}
table.tbl td:first-child{color:var(--ink);font-weight:600}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr{transition:background .2s}
table.tbl tbody tr:hover{background:var(--paper-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hl-c{color:var(--clay);font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--deep-2);color:var(--on-deep-soft);padding:clamp(48px,6vw,80px) 0 40px}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.site-foot .brand{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:var(--on-deep)}
.site-foot .brand img{height:46px}
.site-foot .fnav{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.site-foot .fnav a{opacity:.7;transition:opacity .22s var(--ease),color .22s var(--ease)}
.site-foot .fnav a:hover{opacity:1;color:var(--gold-2)}
.site-foot .fnav a:focus-visible{opacity:1;outline:2px solid var(--gold-2);outline-offset:3px}
.site-foot .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;line-height:1.8;opacity:.6}
.site-foot .rule{height:1px;background:rgba(212,175,55,.18);border:0;margin:36px 0 22px}
.site-foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:perspective(1100px) translateY(30px) rotateX(7deg);transform-origin:50% 100%;transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:perspective(1100px) translateY(0) rotateX(0)}
  .reveal[data-d="1"]{transition-delay:.08s}
  .reveal[data-d="2"]{transition-delay:.16s}
  .reveal[data-d="3"]{transition-delay:.24s}
  .reveal[data-d="4"]{transition-delay:.32s}
  .reveal[data-d="5"]{transition-delay:.40s}
}

/* ============================================================
   COLLAPSIBLE
   ============================================================ */
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#FCFAF3,var(--paper-2));margin-bottom:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px -14px rgba(1,32,43,.20);transition:box-shadow .3s var(--ease)}
.acc:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 30px -16px rgba(1,32,43,.28)}
.acc[open]{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 38px -18px rgba(1,32,43,.30)}
.acc summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;gap:18px;
  font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.8vw,23px);color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ix{font-family:var(--mono);font-size:13px;color:var(--clay);font-weight:600;flex:none}
.acc summary .pm{margin-left:auto;width:24px;height:24px;flex:none;position:relative;transition:transform .3s var(--ease)}
.acc summary .pm::before,.acc summary .pm::after{content:"";position:absolute;background:var(--clay);border-radius:2px}
.acc summary .pm::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-50%)}
.acc summary .pm::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-50%);transition:opacity .3s}
.acc[open] summary .pm::after{opacity:0}
.acc .acc-body{padding:0 26px 26px;color:var(--ink-soft);line-height:1.6}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.pagehead{position:relative;overflow:hidden;color:var(--on-deep);padding:calc(var(--nav-h) + clamp(56px,9vw,110px)) 0 clamp(48px,7vw,90px);
  background:radial-gradient(120% 120% at 84% 6%,#024458 0%,#012A38 48%,#01202B 100%);
  box-shadow:inset 0 -60px 90px -60px rgba(0,0,0,.55),0 24px 50px -30px rgba(1,32,43,.35)}
.pagehead .grain{position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
.pagehead .tree{position:absolute;right:-40px;top:50%;transform:translateY(-50%);height:min(120%,560px);opacity:.14;pointer-events:none;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));will-change:transform}
@media (prefers-reduced-motion:no-preference){.pagehead .tree{animation:treefloat 11s ease-in-out infinite}@keyframes treefloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-52.5%)}}}
.pagehead .inner{position:relative;z-index:2}
.pagehead h1{font-family:var(--brand);font-weight:500;font-size:clamp(38px,6vw,82px);line-height:1.0;letter-spacing:-0.018em;max-width:18ch;margin-top:22px}
.pagehead h1 .em{font-family:var(--serif);font-style:italic;color:var(--gold-2)}
.pagehead .lead{margin-top:26px;max-width:60ch;color:var(--on-deep-soft)}
.pagehead .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.pagehead .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-soft);opacity:.8;margin-bottom:4px}
.pagehead .crumb a:hover{color:var(--gold-2)}

/* section heading helper */
.sec-head{margin-bottom:clamp(32px,4vw,52px)}
.sec-head .h2,.sec-head .h1{margin-top:14px}

/* utility */
.mono{font-family:var(--mono)}
.center{text-align:center}
.mt-s{margin-top:18px}.mt-m{margin-top:34px}.mt-l{margin-top:56px}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---- back to top ---- */
.to-top{position:fixed;left:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:94;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:linear-gradient(180deg,#fff,var(--paper));color:var(--clay);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .25s,border-color .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px -10px rgba(1,32,43,.35)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-3px);border-color:var(--clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 32px -12px rgba(1,32,43,.4)}
.to-top svg{width:20px;height:20px}

/* ---- site journey stepper ---- */
.journey{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vw,76px) clamp(20px,5vw,40px) 0}
.journey .jr-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.journey .jr-eye{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);display:inline-flex;align-items:center;gap:11px}
.journey .jr-eye::before{content:"";width:8px;height:8px;background:var(--clay);transform:rotate(45deg)}
.journey .jr-step{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.journey .jr-dots{display:flex;gap:7px;margin-bottom:22px}
.journey .jr-dots i{width:30px;height:4px;border-radius:3px;background:var(--line-2);transition:background .3s}
.journey .jr-dots i.on{background:var(--clay)}
.journey .jr-dots i.done{background:var(--gold-2)}
.journey .jr-row{display:flex;gap:14px;justify-content:space-between}
.journey a.jr{display:flex;align-items:center;gap:15px;text-decoration:none;flex:1 1 0;max-width:48%;
  background:linear-gradient(180deg,#FCFAF3,var(--paper-2));border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  transition:border-color .2s,transform .2s,box-shadow .25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 5px rgba(1,32,43,.05)}
.journey a.jr:hover,.journey a.jr:focus-visible{border-color:var(--clay);transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 36px -16px rgba(1,32,43,.34)}
.journey a.jr .ar{font-size:24px;line-height:1;color:var(--clay);flex:none}
.journey a.jr .jl{display:flex;flex-direction:column;min-width:0}
.journey a.jr .jl .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.journey a.jr .jl .v{font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.8vw,22px);color:var(--ink);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.journey a.jr.next{flex-direction:row-reverse;text-align:right}
.journey a.jr.next .jl{align-items:flex-end}
.journey .jr-sp{flex:1 1 0;max-width:48%}
.journey .jr-read{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;color:var(--clay);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,gap .2s}
.journey .jr-read:hover,.journey .jr-read:focus-visible{border-color:var(--clay);gap:14px}
@media(max-width:560px){.journey a.jr .jl .v{font-size:16px}.journey a.jr{padding:15px 16px;gap:11px}.journey .jr-dots i{width:20px}}