/* Sensverk site v3 (from site_v2.css). Tokens from Brandbook v1.0 (build_brandbook_v10.py). Accent only on V (logo) + funnel (SVG fill). */
@font-face{font-family:"Instrument Sans";font-weight:400 600;font-style:normal;font-display:swap;src:url(../fonts/InstrumentSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:400 600;font-style:normal;font-display:swap;src:url(../fonts/InstrumentSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-weight:400 600;font-style:normal;font-display:swap;src:url(../fonts/InstrumentSans-sym.woff2) format("woff2");unicode-range:U+2192,U+2264-2265}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexMono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/IBMPlexMono-400-sym.woff2) format("woff2");unicode-range:U+2192,U+2264-2265}

:root{
  --ink:#121417;--chalk:#F4F3EF;--graphite:#2A2E33;--steel:#62676F;--ash:#9AA1A8;--mist:#D9DBDC;--white:#FFFFFF;--paper:#F7F7F5;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --mono-s:13px;--m:16px;--gut:24px;--sp:clamp(72px,10vw,128px);--hdr:64px;
}
@media(min-width:640px){:root{--m:32px}}
@media(min-width:1024px){:root{--m:64px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);font-variant-numeric:tabular-nums;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 16px;z-index:20}
.skip:focus{left:8px}
.wrap{width:min(1200px,100% - 2*var(--m));margin-inline:auto}

h1,h2,h3{margin:0;font-weight:600}
h1{font-size:clamp(36px,4.6vw,56px);line-height:1.05;letter-spacing:-.015em}
h2{font-size:clamp(26px,3vw,38px);line-height:1.12;max-width:22em;letter-spacing:-.01em}
h3{font-size:19px;line-height:1.3}
p{margin:0 0 16px;max-width:66ch}
.lead{font-size:19px;line-height:1.5;max-width:60ch}
.small{font-size:15px;line-height:1.5}
.mono{font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.eyebrow{display:block;color:var(--steel);margin-bottom:16px}
.note{color:var(--steel);margin-top:32px;max-width:90ch}
.tbc{font-family:var(--mono);font-size:var(--mono-s);border:1px dashed var(--steel);padding:0 6px;white-space:nowrap}

/* buttons / links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--ink);color:var(--paper);font:500 16px/1 var(--sans);text-decoration:none;border-radius:4px}
.btn--sm{min-height:44px;padding:0 20px}
.btn--inv{background:var(--chalk);color:var(--ink)}
.btn--inv:focus-visible,.link--inv:focus-visible{outline-color:var(--chalk)}
.link{display:inline-flex;align-items:center;min-height:44px}

/* header: one row everywhere. Desktop (>=800 px): logo · nav · language dropdown · CTA. Below: logo · (CTA from 560 px) · menu button.
   Both disclosures are <details>: they open and close without JS; nav.js adds Esc, click-outside, arrow keys, scroll lock. */
.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--mist)}
.top__in{height:var(--hdr);display:flex;align-items:center;gap:24px}
.brand{display:block;margin-inline-end:auto;flex:none}
.brand img{height:24px;width:auto}
.top__cta{flex:none}
.nav{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:500;font-size:16px;white-space:nowrap}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.chev{display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
/* language dropdown: button = current code (Plex Mono) + chevron; list = endonym + code, current = Ink + underline mark */
.lang{position:relative;flex:none;margin-inline-start:-12px}
.lang__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:10px;color:var(--ink);border-radius:4px}
.lang__btn .mono{line-height:1}
.lang__btn:hover{background:var(--chalk)}
.lang[open] .chev{transform:translateY(2px) rotate(-135deg)}
.lang__list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:200px;margin:0;padding:6px 0;list-style:none;
  background:var(--paper);border:1px solid var(--mist);border-radius:4px;box-shadow:0 8px 24px rgba(18,20,23,.08)}
.lang__opt,.menu__opt{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-inline:16px;text-decoration:none;color:var(--ink)}
.lang__opt .mono,.menu__opt .mono{color:var(--steel)}
.lang__opt:hover,.lang__opt:focus-visible{background:var(--chalk)}
.lang__opt:focus-visible{outline-offset:-2px}
.lang__opt[aria-current],.menu__opt[aria-current]{font-weight:600}
.lang__opt[aria-current] .mono,.menu__opt[aria-current] .mono{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* mobile menu */
.menu{display:none}
.menu__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-inline-end:-10px;color:var(--ink);border-radius:4px}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;background:currentColor;border-radius:1px}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;inset-inline-start:0}
.burger::before{top:-6px}.burger::after{top:6px}
.menu[open] .burger{background:transparent}
.menu[open] .burger::before{top:0;transform:rotate(45deg)}
.menu[open] .burger::after{top:0;transform:rotate(-45deg)}
.menu__panel{position:absolute;inset-inline:0;top:calc(100% + 1px);height:calc(100vh - var(--hdr) - 1px);height:calc(100dvh - var(--hdr) - 1px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);padding-block:8px 24px}
.menu__nav{display:flex;flex-direction:column}
.menu__a{display:flex;align-items:center;min-height:52px;text-decoration:none;font-weight:500;font-size:19px;border-bottom:1px solid var(--mist)}
.menu__a[aria-current]{border-inline-start:3px solid var(--ink);padding-inline-start:12px}
.menu__h{margin:24px 0 4px;color:var(--steel)}
.menu__lang{margin:0;padding:0;list-style:none}
.menu__opt{padding-inline:0}
.menu__cta{margin:24px 0 0}
.menu__cta .btn{width:100%}
@media(prefers-reduced-motion:no-preference){
  .burger,.burger::before,.burger::after{transition:transform .2s ease,top .2s ease,background-color .2s ease}
  .chev{transition:transform .15s ease}
  .lang[open] .lang__list,.menu[open] .menu__panel{animation:dd-in .16s ease-out}
  @keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}}
/* one-row desktop header fits from 800 px with the longest strings (DE); below it the menu button takes over */
@media(max-width:799px){
  .nav,.lang{display:none}
  .menu{display:block}
  .top__in{gap:16px}}
@media(max-width:559px){.top__cta{display:none}}
@media(min-width:560px){.menu__cta{display:none}}
html.menu-open{overflow:hidden}

/* sections */
section[id]{scroll-margin-top:var(--hdr)}
.steel{color:var(--steel)}
.sec{padding-block:calc(var(--sp)/2);border-top:1px solid var(--mist)}
.sec--first{border-top:0;padding-top:var(--sp)}
.sec h2+*{margin-top:32px}
.lead{margin-top:16px!important}

/* v3 hero: text left, the product (laptop + phone) right, bleeding toward the viewport edge; Brian via CTA + line */
.hero{padding-block:clamp(32px,5vw,72px) clamp(48px,7vw,96px)}
.hero__row{display:grid;gap:40px var(--gut);align-items:center}
.tag{margin:0 0 16px;font-size:20px;line-height:1.3;font-weight:600;color:var(--steel)}
.tag span{display:block}
.hero__txt h1{max-width:14em}
.hero__txt .lead{margin:24px 0 32px!important;font-size:19px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:0}
.hero{overflow:clip}
.hero__brian{display:flex;gap:12px;align-items:flex-start;margin-top:28px;max-width:31em}
.hero__brian img{width:48px;height:48px;border-radius:50%;flex:none}
.hero__brian p{margin:0;color:var(--graphite)}
.hero__by{display:block;margin-top:4px;color:var(--ink)}
.hero__media{margin-right:calc(-1*var(--m))}
.hero__media img{width:100%;height:auto}
@media(min-width:900px){.hero__row{grid-template-columns:repeat(12,1fr);--Lc:calc((100vw - min(1200px,100vw - 2*var(--m)))/2)}
  .hero__txt{grid-column:1/7}.hero__media{grid-column:7/13;margin-right:calc(-1*min(var(--Lc) - 16px,220px))}}
@media(max-width:719px){.hero__cta{display:grid;grid-template-columns:1fr;gap:12px}.hero__cta .btn{width:100%}}
.cap{margin:12px 0 0;max-width:none;color:var(--steel)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* why: world problem in numbers */
.tile{display:block;width:160px;background:var(--white);border:1px solid var(--mist);padding:8px}
.tile img{width:100%;aspect-ratio:1;object-fit:cover}
.sec h2+.why__row{margin-top:32px}
.why__note{margin:0;max-width:66ch}
.why__note .lead{margin-top:0!important}
.sign{margin:16px 0 0}
.sign--av{display:flex;align-items:center;gap:12px}
.sign--av img{width:48px;height:48px;border-radius:50%;flex:none}
.figs{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:40px var(--gut)}
@media(min-width:900px){.figs{grid-template-columns:repeat(3,1fr)}}
.fig{padding-block:2px}
.fig p{margin:0}
.fig__n{font-size:clamp(48px,6vw,64px);line-height:1.05;font-weight:600;letter-spacing:-.015em}
.fig__l{margin-top:12px!important;color:var(--steel);max-width:24em}
.src{margin:32px 0 0;color:var(--steel);max-width:none}

/* problems */
.pcards{list-style:none;margin:40px 0 24px;padding:0;display:grid;gap:40px var(--gut)}
@media(min-width:900px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard h3{margin-bottom:12px}
.pcard p{margin:0;color:var(--graphite)}

/* product: panel animation (pure CSS; geometry + keyframes generated from panel-frames.json), pillars, principles */
.pan{margin:48px auto 0;max-width:880px}
.pan__pp{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pan__stage{position:relative}
.pan__scr{position:absolute;background:var(--ink);overflow:hidden}
.pan__v,.pan__v img{position:absolute;inset:0;width:100%;height:100%}
.pan__v--1,.pan__v--2,.pan__v--3{opacity:0;animation:16s cubic-bezier(.45,0,.55,1) infinite both}
.pan__frame,.pan__frame img{position:absolute;inset:0;width:100%;height:100%}
.pan__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px;padding-inline:10%}
.pan__tabs{list-style:none;margin:0;padding:0;display:flex;gap:4px 20px;flex-wrap:wrap}
.pan__tabs li{border-top:2px solid var(--ink);padding-top:8px;opacity:.4;animation:16s cubic-bezier(.45,0,.55,1) infinite both}
.pan__pause{display:inline-flex;align-items:center;min-height:44px;margin-top:-6px;color:var(--steel);cursor:pointer;text-transform:none;letter-spacing:.02em}
.pan__on,.pan__off{display:inline-flex;align-items:center;gap:8px}
.pan__off,.pan__pp:checked~.pan__row .pan__on{display:none}
.pan__pp:checked~.pan__row .pan__off{display:inline-flex}
.ico--ctl{width:18px;height:18px}
.pan__pp:focus-visible~.pan__row .pan__pause{outline:2px solid var(--ink);outline-offset:2px}
.pan__pp:checked~.pan__stage .pan__v,.pan__pp:checked~.pan__row li,.pan:hover .pan__v,.pan:hover .pan__tabs li{animation-play-state:paused}
@media(max-width:519px){.pan__row{padding-inline:0}.pan__tabs{gap:4px 14px}}
@media(prefers-reduced-motion:reduce){.pan__v,.pan__tabs li{animation:none!important}.pan__v--1,.pan__v--2,.pan__v--3{display:none}
  .pan__tabs li:first-child{opacity:1}.pan__pause{display:none}}
.rules{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:var(--gut)}
@media(min-width:900px){.rules{grid-template-columns:repeat(3,1fr)}}
/* THE column-row component: one vertical 1px Ink rule on the left, 24px to the content. Every multi-column row uses it; no top rules on column rows. */
.rules li,.steps>li,.fig,.pcard,.pair__grid>.ch,.stat,.ask,.vr{border-left:1px solid var(--ink);padding-left:24px}
.rules .mono{display:block;color:var(--ink);margin-bottom:8px}
.rules p{margin:0;color:var(--graphite)}
.rules--pillars{margin-top:48px}
.rules--principles{margin-top:40px}
.rules--principles .mono{color:var(--steel)}
.prod__link{margin:40px 0 0}
.link--b{font-weight:600}

/* team */
.h2-s{font-size:19px;line-height:1.3;letter-spacing:0;max-width:none}
.team{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:32px var(--gut)}
@media(min-width:900px){.team{grid-template-columns:repeat(4,1fr)}}
.person .tile{width:120px;max-width:100%}
.person h3{margin:16px 0 4px;font-size:17px;font-weight:600}
.person .role{margin:0 0 8px;color:var(--steel);text-transform:none;letter-spacing:.02em;line-height:1.4}
.person .line{margin:0;color:var(--steel)}
.more{margin:24px 0 0}

/* contact: the only dark band */
.contact{background:var(--ink);color:var(--chalk);padding-top:40px;padding-bottom:var(--sp);overflow:hidden}
.contact__dev{position:relative;height:340px;margin-bottom:40px;--Lc:calc((100vw - min(1200px,100vw - 2*var(--m)))/2)}
/* device SVG runs on 1600 px (desktop) / 400 px (mobile) past the old frame edge and has 8 units of headroom: full-bleed */
.dev{position:absolute;top:-16px;max-width:none;width:3214px;height:356px;left:calc(100vw - var(--Lc) - 3185px)}
.dev-live{display:none}
.contact__dev.is-live .dev-live{display:block;position:absolute;left:0;top:-16px;height:356px;width:calc(100vw - var(--Lc) + 29px)}
.contact__dev.is-live picture{display:none}
@media(max-width:719px){.contact__dev{height:272px}.dev{top:-12.8px;width:1115.2px;height:284.8px;left:calc(100vw - var(--m) - 1092px)}.dev-live{display:none!important}.contact__dev.is-live picture{display:inline}}
.contact__in{display:grid;gap:32px var(--gut);align-items:start}
@media(min-width:900px){.contact__in{grid-template-columns:repeat(12,1fr)}.contact__who{grid-column:1/4}.contact__txt{grid-column:4/11}}
.contact__who img{width:120px;height:120px;border-radius:50%}
.contact h2{max-width:none}
.contact .lead{color:var(--chalk);margin-top:24px!important}
.contact .sign{margin-top:16px}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px 16px;margin:32px 0 0}
.btn--out{background:transparent;color:var(--chalk);border:1.5px solid var(--chalk)}
.contact .addr{margin:16px 0 0;color:var(--ash);text-transform:none;letter-spacing:.02em;font-size:var(--mono-s)}
.contact .reply{margin:8px 0 0;color:var(--chalk)}
.contact a:focus-visible{outline-color:var(--chalk)}
@media(max-width:719px){.contact__btns .btn{width:100%}}

/* footer */
.foot{background:var(--paper);border-top:1px solid var(--mist);padding-top:40px}
.foot__top{display:grid;gap:24px var(--gut);padding-bottom:32px}
.foot__logo{height:18px;width:auto}
.foot__tag{margin:12px 0 0;color:var(--steel);font-weight:600}
.foot__tag span{display:block}
.foot__nav{display:flex;flex-direction:column}
.foot__nav a,.foot__bot a{color:var(--steel);display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.foot__bot{display:flex;justify-content:space-between;align-items:center;gap:0 24px;border-top:1px solid var(--mist)}
.foot__bot p{margin:0;color:var(--steel);max-width:none}
@media(min-width:720px){.foot__top{grid-template-columns:1fr auto}.foot__nav{flex-direction:row;gap:8px}.foot__nav a{padding:0 12px}.foot__nav a:last-child{padding-right:0}}

/* legal / 404 */
.legal h2{font-size:22px;margin:40px 0 12px}
.legal ol{padding-left:1.2em;max-width:66ch}
.h1--page{margin-bottom:16px}

/* v3 icons: inline SVG, currentColor; stroke-width = 2 x grid / rendered px keeps a constant 2 px optical line (spec: site/_proposals/icons) */
.ico{display:block;flex:none}
.pcard .ico{width:64px;height:64px;stroke-width:2;color:var(--steel);margin:0 0 20px}
.rules--pillars .ico{width:64px;height:64px;stroke-width:2;color:var(--ink);margin:4px 0 16px}
.rules .mono .ico,.step__rule .ico{width:28px;height:28px;stroke-width:1.7143;color:var(--steel)}
.rules .mono:has(.ico){display:flex;align-items:center;gap:10px}
@media(min-width:900px){
  .pcard .ico{width:80px;height:80px;stroke-width:1.6;margin-bottom:24px}
  .rules--pillars .ico{width:80px;height:80px;stroke-width:1.6;margin:8px 0 20px}
  .rules .mono .ico,.step__rule .ico{width:32px;height:32px;stroke-width:1.5}
  .rules .mono:has(.ico){gap:12px}}

/* charts: direction B (home) and /energy. Type + rules for the inlined SVGs live here because the CSP forbids inline <style>. */
.sv-ax{font:400 11px var(--mono);fill:var(--steel);letter-spacing:.02em}
.sv-ax--s{font-size:10px}
.sv-lab{font:400 13px var(--sans);fill:var(--ink)}
.sv-note{font:400 12px var(--sans);fill:var(--steel)}
.sv-val{font:600 15px var(--sans);fill:var(--ink)}
.sv-grid{stroke:var(--mist);stroke-width:1;shape-rendering:crispEdges}
.sv-base{stroke:var(--ash);stroke-width:1;shape-rendering:crispEdges}
.sv-grow{transform-box:fill-box;transform-origin:50% 100%}
.ch{margin:0;position:relative}
.ch svg{display:block;width:100%;height:auto;max-width:480px;overflow:visible}
.ch__t{font-size:19px;line-height:1.3;font-weight:600;margin:0 0 4px;max-width:28em}
.ch__s{margin:0 0 16px;color:var(--steel);font-size:15px}
.ch__src{margin:12px 0 0;color:var(--steel);font-size:13px;font-family:var(--mono);letter-spacing:.02em;max-width:none}
.pair{margin-top:56px}
.sr-only{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pair__grid{display:grid;gap:0 var(--gut);margin-top:24px}
.pair__grid>.ch{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start;position:relative}
.pair__grid>.ch+.ch{margin-top:40px}
@media(min-width:900px){.pair__grid{grid-template-columns:1fr 1fr}.pair__grid>.ch+.ch{margin-top:0}}
.pair h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2;max-width:24em}
/* chart micro-interactions (js/charts.js). Progressive enhancement: the at-rest CSS state IS the final chart; every hidden
   start state below exists only under .sv-armed, which the script adds (never under reduced motion, never without JS).
   Entrance = time-driven, once, on first view. Motion = transform / opacity / stroke-dashoffset only. No accent colour. */
.sv-chart{--ease:cubic-bezier(.25,1,.5,1);-webkit-tap-highlight-color:transparent}
.sv-chart.sv-live{touch-action:pan-y}
.sv-chart.sv-live:focus{outline:none}
.sv-chart.sv-live:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.sv-e-grow,.sv-e-growx,.sv-e-pop,.sv-e-line,.sv-pt{transform-box:fill-box}
.sv-e-grow{transform-origin:50% 100%}
.sv-e-growx{transform-origin:0 50%}
.sv-e-pop,.sv-pt{transform-origin:50% 50%}
.sv-e-line{transform-origin:0 100%}
.sv-armed .sv-e-grow{transform:scaleY(0)}
.sv-armed .sv-e-growx{transform:scaleX(0)}
.sv-armed .sv-e-fade,.sv-armed .sv-e-ride,.sv-armed .sv-e-ridex{opacity:0}
.sv-armed .sv-e-pop{opacity:0;transform:scale(0)}
.sv-armed .sv-e-line{transform:scale(0)}
.sv-armed .sv-e-draw,.sv-play .sv-e-draw{stroke-dasharray:1}
.sv-armed .sv-e-draw{stroke-dashoffset:1}
.sv-play .sv-e-grow{animation:sv-grow var(--t,600ms) var(--ease) var(--d,0ms) backwards}
.sv-play .sv-e-growx{animation:sv-growx var(--t,650ms) var(--ease) var(--d,0ms) backwards}
.sv-play .sv-e-fade{animation:sv-fade var(--t,300ms) ease-out var(--d,0ms) backwards}
.sv-play .sv-e-pop{animation:sv-pop var(--t,280ms) cubic-bezier(.34,1.4,.64,1) var(--d,0ms) backwards}
.sv-play .sv-e-line{animation:sv-grow2 var(--t,420ms) var(--ease) var(--d,0ms) backwards}
.sv-play .sv-e-draw{animation:sv-draw var(--t,900ms) linear var(--d,0ms) backwards}
.sv-play .sv-e-ride{animation:sv-ride var(--t,600ms) var(--ease) var(--d,0ms) backwards}
.sv-play .sv-e-ridex{animation:sv-ridex var(--t,650ms) var(--ease) var(--d,0ms) backwards}
@keyframes sv-grow{from{transform:scaleY(0)}}
@keyframes sv-growx{from{transform:scaleX(0)}}
@keyframes sv-grow2{from{transform:scale(0)}}
@keyframes sv-fade{from{opacity:0}}
@keyframes sv-pop{from{opacity:0;transform:scale(0)}}
@keyframes sv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sv-ride{from{opacity:0;transform:translateY(var(--rise,0px))}25%{opacity:1}}
@keyframes sv-ridex{from{opacity:0;transform:translateX(var(--rise,0px))}25%{opacity:1}}
/* explore: hover (mouse), tap / horizontal drag (touch), arrow keys (focus). Highlight = dim the other columns; points swell. */
.sv-bar,.sv-pt{transition:opacity .18s ease-out,transform .18s var(--ease)}
.sv-hl .sv-bar:not(.is-hl){opacity:.32}
.sv-pt.is-hl{transform:scale(1.5)}
.sv-ghost{opacity:0;transition:opacity .25s ease-out;pointer-events:none}
.sv-ghost.is-hl{opacity:.12}
.sv-xh{stroke:var(--ash);stroke-width:1;stroke-dasharray:2 3;opacity:0;pointer-events:none;transition:opacity .15s ease-out,transform .14s var(--ease)}
.sv-xh.is-on{opacity:1}
.sv-xh.is-jump{transition:opacity .15s ease-out}
.sv-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;margin:0;padding:7px 10px 8px;background:var(--ink);color:var(--paper);
  font:400 12px/1.45 var(--mono);letter-spacing:.02em;border-radius:3px;white-space:nowrap;opacity:0;
  transition:opacity .15s ease-out,transform .14s var(--ease)}
.sv-tip.is-on{opacity:1}
.sv-tip.is-jump{transition:opacity .15s ease-out}
.sv-tip b{display:block;font-weight:400;color:var(--ash)}
.sv-tip span{display:flex;justify-content:space-between;gap:16px}
.sv-tip i{font-style:normal}
@media(prefers-reduced-motion:reduce){
  .sv-chart *{animation:none!important}
  .sv-bar,.sv-pt,.sv-ghost,.sv-xh,.sv-tip{transition:none!important}}

/* subpages: intro, /energy stories, closing band, sources */
.intro{padding:clamp(48px,7vw,88px) 0 clamp(32px,4vw,48px)}
.intro h1{max-width:18em}
.intro .lead{margin-top:24px!important}
.h2-m{font-size:22px;line-height:1.25;letter-spacing:0;max-width:none}
.story{padding-block:56px;border-top:1px solid var(--mist)}
.story__grid{display:grid;gap:32px var(--gut);align-items:start}
@media(min-width:900px){.story__grid{grid-template-columns:repeat(12,1fr)}.story__txt{grid-column:1/6}.story__ch{grid-column:7/13}
  .story__grid--wide .story__txt{grid-column:1/13}.story__grid--wide .story__ch{grid-column:1/13}}
.story__grid>*,.two>*,.pair__grid>*{min-width:0}
.story__n{display:block;color:var(--steel);margin-bottom:12px}
.story__txt h2{font-size:clamp(24px,2.6vw,32px);max-width:32em}
.story__txt p{margin-top:16px}
.two{display:grid;gap:32px var(--gut)}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}.two .ch svg{max-width:520px}}
.est{margin-top:32px;border:1.5px dashed var(--steel);padding:20px 24px;background:var(--white)}
.est .mono{color:var(--steel);display:block;margin-bottom:8px}
.est__n{font-size:48px;line-height:1.05;font-weight:600;letter-spacing:-.015em;margin:0}
.est p{margin:8px 0 0;color:var(--graphite)}
.est .tbc,.srcs .tbc{white-space:normal}
.stat{margin-top:24px}
.stat .stat__n{font-size:32px;line-height:1.1;font-weight:600;margin:0}
.stat p+p{margin-top:4px;color:var(--steel)}
.cta{background:var(--ink);color:var(--chalk);padding:clamp(48px,6vw,64px) 0}
.cta h2{color:var(--chalk);max-width:none}
.cta .lead{color:var(--chalk);margin-top:16px!important}
.cta__btn{margin:32px 0 0}
.cta a:focus-visible{outline-color:var(--chalk)}
@media(max-width:719px){.cta__btn .btn{width:100%}}
.srcs{padding:48px 0 64px}
.srcs ol{padding-left:1.2em;margin:16px 0 0;max-width:90ch;font-size:15px;color:var(--steel)}
.srcs li{margin-bottom:8px}

/* /product */
.hero__media--in{margin-right:0}
.hero--sub .pan{margin:0}
.hero--sub .pan__v{position:absolute;inset:0;display:block}
.pan--static .cap{padding-inline:0}
.views{list-style:none;margin:48px 0 0;padding:0}
.vrow{display:grid;gap:24px var(--gut);align-items:start;padding-block:40px;border-top:1px solid var(--mist)}
.vrow:first-child{border-top:0;padding-top:0}
.vrow__n{display:block;color:var(--steel);margin-bottom:12px}
.vrow h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2;max-width:20em}
.vrow__text>p{margin-top:12px}
.pts{list-style:none;margin:16px 0 0;padding:0}
.pts li{border-top:1px solid var(--mist);padding:10px 0;color:var(--graphite);max-width:60ch}
.shot{margin:0}
.shot__frame{display:block;border:1px solid var(--mist);background:var(--ink)}
.shot img{width:100%;height:auto}
@media(min-width:900px){.vrow{grid-template-columns:repeat(12,1fr)}.vrow__text{grid-column:1/6}.shot{grid-column:6/13}.pan--view{grid-column:7/13;justify-self:end}
  .vrow:nth-child(even) .vrow__text{grid-column:8/13;grid-row:1}.vrow:nth-child(even) .shot,.vrow:nth-child(even) .pan--view{grid-column:1/7;grid-row:1;justify-self:start}}
.ask{margin-top:24px;max-width:66ch}
.ask .mono{display:block;margin-bottom:8px}
.ask p{margin:0}
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:var(--gut)}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step__n{display:block;color:var(--steel);margin-bottom:12px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--graphite)}
.steps .step__rule{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:var(--steel);text-transform:none;letter-spacing:.02em;max-width:none}
@media(min-width:900px){.steps .step__rule{gap:12px}}
.cols2{display:grid;gap:40px var(--gut);margin-top:32px}
@media(min-width:900px){.cols2{grid-template-columns:1fr 1fr}}
.cols2 h3{margin-bottom:8px}

/* /team */
.people{padding-bottom:var(--sp)}
.members{list-style:none;margin:0;padding:0}
.member{display:grid;gap:24px var(--gut);padding-block:40px;border-top:1px solid var(--mist);align-items:start}
.member .member__tile{width:200px}
.member .role{margin:8px 0 16px;color:var(--steel);text-transform:none;letter-spacing:.02em;line-height:1.4}
.member__line{margin:0 0 16px!important}
.member__q{margin:16px 0 0;font-weight:600}
.member__q .small{font-weight:400}
@media(min-width:900px){.member{grid-template-columns:repeat(12,1fr)}.member .member__tile{grid-column:1/4;width:100%;max-width:260px}.member__txt{grid-column:4/11}}

/* /contact */
.cpage{padding-bottom:var(--sp)}
.cpage__grid{display:grid;gap:32px var(--gut);align-items:start}
.cpage .member__tile{width:200px}
.cdl{margin:32px 0 24px}
.cdl>div{border-top:1px solid var(--mist);padding:16px 0;display:grid;gap:4px 24px;align-items:center}
.cdl dt{color:var(--steel)}
.cdl dd{margin:0}
.cdl a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
.cdl .tbc{white-space:normal}
.cpage .reply{color:var(--steel)}
@media(min-width:900px){.cpage__grid{grid-template-columns:repeat(12,1fr)}.cpage__who{grid-column:1/4}.cpage__who .member__tile{width:100%;max-width:260px}.cpage__txt{grid-column:4/12}
  .cdl>div{grid-template-columns:160px 1fr}}
@media(max-width:719px){.cpage .btn{width:100%}}

/* team: name row with LinkedIn icon link */
.member__hd{display:flex;align-items:center;gap:12px}
.member__hd .h2-m{margin:0}
.li{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-4px 0;color:var(--steel, #62676F);transition:color .15s}
.li:hover,.li:focus-visible{color:var(--ink, #111)}
.li__ico{width:20px;height:20px}
.pan--view{margin:0;max-width:540px;width:100%;align-self:center}
/* generated: device geometry */
/* generated: panel animation */
.pan__stage{aspect-ratio:880/575}
.pan__scr{left:9.978%;top:9.19%;width:80.044%;height:76.584%}
@keyframes pan1{0%,20.625%{opacity:0}25%,49.999%{opacity:1}50%,100%{opacity:0}}.pan__v--1{animation-name:pan1}
@keyframes pan2{0%,45.625%{opacity:0}50%,74.999%{opacity:1}75%,100%{opacity:0}}.pan__v--2{animation-name:pan2}
@keyframes pan3{0%,70.625%{opacity:0}75%,95.625%{opacity:1}100%{opacity:0}}.pan__v--3{animation-name:pan3}
@keyframes pant0{0%,20.625%{opacity:1}22.812%,95.625%{opacity:.4}100%{opacity:1}}.pan__tabs li:nth-child(1){animation-name:pant0}
@keyframes pant1{0%,20.625%{opacity:.4}22.812%,45.625%{opacity:1}47.812%,100%{opacity:.4}}.pan__tabs li:nth-child(2){animation-name:pant1}
@keyframes pant2{0%,45.625%{opacity:.4}47.812%,70.625%{opacity:1}72.812%,100%{opacity:.4}}.pan__tabs li:nth-child(3){animation-name:pant2}
@keyframes pant3{0%,70.625%{opacity:.4}72.812%,95.625%{opacity:1}97.812%,100%{opacity:.4}}.pan__tabs li:nth-child(4){animation-name:pant3}