/* Dinner Cruise 99 — alternative homepage /home-v4/ (12 Nov 2026, client reference "แบบ 4 | ปรับตามดราฟล่าสุด").
   Independent stylesheet: loaded only by /home-v4/, every rule is scoped to body.v4 or v4- classes.
   Depends only on the bundled OFL fonts in assets/fonts/ (same files as the rest of the site).
   Readability for 30–50+ readers: Thai body 18px, secondary text 16px or larger, contrast >= 4.5:1, 44px targets. */

@font-face { font-family: 'V4 Head'; src: url('../fonts/Kanit-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'V4 Head'; src: url('../fonts/Kanit-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'V4 Head'; src: url('../fonts/Kanit-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'V4 Sans'; src: url('../fonts/NotoSansThai-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'V4 Sans'; src: url('../fonts/NotoSansThai-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

.v4 {
  --navy: #0b1a33; --navy-2: #13284a; --night: #090d24; --purple: #241447; --violet: #3a1f6e;
  --gold: #e9b949; --gold-2: #f6d77e; --gold-ink: #835f0f; --ivory: #fbf7ef; --sand: #f3ead9; --paper: #fff;
  --ink: #18202e; --ink-2: #3b4455; --rule: #e4d8c2; --line: #06803c; --line-dark: #05692f;
  --head: 'V4 Head', 'Kanit', system-ui, sans-serif; --sans: 'V4 Sans', 'Noto Sans Thai', system-ui, sans-serif;
  --wrap: 1240px; --pad: clamp(16px, 4vw, 40px); --r: 16px; --shadow: 0 10px 30px rgba(11, 26, 51, .14);
}
.v4 *, .v4 *::before, .v4 *::after { box-sizing: border-box; }
html:has(body.v4) { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body.v4 { margin: 0; background: var(--ivory); color: var(--ink); font: 400 18px/1.7 var(--sans); overflow-x: clip; }
.v4 img { display: block; max-width: 100%; height: auto; }
:where(.v4) a { color: inherit; }  /* zero specificity: single-class link colours (buttons, pier names) win */
.v4 :is(h1, h2, h3) { font-family: var(--head); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.v4 ul, .v4 ol { list-style: none; padding: 0; }
:where(.v4) :is(h1, h2, h3, p, ul, ol) { margin: 0; }  /* specificity 0,0,1 (below a single class), so class margins (.v4-promos, .v4-promo-note …) are not cancelled */
.v4 :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.v4 [hidden] { display: none !important; }  /* author display rules must never reveal hidden controls (no-JS) */
.v4-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v4-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.v4-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v4-skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.v4-skip:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- buttons and links */
.v4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 22px; border-radius: 999px;
  font: 500 18px/1.2 var(--head); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s, background-color .2s, box-shadow .2s; }
.v4-btn:hover { transform: translateY(-1px); }
.v4-btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--navy); box-shadow: 0 6px 18px rgba(233, 185, 73, .35); }
.v4-btn-line { background: var(--line); color: #fff; }
.v4-btn-line:hover { background: var(--line-dark); }
.v4-btn-glass { background: rgba(9, 13, 36, .45); color: #fff; border-color: rgba(255, 255, 255, .85); }
.v4-btn-outline { background: transparent; color: #fff; border-color: rgba(246, 215, 126, .9); }
.v4-btn-tel { background: var(--paper); color: var(--navy); border-color: var(--rule); }
.v4-line-mark { display: inline-grid; place-items: center; min-width: 40px; height: 22px; padding: 0 6px; border-radius: 6px; background: #fff; color: var(--line);
  font: 700 13px/1 Arial, sans-serif; letter-spacing: .02em; }
.v4-btn .v4-ic { width: 22px; height: 22px; }
.v4-textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--navy); font: 500 17px/1.3 var(--head); text-decoration: none;
  border-bottom: 2px solid transparent; }
.v4-textlink:hover { border-bottom-color: var(--gold); }
.v4-textlink .v4-ic { width: 20px; height: 20px; color: var(--gold-ink); }
.v4-textlink.on-dark { color: #fff; }
.v4-textlink.on-dark .v4-ic { color: var(--gold-2); }
.v4-title { font-size: clamp(26px, 2.5vw, 33px); color: var(--navy); text-wrap: balance; }
.v4-title-sm { font-size: clamp(22px, 2vw, 26px); }
.v4-sub { color: var(--ink-2); margin-top: 8px; }
.v4-note { font-size: 18px; color: var(--ink-2); margin-top: 12px; }
.v4-swash { display: block; width: 150px; height: 14px; margin-top: 10px;
  background: radial-gradient(120px 10px at 30% 100%, transparent 70%, var(--gold) 72%, var(--gold) 82%, transparent 84%); opacity: .9; }
.v4-row-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }

/* ---------- header (compact navy bar) */
.v4-header { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.v4-header-inner { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.v4-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; flex: none; min-height: 44px; }
.v4 .brandmark { width: 52px; height: 34px; fill: none; stroke: var(--gold-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v4-brandname { font: 600 16px/1.05 var(--head); letter-spacing: .04em; }
.v4-brandname small { display: block; font: 400 11px/1.4 var(--head); color: var(--gold-2); letter-spacing: .12em; margin-top: 2px; }
.v4-nav { display: none; align-items: center; gap: 0; margin-left: auto; flex: none; }
.v4-header .v4-wrap { max-width: calc(1400px + 2 * var(--pad)); }
.v4-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; white-space: nowrap; text-decoration: none; font: 400 16px/1.2 var(--head); color: #fff; border-radius: 8px; }
.v4-nav-link:hover { color: var(--gold-2); }
.v4-nav-link[aria-current="page"] { color: var(--gold-2); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.v4-drop { position: relative; display: flex; align-items: center; }
.v4-drop .v4-nav-link { padding-right: 2px; }
.v4-drop-btn { display: inline-grid; place-items: center; width: 32px; min-height: 44px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; }
.v4-drop-btn .v4-ic { width: 16px; height: 16px; transition: transform .2s; }
.v4-drop-btn[aria-expanded="true"] .v4-ic { transform: rotate(180deg); }
.v4-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }
.v4-sub a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--navy); text-decoration: none; border-radius: 8px; font-size: 16px; }
.v4-sub a:hover, .v4-sub a:focus-visible { background: var(--sand); }
.v4-drop:hover .v4-sub, .v4-drop:focus-within .v4-sub, .v4-drop.is-open .v4-sub { display: block; }
.js .v4-drop:not(.is-open):not(:hover) .v4-sub { display: none; }
.v4-header-cta { display: none; align-items: center; gap: 10px; flex: none; }
.v4-header-cta .v4-btn { min-height: 44px; padding: 6px 16px; font-size: 16px; }
.v4-menu { margin-left: auto; }
.v4-menu summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid rgba(246, 215, 126, .7); border-radius: 999px;
  cursor: pointer; list-style: none; font: 500 16px var(--head); }
.v4-menu summary::-webkit-details-marker { display: none; }
.v4-menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 72px); overflow: auto; background: var(--navy); padding: 8px var(--pad) 20px;
  border-top: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); display: grid; gap: 2px; }
.v4-menu-panel .v4-nav-link { font-size: 18px; min-height: 48px; }
.v4-menu-panel .v4-drop { display: block; }
.v4-menu-panel .v4-drop-btn { display: none; }
.v4-menu-panel .v4-sub { display: grid !important; position: static; background: none; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; }
.v4-menu-panel .v4-sub a { color: #e7ecf5; font-size: 16px; }
.v4-menu-panel .v4-sub a:hover { background: rgba(255, 255, 255, .08); }
.v4-menu-cta { display: grid; gap: 10px; margin-top: 12px; }
.v4-menu:not([open]) .v4-menu-panel { display: none; }
@media (min-width: 720px) { .v4-header-cta { display: flex; } .v4-menu { margin-left: 0; } .v4-header-cta { margin-left: auto; } }
@media (min-width: 1360px) {
  .v4-nav { display: flex; } .v4-header-cta { margin-left: 8px; } .v4-menu { display: none; }
  .js .v4-drop-btn { display: inline-grid; }
}
@media (max-width: 380px) { .v4-brandname small { display: none; } .v4 .brandmark { width: 42px; } }

/* ---------- hero: purple/gold dusk boat, manual carousel */
.v4-hero { position: relative; color: #fff; background: var(--night); isolation: isolate; min-height: clamp(560px, 74vh, 660px); display: flex; align-items: center; overflow: hidden; }
.v4-hero-stage, .v4-slide { position: absolute; inset: 0; margin: 0; }
.v4-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.v4-slide[hidden] { display: none; }
.v4-slide figcaption { position: absolute; right: var(--pad); bottom: 112px; z-index: 3; max-width: min(440px, 70%); padding: 4px 12px; border-radius: 999px;
  background: rgba(9, 13, 36, .72); font-size: 16px; line-height: 1.4; color: #f1ecff; }
.js .v4-slide { transition: opacity .6s ease; }
.v4-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 10, 34, .94) 0%, rgba(26, 14, 60, .78) 34%, rgba(26, 14, 60, .25) 62%, rgba(9, 10, 34, .05) 80%),
              linear-gradient(0deg, rgba(9, 10, 34, .55) 0%, rgba(9, 10, 34, 0) 18%); }
.v4-hero-copy { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 112px; }
.v4-hero h1 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 600; line-height: 1.2; max-width: 14em; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.v4-hero h1 span { display: block; color: var(--gold-2); }
.v4-hero-lead { margin-top: 16px; max-width: 34em; text-wrap: balance; font-size: clamp(18px, 1.4vw, 20px); color: #f4f1fb; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.v4-minis { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 22px; max-width: 600px; }
.v4-minis a { display: grid; justify-items: center; gap: 4px; min-width: 96px; min-height: 44px; padding: 6px 8px; text-decoration: none; text-align: center;
  font-size: 16px; line-height: 1.3; border-radius: 12px; color: #fff; }
.v4-minis a:hover { background: rgba(255, 255, 255, .1); }
.v4-minis .v4-ic { width: 32px; height: 32px; color: var(--gold-2); }
.v4-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.v4-hero-arrow { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85); background: rgba(9, 13, 36, .45); color: #fff; cursor: pointer; }
.v4-hero-arrow.prev { left: 12px; } .v4-hero-arrow.next { right: 12px; }
.v4-hero-arrow:hover { background: rgba(233, 185, 73, .9); color: var(--navy); }
.v4-hero-dots { position: absolute; right: var(--pad); bottom: 58px; z-index: 3; display: flex; gap: 2px; }
.v4-hero-dots button, .v4-dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.v4-hero-dots button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 1px solid rgba(9, 13, 36, .4); transition: width .2s; }
.v4-dots button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #c9bda6; border: 1px solid rgba(9, 13, 36, .4); transition: width .2s; }
.v4-hero-dots button[aria-current="true"]::before { width: 28px; border-radius: 8px; background: var(--gold-2); }
.v4-dots button[aria-current="true"]::before { width: 28px; border-radius: 8px; background: var(--navy); }
@media (max-width: 760px) {
  .v4-hero { align-items: flex-end; min-height: 0; }
  .v4-hero-stage { bottom: auto; height: 330px; }
  .v4-slide[data-slide="0"] img { object-position: 62% 50%; }
  .v4-hero-scrim { background: linear-gradient(180deg, rgba(9, 10, 34, 0) 0, rgba(9, 10, 34, 0) 250px, var(--night) 330px); }
  .v4-hero-copy { padding-top: 318px; padding-bottom: 92px; }
  .v4-slide figcaption { top: auto; bottom: auto; top: 10px; left: 10px; right: auto; max-width: calc(100% - 20px); padding: 2px 10px; background: rgba(9, 13, 36, .62); }
  .v4-cap-desc { display: none; }
  .v4-hero-arrow { top: 165px; }
  .v4-hero-arrow { top: 150px; }
  .v4-minis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .v4-minis a { min-width: 0; padding: 6px 2px; font-size: 16px; }
  .v4-minis .v4-ic { width: 28px; height: 28px; }
  .v4-hero-actions .v4-btn { flex: 1 1 220px; }
}
@media (max-width: 480px) { .v4-minis { grid-template-columns: repeat(3, 1fr); } }

/* ---------- journey selector ribbon */
.v4-journey { position: relative; z-index: 5; margin-top: -48px; pointer-events: none; }
.v4-journey .v4-ribbon, .v4-journey .v4-intent-panels { pointer-events: auto; }
.v4-ribbon { display: grid; grid-template-columns: auto 1fr; align-items: stretch; background: var(--paper); border-radius: 999px; box-shadow: var(--shadow);
  border: 1px solid var(--rule); overflow: hidden; }
.v4-ribbon-lead { display: flex; align-items: center; gap: 12px; padding: 12px 28px 12px 22px; background: var(--navy); color: var(--gold-2);
  font: 600 18px/1.3 var(--head); border-radius: 999px 0 0 999px; }
.v4-ribbon-lead .v4-ic { width: 42px; height: 42px; color: var(--gold); }
.v4-intents { display: flex; align-items: center; justify-content: space-around; gap: 4px; padding: 6px 8px; }
.v4-intent { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 16px; border-radius: 14px; text-decoration: none; color: var(--navy); position: relative; }
.v4-intent + .v4-intent::before { content: ''; position: absolute; left: -3px; top: 16px; bottom: 16px; width: 1px; background: var(--rule); }
.v4-intent .v4-ic { width: 36px; height: 36px; color: var(--gold-ink); }
.v4-intent strong { display: block; font: 600 18px/1.25 var(--head); }
.v4-intent small { display: block; font-size: 16px; color: var(--ink-2); line-height: 1.3; }
.v4-intent:hover, .v4-intent[aria-expanded="true"] { background: var(--sand); }
.v4-intent[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--gold); }
.v4-intent-help { background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 8px 22px; border-radius: 999px; }
.v4-intent-help::before { display: none; }
.v4-intent-help small { color: var(--navy); }
.v4-intent-help:hover, .v4-intent-help[aria-expanded="true"] { background: var(--gold); }
.v4-intent-panel { display: none; margin-top: 14px; padding: 22px 26px; background: var(--paper); border-radius: var(--r); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.v4-intent-panel:target, .v4-intent-panel.is-open { display: block; }
.js .v4-intent-panel:target:not(.is-open) { display: none; }
.v4-intent-panel h3 { font-size: 22px; color: var(--navy); margin-bottom: 6px; }
.v4-intent-panel strong { color: var(--navy); }
.v4-intent-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }
.v4-intent-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 1100px) {
  .v4-ribbon { grid-template-columns: 1fr; border-radius: 22px; }
  .v4-ribbon-lead { border-radius: 0; padding: 12px 18px; }
  .v4-ribbon-lead br { display: none; }
  .v4-intents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; }
  .v4-intent { border: 1px solid var(--rule); }
  .v4-intent + .v4-intent::before { display: none; }
  .v4-intent-help { justify-content: space-between; border: 0; border-radius: 14px; }
}
@media (min-width: 640px) and (max-width: 1100px) { .v4-intents { grid-template-columns: repeat(4, 1fr); } .v4-intent { flex-direction: column; text-align: center; gap: 4px; } }
@media (max-width: 639px) { .v4-intent { flex-direction: column; text-align: center; gap: 2px; padding: 8px 6px; } .v4-intent-help { flex-direction: row; text-align: left; }
  .v4-intent-help { grid-column: 1 / -1; justify-content: center; gap: 12px; } }
@media (max-width: 340px) { .v4-intents { grid-template-columns: 1fr; } }

/* ---------- editorial intro */
.v4-intro { padding: 40px 0 20px; }
.v4-intro-grid { display: grid; grid-template-columns: 1.05fr 1.25fr .85fr; align-items: center; gap: 32px; }
.v4-intro-photo { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.v4-intro-photo img { width: 100%; height: 100%; object-fit: cover; }
.v4-intro-copy p { margin-top: 14px; color: var(--ink-2); }
.v4-intro-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-intro-facts a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--sand); color: var(--navy);
  text-decoration: none; font: 500 18px var(--head); }
.v4-intro-facts a:hover { background: var(--gold-2); }
.v4-polaroids { position: relative; height: 300px; }
.v4-polaroids img { position: absolute; width: 58%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid #fff; border-bottom-width: 22px; box-shadow: 0 10px 24px rgba(11, 26, 51, .22); }
.v4-polaroids .p1 { left: 0; top: 8px; transform: rotate(-5deg); }
.v4-polaroids .p2 { right: 0; top: 0; transform: rotate(6deg); }
.v4-polaroids .p3 { left: 22%; bottom: 0; transform: rotate(-1deg); }
@media (max-width: 1000px) {
  .v4-intro-grid { grid-template-columns: 1fr 1fr; }
  .v4-polaroids { grid-column: 1 / -1; height: 230px; max-width: 520px; width: 100%; margin: 0 auto; }
  .v4-polaroids img { width: 44%; }
}
@media (max-width: 680px) { .v4-intro-grid { grid-template-columns: 1fr; } .v4-polaroids { height: 200px; } }

/* ---------- why us */
.v4-why { padding: 16px 0 32px; }
.v4-why-grid { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 24px; }
.v4-why-list { display: grid; grid-template-columns: repeat(6, 1fr); }
.v4-why-list li { position: relative; }
.v4-why-list li + li::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--rule); }
.v4-why-list a { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 8px; min-height: 44px; text-decoration: none; border-radius: 12px; }
.v4-why-list a:hover { background: var(--sand); }
.v4-why-list .v4-ic { width: 40px; height: 40px; color: var(--gold-ink); }
.v4-why-list strong { font: 600 18px/1.3 var(--head); color: var(--navy); }
.v4-why-list span { font-size: 18px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 1100px) { .v4-why-grid { grid-template-columns: 1fr; } .v4-why-list { grid-template-columns: repeat(3, 1fr); row-gap: 8px; } .v4-why-list li:nth-child(3n + 1)::before { display: none; } }
@media (max-width: 560px) { .v4-why-list { grid-template-columns: repeat(2, 1fr); } .v4-why-list li::before { display: none; } .v4-why-head br { display: none; } }

/* ---------- packages on a night-river backdrop */
.v4-packages { position: relative; isolation: isolate; color: var(--ink); padding: 44px 0 36px; background: linear-gradient(180deg, #fbf4e6 0%, #f6ecda 100%); overflow: hidden; }
.v4-pkg-backdrop { position: absolute; inset: 0 auto 0 0; width: 42%; z-index: -1; }
.v4-pkg-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.v4-pkg-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 236, 218, 0) 0%, rgba(246, 236, 218, .35) 45%, rgba(246, 236, 218, .92) 78%, #f6ecda 100%); }
.v4-pkg-inner { position: relative; }
.v4-pkg-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; padding-left: clamp(0px, 14vw, 200px); }
.v4-packages .v4-title { color: var(--navy); }
.v4-carousel { position: relative; padding-left: clamp(0px, 14vw, 200px); }
.v4-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0; padding: 4px 2px 12px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.js .v4-track { scrollbar-width: none; }
.js .v4-track::-webkit-scrollbar { display: none; }
.v4-pkg { scroll-snap-align: start; background: #fff; color: var(--ink); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--rule); box-shadow: 0 10px 24px rgba(11, 26, 51, .14); }
.v4-pkg-img { position: relative; aspect-ratio: 16 / 10; background: var(--sand); }
.v4-pkg-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4-flag { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; background: var(--gold-2); color: var(--navy); font: 600 16px/1.3 var(--head); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.v4-flag .v4-ic { width: 20px; height: 20px; }
.v4-pkg-body { position: relative; padding: 12px 16px 16px; display: grid; gap: 2px; flex: 1; }
.v4-pkg h3 { font-size: 19px; color: var(--navy); }
.v4-pkg-meta { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ink-2); }
.v4-pkg-meta .v4-ic { width: 18px; height: 18px; color: var(--gold-ink); }
.v4-pkg-price { display: grid; margin-top: 6px; padding-right: 52px; font-size: 16px; color: var(--ink); line-height: 1.45; }
.v4-pkg-price strong { font: 600 19px var(--head); color: var(--navy); }
.v4-pkg-go { position: absolute; right: 14px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--navy); }
.v4-pkg-go:hover { background: var(--gold-2); }
.v4-pkg:has(.v4-pkg-go:focus-visible) { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.v4-arrow { position: absolute; top: 38%; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #fff; color: var(--navy);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); cursor: pointer; }
.v4-arrow.prev { left: calc(clamp(0px, 14vw, 200px) - 22px); } .v4-arrow.next { right: -22px; }
.v4-arrow:disabled { opacity: .35; cursor: default; }
.v4-carousel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 6px; padding-left: clamp(0px, 14vw, 200px); font-size: 16px; }
.v4-dots { display: flex; flex-wrap: wrap; max-width: 100%; }
.v4-count { color: var(--ink-2); }
.v4-jump { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--navy); font: 500 16px var(--head); cursor: pointer; border-bottom: 2px solid var(--gold); }
.v4-jump .v4-ic { width: 18px; height: 18px; color: var(--gold-ink); }
.v4-pkg-note { margin-left: auto; color: var(--ink-2); }
.v4-promos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; padding-left: clamp(0px, 14vw, 200px); }
.v4-promos a { display: flex; align-items: center; gap: 10px; min-height: 52px; height: 100%; padding: 8px 14px; border-radius: 14px; text-decoration: none; font-size: 18px; line-height: 1.4;
  background: #fff; border: 1px solid var(--rule); color: var(--navy); box-shadow: 0 4px 12px rgba(11, 26, 51, .08); }
.v4-promos a:hover { background: var(--sand); border-color: var(--gold); }
.v4-promos .v4-ic { color: var(--gold-ink); width: 28px; height: 28px; }
.v4-promo-note { margin-top: 10px; font-size: 18px; color: var(--ink-2); padding-left: clamp(0px, 14vw, 200px); }
@media (max-width: 1180px) { .v4-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } .v4-promos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .v4-pkg-head, .v4-carousel, .v4-carousel-bar, .v4-promos, .v4-promo-note { padding-left: 0; }
  .v4-pkg-backdrop { width: 100%; height: 260px; } .v4-pkg-backdrop img { opacity: .55; }
  .v4-pkg-backdrop::after { background: linear-gradient(180deg, rgba(246, 236, 218, .2), #f8efdf 92%); }
  .v4-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .v4-arrow.prev { left: -10px; } .v4-arrow.next { right: -10px; }
  .v4-pkg-note { margin-left: 0; }
}
@media (max-width: 600px) { .v4-track { grid-auto-columns: 82%; } .v4-promos { grid-template-columns: 1fr; } .v4-arrow { display: none; } }

/* ---------- food */
.v4-food { padding: 36px 0 24px; }
.v4-food-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 28px; align-items: center; }
.v4-food-lead { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3 / 2; }
.v4-food-lead img { width: 100%; height: 100%; object-fit: cover; }
.v4-food-copy p { margin-top: 10px; color: var(--ink-2); }
.v4-food-icons { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.v4-food-icons li { display: grid; justify-items: center; gap: 2px; font-size: 16px; color: var(--navy); min-width: 64px; }
.v4-food-icons .v4-ic { width: 34px; height: 34px; color: var(--gold-ink); }
.v4-food-side { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 240px; }
.v4-food-side img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 16px rgba(11, 26, 51, .16); }
.v4-food-side .f1 { grid-row: 1 / 3; }
@media (max-width: 1000px) { .v4-food-grid { grid-template-columns: 1fr 1fr; } .v4-food-copy { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 600px) { .v4-food-grid { grid-template-columns: 1fr; } .v4-food-side { height: 220px; } }

/* ---------- music */
.v4-music { padding: 28px 0 40px; background: linear-gradient(180deg, var(--ivory), #f5eff9); }
.v4-music-grid { display: grid; grid-template-columns: 370px 1fr; gap: 28px; align-items: center; }
.v4-music-copy p { margin-top: 10px; color: var(--ink-2); }
.v4-music-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v4-music-photos a { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow); }
.v4-music-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.v4-music-photos a:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .v4-music-grid { grid-template-columns: 1fr; } .v4-music-copy br { display: none; } }
@media (max-width: 560px) { .v4-music-photos { grid-template-columns: 1fr 1fr; } .v4-music-photos a:first-child { grid-column: 1 / -1; } }

/* ---------- occasions */
.v4-occasions { padding: 32px 0; background: var(--paper); }
.v4-occ-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.v4-occ-grid li { display: flex; }
.v4-occ { display: flex; flex-direction: column; flex: 1; text-decoration: none; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 6px 16px rgba(11, 26, 51, .1); }
.v4-occ img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.v4-occ span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; font: 600 18px var(--head); color: var(--navy); text-align: center; padding: 4px 6px; }
.v4-occ:hover img { transform: scale(1.05); }
.v4-occ:hover span { color: var(--gold-ink); }
@media (max-width: 1000px) { .v4-occ-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .v4-occ-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------- piers */
.v4-piers { padding: 36px 0; background: linear-gradient(180deg, var(--ivory), var(--sand)); }
.v4-piers-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.v4-pier-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.v4-pier { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 196px; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  background: var(--navy-2); box-shadow: 0 6px 16px rgba(11, 26, 51, .18); }
.v4-pier img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.v4-pier:hover img { transform: scale(1.05); }
.v4-pier-name { position: relative; display: grid; padding: 30px 10px 8px; text-align: center; font: 600 18px/1.3 var(--head); color: #fff;
  background: linear-gradient(0deg, rgba(9, 13, 36, .95) 0%, rgba(9, 13, 36, .85) 55%, rgba(9, 13, 36, 0) 100%); }
.v4-pier-name small { font: 400 18px/1.35 var(--sans); color: #f1e6c6; }
.v4-pier-tag { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1; padding: 2px 8px; border-radius: 8px; background: rgba(9, 13, 36, .85); font: normal 18px/1.35 var(--sans); text-align: center; }
.v4-pier-all { background: #fff; color: var(--navy); border: 1px solid var(--rule); align-items: center; justify-content: center; gap: 6px; text-align: center; font: 600 17px/1.3 var(--head); }
.v4-pier-all .v4-ic { color: var(--gold-ink); width: 28px; height: 28px; }
@media (max-width: 1180px) { .v4-piers-grid { grid-template-columns: 1fr; } .v4-pier-list { grid-template-columns: repeat(3, 1fr); } .v4-piers-head br { display: none; } }
@media (max-width: 560px) { .v4-pier-list { grid-template-columns: repeat(2, 1fr); } .v4-pier { height: 196px; } }

/* ---------- reviews */
.v4-reviews { padding: 36px 0; background: radial-gradient(800px 300px at 80% 20%, #fff 0%, transparent 70%), var(--ivory); }
.v4-rev-grid { display: grid; grid-template-columns: 250px 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.v4-rev-head { align-self: center; }
.v4-rev-head p { margin-top: 10px; font-size: 18px; color: var(--ink-2); }
.v4-rev-photo, .v4-chat { position: relative; display: block; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow); text-decoration: none; }
.v4-rev-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 50%; }
.v4-chat { border: 1px solid var(--rule); padding: 10px 10px 0; display: flex; flex-direction: column; }
.v4-chat img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 30%; border-radius: 10px; }
.v4-chat span { display: flex; align-items: center; justify-content: center; min-height: 48px; font: 500 16px var(--head); color: var(--navy); }
.v4-chat:hover span { color: var(--gold-ink); }
@media (max-width: 1100px) { .v4-rev-grid { grid-template-columns: 1fr 1fr 1fr; } .v4-rev-head { grid-column: 1 / -1; } .v4-rev-head br { display: none; } }
@media (max-width: 680px) { .v4-rev-grid { grid-template-columns: 1fr 1fr; } .v4-rev-photo { grid-column: 1 / -1; } .v4-rev-photo img { min-height: 0; aspect-ratio: 3 / 2; } .v4-chat img { height: 280px; } }

/* ---------- clips */
.v4-clips { padding: 36px 0 40px; background: var(--paper); }
.v4-yt { display: inline-flex; align-items: center; gap: 8px; }
.v4-yt .v4-ic { width: 34px; height: 34px; color: #fff; background: #d90000; border-radius: 8px; padding: 3px; stroke-width: 2; }
.v4-clip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v4-clip { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.v4-clip-poster { display: block; width: 100%; height: 100%; }
.v4-clip-poster img { width: 100%; height: 100%; object-fit: cover; }
.v4-clip iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v4-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(9, 13, 36, .7); border: 2px solid #fff; color: #fff; }
.v4-play .v4-ic { fill: currentColor; width: 28px; height: 28px; margin-left: 4px; }
.v4-clip-poster:hover .v4-play { background: #d90000; }
.v4-clip-grid h3 { margin-top: 10px; text-align: center; font-size: 18px; color: var(--navy); }
@media (max-width: 900px) { .v4-clip-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- plan: steps, FAQ, contact CTA */
.v4-plan { padding: 40px 0 48px; background: var(--ivory); }
.v4-plan-grid { display: grid; grid-template-columns: 1fr 1.1fr 1.05fr; gap: 28px; align-items: start; }
.v4-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.v4-steps li { display: grid; justify-items: center; text-align: center; gap: 8px; font: 500 16px/1.35 var(--head); color: var(--navy); }
.v4-step-ic { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.v4-step-ic .v4-ic { width: 34px; height: 34px; color: var(--gold-ink); }
.v4-step-ic b { position: absolute; bottom: -8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font: 600 16px var(--head); }
.v4-faq h2 { margin-bottom: 10px; }
.v4-faq-item { background: #fff; border: 1px solid var(--rule); border-radius: 12px; margin-bottom: 8px; }
.v4-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none;
  font: 500 17px/1.35 var(--head); color: var(--navy); }
.v4-faq-item summary::-webkit-details-marker { display: none; }
.v4-faq-item summary .v4-ic { width: 22px; height: 22px; color: var(--gold-ink); transition: transform .2s; }
.v4-faq-item[open] summary .v4-ic { transform: rotate(45deg); }
.v4-faq-item p { padding: 0 16px 14px; color: var(--ink-2); }
.v4-cta { position: relative; isolation: isolate; border-radius: 22px; overflow: hidden; background: var(--navy); color: #fff; min-height: 300px; display: flex; align-items: center; box-shadow: var(--shadow); }
.v4-cta img { position: absolute; inset: 0 0 0 auto; width: 52%; height: 100%; object-fit: cover; z-index: -1; opacity: .9; }
.v4-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--navy) 48%, rgba(11, 26, 51, .6) 70%, rgba(11, 26, 51, .1) 100%); }
.v4-cta-copy { padding: 28px; }
.v4-cta h2 { font-size: clamp(24px, 2.2vw, 30px); color: #fff; }
.v4-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.v4-cta-phones { margin-top: 10px; font-size: 18px; }
.v4-cta-phones a { color: #f6e7bd; display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 1100px) { .v4-plan-grid { grid-template-columns: 1fr 1fr; } .v4-cta { grid-column: 1 / -1; } }
@media (max-width: 720px) { .v4-plan-grid { grid-template-columns: 1fr; } .v4-cta br { display: none; } .v4-cta img { width: 100%; opacity: .35; } }
@media (max-width: 420px) { .v4-step-ic { width: 76px; height: 76px; } }

/* ---------- footer */
.v4-footer { background: var(--navy); color: #fff; padding: 22px 0 10px; }
.v4-footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.v4-foot-nav { display: flex; flex-wrap: wrap; gap: 0 4px; flex: 1; }
.v4-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; font-size: 16px; color: #e7ecf5; }
.v4-foot-nav a:hover { color: var(--gold-2); }
.v4-social { display: flex; gap: 8px; }
.v4-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); color: #fff; text-decoration: none; }
.v4-social a:hover { background: rgba(255, 255, 255, .12); }
.v4-social-line { font: 700 12px Arial, sans-serif; }
.v4-footer-bottom { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 16px; color: #cfd6e4; }
.v4-footer-bottom a { color: #cfd6e4; display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- lightbox (native <dialog>, does not lock page scroll) */
.v4-lightbox { width: min(96vw, 1000px); max-height: 94vh; padding: 48px 56px 16px; border: 0; border-radius: 16px; background: #0d1222; color: #fff; }
.v4-lightbox::backdrop { background: rgba(5, 8, 20, .85); }
.v4-lightbox figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.v4-lightbox img { max-height: 72vh; width: auto; border-radius: 8px; }
.v4-lightbox figcaption, .v4-lb-count { font-size: 16px; text-align: center; color: #e3e6f0; }
.v4-lightbox button { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.v4-lb-close { top: 6px; right: 6px; }
.v4-lb-prev { left: 4px; top: 50%; } .v4-lb-next { right: 4px; top: 50%; }
@media (max-width: 600px) { .v4-lightbox { padding: 56px 10px 70px; } .v4-lb-prev, .v4-lb-next { top: auto; bottom: 10px; } .v4-lb-prev { left: 30%; } .v4-lb-next { right: 30%; } }

/* ---------- motion preferences */
@media (prefers-reduced-motion: reduce) {
  html:has(body.v4) { scroll-behavior: auto; }
  .v4 *, .v4 *::before, .v4 *::after { transition: none !important; animation: none !important; }
  .v4 :is(.v4-occ, .v4-pier, .v4-music-photos a):hover img { transform: none; }
}

/* ---------- FAQ inline links, occasion sub-label, published guides strip */
.v4-inline { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }
.v4-occ span small { display: block; font: 400 16px/1.3 var(--sans); color: var(--ink-2); margin-top: 2px; }
.v4-occ span:has(small) { flex-direction: column; }
.v4-guides { background: var(--sand); border-top: 1px solid var(--rule); padding: 14px 0; }
.v4-guides-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.v4-guides h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; color: var(--navy); }
.v4-guides h2 .v4-ic { color: var(--gold-ink); }
.v4-guides ul { display: flex; flex-wrap: wrap; gap: 0 22px; flex: 1; }
.v4-guides ul a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.v4-guides ul .v4-ic { width: 18px; height: 18px; color: var(--gold-ink); }

@media (max-width: 720px) {
  .v4-footer-inner { flex-direction: column; align-items: flex-start; }
  .v4-foot-nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .v4-foot-nav a { padding: 0 4px; }
  .v4-guides-inner { flex-direction: column; align-items: flex-start; }
  .v4-guides ul { flex-direction: column; }
}

/* wide screens: a little more hero height so the temple and the boat both fit the real 4:3 photo */
@media (min-width: 1600px) { .v4-hero { min-height: clamp(660px, 38vw, 780px); } }

/* ===================================================================================== spacing revision (12 Nov 2026)
   Measured fixes for touching/crowded components; type sizes unchanged (Thai body 18px, secondary >= 16px, 44px targets). */

/* hero: breathing room between lead, icon row and CTAs */
.v4-hero-lead { margin-top: 18px; }
.v4-minis { margin-top: 28px; }
.v4-hero-actions { margin-top: 30px; }
/* tablet: side arrows sat on the icon row; group arrows bottom-right, dots bottom-left */
@media (min-width: 761px) and (max-width: 1100px) {
  .v4-hero-arrow { top: auto; bottom: 54px; margin-top: 0; }
  .v4-hero-arrow.prev { left: auto; right: calc(var(--pad) + 58px); }
  .v4-hero-arrow.next { right: var(--pad); }
  .v4-hero-dots { right: auto; left: var(--pad); bottom: 56px; }
  .v4-slide figcaption { bottom: 114px; }
}

/* why us: six 3-line captions were cramped below 1500px; 3 x 2 with clear row spacing */
@media (min-width: 1101px) {  /* no upper bound: the wrapper is capped at 1240px, so 1920 has the same content width */
  .v4-why-list { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .v4-why-list li:nth-child(3n + 1)::before { display: none; }
}
.v4-why-list a { gap: 6px; padding: 12px 12px; }

/* packages: arrows moved off the card photos into the gutters; control bar, note and promo chips separated */
@media (min-width: 901px) {
  .v4-carousel { padding-right: 34px; }
  .v4-arrow.next { right: -14px; }
  .v4-arrow.prev { left: calc(clamp(0px, 14vw, 200px) - 64px); }
}
@media (min-width: 601px) and (max-width: 900px) {
  .v4-carousel { padding: 0 34px; }
  .v4-arrow.prev { left: -14px; } .v4-arrow.next { right: -14px; }
}
.v4-carousel-bar { margin-top: 14px; row-gap: 6px; }
.v4-pkg-note { flex-basis: 100%; margin-left: 0; }
.v4-promos { margin-top: 22px; gap: 12px; }
.v4-promo-note { margin-top: 14px; }

/* food: title no longer squeezed into a narrow middle column; icons spaced from the text */
@media (min-width: 1001px) { .v4-food-grid { grid-template-columns: 1fr 1.35fr 1fr; } }
.v4-food-icons { margin-top: 18px; gap: 10px 22px; }
.v4-food-copy .v4-note { margin-top: 16px; }

/* piers: name, count and the Terminal 21 place label now sit below the photo on a light card */
.v4-pier { height: auto; justify-content: flex-start; background: #fff; color: var(--navy); border: 1px solid var(--rule); }
.v4-pier-photo { position: relative; display: block; height: 118px; overflow: hidden; background: var(--sand); }
.v4-pier-photo img { position: absolute; inset: 0; }
.v4-pier-name { background: none; color: var(--navy); padding: 10px 10px 12px; gap: 2px; text-align: center; }
.v4-pier-name small { color: var(--ink-2); }
.v4-pier-tag { position: static; display: block; margin-top: 6px; padding: 4px 6px; border-radius: 8px; background: var(--sand); color: var(--ink-2); font: normal 18px/1.4 var(--sans); }
.v4-pier-list { align-items: stretch; }
.v4-pier-list li { display: flex; }
.v4-pier-list .v4-pier { flex: 1; }
.v4-pier-all { min-height: 180px; }
@media (min-width: 1181px) { .v4-piers-grid { grid-template-columns: 1fr; } .v4-piers-head br { display: none; } }
@media (max-width: 560px) { .v4-pier { height: auto; } .v4-pier-photo { height: 120px; } }

/* clips: titles and note separated */
.v4-clip-grid h3 { margin-top: 12px; }
.v4-clips .v4-note { margin-top: 22px; }

/* steps: number badges touched the labels */
.v4-steps li { gap: 18px; }
.v4-steps ol { margin-top: 22px; }

/* contact CTA: the column is narrow, so the photo becomes a top banner and all text sits on navy */
.v4-cta { display: block; min-height: 0; }
.v4-cta::before { display: none; }
.v4-cta img { position: static; display: block; width: 100%; height: 150px; opacity: 1; }
.v4-cta-copy { padding: 22px 26px 26px; }
.v4-cta-phones { display: flex; flex-wrap: wrap; gap: 0 14px; }
@media (max-width: 1100px) { .v4-cta { display: grid; grid-template-columns: 1fr 1.2fr; } .v4-cta img { height: 100%; min-height: 220px; order: 2; } }
@media (max-width: 720px) { .v4-cta { display: block; } .v4-cta img { height: 150px; min-height: 0; opacity: 1; } }

/* intro: chips spaced from the paragraph */
.v4-intro-facts { margin-top: 18px; gap: 10px; }
/* packages: keep the backdrop photo behind the cards only; controls, note and promo chips sit on plain cream */
.v4-pkg-backdrop { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 78%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 78%); }
.v4-hero-lead { margin-top: 20px; }

/* review r2 ------------------------------------------------------------------------------------------------------- */
/* package cards: 18–20px padding, 8px rhythm, a divider step before the prices; action button aligned to the price row */
.v4-pkg-body { padding: 18px 20px 20px; gap: 8px; align-content: start; }
.v4-pkg-price { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); gap: 2px; }
.v4-pkg-go { right: 18px; bottom: 22px; }
/* phone journey selector: balanced 2 x 2 (help is the fourth cell, not a full-width row), a little more room */
@media (max-width: 639px) {
  .v4-intents { gap: 10px; padding: 12px; }
  .v4-intent { padding: 10px 8px; }
  .v4-intent-help { grid-column: auto; flex-direction: column; text-align: center; justify-content: center; gap: 4px; border-radius: 14px; }
}
/* footer: copyright and phone lines no longer pressed against the divider */
.v4-footer-bottom { gap: 4px 24px; margin-top: 14px; padding-top: 12px; padding-bottom: 6px; }
@media (max-width: 720px) { .v4-footer-bottom { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* follow-up (12 Nov 2026): package cluster vertical rhythm — controls / price note / promo chips / disclaimer.
   The margins above were cancelled by the old `.v4 p` / `.v4 ul` reset (fixed at the top of this file); visible text-to-card gaps
   are now about 24px on desktop and 18px on phones. */
.v4-carousel-bar { row-gap: 8px; }
.v4-pkg-note { margin-top: 6px; }
.v4-promos { margin-top: 22px; }
.v4-promo-note { margin-top: 22px; }
@media (max-width: 600px) { .v4-promos, .v4-promo-note { margin-top: 16px; } }

/* journey ribbon (desktop): dividers sit midway between adjacent icon+text groups. Each service cell grows from its own content
   width by the same share of the free space and centres its group, so the slack left and right of every divider is equal even
   when labels differ; the divider is the cell boundary (no flex gap, no space-around slack beside it). */
@media (min-width: 1101px) {
  .v4-intents { justify-content: flex-start; gap: 0; }
  .v4-intent { flex: 1 1 auto; justify-content: center; }
  .v4-intent + .v4-intent::before { left: -.5px; }
  .v4-intent-help { flex: 0 0 auto; margin-left: 12px; }
}

/* YouTube clips heading (12 Nov 2026): the inline-flex .v4-yt span took its baseline from the icon's bottom edge, lifting "YouTube"
   5-8px above the Thai words, and the row's align-items:end left the link text about 14px off the heading baseline.
   Icon + "YouTube" stay one unbreakable inline run on the shared text baseline; the icon is centred between the Latin cap height
   (~.64em) and the Thai letter height (~.54em) of this font; the link shares the heading's first-line baseline. */
.v4-clips .v4-row-head { align-items: baseline; }
.v4-clips .v4-yt { display: inline; white-space: nowrap; }
/* -6px keeps the 34px icon inside the line's descent at both title sizes (26/33px) so the flex row's baseline stays exact;
   the relative nudge (paint only) then puts the icon centre .3em above the baseline. */
.v4-clips .v4-yt .v4-ic { display: inline-block; vertical-align: -6px; position: relative; top: calc(11px - .3em); margin-right: 8px; }