/* ══════════════════════════════════════════════════════════════
   Rionda Capital — design system
   Warm off-white body, deep navy anchor bands.
   Playfair Display headings / DM Sans body.
   ══════════════════════════════════════════════════════════════ */

:root{
  --background:#F9F8F6;
  --foreground:#22282F;
  --primary:#3A4A5C;
  --primary-deep:#2E3B49;
  --primary-foreground:#F9F8F6;
  --muted:#EFEDE8;
  --muted-foreground:#7C776E;
  --border:#E3E0DA;
  --negative:#b91c1c;
  --max:1240px;
  --gutter:40px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--background);
  color:var(--foreground);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

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

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4,.display{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.12;
  color:inherit;
}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.25}
.lede{font-weight:300;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.8;max-width:62ch}
p{font-weight:300;line-height:1.8}
strong{font-weight:500}

.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-foreground);
}
.on-dark .eyebrow{color:rgba(249,248,246,.55)}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-block;font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 32px;transition:all .25s ease;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
}
.btn-solid{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.btn-solid:hover{background:var(--primary-deep);border-color:var(--primary-deep)}
.btn-light{background:var(--primary-foreground);color:var(--primary);border-color:var(--primary-foreground)}
.btn-light:hover{background:transparent;color:var(--primary-foreground)}
.btn-outline{border-color:var(--border);color:var(--foreground)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.on-dark .btn-outline{border-color:rgba(249,248,246,.4);color:var(--primary-foreground)}
.on-dark .btn-outline:hover{border-color:var(--primary-foreground);background:rgba(249,248,246,.08)}
.textlink{
  font-size:.85rem;font-weight:400;letter-spacing:.02em;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .2s;
}
.textlink:hover{opacity:.62}

/* ── header ───────────────────────────────────────────────── */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.solid{background:var(--primary);border-bottom-color:rgba(249,248,246,.12)}
header.transparent{background:transparent}
nav{display:flex;align-items:center;justify-content:space-between;height:82px;
    max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.logo{
  font-family:"Playfair Display",Georgia,serif;font-size:1.42rem;font-weight:500;
  letter-spacing:.01em;transition:color .35s ease;
}
.navlinks{display:flex;align-items:center;gap:38px}
.navlinks a{
  font-size:.78rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding-bottom:4px;transition:color .35s ease,opacity .2s;
}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .28s ease;
}
.navlinks a:hover::after{width:100%}
.navlinks a.active::after{width:100%}
.nav-inquire{
  border:1px solid currentColor;padding:10px 22px;letter-spacing:.14em;
}
.nav-inquire::after{display:none!important}
.nav-inquire:hover{opacity:.7}

header.transparent .logo,header.transparent .navlinks a{color:var(--primary-foreground)}
header.solid   .logo,header.solid   .navlinks a{color:var(--primary-foreground)}

/* ── nav dropdown ─────────────────────────────────────────── */
.dd{position:relative;display:flex;align-items:center}
/* A <button> among <a> siblings: reset every UA default that would shift the
   baseline, and match .navlinks a exactly (same size, spacing, padding-bottom)
   so "Strategy" sits on the same line as Team and Investor Relations. */
.ddtrig{
  font-family:inherit;font-size:.78rem;font-weight:400;letter-spacing:.12em;
  line-height:1.65;text-transform:uppercase;background:none;border:0;margin:0;
  padding:0 0 4px;cursor:pointer;color:var(--primary-foreground);
  display:inline-flex;align-items:baseline;gap:7px;position:relative;
  transition:color .35s ease;-webkit-appearance:none;appearance:none;
  text-align:left;vertical-align:baseline;
}
.ddtrig:focus-visible{outline:1px solid rgba(249,248,246,.5);outline-offset:4px}
.navlinks a{line-height:1.65}
.ddtrig::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .28s ease;
}
.dd:hover .ddtrig::after,.dd.open .ddtrig::after,.ddtrig.active::after{width:100%}
.ddtrig .cv{font-size:.62em;line-height:1;transform-origin:50% 50%;
            transition:transform .25s ease;position:relative;top:-1px}
.dd:hover .ddtrig .cv,.dd.open .ddtrig .cv{transform:rotate(180deg)}
.ddmenu{
  position:absolute;top:calc(100% + 15px);left:-20px;min-width:186px;
  background:var(--primary);border:1px solid rgba(249,248,246,.16);
  padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  box-shadow:0 14px 34px rgba(20,26,32,.28);
}
.dd:hover .ddmenu,.dd.open .ddmenu{opacity:1;visibility:visible;transform:none}
/* keeps the pointer from falling through the gap between trigger and menu */
.ddmenu::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.ddmenu a{
  display:block;padding:11px 20px;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(249,248,246,.82);transition:all .18s;
}
.ddmenu a::after{display:none}
.ddmenu a:hover{background:rgba(249,248,246,.09);color:var(--primary-foreground)}
.ddmenu a.active{color:var(--primary-foreground)}
.ddmenu .sub{
  display:block;font-size:.66rem;letter-spacing:.02em;text-transform:none;
  color:rgba(249,248,246,.45);margin-top:3px;
}
.mobilemenu .msub{padding-left:20px;font-size:.76rem;color:rgba(249,248,246,.72)}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{
  display:block;width:24px;height:1.5px;background:var(--primary-foreground);
  margin:5px 0;transition:transform .3s ease,opacity .25s ease;
}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobilemenu{
  display:none;background:var(--primary);border-top:1px solid rgba(249,248,246,.12);
  padding:14px var(--gutter) 30px;
}
.mobilemenu.open{display:block}
.mobilemenu a{
  display:block;padding:14px 0;color:var(--primary-foreground);
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid rgba(249,248,246,.09);
}

/* ── sections ─────────────────────────────────────────────── */
section{padding:110px 0}
.band{background:var(--primary);color:var(--primary-foreground);position:relative;overflow:hidden}
.band p{color:rgba(249,248,246,.72)}
.grid-texture::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:linear-gradient(rgba(249,248,246,1) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(249,248,246,1) 1px,transparent 1px);
  background-size:64px 64px;
}
.wrap{position:relative;z-index:1}

/* ── hero ─────────────────────────────────────────────────── */
.hero{min-height:95vh;display:flex;align-items:center;padding:140px 0 100px}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;width:100%}
.hero h1{margin-top:26px;max-width:14ch}
.hero .lede{margin-top:30px;color:rgba(249,248,246,.74)}
.hero-actions{display:flex;align-items:center;gap:34px;margin-top:46px;flex-wrap:wrap}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--background));z-index:2}

.page-hero{padding:190px 0 110px}
.page-hero h1{margin-top:22px;max-width:16ch;font-size:clamp(2.3rem,4.6vw,3.9rem)}
.page-hero .lede{margin-top:26px;color:rgba(249,248,246,.72)}

/* ── stats ────────────────────────────────────────────────── */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px 44px}
.stat .k{
  font-family:"Playfair Display",Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.03em;
  color:var(--primary);font-variant-numeric:tabular-nums;
}
.band .stat .k{color:var(--primary-foreground)}
.stat .l{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-foreground);margin-top:14px;
}
.band .stat .l{color:rgba(249,248,246,.55)}
.stat .n{font-size:.86rem;font-weight:300;color:var(--muted-foreground);margin-top:8px;line-height:1.55}
.band .stat .n{color:rgba(249,248,246,.5)}

/* ── pillars ──────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px}
.pillar{padding:0 46px;border-left:1px solid rgba(249,248,246,.16)}
.pillar:first-child{padding-left:0;border-left:0}
.pillar:last-child{padding-right:0}
.pillar .ord{
  font-family:"Playfair Display",Georgia,serif;font-size:2.8rem;
  color:rgba(249,248,246,.22);line-height:1;margin-bottom:24px;
}
.pillar h3{margin-bottom:16px}

/* ── generic two-column ───────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split-5{display:grid;grid-template-columns:2fr 3fr;gap:70px;align-items:start}

/* ── numbered process ─────────────────────────────────────── */
.steps{margin-top:60px;border-top:1px solid var(--border)}
.step{display:grid;grid-template-columns:80px 3fr 8fr;gap:36px;
      padding:44px 0;border-bottom:1px solid var(--border);align-items:start}
.step .ord{
  font-family:"Playfair Display",Georgia,serif;font-size:1.6rem;
  color:var(--muted-foreground);opacity:.5;line-height:1.3;
}
.band .steps,.band .step{border-color:rgba(249,248,246,.16)}
.band .step .ord{color:rgba(249,248,246,.4);opacity:1}

/* ── cards 2x2 ────────────────────────────────────────────── */
.cards2{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;
        border-top:1px solid var(--border);border-left:1px solid var(--border)}
.cards2 .cell{padding:44px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.cards2 .cell h3{margin-bottom:14px}

/* ── metric grid 3x2 ──────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);
         border-top:1px solid var(--border);border-left:1px solid var(--border);margin-top:56px}
.metrics .cell{padding:42px 38px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ── table ────────────────────────────────────────────────── */
.tablewrap{margin-top:52px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:520px}
thead th{
  font-size:.68rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-foreground);text-align:right;padding:0 22px 16px;
  border-bottom:1px solid var(--border);
}
thead th:first-child{text-align:left;padding-left:0}
thead th:last-child{padding-right:0}
tbody td{
  padding:17px 22px;text-align:right;font-weight:300;font-size:.98rem;
  border-bottom:1px solid var(--border);
}
tbody td:first-child{text-align:left;padding-left:0;font-weight:400}
tbody td:last-child{padding-right:0}
tbody tr{transition:background .18s}
tbody tr:hover{background:rgba(239,237,232,.55)}
td.neg{color:var(--negative)}
td.bench{color:var(--muted-foreground)}

/* ── strategy list ────────────────────────────────────────── */
.slist{margin-top:56px;border-top:1px solid var(--border)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:36px;
      padding:38px 4px;border-bottom:1px solid var(--border);flex-wrap:wrap;
      transition:padding-left .22s ease}
a.srow:hover{padding-left:14px}
.srow .sname{font-family:"Playfair Display",Georgia,serif;font-size:1.85rem;
             line-height:1;color:var(--foreground);letter-spacing:-.02em}
.srow .sdesc{font-size:.98rem;font-weight:300;color:var(--muted-foreground);
             margin-top:12px;max-width:52ch}
.srow .sgo{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
           color:var(--primary);white-space:nowrap;font-weight:500}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.64rem;letter-spacing:.15em;
      text-transform:uppercase;border:1px solid var(--border);padding:5px 11px;
      color:var(--muted-foreground);margin-left:14px;vertical-align:middle}
.pill i{width:6px;height:6px;border-radius:50%;display:block;flex:none}
.pill.live i{background:#2f7d5a}
.pill.research i{background:#c9a227}

/* R34 sits UNDER GC8, not beside it: GC8 is the investable product, R34 is
   evidence of the pipeline. Equal visual weight invited the question "why am I
   looking at an 89% modeled return on something you aren't offering?" */
.srow.primary{padding:44px 4px}
.srow.primary .sname{font-size:2.4rem}
.srow.primary .sdesc{font-size:1.05rem;color:var(--foreground);max-width:56ch}
.subhead{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
         color:var(--muted-foreground);margin-top:44px;padding-bottom:6px}
.srow.secondary{padding:26px 4px;opacity:.82}
.srow.secondary .sname{font-size:1.35rem}
.srow.secondary .sdesc{font-size:.92rem}
.srow.secondary:hover{opacity:1}

/* ── team ─────────────────────────────────────────────────── */
.people{margin-top:60px;border-top:1px solid var(--border)}
.person{display:grid;grid-template-columns:3fr 9fr;gap:48px;
        padding:52px 0;border-bottom:1px solid var(--border);align-items:start}
.mono{
  width:78px;height:78px;border-radius:50%;background:var(--primary);
  color:var(--primary-foreground);display:flex;align-items:center;justify-content:center;
  font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;letter-spacing:.02em;
  overflow:hidden;flex:none;
}
/* A real headshot earns more room than a monogram does. */
/* The headshot is a circular crop on PURE white. multiply maps 255,255,255 to
   exactly the frame color, so the photo dissolves into the page with no halo --
   and it keeps the anti-aliased edge that a threshold recolour would jag. The
   subject darkens by ~2%, which is not visible. */
.mono.has-photo{width:168px;height:168px;background:var(--background)}
@media(max-width:980px){.mono.has-photo{width:132px;height:132px}}
.mono.has-photo img{mix-blend-mode:multiply}
.mono img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.person .name{font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;
              line-height:1.2;color:var(--foreground);margin-top:24px}
.person .role{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
              color:var(--muted-foreground);margin-top:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags span{font-size:.72rem;letter-spacing:.06em;color:var(--muted-foreground);
           border:1px solid var(--border);padding:5px 11px}
.person .bio p + p{margin-top:18px}

.advisors{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;
          border-top:1px solid var(--border);border-left:1px solid var(--border)}
.advisors .cell{padding:36px;border-right:1px solid var(--border);
                border-bottom:1px solid var(--border)}
.advisors .mono{width:56px;height:56px;font-size:1.1rem}
.advisors .name{font-size:1.2rem;margin-top:18px}
.advisors p{font-size:.93rem;margin-top:14px}

@media(max-width:980px){
  .person{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .advisors{grid-template-columns:1fr}
}

/* ── strategy state ───────────────────────────────────────────
   Three levels have to be distinguishable at a glance: the firm, which is editorial and
   carries no accent; GC8, which is live and marked green; R34, which is still research
   and marked gold. The same two colors are used by the lifecycle graphic and by the
   strategy links in the navigation, so the reader only has to learn them once. */
.status{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(249,248,246,.34);
        padding:9px 18px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
        color:rgba(249,248,246,.85);margin-bottom:26px}
.status i{width:7px;height:7px;border-radius:50%;background:#c9a227;display:block;flex:none}
.status.live{border-color:rgba(90,158,111,.5)}
.status.live i{background:#5a9e6f;box-shadow:0 0 0 4px rgba(90,158,111,.18)}

/* The dot travels with the strategy name wherever it is linked. */
.ddmenu a .dot,.mobilemenu a .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#c9a227;margin-right:9px;vertical-align:middle;flex:none;
}
.ddmenu a .dot.live,.mobilemenu a .dot.live{background:#5a9e6f}

/* ── lifecycle ────────────────────────────────────────────── */
/* The signature graphic of the site. Drawn rather than laid out: hairline rules, a
   ruled tick above every stage, and the stage number set large enough to carry the
   composition on its own. Horizontal rules only -- vertical dividers made it read as a
   grid of cells rather than a sequence of stages. */
.lifecycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:72px;
           border-top:1px solid rgba(249,248,246,.16)}
.lc{padding:0 30px 44px 0;position:relative}
.lc:nth-child(n+5){border-top:1px solid rgba(249,248,246,.16)}
.lc:nth-child(n+5){padding-top:0}

/* A short tick dropped from the rule above marks where each stage begins. */
.lc::before{content:"";position:absolute;left:0;top:0;width:1px;height:26px;
            background:rgba(249,248,246,.26)}

/* .step is also the numbered-process row elsewhere, which is a grid with its own padding
   and rule. Reset those here rather than inherit them by accident. */
.lc .step{
  display:block;border-bottom:0;padding:42px 0 0;
  font-family:"Playfair Display",Georgia,serif;font-weight:400;
  font-size:clamp(3rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.04em;
  color:rgba(249,248,246,.17);font-variant-numeric:tabular-nums;
  margin-bottom:20px;transition:color .3s ease;
}
.lc h3{font-size:1.06rem;margin:0 0 10px}
.lc p{font-size:.88rem}

/* Where a strategy currently sits, the number itself carries the state -- gold while it
   is still working through the lifecycle, green once it is live and trading. */
.lc.here .step{color:#c9a227}
.lc.here.live .step{color:#5a9e6f}
.lc.here::before{background:#c9a227;height:34px}
.lc.here.live::before{background:#5a9e6f}

.lc .tag{display:inline-block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
         border:1px solid rgba(201,162,39,.5);color:#c9a227;padding:3px 9px;margin-top:14px}
.lc .tag.live{border-color:rgba(90,158,111,.55);color:#5a9e6f}

@media(max-width:980px){.lifecycle{grid-template-columns:1fr 1fr}
  .lc:nth-child(n+3){border-top:1px solid rgba(249,248,246,.16)}
  .lc:nth-child(n+3){padding-top:0}}
@media(max-width:620px){.lifecycle{grid-template-columns:1fr}
  .lc{padding-right:0}.lc:nth-child(n+2){border-top:1px solid rgba(249,248,246,.16)}
  .lc .step{font-size:2.6rem;padding-top:34px}}

/* ── collapsible ──────────────────────────────────────────── */
.moretrig{
  font-family:inherit;background:none;border:0;padding:0 0 2px;cursor:pointer;
  font-size:.85rem;font-weight:400;letter-spacing:.02em;color:var(--primary);
  border-bottom:1px solid currentColor;display:inline-flex;align-items:center;gap:8px;
  transition:opacity .2s;
}
.moretrig:hover{opacity:.62}
.moretrig .cv{font-size:.7em;transition:transform .28s ease;line-height:1}
.moretrig[aria-expanded="true"] .cv{transform:rotate(180deg)}
.collapse{max-height:0;overflow:hidden;opacity:0;
          transition:max-height .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.collapse.open{max-height:2600px;opacity:1}

/* ── background timeline ──────────────────────────────────── */
.timeline{margin-top:52px;border-top:1px solid var(--border)}
.tl{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:30px 0;
    border-bottom:1px solid var(--border);align-items:baseline}
.tl .when{font-family:"Playfair Display",Georgia,serif;font-size:1.18rem;
          color:var(--foreground);line-height:1.3}
.tl .when span{display:block;font-family:"DM Sans",sans-serif;font-size:.68rem;
               letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground);
               margin-top:7px}
.tl p{font-size:.98rem}
@media(max-width:820px){.tl{grid-template-columns:1fr;gap:10px}}

/* ── chart ────────────────────────────────────────────────── */
.chartcard{margin-top:52px;border:1px solid var(--border);background:#fff;padding:34px 34px 26px}
.charthead{display:flex;justify-content:space-between;align-items:flex-start;gap:26px;
           flex-wrap:wrap;margin-bottom:26px}
.chartval{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2rem,3.4vw,2.9rem);
          line-height:1;letter-spacing:-.03em;color:var(--primary);font-variant-numeric:tabular-nums}
.chartsub{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
          color:var(--muted-foreground);margin-top:12px}
.legend{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.legend span{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted-foreground)}
.legend i{width:15px;height:2.5px;display:block;flex:none}
.scaletoggle{display:flex;border:1px solid var(--border)}
.scaletoggle button{
  font-family:inherit;font-size:.64rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  padding:8px 15px;background:transparent;border:0;border-right:1px solid var(--border);
  color:var(--muted-foreground);cursor:pointer;transition:all .2s;
}
.scaletoggle button:last-child{border-right:0}
.scaletoggle button.on{background:var(--primary);color:var(--primary-foreground)}
.chartbox{position:relative;width:100%}
.chartbox svg{width:100%;height:auto;display:block;overflow:visible}
.chartbox .axlab{font-family:"DM Sans",sans-serif;font-size:11px;fill:var(--muted-foreground)}
.tip{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--primary);color:var(--primary-foreground);padding:13px 16px;
  font-size:.82rem;line-height:1.6;white-space:nowrap;z-index:5;
  box-shadow:0 8px 26px rgba(34,40,47,.18);
}
.tip.on{opacity:1}
.tip .td{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
         color:rgba(249,248,246,.55);margin-bottom:8px}
.tip .tr{display:flex;justify-content:space-between;gap:22px;font-variant-numeric:tabular-nums}
.tip .tr i{width:9px;height:9px;display:inline-block;margin-right:8px;flex:none}
.tip .tr b{font-weight:500}
@media(max-width:620px){
  .chartcard{padding:22px 16px 18px}
  .legend{gap:15px}
}

/* ── form ─────────────────────────────────────────────────── */
form{margin-top:52px;max-width:780px}
.field{margin-bottom:30px}
.field label{
  display:block;font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-foreground);margin-bottom:11px;
}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;font-family:inherit;font-size:.98rem;font-weight:300;color:var(--foreground);
  background:transparent;border:0;border-bottom:1px solid var(--border);
  padding:11px 0;transition:border-color .22s;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--primary);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%237C776E' fill='none' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;margin-top:4px}
.checks label{
  display:flex;align-items:center;gap:12px;font-size:.94rem;font-weight:300;
  letter-spacing:0;text-transform:none;color:var(--foreground);cursor:pointer;margin:0;
}
.checks input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;flex:none}
.formnote{font-size:.86rem;color:var(--muted-foreground);margin-top:26px}

/* ── footer ───────────────────────────────────────────────── */
footer{background:var(--primary);color:var(--primary-foreground);padding:82px 0 34px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:58px}
.foot .brandname{font-family:"Playfair Display",Georgia,serif;font-size:1.42rem;font-weight:500}
.foot p{color:rgba(249,248,246,.6);font-size:.93rem;margin-top:16px;max-width:34ch}
.foot .lbl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
           color:rgba(249,248,246,.42);margin-bottom:20px}
.foot ul{list-style:none}
.foot ul li{margin-bottom:13px}
.foot ul a{font-size:.93rem;color:rgba(249,248,246,.8);transition:color .2s}
.foot ul a:hover{color:var(--primary-foreground)}
.footbar{
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  margin-top:66px;padding-top:26px;border-top:1px solid rgba(249,248,246,.14);
}
.footbar div{font-size:.76rem;color:rgba(249,248,246,.42);line-height:1.7}
.footbar div:last-child{max-width:66ch;text-align:right}

/* ── disclosure ───────────────────────────────────────────── */
.disclosure{font-size:.82rem;font-weight:300;line-height:1.85;
            color:var(--muted-foreground);max-width:84ch;margin-top:44px}
.disclosure + .disclosure{margin-top:18px}

/* ── motion ───────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(26px);
      transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── responsive ───────────────────────────────────────────── */
@media(max-width:980px){
  :root{--gutter:26px}
  .navlinks{display:none}
  .burger{display:block}
  .hero-inner{grid-template-columns:1fr}
  .hero-art{display:none}
  .split,.split-5{grid-template-columns:1fr;gap:44px}
  .pillars{grid-template-columns:1fr;gap:0}
  .pillar{padding:38px 0;border-left:0;border-top:1px solid rgba(249,248,246,.16)}
  .pillar:first-child{padding-top:0;border-top:0}
  .metrics{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr;gap:44px}
  .footbar div:last-child{text-align:left}
  .step{grid-template-columns:56px 1fr;gap:20px}
  .step .ord{grid-row:span 2}
  section{padding:82px 0}
  .page-hero{padding:150px 0 84px}
}
@media(max-width:620px){
  .statgrid{gap:38px 26px}
  .cards2,.metrics{grid-template-columns:1fr}
  .formrow,.checks{grid-template-columns:1fr}
  .hero{min-height:auto;padding:130px 0 80px}
}