/* Volcanic Energy — single page · fork of the Volcanic Capital shell (site.css)
   Same type scale, same measures, same topbar contract. The only substantive
   change is the accent thread: Energy blue in place of the group magma.
   Accents are THREADS, never fills — max 4% of any page surface. */

/* ================= TYPE SCALE =================
   Identical to the Volcanic Capital shell. Never write a raw
   font-size for text below — use a step. */
:root{
--t-display:clamp(31px,4.5vw,64px);
--t-display-2:clamp(26px,2.9vw,40px);
--t-closer:clamp(23px,2.7vw,35px);
--t-heading:clamp(24px,2.3vw,31px);
--t-index:clamp(19px,1.6vw,24px);
--t-standfirst:clamp(17px,1.35vw,20.5px);
--t-body:18.5px;
--t-small:16.5px;
--t-meta:13.5px;
--t-label:10.5px;
--t-nav:12.5px;
--t-fine:11px;
}
:root{
  --grotesque:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --garamond:'EB Garamond',Georgia,'Times New Roman',serif;
  --bed:var(--vc-ink);--silver:var(--vc-silver);--ash:var(--vc-earth-ash);
  /* ---- the Energy thread: blue on dark, blue-d20 on paper (4.5:1 on --pg) ---- */
  --acc-dark:var(--vc-accent-blue);--acc-paper:var(--vc-blue-d20);
  --pg:var(--vc-paper-warm);--rule:var(--vc-rule-soft);--sec:var(--vc-text-secondary);--body-c:#2A2521;
  --maxw:1300px;--pad:clamp(24px,6vw,120px);--hair:1px solid var(--vc-rule-soft);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--garamond);background:var(--pg);color:var(--vc-ink);font-size:var(--t-body);line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc-paper)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--grotesque);font-size:var(--t-label);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sec)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--acc-paper);opacity:1;flex:none}
.eyebrow.on-dark{color:var(--ash)}.eyebrow.on-dark::before{background:var(--acc-dark)}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad)}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-52px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(15,12,10,.96) 0%,rgba(15,12,10,.88) 45%,rgba(15,12,10,0) 100%);backdrop-filter:saturate(130%) blur(10px);-webkit-backdrop-filter:saturate(130%) blur(10px);-webkit-mask:linear-gradient(180deg,#000 45%,transparent 100%);mask:linear-gradient(180deg,#000 45%,transparent 100%);opacity:0;transition:opacity .35s ease}
.topbar.solid::before,.topbar.pinned::before{opacity:1}
/* pinned: paper-ground pages (governance) — the dark band is always on so the silver wordmark and nav read */
.topbar.pinned::before{background:rgba(15,12,10,.97);-webkit-mask:none;mask:none;bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.topnav{position:relative;display:flex;align-items:center;gap:30px;font-family:var(--grotesque);font-size:var(--t-nav);letter-spacing:.04em}
.topnav a{transition:color .18s ease;position:relative;padding:4px 0}
.topnav .ind{position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--acc-paper);opacity:0;pointer-events:none;transform:translateX(0);transition:transform .42s cubic-bezier(.2,.6,.2,1),width .42s cubic-bezier(.2,.6,.2,1),opacity .3s ease,background .3s ease}
.topnav .ind.on{opacity:1}
.topnav .ind{background:var(--acc-dark)}
@media(prefers-reduced-motion:reduce){.topnav .ind{transition:opacity .2s ease}}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(190px,27vh,320px) 0 clamp(140px,20vh,240px);background:#0B0806 url("/art/imagery/VC-0015_array-facade.webp") center 52%/cover no-repeat;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(92deg,rgba(4,6,8,.9) 0%,rgba(4,6,8,.8) 34%,rgba(4,6,8,.4) 64%,rgba(4,6,8,.22) 100%),linear-gradient(180deg,rgba(4,6,8,.7) 0%,rgba(4,6,8,0) 34%,rgba(4,6,8,.6) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(150px,24vh,320px);z-index:0;background:linear-gradient(180deg,rgba(250,246,238,0) 0%,rgba(250,246,238,.028) 10%,rgba(250,246,238,.104) 20%,rgba(250,246,238,.216) 30%,rgba(250,246,238,.352) 40%,rgba(250,246,238,.5) 50%,rgba(250,246,238,.648) 60%,rgba(250,246,238,.784) 70%,rgba(250,246,238,.896) 80%,rgba(250,246,238,.972) 90%,rgba(250,246,238,1) 100%)}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{color:#F6F1E8;text-shadow:0 1px 14px rgba(11,8,6,.8);margin-bottom:clamp(34px,5vh,58px)}
.hero .eyebrow::before{background:var(--acc-dark);opacity:1}
/* the lockup is trimmed flush (1200×299, VOLCANIC left 0, right edge 1199),
   so it takes no optical offset — unlike the Capital group stamp */
.hero .stamp{width:min(88%,660px);height:auto;margin:0 0 clamp(34px,5vh,56px)}
.hero .lede{font-family:var(--garamond);font-weight:400;font-size:clamp(26px,3.5vw,50px);line-height:1.12;letter-spacing:-.024em;color:#F6F4F0;text-wrap:balance;max-width:none}
.hero .meta.sectors{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:0 clamp(14px,2vw,32px);margin-top:clamp(30px,4.4vh,48px);border-top:2px solid #6E6A63}
.hero .meta.sectors .m{padding:22px 0 0;min-width:0;line-height:1.2}
.hero .meta.sectors .v{position:relative;display:inline-block;font-family:var(--garamond);font-weight:400;font-size:var(--t-index);line-height:1.2;letter-spacing:-.006em;color:#B9B5B0;text-shadow:0 1px 10px rgba(11,8,6,.7);white-space:nowrap;transition:color .2s ease}
.hero .meta.sectors a.v:hover,.hero .meta.sectors a.v:focus-visible{color:var(--acc-dark)}
.hero .meta.sectors a.v::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--acc-dark);transition:right .5s cubic-bezier(.2,.6,.2,1)}
.hero .meta.sectors a.v:hover::after,.hero .meta.sectors a.v:focus-visible::after{right:0}
@media (prefers-reduced-motion:reduce){.hero .meta.sectors a.v::after{transition:none}}
@media (max-width:1080px){.hero .meta.sectors{flex-wrap:wrap;justify-content:flex-start;gap:0}.hero .meta.sectors .m{padding:14px 26px 0 0}}
@media (max-width:640px){.hero .lede{font-size:25px;line-height:1.16;letter-spacing:-.016em;max-width:none}.hero .lede br{display:none}.hero .stamp{width:100%}}

/* ---------- in brief ---------- */
.brief .wrap{padding-top:clamp(84px,12vh,150px);padding-bottom:clamp(70px,10vh,120px)}
.brief .eyebrow{margin-bottom:clamp(36px,5vh,60px)}
.statement{font-family:var(--garamond);font-size:var(--t-display-2);line-height:1.34;letter-spacing:-.008em;max-width:50ch;text-wrap:pretty}
.statement .drop{float:left;font-size:3em;line-height:.74;padding:9px 15px 0 0;font-weight:500;color:var(--acc-paper)}

/* ---------- sections ---------- */
.sections{padding-bottom:8px}
.apx{display:grid;grid-template-columns:minmax(0,.33fr) minmax(0,.67fr);gap:0 clamp(26px,4.5vw,64px);padding:clamp(40px,7vh,58px) 0 clamp(44px,7vh,62px);border-top:var(--hair)}
.apx-body{min-width:0}
.apx h2{font-family:var(--garamond);font-weight:500;font-size:var(--t-heading);line-height:1.16;letter-spacing:-.008em;text-wrap:balance}
.apx p{font-size:var(--t-body);line-height:1.68;color:var(--body-c);max-width:60ch;text-wrap:pretty}
.apx p+p{margin-top:18px}
.apx-stick{position:sticky;top:96px}
@media (max-width:820px){.apx{grid-template-columns:1fr;gap:16px}.apx-stick{position:static}}
.sections .wrap>.apx:last-child{padding-bottom:clamp(64px,10vh,96px)}

/* ---------- closing statement band ---------- */
.statement-band{position:relative;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;overflow:hidden;background:#0B0806}
.statement-band img.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 46%}
.statement-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,6,.12) 0%,rgba(11,8,6,.30) 46%,rgba(11,8,6,.74) 100%)}
.statement-band .wrap{position:relative;z-index:1;width:100%;padding-top:clamp(120px,22vh,220px);padding-bottom:clamp(46px,7vh,74px)}
.statement-band .eyebrow{color:#F6F1E8;margin-bottom:22px;text-shadow:0 1px 14px rgba(11,8,6,.8)}
.statement-band .eyebrow::before{background:var(--acc-dark);opacity:1}
.sb-line{font-family:var(--garamond);font-size:var(--t-display-2);line-height:1.26;letter-spacing:-.008em;color:#F6F1E8;max-width:38ch;text-wrap:balance;text-shadow:0 1px 24px rgba(11,8,6,.72)}
.sb-line .l2{display:block;margin-top:.42em}

/* ---------- Earth-Dark bed (footer) ---------- */
.bed{background:var(--bed);color:var(--silver);position:relative;overflow:hidden}
/* Footer meta on ink: earth-ash reads 3.45:1 there, under the 4.5:1 floor, and the palette has no neutral between it and silver. The footer tone is therefore derived from two palette tokens rather than a new hex: 65 per cent silver over ink, 5.0:1. Scoped to the footer; the hero eyebrow sits on a plate and is untouched. */
.bed{--ash:color-mix(in srgb,var(--vc-silver) 65%,var(--vc-ink))}
.bed .wrap{padding-top:clamp(50px,7vh,84px);padding-bottom:32px;position:relative;z-index:1}
.bed .top{display:grid;grid-template-columns:1.25fr 1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
.bed .col{padding-top:22px;border-top:1px solid rgba(198,192,180,.22)}
.bed .col.explore a{display:block;padding:7px 0;opacity:.88;transition:opacity .18s ease}
.bed .col.explore a:hover{opacity:1}
.bed .col.explore img{height:19px;width:auto}
.bed .col.gov a{padding:4px 0}
.bed .col .li{max-width:24ch;line-height:1.45}
.bed .brandcol .wm{height:23px;width:auto;margin-bottom:18px}
.bed .brandcol p{font-size:var(--t-small);line-height:1.55;color:var(--silver);max-width:30ch}
.bed .col h4{font-family:var(--grotesque);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:18px;font-weight:600}
.bed .col a,.bed .col .li{display:block;font-family:var(--grotesque);font-size:var(--t-meta);color:var(--silver);padding:5px 0;transition:color .16s ease;letter-spacing:.01em}
.bed .col a:hover{color:#fff}
.bed .col .li{color:var(--ash)}
.bed .col .li .sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--acc-dark);vertical-align:.3em;margin:0 .42em}
.bed .rule{height:1px;background:rgba(198,192,180,.14);margin:clamp(30px,4.2vh,46px) 0 22px}
.bed .legal{display:flex;flex-direction:column;gap:22px}
.bed .notice a{color:var(--silver);border-bottom:1px solid rgba(198,192,180,.35);transition:color .16s ease,border-color .16s ease}
.bed .notice a:hover{color:#fff;border-color:#fff}
.bed .disc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.bed .disc h5{font-family:var(--grotesque);font-size:var(--t-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:10px}
.bed .disc p{font-family:var(--grotesque);font-size:var(--t-fine);line-height:1.66;color:var(--silver);max-width:46ch}
@media (max-width:880px){.bed .disc{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bed .disc{grid-template-columns:1fr;gap:22px}}
.bed .legal-foot{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:18px}
.bed .notice{font-family:var(--grotesque);font-size:var(--t-fine);letter-spacing:.05em;color:var(--ash);flex:1 1 640px;line-height:1.6}
.bed .cc{font-family:var(--grotesque);font-size:var(--t-fine);letter-spacing:.05em;color:var(--ash);white-space:nowrap}
@media (max-width:880px){.bed .top{grid-template-columns:1fr 1fr;row-gap:42px}.bed .brandcol{grid-column:1/-1}}
@media (max-width:560px){.bed .top{grid-template-columns:1fr;row-gap:30px}.bed .legal-foot{flex-direction:column;gap:12px}.bed .notice{flex:0 0 auto}.bed .cc{white-space:normal}}
/* ---------- small screens ---------- */
@media (max-width:640px){
.hero{padding-top:clamp(150px,24vh,220px);padding-bottom:clamp(100px,14vh,150px);background-position:36% 52%}
.hero .eyebrow{margin-bottom:26px;font-size:10px;letter-spacing:.22em}
.hero .meta.sectors{border-top-width:1px;margin-top:26px}
.hero .meta.sectors .m{padding:12px 20px 0 0}
.hero .meta.sectors .v{font-size:17px;white-space:normal}
.statement{font-size:24px;line-height:1.36;max-width:none}
.statement .drop{padding:7px 10px 0 0}
.apx{padding:32px 0 36px}
.apx h2{font-size:22px}
.apx p{font-size:17px}
.statement-band{min-height:0;align-items:flex-end}
.statement-band .wrap{padding-top:120px;padding-bottom:40px}
.sb-line{font-size:23px;line-height:1.3}
}
@media (max-width:400px){.hero .lede{font-size:23px}.topnav{gap:12px}}
@media (hover:none){.hero .meta.sectors a.v::after{right:0;opacity:.45}}

/* ---------- reveal ---------- */
@keyframes vc-rise{from{transform:translateY(16px)}to{transform:none}}
html.js .reveal{opacity:1}
@media (prefers-reduced-motion: no-preference){html.js .reveal.in{animation:vc-rise .72s cubic-bezier(.2,.6,.2,1) forwards}}

/* ================= TOPBAR CONTRACT =================
   Held identical to the Volcanic Capital shell. Do not override
   padding, lockup height or nav metrics below this line. */
:root{--tb-pad:clamp(24px,5.2vw,84px);--tb-y:18px;--lk-h:32px}
.topbar{--tb-gutter:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad)));padding:var(--tb-y) var(--tb-gutter);padding-left:max(var(--tb-gutter),env(safe-area-inset-left));padding-right:max(var(--tb-gutter),env(safe-area-inset-right))}
.topbar .brand{order:1}
.topnav{order:2}
.topbar .lockup,.topbar .brand .lockup{height:var(--lk-h);width:auto}
.topbar .brand .lk-ink{display:none}
.topbar .brand .lk-silver{display:block}
.topbar.solid .brand .lk-ink{display:none}
.topbar.solid .brand .lk-silver{display:block}
.topnav{align-items:center;gap:30px;font-family:var(--grotesque);font-size:var(--t-nav);font-weight:400;letter-spacing:.04em;text-transform:none}
.topnav a{padding:4px 0}
@media (max-width:760px){.topnav{gap:20px;font-size:var(--t-fine)}.topbar{--lk-h:24px}}
@media (max-width:640px){.topbar{--tb-y:14px;--lk-h:20px}}
@media (max-width:460px){.topnav{gap:15px;font-size:var(--t-fine)}.topbar{--lk-h:18px}}
.topbar:not(.solid) .topnav a{color:#CFC9BE}
.topbar:not(.solid) .topnav a:hover{color:#fff}
.topbar.solid .topnav a{color:#CFC9BE}
.topbar.solid .topnav a:hover{color:#fff}

/* ---------- skip to content ---------- */
.skip{position:fixed;top:0;left:0;z-index:100;transform:translateY(-130%);background:var(--vc-ink);color:var(--vc-silver);font-family:var(--grotesque);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:13px 20px;border-bottom:2px solid var(--acc-dark);transition:transform .18s ease}
.skip:focus,.skip:focus-visible{transform:none;color:var(--vc-silver);outline:none}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}
main:focus{outline:none}
@media print{.skip{display:none!important}}
/* print-only elements — see site-print.css */
.printhead,.co-ink,.printseal{display:none}
@media print{.bed .col.gov,.bed .col.explore{display:none!important}}

/* ---------- hero: drift parallax + staged entrance ----------
   Progressive enhancement. site.js clones the CSS hero background into an
   oversized .plate <img> and holds it back against scroll; the CSS background
   stays in place as the no-JS and print fallback. Both effects are suppressed
   under prefers-reduced-motion. */
.hero .plate{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:transform;pointer-events:none}
.hero::before,.hero::after{z-index:1}
.hero .wrap{z-index:2}
html.js .hero.stage .reveal{opacity:1;transform:none;transition:none}
html.js .hero.stage .eyebrow,html.js .hero.stage .stamp,html.js .hero.stage .lede,html.js .hero.stage .meta.sectors .m{opacity:0}
.hero.stage.play .eyebrow,.hero.stage.play .stamp,.hero.stage.play .lede,.hero.stage.play .meta.sectors .m{animation:heroRise .9s cubic-bezier(.16,.7,.2,1) both}
.hero.stage.play .eyebrow{animation-delay:.05s}
.hero.stage.play .stamp{animation-delay:.19s}
.hero.stage.play .lede{animation-delay:.35s}
.hero.stage .meta.sectors{position:relative;border-top-color:transparent}
.hero.stage .meta.sectors::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#6E6A63;transform:scaleX(0);transform-origin:left center}
.hero.stage.play .meta.sectors::after{animation:heroDraw 1.05s cubic-bezier(.2,.62,.2,1) .52s both}
.hero.stage.play .meta.sectors .m:nth-child(1){animation-delay:.72s}
.hero.stage.play .meta.sectors .m:nth-child(2){animation-delay:.84s}
.hero.stage.play .meta.sectors .m:nth-child(3){animation-delay:.96s}
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heroDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:640px){.hero.stage .meta.sectors::after{top:-1px;height:1px}}
@media (prefers-reduced-motion:reduce){
.hero .plate{display:none}
html.js .hero.stage .eyebrow,html.js .hero.stage .stamp,html.js .hero.stage .lede,html.js .hero.stage .meta.sectors .m{opacity:1;animation:none}
.hero.stage .meta.sectors{border-top-color:#6E6A63}
.hero.stage .meta.sectors::after{display:none}
}