/* capability.css: the capability statement's design (capability.html), shared since 13 Oct 2026 with the builder
   sections of a quote's web proposal (quote-accept.html, /q/<token>). ONE source: change a section's look here and
   both pages follow. /proposals-assets/ is cached a day at the edge, so bump ?v= on BOTH pages' <link> after any edit.
   Tokens: dark by default, light under data-theme="light" (the quote page is always light). */
@font-face{font-family:'Conthrax';src:url(/proposals-assets/conthrax.otf) format('opentype');font-weight:400 900;font-display:swap}
@font-face{font-family:'InterVar';src:url(/proposals-assets/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --bg:#0A0C10; --bg2:#0d1017; --surf:#12151B; --surf2:#171B22;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --ink:#EDF2F7; --mut:#93a0b0; --mut2:#5f6a78;
  --cy:#00B4E5; --cy2:#4CD4F5; --cydim:rgba(0,180,229,.14);
  --grn:#35D49A; --amb:#F4B63F; --accent-ink:#001018;
  --shadow:0 24px 60px rgba(0,0,0,.5); --maxw:1100px;
  --disp:'Conthrax','SF Pro Display',system-ui,sans-serif;
  --body:'InterVar','Inter',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EDF2F8; --bg2:#E4EBF3; --surf:#FFFFFF; --surf2:#F5F9FD;
    --line:rgba(12,28,45,.10); --line2:rgba(12,28,45,.18);
    --ink:#0C1620; --mut:#54606f; --mut2:#8492a2;
    --cy:#0090c0; --cy2:#00B4E5; --cydim:rgba(0,144,192,.10);
    --grn:#12a06e; --amb:#c07d06; --accent-ink:#ffffff;
    --shadow:0 22px 50px rgba(20,45,70,.15);
  }
}
:root[data-theme="light"]{
  --bg:#EDF2F8; --bg2:#E4EBF3; --surf:#FFFFFF; --surf2:#F5F9FD;
  --line:rgba(12,28,45,.10); --line2:rgba(12,28,45,.18);
  --ink:#0C1620; --mut:#54606f; --mut2:#8492a2;
  --cy:#0090c0; --cy2:#00B4E5; --cydim:rgba(0,144,192,.10);
  --grn:#12a06e; --amb:#c07d06; --accent-ink:#ffffff;
  --shadow:0 22px 50px rgba(20,45,70,.15);
}
:root[data-theme="dark"]{
  --bg:#0A0C10; --bg2:#0d1017; --surf:#12151B; --surf2:#171B22;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --ink:#EDF2F7; --mut:#93a0b0; --mut2:#5f6a78;
  --cy:#00B4E5; --cy2:#4CD4F5; --cydim:rgba(0,180,229,.14);
  --grn:#35D49A; --amb:#F4B63F; --accent-ink:#001018;
}

*{box-sizing:border-box}
html{overflow-x:hidden;max-width:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
h1,h2,h3,h4{margin:0;text-wrap:balance}
a{color:var(--cy)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--cy)}
.mut{color:var(--mut)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
section{padding:80px 0}
.sechead{max-width:56ch}
.sechead h2{font-weight:750;letter-spacing:-.015em;font-size:clamp(26px,3.6vw,42px);margin:12px 0 0;line-height:1.12}
.sechead p{color:var(--mut);margin:15px 0 0;font-size:17px}

/* ─── sticky header ─── */
.top{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.top.scrolled{backdrop-filter:blur(16px);background:rgba(11,17,23,.85);border-bottom:1px solid rgba(255,255,255,.09)}
.top .wrap{display:flex;align-items:center;gap:14px;height:66px}
.top .logo{height:27px;display:block}
.top .spacer{flex:1}
.hphone{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;letter-spacing:.03em;
  color:#fff;text-decoration:none;font-weight:600;opacity:.94}
.hphone svg{width:15px;height:15px;color:var(--cy2)}
.hphone:hover{opacity:1}
.hphone .lbl{opacity:.7;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:680px){.hphone .lbl{display:none}}
/* ─── hero ─── */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:#EDF2F7}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,9,14,.80) 0%,rgba(6,9,14,.54) 34%,rgba(6,9,14,.68) 70%,rgba(6,9,14,.97) 100%),
  radial-gradient(80% 60% at 15% 90%,rgba(0,180,229,.17),transparent 60%)}
.hero .wrap{position:relative;padding:0 24px 62px;width:100%}
.hero .eyebrow{color:var(--cy2)}
.hero h1{font-family:var(--disp);text-transform:uppercase;font-size:min(clamp(31px,6.2vw,70px),calc((100vw - 48px) / 12.8));line-height:1.02;
  margin:20px 0 0;max-width:14em;overflow-wrap:normal;hyphens:none;text-shadow:0 2px 40px rgba(0,0,0,.4);color:#fff}
.hero h1 .h1sub{display:block;color:var(--cy2);font-size:clamp(18px,2.8vw,31px);margin-top:14px;letter-spacing:.01em}
.hero .lede{font-size:clamp(16.5px,2.1vw,20px);color:#d3dbe4;max-width:54ch;margin:22px 0 0}
.metaline{display:flex;gap:34px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.metaline span{display:block;font-size:11.5px;color:#aab6c4;letter-spacing:.03em}
.metaline b{font-family:var(--disp);font-weight:800;font-size:14.5px;letter-spacing:.02em;color:#fff}
.herofoot{margin-top:26px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.22em;
  font-size:10.5px;color:rgba(255,255,255,.62)}

/* ─── brand carousel, same as the proposal ─── */
.brands{padding:44px 0;border-top:1px solid var(--line);background:var(--bg)}
.brands .blab{text-align:center;font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin-bottom:24px}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;width:max-content;animation:scrollx 30s linear infinite;align-items:center}
.marquee .bchip{display:inline-flex;align-items:center;justify-content:center;margin-right:26px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 30px;height:70px;box-shadow:0 6px 20px rgba(6,12,20,.07)}
.marquee .bchip img{height:30px;width:auto;max-width:150px;display:block;object-fit:contain}
.marquee .bchip img[alt="Hisense"]{height:22px}
.marquee:hover .track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ─── split text + photo ─── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:0}
.split.rev .ph{order:-1}
.ph{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/3}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:30px}.split.rev .ph{order:0}}

/* ─── full bleed image band ─── */
.band{position:relative;height:64vh;min-height:430px;display:flex;align-items:center;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,9,14,.80) 0%,rgba(6,9,14,.70) 42%,rgba(6,9,14,.50) 70%,rgba(6,9,14,.24) 100%),
  linear-gradient(180deg,rgba(6,9,14,.26) 0%,transparent 42%,rgba(6,9,14,.30) 100%)}
.band .wrap{position:relative;color:#EDF2F7}
.band h2{font-weight:760;letter-spacing:-.015em;font-size:clamp(27px,4vw,45px);max-width:22ch;line-height:1.1;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.band p{color:#e2e8ef;max-width:68ch;margin-top:15px;font-size:17px;text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* ─── process timeline ─── */
.steps{margin-top:42px;display:grid;gap:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.stepnum{width:44px;height:44px;border-radius:50%;background:var(--cydim);
  border:1.5px solid rgba(0,180,229,.42);border-color:color-mix(in srgb,var(--cy) 42%,transparent);
  color:var(--cy);font-family:var(--disp);font-size:15px;font-weight:800;display:grid;place-items:center}
.stephd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stephd h3{font-weight:750;font-size:19.5px;letter-spacing:-.01em}
.stagebadge{font-family:var(--disp);text-transform:uppercase;letter-spacing:.11em;font-size:9.5px;color:var(--cy);
  background:var(--cydim);border:1px solid rgba(0,180,229,.34);border-color:color-mix(in srgb,var(--cy) 34%,transparent);border-radius:999px;padding:4px 11px}
.step p{margin:9px 0 0;color:var(--mut);font-size:15.5px;max-width:62ch}
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.pill{font-size:12.5px;padding:5px 12px;border-radius:999px;background:var(--surf2);border:1px solid var(--line);color:var(--mut)}
@media(max-width:760px){.step{grid-template-columns:44px 1fr;gap:16px}}

/* ─── value cards ─── */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:28px 28px 30px;box-shadow:var(--shadow)}
.card svg{width:24px;height:24px;color:var(--cy);margin-bottom:15px}
.card h4{font-weight:750;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.card p{margin:0;color:var(--mut);font-size:15px}

/* ─── services: three grouped columns, even heights, no ragged wrap ─── */
.svccols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:860px){.svccols{grid-template-columns:1fr}}
.svccol{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow)}
.svccol h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.15em;font-size:10.5px;color:var(--cy);margin-bottom:18px}
.svccol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.svccol li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.svccol li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cy);flex:none;margin-top:8px}

/* ─── testimonial video ─── */
.quote{font-size:clamp(30px,5vw,58px);line-height:1.1;font-weight:750;letter-spacing:-.022em;margin:20px 0 0;max-width:20ch}
.qwho{margin-top:22px;font-size:15px;color:var(--mut)}
.qwho b{color:var(--ink);font-weight:750;display:block;font-size:17px;letter-spacing:-.01em}
.vidcard{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  background:#05080d;cursor:pointer;aspect-ratio:16/9}
.vidcard.port{aspect-ratio:9/16}
.vidcard video,.vidcard img{width:100%;height:100%;object-fit:cover;display:block}
.vidcard .play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(6,9,14,.12),rgba(6,9,14,.5));transition:opacity .3s}
.vidcard.playing .play{opacity:0;pointer-events:none}
.playbtn{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.45)}
.playbtn svg{width:25px;height:25px;margin-left:4px;color:#071220}
.vidcard:hover .playbtn{transform:scale(1.06);transition:transform .2s}
.vidgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:38px;max-width:840px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.vidgrid{grid-template-columns:1fr}}
.vidcard.wide{margin-top:34px}
.proc{display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:start}
@media(max-width:940px){.proc{grid-template-columns:1fr;gap:30px}.procside{position:static!important}}
.procside{display:grid;gap:18px;position:sticky;top:90px}
.procside .ph{aspect-ratio:3/4}
.stephd svg{width:18px;height:18px;color:var(--cy);flex:none}

/* ─── compliance ─── */
.comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:36px}
.compitem{background:var(--surf);border:1px solid var(--line);border-radius:15px;padding:19px 20px;display:flex;gap:13px;align-items:flex-start}
.compitem svg{width:20px;height:20px;color:var(--grn);flex:none;margin-top:2px}
.compitem .k{font-size:11.5px;color:var(--mut);letter-spacing:.03em;display:block;margin-bottom:3px}
.compitem .v{font-family:var(--disp);font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ink)}

/* ─── closing CTA ─── */
.cta{position:relative;overflow:hidden;background:#071220;color:#EDF2F7;border-radius:26px;
  padding:74px 52px;box-shadow:var(--shadow);isolation:isolate}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,10,16,.86) 0%,rgba(6,10,16,.76) 42%,rgba(6,10,16,.46) 74%,rgba(6,10,16,.24) 100%),
  linear-gradient(180deg,rgba(6,10,16,.20),transparent 45%,rgba(6,10,16,.24))}
.fleetshot{margin-top:22px;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.fleetshot img{width:100%;height:clamp(200px,26vw,340px);object-fit:cover;display:block}
.cta .in{position:relative;z-index:2;max-width:52ch}
.cta h2{font-weight:750;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.015em;margin:13px 0 0;color:#fff}
.cta p{color:#c6d0db;margin:15px 0 0;font-size:17px}
.ctarow{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:2}
.btn{display:inline-flex;align-items:center;gap:9px;background:#007CA6;color:#fff;border:0;border-radius:13px;
  padding:15px 24px;font-family:var(--disp);font-weight:800;letter-spacing:.04em;font-size:12.5px;text-transform:uppercase;
  text-decoration:none;cursor:pointer;box-shadow:0 10px 26px rgba(0,180,229,.3)}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:#fff;box-shadow:none}
.btn svg{width:16px;height:16px}
@media(max-width:640px){.cta{padding:40px 26px;border-radius:20px}}

/* ─── footer ─── */
footer{background:#070B11;color:#9aa7b6;padding:50px 0 42px;border-top:1px solid rgba(255,255,255,.07)}
footer .frow{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
footer .logo{height:26px;margin-bottom:16px;display:block}
footer .fmeta{font-size:13.5px;line-height:1.8}
footer .fcontact{display:flex;flex-direction:column;gap:5px;text-align:right}
@media(max-width:640px){footer .fcontact{text-align:left}}
footer a{color:#c3ccd6;text-decoration:none}
footer a:hover{color:var(--cy2)}
footer .fbot{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
footer .tag{font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--cy2)}
footer .fserving{font-size:12px;color:#717e8d}

@media print{
  .top,.tgl,.ctarow,.hero video,.marquee{display:none!important}
  body{background:#fff;color:#111}
  .hero{min-height:auto;padding-top:40px}
  section{padding:24px 0;break-inside:avoid}
}