/* ============================================================
   SVX, Corporate site stylesheet
   Concept A · light/dark themed · shared across all pages
   ============================================================ */
:root{
  --amber:#E8743B; --amber-2:#F2A35E; --amber-deep:#B04D1C;
  --teal:#2A5E5F; --sage:#4E5A40; --indigo:#26295D;
  --ink:#0E1124; --ink-2:#171A30; --teal-900:#0F3032;
  --on-ink:rgba(246,242,233,.74); --on-ink-strong:#F6F2E9; --on-ink-line:rgba(246,242,233,.14);
  /* semantic, LIGHT */
  --bg:#F6F2E9; --bg-alt:#EFE9DB; --surface:#ffffff;
  --text:#0E1124; --text-dim:rgba(14,17,36,.62); --text-mute:rgba(14,17,36,.6);
  --border:rgba(14,17,36,.12); --border-soft:rgba(14,17,36,.07);
  --logo:rgba(14,17,36,.42); --nav-bg:rgba(246,242,233,.82);
  --feat-1:var(--ink); --feat-2:var(--teal-900); --feat-3:var(--ink-2); --feat-cta:var(--ink); --feat-foot:var(--ink-2);
  --ease:cubic-bezier(.16,1,.3,1); --maxw:1280px;
  /* one spacing standard, scales per device at the 980 and 680 breakpoints */
  --gutter:40px;     /* horizontal page margin, shared by nav and every .wrap */
  --sec-y:110px;     /* vertical rhythm for every section */
  --hero-top:168px;  /* top space that clears the fixed nav on hero sections */
}
[data-theme="dark"]{
  --bg:#070912; --bg-alt:#0C0F1C; --surface:#151A2C;
  --text:#F3F0E7; --text-dim:rgba(243,240,231,.68); --text-mute:rgba(243,240,231,.42);
  --border:rgba(243,240,231,.13); --border-soft:rgba(243,240,231,.07);
  --logo:rgba(243,240,231,.4); --nav-bg:rgba(7,9,18,.85);
  --feat-1:#0E1124; --feat-2:#0E2E30; --feat-3:#12162A; --feat-cta:#0C1022; --feat-foot:#0A0D1A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{font-family:"Hanken Grotesk",sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden; transition:background .5s var(--ease),color .5s var(--ease)}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",sans-serif; line-height:1.04; letter-spacing:-.02em; font-weight:700; color:var(--text)}
.mono{font-family:"JetBrains Mono",monospace}
a{color:inherit; text-decoration:none}
img,svg{display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.sec{padding:var(--sec-y) 0}
.bg-alt{background:var(--bg-alt)}
.center{text-align:center}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-deep); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--amber)}
.eyebrow.c{justify-content:center}
section{position:relative}

/* ---------- NAV ---------- */
/* the bar spans full width, but its content lines up with the centered .wrap on
   every screen, so the logo and hamburger share the page's left/right margins */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:20px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); transition:all .4s var(--ease)}
.nav.scrolled{padding-top:13px; padding-bottom:13px; background:var(--nav-bg); backdrop-filter:blur(16px); border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo{width:34px; height:34px}
/* the X glyph is optically inset inside its square; pull it so its visible edge meets the page gutter, in line with the content below */
.nav .logo-x{margin-left:-4px}
.brand .wordmark{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:21px; letter-spacing:.04em; color:var(--text)}
.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{font-size:15px; font-weight:500; color:var(--text); opacity:.72; transition:opacity .2s,color .2s}
.nav-links a:hover,.nav-links a.active{opacity:1; color:var(--amber-deep)}
.nav-right{display:flex; align-items:center; gap:14px}
.theme-tg{width:40px; height:40px; border:1px solid var(--border); border-radius:100px; background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; transition:all .25s var(--ease)}
.theme-tg:hover{border-color:var(--text); transform:translateY(-1px)}
.theme-tg svg{width:18px; height:18px}
.nav-cta{font-size:14px; font-weight:600; padding:11px 20px; border-radius:100px; background:var(--text); color:var(--bg); transition:all .25s var(--ease); white-space:nowrap}
.nav-cta:hover{background:var(--amber-deep); color:#fff; transform:translateY(-1px)}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer}
.burger span{width:24px; height:2px; background:var(--text); border-radius:2px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; padding:15px 26px; border-radius:100px; transition:all .25s var(--ease); cursor:pointer; border:none}
.btn-primary{background:var(--amber); color:#1a0e06}
.btn-primary:hover{background:var(--amber-deep); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(200,90,40,.6)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--text); background:var(--text); color:var(--bg)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.on-dark .btn-ghost,.btn-ghost.on-dark{color:var(--on-ink-strong); border-color:var(--on-ink-line)}
.on-dark .btn-ghost:hover,.btn-ghost.on-dark:hover{background:var(--on-ink-strong); color:var(--ink)}

/* ---------- HERO (home) ---------- */
.hero{padding:var(--hero-top) 0 calc(var(--sec-y) * .64); position:relative; overflow:hidden}
.grid-bg::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000,transparent 75%); opacity:.7}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative}
.hero h1{font-size:clamp(48px,7vw,96px); font-weight:700; letter-spacing:-.035em}
.accent{background:linear-gradient(105deg,var(--indigo),var(--teal) 48%,var(--sage)); -webkit-background-clip:text; background-clip:text; color:transparent}
[data-theme="dark"] .accent{background:linear-gradient(105deg,#6b6fc0,#46c7b8 48%,#aab06a); -webkit-background-clip:text; background-clip:text}
.lede{font-size:clamp(17px,1.5vw,20px); color:var(--text-dim); max-width:540px; margin:26px 0 36px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.lattice-card{position:relative; aspect-ratio:1/.94; border-radius:22px; overflow:hidden; background:radial-gradient(120% 120% at 75% 15%,#194A4C,var(--ink) 70%); border:1px solid var(--on-ink-line); box-shadow:0 40px 80px -40px rgba(14,17,36,.55)}
.lattice-card .tag{position:absolute; top:18px; left:18px; z-index:3; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,242,233,.55)}
.lattice-card .tag-br{position:absolute; bottom:18px; right:20px; z-index:3; text-align:right; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.05em; color:rgba(246,242,233,.5)}
.lattice-card svg{position:absolute; inset:0; width:100%; height:100%}

/* ---------- PAGE HERO (inner) ---------- */
.page-hero{padding:var(--hero-top) 0 calc(var(--sec-y) * .58); position:relative; overflow:hidden}
.page-hero .breadcrumb{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--text-mute); margin-bottom:22px}
.page-hero .breadcrumb a:hover{color:var(--amber-deep)}
.page-hero h1{font-size:clamp(42px,6.2vw,84px); font-weight:700; letter-spacing:-.035em; max-width:14ch}
.page-hero .lede{margin-top:24px; max-width:800px}
.page-hero .lede:has(+ .lede){margin-bottom:0}
.page-hero .lede + .lede{margin-top:16px}

/* ---------- STAT STRIP ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.stat-strip .cell{padding:26px 24px 24px; border-right:1px solid var(--border-soft)}
.stat-strip .cell:last-child{border-right:none}
.stat-strip .num{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(34px,4vw,46px); letter-spacing:-.03em; color:var(--text)}
.stat-strip .num .u{color:var(--amber-deep)}
.stat-strip .lbl{font-size:13.5px; color:var(--text-dim); margin-top:6px; max-width:210px}

/* ---------- TRUST / LOGO ROWS ---------- */
.logorow{padding:calc(var(--sec-y) * .42) 0; background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.logorow .kicker{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); text-align:center; margin-bottom:26px}
.logos{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px 46px}
.logos span{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:19px; color:var(--logo); transition:color .25s; cursor:default}
.logos span:hover{color:var(--teal)}
@media(max-width:680px){
  .logorow .kicker{font-size:11px; letter-spacing:.08em}
  .logos{gap:26px 30px}
  .logos span{font-size:15px}
  .logos .logo-img,.logo-marquee-track .logo-img{height:34px; max-width:150px}
}

/* ---------- SECTION HEAD ---------- */
.shead{max-width:760px; margin-bottom:54px}
.shead.c{margin-left:auto; margin-right:auto; text-align:center}
.shead h2{font-size:clamp(34px,4.6vw,58px); margin-top:18px; font-weight:700}
.shead p{font-size:18px; color:var(--text-dim); margin-top:18px; max-width:620px}
.shead.c p{margin-left:auto; margin-right:auto}

/* ---------- DARK FEATURE SECTIONS ---------- */
.dark-sec{color:var(--on-ink-strong); overflow:hidden}
.dark-sec .shead p,.dark-sec .lede{color:var(--on-ink)}
.dark-sec .eyebrow{color:var(--amber-2)} .dark-sec .eyebrow::before{background:var(--amber-2)}
.dark-sec h1,.dark-sec h2,.dark-sec h3,.dark-sec h4{color:var(--on-ink-strong)}
.stakes{background:var(--feat-1); transition:background .5s var(--ease)} .stakes.sec{padding:var(--sec-y) 0}
.stakes::before{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 15% 0%,rgba(42,94,95,.4),transparent 60%),radial-gradient(50% 50% at 100% 100%,rgba(232,116,59,.16),transparent 70%)}
.stakes .wrap{position:relative}
.viz-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.viz-card{background:rgba(246,242,233,.04); border:1px solid var(--on-ink-line); border-radius:20px; padding:34px; backdrop-filter:blur(4px)}
.viz-card h3{font-size:21px; margin-bottom:4px}
.viz-card .sub{font-size:13.5px; color:var(--on-ink); margin-bottom:26px}
.bar-row{margin-bottom:18px}
.bar-row .bl{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:8px; color:var(--on-ink)}
.bar-row .bl b{color:var(--on-ink-strong); font-family:"JetBrains Mono",monospace; font-weight:500}
.bar-track{height:9px; border-radius:6px; background:rgba(246,242,233,.08); overflow:hidden}
.bar-fill{height:100%; width:0; border-radius:6px; transition:width 1.3s var(--ease)}
.bar-fill.cathode{background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.bar-fill.other{background:rgba(246,242,233,.34)}
.bar-fill.anode{background:var(--teal)}
.note{margin-top:40px; border-left:2px solid var(--amber); padding:6px 0 6px 22px; max-width:780px}
.note p{font-size:17px; color:var(--on-ink-strong)} .note b{color:var(--amber-2); font-weight:600}
/* homepage section intros: single column, title and body copy capped at 2/3 width */
.split-head{margin-bottom:44px}
.split-head .eyebrow{margin-bottom:0}
.split-head h2{font-size:clamp(34px,4.6vw,58px); font-weight:700; margin-top:16px; line-height:1.04; max-width:66%}
.split-body{margin-top:26px; max-width:66%}
.split-body p{font-size:21px; line-height:1.55; color:var(--text); margin-bottom:20px}
.split-body p:last-child{margin-bottom:0}
.dark-sec .split-body p{color:var(--on-ink-strong)}
@media(max-width:1100px){.split-head h2,.split-body{max-width:80%}}
@media(max-width:900px){.split-head{margin-bottom:34px} .split-head h2,.split-body{max-width:100%} .split-body p{font-size:18px}}
/* the stakes supporting callout chips: full-width grid with a hover lift */
.stakes-callouts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0}
.stakes-callouts .callout{display:flex; align-items:center; font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.02em; color:var(--on-ink-strong); background:rgba(246,242,233,.05); border:1px solid var(--on-ink-line); border-radius:14px; padding:16px 20px; transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease)}
.stakes-callouts .callout::before{content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--on-ink-line); margin-right:12px; transition:background .28s var(--ease), box-shadow .28s var(--ease)}
.stakes-callouts .callout:hover{transform:translateY(-4px); border-color:rgba(232,116,59,.6); background:rgba(232,116,59,.08); box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.stakes-callouts .callout:hover::before{background:var(--amber-2); box-shadow:0 0 0 4px rgba(232,116,59,.18)}
@media(max-width:900px){.stakes-callouts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stakes-callouts{grid-template-columns:1fr}}
/* donut charts: cathode share of battery cost and emissions (Technology page) */
.donut-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.donut-card{background:rgba(246,242,233,.04); border:1px solid var(--on-ink-line); border-radius:20px; padding:40px 34px; text-align:center; backdrop-filter:blur(4px)}
.donut-wrap{position:relative; width:172px; height:172px; margin:0 auto 20px}
.donut{width:172px; height:172px}
.donut-track{stroke:rgba(246,242,233,.1)}
.donut-cost .donut-fill{stroke:#E8743B}
.donut-emissions .donut-fill{stroke:#46c7b8}
.donut-center{position:absolute; inset:0; display:grid; place-items:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:38px; letter-spacing:-.02em; color:var(--on-ink-strong)}
.donut-cap{font-size:15.5px; line-height:1.5; color:var(--on-ink); max-width:270px; margin:0 auto}
@media(max-width:680px){.donut-grid{grid-template-columns:1fr; gap:18px}}

/* ---------- PILLARS ---------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.pillar{border:1px solid var(--border); border-radius:18px; padding:34px 30px; background:var(--surface); position:relative; overflow:hidden; transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pillar:hover{transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(14,17,36,.3)}
.pillar .pn{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--amber-deep); letter-spacing:.12em}
.pillar h3{font-size:27px; margin:18px 0 12px}
.pillar p{font-size:15px; color:var(--text-dim)}
.pillar .ring{position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; border:1px solid var(--border); opacity:.6}

/* ---------- ATTRS ---------- */
.attrs{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.attr{background:var(--bg-alt); padding:26px 22px; transition:background .25s}
.attr:hover{background:var(--surface)}
.attr .ai{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--teal); letter-spacing:.08em; margin-bottom:12px}
.attr h4{font-size:17px; font-weight:600; font-family:"Hanken Grotesk",sans-serif; letter-spacing:-.01em; margin-bottom:6px}
.attr p{font-size:13.5px; color:var(--text-dim)}

/* ---------- Capabilities: aligned two-column index list ---------- */
.caps{display:grid; grid-template-columns:1fr 1fr; column-gap:60px; border-top:1px solid var(--border)}
.cap{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 2px; border-bottom:1px solid var(--border-soft)}
.cap-n{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--teal); letter-spacing:.08em; padding-top:4px}
.cap h4{font-size:17px; font-weight:600; font-family:"Hanken Grotesk",sans-serif; letter-spacing:-.01em; margin-bottom:5px}
.cap p{font-size:13.5px; line-height:1.55; color:var(--text-dim)}
@media(max-width:760px){ .caps{grid-template-columns:1fr; border-top:none} }

/* ---------- PROCESS ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden}
.pstep{background:var(--surface); padding:32px 26px; position:relative}
.pstep .pnum{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--amber-deep); letter-spacing:.1em; margin-bottom:16px}
.pstep h4{font-size:18px; margin-bottom:8px}
.pstep p{font-size:13.5px; color:var(--text-dim)}

/* ---------- MARKETS ---------- */
.mkt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.mkt{border:1px solid var(--on-ink-line); border-radius:18px; padding:32px; position:relative; background:rgba(246,242,233,.03); min-height:280px; display:flex; flex-direction:column; transition:background .3s,transform .3s var(--ease)}
.mkt:hover{background:rgba(246,242,233,.07); transform:translateY(-4px)}
.mkt .ico{width:44px; height:44px; margin-bottom:auto; color:var(--amber-2)}
.mkt .mn{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; color:rgba(246,242,233,.45); text-transform:uppercase}
.mkt h3{font-size:25px; margin:14px 0 10px}
.mkt p{font-size:14.5px; color:var(--on-ink)}

/* market detail blocks */
.feature-block{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:calc(var(--sec-y) * .6) 0; border-bottom:1px solid var(--border)}
.feature-block:last-child{border-bottom:none}
.feature-block.flip .fb-visual{order:-1}
.fb-tag{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em; color:var(--amber-deep); text-transform:uppercase}
.feature-block h2{font-size:clamp(28px,3.4vw,42px); margin:14px 0 18px}
.feature-block p{font-size:16.5px; color:var(--text-dim); margin-bottom:16px}
.fb-list{list-style:none; margin-top:22px}
.fb-list li{font-size:15px; padding:11px 0 11px 26px; border-top:1px solid var(--border); position:relative; color:var(--text)}
.fb-list li::before{content:""; position:absolute; left:0; top:18px; width:10px; height:10px; background:var(--amber); border-radius:2px}
.fb-visual{aspect-ratio:4/3; border-radius:20px; border:1px solid var(--border); background:radial-gradient(130% 120% at 80% 10%,var(--teal-900),var(--ink) 75%); position:relative; overflow:hidden; box-shadow:0 30px 60px -40px rgba(14,17,36,.5)}
.fb-visual .label{position:absolute; bottom:20px; left:22px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; color:rgba(246,242,233,.6); text-transform:uppercase}
.fb-visual svg{position:absolute; inset:0; width:100%; height:100%}

/* ---------- TRACTION ---------- */
.trac-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.trac .num{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(34px,4.2vw,50px); letter-spacing:-.03em; color:var(--amber-2)}
.trac .lbl{font-size:14px; color:var(--on-ink); margin-top:8px}

/* ---------- NEWS ---------- */
.news-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; flex-wrap:wrap; gap:20px}
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.ncard{border:1px solid var(--border); border-radius:18px; padding:30px; background:var(--surface); display:flex; flex-direction:column; min-height:300px; transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ncard:hover{transform:translateY(-5px); box-shadow:0 30px 60px -34px rgba(14,17,36,.28)}
.ncard .date{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--amber-deep); letter-spacing:.06em}
.ncard .cat{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:auto}
.ncard h3{font-size:20px; font-weight:600; font-family:"Bricolage Grotesque",sans-serif; margin:18px 0; line-height:1.18}
.ncard .more{font-size:14px; font-weight:600; color:var(--teal); display:inline-flex; gap:7px; align-items:center}
[data-theme="dark"] .ncard .more{color:#5fd0c2}
.ncard:hover .more svg{transform:translateX(3px)} .ncard .more svg{transition:transform .25s}

/* news list (newsroom) */
.news-list{border-top:1px solid var(--border)}
.nrow{display:grid; grid-template-columns:130px 1fr auto; gap:28px; align-items:center; padding:30px 0; border-bottom:1px solid var(--border)}
.nrow .date{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--amber-deep)}
.nrow h3{font-size:21px; font-weight:600; font-family:"Bricolage Grotesque",sans-serif; line-height:1.25; transition:color .2s var(--ease)}
.nrow:hover h3{color:var(--amber-deep)}
.nrow .arrow{color:var(--text-mute); transition:color .2s} .nrow:hover .arrow{color:var(--amber-deep)}
.pager{display:flex; gap:10px; justify-content:center; margin-top:50px}
.pager a{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; font-family:"JetBrains Mono",monospace; font-size:14px; transition:all .2s}
.pager a:hover,.pager a.active{background:var(--amber); color:#1a0e06; border-color:var(--amber)}

/* ---------- ARTICLE ---------- */
.prose{max-width:720px; margin:0 auto}
.prose .article-meta{font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.06em; color:var(--text-mute); margin-bottom:18px}
.prose h1{font-size:clamp(32px,4.4vw,52px); line-height:1.08; margin-bottom:26px}
.prose h2{font-size:27px; margin:42px 0 16px}
.prose p{font-size:17.5px; color:var(--text-dim); margin-bottom:22px; line-height:1.7}
.prose p strong{color:var(--text)}
.prose ul{margin:0 0 24px 0; padding-left:22px}
.prose li{font-size:17px; color:var(--text-dim); margin-bottom:10px}
.prose blockquote{border-left:3px solid var(--amber); padding:6px 0 6px 24px; margin:30px 0; font-size:20px; font-family:"Bricolage Grotesque",sans-serif; color:var(--text)}
/* links inside page content stand out with the brand amber and an underline */
.prose a{color:var(--amber-deep); text-decoration:underline; text-underline-offset:2px; transition:color .2s}
.prose a:hover{color:var(--amber)}
[data-theme="dark"] .prose a{color:var(--amber-2)}

/* ---------- VALUES ---------- */
.values{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden}
.value{background:var(--surface); padding:40px 36px}
.value .vi{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--amber-deep); letter-spacing:.1em; margin-bottom:14px}
.value h3{font-size:24px; margin-bottom:10px}
.value p{font-size:15px; color:var(--text-dim)}

/* ---------- TEAM ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.leader .ph{aspect-ratio:1/1; border-radius:16px; background:linear-gradient(150deg,var(--teal-900),var(--ink)); border:1px solid var(--border); display:grid; place-items:center; margin-bottom:16px}
.leader .ph span{font-family:"Bricolage Grotesque",sans-serif; font-size:34px; font-weight:700; color:var(--on-ink-strong); opacity:.5}
.leader h4{font-size:18px; margin-bottom:3px}
.leader p{font-size:13.5px; color:var(--text-mute); font-family:"JetBrains Mono",monospace; letter-spacing:.03em}

/* ---------- CAREERS ---------- */
.role{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:30px 32px; border:1px solid var(--border); border-radius:16px; background:var(--surface); margin-bottom:16px; transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.role:hover{transform:translateY(-3px); box-shadow:0 24px 50px -34px rgba(14,17,36,.3)}
.role .rmeta{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--text-mute); margin-bottom:8px; text-transform:uppercase}
.role h3{font-size:22px}
.role h3 a{color:inherit; transition:color .2s} .role h3 a:hover{color:var(--amber-deep)}
.role p{font-size:14.5px; color:var(--text-dim); margin-top:6px; max-width:560px}

/* ---------- CONTACT / FORM ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute)}
.field input,.field textarea,.field select{font-family:"Hanken Grotesk",sans-serif; font-size:15px; padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--amber)}
.field textarea{resize:vertical; min-height:130px}
.contact-info .ci{margin-bottom:30px}
.contact-info .ci .l{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px}
.contact-info .ci a,.contact-info .ci p{font-size:18px; color:var(--text)}
.contact-info .ci a:hover{color:var(--amber-deep)}

/* ---------- CTA ---------- */
.cta{background:var(--feat-cta); text-align:center; transition:background .5s var(--ease)} .cta.sec{padding:var(--sec-y) 0}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 90% at 50% 120%,rgba(232,116,59,.3),transparent 60%)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(38px,6vw,76px); font-weight:700; letter-spacing:-.035em; max-width:900px; margin:18px auto 0}
.cta p{font-size:18px; color:var(--on-ink); max-width:540px; margin:24px auto 38px}
.cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- FOOTER ---------- */
.footer{background:var(--feat-foot); color:var(--on-ink); padding:calc(var(--sec-y) * .66) 0 32px; transition:background .5s var(--ease)}
.foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--on-ink-line)}
.foot-brand .wordmark{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:24px; color:var(--on-ink-strong); letter-spacing:.04em}
.foot-brand p{font-size:14px; max-width:280px; margin-top:16px}
.foot-col .foot-h{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; line-height:1.3; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,242,233,.6); margin-bottom:18px}
.foot-col a,.foot-col p{display:block; font-size:14.5px; color:var(--on-ink); margin-bottom:11px; transition:color .2s}
.foot-col a:hover{color:var(--amber-2)}
/* labelled contact emails (General / Media) in the footer */
.foot-col .foot-eitem{margin-bottom:12px}
.foot-col .foot-eitem a{margin-bottom:0}
.foot-col .foot-elabel{display:block; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(246,242,233,.6); margin-bottom:1px}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:14px}
.foot-bottom .mono{font-size:12.5px; color:rgba(246,242,233,.62)}
.foot-social{display:flex; gap:24px}
.foot-social a{font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.08em; color:var(--on-ink)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  /* tablet step of the spacing standard */
  :root{--gutter:30px; --sec-y:80px; --hero-top:140px}
  .hero-grid{grid-template-columns:1fr; gap:36px} .lattice-card{max-width:440px}
  .stat-strip{grid-template-columns:1fr 1fr} .stat-strip .cell{border-bottom:1px solid var(--border-soft)} .stat-strip .cell:nth-child(2n){border-right:none}
  .viz-grid,.mkt-grid,.news-grid,.values,.contact-grid{grid-template-columns:1fr}
  .attrs,.process{grid-template-columns:1fr 1fr} .trac-grid,.team-grid{grid-template-columns:1fr 1fr; gap:30px}
  .feature-block{grid-template-columns:1fr; gap:30px} .feature-block.flip .fb-visual{order:0}
  .foot-top{grid-template-columns:1fr 1fr; gap:32px}
}
@media(max-width:680px){
  .nav-links{display:none} .burger{display:flex}
  .stat-strip,.attrs,.process,.trac-grid,.team-grid,.form-grid{grid-template-columns:1fr}
  .stat-strip .cell{border-right:none} .nrow{grid-template-columns:1fr; gap:8px} .nrow .arrow{display:none}
  .role{grid-template-columns:1fr; gap:18px}
}

/* ============================================================
   CREATIVE LAYER, atmosphere, motion, real logo, feeling
   ============================================================ */

/* film grain over everything */
body::after{content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* organic gradient mesh */
.mesh{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; will-change:transform}
.blob.a{width:46vw; height:46vw; left:-8vw; top:-14vw; background:radial-gradient(circle,var(--amber),transparent 65%); animation:drift1 18s ease-in-out infinite}
.blob.b{width:42vw; height:42vw; right:-10vw; top:6vw; background:radial-gradient(circle,var(--amber-2),transparent 62%); opacity:.4; animation:drift2 22s ease-in-out infinite}
.blob.c{width:40vw; height:40vw; right:10vw; bottom:-16vw; background:radial-gradient(circle,var(--teal),transparent 60%); opacity:.32; animation:drift3 26s ease-in-out infinite}
.blob.d{width:30vw; height:30vw; left:18vw; bottom:-10vw; background:radial-gradient(circle,var(--sage),transparent 62%); opacity:.3; animation:drift1 30s ease-in-out infinite reverse}
[data-theme="dark"] .blob.a{background:radial-gradient(circle,rgba(232,116,59,.7),transparent 62%); opacity:.32}
[data-theme="dark"] .blob.b{background:radial-gradient(circle,rgba(242,163,94,.55),transparent 62%); opacity:.22}
[data-theme="dark"] .blob.c{background:radial-gradient(circle,rgba(70,199,184,.6),transparent 60%); opacity:.3}
[data-theme="dark"] .blob.d{background:radial-gradient(circle,rgba(120,135,80,.6),transparent 62%); opacity:.26}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,4vw) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,5vw) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,-6vw) scale(1.15)}}

/* ---- REAL LOGO (themeable, shows the whole image at its natural aspect) ---- */
.logo-x{position:relative; height:40px; flex:none; display:inline-flex; align-items:center}
.logo-x img{display:block; height:40px; width:auto; max-width:160px; object-fit:contain}
.logo-x .x-white{display:none}
[data-theme="dark"] .logo-x .x-color{display:none}
[data-theme="dark"] .logo-x .x-white{display:block}
.footer .logo-x{height:44px}
.footer .logo-x img{height:44px}
.footer .logo-x .x-color{display:none}
.footer .logo-x .x-white{display:block}

/* ---- CINEMATIC HERO ---- */
.hero-cine{position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden; padding:var(--hero-top) 0 calc(var(--sec-y) * .9)}
.hero-cine #field{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.9}
.hero-cine .mesh{z-index:0}
.hero-cine::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,var(--bg) 14%,rgba(0,0,0,0) 64%)}
.hero-cine .wrap{position:relative; z-index:3; width:100%}
.hero-inner{max-width:900px}
.hero-cine h1{font-size:clamp(38px,5.6vw,74px); font-weight:800; letter-spacing:-.035em; line-height:1.02; text-wrap:balance}
.hero-cine h1 .ln{display:block; opacity:0; transform:translateY(22px); animation:rise 1s var(--ease) forwards}
.hero-cine h1 .ln:nth-child(2){animation-delay:.14s}
@keyframes rise{to{opacity:1; transform:none}}
.hero-cine .lede{max-width:560px}
.hero-cine .kicker-line{display:flex; align-items:center; gap:14px; margin-bottom:8px}

/* rotating "powered by nature" badge */
.hero-badge{position:absolute; top:120px; right:4vw; z-index:3; width:128px; height:128px; pointer-events:none}
.hero-badge .spin{animation:spin 26s linear infinite; transform-origin:50% 50%}
.hero-badge text{font-family:"JetBrains Mono",monospace; font-size:9.1px; fill:var(--text); text-transform:uppercase}
.hero-badge .core{fill:var(--amber)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.hero-badge{display:none}}

/* scroll cue */
.scrollcue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.2em; color:var(--text-mute)}
.scrollcue .ln{width:1px; height:38px; background:linear-gradient(var(--text-mute),transparent); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5); opacity:.4; transform-origin:top}50%{transform:scaleY(1); opacity:1; transform-origin:top}}

/* energy glow on primary button */
.btn-primary{box-shadow:0 10px 30px -14px rgba(232,116,59,.5)}
.btn-primary:hover{box-shadow:0 16px 40px -12px rgba(232,116,59,.7)}

/* ---- MARQUEE ---- */
.marquee{overflow:hidden; padding:24px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg)}
.marquee-track{display:inline-flex; align-items:center; gap:34px; white-space:nowrap; animation:marq 34s linear infinite; will-change:transform}
.marquee-track span{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(20px,2.8vw,32px); letter-spacing:-.01em; color:transparent; -webkit-text-stroke:1px var(--text-mute)}
.marquee-track span.fill{color:var(--amber-deep); -webkit-text-stroke:0}
.marquee-track .dot{width:9px; height:9px; border-radius:50%; background:var(--teal); -webkit-text-stroke:0}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- BRAND INTERLUDE (always warm) ---- */
.interlude{position:relative; overflow:hidden; padding:var(--sec-y) 0; background:linear-gradient(135deg,#F8ECDB 0%,#F4DDC4 42%,#EFE7D4 100%); color:#1b1430}
.interlude .mesh{opacity:.9}
.interlude .blob.t1{width:40vw;height:40vw;left:-6vw;bottom:-16vw;background:radial-gradient(circle,rgba(232,116,59,.4),transparent 62%);filter:blur(70px);position:absolute;border-radius:50%;animation:drift2 24s ease-in-out infinite}
.interlude .wrap{position:relative; z-index:2}
.interlude-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center}
.interlude .ey{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#b5531f; display:inline-flex; gap:10px; align-items:center}
.interlude .ey::before{content:"";width:22px;height:1px;background:#b5531f}
.interlude .statement{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(30px,4.4vw,58px); line-height:1.03; letter-spacing:-.025em; margin:20px 0 0; color:#1b1430}
.interlude .statement em{font-style:normal; background:linear-gradient(105deg,#26295D,#2A5E5F 55%,#6f7536); -webkit-background-clip:text; background-clip:text; color:transparent}
.interlude p{font-size:17px; color:#4a3f52; margin-top:22px; max-width:520px}
.interlude .logo-feature{display:flex; justify-content:center}
.interlude .logo-feature img{width:min(300px,62vw); height:auto; filter:drop-shadow(0 30px 50px rgba(40,30,60,.18))}
@media(max-width:900px){.interlude-grid{grid-template-columns:1fr; gap:40px} .interlude .logo-feature{order:-1}}

/* page-hero gets atmosphere too */
.page-hero .mesh{z-index:0; opacity:.85}
.page-hero .wrap{position:relative; z-index:2}
/* Technology / Careers hero: living cathode lattice as an animated background */
.page-hero.has-field{overflow:hidden}
.page-hero .field{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.85}
.page-hero.has-field::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,var(--bg) 22%,rgba(0,0,0,0) 72%)}
.page-hero.has-field h1{max-width:32ch; font-size:clamp(34px,4.2vw,58px); line-height:1.05}
.page-hero.has-field .lede{max-width:800px}
@media(max-width:640px){ .page-hero.has-field::after{background:linear-gradient(180deg,var(--bg) 55%,rgba(0,0,0,0) 100%)} }

@media(prefers-reduced-motion: reduce){
  .blob,.hero-badge .spin,.marquee-track,.scrollcue .ln,.interlude .blob.t1{animation:none !important}
  .hero-cine h1 .ln{opacity:1; transform:none; filter:none; animation:none}
}

/* ============================================================
   THEME LAYER, accessibility, forms, print. Additive only.
   ============================================================ */

/* skip link */
.skip-link{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--text); color:var(--bg); padding:12px 18px; border-radius:0 0 10px 0; font-weight:600}
.skip-link:focus{left:0}

/* visible focus for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.theme-tg:focus-visible,.burger:focus-visible{outline:2px solid var(--amber-deep); outline-offset:3px; border-radius:6px}
[data-theme="dark"] a:focus-visible,[data-theme="dark"] button:focus-visible{outline-color:var(--amber-2)}

/* active nav also reflects aria-current */
.nav-links a[aria-current="page"]{opacity:1; color:var(--amber-deep)}

/* screen reader only */
.screen-reader-text{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* burger as a real button */
button.burger{background:transparent; border:none; padding:4px}

/* mobile menu body lock */
body.psvx-menu-open{overflow:hidden}

/* contact form states */
.psvx-form-intro{font-size:16px; color:var(--text-dim); margin-bottom:24px}
.psvx-error{display:block; font-size:13px; color:var(--amber-deep); margin-top:6px; font-family:"JetBrains Mono",monospace}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--amber-deep)}
.psvx-form-error{border:1px solid var(--amber-deep); border-left-width:3px; border-radius:10px; padding:14px 16px; margin-bottom:24px; color:var(--amber-deep); font-size:14.5px; background:rgba(232,116,59,.06)}
.psvx-form-success{border:1px solid var(--border); border-left:3px solid var(--teal); border-radius:14px; padding:30px 32px; background:var(--surface); font-size:18px; color:var(--text); font-family:"Bricolage Grotesque",sans-serif}

/* newsroom calm empty state */
.news-empty{border-top:1px solid var(--border); padding:60px 0; text-align:center; color:var(--text-mute); font-family:"JetBrains Mono",monospace; letter-spacing:.06em}

/* print: readable, no atmosphere */
@media print{
  .nav,.hero-badge,.scrollcue,.marquee,.mesh,#field,.skip-link,.theme-tg,.burger,.cta-btns,.foot-social{display:none!important}
  body::after{display:none!important}
  body{background:#fff; color:#000}
  .dark-sec,.stakes,.cta,.footer,.interlude{background:#fff!important; color:#000!important}
  .dark-sec h1,.dark-sec h2,.dark-sec h3,.dark-sec h4,.cta h2,.footer *{color:#000!important}
  a{color:#000; text-decoration:underline}
  .sec,.stakes.sec,.cta.sec{padding:24px 0}
}

/* ============================================================
   POST LAUNCH REFINEMENTS
   ============================================================ */

/* logo: tighten the wordmark to the mark */
.brand{gap:6px}
.brand .wordmark{margin-left:-1px}

/* the in-menu CTA and the mobile panel are hidden on desktop */
.nav-cta-mobile{display:none}
.nav-panel{display:none}

/* back to top button, icon only rounded square */
.to-top{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border-radius:14px; border:none; cursor:pointer; background:var(--amber); color:#1a0e06; box-shadow:0 12px 30px -12px rgba(232,116,59,.6); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s,color .25s,box-shadow .25s}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--amber-deep); color:#fff; transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(232,116,59,.7)}
.to-top svg{width:18px; height:18px; transition:transform .25s var(--ease)}
.to-top:hover svg{transform:translateY(-3px)}
@media print{.to-top{display:none}}

/* footer legal links sit with the copyright line */
.foot-bottom .mono a{color:rgba(246,242,233,.62); transition:color .2s}
.foot-bottom .mono a:hover{color:var(--amber-2)}

/* burger morphs into an X when the menu is open */
.burger span{transition:transform .3s var(--ease),opacity .2s}
body.psvx-menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.psvx-menu-open .burger span:nth-child(2){opacity:0}
body.psvx-menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* keep the heavy blurred mesh from over-painting on first frame */
.mesh{contain:paint}

@media(max-width:680px){
  /* mobile step of the spacing standard */
  :root{--gutter:20px; --sec-y:60px; --hero-top:116px}
  .nav{padding-top:14px; padding-bottom:14px}
  .viz-card{padding:26px 22px}
  .mkt{padding:26px 22px; min-height:0}
  .pillar{padding:28px 22px}
  .ncard{padding:26px 22px; min-height:0}
  .role{padding:24px 22px}
  .value{padding:30px 24px}

  /* footer: brand and contact full width, the two menus as even side-by-side columns */
  .foot-top{grid-template-columns:1fr 1fr; gap:30px 24px}
  .foot-brand,.foot-contact{grid-column:1 / -1}

  /* desktop menu hidden, full screen overlay panel with the CTA inside */
  .nav-cta-desktop{display:none}
  .nav-links{display:none}
  .burger{display:flex; position:relative; z-index:101; margin-right:-4px}
  .nav-panel{
    display:flex; position:fixed; inset:0; z-index:95;
    flex-direction:column; align-items:center; justify-content:center; gap:24px;
    background:#F6F2E9; background:var(--bg); padding:90px 24px 48px;
    visibility:hidden; transform:translateX(100%); transition:transform .35s var(--ease);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  [data-theme="dark"] .nav-panel{background:#070912; background:var(--bg)}
  /* keep the panel promoted to its own GPU layer when open, so its background
     always paints over the scrolled nav's blur layer (mobile compositing fix) */
  body.psvx-menu-open .nav-panel{visibility:visible; transform:translateZ(0)}
  /* when the overlay is open, give the bar a solid opaque background and drop
     the blur, so nothing behind it can ever show through */
  body.psvx-menu-open .nav,
  body.psvx-menu-open .nav.scrolled{background:#F6F2E9; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent}
  [data-theme="dark"] body.psvx-menu-open .nav,
  [data-theme="dark"] body.psvx-menu-open .nav.scrolled{background:#070912}
  .nav-panel a:not(.nav-cta-mobile){font-family:"Bricolage Grotesque",sans-serif; font-size:27px; font-weight:700; opacity:1; letter-spacing:-.01em; color:var(--text)}
  .nav-panel a:not(.nav-cta-mobile).active{color:var(--amber-deep)}
  .nav-panel a.nav-cta-mobile{display:inline-flex; margin-top:14px; font-size:16px; padding:14px 30px; border-radius:100px; font-family:"Hanken Grotesk",sans-serif; font-weight:600; background:var(--text); color:var(--bg)}
  .nav-panel a.nav-cta-mobile:hover{background:var(--amber-deep); color:#fff}

  /* lighten the atmosphere on mobile so the first paint is crisp, not hazy */
  body::after{display:none}
  .blob{filter:blur(34px)}
  .blob.a{opacity:.3} .blob.b{opacity:.24} .blob.c{opacity:.2} .blob.d{opacity:.18}
  .to-top{right:16px; bottom:16px}
}

/* ============================================================
   v1.2, consent, hover motion, logo marquee, themed interlude
   ============================================================ */

/* cookie consent banner */
.svx-cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -12px 40px -22px rgba(0,0,0,.45); transform:translateY(100%); transition:transform .4s var(--ease); padding:16px 0}
.svx-cookie-banner.show{transform:none}
.svx-cookie-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap}
.svx-cookie-msg{font-size:14px; color:var(--text-dim); max-width:700px; margin:0; line-height:1.5}
.svx-cookie-msg a{color:var(--amber-deep); text-decoration:underline}
.svx-cookie-actions{display:flex; gap:12px; flex-shrink:0}
.svx-cookie-actions .btn{padding:11px 22px; font-size:14px}
@media(max-width:680px){ .svx-cookie-actions{width:100%} .svx-cookie-actions .btn{flex:1; justify-content:center} }

/* slim cookie notice (visitors outside the EU/EEA/UK: analytics already runs, this only discloses it) */
.svx-cookie-slim{position:fixed; left:22px; bottom:22px; z-index:200; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 20px 44px -20px rgba(0,0,0,.35); padding:14px 16px; display:flex; align-items:center; gap:12px; opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease)}
.svx-cookie-slim.show{opacity:1; transform:none}
.svx-cookie-slim-msg{font-size:12.5px; line-height:1.45; color:var(--text-dim); flex:1; min-width:0}
.svx-cookie-slim-manage{background:none; border:none; padding:0; font-size:12.5px; font-weight:600; color:var(--amber-deep); text-decoration:underline; cursor:pointer; flex-shrink:0; font-family:inherit; white-space:nowrap; min-width:0}
.svx-cookie-slim-manage:hover{color:var(--amber)}
.svx-cookie-slim-x{background:none; border:none; padding:2px; margin:0; width:20px; height:20px; flex-shrink:0; display:grid; place-items:center; color:var(--text-mute); cursor:pointer; border-radius:50%; transition:color .2s, background .2s}
.svx-cookie-slim-x:hover{color:var(--text); background:var(--bg-alt)}
@media(max-width:680px){
  .svx-cookie-slim{left:16px; right:16px; bottom:16px; max-width:none; flex-wrap:wrap}
  .svx-cookie-slim-msg{flex:1 1 100%}
  .svx-cookie-slim-manage{margin-right:auto}
}
@media print{ .svx-cookie-slim{display:none} }
@media print{ .svx-cookie-banner{display:none} }

/* hover motion for elements that lacked it */
.pstep{transition:background .3s var(--ease)}
.pstep:hover{background:var(--bg-alt)}
.value{transition:background .3s var(--ease)}
.value:hover{background:var(--bg-alt)}
.attr{transition:background .25s var(--ease)}
.leader .ph{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.leader{transition:transform .35s var(--ease)}
.leader:hover{transform:translateY(-4px)}
.leader:hover .ph{box-shadow:0 22px 44px -24px rgba(14,17,36,.5)}
.trac{transition:transform .35s var(--ease)}
.trac:hover{transform:translateY(-4px)}
.trac:hover .num{color:var(--amber)}
.trac .num{transition:color .3s}
.viz-card{transition:transform .35s var(--ease),border-color .3s var(--ease),background .3s}
.viz-card:hover{transform:translateY(-3px); border-color:var(--amber-2)}
.fb-list li{transition:color .25s}
.fb-list li:hover{color:var(--amber-deep)}
.fb-visual{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.feature-block:hover .fb-visual{transform:translateY(-5px); box-shadow:0 40px 70px -42px rgba(14,17,36,.6)}
.stat-strip .cell{transition:background .3s}
.stat-strip .cell:hover{background:var(--bg-alt)}
.contact-info .ci a{transition:color .2s,transform .2s}
.ncard,.role,.pillar,.mkt{will-change:auto}
@media(prefers-reduced-motion:reduce){
  .pstep,.value,.leader,.trac,.viz-card,.fb-list li,.fb-visual,.stat-strip .cell{transition:none}
  .leader:hover,.trac:hover,.viz-card:hover,.feature-block:hover .fb-visual{transform:none}
}

/* logo marquee (Company page) */
.logo-mq-sec{overflow:hidden}
.logo-marquee{overflow:hidden; margin-top:8px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-marquee-track{display:inline-flex; align-items:center; gap:44px; white-space:nowrap; animation:marq 40s linear infinite; will-change:transform}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused}
.logo-marquee-track span{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:19px; color:var(--logo); transition:color .25s}
.logo-marquee-track .lm-dot{width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none}
@media(prefers-reduced-motion:reduce){
  .logo-marquee-track{animation:none; flex-wrap:wrap; white-space:normal; justify-content:center; gap:18px 40px}
  .logo-marquee{-webkit-mask-image:none; mask-image:none}
}

/* interlude: uploadable image, light/dark swap, and a real dark mode */
.interlude .logo-feature .if-dark{display:none}
[data-theme="dark"] .interlude .logo-feature .if-light{display:none}
[data-theme="dark"] .interlude .logo-feature .if-dark{display:block}
[data-theme="dark"] .interlude{background:linear-gradient(135deg,#0E2E30 0%,#0C1022 58%,#0A0D1A 100%); color:var(--on-ink-strong)}
[data-theme="dark"] .interlude .statement{color:var(--on-ink-strong)}
[data-theme="dark"] .interlude .statement em{background:linear-gradient(105deg,#6b6fc0,#46c7b8 55%,#aab06a); -webkit-background-clip:text; background-clip:text; color:transparent}
[data-theme="dark"] .interlude .ey{color:var(--amber-2)}
[data-theme="dark"] .interlude .ey::before{background:var(--amber-2)}
[data-theme="dark"] .interlude p{color:var(--on-ink)}
[data-theme="dark"] .interlude .blob.t1{background:radial-gradient(circle,rgba(232,116,59,.26),transparent 62%)}

/* ============================================================
   v1.3, belief crystal visual + newsroom infinite scroll
   ============================================================ */

/* animated cathode crystal lattice in the belief section */
.belief-viz{width:min(340px,74vw); height:auto; display:block; margin:0 auto; overflow:visible}
.interlude{--bv-line:rgba(27,20,48,.16); --bv-node:rgba(27,20,48,.5)}
[data-theme="dark"] .interlude{--bv-line:rgba(243,240,231,.2); --bv-node:rgba(243,240,231,.62)}
.bv-bonds line{stroke:var(--bv-line); stroke-width:1.4}
.bv-nodes circle{fill:var(--bv-node)}
.bv-nodes circle.hot{fill:var(--amber)}
.bv-ring{fill:none; stroke:var(--bv-line); stroke-width:1.2; stroke-dasharray:3 12}
.bv-ring-2{stroke-dasharray:2 16; opacity:.55}
.bv-electron{fill:var(--amber); filter:drop-shadow(0 0 6px rgba(232,116,59,.65))}
.bv-electron.alt{fill:var(--teal)}
[data-theme="dark"] .bv-electron.alt{fill:#5fd0c2}
.bv-ring,.bv-ring-2,.bv-rotate,.bv-orbit{transform-box:view-box; transform-origin:200px 200px}
.bv-ring{animation:bvspin 70s linear infinite}
.bv-ring-2{animation:bvspin 52s linear infinite reverse}
.bv-rotate{animation:bvspin 120s linear infinite}
.bv-orbit-1{animation:bvspin 9s linear infinite}
.bv-orbit-2{animation:bvspin 15s linear infinite reverse}
.bv-orbit-3{animation:bvspin 6s linear infinite}
.bv-nodes circle.hot{animation:bvpulse 3.2s ease-in-out infinite}
.bv-nodes circle.hot:nth-of-type(2){animation-delay:.5s}
.bv-nodes circle.hot:nth-of-type(3){animation-delay:1s}
.bv-nodes circle.hot:nth-of-type(4){animation-delay:1.5s}
@keyframes bvspin{to{transform:rotate(360deg)}}
@keyframes bvpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .bv-ring,.bv-ring-2,.bv-rotate,.bv-orbit,.bv-nodes circle.hot{animation:none}
}

/* newsroom load more */
.news-more{display:flex; justify-content:center; margin-top:46px}
.news-more .btn.is-loading{opacity:.55; pointer-events:none}

/* ============================================================
   v1.4, menu driven nav + footer rework
   ============================================================ */

/* footer copyright and legal line */
.foot-meta{display:flex; align-items:center; flex-wrap:wrap}
.foot-legal::before{content:"\00b7"; margin:0 8px; color:rgba(246,242,233,.62)}
.foot-brand .brand:hover{opacity:.85}

@media(max-width:680px){
  /* footer menus two per row */
  .foot-top{grid-template-columns:1fr 1fr; gap:30px 22px}
  .foot-brand{grid-column:1 / -1}
  .foot-contact{grid-column:1 / -1}
  /* copyright on its own line, legal links beneath */
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:12px}
  .foot-meta{flex-direction:column; align-items:flex-start; gap:7px}
  .foot-legal::before{display:none}
}

/* reCAPTCHA: hide the floating badge, show the notice in the footer instead */
.grecaptcha-badge{visibility:hidden}
.footer-recaptcha{text-align:left; margin:24px 0 0; font-size:11.5px; line-height:1.5; color:rgba(246,242,233,.62)}
.footer-recaptcha a{color:rgba(246,242,233,.78); text-decoration:underline}
.footer-recaptcha a:hover{color:var(--amber-2)}

/* scroll progress bar */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--amber-deep),var(--amber),var(--amber-2)); z-index:200; pointer-events:none; will-change:transform}
@media print{.scroll-progress{display:none}}

/* contact select: replace the native arrow with a clean themed chevron */
.field select{-webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%230E1124' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:16px 16px}
.field select::-ms-expand{display:none}
[data-theme="dark"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23F3F0E7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* contact form submit while sending */
.psvx-contact-form .btn.is-loading{opacity:.6; pointer-events:none}
.psvx-form-success{scroll-margin-top:100px}

/* partner logo images (optional, fall back to text names).
   Greyscale + multiply gives a uniform, muted logo wall and blends any
   white background in a supplied logo into the cream section; colour returns
   on hover. Dark mode inverts instead, so dark marks read light and any white
   background falls into the dark background. */
.logos .logo-img,.logo-marquee-track .logo-img{height:40px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(1); opacity:.72; mix-blend-mode:multiply; transition:filter .3s var(--ease), opacity .3s var(--ease)}
.logo-marquee-track .logo-img{flex:none}
.logos .logo-img:hover{filter:grayscale(0); opacity:1}
[data-theme="dark"] .logos .logo-img,[data-theme="dark"] .logo-marquee-track .logo-img{filter:grayscale(1) invert(1); opacity:.72; mix-blend-mode:normal}
[data-theme="dark"] .logos .logo-img:hover{opacity:1}
/* Partner name on hover, so a mark that is not obvious on its own can be read. */
.logos .logo-chip{position:relative; display:inline-flex; align-items:center; font-size:0; line-height:0}
.logos .logo-chip .logo-name{position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px); background:var(--text); color:var(--bg); font-family:"JetBrains Mono",monospace; font-weight:500; font-size:11px; line-height:1.3; letter-spacing:.04em; white-space:nowrap; padding:6px 10px; border-radius:6px; opacity:0; pointer-events:none; z-index:5; box-shadow:0 10px 24px -12px rgba(14,17,36,.55); transition:opacity .22s var(--ease), transform .22s var(--ease)}
.logos .logo-chip:hover .logo-name,.logos .logo-chip:focus-within .logo-name{opacity:1; transform:translate(-50%,0)}
.logo-marquee-track .logo-chip{flex:none; display:inline-flex; align-items:center}
.logo-marquee-track .logo-name{display:none}
@media(prefers-reduced-motion:reduce){.logos .logo-chip .logo-name{transition:none}}

/* ---------- Battery cost / carbon half-dials (Technology "Why the cathode") ---------- */
.dial-wrap-outer{position:relative}
.dial-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.dialwrap{background:rgba(246,242,233,.03); border:1px solid var(--on-ink-line); border-radius:22px; padding:26px 22px 22px; backdrop-filter:blur(4px); text-align:center}
.dial-title{display:inline-block; background:var(--teal-900); color:var(--on-ink-strong); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.02em; padding:7px 12px; border-radius:5px}
.dial-svg{margin:6px auto 0; max-width:330px; opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.dialwrap.in .dial-svg{opacity:1; transform:none}
.dial-svg svg{width:100%; height:auto; display:block; overflow:visible}
.arc-seg{fill:none; stroke-width:32; cursor:pointer; transition:stroke-width .25s var(--ease), opacity .25s var(--ease)}
.arc-seg.dimmed,.arc-svx.dimmed{opacity:.34}
.arc-seg.hot{stroke-width:38}
.arc-svx{fill:none; stroke:#FFC24B; stroke-width:32; cursor:pointer; filter:drop-shadow(0 0 6px rgba(255,194,75,.75))}
.d-big{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:40px; fill:var(--on-ink-strong)}
.d-sm{font-family:"Hanken Grotesk",sans-serif; font-size:12px; fill:var(--on-ink)}
.dl-cat{font-family:"Hanken Grotesk",sans-serif; font-size:11px; fill:var(--on-ink)}
.dl-num{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:15px; fill:var(--on-ink-strong)}
.dial-legend{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; margin-top:6px}
.dl-item{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--on-ink)}
.dl-sw{width:11px; height:11px; border-radius:3px; flex:none}
@media(max-width:760px){.dial-grid{grid-template-columns:1fr; gap:20px}}
@media(prefers-reduced-motion:reduce){.dial-svg{opacity:1; transform:none; transition:none}}