@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;600&family=Noto+Sans+SC:wght@400;600&display=swap');
@font-face{font-family:Playfair;src:url('/fonts/playfair.ttf');font-weight:600;font-display:swap}
body,button,input,select,textarea{font-family:Inter,'Noto Sans Thai','Noto Sans SC',sans-serif!important}
body{font-size:17px;line-height:1.65}
h1,h2,h3,.hero-title-line{font-family:Playfair,'Noto Sans Thai','Noto Sans SC',serif!important;font-weight:600!important}
.brand img{filter:none!important;mix-blend-mode:normal!important;background:transparent!important;border-radius:0;object-fit:contain}
.main-nav a{font-size:clamp(.88rem,1vw,1rem);font-weight:600}
.booking-grid{gap:clamp(18px,2vw,32px)!important}
.booking-card{background:#fff;border:1px solid #e5e1d8!important;box-shadow:0 8px 26px #10283b0d!important;border-radius:16px!important;overflow:hidden}
.booking-copy{padding:clamp(20px,2vw,32px)!important}
.booking-copy h3{font-size:clamp(1.45rem,2vw,2rem);line-height:1.24}
.booking-copy p,.programme-body p{font-size:1.0625rem;line-height:1.7}
.header-plan,.booking-actions button{background:#163549!important;color:white!important;border-color:#bcaa81!important}
.experience-heading{margin-bottom:clamp(24px,4vw,52px)}
:root{--gold:#bba574;--gold-light:#e2d6ba}
.hero-copy{max-width:850px}
.hero h1{line-height:1.13!important;letter-spacing:-.025em}
.experiences-section,.local-section{padding-top:clamp(64px,7vw,108px)!important;padding-bottom:clamp(64px,7vw,108px)!important}
.page-banner h1,.page-banner h2{font-size:clamp(2.25rem,5vw,4.5rem)!important;line-height:1.16}
.booking-photo{aspect-ratio:4/3;object-fit:cover;width:100%}
.booking-actions a,.booking-actions button{font-size:15px!important;min-height:46px;align-items:center;justify-content:center}
.site-header.is-solid{background:#fffdf9!important;box-shadow:0 2px 18px #0b26320a!important}
.programme-body,.programme-aside{line-height:1.8}
@media(max-width:700px){body{font-size:16px}.hero h1{font-size:clamp(2.4rem,8.5vw,3.4rem)!important}.hero-copy p{font-size:17px!important;line-height:1.7}.booking-copy h3{font-size:25px}.booking-grid{gap:26px!important}.search-field{gap:12px!important}.search-field label{font-size:12px!important}.search-field select,.search-field input{font-size:15px!important}.main-nav.open a{font-size:17px!important;padding:14px!important}}

.hero-media-controls{display:none!important}
.header-plan{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:22px!important;min-height:52px!important;padding:13px 24px!important;font-size:16px!important;line-height:1.3!important;font-weight:600!important;white-space:nowrap}.header-plan svg{width:20px!important;height:20px!important;flex-shrink:0}
.main-nav a{font-size:15px!important;line-height:1.4!important}
@media(min-width:1100px){.main-nav{gap:22px!important}}

/* Center the content inside a flexible hero, reserving space for the header
   and original overlapping search/wave composition. Content can grow the hero. */
.hero-copy > .eyebrow { display: none !important; }
body:not(.tour-page) .hero {
 display: grid;
 align-items: center;
 box-sizing: border-box;
 height: auto;
 min-height: max(870px, 100svh);
 max-height: none;
 padding-block: 124px 233px;
}
.hero-copy, html[lang=th] .hero-copy {
 padding-block: 0 !important;
 min-width: 0;
}
@media(max-width:1100px) {
 body:not(.tour-page) .hero { padding-bottom: 251px; }
}
@media(max-width:700px) {
 body:not(.tour-page) .hero {
  min-height: max(944px, 100svh);
  padding-block: 110px 250px;
 }
}

/* Simple travel-card typography, independent from the editorial hero headings. */
.booking-copy h3, html[lang=th] .booking-copy h3, html[lang=zh-CN] .booking-copy h3 {
 font-family: Inter, 'Noto Sans Thai', 'Noto Sans SC', sans-serif !important;
 font-size: clamp(22px, 1.8vw, 28px);
 font-weight: 600 !important;
 line-height: 1.35 !important;
 letter-spacing: -.025em;
 margin-block: 12px 14px;
 overflow-wrap: anywhere;
}
/* Compact touch controls: desktop CTA sizing must not override mobile layout. */
@media(max-width:960px) {
 .site-header .brand { min-width: 0; }
 .site-header .brand > span, .site-header .brand strong { white-space: nowrap; }
 .site-header .header-actions { flex-shrink: 0; }
}
@media(max-width:700px) {
 .site-header, .site-header.home-header {
  height: 78px;
  padding: 0 16px;
  gap: 10px;
  grid-template-columns: minmax(0,1fr) auto;
 }
 .site-header.home-header { margin-bottom: -78px; }
 .site-header .brand { margin-left:0; gap:7px; }
 .site-header .brand img { width:28px; height:40px; flex:none; }
 .site-header .brand > span { font-size:12px; letter-spacing:1px; line-height:1.35; }
 .site-header .brand strong { font-size:8px; letter-spacing:2.5px; margin-top:3px; }
 .site-header .header-actions { gap:8px; justify-self:end; }
 .site-header .language { gap:2px; }
 .site-header .language > svg { width:14px; height:14px; flex:none; }
 .site-header .language select { font-size:11px; width:43px; max-width:43px; min-height:40px; padding:0; }
 .site-header .header-plan {
  min-width:0 !important; min-height:36px !important;
  padding:8px 10px !important; gap:6px !important;
  font-size:10px !important; line-height:1.2 !important;
 }
 .site-header .header-plan svg { width:13px !important; height:13px !important; }
 .site-header .menu-button { display:block; flex:none; padding:7px 0 7px 4px; min-height:40px; }
 .site-header .menu-button svg { width:22px; height:22px; }
 .site-header .main-nav { top:78px; }
 .hero-actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
 .hero-actions > .gold, .hero-story-button {
  min-width:0; min-height:42px; padding:11px 15px;
  font-size:11px; gap:9px;
 }
 .hero-actions > .gold > svg { width:16px; height:16px; }
 .hero-story-button > span { width:23px; height:23px; }
 .booking-copy h3 { font-size:22px; }
}
@media(max-width:379px) {
 .site-header, .site-header.home-header { padding-inline:12px; gap:7px; }
 .site-header .header-actions { gap:5px; }
 .site-header .brand > span { font-size:11px; letter-spacing:.6px; }
 .site-header .brand strong { font-size:7px; letter-spacing:2.2px; }
 .site-header .brand img { width:25px; height:36px; }
 .site-header .header-plan { padding-inline:8px !important; font-size:9px !important; gap:4px !important; }
}
@media(max-width:339px) {
 .site-header .header-plan { display:none !important; }
}

/* Footer branding uses its own colors, independent of dark page headers. */
.site-footer .brand > span { color: var(--navy) !important; }
.site-footer .brand strong { color: var(--gold-dark) !important; }
.site-header .brand-license {
 display: block;
 margin-top: 5px;
 font-family: Inter, 'Noto Sans Thai', 'Noto Sans SC', sans-serif;
 font-size: 10px;
 font-weight: 500;
 line-height: 1.3;
 letter-spacing: .02em;
 color: inherit;
 white-space: nowrap;
}
/* Use the card's clear sans-serif type throughout content, preserving banners. */
html body :is(h1,h2,h3):not(.hero *, .page-banner *, .programme-hero *) {
 font-family: Inter, 'Noto Sans Thai', 'Noto Sans SC', sans-serif !important;
 font-weight: 600 !important;
 line-height: 1.3 !important;
 letter-spacing: -.025em !important;
}
html body :is(h1,h2,h3):not(.hero *, .page-banner *, .programme-hero *) em {
 font-style: normal;
}
.review-card > p, .experience-stamp strong, .route-benefit > span, .itinerary > li > span {
 font-family: Inter, 'Noto Sans Thai', 'Noto Sans SC', sans-serif !important;
}
@media(max-width:700px) {
 .site-header .brand-license { margin-top: 4px; font-size: 8px; line-height: 1.3; letter-spacing: 0; }
}
@media(max-width:379px) {
 .site-header .brand-license { font-size: 7px; }
}

/* Readable content sizes; banner and compact header branding keep their sizing. */
html body p:not(.hero *, .page-banner *, .programme-hero *) {
 font-size: max(16px, 1em) !important;
 line-height: 1.75 !important;
}
html body main .service-row h3 { font-size: 18px !important; }
html body main label:not(.search-field) { font-size: 14px; line-height: 1.6; }
html body main :is(input,select,textarea) { font-size: 15px !important; line-height: 1.5; }
html body main .small-label { font-size: 11px; line-height: 1.6; }
.site-footer .footer-main > div > a:not(.brand) { font-size: 14px !important; line-height: 1.8; }
.site-footer .footer-label { font-size: 12px; }
.site-footer .footer-location { font-size: 13px; }
.site-footer .footer-bottom { font-size: 12px; line-height: 1.8; }
.site-footer .footer-bottom :is(a,small,span) { font-size: 12px; line-height: 1.8; }
@media(max-width:700px) {
 html body p:not(.hero *, .page-banner *, .programme-hero *) { font-size: max(16px, 1em) !important; }
 .site-footer .footer-main > div > a:not(.brand) { overflow-wrap: anywhere; }
}
.site-footer .fineprint, .site-footer .footer-social a { font-size: 13px; line-height: 1.8; }

.format-filter { gap:10px; flex-wrap:wrap; }
.format-filter button[data-format] {
 font-family: Inter, 'Noto Sans Thai', 'Noto Sans SC', sans-serif !important;
 font-size:15px !important; font-weight:600; line-height:1.4;
 padding:10px 18px; min-height:42px;
}
.format-filter > .small-label { font-size:12px; }
.evening-enquiry[hidden] { display:none !important; }
.search-empty .evening-enquiry { margin:0 10px 10px 0; }
@media(max-width:700px) {
 .format-filter button[data-format] { font-size:14px !important; padding:9px 12px; min-height:40px; }
}

/* Keep introduction text within its column at every browser zoom. */
.experience-intro-copy,
.experience-benefits,
.experience-benefit > div { min-width: 0; }
.experience-intro-copy h2 > span,
.experience-benefit p { white-space: normal; overflow-wrap: anywhere; }
.experience-intro-copy h2 { max-width: 100%; }

/* Real tour details follow the existing programme and catalogue layouts. */
.booking-copy h3 { overflow-wrap: anywhere; }
.tour-card-price { color:var(--gold-dark);font-weight:700;margin-top:12px; }
.tour-card-price small { color:var(--muted);font-weight:400; }
.programme-top h1 { font-size:clamp(30px,3.3vw,52px);overflow-wrap:break-word; }
.programme-body > div,.programme-aside {min-width:0;}
.programme-body .programme-plan h3 {margin-top:30px;}
.programme-body h4 {font-size:17px;margin:20px 0 8px;}
.programme-body ul:not(.programme-highlights) {padding-left:22px;}
.real-itinerary {list-style:none;padding:0 0 0 24px;border-left:1px solid var(--line);}
.real-itinerary li {position:relative;}
.real-itinerary li:before {content:'';width:9px;height:9px;border-radius:50%;background:var(--gold-dark);position:absolute;left:-29px;top:8px;}
.tour-prices,.tour-facts {margin:16px 0 24px;}
.tour-prices > div,.tour-facts > div {display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,1.5fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);}
.tour-prices dt,.tour-facts dt {font-size:14px;font-weight:600;}
.tour-prices dd,.tour-facts dd {margin:0;font-size:14px;line-height:1.7;}
.tour-prices dd {font-weight:700;color:var(--gold-dark);text-align:right;}
.table-scroll {overflow-x:auto;max-width:100%;}
.tour-slots {min-width:0;width:100%;font-size:13px;}
.tour-slots th,.tour-slots td {padding:12px;white-space:normal;}
.real-booking-form {display:grid;gap:16px;}
.real-booking-form h3 {margin:0 0 8px;}
.real-booking-form label {display:grid;gap:7px;font-size:13px;font-weight:600;}
.real-booking-form input,.real-booking-form select,.real-booking-form textarea {width:100%;max-width:100%;min-width:0;border:1px solid #d7cbb8;border-radius:7px;padding:12px;background:#fff;color:var(--navy);font:inherit;}
.real-booking-form input[type=checkbox] {width:18px;height:18px;flex:none;margin:3px 0;}
.real-booking-form .booking-consent {display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.6;font-weight:400;}
.real-booking-form .form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.real-booking-form .booking-total {padding:18px;border:1px solid #d7cbb8;border-radius:9px;display:grid;gap:8px;}
.booking-total strong {font-size:26px;color:var(--gold-dark);}
.booking-total small {font-size:12px;line-height:1.6;}
html body .real-booking-form :is(.fineprint,.booking-help,.date-status,.slot-summary,.form-status) {font-size:13px!important;margin:0;}
.date-status.unavailable,.form-status {color:#9d3f28;}
.booking-page-aside {position:static;}
.real-booking-form .button {white-space:normal;text-align:center;}
@media(max-width:800px){.programme-body{gap:35px;}.programme-aside{position:static;}.tour-slots th,.tour-slots td{padding:9px;font-size:12px;}}
@media(max-width:420px){.real-booking-form .form-grid{grid-template-columns:1fr;}.programme-aside{padding:22px;}.tour-facts>div{grid-template-columns:1fr;gap:4px;}}
@media(max-width:800px){.booking-layout>.booking-page-aside{order:-1;}}

/* Readable tour content; banner typography matches the homepage banner. */
html body .programme-hero :is(h1,h2,h3),
html body .programme-body :is(h1,h2,h3,h4),
html body .booking-copy :is(h1,h2,h3) {
 font-family:Inter,Manrope,'Noto Sans Thai',NotoThai,'Noto Sans SC',sans-serif!important;
 font-weight:600!important;
 line-height:1.3!important;
 letter-spacing:-.025em!important;
}
html body .hero h1,
html body .page-banner :is(h1,h2) {
 font-family:Playfair,'Noto Sans Thai','Noto Sans SC',serif!important;
 font-weight:600!important;
}
html[lang=th] body .page-banner :is(h1,h2) {font-family:'Noto Sans Thai',NotoThai,Manrope,sans-serif!important;}
html[lang=zh-CN] body .page-banner :is(h1,h2) {font-family:'Noto Sans SC',sans-serif!important;}

/* Programme banners use readable type; homepage and catalogue banners retain their styling. */
html body.programme-page .page-banner :is(h1,h2) {
 font-family:Inter,Manrope,'Noto Sans Thai',NotoThai,'Noto Sans SC',sans-serif!important;
 font-weight:600!important;
 line-height:1.2!important;
 letter-spacing:-.025em!important;
}

.tour-gallery { margin: 28px 0; }
.tour-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tour-gallery-grid a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #ebe6da;
}
.tour-gallery-grid span {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #173027;
  color: white;
  font-size: .8rem;
}
.tour-gallery-grid a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tour-gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 640px) {
  .tour-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}