/* Self-hosted fonts (Kanit 300/500/600/700, Mali 600 — Thai + Latin subsets, OFL) */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/kanit-300-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/kanit-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/kanit-500-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/kanit-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/kanit-600-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/kanit-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/kanit-700-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/kanit-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/mali-600-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Mali'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/mali-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metric-matched fallbacks: text keeps its size while Kanit/Mali load, so the swap doesn't shift the layout */
@font-face { font-family: 'Kanit Fallback'; font-weight: 100 500; src: local('Noto Sans Thai'), local('NotoSansThai-Regular'), local('Leelawadee UI'), local('Tahoma'), local('Arial'); size-adjust: 103%; ascent-override: 107%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: 'Kanit Fallback'; font-weight: 600 900; src: local('Noto Sans Thai Bold'), local('NotoSansThai-Bold'), local('Leelawadee UI Bold'), local('Tahoma Bold'), local('Arial Bold'); size-adjust: 102%; ascent-override: 108%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: 'Mali Fallback'; src: local('Noto Sans Thai'), local('NotoSansThai-Regular'), local('Leelawadee UI'), local('Tahoma'), local('Arial'); size-adjust: 120%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
/* ==========================================================================
   AA Inter Tour — aatour.com
   Layout: cream content card floating over a full-page Laos landscape
   Palette: orange (primary) · navy blue (secondary) · white / cream · Font: Kanit
   ========================================================================== */

:root {
  --orange: #EE6524;          /* logo deep orange */
  --orange-600: #D4531A;
  --orange-50: #FFF3EA;
  --orange-rgb: 238, 101, 36;
  --amber: #FCA01A;            /* logo amber-orange */
  --navy: #1A4A9A;             /* logo blue */
  --navy-700: #123A7D;
  --blue: #2F6FD0;
  --blue-50: #EEF4FC;
  --cream: #FFFFFF;            /* white content card */
  --sand: #EEF4FB;             /* light blue tint for boxes */
  --white: #FFFFFF;
  --ink: #13233D;
  --muted: #5A6A82;
  --line: #E1E9F3;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1240px;
  --pad: clamp(18px, 4vw, 52px);
  --shadow-sm: 0 6px 18px -10px rgba(13, 38, 84, .25);
  --shadow: 0 24px 50px -24px rgba(13, 38, 84, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Kanit', 'Kanit Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: #0F2F63;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* soft, navy-tinted landscape behind the content card (blurred so it never competes with the hero) */
body::before {
  content: ""; position: fixed; inset: -60px; z-index: -2;
  background: url(/assets/images/bg-blur.webp) center / cover no-repeat;
  filter: blur(28px) saturate(.8);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(26, 74, 154, .55) 0%, rgba(15, 47, 99, .82) 60%, rgba(10, 30, 66, .92) 100%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.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; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--orange); color: #fff; padding: 10px 18px; border-radius: 999px; }
.skip-link:focus { top: 16px; }
@media (min-width: 901px) { .nw { white-space: nowrap; } }

/* ---------- Content card ---------- */
/* full-width page: white body edge to edge, footer keeps the navy backdrop below */
.page-card {
  position: relative;
  background: var(--cream);
  overflow: clip;
}
.container { width: 100%; max-width: var(--max); padding-inline: var(--pad); margin-inline: auto; }
.section { position: relative; padding-block: clamp(48px, 6vw, 84px); }
.section.tight-top { padding-top: clamp(24px, 3vw, 40px); }
.section + .section:not([style]) { padding-top: clamp(16px, 2vw, 28px); }

/* headings */
.display { font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.display em, .section-title em { font-style: normal; color: var(--orange); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.eyebrow::before { content: ""; width: 34px; height: 3px; border-radius: 3px; background: var(--orange); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(24px, 3vw, 36px); }
.section-head > div { max-width: 640px; }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 10px; }
.section-lead { max-width: 440px; color: var(--muted); }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-head.center .section-lead { max-width: 580px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 400; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 8px 18px; font-size: .9rem; }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 12px 26px -14px rgba(var(--orange-rgb), .9); }
.btn-orange:hover { background: var(--orange-600); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-outline-orange { border-color: var(--orange); color: var(--orange); background: transparent; }
.btn-outline-orange:hover { background: var(--orange); color: #fff; }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.banner .btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.banner .btn-ghost:hover { background: #fff; color: var(--navy); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.link-more {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink);
  padding-bottom: 3px; background: linear-gradient(var(--orange), var(--orange)) left bottom / 100% 2px no-repeat;
}
.link-more svg { width: 20px; height: 20px; color: var(--orange); transition: transform .25s var(--ease); }
.link-more:hover svg { transform: translateX(4px); }

/* ---------- Header (over the landscape) ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; padding: 18px var(--pad); transition: background .3s, padding .3s, box-shadow .3s; }
.site-header.is-scrolled { padding-block: 10px; background: rgba(26, 74, 154, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); }
.header-inner { max-width: var(--max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-name { font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; color: #fff; }
.brand-name b { font-weight: 600; color: var(--amber); }
.main-nav ul { display: flex; gap: clamp(14px, 2vw, 30px); }
.main-nav a[data-nav] { position: relative; font-size: .92rem; color: rgba(255, 255, 255, .9); padding: 6px 0; white-space: nowrap; transition: color .2s; }
.main-nav a[data-nav]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transition: transform .3s var(--ease); }
.main-nav a[data-nav]:hover { color: #fff; }
.main-nav a[data-nav]:hover::after, .main-nav a[data-nav].is-active::after { transform: scaleX(1); }
.main-nav a[data-nav].is-active { color: #fff; font-weight: 400; }
.nav-mobile-cta { display: none; }
/* desktop: gradient blob that follows the hovered link */
.nav-blob { display: none; }
@media (min-width: 1201px) {
  .main-nav ul { position: relative; gap: 0; padding: 6px; border-radius: 999px; background: rgba(10, 30, 70, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .main-nav a[data-nav] { z-index: 1; display: block; padding: 9px 18px; color: #fff; }
  .main-nav a[data-nav]::after { display: none; }
  .main-nav a[data-nav].is-active { font-weight: 500; }
  .nav-blob { display: block; position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--orange), var(--amber)); box-shadow: 0 8px 20px -6px rgba(238, 101, 36, .75); opacity: 0; transition: left .35s var(--ease), width .35s var(--ease), opacity .25s; pointer-events: none; }
  .nav-blob.is-on { opacity: 1; }
  .site-header.is-scrolled .main-nav ul { background: rgba(255, 255, 255, .1); }
}
.header-right { display: flex; align-items: center; gap: 10px; }
.header-line { border: 1.5px solid rgba(255, 255, 255, .75); color: #fff; padding: 8px 18px; font-size: .9rem; }
.header-line:hover { background: #fff; color: var(--navy); }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(26, 74, 154, .35); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Banner hero (inside the card) ---------- */
.banner {
  position: relative; isolation: isolate; overflow: hidden;
  /* full-bleed, runs up behind the fixed header; content lines up with .container */
  min-height: clamp(430px, 46vw, 560px);
  padding-top: 92px;
  padding-inline: max(0px, calc((100% - var(--max)) / 2));
  display: flex; align-items: flex-end;
  color: #fff;
}
.banner-media { position: absolute; inset: 0; z-index: -2; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; animation: slowZoom 18s ease-in-out infinite alternate; }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(13, 38, 84, .72) 0%, rgba(13, 38, 84, .35) 50%, rgba(13, 38, 84, .05) 100%),
    linear-gradient(0deg, rgba(13, 38, 84, .45) 0%, rgba(13, 38, 84, 0) 45%);
}
.banner-content { position: relative; padding: clamp(26px, 5vw, 60px); max-width: 760px; }
.banner .hero-title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.8rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.banner .hero-title em { font-style: normal; color: var(--amber); }
.banner .lead { margin-top: 14px; max-width: 560px; color: rgba(255, 255, 255, .9); font-size: 1.05rem; }
.banner .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.banner .eyebrow { color: var(--amber); }
.banner .eyebrow::before { background: var(--amber); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: rgba(255, 255, 255, .8); margin-bottom: 12px; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.meta-chips span { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); font-size: .86rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.banner-badge {
  position: absolute; right: clamp(16px, 3vw, 36px); top: clamp(16px, 3vw, 36px);
  padding: 10px 18px; border-radius: 18px; text-align: right; line-height: 1.2;
  background: rgba(255, 255, 255, .92); color: var(--navy); box-shadow: var(--shadow-sm);
}
.banner-badge strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--orange); }
.banner-badge span { font-size: .8rem; color: var(--muted); }


/* ---------- Quick booking bar (Roamly-style search) ---------- */
.quick-book {
  position: relative; z-index: 5;
  width: min(1000px, calc(100% - 64px)); margin: -46px auto 0;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; align-items: center;
  padding: 10px; padding-left: 14px;
  background: #fff; border-radius: 999px; box-shadow: 0 24px 50px -22px rgba(13, 38, 84, .45);
}
.qb-field { display: flex; align-items: center; gap: 12px; padding: 4px 18px; min-width: 0; }
.qb-field + .qb-field { border-left: 1px solid var(--line); }
.qb-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--navy); }
.qb-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qb-field label { display: block; font-size: .78rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.qb-field select, .qb-field input { width: 100%; border: 0; padding: 2px 0; background: transparent; color: var(--muted); font-size: .9rem; cursor: pointer; }
.qb-field select:focus, .qb-field input:focus { outline: none; color: var(--ink); }
.qb-field > div { flex: 1; min-width: 0; }
.quick-book .btn { padding: 14px 28px; }
.quick-book .btn svg { width: 18px; height: 18px; }

/* ---------- Service strip: navy tape stuck across the page, orange tape peeking behind ---------- */
/* endless auto-scrolling strip; JS clones the set and sets --set-w (one set's width) */
.tape-strip { position: relative; margin: clamp(26px, 4vw, 44px) -20px clamp(6px, 2vw, 16px); overflow: hidden; padding: 14px 0 20px; }
.trust { position: relative; z-index: 1; overflow: hidden; rotate: -1.5deg; background: var(--navy); border-block: 3px dashed rgba(255, 255, 255, .35); box-shadow: 0 14px 30px -18px rgba(13, 38, 84, .8); }
.tape-under { position: absolute; z-index: 0; left: 0; right: 0; bottom: 14px; height: 20px; rotate: 1deg; background: var(--orange); opacity: .9; }
.trust-track { display: flex; width: max-content; }
.trust.is-running .trust-track { animation: trust-marquee var(--marquee-dur, 28s) linear infinite; }
.trust.is-running:hover .trust-track { animation-play-state: paused; }
/* no JS / reduced motion: plain wrapped row */
.trust:not(.is-running) .trust-track { width: auto; flex-wrap: wrap; justify-content: center; }
@keyframes trust-marquee { to { transform: translateX(calc(-1 * var(--set-w))); } }
.trust li { flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 0 13px 26px; color: #fff; white-space: nowrap; }
.trust li::after { content: "✦"; margin-left: 14px; color: var(--amber); }
.trust-img { width: 34px; height: 34px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain; }
.trust b { font-weight: 500; }

/* ---------- Top places carousel ---------- */
.places { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
.places-intro .bar { display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--orange); margin-bottom: 18px; }
.places-intro h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; }
.places-intro p { color: var(--muted); margin-top: 10px; }
.car-nav { display: flex; gap: 10px; margin-top: 32px; }
.car-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1.5px solid var(--line); background: transparent; color: var(--muted); transition: background .25s, color .25s, border-color .25s, opacity .25s; }
.car-btn svg { width: 18px; height: 18px; }
.car-btn.next { background: var(--navy); border-color: var(--navy); color: #fff; }
.car-btn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: #fff; }
.car-btn:disabled { opacity: .4; cursor: default; }
/* home programs: taped polaroids, duration as a stamp, handwritten title under the photo */
.car-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 22px 6px 26px;
}
.car-track::-webkit-scrollbar { display: none; }
.place-card { position: relative; display: block; padding: 10px 10px 16px; background: #fff; scroll-snap-align: start; box-shadow: 0 18px 32px -20px rgba(13, 38, 84, .6); rotate: -2deg; transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1), translate .45s cubic-bezier(.34, 1.56, .64, 1); }
.place-card:nth-child(even) { rotate: 2deg; }
.place-card:hover { rotate: 0deg; translate: 0 -8px; }
.place-card::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 80px; height: 22px; translate: -50% 0; background: rgba(252, 160, 26, .55); rotate: -4deg; }
.pc-photo { position: relative; display: block; }
.pc-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pc-dur { position: absolute; right: -12px; bottom: -14px; width: 74px; height: 74px; padding: 6px; border-radius: 50%; display: grid; place-items: center; text-align: center; border: 2.5px dashed var(--orange); background: rgba(255, 248, 238, .95); color: var(--orange); font-size: .74rem; font-weight: 700; line-height: 1.1; rotate: -12deg; }
.place-card b { display: block; margin-top: 14px; padding-right: 40px; font-family: var(--font); font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: var(--navy); }
.place-card small { color: var(--muted); }

/* ---------- Intro / positioning ---------- */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.intro-copy p { color: var(--muted); margin-bottom: 12px; }
.intro-copy p strong { color: var(--orange); font-weight: 500; }
/* home "About" — centered head, 5-step road, photo strip + price box */
.about-head { text-align: center; max-width: 760px; margin: 0 auto; }
.about-head p { color: var(--muted); margin-top: 12px; }
.about-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; position: relative; counter-reset: about; }
.about-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--orange) 0 14px, transparent 14px 24px); opacity: .5; }
.about-steps li { text-align: center; position: relative; counter-increment: about; }
.about-ring { width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; position: relative; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s; }
.about-ring::after { content: counter(about); position: absolute; right: -4px; top: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 600; font-size: .85rem; display: grid; place-items: center; }
.about-steps li:hover .about-ring { transform: translateY(-6px) scale(1.06); border-color: var(--orange); }
.about-ring svg { width: 34px; height: 34px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.about-steps li:hover .about-ring svg { stroke: var(--orange); }
.about-steps b { display: block; font-weight: 500; margin-top: 12px; line-height: 1.4; }
.about-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; margin-top: 44px; }
.about-strip figure { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; height: 240px; }
.about-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.about-strip figure:hover img { transform: scale(1.06); }
.about-strip figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; font-weight: 500; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.about-price { margin: 0; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--navy-700), var(--navy)); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.about-price div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 6px; }
.about-price div:last-child { border-bottom: 0; }
.about-price dd { margin: 0; color: var(--amber); font-weight: 600; }
@media (max-width: 900px) {
  .about-steps { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .about-steps::before { display: none; }
  .about-strip { grid-template-columns: 1fr 1fr; }
  .about-price { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .about-steps { grid-template-columns: 1fr 1fr; }
  .about-strip figure { height: 180px; }
}

/* ---------- Cards & lists ---------- */
.checklist { display: grid; gap: 10px; margin: 18px 0 26px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.checklist li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; background: var(--orange-50); color: var(--orange); font-size: .8rem; font-weight: 600; }


.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.steps.five { grid-template-columns: repeat(5, 1fr); }
.step { position: relative; padding: 24px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--orange); margin-bottom: 14px; }
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .9rem; color: var(--muted); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.about-media { position: relative; margin: 0; border: 6px solid #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5 / 4; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-badge { position: absolute; right: 16px; bottom: 16px; padding: 12px 18px; border-radius: 14px; background: var(--orange); color: #fff; line-height: 1.2; }
.about-badge strong { display: block; font-size: 1.5rem; font-weight: 700; }
.about-badge span { font-size: .82rem; }
.about-copy .section-title { margin-bottom: 14px; }
.about-copy p { color: var(--muted); }


.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* parking rates as parking-ticket stubs; flex row so 3–4 tickets fit one line and wrap on smaller screens */
.pk-stubs { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 24px; }
.pk-stub { flex: 0 1 262px; min-width: 240px; display: flex; flex-direction: column; border-radius: 14px; background: #fff; box-shadow: 0 24px 44px -26px rgba(13, 38, 84, .6); rotate: -2.5deg; transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1), translate .45s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - 66px), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% calc(100% - 66px), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 calc(100% - 66px), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% calc(100% - 66px), #0000 98%, #000) right / 51% 100% no-repeat; }
.pk-stub:nth-child(even) { rotate: 2.5deg; }
.pk-stub:hover { rotate: 0deg; translate: 0 -8px; }
.pk-stub-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 14px 14px 0 0; background: var(--navy); color: #fff; }
.pk-stub.is-hot .pk-stub-head { background: var(--orange); }
.pk-stub-head .p { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--navy); font-size: 1.4rem; font-weight: 700; }
.pk-stub.is-hot .pk-stub-head .p { color: var(--orange); }
.pk-stub-head small { display: block; font-size: .68rem; letter-spacing: .18em; opacity: .85; }
.pk-stub-head b { font-size: 1.15rem; font-weight: 600; }
.pk-stub-body { flex: 1; padding: 18px 22px 6px; }
.pk-stub-body .sub { font-size: .88rem; color: var(--muted); }
.pk-stub-body .amt { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 10px; }
.pk-stub-body .amt strong { font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--orange); }
.pk-stub-body .amt span { color: var(--muted); }
.pk-stub-body li { padding: 3px 0; font-size: .9rem; }
.pk-stub-body li::before { content: "✓ "; font-weight: 600; color: var(--orange); }
.pk-stub-tear { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 66px; margin-top: 12px; padding: 0 22px; border-top: 2px dashed var(--line); }
.pk-stub-tear .pk-barcode { width: 90px; height: 30px; }

.notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--orange-50); border: 1px solid rgba(var(--orange-rgb), .3); font-size: .92rem; color: var(--ink); }
.notice svg { flex: none; width: 22px; height: 22px; color: var(--orange); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }


/* service cards: icon note cards in a wrapping row — any number of cards, last row centred */
.svc-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.svc-card { flex: 0 1 calc((100% - 48px) / 3); min-width: 280px; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 8px; background: #fff; box-shadow: 0 14px 26px -20px rgba(13, 38, 84, .55); scroll-margin-top: 100px; rotate: -1deg; transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1), translate .45s cubic-bezier(.34, 1.56, .64, 1); }
.svc-card:nth-child(even) { rotate: 1deg; }
.svc-card:hover, .svc-card:target { rotate: 0deg; translate: 0 -5px; }
.svc-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card .ring { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(var(--orange-rgb), .5); }
.svc-card .ring svg { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-card .no { font-family: var(--font); font-weight: 600; font-size: 1.7rem; line-height: 1; color: rgba(26, 74, 154, .25); }
.svc-card h3 { margin-top: 4px; font-size: 1.15rem; color: var(--navy-700); }
.svc-card ul { flex: 1; }
.svc-card li { padding: 3px 0; font-size: .92rem; }
.svc-card li::before { content: "✓ "; font-weight: 600; color: var(--orange); }
.svc-card .price { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--orange-50); font-style: normal; font-size: .85rem; font-weight: 600; color: var(--orange); }
.svc-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 12px; border-top: 2px dashed var(--line); }
.svc-links a { border-bottom: 1.5px dashed currentColor; font-size: .88rem; font-weight: 500; color: var(--orange); }
.svc-links a:hover { color: var(--navy); }
@media (max-width: 960px) { .svc-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .svc-card { flex-basis: 100%; min-width: 0; } }

/* ---------- Tour cards ---------- */
/* filter: plain words; the picked one gets a hand-drawn orange ring (stroke draws in) */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.filter-tabs button { position: relative; padding: 10px 6px; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--muted); transition: color .25s; }
.filter-tabs button sup { margin-left: 2px; font-family: var(--font); font-weight: 600; font-size: .8rem; color: var(--orange); }
.filter-tabs .ring { position: absolute; inset: -4px -14px; width: calc(100% + 28px); height: calc(100% + 8px); fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; pointer-events: none; }
.filter-tabs button:hover { color: var(--ink); }
.filter-tabs button[aria-pressed="true"] { color: var(--navy-700); font-weight: 600; }
.filter-tabs button[aria-pressed="true"] .ring { animation: ring-draw .6s var(--ease) forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .filter-tabs button[aria-pressed="true"] .ring { stroke-dashoffset: 0; } }
/* tour card = back of a postcard: photo left, duration as a postage stamp, code as a postmark, places on ruled lines */
.tour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.tour-card { position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); min-height: 300px; border-radius: 6px; overflow: hidden; background: #FFFDF8; box-shadow: 0 14px 28px -20px rgba(13, 38, 84, .5); rotate: -.6deg; transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), translate .4s cubic-bezier(.34, 1.56, .64, 1); }
.tour-card:nth-child(even) { rotate: .6deg; }
.tour-card[hidden] { display: none; }
.tour-card:hover { rotate: 0deg; translate: 0 -5px; }
.tour-card > img { grid-column: 1; grid-row: 1; width: 100%; height: 100%; object-fit: cover; border-right: 2px dashed var(--line); }
.tour-card::before { content: "Greetings from Laos!"; position: absolute; z-index: 1; left: 12px; bottom: 12px; max-width: calc(42% - 24px); font-family: var(--font); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); rotate: -4deg; pointer-events: none; }
.tour-tag { position: absolute; z-index: 2; top: 14px; right: 14px; width: 68px; padding: 6px 4px; text-align: center; background: var(--orange); color: #fff; font-size: .74rem; font-weight: 600; line-height: 1.2; border: 3px solid #FFFDF8; outline: 3px dotted var(--orange); outline-offset: -1px; rotate: 4deg; }
.tour-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; color: var(--ink); }
.tour-body > small { padding-right: 130px; font-family: var(--font); font-weight: 500; font-size: .86rem; color: var(--muted); }
.tour-body h3 { padding-right: 116px; font-size: 1.2rem; color: var(--navy-700); }
.tour-desc { font-size: .86rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.place-chips { display: grid; margin-top: 2px; }
.place-chips span { padding: 2px 0; border-bottom: 1.5px solid #E7EEF8; font-family: var(--font); font-weight: 500; font-size: .9rem; color: var(--navy); }
.place-chips span::before { content: "✓ "; color: var(--orange); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; }
.tour-price { font-size: .95rem; font-weight: 500; color: var(--orange); line-height: 1.1; }
/* the code becomes a round postmark over the stamp */
.tour-price small { position: absolute; z-index: 1; top: 30px; right: 60px; width: 58px; height: 58px; padding: 6px; border-radius: 50%; border: 2px solid rgba(26, 74, 154, .35); display: grid; place-items: center; text-align: center; font-size: .55rem; font-weight: 400; line-height: 1.2; color: rgba(26, 74, 154, .6); overflow-wrap: anywhere; rotate: -14deg; }
.tour-go { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--orange); color: #fff; transition: background .25s; }
.tour-go::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* whole card is clickable */
.tour-go svg { width: 18px; height: 18px; }
.tour-card:hover .tour-go { background: var(--navy); }
/* stacked postcard (photo on top) for 3-up rows and phones */
@media (min-width: 1081px) {
  .tour-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour-grid.three .tour-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px auto; }
  .tour-grid.three .tour-card > img { border-right: 0; border-bottom: 2px dashed var(--line); }
  .tour-grid.three .tour-body { grid-column: 1; grid-row: 2; }
  .tour-grid.three .tour-card::before { top: 140px; bottom: auto; max-width: none; }
  .tour-grid.three .tour-body > small, .tour-grid.three .tour-body h3 { padding-right: 0; }
  .tour-grid.three .tour-price small { top: 18px; right: 78px; }
}
@media (max-width: 1080px) { .tour-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tour-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px auto; min-height: 0; }
  .tour-card > img { border-right: 0; border-bottom: 2px dashed var(--line); }
  .tour-body { grid-column: 1; grid-row: 2; }
  .tour-card::before { top: 140px; bottom: auto; max-width: none; }
  .tour-body > small, .tour-body h3 { padding-right: 0; }
  .tour-price small { top: 18px; right: 78px; }
}
.empty-note { display: none; padding: 40px; text-align: center; color: var(--muted); }
.empty-note.is-visible { display: block; }

/* ---------- Tour detail ---------- */
.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.day + .day { margin-top: 32px; }
.day-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.day-head .badge { flex: none; padding: 6px 16px; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 600; }
.day-head h3 { font-size: 1.15rem; font-weight: 500; }
.itin { position: relative; display: grid; gap: 10px; padding-left: 26px; }
.itin::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, rgba(var(--orange-rgb), .45) 0 6px, transparent 6px 12px); }
.itin li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.itin li::before { content: ""; position: absolute; left: -22px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--cream); }
.itin .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--sand); color: var(--navy); }
.itin .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.itin b { display: block; color: var(--ink); font-weight: 500; line-height: 1.4; }
.itin p { font-size: .9rem; color: var(--muted); margin-top: 3px; }
.itin .city { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 400; color: var(--muted); border: 1px solid var(--line); vertical-align: middle; }
.itin .city-note { display: block; margin-top: 3px; font-size: .88rem; font-weight: 300; line-height: 1.55; color: var(--muted); }
.itin li.is-place { background: var(--orange-50); border-color: rgba(var(--orange-rgb), .25); }
.itin li.is-place .ic { background: var(--orange); color: #fff; }
.itin li.is-train .ic { background: var(--navy); color: #fff; }
.tour-aside { position: sticky; top: 90px; display: grid; gap: 16px; }
.aside-card { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.aside-card h3 { font-size: 1.12rem; margin-bottom: 14px; }
.facts { display: grid; gap: 10px; margin-bottom: 20px; }
.facts li { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.facts li span { color: var(--muted); }
.facts li b { color: var(--ink); font-weight: 500; text-align: right; }
.aside-card .btn { width: 100%; }
.aside-card .btn + .btn { margin-top: 10px; }
.addon-list { display: grid; gap: 10px; }
.addon-list li { padding: 12px 14px; border-radius: 10px; background: var(--sand); border: 1px solid var(--line); }
.addon-list b { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); font-weight: 500; font-size: .95rem; }
.addon-list b span { color: var(--orange); white-space: nowrap; }
.addon-list p { font-size: .84rem; color: var(--muted); margin-top: 4px; }

/* ---------- FAQ ---------- */
/* FAQ: heading + "ask on LINE" note on the left, questions on a notebook page (red margin line) on the right */
.faq-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); align-items: start; }
.faq-side { position: sticky; top: 100px; }
.faq-side .section-title { margin: 6px 0 12px; font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.faq-side p { color: var(--muted); }
.faq-help { position: relative; margin-top: 26px; padding: 18px; border-radius: 4px; background: #fff; box-shadow: 0 14px 28px -20px rgba(13, 38, 84, .5); transform: rotate(-2deg); }
.faq-help::before { content: ""; position: absolute; top: -11px; left: 50%; width: 80px; height: 22px; translate: -50% 0; background: rgba(252, 160, 26, .55); transform: rotate(-4deg); }
.faq-help b { display: block; font-family: var(--font); font-weight: 600; font-size: 1.15rem; color: var(--orange); }
.btn-line { margin-top: 12px; background: #06C755; color: #fff; }
.btn-line:hover { background: #05A948; }
.faq { position: relative; padding: 10px 26px 10px 54px; border-radius: 8px; background: #fff; box-shadow: 0 14px 28px -20px rgba(13, 38, 84, .5); }
.faq::before { content: ""; position: absolute; left: 38px; top: 0; bottom: 0; width: 2px; background: rgba(var(--orange-rgb), .35); }
.faq details + details { border-top: 1.5px dashed var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-weight: 500; color: var(--ink); transition: color .25s; }
.faq summary::-webkit-details-marker { display: none; }
/* +/× drawn with two bars so it sits dead-centre */
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--orange); background: linear-gradient(var(--orange), var(--orange)) center / 11px 2px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 2px 11px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary { color: var(--orange); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; font-family: var(--font); font-weight: 500; color: var(--navy); }
.faq a { color: var(--orange); }
@media (max-width: 900px) {
  .faq-split { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .faq { padding: 6px 18px 6px 40px; }
  .faq::before { left: 26px; }
}

/* ---------- Contact ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.topic { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.topic h3 { font-size: 1.1rem; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--sand); color: var(--ink); font-size: .88rem; transition: background .2s, color .2s, border-color .2s; }
.chips button:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.callout { margin-top: 18px; padding: 22px 26px; border-radius: var(--radius); background: var(--orange-50); border: 1px dashed rgba(var(--orange-rgb), .6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.callout p { color: var(--ink); }
.callout p strong { display: block; font-size: 1.12rem; font-weight: 600; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.contact-info { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--navy); color: #fff; }
.contact-info h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.contact-info > p { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.contact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .ci { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--amber); }
.contact-list .ci svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* brand-coloured app icons (filled glyphs) */
.contact-list .ci-line, .contact-list .ci-facebook, .contact-list .ci-tiktok, .contact-list .ci-lemon8 { border-radius: 50%; color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
.contact-list .ci-line svg, .contact-list .ci-facebook svg, .contact-list .ci-tiktok svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.contact-list .ci-line { background: #06C755; }
.contact-list .ci-facebook { background: #1877F2; }
.contact-list .ci-tiktok { background: #000; }
.contact-list .ci-tiktok svg { width: 19px; height: 19px; filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.contact-list .ci-lemon8 { background: #F7EF00; }
.contact-list .ci-lemon8 img { width: 34px; height: auto; }
.contact-list small { display: block; color: rgba(255, 255, 255, .55); font-size: .78rem; }
.contact-list a, .contact-list span { color: #fff; }
.contact-list a:hover { color: var(--amber); }
.form-card { padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.form-card h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 6px; }
.form-card > p { color: var(--muted); font-size: .92rem; margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 500; color: var(--ink); }
.field label .req { color: var(--orange); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--sand); color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(var(--orange-rgb), .15); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #D93B3B; background: #FFF6F6; }
.field .error { font-size: .78rem; color: #D93B3B; min-height: 1em; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.form-actions small { color: var(--muted); font-size: .8rem; max-width: 300px; }
.form-success { display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-sm); background: #EAF6EE; color: #1F6B3A; font-size: .92rem; }
.form-success.is-visible { display: block; animation: fadeUp .45s var(--ease); }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; height: 400px; background: var(--sand); border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.socials { display: flex; gap: 8px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35); color: #fff; transition: background .25s, border-color .25s, transform .25s; }
.socials a:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.socials svg, .socials img { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Footer (on the landscape) ---------- */
/* ---------- Legal pages (privacy policy) ---------- */
.banner-legal { min-height: clamp(360px, 36vw, 440px); }
.legal { max-width: 820px; margin: 0 auto; color: var(--ink); }
.legal-meta { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--sand); color: var(--muted); font-size: .88rem; margin-bottom: 22px; }
.legal h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--navy); margin: 36px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 10px 0; display: grid; gap: 6px; }
.legal li { position: relative; padding-left: 22px; }
.legal li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.legal strong { font-weight: 500; }
.legal a { color: var(--orange); }
.legal-contact { padding: 20px 24px; border-radius: var(--radius); background: var(--sand); }
.fill-in { background: #FFF1B8; color: #8A5A00; padding: 0 6px; border-radius: 6px; }
.footer-bottom p + p::before { content: "·"; margin: 0 8px; }
.footer-bottom a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
.footer-bottom a:hover { color: var(--amber); text-decoration-color: var(--amber); }

/* night sky: twinkling stars, crescent moon, lanterns rising over a glowing That Luang */
.footer-night { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #061636 0%, #0B2A6B 50%, #13409A 85%, #1A4FB5 100%); }
.footer-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* moon: glowing halo + faint ring, cratered crescent disc, a wisp of cloud drifting past */
.footer-moon { position: absolute; right: 7%; top: 28px; width: 78px; height: 78px; filter: drop-shadow(0 0 16px rgba(255, 228, 160, .65)); }
.footer-moon::before { content: ""; position: absolute; inset: -52px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 190, .32) 0%, rgba(255, 214, 140, .12) 38%, transparent 68%); animation: moon-halo 6s ease-in-out infinite; }
.footer-moon::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(255, 236, 190, .14); }
.footer-moon-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 62%, rgba(206, 160, 82, .45) 0 7%, transparent 8%),
    radial-gradient(circle at 44% 80%, rgba(206, 160, 82, .35) 0 5%, transparent 6%),
    radial-gradient(circle at 22% 38%, rgba(206, 160, 82, .3) 0 4%, transparent 5%),
    radial-gradient(circle at 34% 28%, #FFFDF2 0%, #FFEDB8 45%, #F2C774 100%);
  -webkit-mask: radial-gradient(circle at 74% 34%, transparent 41%, #000 42%);
  mask: radial-gradient(circle at 74% 34%, transparent 41%, #000 42%);
}
@keyframes moon-halo { 50% { transform: scale(1.12); opacity: .75; } }
.footer-moon-cloud { position: absolute; right: 3%; top: 84px; width: 170px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(196, 186, 255, .38), transparent); filter: blur(3px); animation: moon-cloud 22s ease-in-out infinite alternate; }
@keyframes moon-cloud { to { transform: translateX(-90px); } }
.footer-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .7); animation: footer-twinkle ease-in-out infinite; }
@keyframes footer-twinkle { 50% { opacity: .15; transform: scale(.6); } }
.footer-lantern { position: absolute; bottom: -40px; width: 15px; height: 19px; border-radius: 5px 5px 7px 7px; background: radial-gradient(circle at 50% 70%, #FFE08A, #FF9A2E 55%, #D2541A); box-shadow: 0 0 18px 6px rgba(255, 150, 50, .45); animation: footer-rise linear infinite; }
.footer-lantern::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 4px; translate: -50% 0; background: #FFF3B0; border-radius: 50%; filter: blur(1px); }
@keyframes footer-rise {
  0% { transform: translate(0, 0) rotate(-3deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(20px, -200px) rotate(4deg); }
  90% { opacity: .9; }
  100% { transform: translate(-8px, -420px) rotate(-3deg) scale(.6); opacity: 0; }
}
/* compact one-row layout: brand left · stupa centre · socials right */
.footer-night .site-footer { padding-top: 26px; padding-bottom: 14px; }
.footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.footer-brandblock { display: flex; align-items: center; gap: 16px; text-align: left; padding-bottom: 64px; }
.footer-stupa-wrap { position: relative; }
/* warm glow on the ground under the stupa so it doesn't float */
.footer-stupa-wrap::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -26px; width: 190%; height: 90px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(252, 160, 26, .38), rgba(238, 101, 36, .12) 55%, transparent); pointer-events: none; }
.footer-stupa { display: block; width: clamp(240px, 22vw, 310px); height: auto; filter: drop-shadow(0 0 30px rgba(252, 160, 26, .5)); }
.footer-night .site-footer .socials { justify-content: flex-end; margin-top: 0; padding-bottom: 64px; }
/* footer logo = spinning seal (ring text turns, AA mark stays upright) */
.footer-seal { position: relative; flex: none; display: inline-grid; place-items: center; width: 96px; height: 96px; color: #FFE7A8; filter: drop-shadow(0 0 22px rgba(252, 160, 26, .35)); transition: transform .4s var(--ease); }
.footer-seal:hover { transform: scale(1.06); }
.footer-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.footer-seal-mark { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 0 24px rgba(252, 160, 26, .45); }
.footer-seal-mark img { width: 38px; height: 38px; }
.footer-brand { font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; line-height: 1.2; color: #fff; }
.footer-night .footer-tagline { margin-top: 6px; font-size: .88rem; letter-spacing: .26em; color: #FFE7A8; }
.footer-night .socials { gap: 10px; }
/* brand-coloured app icons */
/* idle: icons hop one after another like a wave; hover: springy pop */
.footer-night .socials a { width: 44px; height: 44px; border: 0; color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); animation: social-hop 3.2s var(--ease) infinite; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.footer-night .socials a:nth-child(2) { animation-delay: .15s; }
.footer-night .socials a:nth-child(3) { animation-delay: .3s; }
.footer-night .socials a:nth-child(4) { animation-delay: .45s; }
.footer-night .socials a:hover { animation-play-state: paused; transform: scale(1.18); }
@keyframes social-hop { 0%, 30%, 100% { translate: 0 0; } 12% { translate: 0 -10px; } 22% { translate: 0 2px; } }
.footer-night .socials svg, .footer-night .socials img { width: 22px; height: 22px; }
.socials .s-line { background: #06C755; }
.socials .s-line:hover { box-shadow: 0 10px 24px -6px rgba(6, 199, 85, .75); }
.socials .s-facebook { background: #1877F2; }
.socials .s-facebook:hover { box-shadow: 0 10px 24px -6px rgba(24, 119, 242, .75); }
.socials .s-tiktok { background: #000; }
.socials .s-tiktok svg { width: 19px; height: 19px; filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.socials .s-tiktok:hover { box-shadow: 0 10px 24px -6px rgba(254, 44, 85, .6); }
.footer-night .socials .s-lemon8 { background: #F7EF00; }
.socials .s-lemon8 img, .footer-night .socials .s-lemon8 img { width: 34px; height: auto; }
.socials .s-lemon8:hover { box-shadow: 0 10px 24px -6px rgba(247, 239, 0, .7); }
@media (max-width: 900px) {
  .footer-row { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .footer-stupa-wrap { order: -1; }
  .footer-stupa { width: 230px; }
  .footer-brandblock, .footer-night .site-footer .socials { padding-bottom: 0; }
  .footer-night .site-footer .socials { justify-content: center; margin-bottom: 16px; }
  .footer-moon { right: 6%; top: 18px; width: 56px; height: 56px; }
  .footer-moon-cloud { top: 62px; width: 120px; }
}
.footer-night .footer-bottom { flex-direction: row; align-items: center; gap: 4px 0; margin-top: 0; padding: 14px 0 4px; border-top-color: rgba(255, 255, 255, .14); }
.site-footer { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--pad) 28px; color: #fff; text-align: center; }
.footer-stamp { position: absolute; left: var(--pad); top: clamp(40px, 5vw, 64px); width: 120px; height: 120px; color: #fff; opacity: .85; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.footer-script { position: absolute; right: var(--pad); top: clamp(36px, 5vw, 60px); font-size: 1.5rem; font-weight: 300; font-style: italic; line-height: 1.15; text-align: left; transform: rotate(-8deg); opacity: .92; }
.footer-script span { display: block; }
.footer-script::after { content: ""; display: block; width: 60px; height: 2px; margin: 10px 0 0 30px; background: #fff; opacity: .7; }
.footer-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-logo svg { width: 46px; height: 46px; }
.footer-logo .brand-name { font-size: 1.9rem; letter-spacing: .22em; }
.footer-tagline { margin-top: 10px; letter-spacing: .18em; color: rgba(255, 255, 255, .9); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 26px auto 0; max-width: 760px; font-size: .92rem; }
.footer-links a { color: rgba(255, 255, 255, .88); }
.footer-links a:hover { color: var(--amber); }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 14px; font-size: .88rem; color: rgba(255, 255, 255, .8); }
.footer-contact a:hover { color: var(--amber); }
.site-footer .socials { justify-content: center; margin-top: 18px; }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .8rem; color: rgba(255, 255, 255, .7); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; text-align: center; } /* centered: the floating LINE button covers the right corner */

/* floating contact: one button that fans out LINE / Facebook / Maps */
.float-contact { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab-toggle { position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--orange), var(--amber)); box-shadow: 0 14px 30px -10px rgba(238, 101, 36, .8); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.fab-toggle:hover { transform: scale(1.08); }
.fab-toggle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange); animation: fab-ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes fab-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.fab-toggle svg, .fab-toggle img { position: absolute; width: 28px; height: 28px; fill: #fff; transition: transform .35s var(--ease), opacity .25s; }
.fab-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.float-contact.is-open .fab-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.float-contact.is-open .fab-close { opacity: 1; transform: none; }
.float-contact.is-open .fab-toggle::before { animation: none; opacity: 0; }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-item { display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility .35s; }
.float-contact.is-open .fab-item { opacity: 1; visibility: visible; transform: none; }
.float-contact.is-open .fab-item:nth-child(3) { transition-delay: 0s; }
.float-contact.is-open .fab-item:nth-child(2) { transition-delay: .05s; }
.float-contact.is-open .fab-item:nth-child(1) { transition-delay: .1s; }
.fab-label { background: #fff; color: var(--ink); font-size: .85rem; font-weight: 500; white-space: nowrap; padding: 6px 14px; border-radius: 999px; box-shadow: 0 8px 20px -10px rgba(13, 38, 84, .5); }
.fab-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); transition: transform .25s var(--ease); }
.fab-item:hover .fab-ic { transform: scale(1.1); }
.fab-ic svg, .fab-ic img { width: 24px; height: 24px; fill: currentColor; }
.fab-line .fab-ic { background: #06C755; }
.fab-fb .fab-ic { background: #1877F2; }
.fab-map .fab-ic { background: #fff; }
.fab-map .fab-ic svg, .fab-map .fab-ic img { width: 26px; height: 26px; }
.fc-phone { background: var(--orange); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-content: center; text-align: center; padding: 80px var(--pad); }
.notfound .code { font-size: clamp(6rem, 18vw, 11rem); font-weight: 700; line-height: 1; color: var(--orange); }
.notfound p { color: var(--muted); margin: 10px 0 26px; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.banner-content > * { animation: fadeUp .8s var(--ease) backwards; }
.banner-content > *:nth-child(2) { animation-delay: .1s; }
.banner-content > *:nth-child(3) { animation-delay: .2s; }
.banner-content > *:nth-child(4) { animation-delay: .3s; }
.banner-content > *:nth-child(5) { animation-delay: .4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  .header-line { display: none; }
  .main-nav { position: absolute; left: var(--pad); right: var(--pad); top: calc(100% + 6px); padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav a[data-nav] { display: block; padding: 12px 14px; border-radius: 12px; font-size: 1.02rem; color: var(--ink); }
  .main-nav a[data-nav]:hover { color: var(--orange); }
  .main-nav a[data-nav].is-active { background: var(--orange-50); color: var(--orange); }
  .main-nav a[data-nav]::after { display: none; }
  .nav-mobile-cta { display: flex; width: 100%; margin-top: 12px; }
}
@media (max-width: 1080px) {
  .steps.five { grid-template-columns: repeat(3, 1fr); }
  .topic-grid { grid-template-columns: 1fr; }
  .tour-layout { grid-template-columns: 1fr; }
  .tour-aside { position: static; }
  .places { grid-template-columns: 1fr; }
  .car-nav { margin-top: 18px; }
  .footer-stamp, .footer-script { display: none; }
}
@media (max-width: 900px) {
  .intro-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .quick-book { grid-template-columns: 1fr 1fr; border-radius: 24px; padding: 12px; gap: 6px; }
  .qb-field { padding: 8px 10px; }
  .qb-field + .qb-field { border-left: 0; }
  .qb-field:first-child { grid-column: 1 / -1; }
  .quick-book .btn { grid-column: 1 / -1; }
  .car-track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .quick-book { width: calc(100% - 28px); grid-template-columns: 1fr; }
  .steps, .steps.five, .form-grid { grid-template-columns: 1fr; }
  .car-track { grid-auto-columns: 78%; }
  .fab-toggle { width: 52px; height: 52px; }
  .fab-ic { width: 44px; height: 44px; }
  .itin { padding-left: 20px; }
  .itin li { grid-template-columns: 34px 1fr; padding: 12px; gap: 10px; }
  .itin .ic { width: 34px; height: 34px; }
  .itin li::before { left: -17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
@media (max-width: 640px) { .header-cta { display: none; } }
.footer-logo img { width: 46px; height: 46px; }

/* ---------- Brand logo (AA Inter Tour) ---------- */
.brand-logo { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); }
.brand-logo img { height: 46px; width: auto; }
.site-header.is-scrolled .brand-logo { padding: 4px 10px; }
.site-header.is-scrolled .brand-logo img { height: 38px; }
.brand-logo-lg { padding: 12px 20px; border-radius: 22px; }
.brand-logo-lg img { height: 92px; }
@media (max-width: 640px) { .brand-logo img { height: 38px; } }
/* ---------- Hanging logo tab (flush with the top edge) ---------- */
.site-header .brand { align-self: flex-start; margin-top: -18px; }
.site-header .brand-logo {
  padding: 14px 16px 16px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .55);
  transition: padding .3s var(--ease), border-radius .3s;
}
.site-header .brand-logo img { height: 64px; transition: height .3s var(--ease); }
.site-header.is-scrolled .brand { margin-top: -10px; }
.site-header.is-scrolled .brand-logo { padding: 8px 12px 10px; border-radius: 0 0 16px 16px; }
.site-header.is-scrolled .brand-logo img { height: 42px; }
.site-header .header-inner { align-items: flex-start; }
.site-header .main-nav, .site-header .header-right { align-self: center; }
@media (max-width: 1200px) { .site-header .main-nav { align-self: auto; } }
@media (max-width: 640px) {
  .site-header .brand-logo { padding: 10px 12px 12px; border-radius: 0 0 16px 16px; }
  .site-header .brand-logo img { height: 46px; }
}
/* palette lock: white card, light-blue panels behind white cards */
.tour-layout .itin li:not(.is-place) { background: #fff; }

/* ==========================================================================
   Contact page — night-sky hero + live LINE chat; animated route map (parking page)
   ========================================================================== */


/* parking page — details: 3 pinned photos + pastel sticky notes */
.pk-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.pk-board { position: relative; height: 440px; }
.pk-snap { position: absolute; margin: 0; background: #fff; padding: 10px 10px 40px; box-shadow: 0 22px 40px -22px rgba(13, 38, 84, .55); transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1); }
.pk-snap::before { content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 90px; height: 24px; translate: -50% 0; background: rgba(252, 160, 26, .55); rotate: -4deg; }
.pk-snap img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pk-snap figcaption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-family: var(--font); font-weight: 500; }
.pk-snap.s1 { width: 62%; left: 0; top: 34px; rotate: -5deg; z-index: 1; }
.pk-snap.s2 { width: 52%; right: 0; top: 0; rotate: 4deg; z-index: 3; }
.pk-snap.s3 { width: 50%; right: 6%; bottom: 0; rotate: -2deg; z-index: 2; }
.pk-snap:hover { rotate: 0deg; z-index: 4; }
.pk-stamp { position: absolute; left: 4%; bottom: 14px; z-index: 5; width: 124px; height: 124px; border-radius: 50%; border: 3px dashed var(--orange); background: rgba(255, 248, 238, .95); color: var(--orange); display: grid; place-content: center; text-align: center; font-weight: 600; font-size: .8rem; line-height: 1.2; rotate: -12deg; }
.pk-stamp b { display: block; white-space: nowrap; font-size: 1.05rem; font-weight: 800; }
.pk-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.pk-notes li { position: relative; padding: 16px 16px 18px; font-size: .92rem; color: var(--ink); box-shadow: 0 10px 18px -12px rgba(13, 38, 84, .45); }
.pk-notes li::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: var(--orange); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.pk-notes b { display: block; margin-bottom: 2px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; }
.pk-notes li:nth-child(4n+1) { background: #FFF1B8; rotate: -2deg; }
.pk-notes li:nth-child(4n+2) { background: #DDEEFF; rotate: 1.5deg; }
.pk-notes li:nth-child(4n+3) { background: #FFE0CC; rotate: 1deg; }
.pk-notes li:nth-child(4n) { background: #E2F4DA; rotate: -1.5deg; }
.pk-notes li.wide { grid-column: span 2; }

/* parking page — free shuttle as one big bus ticket with a tear-off stub */
.pk-pass { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; max-width: 980px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -26px rgba(13, 38, 84, .55); }
/* punched notch at the foot of the tear line */
.pk-pass::after { content: ""; position: absolute; z-index: 1; right: 240px; bottom: -14px; width: 28px; height: 28px; translate: 50% 0; border-radius: 50%; background: var(--paper); }
.pk-pass-main { padding: 22px 32px 28px; }
.pk-pass-bar { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 12px 32px; background: var(--navy); color: #fff; font-size: .8rem; letter-spacing: .16em; }
.pk-pass-bar b { font-size: 1rem; font-weight: 600; letter-spacing: .04em; }
.pk-pass-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.pk-pass-route small, .pk-pass-meta dt { display: block; font-size: .7rem; letter-spacing: .16em; color: var(--muted); }
.pk-pass-route strong { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 500; line-height: 1.15; color: var(--navy-700); }
.pk-pass-route p:last-child { text-align: right; }
.pk-pass-route .mid { display: grid; justify-items: center; color: var(--orange); }
.pk-pass-route .mid svg { width: 60px; height: 32px; }
.pk-pass-route .mid span { font-family: var(--font); font-size: .85rem; }
.pk-pass-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 0; padding-top: 18px; border-top: 2px dashed var(--line); }
.pk-pass-meta dd { margin: 0; font-weight: 500; color: var(--ink); }
.pk-pass-meta dd.price { font-size: 1.4rem; font-weight: 700; color: var(--orange); }
.pk-pass-list { display: grid; gap: 4px; margin-top: 18px; font-family: var(--font); font-weight: 500; color: var(--navy); }
.pk-pass-list li::before { content: "✓ "; color: var(--orange); }
.pk-pass-stub { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 28px 22px; text-align: center; background: var(--orange-50); border-left: 2px dashed var(--line); }
.pk-pass-stub .hand { font-size: 1.35rem; rotate: -4deg; }
.pk-pass-stub small { color: var(--muted); font-size: .82rem; }
.pk-barcode { width: 150px; height: 46px; opacity: .7; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px); }
@media (max-width: 900px) {
  .pk-detail { grid-template-columns: 1fr; }
  .pk-board { height: 340px; max-width: 520px; width: 100%; margin: 0 auto; }
  .pk-stamp { width: 100px; height: 100px; font-size: .7rem; } .pk-stamp b { font-size: .9rem; }
  .pk-pass { grid-template-columns: 1fr; }
  .pk-pass::after { display: none; }
  .pk-pass-main { padding: 18px 20px 24px; } .pk-pass-bar { padding-inline: 20px; }
  .pk-pass-meta { grid-template-columns: 1fr 1fr; }
  .pk-pass-stub { border-left: 0; border-top: 2px dashed var(--line); }
}
@media (max-width: 560px) {
  .pk-notes { grid-template-columns: 1fr; } .pk-notes li.wide { grid-column: auto; }
  .pk-pass-route { grid-template-columns: 1fr; text-align: center; } .pk-pass-route p:last-child { text-align: center; }
}

/* ---------- Illustrated area map (contact page): top-down, vehicles drive in their lanes ---------- */
.cm-frame { position: relative; height: 520px; border-radius: var(--radius-lg); overflow: hidden; background: #CDE7BE; box-shadow: var(--shadow); }
.cm-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-cloud { animation: cm-cloud linear infinite; }
.cm-cs1 { animation-duration: 60s; } .cm-cs2 { animation-duration: 80s; animation-delay: -40s; }
@keyframes cm-cloud { from { transform: translateX(-300px); } to { transform: translateX(1400px); } }
.cm-ripple { animation: cm-flow 6s linear infinite; }
@keyframes cm-flow { to { stroke-dashoffset: -120; } }
.cm-tree { transform-box: fill-box; transform-origin: center; animation: cm-sway 4s ease-in-out infinite; }
.cm-tree:nth-of-type(3n) { animation-delay: -1.3s; } .cm-tree:nth-of-type(3n+1) { animation-delay: -2.6s; }
@keyframes cm-sway { 50% { transform: scale(1.04) rotate(2deg); } }
.cm-flag { transform-box: fill-box; transform-origin: left center; animation: cm-wave 1.2s ease-in-out infinite alternate; }
@keyframes cm-wave { to { transform: skewY(-8deg) scaleX(.9); } }
.cm-pin { transform-box: fill-box; animation: cm-bob 2s ease-in-out infinite; }
@keyframes cm-bob { 50% { transform: translateY(-7px); } }
.cm-ring { transform-box: fill-box; transform-origin: center; animation: cm-ring 2s ease-out infinite; }
@keyframes cm-ring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.cm-barrier { transform-box: fill-box; transform-origin: left center; animation: cm-gate 6s ease-in-out infinite; }
@keyframes cm-gate { 0%, 35%, 65%, 100% { transform: rotate(0); } 42%, 58% { transform: rotate(-70deg); } }
.cm-blink { animation: cm-blink 1s steps(1) infinite; }
@keyframes cm-blink { 50% { opacity: .2; } }
.cm-legend { position: absolute; z-index: 2; right: 16px; top: 16px; display: grid; gap: 4px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); font-size: .75rem; box-shadow: var(--shadow-sm); }
.cm-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: middle; }
.cm-note { margin-top: 10px; font-size: .82rem; color: var(--muted); }
@media (max-width: 640px) {
  .cm-frame { height: 380px; }
  .cm-legend { display: none; }
}

/* ==========================================================================
   About page — the AA van drives down a road as you scroll through the 5 steps
   ========================================================================== */
.ab-twinkle { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ab-twinkle i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8); animation: footer-twinkle ease-in-out infinite; }
.ab-journey { position: relative; margin-top: 10px; }
.ab-road { position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; translate: -50% 0; border-radius: 999px; background: #5F6A80; }
.ab-road::after { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; translate: -50% 0; background: repeating-linear-gradient(#F2C94C 0 14px, transparent 14px 26px); }
.ab-done { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 999px; background: linear-gradient(var(--orange), var(--amber)); box-shadow: 0 0 16px rgba(252, 160, 26, .6); }
.ab-van { position: absolute; z-index: 2; left: 50%; top: 0; width: 26px; translate: -50% -50%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.ab-steps { display: grid; gap: 26px; }
.ab-step { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; }
.ab-step:nth-child(odd) .ab-card { grid-column: 1; }
.ab-step:nth-child(even) .ab-card { grid-column: 3; }
.ab-num { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #C9D3E2; color: var(--muted); font-weight: 700; transition: background .4s, border-color .4s, color .4s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.ab-step.is-reached .ab-num { background: var(--orange); border-color: #FFD2B8; color: #fff; transform: scale(1.15); }
.ab-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -20px rgba(13, 38, 84, .35); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, opacity .8s var(--ease); }
.ab-card:hover { transform: translateY(-4px); border-color: rgba(238, 101, 36, .5); }
.ab-card img { width: 58px; height: 58px; flex: none; }
.ab-card b { display: block; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.ab-card small { color: var(--muted); }
.ab-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ab-val { padding: 24px; border-radius: var(--radius-lg); background: var(--sand); }
.ab-ic { display: inline-block; font-size: 1.8rem; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ab-val:hover .ab-ic { transform: scale(1.25) rotate(-10deg); }
.ab-val h3 { margin-top: 6px; font-size: 1.05rem; }
.ab-val p { color: var(--muted); font-size: .92rem; }
.ab-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--navy-700), var(--navy)); color: #fff; }
.ab-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.ab-cta h2 em { font-style: normal; color: var(--amber); }
.ab-line { display: inline-flex; padding: 14px 26px; border-radius: 999px; background: #06C755; color: #fff; font-weight: 500; box-shadow: 0 14px 30px -12px rgba(6, 199, 85, .8); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ab-line:hover { transform: translateY(-3px); }
@media (max-width: 860px) {
  .ab-road, .ab-van { left: 28px; }
  .ab-step { grid-template-columns: 56px 1fr; }
  .ab-step .ab-num { grid-column: 1; }
  .ab-step:nth-child(n) .ab-card { grid-column: 2; }
}

/* ---------- Real photos & clips (vertical video + photo gallery with lightbox) ---------- */
/* TikTok clips: one row of phone frames that slides itself (JS: initTikTokSlider) */
.tt-slider { position: relative; }
.tt-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 14px 4px 18px; scrollbar-width: none; }
.tt-track::-webkit-scrollbar { display: none; }
.tt-item { flex: 0 0 calc((100% - 72px) / 4); min-width: 230px; margin: 0; scroll-snap-align: start; }
.tt-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #0E1630; box-shadow: 0 24px 50px -28px rgba(15, 47, 99, .65), 0 0 0 7px #fff, 0 0 0 8px var(--line); }
.tt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tt-nav { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
/* gallery: one row of polaroids sliding endlessly; JS wraps the photos in .gallery-track, clones the set and sets --set-w */
/* runs edge to edge of the page (out of the container) so the photos can be big */
.gallery { --h: clamp(260px, 30vw, 380px); overflow: hidden; margin-inline: calc(50% - 50vw); padding: 16px 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gallery-track { display: flex; width: max-content; }
.gallery.is-running .gallery-track { animation: trust-marquee var(--marquee-dur, 40s) linear infinite; }
.gallery.is-running:hover .gallery-track { animation-play-state: paused; }
/* no JS / reduced motion: swipeable row */
.gallery:not(.is-running) { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.gallery button { flex: none; height: var(--h); margin-right: 18px; padding: 0; border: 6px solid #fff; border-radius: 4px; background: #fff; box-shadow: var(--card-shadow); cursor: zoom-in; rotate: -1.5deg; transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), scale .4s cubic-bezier(.34, 1.56, .64, 1); }
.gallery button:nth-child(even) { rotate: 1.5deg; }
.gallery button:hover { rotate: 0deg; scale: 1.05; }
.gallery img { width: auto; height: 100%; object-fit: cover; }
.gallery button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.lightbox { max-width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius); background: #0E1630; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(7, 14, 34, .86); }
.lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 48px); margin: 0 auto; object-fit: contain; }
.lightbox p { padding: 12px 18px; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.lightbox-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
@media (max-width: 900px) {
  .tt-item { flex-basis: calc((100% - 24px) / 2); min-width: 200px; }
  .gallery { --h: 240px; }
  .gallery button { margin-right: 12px; }
}
/* ==========================================================================
   Postcard theme — cream dotted paper, taped polaroids, handwriting, tickets
   ========================================================================== */
:root { --paper: #FFFFFF; --tape: transparent; --hand: var(--font); --spring: cubic-bezier(.34, 1.56, .64, 1); --card-shadow: 0 14px 28px -20px rgba(13, 38, 84, .5); }
.page-card { background-color: var(--paper); background-image: radial-gradient(rgba(19, 35, 61, .06) 1px, transparent 1px); background-size: 18px 18px; }
.hand { font-family: var(--hand); font-weight: 600; color: var(--orange); }

/* headings: handwritten eyebrow + deep navy titles */
.eyebrow { font-family: var(--hand); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; text-transform: none; transform: rotate(-2deg); }
.eyebrow::before { width: 22px; height: 2px; }
.display, .section-title, .places-intro h2 { color: var(--navy-700); font-weight: 700; }
.places-intro .bar { display: none; }
.places-intro h2::before { content: "แนะนำเลย!"; display: block; font-family: var(--hand); font-size: 1.1rem; font-weight: 600; color: var(--orange); transform: rotate(-3deg); margin-bottom: 6px; }
.btn-orange { background: linear-gradient(135deg, var(--orange), var(--amber)); border: 0; }
.btn-orange:hover { background: linear-gradient(135deg, var(--orange-600), var(--orange)); }

/* home hero: copy + pinned polaroids + price stamp */
.pc-hero { padding: clamp(120px, 12vw, 150px) 0 clamp(36px, 5vw, 64px); }
.pc-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.pc-hero .hand { display: inline-block; font-size: 1.45rem; transform: rotate(-3deg); }
.pc-hero .hero-title { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.1; color: var(--navy-700); margin-top: 6px; }
.pc-hero .hero-title em { font-style: normal; color: var(--orange); }
.pc-hero .lead { margin-top: 14px; max-width: 480px; color: var(--muted); }
.pc-hero .hero-actions { margin-top: 26px; }
.pc-board { position: relative; height: 540px; }
.snap { position: absolute; margin: 0; background: #fff; padding: 10px 10px 40px; box-shadow: 0 22px 40px -22px rgba(13, 38, 84, .55); transition: transform .6s var(--spring); }
.snap img { width: 100%; height: 100%; object-fit: cover; }
.snap figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--hand); color: var(--ink); }
.snap::before { content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 90px; height: 24px; translate: -50% 0; background: var(--tape); transform: rotate(-4deg); }
.snap.s1 { width: 54%; height: 340px; left: 0; top: 40px; transform: rotate(-6deg); }
.snap.s2 { width: 56%; height: 250px; right: 0; top: 0; transform: rotate(5deg); z-index: 1; }
.snap.s3 { width: 46%; height: 270px; left: 40%; bottom: 0; transform: rotate(-2deg); z-index: 2; }
.pc-board:hover .s1 { transform: rotate(-9deg) translateX(-10px); }
.pc-board:hover .s2 { transform: rotate(8deg) translateX(10px); }
.pc-stamp { position: absolute; right: 1%; bottom: 8%; z-index: 3; width: 126px; height: 126px; border-radius: 50%; border: 3px dashed var(--orange); color: var(--orange); background: rgba(255, 248, 238, .9); display: grid; place-items: center; text-align: center; font-weight: 600; font-size: .85rem; line-height: 1.1; transform: rotate(-14deg); }
.pc-stamp b { display: block; font-size: 1.6rem; font-weight: 700; }
/* heroes are paper-coloured, so the header needs its own navy backing */
.site-header { background: rgba(26, 74, 154, .94); padding-block: 10px; }
.site-header .brand { margin-top: -10px; }
.site-header .brand-logo { padding: 8px 12px 10px; border-radius: 0 0 16px 16px; }
.site-header .brand-logo img { height: 46px; }

/* inner-page banner → paper hero: copy left, page photo as a taped polaroid right, badge as a stamp */
.banner { --edge: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); min-height: 0; padding: clamp(116px, 11vw, 140px) var(--edge) clamp(36px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; color: var(--ink); overflow: visible; }
.banner::before { display: none; }
.banner-content { grid-column: 1; grid-row: 1; padding: 0; max-width: 640px; }
.banner-media { position: relative; inset: auto; z-index: 0; grid-column: 2; grid-row: 1; height: clamp(240px, 28vw, 360px); background: #fff; padding: 10px 10px 14px; box-shadow: 0 22px 40px -22px rgba(13, 38, 84, .55); transform: rotate(2.5deg); transition: transform .6s var(--spring); }
.banner-media:hover { transform: rotate(0deg); }
.banner-media::before { content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 100px; height: 26px; translate: -50% 0; background: var(--tape); transform: rotate(-4deg); }
.banner-media img { animation: none; }
.banner .hero-title { color: var(--navy-700); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.12; }
.banner .hero-title em { color: var(--orange); }
.banner .hero-title.is-long { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.banner .lead { color: var(--muted); font-size: 1rem; }
.banner .eyebrow { color: var(--orange); }
.banner .eyebrow::before { background: var(--orange); }
.banner .btn-ghost { border-color: var(--navy); color: var(--navy); }
.banner .btn-ghost:hover { background: var(--navy); color: #fff; }
.breadcrumb { color: var(--muted); font-family: var(--hand); }
.breadcrumb a:hover { color: var(--orange); }
.banner .meta-chips span { background: #fff; border: 1.5px dashed var(--line); color: var(--ink); }
.banner-badge { top: auto; right: calc(var(--edge) - 18px); bottom: clamp(14px, 3vw, 34px); z-index: 2; width: 124px; height: 124px; padding: 8px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1.15; background: rgba(255, 248, 238, .94); color: var(--orange); border: 3px dashed var(--orange); box-shadow: none; transform: rotate(-12deg); }
.banner-badge strong { font-size: 1.15rem; }
.banner-badge span { font-size: .68rem; color: var(--orange); }
.banner-legal .banner-media { height: clamp(200px, 22vw, 280px); }


/* polaroid photos */
.about-strip figure { overflow: visible; background: #fff; padding: 10px 10px 40px; border-radius: 4px; height: 270px; box-shadow: var(--card-shadow); transition: transform .5s var(--spring); }
.about-strip figure:nth-child(1) { transform: rotate(-2.5deg); }
.about-strip figure:nth-child(2) { transform: rotate(2deg); }
.about-strip figure:hover { transform: rotate(0) translateY(-6px); }
.about-strip figure:hover img { transform: none; }
.about-strip figure::before, .about-media::before { content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 84px; height: 22px; translate: -50% 0; background: var(--tape); transform: rotate(-4deg); }
.about-strip figcaption { left: 0; right: 0; bottom: 9px; text-align: center; color: var(--ink); font-family: var(--hand); text-shadow: none; }
.about-media { overflow: visible; border-width: 10px 10px 34px; border-radius: 4px; transform: rotate(-2deg); }
.about-badge { right: -18px; bottom: -30px; width: 124px; height: 124px; padding: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; background: rgba(255, 248, 238, .94); color: var(--orange); border: 3px dashed var(--orange); transform: rotate(-12deg); }
.about-badge strong { font-size: 1.05rem; }

/* bus ticket for prices (perforated notches + dashed tear lines) */
.about-price { background: #fff; color: var(--ink); border-radius: 18px; padding: 22px 26px; gap: 8px; box-shadow: var(--card-shadow); border-top: 8px solid var(--navy);
  -webkit-mask: radial-gradient(circle 11px at 0 55%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 55%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 55%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 55%, #0000 98%, #000) right / 51% 100% no-repeat; }
.about-price::before { content: "TICKET · AA PARKING"; font-size: .72rem; font-weight: 500; letter-spacing: .2em; color: var(--navy); }
.about-price div { border-bottom: 2px dashed var(--line); padding-bottom: 8px; align-items: baseline; }
.about-price dt { color: var(--muted); }
.about-price dd { color: var(--orange); font-size: 1.3rem; font-weight: 700; }

/* cards: white notes, tilted alternately */
.step { border: 0; box-shadow: var(--card-shadow); transition: rotate .4s var(--spring), translate .4s var(--spring); }
.steps .step:nth-child(odd) { rotate: -1.3deg; }
.steps .step:nth-child(even) { rotate: 1.3deg; }
.steps .step:hover { rotate: 0deg; translate: 0 -6px; }
.step::before { content: counter(step); font-family: var(--hand); font-weight: 600; font-size: 2.2rem; }
.about-ring { border: 2px dashed rgba(var(--orange-rgb), .45); box-shadow: var(--card-shadow); }
.about-steps li:nth-child(odd) .about-ring { rotate: -4deg; }
.about-steps li:nth-child(even) .about-ring { rotate: 4deg; }

@media (max-width: 900px) {
  .pc-hero { padding-top: 110px; }
  .pc-hero-grid { grid-template-columns: 1fr; }
  .pc-board { height: 340px; max-width: 460px; width: 100%; margin: 10px auto 0; }
  .snap.s1 { height: 220px; } .snap.s2 { height: 150px; } .snap.s3 { height: 160px; }
  .pc-stamp { width: 92px; height: 92px; font-size: .75rem; } .pc-stamp b { font-size: 1.3rem; }
  .banner { grid-template-columns: minmax(0, 1fr); padding-top: 104px; }
  .banner-media { grid-column: 1; grid-row: 2; height: 220px; width: calc(100% - 12px); margin: 6px auto 0; transform: rotate(1.5deg); }
  .banner-badge { right: 8px; bottom: 18px; width: 96px; height: 96px; }
  .banner-badge strong { font-size: .95rem; }
  .banner-badge span { font-size: .6rem; }
  .about-badge { right: -6px; bottom: -24px; width: 104px; height: 104px; }
  .about-badge strong { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .snap, .step, .about-strip figure { transition: none; } }

/* text-only banner (parking page): centred title, price stamp pressed beside it */
.banner-plain { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.banner-plain .banner-content { grid-column: 1; max-width: 860px; }
.banner-plain .breadcrumb { justify-content: center; }
.banner-plain .hand { display: table; margin: 0 auto 6px; font-size: 1.4rem; rotate: -3deg; }
.banner-plain .plain-title { position: relative; display: inline-block; }
.banner-plain .hero-title { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.banner-plain .banner-badge { top: -6px; right: -170px; bottom: auto; }
.banner-plain .banner-badge strong { font-size: 1.5rem; line-height: 1.1; }
.banner-plain .lead { margin-inline: auto; }
.banner-plain .hero-actions { justify-content: center; }
@media (max-width: 1100px) { .banner-plain .banner-badge { right: -130px; } }
@media (max-width: 900px) {
  .banner-plain .plain-title { display: block; }
  .banner-plain .banner-badge { position: static; margin: 18px auto 0; }
  .banner-plain .banner-badge strong { font-size: 1.2rem; }
  .banner-plain .hand { font-size: 1.15rem; }
}
@media (max-width: 560px) { .tt-item { flex-basis: 78%; min-width: 0; } }

/* home "all-in-one" list: a clipboard checklist in handwriting */
.clipboard { position: relative; padding: 42px clamp(20px, 3vw, 30px) 24px; border-radius: 10px; border-top: 14px solid #B8865A; background: #fff; box-shadow: 0 20px 40px -26px rgba(13, 38, 84, .55); }
.clipboard::before { content: ""; position: absolute; top: -26px; left: 50%; width: 120px; height: 34px; translate: -50% 0; border-radius: 8px; background: linear-gradient(#9AA6B8, #6B7A93); box-shadow: 0 4px 8px -3px rgba(0, 0, 0, .4); }
.clipboard .section-title { margin: 4px 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.clipboard ul { columns: 2; column-gap: 28px; }
.clipboard li { display: flex; gap: 10px; padding: 7px 0; break-inside: avoid; border-bottom: 1.5px solid #E7EEF8; font-family: var(--font); font-weight: 500; font-size: .95rem; color: var(--navy); }
.clipboard li::before { content: "☑"; color: var(--orange); }
.clipboard-cta { margin-top: 22px; }
@media (max-width: 640px) { .clipboard ul { columns: 1; } }
/* photo and clipboard share one height (button lives inside the clipboard) */
#laos-complete .about-grid { align-items: stretch; }
#laos-complete .about-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
#laos-complete .clipboard { height: 100%; display: flex; flex-direction: column; }
#laos-complete .clipboard-cta { align-self: flex-start; margin-top: auto; }
#laos-complete .clipboard ul { margin-bottom: 20px; }
@media (max-width: 900px) { #laos-complete .about-media { height: auto; aspect-ratio: 4 / 3; min-height: 0; } }

/* ==========================================================================
   Tour pages — itinerary as a travel-diary page, aside as ticket / tags / sticky note
   ========================================================================== */
.tour-layout .day { position: relative; padding: 24px 28px 18px 72px; border-radius: 8px; background: #fff; box-shadow: 0 20px 40px -26px rgba(13, 38, 84, .55); }
.tour-layout .day::before { content: ""; position: absolute; left: 54px; top: 0; bottom: 0; width: 2px; background: rgba(var(--orange-rgb), .35); }
/* punched binder holes */
.tour-layout .day::after { content: ""; position: absolute; left: 18px; top: 28px; bottom: 28px; width: 14px; background: radial-gradient(circle, var(--paper) 5px, rgba(19, 35, 61, .12) 5.5px, transparent 6.5px) 0 0 / 14px 36px repeat-y; }
.tour-layout .day + .day { margin-top: 26px; }
.tour-layout .day-head { gap: 8px; margin-bottom: 6px; }
.tour-layout .day-head .badge { padding: 0; border-radius: 0; background: none; color: var(--orange); font-family: var(--font); font-size: 1.3rem; font-weight: 600; }
.tour-layout .day-head .badge::after { content: " ·"; }
.tour-layout .day-head h3 { font-family: var(--font); font-size: 1.3rem; font-weight: 600; color: var(--orange); }
.tour-layout .itin { gap: 0; padding-left: 0; }
.tour-layout .itin li + li { box-shadow: 0 -1.5px 0 #EDF2F9; }
.tour-layout .itin::before, .tour-layout .itin li::before { display: none; }
.tour-layout .itin li, .tour-layout .itin li:not(.is-place), .tour-layout .itin li.is-place { grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; }
.tour-layout .itin .ic, .tour-layout .itin li.is-place .ic, .tour-layout .itin li.is-train .ic { width: 28px; height: 28px; border-radius: 0; background: none; color: var(--navy); }
.tour-layout .itin li.is-place .ic { color: var(--orange); }
.tour-layout .itin li.is-place b { font-family: var(--font); font-weight: 600; font-size: 1.1rem; color: var(--navy); }
.tour-layout .itin p { font-size: .88rem; }
.tour-layout .notice { border: 0; border-radius: 4px; background: transparent; padding: 4px 0; font-size: .86rem; color: var(--muted); }

/* aside: program facts become a bus ticket */
.tour-aside .aside-card { border: 0; box-shadow: 0 16px 32px -24px rgba(13, 38, 84, .55); }
.tour-aside .aside-card:has(.facts) { padding: 0 0 18px; overflow: hidden; border-radius: 16px; }
.tour-aside .aside-card:has(.facts) h3 { margin: 0; padding: 12px 18px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 500; letter-spacing: .14em; }
.tour-aside .aside-card:has(.facts) .facts { margin: 0 0 16px; padding: 12px 18px 14px; border-bottom: 2px dashed var(--line); }
.tour-aside .aside-card:has(.facts) .facts li { border-bottom-width: 1.5px; }
.tour-aside .aside-card:has(.facts) .btn { width: calc(100% - 36px); margin-inline: 18px; }
.tour-aside .aside-card .btn-ghost { border-color: #06C755; background: #06C755; color: #fff; }
.tour-aside .aside-card .btn-ghost:hover { background: #05A948; border-color: #05A948; }
/* add-ons: tags with an orange edge */
.tour-aside .aside-card:has(.addon-list) { padding: 0; background: transparent; box-shadow: none; }
.tour-aside .aside-card:has(.addon-list) h3 { font-family: var(--font); font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.tour-aside .addon-list li { border: 0; border-left: 4px solid var(--orange); border-radius: 6px; background: #fff; box-shadow: 0 10px 18px -14px rgba(13, 38, 84, .5); }
/* parking: yellow sticky note */
.tour-aside .aside-card:not(:has(.facts)):not(:has(.addon-list)) { border-radius: 2px; background: #FFF1B8; rotate: 1.5deg; }
.tour-aside .aside-card:not(:has(.facts)):not(:has(.addon-list)) h3 { font-family: var(--font); font-weight: 600; color: var(--navy); }
@media (max-width: 640px) {
  .tour-layout .day { padding: 20px 16px 14px 50px; }
  .tour-layout .day::before { left: 38px; }
  .tour-layout .day::after { left: 10px; }
}

/* tour pages — banner is one big postcard: photo left with "Greetings from …", writing side right with postage stamp + postmark */
.banner.banner-postcard { width: calc(100% - 2 * var(--pad)); max-width: calc(var(--max) - 2 * var(--pad)); margin: 0 auto clamp(16px, 3vw, 32px); padding: 0; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; overflow: hidden; border-radius: 8px; background: #FFFDF8; box-shadow: 0 30px 60px -32px rgba(13, 38, 84, .6); rotate: -.6deg; }
/* top gap lives on the card wrapper, so the margin cannot collapse out and show the navy backdrop */
.page-card:has(.banner-postcard) { padding-top: clamp(112px, 10vw, 132px); }
.banner-postcard .banner-media { grid-column: 1; grid-row: 1; height: auto; min-height: 380px; padding: 0; background: none; box-shadow: none; transform: none; border-right: 2px dashed var(--line); }
.banner-postcard .banner-media:hover { transform: none; }
.banner-postcard .banner-media::before { display: none; }
.banner-postcard .banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-greet { position: absolute; z-index: 1; left: 22px; bottom: 18px; color: #fff; font-family: var(--font); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.05; text-shadow: 0 3px 14px rgba(0, 0, 0, .55); rotate: -5deg; }
.banner-postcard .banner-content { grid-column: 2; grid-row: 1; max-width: none; padding: 30px 30px 28px; }
.banner-postcard .breadcrumb { padding-right: 150px; }
.banner-postcard .hero-title, .banner-postcard .hero-title.is-long { margin-top: 44px; font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.banner-postcard .hero-actions { margin-top: 20px; }
/* duration = postage stamp, code = round postmark beside it */
.banner-postcard .banner-badge { top: 16px; right: 16px; bottom: auto; width: 76px; height: auto; padding: 8px 4px; border: 4px solid #FFFDF8; outline: 4px dotted var(--orange); outline-offset: -2px; border-radius: 0; background: var(--orange); color: #fff; rotate: 5deg; transform: none; }
.banner-postcard .banner-badge strong { font-size: 1rem; line-height: 1.15; color: #fff; }
.banner-postcard .banner-badge span { position: absolute; top: 18px; right: 84px; width: 70px; height: 70px; padding: 6px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(26, 74, 154, .4); color: rgba(26, 74, 154, .65); font-size: .55rem; line-height: 1.2; overflow-wrap: anywhere; rotate: -18deg; }
@media (max-width: 900px) {
  .banner.banner-postcard { grid-template-columns: minmax(0, 1fr); rotate: 0deg; }
  .page-card:has(.banner-postcard) { padding-top: 96px; }
  .banner-postcard .banner-media { grid-row: 1; min-height: 240px; width: auto; margin: 0; border-right: 0; border-bottom: 2px dashed var(--line); }
  .banner-postcard .banner-content { grid-column: 1; grid-row: 2; padding: 22px 18px; }
  .banner-postcard .banner-badge { top: 12px; right: 12px; bottom: auto; width: 70px; height: auto; }
  .banner-postcard .banner-badge strong { font-size: .9rem; }
  .banner-postcard .banner-badge span { display: none; }
  .banner-postcard .breadcrumb { padding-right: 0; }
  .banner-postcard .hero-title, .banner-postcard .hero-title.is-long { margin-top: 6px; }
}

/* ==========================================================================
   Contact page — 2 columns on one screen: LINE card + channel list | map + how to get here
   ========================================================================== */
.cx { padding: clamp(116px, 11vw, 140px) 0 clamp(48px, 6vw, 80px); }
.cx-title { margin: 6px 0 26px; font-size: clamp(2rem, 4vw, 3rem); color: var(--navy-700); }
.cx-title em { font-style: normal; color: var(--orange); }
.cx-status { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 5px 14px; border-radius: 99px; vertical-align: middle; background: rgba(6, 199, 85, .14); color: #0A8F44; font-size: .85rem; font-weight: 500; letter-spacing: 0; }
.cx-status i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cx-status.is-closed { background: rgba(var(--orange-rgb), .12); color: var(--orange); }
.cx-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(24px, 3vw, 36px); align-items: start; }
.cx-side { display: grid; gap: 16px; }
.cx-line { display: grid; gap: 4px; padding: 26px; border-radius: 20px; background: #06C755; color: #fff; box-shadow: 0 22px 40px -24px rgba(13, 38, 84, .6); rotate: -1.5deg; }
.cx-line > svg { width: 42px; height: 42px; fill: #fff; }
.cx-line b { font-size: 1.45rem; font-weight: 600; }
.cx-line small { opacity: .9; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cx-chips a { padding: 7px 14px; border-radius: 99px; background: #fff; color: #059A44; font-size: .88rem; font-weight: 500; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .35); transition: background .2s, color .2s; }
.cx-chips a:hover { background: #FFE45C; color: var(--ink); }
.cx-open { display: block; margin-top: 16px; padding: 12px; border-radius: 99px; background: #fff; color: #059A44; font-weight: 600; text-align: center; transition: transform .25s var(--ease); }
.cx-open:hover { transform: translateY(-2px); }
.cx-list { padding: 8px 18px; border-radius: 14px; background: #fff; box-shadow: 0 14px 26px -20px rgba(13, 38, 84, .5); }
.cx-list li + li { border-top: 1.5px dashed var(--line); }
.cx-list li > a, .cx-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: .92rem; }
.cx-list .ib { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.cx-list .ib svg { width: 18px; height: 18px; fill: #fff; }
.cx-list .ib img { width: 26px; height: auto; }
.cx-list .v { margin-left: auto; text-align: right; font-size: .82rem; color: var(--muted); }
.cx-list .v a:hover, .cx-list li > a:hover { color: var(--orange); }
.cx-map .cm-frame { margin: 0; height: 520px; }
@media (max-width: 640px) { .cx-map .cm-frame { height: 340px; } .cx-map .cm-frame svg { width: 190%; left: -70%; } .cx-map .cm-legend { display: none; } }
.cx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.cx-steps li { padding: 14px; border-radius: 8px; background: #fff; box-shadow: 0 10px 18px -14px rgba(13, 38, 84, .5); font-size: .88rem; color: var(--muted); }
.cx-steps b { display: block; font-family: var(--font); font-weight: 600; font-size: 1.05rem; color: var(--orange); }
.cx-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.cx-nav .cm-note { margin: 0; }
@media (max-width: 960px) { .cx-grid { grid-template-columns: minmax(0, 1fr); } .cx-line { rotate: 0deg; } }
@media (max-width: 640px) { .cx { padding-top: 104px; } .cx-steps { grid-template-columns: 1fr; } .cx-status { margin: 10px 0 0; } }.cx-list .ib[style*="#111"] svg { filter: drop-shadow(-1.2px -1px 0 #25F4EE) drop-shadow(1.2px 1px 0 #FE2C55); }

/* ==========================================================================
   Header — cream paper bar (same paper as the page), dashed edge, handwritten underline on the active page, green LINE button
   ========================================================================== */
.site-header, .site-header.is-scrolled { background: rgba(255, 253, 248, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 2px dashed var(--line); box-shadow: 0 10px 24px -20px rgba(13, 38, 84, .5); }
.site-header .brand { margin-top: 0; align-self: center; }
.site-header .brand-logo, .site-header.is-scrolled .brand-logo { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.site-header .brand-logo img, .site-header.is-scrolled .brand-logo img { height: 46px; }
.site-header .header-inner { align-items: center; }
.main-nav a[data-nav] { color: var(--ink); }
.main-nav a[data-nav]:hover { color: var(--orange); }
.main-nav a[data-nav].is-active { color: var(--orange); font-weight: 600; }
.main-nav a[data-nav]::after { left: 0; right: 0; bottom: -2px; height: 8px; border-radius: 0; transform: scaleX(0); transform-origin: left; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 25 1, 50 8, 98 3' fill='none' stroke='%23EE6524' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@media (min-width: 1201px) {
  .main-nav ul, .site-header.is-scrolled .main-nav ul { gap: clamp(14px, 2vw, 30px); padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .main-nav a[data-nav] { padding: 8px 2px; color: var(--ink); }
  .main-nav a[data-nav]::after { display: block; }
  .main-nav a[data-nav].is-active { font-weight: 600; color: var(--orange); }
  .nav-blob { display: none; }
}
/* icon via mask (no inline <svg> in components: live-server injects its script at the first </svg> of a body-less file) */
.btn-line .line-ic { width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: url("/assets/images/icons/line-white.svg") center / contain no-repeat; mask: url("/assets/images/icons/line-white.svg") center / contain no-repeat; }
.site-header .btn-line { margin-top: 0; }
.nav-toggle { border-color: var(--line); background: #fff; }
.nav-toggle span { background: var(--navy); }

/* English: hide the Thai source text until it has been swapped */
html.i18n-pending body { opacity: 0; }
html body { transition: opacity .2s; }
html[data-lang="en"] .places-intro h2::before { content: "Our picks!"; }

/* bottom bar: copyright left, privacy right (stacks centred on phones) */
.footer-night .footer-bottom { justify-content: space-between; text-align: left; }
.footer-night .footer-bottom p + p::before { content: none; }
@media (max-width: 640px) { .footer-night .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 4px; } }

/* floating contact: 7 channels — LINE stays closest to the button */
.fab-tel .fab-ic { background: var(--orange); }
.fab-wa .fab-ic { background: #25D366; }
.fab-tt .fab-ic { background: #111; }
.fab-tt .fab-ic img { filter: drop-shadow(-1.2px -1px 0 #25F4EE) drop-shadow(1.2px 1px 0 #FE2C55); }
.fab-l8 .fab-ic { background: #F7EF00; }
.fab-l8 .fab-ic img { width: 34px; height: auto; }
.fab-menu { gap: 8px; }
.float-contact.is-open .fab-item:nth-child(7) { transition-delay: 0s; }
.float-contact.is-open .fab-item:nth-child(6) { transition-delay: .03s; }
.float-contact.is-open .fab-item:nth-child(5) { transition-delay: .06s; }
.float-contact.is-open .fab-item:nth-child(4) { transition-delay: .09s; }
.float-contact.is-open .fab-item:nth-child(3) { transition-delay: .12s; }
.float-contact.is-open .fab-item:nth-child(2) { transition-delay: .15s; }
.float-contact.is-open .fab-item:nth-child(1) { transition-delay: .18s; }
@media (max-height: 640px) { .fab-ic { width: 40px; height: 40px; } .fab-menu { gap: 6px; } }

/* floating contact: icons only (label kept for screen readers) */
.fab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }

/* ---------- Mobile / iPad polish ---------- */
/* handwritten note above "โปรแกรมยอดนิยม": Mali's Thai glyphs sit low, give the line room */
.places-intro h2::before { line-height: 1.6; margin-bottom: 14px; }
.places-intro h2 { line-height: 1.25; }
/* keep Thai phrases in the home hero from breaking mid-phrase on phones */
@media (max-width: 900px) { .pc-hero .nw { white-space: nowrap; } }
@media (max-width: 420px) { .pc-hero .hero-title { font-size: 1.75rem; } }
/* iPad portrait: hero board centred, a little larger */
@media (min-width: 641px) and (max-width: 900px) { .pc-board { max-width: 560px; height: 400px; } .snap.s1 { height: 260px; } .snap.s2 { height: 180px; } .snap.s3 { height: 190px; } }

/* language switch: Thai / UK flag circles — the active one gets an orange ring, the other is faded */
.lang-flags { display: inline-flex; gap: 6px; }
.lang-flags button { width: 36px; height: 36px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #fff; cursor: pointer; overflow: hidden; outline: 2.5px solid transparent; outline-offset: 0; box-shadow: 0 6px 14px -8px rgba(13, 38, 84, .5); opacity: .5; transition: opacity .2s, outline-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.lang-flags button img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lang-flags button:hover { opacity: .85; }
html:not([data-lang="en"]) .lang-flags .l-th, html[data-lang="en"] .lang-flags .l-en { opacity: 1; outline-color: var(--orange); transform: scale(1.05); cursor: default; }
@media (max-width: 420px) { .lang-flags button { width: 32px; height: 32px; } }
/* ===== Home hero · mobile option A: one big photo first (2026-10-20) ===== */
.pc-chips { display: none; }
@media (max-width: 640px) {
  .pc-hero { padding-top: 96px; }
  .pc-hero-grid { display: flex; flex-direction: column; gap: 26px; }
  .pc-board { order: -1; height: auto; max-width: none; margin: 8px 6px 0; }
  .pc-board .snap.s1, .pc-board .snap.s3 { display: none; }
  .pc-board .snap.s2, .pc-board:hover .snap.s2 { position: relative; inset: auto; width: 100%; height: 250px; padding: 8px 8px 36px; transform: rotate(-2deg); }
  .pc-board .snap.s2 figcaption { font-size: 1rem; }
  .pc-board .pc-stamp { right: -4px; bottom: -20px; width: 88px; height: 88px; }
  .pc-hero .lead { display: none; }
  .pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
  .pc-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 6px; border-radius: 99px; background: #fff; border: 1.5px dashed rgba(var(--orange-rgb), .55); color: var(--navy-700); font-size: .82rem; font-weight: 500; }
  .pc-chips img { width: 20px; height: 20px; object-fit: contain; }
  .pc-hero .hero-actions { margin-top: 18px; gap: 8px; flex-wrap: nowrap; }
  .pc-hero .hero-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 12px 8px; font-size: clamp(.78rem, 3.6vw, .92rem); white-space: nowrap; }
  .pc-hero .hero-actions .arrow { display: none; }
}
/* ===== About steps · mobile option C: route ticket (2026-10-20) ===== */
@media (max-width: 640px) {
  .about-steps { display: block; position: relative; margin-top: 28px; padding: 64px 18px 6px; border-radius: 20px; color: #fff; box-shadow: 0 22px 40px -24px rgba(13, 38, 84, .7);
    background: radial-gradient(circle at 0 54px, var(--paper) 11px, transparent 12px), radial-gradient(circle at 100% 54px, var(--paper) 11px, transparent 12px), var(--navy-700); }
  .about-steps::before { display: block; content: "ROUTE · NONG KHAI → LAOS"; position: absolute; left: 22px; right: 22px; top: 20px; height: auto; padding-bottom: 14px; background: none; border-radius: 0; opacity: .8; border-bottom: 2px dashed rgba(255, 255, 255, .25); font-size: .72rem; letter-spacing: .12em; }
  .about-steps::after { content: "5 จุด"; position: absolute; right: 22px; top: 14px; font-family: var(--hand); font-weight: 600; color: #FFC36B; }
  .about-steps li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 0 0 16px; }
  .about-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 0; border-left: 3px dotted rgba(255, 255, 255, .35); }
  .about-steps .about-ring, .about-steps li:hover .about-ring { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; border: 0; box-shadow: none; rotate: none; transform: none; }
  .about-ring::after { display: none; }
  .about-ring svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .about-steps li:hover .about-ring svg { stroke: var(--navy); }
  .about-steps li:last-child .about-ring { background: var(--orange); }
  .about-steps li:last-child .about-ring svg { stroke: #fff; }
  .about-steps b { margin: 0; font-size: .95rem; line-height: 1.35; color: #fff; }
  .about-steps b::before { content: "STOP " counter(about); display: block; font-size: .72rem; font-weight: 400; letter-spacing: .08em; opacity: .65; }
  .about-steps li:last-child b::before { content: "STOP " counter(about) " · ถึงแล้ว!"; }
  html[data-lang="en"] .about-steps::after { content: "5 stops"; }
  html[data-lang="en"] .about-steps li:last-child b::before { content: "STOP " counter(about) " · Arrived!"; }
}
/* Popular programs heading on one line on phones */
@media (max-width: 640px) { .places-intro h2 br { display: none; } }

/* ===== Custom trip steps · mobile option C: colourful sticky notes (2026-10-20) ===== */
@media (max-width: 640px) {
  #plan-trip .steps.five { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  #plan-trip .step { padding: 16px 12px 14px; border-radius: 4px; box-shadow: 0 12px 20px -14px rgba(13, 38, 84, .5); }
  #plan-trip .step::before { position: absolute; top: -12px; right: 10px; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: var(--navy-700); color: #fff; font-family: inherit; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
  #plan-trip .step h3 { font-size: .92rem; line-height: 1.3; margin-bottom: 4px; }
  #plan-trip .step p { font-size: .78rem; line-height: 1.5; }
  #plan-trip .step:nth-child(1) { background: #FFF1B8; rotate: -1.5deg; }
  #plan-trip .step:nth-child(2) { background: #FFE0CC; rotate: 1.5deg; }
  #plan-trip .step:nth-child(3) { background: #DDF1E4; rotate: 1deg; }
  #plan-trip .step:nth-child(4) { background: #DCE8FF; rotate: -1.5deg; }
  #plan-trip .step:nth-child(5) { grid-column: 1 / -1; background: #FFE4EC; rotate: -.6deg; }
}@media (max-width: 640px) { #plan-trip .section-title em { display: block; } }

/* ===== Parking rate tickets · phones, 3+ tickets: auto-advancing swipe row (class added by initRateSlider) ===== */
.pk-dots { display: none; }
@media (max-width: 640px) {
  .pk-stubs.is-slider { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin-inline: -16px; padding: 18px 16px 26px; gap: 16px; scrollbar-width: none; }
  .pk-stubs.is-slider::-webkit-scrollbar { display: none; }
  .pk-stubs.is-slider .pk-stub { flex: 0 0 76%; min-width: 0; scroll-snap-align: center; }
  .pk-stubs.is-slider + .pk-dots { display: flex; gap: 6px; justify-content: center; margin-top: 2px; }
  .pk-dots i { width: 7px; height: 7px; border-radius: 9px; background: rgba(13, 38, 84, .2); transition: width .3s, background .3s; }
  .pk-dots i.on { width: 20px; background: var(--orange); }
}
/* ===== Tour filter tabs · phones: one swipeable row (2026-10-20) ===== */
@media (max-width: 640px) {
  .filter-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 18px; margin-inline: -16px; padding: 8px 32px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent); }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tabs button { flex: none; white-space: nowrap; font-size: .92rem; }
}
/* ===== Plain banners (tours / parking / service) · phones option A: left aligned, stamp beside the heading, city chips (2026-10-20) ===== */
.banner-chips { display: none; }
@media (max-width: 640px) {
  .banner-plain.banner-mob { justify-items: stretch; text-align: left; }
  .banner-mob .banner-content { position: relative; }
  .banner-mob .breadcrumb { justify-content: flex-start; }
  .banner-mob .hand { display: block; margin: 0 100px 6px 0; text-align: left; rotate: -2deg; }
  .banner-mob .plain-title { position: static; }
  .banner-mob .hero-title { font-size: 1.6rem; line-height: 1.22; }
  .banner-mob .banner-badge { position: absolute; top: 34px; right: 0; margin: 0; width: 86px; height: 86px; }
  .banner-mob .banner-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
  .banner-mob .banner-chips li { padding: 4px 11px; border-radius: 99px; background: #fff; border: 1.5px dashed rgba(var(--orange-rgb), .55); color: var(--navy-700); font-size: .8rem; }
  .banner-mob .lead { margin: 12px 0 0; font-size: .92rem; }
  .banner-mob .hero-actions .btn:first-child { flex-grow: 1.35; }
  .banner-mob .hero-actions { justify-content: stretch; flex-wrap: nowrap; gap: 8px; margin-top: 18px; }
  .banner-mob .hero-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 12px 6px; font-size: clamp(.74rem, 3.4vw, .9rem); white-space: nowrap; }
}@media (max-width: 640px) {
  .banner-mob .hand { white-space: normal; max-width: calc(100% - 100px); }
  .banner-mob .hero-actions .btn { white-space: normal; line-height: 1.25; text-align: center; }
  .banner-mob .banner-badge strong { font-size: 1.05rem; line-height: 1.05; }
  .banner-mob .banner-badge span { font-size: .56rem; line-height: 1.15; }
}@media (max-width: 640px) { html[data-lang="en"] .banner-mob .banner-badge strong { font-size: .9rem; white-space: nowrap; } }

/* ===== TikTok clips · phones: centre each clip, neighbours peek on both sides (2026-10-20) ===== */
@media (max-width: 560px) {
  .tt-track { gap: 14px; }
  .tt-track::before, .tt-track::after { content: ""; flex: 0 0 calc(11% - 14px); }
  .tt-item { flex-basis: 78%; scroll-snap-align: center; }
}
/* Contact LINE quick questions: two rows on phones */
@media (max-width: 640px) {
  .cx-line { padding: 22px 16px; }
  .cx-chips { gap: 5px; }
  .cx-chips a { padding: 6px 9px; font-size: clamp(.7rem, 3.2vw, .8rem); white-space: nowrap; }
}
html[data-lang="en"] .pc-stamp { font-size: .7rem; }
@media (max-width: 640px) { html[data-lang="en"] .pc-stamp { font-size: .6rem; } }

/* Plain banners on phones: hand-written line on one line; stamp moves down beside the heading */
@media (max-width: 640px) {
  .banner-mob .hand { max-width: none; margin-right: 0; white-space: nowrap; font-size: clamp(.8rem, 3.9vw, 1.1rem); }
  .banner-mob .banner-badge { position: static; float: right; margin: 4px -4px 6px 10px; shape-outside: circle(50%); }
  .banner-mob .banner-chips { clear: both; }
}
@media (max-width: 640px) { html[data-lang="en"] .cx-chips a:nth-child(5) { order: 2; } html[data-lang="en"] .cx-chips a:nth-child(n+3):nth-child(-n+4) { order: 3; } }

/* Looping animations stay still until the visitor moves/scrolls/taps (or 8s) — see main.js motion-on */
html:not(.motion-on) .trust.is-running .trust-track, html:not(.motion-on) .gallery.is-running .gallery-track { animation-play-state: paused; }
html:not(.motion-on) .fab-toggle::before { animation: none; opacity: 0; }

/* ==========================================================================
   Redesign 2026-10-21 — orange (primary) · blue (accent) · white (ground)
   White header with a blue info bar, blue footer with an orange edge,
   home page: full-width photo hero → booking box → photo service cards → blue package band
   ========================================================================== */
.site-header, .site-header.is-scrolled { padding: 0; background: rgba(255, 255, 255, .97); border-bottom: 3px solid var(--orange); box-shadow: 0 8px 24px -16px rgba(18, 58, 125, .45); }
.topbar { background: var(--navy-700); color: #D6E2F5; font-size: .82rem; line-height: 1; max-height: 40px; overflow: hidden; transition: max-height .3s var(--ease); }
.site-header.is-scrolled .topbar { max-height: 0; }
.topbar-inner { max-width: var(--max); margin-inline: auto; padding: 10px var(--pad); display: flex; justify-content: space-between; gap: 18px; }
.tb-right { display: flex; gap: 22px; }
.tb-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tb-item::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--amber); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.tb-pin { --ic: url("/assets/images/icons/map-pin.svg"); }
.tb-tel { --ic: url("/assets/images/icons/phone-white.svg"); }
.tb-tel:hover { color: #fff; }
.tb-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.site-header .header-inner { padding: 6px var(--pad); align-items: center; }
.site-header .brand, .site-header.is-scrolled .brand { margin-top: 0; align-self: center; }
.site-header .brand-logo, .site-header.is-scrolled .brand-logo { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.site-header .brand-logo img, .site-header.is-scrolled .brand-logo img { height: 42px; }
/* slim bar: smaller flags and CTA to match the 42px logo */
.site-header .lang-flags button { width: 30px; height: 30px; }
.site-header .header-cta { padding: 7px 16px; font-size: .86rem; }
.header-cta .line-ic { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("/assets/images/icons/line-white.svg") center / contain no-repeat; mask: url("/assets/images/icons/line-white.svg") center / contain no-repeat; }
@media (min-width: 1201px) {
  .main-nav ul, .site-header.is-scrolled .main-nav ul { gap: 6px; }
  .main-nav a[data-nav] { padding: 5px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--navy); font-size: .86rem; transition: color .2s, border-color .2s, background .2s; }
  .main-nav a[data-nav]::after { display: none; }
  .main-nav a[data-nav]:hover, .main-nav a[data-nav].is-active { color: var(--orange); border-color: var(--orange); background: var(--orange-50); font-weight: 500; }
}
@media (max-width: 900px) { .topbar { display: none; } }
@media (max-width: 640px) { .site-header .brand-logo img, .site-header.is-scrolled .brand-logo img { height: 38px; } }

/* footer */
.site-foot { position: relative; padding-top: clamp(30px, 4vw, 52px); background: var(--navy-700); color: #D6E2F5; font-size: .92rem; }
/* wavy top edge: the page's white comes down in a wave, with an orange band just under it */
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(30px, 4vw, 52px); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V40C1220 78 1000 74 760 48S300 10 0 44Z' fill='%23EE6524'/%3E%3Cpath d='M0 0H1440V32C1220 70 1000 66 760 40S300 2 0 36Z' fill='%23fff'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; }
.foot-grid { max-width: var(--max); margin-inline: auto; padding: 14px var(--pad) 22px; }
/* brand block centred: round logo badge, name, one line of copy, socials */
.foot-brand { display: grid; justify-items: center; gap: 6px; text-align: center; }
.foot-logo { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6); }
.foot-logo img { width: 50px; height: auto; }
.foot-name { margin-top: 2px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #fff; }
.foot-name span { color: var(--amber); }
.foot-desc { max-width: 64ch; text-wrap: balance; }
.foot-brand .socials { justify-content: center; margin-top: 6px; }
.foot-h { margin-bottom: 12px; font-size: 1rem; font-weight: 600; color: #fff; }
.site-foot ul { display: grid; gap: 8px; }
.site-foot a:hover { color: var(--amber); }
/* footer socials: every channel in its own app colour */
.site-foot .socials { flex-wrap: wrap; gap: 10px; }
.site-foot .socials a { width: 42px; height: 42px; border: 0; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
.site-foot .socials a:hover { transform: translateY(-3px); }
.site-foot .socials img { width: 20px; height: 20px; }
.site-foot .s-line { background: #06C755; }
.site-foot .s-facebook { background: #1877F2; }
.site-foot .s-tiktok { background: #000; }
.site-foot .s-tiktok img { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.site-foot .s-lemon8 { background: #F7EF00; }
.site-foot .s-lemon8 img { width: 30px; height: auto; }
.site-foot .s-wa { background: #25D366; }
.site-foot .s-tel { background: var(--orange); }
.site-foot .s-mail { background: #EA4335; }
.site-foot .s-map { background: #fff; }
.site-foot .s-map img { width: 22px; height: 22px; }
/* a ring in each app's colour keeps spreading out from the icon */
.site-foot .socials a { position: relative; }
.site-foot .socials a::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--ring), .9); animation: social-ring 2.4s ease-out infinite; pointer-events: none; }
.site-foot .s-line { --ring: 6, 199, 85; }
.site-foot .s-facebook { --ring: 24, 119, 242; }
.site-foot .s-tiktok { --ring: 254, 44, 85; }
.site-foot .s-lemon8 { --ring: 247, 239, 0; }
.site-foot .s-wa { --ring: 37, 211, 102; }
.site-foot .s-tel { --ring: 238, 101, 36; }
.site-foot .s-mail { --ring: 234, 67, 53; }
.site-foot .s-map { --ring: 255, 255, 255; }
@keyframes social-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.foot-bottom { max-width: var(--max); margin-inline: auto; padding: 12px calc(var(--pad) + 64px) 14px var(--pad); border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; font-size: .82rem; color: #AFC2E2; }
@media (max-width: 640px) { .foot-bottom { flex-direction: column; text-align: center; padding: 12px var(--pad) 76px; } }

/* ---------- Home ---------- */
.home .page-card { background: #fff; }
.hm-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(150px, 14vw, 190px) 0 clamp(100px, 11vw, 160px); }
.hm-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, 0) 70%); }
.hm-hero h1, .hm-sub, .hm-kicker { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
/* wavy bottom edge that keeps flowing like water: a soft back wave drifts right, the white front wave drifts left.
   Each wave tile is seamless (Q…T), and each layer moves exactly one tile width per loop so there is no jump */
.hm-hero::after, .banner.bn-center::after, .banner.bn-tall::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: clamp(44px, 6vw, 96px); pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62Q360 28 720 62T1440 62V100H0Z' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 1200px 100% repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 40Q360 0 720 40T1440 40V100H0Z' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") 0 100% / 1600px 100% repeat-x;
  animation: hero-wave-flow 16s linear infinite; }
@keyframes hero-wave-flow { to { background-position: -1200px 100%, 1600px 100%; } }
@media (prefers-reduced-motion: reduce) { .hm-hero::after, .banner.bn-center::after, .banner.bn-tall::after { animation: none; } }
.hm-hero-copy { position: relative; z-index: 1; }
/* living sky over the hero photo: soft clouds drift across, a small flock of birds flaps by */
.hm-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hm-cloud { position: absolute; top: var(--t); left: -40%; width: var(--w); height: calc(var(--w) * .28); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); filter: blur(6px); animation: hm-drift var(--s) linear var(--d) infinite; }
@keyframes hm-drift { to { left: 110%; } }
.hm-bird { position: absolute; top: var(--t); left: -60px; width: 26px; height: 10px; animation: hm-fly var(--s) linear var(--d) infinite; }
.hm-bird::before, .hm-bird::after { content: ""; position: absolute; top: 0; width: 13px; height: 10px; border-top: 2.5px solid rgba(20, 20, 30, .75); border-radius: 50% 50% 0 0; animation: hm-flap .5s ease-in-out infinite alternate; }
.hm-bird::before { left: 0; transform-origin: right bottom; }
.hm-bird::after { right: 0; transform-origin: left bottom; }
@keyframes hm-flap { to { transform: scaleY(.4); } }
@keyframes hm-fly { 0% { left: -60px; transform: translateY(0) scale(var(--z)); } 50% { transform: translateY(-30px) scale(var(--z)); } 100% { left: 105%; transform: translateY(10px) scale(var(--z)); } }
@media (prefers-reduced-motion: reduce) { .hm-sky { display: none; } }
.hm-kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--amber); font-size: .9rem; font-weight: 500; letter-spacing: .04em; }
.hm-kicker::before, .hm-kicker::after { content: ""; width: 26px; height: 1.5px; background: currentColor; }
.hm-hero h1 { margin: 12px 0 10px; color: #fff; font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.hm-hero h1 em { display: block; font-style: normal; color: var(--amber); }
.hm-sub { max-width: 46ch; margin-bottom: 26px; font-size: clamp(1rem, 1.6vw, 1.15rem); color: #E4ECF8; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hm-btn-ghost { border-color: #fff; color: #fff; background: rgba(0, 0, 0, .2); }
.hm-btn-ghost:hover { background: #fff; color: var(--navy); }
.hm-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-badges li { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); line-height: 1.25; }
.hm-badge-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--orange-50); }
.hm-badge-ic img { width: 28px; height: 28px; }
.hm-badges b { display: block; font-size: .86rem; font-weight: 600; }
.hm-badges small { font-size: .74rem; color: var(--muted); }


.hm-head { max-width: 680px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.hm-eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.hm-head h2, .hm-h2 { margin: 6px 0 10px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; color: var(--navy); text-wrap: balance; }
.hm-head h2 em, .hm-h2 em { font-style: normal; color: var(--orange); }
.hm-head p, .hm-lead { color: var(--muted); }
.home .section.hm-sec { padding-block: clamp(56px, 7vw, 90px); }

.hm-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hm-svc-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 400px; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow); }
.hm-svc-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hm-svc-card:hover img { transform: scale(1.06); }
.hm-svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 58, 125, 0) 35%, rgba(18, 58, 125, .94)); }
.hm-svc-body { display: block; width: 100%; padding: 22px; }
.hm-svc-body b { display: block; font-size: 1.45rem; font-weight: 700; }
.hm-svc-body small { display: block; margin: 4px 0 14px; font-size: .9rem; color: #DCE6F5; }
.hm-svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; color: #DCE6F5; }
.hm-svc-foot strong { font-size: 1.3rem; font-weight: 700; color: var(--amber); }
/* parking rates as bus tickets: name on the left, price on a tear-off stub with punched notches */
.hm-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 0; }
.hm-rates div { --stub: 104px; display: grid; grid-template-columns: 1fr var(--stub); border-radius: 14px; background: var(--blue-50);
  -webkit-mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.hm-rates dt { align-self: center; padding: 20px 18px; border-right: 2px dashed #C9D6EA; font-weight: 500; font-size: 1.05rem; color: var(--navy); }
.hm-rates dt small { display: block; font-size: .7rem; font-weight: 400; letter-spacing: .16em; color: var(--muted); }
.hm-rates dd { margin: 0; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: 1.45rem; font-weight: 700; line-height: 1.1; text-align: center; }
.hm-rates dd small { display: block; font-size: .72rem; font-weight: 400; }
.hm-rates div:nth-child(2) dd { background: var(--navy); }

.home .section.hm-pk-band { padding-block: clamp(56px, 7vw, 90px); background: linear-gradient(180deg, var(--navy-700), var(--navy)); }
.hm-pk-band .hm-head h2 { color: #fff; }
.hm-pk-band .hm-head p { color: #D6E2F5; }
.hm-pk-band .hm-eyebrow { color: var(--amber); }
.hm-pk-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 66px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.hm-pk-row::-webkit-scrollbar { display: none; }
.hm-pk { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--ink); transition: transform .3s var(--ease); }
.hm-pk:hover { transform: translateY(-4px); }
.hm-pk-img { position: relative; display: block; aspect-ratio: 4 / 3; }
.hm-pk-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-tag { position: absolute; top: 12px; left: 12px; padding: 3px 11px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .78rem; font-weight: 500; }
.hm-pk-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.hm-pk-body b { font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
.hm-pk-body small { color: var(--muted); font-size: .85rem; }
.hm-more { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .88rem; font-weight: 500; color: var(--orange); }
.hm-pk-body small + .hm-more { margin-top: 12px; }
.hm-car-nav { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.hm-car-nav .car-btn, .hm-car-nav .car-btn.next { border-color: rgba(255, 255, 255, .7); background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; }
.hm-car-nav .car-btn:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); }
.hm-center { margin-top: 26px; text-align: center; }

/* 5-step route as a map: map pins along a winding dashed road from the Thai side into Laos.
   Each pin's tip sits on the path: --x matches the path's x (of 1000), --y is the path's y (of 330) minus 74px */
.hm-map { position: relative; height: 340px; }
.hm-map-path { position: absolute; inset: 0; width: 100%; height: 330px; overflow: visible; }
.hm-map-path path { fill: none; stroke-linecap: round; }
.hm-map-path path:first-child { stroke: #C9D7EE; stroke-width: 10; }
.hm-map-path path:last-child { stroke: var(--orange); stroke-width: 3; stroke-dasharray: 10 10; }
.hm-map-flag { position: absolute; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.hm-map-flag img { width: 18px; height: 18px; border-radius: 50%; }
.hm-map-flag.is-th { left: 2%; background: var(--blue-50); color: var(--navy); }
.hm-map-flag.is-la { right: 2%; background: var(--orange-50); color: var(--orange); }
.hm-route { position: absolute; inset: 0; }
.hm-route li { position: absolute; left: var(--x); top: var(--y); width: 190px; translate: -50% 0; text-align: center; }
.hm-pin { display: block; width: 64px; height: 64px; margin: 0 auto 8px; padding: 4px; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: var(--orange); box-shadow: 0 12px 22px -10px rgba(238, 101, 36, .8); }
.hm-route li:nth-child(even) .hm-pin { background: var(--navy); box-shadow: 0 12px 22px -10px rgba(26, 74, 154, .8); }
.hm-pin img { width: 100%; height: 100%; border-radius: 50%; rotate: 45deg; background: #fff; }
.hm-route-txt { display: inline-block; white-space: nowrap; padding: 6px 12px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -10px rgba(19, 35, 61, .35); }
.hm-route small { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--orange); }
.hm-route b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--navy); }

.home .hm-tint { background: var(--blue-50); }

/* coloured home bands: wavy top + bottom edges (soft back wave + solid front wave, like the hero) cut with a mask;
   the band tucks under its neighbours by half a wave so the gaps don't grow */
.home .section.hm-pk-band, .home .section.hm-tint {
  --wv: clamp(34px, 5vw, 76px);
  --wv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 26C220 66 440 72 700 44S1200 0 1440 22V100H0Z' fill-opacity='.4'/%3E%3Cpath d='M0 52C240 86 480 92 740 64S1220 22 1440 44V100H0Z'/%3E%3C/svg%3E");
  --wv-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V76C1200 40 960 34 700 60S220 100 0 78Z' fill-opacity='.4'/%3E%3Cpath d='M0 0H1440V50C1200 14 960 8 700 36S240 80 0 52Z'/%3E%3C/svg%3E");
  margin-block: calc(var(--wv) * -.5);
  padding-block: calc(clamp(56px, 7vw, 90px) + var(--wv) * .6);
  -webkit-mask: var(--wv-top) top / 100% var(--wv) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wv) + 2px) no-repeat, var(--wv-bot) bottom / 100% var(--wv) no-repeat;
          mask: var(--wv-top) top / 100% var(--wv) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wv) + 2px) no-repeat, var(--wv-bot) bottom / 100% var(--wv) no-repeat;
}
/* the light-blue band waves the other way so the two don't look stamped */
.home .section.hm-tint {
  --wv-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 1440 0)'%3E%3Cpath d='M0 26C220 66 440 72 700 44S1200 0 1440 22V100H0Z' fill-opacity='.4'/%3E%3Cpath d='M0 52C240 86 480 92 740 64S1220 22 1440 44V100H0Z'/%3E%3C/g%3E%3C/svg%3E");
  --wv-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cg transform='matrix(-1 0 0 1 1440 0)'%3E%3Cpath d='M0 0H1440V76C1200 40 960 34 700 60S220 100 0 78Z' fill-opacity='.4'/%3E%3Cpath d='M0 0H1440V50C1200 14 960 8 700 36S240 80 0 52Z'/%3E%3C/g%3E%3C/svg%3E");
}
.hm-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.hm-lead { margin-bottom: 20px; }
.hm-plan { display: grid; gap: 10px; margin-bottom: 24px; counter-reset: pl; }
.hm-plan li { position: relative; padding: 12px 14px 12px 56px; border-radius: 14px; background: #fff; }
.hm-plan li::before { counter-increment: pl; content: counter(pl); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; font-weight: 600; }
.hm-plan b { display: block; font-weight: 600; color: var(--navy); }
.hm-plan span { font-size: .9rem; color: var(--muted); }
.hm-check { overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.hm-check figure { position: relative; margin: 0; }
.hm-check figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hm-check figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 12px; background: var(--orange); color: #fff; line-height: 1.2; }
.hm-check figcaption strong { display: block; font-size: 1.1rem; }
.hm-check figcaption span { font-size: .8rem; }
.hm-check-body { padding: 22px 24px 26px; }
.hm-check-body h3 { margin-bottom: 12px; font-size: 1.3rem; color: var(--navy); }
.hm-check-body ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-bottom: 18px; }
.hm-check-body li { position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.45; }
.hm-check-body li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE6524' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }



@media (max-width: 1080px) {
  .hm-pk-row { grid-auto-columns: calc((100% - 44px) / 3); }
  .hm-route b { font-size: .85rem; }
}
@media (max-width: 900px) {
  /* narrow screens: the map turns into a straight road running down the left, one pin per row */
  .hm-map { height: auto; max-width: 460px; margin-inline: auto; padding-top: 44px; }
  .hm-map-path { display: none; }
  .hm-map-flag.is-th { left: 0; }
  .hm-map-flag.is-la { top: auto; bottom: -50px; left: 0; right: auto; }
  .hm-route { position: relative; display: grid; gap: 18px; }
  .hm-route::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 20px; border-left: 3px dashed var(--orange); }
  .hm-route li { position: relative; left: auto; top: auto; width: auto; translate: none; display: flex; align-items: center; gap: 14px; text-align: left; }
  .hm-pin { flex: none; width: 60px; height: 60px; margin: 0; }
  .hm-route-txt { white-space: normal; flex: 1; padding: 10px 14px; }
  .hm-map { margin-bottom: 50px; }
  .hm-svc { grid-template-columns: 1fr; }
  .hm-svc-card { min-height: 300px; }
  .hm-pk-row { grid-auto-columns: calc((100% - 22px) / 2); }
  .hm-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* phones: a calm hero — headline, one line of copy, two buttons. The four info badges repeat the
     services + rate tickets right below, and the birds add motion on a small screen, so both go */
  .hm-hero { padding: 116px 0 92px; }
  .hm-hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 70%, rgba(0, 0, 0, .1)); }
  .hm-badges, .hm-bird { display: none; }
  .hm-hero h1 { margin-bottom: 12px; }
  .hm-sub { max-width: 30ch; margin-bottom: 22px; font-size: .95rem; text-wrap: balance; }
  .hm-actions { margin-bottom: 0; }
  .hm-actions .btn { flex: 1 1 auto; }
  .hm-rates { grid-template-columns: 1fr; gap: 10px; }
  .hm-rates div { --stub: 96px; }
  .hm-rates dt { padding: 16px; }
  .hm-pk-row { grid-auto-columns: 78%; }
  .hm-check-body ul { grid-template-columns: 1fr; }
}

/* ---------- Inner pages (redesign 2026-10-21) ----------
   Postcard theme → clean cards: no tilts, tape, dashed stamps or handwriting;
   page banners become a blue photo band with white text, like the home hero */
.page-card { background: #fff; background-image: none; }
.eyebrow { font-family: var(--font); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transform: none; }
.eyebrow::before { width: 26px; height: 2px; }
.hand { font-family: var(--font); font-weight: 500; transform: none; rotate: none; }
.display, .section-title { color: var(--navy-700); }
.section.tight-top { padding-top: clamp(48px, 6vw, 72px); }

/* banners: blue photo band */
.banner:not(.banner-postcard) { padding-bottom: clamp(44px, 6vw, 72px); color: #fff; background: linear-gradient(90deg, rgba(18, 58, 125, .94) 0%, rgba(26, 74, 154, .78) 55%, rgba(26, 74, 154, .55) 100%), url(/assets/images/hero-vang-vieng-1600.webp) center 40% / cover no-repeat; }
.banner:not(.banner-postcard) .hero-title { color: #fff; }
.banner:not(.banner-postcard) .hero-title em { color: var(--amber); }
.banner:not(.banner-postcard) .lead { color: #E4ECF8; }
.banner:not(.banner-postcard) .breadcrumb, .banner:not(.banner-postcard) .breadcrumb a { color: #C9D8EF; }
.banner:not(.banner-postcard) .breadcrumb a:hover { color: #fff; }
.banner:not(.banner-postcard) .breadcrumb [aria-current] { color: #fff; }
.banner .hand, .banner-plain .hand, .banner-mob .hand { font-size: .95rem; letter-spacing: .04em; color: var(--amber); rotate: none; }
.banner:not(.banner-postcard) .eyebrow { color: var(--amber); }
.banner:not(.banner-postcard) .eyebrow::before { background: var(--amber); }
.banner:not(.banner-postcard) .btn-ghost { border-color: #fff; color: #fff; background: rgba(0, 0, 0, .2); }
.banner:not(.banner-postcard) .btn-ghost:hover { background: #fff; color: var(--navy); }
.banner-media, .banner-media:hover { padding: 0; overflow: hidden; border-radius: var(--radius); background: none; transform: none; box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .55); }
.banner-media img { width: 100%; height: 100%; object-fit: cover; }
.banner-badge, .banner-plain .banner-badge, .banner-mob .banner-badge { border: 0; background: var(--orange); color: #fff; transform: none; rotate: none; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5); }
.banner-badge strong { color: #fff; }
.banner-badge span, .banner-mob .banner-badge span { color: #FFE9DC; }
.banner-mob .banner-chips li { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; }

/* tour detail: the postcard becomes a clean photo card */
.banner.banner-postcard { rotate: none; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.banner-postcard .banner-media { border-right: 0; border-radius: 0; box-shadow: none; }
.pc-greet { display: none; }
.banner-postcard .banner-badge { width: auto; padding: 6px 14px; border: 0; outline: 0; border-radius: 999px; rotate: none; }
.banner-postcard .banner-badge strong { font-size: .9rem; }
.banner-postcard .banner-badge span { display: none; }
.banner-postcard .breadcrumb { padding-right: 110px; }
.banner-postcard .hero-title, .banner-postcard .hero-title.is-long { margin-top: 14px; color: var(--navy-700); }
.banner-postcard .meta-chips span, .banner .meta-chips span { border: 1px solid var(--line); background: var(--blue-50); }
@media (max-width: 900px) { .banner-postcard .banner-media { border-bottom: 0; } .banner-postcard .breadcrumb { padding-right: 0; } }

/* cards: straight, rounded, quiet borders */
.svc-card, .svc-card:nth-child(even) { rotate: none; border-radius: var(--radius); border: 1px solid var(--line); border-top: 4px solid var(--orange); }
.svc-card:hover, .svc-card:target { rotate: none; box-shadow: var(--shadow); }
.svc-card .ring { border: 0; background: var(--orange-50); }
.svc-card .ring svg { stroke: var(--orange); }
.svc-card .no { display: none; }
/* room for two lines of links on every card, so the divider lines up across a row */
.svc-links { border-top-style: solid; border-top-width: 1px; min-height: calc(13px + 2 * 1.5rem + 6px); align-content: flex-start; }
.svc-links a { border-bottom: 0; }
.svc-links a:hover { text-decoration: underline; }

.steps .step, .steps .step:nth-child(odd), .steps .step:nth-child(even), .steps .step:hover { rotate: none; }
.about-ring, .about-steps li:nth-child(odd) .about-ring, .about-steps li:nth-child(even) .about-ring { rotate: none; border-style: solid; }

/* tour list */
.filter-tabs { gap: 8px; }
.filter-tabs .ring { display: none; }
.filter-tabs button { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: color .2s, background .2s, border-color .2s; }
.filter-tabs button:hover { border-color: var(--orange); color: var(--orange); }
.filter-tabs button[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: #fff; }
.filter-tabs button[aria-pressed="true"] sup { color: #fff; }
.tour-card, .tour-card:nth-child(even) { rotate: none; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.tour-card:hover { rotate: none; box-shadow: var(--shadow); }
.tour-card::before { content: none; }
.tour-card > img, .tour-grid.three .tour-card > img { border: 0; }
.tour-tag { width: auto; padding: 4px 12px; border: 0; outline: 0; border-radius: 999px; rotate: none; }
.tour-body h3 { padding-right: 0; }
.tour-body > small { padding-right: 96px; }
.tour-price small { position: static; display: block; margin-bottom: 3px; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; rotate: none; font-size: .72rem; color: var(--muted); }
@media (max-width: 640px) { .tour-body > small { padding-right: 0; } }

/* tour detail: itinerary + aside */
.tour-layout .day { padding: 24px 28px 18px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.tour-layout .day::before, .tour-layout .day::after { content: none; }
.tour-layout .day-head .badge { padding: 4px 14px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .9rem; }
.tour-layout .day-head .badge::after { content: none; }
.tour-layout .day-head h3 { color: var(--navy-700); }
.tour-aside .aside-card:not(:has(.facts)):not(:has(.addon-list)) { rotate: none; border-radius: var(--radius); background: var(--blue-50); }
@media (max-width: 640px) { .tour-layout .day { padding: 18px 16px 12px; } }

/* parking page */
.pk-snap, .pk-snap.s1, .pk-snap.s2, .pk-snap.s3, .pk-snap:hover { padding: 0; overflow: hidden; border-radius: var(--radius); rotate: none; }
.pk-snap::before, .place-card::before { content: none; }
.pk-snap figcaption { left: 10px; right: auto; bottom: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(18, 58, 125, .85); color: #fff; font-size: .82rem; }
.pk-stamp { border: 0; background: var(--orange); color: #fff; rotate: none; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45); }
.pk-notes li, .pk-notes li:nth-child(n) { rotate: none; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 12px; box-shadow: none; }
.pk-notes li::before { content: none; }
.pk-notes b { color: var(--navy-700); }
.pk-stub, .pk-stub:nth-child(even), .pk-stub:hover { rotate: none; }
.pk-pass-stub .hand { rotate: none; font-size: 1.15rem; color: var(--orange); }

/* FAQ, gallery, contact */
.faq-help { transform: none; border-radius: var(--radius); border-left: 4px solid var(--orange); background: var(--blue-50); box-shadow: none; }
.faq-help::before { content: none; }
.faq { padding: 10px 26px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.faq::before { content: none; }
.faq details p { font-weight: 300; color: var(--muted); }
@media (max-width: 900px) { .faq { padding: 6px 18px; } }
.gallery button, .gallery button:nth-child(even), .gallery button:hover { rotate: none; border: 0; border-radius: 14px; overflow: hidden; }
.gallery button:hover { scale: 1.03; }
.cx { background: linear-gradient(180deg, var(--navy-700), var(--navy)) top / 100% clamp(300px, 26vw, 340px) no-repeat, #fff; }
.cx .breadcrumb, .cx .breadcrumb a { color: #C9D8EF; }
.cx .eyebrow { color: var(--amber); }
.cx .eyebrow::before { background: var(--amber); }
.cx-title { color: #fff; }
.cx-title em { color: var(--amber); }
.cx-status { background: rgba(255, 255, 255, .16); color: #B8F5CF; }
.cx-line { rotate: none; }
.cx-steps li { border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 12px; box-shadow: none; }
.notfound { padding-top: clamp(140px, 14vw, 170px); }
.notfound .btn-line { margin-top: 0; }
/* short error pages: the content card stretches so the footer always reaches the bottom of the screen */
body:has(main.notfound) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(main.notfound) > .page-card { flex: 1; }
@media (max-width: 900px) { .notfound { padding-top: 110px; } }

/* ---------- Page banners (2026-10-21): each page sets its photo with style="--bn-img:url(…)" ----------
   .bn-center → short centred band, breadcrumb under the title (tours, contact, privacy)
   .bn-tall   → tall photo, copy bottom-left with a feature row (parking, services) */
/* every page banner is the same height; the photo keeps its real colours under a soft dark shade;
   the wavy bottom edge is shared with the home hero (.hm-hero::after) */
.banner.bn-center, .banner.bn-tall { display: flex; min-height: clamp(600px, 50vw, 690px); color: #fff; }
.bn-center .banner-content, .bn-tall .banner-content { z-index: 1; }
.bn-center .hero-title, .bn-center .lead, .bn-center .breadcrumb, .bn-tall .hero-title, .bn-tall .lead, .bn-tall .breadcrumb { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.banner.bn-center { justify-content: center; align-items: center; padding: 130px var(--pad) clamp(70px, 8vw, 110px); text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .5)), var(--bn-img) center / cover no-repeat; }
.bn-center .banner-content { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }
.bn-center .banner-content > nav { order: 10; margin-top: 16px; }
.bn-center .breadcrumb { justify-content: center; }
.bn-center .hand, .bn-center .banner-badge, .bn-center .banner-chips, .bn-center .hero-actions, .bn-center .banner-media { display: none; }
.bn-center .plain-title { display: block; }
.bn-center .hero-title, .bn-center .hero-title.is-long { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.2; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); text-wrap: balance; }
.bn-center .lead { max-width: 60ch; margin: 12px auto 0; }
/* .bn-tall pages (parking, services) are centred like the others but keep their pill, feature row and buttons */
.banner.bn-tall { justify-content: center; align-items: center; padding: 130px var(--pad) clamp(70px, 8vw, 110px); text-align: center; background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .5)), var(--bn-img) center / cover no-repeat; }
.bn-tall .banner-content { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }
.bn-tall .banner-content > nav { order: 10; margin-top: 16px; }
.bn-tall .breadcrumb { justify-content: center; }
.bn-tall .banner-badge { display: none; }
.bn-tall .plain-title { display: block; }
.bn-tall .hand { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-size: .88rem; }
.bn-tall .hand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.bn-tall .hero-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.2; text-wrap: balance; }
.bn-tall .lead { max-width: 60ch; margin: 12px auto 0; }
.bn-tall .hero-actions { justify-content: center; margin-top: 22px; }
.bn-tall .banner-chips, .bn-center .banner-chips { display: none; }
@media (max-width: 900px) {
  .banner.bn-center, .banner.bn-tall { min-height: 500px; padding: 110px 16px 72px; }
}
/* desktop: keep each banner headline to as few lines as possible — phrases in <span>s never break inside,
   and the lead runs wider so it stays on one line */
@media (min-width: 901px) {
  .bn-center .hero-title > span, .bn-tall .hero-title > span, .bn-tall .hero-title em > span { white-space: nowrap; }
  .bn-center .lead, .bn-tall .lead { max-width: 80ch; }
}
@media (max-width: 640px) {
  .bn-tall .hand { max-width: none; margin: 0 0 12px; text-align: center; }
  .banner-plain.banner-mob.bn-tall { justify-items: center; text-align: center; }
  /* phone banners: buttons keep one line each and wrap onto their own row instead of squeezing */
  .bn-tall .hero-actions, .banner-mob.bn-tall .hero-actions { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .bn-tall .hero-actions .btn, .banner-mob.bn-tall .hero-actions .btn { flex: 0 1 auto; padding: 11px 20px; font-size: .92rem; white-space: nowrap; line-height: 1.2; }
  .bn-tall .hero-actions .btn:first-child { flex-grow: 0; }
  .bn-tall .hero-title { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.25; }
  /* phone banners stay calm: no pill above the headline, each headline line keeps only its first phrase
     (the full wording is still in the page for search engines and on larger screens), and a smaller lead */
  .bn-tall .hand { display: none; }
  .bn-tall .hero-title > span + span, .bn-tall .hero-title em > span + span { display: none; }
  .bn-tall .lead { margin-top: 10px; font-size: .92rem; line-height: 1.6; text-wrap: balance; }
  .bn-tall .hero-actions { margin-top: 18px; }
  /* section titles that pair a phrase with an <em>: stay on one line when they fit; when they don't,
     the break falls between the two parts, never inside the orange name */
  .section-title em, .hm-h2 em, .hm-head h2 em, .hm-h2 .nw, .hm-head h2 .nw { display: inline; white-space: nowrap; }
  .section-title { font-size: clamp(1.6rem, 7.4vw, 1.9rem); text-wrap: balance; }
  .site-foot .socials { gap: 8px; }
  .site-foot .socials a { width: 36px; height: 36px; }
  .site-foot .socials img { width: 17px; height: 17px; }
  .site-foot .s-lemon8 img { width: 26px; }
}

/* ---------- Tour cards (2026-10-21): photo on top, duration badge top-left, button in the footer ---------- */
.tour-grid, .tour-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tour-card, .tour-grid.three .tour-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 210px auto; min-height: 0; }
.tour-card > img { grid-column: 1; grid-row: 1; }
.tour-body, .tour-grid.three .tour-body { grid-column: 1; grid-row: 2; gap: 8px; padding: 18px 20px 20px; }
.tour-tag { top: 14px; left: 14px; right: auto; }
.tour-body h3 { order: 1; font-size: 1.15rem; }
.tour-body > small, .tour-grid.three .tour-body > small { order: 2; display: flex; align-items: center; gap: 6px; padding-right: 0; font-size: .86rem; }
.tour-body > small::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--orange); -webkit-mask: url("/assets/images/icons/map-pin.svg") center / contain no-repeat; mask: url("/assets/images/icons/map-pin.svg") center / contain no-repeat; }
.tour-desc, .place-chips { display: none; }
.tour-foot { order: 3; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.tour-price small { margin: 0; font-size: .8rem; }
.tour-go.btn { width: auto; height: auto; display: inline-flex; padding: 9px 18px; border-radius: 999px; }
.tour-card:hover .tour-go { background: var(--orange-600); }
@media (max-width: 1080px) { .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "more programs" holds exactly 3 cards: keep them in one row on tablets so none sits alone */
@media (min-width: 641px) and (max-width: 1080px) { .tour-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .tour-grid.three .tour-foot { flex-wrap: wrap; gap: 8px; } }
@media (max-width: 640px) { .tour-grid, .tour-grid.three { grid-template-columns: minmax(0, 1fr); } .tour-card { grid-template-rows: 200px auto; } }

/* filter pills: centred, each with an icon */
#programs .section-head { flex-direction: column; align-items: stretch; text-align: center; }
#programs .section-head > * { min-width: 0; max-width: 100%; }
.filter-tabs { justify-content: center; }
/* phones: the filter is a swipe row; it must start at the left, or centring hides the first tab ("ทั้งหมด") off-screen */
@media (max-width: 640px) { .filter-tabs { justify-content: flex-start; } }
.filter-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; }
.filter-tabs button::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.filter-tabs [data-filter="all"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.filter-tabs [data-filter="day"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.filter-tabs [data-filter="multi"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E"); }
.filter-tabs [data-filter="train"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='14' rx='3'/%3E%3Cpath d='M5 11h14M9 14h.01M15 14h.01M8 21l2-4M16 21l-2-4'/%3E%3C/svg%3E"); }

/* ---------- Contact (2026-10-21): map across the top, channel list left, LINE card right ---------- */
.cx { padding: clamp(48px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); background: #fff; }
.cx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "map map" "list line"; align-items: start; }
.cx-side { display: contents; }
.cx-map { grid-area: map; }
.cx-list { grid-area: list; display: grid; gap: 12px; padding: 0; background: none; box-shadow: none; }
.cx-line { grid-area: line; padding: 30px; }
/* the map keeps the drawing's own proportions so nothing (the AA car park, the Nong Khai pill) gets cropped */
.cx-map .cm-frame { height: auto; aspect-ratio: 1100 / 520; }
@media (max-width: 1100px) { .cx-map .cm-legend { display: none; } }
.cx-list li + li { border-top: 0; }
.cx-list li > a, .cx-row { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.cx-list li > a:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.cx-list .ib { width: 42px; height: 42px; border-radius: 10px; }
.bn-center .cx-status, .bn-status .cx-status { margin: 0; }
.bn-status { margin-top: 14px; }
@media (max-width: 960px) { .cx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "line" "list"; } }
/* phones: zoom into the border → car park stretch of the map (Nong Khai border pill to the "ลานจอด AA" label) */
@media (max-width: 640px) {
  .cx { padding-top: 36px; }
  .cx-map .cm-frame { height: 290px; aspect-ratio: auto; }
  .cx-map .cm-frame svg { width: 610px; left: calc(50% - 345px); }
}

/* ---------- Pre-launch QA fixes (2026-10-22) ---------- */
/* avoid a lone word on the last line of paragraphs and labels */
p, li, dd, small, figcaption, .lead { text-wrap: pretty; }
/* letter-spacing pulls Thai vowels/tone marks away from their consonants: keep it for English only */
html:not([data-lang="en"]) .tour-aside .aside-card:has(.facts) h3,
html:not([data-lang="en"]) .pk-stub-head small,
html:not([data-lang="en"]) .addon-list b span { letter-spacing: .02em; }
/* TikTok phones: room under the slider so the frames' shadow + white bezel aren't cut off */
.tt-track { padding-bottom: 84px; margin-bottom: -64px; }
/* parking photo stack: the "open daily" stamp covers the bottom-left and the next photo the bottom-right,
   so the first photo's label moves to its top-left corner */
.pk-snap.s1 figcaption { top: 10px; bottom: auto; }
/* tablets: every "more programs" card stacks code above its button, so buttons line up across cards */
@media (min-width: 641px) and (max-width: 1080px) {
  .tour-grid.three .tour-card { grid-template-rows: 210px 1fr; }
  .tour-grid.three .tour-foot { flex-direction: column; align-items: flex-start; margin-top: auto; }
}
/* phones: a longer fade on the tour filter row hints that it scrolls sideways */
@media (max-width: 640px) {
  .filter-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 72px), transparent); padding-right: 64px; }
}

/* ---------- Phones: decluttered layout (2026-10-22) ----------
   Shorter cards, decoration and repeated facts dropped, every card full width, room for the chat button */
@media (max-width: 640px) {
  /* home: service photo cards shorter, one-line description; the rate tickets repeat the prices on the cards */
  .hm-svc { gap: 14px; }
  .hm-svc-card { min-height: 220px; }
  .hm-svc-body { padding: 16px 18px; }
  .hm-svc-body small { margin: 2px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-rates { display: none; }
  /* home: custom-trip steps keep their bold titles only; the checklist shows 6 items + the link to all services */
  .hm-plan { gap: 8px; }
  .hm-plan li { padding: 11px 14px 11px 54px; }
  .hm-plan li::before { top: 50%; translate: 0 -50%; }
  .hm-plan span { display: none; }
  .hm-check-body li:nth-child(n+7) { display: none; }
  .hm-pin { width: 52px; height: 52px; }
  .hm-route { gap: 12px; }

  /* parking: two photos side by side instead of the overlapping collage */
  .pk-board { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pk-snap, .pk-snap.s1, .pk-snap.s2 { position: relative; inset: auto; width: auto; }
  .pk-snap img { aspect-ratio: 4 / 3; }
  .pk-snap.s3, .pk-stamp { display: none; }
  .pk-snap.s1 figcaption { top: auto; bottom: 8px; }
  .pk-snap figcaption { left: 8px; bottom: 8px; font-size: .75rem; padding: 2px 10px; }
  /* parking: detail notes keep their orange-edged cards, just tighter */
  .pk-notes { gap: 10px; margin-top: 14px; }
  .pk-notes li, .pk-notes li:nth-child(n) { padding: 11px 14px 12px; }
  .pk-notes b { font-size: 1rem; }
  /* parking: rate tickets full width like every other card, no barcode */
  .pk-stubs { gap: 16px; }
  .pk-stub { flex-basis: 100%; min-width: 0; }
  .pk-stub-head small, .pk-stub-tear .pk-barcode { display: none; }
  .pk-stub-tear { height: 54px; }
  .pk-stub-body .amt strong { font-size: 2.8rem; }
  /* parking: shuttle ticket — route on one row, no barcode, no repeated "for" cell */
  .pk-pass-route { grid-template-columns: 1fr auto 1fr; gap: 8px; text-align: left; }
  .pk-pass-route p:last-child { text-align: right; }
  .pk-pass-route strong { font-size: 1.05rem; }
  .pk-pass-route .mid svg { width: 40px; height: 24px; }
  .pk-pass-meta > div:nth-child(3), .pk-pass-stub .pk-barcode { display: none; }
  .pk-pass-stub { padding: 18px; gap: 8px; }

  /* service cards: small icon beside the title, compact padding, links tall enough to tap */
  .svc-cards { gap: 14px; }
  .svc-card { padding: 18px; gap: 6px; }
  .svc-card .ring { width: 40px; height: 40px; }
  .svc-card .ring svg { width: 22px; height: 22px; }
  .svc-links { min-height: 0; gap: 0 16px; padding-top: 4px; }
  .svc-links a { padding: 8px 0; }
  .tt-item { flex-basis: 66%; }

  /* the floating chat button sits on the right edge: keep FAQ toggles clear of it */
  .faq summary { padding-right: 44px; }
  .section-lead, .hm-head p { text-wrap: balance; }
  /* pages that already list every channel (contact, error pages) don't need the floating chat button */
  body:has(main.notfound) .float-contact, body:has(.cx-grid) .float-contact { display: none; }

  /* tour list: shorter photos, tighter card body */
  .tour-card { grid-template-rows: 170px auto; }
  .tour-body, .tour-grid.three .tour-body { padding: 14px 16px 16px; gap: 6px; }
  .tour-foot { margin-top: 4px; padding-top: 10px; }

  /* tour detail: the hero card's chips and the code in the breadcrumb repeat the badge + "ข้อมูลโปรแกรม" box */
  .banner-postcard .meta-chips, .banner-postcard .breadcrumb li:last-child { display: none; }
  /* the day header already names the city, so the grey city pill on every row is noise */
  .itin .city { display: none; }
  .itin b .it-note { display: block; }
  .tour-aside { margin-top: 12px; }
  /* "more programs": a swipe row instead of three tall stacked cards */
  .tour-grid.three { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 10px; scrollbar-width: none; }
  .tour-grid.three::-webkit-scrollbar { display: none; }
  .tour-grid.three .tour-card { grid-template-rows: 150px auto; scroll-snap-align: start; }

  /* contact: channels first, the illustrated map last; quieter steps and channel rows */
  .cx-grid { grid-template-areas: "line" "list" "map"; }
  .cx-steps { gap: 6px; }
  .cx-steps li { border: 0; border-left: 3px solid var(--orange); border-radius: 0; padding: 6px 12px; box-shadow: none; }
  .cx-list { gap: 8px; }
  .cx-list li > a, .cx-list .cx-row { padding: 10px 12px; }
  .cx-list .ib { width: 34px; height: 34px; }
  .cx-chips a { padding: 9px 14px; }

  /* privacy: a slim banner for a legal page */
  .banner.banner-legal.bn-center { min-height: 0; padding: 96px 16px 56px; }
  .banner-legal .lead { display: none; }
  .legal-meta { display: block; border-radius: 12px; }
  .notfound .btn { min-width: 220px; justify-content: center; }
}
@media (max-width: 640px) {
  /* "more programs" swipe cards: code and route on one line each, no stretched empty space */
  .tour-grid.three { align-items: start; }
  .tour-grid.three .tour-price small, .tour-grid.three .tour-body > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tour-grid.three .tour-foot { text-align: left; }
  .hm-svc-body { min-width: 0; max-width: 100%; }
  .hm-svc-body small { max-width: 100%; }
}
/* parking rate tickets: a quiet outline so the white ticket body reads as part of the card */
.pk-stub { border: 1px solid var(--line); }
/* itinerary notes (closing day, season) sit under the place name in small grey text */
.itin b .it-note { margin-left: 6px; font-size: .8rem; font-weight: 400; color: var(--muted); }
@media (max-width: 640px) { .itin b .it-note { margin-left: 0; } }