/* FVJ 貨Van仔 — v2 visual revision (home + /moving only). Spec: brief/FVJ_visual_spec_v1.md.
   Palette (Option 3): #0A0A0A / #141414 / #F9F9F9; gradient #FF5500→#FF3523; glow #7A1408→black; #D62A1A on white;
   lines #333 (dark) / #A7A7A7 (light); leader lines #FF5500. 8px grid; breakpoints 600 / 840 (nav 1024).
   Contrast (WCAG): #F9F9F9/#0A0A0A 18.6:1 · #C9C9C9/#0A0A0A 12:1 · #A7A7A7/#0A0A0A 8.4:1 · #FF5500/#0A0A0A 6.3:1 (gradient-text fallback)
   · #FF3523/#0A0A0A 5.6:1 · #1A1A1A/#F9F9F9 16.5:1 · #555/#F9F9F9 7.1:1 · #D62A1A/#F9F9F9 4.8:1. */

*{box-sizing:border-box;margin:0;padding:0}
:root{--bk:#0A0A0A;--bk2:#141414;--wh:#F9F9F9;--or:#FF5500;--or2:#FF3523;--red:#D62A1A;--deep:#7A1408;
  --grad:linear-gradient(90deg,#FF5500,#FF3523);--line-d:#333;--line-l:#A7A7A7;--grid:#1F1F1F;--side:16px;color-scheme:dark}
html{-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans CJK HK","Noto Sans CJK TC","PingFang HK","Microsoft JhengHei",sans-serif;font-size:16px;line-height:1.6;
  background:var(--bk);color:var(--wh);overflow-wrap:anywhere;--focus:#FF5500}
a{color:inherit}
img,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{position:relative;max-width:1200px;margin:0 auto;padding:0 var(--side)}
@media(min-width:600px){:root{--side:24px}}
@media(min-width:840px){:root{--side:48px}.wrap{padding:0;width:calc(100% - 96px)}}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
h1,h2{text-wrap:balance;word-break:keep-all}
h1{font-size:32px;line-height:1.25}
h2{font-size:28px;line-height:1.3}
h3{font-size:20px;line-height:1.4}
@media(min-width:840px){h1{font-size:52px;line-height:1.15}h2{font-size:40px;line-height:1.2}h3{font-size:22px}}
p+p{margin-top:16px}
.lede{color:#C9C9C9;max-width:40em}
.wh .lede{color:#333}
.label{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:700;letter-spacing:.12em;color:#A7A7A7;margin-bottom:16px}
.label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or);flex:none}
.wh .label{color:#555}.wh .label::before{background:var(--red)}
.sec-head{margin-bottom:32px}
@media(min-width:840px){.sec-head{margin-bottom:48px}}
.tbd{display:inline-block;font-size:12px;line-height:20px;font-weight:400;letter-spacing:0;border:1px dashed currentColor;padding:0 4px;border-radius:2px;vertical-align:middle;color:#A7A7A7}
.wh .tbd{color:#555}

/* big numbers: gradient text on black (fallback solid #FF5500), #D62A1A on white */
.num{display:block;font-weight:700;line-height:1;letter-spacing:-.03em;font-size:56px;color:var(--or);font-variant-numeric:lining-nums;white-space:nowrap}
.num small{font-size:.42em;letter-spacing:0;margin-left:.15em;font-weight:700}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bk .num,.num.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
}
.wh .num{color:var(--red);background:none;-webkit-text-fill-color:currentColor}
.num-lab{display:block;font-size:14px;line-height:20px;color:#A7A7A7;margin-top:8px}
.wh .num-lab{color:#555}
@media(min-width:840px){.num{font-size:80px}}
@media(min-width:1200px){.num.xl{font-size:96px}}
@media(max-width:399px){.num{font-size:48px}}

/* ---------- buttons (48px targets) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  font:700 16px/24px inherit;font-family:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--grad) border-box;color:#000;border:1px solid transparent}
.btn.ghost{background:transparent;color:#F9F9F9;border-color:#F9F9F9}
.wh .btn.ghost{color:#111;border-color:#111}
.btn.sm{padding:0 16px;font-size:14px}
.btn.wa::before{content:none}
.wa-ico{display:block;width:18px;height:18px;flex:none;fill:currentColor}
.btn::after,.mbar a::after,.fab::after,.burger::after,.svc-q::after,.acc summary::after,.rowlink::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity .15s}
:is(.btn,.mbar a,.fab,.burger,.svc-q,.acc summary,.rowlink):hover::after{opacity:.08}
:is(.btn,.mbar a,.fab,.burger,.svc-q,.acc summary,.rowlink):active::after{opacity:.1}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.cta-row .btn:not(.ghost){order:-1}
@media(max-width:599px){.cta-row .btn{flex:1 1 100%}}

/* ---------- sections ---------- */
main>section{position:relative;padding:64px 0;overflow:clip}
@media(min-width:840px){main>section{padding:112px 0}}
.bk{background:var(--bk);color:var(--wh);--focus:#FF5500}
.bk2{background:var(--bk2)}
.wh{background:var(--wh);color:#1A1A1A;--focus:#D62A1A;color-scheme:light}
/* 120px grid lines on black, centred on the container; fades at edges */
.grid-bg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 100%);mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 100%)}
main>section>*{position:relative;z-index:1}
/* full-bleed hairline that runs past the container (section top rule) */
.rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-d);z-index:1}
.wh .rule{background:var(--line-l)}
/* container edge (side) lines removed per P 2026-10-23 */
/* dark orange glow — radial, big blur */
.glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(48px);
  background:radial-gradient(closest-side,rgba(255,85,0,.55),rgba(255,53,35,.32) 35%,rgba(122,20,8,.5) 60%,rgba(10,10,10,0) 100%)}
.glow.deep{background:radial-gradient(closest-side,rgba(122,20,8,.85),rgba(122,20,8,.35) 55%,rgba(10,10,10,0) 100%)}

/* TEMP chip + mascot slot */
.fig{position:relative}.fig img{width:100%;height:auto;display:block;border-radius:4px;object-fit:cover}
.chip-temp{position:absolute;z-index:3;top:8px;left:8px;font-size:12px;line-height:20px;padding:0 8px;border-radius:2px;background:rgba(10,10,10,.85);color:#F9F9F9;border:1px solid #555;letter-spacing:.04em;pointer-events:none}
.mascot{display:flex;align-items:center;justify-content:center;text-align:center;width:136px;height:136px;flex:none;padding:8px;
  border:1px dashed #555;border-radius:8px;font-size:12px;line-height:18px;color:#A7A7A7;background:rgba(10,10,10,.4)}
.mascot b{display:block;color:#F9F9F9;font-size:14px;margin-bottom:4px}
.wh .mascot{color:#555;background:transparent}.wh .mascot b{color:#1A1A1A}
@media(min-width:840px){.mascot{width:152px;height:152px}}

/* ---------- header (dark, gradient hairline) ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.96);--focus:#FF5500}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-d)}
header .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
@media(min-width:840px){header .wrap{width:calc(100% - 48px)}}
.logo-link{display:flex;align-items:center;min-height:48px}
.logo{display:block;width:auto;height:40px}
nav{display:none;flex:1;min-width:0;column-gap:8px;flex-wrap:wrap;font-size:14px}
nav a,.nav-dd{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:#F9F9F9;text-decoration:none;border-radius:8px;background:none;border:0;font:inherit;cursor:pointer}
nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--or)}
.nav-item{position:relative;display:flex}
.dd-menu{position:absolute;top:100%;left:0;z-index:21;min-width:240px;display:flex;flex-direction:column;padding:8px;background:#0A0A0A;border:1px solid var(--line-d);border-radius:8px}
.dd-menu a{padding:0 16px;white-space:nowrap}
/* 服務 dropdown: 7 items -> cap to viewport + 2-col from 1024; 服務地區 stays single-col */
#dd-svc{max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:1024px){#dd-svc:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));min-width:480px;column-gap:8px}}
:is(nav a,.nav-dd,.dr-nav>a,.dr-dd,.dr-sub a)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none}
:is(nav a,.nav-dd,.dr-nav>a,.dr-dd,.dr-sub a):hover::after{opacity:.08}
.hdr-wa,.hdr-cta{display:none}
.hdr-cta{z-index:0}
.hdr-cta::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#0A0A0A;opacity:0;z-index:-1;pointer-events:none}
.hdr-cta.ghost::before,.hdr-cta.dim::before{opacity:1}
.hdr-cta.ghost,.hdr-cta.dim{color:#F9F9F9;border-color:#F9F9F9}
/* header right: outline WhatsApp + solid orange 即時估價 (default, no .ghost) */
.hdr-cta:not(.ghost):not(.dim){background:var(--or);color:#000;border-color:var(--or)}
.hdr-wa{background:transparent;color:#F9F9F9;border-color:#F9F9F9}
.burger{position:relative;margin-left:auto;width:48px;height:48px;border:1px solid #F9F9F9;border-radius:50%;background:none;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;cursor:pointer;color:#F9F9F9}
.burger i{display:block;width:20px;height:1.5px;background:#F9F9F9}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.drawer{position:fixed;left:0;right:0;top:var(--hdr-h,64px);bottom:0;z-index:19;overflow-y:auto;overscroll-behavior:contain;background:#0A0A0A;padding:16px 0 48px}
.dr-nav{display:flex;flex-direction:column}
.dr-nav>a,.dr-dd{position:relative;display:flex;align-items:center;width:100%;min-height:56px;padding:0 8px;color:#F9F9F9;font:inherit;font-size:18px;text-decoration:none;border:0;border-bottom:1px solid var(--line-d);background:none;cursor:pointer;text-align:left}
.dr-sub{display:flex;flex-direction:column;padding:8px 0 8px 16px;border-bottom:1px solid var(--line-d)}
.dr-sub a{position:relative;display:flex;align-items:center;min-height:48px;padding:0 8px;color:#C9C9C9;text-decoration:none}
html.menu-open,html.menu-open body{overflow:hidden}
@media(min-width:1024px){nav{display:flex}.burger{display:none}.hdr-wa,.hdr-cta{display:inline-flex}.hdr-wa{margin-left:auto}.drawer{display:none!important}}

/* ---------- hero ---------- */
.hero{padding:0 0 64px!important;min-height:0}
.hero-media{position:relative;margin:0 0 -48px;aspect-ratio:4/3;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:contain;object-position:90% 60%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 55%,#0A0A0A 100%),linear-gradient(90deg,rgba(10,10,10,.5),rgba(10,10,10,0) 40%);pointer-events:none}
.hero-copy{position:relative;z-index:2}
h1 .br,h2 .br{display:block}
.hero .tag{margin-top:16px;font-size:18px;font-weight:700;color:#F9F9F9}
.hero .lede{margin-top:16px}
.hero-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 48px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line-d)}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;line-height:20px;color:#C9C9C9}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks li::before{content:"";width:12px;height:1px;background:var(--or);flex:none}
.wh .ticks{color:#333}.wh .ticks li::before{background:var(--red)}
.hero>.glow{width:720px;height:560px;right:-240px;bottom:-200px}
.hero .mascot{position:absolute;right:var(--side);bottom:24px;z-index:3}
/* laser line: sweeps once along the hero foot */
.laser{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);z-index:3;transform-origin:left center}
@media(max-width:839.98px){.hero .mascot{position:relative;right:auto;bottom:auto;margin:24px 0 0 auto;width:120px;height:120px}.hero-stats{margin-top:32px}}
@media(min-width:840px){
  .hero{display:flex;align-items:center;min-height:min(760px,calc(100vh - 64px));padding:112px 0!important}
  .hero>.wrap{width:calc(100% - 96px)}
  .hero-media{position:absolute;inset:0 0 0 auto;width:72%;margin:0;aspect-ratio:auto;z-index:0}
  .hero-media img{object-fit:contain;object-position:85% 55%}
  .hero-media::after{background:linear-gradient(90deg,#0A0A0A 0%,rgba(10,10,10,.7) 22%,rgba(10,10,10,0) 55%),linear-gradient(0deg,#0A0A0A 0,rgba(10,10,10,0) 30%)}
  .hero-media .chip-temp{left:auto;right:24px;top:24px}
  .hero-copy{max-width:780px}.hero .lede{max-width:600px}
  .hero h1{font-size:50px}
  .hero .mascot{right:auto;left:calc(min(780px,100%) - 152px);bottom:32px}
}
/* home hero: the two selling points (即時網上估價 / 老師傅教路) lead; H1 stays for SEO but steps down in size */
.home-hero h1{font-size:22px;line-height:1.35;color:#F9F9F9}
.home-hero h1 .sep{color:var(--or)}
.pillars{list-style:none;margin-top:24px;border-top:1px solid var(--line-d)}
.pillar{display:grid;grid-template-columns:40px 1fr;gap:8px 16px;padding:24px 0;border-bottom:1px solid var(--line-d)}
.p-ico{width:40px;height:40px;color:var(--or);margin-top:2px}
.pillar-t{font-size:38px;line-height:1.15;letter-spacing:-.02em;word-break:keep-all;text-wrap:balance;color:var(--or)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pillar-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
}
.home-hero .cta-row{margin-top:32px}
@media(max-width:379.98px){.pillar-t{font-size:34px}}
@media(min-width:840px){
  .home-hero{padding:96px 0!important}
  .home-hero h1{font-size:28px;line-height:1.3}
  .home-hero .hero-copy{max-width:560px}
  .pillar{grid-template-columns:48px 1fr;gap:12px 24px;padding:28px 0}
  .p-ico{width:48px;height:48px}
  .pillar-t{font-size:48px;line-height:1.1}
}
@media(min-width:1200px){
  .home-hero .hero-copy{max-width:780px}
  .pillars{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-bottom:1px solid var(--line-d)}
  .pillar{grid-template-columns:1fr;align-content:start;gap:16px;padding:32px 32px 32px 0;border-bottom:0}
  .pillar+.pillar{padding:32px 0 32px 32px;border-left:1px solid var(--line-d)}
  .pillar-t{font-size:clamp(52px,4.2vw,60px)}
}

/* ---------- line-art + leader-line module ---------- */
.lineart{--va:#F9F9F9}
.la-stage{display:none}
.la-mobile .la-svg{width:100%;height:auto;margin:0 auto}
.la-list{list-style:none;margin-top:16px;border-top:1px solid var(--line-d)}
.la-list li{display:grid;grid-template-columns:32px 1fr;gap:0 8px;padding:24px 0;border-bottom:1px solid var(--line-d)}
.la-list .mk{width:24px;height:24px;border-radius:50%;border:1px solid var(--or);color:var(--or);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:8px}
.lineart>.glow{width:640px;height:420px;right:-120px;top:25%}
.la-svg .v{fill:none;stroke:#F9F9F9;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.la-svg .v.thin{stroke:#8A8A8A;stroke-width:1}
.la-svg .ld{fill:none;stroke:var(--or);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.la-svg .ldot{fill:var(--or)}
.la-svg .ring{fill:#0A0A0A;stroke:var(--or);stroke-width:1;vector-effect:non-scaling-stroke}
.la-svg text{fill:var(--or);font:700 12px/1 "Noto Sans CJK HK",sans-serif}
.la-svg .gl{stroke:var(--line-d);stroke-width:1;vector-effect:non-scaling-stroke}
.la-note{margin-top:32px;color:#C9C9C9;max-width:40em}
.la-more{display:grid;gap:24px;margin-top:32px;color:#C9C9C9}
.la-more p{max-width:40em}
.la-more .ticks{flex-direction:column;font-size:16px;line-height:24px;color:#F9F9F9}
.more-link{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:16px;color:#F9F9F9;font-weight:700;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:6px}
.more-link i{font-style:normal;color:var(--or);font-size:20px;transition:transform .2s}
.more-link:hover i{transform:translateX(4px)}
@media(min-width:840px){.la-more{grid-template-columns:7fr 5fr;gap:64px;margin-top:-24px;padding-top:48px;border-top:1px solid var(--line-d)}}
@media(min-width:840px){
  .la-mobile{display:none}
  .la-stage{display:block;position:relative;container-type:inline-size;aspect-ratio:1200/560}
  .la-stage>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .la-stage .blk{position:absolute;left:0;width:40%}
  .la-stage .num{font-size:clamp(56px,7cqw,88px)}
  .la-stage .num.long{font-size:clamp(40px,4.6cqw,60px)}
}

/* ---------- pricing (white) ---------- */
.price-grid{display:grid;gap:48px}
.price-nums{display:grid;gap:32px;align-content:start}
.price-nums>div{padding-top:24px;border-top:1px solid var(--line-l)}
.price-copy{color:#333}
.price-copy .ticks{flex-direction:column;margin-top:24px;font-size:16px;line-height:24px}
@media(min-width:840px){
  .price-grid{grid-template-columns:5fr 7fr;gap:64px}
  .price-copy{position:relative;z-index:1;max-width:520px}
}

/* ---------- services: cut-out left, accordion right ---------- */
.svc-grid{display:grid;gap:32px}
.svc-fig{position:relative;margin-left:calc(var(--side) * -1 - 12%);width:calc(88% + var(--side));max-width:560px}
.svc-fig .chip-temp{left:auto;right:8px}
.svc-fig .glow{width:110%;height:90%;left:10%;top:10%}
.svc-fig img{position:relative;z-index:1}
.svc{list-style:none;border-top:1px solid var(--line-d)}
.svc-row{border-bottom:1px solid var(--line-d)}
.svc-row.open{box-shadow:inset 2px 0 0 var(--or)}
.svc-q{position:relative;width:100%;display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 8px 8px 16px;background:none;border:0;color:#F9F9F9;font:inherit;font-size:18px;font-weight:700;text-align:left;cursor:pointer}
.svc-q .dot{width:8px;height:8px;border-radius:50%;background:var(--or);flex:none}
.svc-q .t{flex:1}
.pm{position:relative;width:48px;height:48px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--or);transition:transform .2s ease}
.pm::after{transform:rotate(90deg)}
[aria-expanded="true"]>.pm::before{transform:rotate(45deg)}
[aria-expanded="true"]>.pm::after{transform:rotate(135deg)}
.svc-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease,visibility .2s}
.svc-a>div{overflow:hidden;min-height:0}
.svc-body{padding:0 16px 24px 40px;display:grid;gap:12px}
.svc-body .short{color:#C9C9C9}
.svc-body .num{font-size:48px}
.svc-body .sub{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:flex-end}
.svc-body .sub .num{font-size:32px}
.svc-body .thumb{position:relative;max-width:320px;aspect-ratio:16/9;border-radius:4px;overflow:hidden}
.svc-body .thumb img{width:100%;height:100%;object-fit:cover}
.svc-body .btn{justify-self:start;margin-top:4px}
html.js .svc-row:not(.open) .svc-a{grid-template-rows:0fr;visibility:hidden}
.svc-grid .glow.side{width:520px;height:520px;left:-260px;top:-80px}
@media(min-width:840px){
  /* image column follows the list height (no empty gap under the list); photo is cropped, not stretched */
  .svc-grid{grid-template-columns:5fr 7fr;gap:64px;align-items:stretch}
  .svc-fig{position:relative;min-height:0;margin-left:calc(-12vw);width:calc(100% + 12vw);max-width:none}
  .svc-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .svc-q{font-size:20px;min-height:64px}
  .svc-body .num{font-size:56px}
}

/* ---------- steps (white) — 4-col illus on top / n + title below ---------- */
.steps{list-style:none;display:grid;border-top:1px solid var(--line-l)}
.steps li{display:grid;grid-template-columns:1fr;gap:8px;padding:32px 16px;border-bottom:1px solid var(--line-l);align-items:start;justify-items:start}
/* Keep caption wrapping from stretching the illustration and number rows. */
.steps-sec .steps li{grid-template-rows:max-content max-content auto;align-content:start}
.steps .step-illu{--step-illu-size:160px;width:var(--step-illu-size);height:var(--step-illu-size);object-fit:contain;object-position:center;display:block;margin:0 auto 8px}
.steps .n{font-size:40px;font-weight:700;line-height:1;color:var(--red);letter-spacing:-.02em}
.steps h3{font-size:18px;line-height:1.5}
.steps p{color:#555;margin-top:0}
@media(min-width:840px){
  .steps{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-l)}
  .steps li{padding:32px 24px 48px;border-bottom:0;border-left:1px solid var(--line-l)}
  .steps li:first-child{border-left:0}
  .steps .step-illu{--step-illu-size:clamp(120px,15vw,180px);margin-bottom:16px}
  .steps .n{font-size:64px;margin-bottom:8px}
}

/* ---------- estimator / CTA band (black, glow, van cut-out) ---------- */
.est{padding:80px 0!important}
.est-in{display:grid;gap:32px;align-items:center}
.est-side{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.est-fig{position:relative;margin:0 calc(var(--side) * -1 - 15%) 0 0;width:calc(100% + var(--side));max-width:none}
.est-fig img{position:relative;z-index:1;width:100%}
.est-fig .chip-temp{left:auto;right:calc(15% + 8px)}
.est>.glow{width:900px;height:520px;right:-300px;top:50%;transform:translateY(-50%)}
@media(min-width:840px){
  .est{padding:96px 0!important}
  .est-in{grid-template-columns:7fr 5fr;gap:48px}
  .est-fig{margin:0 -30% 0 0;width:130%}
  .est-fig .chip-temp{right:calc(23% + 8px)}
}

/* ---------- about (white) ---------- */
.about-grid{display:grid;gap:32px}
.about-nums{display:flex;flex-wrap:wrap;gap:32px 64px}
.about-fig{position:relative;border-radius:4px;overflow:hidden}
@media(min-width:840px){.about-grid{grid-template-columns:6fr 6fr;gap:64px;align-items:center}}

/* ---------- row link lists (areas / tips / related) ---------- */
.rows-grid{display:grid;gap:48px}
@media(min-width:840px){.rows-grid{grid-template-columns:1fr 1fr;gap:64px}}
.rows{list-style:none;border-top:1px solid var(--line-d)}
.rows li{border-bottom:1px solid var(--line-d)}
.rowlink{position:relative;display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 8px 8px 0;text-decoration:none;font-size:18px;font-weight:700}
.rowlink::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--or);flex:none}
.rowlink span{flex:1}
.rowlink::after{border-radius:0}
.rowlink i{font-style:normal;color:var(--or);font-size:20px;transition:transform .2s}
.rowlink:hover i{transform:translateX(4px)}
.wh .rows,.wh .rows li{border-color:var(--line-l)}
.wh .rowlink::before{background:var(--red)}.wh .rowlink i{color:var(--red)}

/* ---------- FAQ accordion (white) ---------- */
.acc{border-bottom:1px solid var(--line-l)}
.faq-list{border-top:1px solid var(--line-l)}
.acc summary{position:relative;list-style:none;display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 0 8px 0;font-size:18px;font-weight:700;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm::before,.acc summary .pm::after{background:var(--red)}
.acc summary .q{flex:1}
.acc[open] summary .pm::before{transform:rotate(45deg)}
.acc[open] summary .pm::after{transform:rotate(135deg)}
.acc .a{padding:0 56px 24px 0;color:#333;overflow:hidden}
.acc summary::after{border-radius:0}
.case-ph{display:flex;align-items:center;justify-content:center;min-height:160px;border:1px dashed #8A8A8A;color:#555;font-size:14px;text-align:center;padding:16px;margin-bottom:64px}
@media(min-width:840px){.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:64px}}

/* ---------- bottom banner ---------- */
.banner{padding:80px 0!important}
.banner-in{display:grid;gap:32px;align-items:end}
.banner .wa-slot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.banner>.glow{width:640px;height:420px;left:-200px;bottom:-260px}
.banner>.glow.deep{left:auto;right:-160px;top:-200px;bottom:auto}
@media(min-width:840px){.banner-in{grid-template-columns:1fr auto;gap:48px}.banner{padding:112px 0!important}}

/* ---------- breadcrumb ---------- */
.crumb{font-size:14px;line-height:20px;color:#A7A7A7;margin-bottom:24px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center}
.crumb li+li::before{content:"/";padding:0 8px;color:#555}
.crumb a{display:inline-flex;align-items:center;min-height:48px;color:#C9C9C9}

/* ---------- /moving: hero cut-out & plans ---------- */
.mv-hero{padding:32px 0 64px!important}
.mv-hero-grid{display:grid;gap:16px}
.mv-fig{position:relative;margin:0 calc(var(--side) * -1 - 14%) 0 auto;width:calc(78% + 14%);max-width:none}
.mv-fig img{position:relative;z-index:1;width:100%}
.mv-fig .chip-temp{left:auto;right:calc(14% + 8px)}
.mv-fig .glow{width:120%;height:80%;left:-5%;top:20%}
.mv-mascot{margin:32px 0 0 auto}
@media(max-width:839.98px){.mv-hero-grid>.mv-fig{order:-1;margin-top:0}}
@media(min-width:840px){
  .mv-hero{padding:48px 0 112px!important;min-height:min(780px,calc(100vh - 64px))}
  .mv-hero-grid{grid-template-columns:7fr 5fr;gap:48px;align-items:center}
  .mv-fig{margin:0 -40% 0 -10%;width:150%}
  .hero .mv-mascot{position:absolute;left:auto;right:0;bottom:-64px;margin:0;z-index:3}
}
.plans{list-style:none;display:grid;border-top:1px solid var(--line-l)}
.plans li{position:relative;padding:32px 16px;border-bottom:1px solid var(--line-l)}
.plans .idx{display:block;font-size:14px;font-weight:700;color:var(--red);letter-spacing:.08em;margin-bottom:16px}
.plans h3{font-size:24px;line-height:32px}
.plans p{margin-top:8px;color:#333}
.plans a.more{display:inline-flex;align-items:center;min-height:48px;color:var(--red);font-weight:700}
.plans-fig{position:relative;margin:32px calc(var(--side) * -1 - 12%) -96px auto;width:min(96%,560px);z-index:2;pointer-events:none}
@media(min-width:840px){
  .plans{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line-l)}
  .plans h3{font-size:22px}
  .plans li{padding:32px 24px 48px;border-bottom:0;border-left:1px solid var(--line-l)}
  .plans li:first-child{border-left:0}
  .plans-wrap{display:grid;grid-template-columns:8fr 4fr;gap:48px;align-items:end}
  .plans-fig{margin:0 -40% -160px 0;width:140%}
}
.mv-extra{margin-top:48px}
.mv-extra h3{margin-bottom:16px}

/* ---------- footer ---------- */
footer{position:relative;background:#000;color:#A7A7A7;padding:64px 0 32px;font-size:14px;line-height:24px;--focus:#FF5500}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-d)}
.footer-logo{display:block;width:auto;height:56px;margin-bottom:32px}
.f-grid{display:grid;gap:32px}
@media(min-width:840px){.f-grid{grid-template-columns:repeat(4,1fr)}}
footer b{color:#F9F9F9}
footer .footer-contacts{display:flex;flex-direction:column;gap:0}
footer .footer-contact{display:flex;align-items:center;gap:8px;min-height:48px;color:#F9F9F9;text-decoration:none}
footer .footer-contact svg{width:20px;height:20px;flex:none;fill:currentColor}
footer .footer-contact:hover{text-decoration:underline}
.flinks{list-style:none;display:flex;flex-wrap:wrap;column-gap:16px}
.flinks a{display:inline-flex;align-items:center;min-height:48px;color:#F9F9F9}

/* ---------- mobile bar / FAB (proto.js toggles .off) ---------- */
body:has(>.mbar){padding-bottom:64px}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;gap:8px;padding:8px;background:#0A0A0A;border-top:1px solid var(--line-d)}
.mbar.off{display:none}
.mbar a{position:relative;flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700;text-decoration:none}
.mbar .w{gap:8px;color:#F9F9F9;border:1px solid #F9F9F9}
.mbar .q{background:var(--grad);color:#000}
.fab{display:none;position:fixed;right:24px;bottom:24px;z-index:15;width:56px;height:56px;border-radius:50%;background:#25D366;color:#FFF;border:2px solid #0A0A0A;box-shadow:0 0 0 1px rgba(249,249,249,.35);align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.fab .wa-ico{width:30px;height:30px}
@media(min-width:840px){body:has(>.mbar){padding-bottom:0}.mbar{display:none!important}.fab{display:flex}}

/* ---------- misc v2 ---------- */
.sep{color:var(--or)}
.wh .sep{color:var(--red)}
.slash{font-size:.6em;margin:0 .1em;vertical-align:.25em}
.steps.dark{margin-top:64px;border-color:var(--line-d)}
.steps.dark li{border-color:var(--line-d)}
.steps.dark .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:var(--or);-webkit-text-fill-color:transparent}
.steps.dark p{color:#A7A7A7}
.price-copy h3{margin-bottom:8px}
@media(min-width:840px){.rows-3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;border-top:0}.rows-3 li{border-top:1px solid var(--line-d)}}

/* ---------- motion (spec §6) ---------- */
@media(prefers-reduced-motion:no-preference){
  .laser:not(.static){animation:laser-sweep .8s cubic-bezier(.2,.7,.2,1) .2s both}
  html.js main>section.pre>.wrap{opacity:0;transform:translateY(16px)}
  main>section>.wrap{transition:opacity .25s ease-out,transform .25s ease-out}
  .hdr-cta,.hdr-cta::before{transition:opacity .2s linear,color .2s linear,border-color .2s linear}
}
@keyframes laser-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* white grid cells: same inner padding in every column */
@media(min-width:1200px){.steps li,.plans li{padding-left:32px;padding-right:32px}}
/* hero mascot: 840–1199 the photo reaches under the copy, so the slot drops into the black copy column */
@media(min-width:840px) and (max-width:1199.98px){.hero:not(.mv-hero) .mascot:not(.mv-mascot){position:relative;left:auto;bottom:auto;margin-top:24px}}

/* ---------- fee list (moving, white) ---------- */
.fees{margin-top:24px;border-top:1px solid #DADADA;font-size:16px;line-height:24px}
.fees>div{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid #DADADA}
.fees dt{color:#0A0A0A;font-weight:500}
.fees dd{margin:0;color:var(--red);font-weight:600;font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:break-word}
.fees .nw{white-space:nowrap}
.fees .tbd{margin-left:8px;font-variant-numeric:normal}
@media(min-width:600px){
  .fees{display:grid;grid-template-columns:max-content 1fr;column-gap:32px}
  .fees>div{grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;padding:16px 0}
  .fees dd{text-align:right;text-wrap:balance}
}
@media(min-width:840px){.price-copy:has(>.fees){max-width:600px}}

/* ---------- about: video poster (option C) — black, laser, 56px play; proto.js swaps in the youtube-nocookie iframe ---------- */
.about-fig .video-box{position:relative;aspect-ratio:16/9;width:100%;background:#0A0A0A}
.video-facade{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;padding:16px;
  border:0;border-radius:inherit;background:#0A0A0A;color:#F9F9F9;font:inherit;cursor:pointer;overflow:hidden;--focus:#FF5500;color-scheme:dark}
.video-facade::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 100% 100%,rgba(122,20,8,.55),rgba(10,10,10,0) 70%),
    linear-gradient(var(--grid) 1px,transparent 1px) center/40px 40px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) center/40px 40px;
  -webkit-mask-image:radial-gradient(90% 90% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(90% 90% at 50% 50%,#000 30%,transparent 100%)}
.video-facade::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity .15s}
.video-facade:hover::after{opacity:.06}.video-facade:active::after{opacity:.1}
.video-facade:focus-visible{outline-offset:-4px}
.video-poster{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;pointer-events:none}
.video-poster b{font-size:20px;line-height:28px;font-weight:700;color:#F9F9F9;word-break:keep-all}
.video-subtitle{font-size:14px;line-height:20px;color:#A7A7A7;letter-spacing:.04em}
.video-laser{display:block;width:64px;height:2px;background:var(--grad);flex:none}
.video-play{position:relative;width:56px;height:56px;flex:none;border-radius:50%;background:#F9F9F9;color:#0A0A0A;display:grid;place-items:center;transition:transform .2s}
.video-play svg{margin-left:3px}
.video-facade:hover .video-play{transform:scale(1.06)}
.about-fig .video-box iframe{display:block;width:100%;height:100%;border:0}
@media(min-width:840px){.video-poster b{font-size:24px;line-height:32px}.video-facade{gap:24px}}

/* ---------- home (art-direction pass 2026-10-23): two pillars → two chapters; all rules scoped to home-only classes ---------- */
.pillar-t .ln{display:block}
.home-hero .pillar{align-items:center}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:32px}
.hero-foot .cta-row{margin-top:0}
/* CD: Anson slot under title (left), never over van wheels */
.home-hero .mascot-under-title{position:static;margin:24px 0 0;width:120px;height:120px}
@media(min-width:840px){.home-hero .mascot-under-title{width:136px;height:136px;margin-top:28px}}
.hero.home-hero .hero-foot .mascot{display:none}
@media(max-width:599px){.hero-foot .cta-row{flex:1 1 100%}}
@media(min-width:1200px){.home-hero .pillar{grid-template-rows:auto 1fr;align-items:end}.home-hero .p-ico{align-self:start}.home-hero .pillars{margin-top:40px}}
/* chapter marker: the pillar icon replaces the label dot (即時網上估價 = phone, 傳承 = handover) */
.label.ch::before{content:none}
.ch-ico{width:24px;height:24px;flex:none;color:var(--or)}
.wh .ch-ico{color:var(--red)}
.est-ico{display:block;width:40px;height:40px;color:var(--or);margin-bottom:16px}
@media(min-width:840px){.est-ico{width:48px;height:48px;margin-bottom:24px}}
/* 關於 / 傳承 */
.about-sec .about-grid{align-items:start}
.about-lede{margin-top:32px}
.plus{list-style:none;margin-top:32px;border-top:1px solid var(--line-l)}
.plus li{display:grid;grid-template-columns:24px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--line-l)}
.plus li::before{content:"+";grid-row:1/3;color:var(--red);font-size:24px;line-height:28px;font-weight:700}
.plus h3{font-size:18px;line-height:28px}
.plus p{color:#333}
@media(min-width:840px){.about-sec .about-grid{grid-template-columns:5fr 7fr;gap:64px}.about-sec .about-fig{margin-top:8px}}
/* bottom banner after a white section: short laser accent on the top edge */
.home-banner>.laser{left:var(--side);right:auto;width:120px}
@media(min-width:840px){.home-banner>.laser{left:calc((100% - min(1200px,100% - 96px)) / 2)}}

/* lineart 55t v2 (CD SVG): callouts sit left of cargo */
.la-stage{min-height:360px}
.la-stage .la-svg{width:100%;height:auto;display:block}
.la-stage .blk{position:absolute;max-width:220px;z-index:2}
.la-stage .ld{fill:none;stroke:#FF5500;stroke-width:1;stroke-dasharray:3 4}
.la-stage .ring{fill:#0A0A0A;stroke:#FF5500;stroke-width:1.5}
.la-stage text{fill:#F9F9F9;font-size:11px;font-weight:600}
.la-mobile .la-svg{width:100%;height:auto;display:block;margin-bottom:16px}
.la-mobile .ring{fill:#0A0A0A;stroke:#FF5500;stroke-width:1.5}
.la-mobile text{fill:#F9F9F9;font-size:12px;font-weight:600}

/* ---------- 2026-10-23 cut-out images (real FVJ photos, background removed; AI demo cut-outs carry "AI 示意圖 TEMP") ---------- */
.fig.cut img{border-radius:0;object-fit:contain;background:none}
.bk .fig.cut img,.fig.cut.on-dark img{filter:drop-shadow(0 28px 36px rgba(0,0,0,.65))}
.wh .fig.cut img{filter:drop-shadow(0 20px 28px rgba(0,0,0,.18))}
/* hero: real truck, ground glow under the wheels */
.home-hero .hero-media.cut::before{content:"";position:absolute;z-index:0;left:18%;right:0;bottom:14%;height:18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,85,0,.42),rgba(122,20,8,.28) 55%,rgba(10,10,10,0));filter:blur(24px);pointer-events:none}
.home-hero .hero-media.cut img{position:relative;z-index:1}
@media(min-width:840px){
  .home-hero .hero-media.cut{width:62%}
  .home-hero .hero-media.cut img{object-fit:contain;object-position:100% 62%;padding:48px 0 32px}
  .home-hero .hero-media.cut::after{background:linear-gradient(90deg,#0A0A0A 0%,rgba(10,10,10,.55) 14%,rgba(10,10,10,0) 34%)}
}
@media(min-width:1200px){.home-hero .hero-media.cut{width:58%}}
/* services: cut-out sits on the glow instead of a cropped photo */
@media(min-width:840px){
  .svc-fig.cut{display:flex;align-items:center;justify-content:center;margin-left:0;width:100%}
  .svc-fig.cut img{position:relative;inset:auto;width:min(100%,460px);height:auto;-webkit-mask-image:none;mask-image:none}
}
.svc-fig.cut{margin-left:0;width:min(100%,420px);margin-inline:auto}
/* plans cut-out on /moving */
.plans-fig.cut img{width:100%}

/* ---------- line-art callouts: let numbers size to content (gradient text only paints inside its box) ---------- */
@media(min-width:840px){
  .la-stage .blk{max-width:40%;width:max-content}
  .la-stage .num{width:max-content;max-width:100%;font-size:clamp(44px,5.6cqw,76px)}
  .la-stage .num.long{font-size:clamp(32px,3.6cqw,48px)}
}
/* hero with the real truck: keep the copy in one column so the truck never sits under the pillar text */
@media(min-width:1200px){
  .home-hero .hero-copy{max-width:560px}
  .home-hero .pillars{display:block;border-bottom:0}
  .home-hero .pillar,.home-hero .pillar+.pillar{grid-template-columns:48px 1fr;grid-template-rows:auto;align-items:center;gap:12px 24px;padding:24px 0;border-left:0;border-bottom:1px solid var(--line-d)}
  .home-hero .p-ico{align-self:center}
  .home-hero .pillar-t{font-size:52px}
  .home-hero .hero-media.cut{width:60%}
}
/* /moving: the AI crew cut-out is low-res, keep it at its natural size */
@media(min-width:840px){
  .mv-fig.cut{margin:0 -6% 0 0;width:106%;max-width:560px;justify-self:end}
  .mv-fig.cut .chip-temp{right:8px}
  .plans-fig.cut{margin:0 -12% -64px 0;width:min(120%,420px)}
}
.mv-fig.cut{margin:0 auto;width:min(80%,360px)}
.plans-fig.cut{margin:32px -8% -64px auto;width:min(70%,320px)}
/* home 收費 line-art: real FVJ truck (traced), stage matches the 960×360 drawing so callouts line up at every width */
@media(min-width:840px){
  .la-stage.la-truck{aspect-ratio:960/360;min-height:0}
  .la-truck .blk{max-width:26%}
  .la-truck .num{font-size:clamp(40px,5.2cqw,72px)}
  .la-truck .num-lab{margin-top:4px}
}

/* =====================================================================
   熱血 pass (2026-10-23): manifesto band, 社區行動, orange closing banner, motion.
   Visual DNA = the truck livery: slanted orange bands with a white offset edge, black, spray dots.
   Spec change (P to confirm): large orange areas are now allowed on the manifesto band and the closing banner only.
   ===================================================================== */
:root{--hot-font:"Noto Sans HK","Noto Sans CJK HK","PingFang HK","Microsoft JhengHei",sans-serif;--skew:-10deg}
/* spray-dot texture (from the truck body) */
.dots::after,.manifesto::after,.hot-banner::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:radial-gradient(#F9F9F9 1px,transparent 1.4px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(115deg,transparent 35%,#000 75%);mask-image:linear-gradient(115deg,transparent 35%,#000 75%)}

/* ---------- manifesto band ---------- */
.manifesto{position:relative;background:#0A0A0A;color:#F9F9F9;padding:0 0 64px!important;overflow:clip}
.tape{position:relative;z-index:1;background:var(--grad);color:#000;border-block:2px solid #F9F9F9;overflow:hidden;transform:rotate(-1.5deg);margin:24px -16px 56px}
.tape-in{display:flex;gap:40px;width:max-content;padding:10px 0;font:900 18px/1.2 var(--hot-font);letter-spacing:.04em;white-space:nowrap}
.tape-in span::after{content:"／";margin-left:40px;opacity:.6}
/* Clip the bleed only at page level; reserve room for both rotated borders.
   The 2vw allowance exceeds the 1.5deg rotation's vertical rise per side. */
html:has(>body.home-page),body.home-page{overflow-x:clip}
.home-page .manifesto{overflow:visible;padding-top:calc(24px + 2vw)!important}
.home-page .tape{width:calc(100% + 192px);left:-96px;margin:0 0 calc(56px + 2vw)}
.mf-list{list-style:none;display:grid;gap:40px;position:relative;z-index:1}
.mf{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center}
.mf-n{font:700 14px/1 inherit;font-family:inherit;color:#A7A7A7;letter-spacing:.1em;align-self:start;padding-top:12px}
.mf-t{display:block;font:900 40px/1.15 var(--hot-font);letter-spacing:-.01em;word-break:keep-all}
/* livery bar: orange band, slanted, white offset edge */
.bar{position:relative;display:inline-block;padding:4px 20px 8px 20px;margin-left:8px;color:#000;z-index:0}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:skewX(var(--skew));box-shadow:-6px 6px 0 #F9F9F9}
.mf-d{grid-column:2;color:#C9C9C9;max-width:34em;margin-top:8px}
@media(min-width:840px){
  .manifesto{padding:0 0 112px!important}
  .tape{margin:40px -24px 88px}.tape-in{font-size:22px;padding:12px 0}
  .home-page .manifesto{padding-top:calc(40px + 2vw)!important}
  .home-page .tape{margin:0 0 calc(88px + 2vw)}
  .mf-list{gap:56px}
  .mf-t{font-size:clamp(56px,6.4vw,88px)}
  .mf-n{font-size:16px;padding-top:24px}
}

/* ---------- 社區行動 ---------- */
.community .label .tbd{margin-left:8px;letter-spacing:0}
.cm-h{font:900 36px/1.15 var(--hot-font);word-break:keep-all}
.cm-h .ln{display:block}
.cm-h .hot{color:var(--or)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.cm-h .hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}}
.cm-grid{list-style:none;display:grid;gap:0;border-top:1px solid var(--line-d);position:relative;z-index:1}
.cm{position:relative;display:grid;grid-template-columns:56px 1fr;gap:8px 16px;padding:28px 0;border-bottom:1px solid var(--line-d);overflow:hidden;align-items:start}
.cm::before{content:"";position:absolute;left:-10%;top:0;bottom:0;width:6px;background:var(--grad);transform:skewX(var(--skew)) scaleY(0);transform-origin:bottom;transition:transform .35s ease}
.cm:hover::before{transform:skewX(var(--skew)) scaleY(1)}
.cm-n{font:900 32px/1 var(--hot-font);color:var(--or)}
.cm h3{font:900 22px/1.35 var(--hot-font);margin:0}
.cm-fig{grid-column:1/-1;margin:4px 0 0;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:#111}
.cm-fig img{width:100%;height:100%;object-fit:cover;display:block}
.cm-src{grid-column:2;justify-self:start}
.cm-award{display:flex;align-items:center;gap:20px;margin-top:40px;padding:20px 24px;border:1px solid var(--line-d);border-radius:4px;position:relative;z-index:1;max-width:640px}
.cm-award b{display:block;font-size:18px}
.cm-award span:not(.cm-badge){display:block;font-size:14px;color:#A7A7A7}
.cm-award .tbd{margin-top:4px}
.cm-badge{flex:none;display:grid;place-items:center;width:72px;height:72px;font:900 20px/1 var(--hot-font);color:#000;position:relative;z-index:0}
.cm-badge::before{content:"";position:absolute;inset:6px;z-index:-1;background:var(--grad);transform:skewX(var(--skew));box-shadow:-4px 4px 0 #F9F9F9}
.cm-note{margin-top:24px;font-size:14px;color:#A7A7A7;position:relative;z-index:1}
@media(min-width:840px){
  .cm-h{font-size:clamp(48px,5vw,72px)}
  .cm-grid{grid-template-columns:repeat(2,1fr);column-gap:48px}
  .cm{padding:40px 0;grid-template-columns:80px 1fr}
  .cm-n{font-size:48px}.cm h3{font-size:28px}
}

/* ---------- closing banner: orange, black type ---------- */
.hot-banner{position:relative;background:var(--grad);color:#000;--focus:#000;--stripe-period:calc(180px / 0.8660254)}
.hot-banner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-60deg,transparent 0 120px,rgba(0,0,0,.07) 120px 180px);
  background-size:var(--stripe-period) 100%}
.hot-banner h2{font:900 32px/1.2 var(--hot-font);color:#000}
.hot-banner h2 .sep{color:#000;opacity:.5}
.hot-banner .btn{background:#0A0A0A;color:#F9F9F9}
.hot-banner .btn.ghost{background:transparent;color:#000;border-color:#000}
.hot-banner .mascot{border-color:#000;color:#000;background:rgba(255,255,255,.18)}.hot-banner .mascot b{color:#000}
.hot-banner .glow{display:none}
.hot-banner::after{opacity:.18;background-image:radial-gradient(#000 1px,transparent 1.4px)}
@media(min-width:840px){.hot-banner h2{font-size:52px}}

/* ---------- motion (all off under reduced motion) ---------- */
@media(prefers-reduced-motion:no-preference){
  .tape-in{animation:tape 28s linear infinite}
  html.js .mf .bar::before{transform:skewX(var(--skew)) scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  html.js .mf .bar{color:#F9F9F9;transition:color .2s .35s}
  html.js .mf.in .bar{color:#000}
  html.js .mf.in .bar::before{transform:skewX(var(--skew)) scaleX(1)}
  html.js .mf:nth-child(2) .bar::before{transition-delay:.12s}html.js .mf:nth-child(3) .bar::before{transition-delay:.24s}
  html.js .mf .mf-d{opacity:0;transform:translateY(12px);transition:opacity .3s .4s,transform .3s .4s}
  html.js .mf.in .mf-d{opacity:1;transform:none}
  /* sections slide in with a slight skew, like a van pulling up */
  html.js main>section.pre>.wrap{opacity:0;transform:translate3d(-24px,12px,0) skewX(-2deg)}
  main>section>.wrap{transition:opacity .35s ease-out,transform .45s cubic-bezier(.2,.8,.2,1)}
  .laser:not(.static){animation-duration:.5s}
  .btn:not(.ghost):not(.hdr-cta){overflow:hidden}
  .btn:not(.ghost):not(.hdr-cta):not(.wa)::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .45s ease;pointer-events:none}
  .btn:not(.ghost):not(.hdr-cta):not(.wa):hover::before{left:130%}
  .hot-banner::before{animation:stripe 6s linear infinite}
}
@keyframes tape{to{transform:translateX(-33.333%)}}
@keyframes stripe{to{background-position:calc(2 * var(--stripe-period)) 0}}
/* manifesto: the truck head-on, filling the empty right of the staircase (desktop only) */
.mf-fig{display:none}
@media(min-width:1024px){
  .mf-fig{display:block;position:absolute;right:0;bottom:-24px;width:min(26vw,340px);z-index:0}
  .mf-fig img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
  .mf-fig::before{content:"";position:absolute;left:-20%;right:-20%;bottom:0;height:30%;background:radial-gradient(closest-side,rgba(255,85,0,.45),rgba(10,10,10,0));filter:blur(20px);z-index:-1}
}
/* Landing manifesto: transparent logo burn-in, with reserved space and a still for reduced motion. */
.home-page .mf-fig.mf-logo{display:block;width:min(72vw,280px);aspect-ratio:600/248;margin:40px auto 0;z-index:2;pointer-events:none}
.home-page .mf-logo-fallback{width:100%;height:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.home-page .mf-logo-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.home-page .mf-logo::before{content:"";position:absolute;left:10%;right:10%;bottom:-8%;height:40%;background:radial-gradient(closest-side,rgba(255,105,72,.35),rgba(10,10,10,0));filter:blur(18px);z-index:-1}
@media(prefers-reduced-motion:no-preference){
  .home-page .mf-logo-fallback{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){
  .home-page .mf-logo-vid{display:none}
}
@media(min-width:1024px){
  .home-page .mf-fig.mf-logo{position:absolute;right:0;top:50%;bottom:auto;transform:translateY(-50%);width:min(38vw,480px);margin:0}
}
.mf-d{padding-left:28px}