/* ============================================================
   世豪通運 調度台 (the dispatch desk)
   Palette drawn from the vehicle livery. One accent: livery green.
   Corner language: all sharp, hairline rules.
   ============================================================ */
:root{
  --ground:#EEF1F3; --surface:#FFFFFF;
  --ink:#14181B; --ink-mid:#3A444B; --ink-muted:#5A646B;
  --brand:#1B4F9C; --brand-deep:#123A75;
  --accent:#00A03E; --accent-dark:#008A35;
  --rule:#D3DADE; --rule-soft:#E4E9EC;
  --sans:"Geist","Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(1.25rem,5vw,5.5rem);
  --sec:clamp(4.5rem,9vw,9rem);
  --e:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.7;
  font-size:clamp(.95rem,.9rem+.2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.022em;font-weight:900}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:100}
.skip:focus{left:0}

/* ---------- shared type ---------- */
.eyebrow{font:500 .7rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand);margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::after{content:"";height:1px;width:clamp(28px,5vw,60px);background:currentColor;opacity:.45}
.eyebrow--on-dark{color:#8FB6E8}
.lede{color:var(--ink-muted);max-width:52ch;margin-top:1rem}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:1.5rem;
  height:66px;padding:0 var(--pad);
  background:rgba(238,241,243,.90);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;will-change:background}
.nav.is-stuck{border-bottom-color:var(--rule);background:var(--ground)}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.01em;margin-right:auto}
.nav__links{display:flex;gap:1.75rem;font-size:.875rem;color:var(--ink-mid)}
.nav__links a{position:relative;padding:.2rem 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:var(--accent);transition:width .32s var(--e)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:.8125rem;font-weight:700;padding:.55rem 1.1rem;
  color:#fff;background:var(--ink);transition:background .22s}
.nav__cta:hover{background:var(--accent)}
.nav__cta:active{transform:translateY(1px)}

/* ---------- 1. HERO : cutout parallax ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding:6rem var(--pad) clamp(2.5rem,6vw,5rem);overflow:hidden;isolation:isolate}
.hero__stage{position:absolute;inset:0;z-index:-1}
.hero__plate{position:absolute;inset:-6% -4%;width:108%;height:112%;object-fit:cover;
  object-position:50% 62%;will-change:transform}
.hero__haze{position:absolute;inset:0;will-change:transform;
  background:
    radial-gradient(78% 64% at 12% 88%,rgba(238,241,243,.97) 0%,rgba(238,241,243,.86) 38%,rgba(238,241,243,.42) 66%,rgba(238,241,243,0) 84%),
    linear-gradient(180deg,rgba(238,241,243,.62) 0%,rgba(238,241,243,0) 30%),
    linear-gradient(0deg,rgba(238,241,243,.80) 0%,rgba(238,241,243,.16) 26%,rgba(238,241,243,0) 46%)}
.hero__bus{position:absolute;right:-8%;bottom:4%;width:min(74vw,1120px);height:auto;
  will-change:transform}
.hero__copy{position:relative;max-width:min(46rem,100%)}
.hero h1{font-size:clamp(3rem,8.4vw,6.6rem);letter-spacing:-.045em;color:var(--ink)}
.hero__copy p{margin-top:1.4rem;max-width:26em;color:var(--ink-mid);font-weight:500;
  font-size:clamp(1rem,.95rem+.3vw,1.15rem);text-wrap:balance}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero__seat{position:absolute;right:var(--pad);top:calc(66px + clamp(1.5rem,4vw,3rem));z-index:1;
  margin:0;font:500 clamp(3.4rem,7vw,6rem)/1 var(--mono);color:var(--brand);opacity:.9;
  display:flex;align-items:baseline;gap:.5rem}
.hero__seat span{font:500 .72rem/1 var(--mono);letter-spacing:.2em;color:var(--ink-muted)}

/* CTA garment 1 : solid block */
.cta-solid{display:inline-flex;align-items:center;gap:.6rem;
  background:var(--accent);color:#fff;font-weight:700;padding:.95rem 1.6rem;
  transition:background .2s,transform .12s}
.cta-solid__arw{display:inline-block;transition:transform .3s var(--e)}
.cta-solid:hover{background:#008A35}
.cta-solid:hover .cta-solid__arw{transform:translateX(6px)}
.cta-solid:active{transform:translateY(1px)}
/* CTA garment 2 : hairline wire, fills from left */
.cta-wire{position:relative;display:inline-flex;align-items:center;
  border:1px solid var(--ink);color:var(--ink);font-weight:700;padding:.95rem 1.6rem;
  background:rgba(238,241,243,.93);
  overflow:hidden;transition:color .26s,border-color .26s}
.cta-wire__fill{position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e)}
.cta-wire__txt{position:relative}
.cta-wire:hover{color:#fff;border-color:var(--accent)}
.cta-wire:hover .cta-wire__fill{transform:scaleX(1)}
.cta-wire:active{transform:translateY(1px)}
/* CTA garment 7 : toll free line, text weight only */
.cta-free{display:inline-flex;flex-direction:column;justify-content:center;gap:.15rem;
  padding:.9rem .2rem .9rem 1.2rem;border-left:1px solid var(--rule);color:var(--ink-mid)}
.cta-free span{font:500 .62rem/1 var(--mono);letter-spacing:.2em;color:var(--ink-muted)}
.cta-free b{font:500 1.05rem/1 var(--mono);color:var(--ink);letter-spacing:-.01em;
  transition:color .22s}
.cta-free:hover b{color:var(--accent)}

/* ---------- 2. MARKS : deliberately uneven, not a 4 up grid ---------- */
.marks{padding:var(--sec) var(--pad);border-top:1px solid var(--rule);background:var(--surface);
  display:grid;grid-template-columns:1.35fr .65fr;
  column-gap:clamp(2rem,6vw,5.5rem);row-gap:clamp(1.6rem,2.6vw,2.4rem);align-items:start}
.marks__big{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.marks__big b{font:500 1em/1 var(--mono);color:var(--brand);letter-spacing:-.04em}
.marks__body{margin-top:1.3rem;color:var(--ink-mid);max-width:46ch;line-height:1.95}
.marks__facts{border-top:1px solid var(--ink);padding-top:.2rem}
.marks__facts li{display:flex;align-items:baseline;gap:.55rem;padding:.85rem 0;
  border-bottom:1px solid var(--rule-soft)}
.marks__facts span{font:500 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-muted);
  min-width:5.2em}
.marks__facts b{font:500 1.6rem/1 var(--mono);color:var(--ink);letter-spacing:-.02em;margin-left:auto}
.marks__facts i{font-style:normal;font-size:.8125rem;color:var(--ink-muted);min-width:1.4em;text-align:right}
.marks__note{grid-column:1/-1;margin:0;padding-top:1.4rem;
  border-top:1px solid var(--rule-soft);
  font-size:.78rem;color:var(--ink-muted);line-height:2;max-width:88ch}

/* ---------- 3. FLEET rail ---------- */
.fleet{padding:var(--sec) 0;background:var(--ground)}
.fleet__head{padding:0 var(--pad);max-width:60rem}
.fleet h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.rail{display:flex;gap:1px;background:var(--rule);margin-top:clamp(2.2rem,5vw,3.4rem);
  overflow-x:auto;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;scroll-padding-left:var(--pad);
  padding:1px var(--pad);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--brand)}
.veh{flex:0 0 min(62vw,286px);scroll-snap-align:start;background:var(--surface);
  display:flex;flex-direction:column}
.veh img{aspect-ratio:16/9;object-fit:cover;width:100%;background:var(--rule-soft)}
.veh__body{padding:1.1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.veh h3{font-size:1.1rem}
.veh__en{font:500 .6rem/1 var(--mono);letter-spacing:.13em;color:var(--ink-muted);margin-top:.42rem}
.veh--acc .veh__en{color:var(--accent)}
.spec{margin:1rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-soft);border-top:1px solid var(--rule-soft)}
.spec>div{background:var(--surface);padding:.55rem .1rem .1rem}
.spec dt{font:500 .58rem/1 var(--mono);letter-spacing:.12em;color:var(--ink-muted)}
.spec dd{margin:.34rem 0 .55rem;font:500 .92rem/1.15 var(--mono);color:var(--ink)}
/* CTA garment 3 : inline ink underline */
.cta-ink{margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.82rem;color:var(--brand);position:relative;align-self:flex-start}
.cta-ink i{font-style:normal;transition:transform .3s var(--e)}
.cta-ink::after{content:"";position:absolute;left:0;bottom:.32rem;height:1.5px;width:0;
  background:var(--brand);transition:width .34s var(--e)}
.cta-ink:hover::after{width:calc(100% - 1.1rem)}
.cta-ink:hover i{transform:translateX(4px)}
.rail__hint{padding:1rem var(--pad) 0;font:500 .68rem/1 var(--mono);letter-spacing:.16em;color:var(--ink-muted)}

/* ---------- 4. SAFETY ---------- */
.safety{position:relative;padding:var(--sec) var(--pad);color:#EAF0F7;
  background:var(--brand-deep) url("/assets/plate-safety.webp") center/cover no-repeat;isolation:isolate}
.safety::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,58,117,.86),rgba(12,40,82,.94))}
.safety__inner{max-width:78rem;margin:0 auto}
.safety h2{font-size:clamp(1.9rem,4.4vw,3.2rem);color:#fff;max-width:20ch}
.safety__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  margin-top:clamp(2.4rem,5vw,3.6rem);background:rgba(255,255,255,.14)}
.sf{grid-column:span 2;background:rgba(9,32,66,.55);padding:clamp(1.6rem,3vw,2.2rem)}
.sf--wide{grid-column:span 3}
.sf img{width:52px;height:52px;filter:brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(560%) hue-rotate(74deg) brightness(96%) contrast(92%)}
.sf h3{margin-top:1.1rem;font-size:1.2rem;color:#fff}
.sf p{margin-top:.75rem;color:#B9CBE2;font-size:.9375rem;line-height:1.8}
.safety__foot{margin-top:2.2rem;font:500 .8125rem/1.8 var(--mono);color:#8FB6E8;max-width:70ch}

/* ---------- 5. ACCESS ---------- */
.access{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  background:var(--surface);border-top:1px solid var(--rule)}
.access__media{position:relative;min-height:clamp(300px,44vw,620px);overflow:hidden}
.access__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.access__copy{padding:var(--sec) var(--pad);display:flex;flex-direction:column;justify-content:center;
  background:var(--ground) url("/assets/plate-access.webp") center/cover no-repeat}
.access h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.access__copy>p{margin-top:1.2rem;color:var(--ink-mid);max-width:44ch}
.access__list{margin-top:1.9rem;display:grid;gap:1px;background:var(--rule)}
.access__list li{background:var(--ground);display:flex;align-items:center;gap:.85rem;
  padding:.9rem .2rem;font-size:.9375rem}
.access__list img{width:30px;height:30px;flex:none}
/* CTA garment 4 : framed block */
.cta-frame{margin-top:2.1rem;align-self:flex-start;display:inline-block;
  border:1.5px solid var(--ink);padding:.9rem 1.5rem;font-weight:700;font-size:.9375rem;
  transition:border-color .24s,background .24s,color .24s}
.cta-frame:hover{border-color:var(--accent);background:var(--accent);color:#fff}
.cta-frame:active{transform:translateY(1px)}

/* ---------- 6. INQUIRY ---------- */
.inquiry{padding:var(--sec) var(--pad);background:var(--ground);border-top:1px solid var(--rule)}
.inquiry__inner{max-width:74rem;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
.inquiry h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.inquiry__lead>p{margin-top:1.1rem;color:var(--ink-muted);max-width:34ch}
.inquiry__alt{margin-top:2rem;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.alt{background:var(--ground);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.3rem;
  font:500 1.15rem/1 var(--mono);transition:background .2s,color .2s}
.alt span{font:500 .64rem/1 var(--mono);letter-spacing:.2em;color:var(--ink-muted)}
.alt:hover{background:var(--ink);color:#fff}
.alt:hover span{color:#9FB0BC}
.form{background:var(--surface);border:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.4rem)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fld{margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.fld label{font:500 .7rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-mid)}
.fld input,.fld select,.fld textarea{font-family:var(--sans);font-size:.9375rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--rule);padding:.72rem .85rem;width:100%;
  border-radius:0;transition:border-color .2s,background .2s}
.fld textarea{resize:vertical;min-height:88px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.fld input::placeholder{color:#94A0A8}
.fld--hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.fld.is-bad input,.fld.is-bad select{border-color:#C0392B}
.fld .err{font:500 .7rem/1 var(--mono);color:#C0392B}
/* CTA garment 5 : full-width bar */
.cta-bar{width:100%;border:0;border-radius:0;cursor:pointer;
  background:var(--accent);color:#fff;font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:1.05rem 1rem;transition:background .2s,transform .12s}
.cta-bar:hover:not(:disabled){background:#008A35}
.cta-bar:active:not(:disabled){transform:translateY(1px)}
.cta-bar:disabled{background:#9FB0BC;cursor:progress}
.form__msg{margin-top:1rem;font-size:.875rem;min-height:1.2rem}
.form__msg.ok{color:var(--accent);font-weight:700}
.form__msg.bad{color:#C0392B}

/* ---------- 7. FOOT : oversized numeral ---------- */
.foot{background:var(--ink);color:#C6CFD6;padding:var(--sec) var(--pad) 2.5rem}
/* CTA garment 6 : the oversized numeral */
.foot__tel{display:block;font:500 clamp(2.4rem,10.4vw,8.6rem)/1 var(--mono);
  letter-spacing:-.035em;color:#fff;transition:color .3s;white-space:nowrap}
.foot__tel:hover{color:var(--accent)}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;
  margin-top:clamp(2.4rem,5vw,3.8rem);padding-top:2.4rem;border-top:1px solid #2A3238}
.foot h4{font-size:.9375rem;color:#fff;font-weight:700}
.foot__cols p{margin-top:.6rem;font-size:.875rem;line-height:1.8}
.foot__cols a:hover{color:var(--accent)}
.foot__end{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #2A3238;
  display:flex;align-items:center;gap:.6rem;font:500 .75rem/1 var(--mono);color:#7C8A94}

/* ---------- mobile dock ---------- */
.dock{display:none;position:fixed;right:1rem;bottom:1rem;z-index:60;
  background:var(--accent);color:#fff;font-weight:700;font-size:.875rem;
  padding:.85rem 1.3rem;box-shadow:0 8px 22px rgba(0,110,45,.34)}

/* ---------- reveal (screenshot safe : transform only) ---------- */
.hero__plate,.hero__haze,.hero__bus{backface-visibility:hidden}
/* reveals: transform only, never opacity to zero */
.rv{transform:translateY(20px);transition:transform .8s var(--e)}
.rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.rv{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .inquiry__inner{grid-template-columns:1fr}
  .access{grid-template-columns:1fr}
  .access__media{min-height:300px}
  .safety__grid{grid-template-columns:repeat(2,1fr)}
  .sf,.sf--wide{grid-column:span 1}
}
@media (max-width:760px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .hero{align-items:flex-end;padding-bottom:7.5rem}
  .hero__haze{background:
    linear-gradient(180deg,rgba(238,241,243,.5) 0%,rgba(238,241,243,0) 22%),
    linear-gradient(0deg,rgba(238,241,243,.97) 0%,rgba(238,241,243,.9) 30%,rgba(238,241,243,.34) 52%,rgba(238,241,243,0) 70%)}
  .hero h1{font-size:clamp(2.6rem,12vw,4rem)}
  .hero__bus{right:-24%;bottom:-2%;width:128vw;opacity:.95}
  .hero__seat{font-size:2.4rem;top:calc(66px + .5rem);opacity:.75}
  .hero__seat span{display:none}
  .hero__acts{gap:.6rem}
  .cta-solid,.cta-wire{flex:1;justify-content:center;padding:.9rem 1rem}
  .marks{grid-template-columns:1fr;gap:2rem}
  /* hero keeps one primary and one secondary on mobile; the toll free line
     is already carried by the fixed dock and the inquiry panel */
  .cta-free{display:none}
  .safety__grid{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr;gap:0}
  .foot__cols{grid-template-columns:1fr;gap:1.8rem}
  .dock{display:block}
  .foot{padding-bottom:5.5rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{transform:none}
  .hero__plate,.hero__haze,.hero__bus{transform:none!important}
}