/* ═══════════════════════════════════════════════════════════════
   EII DESIGN SYSTEM
   Reference is an equity research publication, not a SaaS landing page:
   hairline rules instead of rounded cards, a strict type scale, every
   figure set in monospace, sections numbered like a report.
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ground */
  --ink:#05111a; --ink-2:#0a1c28; --ink-3:#132b3b;
  --panel:rgba(255,255,255,.028);
  --paper:#f4f1e9; --paper-2:#e9e4d7;

  /* brand */
  --gold:#c9a84c; --gold-lt:#e3c874; --gold-dk:#8f7529;
  --navy:#0f2d42;

  /* type on dark */
  --txt:#f2f0ea; --mid:rgba(242,240,234,.62); --dim:rgba(242,240,234,.34);
  /* type on paper */
  --ink-txt:#111d26; --ink-mid:#4d5c68; --ink-dim:#8b98a3;

  --line:rgba(242,240,234,.11);
  --line-2:rgba(242,240,234,.055);
  --line-ink:rgba(17,29,38,.14);

  --up:#3ddc91; --down:#e0685f;

  /* a 4px-based rhythm, so vertical spacing is never arbitrary */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  --gut:clamp(20px,5vw,72px);
  --max:1280px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--txt);
  font-family:'DM Sans',-apple-system,system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#140f02}

/* ── type scale ───────────────────────────────────────────────
   Display is Playfair. Everything structural is DM Sans. Every number
   is DM Mono, because in a research context figures must line up. */
.display,h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:1.06}
h1,.d1{font-size:clamp(48px,7.4vw,104px)}
h2,.d2{font-size:clamp(34px,4.4vw,60px);line-height:1.1}
h3,.d3{font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.d4{font-size:clamp(18px,1.5vw,21px);line-height:1.3}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-feature-settings:'tnum'}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--mid);font-weight:300;max-width:56ch}
.body{font-size:16px;line-height:1.72;color:var(--mid);font-weight:300;max-width:64ch}
.small{font-size:14px;line-height:1.65;color:var(--mid)}

/* the label that sits above every section, report style */
.label{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:var(--s3)
}
.label::before{content:'';width:28px;height:1px;background:var(--gold);opacity:.6;flex:none}
.label.plain::before{display:none}

/* ── layout ───────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,10vw,var(--s11));position:relative}
.sec--tight{padding-block:clamp(56px,7vw,var(--s9))}
.sec--paper{background:var(--paper);color:var(--ink-txt)}
.sec--paper .lede,.sec--paper .body,.sec--paper .small{color:var(--ink-mid)}
.sec--paper .label{color:var(--gold-dk)}
.sec--paper .label::before{background:var(--gold-dk)}

.rule{height:1px;background:var(--line);border:0}
.sec--paper .rule{background:var(--line-ink)}

.grid{display:grid;gap:var(--s6)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(32px,6vw,110px);align-items:start}

/* ── buttons ──────────────────────────────────────────────────
   Rectangular and hairlined. The fill wipes in from the left on hover
   rather than a colour fade, which reads as deliberate rather than default. */
.btn{
  --bg:var(--gold); --fg:#140f02;
  position:relative;display:inline-flex;align-items:center;gap:var(--s3);
  padding:15px 26px;border:1px solid var(--bg);background:transparent;color:var(--bg);
  font:600 12px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;transition:color .38s var(--ease);white-space:nowrap
}
.btn>*{position:relative;z-index:1}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--bg);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease);z-index:0
}
.btn:hover{color:var(--fg)}
.btn:hover::before{transform:scaleX(1)}
.btn--solid{background:var(--bg);color:var(--fg)}
.btn--solid::before{transform:scaleX(1);background:var(--gold-lt)}
.btn--solid:hover{color:var(--fg)}
.btn--ghost{--bg:var(--txt);--fg:var(--ink)}
.sec--paper .btn--ghost{--bg:var(--ink-txt);--fg:var(--paper)}
.btn--lg{padding:18px 34px;font-size:13px}
.btn .arw{transition:transform .38s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ── the card replacement: a ruled cell ───────────────────────
   No border radius, no shadow. A top rule that draws gold on hover. */
.cell{position:relative;padding:var(--s6) 0 var(--s6);border-top:1px solid var(--line)}
.cell::after{content:'';position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--gold);transition:width .5s var(--ease)}
.cell:hover::after{width:100%}
.sec--paper .cell{border-top-color:var(--line-ink)}
.cell .n{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:var(--s4)}
.cell h3{margin-bottom:var(--s3)}

/* a boxed variant, still square, for figures */
.stat{border:1px solid var(--line);padding:var(--s5);position:relative;background:var(--panel)}
.stat .v{font-family:'Playfair Display',serif;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--gold)}
.stat .k{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:var(--s3)}
.sec--paper .stat{border-color:var(--line-ink);background:rgba(17,29,38,.02)}
.sec--paper .stat .v{color:var(--navy)}
.sec--paper .stat .k{color:var(--ink-dim)}

/* ── data list, for specs and details ─────────────────────── */
.dl{border-top:1px solid var(--line)}
.dl div{display:grid;grid-template-columns:minmax(120px,.28fr) 1fr;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:1px solid var(--line-2)}
.dl dt{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dl dd{color:var(--txt);font-size:15.5px}
.sec--paper .dl{border-top-color:var(--line-ink)}
.sec--paper .dl div{border-bottom-color:var(--line-ink)}
.sec--paper .dd,.sec--paper .dl dd{color:var(--ink-txt)}
.sec--paper .dl dt{color:var(--ink-dim)}

/* ── motion ───────────────────────────────────────────────── */
.rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}.rv[data-d="4"]{transition-delay:.28s}
/* headline words rise individually */
.wsplit{display:inline-block;overflow:hidden;vertical-align:top}
.wsplit i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .9s var(--ease)}
.rv.in .wsplit i,.hero.in .wsplit i{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .wsplit i{transform:none;transition:none}
}

@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--s6)}
}
@media(max-width:600px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .dl div{grid-template-columns:1fr;gap:var(--s1)}
}