/* FVJ 貨Van仔 — v2 skin for the inner pages (2026-10-23).
   Loaded after each page's inline prototype <style> and after /assets/v2.css, so the inner pages share the
   home/moving look (header, footer, buttons, type, black/white rhythm) without touching their markup or proto.js.
   Every rule is scoped to body.v2p, which only the inner pages carry. */

/* ---------- tokens the inline prototype CSS reads, remapped to v2 ---------- */
.v2p section.bk,.v2p .bk{--bg:#141414;--fg:#F9F9F9;--fg2:#A7A7A7;--ctl:#555;--line:#333;--line2:#555;--surf:#141414;--surf2:#141414;
  --zebra:#111;--th:#1F1F1F;--tag:#1F1F1F;--ph:#141414;--phx:#333;--hl:#FF5500;--acc:#FF5500;--focus:#FF5500;--err:#FFB4AB}
.v2p section.wh,.v2p .wh{--bg:#FFFFFF;--fg:#1A1A1A;--fg2:#555;--ctl:#A7A7A7;--line:#DADADA;--line2:#A7A7A7;--surf:#FFFFFF;--surf2:#FFFFFF;
  --zebra:#F4F4F4;--th:#EFEFEF;--tag:#EFEFEF;--ph:#EFEFEF;--phx:#C9C9C9;--hl:#D62A1A;--acc:#D62A1A;--focus:#D62A1A}
.v2p{background:var(--bk);color:var(--wh)}

/* ---------- section rhythm ---------- */
.v2p main>section{border-bottom:0;padding:64px 0}
@media(min-width:840px){.v2p main>section{padding:96px 0}}
/* two sections of the same colour in a row: one continuous band split by a hairline, not a double gap */
.v2p main>section.wh+section.wh,.v2p main>section.bk:not(.hero)+section.bk{padding-top:0}
.v2p main>section.wh+section.wh>.wrap{border-top:1px solid #DADADA;padding-top:64px}
.v2p main>section.bk:not(.hero)+section.bk>.wrap{border-top:1px solid var(--line-d);padding-top:64px}
@media(min-width:840px){.v2p main>section.wh+section.wh>.wrap,.v2p main>section.bk:not(.hero)+section.bk>.wrap{padding-top:96px}}
.v2p section.wh{background:var(--wh)}
.v2p main>section.bk:not(.hero){background:var(--bk)}

/* ---------- type ---------- */
.v2p h2{margin-bottom:24px}
@media(min-width:840px){.v2p h2{margin-bottom:32px}}
.v2p h3{font-size:18px;line-height:1.5;margin-bottom:8px}
.v2p p.copy{color:#C9C9C9;max-width:44em;margin-bottom:16px;line-height:1.7}
.v2p .wh p.copy{color:#333}
.v2p p.copy.small{font-size:14px;line-height:22px}
.v2p b{color:inherit}
.v2p .wh h2,.v2p .wh h3{color:#0A0A0A}

/* review markers (〔待核〕〔素材〕): small dashed chips, same as v2 .tbd */
.v2p .mk,.v2p .ann{display:inline-block;font:400 12px/20px inherit;font-family:inherit;letter-spacing:0;background:none;border:1px dashed currentColor;
  color:#A7A7A7;padding:0 6px;border-radius:2px;margin:4px 4px 4px 0;vertical-align:middle}
.v2p .wh .mk,.v2p .wh .ann{color:#666}

/* ---------- breadcrumb (header nav rules used to hide/realign it) ---------- */
.v2p nav.crumb{display:block!important;flex:none;font-size:14px;margin-bottom:16px}
.v2p .crumb ol{display:flex;flex-wrap:wrap;align-items:center;margin:0}
.v2p .crumb li{display:flex;align-items:center;color:#A7A7A7}
.v2p .crumb a{display:inline-flex;align-items:center;min-height:48px;padding:0;color:#C9C9C9;text-decoration:underline;text-decoration-color:#555;text-underline-offset:4px}
.v2p .crumb a::after{content:none}
.v2p .wh .crumb li{color:#555}.v2p .wh .crumb a{color:#333;text-decoration-color:#A7A7A7}

/* ---------- inner-page hero: copy left, cut-out right bleeding off the edge ---------- */
.v2p .lp-hero{display:block;min-height:0;padding:16px 0 64px!important}
.v2p .lp-hero>.glow{width:720px;height:520px;right:-260px;top:10%;bottom:auto}
.v2p .lp-hero .grid{display:grid;gap:32px;align-items:center}
.v2p .lp-hero h1{font-size:30px;line-height:1.25;margin-bottom:16px}
.v2p .lp-hero p.copy{color:#C9C9C9}
.v2p .lp-hero .cta-row{margin-top:24px}
.v2p .lp-fig{position:relative;margin:0 calc(var(--side) * -1) 0 0}
.lp-fig .glow{width:110%;height:70%;left:0;top:20%}
.lp-fig img{position:relative;z-index:1;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 28px 36px rgba(0,0,0,.65))}
.lp-fig .chip-temp{left:auto;right:calc(var(--side) + 8px)}
.lp-nums{display:grid;gap:0;border-top:1px solid var(--line-d)}
.lp-nums>div{padding:24px 0;border-bottom:1px solid var(--line-d)}
@media(min-width:840px){
  .v2p .lp-hero{padding:32px 0 96px!important}
  .v2p .lp-hero .grid.g2{grid-template-columns:6fr 6fr;gap:48px}
  .v2p .lp-hero .grid.g1{grid-template-columns:minmax(0,820px)}
  .v2p .lp-hero h1{font-size:44px;line-height:1.18}
  .v2p .lp-fig{margin:0 calc((100vw - min(1200px,100vw - 96px)) / -2) 0 0}
  .v2p .lp-fig img{max-height:520px;width:auto;max-width:100%;margin-left:auto}
  .lp-fig .chip-temp{right:24px;top:8px}
  .lp-nums>div{padding:32px 0}
}
@media(min-width:1200px){.v2p .lp-hero h1{font-size:48px}}
/* the old hero laser rule under the header is replaced by the v2 .laser on the hero foot */
.v2p section.hero::after,.v2p header::after{animation:none}

/* ---------- grids & cards ---------- */
.v2p .grid{gap:32px}
@media(min-width:840px){
  .v2p .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v2p .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2p .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.v2p .card{background:none;border:0;border-top:1px solid #DADADA;border-radius:0;padding:24px 0 0;overflow:visible}
.v2p .bk .card{border-top-color:var(--line-d)}
.v2p .card .ph{margin:0 0 16px}
.v2p .card h3 a{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px}
.v2p .bk .card h3 a{text-decoration-color:var(--or)}

/* placeholders that remain (案例相、客評): a quiet grid panel, not a crossed-out wireframe box */
.v2p .ph{position:relative;background:#141414;border:1px dashed #333;border-radius:4px;color:#8A8A8A;min-height:160px;
  background-image:linear-gradient(#1F1F1F 1px,transparent 1px),linear-gradient(90deg,#1F1F1F 1px,transparent 1px);background-size:40px 40px;background-position:center}
.v2p .ph span{background:none;padding:0}
.v2p .wh .ph{background-color:#F1F1F1;border-color:#C9C9C9;color:#666;
  background-image:linear-gradient(#E4E4E4 1px,transparent 1px),linear-gradient(90deg,#E4E4E4 1px,transparent 1px)}
.v2p .lines i{background:#2A2A2A}.v2p .wh .lines i{background:#E4E4E4}

/* photos in body sections (fleet, storage, logistics) */
.v2p .fig{margin:0}
.v2p .fig img{width:100%;height:auto;border-radius:4px}
.v2p .grid .fig img{aspect-ratio:4/3;object-fit:cover}
.lp-cover{margin:24px 0 32px!important}
.lp-cover img{aspect-ratio:16/9;object-fit:cover}

/* ---------- steps: big numbers like the home 4 步 ---------- */
.v2p .steps{counter-reset:s;border-top:1px solid #DADADA;gap:0}
.v2p .bk .steps{border-top-color:var(--line-d)}
.v2p .steps .step{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:baseline;padding:24px 0;border-bottom:1px solid #DADADA}
.v2p .bk .steps .step{border-bottom-color:var(--line-d)}
.v2p .steps .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);width:auto;height:auto;border:0;border-radius:0;
  display:block;font-size:36px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--red)}
.v2p .bk .steps .step::before{color:var(--or)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .v2p .bk .steps .step::before{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.v2p .steps .step p.copy{margin:0}
.v2p .steps .step h3{margin:0 0 4px}
@media(min-width:840px){
  .v2p .grid.steps{border-bottom:1px solid #DADADA}
  .v2p .bk .grid.steps{border-bottom-color:var(--line-d)}
  .v2p .grid.g3.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v2p .grid.g4.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .v2p .steps .step{grid-template-columns:1fr;align-content:start;padding:32px 24px 40px;border-bottom:0;border-left:1px solid #DADADA}
  .v2p .bk .steps .step{border-left-color:var(--line-d)}
  .v2p .steps .step:first-child{border-left:0;padding-left:0}
  .v2p .steps .step::before{font-size:56px;margin-bottom:16px}
}

/* ---------- tables → v2 fee list look ---------- */
.v2p table{width:100%;border-collapse:collapse;background:none;font-size:15px;line-height:24px;font-variant-numeric:tabular-nums}
.v2p th,.v2p td{border:0;border-bottom:1px solid #DADADA;padding:14px 16px 14px 0;text-align:left;vertical-align:top;background:none}
.v2p th{font-size:13px;line-height:20px;font-weight:700;letter-spacing:.08em;color:#555;border-bottom:1px solid #0A0A0A;padding-top:0}
.v2p tr>td:first-child{font-weight:600;color:#0A0A0A}
.v2p td.money{color:var(--red);font-weight:700}
.v2p .bk th{color:#A7A7A7;border-bottom-color:#F9F9F9}
.v2p .bk th,.v2p .bk td{border-bottom-color:var(--line-d)}
.v2p .bk tr>td:first-child{color:#F9F9F9}
.v2p .bk td.money{color:var(--or)}
@media(max-width:599.98px){
  .v2p table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px}
  .v2p th,.v2p td{min-width:120px}
}

/* ---------- chips, fields, panels, calendar ---------- */
.v2p .chip{background:none;border:1px solid var(--ctl);color:var(--fg);border-radius:999px;min-height:48px;padding:0 20px;font-size:15px;font-weight:500;cursor:pointer}
.v2p .chip.on,.v2p .chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#000;font-weight:700;box-shadow:none}
.v2p .wh .chip.on,.v2p .wh .chip[aria-pressed="true"]{background:#0A0A0A;color:#F9F9F9}
.v2p .panel{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:24px}
@media(min-width:840px){.v2p .panel{padding:40px}}
.v2p .field label{color:var(--fg);font-size:14px;font-weight:700}
.v2p .input,.v2p input.input,.v2p textarea.input,.v2p select.input{background:var(--bg);color:var(--fg);border:1px solid var(--ctl);border-radius:8px;min-height:52px;font-size:16px}
.v2p .input:focus{border-color:var(--acc);outline:2px solid var(--acc);outline-offset:0}
.v2p .bk .input{background:#0A0A0A}
.v2p .cal button{border-color:var(--line);font-size:14px}
.v2p .slot{border-radius:999px}
.v2p .estate{border-radius:999px}

/* ---------- accordions on inner pages (markup: summary text + <span>＋</span>) ---------- */
.v2p .acc{border-bottom:1px solid #DADADA}
.v2p details.acc:first-of-type{border-top:1px solid #DADADA}
.v2p .acc summary{justify-content:space-between}
.v2p .acc summary>span{margin-left:auto;color:var(--red);font-size:24px;font-weight:400;line-height:1}
.v2p .bk .acc{border-color:var(--line-d)}.v2p .bk .acc summary>span{color:var(--or)}
.v2p .bk .acc .a{color:#C9C9C9}
.v2p .acc .a a{display:inline-flex;align-items:center;min-height:48px;margin-left:8px;color:var(--red);font-weight:700}

/* ---------- lists ---------- */
.v2p ul.check{list-style:none;margin:16px 0}
.v2p ul.check li{display:flex;gap:12px;align-items:baseline;padding:8px 0}
.v2p ul.check li::before{content:"";width:12px;height:1px;background:var(--or);flex:none;transform:translateY(-4px)}
.v2p .wh ul.check li::before{background:var(--red)}
.v2p .toc{border-top:1px solid #DADADA;border-bottom:1px solid #DADADA;padding:16px 0;line-height:2}

/* ---------- pricing page: banner + band ---------- */
.v2p .price-banner{display:flex;align-items:center;justify-content:center;min-height:48px;background:var(--grad);color:#000;font-weight:700;text-decoration:none}
.v2p .band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.v2p .band-text{font-size:24px;line-height:1.3;font-weight:700;margin:0;color:#F9F9F9;word-break:keep-all}
@media(min-width:840px){.v2p .band-text{font-size:36px}}

/* bottom banner on inner pages (black section with H2 + CTA row) */
.v2p main>section.bk:last-child h2{font-size:28px}
@media(min-width:840px){.v2p main>section.bk:last-child h2{font-size:40px}}

/* mobile: cut-out above-the-fold stays compact */
@media(max-width:839.98px){.v2p .lp-fig img{max-height:300px;width:auto;margin:0 0 0 auto}}
/* truck-side photo is cropped at its right edge: fade that edge so it reads as a bleed, not a cut */
.v2p .lp-fig img[src*="truck-side"]{-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 98%);mask-image:linear-gradient(90deg,#000 72%,transparent 98%)}
/* inline prototype draws boxed accordions; v2 uses hairline rows */
.v2p .acc{border:0;border-bottom:1px solid #DADADA;border-radius:0;background:none;padding:0;margin:0}
.v2p .bk .acc{border-bottom-color:var(--line-d)}
.v2p .acc summary{padding:8px 0;min-height:64px;font-size:17px}
/* article pages (tips, privacy): reading sizes */
.v2p main>section.wh>.wrap[style] h1{font-size:32px;line-height:1.25}
.v2p main>section.wh>.wrap[style] h2{font-size:24px;line-height:1.35;margin:48px 0 8px}
@media(min-width:840px){.v2p main>section.wh>.wrap[style] h1{font-size:44px}.v2p main>section.wh>.wrap[style] h2{font-size:28px}}
.v2p .toc{border:0;border-radius:0;background:none;border-top:1px solid #DADADA;border-bottom:1px solid #DADADA;padding:16px 0}
.v2p .toc b{display:block;font-size:13px;letter-spacing:.08em;color:#555;margin-bottom:8px}
/* hero cut-outs are never cropped (the body-grid photo rule sets 4:3 cover) */
.v2p .grid .lp-fig img{aspect-ratio:auto;object-fit:contain}

/* HK Island promo hero: larger right-aligned graphic (scoped) */
.v2p .lp-hero-promo .grid.g2{align-items:center}
.v2p .lp-fig-promo{justify-self:end;display:flex;justify-content:flex-end;margin:0}
.v2p .lp-fig-promo img{width:auto;max-width:100%;height:auto;object-fit:contain;margin-left:auto;filter:none;max-height:min(80vh,420px)}
@media(min-width:840px){
  .v2p .lp-hero-promo .grid.g2{grid-template-columns:4.5fr 7.5fr;gap:32px}
  .v2p .lp-fig-promo{margin:0 calc((100vw - min(1200px,100vw - 96px)) / -2) 0 0}
  .v2p .lp-fig-promo img{max-height:min(80vh,720px);width:auto;max-width:100%;margin-left:auto}
}
@media(max-width:839.98px){
  .v2p .lp-fig-promo img{max-height:min(70vh,400px);width:auto;margin:0 0 0 auto}
}
/* ---------- area pages: 「衝出畫面」 hero truck (client artwork, transparent PNG) ----------
   Right-aligned, bleeds off the right edge and out through the bottom of the hero into the next section. */
.v2p .lp-hero:has(.area-fig){overflow-x:clip;overflow-y:visible;z-index:3}
.v2p .lp-hero:has(.area-fig)+section{position:relative;z-index:1}
.v2p .lp-hero .area-fig{position:relative;justify-self:end;width:min(96vw,440px);margin:0 calc(var(--side) * -1 - 10vw) -120px auto;pointer-events:none;z-index:2}
.v2p .lp-hero .area-fig img{width:100%;max-height:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.v2p .lp-hero .area-fig .glow{display:none}
@media(min-width:840px){
  .v2p .lp-hero:has(.area-fig){min-height:min(680px,calc(100vh - 64px));display:flex;align-items:center}
  .v2p .lp-hero:has(.area-fig)>.wrap{width:calc(100% - 96px)}
  .v2p .lp-hero:has(.area-fig) .grid.g2{grid-template-columns:minmax(0,560px) 1fr}
  .v2p .lp-hero .area-fig{position:absolute;right:-5vw;top:8px;width:min(46vw,640px);margin:0}
  .v2p .lp-hero .area-fig img{max-height:none;width:100%}
}
/* speed: the truck charges in from the right with a motion blur, then a streak flashes past */
@media(prefers-reduced-motion:no-preference){
  .v2p .area-fig img{animation:charge-in .75s cubic-bezier(.16,.84,.24,1) .1s both}
  .v2p .area-fig::after{content:"";position:absolute;z-index:3;left:-30%;right:10%;top:55%;height:28%;pointer-events:none;opacity:0;
    background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(255,120,40,.9) 10px 12px,transparent 12px 26px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,transparent);
    animation:streak .6s ease-out .55s both}
}
@keyframes charge-in{0%{transform:translateX(55%) skewX(-8deg);filter:blur(6px) drop-shadow(0 30px 40px rgba(0,0,0,.55));opacity:0}
  60%{transform:translateX(-3%) skewX(2deg);filter:blur(0) drop-shadow(0 30px 40px rgba(0,0,0,.55));opacity:1}
  100%{transform:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}}
@keyframes streak{0%{opacity:0;transform:translateX(40%)}30%{opacity:.9}100%{opacity:0;transform:translateX(-60%)}}
/* area hero: bleed past the viewport edge; the hero laser sits under the truck */
.v2p .lp-hero:has(.area-fig)>.laser{z-index:1}
.v2p .lp-hero:has(.area-fig)>.wrap{z-index:2}
@media(min-width:840px){
  .v2p .lp-hero .area-fig{right:calc((min(1200px,100vw - 96px) - 100vw) / 2 - 7vw);width:min(44vw,660px)}
}
@media(min-width:840px) and (max-width:1199.98px){
  .v2p .lp-hero .area-fig{width:min(48vw,520px);top:auto;bottom:-140px}
  .v2p .lp-hero:has(.area-fig) .grid.g2{grid-template-columns:minmax(0,52%) 1fr}
}
/* area hero: lighter bleed so the district name stays readable; the road swooshes dissolve into the next section instead of ending on a hard edge */
@media(min-width:1200px){.v2p .lp-hero .area-fig{right:calc((min(1200px,100vw - 96px) - 100vw) / 2 - 2.5vw);width:min(42vw,640px)}}
.v2p .lp-hero .area-fig img{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 97%),linear-gradient(90deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 74%,transparent 97%),linear-gradient(90deg,transparent 0,#000 14%);mask-composite:intersect}
/* area hero: right edge sits on the container margin (not bled past the viewport) — P 2026-10-23 */
@media(min-width:840px){.v2p .lp-hero .area-fig{right:calc((min(1200px,100vw - 96px) - 100vw) / 2)}}
@media(min-width:840px) and (max-width:1199.98px){.v2p .lp-hero .area-fig{width:min(42vw,480px)}}
@media(min-width:1200px){.v2p .lp-hero .area-fig{right:calc((min(1200px,100vw - 96px) - 100vw) / 2);width:min(42vw,620px)}}
/* now that the right edge sits inside the page, fade it too so the road swooshes don't end on a straight line */
.v2p .lp-hero .area-fig img{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 97%),linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,transparent 97%),linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%)}