@font-face{font-family:Poppins;src:url(../assets/fonts/Poppins-Regular.ttf);font-weight:400}
@font-face{font-family:Poppins;src:url(../assets/fonts/Poppins-Medium.ttf);font-weight:500}
@font-face{font-family:Poppins;src:url(../assets/fonts/Poppins-SemiBold.ttf);font-weight:600}
@font-face{font-family:Poppins;src:url(../assets/fonts/Poppins-Bold.ttf);font-weight:700}
:root{--navy:#0E1F4A;--deep:#08142f;--river:#5BA8D5;--mist:#8FC3DD;--ink:#e8eef7;--mute:#9fb0c8;--line:rgba(143,195,221,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,sans-serif;background:var(--deep);color:var(--ink);line-height:1.6}
a{color:var(--mist)}.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

nav{position:sticky;top:0;z-index:50;background:rgba(8,20,47,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
nav img{height:34px}nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px}
nav ul a{color:var(--ink);text-decoration:none;opacity:.8}nav ul a:hover{opacity:1}
.btn{display:inline-block;background:var(--river);color:var(--deep);font-weight:600;padding:13px 26px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:15px}
.btn:hover{background:var(--mist)}.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
section{padding:96px 0;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--river);text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600}
h1,h2,h3{line-height:1.15;margin:.3em 0}h1{font-size:clamp(38px,6vw,68px);font-weight:700}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:600}h3{font-size:20px;font-weight:600}
.lead{font-size:18px;color:var(--mute);max-width:680px}
.hero{padding:120px 0 100px;background:radial-gradient(ellipse at 80% 0%,rgba(91,168,213,.25),transparent 60%),linear-gradient(180deg,var(--navy),var(--deep))}
.hero .role{font-size:18px;color:var(--mist);font-weight:500}
.hero h1 span{color:var(--river)}
.grid{display:grid;gap:22px}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:rgba(14,31,74,.55);border:1px solid var(--line);border-radius:10px;padding:28px}
.card ul{padding-left:18px;color:var(--mute);font-size:15px}
.tag{font-size:12px;color:var(--mist);letter-spacing:.08em;text-transform:uppercase}
.proof{padding:40px 0;background:var(--navy)}
.proof .row{display:flex;flex-wrap:wrap;gap:40px;align-items:center;justify-content:space-between}
.stat b{display:block;font-size:34px;color:var(--river);font-weight:700}.stat span{font-size:13px;color:var(--mute)}
.markets{font-size:13px;color:var(--mute);letter-spacing:.06em;margin-top:18px}
.src{font-size:11px;color:#6f819c;margin-top:8px}
.check label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.check input{margin-top:6px;accent-color:var(--river)}
#checkOut{margin-top:20px;padding:18px;border-left:3px solid var(--river);background:rgba(91,168,213,.08);min-height:60px}
.tier.pop{border-color:var(--river);box-shadow:0 0 0 1px var(--river)}
.foot-note{margin-top:14px;font-size:14px;color:var(--mist)}
.case .out{margin-top:12px;font-size:14px;color:var(--mist)}
.sector{text-decoration:none;color:inherit;display:block;transition:.2s}.sector:hover{border-color:var(--river);transform:translateY(-3px)}
.sector .ic{font-size:26px;color:var(--river);font-weight:700}
.steps{counter-reset:s}.step b{font-size:42px;color:var(--river);font-weight:700}
.op{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;max-width:820px}
.op 

.cta{background:linear-gradient(135deg,var(--navy),#123a6b);text-align:center}
details{border-bottom:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:500}details p{color:var(--mute)}
footer{padding:40px 0;font-size:13px;color:var(--mute)}
@media(max-width:860px){.g3,.g2,.op{grid-template-columns:1fr}nav ul{display:none}}

/* Trusted-by client logos — originals, no recolour; uniform tiles so dark and light marks both read on navy */
.client-logos{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.client-logo{display:flex;align-items:center;justify-content:center;height:76px;padding:14px 18px;border-radius:12px;background:#F4F7FB;border:1px solid rgba(143,195,221,.25)}
.client-logo--dark{background:#0A1638}
.client-logo img{display:block;max-width:100%;max-height:38px;width:auto;height:auto;object-fit:contain}
@media (max-width:640px){.client-logos{grid-template-columns:1fr 1fr}.client-logo{height:64px}.client-logo img{max-height:32px}}
@media (max-width:380px){.client-logos{grid-template-columns:1fr}}

/* v1.5: four separate, equal client tiles: Ampd, Düchting, EODev, Toyota */
.client-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
.client-logo .logo-toyota{max-height:46px}
@media (max-width:640px){.client-logos{grid-template-columns:1fr 1fr}.client-logo .logo-toyota{max-height:40px}}
@media (max-width:380px){.client-logos{grid-template-columns:1fr}}

.foot-links{margin-top:14px;line-height:1.9}.foot-links a{color:inherit}
div.card.sector{cursor:default}

/* Mobile section nav: native <details> works without JS and is keyboard-operable */
.mnav{display:none;position:relative;margin-left:auto;margin-right:12px}
.mnav summary{list-style:none;cursor:pointer;color:var(--ink);font-size:14px;font-weight:500;padding:8px 14px;border:1px solid var(--line);border-radius:8px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:" ▾"}.mnav[open] summary::after{content:" ▴"}
.mnav summary:focus-visible,.mnav-list a:focus-visible{outline:2px solid #8FC3DD;outline-offset:2px}
.mnav-list{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;list-style:none;margin:0;padding:8px;background:rgba(8,20,47,.98);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.mnav-list a{display:block;padding:12px 14px;color:var(--ink);text-decoration:none;border-radius:6px}
.mnav-list a:hover{background:rgba(143,195,221,.12)}
@media(min-width:861px){nav ul.dnav{display:flex}}
@media(max-width:860px){.mnav{display:block}}
@media(max-width:420px){nav img{height:28px}nav .btn{padding:8px 12px;font-size:13px}.mnav{margin-right:8px}}
.mnav[open] .mnav-list{display:block}

/* v2 formatting (7 Nov): shared row alignment for every repeated card group.
   Cards in one group share their parent's row tracks (CSS subgrid), so labels, titles, subtitles,
   bodies and footers line up across cards whatever the text length. Without subgrid they fall back
   to flex columns with footers pinned to the bottom. */
#tiers .grid,#work .grid,#sectors .grid,#process .grid{align-items:stretch}
.tier,.case>.card,#sectors .sector,#process .step{display:flex;flex-direction:column;gap:12px}
.tier>*,.case>.card>*,#sectors .sector>*,#process .step>*{margin:0}
.tier>.foot-note,.case>.card>.out,#sectors .sector>.tag{margin-top:auto}
.tier ul{margin:4px 0 0;display:flex;flex-direction:column;gap:6px}
#process .step{padding:4px 0}
@supports (grid-template-rows:subgrid){
 @media(min-width:861px){
  #tiers .grid,#work .grid,#sectors .grid{row-gap:22px}
  .tier{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px}
  .case>.card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px}
  #sectors .sector{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px}
  .tier>.foot-note,.case>.card>.out,#sectors .sector>.tag{margin-top:0;align-self:end}
  .tier>ul{align-self:start}
 }
 @media(min-width:620px){
  #process .step{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:10px}
 }
}
/* Proof band: Trusted-by and Markets as two aligned columns, labels on one line */
.proof .row{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px!important;align-items:start!important}
.proof .stat{min-width:0!important}
.proof .stat>.tag{display:block;margin-bottom:14px}
.proof .stat>br{display:none}
.proof .client-logos{margin-top:0}
@media(max-width:860px){.proof .row{grid-template-columns:1fr}}
/* Diagnostic: copy column and checklist start on the same line */
#check .grid>div>.eyebrow{margin-top:0}
#check .check{padding-top:16px}
/* Consistent heading-to-content rhythm */
section h2{margin-bottom:.4em}

/* v2.1 formatting: row-level alignment. Each tier card spans 9 shared rows:
   label, title, subtitle, bullet 1-5, terms. The <ul> is itself a subgrid, so bullet N
   in every column shares one row height and starts on the same line. Footer, outcome and
   link rows are top-aligned so their first lines start level. */
@supports (grid-template-rows:subgrid){
 @media(min-width:861px){
  .tier{grid-row:span 9}
  .tier>ul{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px;margin:0;align-self:stretch}
  .tier>ul>li{display:list-item;align-self:start}
  .tier>.foot-note,.case>.card>.out,#sectors .sector>.tag{align-self:start;margin-top:8px}
 }
}