/* =====================================================================
   ELBOUR — SHARED BASE  (mirrors the approved homepage design system)
   Tokens · reset · layout · type · nav · buttons · contact · footer ·
   reveal · reduced-motion.  Used by insights.html and all article pages.
   The homepage itself remains self-contained (inline) and is not affected.
   ===================================================================== */

/* ---- 1 · VARIABLES & RESET ---------------------------------------- */
:root{
  --navy:#0B1323; --surface:#101B2E; --surface-2:#0E1A2B; --tile:#0A1320;
  --cream:#F2EFE6; --muted:#AAB4BD; --blue-grey:#8FA0AD;
  --aqua:#2FA6A0; --teal:#0F7C79; --copper:#B8734A;
  --border-d:rgba(242,239,230,.12); --border-d2:rgba(242,239,230,.07);
  --border-l:rgba(11,19,35,.12); --ink:#0B1323; --body:#46555F; --meta-light:#5B6873;
  --f:'Inter','Avenir Next','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(5rem,11vh,8.5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--navy);color:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ---- 2 · SHARED LAYOUT & TYPE ------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.6rem,5vw,3rem)}
.sec{padding:var(--pad) 0}
.s-light{background:var(--cream);color:var(--ink)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:2.6px;text-transform:uppercase;color:var(--aqua);display:block;margin-bottom:1.5rem}
.eyebrow.l{color:var(--teal)}
.h2{font-weight:300;letter-spacing:-.6px;line-height:1.16;color:var(--cream)}
.s-light .h2{color:var(--ink)}
.lead{font-size:clamp(15px,1.5vw,17px);line-height:1.7;font-weight:300;max-width:60ch}
.s-light .lead{color:var(--body)}
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(9px);transition:opacity .22s ease-out,transform .22s ease-out}
.js .rv.on{opacity:1;transform:none}
.js .rv.d1,.js .rv.d2,.js .rv.d3{transition-delay:0s}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--aqua);color:var(--navy);padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500}
.skip:focus{left:clamp(1.6rem,5vw,3rem);top:10px}

/* ---- 3 · NAVIGATION ----------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,19,35,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-d2)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 clamp(1.6rem,5vw,3rem);height:70px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.wordmark{font-weight:300;letter-spacing:.3em;font-size:17px;color:var(--cream);padding-left:3px}
.nav-r{display:flex;align-items:center;gap:24px;white-space:nowrap}
.nlink{color:var(--muted);font-size:13px;font-weight:500;transition:color .18s;white-space:nowrap;position:relative}
.nlink:hover{color:var(--aqua)}
.nlink.active{color:var(--cream)}
.nlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--aqua);border-radius:2px}
.btn{display:inline-block;font-size:13px;font-weight:500;padding:11px 22px;border-radius:8px;transition:background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn-aqua{background:var(--aqua);color:var(--navy)}.btn-aqua:hover{background:var(--teal);color:var(--cream)}
.btn-ghost{border:1px solid var(--border-d);color:var(--cream)}.btn-ghost:hover{border-color:var(--aqua);color:var(--aqua)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.nav-toggle{display:none;background:none;border:0;color:var(--cream);cursor:pointer;width:42px;height:42px;padding:9px;align-items:center;justify-content:center}
.nav-toggle svg{display:block}

/* ---- 9 · CONTACT STRIP (dark) ------------------------------------- */
.contact{padding:clamp(2.5rem,4.5vh,3.5rem) 0;background:var(--navy)}
.contact-row{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;border-top:1px solid var(--border-d2);padding-top:clamp(1.6rem,3.4vh,2.2rem)}
.contact-l{max-width:46ch}
.contact h2{font-size:clamp(28px,3.2vw,36px);font-weight:300;letter-spacing:-.5px;color:var(--cream);line-height:1.06;margin:.2rem 0 1.1rem}
.contact-sub{font-size:15px;color:var(--muted);font-weight:300;line-height:1.6;max-width:52ch;margin:0}
.contact-mail{color:var(--aqua);font-size:clamp(17px,2.2vw,22px);transition:opacity .18s;white-space:nowrap}.contact-mail:hover{opacity:.72}

/* ---- 10 · FOOTER -------------------------------------------------- */
.footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#0B1323 0%,#07101C 58%,#050A13 100%);padding:clamp(1.5rem,3vw,2.25rem) 0 0}
.footer-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 clamp(1.6rem,5vw,3rem);display:flex;flex-direction:column;gap:clamp(1.6rem,2.6vw,2.2rem)}
.f-top{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(1.4rem,4vw,3rem);flex-wrap:wrap}
.f-contact{display:flex;align-items:center;gap:.6rem;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.f-contact .dot{opacity:.45}
.f-links{display:flex;gap:1.4rem;font-size:12.5px}
.f-links a{color:var(--muted);transition:color .18s}.f-links a:hover{color:var(--cream)}
.f-rule{height:1px;background:var(--border-d2);width:100%}
.f-copy{font-size:11px;color:rgba(242,239,230,.32)}
.footer .biglock{position:relative;left:auto;right:auto;bottom:auto;transform:none;display:flex;align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 2.6rem);margin:clamp(1.25rem,2.5vw,2rem) auto 0;gap:clamp(10px,1.6vw,26px);white-space:nowrap}
.footer .bigmono{height:clamp(120px,19vw,300px);width:auto;opacity:.62}
.footer .bigword-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center}
.footer .bigword{font-weight:300;letter-spacing:.16em;font-size:clamp(72px,13vw,210px);line-height:.92;color:#6D8194}
.footer .bigdesc{align-self:flex-start;margin-left:0;padding-left:.55em;margin-top:clamp(.35rem,.6vw,.8rem);white-space:nowrap;font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(11px,1.7vw,26px);color:rgba(242,239,230,.42)}

/* ---- RESPONSIVE --------------------------------------------------- */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-r{position:absolute;top:70px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:rgba(11,19,35,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-d2);padding:.3rem clamp(1.6rem,5vw,3rem) 1.1rem}
  .nav.open .nav-r{display:flex}
  .nav-r .nlink{font-size:15px;padding:.85rem 0;border-bottom:1px solid var(--border-d2);width:100%}
  .nav-r .nlink.active::after{display:none}
  .nav-r .btn{margin-top:.95rem;width:100%;text-align:center;padding:13px 22px}
  .contact-row{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (max-width:640px){
  .footer .biglock{margin:clamp(2.25rem,7vw,2.75rem) auto 0;max-width:calc(100% - 1.6rem)}
  .footer .bigmono{height:clamp(48px,12vw,64px)}
  .footer .bigword{font-size:clamp(34px,11vw,46px);letter-spacing:.12em}
  .footer .bigdesc{font-size:clamp(8px,2.4vw,10px);letter-spacing:.14em}
}

/* ---- REDUCED MOTION ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rv,.js .rv,.js .rv.on{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}