*{box-sizing:border-box;overflow-anchor:none}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.grid>*,.split>*,.split-form>*,.stack>*,.row>*{min-width:0}
.d1,.d2,.h1,.h2,.h3,.lead,.body,.small,.xs{overflow-wrap:break-word}
::selection{background:var(--orange-200)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--orange-500)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative}
.narrow{max-width:var(--container-narrow)}
.sec{padding:var(--section-y) 0}
.sec-t{padding:var(--section-y-tight) 0}
.bg-page{background:var(--surface-page)}
.bg-white{background:var(--n-0)}
.bg-sunk{background:var(--surface-sunken)}
.dark{position:relative;background:var(--grad-hero);color:#fff;overflow:hidden;isolation:isolate}
.dark .rays{position:absolute;inset:0;background:var(--ray-stripes);pointer-events:none;z-index:-1}
.dark .bloom{position:absolute;top:-26%;right:-12%;width:52vw;height:52vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,rgba(255,145,77,.16),rgba(255,145,77,0) 64%);pointer-events:none;z-index:-1;animation:drift 18s var(--ease-out) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,5%,0) scale(1.12)}}
.hero-video{background:var(--ink-900);min-height:100vh;min-height:100dvh}
.hero-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;pointer-events:none;filter:saturate(1.05) contrast(1.05)}
.hero-video-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(120% 90% at 82% 6%,rgba(255,145,77,.40) 0%,rgba(255,145,77,.12) 34%,rgba(255,145,77,0) 60%),
  radial-gradient(80% 60% at 8% 96%,rgba(255,145,77,.22) 0%,rgba(255,145,77,0) 55%),
  linear-gradient(180deg,rgba(9,6,4,.78) 0%,rgba(9,6,4,.66) 42%,rgba(9,6,4,.95) 100%)}
.grid{display:grid;gap:var(--gutter)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.client-logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.client-logo-tile{height:104px;border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-xs);padding:14px 20px;overflow:hidden}
.client-logo-tile img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:1080px){.client-logo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.client-logo-grid{grid-template-columns:repeat(2,1fr)}}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.split-form{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.stack{display:flex;flex-direction:column}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.gap-12{gap:48px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.d1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-display-1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);margin:0;text-wrap:pretty}
.d2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-display-2);line-height:1.08;letter-spacing:var(--ls-display);margin:0;text-wrap:pretty}
.h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h1);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);margin:0;text-wrap:pretty}
.h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);margin:0;text-wrap:pretty}
.h3{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);margin:0}
.lead{font-size:var(--fs-lg);line-height:1.6;margin:0;text-wrap:pretty}
.body{font-size:var(--fs-body);line-height:var(--lh-loose);margin:0;text-wrap:pretty}
.small{font-size:var(--fs-sm);line-height:1.6;margin:0}
.xs{font-size:var(--fs-xs);line-height:1.5;margin:0}
.mono{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.02em}
.ink{color:var(--text-strong)}.muted{color:var(--text-muted)}.onda{color:var(--text-on-dark-muted)}.white{color:#fff}.brand{color:var(--brand)}
.center{text-align:center}
.mx{margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-depth{filter:blur(9px);transform:translateY(26px) scale(.97);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.reveal-depth.in{filter:blur(0);transform:none}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-depth,.anim-up{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;filter:none!important}}
[data-parallax]{will-change:transform}
.pc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r-card);box-shadow:var(--sh-card);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pc-track::-webkit-scrollbar{display:none}
.pc-frame{position:relative;flex:0 0 100%;width:100%;height:340px;scroll-snap-align:center;overflow:hidden;background:var(--n-100);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:30px}
.pc-img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(11,8,6,.16))}
.pc-name{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:var(--text-strong)}
.pc-line{font-size:var(--fs-sm);color:var(--text-muted)}
.pc-meta{flex-wrap:nowrap}
.pc-meta-text{min-width:0;flex:1 1 auto}
.pc-dots{display:flex;gap:8px;flex:0 0 auto}
.pc-dot{width:7px;height:7px;border-radius:999px;background:var(--border-strong);transition:var(--t-control);cursor:pointer}
.pc-dot.active{width:22px;background:var(--brand)}
.cs-3d-wrap{position:relative;perspective:1400px}
.cs-3d-wrap::before{content:"";position:absolute;inset:-8% -14%;z-index:-1;filter:blur(6px);background:radial-gradient(60% 60% at 62% 42%,rgba(255,145,77,.24),rgba(255,145,77,0) 70%)}
.cs-3d-img{display:block;width:100%;border-radius:var(--r-lg);transform:rotateY(-9deg) rotateX(3deg);box-shadow:26px 32px 60px -14px rgba(11,8,6,.38),0 2px 0 rgba(0,0,0,.03);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
.cs-3d-wrap:hover .cs-3d-img{transform:rotateY(-4deg) rotateX(1deg) scale(1.015);box-shadow:30px 38px 74px -12px rgba(11,8,6,.44),0 2px 0 rgba(0,0,0,.03)}
@media(max-width:760px){.cs-3d-img{transform:rotateY(-4deg) rotateX(2deg)}}
.fleet-card{display:flex;flex-direction:column;gap:16px;height:100%;padding:20px 22px 22px;border-radius:var(--r-card);background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.9);cursor:pointer;transition:var(--t-card)}
.fleet-card:hover{transform:var(--hover-lift);box-shadow:var(--sh-lift), inset 0 1px 0 rgba(255,255,255,.9)}
.fleet-card-stage{position:relative;height:150px;display:flex;align-items:center;justify-content:center;perspective:900px}
.fleet-card-stage::before{content:"";position:absolute;bottom:2px;width:64%;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,145,77,.32),rgba(255,145,77,0) 72%);filter:blur(2px);transition:var(--t-card)}
.fleet-card-img{max-width:80%;max-height:100%;object-fit:contain;transform:rotateY(-10deg) rotateX(5deg);filter:drop-shadow(0 16px 16px rgba(11,8,6,.22));transition:transform .5s var(--ease-out),filter .5s var(--ease-out)}
.fleet-card:hover .fleet-card-img{transform:rotateY(0deg) rotateX(0deg) scale(1.06);filter:drop-shadow(0 20px 20px rgba(11,8,6,.26))}
.fleet-card:hover .fleet-card-stage::before{width:70%;background:radial-gradient(ellipse,rgba(255,145,77,.44),rgba(255,145,77,0) 72%)}
@media(max-width:760px){.fleet-card-img{transform:rotateY(-5deg) rotateX(3deg)}}
.statement{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:clamp(28px,4vw,52px);line-height:1.18;letter-spacing:var(--ls-heading);max-width:980px;margin:0 auto;text-align:center;text-wrap:pretty}
.scrub-word{opacity:.22;transition:opacity .05s linear;will-change:opacity}
@media(prefers-reduced-motion:reduce){.scrub-word{opacity:1!important;transition:none}}
.anim-up{opacity:0;animation:up .8s var(--ease-out) forwards}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.pulse{animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:14px;padding:0 26px;white-space:nowrap;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-on-dark-muted)}
.mq-item b{font-family:var(--font-display);font-size:20px;font-weight:var(--fw-bold);color:#fff;letter-spacing:var(--ls-display)}
.dot{width:5px;height:5px;border-radius:50%;background:var(--brand)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.tbl th{text-align:left;font-weight:var(--fw-semibold);color:var(--text-strong);padding:14px 16px;border-bottom:1px solid var(--border-subtle);background:var(--surface-sunken)}
table.tbl td{padding:14px 16px;border-bottom:1px solid var(--border-subtle);color:var(--text-body);vertical-align:top}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.spec{color:var(--text-strong);font-weight:var(--fw-semibold);width:38%}
table.tbl td.val{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-body)}
.tblwrap{border:1px solid var(--border-subtle);border-radius:var(--r-card);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--n-0);box-shadow:var(--sh-card)}
table.tbl.tbl-multi td.spec{width:auto;white-space:nowrap}
table.tbl.tbl-multi th,table.tbl.tbl-multi td{padding:12px 14px}
table.tbl.tbl-multi th:not(:first-child),table.tbl.tbl-multi td.val{text-align:left}
@media(max-width:700px){
  table.tbl.tbl-multi thead{display:none}
  table.tbl.tbl-multi,table.tbl.tbl-multi tbody{display:block;width:100%}
  table.tbl.tbl-multi tr{display:block;padding:14px 16px}
  table.tbl.tbl-multi tr:not(:last-child){border-bottom:1px solid var(--border-subtle)}
  table.tbl.tbl-multi td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-bottom:none;padding:5px 0;width:auto;white-space:normal}
  table.tbl.tbl-multi td.spec{font-size:var(--fs-body);padding-bottom:8px}
  table.tbl.tbl-multi td.val{font-size:var(--fs-sm);text-align:right}
  table.tbl.tbl-multi td.val::before{content:attr(data-th);color:var(--text-muted);font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-xs);flex:0 0 auto}
}
.bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bul li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);line-height:1.6;color:var(--text-body);text-wrap:pretty}
.bul li:before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:4px;border-radius:6px;background:var(--brand-tint);border:1px solid var(--orange-100);background-image:linear-gradient(var(--brand),var(--brand));background-size:8px 2px;background-repeat:no-repeat;background-position:center}
.dark .bul li{color:var(--text-on-dark-muted)}
.dark .bul li:before{background:rgba(255,255,255,.12);border-color:var(--border-on-dark);background-image:linear-gradient(var(--orange-400),var(--orange-400));background-size:8px 2px;background-repeat:no-repeat;background-position:center}
.chiprow{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.7);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-body);box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.8);transition:var(--t-control)}
.chip:hover{border-color:var(--border-strong);color:var(--text-strong);transform:translateY(-2px)}
.dark .chip{background:var(--glass-bg);border:1px solid var(--border-on-dark);color:#fff;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.12)}
.ti-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ti-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:var(--r-lg);background:rgba(255,255,255,.7);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.8);height:100%;transition:var(--t-control)}
.ti-card:hover{transform:translateY(-2px);box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.8)}
.ti-icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--brand-tint);color:var(--orange-600);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ti-name{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:var(--text-strong)}
@media(max-width:760px){.ti-grid{grid-template-columns:1fr}}
.xlink-card{display:flex;flex-direction:column;gap:16px;padding:22px 24px;border-radius:var(--r-2xl);background:rgba(255,255,255,.6);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.8);height:100%}
.xlink-head{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-lg);color:var(--text-strong)}
.xlink-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--brand-tint);color:var(--orange-600);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.xlink-card .chip svg{color:var(--orange-500)}
.xlink-card .chip:hover svg{color:var(--orange-600)}
.variant-tile{display:flex;align-items:center;gap:40px;padding:36px;border-radius:var(--r-2xl);background:rgba(255,255,255,.7);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-card), inset 0 1px 0 rgba(255,255,255,.8)}
.variant-tile>*{min-width:0}
.variant-tile-media{flex:0 0 46%}
.variant-tile-content{flex:1 1 auto}
.variant-name{letter-spacing:var(--ls-heading);line-height:1.05}
@media(max-width:900px){
  .variant-tile{flex-direction:column!important;gap:24px;padding:24px}
  .variant-tile-media{flex:1 1 auto;width:100%}
}
.app-demo{display:flex;flex-direction:column;gap:14px;height:100%}
.app-demo-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);background:linear-gradient(160deg,var(--ink-800),var(--ink-900));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;border:1px solid var(--border-on-dark)}
.app-demo-video{width:100%;height:100%;object-fit:cover;display:block}
.app-demo-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--border-on-dark);display:flex;align-items:center;justify-content:center;color:#fff}
.app-demo-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--brand-tint);color:var(--orange-600);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.explore-row{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:var(--r-2xl);background:rgba(255,255,255,.6);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.8)}
.explore-row-label{flex:0 0 auto;min-width:100px;text-transform:uppercase;letter-spacing:.04em}
.explore-row-chips{flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:14px 4px;margin:-14px -4px}
.explore-row-chips::-webkit-scrollbar{display:none}
.explore-row-chips .chip{flex:0 0 auto;white-space:nowrap;color:var(--text-body)}
.explore-row-chips .chip svg{color:var(--orange-500);transition:var(--t-control)}
.explore-row-chips .chip:hover{background:rgba(255,244,236,.92);border-color:var(--orange-300);color:var(--orange-700);box-shadow:0 12px 26px -10px rgba(255,145,77,.4), inset 0 1px 0 rgba(255,255,255,.9)}
.explore-row-chips .chip:hover svg{color:var(--orange-600)}
.explore-row-chips .chip:active{transform:translateY(-1px) scale(.98)}
.explore-row-all{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--orange-600);white-space:nowrap;transition:var(--t-control)}
.explore-row-all:hover{gap:9px;color:var(--orange-700)}
@media(max-width:760px){
  .explore-row{flex-wrap:wrap;padding:16px}
  .explore-row-label{min-width:auto;flex:1 1 auto}
  .explore-row-all{flex:1 1 auto;justify-content:flex-end}
  .explore-row-chips{flex:1 1 100%;order:3;flex-wrap:wrap;overflow:visible;padding:8px 0 0;margin:0;gap:8px}
  .explore-row-chips .chip{white-space:nowrap;padding:8px 13px;font-size:var(--fs-xs)}
}
.slot{position:relative;width:100%;border-radius:var(--r-card);overflow:hidden;background:var(--n-100)}
.collage-slot{aspect-ratio:1/1;height:auto}
.zrsite_Date_Opened{display:none!important}
.contact-map-slot{height:440px}
@media(max-width:1080px){.contact-map-slot{height:320px}}
.mtl-row .mtl-num{transition:var(--t-control)}
.mtl-row:hover .mtl-num{background:rgba(255,145,77,.22);border-color:var(--orange-500);transform:scale(1.06)}
.slot-dark{background:rgba(255,255,255,.05)}
.slideshow{position:relative;width:100%;border-radius:var(--r-card);overflow:hidden;background:var(--n-100)}
.slideshow-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms var(--ease-out)}
.slideshow-img.is-active{opacity:1}
.slideshow-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:2}
.slideshow-dot{width:7px;height:7px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:var(--t-control)}
.slideshow-dot.is-active{background:#fff;transform:scale(1.3)}
.sakar-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}
.sakar-flow>.reveal{width:176px}
.sakar-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;width:100%;padding:36px 18px 30px;border-radius:var(--r-panel);background:linear-gradient(160deg,rgba(255,145,77,.18),rgba(255,255,255,.03));border:1px solid rgba(255,145,77,.28);color:var(--orange-400);position:relative;overflow:hidden}
.sakar-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(255,145,77,.35),transparent 60%);opacity:0;transition:var(--t-control)}
.sakar-card:hover{border-color:var(--orange-500);box-shadow:0 24px 48px -22px rgba(255,145,77,.55)}
.sakar-card:hover:before{opacity:1}
.sakar-letter{font-family:var(--font-display);font-weight:800;font-size:58px;line-height:1;background:linear-gradient(135deg,var(--orange-300),var(--orange-500));-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
.sakar-card .small{font-size:var(--fs-body)}
.sakar-arrow{display:flex;color:rgba(255,255,255,.24);flex:0 0 auto}
@media(max-width:760px){
  .sakar-arrow{display:none}
  .sakar-flow>.reveal{width:calc(50% - 14px)}
}
@media(max-width:600px){
  .sakar-flow{flex-wrap:nowrap;gap:6px}
  .sakar-flow>.reveal{width:calc((100% - 24px)/5)}
  .sakar-card{padding:10px 4px;gap:6px}
  .sakar-card>span:first-child{width:18px!important;height:18px!important}
  .sakar-letter{font-size:20px}
  .sakar-card .small{font-size:9px;line-height:1.15}
}
.mnav{display:none}
.drawer{position:fixed;inset:0;z-index:70;background:rgba(11,8,6,.52);backdrop-filter:blur(6px)}
.spec-modal{position:fixed;inset:0;z-index:80;background:rgba(11,8,6,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadein .18s var(--ease-out)}
.spec-modal-panel{position:relative;width:min(92vw,720px);max-height:85vh;overflow-y:auto;background:var(--n-0);border-radius:var(--r-2xl);box-shadow:var(--sh-float);padding:36px;animation:up .28s var(--ease-out)}
.spec-modal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:var(--n-100);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-body);transition:var(--t-control)}
.spec-modal-close:hover{background:var(--n-200);color:var(--text-strong)}
.spec-modal-panel table.tbl{font-size:var(--fs-body)}
.spec-modal-panel table.tbl th,.spec-modal-panel table.tbl td{padding:18px 20px}
.spec-modal-panel table.tbl td.spec{font-size:var(--fs-body)}
.spec-modal-panel table.tbl td.val{font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-strong)}
.spec-modal-panel .h3{font-size:var(--fs-h2)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media(max-width:600px){.spec-modal-panel{padding:24px}}
.video-modal-panel{position:relative;width:min(94vw,1040px);max-height:92vh;overflow-y:auto;background:var(--n-0);border-radius:var(--r-2xl);box-shadow:var(--sh-float);padding:20px;animation:up .28s var(--ease-out)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#000}
@media(max-width:760px){.video-modal-panel{padding:12px}}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,340px);background:rgba(19,14,11,.78);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-left:1px solid var(--border-on-dark);box-shadow:inset 1.5px 0 0 rgba(255,255,255,.06);padding:24px;display:flex;flex-direction:column;gap:6px;animation:slidein .28s var(--ease-out)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.drawer-panel a{color:#fff;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:20px;padding:12px 0;border-bottom:1px solid var(--border-on-dark);text-decoration:none}
.drawer-panel a:hover{color:var(--orange-400)}
.drawer-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:#fff;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:20px;padding:12px 0;border-bottom:1px solid var(--border-on-dark);cursor:pointer;text-align:left}
.drawer-toggle:hover{color:var(--orange-400)}
.drawer-sub-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-out);border-bottom:1px solid var(--border-on-dark)}
.drawer-sub-wrap.open{grid-template-rows:1fr}
.drawer-sub-inner{overflow:hidden;opacity:0;transition:opacity .2s var(--ease-out)}
.drawer-sub-wrap.open .drawer-sub-inner{opacity:1;transition-delay:.08s}
.drawer-sub-all{display:block;padding:10px 0 10px 2px;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:13px;color:var(--orange-400);text-decoration:none}
.drawer-sub-item{display:flex;align-items:center;gap:10px;padding:9px 0 9px 2px;font-family:var(--font-body);font-weight:var(--fw-medium);font-size:15px;color:rgba(255,255,255,.82);text-decoration:none}
.drawer-sub-item:hover{color:#fff}
.drawer-sub-item .icon-chip{width:28px;height:28px;flex:0 0 auto;border-radius:var(--r-sm);background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;color:var(--orange-400)}
.cta-band{border-radius:var(--r-2xl);background:var(--grad-hero);padding:56px 48px;position:relative;overflow:hidden}
.footer-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.footer-cols a{color:var(--text-on-dark-muted);font-size:var(--fs-sm);text-decoration:none;transition:var(--t-control)}
.footer-cols a:hover{color:#fff}
.soc{width:38px;height:38px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid var(--border-on-dark);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:var(--t-control)}
.soc:hover{background:var(--brand);border-color:transparent;transform:translateY(-3px)}
.crumb{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs);color:var(--text-on-dark-muted)}
.crumb a{color:var(--text-on-dark-muted)}
.crumb a:hover{color:#fff}
.ta{width:100%;min-height:120px;padding:14px 16px;border-radius:var(--r-control);border:1px solid var(--border-subtle);background:var(--surface-card);font-family:var(--font-body);font-size:var(--fs-body);color:var(--text-strong);resize:vertical;outline:none;transition:var(--t-control)}
.ta:focus{border-color:var(--brand);box-shadow:var(--sh-glow-soft)}
.ta.err{border-color:var(--status-alert)}
.filebtn{display:flex;align-items:center;gap:12px;height:var(--control-h);padding:0 16px;border-radius:var(--r-control);border:1px dashed var(--border-strong);background:var(--surface-card);font-size:var(--fs-sm);color:var(--text-muted);cursor:pointer}
.filebtn:hover{border-color:var(--brand);color:var(--text-body)}
.cookie{position:fixed;left:24px;right:24px;bottom:24px;z-index:65;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:var(--container);margin:0 auto;padding:18px 24px;border-radius:var(--r-panel);background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-float), inset 0 1px 0 rgba(255,255,255,.85);animation:up .5s var(--ease-out) both .8s}
.count{font-variant-numeric:tabular-nums}
.logo{display:block;height:30px;width:auto}
.logo-chip{position:relative;display:inline-flex;align-items:center;isolation:isolate;padding:13px 22px;border-radius:var(--r-chrome);overflow:hidden;box-shadow:0 1px 3px rgba(11,8,6,.08),0 8px 22px rgba(11,8,6,.10);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.logo-chip::before{content:"";position:absolute;inset:0;z-index:0;background:#fff}
.logo-chip::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;border:.5px solid rgba(11,8,6,.06);box-shadow:inset 1.5px 1.5px 1px rgba(255,255,255,.9),inset -1px -1px 1px rgba(11,8,6,.02)}
.logo-chip:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 2px 6px rgba(11,8,6,.10),0 16px 34px rgba(11,8,6,.16)}
.logo-chip:active{transform:translateY(0) scale(.98)}
.logo-chip .logo{position:relative;z-index:2;height:36px}
.mtl{display:flex;flex-direction:column}
.mtl-row{display:grid;grid-template-columns:60px 1fr;gap:28px;padding-bottom:40px;position:relative}
.mtl-row:last-child{padding-bottom:0}
.mtl-row:not(:last-child):before{content:"";position:absolute;left:29px;top:64px;bottom:0;width:1px;background:rgba(255,255,255,.16)}
.mtl-num{width:60px;height:60px;border-radius:50%;border:1.5px solid var(--orange-700);background:rgba(255,145,77,.12);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:14px;color:var(--orange-400);flex:0 0 auto}
.mtl-body{display:flex;flex-direction:column;gap:10px;padding-top:10px}
.mtl-text{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:var(--text-on-dark-muted)}
@media(max-width:1080px){
.g4,.g5{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
.split,.split-form{grid-template-columns:1fr;gap:40px}
.footer-cols{grid-template-columns:repeat(3,1fr)}
:root{--section-y:72px}
}
@media(max-width:760px){
.g2,.g3,.g4,.g5{grid-template-columns:1fr}
.footer-cols{grid-template-columns:repeat(2,1fr)}
.dnav{display:none!important}
.mnav{display:flex}
.cta-band{padding:36px 24px;margin-bottom:8px}
.page-hero{padding-bottom:130px!important}
:root{--section-y:56px;--section-y-tight:44px}
.sec,.sec-t{padding:var(--section-y) 0}
.mtl-row{grid-template-columns:44px 1fr;gap:16px}
.mtl-num{width:44px;height:44px;font-size:11px}
.mtl-row:not(:last-child):before{left:21px;top:48px}
}
@media(max-width:480px){
.container{padding:0 16px}
.logo-chip{padding:7px 14px}
.logo-chip .logo{height:22px}
.mnav .logo-chip .logo{height:22px}
.footer-cols{grid-template-columns:1fr;gap:24px}
.cookie{left:14px;right:14px;bottom:14px;padding:14px 16px;flex-direction:column;align-items:flex-start}
:root{--section-y:44px;--section-y-tight:34px}
.cta-band{padding:28px 18px;margin-bottom:10px}
.page-hero{padding-bottom:140px!important}
.cta-band .row{flex-direction:column;align-items:flex-start}
.mtl-row{grid-template-columns:38px 1fr;gap:12px}
.mtl-num{width:38px;height:38px;font-size:10px}
.split-form,.split{gap:28px}
}
@supports (padding:max(0px)){
.hdr-inner{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.cookie{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}
.filter-bar{-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-bar>div{flex-wrap:nowrap;width:max-content}
.filter-bar button{white-space:nowrap;flex:0 0 auto}
@media(max-width:520px){
  .filter-bar{overflow-x:visible}
  .filter-bar>div{flex-wrap:wrap;width:auto;gap:6px}
  .filter-bar button{padding:7px 14px;font-size:var(--fs-xs)}
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM LAYER
   Loaded last, so it overrides the generated _ds/ tokens without
   editing the bundle.
     1. Typography — Inter, fluid scale, weights tuned for reading
     2. Accent     — amber as seasoning; kept off photos and video
     3. Rhythm     — air between sections, calmer edges
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Typography ──────────────────────────────────────────────────
   Every step is fluid, so nothing needs a per-breakpoint override:
   the floors are sized for a 360–390px phone, the ceilings for a
   1440px desktop, and the middle interpolates.                      */
:root{
  /* Helvetica is a system font, not a webfont: present on macOS/iOS, and
     falling back to Arial (or Liberation/Arimo) elsewhere. */
  --font-display:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --font-body:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --font-mono:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --ls-display:-.028em;
  --ls-heading:-.016em;

  --fs-display-1:clamp(30px, 4.3vw + 14px, 76px);
  --fs-display-2:clamp(26px, 2.6vw + 16px, 52px);
  --fs-h1:clamp(22px, 1.7vw + 16px, 40px);
  --fs-h2:clamp(19px, 1vw + 15px, 30px);
  --fs-h3:clamp(17px, .5vw + 15px, 22px);
  --fs-lg:clamp(15.5px, .3vw + 14.4px, 18px);
  --fs-body:clamp(15px, .2vw + 14.2px, 16.5px);
  --fs-sm:clamp(13.5px, .12vw + 13px, 14.5px);
  --fs-xs:clamp(12px, .1vw + 11.6px, 13px);
}
body{font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Light weights only where the type is large enough to carry them. */
.d1{font-weight:300;line-height:1.08}
.d2{font-weight:300;line-height:1.1}
.h1{font-weight:300;line-height:1.16}
.h2{font-weight:300;line-height:1.2}
.h3{font-weight:500;letter-spacing:-.015em;line-height:1.3}
.statement{font-weight:300;line-height:1.2;letter-spacing:-.028em;font-size:clamp(24px, 2.3vw + 15px, 48px)}
/* Body copy stays at 400 — 300 at 15px reads washed out, especially muted. */
.lead{font-weight:400;line-height:1.65}
.body{line-height:1.7}
.small,.xs{font-weight:400;line-height:1.6}
.chip,.mono,.eyebrow,button,input,select,textarea,label{font-weight:500}
.count,.stat-num,.mono,table.tbl td.val{font-variant-numeric:tabular-nums}
/* Headlines need a touch more leading once they wrap on a phone. */
@media(max-width:600px){
  .d1{line-height:1.14}
  .d2,.h1{line-height:1.2}
  .statement{line-height:1.26}
}
/* Slightly darker muted grey so small secondary copy holds up. */
:root{--text-muted:#6B615A}

/* ── 2. Accent: amber, and only where it means something ──────────── */
:root{
  --orange-50:#FFF6F0;  --orange-100:#FFE6D6; --orange-200:#FFCDAD; --orange-300:#FFB282;
  --orange-400:#FFA066; --orange-500:#FF914D; --orange-600:#FF731C; --orange-700:#E85900;
  --orange-800:#B54500;
  --focus-ring:rgba(255,145,77,.45);
  --sh-glow:0 12px 30px -12px rgba(255,145,77,.40);
  --sh-glow-soft:0 0 0 5px rgba(255,145,77,.12);
  /* Dark sections: warm ink with a hint of the brand, not an orange wash. */
  --grad-hero:radial-gradient(120% 90% at 78% 8%,rgba(255,145,77,.15) 0%,rgba(255,145,77,.03) 40%,rgba(11,8,6,0) 66%),
              linear-gradient(168deg,#171009 0%,#0B0806 58%,#120C08 100%);
}
/* Photos and video are left alone — no orange grade over real footage. */
.hero-video-el{filter:saturate(.98) contrast(1.03)}
.hero-video-scrim{background:
  radial-gradient(120% 90% at 82% 6%,rgba(255,145,77,.13) 0%,rgba(255,145,77,0) 52%),
  linear-gradient(180deg,rgba(9,6,4,.72) 0%,rgba(9,6,4,.60) 44%,rgba(9,6,4,.94) 100%)}
.dark .bloom{background:radial-gradient(circle,rgba(255,145,77,.09),rgba(255,145,77,0) 64%)}
.dark .rays{opacity:.45}
.cs-3d-wrap::before{background:radial-gradient(60% 60% at 62% 42%,rgba(255,145,77,.10),rgba(255,145,77,0) 70%)}
.fleet-card-stage::before{background:radial-gradient(ellipse,rgba(255,145,77,.14),rgba(255,145,77,0) 72%)}
.fleet-card:hover .fleet-card-stage::before{background:radial-gradient(ellipse,rgba(255,145,77,.22),rgba(255,145,77,0) 72%)}
.explore-row-chips .chip:hover{box-shadow:0 12px 26px -14px rgba(255,145,77,.26), inset 0 1px 0 rgba(255,255,255,.9)}
.mtl-num{background:rgba(255,145,77,.10);border-color:rgba(255,145,77,.34)}
.mtl-row:hover .mtl-num{background:rgba(255,145,77,.18)}
.sakar-card{background:linear-gradient(160deg,rgba(255,145,77,.12),rgba(255,255,255,.03));border-color:rgba(255,145,77,.22)}
.sakar-card:hover{box-shadow:0 24px 48px -26px rgba(255,145,77,.34)}
.sakar-card:before{background:radial-gradient(circle at 50% -20%,rgba(255,145,77,.22),transparent 60%)}

/* ── 3. Rhythm and edges ──────────────────────────────────────────── */
:root{--section-y:104px;--section-y-tight:76px}
.cta-band{padding:64px 56px}
.slot,.tblwrap,.pc-track{box-shadow:0 1px 2px rgba(11,8,6,.04)}

@media(max-width:1080px){:root{--section-y:80px;--section-y-tight:60px}}
@media(max-width:760px){:root{--section-y:64px;--section-y-tight:48px}}
@media(max-width:600px){
  /* Stack gaps scale with the type, so a phone screen holds more of
     one idea instead of one idea spread over two screens. */
  .gap-8{gap:24px}.gap-10{gap:28px}.gap-12{gap:32px}
}
@media(max-width:480px){:root{--section-y:52px;--section-y-tight:40px}}

/* Compact application tiles flow to fit however many there are. */
.ti-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ti-card .ti-name{line-height:1.3}
/* Stat cards in a hero row share a height even when one has a caption. */
.grid>.anim-up{height:100%}
.grid>.anim-up>*{height:100%}

/* A CTA band with no action left on it reads as a closing statement. */
.cta-band-statement{text-align:center;padding:56px 48px}
@media(max-width:760px){.cta-band-statement{padding:36px 24px}}

/* The Zoho embeds (CRM web-to-lead form, Recruit job list) ship their own
   Arial/sans-serif rules and inline styles, so they need forcing onto the site stack. */
#crmWebToEntityForm,#crmWebToEntityForm *,
#rec_job_listing_div,#rec_job_listing_div *,
[class^="embed_jobs"],[class*=" embed_jobs"],[class^="embed_jobs"] *,[class*=" embed_jobs"] *{font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif!important}
/* Zoho renders its own submit/reset controls; brand them to match the site. */
#crmWebToEntityForm .zcwf_button{
  -webkit-appearance:none;appearance:none;
  background:var(--brand)!important;border:none!important;color:#fff!important;
  border-radius:var(--r-pill);padding:11px 26px;font-size:var(--fs-sm);font-weight:500;
  cursor:pointer;transition:var(--t-control);box-shadow:0 6px 18px -8px rgba(255,145,77,.5)}
#crmWebToEntityForm .zcwf_button:hover{background:var(--orange-600)!important;transform:translateY(-1px)}
#crmWebToEntityForm input[type=reset].zcwf_button{
  background:var(--n-100)!important;color:var(--text-body)!important;box-shadow:none}
#crmWebToEntityForm input[type=reset].zcwf_button:hover{background:var(--n-200)!important}

/* Home hero. "and act." carries the brand orange.
   Tablet and up: sized off the viewport so it stays on one line.
   Phones: the headline is long enough that one line would force it down to
   ~16px, so below 700px it wraps to two and keeps a readable size instead. */
.hero-title{
  white-space:nowrap;font-size:clamp(28px, 4.9vw, 60px);
  font-weight:700;letter-spacing:-.03em;
  color:#fff;
}
@media(max-width:700px){
  .hero-title{white-space:normal;font-size:clamp(26px, 7.2vw, 34px)}
}
.hero-sub{
  max-width:640px;color:rgba(255,255,255,.82);font-weight:400;
}
.hero-accent{color:var(--brand)}

/* Dark hero. The clip is bright studio footage (~185/255 average), so it
   needs a heavier veil than the site's default dark sections to land near
   ~80/255, where white type clears 6:1 contrast and the scene still reads. */


/* ═══════════════════════════════════════════════════════════════════
   DESIGN REVIEW PASS
   1. Gradient accents replaced with one flat accent colour
   2. Hover reserved for elements that actually navigate
   4. One shape grammar: modest, consistent corner radii
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Flat accent ────────────────────────────────────────────────
   The DS renders the brand gradient inline on buttons, toggles and
   active cards, so the token itself is flattened rather than chasing
   each call site. --brand stays the single accent colour. */
:root{
  --grad-brand:var(--brand);
  --grad-warm:var(--brand);
  /* Dark sections: flat warm ink, no orange wash bleeding across them. */
  --grad-hero:#0D0906;
}
/* Decorative orange glows behind product shots and cards. */
.dark .bloom{display:none}
.cs-3d-wrap::before,.fleet-card-stage::before,.fleet-card:hover .fleet-card-stage::before{display:none}
.sakar-card,.sakar-card:before{background:rgba(255,145,77,.10)}
.sakar-card:before{display:none}
.sakar-letter{background:none;-webkit-text-fill-color:currentColor;color:var(--brand)}

/* ── 2. Hover only where it means something ───────────────────────
   Static content keeps a flat resting state. Anything listed as a
   hover target below is a link, a card with an onClick, or a control. */
.info-card{
  display:flex;flex-direction:column;gap:14px;height:100%;
  padding:24px;border-radius:var(--r-card);
  background:var(--surface-card);border:1px solid var(--border-subtle);
}
.dark .info-card{background:rgba(255,255,255,.05);border-color:var(--border-on-dark)}
.dark .info-card .ink{color:#fff}
.dark .info-card .muted{color:var(--text-on-dark-muted)}
.info-card .pc-frame{flex:0 0 auto;border-radius:var(--r-sm)}
.ti-card:hover{transform:none;box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.8)}
.mtl-row:hover .mtl-num{background:rgba(255,145,77,.10);border-color:rgba(255,145,77,.34);transform:none}
.slot,.tblwrap,.slideshow,.client-logo-tile{transition:none}

/* ── 3. "See all" route out of the highlighted set ── */
.see-all{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:500;color:var(--brand);
  transition:var(--t-control);
}
.see-all:hover{gap:10px;color:var(--orange-600)}

/* ── 4. One shape grammar ─────────────────────────────────────────
   Rectangles with modest rounding, everywhere. The pill radius is
   retired so buttons, chips, badges and nav match the cards. */
:root{
  --r-xs:6px;  --r-sm:8px;  --r-md:10px; --r-lg:12px;
  --r-xl:12px; --r-2xl:14px;
  --r-card:12px; --r-panel:12px; --r-control:10px; --r-chrome:12px;
  --r-pill:10px; --r-chip:8px;
}
.spec-modal-close{border-radius:var(--r-sm)}
.mtl-num{border-radius:var(--r-md)}
.soc{border-radius:var(--r-sm)}
/* Carousel frames navigate to the product page, so they keep a hover cue. */
.pc-frame{transition:background var(--dur-slow,340ms) var(--ease-out)}
.pc-frame:hover{background:var(--n-200)}

/* ═══════════════════════════════════════════════════════════════════
   ICON + CLOSING-STATEMENT PASS
   Decorative category glyphs are gone; only functional icons remain
   (arrows, chevron, close, play, hamburger, social marks).
   ═══════════════════════════════════════════════════════════════════ */

/* Clickable card, text-led. Replaces FeatureCard, whose 44px tinted icon
   square renders even when no icon is supplied. */
.link-card{
  display:flex;flex-direction:column;gap:10px;height:100%;
  padding:22px 24px 20px;border-radius:var(--r-card);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-slow,340ms) var(--ease-out),box-shadow var(--dur-slow,340ms) var(--ease-out);
}
.link-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-card)}
.link-card .small{flex:1 1 auto}
.link-card-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:var(--fs-sm);font-weight:500;color:var(--brand);
  transition:gap var(--dur-slow,340ms) var(--ease-out);
}
.link-card:hover .link-card-cta{gap:9px}

/* Icon wrappers left without an icon inside. */
.app-demo-icon,.drawer-sub-item .icon-chip{display:none}
.ti-card{gap:0}
.app-demo .row{gap:0}

/* The closing statement is type on the page, not a panel. */
.cta-band-statement{background:none;border-radius:0;padding:8px 0}
.cta-band-statement .rays{display:none}
.cta-band-statement .white{color:var(--text-strong)}
.cta-band-statement .onda{color:var(--text-muted)}
@media(max-width:760px){.cta-band-statement{padding:4px 0}}

/* ═══════════════════════════════════════════════════════════════════
   FIXED HEADER BAR
   Edge-to-edge and pinned to the top rather than a floating pill.
   The bar is the only surface: the NavBar's own pill chrome is
   switched off from the component, and the logo loses its white chip.
   The bar tracks the section behind it (light / dark) so the type
   stays legible over both the dark hero and the light page body.
   ═══════════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(253,250,248,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(11,8,6,.07);
  transition:background .35s var(--ease-out),border-color .35s var(--ease-out);
}
.hdr-dark{background:rgba(13,9,6,.55);border-bottom-color:rgba(255,255,255,.10)}
.hdr-scrolled{background:rgba(253,250,248,.86)}
.hdr-dark.hdr-scrolled{background:rgba(13,9,6,.76)}
.hdr-inner{max-width:var(--container);margin:0 auto;padding:0 24px}
.hdr .dnav{padding:12px 0}
.hdr .mnav{padding:10px 0}

/* Logo sits bare on the bar — no pill, no shadow, no hover lift. */
.hdr .logo-chip{padding:0;box-shadow:none;border-radius:0;isolation:auto}
.hdr .logo-chip::before,.hdr .logo-chip::after{display:none}
.hdr .logo-chip:hover{transform:none;box-shadow:none}
.hdr .logo-chip:active{transform:none}
.hdr .logo-chip .logo{height:28px}
.drawer-panel .logo-chip{padding:0;box-shadow:none}
.drawer-panel .logo-chip::before,.drawer-panel .logo-chip::after{display:none}

/* Page content clears the bar. */
:root{--hdr-h:64px}
@media(max-width:760px){:root{--hdr-h:58px}}
@media(max-width:480px){
  .hdr-inner{padding:0 16px}
  .hdr .logo-chip .logo{height:22px}
  .hdr .mnav{padding:8px 0}
}

/* ═══════════════════════════════════════════════════════════════════
   ONE SURFACE SYSTEM, SITEWIDE
   The homepage cards are flat: solid ground, one thin border, no glass
   blur, no drop shadow. Everything else on the site now matches, so a
   card reads the same whichever page it is on.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card variants ── */
.info-card-lg{padding:32px}
.info-card-sunken{background:var(--surface-sunken);border-color:var(--border-subtle)}
.info-card-link{cursor:pointer;transition:border-color var(--dur-slow,340ms) var(--ease-out)}
.info-card-link:hover{border-color:var(--border-strong)}
.dark .info-card-sunken{background:rgba(255,255,255,.05)}
.dark .info-card .white{color:#fff}
.dark .info-card .onda{color:var(--text-on-dark-muted)}
@media(max-width:600px){.info-card-lg{padding:22px}}

/* ── Every remaining glass surface flattened to the same treatment ── */
.fleet-card,.ti-card,.xlink-card,.variant-tile,.cookie{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
.cookie{box-shadow:0 8px 30px -12px rgba(11,8,6,.18)}   /* floats over content, so it keeps a lift */
.fleet-card:hover{border-color:var(--border-strong);box-shadow:none}
.chip{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
.chip:hover{background:var(--surface-sunken);border-color:var(--border-strong);transform:none}
.dark .chip{
  background:rgba(255,255,255,.05);border:1px solid var(--border-on-dark);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
.dark .chip:hover{background:rgba(255,255,255,.10)}
.dark .ti-card,.dark .xlink-card{background:rgba(255,255,255,.05);border-color:var(--border-on-dark)}

/* ── Hero: page heroes get the homepage's treatment ──────────────────
   Same heavy scrim over the footage and the same bold headline, so the
   top of a product page reads like the top of the homepage. */
.page-hero .d2{font-weight:700;letter-spacing:-.03em}
/* Media frames follow the same rule: a border, not a shadow. */
.client-logo-tile,.slot,.tblwrap,.pc-track,.pc-frame,.slideshow{
  box-shadow:none;border:1px solid var(--border-subtle);
}
.dark .client-logo-tile{border-color:transparent}
.dark .slot,.dark .tblwrap{border-color:var(--border-on-dark)}

/* ═══════════════════════════════════════════════════════════════════
   ACCENT ON TITLES
   Card and tile titles carry the brand orange, the way Perceive /
   Decide / Act and Own it / Subscribe do on the homepage. Section
   headings stay ink so the page keeps a hierarchy — if every title is
   orange, none of them reads as accented.
   ═══════════════════════════════════════════════════════════════════ */
.info-card .h3,
.link-card .h3,
.fleet-card .h3,
.ti-name,
.app-demo .h3{color:var(--brand)}

/* Hero headlines: one accented phrase, not the whole line. */
.accent{color:var(--brand)}
.dark .accent,.page-hero .accent{color:var(--brand)}
/* Dropdown rows: drop the generic icon chip, matching the rest of the site.
   The design system always renders it, even when no icon is supplied — which
   left "All applications" showing an empty tinted square. */
.dnav div[style*="position: absolute"] a > span:first-child{display:none!important}
.dnav div[style*="position: absolute"] a{gap:0!important}
/* Dropdown + drawer rows: the label turns orange on hover, so the colour
   signals "this is the one you're pointing at" instead of tinting all five
   at rest. Resting labels stay ink — orange on the light dropdown panel is
   only 2.15:1, well under the 4.5:1 needed for a 14px label. */
.dnav div[style*="position: absolute"] a:hover > span:last-child > span:first-child{color:var(--brand)!important}
.drawer-sub-item:hover{color:var(--brand)}
.drawer-sub-all:hover{color:var(--orange-300)}

/* ═══════════════════════════════════════════════════════════════════
   ALIGNMENT
   ═══════════════════════════════════════════════════════════════════ */

/* The reveal animation scaled headings by .97, which moves their left edge
   inward and slides it back as the animation settles — on a wide heading
   that is ~10px of horizontal drift, and it made section headings look like
   they sat on slightly different gutters. Vertical motion only now. */
.reveal-depth{transform:translateY(26px)}

/* Tiles were vertically centring their label, so a two-line label put its
   first line above the one-line labels beside it. Top-align instead. */
.ti-card{align-items:flex-start}

/* ── One padding scale for cards ───────────────────────────────────
   Card types had drifted to four different values (20 / 22 / 24 px),
   so text inside them started at 21, 23 or 25px depending on which
   card it was — visibly out of line wherever two types share a page.
   Two steps only now: 24px standard, 32px for the large panels. */
.info-card,
.link-card,
.ti-card,
.fleet-card,
.xlink-card{padding:24px}
.info-card-lg,
.variant-tile{padding:32px}
@media(max-width:900px){.variant-tile{padding:24px}}
@media(max-width:600px){.info-card-lg{padding:22px}}

/* ═══════════════════════════════════════════════════════════════════
   ONE BASE COLOUR
   Every surface on the site is a tint or shade of a single base hue.
   To change the palette, change --base and nothing else: the section
   grounds, borders and the dark band are all derived from it.
   The accent (--brand) is the only other colour, and it is never used
   as a background — buttons and highlights only.
   Hex values below are the derived fallbacks for the color-mix() line
   underneath them, so unsupported browsers still get the right ramp.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --base:#F5F1EC;              /* ← the one knob. hsl(33, 31%, 94%) */

  /* Section grounds, lightest to deepest. All the same hue. */
  --surface-card:#FEFEFD;
  --surface-card:color-mix(in srgb, var(--base) 12%, #fff);
  --surface-page:#FBFAF8;
  --surface-page:color-mix(in srgb, var(--base) 38%, #fff);
  --surface-raised:#F8F5F2;
  --surface-raised:color-mix(in srgb, var(--base) 72%, #fff);
  --surface-sunken:#F4F0EB;
  --surface-sunken:var(--base);
  --surface-deep:#211D17;      /* darkest shade, same hue — not a separate black */

  --border-subtle:#E8DFD4;
  --border-strong:#D8C9B5;

  /* No gradient anywhere: the dark band is a flat shade of the base. */
  --grad-hero:var(--surface-deep);
  --surface-dark:var(--surface-deep);
}
body{background:var(--surface-page)}
.bg-page{background:var(--surface-page)}
.bg-white{background:var(--surface-raised)}
.bg-sunk{background:var(--surface-sunken)}
.dark{background:var(--surface-deep)}
/* Texture stripes were a repeating gradient on the dark band. */
.rays{display:none!important}

/* Sections share one rhythm: same max-width, same gutter, same vertical
   spacing, whichever ground they sit on. */
.sec,.sec-t{padding:var(--section-y) 0}
.container{max-width:var(--container);padding-inline:24px;margin-inline:auto}
@media(max-width:480px){.container{padding-inline:16px}}

/* Perceive / Decide / Act / Learn — no box, spacing from the grid gap only. */
.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.loop-item{display:flex;flex-direction:column;gap:10px}
@media(max-width:1080px){.loop-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
@media(max-width:640px){.loop-grid{grid-template-columns:1fr;gap:28px}}

/* ── /blogs card grid ─────────────────────────────────────────────
   3 columns on desktop, 1 on mobile, per spec. */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.blog-grid{grid-template-columns:1fr}}

.blog-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-slow,340ms) var(--ease-out);
}
.blog-card:hover{border-color:var(--border-strong)}
.blog-cover{display:block;position:relative;aspect-ratio:16/9;background:var(--surface-sunken);overflow:hidden}
.blog-cover img{width:100%;height:100%;object-fit:cover;display:block}
.blog-cover-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);
  background:var(--surface-sunken);
}
.blog-body{display:flex;flex-direction:column;gap:10px;padding:24px}
.blog-excerpt{flex:1 1 auto}
.blog-tag{display:inline-flex}
.blog-date{margin-top:2px}

/* Filter pills follow the button grammar: rectangular, same radius. */
.filter-pill{
  border:1px solid var(--border-subtle);background:var(--surface-card);
  color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;
  padding:9px 16px;border-radius:var(--r-control);cursor:pointer;white-space:nowrap;
  transition:var(--t-control);
}
.filter-pill:hover{border-color:var(--border-strong)}
.filter-pill.is-on{background:var(--brand);border-color:transparent;color:#fff}
/* Milestone markers were filled with the accent. Surface comes from the base
   palette; the accent stays on the numeral and hairline only. */
.mtl-num{background:rgba(255,255,255,.05);border-color:rgba(255,145,77,.45);color:var(--brand)}
.mtl-row:hover .mtl-num{background:rgba(255,255,255,.09)}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT HEROES
   Video is lifted under a white veil rather than dimmed under a black
   one, and every hero — video or not — sits on the base palette's
   lightest tint. Type is ink, so the header's tone probe reads these
   as light sections and switches its own chrome to match.
   ═══════════════════════════════════════════════════════════════════ */
.hero-light{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--surface-page);color:var(--text-strong);
}
/* Lift the footage; don't blow the highlights. */
.hero-video .hero-video-el{filter:brightness(1.06) saturate(.96) contrast(.97)}
.hero-video .hero-video-scrim{background:
  radial-gradient(85% 55% at 50% 48%,rgba(255,255,255,.60) 0%,rgba(255,255,255,.30) 58%,rgba(255,255,255,.10) 100%),
  linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.22) 30%,rgba(255,255,255,.30) 62%,var(--surface-page) 100%)}

/* Text that was written for a dark hero, re-toned for a light one. */
.hero-light .white{color:var(--text-strong)}
.hero-light .onda{color:var(--text-body)}
.hero-light .crumb,.hero-light .crumb a{color:var(--text-muted)}
.hero-light .crumb a:hover{color:var(--text-strong)}
.hero-light .hero-title,.hero-light .d1,.hero-light .d2{color:var(--text-strong)}
.hero-light .hero-sub,.hero-light .lead{color:var(--text-body)}
/* Measured against the lifted footage (~233/255): the brand #FF914D reads
   2.1:1 and the 600 stop 2.8:1, both under the 3:1 needed for large text.
   Hero accents use the 700 stop, which clears it at ~3.5:1. Everywhere else
   on the site keeps the brand hex. */
.hero-light .hero-accent,.hero-light .accent{color:var(--orange-700)}

/* No glow on hero type: the veil carries legibility on its own. */
.hero-light *,.hero-video *{text-shadow:none}
/* Product name / category above the hero headline. Plain text, not a pill. */
.hero-label{
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:var(--text-muted);
}

/* ── Homepage sections from the content document ─────────────────── */

/* Capabilities and the deployment process: un-boxed items, spacing from
   the grid gap, same as the perceive/decide/act loop. */
.cap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
@media(max-width:1080px){.cap-grid{grid-template-columns:repeat(3,1fr);gap:28px}}
@media(max-width:700px){.cap-grid{grid-template-columns:1fr;gap:26px}}
.process-num{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;
  color:var(--text-muted);font-variant-numeric:tabular-nums;
}

/* Products: one row per product, image and copy alternating sides. */
.product-row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:48px;align-items:center;
}
.product-row.is-flipped .product-shot{order:2}
.product-row.is-flipped .product-copy{order:1}
.product-shot{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;padding:28px;
  background:var(--surface-sunken);border:1px solid var(--border-subtle);
  border-radius:var(--r-card);overflow:hidden;
  transition:border-color var(--dur-slow,340ms) var(--ease-out);
}
.product-shot:hover{border-color:var(--border-strong)}
.product-shot img{max-width:82%;max-height:100%;object-fit:contain;display:block}
.product-copy{display:flex;flex-direction:column;gap:12px;min-width:0}
@media(max-width:900px){
  .product-row{grid-template-columns:1fr;gap:24px}
  .product-row.is-flipped .product-shot{order:0}
  .product-row.is-flipped .product-copy{order:0}
  .product-shot{aspect-ratio:16/10;padding:20px}
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE POLISH
   ═══════════════════════════════════════════════════════════════════ */

/* Hero: accent-coloured secondary CTA, and a headline block whose lines
   come out roughly even rather than one long and one short. */
.cta-accent button{color:var(--brand)!important}
.cta-accent button svg{color:var(--brand)}
.hero-sub{text-wrap:balance}

/* Body copy sits flush-left under its heading. Justifying these narrow
   grid columns pulled the last line away from the heading's left edge and
   opened rivers of white space, so every text block is ragged-right and
   shares one left edge with the title above it. */
.info-card,.link-card,.loop-item,.ti-card,.xlink-card{text-align:left}
.info-card>*,.link-card>*,.loop-item>*{text-align:left}

/* One icon treatment for every context — card, tile, process step, chip
   heading — so the same glyph reads the same way on every page. */
.card-icon,.step-icon,.ti-icon,.link-card-icon,.xlink-icon{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;flex:none;
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:var(--brand-tint);color:var(--orange-600);
}
/* .ti-card is a row with gap:0 from an earlier pass, so the gap is a margin. */
.ti-icon{margin-right:14px}
.xlink-icon{margin-right:2px}
.dark .card-icon,.dark .step-icon,.dark .ti-icon,.dark .link-card-icon,.dark .xlink-icon{
  background:rgba(255,255,255,.07);color:var(--orange-500);
}
/* Chips carry the same glyph as the card they link to. */
.chip svg{flex:none;color:var(--orange-600)}

/* Proof stats read as one left-aligned line separated by hairlines. */
.stat-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:26px}
.stat-item{display:flex;flex-direction:column;gap:4px}
.stat-sep{
  color:rgba(255,255,255,.20);font-size:clamp(28px,3vw,44px);
  font-weight:200;line-height:1;user-select:none;
}
@media(max-width:640px){
  .stat-row{gap:16px}
  .stat-sep{display:none}
  .stat-item{flex:1 1 100%}
}

/* Process steps: icon and step number on one line above the title. */
.step-head{display:inline-flex;align-items:center;gap:10px}
/* size/colour come from the shared icon-holder rule below */

/* Newsletter panel rises into place on scroll. */
.reveal.rise{transform:translateY(46px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.rise.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal.rise{transform:none!important;transition:none!important}}


/* ---------- hero lockup, widow control, accent CTA ---------- */

/* Every page headline is written as "Statement. Accent phrase." — setting the
   accent on its own line gives one consistent two-line lockup instead of a
   break that lands wherever the container width happens to put it. */
.page-hero h1 .accent{display:block}

/* Widow control. Headings balance across their lines; body copy uses `pretty`,
   which reserves a word so a paragraph cannot end on a lone short word. */
h1,h2,h3,h4,.d1,.d2,.h1,.h2,.h3,.lead,.ti-name,.xlink-head,.eyebrow,.hero-label{text-wrap:balance}
p,.body,.small,.xs,.proof-text{text-wrap:pretty}

/* Proof point: the accent sits on the label, the claim itself reads as plain
   body copy. Note the label is 14.5px uppercase, so WCAG treats it as small
   text needing 4.5:1, and the brand orange measures 1.98:1 on this surface.
   --orange-800 (#B54500) is the compliant stop if that matters more than the
   exact hue. */
.proof-card{border-left:3px solid var(--brand)}
.proof-card .hero-label{color:var(--brand)}
.proof-text{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  color:var(--text-strong);
}

/* The closing band's single action is the accent button, not a glass one.
   Label and arrow are white, matching every other filled orange button on the
   site (Request a demo, Subscribe, the blog filter pill). */
.cta-band-action button{
  background:var(--brand)!important;
  border-color:var(--brand)!important;
  color:#fff!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.cta-band-action button:hover{background:var(--orange-600)!important;border-color:var(--orange-600)!important}
.cta-band-action button svg{color:#fff!important}


/* CB model names carry the brand accent, matching every other orange heading. */
.variant-name{color:var(--brand)}

/* Tall tiles travel further and start from lower down, so the arrival is
   visible rather than finishing while the tile is still below the fold. */
.reveal.reveal-late{transform:translateY(52px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal.reveal-late.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal.reveal-late{transform:none!important;transition:none!important}}


/* Orange box titles, one type treatment. Card titles and tile titles already
   shared the accent colour, but not the type: .h3 renders 22px/500 while
   .ti-name rendered 18px/600, which is what made the boxes look inconsistent
   next to each other. .ti-name now matches .h3 exactly. */
.ti-name{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.015em;line-height:1.3}


/* Bullet lists that supply their own icons drop the generic marker. */
.bul-icons li:before{display:none}
.bul-icon{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:28px;height:28px;margin-top:-2px;
  border-radius:var(--r-xs);
  background:var(--brand-tint);color:var(--orange-600);
}
.dark .bul-icon{background:rgba(255,255,255,.07);color:var(--orange-500)}


/* Hero stat panels. StatCard's glass tone writes white text inline, which is
   invisible on a light hero, so every colour here has to win against an inline
   style. Flat panel, neutral border, orange numerals — no outline, no shadow. */
.stat-accent > div{
  background:var(--surface-card)!important;
  border:1px solid var(--border-subtle)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  border-radius:var(--r-card)!important;
  text-align:left!important;
}
/* label */
.stat-accent > div > span:nth-child(1),
.stat-accent > div > span:nth-child(1) > span{color:var(--text-strong)!important}
/* the number */
.stat-accent > div > span:nth-child(2) > span:nth-child(1){color:var(--brand)!important}
/* unit and caption stay dark, they are too small to carry the accent */
.stat-accent > div > span:nth-child(2) > span:nth-child(2),
.stat-accent > div > span:nth-child(3){color:var(--text-muted)!important}


/* Information tiles stay flat in every state. The base surfaces were already
   flattened, but the hover rules still reintroduced a shadow, so the tile
   lifted the moment the pointer crossed it. Hover is a border change only.
   Floating overlays — the nav dropdown and the cookie bar — keep their lift,
   because there the shadow says "this sits above the page". */
.ti-card,.ti-card:hover,
.info-card,.info-card:hover,
.link-card,.link-card:hover,
.xlink-card,.xlink-card:hover,
.fleet-card,.fleet-card:hover,
.variant-tile,.variant-tile:hover,
.explore-row,.explore-row:hover,
.chip,.chip:hover,
.explore-row-chips .chip:hover{box-shadow:none}
.link-card:hover{border-color:var(--border-strong)}


/* ── Article body ─────────────────────────────────────────────────────
   One measure for reading: ~68 characters, centred, with the type scaled
   up from body copy. Blocks are spaced by their own margins rather than
   the stack gap, so a heading sits closer to the text it introduces. */
.article{max-width:720px;margin:0 auto;gap:0!important}
.article-p{
  font-size:clamp(16.5px,.25vw + 15.6px,18px);
  line-height:1.72;
  color:var(--text-body);
  margin:0 0 22px;
  text-wrap:pretty;
}
.article-h{
  font-size:clamp(20px,.5vw + 18px,24px);
  line-height:1.3;
  margin:14px 0 14px;
  color:var(--text-strong);
}
.article-quote{
  margin:8px 0 26px;
  padding:0 0 0 20px;
  border-left:3px solid var(--brand);
  font-family:var(--font-display);
  font-size:clamp(18px,.4vw + 16.6px,21px);
  font-weight:500;line-height:1.5;
  color:var(--text-strong);
}
.article-ol{
  margin:0 0 24px;padding:0;
  list-style:none;counter-reset:step;
  display:flex;flex-direction:column;gap:16px;
}
.article-ol li{
  counter-increment:step;position:relative;padding-left:44px;
  font-size:clamp(16.5px,.25vw + 15.6px,18px);line-height:1.65;
  color:var(--text-body);text-wrap:pretty;
}
.article-ol li:before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-sm);color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.article-kicker{
  margin:6px 0 0;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,.3vw + 16px,19px);line-height:1.45;
  color:var(--text-strong);
}
.article-tags{margin-top:26px}
.article-tags .chip{font-size:var(--fs-xs);color:var(--text-muted)}
.article-related{margin-top:34px}
@media(max-width:600px){.article-ol li{padding-left:36px}}


/* Founder headshots. A 4:5 portrait frame, cropped by CSS rather than baked
   into the file, with the focal point biased upward so the crop takes the
   shoulders off before it takes the head. */
.founder-photo{
  display:block;width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--surface-sunken);
}
.founder-photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;
}