/* ═══════════════════════════════════════════════
   WayGo Thailand — Modern Bright
   ═══════════════════════════════════════════════ */

:root{
  --bg:#ffffff;
  --bg-soft:#f4f8fe;
  --white:#ffffff;

  --ink:#0f172a;
  --ink-2:#4a5768;
  --muted:#8f9bad;

  --line:#e6ecf5;
  --line-2:#f0f4fa;

  --brand:#1668e3;
  --brand-dark:#0d4fb5;
  --brand-soft:#e9f1fe;
  --star:#f5a524;
  --green:#06c755;

  --r:14px;
  --r-lg:24px;
  --r-pill:999px;

  --shadow:0 24px 60px -24px rgba(15,40,90,.22);
  --shadow-sm:0 10px 28px -14px rgba(15,40,90,.18);
  --shadow-brand:0 16px 34px -14px rgba(22,104,227,.55);

  --sans:"Kanit",-apple-system,Segoe UI,Arial,sans-serif;
  --display:"Kanit",-apple-system,Segoe UI,Arial,sans-serif;

  --pad:clamp(68px,8.5vw,124px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.35}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.container{width:min(1200px,calc(100% - 48px));margin-inline:auto}

/* ── Language toggle ─────────────────────────── */
[data-lang="en"] .thai{display:none}
[data-lang="th"] .english{display:none}
[data-lang="th"] .cta h2{font-size:clamp(28px,3.6vw,46px)}

/* ── Screen-reader only ──────────────────────── */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Type helpers ────────────────────────────── */
.display{font-family:var(--display);font-weight:600;line-height:1.28;letter-spacing:-.015em;color:var(--ink)}
.display em{font-style:normal;color:var(--brand)}

/* Thai has no spaces between words, so the browser guesses where to
   break. Keep phrases that must never be split inside .nb, and let
   text-wrap:balance even out the remaining lines. */
.nb{white-space:nowrap}
h1,h2,.display{text-wrap:balance}
.sec-lead,.hero-lead,.page-lead{text-wrap:pretty}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--brand-soft);color:var(--brand-dark);
  border-radius:var(--r-pill);padding:7px 16px;
  font-size:13px;font-weight:600;margin:0 0 22px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}

.lead{font-size:17px;line-height:1.8;color:var(--ink-2);max-width:56ch}

/* ── Buttons & links ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 26px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn.lg{min-height:58px;padding:0 32px;font-size:16px}
.btn-solid{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn-solid:hover{background:var(--brand-dark);transform:translateY(-2px)}
.btn-line{border-color:var(--line);background:var(--white);color:var(--ink)}
.btn-line:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--brand-dark)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(0,0,0,.45)}
.btn-clear{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-clear:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn:active{transform:translateY(0)}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;color:var(--brand);transition:color .2s ease;
}
.link-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.link-arrow:hover{color:var(--brand-dark)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ── Header ──────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(15,23,42,.88);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.topbar.scrolled{background:var(--ink);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 10px 30px -22px rgba(0,0,0,.9)}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:22px;transition:height .3s ease}
.topbar.scrolled .nav{height:68px}

/* The logo badge is the whole brand — it already contains the wordmark,
   so no text sits beside it. The badge is dark navy on a dark header,
   hence the hairline ring to lift it off the background. */
.brand{display:flex;align-items:center;line-height:1;flex:none}
.brand-logo{
  width:64px;height:64px;flex:none;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 10px 22px -10px rgba(0,0,0,.9);
  transition:width .3s ease,height .3s ease;
}
.topbar.scrolled .brand-logo{width:54px;height:54px}

.menu{display:flex;gap:2px}
.menu a{
  font-size:14.5px;font-weight:500;color:#c2cddd;
  padding:9px 13px;border-radius:var(--r-pill);
  transition:color .2s ease,background .2s ease;
}
.menu a:hover{color:#fff;background:rgba(255,255,255,.1)}

.nav-actions{display:flex;align-items:center;gap:12px}
.lang-switch{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  padding:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
}
/* sliding thumb — follows body[data-lang] */
.lang-switch::before{
  content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;right:50%;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,#2f83f2,var(--brand));
  box-shadow:0 6px 16px -8px rgba(22,104,227,.95),inset 0 1px 0 rgba(255,255,255,.25);
  transition:left .32s cubic-bezier(.4,1.3,.5,1),right .32s cubic-bezier(.4,1.3,.5,1);
}
[data-lang="th"] .lang-switch::before{left:50%;right:4px}
.lang-switch button{
  position:relative;z-index:1;
  border:0;background:none;padding:5px 13px;cursor:pointer;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;line-height:1.6;color:rgba(255,255,255,.62);
  transition:color .25s ease;
}
.lang-switch button:hover{color:#fff}
.lang-switch button.active{color:#fff;font-weight:600}

.nav-actions>.btn{min-height:44px;padding:0 20px;font-size:14.5px}

.burger{display:none;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.25);border-radius:var(--r);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease}
.burger span:first-child{top:17px}
.burger span:last-child{bottom:17px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ── Hero banner (full-bleed) ────────────────── */
.hero{
  position:relative;
  padding:80px 0 var(--pad);
  background:
    radial-gradient(900px 480px at 88% 8%,#dcebff 0%,rgba(220,235,255,0) 62%),
    radial-gradient(700px 420px at -6% 20%,#eaf3ff 0%,rgba(234,243,255,0) 60%),
    var(--bg);
}
.hero-banner{width:100%;background:#0a1526;line-height:0}
.hero-banner img{width:100%;height:auto}

/* Visible H1 + intro copy — the page's single top-level heading */
.hero-copy{max-width:760px;margin:clamp(30px,4vw,48px) auto 0;text-align:center}
.hero-copy h1{font-size:clamp(30px,4.2vw,52px);line-height:1.24;letter-spacing:-.015em}
.hero-copy h1 em{font-style:normal;color:var(--brand)}
.hero-copy .hero-lead{margin:16px auto 0;max-width:62ch;font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.hero-facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:22px;font-size:13.5px;
}
.hero-facts li{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;
  box-shadow:var(--shadow-sm);
}
.hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}

/* ── Booking card ────────────────────────────── */
.booking{
  margin-top:clamp(28px,3.5vw,44px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:26px 28px 28px;
}
.booking-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.booking-title{font-size:23px}
.booking-note{
  display:inline-flex;align-items:center;gap:8px;
  background:#eafaf1;color:#12855a;border-radius:var(--r-pill);
  padding:6px 14px;font-size:12.5px;font-weight:600;
}
.booking-note::before{content:"";width:7px;height:7px;border-radius:50%;background:#12855a;flex:none}

.booking-form{display:grid;grid-template-columns:1.3fr 1.3fr .85fr .75fr .75fr auto;align-items:end;gap:14px}
.field{min-width:0}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select{
  width:100%;height:50px;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--bg-soft);padding:0 14px;outline:none;font-size:15px;color:var(--ink);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238f9bad' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px;
}
.field input::placeholder{color:#a9b3c2}
.field input:focus,.field select:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(22,104,227,.1)}
.booking-form .btn{height:50px;min-height:50px}
.form-msg{margin-top:14px;font-size:14px;color:var(--brand-dark);min-height:20px}
.form-msg a{text-decoration:underline;font-weight:600}
.booking-form .btn .btn-ico{width:18px;height:18px;fill:currentColor}

/* ── Sections ────────────────────────────────── */
section{padding:var(--pad) 0}
.tint{background:var(--bg-soft)}

.sec-head{max-width:660px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-head.left{text-align:left;margin-inline:0}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--r-pill);
  padding:7px 16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;margin-bottom:18px;
}
.sec-head h2{font-size:clamp(31px,3.9vw,50px);margin-bottom:16px}
.sec-lead{color:var(--ink-2);font-size:16.5px;line-height:1.8}

/* ── Services ────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px 26px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d6e4f8}
.card .ico{
  width:52px;height:52px;padding:12px;border-radius:var(--r);
  background:var(--brand-soft);
  fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:20px;transition:transform .35s ease;
}
.card:hover .ico{transform:scale(1.06) rotate(-3deg)}
.card h3{font-size:20px;margin-bottom:10px}
.card p{font-size:14.5px;line-height:1.75;color:var(--ink-2)}

/* ── Fleet ───────────────────────────────────── */
/* Wide lineup shot above the three cards. The source is 3:2, so it is
   cropped to a letterbox with the focus pushed down to 68% — that keeps
   the vehicles and their reflections in frame and trims empty sky. */
.fleet-banner{
  margin:0 0 clamp(24px,3vw,38px);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  background:#0a1526;
}
.fleet-banner img{
  width:100%;height:100%;object-fit:cover;object-position:center 68%;
  aspect-ratio:2.3/1;
}
.fleet-banner figcaption{
  padding:15px 22px;background:#fff;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--ink-2);
}

@supports not (aspect-ratio:2.3/1){
  .fleet-banner img{height:auto;aspect-ratio:auto}
}

.fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vehicle{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.vehicle:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* Photo sits flush to the top of the card. The fixed 3:2 ratio reserves
   the space before the image loads, so nothing shifts (CLS). */
.vehicle-art{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;
  background:linear-gradient(180deg,#eef5ff 0%,#dfeaff 100%);
}
.vehicle-art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.vehicle:hover .vehicle-art img{transform:scale(1.06)}

@supports not (aspect-ratio:3/2){
  .vehicle-art{height:0;padding-bottom:66.6667%}
  .vehicle-art img{position:absolute;inset:0}
}

.vehicle-info{padding:24px 26px 28px}
.vehicle-info h3{font-size:22px}

/* Per-vehicle detail — h4 sits one level under the vehicle name (h3) */
.v-specs{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);display:grid;gap:12px}
.v-specs h4{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.v-specs p{margin-top:3px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}

/* ── Route pricing ───────────────────────────── */
.routes{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.routes-scroll{overflow-x:auto}
.routes table{width:100%;min-width:640px}
.routes th,.routes td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line-2)}
.routes thead th{
  background:var(--bg-soft);font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.routes th:not(:first-child),.routes td:not(:first-child){text-align:right;white-space:nowrap}
.routes tbody tr{transition:background .2s ease}
.routes tbody tr:hover{background:var(--bg-soft)}
.routes tbody tr:last-child td{border-bottom:0}
.routes thead th:first-child{padding-top:18px;padding-bottom:18px}
.veh{display:inline-flex;align-items:center;gap:9px;text-align:left}
.veh-ico{width:30px;height:16px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linejoin:round}
.veh > span{display:block;line-height:1.2}
.veh em{
  display:block;font-style:normal;text-transform:none;letter-spacing:0;
  font-size:11px;font-weight:500;color:var(--muted);margin-top:2px;
}

.route-name{display:block;font-weight:500;color:var(--ink);font-size:15px}
.route-name i{font-style:normal;color:var(--brand);font-weight:600;margin:0 4px}
.oneway{
  display:inline-block;margin-top:5px;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--bg-soft);color:var(--muted);font-size:11.5px;font-weight:500;line-height:1.6;
}
.routes td:not(:first-child){font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.routes-note{
  display:flex;align-items:flex-start;gap:10px;
  padding:16px 20px;background:var(--bg-soft);border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--ink-2);
}
.routes-note svg{width:18px;height:18px;margin-top:4px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Popular routes (dark band) ──────────────── */
.routes-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,#0f172a 0%,#10306b 48%,#0a1730 100%);
}
.routes-hero .glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.routes-hero .glow-a{width:520px;height:520px;top:-220px;right:-120px;background:rgba(22,104,227,.55)}
.routes-hero .glow-b{width:420px;height:420px;bottom:-200px;left:-140px;background:rgba(0,178,255,.28)}
.routes-hero .container{position:relative;z-index:2}

.rt-head h2{color:#fff}
.rt-head .display em{color:#5fb0ff}
.rt-head .sec-lead{color:#b9cae2}
.rt-badge{background:rgba(255,255,255,.12);color:#cfe3ff}

.rt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rt{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:22px 24px 20px;min-height:186px;
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease,box-shadow .35s ease;
}
.rt::before{
  content:"";position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,176,255,.9),transparent);
  opacity:.45;transition:opacity .35s ease;
}
.rt::after{
  content:"";position:absolute;top:-60px;right:-60px;width:170px;height:170px;border-radius:50%;
  background:rgba(95,176,255,.28);filter:blur(30px);opacity:0;transition:opacity .35s ease;
}
.rt:hover{
  transform:translateY(-6px);
  background:linear-gradient(180deg,rgba(95,176,255,.2),rgba(95,176,255,.07));
  border-color:rgba(95,176,255,.65);box-shadow:0 26px 54px -26px rgba(22,104,227,1);
}
.rt:hover::before{opacity:1}
.rt:hover::after{opacity:1}

.rt-top{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:20px;
}
.rt-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 9px;border-radius:var(--r-pill);
  background:rgba(95,176,255,.16);border:1px solid rgba(95,176,255,.3);
  font-size:12px;font-weight:500;color:#cfe6ff;
}
.rt-tag svg{width:15px;height:15px;flex:none;fill:none;stroke:#7dc0ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rt-time{font-size:12.5px;color:rgba(255,255,255,.55);white-space:nowrap}

.rt-path{position:relative;display:flex;align-items:center;gap:12px}
.rt-path b{font-size:19px;font-weight:600;color:#fff;white-space:nowrap}
.rt-line{
  position:relative;flex:1;height:1px;min-width:22px;
  background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(95,176,255,.9));
}

.rt-foot{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-top:auto;padding-top:20px;
}
.rt-go{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.rt-go svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rt:hover .rt-go{background:var(--brand);border-color:var(--brand);transform:translateX(3px)}
.rt-line::after{
  content:"";position:absolute;right:-1px;top:-3px;
  width:0;height:0;border-left:6px solid #5fb0ff;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
/* Travelling dot — runs on every card, not just the hovered one, so it
   also works on touch where :hover never fires.
   The dot is painted at the left edge of a full-width transparent box,
   which lets the whole thing move with transform alone. Animating `left`
   instead would force a layout pass on every frame, on every card. */
.rt-line::before{
  content:"";position:absolute;left:0;top:50%;
  width:100%;height:6px;margin-top:-3px;pointer-events:none;
  background:radial-gradient(circle 3px at 3px 50%,#fff 0 55%,rgba(255,255,255,0) 100%);
  filter:drop-shadow(0 0 6px #5fb0ff);
  opacity:0;
  animation:rt-dot 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
/* offset each card so the six dots do not move in lockstep */
.rt-grid .rt:nth-child(2) .rt-line::before{animation-delay:.45s}
.rt-grid .rt:nth-child(3) .rt-line::before{animation-delay:.9s}
.rt-grid .rt:nth-child(4) .rt-line::before{animation-delay:1.35s}
.rt-grid .rt:nth-child(5) .rt-line::before{animation-delay:1.8s}
.rt-grid .rt:nth-child(6) .rt-line::before{animation-delay:2.25s}
/* pointer users get a livelier dot on the card they are on */
.rt:hover .rt-line::before{animation-duration:1.2s}

@keyframes rt-dot{
  0%  {transform:translateX(0);opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translateX(calc(100% - 6px));opacity:0}
}

.rt-meta{display:flex;align-items:baseline;gap:6px;font-size:13.5px;color:#a9c1e0;line-height:1.3}
/* Every route card currently shows "Get a quote" (.ask). These two rules
   are kept so a card can display a price again — put the price back as
   <em>฿700</em> <i>/ car</i> inside .rt-meta and drop the .ask class. */
.rt-meta em{
  font-style:normal;font-size:24px;font-weight:600;color:#fff;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.rt-meta i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.45)}
.rt-meta.ask{
  align-self:center;padding:7px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  font-size:13.5px;font-weight:500;color:#dce9fb;
}

/* Nationwide strip */
.nationwide{
  position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;
  margin-top:clamp(30px,3.6vw,44px);padding:11px 20px 11px 14px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.nw-label{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:7px 16px;border-radius:var(--r-pill);background:var(--brand);
  font-size:13px;font-weight:500;color:#fff;white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(22,104,227,1);
}
.nw-label svg{width:15px;height:15px;flex:none;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.marquee{
  position:relative;flex:1;min-width:0;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 88%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track span{
  font-size:14.5px;font-weight:400;letter-spacing:.03em;color:rgba(255,255,255,.55);white-space:nowrap;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bottom bar */
.rt-bar{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:16px;padding:24px 28px;
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
}
.rt-bar-copy{flex:1;min-width:240px}
.rt-bar-ico{
  flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(95,176,255,.18);border:1px solid rgba(95,176,255,.35);
}
.rt-bar-ico svg{width:24px;height:24px;fill:none;stroke:#7dc0ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-ico{width:17px;height:17px;fill:currentColor}
.rt-bar-main{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);font-weight:600;color:#fff}
.rt-bar-sub{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:14.5px;color:#b9cae2}
.live{
  width:9px;height:9px;border-radius:50%;background:#28d17c;flex:none;
  box-shadow:0 0 0 0 rgba(40,209,124,.6);animation:live 1.8s ease-out infinite;
}
@keyframes live{
  0%{box-shadow:0 0 0 0 rgba(40,209,124,.6)}
  70%{box-shadow:0 0 0 12px rgba(40,209,124,0)}
  100%{box-shadow:0 0 0 0 rgba(40,209,124,0)}
}
.rt-bar-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ── Why ─────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:start}
.why-grid .sec-head{margin-bottom:0;position:sticky;top:112px}
.why-grid .sec-head .btn{margin-top:28px}
.why-list{display:grid;gap:14px}
.why-list li{
  display:flex;gap:20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.why-list li:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.why-list .num{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand-soft);
  font-family:var(--display);font-size:14px;font-weight:700;color:var(--brand-dark);
}
.why-list h3{font-size:18px;margin-bottom:6px}
.why-list p{font-size:14.5px;line-height:1.75;max-width:52ch}

/* ── Steps (dark band) ───────────────────────── */
#how{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(165deg,#03091a 0%,#08214c 46%,#030c1c 100%);
}
.how-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.how-glow-a{width:640px;height:640px;top:-300px;left:50%;margin-left:-320px;background:rgba(26,110,240,.42)}
.how-glow-b{width:520px;height:520px;bottom:-280px;right:-160px;background:rgba(0,150,255,.24)}
/* a hint of the light-trail road in the reference, without needing a photo */
.how-road{
  position:absolute;left:-10%;right:-10%;bottom:-6%;height:52%;pointer-events:none;
  background:
    radial-gradient(60% 100% at 78% 100%,rgba(90,170,255,.22),rgba(90,170,255,0) 70%),
    radial-gradient(40% 100% at 22% 100%,rgba(60,130,240,.16),rgba(60,130,240,0) 70%);
}
#how .container{position:relative;z-index:2}

#how .badge{background:rgba(120,170,255,.1);border:1px solid rgba(120,170,255,.45);color:#cfe3ff}
#how .sec-head h2{color:#fff}
#how .sec-lead{color:#a9c1e0}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.step{
  position:relative;text-align:center;
  padding:62px 24px 42px;
  border-radius:26px;
  border:1px solid rgba(120,170,255,.26);
  background:linear-gradient(180deg,rgba(38,92,190,.26),rgba(8,26,62,.16));
  backdrop-filter:blur(6px);
}
/* glowing seam along the bottom edge of each card */
.step::before{
  content:"";position:absolute;left:24%;right:24%;bottom:-1px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,rgba(76,157,255,0),#4c9dff,rgba(76,157,255,0));
  box-shadow:0 0 26px 7px rgba(76,157,255,.5);
}
/* chevron sitting in the gap between two cards */
.step::after{
  content:"";position:absolute;top:50%;right:-35px;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(120,170,255,.45);
  background:rgba(6,20,45,.75) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.5 5l7 7-7 7' fill='none' stroke='%237db4ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}
.step:last-child::after{display:none}

/* the number badge overlaps the top-left corner, as in the reference */
.step-num{
  position:absolute;top:-16px;left:-16px;
  display:grid;place-items:center;width:62px;height:62px;border-radius:19px;
  background:linear-gradient(158deg,#3d8ef7,#0d4fb5);
  box-shadow:0 16px 32px -12px rgba(22,104,227,1),inset 0 1px 0 rgba(255,255,255,.3);
  font-family:var(--display);font-size:22px;font-weight:700;line-height:1;color:#fff;
}

.step-ico{
  width:74px;height:74px;margin:0 auto 24px;
  fill:none;stroke:#c3dcff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 6px 18px rgba(90,165,255,.45));
}
.step h3{font-size:20px;color:#fff;margin-bottom:10px}
.step p{font-size:14.5px;line-height:1.75;color:#a5bedd}

/* ── Reviews (auto-scrolling, right to left) ─── */
/* Breaks out of .container so cards run off both edges.
   body{overflow-x:hidden} keeps the page from scrolling sideways. */
.reviews-marquee{
  position:relative;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(24px,calc(50vw - 600px));
  /* Fallback before JS: a manually scrollable strip. */
  overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.reviews-marquee::-webkit-scrollbar{display:none}

.reviews-track{display:flex;width:max-content;padding:6px 0}
/* margin-right, not gap: it makes each card occupy an equal slice, so
   translating the doubled track by exactly -50% loops seamlessly. */
.reviews-track .review{margin-right:20px}

/* JS has cloned the cards — hand over to the animation. */
.reviews-marquee.is-live{overflow:hidden;padding-inline:0}
.reviews-marquee.is-live::before,
.reviews-marquee.is-live::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);z-index:2;pointer-events:none;
}
.reviews-marquee.is-live::before{left:0;background:linear-gradient(90deg,var(--bg-soft),rgba(244,248,254,0))}
.reviews-marquee.is-live::after{right:0;background:linear-gradient(270deg,var(--bg-soft),rgba(244,248,254,0))}
.reviews-marquee.is-live .reviews-track{animation:reviews-slide 70s linear infinite}
@keyframes reviews-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Stop so people can actually read a card they are pointing at. */
.reviews-marquee.is-live:hover .reviews-track,
.reviews-marquee.is-live:focus-within .reviews-track{animation-play-state:paused}

.review{
  flex:none;width:clamp(290px,78vw,360px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.review:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.stars{display:flex;gap:3px;margin-bottom:16px}
.stars svg{width:17px;height:17px;fill:var(--star)}
.review blockquote{margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-2);flex:1}
.reviewer{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-2)}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-dark);
  font-family:var(--display);font-size:15px;font-weight:800;
}
.reviewer h3{font-size:15px;color:var(--ink);font-weight:600;line-height:1.5}
.reviewer .r-meta{font-size:13px;color:var(--muted)}
.reviewer .avatar{font-size:15px}

/* ── Trip gallery (sits under the reviews) ─────
   Five per row, three rows. Every frame is 3:4 — the ratio most of the
   photos already are — so the portraits are shown whole and only the few
   landscape shots get cropped, instead of the other way round. */
.shots-head{
  max-width:660px;margin:clamp(54px,6vw,78px) auto clamp(24px,3vw,34px);
  text-align:center;
}
.shots-head h3{font-size:clamp(21px,2.5vw,29px);margin-bottom:10px}
.shots-head p{font-size:15px;line-height:1.75;color:var(--ink-2)}

.shots{
  list-style:none;display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,16px);
}
.shot{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;
  border-radius:var(--r);border:1px solid var(--line);background:#e7eefa;
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.shot:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
/* A real <button>, so the full-screen view opens from the keyboard too. */
.shot-open{
  display:block;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:zoom-in;
}
.shot img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.shot:hover img{transform:scale(1.06)}
/* Always visible, not hover-only — a phone has no hover. */
.shot-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 12px 11px;
  font-size:12.5px;line-height:1.45;font-weight:500;color:#fff;
  background:linear-gradient(180deg,rgba(6,17,36,0),rgba(6,17,36,.55) 42%,rgba(6,17,36,.86));
}

.shots-note{
  margin-top:clamp(20px,2.4vw,28px);text-align:center;
  font-size:13px;line-height:1.7;color:var(--muted);
}
/* One phrase per .ln. As an inline-block each phrase wraps as a unit, so
   the line breaks between phrases instead of through the middle of a Thai
   word — and on a wide screen they simply sit on the same line. */
.ln{display:inline-block}

/* Dots under the phone carousel. Hidden on desktop, where the grid shows
   everything at once and there is nothing to page through. */
.shots-dots{display:none}

/* ── Full-screen photo viewer ──────────────────
   Built by main.js on first tap, so there is no dead markup in the page
   and nothing to load for a visitor who never opens a photo. */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:none;place-items:center;
  background:rgba(6,14,30,.95);
  padding:clamp(12px,3vw,32px);
}
/* The backdrop itself is never animated. Anything that fades it in can
   leave the viewer see-through if the animation is interrupted, and an
   invisible photo viewer is worse than one that appears instantly.
   Only the photo eases in, and it rests at its normal state either way. */
.lightbox.open{display:grid}
.lightbox.open .lb-frame{animation:lb-pop .28s cubic-bezier(.2,.7,.2,1)}
@keyframes lb-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-frame{
  position:relative;display:grid;justify-items:center;gap:14px;
  max-width:min(100%,1080px);
}
.lightbox img{
  display:block;max-width:100%;max-height:78vh;
  object-fit:contain;border-radius:var(--r);
  background:#0b1626;
}
.lb-cap{
  font-size:14.5px;line-height:1.6;color:#dbe6f6;text-align:center;
}
.lb-count{display:block;margin-top:5px;font-size:12.5px;color:#8fa3c0;letter-spacing:.04em}
.lb-btn{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(10,22,42,.72);color:#fff;
  backdrop-filter:blur(6px);
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.lb-btn:hover{background:var(--brand);border-color:var(--brand);transform:scale(1.06)}
.lb-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* Close sits against the screen corner; the arrows ride on the photo so
   they stay reachable with a thumb however narrow the screen is. */
.lb-close{top:clamp(12px,2.5vw,24px);right:clamp(12px,2.5vw,24px)}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.06)}
.lb-prev{left:10px}
.lb-next{right:10px}
body.lb-locked{overflow:hidden}

/* ── FAQ ─────────────────────────────────────── */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .25s ease,box-shadow .25s ease}
.faq details[open]{border-color:#cfe0f9;box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 24px;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);
}
/* the question is a real <h3> so the FAQ joins the document outline */
.faq summary h3{font-size:inherit;font-weight:inherit;line-height:1.5;letter-spacing:inherit}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq .answer{padding:0 24px 22px;font-size:15px;line-height:1.8;color:var(--ink-2)}

/* ── CTA ─────────────────────────────────────── */
.cta-section{padding-bottom:calc(var(--pad) + 8px)}
.cta{
  position:relative;overflow:hidden;text-align:center;
  /* same dark band as the #how section, so the two dark blocks read as
     one family instead of two different blues */
  background:linear-gradient(165deg,#03091a 0%,#08214c 46%,#030c1c 100%);
  border:1px solid rgba(120,170,255,.22);
  border-radius:var(--r-lg);padding:clamp(48px,6.5vw,88px) clamp(24px,5vw,64px);
  box-shadow:var(--shadow);
}
/* blurred glows rather than flat circles — matches #how and .routes-hero */
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.cta::before{width:520px;height:520px;top:-240px;right:-120px;background:rgba(26,110,240,.42)}
.cta::after{width:420px;height:420px;bottom:-220px;left:-120px;background:rgba(0,150,255,.24)}
.cta > *{position:relative}
.cta .eyebrow{background:rgba(120,170,255,.12);border:1px solid rgba(120,170,255,.42);color:#cfe3ff}
.cta .eyebrow::before{background:#5fb0ff}
.cta h2{font-size:clamp(32px,4.4vw,56px);margin-bottom:16px;color:#fff}
.cta-lead{max-width:52ch;margin:0 auto;font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.88)}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ── QR codes in the closing CTA ── */
.cta-qr{margin-top:clamp(32px,4vw,46px)}
.cta-qr-hint{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.82);
}
.cta-qr-hint svg{width:17px;height:17px;flex:none;fill:currentColor}

.qr-cards{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.qr-card{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;border-radius:var(--r-lg);padding:16px 20px 18px;
  box-shadow:0 18px 42px -22px rgba(0,0,0,.6);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.qr-card:hover{transform:translateY(-5px);box-shadow:0 28px 54px -22px rgba(0,0,0,.7)}
.qr-card img{width:136px;height:136px;border-radius:10px;margin-bottom:12px}
.qr-name{font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.qr-id{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ── Footer ──────────────────────────────────── */
footer{
  position:relative;overflow:hidden;
  background:var(--ink);color:#a9b6c9;
  padding:clamp(56px,6.5vw,88px) 0 26px;
}
/* same soft glow language as the dark "Popular routes" band */
.foot-glow{
  position:absolute;top:-280px;right:-160px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,104,227,.38),rgba(22,104,227,0) 68%);
  filter:blur(40px);pointer-events:none;
}
footer .container{position:relative;z-index:1}

.footer-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(30px,4vw,56px)}

/* ── Brand column ── */
footer .brand{display:inline-flex;align-items:center;padding:0}
footer .brand-logo{width:88px;height:88px}
.foot-tagline{margin-top:20px;font-size:14.5px;line-height:1.75;color:#a9b6c9;max-width:34ch}
.foot-live{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:7px 15px;border-radius:var(--r-pill);
  background:rgba(40,209,124,.1);border:1px solid rgba(40,209,124,.28);
  font-size:12.5px;font-weight:500;color:#7ee2b0;
}

.foot-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.foot-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  font-size:13.5px;font-weight:500;color:#dbe4f0;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease;
}
.foot-chip svg{width:16px;height:16px;flex:none;fill:currentColor}
.foot-chip:hover{transform:translateY(-2px);color:#fff}
.foot-chip.is-wa:hover{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.6)}
.foot-chip.is-line:hover{background:rgba(6,199,85,.16);border-color:rgba(6,199,85,.6)}
.foot-chip.is-call:hover{background:rgba(22,104,227,.22);border-color:rgba(91,155,245,.65)}

/* ── Link columns ── */
.foot-title{
  position:relative;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:20px;padding-bottom:13px;
}
.foot-title::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),#5b9bf5);
}
.foot-col a{
  display:flex;align-items:center;gap:9px;
  font-size:14.5px;color:#a9b6c9;padding:6px 0;
  transition:color .2s ease,transform .2s ease;
}
.foot-col a:hover{color:#fff;transform:translateX(3px)}

/* Chevron marker on the link columns only. nav.foot-col on purpose —
   the Contact column is a <div> and already has its own round icons. */
nav.foot-col a::before{
  content:"\00BB";                 /* » */
  flex:none;line-height:1;font-size:15px;
  color:#5b9bf5;opacity:.5;
  transition:opacity .2s ease,transform .2s ease;
}
nav.foot-col a:hover::before{opacity:1;transform:translateX(2px)}

/* ── Contact column ── */
.foot-contact{font-style:normal}
.foot-contact a,.foot-contact p{
  display:flex;align-items:center;gap:11px;padding:7px 0;
  font-size:14.5px;color:#a9b6c9;transition:color .2s ease;
}
.foot-contact a:hover{color:#fff;transform:none}
.fc-ico{
  flex:none;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:background .22s ease,border-color .22s ease;
}
.fc-ico svg{width:14px;height:14px;fill:none;stroke:#8fb6ee;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot-contact a:hover .fc-ico{background:rgba(22,104,227,.28);border-color:rgba(91,155,245,.55)}

/* ── Coverage strip ── */
.foot-meta{
  margin-top:clamp(38px,4.5vw,58px);padding:20px 24px;
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.foot-areas{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  font-size:13px;line-height:1.8;color:#93a3ba;
}
.foot-tag{
  flex:none;padding:4px 12px;border-radius:var(--r-pill);
  background:rgba(91,155,245,.16);border:1px solid rgba(91,155,245,.32);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9cdfb;
}

/* ── Bottom bar ── */
.copyright{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:#7f8ea5;
}
.foot-legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-legal a{font-size:13px;color:#a9b6c9;transition:color .2s ease}
.foot-legal a:hover{color:#fff;text-decoration:underline}
.copyright > span > a{color:#a9b6c9;transition:color .2s ease}
.copyright > span > a:hover{color:#fff;text-decoration:underline}

/* Error pages carry only the bottom bar — drop the tall padding. */
footer.is-slim{padding:32px 0 26px}
footer.is-slim .copyright{margin-top:0;padding-top:0;border-top:0}

/* ── Floating contact ────────────────────────── */
.floaty{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.floaty.show{opacity:1;visibility:visible;transform:none}
.floaty a{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  color:#fff;box-shadow:0 12px 28px -10px rgba(15,40,90,.55);
  transition:transform .2s ease;
}
.floaty a:hover{transform:scale(1.07)}
.floaty .f-wa{background:#25d366}
.floaty .f-line{background:var(--green)}
.floaty .f-call{background:var(--brand)}
.floaty svg{width:26px;height:26px;fill:#fff}
/* Optical sizing: the WhatsApp glyph is a circle filling its whole 24x24
   box, while the LINE bubble only spans ~18 of those units. Set to the
   same px value the LINE mark looks visibly smaller, so it is scaled by
   24/18.3 to match. The letters also need to be green to read at all. */
.floaty .f-line svg{width:35px;height:35px}
.floaty .f-line .line-letters{fill:var(--green)}

/* ── Reveal on scroll ────────────────────────── */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════
   Sub-pages — legal documents & error pages
   ═══════════════════════════════════════════════ */

/* ── Page header (h1 lives here on sub-pages) ── */
.page-hero{
  padding:calc(80px + clamp(48px,6vw,88px)) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(900px 460px at 85% 0%,#dcebff 0%,rgba(220,235,255,0) 62%),
    var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(30px,4vw,48px);line-height:1.24;max-width:22ch}
.page-hero .page-lead{margin-top:16px;max-width:62ch;font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.page-updated{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--ink-2);
}

.breadcrumb{margin-bottom:20px;font-size:13.5px;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"›";color:var(--muted)}
.breadcrumb a{color:var(--brand);font-weight:500}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--ink-2)}

/* ── Long-form legal copy ────────────────────── */
.legal{padding:clamp(48px,6vw,80px) 0}
.legal-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(32px,5vw,64px);align-items:start}

.legal-toc{position:sticky;top:112px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 24px;background:#fff}
.legal-toc h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.legal-toc ol{display:grid;gap:2px;counter-reset:toc}
.legal-toc a{
  display:block;padding:7px 0;font-size:14px;line-height:1.6;color:var(--ink-2);
  transition:color .2s ease;
}
.legal-toc a::before{counter-increment:toc;content:counter(toc) ". ";color:var(--muted);font-variant-numeric:tabular-nums}
.legal-toc a:hover{color:var(--brand)}

.legal-body{max-width:74ch}
.legal-body > section{scroll-margin-top:104px;padding:0 0 clamp(30px,4vw,44px)}
.legal-body > section+section{border-top:1px solid var(--line-2);padding-top:clamp(30px,4vw,44px)}

.legal-body h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:14px}
.legal-body h3{font-size:19px;margin:28px 0 10px}
.legal-body h4{font-size:16.5px;margin:22px 0 8px}
.legal-body h5{font-size:15px;margin:18px 0 6px;color:var(--ink-2)}
.legal-body h6{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 6px;
}
.legal-body p{margin-bottom:14px;font-size:15.5px;line-height:1.85}
.legal-body p:last-child{margin-bottom:0}
.legal-body a{color:var(--brand);font-weight:500}
.legal-body a:hover{text-decoration:underline}

.legal-body ul.bullets,.legal-body ol.numbers{margin:0 0 16px;display:grid;gap:9px}
.legal-body ul.bullets li,.legal-body ol.numbers li{
  position:relative;padding-left:26px;font-size:15.5px;line-height:1.8;
}
.legal-body ul.bullets li::before{
  content:"";position:absolute;left:8px;top:12px;
  width:6px;height:6px;border-radius:50%;background:var(--brand);
}
.legal-body ol.numbers{counter-reset:li}
.legal-body ol.numbers li::before{
  counter-increment:li;content:counter(li) ".";
  position:absolute;left:0;top:0;color:var(--brand);font-weight:600;
}

.legal-note{
  margin:20px 0;padding:18px 20px;border-radius:var(--r);
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:14.5px;line-height:1.8;
}
.legal-note h6{margin-top:0}
/* Same look as h6, but not a heading — used where the label would
   otherwise skip a level in the document outline. */
.legal-note .note-label{
  font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}

.legal-body dl{margin:0 0 16px;display:grid;gap:10px}
.legal-body dt{font-weight:600;color:var(--ink);font-size:15px}
.legal-body dd{margin:2px 0 0;font-size:15px;line-height:1.8}

/* ── Error pages (404 / 500) ─────────────────── */
.err{
  min-height:100vh;display:grid;place-items:center;text-align:center;
  padding:120px 0 80px;
  background:
    radial-gradient(900px 480px at 80% 6%,#dcebff 0%,rgba(220,235,255,0) 62%),
    radial-gradient(700px 420px at -6% 24%,#eaf3ff 0%,rgba(234,243,255,0) 60%),
    var(--bg);
}
.err-code{
  font-family:var(--display);font-size:clamp(84px,17vw,168px);font-weight:800;
  line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(140deg,#1668e3,#5fb0ff 55%,#0d4fb5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.err h1{font-size:clamp(26px,3.6vw,42px);margin-top:22px}
.err .err-lead{margin:16px auto 0;max-width:52ch;font-size:16.5px;line-height:1.8;color:var(--ink-2)}
.err-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}

.err-links{margin-top:clamp(40px,5vw,60px);text-align:left}
.err-links h2{font-size:15px;text-align:center;margin-bottom:20px}
.err-links ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.err-links a{
  display:block;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.err-links a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#cfe0f9}
.err-links h3{font-size:15px;margin-bottom:4px}
.err-links p{font-size:13.5px;line-height:1.65;color:var(--ink-2)}

/* ── Responsive ──────────────────────────────── */
@media (max-width:980px){
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{position:static}
  .err-links ul{grid-template-columns:1fr 1fr}
}

@media (max-width:680px){
  .err-links ul{grid-template-columns:1fr}
}

@media (max-width:1160px){
  .menu a{padding:9px 9px;font-size:14px}
}

@media (max-width:1080px){
  .booking-form{grid-template-columns:1fr 1fr 1fr}
  .booking-form .btn{grid-column:1/-1;width:100%}
  .cards{grid-template-columns:1fr 1fr}
  .rt-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr;gap:40px 36px}
  .step:nth-child(2n)::after{display:none}
}

@media (max-width:980px){
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.12);
    padding:10px 24px 18px;display:none;box-shadow:0 20px 40px -24px rgba(0,0,0,.9);
  }
  .menu.open{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;font-size:15px}
  .menu a:hover{background:transparent;color:#5b9bf5}
  .burger{display:block}
  .nav-actions>.btn{display:none}

  .fleet{grid-template-columns:1fr 1fr}
  /* five 3:4 frames get too narrow to read here — three rows of five
     becomes five rows of three */
  .shots{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:1fr}
  .why-grid .sec-head{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1/-1}
  .foot-tagline{max-width:52ch}
}

/* ── Route prices on small screens ────────────
   A 4-column table cannot fit a phone, and a sideways-scrolling table
   hides the SUV and Van prices completely. Below 760px each row becomes
   a card: route on top, then one price per line with its vehicle label
   pulled from the data-en / data-th attributes on the cell.            */
@media (max-width:760px){
  .routes-scroll{overflow-x:visible}
  .routes table{min-width:0;width:100%;display:block}
  .routes thead{display:none}
  .routes tbody{display:block}

  .routes tbody tr{display:block;padding:20px 18px 14px;border-bottom:1px solid var(--line)}
  .routes tbody tr:last-child{border-bottom:0}
  .routes tbody tr:hover{background:transparent}

  .routes td{display:block;padding:0;border:0;text-align:left}
  .routes td:first-child{margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
  .route-name{font-size:17px;font-weight:600}
  .oneway{font-size:12px;padding:3px 10px;color:var(--ink-2)}

  .routes td:not(:first-child){
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:9px 0;text-align:right;
    font-size:18px;font-weight:700;
  }
  /* the vehicle label was --muted grey at 13px, which is hard to read on a
     phone held at arm's length — darker and a size up */
  .routes td:not(:first-child)::before{
    font-size:14.5px;font-weight:500;color:var(--ink-2);
    letter-spacing:0;text-transform:none;white-space:nowrap;
  }
  .routes-note{font-size:14px;padding:16px 18px}
  [data-lang="en"] .routes td:not(:first-child)::before{content:attr(data-en)}
  [data-lang="th"] .routes td:not(:first-child)::before{content:attr(data-th)}
}

@media (max-width:680px){
  .container{width:calc(100% - 32px)}
  .nav{height:70px}
  .brand-logo,.topbar.scrolled .brand-logo{width:52px;height:52px}
  .hero{padding-top:70px}
  .booking{padding:22px 18px 24px}
  .booking-form{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .rt-grid{grid-template-columns:1fr}
  .rt{min-height:0}
  .nationwide{border-radius:var(--r-lg);flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .nw-label{align-self:flex-start}
  .rt-bar{padding:22px 20px}
  .rt-bar-ico{display:none}
  .rt-bar-actions{width:100%}
  .rt-bar-actions .btn{flex:1}
  .fleet{grid-template-columns:1fr}
  /* let the cars stay big on a narrow screen */
  .fleet-banner img{aspect-ratio:4/3;object-position:center 66%}
  .fleet-banner figcaption{padding:14px 16px;font-size:13.5px}
  .process{grid-template-columns:1fr;gap:42px}
  .step::after{display:none}
  .step{padding:56px 22px 38px}
  /* keep the badge clear of the screen edge on a phone */
  .step-num{left:18px;width:56px;height:56px;border-radius:17px;font-size:20px}
  .step-ico{width:66px;height:66px;margin-bottom:20px}
  .why-list li{flex-direction:column;gap:14px}
  .qr-cards{gap:12px}
  .qr-card{flex:1;min-width:0;padding:14px 12px 16px}
  .qr-card img{width:118px;height:118px}
  .qr-id{font-size:11.5px;text-align:center}
  .footer-grid{grid-template-columns:1fr}
  footer .brand-logo{width:74px;height:74px}
  .foot-meta{padding:18px}
  .foot-areas{align-items:flex-start;flex-direction:column;gap:8px}
  .copyright{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-legal{gap:18px}
  /* stays a vertical stack on phones — a horizontal row sat across the
     bottom of the screen and covered the content behind it */
  .floaty{right:14px;bottom:16px;gap:10px}
  .floaty a{width:50px;height:50px}
  .floaty svg{width:24px;height:24px}
  .floaty .f-line svg{width:32px;height:32px}   /* same 24/18.3 correction */
}

/* ── Trip gallery on a phone: one photo at a time ────
   Fifteen thumbnails stacked two-wide is a very long scroll on a phone, so
   the grid becomes a swipeable rail that snaps one photo at a time; the
   sliver of the next one at the edge is what says there is more to swipe to.

   Gated on a coarse pointer so it is only ever a touch screen that gets the
   rail. A computer keeps the grid at every width — a small browser window or
   a zoomed-in page is still a mouse, and a mouse has no swipe. */
@media (max-width:680px) and (pointer:coarse){
  .shots{
    display:flex;grid-template-columns:none;
    /* -16px is exactly the .container gutter at this width, so the rail
       reaches both screen edges without the 100vw-vs-scrollbar rounding
       that would push the page sideways */
    margin-inline:-16px;
    padding:4px 16px;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .shots::-webkit-scrollbar{display:none}
  .shot{flex:0 0 80%;scroll-snap-align:start;aspect-ratio:3/4}
  /* the lift on hover is a mouse idea — on a rail it just clips */
  .shot:hover{transform:none}
  .shot-cap{font-size:13px;padding:30px 14px 13px}

  .shots-dots{
    display:flex;justify-content:center;flex-wrap:wrap;gap:7px;
    margin-top:16px;
  }
  .shots-dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:#c6d5ea;transition:background .25s ease,transform .25s ease;
  }
  .shots-dots button[aria-current="true"]{background:var(--brand);transform:scale(1.5)}
}

/* A narrow desktop window keeps the grid — three 3:4 frames get thin here,
   so it drops to two. */
@media (max-width:680px) and (pointer:fine){
  .shots{grid-template-columns:1fr 1fr}
}