/* === EMBEDDED FONTS (loaded from assets/fonts/) === */
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/old-standard-tt/OldStandardTT-Regular.ttf") format("truetype");
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/old-standard-tt/OldStandardTT-Italic.ttf") format("truetype");
}
@font-face {
  font-family: 'Old Standard TT';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/old-standard-tt/OldStandardTT-Bold.ttf") format("truetype");
}
@font-face {
  font-family: 'JS Pumpuang';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/js-pumpuang/JS-75-Pumpuang-Regular.ttf") format("truetype");
}
@font-face {
  font-family: 'Anuphan';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/anuphan/Anuphan-VariableFont_wght.ttf") format("truetype");
}


/* === variables === */
/* =====================================================================
   YOUR HOLIDAYS — DESIGN TOKENS
   Based on Brand Guideline by Plaimanas
   ===================================================================== */

/* ---------- FONT FACES ---------- */






/* ---------- ROOT TOKENS ---------- */
:root {
  /* === BRAND PALETTE — STRICTLY 6 COLOURS ONLY === */
  /* Primary 75% */
  --c-blue:       #91ACB8;   /* 30% — Dusty Blue */
  --c-cream:      #EEEEE5;   /* 25% — Cream */
  --c-rust:       #7C3C1B;   /* 20% — Rust Brown */
  /* Secondary 25% */
  --c-green:      #466F3F;   /* 10% — Forest Green */
  --c-black:      #181715;   /* 10% — Almost Black */
  --c-royal:      #324EBD;   /* 5%  — Royal Blue (reserved) */
  --c-charcoal:   #211F1C;   /* dark neutral — media fallback + mobile testimonial card (derived from Almost Black) */

  /* === SEMANTIC tokens — all derived from the 6 above === */
  --bg:           var(--c-cream);
  --bg-inverse:   var(--c-black);
  --bg-accent:    var(--c-rust);
  --bg-rest:      var(--c-blue);
  --bg-forest:    var(--c-green);

  --ink:          var(--c-black);
  --ink-inverse:  var(--c-cream);
  --ink-accent:   var(--c-rust);
  --ink-cool:     var(--c-blue);

  /* Transparencies of the 6 colours only (no new hues) */
  --ink-muted:    rgba(24, 23, 21, 0.65);
  --ink-soft:     rgba(24, 23, 21, 0.45);
  --ink-faint:    rgba(24, 23, 21, 0.25);
  --ink-muted-i:  rgba(238, 238, 229, 0.70);
  --ink-soft-i:   rgba(238, 238, 229, 0.45);
  --ink-faint-i:  rgba(238, 238, 229, 0.20);

  --line:         rgba(24, 23, 21, 0.14);
  --line-strong:  rgba(24, 23, 21, 0.30);
  --line-inverse: rgba(238, 238, 229, 0.18);

  /* TYPOGRAPHY */
  --font-en-serif: "Old Standard TT", Georgia, serif;
  --font-th-serif: "JS Pumpuang", "Old Standard TT", serif;
  --font-sans:     "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale */
  --fs-hero:    clamp(2.5rem, 6vw + 0.5rem, 8.5rem);
  --fs-display: clamp(2rem, 4.5vw + 0.5rem, 5.5rem);
  --fs-h1:      clamp(2rem, 3.5vw + 0.5rem, 4rem);
  --fs-h2:      clamp(1.625rem, 2vw + 1rem, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1vw + 0.85rem, 1.75rem);
  --fs-lead:    clamp(1.125rem, 0.4vw + 0.9rem, 1.375rem);
  --fs-body:    clamp(1rem, 0.2vw + 0.9rem, 1.125rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-micro:   0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-base:    1.55;
  --lh-loose:   1.85;

  --ls-wide:    0.18em;
  --ls-wider:   0.28em;
  --ls-tight:   -0.015em;

  /* SPACING */
  --s-3xs:  0.25rem;
  --s-2xs:  0.5rem;
  --s-xs:   0.75rem;
  --s-sm:   1rem;
  --s-md:   1.5rem;
  --s-lg:   2.5rem;
  --s-xl:   4rem;
  --s-2xl:  6rem;
  --s-3xl:  9rem;
  --s-4xl:  12rem;

  /* LAYOUT */
  --container-narrow: 880px;
  --container:        1240px;
  --container-wide:   1600px;
  --gutter:           clamp(1.25rem, 6vw, 80px);

  /* Fixed inset hero ("page-hero") — เริ่มใต้ navbar มีขอบรอบด้าน */
  --nav-h:     3.5rem;                       /* ความสูง navbar (solid) โดยประมาณ */
  --frame:     clamp(12px, 2.2vw, 28px);     /* ขอบรอบ hero (inset) */
  --hero-band: clamp(520px, 48vh, 520px);    /* ความสูง hero card */

  /* Pomelo sidebar */
  --sidebar-w:    96px;

  --radius-sm: 2px;
  --radius:    4px;

  --ease:        cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --t-fast:      200ms;
  --t-base:      400ms;
  --t-slow:      800ms;

  --nav-h:       72px;
  --nav-h-mob:   60px;
}


/* === reset === */
/* =====================================================================
   MODERN CSS RESET
   ===================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* กันหน้าเว็บล้นแนวนอนบนมือถือ (clip ไม่สร้าง scroll container → sticky ยังทำงาน) */
  overflow-x: clip;
  max-width: 100%;
}

html[lang="th"], 
html[lang="th"] body,
html[lang="th"] h1, 
html[lang="th"] h2, 
html[lang="th"] h3, 
html[lang="th"] h4, 
html[lang="th"] h5, 
html[lang="th"] h6, 
html[lang="th"] p, 
html[lang="th"] span:not(.fa):not(.ab-icon), 
html[lang="th"] button, 
html[lang="th"] label, 
html[lang="th"] a, 
html[lang="th"] strong, 
html[lang="th"] input, 
html[lang="th"] div,
html[lang="th"] .elementor-image-box-title,
html[lang="th"] blockquote,
html[lang="th"] figcaption
{
  font-family: var(--font-sans)!important;
}

body {
  min-height: 100vh;
  line-height: var(--lh-base);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--c-rust);
  color: var(--c-cream);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* === main === */
/* =====================================================================
   YOUR HOLIDAYS — Editorial × Explorer × Luxury
   Beyond the Guidebook
   ===================================================================== */

/* ===== BASE ===== */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  overflow-x: clip;
}

[data-lang="th"] .show-en,
[data-lang="en"] .show-th { display: none !important; }

::selection { background: var(--c-rust); color: var(--c-cream); }

/* Editorial body sets Anuphan as default; Thai content inherits */
[data-lang="th"] body { font-family: var(--font-sans); }

/* Reusable */
.container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Roman numerals helper */
.roman {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* Caps label */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* =====================================================================
   NAVBAR — Pomelo-style horizontal, logo center, transparent over hero
   ===================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: all var(--t-base) var(--ease);
  color: var(--c-cream);
}
.nav.is-scrolled {
  background: rgba(24, 23, 21, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 0.85rem 0;
}

.nav__container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.5rem;
  position: relative;
}

/* nav element wraps menu lists for semantic structure (SEO);
   display:contents makes it transparent to the parent grid layout */
.nav__group { display: contents; }

.nav__menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
}
.nav__menu--left {
  justify-content: flex-end;
  gap: clamp(1.25rem, 2.5vw, 3rem);
}
.nav__menu--right {
  justify-content: flex-start;
  gap: clamp(1.25rem, 2.5vw, 3rem);
}

.nav__link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-cream);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
  opacity: 0.92;
  white-space: nowrap;
  transition: opacity var(--t-fast);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--c-cream);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* เมนูภาษาไทย — ไม่ต้องกระจายตัวอักษรเหมือน EN uppercase ให้ชิดขึ้น */
[data-lang="th"] .nav__link,
[data-lang="th"] .mobile-menu__link { letter-spacing: 0.05em; }

/* center logo: stacked when over hero, horizontal when scrolled */
.nav__logo {
  justify-self: center;
  display: block;
  line-height: 0;
  position: relative;
  transition: opacity var(--t-fast);
}
.nav__logo:hover { opacity: 0.85; }
.nav__logo-img {
  display: block;
  line-height: 0;
  transition: opacity var(--t-base) var(--ease);
}
.nav__logo-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* stacked (square) — default state, over hero */
.nav__logo-img--stacked {
  width: 92px;
  height: auto;
}
.nav__logo-img--horizontal {
  display: none;
}

/* scrolled: switch to horizontal */
.nav.is-scrolled .nav__logo-img--stacked {
  display: none;
}
.nav.is-scrolled .nav__logo-img--horizontal {
  display: block;
  width: 220px;
  height: auto;
}

/* lang toggle placed in navbar (right menu) */
.nav__lang-item {
  display: flex;
  align-items: center;
  margin-left: 0.25rem;
  padding-left: clamp(1rem, 2vw, 2rem);
  border-left: 1px solid rgba(238, 238, 229, 0.25);
}
.nav__lang {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  font-weight: 500;
}
.nav__lang .lang-toggle__btn { color: var(--c-cream); padding: 0.15rem 0.35rem; }
.nav__lang .lang-toggle__divider { color: var(--c-cream); }

/* lang toggle placed in footer bottom */
.footer__lang {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  font-weight: 500;
  margin-left: auto;
}
.footer__lang .lang-toggle__btn { color: var(--c-cream); }
.footer__lang .lang-toggle__divider { color: var(--c-cream); }

.lang-toggle {
  display: flex;
}
.lang-toggle__btn {
  background: none;
  border: none;
  color: var(--c-cream);
  cursor: pointer;
  padding: 0.15rem 0.45rem;
  opacity: 0.5;
  transition: opacity var(--t-fast);
  font: inherit;
  letter-spacing: inherit;
}
.lang-toggle__btn.is-active { opacity: 1; }
.lang-toggle__btn:hover { opacity: 0.85; }
.lang-toggle__divider { opacity: 0.35; padding: 0 0.1rem; color: var(--c-cream); }

/* burger (mobile) */
.nav__burger {
  display: none;
  background: none;
  border: none;
  color: var(--c-cream);
  cursor: pointer;
  width: 36px;
  height: 36px;
  position: relative;
  padding: 0;
  justify-self: end;
}
.nav__burger span {
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: currentColor;
  transition: all var(--t-base) var(--ease);
}
.nav__burger span:nth-child(1) { top: 12px; }
.nav__burger span:nth-child(2) { top: 18px; }
.nav__burger span:nth-child(3) { top: 24px; }
.nav__burger.is-open span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

.grecaptcha-badge {
    z-index: 10!important;
}
/* =====================================================================
   PAGE
   ===================================================================== */
.page {
  /* no shift — navbar floats over hero */
}

/* =====================================================================
   PAGE HERO — header กลางสำหรับหน้ารอง (ชื่อหน้าตัวใหญ่ + คำอธิบายสั้น)
   ใช้ซ้ำทุกหน้า ให้หน้าตาสอดคล้องกัน — เคลียร์ navbar แบบ fixed ด้านบน
   ===================================================================== */
.page-hero {
  /* hero แบบ fixed card — ปักนิ่ง เริ่มที่ top:0 (อยู่หลัง navbar โปร่งใส)
     มีขอบครีมซ้าย/ขวา/ล่าง เนื้อหา section ด้านล่างเลื่อนขึ้นมาทับ ไม่ขยับ */
  position: fixed;
  top: 0;
  left: var(--frame);
  right: var(--frame);
  z-index: 0;
  height: calc(var(--nav-h) + var(--hero-band));
  overflow: hidden;
  background-color: var(--c-black);   /* fallback ขณะภาพยังโหลด */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
}
/* overlay เข้มทับภาพ hero ให้ตัวอักษร/navbar อ่านออก */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(24,23,21,0.74) 0%, rgba(24,23,21,0.32) 55%, rgba(24,23,21,0.5) 100%);
  pointer-events: none;
}
/* ตัวอักษร hero อยู่เหนือ overlay */
.page-hero > * { position: relative; z-index: 1; }
/* รูป hero ต่อหน้า (ดึงจาก assets/images/hero/) */
#gallery-page  .page-hero { background-image: url("../assets/images/hero/gallery-hero.jpg"); }
#services-page .page-hero { background-image: url("../assets/images/hero/services-hero.jpg"); }
#about         .page-hero { background-image: url("../assets/images/hero/about-hero.jpg"); }
#contact-page  .page-hero { background-image: url("../assets/images/hero/contact-hero.jpg"); }
#article       .page-hero { background-image: url("../assets/images/hero/article-hero.png"); }
#articles      .page-hero { background-image: url("../assets/images/hero/1.jpg"); }
#service-private-group   .page-hero { background-image: url("../assets/images/service/Private-Group.png?v=2"); }
#service-ticket          .page-hero { background-image: url("../assets/images/service/Ticket.png?v=2"); }
#service-visa            .page-hero { background-image: url("../assets/images/service/VISA-hero.jpg?v=2"); }
#service-insurance       .page-hero { background-image: url("../assets/images/service/Insurance.jpg?v=2"); }
#service-hotel           .page-hero { background-image: url("../assets/images/service/hotel.png?v=2"); }
#service-private-transfer .page-hero { background-image: url("../assets/images/service/Private-Transfer.png?v=2"); }
#service-event           .page-hero { background-image: url("../assets/images/service/Event.png?v=2"); }
/* ทุก section เนื้อหาที่เลื่อนขึ้นมาทับ hero (ทึบ + ชั้นบนกว่า) */
.page-hero ~ section {
  position: relative;
  z-index: 1;
  background: var(--c-cream);
}
/* พื้นครีมเต็มความกว้าง บัง hero ให้มิดแม้ section จะมี max-width (กันขอบ hero โผล่ข้าง) */
.page-hero ~ section::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--c-cream);
  z-index: -1;
}
/* section แรก ดันลงให้เริ่มใต้ hero (มีขอบครีมคั่น) */
.page-hero + section {
  margin-top: calc(var(--nav-h) + var(--hero-band) + var(--frame));
}
/* ตัวเว้นระยะสำหรับหน้าที่มีแต่ hero (เช่น about) ให้ฟุตเตอร์เลื่อนมาทับได้ */
.page-hero-spacer { height: calc(var(--nav-h) + var(--hero-band) + var(--frame)); }
.page-hero__title {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--c-cream);
}
.page-hero__title em { font-style: italic; }
[data-lang="th"] .page-hero__title { font-family: var(--font-th-serif); line-height: 1.08; }
.page-hero__title-th { font-family: var(--font-th-serif); }
.page-hero__desc {
  margin: clamp(1.25rem, 3vw, 2.25rem) 0 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.75;
  color: var(--c-cream);
  opacity: 0.8;
  /* จำกัดไม่เกิน 2 บรรทัด */
  /* display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; */
  overflow: hidden;
}

/* Back-to-services link — moved OUT of the hero banner, down into the cream
   content area just below it. `.subpage-back` sits between .page-hero and the
   first content section, carrying the same top offset the section used to have
   (mirrors .page-hero ~ section so it scrolls up over the fixed hero). */
.subpage-back {
  position: relative;
  z-index: 1;
  background: var(--c-cream);
  margin-top: calc(var(--nav-h) + var(--hero-band) + var(--frame));
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--gutter) 0;
}
.subpage-back::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--c-cream);
  z-index: -1;
}
.subpage-back .adx-hero__back {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; opacity: 0.7;
}
.subpage-back .adx-hero__back:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   PAGE BANNER — รูป full-width ใต้ page-hero (เช่นหน้า articles)
   ===================================================================== */
.page-banner {
  /* hero แบบ fixed — อยู่กับที่ตลอด ไม่ขยับ; เนื้อหา/ฟุตเตอร์เลื่อนมาปิดทับ */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50vh;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--c-charcoal);
}
/* ตัวเว้นระยะในสายธารเอกสาร = ความสูง banner เพื่อให้มี “ช่วงเลื่อน”
   ที่เห็น banner ก่อนเนื้อหาถัดไปจะเลื่อนขึ้นมาปิด */
.page-banner__spacer {
  height: 50vh;
}
.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-banner__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(2.5rem, 8vw, 6rem)
           max(var(--gutter), calc((100% - var(--container-wide)) / 2 + var(--gutter)))
           clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(to top, rgba(24,23,21,0.72) 0%, rgba(24,23,21,0.25) 45%, rgba(24,23,21,0) 100%);
  color: var(--c-cream);
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  line-height: 1.1;
}
.page-banner__cap em { font-style: italic; }
.page-banner__cap-th { font-family: var(--font-th-serif); }

/* =====================================================================
   MOBILE MENU
   ===================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--c-black);
  color: var(--c-cream);
  z-index: 99;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-menu__link {
  font-family: var(--font-en-serif);
  font-size: clamp(2rem, 8vw, 3.5rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--c-cream);
  line-height: 1.1;
}
[data-lang="th"] .mobile-menu__link { font-family: var(--font-th-serif); }
.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted-i);
}

/* =====================================================================
   HERO — Pomelo-style full-bleed image + bottom-left caption
   ===================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  max-height: 900px;
  min-height: 600px;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-cream);
  display: flex;
  align-items: flex-end;
  padding: 5rem var(--gutter) 4rem;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--c-charcoal);
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 14s var(--ease-out) forwards;
  display: block;
}
@keyframes heroZoom { to { transform: scale(1.0); } }
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(24,23,21,0.55) 0%, rgba(24,23,21,0.15) 25%, rgba(24,23,21,0.15) 50%, rgba(24,23,21,0.85) 100%);
}

.hero__caption {
  position: relative;
  z-index: 3;
  max-width: 720px;
  width: 100%;
}

.hero__display {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw + 0.5rem, 5.25rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 1.5rem;
  color: var(--c-cream);
}
.hero__display em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-cream);
  opacity: 0.75;
}
/* Keep each phrase on its own single line (always two lines, no wrapping) */
.hero__display-line {
  display: block;
  white-space: nowrap;
}
/* Shrink the EN headline on narrow screens so the long line never overflows */
@media (max-width: 600px) {
  .hero__display .show-en { font-size: clamp(1.5rem, 7.4vw, 2.6rem); }
}
.hero__display-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.875rem, 4.5vw + 0.25rem, 4.875rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.hero__lede {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 0.8vw + 0.6rem, 1.5rem);
  line-height: 1.5;
  color: var(--c-cream);
  opacity: 0.85;
  margin: 0 0 2.25rem;
  max-width: 52ch;
  font-weight: 400;
}
.hero__lede-th {
  font-family: var(--font-th-serif);
  font-style: normal;
  font-size: clamp(1rem, 0.8vw + 0.5rem, 1.25rem);
  line-height: 1.6;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-cream);
  text-decoration: none;
  padding: 1.1rem 2.25rem;
  border: 1px solid var(--c-cream);
  background: transparent;
  transition: all var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-cream);
  transform: translateX(-101%);
  transition: transform var(--t-base) var(--ease);
  z-index: -1;
}
.hero__cta:hover { color: var(--c-black); border-color: var(--c-cream); }
.hero__cta:hover::before { transform: translateX(0); }
.hero__cta-arrow {
  font-size: 1em;
  transition: transform var(--t-base) var(--ease);
  display: inline-block;
}
.hero__cta:hover .hero__cta-arrow { transform: translateX(4px); }

/* bottom-right tagline */
.hero__tagline {
  position: absolute;
  bottom: 4rem;
  right: var(--gutter);
  z-index: 3;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--c-cream);
  opacity: 0.85;
  letter-spacing: 0.02em;
  text-align: right;
}

/* =====================================================================
   MARQUEE — Beyond the Guidebook
   ===================================================================== */
.marquee {
  background: var(--c-cream);
  padding: 2.5rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.marquee__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  width: max-content;
}
.marquee__item {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.75rem);
  font-weight: 400;
  color: var(--ink);
}
.marquee__item.is-accent {
  color: var(--c-rust);
  font-style: normal;
}
.marquee__star {
  display: inline-block;
  font-size: 0.7em;
  color: var(--c-rust);
  margin: 0 0.5rem;
  transform: translateY(-0.25em);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =====================================================================
   PROLOGUE — Story intro
   ===================================================================== */
.prologue {
  padding: 8rem 0 6rem;
  background: var(--c-cream);
}
.prologue__grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.prologue__label {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 100px;
}
.prologue__label-text {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--c-rust);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.prologue__label-text::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-rust);
  flex-shrink: 0;
}
.show-th.prologue__label-text {
  font-family: var(--font-th-serif);
  font-style: normal;
}

.prologue__body { max-width: 60ch; }
.prologue__quote {
  font-family: var(--font-en-serif);
  font-size: clamp(1.625rem, 2.2vw + 0.5rem, 2.75rem);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 2.5rem;
}
.prologue__quote em { font-style: italic; }
.prologue__quote-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.375rem, 1.9vw + 0.4rem, 2.375rem);
  line-height: 1.25;
}
.prologue__text {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
  font-weight: 300;
}
.prologue__sign {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-en-serif);
  font-style: italic;
}
.prologue__sign-line {
  width: 40px;
  height: 1px;
  background: var(--c-rust);
}
.prologue__sign-text {
  font-size: 0.875rem;
  color: var(--c-rust);
  letter-spacing: 0.05em;
}

/* =====================================================================
   ADVANTAGES — Why Your Holidays (2x2 grid)
   ===================================================================== */
.advantages {
  background: var(--c-cream);
  padding: 6rem 0 7rem;
  border-top: 1px solid var(--line);
}
.advantages__head {
  max-width: var(--container);
  margin: 0 auto 4.5rem;
  padding: 0 var(--gutter);
  text-align: center;
}
.advantages__eyebrow {
  font-family: var(--font-en-serif);
  font-size: 1rem;
  color: var(--c-rust);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  letter-spacing: 0;
}
.advantages__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-rust);
}
.advantages__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 auto;
}
.advantages__title em { font-style: italic; }
.advantages__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.15;
}

.advantages__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.advantage {
  padding: 3.5rem 2.5rem;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 2rem;
  align-items: start;
  position: relative;
}
/* 5 items: three on top (each spans 2 of 6), two on the bottom (each spans 3) */
.advantage:nth-child(-n+3) { grid-column: span 2; }
.advantage:nth-child(n+4)  { grid-column: span 3; }
/* vertical dividers — not after the last cell of each row */
.advantage:nth-child(1),
.advantage:nth-child(2),
.advantage:nth-child(4) { border-right: 1px solid var(--line); }
/* bottom row — no border below */
.advantage:nth-child(4),
.advantage:nth-child(5) { border-bottom: none; }

.advantage__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.advantage__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Dual-shape "overlap" icon style: solid base + translucent overlay */
.advantage__icon .icon-shape--base    { fill: var(--c-blue); }     /* dusty blue */
.advantage__icon .icon-shape--overlay { fill: var(--c-green); opacity: 0.55; mix-blend-mode: multiply; }
.advantage__icon .icon-shape--accent  { fill: var(--c-cream); }    /* small contrast accent */

.advantage__num {
  position: absolute;
  top: 3.5rem;
  left: 2.5rem;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--c-rust);
  letter-spacing: 0.05em;
  /* Sit alongside the icon area; we'll re-position via grid */
  position: static;
}

.advantage__body { }
.advantage__num-inline {
  display: block;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--c-rust);
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.advantage__name {
  font-family: var(--font-en-serif);
  font-size: clamp(1.375rem, 1.4vw + 0.4rem, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.advantage__name em { font-style: italic; }
.advantage__name-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.25rem, 1.2vw + 0.35rem, 1.75rem);
  line-height: 1.15;
}
.advantage__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
  font-weight: 300;
  max-width: 38ch;
}

/* =====================================================================
   SERVICES — Listings with Roman numerals
   ===================================================================== */
.services {
  background: var(--c-cream);
  padding: 8rem 0 10rem;
  border-top: 1px solid var(--line);
}
.services__head {
  max-width: var(--container-wide);
  margin: 0 auto 5rem;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: end;
}
.services__head-left { }
.services__head-right {
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.services__head-right .services__lead {
  margin-left: auto;
  max-width: 32ch;
}
.services__eyebrow {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.services__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--c-rust);
}
.services__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}
.services__title-line {
  display: inline-block;
  white-space: nowrap;
}
.services__title em { font-style: italic; }
.services__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.1;
}
.services__lead {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.125rem, 0.8vw + 0.6rem, 1.5rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 38ch;
  margin: 0;
}
.services__lead-th {
  font-family: var(--font-th-serif);
  font-style: normal;
  font-size: clamp(1rem, 0.7vw + 0.65rem, 1.25rem);
  line-height: 1.7;
}

/* View Our Services CTA button */
.services__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-rust);
  text-decoration: none;
  padding: 1.1rem 2.25rem;
  border: 1px solid var(--c-rust);
  background: transparent;
  transition: all var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.services__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-rust);
  transform: translateX(-101%);
  transition: transform var(--t-base) var(--ease);
  z-index: -1;
}
.services__cta:hover { color: var(--c-cream); border-color: var(--c-rust); }
.services__cta:hover::before { transform: translateX(0); }
.services__cta-arrow {
  font-size: 1em;
  letter-spacing: 0;
  transition: transform var(--t-base) var(--ease);
  display: inline-block;
}
.services__cta:hover .services__cta-arrow { transform: translateX(4px); }

/* Grid of overlapping cards */
.services__grid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.services__track {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: var(--gutter);
  padding: 0 0 2.5rem;  /* room for nav arrows below */
  margin: 0 auto;
  max-width: var(--container-wide);
  cursor: grab;
  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* avoid jank from overflow content */
  -webkit-overflow-scrolling: touch;
}
.services__track:active { cursor: grabbing; }
.services__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.services__track.is-dragging .service-card { pointer-events: none; }
.services__track::-webkit-scrollbar { display: none; }
.services__track > .service-card {
  flex: 0 0 calc((100% - 2.5rem * 3) / 4);  /* 4 cards visible, 3 gaps of 2.5rem */
  scroll-snap-align: start;
  min-width: 0;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.55s var(--ease-out),
              opacity 0.5s var(--ease-out);
  will-change: transform;
}
/* All cards align to the same baseline (no stagger) */
.services__track > .service-card:nth-child(even) {
  margin-top: 0;
}
.service-card:hover {
  transform: translateY(-14px) scale(1.015);
  z-index: 3;
}
/* Sibling dim: when hovering one service card, others recede */
.services__track:hover .service-card:not(:hover) {
  opacity: 0.5;
  transform: scale(0.97);
}
.services__track > .service-card:nth-child(even):hover {
  transform: translateY(-14px) scale(1.015);
}

/* Navigation arrows */
.services__nav {
  max-width: var(--container-wide);
  margin: -3.5rem auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  position: relative;
  z-index: 5;
}
.services__nav-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--c-cream);
  color: var(--c-black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease);
  font: inherit;
  padding: 0;
}
.services__nav-btn:hover:not(:disabled) {
  background: var(--c-black);
  color: var(--c-cream);
  border-color: var(--c-black);
  transform: translateY(-2px);
}
.services__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.services__nav-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Progress indicator (dots) */
.services__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.services__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.services__dot.is-active {
  background: var(--c-rust);
  transform: scale(1.3);
}

/* Top media panel */
.service-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
  transition: box-shadow 0.55s var(--ease-out);
}
.service-card:hover .service-card__media {
  box-shadow: 0 30px 60px -25px rgba(24,23,21,0.55),
              0 12px 28px -14px rgba(124, 60, 27, 0.35);
}
.service-card__media img,
.service-card__media svg,
.service-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease-out),
              filter 0.6s var(--ease-out);
}
.service-card:hover .service-card__media video,
.service-card:hover .service-card__media img {
  transform: scale(1.04);
  filter: brightness(1.08) saturate(1.1) contrast(1.03);
}
.service-card__video {
  background: var(--c-charcoal);
  /* graceful fallback color while the video downloads */
}
.service-card__media::after {
  /* subtle vignette */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,23,21,0) 55%, rgba(24,23,21,0.25) 100%);
  pointer-events: none;
}

/* The cream info card that overlaps the bottom of the media */
.service-card__body {
  position: relative;
  margin: -5.5rem 1.25rem 0;
  background: var(--c-cream);
  border: 1px solid var(--line);
  padding: 2.25rem 1.85rem 1.85rem;
  box-shadow: 0 16px 40px -18px rgba(24, 23, 21, 0.25);
  transition: box-shadow 0.55s var(--ease-out),
              border-color 0.55s var(--ease-out),
              transform 0.55s var(--ease-out);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card:hover .service-card__body {
  box-shadow: 0 24px 50px -18px rgba(24, 23, 21, 0.4);
  border-color: var(--c-rust);
  transform: translateY(-4px);
}
.service-card__name {
  font-family: var(--font-en-serif);
  font-size: clamp(1.5rem, 1.35vw + 0.4rem, 2.125rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
  line-height: 1.05;
}
.service-card__name em { font-style: italic; }
.service-card__name-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.25rem, 1.2vw + 0.35rem, 1.75rem);
  line-height: 1.15;
}
.service-card__desc {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
  font-weight: 300;
  /* Limit to 2 lines for uniform card height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-card__cta {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--c-rust);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;  /* push CTA to bottom */
  align-self: flex-end;
}
.service-card__cta::after {
  content: '→';
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
}
.service-card:hover .service-card__cta::after { transform: translateX(6px); }

/* Reduce motion: keep hover simple */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card:hover,
  .services__grid:hover .service-card:not(:hover),
  .service-card__media video,
  .service-card:hover .service-card__media video,
  .service-card__body,
  .service-card:hover .service-card__body {
    transform: none;
    opacity: 1;
    filter: none;
  }
}

/* =====================================================================
   STATS
   ===================================================================== */
.stats {
  background: var(--c-blue);
  color: var(--c-cream);
  padding: 6rem 0;
}
.stats__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat__num {
  font-family: var(--font-en-serif);
  font-size: clamp(2rem, 3vw + 0.5rem, 3.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-cream);
}
.stat__num em { font-style: italic; font-size: 0.7em; color: var(--c-rust); }
.stat__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.85;
  font-weight: 500;
  margin-top: 0.5rem;
}
.stat__sub {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--c-cream);
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* =====================================================================
   DESTINATIONS — Editorial gallery
   ===================================================================== */
.destinations {
  background: var(--c-cream);
  padding: 8rem 0;
}
.destinations__head {
  max-width: var(--container-wide);
  margin: 0 auto 4rem;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
}
.destinations__title {
  font-family: var(--font-en-serif);
  font-size: clamp(2.25rem, 4vw + 0.5rem, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 12ch;
}
.destinations__title em { font-style: italic; }
.destinations__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.875rem, 3.5vw + 0.5rem, 4.25rem);
  line-height: 1.1;
  max-width: 14ch;
}
.destinations__intro {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 36ch;
}
.destinations__intro-th {
  font-family: var(--font-th-serif);
  font-style: normal;
  font-size: 1rem;
}

.destinations__grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  align-items: start;
  perspective: 1500px;
}
.dest-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out),
              box-shadow 0.6s var(--ease-out),
              opacity 0.5s var(--ease-out);
  will-change: transform;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
}

/* Dim siblings when grid is being hovered */
.destinations__grid:hover .dest-card:not(:hover) {
  opacity: 0.55;
  transform: scale(0.97);
}

/* Hovered card: lift + 3D tilt driven by JS-set CSS vars */
.dest-card:hover {
  transform: translateY(var(--lift, -8px))
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             scale(1.02);
  box-shadow: 0 30px 60px -25px rgba(24,23,21,0.55),
              0 12px 24px -12px rgba(24,23,21,0.25);
  z-index: 3;
}
.dest-card--lg  { grid-column: span 6; aspect-ratio: 5/6; }
.dest-card--md  { grid-column: span 6; aspect-ratio: 4/5; margin-top: 3rem; }
.dest-card--sm  { grid-column: span 4; aspect-ratio: 4/5; }
.dest-card--wide{ grid-column: span 8; aspect-ratio: 16/9; margin-top: -2rem; }
.dest-card--tall{ grid-column: span 5; aspect-ratio: 4/5; }
.dest-card--reg { grid-column: span 7; aspect-ratio: 16/10; margin-top: 2.5rem; }

.dest-card__media {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--c-cream);
}
.dest-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out),
              filter 0.7s var(--ease-out);
}
.dest-card:hover .dest-card__media img {
  transform: scale(1.12);
  filter: brightness(1.08) saturate(1.12) contrast(1.03);
}
.dest-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,23,21,0) 40%, rgba(24,23,21,0.85) 100%);
  pointer-events: none;
  transition: background 0.6s var(--ease-out);
}
.dest-card:hover .dest-card__media::after {
  background: linear-gradient(180deg,
              rgba(24,23,21,0) 30%,
              rgba(124,60,27,0.15) 55%,
              rgba(24,23,21,0.7) 100%);
}

/* Accent rust line under title — hidden by default, animates in on hover */
.dest-card__media::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  bottom: calc(1.25rem + 2.6em); /* sits just above the title */
  width: 0;
  height: 1px;
  background: var(--c-rust);
  z-index: 3;
  transition: width 0.6s var(--ease-out);
}
.dest-card:hover .dest-card__media::before { width: 36px; }

.dest-card__caption {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  color: var(--c-cream);
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  transition: transform 0.55s var(--ease-out);
}
.dest-card:hover .dest-card__caption {
  transform: translateY(-8px);
}
.dest-card__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.25rem, 1.5vw + 0.4rem, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 0.25rem;
  transition: letter-spacing 0.55s var(--ease-out);
}
.dest-card:hover .dest-card__title { letter-spacing: 0; }
.dest-card__title em { font-style: italic; }
.dest-card__country {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.875rem;
  opacity: 0.85;
  transition: opacity 0.5s var(--ease-out);
}
.dest-card:hover .dest-card__country { opacity: 1; }
.dest-card__meta {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  text-align: right;
  line-height: 1.6;
  font-weight: 400;
  transition: opacity 0.5s var(--ease-out);
}
.dest-card:hover .dest-card__meta { opacity: 1; }

/* Reduce motion: disable tilt + sibling dim, keep simple lift */
@media (prefers-reduced-motion: reduce) {
  .dest-card,
  .dest-card:hover,
  .destinations__grid:hover .dest-card:not(:hover),
  .gcard,
  .gcard:hover,
  .gallery__rail:hover .gcard:not(:hover) {
    transform: none;
    opacity: 1;
  }
  .dest-card__media img,
  .gcard__media img { transition: none; }
  .dest-card:hover .dest-card__media img,
  .gcard:hover .gcard__media img { transform: none; }
}

/* =====================================================================
   JOURNAL — Articles section
   ===================================================================== */
.journal {
  background: var(--c-cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.journal__head {
  max-width: var(--container-wide);
  margin: 0 auto 2rem;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
}
.journal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
  text-transform: none;
  letter-spacing: 0;
}
.journal__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-rust);
}
.journal__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.journal__title em { font-style: italic; }
.journal__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.1;
}
.journal__title-th em { font-family: var(--font-en-serif); font-style: italic; }

/* View-all CTA — matches services/gallery cta pattern */
.journal__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.875rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--c-rust);
  color: var(--c-rust);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  align-self: end;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color var(--t-base) var(--ease);
}
.journal__view-all::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-rust);
  transform: translateX(-101%);
  transition: transform var(--t-base) var(--ease);
  z-index: -1;
}
.journal__view-all::after {
  content: "→";
  transition: transform var(--t-base) var(--ease);
}
.journal__view-all:hover { color: var(--c-cream); }
.journal__view-all:hover::before { transform: translateX(0); }
.journal__view-all:hover::after { transform: translateX(4px); }

/* Filter tabs */
.journal__filters {
  max-width: var(--container-wide);
  margin: 0 auto 3rem;
  padding: 0 var(--gutter);
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.journal__filters::-webkit-scrollbar { display: none; }
/* มือถือ: เลื่อนแท็บแนวนอนได้ — fade ขอบขวาบอกใบ้ว่ายังเลื่อนต่อได้ */
@media (max-width: 760px) {
  .journal__filters {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 6rem), transparent);
  }
}
.journal__filter {
  flex-shrink: 0;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
  background: none;
  border-radius: 0;
}
.journal__filter:hover,.journal__filter:focus { color: var(--c-black); background: none!important; box-shadow:none!important;}
.journal__filter.is-active {
  color: var(--c-black);
  border-bottom-color: var(--c-rust);
}

/* Card grid */
.journal__grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.article {
  display: block;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.article a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.article[data-continent].is-hidden {
  display: none;
}
.article__media {
  aspect-ratio: 3/2;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--c-black);
}
.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.article:hover .article__media img { transform: scale(1.04); }
.article__title {
  font-family: var(--font-en-serif);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: 1rem;
  color: var(--c-black);
}
.article__title em { font-style: italic; }
.article__title-th { font-family: var(--font-th-serif); line-height: 1.25; }
.article__excerpt {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
}
.article__excerpt-th { font-family: var(--font-th-serif); line-height: 1.85; }

/* No results state */
.journal__empty {
  display: none;
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 0;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .journal__grid { grid-template-columns: repeat(2, 1fr); }
  .journal__head { grid-template-columns: 1fr; gap: 2rem; }
  .journal__view-all { align-self: start; }
}
@media (max-width: 560px) {
  .journal__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact {
  background: var(--c-cream);
  padding: 8rem 0;
  position: relative;
}
.contact__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact__intro { padding-top: 1rem; }
.contact__eyebrow {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--c-rust);
}
.contact__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}
.contact__title em { font-style: italic; }
.contact__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.1;
}
.contact__text {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink-muted);
  margin-bottom: 2.5rem;
  font-weight: 300;
  max-width: 38ch;
}

form.wpcf7-form.init {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
}

.contact__form { display: grid; gap: 1.5rem; }
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.field__input,
.field__select,
.field__textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.75rem 0!important;
  font-family: var(--font-en-serif);
  font-size: 1.125rem;
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-base) var(--ease);
  appearance: none;
  border-radius: 0;
  width: 100%;
}
.field__textarea { resize: vertical; min-height: 100px; font-family: var(--font-sans); font-weight: 300; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-bottom-color: var(--c-rust); }
.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.btn-submit {
  background: var(--c-rust)!important;
  color: var(--c-cream)!important;
  border: none!important;
  padding: 1.25rem 2rem!important;
  font-family: var(--font-sans)!important;
  font-size: 0.875rem!important;
  letter-spacing: 0.28em!important;
  text-transform: uppercase!important;
  cursor: pointer!important;
  margin-top: 1rem!important;
  transition: background var(--t-base) var(--ease)!important;
  font-weight: 500!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  gap: 1rem!important;
  width: 100%!important;
  border-radius: 0!important;
}
.btn-submit:hover { background: var(--c-black)!important; }
.btn-submit__arrow { transition: transform var(--t-base) var(--ease)!important; }
.btn-submit:hover .btn-submit__arrow { transform: translateX(4px)!important; }

/* =====================================================================
   FOOTER — HiGRO-inspired connect band + 3-col bottom
   ===================================================================== */
.footer {
  background: var(--c-black, #181715);  /* ทึบตลอด ไม่มีกระจกฝ้า */
  color: #FFFFFF;
  padding: 0;
  position: relative;
  z-index: 1;
}
.footer,
.footer a,
.footer h3,
.footer p,
.footer span,
.footer em,
.footer .footer__connect-eyebrow,
.footer .footer__tagline,
.footer .footer__address,
.footer .footer__col a,
.footer .footer__bottom,
.footer .footer__newsletter-btn,
.footer .footer__newsletter-input,
.footer .footer__social a { color: #FFFFFF; }
.footer .footer__newsletter-input::placeholder { color: rgba(255,255,255,0.6); }
.footer .footer__connect-eyebrow,
.footer .footer__tagline,
.footer .footer__address,
.footer .footer__col a,
.footer .footer__bottom,
.footer .footer__social a { opacity: 1; }

/* Top "Connect with us" hero band */
.footer__connect {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 3rem;
  border-bottom: 1px solid var(--line-inverse);
}
.footer__connect-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(238,238,229,0.7);
  margin-bottom: 1rem;
}
.footer__connect-link {
  display: inline-flex;
  align-items: baseline;
  gap: 1.25rem;
  text-decoration: none;
  color: var(--c-cream);
  font-family: var(--font-en-serif);
  font-size: clamp(2.5rem, 4.5vw + 0.5rem, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: opacity var(--t-base) var(--ease);
}
.footer__connect-link:hover { opacity: 0.85; }
.footer__connect-link em { font-style: italic; }
.footer__connect-link-th {
  font-family: var(--font-th-serif);
  font-size: clamp(2rem, 3.6vw + 0.5rem, 4.25rem);
  line-height: 1.05;
}
.footer__connect-arrow {
  display: inline-block;
  font-size: 0.75em;
  transition: transform var(--t-base) var(--ease);
}
.footer__connect-link:hover .footer__connect-arrow {
  transform: translate(8px, -8px);
}

/* Bottom 3-column area */
.footer__top {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 3rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
}
.footer__brand { }
.footer__logo {
  display: block;
  width: 130px;
  max-width: 100%;
  margin: 0 0 1.5rem;
}
.footer__logo img {
  width: 100%;
  height: auto;
  display: block;
}
.footer__tagline {
  font-family: var(--font-en-serif);
 
  font-size:  0.875rem;
 
  max-width: 32ch;
  line-height: 1.5;
  margin: 0;
}
.footer__address {
  margin: 1.5rem 0 0;
  font-family: "Anuphan" !important;
  font-size: 0.875rem !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  display: inline-block !important;
}
.footer__col {
  display: flex;
  flex-direction: column;
}
.footer__col h3 {
  font-family: var(--font-en-serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  opacity: 0.95;
}
.footer__col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer__col li {
  border-bottom: 1px solid var(--line-inverse);
}
.footer__col a {
  color: var(--c-cream);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.7rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: opacity var(--t-fast);
  opacity: 0.85;
  font-weight: 500;
}
.footer__col a:hover { opacity: 1; }
.footer__col a::after {
  content: '→';
  display: inline-block;
  font-family: var(--font-en-serif);
  font-size: 1.125rem;
  opacity: 0.7;
  transition: transform var(--t-base) var(--ease);
}
.footer__col a:hover::after { transform: translateX(4px); opacity: 1; }

/* Social icons row */
.footer__social {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 0;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line-inverse);
  border-radius: 50%;
  color: var(--c-cream);
  opacity: 0.85;
  transition: opacity var(--t-fast), background-color var(--t-fast), transform var(--t-base) var(--ease);
}
.footer__social a:hover {
  opacity: 1;
  background-color: rgba(238,238,229,0.08);
  transform: translateY(-2px);
}
.footer__social a::after { content: none; }
.footer__social svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Newsletter / stay in touch column */
.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer__newsletter-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-inverse);
  padding: 0.85rem 0;
  gap: 1rem;
}
.footer__newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--c-cream);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  padding: 0.25rem 0;
  outline: none;
}
.footer__newsletter-input::placeholder {
  color: rgba(238,238,229,0.55);
}
.footer__newsletter-input:focus { color: var(--c-cream); }
.footer__newsletter-btn {
  background: transparent;
  border: none;
  color: var(--c-cream);
  cursor: pointer;
  font-family: var(--font-en-serif);
  font-size: 1.25rem;
  padding: 0.25rem 0.5rem;
  opacity: 0.7;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
}
.footer__newsletter-btn:hover {
  opacity: 1;
  transform: translateX(4px);
}

/* Bottom strip */
.footer__bottom {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line-inverse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238,238,229,0.6);
  flex-wrap: wrap;
}

/* =====================================================================
   TESTIMONIALS — Editorial spread carousel
   ===================================================================== */
.testimonials {
  background: var(--c-cream);
  padding: clamp(2.5rem, 4vh, 3.5rem) 0 clamp(2.5rem, 4vh, 3.5rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.testimonials__head {
  max-width: var(--container-wide);
  margin: 0 auto clamp(1.25rem, 2.5vh, 2rem);
  padding: 0 var(--gutter);
}
.testimonials__eyebrow {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-transform: none;
  letter-spacing: 0;
}
.testimonials__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-rust);
}
.testimonials__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
  color: var(--c-black);
}
.testimonials__title em { font-style: italic; }
.testimonials__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  font-weight: 400;
  line-height: 1.15;
}

.testimonials__stage {
  position: relative;
  width: 100%;
  /* Fit within a 900px viewport: 900 − ~3.5rem padding − ~2rem head − title 100px ≈ 660px */
  height: clamp(480px, calc(100vh - 170px), 820px);
  background: var(--c-black);
  overflow: hidden;
}

.spread {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s var(--ease-out),
              visibility 0s linear 0.8s;
}
.spread.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out),
              visibility 0s linear 0s;
}

.spread__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.spread__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 9s var(--ease-out);
}
.spread.is-active .spread__media img {
  transform: scale(1);
}

/* Gradient overlay — darkens the bottom-left where quote lives */
.spread__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(24,23,21,0.72) 0%,
      rgba(24,23,21,0.5) 35%,
      rgba(24,23,21,0.2) 65%,
      rgba(24,23,21,0.05) 100%),
    linear-gradient(to top,
      rgba(24,23,21,0.55) 0%,
      rgba(24,23,21,0.15) 45%,
      rgba(24,23,21,0) 70%);
  pointer-events: none;
}

.spread__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 5vw, 6rem);
  color: var(--c-cream);
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.spread__place {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.spread__quote {
  font-family: var(--font-en-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.1vw + 0.6rem, 1.9rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-cream);
}
.spread__quote em {
  font-style: italic;
  font-family: var(--font-en-serif);
}
.spread__quote-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.125rem, 1.2vw + 0.55rem, 1.75rem);
  line-height: 1.4;
}
.spread__quote-th em {
  font-family: var(--font-th-serif);
  font-style: normal;
  color: var(--c-cream);
  background: linear-gradient(transparent 65%, rgba(201, 149, 106, 0.4) 65%);
  padding: 0 0.1em;
}

.spread__body {
  font-family: var(--font-en-serif);
  font-size: clamp(0.95rem, 0.35vw + 0.82rem, 1.0625rem);
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
  max-width: 54ch;
  font-weight: 300;
}
.show-th.spread__body {
  font-family: var(--font-th-serif);
  font-size: clamp(1rem, 0.35vw + 0.85rem, 1.125rem);
  line-height: 1.75;
}

.spread__attribution {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.spread__rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--c-cream);
  opacity: 0.5;
  flex-shrink: 0;
}
.spread__attr-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.spread__name {
  font-family: var(--font-en-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.show-th.spread__name {
  font-family: var(--font-th-serif);
}
.spread__role {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Top-right floating controls */
.spread__controls {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  z-index: 4;
  color: var(--c-cream);
}
.spread__counter {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.spread__counter-sep { opacity: 0.5; }
.spread__nav-group {
  display: flex;
  gap: 0.5rem;
}
.spread__nav {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(238,238,229,0.55);
  background: transparent;
  color: var(--c-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  outline-offset: 3px;
}
.spread__nav:hover {
  background: var(--c-cream);
  color: var(--c-black);
  border-color: var(--c-cream);
}
.spread__nav:focus-visible {
  outline: 2px solid var(--c-cream);
}
.spread__nav svg {
  width: 18px;
  height: 18px;
}

/* Bottom progress bars */
.spread__progress {
  position: absolute;
  left: clamp(1.5rem, 5vw, 6rem);
  right: clamp(1.5rem, 5vw, 6rem);
  bottom: 1.25rem;
  display: flex;
  gap: 0.5rem;
  z-index: 4;
  pointer-events: none;
}
.spread__progress-bar {
  flex: 1;
  height: 1px;
  background: rgba(238,238,229,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  pointer-events: auto;
  transition: background var(--t-base) var(--ease);
}
.spread__progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-cream);
  transition: width 0.4s var(--ease-out);
}
.spread__progress-bar.is-active span {
  width: 100%;
  transition: width 8s linear;
}
.spread__progress-bar.is-active.is-paused span {
  transition: none;
}
.spread__progress-bar:hover { background: rgba(238,238,229,0.4); }

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
  .testimonials__stage { height: clamp(440px, calc(100vh - 200px), 640px); }
  .spread__content { gap: 1rem; padding: 2rem 2rem 3rem; }
}

/* Mobile ≤ 720px */
@media (max-width: 720px) {
  .testimonials { padding: 5rem 0 4rem; }
  .testimonials__head { margin-bottom: 2rem; }
  .testimonials__stage {
    height: auto;
    min-height: 0;
    background: transparent;
  }
  .spread {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .spread.is-active { display: block; }
  .spread__media {
    position: relative;
    inset: auto;
    aspect-ratio: 4/5;
    height: auto;
  }
  .spread__overlay {
    background: linear-gradient(to top,
      rgba(24,23,21,0.55) 0%,
      rgba(24,23,21,0.1) 45%,
      rgba(24,23,21,0) 80%);
  }
  .spread__content {
    position: relative;
    inset: auto;
    padding: 1.75rem var(--gutter) 2rem;
    background: var(--c-charcoal);
    color: var(--c-cream);
    max-width: none;
    gap: 1rem;
  }
  .spread__quote { font-size: 1.25rem; line-height: 1.3; }
  .spread__quote-th { font-size: 1.125rem; line-height: 1.45; }
  .spread__body { font-size: 1rem; line-height: 1.6; }
  .show-th.spread__body { font-size: 1rem; }

  .spread__controls {
    position: relative;
    top: auto;
    right: auto;
    margin: 1.25rem var(--gutter) 0;
    justify-content: space-between;
    color: var(--c-black);
  }
  .spread__nav {
    border-color: var(--c-black);
    color: var(--c-black);
  }
  .spread__nav:hover {
    background: var(--c-black);
    color: var(--c-cream);
  }
  .spread__progress {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 1rem var(--gutter) 0;
  }
  .spread__progress-bar { background: rgba(24,23,21,0.15); }
  .spread__progress-bar span { background: var(--c-rust); }
  .spread__progress-bar:hover { background: rgba(24,23,21,0.3); }
}

/* =====================================================================
   FLOATING ACTION BUTTONS — Social contact (bottom-right)
   ===================================================================== */
.fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 90;
}
.fab__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-blue);
  color: var(--c-cream)!important;
  text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(24, 23, 21, 0.35),
              0 2px 4px rgba(24, 23, 21, 0.15);
  transition: transform var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  outline-offset: 4px;
}
.fab__btn:hover {
  background: var(--c-rust);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(24, 23, 21, 0.4),
              0 3px 6px rgba(24, 23, 21, 0.2);
}
.fab__btn:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 4px;
}
.fab__btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Brand-color variants for social FABs */
.fab__btn--facebook {
  background: #1877F2;
}
.fab__btn--facebook:hover {
  background: #145dbf;
}
.fab__btn--line {
  background: #06C755;
}
.fab__btn--line:hover {
  background: #04a045;
}

/* Scroll-to-top button — hidden by default (while inside hero) */
.fab__btn--top {
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease),
              transform 0.35s var(--ease),
              visibility 0s linear 0.35s,
              background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.fab.is-past-hero .fab__btn--top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.4s var(--ease),
              transform 0.4s var(--ease),
              visibility 0s linear 0s,
              background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.fab__btn--top:hover {
  background: var(--c-rust);
  transform: translateY(-3px);
}

/* =====================================================================
   REVEAL ANIMATIONS
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

/* hero text comes in on load */
.hero .reveal {
  transform: translateY(40px);
  transition-delay: 0.3s;
}
.hero .reveal[data-delay="1"] { transition-delay: 0.4s; }
.hero .reveal[data-delay="2"] { transition-delay: 0.6s; }
.hero .reveal[data-delay="3"] { transition-delay: 0.85s; }
.hero .reveal[data-delay="4"] { transition-delay: 1.1s; }
.hero .reveal[data-delay="5"] { transition-delay: 1.35s; }


/* === responsive === */
/* =====================================================================
   YOUR HOLIDAYS — RESPONSIVE
   ===================================================================== */

/* =====================================================================
   YOUR HOLIDAYS — RESPONSIVE (Pomelo horizontal navbar)
   ===================================================================== */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
  .nav__link { font-size: 0.875rem; letter-spacing: 0.22em; }
  .nav__menu--left, .nav__menu--right { gap: 1.5rem; }
  .nav__logo-img--stacked { width: 72px; }
  .nav.is-scrolled .nav__logo-img--horizontal { width: 180px; }
  .nav__container { gap: 1.5rem; }

  .hero { padding: 5rem var(--gutter) 4rem; }
  .hero__tagline { font-size: 1rem; bottom: 2.5rem; }

  .prologue__grid { grid-template-columns: 1fr; gap: 2rem; }
  .prologue__label { position: static; flex-direction: row; gap: 1.5rem; }

  .advantage { padding: 2.75rem 1.75rem; grid-template-columns: 64px 1fr; gap: 1.5rem; }
  .advantage__icon { width: 56px; height: 56px; }

  .services__head { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .services__track > .service-card {
    flex-basis: calc((100% - 2.5rem) / 2);  /* 2 cards visible */
  }
  .services__track > .service-card:nth-child(n) { margin-top: 0; }

  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }

  .destinations__head { grid-template-columns: 1fr; gap: 1.5rem; }

  .destinations__grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  .dest-card--lg  { grid-column: span 4; }
  .dest-card--md  { grid-column: span 2; margin-top: 0; }
  .dest-card--sm  { grid-column: span 3; }
  .dest-card--wide{ grid-column: span 6; margin-top: 0; }
  .dest-card--tall{ grid-column: span 3; }
  .dest-card--reg { grid-column: span 6; margin-top: 1.5rem; }

  .contact__inner { grid-template-columns: 1fr; gap: 3rem; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__connect { padding: 4.5rem var(--gutter) 3.5rem; }
}

/* Mobile ≤ 720px — collapse nav menus, show burger */
@media (max-width: 720px) {
  .nav { padding: 0.85rem 0;}
  .nav__menu { display: none; }
  .nav__burger { display: block; }
  .nav__container {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
  .nav__logo {
    justify-self: start;
  }
  .nav__logo-img--stacked { width: 46px; }
  .nav.is-scrolled .nav__logo-img--horizontal { width: 130px; }

  .hero {
    padding: 5rem 1.25rem 4rem;
    height: 100vh;
    max-height: 900px;
    min-height: 560px;
  }
  .hero__tagline {
    position: static;
    margin-top: 2rem;
    font-size: 1rem;
    text-align: left;
  }
  .hero__lede { margin-bottom: 1.75rem; }
  .hero__cta { padding: 0.9rem 1.5rem; font-size: 0.875rem; letter-spacing: 0.24em; }

  .prologue { padding: 5rem 0 4rem; }

  .advantages { padding: 4rem 0 5rem; }
  .advantages__head { margin-bottom: 3rem; }
  .advantages__grid { grid-template-columns: 1fr; }
  .advantage {
    padding: 2.5rem 1.25rem;
    grid-template-columns: 52px 1fr;
    gap: 1.25rem;
  }
  .advantage__icon { width: 48px; height: 48px; }
  /* single column: reset the desktop 3+2 spans and vertical dividers */
  .advantage:nth-child(-n+3),
  .advantage:nth-child(n+4) { grid-column: auto; }
  .advantage:nth-child(1),
  .advantage:nth-child(2),
  .advantage:nth-child(4) { border-right: none; }
  .advantage:not(:last-child) { border-bottom: 1px solid var(--line); }
  .advantage:last-child { border-bottom: none; }

  .services { padding: 5rem 0 6rem; }
  .services__head { margin-bottom: 3rem; }
  .services__track {
    gap: 1.5rem;
    padding-bottom: 3rem;
  }
  .services__track > .service-card {
    flex-basis: 85%;  /* 1 card visible, peek of next */
  }
  .services__track > .service-card:nth-child(n) { margin-top: 0; }
  .service-card__body { margin: -3.5rem 0.75rem 0; padding: 1.5rem 1.25rem 1.25rem; }
  .services__nav { margin-top: -2rem; }
  .services__nav-btn { width: 44px; height: 44px; }

  .stats { padding: 4rem 0; }
  .stats__inner { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .stat__num { font-size: 2rem; }

  .destinations { padding: 5rem 0; }
  .destinations__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .dest-card--lg, .dest-card--md, .dest-card--sm,
  .dest-card--wide, .dest-card--tall, .dest-card--reg {
    grid-column: 1 / -1;
    margin-top: 0;
    aspect-ratio: 4/5;
  }

  .journal { padding: 5rem 0; }

  .contact { padding: 5rem 0; }
  .field__row { grid-template-columns: 1fr; gap: 1.5rem; }

  .footer { padding: 4rem 0 2rem; }
  .footer__connect { padding: 3.5rem var(--gutter) 3rem; }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3.5rem var(--gutter) 3rem;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    font-size: 0.875rem;
  }
  .footer__lang { margin-left: 0; }

  /* compact FAB so it hugs the corner and covers less body text on mobile */
  .fab { right: 0.85rem; bottom: 0.85rem; gap: 0.5rem; }
  .fab__btn { width: 42px; height: 42px; }
  .fab__btn svg { width: 18px; height: 18px; }
}

/* Small mobile ≤ 420px */
@media (max-width: 420px) {
  :root { --gutter: 1.25rem; }
  .stats__inner { grid-template-columns: 1fr; gap: 2rem; }
  /* even tighter FAB on small phones */
  .fab { right: 0.6rem; bottom: 0.6rem; gap: 0.45rem; }
  .fab__btn { width: 38px; height: 38px; }
  .fab__btn svg { width: 16px; height: 16px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   GALLERY SHOWCASE — sticky title left + horizontal scroll right
   (imported from your-holidays02 layout)
   ===================================================================== */
.gallery {
  background: var(--c-cream);
  padding: clamp(5rem, 10vw, 9rem) 0;
  overflow: hidden;
}
.gallery__shell {
  display: grid;
  /* Sticky intro left + horizontal scroll right.
     Intro starts at the same x-position as other sections, but the rail
     bleeds all the way to the right viewport edge (no max-width container). */
  grid-template-columns: minmax(340px, 460px) 1fr;
  align-items: start;
  padding-left: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
}
.gallery__intro {
  top: calc(var(--nav-h) + 2rem);
  padding-right: 2.5rem;
  padding-top: 0;
  align-self: start;
}
.gallery__intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
  text-transform: none;
  letter-spacing: 0;
}
.gallery__intro .eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-rust);
}
.gallery__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-black);
  margin: 0 0 1.25rem;
}
.gallery__title em { font-style: italic; }
.gallery__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.1;
}
.gallery__title-th em { font-family: var(--font-en-serif); font-style: italic; }
.gallery__lede {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 22em;
}
.gallery__lede-th { font-family: var(--font-th-serif); line-height: 1.85; }

/* Horizontal scroll rail */
.gallery__rail-wrap { overflow: hidden; position: relative; }
.gallery__rail {
  display: flex;
  gap: clamp(0.75rem, 1.25vw, 1.25rem);
  overflow-x: auto;
  padding: 0 var(--gutter) 2.5rem 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.gallery__rail:active { cursor: grabbing; }
.gallery__rail::-webkit-scrollbar { display: none; }

/* Nav arrows in intro */
.gallery__nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.gallery__nav-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--c-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gallery__nav-btn svg { width: 14px; height: 14px; }
.gallery__nav-btn:hover {
  background: var(--c-black);
  color: var(--c-cream);
  border-color: var(--c-black);
}

/* Card */
.gcard {
  flex: 0 0 clamp(220px, 20vw, 290px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  color: var(--c-black);
  cursor: pointer;
  position: relative;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out),
              box-shadow 0.6s var(--ease-out),
              opacity 0.5s var(--ease-out);
  will-change: transform;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
}
/* Dim siblings when rail is being hovered */
.gallery__rail:hover .gcard:not(:hover) {
  opacity: 0.55;
  transform: scale(0.97);
}
/* Hovered card: lift + 3D tilt driven by JS-set CSS vars */
.gcard:hover {
  transform: translateY(var(--lift, -8px))
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             scale(1.02);
  box-shadow: 0 30px 60px -25px rgba(24,23,21,0.55),
              0 12px 24px -12px rgba(24,23,21,0.25);
  z-index: 3;
}
.gcard__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-black);  /* fallback while image loads or if missing */
  margin-bottom: 0;
  position: relative;
}
.gcard__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--c-black);  /* prevent white flash on broken images */
  transition: transform 1.6s var(--ease-out),
              filter 0.7s var(--ease-out);
}
.gcard:hover .gcard__media img {
  transform: scale(1.12);
  filter: brightness(1.08) saturate(1.12) contrast(1.03);
}

/* Accent rust line — animates in on hover (same as dest-card) */
.gcard__media::before {
  content: '';
  position: absolute;
  left: 1.25rem;
  bottom: calc(1.25rem + 2.6em);
  width: 0;
  height: 1px;
  background: var(--c-rust);
  z-index: 3;
  transition: width 0.6s var(--ease-out);
}
.gcard:hover .gcard__media::before { width: 36px; }
.gcard__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 1;
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}
/* Subtle gradient behind overlay so text stays legible without hover */
.gcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,23,21,0) 50%, rgba(24,23,21,0.7) 100%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out), background 0.6s var(--ease-out);
}
.gcard:hover .gcard__media::after {
  background: linear-gradient(180deg,
              rgba(24,23,21,0) 30%,
              rgba(124,60,27,0.15) 55%,
              rgba(24,23,21,0.8) 100%);
}
.gcard__overlay-name {
  font-family: var(--font-en-serif);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--c-cream);
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: letter-spacing 0.55s var(--ease-out);
}
.gcard__overlay-loc {
  font-size: 0.8125rem;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(238,238,229,0.85);
  transition: opacity 0.5s var(--ease-out);
}
.gcard:hover .gcard__overlay {
  transform: translateY(-8px);
}
.gcard:hover .gcard__overlay-name { letter-spacing: 0; }
.gcard:hover .gcard__overlay-loc { opacity: 1; }

/* Hide caption beneath image — accessible to screen readers only.
   Visible label lives in .gcard__overlay (shown on hover). */
.gcard__name,
.gcard__location {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gcard__name-th { font-family: var(--font-th-serif); }
.gcard__location-th { font-family: var(--font-th-serif); }

/* Gallery primary CTA — matches services__cta */
.gallery__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-rust);
  text-decoration: none;
  padding: 1.1rem 2.25rem;
  border: 1px solid var(--c-rust);
  background: transparent;
  transition: all var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
  z-index: 1;
  align-self: flex-start;
}
.gallery__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-rust);
  transform: translateX(-101%);
  transition: transform var(--t-base) var(--ease);
  z-index: -1;
}
.gallery__cta:hover { color: var(--c-cream); border-color: var(--c-rust); }
.gallery__cta:hover::before { transform: translateX(0); }
.gallery__cta-th { font-family: var(--font-th-serif); letter-spacing: 0.15em; }
.gallery__cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--t-base) var(--ease);
}
.gallery__cta:hover .gallery__cta-arrow { transform: translateX(4px); }
.gallery__cta:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .gallery__shell { grid-template-columns: 1fr; padding-right: var(--gutter); gap: 2.5rem; }
  .gallery__intro { position: static; padding-right: 0; }
}

/* =====================================================================
   OUR TEAM — Horizontal slider of team members
   ===================================================================== */
.team {
  background: var(--c-cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.team__head {
  max-width: var(--container-wide);
  margin: 0 auto 3rem;
  padding: 0 var(--gutter);
}
.team__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
}
.team__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--c-rust);
}
.team__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.team__title em { font-style: italic; }
.team__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.15;
}
.team__title-th em { font-family: var(--font-en-serif); font-style: italic; }

/* Horizontal scroll rail */
.team__rail-wrap {
  /* No left padding here — moved into the scroll container so the first
     card aligns to the page container when snapped to the start. */
}
.team__rail {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 0 var(--gutter) 1.5rem max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter)));
}
.team__rail:active { cursor: grabbing; }
.team__rail::-webkit-scrollbar { display: none; }
.team__rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.team__rail.is-dragging .team-card { pointer-events: none; }

/* Card */
.team-card {
  flex: 0 0 clamp(190px, 16vw, 250px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  color: var(--c-black);
  text-decoration: none;
  position: relative;
  transition: transform 0.55s var(--ease-out);
}
.team-card:hover { transform: translateY(-6px); }

.team-card__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--c-black);
  position: relative;
}
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
  background: var(--c-black);
  transition: transform 1.2s var(--ease-out),
              filter 0.6s var(--ease-out);
}
.team-card:hover .team-card__media img {
  transform: scale(1.06);
  filter: brightness(1.05) saturate(1.08);
}
.team-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,23,21,0) 60%, rgba(24,23,21,0.35) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out);
}
.team-card:hover .team-card__media::after { opacity: 1; }

.team-card__name {
  font-family: var(--font-en-serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 0.3rem;
  color: var(--c-black);
}
.team-card__name em { font-style: italic; }
.team-card__name-th { font-family: var(--font-th-serif); line-height: 1.3; }
.team-card__role {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--c-rust);
  line-height: 1.4;
  margin: 0;
}
.team-card__role-th { font-family: var(--font-th-serif); font-style: normal; }

@media (max-width: 720px) {
  .team__head { margin-bottom: 2rem; }
  .team-card { flex-basis: 78%; }
}

/* Team pagination dots */
.team__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2rem;
  padding: 0 var(--gutter);
}
.team__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(24, 23, 21, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.35s var(--ease-out),
              transform 0.35s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.team__dot:hover {
  background: rgba(124, 60, 27, 0.5);
}
.team__dot.is-active {
  background: var(--c-rust);
  transform: scale(1.15);
}
.team__dot:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 3px;
}

/* === ADVANTAGE ICONS (Pinterest-style duotone, animated) === */
.advantage__icon.adv-icon { width: 72px; height: 72px; display: inline-block; }
.adv-svg {
  width: 100%; height: 100%; overflow: visible;
}
/* Duotone palette: only 2 colors — rust + dusty blue */
.adv-body, .adv-foot { fill: var(--c-rust); }
.adv-face { fill: var(--c-cream); }
.adv-dot  { fill: var(--c-cream); }
.adv-handle, .adv-loop { stroke: var(--c-rust); fill: none; }
.adv-needle-top { fill: var(--c-rust); }

/* All accent layers use dusty blue */
.adv-svg--suitcase  .adv-accent { fill: var(--c-blue); }
.adv-svg--compass   .adv-accent { fill: var(--c-blue); }
.adv-svg--medal     .adv-accent { fill: var(--c-blue); }
.adv-svg--hourglass .adv-accent { fill: var(--c-blue); }
.adv-svg--heart     .adv-accent { fill: var(--c-blue); }
.adv-svg--agent     .adv-accent { fill: var(--c-blue); }
.adv-svg--clock     .adv-accent { fill: var(--c-blue); }
.adv-svg--plane     .adv-accent { fill: var(--c-blue); }
.adv-svg--route     .adv-accent { fill: var(--c-blue); }
.adv-svg--scale     .adv-accent { fill: var(--c-blue); }
.adv-svg--star      .adv-accent { fill: var(--c-blue); }
.adv-svg--alert     .adv-accent { fill: var(--c-blue); }
.adv-svg--agent  .adv-check  { stroke: var(--c-cream); }
.adv-svg--shield .adv-check  { stroke: var(--c-blue); }

/* --- Reveal on scroll: scale + fade for the whole SVG --- */
.adv-svg {
  opacity: 0;
  transform: scale(0.7) translateY(8px);
  transform-origin: center;
  transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
}
.advantage.is-in .adv-svg,
.reveal.is-in .adv-svg {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* --- Always-on idle animations (no hover required) --- */

/* Suitcase: gentle bobbing + handle pulse */
.adv-svg--suitcase {
  animation: adv-bob 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}
.adv-svg--suitcase .adv-handle {
  animation: adv-handle-pulse 3.2s ease-in-out infinite;
  transform-origin: 32px 14px;
  transform-box: fill-box;
}
@keyframes adv-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-1.5deg); }
}
@keyframes adv-handle-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* Compass: needle spins continuously, slow + steady */
.adv-svg--compass .adv-needle {
  transform-origin: 32px 32px;
  transform-box: view-box;
  animation: adv-spin 6s linear infinite;
}
@keyframes adv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Medal: gentle swing from the top loop */
.adv-svg--medal {
  transform-origin: 32px 8px;
  animation: adv-swing 3.6s ease-in-out infinite;
}
@keyframes adv-swing {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* Hourglass: sand grain falls + subtle tilt */
.adv-svg--hourglass {
  transform-origin: 32px 32px;
  animation: adv-tilt 5s ease-in-out infinite;
}
@keyframes adv-tilt {
  0%, 100% { transform: rotate(0deg); }
  48%, 52% { transform: rotate(0deg); }
  50%      { transform: rotate(180deg); }
}
.adv-sand-stream {
  transform-origin: 32px 33px;
  animation: adv-grain 1.2s ease-in-out infinite;
}
@keyframes adv-grain {
  0%, 100% { opacity: 0.35; transform: scaleY(0.5); }
  50%      { opacity: 1;    transform: scaleY(1.2); }
}
.adv-sand-top, .adv-sand-bottom {
  animation: adv-sand-cycle 5s ease-in-out infinite;
}
@keyframes adv-sand-cycle {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 1; }
}

/* Heart: a caring double-thump heartbeat (companionship, always looking after you) */
.adv-svg--heart {
  transform-origin: center;
  animation: adv-heartbeat 1.7s ease-in-out infinite;
}
@keyframes adv-heartbeat {
  0%, 100% { transform: scale(1); }
  13%      { transform: scale(1.16); }
  26%      { transform: scale(1.0); }
  39%      { transform: scale(1.1); }
  52%      { transform: scale(1); }
}
/* inner heart pulses a touch behind the outer beat */
.adv-svg--heart .adv-accent {
  transform-origin: center;
  transform-box: fill-box;
  animation: adv-heartbeat-inner 1.7s ease-in-out infinite;
}
@keyframes adv-heartbeat-inner {
  0%, 100% { transform: scale(0.96); }
  20%      { transform: scale(1.14); }
  48%      { transform: scale(0.96); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .adv-svg, .adv-svg *, .adv-needle, .adv-sand-stream {
    animation: none !important;
    transition: none !important;
  }
  .adv-svg { opacity: 1; transform: none; }
}

/* === TYPOGRAPHY OVERRIDES (Headline / Sub-headline / Body) === */
/* Headline  → Old Standard TT / Regular 400 (EN & TH)
   Sub-head  → Anuphan / Medium 500 (EN & TH) — eyebrows, leads, taglines
   Body      → Anuphan / Light 300 (EN & TH)  — paragraphs & card bodies   */

/* --- HEADLINES → split by language --- */
/* EN: Old Standard TT Regular 400 */
.hero__display,
.advantages__title,
.services__title,
.services__title-line,
.journal__title,
.article__title,
.contact__title,
.team__title,
.gallery__title,
.testimonials__title,
.advantage__name,
.gcard__name,
.service-card__name,
.team-card__name,
.spread__name {
  font-family: "Old Standard TT", Georgia, serif !important;
  font-weight: 400 !important;
}


/* TH: JS Pumpuang Regular 400 */
.hero__display-th,
.advantages__title-th,
.services__title-th,
.journal__title-th,
.article__title-th,
.contact__title-th,
.team__title-th,
.gallery__title-th,
.testimonials__title-th,
.advantage__name-th,
.gcard__name-th,
.service-card__name-th,
.team-card__name-th {
  font-family: "JS Pumpuang", "Old Standard TT", serif !important;
  font-weight: 400 !important;
}
/* keep italic emphasis working inside titles */
.hero__display em,
.journal__title em,
.services__title em,
.advantages__title em {
  font-family: "Old Standard TT", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.hero__display-th em,
.journal__title-th em,
.services__title-th em,
.advantages__title-th em {
  font-family: "JS Pumpuang", "Old Standard TT", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* --- SUB-HEADLINES → Anuphan Medium 500 (both EN and TH), upright --- */
.eyebrow,
.advantages__eyebrow,
.services__eyebrow,
.journal__eyebrow,
.contact__eyebrow,
.team__eyebrow,
.testimonials__eyebrow,
.footer__connect-eyebrow,
.prologue__label-text,
.show-th.prologue__label-text,
.hero__tagline,
.services__lead, .services__lead-th,
.footer__tagline {
  font-family: "Anuphan" !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  
}

/* hero__lede uses its own larger size and Anuphan Light */
.hero__lede, .hero__lede-th {
  font-family: "Anuphan"!important;
  font-weight: 300 !important;
  font-style: normal !important;
  opacity: 0.9 !important;
}
.hero__lede {
  font-size: 18px !important;
  line-height: 1.5 !important;
  max-width: 56ch !important;
}
.hero__lede-th {
  font-size: 22px !important;
  line-height: 1.6 !important;
}
/* Top line (italic) — smaller */
.footer__tagline .footer__tagline-top {
  font-family: "Anuphan", system-ui, "Segoe UI", sans-serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  opacity: 0.7 !important;
  display: inline-block !important;
  margin-bottom: 0.35rem !important;
}
/* Body line — 24px */
.footer__tagline .footer__tagline-body {
  font-family: "Anuphan", system-ui, "Segoe UI", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  display: inline-block !important;
}

/* Specific override: team__eyebrow uses weight 400 (Regular) */
.team__eyebrow {
  font-weight: 400 !important;
}

/* --- CONTACT MAP --- */
.contact__map {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(24,23,21,0.12);
  padding-top: 2rem;
}
.contact__map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 2px;
}
@media (max-width: 720px) {
  .contact__map iframe { height: 220px; }
}

/* --- BODY TEXT → Anuphan Light 300 (both EN and TH) --- */
.advantage__body,
.advantage__text,
.prologue__body,
.prologue__text,
.contact__text,
.spread__body,
.article__excerpt, .article__excerpt-th,
.service-card__body,
.service-card__desc,
.field__input,
.field__textarea {
  font-family: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 300 !important;
}

/* Specific 16px size for body paragraphs (16 / Light 300) */
.contact__text,
.spread__body, .spread__body.show-en, .spread__body.show-th,
.service-card__desc, .service-card__desc.show-en, .service-card__desc.show-th,
.prologue__text, .prologue__text.show-en, .prologue__text.show-th,
.services__lead, .services__lead.show-en, .services__lead-th, .services__lead.show-th {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}

/* Align contact form so its first row lines up with the headline (not the eyebrow) */
.contact__inner > .contact__form { padding-top: 4rem; }
@media (max-width: 720px) {
  .contact__inner > .contact__form { padding-top: 0; }
}

/* Align services head so CTA sits beside the first line of the headline (not the bottom) */
.services__head { align-items: start !important; }
.services__head-right {
  justify-self: end;
  /* push button down a touch so its baseline aligns with the headline's first line */
  padding-top: 0.5rem;
}

/* =====================================================================
   PDF REVISIONS (2026-06) — Anuphan Medium for requested Thai headings,
   About stats, team arrows, article follow, contact + footer additions
   ===================================================================== */

/* Thai headings → Anuphan Medium 500 (Team, "people behind", Why YH) */
.team__title-th,
.team-card__name-th,
.team-card__role-th,
.advantages__title-th,
.advantage__name-th,
.team__title-th em,
.advantages__title-th em,
.advantage__name-th em {
  font-family: "Anuphan", system-ui, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}

/* About — stats block (eyebrow heading + numbers + labels) */
.prologue__stats-wrap {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-faint, rgba(24,23,21,0.25));
}
.prologue__stats-eyebrow {
  display: block;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rust, #7C3C1B);
  margin-bottom: 1.5rem;
}
.prologue__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.prologue__stats .stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.prologue__stats .stat__num {
  font-family: var(--font-en-serif);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: var(--c-rust, #7C3C1B);
}
.prologue__stats .stat__label {
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ink, #181715);
  opacity: 0.85;
  max-width: 18ch;
}
@media (max-width: 700px) {
  .prologue__stats { gap: 1.5rem 2rem; }
  .prologue__stats .stat { flex: 1 1 40%; }
}

/* Team — prev/next arrows (replaces dots) */
/* Team head — title on the left, nav arrows on the right */
.team__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}
/* Team nav — Gallery-style buttons, aligned to the right of the heading */
.team__nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.team__nav .gallery__nav-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 640px) {
  .team__head { flex-direction: column; align-items: flex-start; }
  .team__nav { align-self: flex-end; }
}
.team__nav .gallery__nav-btn:disabled:hover {
  background: transparent;
  color: var(--c-black);
  border-color: var(--line-strong);
}

/* Articles — follow-on-Facebook line */
.journal__follow {
  margin-top: 2.5rem;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.85;
}
.journal__follow a {
  color: var(--c-rust, #9c5a3c);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contact — subtitle, email, map link */
.contact__subtitle {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0.5rem 0 1.25rem;
  opacity: 0.9;
}
.contact__subtitle .show-th { font-family: "Anuphan", sans-serif; font-style: normal; }
.contact__email {
  margin-top: 1.25rem;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 500;
}
.contact__email a {
  color: var(--c-rust, #9c5a3c);
  text-decoration: none;
}
.contact__email a:hover { text-decoration: underline; }
.contact__map-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--c-rust, #9c5a3c);
  text-decoration: none;
}
.contact__map-link:hover { text-decoration: underline; }

/* Footer — license line */
.footer__license {
  margin-top: 0.85rem;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0.65;
}

/* Thai text is never italic (incl. emphasis inside Thai headings/quotes) */
[data-lang="th"] em,
.show-th,
.show-th em,
[class*="-th"],
[class*="-th"] em {
  font-style: normal !important;
}

/* All Thai text uses Anuphan (overrides JS Pumpuang serif headings) */
:root { --font-th-serif: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif; }
[data-lang="th"] em,
.show-th,
.show-th em,
[class*="-th"],
[class*="-th"] em {
  font-family: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Thai headings follow the SAME format/size as their English counterparts —
   inherit size/line-height/letter-spacing from the shared heading; only the
   font is Anuphan + upright. Services Thai heading is kept on a single line. */
.prologue__quote-th,
.team__title-th,
.advantages__title-th,
.services__title-th,
.gallery__title-th,
.journal__title-th,
.testimonials__title-th,
.contact__title-th {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}
.services__title-th { white-space: nowrap; }
@media (max-width: 640px) {
  .services__title-th { white-space: normal; }
}

/* Hero — Thai heading 80px on desktop (two lines, English format) + lede on two lines */
.hero__display-th { font-size: 80px !important; line-height: 1.12 !important; }
.hero__lede-th .hero__lede-line { display: block; white-space: nowrap; }
.hero__lede-th { font-size: 19px !important; max-width: none !important; }
@media (max-width: 1100px) {
  .hero__display-th { font-size: clamp(1.7rem, 7.2vw, 80px) !important; }
}

/* Contact intro paragraph spans the full intro width */
.contact__intro .contact__text { max-width: 100% !important; }
@media (max-width: 760px) {
  .hero__lede-th { font-size: 16px !important; }
  .hero__lede-th .hero__lede-line { white-space: normal; }
}

/* Thai headings use JS Pumpuang (loaded from assets/fonts/) */
.hero__display-th, .hero__display-th em,
.prologue__quote-th, .prologue__quote-th em,
.team__title-th, .team__title-th em,
.advantages__title-th, .advantages__title-th em,
.services__title-th, .services__title-th em,
.gallery__title-th, .gallery__title-th em,
.journal__title-th, .journal__title-th em,
.testimonials__title-th, .testimonials__title-th em,
.contact__title-th, .contact__title-th em {
  font-family: "JS Pumpuang", "Old Standard TT", serif !important;
}

/* About quote (Thai): match the other section-heading size, force two lines */
.prologue__quote-th {
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem) !important;
  line-height: 1.2 !important;
}
.prologue__quote-th .quote-line { display: block; white-space: nowrap; }
@media (max-width: 640px) {
  .prologue__quote-th .quote-line { white-space: normal; }
}

/* =====================================================================
   หัวข้อภาษาไทย (JS Pumpuang) — คลายระยะตัวอักษร ไม่ให้ติดกันเกินไป
   (ต้องอยู่ท้ายไฟล์ + !important เพื่อชนะ letter-spacing: inherit ด้านบน)
   ===================================================================== */
.hero__display-th,
.prologue__quote-th,
.prologue__sign-text.show-th,
.advantages__title-th,
.advantage__name-th,
.services__title-th,
.gallery__title-th,
.journal__title-th,
.testimonials__title-th,
.contact__title-th,
.team__title-th,
.team-card__name-th,
.service-card__name-th,
.gcard__name-th,
.article__title-th {
  letter-spacing: 0.03em !important;
}