/* Layout: Petrol & Amber: dark petrol "workshop" ground, one amber signal colour, a zigzag "Z" stroke as the recurring motif; hash-routed pages */
:root{
  --ground:#0D191D; --surface:#132429; --raised:#1A3036; --line:#26434A;
  --ink:#EAF2EE; --muted:#93ABA8; --signal:#FFC23D; --signal-ink:#1A1404; --mint:#7FE0CF; --term-bg:#081013;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --s1:.8125rem; --s2:1rem; --s3:1.1875rem; --s4:1.5rem; --s5:clamp(1.9rem,4vw,2.75rem); --s6:clamp(2.3rem,6.5vw,4.6rem);
  --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--s2);line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ground)}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:var(--s6);font-weight:800}
h2{font-size:var(--s5);font-weight:700}
h3{font-size:var(--s3);font-weight:700;letter-spacing:-.01em}
p{margin:0;max-width:64ch}
.eyebrow{font-family:var(--mono);font-size:var(--s1);text-transform:uppercase;letter-spacing:.12em;color:var(--mint)}
.lead{font-size:var(--s3);color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.875rem}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.logo svg{width:30px;height:30px}
nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
nav a{display:block;text-decoration:none;padding:8px 11px;border-radius:8px;color:var(--muted);font-weight:500}
nav a:hover{color:var(--ink);background:var(--surface)}
nav a[aria-current="page"]{color:var(--ink)}
nav a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--signal);margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:var(--s2);text-decoration:none;padding:12px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn-signal{background:var(--signal);color:var(--signal-ink)}
.btn-signal:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--surface)}
nav .btn{padding:8px 14px;margin-left:8px;color:var(--signal-ink)}
nav .btn:hover{background:var(--signal)}
.menu-btn{display:none;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 12px;font:600 var(--s1)/1 var(--mono);letter-spacing:.08em;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--ground);border-bottom:1px solid var(--line);display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch;padding:8px max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px))}
  nav .btn{margin:8px 0 0;justify-content:center}
}

main section.page{padding-block:clamp(48px,8vw,96px)}
.stack{display:flex;flex-direction:column;gap:18px}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.block{padding-block:clamp(56px,8vw,96px);border-top:1px solid var(--line)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card p{color:var(--muted)}
.tag{display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.on{border-color:var(--signal);color:var(--signal)}
.tag.mint{border-color:var(--mint);color:var(--mint)}
ul.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.ticks li{display:flex;gap:10px}
ul.ticks li::before{content:"";flex:none;width:14px;height:8px;margin-top:.55em;background:var(--signal);clip-path:polygon(0 50%,25% 0,50% 50%,75% 0,100% 50%,100% 100%,75% 50%,50% 100%,25% 50%,0 100%)}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1 em{font-style:normal;color:var(--signal)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.term{background:var(--term-bg,#081013);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-family:var(--mono);font-size:.85rem;min-width:0}
.term-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.75rem}
.term-top i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.term pre{margin:0;padding:18px 16px 22px;overflow-x:auto;line-height:1.75;color:var(--muted)}
.term .c{color:var(--ink)} .term .ok{color:var(--mint)} .term .y{color:var(--signal)}
.cursor{display:inline-block;width:8px;height:1em;vertical-align:-2px;background:var(--signal);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.zig{display:block;width:100%;height:56px;margin-top:12px}
.zig path{fill:none;stroke-width:3}
.zig .base{stroke:var(--line)}
.zig .flow{stroke:var(--signal);stroke-dasharray:60 900;animation:flow 6s linear infinite}
@keyframes flow{from{stroke-dashoffset:960}to{stroke-dashoffset:0}}

/* practice areas */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.area{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.area .num{font-family:var(--mono);font-size:var(--s1);color:var(--signal);letter-spacing:.08em}
.area .tagline{color:var(--ink);font-weight:600;font-size:1.05rem}
.area p{color:var(--muted)}
.area .approach{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:.92rem;color:var(--muted)}
.area .approach b{color:var(--mint);font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}

/* home area list */
.arealist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.arealist a{display:flex;flex-direction:column;gap:6px;padding:24px 26px;text-decoration:none;background:var(--surface);border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .15s}
.arealist a:hover{background:var(--raised)}
.arealist a strong{font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em}
.arealist a span{color:var(--muted);font-size:.95rem}

.core{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.core{grid-template-columns:1fr}}
.core-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.core-list li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);align-items:baseline}
.core-list li:last-child{border-bottom:0}
.core-list b{font-family:var(--mono);font-weight:500;color:var(--signal);font-size:var(--s1);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:480px){.core-list li{grid-template-columns:1fr;gap:4px}}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px}
.principles div{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--line);position:relative}
.principles div::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--signal)}
.principles h3{font-size:1.05rem}
.principles p{color:var(--muted);font-size:.95rem}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden}
.step{padding:26px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.step:last-child{border-right:0}
.step b{font-family:var(--mono);color:var(--signal);font-weight:500;font-size:var(--s1)}
.step p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}

/* platforms */
.platforms{display:flex;flex-wrap:wrap;gap:10px}
.platforms span{font-family:var(--display);font-weight:500;font-size:.95rem;padding:12px 18px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:var(--surface)}

/* case studies */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{font:500 .875rem/1 var(--body);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px}
.case{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.case .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.case .co{font-family:var(--mono);font-size:var(--s1);color:var(--muted);letter-spacing:.04em}
.case h3{font-size:1.2rem}
.case p{color:var(--muted);font-size:.95rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:12px;padding-block:6px}
.kpis div{border-top:2px solid var(--signal);padding-top:8px}
.kpis strong{display:block;font-family:var(--display);font-size:1.3rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpis span{color:var(--muted);font-size:.82rem;line-height:1.35;display:block}
.take{background:var(--ground);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.92rem}
.take b{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);display:block;margin-bottom:4px}
.case .src{margin-top:auto;font-size:.85rem;color:var(--muted)}
.case .src a{color:var(--signal)}
.disclaimer{border:1px dashed var(--line);border-radius:12px;padding:14px 16px;color:var(--muted);font-size:.9rem;margin-bottom:28px;max-width:none}

.prod-name{font-family:var(--display);font-size:var(--s4);font-weight:800;letter-spacing:-.02em}
.prod-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.band{background:var(--signal);color:var(--signal-ink);border-radius:20px;padding:clamp(28px,5vw,56px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h2{max-width:22ch}
.band .btn{background:var(--signal-ink);color:var(--signal)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.fact{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:6px;min-width:0}
.fact p{color:var(--muted);font-size:.95rem}
.fact h3{font-size:1.02rem}
.vmv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.values{display:flex;flex-wrap:wrap;gap:10px}
.values span{padding:10px 16px;border-radius:999px;border:1px solid var(--signal);color:var(--signal);font-weight:600}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-weight:500;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal);font-family:var(--mono)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);padding-bottom:20px}

.news{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end}
@media (max-width:900px){.news{grid-template-columns:1fr}}
.news-form{display:grid;gap:12px}
form{display:grid;gap:16px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
.note{font-family:var(--mono);font-size:var(--s1);color:var(--mint)}
.copy{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.copy code{font-family:var(--mono);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:10px 12px;user-select:all}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer a{text-decoration:none} footer a:hover{color:var(--ink)}
footer ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* moving logo carousel */
.marquee{display:flex;overflow:hidden;gap:16px;padding-block:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee + .marquee{margin-top:8px}
.marquee-track{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex:none;min-width:100%;justify-content:flex-start;animation:marquee 70s linear infinite}
.marquee.reverse .marquee-track{animation-direction:reverse;animation-duration:48s}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{flex:none;display:flex;align-items:center;justify-content:center;height:72px;min-width:170px;padding:0 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.marquee-track li img{height:28px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.85;transition:filter .2s,opacity .2s}
.marquee-track li:hover img{filter:none;opacity:1}
.marquee-track li span{font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--ink);white-space:nowrap}
.marquee-track li.has-logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 16px))}}
@media (prefers-reduced-motion:reduce){.marquee{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}.marquee-track{animation:none;flex-wrap:wrap;justify-content:flex-start}.marquee-track[aria-hidden="true"],.marquee.reverse{display:none}}

/* about: values & capabilities */
.valgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.val{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.val .num{font-family:var(--mono);font-size:var(--s1);color:var(--signal);letter-spacing:.08em}
.val p{color:var(--muted)}
.capgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cap{padding:26px;display:flex;flex-direction:column;gap:14px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.cap h3{font-size:1.05rem}
.cap .ticks{font-size:.95rem}

/* interactive build terminal */
.term-top{flex-wrap:wrap;gap:10px}
.term-top .dots{display:flex;gap:6px}
.ztabs{display:flex;gap:4px;flex-wrap:wrap}
.ztabs button,.zplan-btn{font:500 .75rem/1 var(--mono);letter-spacing:.04em;padding:7px 10px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.ztabs button[aria-selected="true"]{color:var(--ink);border-color:var(--line);background:var(--surface)}
.ztabs button:hover{color:var(--ink)}
.zplan-btn{margin-left:auto;background:var(--signal);color:var(--signal-ink);font-weight:600}
.zplan-btn:hover{filter:brightness(1.08)}
.term-body{min-height:300px;padding:18px 16px 14px;overflow-x:auto}
.term-body pre{margin:0;padding:0;line-height:1.75;color:var(--muted);white-space:pre}
.term-foot{border-top:1px solid var(--line);padding:10px 16px;color:var(--muted);font-size:.72rem;letter-spacing:.03em}
.zq{color:var(--ink);margin:6px 0 8px}
.zopts{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.zopts button{font:inherit;text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);padding:5px 8px;border-radius:6px;cursor:pointer}
.zopts button::before{content:"›  ";color:var(--signal)}
.zopts button:hover,.zopts button:focus-visible{color:var(--ink);border-color:var(--line);background:var(--surface)}
.zline{white-space:pre-wrap;line-height:1.7;color:var(--muted)}
.zline.ans{color:var(--mint)}
.zplan{border:1px dashed var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;color:var(--ink);line-height:1.7}
.zplan b{color:var(--signal);font-weight:500}
.zacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.zacts a,.zacts button{font:600 .8rem/1 var(--mono);padding:10px 12px;border-radius:8px;text-decoration:none;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
.zacts a{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.zplan-note{margin-bottom:16px}

/* manifesto */
.manifesto{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:end}
@media (max-width:900px){.manifesto{grid-template-columns:1fr}}
.m-line{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,8vw,6rem);line-height:.98;letter-spacing:-.035em;max-width:none}
.m-line span{color:var(--signal)}
.m-sub{color:var(--muted);font-size:var(--s3)}
/* ecosystem */
.eco{display:grid;grid-template-columns:1fr minmax(220px,.8fr) 1fr;gap:20px;align-items:center}
.eco-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.eco-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eco-node{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-decoration:none;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s,transform .15s}
.eco-node:hover{border-color:var(--signal);transform:translateY(-2px)}
.eco-node b{font-family:var(--display);font-size:1rem;letter-spacing:-.01em}
.eco-node span{grid-column:1;color:var(--muted);font-size:.9rem}
.eco-node .st{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.eco-node .st.live{border-color:var(--mint);color:var(--mint)}
.eco-node .st.build{border-color:var(--signal);color:var(--signal)}
.eco-hub{aspect-ratio:1;max-width:100%;border-radius:50%;border:1px dashed var(--signal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(circle,color-mix(in srgb,var(--signal) 14%,transparent),transparent 70%);position:relative}
.eco-hub::before,.eco-hub::after{content:"";position:absolute;top:50%;width:20px;border-top:1px dashed var(--signal)}
.eco-hub::before{right:100%}.eco-hub::after{left:100%}
.eco-hub svg{width:56px;height:56px}
.eco-hub strong{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em}
.eco-hub span{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.eco-row{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px dashed var(--line)}
.eco-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
@media (max-width:900px){.eco{grid-template-columns:1fr}.eco-hub{order:-1;width:220px;margin:0 auto}.eco-hub::before,.eco-hub::after{display:none}}
/* trust */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.trust div{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.trust b{font-family:var(--display);font-weight:500;font-size:1rem}
.trust span{color:var(--muted);font-size:.92rem}
/* labs */
.prod-line{color:var(--ink)!important;font-weight:600;font-size:1.05rem}
.prod .for{margin-top:auto;font-family:var(--mono);font-size:.75rem;color:var(--mint);letter-spacing:.04em}
/* legal */
.legal{max-width:820px;display:flex;flex-direction:column;gap:14px}
.legal h1{font-size:var(--s5);margin-bottom:4px}
.legal h2{font-size:1.15rem;margin-top:22px}
.legal p,.legal li{color:var(--muted)}
.draft-note{font-family:var(--mono);font-size:var(--s1);color:var(--signal);border:1px dashed var(--signal);border-radius:10px;padding:10px 14px}
.ctable{width:100%;border-collapse:collapse;min-width:520px}
.ctable th,.ctable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable th{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}

.compass-out{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;padding:28px;border:1px dashed var(--signal);border-radius:16px}
@media (max-width:900px){.compass-out{grid-template-columns:1fr}}
.compass-out > div{display:flex;flex-direction:column;gap:14px}
.compass-cta{justify-content:center}
.compass-cta p{color:var(--muted)}
.compass-cta .btn{align-self:flex-start}
.area-hero{border-color:var(--signal)}
.foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.gdpr{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;padding:6px 10px;border:1px solid var(--mint);color:var(--mint);border-radius:999px}
.gdpr svg{width:16px;height:16px}

/* brand mark follows the palette */
.logo svg rect,.eco-hub svg rect{fill:var(--signal)}
.logo svg path,.eco-hub svg path{stroke:var(--signal-ink)}

/* industries */
.ind-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.ind-jump a{font-size:.88rem;text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.ind-jump a:hover{color:var(--ink);border-color:var(--signal)}
.ind-list{display:flex;flex-direction:column;gap:20px}
.ind{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:18px;scroll-margin-top:90px}
.ind-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.ind-head h2{font-size:var(--s4)}
.ind-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.ind-cols > div{display:flex;flex-direction:column;gap:10px;min-width:0}
ul.dash{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
ul.dash li::before{content:"— ";color:var(--line)}
.ind-svc{display:flex;flex-wrap:wrap;gap:8px}
.ind-links{margin-top:18px;font-size:.92rem;line-height:1.9;max-width:none}
.ind-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ind-links a:hover{border-color:var(--signal)}
/* insights */
.ins-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:20px}
.ins-grid .ins-big{grid-row:1/3}
.ins-grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-template-rows:none}
@media (max-width:900px){.ins-grid{grid-template-columns:1fr}.ins-grid .ins-big{grid-row:auto}}
.ins{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:border-color .15s,transform .15s;min-width:0}
.ins:hover{border-color:var(--signal);transform:translateY(-2px)}
.ins h3{font-size:1.25rem;line-height:1.2}
.ins-big h3{font-size:clamp(1.5rem,3vw,2.1rem)}
.ins p{color:var(--muted);font-size:.95rem}
.ins .more{margin-top:auto;color:var(--signal);font-weight:600;font-size:.9rem}
/* article */
.article{max-width:760px;display:flex;flex-direction:column;gap:16px}
.article h1{font-size:clamp(2rem,4.6vw,3.1rem)}
.article h2{font-size:1.35rem;margin-top:18px}
.article p{color:var(--muted);font-size:1.05rem;line-height:1.75}
.article p.lead{color:var(--ink);font-size:var(--s3)}
.article a{color:var(--signal)}
.article .band a.btn{color:var(--signal-ink)}
.art-meta{font-family:var(--mono);font-size:var(--s1)!important;color:var(--muted)}
.back{font-size:.9rem;text-decoration:none}
.art-box{border:1px solid var(--line);border-left:3px solid var(--signal);background:var(--surface);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;margin-top:12px}

/* light / dark mode toggle */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;order:3}
.theme-btn:hover{border-color:var(--signal);color:var(--signal)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-moon{display:none}
:root:not(.is-dark) .theme-btn .i-sun{display:none}
:root:not(.is-dark) .theme-btn .i-moon{display:block}
.bar nav{margin-left:auto}
.bar{gap:12px}
@media (max-width:900px){.bar .theme-btn{margin-left:auto}.menu-btn{order:4}}
/* Petrol & Amber: light mode */
:root[data-mode="light"]{--ground:#F4F7F5;--surface:#FFFFFF;--raised:#EBF0EE;--line:#D3DEDB;--ink:#0D191D;--muted:#4C6461;--signal:#9A6700;--signal-ink:#FFFFFF;--mint:#1E7A6C;--term-bg:#0D191D;color-scheme:light}
:root[data-mode="light"] .term{--ink:#EAF2EE;--muted:#93ABA8;--mint:#7FE0CF;--surface:#132429;--line:#26434A;--signal:#FFC23D;--signal-ink:#1A1404;color:var(--ink)}
:root[data-mode="light"] .marquee-track li img{filter:grayscale(1);opacity:.7}
:root[data-mode="light"] header{box-shadow:0 1px 0 var(--line)}
:root[data-mode="light"] .band{background:var(--ink);color:#FFFFFF}
:root[data-mode="light"] .band .btn{background:#FFC23D;color:#1A1404}

/* dropdown menus */
.has-dd{position:static}
.dd-top{display:flex;align-items:center}
.dd-toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:30px;margin-left:-6px;background:none;border:0;color:var(--muted);cursor:pointer;border-radius:6px}
.dd-toggle svg{width:12px;height:12px;transition:transform .15s}
.has-dd.open .dd-toggle svg{transform:rotate(180deg)}
.dd-toggle:hover{color:var(--ink)}
.dd{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(860px,calc(100vw - 32px));padding-top:8px;display:none;z-index:30}
.has-dd.open .dd{display:block}
.dd-inner{display:grid;grid-template-columns:200px 1fr;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.dd-side{display:flex;flex-direction:column;gap:14px;padding-right:20px;border-right:1px solid var(--line)}
.dd-side .dd-all{color:var(--signal);font-weight:600;text-decoration:none;padding:0;background:none}
.dd-side .dd-all:hover{background:none;text-decoration:underline}
.dd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.dd-grid a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.dd-grid a b{font-weight:600;font-size:.95rem}
.dd-grid a span{color:var(--muted);font-size:.84rem;line-height:1.35}
.dd-grid a:hover,.dd-grid a:focus-visible{background:var(--raised)}
nav .dd a[aria-current]::after,.dd-grid a::after{display:none}
@media (max-width:900px){
  nav{max-height:calc(100vh - 70px);overflow-y:auto}
  .dd-top{justify-content:space-between}
  .dd-top > a{flex:1}
  .dd-toggle{width:44px;height:40px;margin-left:0}
  .dd{position:static;transform:none;width:auto;padding-top:0}
  .dd-inner{grid-template-columns:1fr;gap:8px;padding:8px 0 12px 12px;border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
  .dd-side{display:none}
  .dd-grid{grid-template-columns:1fr}
}
html{scroll-padding-top:90px}

/* pricing */
.price-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;padding:clamp(24px,4vw,40px);border:1px solid var(--signal);border-radius:16px;background:var(--surface);margin-bottom:8px}
@media (max-width:900px){.price-hero{grid-template-columns:1fr}}
.price-hero-side{display:flex;flex-direction:column;gap:10px;justify-content:center;padding-left:32px;border-left:1px solid var(--line)}
@media (max-width:900px){.price-hero-side{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--line)}}
.price-hero-side .btn{align-self:flex-start;margin-top:6px}
.credit{color:var(--mint);font-size:.92rem}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.price-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.price{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.price-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.price-top h3{font-size:1.1rem}
.price-amt{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price-amt strong{font-family:var(--display);font-size:1.7rem;letter-spacing:-.02em;color:var(--signal);font-variant-numeric:tabular-nums}
.price-amt.big strong{font-size:clamp(2.2rem,5vw,3rem)}
.price-amt .from,.price-amt .unit{color:var(--muted);font-size:.9rem}
.price-time{font-family:var(--mono);font-size:var(--s1);color:var(--mint)}
.price-desc{color:var(--muted)}
.price .ticks{font-size:.92rem;margin-top:4px}
.faq details p a{color:var(--signal)}

/* ---------- colour accents: practice areas ---------- */
.arealist{gap:14px;border:0;border-radius:0;overflow:visible}
.arealist a{--c:var(--signal);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));border-top:3px solid var(--c);border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,var(--surface)),var(--surface) 70%);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.arealist a::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:var(--c);opacity:.08;transition:transform .35s ease,opacity .35s ease}
.arealist a:hover{transform:translateY(-4px);box-shadow:0 14px 30px color-mix(in srgb,var(--c) 22%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 26%,var(--surface)),var(--surface) 75%)}
.arealist a:hover::after{transform:scale(1.6);opacity:.14}
.arealist a strong{color:var(--ink)}
.arealist a:nth-child(1){--c:#FFC23D}
.arealist a:nth-child(2){--c:#7FE0CF}
.arealist a:nth-child(3){--c:#7FB8FF}
.arealist a:nth-child(4){--c:#B79CFF}
.arealist a:nth-child(5){--c:#FF8A6B}
.arealist a:nth-child(6){--c:#B8E07F}
:root[data-mode="light"] .arealist a:nth-child(1){--c:#C98A00}
:root[data-mode="light"] .arealist a:nth-child(2){--c:#169C86}
:root[data-mode="light"] .arealist a:nth-child(3){--c:#2F6FD6}
:root[data-mode="light"] .arealist a:nth-child(4){--c:#7A57D6}
:root[data-mode="light"] .arealist a:nth-child(5){--c:#D9532E}
:root[data-mode="light"] .arealist a:nth-child(6){--c:#5E9A1E}
/* full-width tinted section bands */
.bleed{position:relative;isolation:isolate}
.bleed::before{content:"";position:absolute;inset:0 50%;margin:0 -50vw;z-index:-1;background:linear-gradient(180deg,var(--raised),color-mix(in srgb,var(--raised) 40%,var(--ground)))}
.bleed + .block{border-top:0}
.bleed{border-top:0}

/* ---------- motion ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .35s ease both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
header{animation:fade .5s ease both}
main section.page > .wrap > .hero > *,main section.page > .wrap > .head > *,main section.page > .wrap.article > *,main section.page > .wrap.legal > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
main .hero > *:nth-child(2),main .head > *:nth-child(2),.article > *:nth-child(2){animation-delay:.08s}
main .hero > *:nth-child(3),main .head > *:nth-child(3),.article > *:nth-child(3){animation-delay:.16s}
main .head > *:nth-child(4),.article > *:nth-child(4){animation-delay:.24s}
main .hero .stack > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
main .hero .stack > *:nth-child(2){animation-delay:.08s}
main .hero .stack > *:nth-child(3){animation-delay:.16s}
main .hero .stack > *:nth-child(4){animation-delay:.24s}
main .hero .term{animation:rise .8s .3s cubic-bezier(.2,.7,.2,1) both}
/* click feedback */
.btn,.arealist a,.eco-node,.ins,.dd-grid a,.filters button,.ztabs button,.zplan-btn,.theme-btn{-webkit-tap-highlight-color:transparent}
.btn:active,.zplan-btn:active,.theme-btn:active,.filters button:active{transform:scale(.96)}
.arealist a:active,.ins:active,.eco-node:active{transform:scale(.98)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.btn{position:relative;overflow:hidden}
.dd .dd-inner{animation:rise .25s ease both}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

html{overflow-x:clip}

/* tile illustrations (swap for photos: add images/tile-<name>.jpg and set --photo) */
.arealist a{min-height:190px;justify-content:flex-start;background-image:var(--photo,none),linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,var(--surface)),var(--surface) 70%);background-size:cover;background-position:center}
.arealist a strong,.arealist a span{position:relative;z-index:1;max-width:68%}
.tile-art{position:absolute;right:-6px;bottom:-10px;width:150px;height:150px;color:var(--c);opacity:.38;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;pointer-events:none}
.arealist a:hover .tile-art{transform:translate(-6px,-6px) scale(1.08) rotate(-3deg);opacity:.7}
.arealist a::after{opacity:.05}
@media (max-width:480px){.arealist a{min-height:150px}.tile-art{width:120px;height:120px}}
@media (prefers-reduced-motion:reduce){.tile-art{transition:none}}

/* case study + trust illustrations */
.case{position:relative;overflow:hidden;--c:#7FE0CF}
.case > *{position:relative;z-index:1}
.case .case-art{position:absolute;z-index:0;top:14px;right:10px;width:120px;height:120px;color:var(--c);opacity:.22;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s;pointer-events:none}
.case:hover .case-art{opacity:.5;transform:scale(1.08) rotate(-4deg)}
.case h3,.case .co{max-width:calc(100% - 90px)}
.case{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,var(--surface)),var(--surface) 60%);border-top:3px solid var(--c);transition:transform .2s ease,box-shadow .2s ease}
.case:hover{transform:translateY(-4px);box-shadow:0 14px 30px color-mix(in srgb,var(--c) 18%,transparent)}
.case[data-art="agents"]{--c:#FFC23D}.case[data-art="impl"]{--c:#7FE0CF}.case[data-art="eng"]{--c:#7FB8FF}
.case[data-art="data"]{--c:#B79CFF}.case[data-art="sec"]{--c:#FF8A6B}.case[data-art="cloud"]{--c:#B8E07F}
:root[data-mode="light"] .case[data-art="agents"]{--c:#C98A00}:root[data-mode="light"] .case[data-art="impl"]{--c:#169C86}:root[data-mode="light"] .case[data-art="eng"]{--c:#2F6FD6}
:root[data-mode="light"] .case[data-art="data"]{--c:#7A57D6}:root[data-mode="light"] .case[data-art="sec"]{--c:#D9532E}:root[data-mode="light"] .case[data-art="cloud"]{--c:#5E9A1E}
.case .kpis div{border-top-color:var(--c)}
.case .tag{border-color:var(--c);color:var(--c)}
.trust div{position:relative;overflow:hidden;min-height:150px;--c:#7FE0CF;border-top:3px solid var(--c);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,var(--surface)),var(--surface) 65%);transition:transform .2s ease,box-shadow .2s ease}
.trust div > b,.trust div > span{position:relative;z-index:1;max-width:72%}
.trust-art{position:absolute;right:-8px;bottom:-8px;width:104px;height:104px;color:var(--c);opacity:.32;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s;pointer-events:none}
.trust div:hover{transform:translateY(-4px);box-shadow:0 14px 30px color-mix(in srgb,var(--c) 18%,transparent)}
.trust div:hover .trust-art{opacity:.65;transform:translate(-6px,-6px) scale(1.08)}
.trust div:nth-child(1){--c:#7FB8FF}.trust div:nth-child(2){--c:#FF8A6B}.trust div:nth-child(3){--c:#7FE0CF}.trust div:nth-child(4){--c:#FFC23D}
:root[data-mode="light"] .trust div:nth-child(1){--c:#2F6FD6}:root[data-mode="light"] .trust div:nth-child(2){--c:#D9532E}:root[data-mode="light"] .trust div:nth-child(3){--c:#169C86}:root[data-mode="light"] .trust div:nth-child(4){--c:#C98A00}

/* ---------- scroll motion (works in every browser) ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--signal);z-index:40;pointer-events:none}
header{transition:box-shadow .3s ease,background .3s ease}
header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.rv{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.rv.rv-wait{opacity:.35;transform:translateY(36px) scale(.98)}
.rv-left.rv-wait{transform:translateX(-40px)}
.rv-right.rv-wait{transform:translateX(40px)}
.parallax{will-change:transform}
@media (prefers-reduced-motion:reduce){.rv,.rv.rv-wait{transition:none;opacity:1;transform:none}.scroll-progress{display:none}}

/* ---------- full footer ---------- */
footer.site-foot{border-top:1px solid var(--line);padding-block:56px 28px;color:var(--muted);font-size:.92rem;background:linear-gradient(180deg,var(--surface),var(--ground))}
footer.site-foot .wrap{display:block}
footer.site-foot a{text-decoration:none}
.ftop{display:grid;grid-template-columns:minmax(240px,1.1fr) 3fr;gap:clamp(32px,5vw,64px)}
.fbrand{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:340px}
.fbrand .logo{color:var(--ink)}
.fbrand p{color:var(--muted);line-height:1.6}
.fcontact{display:flex;flex-direction:column;gap:2px}
.flabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.fmail{color:var(--ink);user-select:all}
.fcta{padding:10px 16px;font-size:.92rem}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.fhead{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fcol a{display:inline;padding:0;color:var(--muted);transition:color .15s}
.fcol a:hover{color:var(--signal)}
.fbottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center}
.fbl{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.flegal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.flegal a{color:var(--muted)}
.flegal a:hover{color:var(--ink)}
.totop{color:var(--signal)!important}
@media (max-width:1000px){.ftop{grid-template-columns:1fr}.fbrand{max-width:none}}
@media (max-width:720px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media (max-width:360px){.fcols{grid-template-columns:1fr}}

/* ---------- service page ---------- */
.svc-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,56px);align-items:end}
@media (max-width:900px){.svc-hero{grid-template-columns:1fr}}
.svc-hero .head{margin-bottom:0}
.keyfacts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.keyfacts div{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.keyfacts dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.keyfacts dd{margin:0;font-family:var(--display);font-size:1.05rem;color:var(--ink);line-height:1.25}
.timeline{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:0}
.timeline::before{content:"";position:absolute;left:118px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--signal),var(--mint))}
.timeline li{display:grid;grid-template-columns:100px 1fr;gap:36px;padding:14px 0;position:relative}
.timeline li::before{content:"";position:absolute;left:112px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--signal)}
.t-when{font-family:var(--mono);font-size:.82rem;color:var(--signal);padding-top:4px;text-align:right}
.timeline h3{font-size:1.05rem;margin-bottom:4px}
.timeline p{color:var(--muted)}
@media (max-width:600px){.timeline::before{left:7px}.timeline li{grid-template-columns:1fr;gap:4px;padding-left:30px}.timeline li::before{left:1px;top:18px}.t-when{text-align:left}}
.sample{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:stretch}
@media (max-width:900px){.sample{grid-template-columns:1fr}}
.matrix{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}
.matrix svg{width:100%;height:auto}
.m-bg{fill:var(--ground);stroke:var(--line)}
.m-grid{stroke:var(--line);stroke-dasharray:4 4}
.m-q{fill:var(--muted);font:500 10px var(--mono);text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.m-ax{fill:var(--muted);font:500 11px var(--body);text-anchor:middle}
.m-dot{fill:color-mix(in srgb,var(--mint) 35%,transparent);stroke:var(--mint);stroke-width:2}
.m-dot.hi{fill:color-mix(in srgb,var(--signal) 35%,transparent);stroke:var(--signal)}
.m-dot.lo{fill:color-mix(in srgb,var(--muted) 25%,transparent);stroke:var(--muted)}
.m-l{fill:var(--ink);font:600 12px var(--body)}
.m-key{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:.88rem;color:var(--muted)}
.m-key b{color:var(--ink);margin-right:6px}
.phases{display:flex;flex-direction:column;gap:12px}
.phase{flex:1;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center}
.phase:nth-child(2){border-left-color:var(--mint)}.phase:nth-child(3){border-left-color:#7FB8FF}
.p-tag{grid-column:1/-1;font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.phase h3{font-size:1.05rem}
.phase p{grid-column:1;color:var(--muted);font-size:.92rem}
.p-cost{grid-column:2;grid-row:2/4;font-family:var(--display);color:var(--signal);font-size:.95rem;white-space:nowrap}
.deliv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.deliv > div{padding:24px;background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.deliv p{color:var(--muted);font-size:.95rem}
.d-n{font-family:var(--mono);color:var(--signal);font-size:.8rem}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.related a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;transition:border-color .15s,transform .15s}
.related a:hover{border-color:var(--signal);transform:translateY(-2px)}
.related span{color:var(--muted);font-size:.9rem}
.approach a{color:var(--signal);text-decoration:none;font-weight:600}
/* ---------- zeg method ---------- */
.method{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}
.method::before{content:"";position:absolute;top:30px;left:5%;right:5%;height:2px;background:linear-gradient(90deg,#FFC23D,#7FE0CF,#7FB8FF,#B79CFF,#B8E07F);opacity:.6}
.m-stage{--c:#FFC23D;position:relative;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:14px;padding:58px 18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.m-stage:nth-child(2){--c:#7FE0CF}.m-stage:nth-child(3){--c:#7FB8FF}.m-stage:nth-child(4){--c:#B79CFF}.m-stage:nth-child(5){--c:#B8E07F}
:root[data-mode="light"] .m-stage{--c:#C98A00}:root[data-mode="light"] .m-stage:nth-child(2){--c:#169C86}:root[data-mode="light"] .m-stage:nth-child(3){--c:#2F6FD6}:root[data-mode="light"] .m-stage:nth-child(4){--c:#7A57D6}:root[data-mode="light"] .m-stage:nth-child(5){--c:#5E9A1E}
.m-num{position:absolute;top:12px;left:18px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ground);border:2px solid var(--c);color:var(--c);font-family:var(--mono);font-size:.8rem}
.m-stage h3{font-size:1.3rem}
.m-sub{color:var(--c)!important;font-weight:600;font-size:.92rem}
.m-stage p{color:var(--muted);font-size:.92rem}
.m-stage .ticks{font-size:.88rem}
.m-stage .ticks li::before{background:var(--c)}
.m-gate{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:.88rem!important}
.m-gate b{display:block;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:2px}
@media (max-width:1000px){.method{grid-template-columns:1fr 1fr}.method::before{display:none}}
@media (max-width:600px){.method{grid-template-columns:1fr}}
.qtable{width:100%;border-collapse:collapse;min-width:560px}
.qtable th,.qtable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.qtable th{font-family:var(--mono);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.qtable td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.qtable td{color:var(--muted)}
.qtable tr:last-child td{border-bottom:0}
.fitmap{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fitmap div{grid-column:var(--from)/var(--to);padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--signal) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--signal) 40%,var(--line));display:flex;flex-direction:column;gap:2px}
.fitmap div:nth-child(2){background:color-mix(in srgb,var(--mint) 14%,var(--surface));border-color:color-mix(in srgb,var(--mint) 40%,var(--line))}
.fitmap div:nth-child(3){background:color-mix(in srgb,#B8E07F 14%,var(--surface));border-color:color-mix(in srgb,#B8E07F 40%,var(--line))}
.fitmap span{color:var(--muted);font-size:.85rem}
.fitscale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;font-family:var(--mono);font-size:.75rem;color:var(--muted);text-align:center;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:600px){.fitmap,.fitscale{grid-template-columns:1fr}.fitmap div{grid-column:auto}.fitscale{display:none}}
/* ---------- trust centre ---------- */
.trustgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.tg{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.tg p{color:var(--muted);font-size:.95rem}
.pill{align-self:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid}
.pill.ok{color:var(--mint);border-color:var(--mint)}
.pill.wait{color:var(--signal);border-color:var(--signal)}
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.certs > div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.certs b{font-family:var(--display);font-weight:500}
.certs p{grid-column:1/-1;color:var(--muted);font-size:.92rem}
/* ---------- 404 ---------- */
.nf{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:center;min-height:50vh}
.nf .head{margin-bottom:0}
@media (max-width:900px){.nf{grid-template-columns:1fr}}
.nf-term pre{padding:18px 16px 22px;margin:0;line-height:1.75;color:var(--muted);font-family:var(--mono);font-size:.85rem;overflow-x:auto}

/* home: Zeg Method strip */
.ms-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px}
.ms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.ms li{--c:#FFC23D;position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 18px;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:12px;background:var(--surface)}
.ms li:nth-child(2){--c:#7FE0CF}.ms li:nth-child(3){--c:#7FB8FF}.ms li:nth-child(4){--c:#B79CFF}.ms li:nth-child(5){--c:#B8E07F}
:root[data-mode="light"] .ms li{--c:#C98A00}:root[data-mode="light"] .ms li:nth-child(2){--c:#169C86}:root[data-mode="light"] .ms li:nth-child(3){--c:#2F6FD6}:root[data-mode="light"] .ms li:nth-child(4){--c:#7A57D6}:root[data-mode="light"] .ms li:nth-child(5){--c:#5E9A1E}
.ms li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translate(50%,-50%);color:var(--muted);font-size:.9rem;z-index:1}
.ms-n{font-family:var(--mono);font-size:.75rem;color:var(--c)}
.ms b{font-family:var(--display);font-size:1.1rem;letter-spacing:-.01em}
.ms li > span:last-child{color:var(--muted);font-size:.88rem}
@media (max-width:900px){.ms{grid-template-columns:1fr 1fr}.ms li::after{display:none}}
@media (max-width:420px){.ms{grid-template-columns:1fr}}