:root{
  --red:#E0181F; --red-dk:#B31319; --steel:#2B5672; --steel-dk:#1D3D54;
  --ink:#16181D; --slate:#5D5D61; --mist:#E2E2E2; --cloud:#EEF3F8;
  --paper:#F7F9FB; --dark:#14202D; --amber:#F0A500;
  --sans:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --disp:Montserrat,'Segoe UI',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- prototype banner ---------- */
.proto{background:var(--amber);color:#3D2A00;font-size:13px;font-weight:700;
  padding:8px 24px;display:flex;gap:20px;align-items:center;justify-content:center;
  flex-wrap:wrap;letter-spacing:.02em}
.proto b{font-weight:900}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--mist);backdrop-filter:blur(8px)}
.nav{display:flex;align-items:center;gap:34px;height:76px}
.logo{font-family:var(--disp);font-weight:900;font-size:27px;color:var(--red);
  letter-spacing:-1px;text-decoration:none;line-height:1}
.logo small{display:block;font-size:9px;color:var(--slate);letter-spacing:.14em;
  font-weight:700;margin-top:2px}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:14.5px;font-weight:700;color:var(--ink);
  padding:6px 0;border-bottom:3px solid transparent}
.nav nav a:hover{color:var(--red)}
.nav nav a.on{color:var(--red);border-bottom-color:var(--red)}
.btn{display:inline-block;font-family:var(--sans);font-weight:800;font-size:14.5px;
  padding:12px 24px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dk)}
.btn-ghost{background:transparent;color:var(--steel);border:2px solid var(--mist)}
.btn-ghost:hover{border-color:var(--steel)}
.btn-white{background:#fff;color:var(--steel)}
.btn-lg{font-size:16px;padding:15px 32px}
.burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;
  font-size:26px;color:var(--steel)}

/* ---------- hero ---------- */
.hero{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.hero:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(20,32,45,.94) 0%,rgba(20,32,45,.80) 46%,rgba(20,32,45,.34) 100%)}
.hero .wrap{padding-top:92px;padding-bottom:92px;position:relative;z-index:2}
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(38px,5.4vw,66px);
  line-height:1.05;letter-spacing:-2px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{font-size:clamp(17px,2vw,21px);color:#BFD3E4;margin-top:24px;max-width:56ch}
.hero .cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-bus{position:absolute;right:-90px;bottom:-30px;width:640px;opacity:.14;z-index:1}
.badges{display:flex;gap:14px;margin-top:52px;flex-wrap:wrap}
.badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:16px 22px}
.badge b{display:block;font-family:var(--disp);font-size:26px;font-weight:900;letter-spacing:-.5px}
.badge span{font-size:12.5px;color:#8FAAC2}

/* ---------- sections ---------- */
section{padding:80px 0}
.sec-alt{background:var(--paper)}
.sec-dark{background:var(--dark);color:#fff}
.eyebrow{font-size:13px;font-weight:800;color:var(--red);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px}
h2{font-family:var(--disp);font-weight:900;font-size:clamp(28px,3.6vw,42px);
  color:var(--steel);letter-spacing:-1.2px;line-height:1.12}
.sec-dark h2{color:#fff}
.lead{font-size:18px;color:var(--slate);margin-top:16px;max-width:62ch}
.sec-dark .lead{color:#BFD3E4}
h3{font-family:var(--disp);font-weight:800;font-size:21px;color:var(--steel);
  letter-spacing:-.4px;margin-bottom:8px}
.sec-dark h3{color:#fff}


/* ---------- model cards ---------- */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
  margin-top:44px}
.mcard{background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;cursor:pointer}
.mcard:hover{box-shadow:0 12px 34px rgba(20,32,45,.12);transform:translateY(-3px)}
.mcard .shot{aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1D2A38,#14202D);display:flex;align-items:center}
.mcard .shot .draw{width:100%;padding:0 8px}
.mcard .shot .tech .dim{display:none}
.pw{position:absolute;left:12px;top:12px;background:var(--red);color:#fff;font-size:10.5px;
  font-weight:800;padding:4px 11px;border-radius:20px;letter-spacing:.04em}
.pw.diesel{background:var(--steel)}
.mcard .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.mcard .meta{font-size:13.5px;color:var(--slate);margin-top:2px}
.mcard ul{list-style:none;margin:14px 0 18px;font-size:14px}
.mcard li{padding-left:20px;position:relative;margin-bottom:5px;color:var(--ink)}
.mcard li:before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}
.mcard .go{margin-top:auto;font-weight:800;font-size:14px;color:var(--red)}

/* ---------- the walkthrough ---------- */
.wt{background:var(--dark);border-radius:20px;overflow:hidden;margin-top:40px}
.wt-bar{display:flex;gap:4px;padding:14px 16px 0;flex-wrap:wrap}
.wt-tab{background:rgba(255,255,255,.07);border:none;color:#BFD3E4;font-family:var(--sans);
  font-weight:800;font-size:13.5px;padding:11px 18px;border-radius:9px 9px 0 0;cursor:pointer}
.wt-tab.on{background:rgba(255,255,255,.14);color:#fff}
.wt-tab i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
  background:var(--steel);vertical-align:middle}
.wt-tab.hy i{background:var(--red)}
.wt-main{display:grid;grid-template-columns:1fr 340px;gap:0;min-height:440px}
.wt-stage{position:relative;padding:30px 24px 24px;display:flex;flex-direction:column}
.wt-title{color:#fff;font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.7px}
.wt-sub{color:#8FAAC2;font-size:13.5px;margin-top:3px}
.wt-svg{flex:1;display:flex;align-items:center;justify-content:center;margin-top:14px;
  position:relative}
.wt-svg svg{width:100%;max-width:640px}
.zone{transition:opacity .3s,filter .3s}
.dimmed .zone{opacity:.22}
.dimmed .zone.lit{opacity:1;filter:drop-shadow(0 0 14px rgba(224,57,57,.85))}
.hot{cursor:pointer}
.hot circle.ring{fill:rgba(224,57,57,.28);stroke:var(--red);stroke-width:2.6}
.hot circle.dot{fill:var(--red)}
.hot text{fill:#fff;font-family:var(--sans);font-weight:900;font-size:19px;text-anchor:middle}
.hot:hover circle.ring{fill:rgba(224,57,57,.42)}
.hot.on circle.ring{fill:var(--red)}
@keyframes pulse{0%,100%{r:26}50%{r:30}}
.hot circle.ring{animation:pulse 2.6s ease-in-out infinite}
.wt-panel{background:rgba(255,255,255,.05);border-left:1px solid rgba(255,255,255,.1);
  padding:26px 24px;color:#E8EEF4;display:flex;flex-direction:column}
.wt-panel h4{font-family:var(--disp);font-weight:900;font-size:20px;color:#fff;
  letter-spacing:-.4px;margin-bottom:4px}
.wt-panel .kicker{font-size:11.5px;font-weight:800;color:var(--red);letter-spacing:.14em;
  text-transform:uppercase}
.wt-panel p{font-size:14.5px;color:#BFD3E4;margin:12px 0 16px;line-height:1.55}
.wt-spec{display:flex;font-size:13.5px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.wt-spec span:last-child{margin-left:auto;font-weight:800;color:#fff;text-align:right}
.wt-spec span:first-child{color:#8FAAC2}
.wt-nav{margin-top:auto;padding-top:18px;display:flex;gap:8px;align-items:center}
.wt-nav button{background:rgba(255,255,255,.12);border:none;color:#fff;width:38px;height:38px;
  border-radius:9px;cursor:pointer;font-size:17px}
.wt-nav button:hover{background:rgba(255,255,255,.24)}
.wt-count{font-size:12.5px;color:#8FAAC2;margin-left:auto}
.wt-empty{color:#8FAAC2;font-size:14.5px;line-height:1.6}
.wt-prog{height:5px;background:rgba(255,255,255,.1);border-radius:3px;margin-top:14px;
  overflow:hidden}
.wt-prog i{display:block;height:5px;background:var(--red);width:0;transition:width .4s;
  border-radius:3px}

/* ---------- specs table ---------- */
.spectbl{width:100%;border-collapse:collapse;margin-top:34px;font-size:15px}
.spectbl th{background:var(--steel);color:#fff;font-family:var(--disp);font-weight:800;
  font-size:13.5px;text-align:left;padding:13px 16px}
.spectbl th:first-child{border-radius:10px 0 0 0}
.spectbl th:last-child{border-radius:0 10px 0 0}
.spectbl td{padding:13px 16px;border-bottom:1px solid var(--mist)}
.spectbl tr:nth-child(even) td{background:var(--paper)}
.spectbl td:first-child{font-weight:800;color:var(--steel)}
.spectbl .yes{color:#1E8E5A;font-weight:800}

/* ---------- feature grid ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;
  margin-top:44px}
.feat{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:30px 26px}
.sec-dark .feat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.feat .ic{width:46px;height:46px;border-radius:12px;background:var(--cloud);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sec-dark .feat .ic{background:rgba(255,255,255,.1)}
.feat p{font-size:14.5px;color:var(--slate);margin-top:6px}
.sec-dark .feat p{color:#BFD3E4}

/* ---------- enquiry ---------- */
.enq{background:#fff;border:1px solid var(--mist);border-radius:18px;padding:36px;
  box-shadow:0 8px 30px rgba(20,32,45,.07)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:800;color:var(--steel);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--sans);font-size:15px;
  padding:12px 14px;border:2px solid var(--mist);border-radius:9px;background:#fff;
  color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--steel)}
.fld textarea{resize:vertical;min-height:96px}
.hint{font-size:12.5px;color:var(--slate);font-weight:400}
.enq-note{font-size:13px;color:var(--slate);margin-top:14px}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#8FAAC2;padding:60px 0 34px;font-size:14px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px}
footer h5{font-family:var(--disp);color:#fff;font-size:14px;font-weight:800;
  margin-bottom:14px;letter-spacing:.02em}
footer a{display:block;color:#8FAAC2;text-decoration:none;margin-bottom:8px}
footer a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:24px;
  font-size:12.5px;display:flex;gap:20px;flex-wrap:wrap}
.fbot span:last-child{margin-left:auto}


.segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px}
.seg{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:30px 26px;
  cursor:pointer;transition:box-shadow .18s,transform .18s;border-top:5px solid var(--red)}
.seg:hover{box-shadow:0 12px 34px rgba(20,32,45,.12);transform:translateY(-3px)}
.seg p{font-size:14.5px;color:var(--slate);margin-top:8px}
.seg-m{margin-top:16px;font-size:13px;font-weight:800;color:var(--red)}
.net{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:36px}
.net div{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:22px}
.net b{display:block;font-family:var(--disp);color:var(--steel);font-size:17px;margin-bottom:4px}
.net span{font-size:14px;color:var(--slate)}
.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.photo-strip img{border-radius:14px;width:100%;aspect-ratio:16/10;object-fit:cover}

.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:38px}
.ncard{background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden}
.ncard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ncard .nb{padding:22px}
.ncard .nd{font-size:12px;font-weight:800;color:var(--red);letter-spacing:.1em;text-transform:uppercase}
.ncard h3{margin:8px 0 6px;font-size:19px}
.ncard p{font-size:14px;color:var(--slate)}
.social{display:flex;gap:10px;align-items:center;margin-top:34px}
.social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  color:#BFD3E4;margin:0;text-transform:lowercase}
.social a:hover{background:var(--red);color:#fff}
.tbc{font-size:12px;color:#5A7890;font-style:italic}

.art h1{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4vw,44px);color:var(--steel);
  letter-spacing:-1.4px;line-height:1.12;margin:18px 0 12px}
.art .amet{font-size:13px;color:var(--slate);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.art img{border-radius:16px;margin:26px 0 30px;width:100%;aspect-ratio:16/9;object-fit:cover}
.art p{font-size:17.5px;line-height:1.7;color:var(--ink);margin-bottom:18px}
.art h2{font-family:var(--disp);font-weight:800;font-size:25px;color:var(--steel);
  letter-spacing:-.6px;margin:34px 0 12px}
.art .lede{font-size:20px;color:var(--slate);line-height:1.6}
.tco{display:grid;grid-template-columns:340px 1fr;gap:30px;margin-top:38px;align-items:start}
.tco-in{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:26px}
.tco-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tcard{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px;
  border-top:5px solid var(--steel)}
.tcard.best{border-top-color:#1E8E5A;box-shadow:0 8px 26px rgba(30,142,90,.14)}
.tcard h4{font-family:var(--disp);font-weight:900;font-size:19px;color:var(--steel)}
.tcard .big{font-family:var(--disp);font-weight:900;font-size:30px;color:var(--ink);
  letter-spacing:-1px;margin:10px 0 2px}
.tcard .per{font-size:12.5px;color:var(--slate)}
.tcard .brk{margin-top:14px;border-top:1px solid var(--mist);padding-top:12px}
.tcard .brk div{display:flex;font-size:13px;padding:3px 0;color:var(--slate)}
.tcard .brk div span:last-child{margin-left:auto;font-weight:700;color:var(--ink)}
.tcard .flag{display:inline-block;font-size:10.5px;font-weight:800;background:#E4F4EC;
  color:#1E8E5A;border-radius:20px;padding:2px 10px;margin-top:10px}
.tcard .flag.pub{background:#EEF3F8;color:var(--steel);margin-left:5px}
.tcard .brk div.ask span:last-child{color:var(--red);font-weight:800;font-size:12px}
.tcard .brk div.ask{opacity:.9}
@media(max-width:860px){.tco{grid-template-columns:1fr}}

.faq{margin-top:34px}
.fq{border-bottom:1px solid var(--mist)}
.fq button{width:100%;text-align:left;background:none;border:none;padding:20px 40px 20px 0;
  font-family:var(--disp);font-weight:800;font-size:18px;color:var(--steel);cursor:pointer;
  position:relative;line-height:1.35}
.fq button:after{content:'+';position:absolute;right:6px;top:18px;font-size:24px;color:var(--red);
  font-weight:400}
.fq.open button:after{content:'\2013'}
.fq .a{display:none;padding:0 0 22px;font-size:16px;line-height:1.65;color:var(--slate)}
.fq.open .a{display:block}
.fq .a p{margin-bottom:12px}
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:32px}
.orgs div{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:20px;text-align:center}
.orgs b{display:block;font-family:var(--disp);font-size:20px;color:var(--steel)}
.orgs span{font-size:12.5px;color:var(--slate);display:block;margin-top:5px}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:32px}
.qc{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:26px;
  border-top:5px solid var(--red)}
.qc p{font-size:16px;line-height:1.6;color:var(--ink);font-style:italic}
.qc .who{margin-top:16px;font-weight:800;color:var(--steel);font-size:15px}
.qc .role{font-size:13px;color:var(--slate)}
.qc.empty{border-top-color:var(--mist);background:var(--cloud);border-style:dashed}
.qc.empty p{font-style:normal;color:var(--slate);font-size:14.5px}

/* ---- listen to the article ---- */
.listen{background:var(--cloud);border:1px solid #CFE0EE;border-radius:14px;padding:16px 18px;
  margin:22px 0 6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.listen.playing{background:#FDF0F0;border-color:#F4C9C9}
.lbtn{width:52px;height:52px;border-radius:50%;border:none;background:var(--red);color:#fff;
  font-size:19px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;
  transition:background .15s}
.lbtn:hover{background:var(--red-dk)}
.lbtn:disabled{background:var(--mist);color:var(--slate);cursor:not-allowed}
.lmid{flex:1;min-width:170px}
.ltitle{font-weight:800;color:var(--steel);font-size:14.5px}
.lsub{font-size:12.5px;color:var(--slate);margin-top:2px}
.lbar{cursor:pointer;height:5px;background:#D6E3EE;border-radius:3px;margin-top:9px;overflow:hidden}
.lbar i{display:block;height:5px;background:var(--red);width:0;transition:width .3s;border-radius:3px}
.lctl{display:flex;gap:6px;align-items:center}
.lsel{font-family:var(--sans);font-size:12.5px;font-weight:700;border:2px solid #CFE0EE;
  background:#fff;border-radius:8px;padding:6px 9px;color:var(--steel);cursor:pointer;max-width:160px}
.lsm{width:36px;height:36px;border-radius:9px;border:2px solid #CFE0EE;background:#fff;
  color:var(--steel);font-size:13px;font-weight:800;cursor:pointer}
.lsm:hover{border-color:var(--steel)}
.art .say{transition:background .2s;border-radius:4px;padding:1px 0}
.art .say.on{background:#FCE9A8;box-shadow:0 0 0 4px #FCE9A8}
.lnote{font-size:12px;color:var(--slate);width:100%;margin-top:2px}
@media(max-width:640px){.listen{gap:10px}.lctl{width:100%}}

.wt-sub2{font-size:14px;color:var(--red);font-weight:700;margin:2px 0 12px;line-height:1.4}
.wt-listen{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);
  border:none;color:#fff;font-family:var(--sans);font-weight:800;font-size:13px;
  padding:9px 16px;border-radius:22px;cursor:pointer;margin-bottom:14px}
.wt-listen:hover{background:rgba(255,255,255,.24)}
.wt-listen.on{background:var(--red)}
.wt-listen .ic{font-size:11px}
.wt-panel{overflow-y:auto;max-height:520px}
.wt-panel p{font-size:14.5px;color:#BFD3E4;margin:0 0 14px;line-height:1.6}


.mcard{position:relative}
.mcard:after{content:'';position:absolute;inset:0;border-radius:16px;
  border:3px solid transparent;pointer-events:none;transition:border-color .18s}
.mcard:hover:after{border-color:rgba(224,57,57,.35)}
.mcard.picked:after{border-color:var(--red)}
.mcard.picked{transform:translateY(-3px) scale(.985)}
.mcard.picked .shot{background:linear-gradient(160deg,#2A3D4F,#1B2C3C)}
.mcard.picked .tech .tb{stroke:var(--red);stroke-width:3}
.mcard .go{display:flex;align-items:center;gap:7px}
.mcard .go span{transition:transform .18s}
.mcard:hover .go span{transform:translateX(4px)}
.wt.arrive{animation:arrive 1.4s ease-out}
@keyframes arrive{
  0%{box-shadow:0 0 0 0 rgba(224,57,57,.55)}
  40%{box-shadow:0 0 0 7px rgba(224,57,57,.28)}
  100%{box-shadow:0 0 0 0 rgba(224,57,57,0)}
}
.wt{transition:box-shadow .3s}
/* ---- technical elevation ---- */
.tech{width:100%;max-width:1280px;color:#7E9BB5;display:block}
.tech .hull{fill:rgba(255,255,255,.045);stroke:#E4EEF6;stroke-width:2.6;stroke-linejoin:round}
.tech .glz{fill:rgba(120,155,185,.30);stroke:#93B0C8;stroke-width:1.1}
.tech .pnl{fill:none;stroke:#6B87A2;stroke-width:.9}
.tech .pnl2{fill:none;stroke:#8FAAC2;stroke-width:1.3}
.tech .door{fill:rgba(224,57,57,.09);stroke:#E0181F;stroke-width:1.7}
.tech .tyre{fill:rgba(10,16,24,.55);stroke:#E4EEF6;stroke-width:2.4}
.tech .side{fill:none;stroke:#7E9BB5;stroke-width:.9}
.tech .rim{fill:rgba(255,255,255,.05);stroke:#B9CFE0;stroke-width:1.5}
.tech .stud{fill:#8FAAC2}
.tech .hub{fill:none;stroke:#B9CFE0;stroke-width:1.2}
.tech .cl{stroke:#E0181F;stroke-width:.75;stroke-dasharray:12 4 2.5 4;opacity:.55}
.tech .batt{fill:rgba(224,57,57,.14);stroke:#E0181F;stroke-width:1.5;stroke-dasharray:6 3}
.tech .bt{fill:#E0181F;font-family:var(--sans);font-size:13px;font-weight:800}
.tech .road{stroke:#93B0C8;stroke-width:1.5}
.tech .hatch line{stroke:#5C7A94;stroke-width:.9;opacity:.55}
.tech .dim line{stroke:#E0181F;stroke-width:1}
.tech .dim .ext{stroke:#E0181F;stroke-width:.7;opacity:.45}
.tech .dim path{fill:#E0181F}
.tech .dim .lbl{fill:#14202D}
.tech .dim text{fill:#E0181F;font-family:var(--sans);font-size:14px;font-weight:800;text-anchor:middle}
.tech .tblock rect{fill:rgba(20,32,45,.9);stroke:#93B0C8;stroke-width:1.2}
.tech .tblock line{stroke:#93B0C8;stroke-width:1}
.tech .tblock .a{fill:#fff;font-family:var(--disp);font-size:17px;font-weight:800}
.tech .tblock .b{fill:#BFD3E4;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.07em}
.tech .tblock .c{fill:#7E9BB5;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em}
.hotlayer{position:absolute;inset:0;width:100%;max-width:1280px;margin:auto;height:100%}
.wt-svg{position:relative}
.wt-svg svg{width:100%;max-width:1280px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--red);color:#fff;
  padding:12px 20px;font-weight:800;text-decoration:none;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.sec-dark :focus-visible,.wt :focus-visible{outline-color:#fff}
.hot{cursor:pointer}
.hot:focus-visible circle.ring{fill:var(--red)}
main:focus{outline:none}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

.sub-box{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:center;
  background:var(--dark);color:#fff;border-radius:18px;padding:34px 36px;margin-top:44px}
.sub-box h3{color:#fff;font-size:22px}
.sub-box p{color:#BFD3E4;font-size:14.5px;margin-top:8px;max-width:48ch}
.sub-form{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.sub-form input{flex:1;min-width:190px;background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px;
  color:#fff;font-family:var(--sans);font-size:15px}
.sub-form input::placeholder{color:#7E9BB5}
.sub-form input:focus{outline:none;border-color:var(--red)}
.sub-msg{width:100%;font-size:13px;color:#BFD3E4;min-height:18px}
.sub-msg.ok{color:#7BD3A6}
.sub-msg.bad{color:#F5A3A3}
@media(max-width:760px){.sub-box{grid-template-columns:1fr;padding:26px}}
.credit{margin:26px 0 0}
.credit img{width:100%;border-radius:16px;aspect-ratio:16/9;object-fit:cover;background:var(--cloud)}
.credit figcaption{font-size:12.5px;color:var(--slate);margin-top:10px;font-style:italic}

.cfg{display:grid;grid-template-columns:1fr 400px;gap:28px;margin-top:36px;align-items:start}
.cfg-view{background:var(--dark);border-radius:18px;padding:22px;position:sticky;top:96px}
.cfg-canvas svg{width:100%}
.cfg-note{color:#8FAAC2;font-size:12.5px;margin-top:10px;text-align:center}
.cfg-panel{background:#fff;border:1px solid var(--mist);border-radius:18px;padding:26px}
.cfg-sec{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--mist)}
.cfg-sec:last-of-type{border-bottom:none}
.cfg-sec h4{font-family:var(--disp);font-size:13px;font-weight:800;color:var(--steel);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:flex;gap:8px;align-items:baseline}
.cfg-sec h4 span{font-size:11px;font-weight:600;color:var(--slate);letter-spacing:0;text-transform:none}
.cfg-models{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-models button{padding:11px 8px;border:2px solid var(--mist);background:#fff;border-radius:9px;
  font-family:var(--sans);font-weight:800;font-size:13px;color:var(--steel);cursor:pointer}
.cfg-models button.on{border-color:var(--red);background:#FDF1F2;color:var(--red)}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw2{width:38px;height:38px;border-radius:50%;border:3px solid var(--mist);cursor:pointer;padding:0}
.sw2.on{border-color:var(--steel);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--steel)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{padding:8px 14px;border:2px solid var(--mist);background:#fff;border-radius:20px;
  font-family:var(--sans);font-weight:700;font-size:12.5px;color:var(--slate);cursor:pointer}
.chips button.on{border-color:var(--red);color:var(--red);background:#FDF1F2}
.opts{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;
  margin:0 -6px;padding:0 6px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:8px;cursor:pointer;
  font-size:13.5px;line-height:1.4}
.opt:hover{background:var(--paper)}
.opt input{margin-top:2px;accent-color:var(--red);width:16px;height:16px;flex:none}
.opt.on{color:var(--ink);font-weight:600}
.cfg-sum{background:var(--paper);border-radius:12px;padding:16px 18px;font-size:13.5px;
  color:var(--slate);line-height:1.6}
.cfg-sum b{color:var(--steel)}
@media(max-width:960px){.cfg{grid-template-columns:1fr}.cfg-view{position:static}}

.cond{display:grid;grid-template-columns:1fr 380px;gap:26px;margin-top:34px;align-items:start}
.cond-view{background:var(--dark);border-radius:18px;padding:22px;position:sticky;top:96px}
.cond-canvas{position:relative}
.cond-canvas svg{width:100%}
.mk{cursor:pointer}
.mk circle{fill:rgba(240,165,0,.30);stroke:#F0A500;stroke-width:2.4}
.mk.sev circle{fill:rgba(224,57,57,.30);stroke:var(--red)}
.mk text{fill:#fff;font-family:var(--sans);font-weight:900;font-size:17px;text-anchor:middle}
.mk:hover circle,.mk.on circle{fill:#F0A500}
.mk.sev.on circle,.mk.sev:hover circle{fill:var(--red)}
.cond-list{display:flex;flex-direction:column;gap:10px}
.ci{background:#fff;border:1px solid var(--mist);border-radius:13px;padding:15px 17px;cursor:pointer;
  border-left:5px solid #F0A500;transition:box-shadow .15s}
.ci.sev{border-left-color:var(--red)}
.ci:hover,.ci.on{box-shadow:0 6px 20px rgba(20,32,45,.12)}
.ci .h{display:flex;gap:9px;align-items:baseline}
.ci .n{width:22px;height:22px;border-radius:50%;background:#F0A500;color:#fff;font-size:12px;
  font-weight:900;display:flex;align-items:center;justify-content:center;flex:none}
.ci.sev .n{background:var(--red)}
.ci b{font-size:14.5px;color:var(--steel)}
.ci p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.5}
.ci .tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);margin-left:auto}
.cond-sum{background:var(--paper);border-radius:12px;padding:14px 16px;font-size:13.5px;
  color:var(--slate);margin-bottom:4px}
@media(max-width:960px){.cond{grid-template-columns:1fr}.cond-view{position:static}}

.stock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:36px}
.sc{background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden;
  border-top:5px solid var(--mist)}
.sc.ready{border-top-color:#1E8E5A}
.sc .sb{padding:22px}
.sc .avail{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 11px;border-radius:20px;background:var(--cloud);color:var(--slate)}
.sc.ready .avail{background:#E4F4EC;color:#1E8E5A}
.sc h3{margin:12px 0 4px;font-size:20px}
.sc .meta{font-size:13.5px;color:var(--slate)}
.sc dl{margin-top:14px;font-size:13.5px;border-top:1px solid var(--mist);padding-top:12px}
.sc dl div{display:flex;padding:4px 0}
.sc dt{color:var(--slate)}.sc dd{margin-left:auto;font-weight:700;color:var(--steel)}
.sc .note{margin-top:12px;font-size:13px;color:var(--slate);font-style:italic}
.sc .track{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--sky);
  display:flex;align-items:center;gap:7px}
.sc .track:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sky);flex:none}
.sc.ready .track{color:#1E8E5A}
.sc.ready .track:before{background:#1E8E5A}
.sc .btn{margin-top:16px;width:100%;text-align:center}
.parts-wrap{display:grid;grid-template-columns:1fr 380px;gap:26px;margin-top:32px;align-items:start}
.parts-tools{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.parts-tools input[type=text],#partQ{flex:1;min-width:200px;border:2px solid var(--mist);
  border-radius:9px;padding:11px 14px;font-family:var(--sans);font-size:15px}
#partQ:focus{outline:none;border-color:var(--steel)}
.stockonly{font-size:13.5px;color:var(--slate);display:flex;gap:7px;align-items:center;font-weight:700}
.stockonly input{accent-color:var(--red);width:16px;height:16px}
.part-list{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow-y:auto}
.pr{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--mist);
  border-radius:12px;padding:14px 16px}
.pr .pi{flex:1;min-width:0}
.pr .sku{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--slate);font-weight:700}
.pr .nm{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px}
.pr .ft{font-size:12px;color:var(--slate);margin-top:2px}
.pr .pp{font-weight:800;color:var(--steel);white-space:nowrap}
.pr .st{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pr .st.yes{background:#E4F4EC;color:#1E8E5A}
.pr .st.no{background:var(--cloud);color:var(--slate)}
.pr button{border:2px solid var(--mist);background:#fff;border-radius:8px;width:34px;height:34px;
  font-size:19px;font-weight:800;color:var(--steel);cursor:pointer;flex:none}
.pr button:hover{border-color:var(--red);color:var(--red)}
.cart{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px;position:sticky;top:96px}
.cart h3{font-size:19px;margin-bottom:14px}
.cl{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--mist);font-size:13.5px}
.cl .q{border:1px solid var(--mist);border-radius:6px;width:52px;padding:4px 6px;font-size:13px;text-align:center}
.cl .x{background:none;border:none;color:var(--slate);cursor:pointer;font-size:17px;padding:0 2px}
.cl .x:hover{color:var(--red)}
.cl .n{flex:1;min-width:0}
.cl .t{font-weight:800;color:var(--steel);white-space:nowrap}
.cart-tot{display:flex;padding:14px 0 4px;font-weight:800;color:var(--steel);font-size:16px}
.cart-tot span:last-child{margin-left:auto}
.cart-empty{color:var(--slate);font-size:14px;line-height:1.6}
@media(max-width:960px){.parts-wrap{grid-template-columns:1fr}.cart{position:static}}

.presets{display:flex;flex-direction:column;gap:5px;max-height:250px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.pre{display:flex;gap:11px;align-items:center;width:100%;text-align:left;padding:9px 11px;
  border:2px solid var(--mist);background:#fff;border-radius:10px;cursor:pointer;font-family:var(--sans)}
.pre:hover{border-color:#CFE0EE}
.pre.on{border-color:var(--red);background:#FDF1F2}
.pre i{width:24px;height:24px;border-radius:50%;border:2px solid var(--mist);flex:none}
.pre span{display:flex;flex-direction:column;min-width:0}
.pre b{font-size:13.5px;color:var(--steel)}
.pre em{font-size:11.5px;color:var(--slate);font-style:normal;margin-top:1px}
.govwarn{background:#FEF6E7;border-left:4px solid #B7791F;border-radius:0 8px 8px 0;
  padding:11px 13px;font-size:12.5px;color:#7A5A18;margin-top:12px;line-height:1.5}
.swgrp{margin-bottom:12px}
.swgrp>span{display:block;font-size:11px;font-weight:800;color:var(--slate);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.swline{display:flex;gap:10px;align-items:center;margin-top:9px}
.swline>span{font-size:11.5px;font-weight:800;color:var(--slate);width:48px;flex:none}
.sw2.sm{width:26px;height:26px;border-width:2px}
.sw2.sm.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--steel)}

.prefind{width:100%;border:2px solid var(--mist);border-radius:9px;padding:10px 13px;
  font-family:var(--sans);font-size:14px;margin-bottom:10px}
.prefind:focus{outline:none;border-color:var(--steel)}
.presets{max-height:320px}
.pgrp{margin-bottom:12px}
.pgrp>span{display:block;font-size:10.5px;font-weight:800;color:var(--slate);
  letter-spacing:.1em;text-transform:uppercase;margin:4px 0 6px}
.pre i{position:relative;overflow:hidden}
.pre i em{position:absolute;left:0;right:0;bottom:5px;height:6px;display:block}

.msg-dock{position:fixed;right:20px;bottom:20px;z-index:80}
.msg-btn{display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;border:none;
  border-radius:30px;padding:14px 22px;font-family:var(--sans);font-weight:800;font-size:15px;
  cursor:pointer;box-shadow:0 6px 22px rgba(20,32,45,.28)}
.msg-btn:hover{background:var(--red-dk)}
.msg-btn .ic{font-size:17px}
.msg-panel{position:absolute;right:0;bottom:66px;width:330px;background:#fff;
  border:1px solid var(--mist);border-radius:16px;padding:18px;
  box-shadow:0 16px 44px rgba(20,32,45,.22)}
.msg-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.msg-head b{font-family:var(--disp);font-size:15px;color:var(--steel);flex:1}
.msg-x{background:none;border:none;font-size:22px;color:var(--slate);cursor:pointer;line-height:1}
.msg-hours{font-size:12.5px;margin:2px 0 12px;font-weight:700}
.msg-hours.open{color:#1E8E5A}
.msg-hours.shut{color:var(--slate)}
.msg-opt{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:11px;
  text-decoration:none;border:1px solid var(--mist);margin-bottom:7px}
.msg-opt:hover{border-color:var(--red);background:#FDF7F7}
.msg-opt.urgent{border-color:var(--red);background:#FDF1F2}
button.msg-opt{width:100%;text-align:left;background:#fff;font-family:var(--sans);cursor:pointer}
.msg-opt[hidden]{display:none}
.msg-opt .mi{font-size:17px;width:22px;text-align:center;flex:none;color:var(--red)}
.msg-opt span:last-child{display:flex;flex-direction:column;min-width:0}
.msg-opt b{font-size:14px;color:var(--steel)}
.msg-opt em{font-size:12px;color:var(--slate);font-style:normal;margin-top:1px}
.msg-foot{font-size:12px;color:var(--slate);margin-top:10px;font-style:italic}
@media(max-width:640px){
  .msg-dock{right:14px;bottom:14px}
  .msg-btn .lb{display:none}
  .msg-btn{padding:15px;border-radius:50%}
  .msg-panel{width:min(300px,calc(100vw - 28px))}
}
@media print{.msg-dock{display:none}}

.bot-open{width:100%;text-align:left;background:#FDF1F2;border-color:var(--red);cursor:pointer;
  font-family:var(--sans)}
.bot-win{position:fixed;right:20px;bottom:20px;z-index:90;width:400px;max-width:calc(100vw - 28px);
  background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(20,32,45,.26);display:flex;flex-direction:column;max-height:78vh}
.bot-head{background:var(--dark);color:#fff;padding:15px 18px;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.bot-head b{font-family:var(--disp);font-size:16px;order:1}
.bot-sub{order:3;flex-basis:100%;font-size:11.5px;color:#8FAAC2;margin-top:2px}
.bot-head .msg-x{order:2;margin-left:auto;color:#8FAAC2}
.bot-log{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;
  min-height:180px;background:var(--paper)}
.bm{max-width:88%;font-size:14px;line-height:1.55;padding:11px 14px;border-radius:14px}
.bm.you{align-self:flex-end;background:var(--steel);color:#fff;border-bottom-right-radius:4px}
.bm.zb{align-self:flex-start;background:#fff;border:1px solid var(--mist);color:var(--ink);
  border-bottom-left-radius:4px}
.bm.zb b{color:var(--steel)}
.bm.zb a{color:var(--red);font-weight:800}
.bm .bs{display:block;font-size:12px;color:var(--slate);margin-top:7px;line-height:1.45}
.bm .bsrc{display:block;font-size:11px;color:var(--slate);margin-top:8px;
  padding-top:7px;border-top:1px solid var(--mist);font-style:italic}
.bm .bgo{display:block;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--red);
  text-decoration:none;cursor:pointer}
.bm .bgo:hover{text-decoration:underline}
.bot-chips{display:flex;gap:6px;flex-wrap:wrap;padding:11px 18px 0;background:var(--paper)}
.bot-chips button{border:1px solid var(--mist);background:#fff;border-radius:20px;padding:6px 12px;
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--steel);cursor:pointer}
.bot-chips button:hover{border-color:var(--red);color:var(--red)}
.bot-ask{display:flex;gap:8px;padding:14px 18px 6px;background:var(--paper)}
.bot-ask input{flex:1;border:2px solid var(--mist);border-radius:9px;padding:11px 13px;
  font-family:var(--sans);font-size:14px}
.bot-ask input:focus{outline:none;border-color:var(--red)}
.bot-ask button{background:var(--red);color:#fff;border:none;border-radius:9px;width:44px;
  font-size:18px;cursor:pointer}
.bot-foot{font-size:11.5px;color:var(--slate);padding:6px 18px 14px;background:var(--paper);
  font-style:italic}
.bot-win[hidden]{display:none}
.msg-panel[hidden]{display:none}
@media(max-width:640px){.bot-win{right:14px;bottom:14px;max-height:80vh}}
@media print{.bot-win{display:none}}

/* ============ COLOUR AND MOTION ============
   The palette stays black, red and white, but with warmth and depth added
   where it earns its place. Motion is used to explain rather than decorate:
   the elevation draws itself the way a draughtsman would draw it, sections
   arrive as you reach them, and the numbers count so the eye lands on them.
   Everything here switches off for anybody who has asked for less motion. */

:root{
  --ink2:#1D2B3A;
  --ocean:#10394F;
  --sky:#2E7DBF;
  --mint:#1E8E5A;
  --sun:#F0A500;
  --plum:#3D2A4D;
  --warm:#FBF7F3;
  --grad-dark:linear-gradient(135deg,#101A26 0%,#16283A 45%,#1B2F3F 100%);
  --grad-red:linear-gradient(120deg,var(--red) 0%,#B31319 100%);
  --grad-ocean:linear-gradient(135deg,#0C2D40 0%,#12455F 100%);
}

/* ---- hero: depth instead of a flat block ---- */
.hero{background:var(--grad-dark)}
.hero:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 90% at 82% 18%, rgba(46,125,191,.30), transparent 62%),
    radial-gradient(60% 80% at 10% 92%, rgba(224,57,57,.22), transparent 60%)}
.hero .wrap{position:relative;z-index:3}
.hero h1 em{background:var(--grad-red);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--red)}

/* the counters sit on glass rather than a grey box */
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);transition:transform .25s,border-color .25s}
.badge:hover{transform:translateY(-3px);border-color:rgba(224,57,57,.6)}
.badge b{background:linear-gradient(120deg,#fff,#BFD3E4);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}

/* ---- sections get their own temperature ---- */
.sec-alt{background:linear-gradient(180deg,var(--warm) 0%,#F4F7FA 100%)}
.sec-dark{background:var(--grad-ocean)}

/* ---- reveal on scroll ---- */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.06s}.rv-2{transition-delay:.12s}
.rv-3{transition-delay:.18s}.rv-4{transition-delay:.24s}

/* ---- the elevation draws itself ---- */
@keyframes draw{to{stroke-dashoffset:0}}
.tech.drawing .hull{stroke-dasharray:4200;stroke-dashoffset:4200;
  animation:draw 1.6s cubic-bezier(.5,0,.2,1) forwards}
.tech.drawing .glz,.tech.drawing .pnl,.tech.drawing .pnl2,.tech.drawing .td{
  opacity:0;animation:fadeIn .5s ease .9s forwards}
.tech.drawing .whl{opacity:0;animation:fadeIn .5s ease 1.15s forwards}
.tech.drawing .dim,.tech.drawing .tblock{opacity:0;animation:fadeIn .5s ease 1.4s forwards}
@keyframes fadeIn{to{opacity:1}}

/* wheels turn while the drawing settles */
@keyframes roll{to{transform:rotate(360deg)}}
.tech.drawing .whl .rim,.tech.drawing .whl .stud{
  transform-box:fill-box;transform-origin:center}

/* ---- model cards, coloured by what drives them ---- */
.mcard{border-top:4px solid transparent}
.mcard .shot{background:var(--grad-ocean)}
.mcard[data-kind="hybrid"]{border-top-color:var(--mint)}
.mcard[data-kind="diesel"]{border-top-color:var(--sky)}
.mcard[data-kind="hybrid"] .shot{background:linear-gradient(150deg,#0C3A33 0%,#123F52 100%)}
.mcard:hover{transform:translateY(-6px)}
.mcard:hover .shot{background:linear-gradient(150deg,#14495E 0%,#1B3D52 100%)}
.pw.hybrid{background:var(--mint)}
.pw.diesel{background:var(--sky)}

/* ---- segment cards, each its own colour ---- */
.seg{border-top-width:5px}
.seg:nth-child(1){border-top-color:var(--sun)}
.seg:nth-child(2){border-top-color:var(--sky)}
.seg:nth-child(3){border-top-color:var(--mint)}
.seg:hover{transform:translateY(-5px)}

/* ---- feature tiles pick up a tint ---- */
.grid3 .feat{transition:transform .22s,box-shadow .22s,border-color .22s}
.grid3 .feat:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,41,64,.10)}
.sec-alt .grid3 .feat:nth-child(3n+1):hover{border-color:var(--sun)}
.sec-alt .grid3 .feat:nth-child(3n+2):hover{border-color:var(--sky)}
.sec-alt .grid3 .feat:nth-child(3n+3):hover{border-color:var(--mint)}
.feat .ic{background:linear-gradient(135deg,var(--cloud),#DCE8F2)}

/* ---- running cost cards ---- */
.tcard{position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.tcard:before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--sky);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tcard.in:before{transform:scaleX(1)}
.tcard.best:before{background:var(--mint)}
.tcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,41,64,.12)}
.tcard .big{background:linear-gradient(120deg,var(--steel),var(--ocean));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- buttons ---- */
.btn-red{background:var(--grad-red);position:relative;overflow:hidden}
.btn-red:hover{background:var(--grad-red);filter:brightness(1.06);
  box-shadow:0 8px 22px rgba(224,57,57,.32)}
.btn{transition:transform .16s,box-shadow .2s,filter .16s}
.btn:active{transform:translateY(1px)}

/* ---- a reading progress line ---- */
.prog-top{position:fixed;left:0;top:0;height:3px;z-index:120;width:0;
  background:var(--grad-red);transition:width .12s linear}

/* ---- the eyebrow gets a small rule ---- */
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow:before{content:'';width:26px;height:2px;background:var(--red);flex:none}

/* ---- article cards ---- */
.ncard{transition:transform .22s,box-shadow .22s}
.ncard:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(16,41,64,.13)}
.ncard .nd{background:linear-gradient(120deg,var(--red),#B31319);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- stock cards ---- */
.sc{transition:transform .22s,box-shadow .22s}
.sc:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,41,64,.12)}
.sc.ready .avail{background:linear-gradient(120deg,#E4F4EC,#D3EEE0)}

/* ---- the walkthrough panel ---- */
.wt{background:var(--grad-ocean)}
.wt-tab.on{background:rgba(255,255,255,.16);box-shadow:inset 0 -3px 0 var(--red)}

/* ---- nobody who asked for less motion gets any of it ---- */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .tech.drawing .hull,.tech.drawing .glz,.tech.drawing .pnl,.tech.drawing .pnl2,
  .tech.drawing .td,.tech.drawing .whl,.tech.drawing .dim,.tech.drawing .tblock{
    animation:none;opacity:1;stroke-dashoffset:0}
  .tcard:before{transform:scaleX(1)}
  .prog-top{display:none}
}
/* ---- the ZBus logo, from the brand library in the management system ---- */
and one gleam passes across. About two and a half seconds. */
.zbus-logo{width:100%;height:auto;display:block;overflow:visible}
.zbus-logo .zb-mark{transform-origin:50% 50%;animation:zbSettle 2.4s cubic-bezier(.22,1,.36,1) both}

.zbus-logo .zb-coach{transform:translateX(-240px);
  animation:zbDrive 2.2s cubic-bezier(.65,0,.35,1) .1s both}
.zbus-logo .zb-road{transform-origin:left center;transform:scaleX(0);
  animation:zbRoad 2.2s cubic-bezier(.65,0,.35,1) .1s both}
.zbus-logo .zb-z{opacity:0;transform:translateX(-120px);
  animation:zbZ 1.05s cubic-bezier(.22,1,.36,1) .78s both}
.zbus-logo .zb-l1,.zbus-logo .zb-l2,.zbus-logo .zb-l3{opacity:0;transform:translateY(38px)}
.zbus-logo .zb-l1{animation:zbLetter .9s cubic-bezier(.22,1,.36,1) 1.02s both}
.zbus-logo .zb-l2{animation:zbLetter .9s cubic-bezier(.22,1,.36,1) 1.14s both}
.zbus-logo .zb-l3{animation:zbLetter .9s cubic-bezier(.22,1,.36,1) 1.26s both}
.zbus-logo .zb-spark{opacity:0;transform-origin:817px 415px;transform:scale(.15) rotate(-110deg);
  animation:zbSpark .8s cubic-bezier(.34,1.56,.64,1) 1.72s both}
.zbus-logo .zb-gleam{animation:zbGleam 1.1s cubic-bezier(.4,0,.2,1) 2.1s both}

@keyframes zbDrive{from{transform:translateX(-240px)}to{transform:translateX(960px)}}
@keyframes zbRoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes zbZ{from{opacity:0;transform:translateX(-120px)}to{opacity:1;transform:translateX(0)}}
@keyframes zbLetter{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
@keyframes zbSpark{from{opacity:0;transform:scale(.15) rotate(-110deg)}
  60%{opacity:1}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes zbGleam{from{opacity:0;transform:translateX(0) skewX(-18deg)}
  15%{opacity:1}85%{opacity:1}to{opacity:0;transform:translateX(1560px) skewX(-18deg)}}
@keyframes zbSettle{from{transform:scale(.968)}to{transform:scale(1)}}

/* the coach leaves the frame and stays gone */
.zbus-logo .zb-coach{animation-fill-mode:both}

/* optional idle: the sparkle breathes once everything has landed */
.zbus-logo.zb-idle .zb-spark{animation:zbSpark .8s cubic-bezier(.34,1.56,.64,1) 1.72s both,
  zbBreathe 3.6s ease-in-out 2.6s infinite}
@keyframes zbBreathe{0%,100%{opacity:1;transform:scale(1) rotate(0)}
  50%{opacity:.7;transform:scale(.86) rotate(0)}}

/* respect the accessibility setting: show the finished mark, do not animate */
@media (prefers-reduced-motion: reduce){
  .zbus-logo *{animation:none!important;opacity:1!important;transform:none!important}
  .zbus-logo .zb-road{transform:scaleX(1)!important}
  .zbus-logo .zb-coach,.zbus-logo .zb-gleamwrap{display:none!important}
}

/* ---- ZBus quotation document: six printed sheets ---- */
.brandmark{width:210px}
.brandmark .zbus-logo{width:100%}
header .brandmark{width:150px}
footer .brandmark{width:190px}
.hero-mark{width:min(430px,62vw);margin-bottom:26px}
@media(max-width:900px){header .brandmark{width:124px}.hero-mark{width:min(320px,72vw)}}
.lost{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.lost a{border:1px solid var(--mist);border-radius:13px;padding:16px 18px;text-decoration:none;
  display:flex;flex-direction:column;transition:transform .18s,border-color .18s,box-shadow .18s}
.lost a:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,41,64,.10)}
.lost b{font-size:15.5px;color:var(--steel)}
.lost em{font-size:13px;color:var(--slate);font-style:normal;margin-top:3px}
@media(max-width:640px){.lost{grid-template-columns:1fr}}

.wel-back{position:fixed;inset:0;z-index:200;background:rgba(10,16,24,.62);
  backdrop-filter:blur(3px);animation:welFade .35s ease}
.wel-back[hidden]{display:none}
.wel{position:fixed;z-index:201;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(600px,calc(100vw - 32px));background:#fff;border-radius:20px;padding:38px 40px 30px;
  box-shadow:0 30px 80px rgba(10,16,24,.4);animation:welIn .45s cubic-bezier(.2,.9,.3,1)}
.wel[hidden]{display:none}
@keyframes welFade{from{opacity:0}}
@keyframes welIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}}
.wel-mark{width:190px;margin-bottom:22px}
.wel h2{font-family:var(--disp);font-size:31px;color:var(--steel);letter-spacing:-.8px;
  margin-bottom:14px}
.wel-p{font-size:15.5px;line-height:1.62;color:var(--slate);margin-bottom:14px}
.wel-row{display:flex;gap:11px;align-items:center;margin-top:24px;flex-wrap:wrap}
.wel-listen{display:flex;align-items:center;gap:9px;background:var(--cloud);border:2px solid #CFE0EE;
  color:var(--steel);font-family:var(--sans);font-weight:800;font-size:14.5px;padding:11px 20px;
  border-radius:9px;cursor:pointer}
.wel-listen:hover{border-color:var(--steel)}
.wel-listen.on{background:var(--red);border-color:var(--red);color:#fff}
.wel-listen .ic{font-size:12px}
.wel-x{position:absolute;right:16px;top:14px;background:none;border:none;font-size:26px;
  color:var(--slate);cursor:pointer;line-height:1}
.wel-x:hover{color:var(--ink)}
.wel-skip{display:flex;gap:8px;align-items:center;margin-top:20px;font-size:12.5px;
  color:var(--slate);cursor:pointer}
.wel-skip input{accent-color:var(--red);width:15px;height:15px}
/* the pointer down to the assistant */
.wel-point{position:fixed;right:34px;bottom:96px;z-index:202;color:#fff;font-size:13.5px;
  font-weight:800;text-align:right;animation:pointIn .5s ease .3s both}
.wel-point:after{content:'';display:block;margin:6px 14px 0 auto;width:2px;height:26px;
  background:linear-gradient(180deg,transparent,#fff)}
@keyframes pointIn{from{opacity:0;transform:translateY(-8px)}}
@media(max-width:640px){.wel{padding:30px 24px 24px}.wel h2{font-size:25px}.wel-mark{width:150px}}

.rc-tools{display:flex;gap:22px;align-items:flex-end;margin-top:34px;flex-wrap:wrap}
.rc-set{flex:1;min-width:290px}
.rc-set label{display:block;font-size:13.5px;font-weight:800;color:var(--steel);margin-bottom:10px}
.rc-set label span{color:var(--red);font-size:17px}
.rc-set input[type=range]{width:100%;accent-color:var(--red);height:6px}
.rc-marks{display:flex;justify-content:space-between;margin-top:8px;gap:6px;flex-wrap:wrap}
.rc-marks button{background:none;border:1px solid var(--mist);border-radius:20px;padding:5px 11px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--slate);cursor:pointer}
.rc-marks button:hover{border-color:var(--red);color:var(--red)}
.rc-marks button.on{background:var(--red);border-color:var(--red);color:#fff}
.rc-track{margin-top:34px;background:var(--dark);border-radius:18px;padding:26px 24px;
  background:var(--grad-ocean)}
.rc-lane{margin-bottom:20px}
.rc-lane:last-child{margin-bottom:0}
.rc-head{display:flex;gap:10px;align-items:baseline;color:#fff;font-size:14px;margin-bottom:7px}
.rc-head b{font-family:var(--disp);font-size:16px}
.rc-head em{font-style:normal;color:#8FAAC2;font-size:12.5px}
.rc-head .km{margin-left:auto;font-family:var(--disp);font-weight:900;font-size:19px;color:var(--red)}
.rc-lane.ours .rc-head .km{color:#7BD3A6}
.rc-rail{position:relative;height:44px;background:rgba(255,255,255,.06);border-radius:10px;
  overflow:hidden}
.rc-rail:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 12px,transparent 12px 26px)}
.rc-bus{position:absolute;top:6px;left:0;height:32px;transition:left 2.6s cubic-bezier(.3,.8,.4,1)}
.rc-bus svg{height:32px;width:auto;display:block}
.rc-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,
  rgba(224,57,57,.30),rgba(224,57,57,.06));transition:width 2.6s cubic-bezier(.3,.8,.4,1)}
.rc-lane.ours .rc-fill{background:linear-gradient(90deg,rgba(30,142,90,.34),rgba(30,142,90,.06))}
.rc-note{font-size:13.5px;color:var(--slate);margin-top:16px;line-height:1.6}
.refs{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ref{background:#fff;border:1px solid var(--mist);border-radius:13px;padding:16px 18px;
  border-left:4px solid var(--sky)}
.ref b{font-size:14.5px;color:var(--steel);display:block}
.ref p{font-size:13.5px;color:var(--slate);margin-top:5px;line-height:1.55}
.ref cite{display:block;font-size:12px;color:var(--slate);margin-top:8px;font-style:italic;
  padding-top:8px;border-top:1px solid var(--mist)}

.rc-fill.batt{background:linear-gradient(90deg,rgba(30,142,90,.55),rgba(30,142,90,.30))}
.rc-fill.dies{background:linear-gradient(90deg,rgba(224,57,57,.34),rgba(224,57,57,.06))}
.rc-lane .rc-fill{transition:width 2.6s cubic-bezier(.3,.8,.4,1),left 2.6s cubic-bezier(.3,.8,.4,1)}
.pubtag{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(30,142,90,.24);color:#7BD3A6;padding:3px 9px;border-radius:20px}
.rc-leg{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px;
  font-size:12.5px;color:#8FAAC2}
.rc-leg .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.rc-leg .sw.b{background:#1E8E5A}
.rc-leg .sw.d{background:#E0181F}
.rc-lane.pub .rc-head b{color:#7BD3A6}

.perf{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:26px}
.pf{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:22px;
  border-top:5px solid var(--mist)}
.pf.pub{border-top-color:#1E8E5A}
.pf-h{display:flex;gap:9px;align-items:center;margin-bottom:4px}
.pf-h b{font-family:var(--disp);font-size:19px;color:var(--steel)}
.pf-h .pubtag{background:#E4F4EC;color:#1E8E5A}
.pf-e{font-size:12.5px;color:var(--slate);line-height:1.45;margin-bottom:16px}
.pf-m{margin-bottom:14px}
.pf-lab{display:flex;font-size:13px;margin-bottom:5px}
.pf-lab span:first-child{color:var(--slate);font-weight:700}
.pf-lab span:last-child{margin-left:auto;font-weight:800;color:var(--steel)}
.pf-bar{height:9px;background:var(--cloud);border-radius:5px;overflow:hidden}
.pf-bar i{display:block;height:9px;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--sky),#1B4D89);
  transition:width 1s cubic-bezier(.2,.8,.3,1)}
.pf-bar.t i{background:linear-gradient(90deg,var(--red),#981015)}
.pf-at{font-size:11.5px;color:var(--slate);margin-top:5px;font-style:italic}
.pf-none{background:var(--paper);border-radius:10px;padding:14px;font-size:13px;
  color:var(--slate);line-height:1.55;margin-bottom:14px}
.pf-d{border-top:1px solid var(--mist);padding-top:12px;font-size:13px}
.pf-d div{display:flex;padding:4px 0;gap:12px}
.pf-d dt{color:var(--slate);flex:none}
.pf-d dd{margin-left:auto;text-align:right;font-weight:700;color:var(--steel)}
.pf-d dd.miss{color:#B7791F;font-weight:600;font-style:italic}

/* ---- grouped navigation ----
   Fourteen items across the top wrapped onto two lines and looked untidy.
   Five do not. Everything is still one click from the top, and the
   descriptions mean nobody has to guess what is behind a heading. */
.nav nav{gap:4px;align-items:center}
.nav nav > a{padding:9px 13px;border-bottom:none;border-radius:8px;white-space:nowrap}
.nav nav > a:hover{background:var(--paper)}
.nav nav > a.on{color:var(--red);background:#FDF1F2}
.dd{position:relative}
.dd-t{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--ink);
  padding:9px 13px;border-radius:8px;white-space:nowrap}
.dd-t:hover{background:var(--paper)}
.dd-t i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--slate);transition:transform .18s}
.dd.open .dd-t{background:#FDF1F2;color:var(--red)}
.dd.open .dd-t i{transform:rotate(180deg);border-top-color:var(--red)}
.dd.here .dd-t{color:var(--red)}
.dd-m{position:absolute;left:0;top:calc(100% + 8px);min-width:300px;background:#fff;
  border:1px solid var(--mist);border-radius:14px;padding:8px;display:none;
  box-shadow:0 18px 46px rgba(16,41,64,.16);z-index:70}
.dd.open .dd-m{display:block;animation:ddIn .18s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}}
.dd-m a{display:flex;flex-direction:column;padding:10px 13px;border-radius:9px;
  text-decoration:none;border-bottom:none}
.dd-m a:hover{background:var(--paper)}
.dd-m a.on{background:#FDF1F2}
.dd-m b{font-size:14.5px;color:var(--steel);font-weight:800}
.dd-m a.on b{color:var(--red)}
.dd-m em{font-size:12.5px;color:var(--slate);font-style:normal;margin-top:2px;line-height:1.4}

@media(max-width:1180px){
  .nav nav > a,.dd-t{padding:9px 10px;font-size:13.5px}
  .dd-m{min-width:270px}
}
@media(max-width:900px){
  .nav nav.open{padding:14px 18px 20px;gap:2px}
  .dd{width:100%}
  .dd-t{width:100%;justify-content:space-between;font-size:15px;padding:13px 12px}
  .dd-m{position:static;display:block;border:none;box-shadow:none;padding:0 0 8px 12px;
    min-width:0;background:none}
  .dd:not(.open) .dd-m{display:none}
  .dd-m a{padding:9px 12px}
  .dd-m em{display:none}
  .nav nav > a{width:100%;padding:13px 12px;font-size:15px}
}

.wel-vid{position:relative;border-radius:14px;overflow:hidden;background:#14202D;
  aspect-ratio:16/9;margin-bottom:22px}
.wel-vid video{width:100%;height:100%;object-fit:cover;display:block}
.wel-slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#fff;padding:20px;
  background:radial-gradient(70% 90% at 70% 20%,rgba(46,125,191,.28),transparent 60%),
             linear-gradient(135deg,#101A26,#1B2F3F)}
.wel-slot:before{content:'';position:absolute;inset:12px;border:2px dashed rgba(255,255,255,.18);
  border-radius:10px}
.wel-mark-sm{width:110px;margin-bottom:14px;position:relative}
.wel-slot b{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--red);
  background:rgba(224,57,57,.14);padding:4px 12px;border-radius:20px;position:relative}
.wel-slot span{font-size:12.5px;color:#8FAAC2;margin-top:10px;line-height:1.5;position:relative}
.wel-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:none;background:rgba(224,57,57,.94);
  color:#fff;font-size:22px;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.wel-vplay:hover{background:var(--red)}
.wel-unmute{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;background:rgba(224,57,57,.94);color:#fff;
  border:none;border-radius:24px;padding:11px 20px;font-family:var(--sans);font-weight:800;
  font-size:14px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);
  animation:unmutePulse 2s ease-in-out infinite}
.wel-unmute:hover{background:var(--red)}
@keyframes unmutePulse{0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.045)}}

.cfg-views{display:flex;gap:5px;margin-bottom:14px}
.cfg-views button{flex:1;padding:9px 6px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#BFD3E4;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:12.5px}
.cfg-views button:hover{background:rgba(255,255,255,.14);color:#fff}
.cfg-views button.on{background:var(--red);border-color:var(--red);color:#fff}

.cfg-views button.v3d{background:rgba(224,57,57,.18);border-color:rgba(224,57,57,.4);color:#F5B8B8}
.cfg-views button.v3d.on{background:var(--red);border-color:var(--red);color:#fff}
.cfg-canvas canvas{width:100%;height:auto;display:block;border-radius:12px}
.v3d-load,.v3d-none{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:300px;color:#BFD3E4;font-size:14.5px;text-align:center;padding:24px}
.v3d-none b{font-family:var(--disp);font-size:18px;color:#fff}
.v3d-none span{max-width:44ch;color:#8FAAC2;font-size:13.5px;line-height:1.55}
.v3d-load .sp{width:26px;height:26px;border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--red);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.v3d-hint{text-align:center;font-size:12.5px;color:#8FAAC2;margin-top:10px}

.pickrow{display:flex;gap:9px;align-items:center;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--mist)}
.pickrow label{font-size:12px;font-weight:800;color:var(--slate);flex:1}
.pickrow input[type=color],.swline input[type=color]{width:38px;height:32px;padding:2px;
  border:2px solid var(--mist);border-radius:8px;background:#fff;cursor:pointer}
.pickrow input[type=text]{width:96px;border:2px solid var(--mist);border-radius:8px;
  padding:7px 9px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;text-transform:uppercase}
.pickrow input:focus,.swline input:focus{outline:none;border-color:var(--steel)}
.swline input[type=color]{width:30px;height:26px;flex:none}

.ph-tabs{display:flex;gap:6px;margin-top:30px}
.ph-tabs button{padding:10px 20px;border:2px solid var(--mist);background:#fff;border-radius:9px;
  font-family:var(--sans);font-weight:800;font-size:14px;color:var(--slate);cursor:pointer}
.ph-tabs button.on{border-color:var(--red);color:var(--red);background:#FDF1F2}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:36px}
.ph{background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden;
  transition:transform .22s,box-shadow .22s;cursor:zoom-in}
.ph:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,41,64,.13)}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--cloud)}
.ph .pb{padding:18px 20px}
.ph b{display:block;font-size:15.5px;color:var(--steel);font-family:var(--disp)}
.ph p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.55}
.ph .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:var(--cloud);color:var(--slate);
  padding:3px 9px;border-radius:20px;margin-top:10px}
.lightbox{position:fixed;inset:0;z-index:210;background:rgba(9,16,24,.94);
  display:flex;align-items:center;justify-content:center;padding:28px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:82vh;border-radius:10px}
.lightbox .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#BFD3E4;
  font-size:14px;padding:0 24px}
.lightbox .x{position:absolute;right:24px;top:20px;background:none;border:none;color:#fff;
  font-size:34px;cursor:pointer;line-height:1}

.fit{display:grid;grid-template-columns:360px 1fr;gap:26px;margin-top:34px;align-items:start}
.fit-in{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px;
  position:sticky;top:96px}
.fit-in h3{font-size:16px;color:var(--steel);margin-bottom:16px}
.fit-in input{width:100%;border:2px solid var(--mist);border-radius:9px;padding:11px 13px;
  font-family:var(--sans);font-size:15px}
.fit-in input:focus{outline:none;border-color:var(--steel)}
.fit-out{display:flex;flex-direction:column;gap:12px}
.fr{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:20px 22px;
  border-left:5px solid var(--mist)}
.fr.yes{border-left-color:#1E8E5A}
.fr.tight{border-left-color:#B7791F}
.fr.no{border-left-color:var(--red)}
.fr-h{display:flex;gap:12px;align-items:baseline}
.fr-h b{font-family:var(--disp);font-size:19px;color:var(--steel)}
.fr-h em{font-style:normal;font-size:13px;color:var(--slate)}
.fr-h .v{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 12px;border-radius:20px}
.fr.yes .v{background:#E4F4EC;color:#1E8E5A}
.fr.tight .v{background:#FEF6E7;color:#B7791F}
.fr.no .v{background:#FCE8E9;color:var(--red)}
.fr-rows{margin-top:14px;font-size:13.5px}
.fr-rows div{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--mist)}
.fr-rows div:last-child{border-bottom:none}
.fr-rows .k{color:var(--slate);flex:1}
.fr-rows .n{font-weight:700;color:var(--steel);white-space:nowrap}
.fr-rows .n.bad{color:var(--red)}
.fr-rows .n.warn{color:#B7791F}
.fr-note{font-size:13px;color:var(--slate);margin-top:12px;line-height:1.55;font-style:italic}
@media(max-width:900px){.fit{grid-template-columns:1fr}.fit-in{position:static}}

.tn-pick{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;max-width:660px}
.tn-pick select{width:100%;border:2px solid var(--mist);border-radius:9px;padding:12px 14px;
  font-family:var(--sans);font-size:15px;background:#fff}
.tn-pick select:focus{outline:none;border-color:var(--steel)}
.tn-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--dark);
  background:var(--grad-ocean);color:#fff;border-radius:16px;padding:22px 26px;margin-top:28px}
.tn-head b{font-family:var(--disp);font-size:20px}
.tn-head .sc{margin-left:auto;text-align:right}
.tn-head .sc i{display:block;font-style:normal;font-family:var(--disp);font-size:28px;
  font-weight:900;color:#7BD3A6}
.tn-head .sc span{font-size:12px;color:#8FAAC2}
.tn-grp{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:30px 0 12px}
.tq{background:#fff;border:1px solid var(--mist);border-radius:13px;padding:18px 20px;
  margin-bottom:9px;border-left:5px solid #1E8E5A}
.tq.part{border-left-color:#B7791F}
.tq.ask{border-left-color:var(--sky)}
.tq b{display:block;font-size:14.5px;color:var(--steel)}
.tq p{font-size:13.5px;color:var(--slate);margin-top:7px;line-height:1.6}
.tq .st{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-top:10px}
.tq .st.ok{background:#E4F4EC;color:#1E8E5A}
.tq .st.pt{background:#FEF6E7;color:#B7791F}
.tq .st.as{background:#EAF2FA;color:var(--sky)}
.tn-acts{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.tn-formal{background:#fff;border:1px solid var(--mist);border-left:5px solid var(--red);
  border-radius:16px;padding:26px 28px;margin-top:22px;max-width:560px}
.tn-formal[hidden]{display:none}
.tn-formal h3{font-size:19px;color:var(--steel);margin-bottom:10px}
.tn-formal p{font-size:14px;color:var(--slate);line-height:1.6;margin-bottom:12px}
.tn-formal input,.tn-formal textarea{width:100%;border:2px solid var(--mist);border-radius:9px;
  padding:11px 13px;font-family:var(--sans);font-size:15px}
.tn-formal input:focus,.tn-formal textarea:focus{outline:none;border-color:var(--steel)}
@media(max-width:700px){.tn-pick{grid-template-columns:1fr}}
@media print{.tn-pick,.tn-acts,.msg-dock,.bot-win{display:none}}

.sv-pick{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;max-width:600px}
.sv-pick select,.sv-pick input{width:100%;border:2px solid var(--mist);border-radius:9px;
  padding:12px 14px;font-family:var(--sans);font-size:15px;background:#fff}
.sv-pick select:focus,.sv-pick input:focus{outline:none;border-color:var(--steel)}
.sv-tbl{width:100%;border-collapse:collapse;margin-top:26px;font-size:14px}
.sv-tbl th{text-align:left;padding:12px 14px;background:var(--dark);color:#fff;
  font-family:var(--disp);font-size:12.5px;letter-spacing:.05em}
.sv-tbl th:last-child,.sv-tbl td:last-child{text-align:right}
.sv-tbl td{padding:12px 14px;border-bottom:1px solid var(--mist);vertical-align:top}
.sv-tbl tr:nth-child(even) td{background:var(--paper)}
.sv-tbl .it{font-weight:700;color:var(--steel)}
.sv-tbl .sm{display:block;font-size:12.5px;color:var(--slate);margin-top:3px;line-height:1.45}
.sv-tot{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}
.sv-tot div{flex:1;min-width:190px;background:#fff;border:1px solid var(--mist);
  border-radius:14px;padding:20px 22px;border-top:5px solid var(--red)}
.sv-tot b{display:block;font-family:var(--disp);font-size:26px;color:var(--steel)}
.sv-tot span{font-size:13px;color:var(--slate)}
@media(max-width:700px){.sv-pick{grid-template-columns:1fr}}

.dv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:34px}
.dv{background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden}
.dv video{width:100%;aspect-ratio:16/9;display:block;background:#14202D}
.dv .db{padding:18px 20px}
.dv b{display:block;font-family:var(--disp);font-size:16.5px;color:var(--steel)}
.dv p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.55}
.dv .len{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;
  background:var(--cloud);color:var(--slate);padding:3px 10px;border-radius:20px;margin-top:10px}

.rt{display:grid;grid-template-columns:340px 1fr;gap:26px;margin-top:34px;align-items:start}
.rt-in{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px;position:sticky;top:96px}
.rt-in h3{font-size:16px;color:var(--steel);margin-bottom:16px}
.rt-in input,.rt-in select{width:100%;border:2px solid var(--mist);border-radius:9px;
  padding:11px 13px;font-family:var(--sans);font-size:15px;background:#fff}
.rt-in input:focus,.rt-in select:focus{outline:none;border-color:var(--steel)}
.rt-hero{background:var(--grad-ocean);color:#fff;border-radius:18px;padding:30px 32px}
.rt-hero .big{font-family:var(--disp);font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1;
  color:#7BD3A6}
.rt-hero .sub{font-size:16px;color:#BFD3E4;margin-top:10px;max-width:46ch;line-height:1.55}
.rt-bar{display:flex;height:44px;border-radius:10px;overflow:hidden;margin-top:22px;
  border:1px solid rgba(255,255,255,.2)}
.rt-bar i{display:flex;align-items:center;justify-content:center;font-size:12.5px;
  font-weight:800;color:#fff;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.rt-bar .el{background:linear-gradient(90deg,#1E8E5A,#2FBF7E)}
.rt-bar .di{background:linear-gradient(90deg,#5D5D61,#8A8A90)}
.rt-legs{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.rt-leg{display:flex;align-items:center;gap:12px;font-size:13.5px}
.rt-leg .lb{width:112px;color:#BFD3E4;flex:none}
.rt-leg .tr{flex:1;height:16px;background:rgba(255,255,255,.09);border-radius:8px;overflow:hidden;display:flex}
.rt-leg .tr b{display:block;height:16px}
.rt-leg .tr .e{background:#2FBF7E}
.rt-leg .tr .d{background:#7A7A80}
.rt-leg .vl{width:96px;text-align:right;font-weight:800;flex:none}
.rt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:20px}
.rt-cards div{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:18px 20px;
  border-top:5px solid var(--red)}
.rt-cards b{display:block;font-family:var(--disp);font-size:25px;color:var(--steel)}
.rt-cards span{font-size:12.5px;color:var(--slate);line-height:1.45;display:block;margin-top:4px}
.rt-assump{background:var(--paper);border-radius:14px;padding:20px 22px;margin-top:20px;font-size:13.5px}
.rt-assump h4{font-size:14px;color:var(--steel);margin-bottom:8px}
.rt-assump li{color:var(--slate);margin:5px 0 5px 18px;line-height:1.55}
@media(max-width:900px){.rt{grid-template-columns:1fr}.rt-in{position:static}}

.api-ep{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px 26px;
  margin-top:20px;border-left:5px solid var(--sky)}
.api-ep h3{font-size:17px;color:var(--steel)}
.api-ep code{display:inline-block;background:var(--dark);color:#7BD3A6;padding:8px 14px;
  border-radius:8px;font-family:ui-monospace,Consolas,monospace;font-size:13px;margin:12px 0 10px}
.api-ep p{font-size:13.5px;color:var(--slate);line-height:1.6;margin-bottom:12px}
.api-ep pre{background:var(--paper);border:1px solid var(--mist);border-radius:10px;
  padding:16px 18px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;
  color:var(--steel);overflow-x:auto;line-height:1.6;margin:0}
.dl-sample{margin-top:30px}
.dl-sample h4{font-size:15px;color:var(--steel);margin-bottom:10px}
.sv-tbl tr.ghost td{opacity:.55;font-style:italic}

.wh-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:32px}
.wh-pick button{background:#fff;border:2px solid var(--mist);border-radius:14px;padding:18px 18px;
  text-align:left;cursor:pointer;font-family:var(--sans);transition:border-color .18s,transform .18s}
.wh-pick button:hover{border-color:var(--steel);transform:translateY(-2px)}
.wh-pick button.on{border-color:var(--red);background:#FDF1F2}
.wh-pick b{display:block;font-family:var(--disp);font-size:15.5px;color:var(--steel)}
.wh-pick span{display:block;font-size:12.5px;color:var(--slate);margin-top:5px;line-height:1.45}
.wh-pick button.on b{color:var(--red)}
.wh-hero{background:var(--grad-ocean);color:#fff;border-radius:18px;padding:30px 32px;margin-top:26px}
.wh-hero .vd{font-family:var(--disp);font-size:clamp(26px,4vw,38px);font-weight:900;line-height:1.15}
.wh-hero .vs{font-size:16px;color:#BFD3E4;margin-top:12px;max-width:56ch;line-height:1.6}
.wh-hero .fit-tag{display:inline-block;margin-top:16px;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:22px}
.wh-hero .fit-tag.strong{background:rgba(123,211,166,.22);color:#7BD3A6}
.wh-hero .fit-tag.good{background:rgba(240,198,116,.2);color:#F0C674}
.wh-hero .fit-tag.maybe{background:rgba(143,170,194,.2);color:#BFD3E4}
.wh-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.wh-col{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:22px 24px}
.wh-col.d{border-left:5px solid #8A8A90}
.wh-col.e{border-left:5px solid #2E7DBF}
.wh-col h4{font-family:var(--disp);font-size:16px;color:var(--steel);margin-bottom:12px}
.wh-col li{font-size:13.5px;color:var(--slate);line-height:1.6;margin:0 0 9px 17px}
.wh-num{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.wh-num div{flex:1;min-width:170px;background:#fff;border:1px solid var(--mist);border-radius:14px;
  padding:18px 20px;border-top:5px solid var(--red)}
.wh-num b{display:block;font-family:var(--disp);font-size:24px;color:var(--steel)}
.wh-num span{font-size:12.5px;color:var(--slate);display:block;margin-top:4px;line-height:1.45}
@media(max-width:760px){.wh-cols{grid-template-columns:1fr}}

.cx-list{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.cx{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:22px 24px;
  border-left:5px solid var(--amber,#B7791F)}
.cx-h{display:flex;gap:14px;align-items:baseline;margin-bottom:14px}
.cx-h b{font-family:var(--disp);font-size:17px;color:var(--steel)}
.cx-h span{margin-left:auto;font-size:12.5px;color:var(--slate);white-space:nowrap}
.cx-r{display:flex;gap:14px;font-size:14px;padding:7px 0;align-items:flex-start}
.cx-r .lb{flex:none;width:74px;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:20px;text-align:center}
.cx-r .lb.was{background:#FCE8E9;color:var(--red)}
.cx-r .lb.now{background:#E4F4EC;color:#1E8E5A}
.cx-r span:last-child{color:var(--steel);line-height:1.55}
.cx p{font-size:13.5px;color:var(--slate);line-height:1.6;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--mist)}

.snd{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:32px}
.sn{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:20px 22px;
  border-left:5px solid var(--mist)}
.sn.has{border-left-color:#1E8E5A}
.sn-h{display:flex;gap:12px;align-items:baseline}
.sn-h b{font-family:var(--disp);font-size:15.5px;color:var(--steel)}
.sn-h .db{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--slate);
  background:var(--cloud);padding:3px 10px;border-radius:20px;white-space:nowrap}
.sn p{font-size:13.5px;color:var(--slate);line-height:1.55;margin-top:8px}
.sn audio{width:100%;margin-top:14px;display:none}
.sn.has audio{display:block}
.sn-none{margin-top:14px;font-size:12.5px;font-weight:800;color:#B7791F;
  background:#FEF6E7;padding:9px 14px;border-radius:9px;text-align:center}
.sn.has .sn-none{display:none}

.tk-find{display:flex;gap:10px;margin-top:30px;max-width:520px}
.tk-find input{flex:1;border:2px solid var(--mist);border-radius:9px;padding:13px 15px;
  font-family:ui-monospace,Consolas,monospace;font-size:16px;text-transform:uppercase}
.tk-find input:focus{outline:none;border-color:var(--steel)}
.tk-steps{margin-top:28px;display:flex;flex-direction:column;gap:0}
.tk-st{display:flex;gap:18px;padding:0 0 24px;position:relative}
.tk-st:before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--mist)}
.tk-st:last-child:before{display:none}
.tk-st .dot{width:32px;height:32px;border-radius:50%;flex:none;border:3px solid var(--mist);
  background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;
  font-weight:900;color:var(--mist);z-index:1}
.tk-st.done .dot{background:#1E8E5A;border-color:#1E8E5A;color:#fff}
.tk-st.done:before{background:#1E8E5A}
.tk-st.now .dot{border-color:var(--red);color:var(--red);
  box-shadow:0 0 0 5px rgba(224,57,57,.14)}
.tk-st b{display:block;font-family:var(--disp);font-size:16px;color:var(--steel)}
.tk-st.now b{color:var(--red)}
.tk-st p{font-size:13.5px;color:var(--slate);margin-top:5px;line-height:1.55}
.tk-st .dt{font-size:12.5px;color:var(--slate);margin-top:6px;font-weight:700}
.dm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:30px}
.dm-c{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:22px 24px;
  border-top:5px solid var(--red)}
.dm-c b{display:block;font-family:var(--disp);font-size:17px;color:var(--steel)}
.dm-c p{font-size:13.5px;color:var(--slate);margin-top:8px;line-height:1.55}
.dm-book{background:#fff;border:1px solid var(--mist);border-left:5px solid var(--red);
  border-radius:16px;padding:26px 28px;margin-top:30px;max-width:560px}
.dm-book h3{font-size:19px;color:var(--steel);margin-bottom:16px}
.dm-book input,.dm-book select,.dm-book textarea{width:100%;border:2px solid var(--mist);
  border-radius:9px;padding:11px 13px;font-family:var(--sans);font-size:15px}
.dm-book input:focus,.dm-book select:focus,.dm-book textarea:focus{outline:none;border-color:var(--steel)}

.fd-live{margin-top:32px}
.fd-head{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--grad-ocean);
  color:#fff;border-radius:16px;padding:22px 26px}
.fd-head b{display:block;font-family:var(--disp);font-size:24px}
.fd-head span{font-size:12.5px;color:#8FAAC2}
.fd-live-dot{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;color:#8FAAC2}
.fd-live-dot i{width:9px;height:9px;border-radius:50%;background:#2FBF7E;
  animation:fdPulse 2.4s ease-in-out infinite}
@keyframes fdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:18px}
.fd-m{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:22px 24px;
  border-top:5px solid var(--red)}
.fd-v{font-family:var(--disp);font-size:38px;font-weight:900;color:var(--steel);line-height:1}
.fd-v em{font-style:normal;font-size:15px;color:var(--slate);margin-left:6px;font-weight:700}
.fd-m b{display:block;font-size:14.5px;color:var(--steel);margin-top:8px}
.fd-m p{font-size:13px;color:var(--slate);line-height:1.55;margin-top:8px}

.hw-grp{font-family:var(--disp);font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:34px 0 14px;display:flex;align-items:center;gap:10px}
.hw-grp:before{content:'';width:26px;height:2px;background:var(--red)}
.hw-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.hw{background:#fff;border:1px solid var(--mist);border-radius:16px;overflow:hidden;
  transition:transform .2s,box-shadow .2s}
.hw:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,41,64,.12)}
.hw video{width:100%;aspect-ratio:16/9;display:block;background:#14202D}
.hw .hb{padding:18px 20px}
.hw b{display:block;font-family:var(--disp);font-size:16.5px;color:var(--steel)}
.hw p{font-size:13.5px;color:var(--slate);margin-top:7px;line-height:1.55}
.hw .len{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;
  background:var(--cloud);color:var(--slate);padding:3px 10px;border-radius:20px;margin-top:12px}
.hw .tryit{font-size:12.5px;font-weight:800;color:var(--red);text-decoration:none;
  margin-left:12px;border-bottom:1px solid rgba(224,57,57,.3)}
.hw .tryit:hover{border-bottom-color:var(--red)}

.lg-nav{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 6px}
.lg-nav a{font-size:12.5px;font-weight:800;color:var(--steel);background:var(--cloud);
  padding:8px 15px;border-radius:22px;text-decoration:none;border-bottom:none}
.lg-nav a:hover{background:var(--steel);color:#fff}
.lg-h{font-size:23px;color:var(--steel);margin-top:44px;padding-top:18px;
  border-top:2px solid var(--mist);scroll-margin-top:90px}
.lg-p{color:var(--slate);margin-top:12px;font-size:14.5px;line-height:1.7}
.lg-p b{color:var(--steel)}
.lg-box{background:#fff;border:1px solid var(--mist);border-left:5px solid var(--sky);
  border-radius:14px;padding:20px 24px;margin-top:18px}
.lg-box h4{font-family:var(--disp);font-size:16px;color:var(--steel);margin-bottom:10px}
.lg-box p{font-size:14px;color:var(--slate);line-height:1.65;margin-bottom:10px}
.lg-box p:last-child{margin-bottom:0}
.lg-box b{color:var(--steel)}

.sf-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.sf-pick button{padding:11px 20px;border:2px solid var(--mist);background:#fff;border-radius:10px;
  font-family:var(--sans);font-weight:800;font-size:13.5px;color:var(--slate);cursor:pointer}
.sf-pick button.on{border-color:var(--red);color:var(--red);background:#FDF1F2}
.sf-tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.sf-tbl th{text-align:left;padding:11px 14px;background:var(--dark);color:#fff;
  font-family:var(--disp);font-size:12.5px;letter-spacing:.04em}
.sf-tbl th:not(:first-child){text-align:center;width:130px}
.sf-tbl td{padding:11px 14px;border-bottom:1px solid var(--mist);vertical-align:top}
.sf-tbl td.mid{text-align:center;vertical-align:middle}
.sf-tbl tr:nth-child(even) td{background:var(--paper)}
.sf-tbl .it{font-weight:700;color:var(--steel)}
.sf-tbl .sm{display:block;font-size:12.5px;color:var(--slate);margin-top:3px;line-height:1.45}
.sfx{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 11px;border-radius:20px;white-space:nowrap}
.sfx.ok{background:#E4F4EC;color:#1E8E5A}
.sfx.op{background:#FEF6E7;color:#B7791F}
.sfx.as{background:#EAF2FA;color:#2E7DBF}
.sfx.nx{background:var(--cloud);color:var(--slate)}
@media print{.sf-pick,.tn-acts{display:none}}

.ch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:34px}
.ch-c{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px 26px;
  border-top:5px solid var(--red);position:relative}
.ch-c .n{position:absolute;right:22px;top:18px;font-family:var(--disp);font-size:34px;
  font-weight:900;color:var(--cloud);line-height:1}
.ch-c b{display:block;font-family:var(--disp);font-size:17px;color:var(--steel);
  padding-right:44px;margin-bottom:9px}
.ch-c p{font-size:13.5px;color:var(--slate);line-height:1.6}

.au-sec{background:var(--paper)}
.au-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:32px}
.au{background:#fff;border:1px solid var(--mist);border-radius:16px;padding:24px 26px;
  border-left:5px solid var(--red)}
.au b{display:block;font-family:var(--disp);font-size:17px;color:var(--steel);margin-bottom:9px}
.au p{font-size:13.8px;color:var(--slate);line-height:1.65}

.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:20px}
.pt-c{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:20px 22px;
  border-top:5px solid var(--steel)}
.pt-c b{display:block;font-family:var(--disp);font-size:24px;color:var(--red);line-height:1}
.pt-c span{display:block;font-size:12.5px;font-weight:700;color:var(--steel);margin-top:6px}
.pt-c em{display:block;font-style:normal;font-size:13px;color:var(--slate);
  margin-top:9px;line-height:1.55}
.credit.nopic img{display:none}
.credit.nopic:before{content:'Photograph to come \2014 Zhongtong in TransJakarta service';
  display:flex;align-items:center;justify-content:center;min-height:170px;
  background:var(--cloud);border:2px dashed var(--mist);border-radius:12px;
  color:var(--slate);font-size:13px;font-weight:700;text-align:center;padding:20px}

.pv{margin:22px 0 6px;max-width:660px}
.pv-go{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--dark);background:var(--grad-ocean);color:#fff;border:none;
  border-radius:14px;padding:16px 20px;font-family:var(--sans);
  transition:transform .18s,box-shadow .18s}
.pv-go:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,41,64,.22)}
.pv-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:14px}
.pv-t{flex:1;font-family:var(--disp);font-size:15.5px;font-weight:800}
.pv-t em{display:block;font-style:normal;font-family:var(--sans);font-size:12.5px;
  font-weight:600;color:#8FAAC2;margin-top:3px}
.pv-x{flex:none;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.14);padding:6px 14px;border-radius:20px}
.pv.on .pv-go{border-radius:14px 14px 0 0}
.pv-body{background:#fff;border:1px solid var(--mist);border-top:none;
  border-radius:0 0 14px 14px;padding:16px 18px 18px}
.pv-body[hidden]{display:none}
.pv-body video{width:100%;aspect-ratio:16/9;display:block;border-radius:9px;background:#14202D}
.pv-note{font-size:13px;color:var(--slate);line-height:1.55;margin-top:12px}
.pv-note a{color:var(--red);font-weight:800}
@media print{.pv{display:none}}

.mf{margin:14px 0 4px;max-width:560px}
.mf-go{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:13px;padding:13px 17px;font-family:var(--sans);transition:background .18s}
.mf-go:hover{background:rgba(255,255,255,.12)}
.mf-ic{flex:none;width:33px;height:33px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:13px}
.mf-t{flex:1;font-family:var(--disp);font-size:14.5px;font-weight:800}
.mf-t em{display:block;font-style:normal;font-family:var(--sans);font-size:12px;
  font-weight:600;color:#8FAAC2;margin-top:2px}
.mf-x{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.14);padding:5px 13px;border-radius:20px}
.mf.on .mf-go{border-radius:13px 13px 0 0;border-bottom-color:transparent}
.mf-body{border:1px solid rgba(255,255,255,.16);border-top:none;border-radius:0 0 13px 13px;
  padding:12px;background:rgba(0,0,0,.25)}
.mf-body[hidden]{display:none}
.mf-body video{width:100%;aspect-ratio:16/9;display:block;border-radius:9px;background:#14202D}

.fp-bar{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:flex-end}
.fp-f{display:flex;flex-direction:column;gap:6px;min-width:190px}
.fp-f.grow{flex:1;min-width:250px}
.fp-f label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--slate)}
.fp-f select,.fp-f input{font-family:var(--sans);font-size:15px;padding:11px 13px;
  border:1px solid var(--mist);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.fp-f select:focus,.fp-f input:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(224,24,31,.12)}
.fp-count{margin-top:16px;font-size:14px;color:var(--slate)}
.fp-count b{color:var(--steel);font-size:16px}
.fp-out{margin-top:12px}
.fp-t{width:100%;border-collapse:collapse;font-size:14px}
.fp-t th{text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--slate);padding:0 12px 8px 0;border-bottom:2px solid var(--mist)}
.fp-t td{padding:11px 12px 11px 0;border-bottom:1px solid var(--mist);vertical-align:top}
.fp-t .pn{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--steel);white-space:nowrap}
.fp-t em{display:block;font-style:normal;font-size:12px;color:var(--slate);margin-top:3px}
.fp-fit{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  background:var(--cloud);color:var(--steel);padding:3px 8px;border-radius:20px;margin:0 4px 4px 0;white-space:nowrap}
.fp-more{margin-top:14px;font-size:13.5px;color:var(--slate)}
.own-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:28px}
.own-c{display:block;background:#fff;border:1px solid var(--mist);border-radius:14px;
  padding:20px 22px;border-top:5px solid var(--steel);text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-top-color .18s}
.own-c:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,41,64,.12);border-top-color:var(--red)}
.own-c b{display:block;font-family:var(--disp);font-size:17px;color:var(--steel)}
.own-c em{display:block;font-style:normal;font-size:13px;color:var(--slate);margin-top:7px;line-height:1.55}
@media(max-width:620px){.fp-f{min-width:100%}}

.fp-in{display:inline-block;font-size:11px;font-weight:800;background:#E8F6EE;color:#1E8E5A;
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.fp-add{font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--steel);
  background:#fff;border:1px solid var(--mist);border-radius:8px;padding:7px 11px;cursor:pointer;
  white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.fp-add:hover{border-color:var(--red);color:var(--red)}
.fp-add.on{background:#1E8E5A;border-color:#1E8E5A;color:#fff}
.fp-src{margin-top:8px;font-size:13px;color:var(--slate);max-width:64ch}
.page{display:none}
.page.on{display:block}

@media(max-width:900px){
  .wt-main{grid-template-columns:1fr}
  .wt-panel{border-left:none;border-top:1px solid rgba(255,255,255,.1)}
  .fgrid{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
  .nav nav.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;
    flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--mist);gap:4px}
  .burger{display:block}
  .row2{grid-template-columns:1fr}
  .hero-bus{display:none}
}

/* ---- Zhongtong worldwide (added 19 October 2026) ---- */
.ztw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;margin-top:38px}
.ztw-grid figure{margin:0;background:#fff;border:1px solid var(--mist);border-radius:14px;overflow:hidden}
.ztw-grid figure img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.ztw-grid figcaption{padding:22px 24px 26px}
.ztw-grid figcaption h3{margin:0 0 6px}
.ztw-grid .ztw-k{display:block;font-weight:700;color:var(--red);margin-bottom:12px}
.ztw-grid figcaption p{margin:0 0 10px;color:var(--slate);line-height:1.6}
.ztw-grid figcaption p:last-child{margin:0}
.ztw-note{margin:30px 0 0;font-size:14px;color:var(--slate)}

/* ---- Emergency services link in the header (added 19 October 2026) ---- */
#mainnav a.nav-sos{background:var(--red);color:#fff;border-bottom:none;border-radius:22px;
  padding:8px 15px;font-size:13.5px;font-weight:800;white-space:nowrap}
#mainnav a.nav-sos:hover,#mainnav a.nav-sos:focus{background:var(--red-dk);color:#fff}