/* Elliedoox brand layer for the portfolio case studies (9 Nov 2026).
   Loaded after each page's own styles. body.o = orange-led page, body.t = teal-led page. */
html:root{
  --ink:#1F1B24;--ink-soft:#3A3441;--paper:#FBF9F4;--card:#FFFFFF;--line:#D9D4E0;
  --display:'Poppins',system-ui,-apple-system,sans-serif;
  --body:'Poppins',system-ui,-apple-system,sans-serif;
  --label:'Poppins',system-ui,-apple-system,sans-serif;
  --mono:'Poppins',system-ui,-apple-system,sans-serif;
  --orange:#FC561E;--peach:#FDAA68;--turq:#33D1C6;--lt:#9DEEE6;--apricot:#FFE9D6;--soft:#B9B3C2;
  --orange-grad:linear-gradient(180deg,#FF9A55 0%,#FF6C30 38%,#F5521B 72%,#EC4918 100%);
  --burnt-box:linear-gradient(180deg,#D9400B 0%,#C2380A 100%);
  --teal-box:linear-gradient(180deg,#125A61 0%,#0B434A 100%);
}
html:root body.o{--accent:#C2380A;--accent-f:#FFE9D6;--accent-t:#8A2A08}
html:root body.t{--accent:#0E4F55;--accent-f:#DFF6F3;--accent-t:#0E4F55}
html:root body{font-weight:500}
html:root :is(h1,h2,h3,h4){font-weight:800}

/* top bar */
html:root .topbar{background:rgba(251,249,244,.93);border-bottom-color:rgba(31,27,36,.09)}
html:root .topbar .brand{font-size:16px}
html:root .topbar .brand b{font-weight:800}
html:root .topbar nav a{font-size:14px}

/* hero: dark, centred, the wave behind it */
html:root .hero{background:linear-gradient(rgba(20,17,23,.74),rgba(20,17,23,.74)),url(BRAND_wave.webp) no-repeat center bottom/max(1300px,100%) auto,#1F1B24;color:#fff;padding:74px 0 60px;text-align:center}
html:root .hero .eyebrow{color:var(--soft)}
html:root .hero h1{max-width:none;margin:16px auto 0;font-weight:800;line-height:1.12;text-wrap:balance}
html:root body.o .hero h1{color:var(--orange)}
html:root body.t .hero h1{color:var(--turq)}
html:root .hero .lede{color:var(--line);margin:20px auto 0}
html:root .hero .readout{text-align:left;color:var(--ink);border-color:transparent}
html:root .readout .num{font-weight:800}

/* section headings centred, no numbers */
html:root .sechead{justify-content:center;text-align:center}
html:root .sechead .idx{display:none}
html:root .sechead h2{font-weight:800}
html:root .prose{margin-left:auto;margin-right:auto}
html:root .eyebrow{letter-spacing:.14em}

/* blocks: the opposite colour family to the page's lead */
html:root .resultband{border:0;justify-content:center}
html:root body.o .resultband{background:var(--teal-box)}
html:root body.o .resultband :is(.big,.txt){color:var(--lt)}
html:root body.t .resultband{background:var(--burnt-box)}
html:root body.t .resultband :is(.big,.txt){color:var(--apricot)}
html:root .resultband .big{font-weight:800}

html:root .chip{background:rgba(157,238,230,.32);border-color:transparent;color:#0E4F55}
html:root .step{box-shadow:0 8px 24px -18px rgba(31,27,36,.35);border-color:transparent}
html:root .step .sn{font-weight:800}

/* footer */
html:root footer{background:#141117;color:var(--soft);border-top:0}
html:root footer .wrap{justify-content:center;gap:8px 24px}
html:root footer a:hover{color:#fff}

/* close button on the pages that use it */
.closeblock{text-align:center}
.closeblock h2{font-size:clamp(26px,3.4vw,34px);margin:0 0 20px}
.closeblock .btn{display:inline-block;font-weight:800;font-size:15.5px;padding:14px 26px;border-radius:30px;background:var(--orange-grad);color:#1F1B24;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(252,86,30,.3),0 8px 34px rgba(252,86,30,.24)}

/* diagrams and charts use the brand font */
html:root svg text{font-family:var(--body)!important}