/* ==========================================================================
Crostorion — Storion Energy d.o.o.
Brand: Electric Indigo #04564a · Black #010104 · White
Type: Campora (display) · Figtree (text)
Built static. Content follows Spec 1.3; visual identity follows the brandbook.
========================================================================== */
/* ---------- Fonts ---------- */
@font-face{font-family:'Campora';src:url('../fonts/Campora_ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Campora';src:url('../fonts/Campora_Classic_Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Campora';src:url('../fonts/Campora_Classic_Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Campora';src:url('../fonts/Campora_Classic_Thin.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
/* Figtree is a VARIABLE font: one file, weight axis 300-900. The five files
under fonts/ are byte-identical copies of it. Declaring it five times as
five static weights pinned every one of them to the file's own default
instance - Light 300 - so body copy rendered a step too light and every
600/700/800 was FAUX bold, smeared by the browser. One face with a weight
RANGE gives the real axis, and downloads one file instead of five. */
@font-face{font-family:'Figtree';src:url('../fonts/figtree-400.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
/* ---------- Tokens ---------- */
:root{
/* Brand teal, deepened one step from the original #04564a */
--indigo:#04564a; --indigo-600:#034239; --indigo-700:#022e28; --indigo-300:#319884;
--indigo-100:#bcdcd3; --indigo-050:#e9f2ef;
--black:#040505; --ink:#070c0a; --ink-2:#0b120f; --ink-3:#111a16;
--paper:#f4f6f5; --paper-2:#eaefec; --white:#ffffff;
--line:#dfe6e3; --line-2:#cfd8d4; --line-dark:rgba(255,255,255,.13); --line-dark-2:rgba(255,255,255,.09);
--text:#0a110e; --muted:#4d5a54; --muted-2:#72807a; --muted-dark:rgba(255,255,255,.66); --muted-dark-2:rgba(255,255,255,.45);
--amber:#d59440; --signal:#c94c43; --ok:#1a7a57; --ok-100:#e2f2ea;
--font-display:'Campora','Figtree',system-ui,sans-serif;
--font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'SFMono-Regular',ui-monospace,'JetBrains Mono','Menlo',monospace;
--max:1240px; --gut:clamp(20px,5vw,64px);
--r:14px; --r-sm:9px; --r-lg:22px;
--sh:0 1px 2px rgba(4,16,12,.05),0 8px 24px rgba(4,16,12,.07);
--sh-lg:0 2px 6px rgba(4,16,12,.07),0 24px 60px rgba(4,16,12,.14);
--hdr:76px;
}
/* ---------- Reset ---------- */
*{box-sizing:border-box}
*,*::before,*::after{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{font-family:var(--font);color:var(--text);background:var(--white);font-size:17px;line-height:1.62;
font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:var(--indigo);text-decoration:none;transition:color .16s ease}
a:hover{color:var(--indigo-600)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
strong,b{font-weight:700}
:focus-visible{outline:2.5px solid var(--indigo-300);outline-offset:3px;border-radius:3px}
::selection{background:var(--indigo);color:#fff}
/* ---------- Type ---------- */
/* hyphens:auto reads the lang attribute on , which is set per request, so
German compounds ("Produktzertifizierungen") break where German allows rather
than pushing the headline past the right edge of a narrow screen. break-word
is the fallback for words no hyphenation dictionary covers. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.03;letter-spacing:-.02em;color:var(--text);overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2.55rem,6vw,4.6rem);letter-spacing:-.035em;line-height:.98}
h2{font-size:clamp(1.9rem,3.7vw,3.05rem);letter-spacing:-.03em}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.12}
h4{font-family:var(--font);font-weight:700;font-size:1.06rem;letter-spacing:-.005em;line-height:1.3}
p{margin-bottom:1rem;max-width:68ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.12rem,1.7vw,1.36rem);line-height:1.5;color:var(--muted);font-weight:400;max-width:60ch}
.mono{font-family:var(--mono)}
/* eyebrow label */
.eyebrow{font-family:var(--font);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--indigo);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--indigo);display:inline-block;flex:0 0 auto}
.eyebrow.plain::before{display:none}
section.dark .eyebrow,.dark .eyebrow{color:var(--indigo-300)}
section.dark .eyebrow::before,.dark .eyebrow::before{background:var(--indigo-300)}
/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
section{padding:clamp(56px,8vw,104px) 0;position:relative}
section.tight{padding:clamp(40px,5vw,64px) 0}
.dark,section.dark{background:var(--ink);color:#fff}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:var(--muted-dark)}
.dark .lead{color:var(--muted-dark)}
.black,section.black{background:var(--black);color:#fff}
.black h1,.black h2,.black h3{color:#fff}.black p,.black .lead{color:var(--muted-dark)}
.paper,section.paper{background:var(--paper)}
.sec-head{max-width:64ch;margin-bottom:clamp(30px,4vw,52px)}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head p{margin-top:14px}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}
/* grids */
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.rev .media{order:-1}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.98rem;letter-spacing:.005em;
padding:.82em 1.5em;border-radius:100px;transition:all .18s ease;white-space:nowrap;line-height:1;border:1.5px solid transparent}
.btn svg{width:1em;height:1em;transition:transform .2s ease}
.btn:hover svg.arr{transform:translateX(3px)}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-600);color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px rgba(4,86,74,.32)}
.btn-dark{background:var(--text);color:#fff}
.btn-dark:hover{background:#000;color:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:#fff}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);background:#fff}
.dark .btn-ghost,.black .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.dark .btn-ghost:hover,.black .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);color:#fff}
.btn-white{background:#fff;color:var(--text)}
.btn-white:hover{background:var(--indigo-050);color:var(--indigo-600);transform:translateY(-1px)}
.btn-lg{padding:1em 1.8em;font-size:1.02rem}
.link-arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:600;color:var(--indigo)}
.link-arrow svg{width:.85em;height:.85em;transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(3px)}
.dark .link-arrow{color:var(--indigo-300)}
/* ---------- Header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr);display:flex;align-items:center;
transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
.hdr .wrap-wide{display:flex;align-items:center;gap:28px;width:100%}
.hdr.solid{background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(14px);
-webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(4,16,12,.05)}
.hdr .logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.hdr .logo img.mark{width:34px;height:34px}
.hdr .logo .wm{height:19px;width:auto}
.brandtxt{font-family:var(--font-display);font-weight:800;font-size:1.28rem;letter-spacing:-.03em;line-height:1}
.brandtxt .sub{display:block;font-family:var(--font);font-weight:600;font-size:.52rem;letter-spacing:.42em;
color:var(--indigo);margin-top:3px}
/* on transparent(hero) header: white text */
.hdr:not(.solid) .brandtxt{color:#fff}
.hdr:not(.solid) .brandtxt .sub{color:rgba(255,255,255,.72)}
.hdr:not(.solid) .nav>li>a,.hdr:not(.solid) .nav>li>button{color:rgba(255,255,255,.9)}
.hdr:not(.solid) .nav>li>a:hover,.hdr:not(.solid) .nav>li>button:hover{color:#fff}
.hdr.solid .brandtxt{color:var(--text)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{position:relative;display:inline-flex;align-items:center;gap:.35em;padding:9px 13px;border-radius:8px;
font-family:var(--font);font-weight:600;font-size:.925rem;letter-spacing:-.008em;
color:var(--text);transition:color .15s,background .15s}
.nav>li>a:hover,.nav>li>button:hover{color:var(--indigo);background:rgba(4,86,74,.07)}
.hdr:not(.solid) .nav>li>a:hover,.hdr:not(.solid) .nav>li>button:hover{background:rgba(255,255,255,.12)}
.nav>li>a.active{color:var(--indigo)}
.nav .caret{width:9px;height:9px;opacity:.6;transition:transform .2s}
.nav>li:hover .caret,.nav>li:focus-within .caret{transform:rotate(180deg)}
.hdr-cta{margin-left:10px}
.hdr .req{flex:0 0 auto}
/* the quote button is part of the same header line, so it takes the same
size and tracking as the links beside it — only the weight goes up */
.hdr .btn{font-size:.925rem;font-weight:700;letter-spacing:-.008em;padding:.76em 1.35em}
/* dropdown */
.drop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);
background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);
min-width:290px;padding:10px;opacity:0;visibility:hidden;transition:all .2s ease;z-index:120}
.nav>li:hover .drop,.nav>li:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:11px 13px;border-radius:9px;color:var(--text)}
.drop a:hover{background:var(--indigo-050)}
.drop a b{display:block;font-weight:600;font-size:.95rem}
.drop a span{display:block;font-size:.82rem;color:var(--muted);margin-top:1px;line-height:1.35}
/* burger */
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:.25s;border-radius:2px}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.hdr:not(.solid) .burger{color:#fff}.hdr.solid .burger{color:var(--text)}
body.menu-open .burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
/* mobile menu */
.mobile{position:fixed;inset:0;z-index:95;background:var(--ink);color:#fff;padding:calc(var(--hdr) + 20px) var(--gut) 40px;
transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column;gap:4px}
body.menu-open .mobile{transform:translateX(0)}
body.menu-open{overflow:hidden}
.mobile a{color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.5rem;padding:12px 0;
border-bottom:1px solid var(--line-dark-2);letter-spacing:-.02em}
.mobile a.sub{font-family:var(--font);font-weight:500;font-size:1rem;color:var(--muted-dark);padding:9px 0 9px 16px;border:0}
.mobile .req{margin-top:22px}
/* CTA inside the mobile menu: restore button styling (\.mobile a overrides) */
.mobile a.btn{font-family:var(--font);font-weight:600;font-size:1rem;letter-spacing:.005em;
padding:.95em 1.6em;border-bottom:0;justify-content:center;display:inline-flex;align-self:flex-start}
/* while the menu is open, the header becomes an opaque ink bar so scrolled items hide behind it */
body.menu-open .hdr,body.menu-open .hdr.solid{background:var(--ink);border-bottom-color:rgba(255,255,255,.12);
box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-open .hdr .brandtxt{color:#fff}
body.menu-open .hdr .brandtxt .sub{color:var(--indigo-300)}
body.menu-open .burger{color:#fff}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(560px,88vh,860px);display:flex;align-items:flex-end;
color:#fff;overflow:hidden;background:var(--ink)}
.hero.compact{min-height:clamp(420px,58vh,560px)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(5,8,9,.62) 0%,rgba(5,8,9,.22) 34%,rgba(5,8,9,.38) 62%,rgba(5,8,9,.9) 100%)}
.hero .bg.tint::after{background:linear-gradient(180deg,rgba(2,30,25,.6),rgba(5,8,9,.35) 40%,rgba(5,8,9,.92))}
.hero .inner{position:relative;z-index:2;width:100%;padding-top:calc(var(--hdr) + 40px);padding-bottom:clamp(48px,7vw,88px)}
.hero h1{color:#fff;max-width:16ch}
.hero .sub{font-size:clamp(1.12rem,1.7vw,1.4rem);color:rgba(255,255,255,.82);max-width:52ch;margin-top:22px;font-weight:400}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .cta-row{margin-top:34px}
.hero .eyebrow{color:#fff}.hero .eyebrow::before{background:var(--indigo-300)}
.crumbs{display:flex;gap:.5em;align-items:center;font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:22px;flex-wrap:wrap}
.crumbs a{color:rgba(255,255,255,.82)}.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
/* ---------- Stat strip ---------- */
.stats{border-top:1px solid var(--line-dark)}
.stats .wrap-wide{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(28px,4vw,44px) clamp(18px,2.4vw,34px);border-right:1px solid var(--line-dark)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,3.4vw,2.9rem);letter-spacing:-.04em;
line-height:1;color:#fff}
.stat .n .u{font-size:.5em;color:var(--indigo-300);margin-left:.15em;letter-spacing:0}
.stat .d{margin-top:12px;font-size:.92rem;color:var(--muted-dark);line-height:1.4}
.stat .d b{color:#fff;font-weight:600}
/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--indigo-300)}
a.card{color:inherit;display:block}
.card .ic{width:46px;height:46px;border-radius:11px;background:var(--indigo-050);color:var(--indigo);
display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:23px;height:23px}
.card h3{margin-bottom:9px}
.card h4{margin-bottom:7px}
.card p{font-size:.95rem;color:var(--muted)}
.card .k{font-family:var(--mono);font-size:.78rem;color:var(--indigo);font-weight:600;letter-spacing:.04em}
.dark .card,.black .card{background:var(--ink-2);border-color:var(--line-dark)}
.card.photocard{border-color:rgba(255,255,255,.08);background:var(--ink-2)}
.photocard>.bgimg{position:absolute;inset:0;z-index:0;pointer-events:none}
.photocard>.bgimg img{width:100%;height:100%;object-fit:cover}
.photocard>.bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,6,.66) 0%,rgba(3,7,6,.38) 42%,rgba(3,7,6,.88) 72%,rgba(3,7,6,.95) 100%)}
.photocard>*:not(.bgimg){position:relative;z-index:1}
.photocard h4{color:#fff}
.photocard p{color:rgba(255,255,255,.86)}
.photocard p strong{color:#fff}
.photocard .k{color:var(--indigo-300)}
.photocard:hover{border-color:var(--indigo-300)}
section.greenfade{background:
radial-gradient(1000px 420px at 12% -10%, rgba(4,86,74,.5), transparent 62%),
radial-gradient(900px 460px at 92% 115%, rgba(49,152,132,.28), transparent 60%),
linear-gradient(180deg,#031a15, #010104)}
.photocard{display:flex;flex-direction:column;min-height:420px}
.photocard .pcg{width:100%;max-width:330px;height:auto;margin-bottom:14px}
.photocard .k{margin-top:auto}
.photocard h4{font-size:1.16rem}
@media(max-width:640px){.photocard{min-height:360px}}
.dark .card:hover,.black .card:hover{border-color:var(--indigo-300);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.dark .card p,.black .card p{color:var(--muted-dark)}
.dark .card .ic,.black .card .ic{background:rgba(49,152,132,.15);color:var(--indigo-300)}
/* offering card w/ image */
.ocard{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;
transition:transform .2s,box-shadow .2s}
.ocard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.ocard.static{cursor:default}
.ocard .ph{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.ocard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ocard:hover .ph img{transform:scale(1.045)}
.ocard .bd{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.ocard .bd h3{margin:0}
.ocard .bd p{font-size:.94rem;color:var(--muted);flex:1}
.ocard .bd .more{margin-top:6px}
/* feature list */
.flist{display:grid;gap:2px;margin-top:8px}
.flist li{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.flist li:last-child{border-bottom:0}
.dark .flist li,.black .flist li{border-bottom-color:var(--line-dark-2)}
.flist .ck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--indigo-050);color:var(--indigo);display:grid;place-items:center;margin-top:1px}
.dark .flist .ck{background:rgba(49,152,132,.16);color:var(--indigo-300)}
.flist .ck svg{width:12px;height:12px}
.flist b{font-weight:600}
.flist span.t{font-size:.95rem;color:var(--muted)}
.dark .flist span.t{color:var(--muted-dark)}
/* ---------- Spec tiles (table replacement) ---------- */
/* minmax(0,…) on the track and min-width:0 on the tile are both required: a
bare fr track floors at the item's min-content width, and a grid item's own
min-width:auto floors it there too, so fixing only one still lets a long word
push the row past the viewport. overflow-wrap alone cannot do it -- it permits
a break but does not change the min-content contribution the track sizes to. */
.spectiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.spectiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spectiles.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.spectiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:7px;min-height:104px;min-width:0;transition:transform .18s,box-shadow .18s}
.st-tile:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.st-tile .st-l{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);order:-1}
.st-tile .st-v{font-family:var(--font-display);font-weight:800;font-size:1.55rem;letter-spacing:-.03em;line-height:1.08;color:var(--text)}
.st-tile .st-v .u{font-size:.55em;color:var(--indigo);margin-left:.12em;letter-spacing:0}
.st-tile .st-d{font-size:.84rem;color:var(--muted);line-height:1.45}
.st-tile.wide{grid-column:span 2}
.st-tile.txt .st-v{font-family:var(--font);font-weight:600;font-size:1.02rem;letter-spacing:0;line-height:1.45}
.st-tile.feat{border-color:var(--indigo-100);background:linear-gradient(160deg,var(--indigo-050),#fff 70%)}
.st-tile.feat .st-v{color:var(--indigo-600);font-size:2rem}
/* .txt marks a tile whose value is a sentence rather than a number, and .feat
only marks it as the highlighted one. Both rules score 0,3,0, so plain source
order was giving a .feat.txt tile the 2rem number size -- a full sentence set
in 32px display bold, which overflowed the tile on a phone. Restate the text
size for the combination so the two classes compose the way they read. */
.st-tile.feat.txt .st-v{font-family:var(--font);font-weight:600;font-size:1.02rem;letter-spacing:0;line-height:1.45}
.st-tile .st-v{overflow-wrap:break-word}
.dark .st-tile,.black .st-tile{background:var(--ink-2);border-color:var(--line-dark)}
.dark .st-tile .st-v{color:#fff}
.dark .st-tile .st-d{color:var(--muted-dark)}
.dark .st-tile.feat{background:linear-gradient(160deg,rgba(49,152,132,.14),var(--ink-2) 70%);border-color:rgba(49,152,132,.3)}
.dark .st-tile.feat .st-v{color:var(--indigo-300)}
/* ---------- Product compare cards + mobile switcher ---------- */
.pswitch{display:none;gap:6px;background:var(--paper-2);padding:6px;border-radius:100px;width:max-content;max-width:100%;margin:0 auto 24px}
.pswitch button{padding:10px 20px;border-radius:100px;font-weight:600;font-size:.9rem;color:var(--muted);transition:all .18s;white-space:nowrap}
.pswitch button.active{background:var(--indigo);color:#fff;box-shadow:0 4px 14px rgba(4,86,74,.3)}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)}
.pcard .pc-head{padding:24px 26px 18px;background:linear-gradient(170deg,var(--indigo-050),#fff)}
.pcard .pc-head .k{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo)}
.pcard .pc-head h3{margin-top:6px}
.pcard .pc-hero{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pcard .pc-hero>div{background:#fff;padding:16px 26px}
.pcard .pc-hero .n{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;color:var(--indigo-600);line-height:1.05}
.pcard .pc-hero .n .u{font-size:.55em;letter-spacing:0}
.pcard .pc-hero .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.pcard .pc-rows{padding:8px 26px 20px}
.pc-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.93rem;align-items:baseline}
.pc-row:last-child{border-bottom:0}
.pc-row .k{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);flex:0 0 auto}
.pc-row .v{text-align:right;font-weight:500;color:var(--text)}
@media(max-width:860px){
.pswitch{display:flex;width:100%}
.pswitch button{flex:1 1 auto;text-align:center;justify-content:center;display:inline-flex;align-items:center}
.pswitch.rich button{display:flex;flex:1 1 40%}
.pcards{grid-template-columns:1fr}
.pcards.js .pcard{display:none}
.pcards.js .pcard.active{display:block}
}
/* tabs variant — switch at every width */
.pswitch.always{display:flex;flex-wrap:wrap;justify-content:center;border-radius:22px}
/* rich tabs: icon + label + small metric */
.pswitch.rich{background:var(--paper-2);border-radius:18px;gap:6px;padding:7px}
.pswitch.rich button{display:flex;flex-direction:column;align-items:center;gap:3px;
padding:12px 18px;border-radius:13px;font-size:.88rem;line-height:1.15}
.pswitch.rich button svg{width:20px;height:20px;margin-bottom:2px}
.pswitch.rich button .sub{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.04em;opacity:.65}
.pswitch.rich button.active .sub{opacity:.85}
.pcards.tabs{grid-template-columns:1fr}
.pcards.tabs.js .pcard{display:none}
.pcards.tabs.js .pcard.active{display:block;animation:fade .3s ease}
.hww-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,40px);padding:26px 28px 28px;align-items:center}
.hww-grid .pc-rows{padding:0}
.hww-svg{width:100%;height:auto;display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px}
@media(max-width:860px){.hww-grid{grid-template-columns:1fr}}
/* ---------- Class cards (storage overview) ---------- */
.classcards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
div.classcard,a.classcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;color:inherit;display:flex;flex-direction:column;gap:8px;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
a.classcard:hover,div.classcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--indigo-300)}
.classcard .cc-k{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.classcard h3{font-size:1.05rem;letter-spacing:-.01em}
.classcard .cc-n{font-family:var(--font-display);font-weight:800;font-size:1.45rem;letter-spacing:-.03em;color:var(--text);line-height:1.05;margin-top:2px}
.classcard .cc-n .u{font-size:.6em;color:var(--indigo)}
.classcard p{font-size:.84rem;color:var(--muted);margin:0;flex:1}
.classcard .link-arrow{font-size:.86rem}
@media(max-width:1080px){.classcards{grid-template-columns:repeat(3,1fr)}}
/* ---------- Image slider (class explorer) ---------- */
.slider{position:relative}
.sl-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 6px 44px;
margin-bottom:-22px;scrollbar-width:none;-ms-overflow-style:none}
.sl-track::-webkit-scrollbar{display:none}
a.slide{flex:0 0 clamp(280px,30vw,400px);aspect-ratio:3/4.1;border-radius:var(--r-lg);overflow:hidden;
position:relative;scroll-snap-align:start;color:#fff;display:block;background:var(--ink-2);
transition:transform .25s ease,box-shadow .25s ease}
a.slide:hover{transform:translateY(-4px);box-shadow:0 4px 14px rgba(4,16,12,.12),0 22px 38px rgba(4,16,12,.22);color:#fff}
.slide .sl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.slide:hover .sl-bg{transform:scale(1.06)}
/* progressive blur behind the text for readability */
.slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);
-webkit-mask-image:linear-gradient(180deg,transparent 38%,#000 72%);
mask-image:linear-gradient(180deg,transparent 38%,#000 72%)}
.slide::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(185deg,rgba(5,8,9,.18) 0%,rgba(5,8,9,0) 26%,rgba(3,15,12,.42) 58%,rgba(3,12,10,.88) 100%)}
.slide .sl-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
height:100%;padding:24px;gap:7px}
.slide .sl-k{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--indigo-300)}
.slide .sl-n{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,2.4vw,2.2rem);
letter-spacing:-.03em;line-height:1;color:#fff}
.slide .sl-n .u{font-size:.52em;color:var(--indigo-300);letter-spacing:0}
.slide h3{color:#fff;font-size:1.06rem;font-family:var(--font);font-weight:600;letter-spacing:0}
.slide p{font-size:.86rem;color:rgba(255,255,255,.72);margin:0;line-height:1.45}
.slide .sl-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.slide .sl-chips span{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:rgba(255,255,255,.85);
border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:4px 9px;background:rgba(5,8,9,.25);backdrop-filter:blur(3px)}
.slide .link-arrow{color:#fff;font-size:.9rem;margin-top:8px}
.slide .link-arrow svg{transition:transform .2s}
.slide:hover .link-arrow svg{transform:translateX(4px)}
/* top badge on slide */
.slide .sl-top{position:absolute;top:18px;left:18px;z-index:2}
/* nav arrows */
.sl-nav{display:flex;gap:10px}
.sl-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;
display:grid;place-items:center;color:var(--text);transition:all .18s}
.sl-nav button:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-1px)}
.sl-nav button svg{width:18px;height:18px}
.sl-nav button:disabled{opacity:.35;pointer-events:none}
@media(max-width:640px){a.slide{flex-basis:82vw}}
/* ---------- Segment cards (photo + load-profile infographic) ---------- */
.segcards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.segcard{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;color:#fff;background:var(--ink-2);
transition:transform .25s ease,box-shadow .25s ease}
.segcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.segcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.segcard:hover>img{transform:scale(1.05)}
.segcard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);
-webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 66%);
mask-image:linear-gradient(180deg,transparent 34%,#000 66%)}
.segcard::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(185deg,rgba(5,8,9,.22) 0%,rgba(5,8,9,.04) 28%,rgba(3,13,11,.56) 60%,rgba(3,10,8,.92) 100%)}
.segcard .sg-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
padding:20px;gap:8px}
.segcard .sg-k{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:#fff}
.segcard .spark{width:100%;height:auto;display:block;margin:2px 0}
.segcard .sg-chip{align-self:flex-start;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:#ffd9a0;border:1px solid rgba(213,148,64,.55);border-radius:6px;padding:4px 9px;
background:rgba(213,148,64,.14);backdrop-filter:blur(3px)}
.segcard p{font-size:.82rem;color:rgba(255,255,255,.75);margin:0;line-height:1.45}
@media(max-width:960px){.segcards{grid-template-columns:1fr 1fr}.segcard{aspect-ratio:3/4}}
@media(max-width:640px){.segcards{grid-template-columns:1fr}.segcard{aspect-ratio:4/4.4}}
/* light-green note variant */
.note.green{background:var(--indigo-050);border:1px solid var(--indigo-100);border-left:3px solid var(--indigo);border-radius:var(--r-sm)}
.note.green p{color:var(--indigo-700)}
/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;margin:6px 0;border:1px solid var(--line);border-radius:var(--r)}
table.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
.tbl th{text-align:left;font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);padding:16px 20px;background:var(--paper);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--paper)}
.tbl td.num{font-family:var(--mono);font-weight:500;white-space:nowrap;font-size:.9rem}
.tbl td b{font-weight:600}
.tbl .muted{color:var(--muted)}
/* ---------- Status badge ---------- */
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:600;font-size:.72rem;
letter-spacing:.04em;padding:5px 11px 5px 9px;border-radius:100px;border:1px solid;white-space:nowrap;text-transform:uppercase}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge.on{color:var(--ok);background:var(--ok-100);border-color:#bfe3d1}
.badge.prog{color:#0a6ea8;background:#e3f0f8;border-color:#bcdcef}
.badge.prep{color:#9a6612;background:#fbf0dc;border-color:#eed7ac}
.badge.tbd{color:#6b7671;background:#eef1ef;border-color:#dbe2de}
.dark .badge.on{background:rgba(31,138,99,.18);border-color:rgba(63,190,140,.4);color:#6ede9f}
.dark .badge.prog{background:rgba(10,110,168,.2);border-color:rgba(90,180,230,.4);color:#7fc4ec}
.dark .badge.prep{background:rgba(213,148,64,.16);border-color:rgba(213,148,64,.4);color:#e7b871}
.dark .badge.tbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.pill{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:600;padding:6px 13px;border-radius:100px;
background:var(--indigo-050);color:var(--indigo-600)}
.dark .pill{background:rgba(49,152,132,.14);color:var(--indigo-300)}
.pill svg,.promise svg{width:1.1em;height:1.1em;flex:0 0 auto}
.note h4 svg{width:1.1em;height:1.1em;display:inline-block;vertical-align:-2px;margin-right:2px}
/* ---------- Callout / rule / note ---------- */
.note{background:var(--paper);border-left:3px solid var(--indigo);border-radius:0 var(--r-sm) var(--r-sm) 0;
padding:22px 26px;margin:26px 0}
.note.amber{border-left-color:var(--amber);background:#fdf6ea}
.note h4{margin-bottom:6px}
.note p{font-size:.96rem;color:var(--muted)}
.dark .note{background:rgba(255,255,255,.05);border-left-color:var(--indigo-300)}
.dark .note p{color:var(--muted-dark)}
blockquote.pull{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.12;
letter-spacing:-.03em;max-width:22ch;padding-left:28px;border-left:4px solid var(--indigo);color:var(--text)}
.dark blockquote.pull{color:#fff;border-left-color:var(--indigo-300)}
blockquote.pull.big{max-width:26ch}
/* two-column do/don't */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dd>div{padding:26px 28px}
.dd .yes{background:var(--ok-100)}
.dd .no{background:#faf0ef;border-left:1px solid var(--line)}
.dd h4{margin-bottom:12px;display:flex;align-items:center;gap:.5em}
.dd ul li{padding:6px 0;font-size:.94rem;padding-left:22px;position:relative}
.dd ul li::before{position:absolute;left:0;top:5px;font-weight:700}
.dd .yes li::before{content:"✓";color:var(--ok)}
.dd .no li::before{content:"✕";color:var(--signal)}
/* ---------- Signature load-profile chart ---------- */
.sig{background:var(--ink);border-radius:var(--r);padding:clamp(22px,3vw,34px);color:#fff}
.sig .legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:.82rem;color:var(--muted-dark)}
.sig .legend span{display:inline-flex;align-items:center;gap:7px}
.sig .legend i{width:13px;height:13px;border-radius:3px;display:inline-block}
.sig svg{width:100%;height:auto;display:block}
/* ---------- Diagram (aggregation) ---------- */
.diagram{background:var(--ink);border-radius:var(--r);padding:clamp(24px,3.5vw,42px);color:#fff}
.diagram svg{width:100%;height:auto}
.layerstack{display:grid;gap:14px}
.layer{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 24px;border-radius:var(--r);
border:1px solid var(--line);background:#fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.layer:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--indigo-300)}
.layer .lv{font-family:var(--font-display);font-weight:800;font-size:1.5rem;width:44px;height:44px;border-radius:11px;
display:grid;place-items:center;background:var(--indigo-050);color:var(--indigo);letter-spacing:-.03em}
.layer h4{margin-bottom:3px}
.layer p{font-size:.9rem;color:var(--muted);margin:0}
.layer .who{text-align:right;font-size:.82rem;color:var(--muted);min-width:120px}
.layer .who b{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);margin-bottom:2px}
.layer.l3{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo),var(--sh)}
.layer.l3:hover{box-shadow:0 0 0 1px var(--indigo),var(--sh-lg)}
.layer.l3 .lv{background:var(--indigo);color:#fff}
/* portal mock */
.portal{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden}
.portal .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.portal .bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.portal .bar .u{margin-left:12px;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.portal .body{padding:22px}
.portal .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.portal .kpi{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.portal .kpi .n{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.portal .kpi .l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
/* ---------- Process flow / steps ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.step:first-child{border-top:0}
.step .no{font-family:var(--mono);font-weight:600;font-size:.8rem;color:var(--indigo);padding-top:5px}
.step .no::before{content:counter(s,decimal-leading-zero)}
.step h4{margin-bottom:5px}
.step p{font-size:.96rem;color:var(--muted);margin:0}
.dark .step,.black .step{border-top-color:var(--line-dark-2)}
.dark .step p{color:var(--muted-dark)}
.flow4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.flow4>div{background:#fff;padding:24px 22px}
.flow4 .st{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--indigo);letter-spacing:.1em;display:block;margin-bottom:12px}
.flow4 h4{margin-bottom:6px}
.flow4 p{font-size:.88rem;color:var(--muted);margin:0}
/* ---------- Logos strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center}
.trust .t{font-family:var(--mono);font-weight:600;font-size:.9rem;letter-spacing:.06em;color:var(--muted);
padding:10px 20px;border:1px solid var(--line);border-radius:100px}
.dark .trust .t{color:var(--muted-dark);border-color:var(--line-dark)}
/* audience row */
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.aud a{padding:30px 28px;border-right:1px solid var(--line);color:inherit;transition:background .18s}
.aud a:last-child{border-right:0}
.aud a:hover{background:var(--indigo-050)}
.aud a .k{font-family:var(--mono);font-size:.72rem;color:var(--indigo);letter-spacing:.1em;text-transform:uppercase}
.aud a h4{margin:12px 0 6px}
.aud a p{font-size:.9rem;color:var(--muted);margin-bottom:14px}
/* ---------- References / cards grid ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.filters button{padding:8px 16px;border-radius:100px;border:1px solid var(--line);font-weight:500;font-size:.88rem;color:var(--muted);
background:#fff;transition:all .15s}
.filters button:hover{border-color:var(--indigo);color:var(--indigo)}
.filters button.active{background:var(--text);color:#fff;border-color:var(--text)}
.refcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.refcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.refcard .ph{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--ink-2)}
.refcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.refcard:hover .ph img{transform:scale(1.05)}
.refcard .ph .badge{position:absolute;top:12px;left:12px;background:rgba(5,8,9,.72);color:#fff;border-color:transparent;backdrop-filter:blur(4px)}
.refcard .bd{padding:22px;flex:1;display:flex;flex-direction:column;gap:7px}
.refcard .meta{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.03em}
.refcard h3{font-size:1.2rem}
.refcard .facts{display:flex;gap:18px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.refcard .facts div .n{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:var(--indigo)}
.refcard .facts div .l{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* ---------- Insights / updates ---------- */
.article-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.article-card .ph{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.article-card .ph img{width:100%;height:100%;object-fit:cover}
.article-card .bd{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.article-card .cat{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo)}
.article-card h3{font-size:1.22rem}
.article-card time{font-size:.82rem;color:var(--muted);margin-top:auto}
.feed{display:grid;gap:0;border-top:1px solid var(--line)}
.upd{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.upd .side{display:flex;flex-direction:column;gap:9px}
.upd time{font-family:var(--mono);font-size:.82rem;color:var(--muted);font-weight:500}
.upd .type{align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:4px 10px;border-radius:100px;background:var(--indigo-050);color:var(--indigo-600)}
.upd h3{font-size:1.22rem;margin-bottom:7px}
.upd p{font-size:.97rem;color:var(--muted);max-width:60ch}
.upd .num{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--indigo);letter-spacing:-.02em;margin-top:8px;display:inline-block}
.upd .loc{font-family:var(--mono);font-size:.76rem;color:var(--muted-2)}
/* prose (article body) */
.prose{max-width:none}
.prose>*{max-width:70ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:44px 0 16px}
.prose h3{margin:34px 0 12px}
.prose p{margin-bottom:18px;color:#1f2925;font-size:1.08rem;line-height:1.68}
.prose ul{margin:0 0 18px;padding-left:0}
.prose ul li{position:relative;padding-left:26px;margin-bottom:10px;color:#1f2925}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--indigo);transform:rotate(45deg)}
.prose .datebar{display:flex;gap:16px;align-items:center;font-family:var(--mono);font-size:.82rem;color:var(--muted);
padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
/* metric row for insights fixed format */
.metricrow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:24px 0}
.metricrow>div{background:#fff;padding:20px 18px}
.metricrow .n{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;color:var(--text);line-height:1}
.metricrow .l{font-size:.76rem;color:var(--muted);margin-top:8px;line-height:1.35}
/* ---------- Quote configurator ---------- */
.config{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;max-width:820px;margin-inline:auto}
.config .track{display:flex;border-bottom:1px solid var(--line)}
.config .track .s{flex:1;padding:16px 12px;text-align:center;font-size:.82rem;font-weight:600;color:var(--muted-2);
border-right:1px solid var(--line);position:relative;transition:color .2s}
.config .track .s:last-child{border-right:0}
.config .track .s .num{font-family:var(--mono);display:block;font-size:.72rem;margin-bottom:3px}
.config .track .s.done{color:var(--indigo)}
.config .track .s.active{color:var(--text);background:var(--indigo-050)}
.config .track .s.active .num{color:var(--indigo)}
.config .panel{padding:clamp(24px,4vw,44px);display:none}
.config .panel.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.config h3{margin-bottom:6px}
.config .panel>p.hint{color:var(--muted);font-size:.96rem;margin-bottom:22px}
.opts{display:grid;gap:12px}
.opts.c2{grid-template-columns:1fr 1fr}
.opt{border:1.5px solid var(--line);border-radius:12px;padding:18px 20px;cursor:pointer;transition:all .16s;display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%}
.opt:hover{border-color:var(--indigo-300);background:var(--indigo-050)}
.opt.sel{border-color:var(--indigo);background:var(--indigo-050);box-shadow:0 0 0 1px var(--indigo)}
.opt .rd{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);margin-top:2px;transition:.16s;position:relative}
.opt.sel .rd{border-color:var(--indigo)}
.opt.sel .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--indigo)}
.opt b{display:block;font-weight:600;font-size:1rem}
.opt span{display:block;font-size:.86rem;color:var(--muted);margin-top:2px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
.field label .req-star{color:var(--signal)}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;
font:inherit;font-size:.96rem;background:#fff;transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--indigo);outline:none}
.field textarea{min-height:110px;resize:vertical}
.field .help{font-size:.8rem;color:var(--muted-2);margin-top:5px}
.config .actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.config .actions .spacer{flex:1}
.summary{background:var(--paper);border-radius:12px;padding:18px 20px;margin-bottom:20px;font-size:.92rem}
.summary .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.summary .row:last-child{border-bottom:0}
.summary .row span{color:var(--muted)}.summary .row b{font-weight:600;text-align:right}
.config .done-msg{text-align:center;padding:20px 0}
.config .done-msg .big{width:64px;height:64px;border-radius:50%;background:var(--ok-100);color:var(--ok);display:grid;place-items:center;margin:0 auto 18px}
.promise{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:600;color:var(--indigo);
background:var(--indigo-050);padding:8px 16px;border-radius:100px}
/* ---------- CTA band ---------- */
.ctaband{background:var(--indigo);color:#fff;border-radius:var(--r-lg);padding:clamp(38px,5vw,64px);
display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.ctaband::after{content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;
background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);pointer-events:none}
.ctaband h2{color:#fff;max-width:20ch}
.ctaband p{color:rgba(255,255,255,.85);margin-top:12px;max-width:52ch}
.ctaband .btns{display:flex;gap:14px;flex-wrap:wrap}
.ctaband .eyebrow{color:rgba(255,255,255,.85)}.ctaband .eyebrow::before{background:rgba(255,255,255,.7)}
/* ---------- Contact ---------- */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
.infoblock{padding:22px 0;border-bottom:1px solid var(--line)}
.infoblock:first-child{padding-top:0}
.infoblock .k{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.infoblock .v{font-size:1.06rem;font-weight:500}
.infoblock .v a{font-weight:600}
.map{aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:
linear-gradient(135deg,#07241e,#051611);position:relative;color:#fff}
.map .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center}
.map .pin .dot{width:18px;height:18px;border-radius:50%;background:var(--indigo-300);margin:0 auto 8px;box-shadow:0 0 0 6px rgba(49,152,132,.28),0 0 0 14px rgba(49,152,132,.14)}
.map .pin b{font-family:var(--font-display);font-size:1.05rem}
.map .grid-bg{position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:34px 34px}
.map.mini{aspect-ratio:auto;width:190px;height:120px;border-radius:12px;flex:0 0 auto}
.map.mini .pin .dot{width:12px;height:12px;margin-bottom:6px;box-shadow:0 0 0 4px rgba(49,152,132,.28),0 0 0 9px rgba(49,152,132,.14)}
.map.mini .pin b{font-size:.82rem}
.map.mini .grid-bg{background-size:22px 22px}
/* ---------- Footer ---------- */
footer.ft{background:var(--black);color:rgba(255,255,255,.6);padding:clamp(56px,7vw,88px) 0 34px}
/* minmax(0,…) rather than a bare 1fr: a bare fr track is minmax(auto,1fr) and
can never become narrower than the longest word inside it, so one long link
label pushes the whole grid past the viewport instead of wrapping. */
.ft .top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:34px;padding-bottom:48px;border-bottom:1px solid var(--line-dark-2)}
.ft .brandcol .logo{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.ft .brandcol .logo img{width:34px;height:34px}
.ft .brandcol .wm{height:20px}
.ft .brandcol p{font-size:.9rem;color:var(--muted-dark-2);max-width:34ch}
.ft .brandcol .corp{margin-top:16px;font-size:.86rem;color:var(--muted-dark);max-width:40ch;line-height:1.5}
.ft .col h5{color:#fff;font-family:var(--font);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
/* German compounds ("Halbfeststoff-Batterie", "Ladeinfrastruktur") are wider
than a footer column on a phone. The pages carry a real lang attribute, so
hyphens:auto breaks them where the language allows; break-word is the
fallback for anything the hyphenation dictionary does not know. */
.ft .col{min-width:0}
.ft .col a{display:block;color:rgba(255,255,255,.62);font-size:.92rem;padding:5px 0;transition:color .15s;overflow-wrap:break-word;hyphens:auto}
.ft .col a:hover{color:#fff}
.ft .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.82rem;color:var(--muted-dark-2)}
.ft .bottom .legal{display:flex;gap:20px;flex-wrap:wrap}
.ft .bottom a{color:var(--muted-dark-2)}.ft .bottom a:hover{color:#fff}
.ft .certs{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.ft .certs .c{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.55);border:1px solid var(--line-dark);padding:5px 11px;border-radius:6px}
/* ---------- scroll-reveal (added by JS only — no-JS users see everything) ---------- */
.js-anim .rv{opacity:0;transform:translateY(16px);
transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rvd,0ms);will-change:opacity,transform}
.js-anim .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-anim .rv{opacity:1!important;transform:none!important;transition:none!important}}
/* ---------- photo gallery (click to enlarge) ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
.gallery figure{margin:0;border-radius:12px;overflow:hidden;position:relative;background:var(--ink-2)}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure.big{grid-column:span 2;grid-row:span 2}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px}}
/* ---------- click-to-zoom lightbox ---------- */
[data-zoom]{cursor:zoom-in}
.zoom-box img{width:100%;height:auto;max-height:88vh;object-fit:contain;border-radius:14px}
.zoom-overlay{position:fixed;inset:0;z-index:200;background:rgba(3,7,6,.84);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:grid;place-items:center;padding:3vw;opacity:0;transition:opacity .3s ease;cursor:zoom-out}
.zoom-overlay.open{opacity:1}
.zoom-overlay .zoom-box{width:min(1240px,94vw);max-height:92vh;transform:scale(.9) translateY(10px);
transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.zoom-overlay.open .zoom-box{transform:scale(1) translateY(0)}
.zoom-overlay .zoom-hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.zoom-overlay .zoom-nav{position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;transition:background .18s,transform .18s;z-index:2}
.zoom-overlay .zoom-nav:hover{background:rgba(255,255,255,.24)}
.zoom-overlay .zoom-nav.prev{left:20px}
.zoom-overlay .zoom-nav.next{right:20px}
.zoom-overlay .zoom-nav svg{width:22px;height:22px}
@media(max-width:640px){.zoom-overlay .zoom-nav{width:44px;height:44px}.zoom-overlay .zoom-nav.prev{left:10px}.zoom-overlay .zoom-nav.next{right:10px}}
@keyframes zswap{from{opacity:.3;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
.zoom-overlay .zoom-box.swap{animation:zswap .28s ease}
/* ---------- brand hero (gradient + ghost mark instead of a photo) ---------- */
.hero.brandhero{background:radial-gradient(1000px 560px at 82% 12%,rgba(120,215,185,.35),transparent 60%),
radial-gradient(760px 520px at 6% 96%,rgba(12,140,116,.55),transparent 65%),
linear-gradient(150deg,#022b25,#03453b 40%,#04564a 62%,#067a66)}
.hero.brandhero .bg::after{background:linear-gradient(180deg,rgba(2,22,18,.25),rgba(2,22,18,0) 40%,rgba(2,26,22,.35) 100%)}
.hero.brandhero .bg::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
background-size:38px 38px;
-webkit-mask-image:radial-gradient(900px 560px at 70% 45%,#000,transparent 78%);
mask-image:radial-gradient(900px 560px at 70% 45%,#000,transparent 78%)}
.hero.brandhero .wm-ghost{position:absolute;right:-90px;top:52%;transform:translateY(-50%) rotate(-8deg);
width:min(620px,52vw);height:auto;opacity:.1;object-fit:contain}
.hero.brandhero .eu-ring{position:absolute;right:-110px;top:50%;transform:translateY(-50%);
width:min(600px,52vw);height:auto;color:#fff;opacity:.18}
.hero.brandhero .eu-ring .ring{transform-box:view-box;transform-origin:center;animation:euspin 160s linear infinite}
@keyframes euspin{to{transform:rotate(360deg)}}
.hero.brandhero .hww-net{position:absolute;right:clamp(-30px,3vw,70px);top:55%;transform:translateY(-50%);
width:min(560px,50vw);height:auto;color:#fff;opacity:.26}
.hero.brandhero .contact-net{position:absolute;right:clamp(-40px,2vw,60px);top:55%;transform:translateY(-50%);
width:min(580px,52vw);height:auto;color:#fff;opacity:.28}
.contact-net .pulse{transform-box:fill-box;transform-origin:center;animation:cpulse 2.8s ease-out infinite}
@keyframes cpulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.hero.brandhero .updates-net{position:absolute;right:clamp(-20px,4vw,90px);top:55%;transform:translateY(-50%);
width:min(500px,44vw);height:auto;color:#fff;opacity:.26}
/* ---------- brand band (Made in Europe strip on home) ---------- */
section.brandband,.brandband{position:relative;overflow:hidden;
background:radial-gradient(1000px 560px at 82% 12%,rgba(120,215,185,.35),transparent 60%),
radial-gradient(760px 520px at 6% 96%,rgba(12,140,116,.55),transparent 65%),
linear-gradient(150deg,#022b25,#03453b 40%,#04564a 62%,#067a66)}
.brandband::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:38px 38px;
-webkit-mask-image:radial-gradient(820px 520px at 72% 42%,#000,transparent 78%);
mask-image:radial-gradient(820px 520px at 72% 42%,#000,transparent 78%)}
.brandband::after{content:"";position:absolute;right:-130px;bottom:-150px;width:540px;height:540px;pointer-events:none;
background:url(../brand/symbol-white.png) center/contain no-repeat;opacity:.07;transform:rotate(-8deg)}
.brandband .wrap{position:relative;z-index:2}
.brandband p{color:rgba(255,255,255,.85)}
.brandband .flist li{border-bottom-color:rgba(255,255,255,.16)}
.brandband .flist .ck{background:rgba(255,255,255,.16);color:#fff}
.brandband .flist span.t{color:rgba(255,255,255,.72)}
.brandband .eyebrow{color:#8fdcc2}.brandband .eyebrow::before{background:#8fdcc2}
.brandband .link-arrow{color:#fff}
.stats.brandband{border-top:0}
.stats.brandband .stat{border-right-color:rgba(255,255,255,.18)}
.stats.brandband .stat .d{color:rgba(255,255,255,.78)}
.stats.brandband .stat .n .u{color:#8fdcc2}
.brandlogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
padding:clamp(26px,4vw,48px) clamp(14px,2vw,28px)}
.brandlogo .bl-wm{width:min(460px,100%);height:auto;filter:drop-shadow(0 14px 44px rgba(0,0,0,.35))}
.brandlogo .bl-sub{font-family:var(--font);font-weight:600;font-size:.92rem;letter-spacing:.58em;text-indent:.58em;color:#4cc39e}
/* full-width dark band row: text left, action right */
.bandrow{display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center}
@media(max-width:860px){.bandrow{grid-template-columns:1fr;gap:22px}}
/* ---------- photo section backgrounds (dark & light overlay) ---------- */
section.photobg{position:relative;overflow:hidden}
.photobg>.bgimg{position:absolute;inset:0;z-index:0;pointer-events:none}
.photobg>.bgimg img{width:100%;height:100%;object-fit:cover}
.photobg.dark>.bgimg::after,.photobg.black>.bgimg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(3,7,6,.9),rgba(3,7,6,.82) 45%,rgba(3,7,6,.92))}
.photobg.lite>.bgimg::after{content:"";position:absolute;inset:0;background:rgba(245,247,246,.94)}
.photobg>.wrap,.photobg>.wrap-wide{position:relative;z-index:2}
/* ---------- misc ---------- */
.divider{height:1px;background:var(--line);border:0;margin:0}
.kbd{font-family:var(--mono);font-size:.85em;background:var(--paper);padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--indigo-600)}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:6px 0}
.tag{font-family:var(--mono);font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.dark .tag{color:var(--muted-dark);border-color:var(--line-dark)}
.mt-0{margin-top:0}.mt-1{margin-top:14px}.mt-2{margin-top:26px}.mt-3{margin-top:40px}.mt-4{margin-top:56px}
.mb-2{margin-bottom:26px}.mb-3{margin-bottom:40px}
.maxw{max-width:62ch}
.eq{display:flex;flex-direction:column;height:100%}
.anchor{scroll-margin-top:100px}
.imground{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh)}
.imground img{width:100%;display:block}
.cap{font-size:.8rem;color:var(--muted);margin-top:10px;font-family:var(--mono);letter-spacing:.02em}
.dark .cap{color:var(--muted-dark-2)}
.skip{position:absolute;left:-9999px;top:0;background:var(--indigo);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
/* ---------- Responsive ---------- */
@media(max-width:1080px){
.aud{grid-template-columns:1fr 1fr}
.aud a:nth-child(2n){border-right:0}
.aud a:nth-child(-n+2){border-bottom:1px solid var(--line)}
.ft .top{grid-template-columns:repeat(3,minmax(0,1fr))}
.ft .brandcol{grid-column:1/-1}
}
@media(max-width:960px){
.nav,.hdr-cta.desk{display:none}
.burger{display:block}
.split{grid-template-columns:1fr;gap:34px}
.split.rev .media{order:0}
.g-4{grid-template-columns:repeat(2,1fr)}
.stats .wrap-wide{grid-template-columns:1fr 1fr}
.stat:nth-child(2){border-right:0}
.stat{border-bottom:1px solid var(--line-dark)}
.flow4{grid-template-columns:1fr 1fr}
.metricrow{grid-template-columns:1fr 1fr}
.ctaband{grid-template-columns:1fr;gap:24px}
.contactgrid{grid-template-columns:1fr}
.layer{grid-template-columns:auto 1fr;gap:14px}
.layer .who{grid-column:2;text-align:left;margin-top:6px}
}
@media(max-width:960px){
.spectiles,.spectiles.c3,.spectiles.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
body{font-size:16px}
.pswitch.rich button{flex:1 1 100%;flex-direction:row;justify-content:flex-start;gap:10px;padding:13px 16px}
.pswitch.rich button svg{margin:0}
.pswitch.rich button .sub{margin-left:auto}
.g-2,.g-3,.g-4,.aud,.metricrow{grid-template-columns:1fr}
.classcards{grid-template-columns:1fr}
.spectiles,.spectiles.c2,.spectiles.c3,.spectiles.c5{grid-template-columns:minmax(0,1fr)}
.st-tile.wide{grid-column:span 1}
.stats .wrap-wide{grid-template-columns:1fr}
.stat{border-right:0}
.dd,.flow4{grid-template-columns:1fr}
.dd .no{border-left:0;border-top:1px solid var(--line)}
.aud a{border-right:0;border-bottom:1px solid var(--line)}
.upd{grid-template-columns:1fr;gap:12px}
.config .track .s{font-size:0}
.config .track .s .num{font-size:.8rem;margin:0}
.config .track .s.active{font-size:.8rem}
.opts.c2{grid-template-columns:1fr}
.refcard .facts{flex-wrap:wrap}
/* The footer link grid was left at the three columns set for 1080px, all the
way down to 320px. Three columns of a 390px screen leave ~94px each, which
is narrower than several link labels. Two columns, and a smaller gap. */
.ft .top{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
/* .btn is nowrap so the label never separates from its arrow. On a phone that
turns any long call to action -- "Jelentkezzen, vagy tegyen fel kérdést" --
into a box wider than the screen. The arrow is a flex item, so letting the
label wrap keeps them together while the button stays inside the viewport. */
.btn{white-space:normal;max-width:100%}
.btn-lg{padding:.9em 1.4em}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ===== Additions kept from the rebrand =================================
Colour is back to the original (deepened) teal. These rules only cover
things the templates now need: the wordmark logo, the accented keyword
in a heading, and the language switcher.
====================================================================== */
/* wordmark logo — light version over the hero, dark version once the
header turns solid on scroll */
.hdr .logo{gap:0}
.hdr .logo .wm{height:26px;width:auto;display:block}
.hdr .logo .wm-dark{display:none}
.hdr.solid .logo .wm-light{display:none}
.hdr.solid .logo .wm-dark{display:block}
.ft .brandcol .logo .wm{height:30px;width:auto}
/* one accented word inside a headline */
.gradtext{color:var(--indigo)}
section.dark .gradtext,.dark .gradtext,.brandband .gradtext{color:var(--indigo-300)}
/* language switcher */
.langsw{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto}
.langsw a{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;
padding:5px 8px;border-radius:6px;line-height:1;transition:color .15s,background .15s}
.hdr:not(.solid) .langsw a{color:rgba(255,255,255,.62)}
.hdr:not(.solid) .langsw a:hover{color:#fff;background:rgba(255,255,255,.12)}
.hdr:not(.solid) .langsw a.on{color:#fff;background:rgba(255,255,255,.16)}
.hdr.solid .langsw a{color:var(--muted)}
.hdr.solid .langsw a:hover{color:var(--indigo);background:var(--indigo-050)}
.hdr.solid .langsw a.on{color:var(--indigo);background:var(--indigo-050)}
.langsw.mob{display:flex;gap:8px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.langsw.mob a{font-family:var(--font);font-size:.9rem;color:rgba(255,255,255,.66);padding:8px 12px;
border:1px solid rgba(255,255,255,.16);border-radius:8px}
.langsw.mob a.on{color:#fff;background:rgba(255,255,255,.14);border-color:transparent}
@media(max-width:1100px){.hdr .langsw:not(.mob){display:none}}
/* ===== hero video layer ==============================================
The under the video is the always-present fallback: it shows
before the video decodes, when motion is reduced, and on small screens
where we deliberately never load the file.
==================================================================== */
.hero .bg img{position:absolute;inset:0;z-index:0}
.hero .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero .bg::after{z-index:2}
@media (prefers-reduced-motion: reduce){ .hero .bg video{display:none} }
@media (max-width:700px){ .hero .bg video{display:none} }
/* ===== split hero =====================================================
The C&I walkthrough was shot vertically (576x1024). Cropping it to a
full-bleed 16:9 band would upscale 2.2x and cut the branding off the
cabinet doors, so the hero splits instead: copy left, the clip at its
native aspect on the right.
===================================================================== */
.hero.hero-split{align-items:center}
.hero-split .inner{display:grid;grid-template-columns:1.1fr .9fr;
gap:clamp(30px,5vw,72px);align-items:center}
.hero-split .hs-copy h1{max-width:15ch}
.hero-split .hs-media{margin:0;position:relative}
.hero-split .hs-media video{display:block;width:100%;max-width:400px;margin-left:auto;
border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(2,18,14,.55)}
.hero-split .hs-media figcaption{max-width:400px;margin:14px 0 0 auto;text-align:right;
font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:rgba(255,255,255,.6)}
@media (max-width:900px){
.hero-split .inner{grid-template-columns:1fr}
.hero-split .hs-media{display:none}
}
/* ==========================================================================
Five-section navigation (Products / Software / Financing / News / Company)
========================================================================== */
/* The nav is deliberately uniform: no item carries an accent underline.
The Leasing accent that used to live here was removed 2026-09-07. */
/* Financing and Software carry longer descriptions than the other menus. */
.drop-wide{min-width:334px}
/* The mobile sheet now holds five sections; tighten it so the last one is
still reachable on a small phone. */
@media (max-width:980px){
.mobile a{font-size:1.22rem;padding:9px 0}
.mobile a.sub{font-size:.95rem;padding:7px 0 7px 16px}
.mobile .req{margin-top:18px}
.mobile a.btn{font-size:1rem}
}
/* Products and Software have no overview page of their own — their top-level
nav item opens the menu instead of navigating. */
.nav>li>button.active{color:var(--indigo)}
.hdr:not(.solid) .nav>li>button.active{color:#fff}
/* the dropdown triggers are buttons, but they are nav links to the eye — so no
font shorthand here: it would reset the size and weight set with the links */
.nav>li>button{background:none;border:0;cursor:default}
.mobile .mobsec{color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.5rem;
padding:12px 0;border-bottom:1px solid var(--line-dark-2);letter-spacing:-.02em}
@media (max-width:980px){.mobile .mobsec{font-size:1.22rem;padding:9px 0}}
/* Anchor targets sit below the fixed header. */
[id]{scroll-margin-top:calc(var(--hdr) + 20px)}
/* Software links inside the company page's platform section. */
a.tag{transition:border-color .15s,color .15s}
a.tag:hover{border-color:var(--indigo);color:var(--indigo)}
/* ==========================================================================
Language selector — a dropdown once there are more than three languages
========================================================================== */
.langsel{position:relative;margin-left:auto;flex:0 0 auto}
.langsel-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 9px 7px 8px;border:0;background:none;
border-radius:8px;cursor:pointer;font:inherit;transition:color .15s,background .15s}
.langsel-btn .gl{width:15px;height:15px;opacity:.85}
.langsel-btn .cur{font-family:var(--font);font-size:.925rem;font-weight:600;letter-spacing:-.008em}
.langsel-btn .caret{width:11px;height:11px;transition:transform .2s}
.hdr:not(.solid) .langsel-btn{color:rgba(255,255,255,.7)}
.hdr:not(.solid) .langsel-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.hdr.solid .langsel-btn{color:var(--muted)}
.hdr.solid .langsel-btn:hover{color:var(--indigo);background:var(--indigo-050)}
.langsel:hover .caret,.langsel:focus-within .caret{transform:rotate(180deg)}
/* The menu sits 8px below the button. Without a bridge across that gap the
pointer leaves .langsel on its way down, :hover drops, and the menu closes
before it can be clicked — the main nav does not have this problem because
its
is as tall as the header. ::before covers the gap. */
.langsel-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.langsel-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:178px;padding:8px;
background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);
opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s ease;z-index:130}
.langsel:hover .langsel-menu,.langsel:focus-within .langsel-menu{opacity:1;visibility:visible;transform:translateY(0)}
.langsel-menu a{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text)}
.langsel-menu a:hover{background:var(--indigo-050)}
.langsel-menu a .c{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;
color:var(--muted);min-width:22px}
.langsel-menu a .n{font-size:.92rem}
.langsel-menu a.on{background:var(--indigo-050)}
.langsel-menu a.on .c,.langsel-menu a.on .n{color:var(--indigo);font-weight:600}
/* Mobile sheet: no hover, so the languages stay laid out flat. */
.langsw.mob{flex-wrap:wrap}
/* ==========================================================================
Product video blocks and brochure downloads
========================================================================== */
.vidfig{margin:0}
.vidfig video,.vidfig .vposter{display:block;width:100%;border-radius:var(--r);background:var(--ink-2);
object-fit:cover;aspect-ratio:16/9}
.vidfig .vposter{display:none}
.vidfig.portrait video,.vidfig.portrait .vposter{max-width:340px;aspect-ratio:9/16}
.vidfig figcaption{margin-top:13px;font-family:var(--mono);font-size:.74rem;line-height:1.5;
color:var(--muted);letter-spacing:.02em;max-width:46ch}
.dark .vidfig figcaption,.black .vidfig figcaption{color:var(--muted-dark)}
@media (prefers-reduced-motion:reduce){
.vidfig video{display:none}
.vidfig .vposter{display:block}
}
@media (max-width:700px){
.vidfig.portrait video,.vidfig.portrait .vposter{max-width:100%}
}
/* Brochure download */
.dlrow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));margin-top:8px}
.dl{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);
border-radius:var(--r);background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.dl:hover{border-color:var(--indigo-300);box-shadow:var(--sh-lg);transform:translateY(-2px)}
.dl .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--indigo-050);
color:var(--indigo);display:grid;place-items:center;margin:0}
.dl .ic svg{width:19px;height:19px}
.dl .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.dl .tx b{font-weight:600;font-size:.97rem;line-height:1.3}
.dl .m{display:flex;gap:7px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.dl .m .v::before{content:"·";margin-right:7px;color:var(--line)}
.dl .arr{flex:0 0 auto;width:18px;height:18px;margin-left:auto;color:var(--muted-2);transition:transform .15s,color .15s}
.dl:hover .arr{color:var(--indigo);transform:translateX(3px)}
.paper .dl{background:#fff}
.dark .dl,.black .dl{background:rgba(255,255,255,.04);border-color:var(--line-dark);color:#fff}
.dark .dl:hover,.black .dl:hover{border-color:var(--indigo-300)}
.dark .dl .ic,.black .dl .ic{background:rgba(49,152,132,.16);color:var(--indigo-300)}
.dark .dl .m,.black .dl .m{color:var(--muted-dark)}
/* ==========================================================================
Trade-mark notice
========================================================================== */
.ft .bottom .tmline{display:block;margin-top:6px;color:var(--muted-dark-2);font-size:.78rem}
/* The registered representation, shown on the Made in Europe page. */
.tmcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,44px);
align-items:center;padding:clamp(24px,3vw,34px);border:1px solid var(--line);
border-radius:var(--r);background:#fff}
/* The registered representation is black on white — so it is shown on white,
with a hairline to separate it from the card. */
.tmcard .art{display:grid;place-items:center;padding:clamp(20px,3vw,34px);
background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.tmcard .art img{width:100%;max-width:340px;height:auto}
.tmcard dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:16px 0 0;font-size:.92rem}
.tmcard dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);padding-top:3px}
.tmcard dd{margin:0;color:var(--text)}
@media (max-width:860px){.tmcard{grid-template-columns:1fr}}
/* ---- App section (home EMS) -------------------------------------------- */
/* A phone-shaped frame for the app screenshot, and the store badges. The
badge artwork is a single image holding both badges stacked. */
.appshot{max-width:290px;margin:0 auto;border:9px solid #12211c;border-radius:30px;
overflow:hidden;background:#12211c;box-shadow:0 22px 54px rgba(13,21,18,.24)}
.appshot img{display:block;width:100%;height:auto}
.storebadges{margin-top:18px}
.storebadges img{width:186px;height:auto;display:block}
@media (max-width:860px){.appshot{max-width:250px}}
/* ---- Component tiles (product drawings) --------------------------------- */
/* Every image sits in the same 4:3 white box with object-fit:contain, so a
row of parts photographed at different aspect ratios still lines up and the
captions share a baseline. */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.part{background:#fff;border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh)}
.part img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.part .bd{padding:18px 20px 20px;border-top:1px solid var(--line)}
.part h4{margin:0 0 6px;font-size:1.02rem;line-height:1.3}
.part p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
@media (max-width:900px){.parts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.parts{grid-template-columns:1fr}}
/* ==========================================================================
Legal pages — Impressum and privacy notice
========================================================================== */
/* A two-column definition list for the register / contact / authority blocks.
Same rhythm as .tmcard dl had, but it stands on its own inside .prose. */
.legaldl{display:grid;grid-template-columns:minmax(170px,auto) 1fr;gap:10px 24px;
margin:0 0 22px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);
background:#fff;font-size:.97rem;max-width:none}
.legaldl dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);padding-top:3px}
.legaldl dd{margin:0;color:var(--text)}
@media (max-width:640px){.legaldl{grid-template-columns:1fr;gap:4px 0}
.legaldl dd{margin-bottom:12px}}
/* ==========================================================================
The CROSTORION systems — header entry point and directory page
========================================================================== */
/* Sits between the navigation and the language switcher. It takes over the
margin-left:auto that used to push .langsel right, so the two stay paired. */
.syslink{display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto;
padding:7px 12px;border-radius:9px;border:1px solid var(--line);
font-family:var(--font);font-size:.925rem;font-weight:600;letter-spacing:-.008em;
color:var(--text);text-decoration:none;
transition:background .15s,border-color .15s,color .15s}
.syslink svg{width:15px;height:15px;opacity:.8}
.syslink:hover{background:var(--paper);border-color:#cfd8d3}
.syslink[aria-current]{border-color:var(--indigo);color:var(--indigo)}
.syslink + .langsel{margin-left:8px}
.hdr:not(.solid) .syslink{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.28)}
.hdr:not(.solid) .syslink:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.hdr:not(.solid) .syslink[aria-current]{border-color:#fff;color:#fff}
@media (max-width:1180px){.syslink span{display:none}.syslink{padding:7px 9px}}
@media (max-width:980px){.syslink{display:none}}
/* One card per system. Same furniture as .card, but the whole tile is a link
and it carries a role tag and the bare hostname. */
.syscard{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);text-decoration:none;color:inherit;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.syscard:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:#cfd8d3}
.sysic{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;
background:var(--indigo-050);color:var(--indigo);flex:0 0 auto}
.sysic svg{width:21px;height:21px}
.sysbd h3{font-size:1.14rem;margin:6px 0 8px}
.sysbd p{color:var(--muted);font-size:.95rem;margin:0 0 12px;line-height:1.6}
.systag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
border-radius:20px;padding:2px 9px}
.sysurl{font-family:var(--mono);font-size:.82rem;color:var(--indigo);word-break:break-all}
.syscard:hover .sysurl{text-decoration:underline}
@media (max-width:520px){.syscard{grid-template-columns:1fr}}
/* The two app-store codes, side by side. */
.qrpair{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:440px}
.qrpair figure{margin:0;padding:16px;background:#fff;border:1px solid var(--line);
border-radius:var(--r);box-shadow:var(--sh);text-align:center}
.qrpair img{display:block;width:100%;height:auto;border-radius:6px}
.qrpair figcaption{margin-top:10px;font-family:var(--mono);font-size:.72rem;
letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:400px){.qrpair{grid-template-columns:1fr;max-width:240px}}
/* ==========================================================================
Enquiry forms
========================================================================== */
/* Honeypot: off-screen rather than display:none, because some bots skip
hidden inputs. A human never sees or tabs into it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* display:flex on a class beats the browser's [hidden]{display:none}, so the
confirmation and the error box were both showing on page load. */
.sentmsg[hidden], .senterr[hidden]{display:none!important}
.sentmsg{display:flex;gap:12px;align-items:flex-start;margin-top:8px;padding:16px 18px;
border:1px solid #bfe3d1;background:var(--ok-100);border-radius:var(--r);color:#12503b;font-size:.95rem}
.sentmsg svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;color:var(--ok)}
.senterr{margin-top:8px;padding:14px 16px;border:1px solid #eec3bf;background:#fbeceb;
border-radius:var(--r);color:#8c3129;font-size:.93rem}
.senterr a{color:inherit;text-decoration:underline}
.enqform button[type=submit][disabled]{opacity:.6;cursor:progress}
/* ==========================================================================
Phones — the diagrams
========================================================================== */
/* Three SVG diagrams carry real content in : the revenue signature on the
home and C&I pages, the aggregation picture on the markets page, and the
commercial-model sketches. Scaled to a 350 px column their labels render at
about 5 px, which is not small — it is unreadable.
Rather than redraw them for mobile, give each one a scrollable frame with a
minimum width, so the diagram keeps its own geometry and the reader swipes.
The fade on the right edge is the only affordance that reliably reads as
"there is more this way" without adding a control. */
@media (max-width:720px){
/* A grid or flex item defaults to min-width:auto, which means a wide child
stretches the track instead of scrolling inside it. Without these two
lines the scroll frame widens the whole page. */
.split > *, .media{min-width:0}
.sig, .diagram{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;overscroll-behavior-x:contain}
.sig > svg{min-width:560px}
.diagram > svg{min-width:620px}
.hww-grid .hww-svg{min-width:0}
/* Decorative hero webs: the shapes carry the meaning, the labels are texture.
At 5 px they read as dirt on the screen. */
.contact-net text, .hww-net text{display:none}
}
/* ==========================================================================
Phones — reading comfort
========================================================================== */
@media (max-width:720px){
/* Anything under 12px is a strain on a phone. These are the mono labels on
stat tiles, captions and spec rows. */
.st-tile .st-l, .systag, .qrpair figcaption, .legaldl dt,
.pc-row .k, .cap, .help, .hint{font-size:.78rem}
.st-tile .st-d{font-size:.86rem}
.prose .datebar{font-size:.78rem}
.segcard .sg-chip{font-size:.76rem}
.st-tile .st-v .u{font-size:.8rem}
/* Full-width buttons stack better than two half-width ones that wrap oddly. */
.ctaband .btns{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
.ctaband .btns .btn{justify-content:center;width:100%}
/* A tap target under ~44px is hard to hit accurately. */
.langsel-menu a, .mobile a{min-height:44px;display:flex;align-items:center}
}
/* ── Home hero: the isometric site scene ──────────────────────────────────
Full bleed and exactly one screen tall. The drawing is generated (see the
scene generator); everything that moves is CSS on the classes it emits, so
the picture still reads correctly with scripting off or motion reduced.
The drawing runs the full height of the window and the header sits inside it
(data-onlight in the template): transparent over the picture, dark type,
turning solid once the page scrolls. */
.heroscene{position:relative;overflow:hidden;margin-top:0;padding:0;
height:100dvh;min-height:540px;max-height:1180px;
background:linear-gradient(180deg,#f9fbfa 0%,#f0f2ef 56%,#ece9e2 100%)}
.heroscene .isoscene{display:block;width:100%;height:100%}
/* header over a light picture: no panel, but the type has to stay legible */
.hdr[data-onlight]:not(.solid) .brandtxt,
.hdr[data-onlight]:not(.solid) .nav>li>a,
.hdr[data-onlight]:not(.solid) .nav>li>button,
.hdr[data-onlight]:not(.solid) .syslink,
.hdr[data-onlight]:not(.solid) .langsel-btn,
.hdr[data-onlight]:not(.solid) .burger{color:var(--text)}
.hdr[data-onlight]:not(.solid) .brandtxt .sub{color:var(--indigo)}
.hdr[data-onlight]:not(.solid) .nav>li>a:hover,
.hdr[data-onlight]:not(.solid) .nav>li>button:hover{color:var(--indigo)}
.hdr[data-onlight]:not(.solid) .logo .wm-light{display:none}
.hdr[data-onlight]:not(.solid) .logo .wm-dark{display:block}
.hs-hint{position:absolute;right:22px;top:calc(var(--hdr) + 12px);z-index:3;margin:0;
font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:.66rem;
letter-spacing:.12em;text-transform:uppercase;color:#93a09c}
/* ── the drawing's own motion ─────────────────────────────────────────── */
.isoscene .blades{animation-name:iso-spin;animation-timing-function:linear;
animation-iteration-count:infinite}
@keyframes iso-spin{to{transform:rotate(360deg)}}
.isoscene .mv{animation-name:iso-drive;animation-timing-function:linear;
animation-iteration-count:infinite}
@keyframes iso-drive{from{transform:translate(0,0)}to{transform:translate(var(--tx),var(--ty))}}
/* A moving thing keeps changing which side of a building it belongs on, and
SVG has no depth buffer. So the generator writes each vehicle once and then
references it once per depth band of its journey; every copy runs the same
full-length drive, and this second animation shows exactly one of them at a
time (26 bands -> a 1/26 window). The hand-over happens at the same pixel,
so it is invisible. */
.isoscene .mvs{animation-name:iso-drive,iso-band;animation-timing-function:linear;
animation-iteration-count:infinite;animation-duration:var(--dur);
animation-delay:var(--del),var(--del2)}
@keyframes iso-band{0%,3.79%{opacity:1}3.85%,100%{opacity:0}}
/* A journey is a straight line with two ends. Without this the vehicle blinks
out at the far end and blinks back in at the near one; with it, it thins
away as it leaves and gathers as it arrives. This rides on the same clock
and the same delay as the drive, so it is the journey that is fading -- not
the band hand-over, which is what the rule above does. The two opacities
multiply, which is exactly what is wanted. */
.isoscene .mvs>use{animation-name:iso-fade;animation-timing-function:linear;
animation-iteration-count:infinite;animation-duration:var(--dur);
animation-delay:var(--del)}
@keyframes iso-fade{0%{opacity:0}7%{opacity:1}90%{opacity:1}100%{opacity:0}}
/* the wellsite: a walking beam rocking about its Samson post, and a flare that
will not sit still. The pivot is written into each beam as an inline
transform-origin, in the drawing's own coordinates. */
.isoscene .nod{animation:iso-nod 3.6s ease-in-out infinite}
.isoscene .nod.n1{animation-delay:-1.8s}
@keyframes iso-nod{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.isoscene .flare{animation:iso-flare 1.6s ease-in-out infinite;
transform-box:fill-box;transform-origin:50% 100%}
@keyframes iso-flare{0%,100%{transform:scaleY(1);opacity:.82}
50%{transform:scaleY(1.28);opacity:1}}
/* the one word in the drawing: the hotel's roof sign. It reads the same in all
five languages, so it is not part of the translation set. */
.isoscene .signtext{font-family:var(--font-display,var(--font,system-ui)),sans-serif;
font-weight:800;fill:#fff;letter-spacing:.16em}
/* the caption on the vision board: same face, but the weight and tracking are
set per line in the markup, because the three lines are not the same size */
.isoscene .visiontext{font-family:var(--font-display,var(--font,system-ui)),sans-serif;
fill:#fff;text-anchor:start}
.isoscene .swell{animation:iso-drift 9s ease-in-out infinite}
.isoscene .swell.s1{animation-delay:-3s}
.isoscene .swell.s2{animation-delay:-6s}
@keyframes iso-drift{0%,100%{transform:translateX(0);opacity:.22}
50%{transform:translateX(-13px);opacity:.32}}
/* our own equipment is the only thing that glows */
.isoscene .cro-glow{opacity:.5;animation:iso-breathe 4.6s ease-in-out infinite}
@keyframes iso-breathe{0%,100%{opacity:.42}50%{opacity:.62}}
/* power: a faint line for the connection, a travelling pulse for the flow */
.isoscene .flowbase{fill:none;stroke:#4bbfa2;stroke-width:2;opacity:.30;stroke-linecap:round}
.isoscene .flowbase.gen{stroke:#4aa8dd;opacity:.28}
.isoscene .flowbase.bus{stroke:#2ea88b;opacity:.38;stroke-width:2.6}
.isoscene .flow{fill:none;stroke:#63f0c8;stroke-width:3.6;stroke-linecap:round;
stroke-dasharray:26 118;animation:iso-dash 4.2s linear infinite}
.isoscene .flow.gen{stroke:#7dd4ff}
.isoscene .flow.bus{stroke-width:4.4}
.isoscene .flow.f1{animation-delay:-.9s}
.isoscene .flow.f2{animation-delay:-1.8s}
.isoscene .flow.f3{animation-delay:-2.7s}
.isoscene .flow.f4{animation-delay:-3.6s}
@keyframes iso-dash{to{stroke-dashoffset:-288}}
/* hotspots */
.isoscene .hot{cursor:pointer}
.isoscene .hot .dot{fill:#04564a;stroke:#fff;stroke-width:2.6;transition:r .16s,fill .16s}
.isoscene .hot .halo{fill:#3fb497;opacity:.22;transform-box:fill-box;transform-origin:center;
animation:iso-pulse 2.8s ease-out infinite}
.isoscene .hot:nth-of-type(2n) .halo{animation-delay:-.9s}
.isoscene .hot:nth-of-type(3n) .halo{animation-delay:-1.8s}
.isoscene .hot:hover .dot,.isoscene .hot:focus-visible .dot{r:7.4;fill:#0d7a68}
.isoscene .hot:hover .halo,.isoscene .hot:focus-visible .halo{opacity:.45;animation:none}
.isoscene .hot:focus{outline:none}
.isoscene .hot:focus-visible .dot{stroke:#04564a;stroke-width:3}
@keyframes iso-pulse{0%{opacity:.30;transform:scale(.7)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0}}
/* One switch stills the whole drawing. */
@media (prefers-reduced-motion:reduce){
.isoscene .blades,.isoscene .mv,.isoscene .flow,.isoscene .swell,
.isoscene .cro-glow,.isoscene .hot .halo,.isoscene .nod,
.isoscene .flare{animation:none}
/* with the band animation off, every copy would show at once: keep one */
.isoscene .mvs{display:none}
.isoscene .mvs.b0{display:block;opacity:1;animation:none}
.isoscene .flow{stroke-dasharray:none;opacity:.30}
}
/* the card a hotspot opens */
.sc-cards{position:absolute;inset:0;pointer-events:none;z-index:4}
.sccard{position:absolute;left:0;top:0;width:272px;padding:13px 15px 14px;
background:rgba(255,255,255,.975);border:1px solid #d9e2df;border-radius:13px;
box-shadow:0 16px 40px rgba(9,32,27,.14);opacity:0;visibility:hidden;
transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
.sccard.on{opacity:1;visibility:visible;transform:translateY(0)}
.sccard h4{margin:0 0 5px;padding-right:16px;font-size:.92rem;letter-spacing:-.01em;color:#08201c}
.sccard::after{content:"\2192";position:absolute;right:14px;top:12px;line-height:1;
font-size:.95rem;color:#0d7a68;opacity:.55}
.sccard p{margin:0;font-size:.82rem;line-height:1.5;color:#4d5c58}
@media (max-width:820px){
.hs-hint{display:none}
/* A phone frame is nothing like this drawing's shape. Fitting the whole thing
into 390px leaves a 190px-tall strip nobody can read, so the phone gets a
shorter frame that crops to the middle of the site — the headquarters, the
yard and the charging station — at a size where the dots are tappable.
The blur filters come off as well: they are the expensive part on a phone. */
/* the header sits inside the picture here too, so no top margin */
.heroscene{margin-top:0;
height:calc(var(--hdr) + 40dvh);min-height:380px;max-height:500px}
.heroscene .isoscene{width:100%;height:100%;max-width:none}
.isoscene .hot .hit{r:26}
.isoscene .cro-glow,.isoscene .iso-flows{filter:none!important}
.isoscene .cro-glow{opacity:.75}
.sccard{width:min(82vw,290px);padding:11px 13px 12px}
.sccard h4{font-size:.86rem}.sccard p{font-size:.78rem}
}
/* ---------- where you are ----------------------------------------------------
The nav marked the current section by colour alone, and only on - so the
two dropdown triggers, which are