@font-face {
  font-family: 'LINESeedSansTH';
  src: url('https://cdn.jsdelivr.net/gh/nectec-oss/fonts@master/fonts/LINESeedSansTH/LINESeedSansTH_W_Rg.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'LINESeedSansTH';
  src: url('https://cdn.jsdelivr.net/gh/nectec-oss/fonts@master/fonts/LINESeedSansTH/LINESeedSansTH_W_Bd.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}



:root{
  /* ── CI Brand Colors ── */
  --gold:#BB8A3C;          /* Accent Gold   #BB8A3C */
  --gold-light:#d4aa6a;    /* Gold light tint        */
  --gold-dark:#7A5A3A;     /* Walnut Wood   #7A5A3A */
  --cream:#f6f4f1;         /* Warm Limestone #D8D2C7 */
  --cream-soft:#f0ece7;    /* Light page bg          */
  --ink:#0F5C63;           /* Deep Teal     #0F5C63 */
  --ink-soft:#0a4248;      /* Darker teal shade      */
  --muted:#A89C8D;         /* Soft Taupe    #A89C8D */
  --line:rgba(187,138,60,.28);
}

/* ══════════════════════════════════════════════════════
   UNIFIED TYPOGRAPHY SCALE — consistent across the site
   ══════════════════════════════════════════════════════
   h1 / .h1  : 2.8rem
   h2 / .h2  : 2.2rem
   h3 / .h3  : 1.8rem
   h4 / .h4  : 1.45rem
   h5 / .h5  : 1.2rem
   h6        : 1rem
   p         : 1rem  (body copy)
   ══════════════════════════════════════════════════════ */
h1, .h1 { font-size: clamp(2rem, 5vw, 2.8rem)  !important; line-height: 1.15 !important; }
h2, .h2 { font-size: clamp(1.6rem, 4vw, 2rem) !important; line-height: 1 !important; }
h3, .h3 { font-size: clamp(1.3rem, 3vw, 1.8rem) !important; line-height: 1.22 !important; }
h4, .h4 { font-size: clamp(1.1rem, 2.5vw, 0.65rem) !important; line-height: 1.28 !important; }
h5, .h5 { font-size: clamp(1rem, 2vw, 1.2rem)   !important; line-height: 1.35 !important; }

/* Mobile: scale down one step */
@media (max-width: 767px) {
  h1, .h1 { font-size: clamp(1.6rem, 7vw, 2rem)   !important; }
  h2, .h2 { font-size: clamp(1.3rem, 6vw, 1.7rem)  !important; }
  h3, .h3 { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; }
  h4, .h4 { font-size: clamp(1rem, 4vw, 1.25rem)   !important; }
  h5, .h5 { font-size: clamp(.95rem, 3.5vw, 1.1rem)!important; }
  h6       { font-size: .95rem                      !important; }
  p        { font-size: .93rem                      !important; }
}

*{ -webkit-font-smoothing:antialiased; }

html{ font-size:115%; }
html,body{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  font-family:'LINESeedSansTH', sans-serif;
  font-weight:400;
  color:#333;
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,.serif{
  font-family:'Cinzel', serif;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
}

.script{ font-family:'LINESeedSansTH', sans-serif; font-weight:400; }

.eyebrow{
  font-family:'Cinzel', serif;
  font-size:.72rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold-dark);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.85rem;
}
.eyebrow::before, .eyebrow::after{
  content:"";
  width:34px;
  height:1px;
  background:var(--gold);
}
.eyebrow.left::before{ display:none; }
.eyebrow.right::after{ display:none; }
/* Bold variant matching gallery-header style */
.eyebrow.bold{
  font-size:.95rem;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--ink-soft);
  font-weight:400;
  gap:.9rem;
}
.eyebrow.bold::before, .eyebrow.bold::after{
  width:42px;
  background:var(--ink);
}

.section-title{
  font-family:'Cinzel', serif;
  font-size:clamp(1.6rem, 3vw, 2rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:1rem;
  margin-bottom:0;
}
.section-title em{
  font-style:italic !important;
  font-weight:700;
  color:var(--gold-dark);
}

.btn-gold{
  background:var(--ink);
  color:#fff;
  border:1px solid var(--gold);
  padding:.85rem 2.1rem;
  font-size:.82rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:0;
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }

.btn-outline-gold{
  background:transparent;
  color: #bb8a3c;
    border: 1px solid rgb(187 138 60);
  padding:.85rem 2.1rem;
  font-size:.82rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:0;
  transition:all .35s ease;
}
.btn-outline-gold:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

.btn-link-arrow{
  font-size:.78rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  position:relative;
  padding-bottom:6px;
}
.btn-link-arrow::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:42px;
  height:1px;
  background:var(--gold);
  transition:width .35s ease;
}
.btn-link-arrow:hover{ color:var(--gold-dark); }
.btn-link-arrow:hover::after{ width:100%; }

/* ========== NAVBAR ========== */
.navbar-custom{
  background:transparent;
  padding:0;
  transition:background .4s ease, box-shadow .4s ease;
  z-index:1030;
  position:absolute;
  top:0; left:0; right:0;
  min-height:72px;
}
.navbar-custom .container-fluid{
  padding:0 !important;
  align-items:stretch;
  min-height:72px;
  display:flex;
  transition:min-height .35s ease;
}
.navbar-custom.fixed-on-scroll{
  position:fixed;
  background:rgba(15,92,99,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(0,0,0,.28);
}
.navbar-custom.fixed-on-scroll .container-fluid{
  min-height:44px;
}
.navbar-custom.fixed-on-scroll .brand{
  min-height:44px;
  width:110px;
  padding:.3rem .6rem;
}
.navbar-custom.fixed-on-scroll .brand img{
  height:26px;
}
.navbar-custom.fixed-on-scroll .brand-sub{
  font-size:.55rem !important;
}

/* ══════════════════════════════════════════
   INNER PAGE HERO — prevents navbar overlap
   ══════════════════════════════════════════
   navbar เป็น position:absolute (72px)
   ใช้ padding-top ที่ eyebrow/body แทน wrapper
   เพื่อไม่ให้ hero สูงเกิน

   .enj-hero,
.off-hero,
.od-hero,
.meet-hero,
.exp-hero,
[class*="-hero"]:not(.hero-index) {
  padding-top: 2px;
}

   ══════════════════════════════════════════ */


/* eyebrow / breadcrumb ของแต่ละหน้า — ดันให้พ้น navbar */
.enj-hero__label,
.off-hero__label,
.od-hero__breadcrumb,
.meet-hero__eyebrow,
.exp-hero__eyebrow,
[class$="-hero__eyebrow"],
[class$="-hero__label"],
[class$="-hero__breadcrumb"] {
  padding-top: 72px;
}

/* ── LOGO BLOCK ── dark teal square */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-decoration:none;
  background:#0F5C63;
  width:168px;
  min-height:72px;
  flex-shrink:0;
  padding:.65rem 1rem .7rem;
  line-height:1;
  transition:min-height .35s ease, width .35s ease, padding .35s ease;
}
.brand-lotus{
  width:44px;
  height:32px;
  margin-bottom:.22rem;
}
.brand-egp{
  font-family:'Cinzel', serif;
  font-size:2.1rem;
  font-weight:700;
  letter-spacing:.16em;
  color:#BB8A3C;
  line-height:1;
}
.brand-sub{
  font-family:'Cinzel', serif;
  font-size:.95rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.65);
  text-align:center;
  line-height:1.6;
  margin-top:.3rem;
  text-transform:uppercase;
  transition:font-size .35s ease;
}
@media (max-width: 991px) {
  .brand-sub { font-size:.65rem; }
}
.brand img{
  transition:height .35s ease;
}
.brand-icon{ display:none; }

/* ── NAV LINKS ── */
.nav-pill{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  backdrop-filter:none;
  display:flex;
  align-items:center;
}
.nav-pill .nav-link{
  font-family:'Cinzel', serif;
  font-size:.68rem;
  font-weight:500;
  color:rgba(255,255,255,.9) !important;
  padding:0 .85rem !important;
  transition:color .22s;
  display:inline-flex;
  align-items:center;
  gap:.22rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav-pill .nav-link:hover{ color:#fff !important; }
.nav-pill .nav-link.active{ color:#fff !important; }
.nav-pill .nav-link.has-arrow::after{
  content:"▾";
  font-size:.65rem;
  opacity:.75;
  margin-left:.1rem;
}

/* ── RIGHT SIDE ── */
.nav-right{
  display:flex;
  align-items:stretch;
  margin-left:auto;
  flex-shrink:0;
}

/* REQUEST PROPOSAL button — brighter teal */
.btn-booknow{
  background:#054d52;
  color:#fff !important;
  border:0;
  border-radius:0;
  padding:15px;
  font-family:'Cinzel', serif;
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:background .3s;
  text-decoration:none;
  white-space:nowrap;
}
.btn-booknow:hover{ background:#054d52; color:#fff !important; }
.btn-booknow .arr{ display:none; }

/* LANGUAGE SWITCHER */
.lang-switch{
  display:flex;
  align-items:center;
  gap:.35rem;
  color:rgba(255,255,255,.88);
  font-family:'Cinzel', serif;
  font-size:.68rem;
  letter-spacing:.08em;
  padding:0 .9rem;
  cursor:pointer;
  border-left:1px solid rgba(255,255,255,.2);
  text-decoration:none;
  white-space:nowrap;
}
.lang-switch:hover{ color:#fff; }

/* ── QUICK ACTIONS ── Request Proposal / Call Sales / LINE, always beside #drawerToggle ── */
.quick-actions{
  display:flex;
  align-items:center;
  align-self:center;
  margin-right:1.1rem;
}
.quick-actions__item{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  height:34px;
  padding:0 .9rem;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  font-family:'Cinzel', serif;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.22);
  transition:color .22s ease;
}
.quick-actions__item:first-child{ border-left:none; }
.quick-actions__item i{ font-size:.85rem; line-height:1; }
.quick-actions__item:hover{ color:var(--gold-light); }
.quick-actions__item--line:hover{ color:#06C755; }

@media (max-width:991px){
  .quick-actions{ margin-right:.5rem; }
  .quick-actions__item{ padding:0 .5rem; }
  .quick-actions__label{ display:none; }
  .quick-actions__item i{ font-size:1rem; }
}
@media (max-width:359px){
  .quick-actions__item{ padding:0 .4rem; }
}

/* ── MENU PILL TOGGLE ── collapsed nav trigger, visible at every breakpoint ── */
#drawerToggle{
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:.55rem;
  background:rgba(255,255,255,.95);
  color:var(--ink);
  border:none;
  border-radius:100px;
  padding:.62rem 1.15rem .62rem 1.5rem;
  font-family:'Cinzel', serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transition:background .25s ease, box-shadow .25s ease, transform .2s ease;
}
#drawerToggle:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
#drawerToggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.45), 0 6px 20px rgba(0,0,0,.15);
}
#drawerToggle .menu-pill__label{ line-height:1; }
#drawerToggle i{ font-size:1.15rem; line-height:1; }

/* ========== MOBILE DRAWER (right slide-in) ========== */
.mobile-drawer-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(6,46,50,.55);
  backdrop-filter:blur(4px);
  z-index:2000;
  opacity:0;
  transition:opacity .35s ease;
}
.mobile-drawer-overlay.open{ opacity:1; }

.mobile-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(320px, 85vw);
  background:var(--ink-soft);
  z-index:2001;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }

.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 1.4rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-close{
  width:38px; height:38px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#fff;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s;
  flex-shrink:0;
}
.drawer-close:hover{ background:var(--gold); border-color:var(--gold); }
.dine-card__icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .85s cubic-bezier(.2, .7, .2, 1);
}
.drawer-nav{
  list-style:none;
  margin:0;
  padding:1.2rem 0;
}
.drawer-nav li a{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.95rem 1.6rem;
  font-family:'Cinzel', serif;
  font-size:1rem;
  font-weight:500;
      padding-left: 3.2rem;
          font-size: 0.82rem;
  color:rgba(255,255,255,.85) !important;
  text-decoration:none;
  border-left:3px solid transparent;
  transition:all .22s ease;
  letter-spacing:.1em;
}
.drawer-nav li a:hover,
.drawer-nav li a.active{
  color:#fff !important;
  border-left-color:var(--gold);
  background:rgba(255,255,255,.04);
  padding-left:2rem;
}
.drawer-nav li + li{ border-top:1px solid rgba(255,255,255,.05); }

.drawer-footer{
  padding:1.4rem 1.6rem 2rem;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:auto;
}
.drawer-book{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  background:var(--gold);
  color:#fff !important;
  text-decoration:none;
  padding:.9rem 1.4rem;
  border-radius:100px;
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .3s;
}
.drawer-book:hover{ background:var(--gold-dark); color:#fff !important; }
.drawer-book .arr{
  width:32px; height:32px;
  background:#fff;
  color:var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  transition:transform .3s;
}
.drawer-book:hover .arr{ transform:rotate(45deg); }

.drawer-socials{
  display:flex;
  gap:.8rem;
  margin-top:1rem;
  justify-content:center;
}
.drawer-socials a{
  width:36px; height:36px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:rgba(255,255,255,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  transition:all .25s;
  text-decoration:none;
}
.drawer-socials a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* The collapsed "MENU" pill (#drawerToggle) stays visible at every breakpoint;
   the inline desktop nav links stay hidden always. What it opens differs by size —
   mobile/tablet gets the slide-in .mobile-drawer, desktop (>=992px) gets the
   full-screen .mega-menu below. Both panels live in the DOM at all times and
   function.php picks which one to open based on viewport width at click time. */
#navMain{ display:none !important; }
.navbar-custom .container-fluid{ flex-wrap:nowrap; }

/* ========== DESKTOP MEGA MENU (full-screen) ========== */
.mega-menu{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100%;
  height:100%;
  z-index:2100;
  background:linear-gradient(160deg, var(--ink-soft), #072e33 65%, var(--ink-soft));
  opacity:0;
  visibility:hidden;
  transform:translateY(-18px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  overflow-y:auto;
}
.mega-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear 0s;
}
body.mega-menu-open{ overflow:hidden; }

.mega-menu__close{
  position:absolute;
  top:2.4rem;
  right:2.6rem;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s, border-color .25s, transform .3s;
  z-index:2;
}
.mega-menu__close:hover{
  background:var(--gold);
  border-color:var(--gold);
  transform:rotate(90deg);
}

.mega-menu__inner{
  max-width:1480px;
  margin:0 auto;
  padding:8.5rem 3rem 2.5rem;
  display:flex;
  align-items:flex-start;
  box-sizing:border-box;
}
.mega-menu__col{
  flex:1 1 0;
  min-width:0;
  margin-right:2.25rem;
}
.mega-menu__col:last-child{ margin-right:0; }

.mega-menu__heading{
  display:block;
  font-family:'Cinzel', serif;
  font-size:1.1rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--gold);
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.mega-menu__list{
  list-style:none;
  margin:0;
  padding:0;
}
.mega-menu__list a{
  display:inline-block;
  padding:.5rem 0;
  font-family:'Cinzel', serif;
  font-size:.85rem;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.35;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  border-left:2px solid transparent;
  padding-left:0;
  transition:color .22s ease, padding-left .22s ease, border-color .22s ease;
}
.mega-menu__list a:hover{
  color:#fff;
  padding-left:.9rem;
  border-left-color:var(--gold);
}

/* ── Rooms & Suites: hover/focus expands its own room-type list downward ── */
.mega-menu__list .mega-menu__sub-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}
.mega-menu__sub-icon{
  font-size:.6rem;
  opacity:.55;
  transition:transform .3s ease, opacity .2s ease;
  flex-shrink:0;
}
.mega-menu__sub:hover .mega-menu__sub-icon,
.mega-menu__sub:focus-within .mega-menu__sub-icon{
  transform:rotate(180deg);
  opacity:1;
}

.mega-menu__sub-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:0;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.mega-menu__sub:hover .mega-menu__sub-list,
.mega-menu__sub:focus-within .mega-menu__sub-list{
  max-height:20rem;
}
.mega-menu__sub-list a{
  display:block;
  padding:.42rem 0 .42rem .95rem;
  font-family:'Cinzel', serif;
  font-size:.76rem;
  font-weight:400;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  border-left:1px solid rgba(255,255,255,.16);
  transition:color .2s ease, border-color .2s ease;
}
.mega-menu__sub-list a:hover{
  color:#fff;
  border-left-color:var(--gold);
}

/* ── Footer bar: Book Now (left) + language/socials (right) ── */
.mega-menu__footer{
  max-width:1480px;
  margin:0 auto;
  padding:2rem 3rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  box-sizing:border-box;
}
.mega-menu__footer-right{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
}
.mega-menu__book{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  background:var(--gold);
  color:#fff !important;
  text-decoration:none;
  padding:.9rem 1.5rem;
  border-radius:100px;
  font-family:'Cinzel', serif;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  width:fit-content;
  transition:background .3s;
}
.mega-menu__book:hover{ background:var(--gold-dark); }
.mega-menu__book .arr{
  width:26px; height:26px;
  background:#fff;
  color:var(--gold-dark);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  transition:transform .3s;
}
.mega-menu__book:hover .arr{ transform:rotate(45deg); }

.mega-menu__lang{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;
  overflow:hidden;
  width:fit-content;
}
.mega-menu__lang-btn{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  font-family:'Cinzel', serif;
  font-size:.68rem;
  letter-spacing:.1em;
  color:rgba(255,255,255,.55) !important;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .25s, color .25s;
}
.mega-menu__lang-btn:hover{ color:rgba(255,255,255,.9) !important; }
.mega-menu__lang-btn.is-active{ background:var(--gold); color:#fff !important; }
.mega-menu__lang-sep{ width:1px; height:16px; background:rgba(255,255,255,.18); }

.mega-menu__socials{ display:flex; gap:.7rem; }
.mega-menu__socials a{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:rgba(255,255,255,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  text-decoration:none;
  transition:all .25s;
}
.mega-menu__socials a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

@media (max-width:1199px){
  .mega-menu__inner{ padding-top:7.5rem; }
  .mega-menu__col{ margin-right:1.5rem; }
  .mega-menu__heading{ font-size:1rem; }
  .mega-menu__list a{ font-size:.78rem; }
}
@media (max-width: 991px){
  .mega-menu{ display:none !important; } /* mobile/tablet use .mobile-drawer instead */
}

/* ========== HERO ========== */
.hero{
  position:relative;
  height:100vh;
  min-height:760px;
  overflow:visible;
  color:#fff;
}
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0a4248;
}
.hero-video-wrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(6,30,34,.88) 0%, rgba(6,30,34,.65) 45%, rgba(6,30,34,.15) 100%);
  z-index:1;
}
/* Hero background image */
.hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  padding-top:90px;
}
.hero-stars{
  color:var(--gold);
  font-size:1rem;
  letter-spacing:.4em;
  margin-bottom:1.5rem;
}
.hero-title{
  color:#fff;
  font-family:'Cinzel', serif;
  font-size:clamp(2.2rem, 5.5vw, 5.5rem);
  line-height:1.1;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  max-width:980px;
}
.hero-sub{
  color:rgba(255,255,255,.82);
  max-width:520px;
  margin:1.8rem 0 2.4rem;
  font-size:1rem;
  line-height:1.75;
}
.btn-discover{
  background:var(--gold);
  color:#fff;
  border:0;
  border-radius:100px;
  padding:.7rem .65rem .7rem 1.8rem;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:1rem;
  transition:all .3s ease;
  text-decoration:none;
}
.btn-discover .arr{
  width:36px; height:36px;
  background:#fff;
  color:var(--gold);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .35s ease, background .3s;
  font-size:.95rem;
}
.btn-discover:hover{ background:var(--gold-dark); color:#fff; }
.btn-discover:hover .arr{ background:#fff; color:var(--gold-dark); transform:rotate(45deg); }

/* Play button (right side) */
.hero-play{
  position:absolute;
  right:5%;
  top:55%;
  transform:translateY(-50%);
  z-index:3;
}
.play-btn{
  width:120px; height:120px;
  background:#fff;
  border-radius:50%;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  font-size:2rem;
  cursor:pointer;
  position:relative;
  transition:all .3s;
  padding-left:8px;
}
.play-btn::before, .play-btn::after{
  content:"";
  position:absolute;
  inset:-12px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  animation:playPulse 2.5s ease-out infinite;
}
.play-btn::after{ animation-delay:1.25s; }
@keyframes playPulse{
  0%{ transform:scale(.85); opacity:1; }
  100%{ transform:scale(1.4); opacity:0; }
}
.play-btn:hover{ background:var(--gold); color:#fff; }

/* Big background text "LUXURY HOTEL" */
.hero-bg-text{
  position:absolute;
  bottom:-2.5vw;
  left:0; right:0;
  text-align:center;
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(5rem, 14vw, 16rem);
  line-height:.85;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(214,194,163,.35);
  pointer-events:none;
  z-index:2;
  white-space:nowrap;
  overflow:hidden;
}

/* Hero side dots */
.hero-dots{
  position:absolute;
  right:2rem;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media (max-width: 1199px){ .hero-dots{ display:none; } }
.hero-dots button{
  width:10px; height:10px;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  padding:0;
  transition:all .3s;
  cursor:pointer;
}
.hero-dots button.active{
  background:var(--gold);
  border-color:var(--gold);
  transform:scale(1.25);
}

/* Hero side widgets */
.hero-side-left{
  position:fixed;
  left:0; top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero-side-left .pill-btn{
  background:#fff;
  border:0;
  width:38px; height:38px;
  border-radius:0 100px 100px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
}
.hero-side-right{
  position:fixed;
  right:0; top:50%;
  transform:translateY(-50%);
  z-index:5;
}
.hero-side-right .pill-btn{
  background:#fff;
  border:0;
  width:46px; height:46px;
  border-radius:100px 0 0 100px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  font-size:1.2rem;
}
@media (max-width: 991px){
  .hero-side-left, .hero-side-right{ display:none; }
  .hero-play{ right:2rem; }
  .play-btn{ width:90px; height:90px; font-size:1.5rem; }
}
@media (max-width: 575px){
  .hero-play{ display:none; }
}

/* ========== ABOUT ========== */
.section{
  padding:1.5rem 0;
  background-color:#f6f4f1;
}
@media (max-width:768px){ .section{ padding:3.5rem 0; } }

/* ===== ABOUT — 3-column magazine layout ===== */
#about{
  background:#fff;
  overflow:hidden;
  padding:1.5rem 0 !important;
}
.about-inner{
  display:grid;
  grid-template-columns:220px 1fr 1fr;
  gap:1.8rem;
  align-items:stretch;
  max-width:1680px;
  margin:0 auto;
  padding:0 2.5rem;
}

/* COL 1 — two stacked images */
.about-col-stack{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.about-stack-img{
  width:100%;
  min-width:0;
  object-fit:cover;
  display:block;
  border-radius:4px;
  flex-shrink:1;
}
.about-stack-img.top{ height:280px; }
.about-stack-img.bot{ flex:1; min-height:200px; }

/* COL 2 — tall single image */
.about-col-hero{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  min-height:520px;
}
.about-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}

/* COL 3 — content */
.about-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1rem 0 1rem 1.5rem;
}
.about-content .section-title{
  font-size:clamp(1.6rem, 3vw, 2rem);
  margin-top:.8rem;
  margin-bottom:1.2rem;
  line-height:1.1;
}

/* Bullet list */
.about-bullets{
  list-style:none;
  padding:0;
  margin:1.6rem 0 2rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.about-bullets li{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.2rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.5;
  background:var(--cream);
  border-left:3px solid var(--gold-dark);
  border-radius:0 4px 4px 0;
  transition:background .25s, border-color .25s;
}
.about-bullets li:hover{
  background:#f0f5f5;
  border-left-color:var(--ink);
}
.about-bullets li::before{
  content:"";
  width:28px;
  height:28px;
  min-width:28px;
  background:var(--ink);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D6C2A3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  flex-shrink:0;
}

/* CTA row */
.about-cta{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
}
.about-btn-primary{
  background:var(--gold-dark);
  color:#fff;
  border:0;
  border-radius:100px;
  padding:.75rem 1.8rem;
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  transition:background .3s;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.about-btn-primary:hover{ background:var(--ink); color:#fff; }
.about-btn-icon{
  width:34px; height:34px;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition:transform .3s;
}
.about-btn-primary:hover .about-btn-icon{ transform:rotate(45deg); }

/* Responsive */
@media(max-width:1100px){
  .about-inner{ grid-template-columns:180px 1fr 1fr; gap:1.2rem; }
}
@media(max-width:900px){
  .about-inner{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; padding:0 1.5rem; }
  .about-col-stack{ flex-direction:row; }
  .about-stack-img.top,.about-stack-img.bot{ height:220px; flex:1; min-height:unset; }
  .about-col-hero{ min-height:320px; grid-column:1/3; }
  .about-content{ padding:1.5rem 0 0; grid-column:1/3; }
}
@media(max-width:575px){
  .about-inner{ grid-template-columns:1fr; padding:0 1rem; overflow:hidden; }
  .about-col-stack{ flex-direction:column; gap:.8rem; }
  .about-stack-img.top,.about-stack-img.bot{ height:200px; width:100%; flex:unset; min-width:0; }
  .about-col-hero{ min-height:240px; grid-column:1; }
  .about-content{ grid-column:1; }
}

/* ========== RESIDENCE / DESTINATION SLIDER ========== */
.destination-area{
  padding:5rem 0 6rem;
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 32%, #f0ece7 32%, #f0ece7 100%);
  position:relative;
  overflow:hidden;
}

/* Big background "RESIDENCE" text */
.residence-bg-title{
  position:absolute;
  top:1rem;
  left:50%;
  transform:translateX(-50%);
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(4rem, 13vw, 9rem);
  line-height:.9;
  letter-spacing:.02em;
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 40%, rgba(255,255,255,0) 95%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
  z-index:1;
  white-space:nowrap;
  opacity:.85;
}

.destination-slide-wrapper{
  position:relative;
  z-index:2;
  max-width:none;
  margin:0 auto;
  padding-top:8rem;
}

.destination-swiper{
  overflow:hidden;
  border-radius:0;
}
.destination-swiper .swiper-slide{
  width:100%;
}
.destination-bg{
  position:relative;
  height:680px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  padding:3rem;
  overflow:hidden;
}
.destination-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,46,50,0) 0%, rgba(6,46,50,.1) 50%, rgba(6,46,50,.65) 100%);
}
.destination-wrapper{
  position:relative;
  z-index:2;
  width:100%;
}
.destination-title{
  font-family:'Cinzel', serif;
  font-size:clamp(1.6rem, 3vw, 2rem);
  font-weight:500;
  color:#fff;
  letter-spacing:.01em;
  line-height:1.05;
  margin-bottom:1.2rem;
}
.destination-wrap ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.destination-wrap ul li{
  color:#fff;
  font-size:.82rem;
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  letter-spacing:.03em;
  background:rgb(214 194 163 / 81%);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  padding:.5rem 1rem;
  border-radius:100px;
}
.destination-wrap ul li .ico{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--gold);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:.78rem;
}

/* Navigation arrows — sit outside slider */
.destination-arrow-box{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:calc(100% + 100px);
  left:-50px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  z-index:6;
}
.destination-arrow-box button{
  width:42px; height:42px;
  border-radius:50%;
  background:#fff;
  border:0;
  color:var(--ink);
  font-size:.85rem;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 8px 24px rgba(6,46,50,.12);
  transition:all .3s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.destination-arrow-box button:hover{
  background:var(--gold);
  color:#fff;
}

/* Pagination dots */
.destination-dots{
  text-align:center;
  margin-top:1.8rem;
  display:flex;
  justify-content:center;
  gap:8px;
}
.destination-dots .swiper-pagination-bullet{
  width:8px;
  height:8px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--gold-dark);
  opacity:1;
  transition:all .3s;
  cursor:pointer;
  display:inline-block;
}
.destination-dots .swiper-pagination-bullet-active{
  background:var(--gold-dark);
  border-color:var(--gold-dark);
}

/* ===== Living Space Features ===== */
.living-features{
  padding-top:4rem;
}
.living-features-title{
  font-family:'Cinzel', serif;
  font-size:clamp(1.6rem, 3vw, 2rem);
  font-weight:500;
  color:var(--ink);
  text-align:center;
  margin-bottom:2.5rem;
}
.living-features-title .alt{
  font-style:italic;
}

.feature-mini{
  background:#fff;
  display:flex;
  align-items:stretch;
  gap:0;
  height:100%;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.feature-mini:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -15px rgba(6,46,50,.15);
}
.feature-mini-img{
  width:88px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
}
.feature-mini-body{
  padding:.9rem 1.1rem;
  flex:1;
}
.feature-mini-body h6{
  font-family:'Cinzel', serif;
  font-weight:600;
  margin:0 0 .25rem;
  color:var(--ink);
}
.feature-mini-body p{
  color:var(--muted);
  margin:0;
  line-height:1.45;
}

/* "View all rooms" footer row */
.living-cta{
  margin-top:3rem;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
}
.living-cta .lc-text{
  font-size:.92rem;
  color:var(--muted);
  font-style:italic;
}
.btn-view-rooms{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--gold);
  border-radius:100px;
  padding:.65rem .55rem .65rem 1.5rem;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
  transition:all .3s ease;
}
.btn-view-rooms .arr{
  width:30px; height:30px;
  background:var(--gold);
  color:#fff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .35s ease, background .3s;
  font-size:.78rem;
}
.btn-view-rooms:hover{ background:var(--gold); color:#fff; }
.btn-view-rooms:hover .arr{ background:#fff; color:var(--gold); transform:rotate(45deg); }

@media (max-width: 991px){
  .destination-bg{ height:400px; padding:2rem; }
  .destination-slide-wrapper{ padding-top:5rem; max-width:90%; }
  .destination-arrow-box{ width:100%; left:0; padding:0 1rem; }
  .residence-bg-title{ font-size:clamp(3rem, 14vw, 7rem); }
}
@media (max-width: 575px){
  .destination-bg{ height:340px; padding:1.4rem; }
  .destination-wrap ul li{ font-size:.72rem; padding:.4rem .8rem; }
  .feature-mini-img{ width:70px; }
  .feature-mini-body{ padding:.7rem .85rem; }
  .feature-mini-body h6{ font-size:1rem; }
  .feature-mini-body p{ font-size:.72rem; }
}

/* ========== ROOMS — Split layout slider ========== */
.rooms-section{
  background:#fff;
  position:relative;
  overflow:hidden;
  padding:0 !important;
}

.rooms-swiper{
  width:100%;
  overflow:hidden;
}

.rooms-slide{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:680px;
}

/* ----- LEFT : IMAGE ----- */
.rooms-slide__img{
  position:relative;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

/* ----- RIGHT : CONTENT ----- */
.rooms-slide__content{
  background:#f0ece7;
  padding:6rem 5rem;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.rooms-slide__bgword{
  position:absolute;
  top:3rem;
  left:0; right:1rem;
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(5rem, 11vw, 8rem);
  line-height:.9;
  letter-spacing:.02em;
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--gold) 0%, rgba(212,189,138,.3) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:.85;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-align:left;
  z-index:1;
  padding-left: 4rem;
}

.rooms-slide__bgword-icon {
    position: absolute;
    left: 9%;
    top: 9rem;
    width: 71px;
    height: 85px;
    opacity: .55;
    pointer-events: none;
    z-index: 2;
    color: #0F5C6328;
}

.rooms-slide__body{
  position:relative;
  z-index:3;
  margin-top:5rem;
}

.rooms-slide__title{
  font-family:'Cinzel', serif;
  font-size:clamp(1.6rem, 3vw, 2rem);
  font-weight:500;
  color:var(--ink);
  letter-spacing:.005em;
  line-height:1.1;
  margin-bottom:1.5rem;
}

.rooms-slide__title .alt{
  color:var(--muted);
  font-weight:400;
}

.rooms-slide__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:1.8rem;
}

.rooms-slide__meta-pill{
  background:rgba(6,46,50,.08);
  padding:.4rem 1.1rem .4rem .4rem;
  border-radius:100px;
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:.88rem;
  color:var(--ink);
}

.rooms-slide__meta-pill .ico{
  width:32px; height:32px;
  background:var(--ink);
  color:#fff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
}

.rooms-slide__desc{
  font-size:.95rem;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:2.5rem;
  max-width:560px;
}

.rooms-slide__cta{
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
}

.rooms-slide__price{
  display:flex;
  align-items:baseline;
  gap:.5rem;
}

.rooms-slide__price .from{
  font-size:.95rem;
  color:var(--muted);
}

.rooms-slide__price .amt{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:2rem;
  font-weight:600;
  color:var(--ink);
}

.btn-view-details{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}

.btn-view-details .pill{
  background:var(--gold);
  color:#fff;
  border-radius:100px;
  padding:.85rem 1.6rem;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .3s;
}

.btn-view-details .arr{
  width:48px; height:48px;
  background:var(--gold);
  color:#fff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  transition:transform .35s ease, background .3s;
}

.btn-view-details:hover .pill,
.btn-view-details:hover .arr{ background:var(--gold-dark); }
.btn-view-details:hover .arr{ transform:rotate(45deg); }

/* ----- NAV ARROWS — center divider, bottom ----- */
.rooms-nav{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-100%);
  z-index:10;
  display:flex;
}

.rooms-nav button{
  width:74px; height:74px;
  border:0;
  font-size:1.1rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .3s, color .3s;
}

.rooms-nav .rooms-prev{
  background:#fff;
  color:var(--ink);
}

.rooms-nav .rooms-next{
  background:var(--ink);
  color:#fff;
}

.rooms-nav .rooms-prev:hover,
.rooms-nav .rooms-next:hover{ background:var(--gold); color:#fff; }

/* ----- Responsive ----- */
@media (max-width: 991px){
  .rooms-slide{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .rooms-slide__img{
    height:380px;
  }
  .rooms-slide__content{
    padding:4rem 1.8rem 5rem;
  }
  .rooms-slide__bgword{ font-size:clamp(3rem, 14vw, 5rem); top:2rem; }
  .rooms-slide__bgword-icon{ width:70px; height:55px; top:5.5rem; }
  .rooms-slide__body{ margin-top:3.5rem; }
  .rooms-nav{
    bottom:auto;
    top:380px;
    left:0;
    transform:translateY(-100%);
  }
  .rooms-nav button{ width:54px; height:54px; }
}

@media (max-width: 575px){
  .rooms-slide__img{ height:300px; }
  .rooms-nav{ top:300px; }
}

/* ========== FACILITIES ========== */
.stat-num{
  font-family:'Cinzel', serif;
  font-size:4.5rem;
  font-weight:500;
  color:var(--gold-dark);
  line-height:1;
}
.stat-lbl{
  font-family:'Cinzel', serif;
  font-size:1.2rem;
  font-weight:600;
  color:var(--ink);
  margin:.6rem 0 .6rem;
}
.stat-desc{
  font-size:.9rem;
  color:var(--muted);
  max-width:280px;
  margin:0 auto;
  line-height:1.6;
}

.facility-card{
  background:#fff;
  padding:2.2rem 1.8rem;
  text-align:center;
  height:100%;
  position:relative;
  border:1px solid transparent;
  transition:all .4s ease;
}
.facility-card::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:0; height:2px;
  background:var(--gold);
  transition:all .4s ease;
}
.facility-card:hover{
  border-color:var(--line);
  transform:translateY(-5px);
}
.facility-card:hover::before{ width:100%; left:0; }
.facility-icon{
  width:80px; height:80px;
  margin:0 auto 1.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--gold);
  border-radius:50%;
  position:relative;
  transition:all .4s;
}
.facility-card:hover .facility-icon{
  background:var(--gold);
  border-style:solid;
}
.facility-icon i{
  font-size:1.9rem;
  color:var(--gold-dark);
  transition:color .4s;
}
.facility-card:hover .facility-icon i{ color:#fff; }
.facility-card h5{
  margin-bottom:.6rem;
}
.facility-card p{
  color:var(--muted);
  margin:0;
  line-height:1.55;
}

/* ===== FACILITIES REDESIGN ===== */
.fac-visual{
  position:relative;
  padding:0 0 40px 40px;
}
.fac-visual .img-main{
  width:100%;
  height:560px;
  object-fit:cover;
  position:relative;
  z-index:2;
  box-shadow:0 30px 60px -20px rgba(26,24,21,.35);
}
.fac-visual .img-accent{
  position:absolute;
  left:0; bottom:0;
  width:55%;
  height:280px;
  object-fit:cover;
  z-index:3;
  border:8px solid #fff;
  box-shadow:0 20px 40px -10px rgba(26,24,21,.3);
}
.fac-visual::before{
  content:"";
  position:absolute;
  top:30px; right:-20px;
  width:140px; height:140px;
  border:2px solid var(--gold);
  z-index:1;
  opacity:.7;
}
.fac-visual .img-tag{
  position:absolute;
  right:-10px; top:50%;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:center;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.7rem;
  letter-spacing:.5em;
  color:var(--gold-dark);
  text-transform:uppercase;
  z-index:4;
  background:#fff;
  padding:.4rem 1rem;
}

.fac-grid{
  margin-top:2.2rem;
}
.fac-item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.1rem 1rem;
  background:#fff;
  border:1px solid transparent;
  border-left:2px solid var(--gold);
  transition:all .4s ease;
  height:100%;
}
.fac-item:hover{
  border-color:var(--line, #e8e3db);
  border-left-color:var(--gold-dark);
  transform:translateX(4px);
  box-shadow:0 12px 30px -15px rgba(26,24,21,.18);
}
.fac-item .fac-ico{
  flex:0 0 46px;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream);
  border-radius:50%;
  transition:all .4s ease;
}
.fac-item:hover .fac-ico{
  background:var(--gold);
}
.fac-item .fac-ico i{
  font-size:1.2rem;
  color:var(--gold-dark);
  transition:color .4s ease;
}
.fac-item:hover .fac-ico i{ color:#fff; }
.fac-item .fac-body h6{
  font-family:'Cinzel', serif;
  font-weight:600;
  margin:0 0 .15rem;
  color:var(--ink);
}
.fac-item .fac-body small{
  font-size:.78rem;
  color:var(--muted, #8a8378);
  letter-spacing:.02em;
  display:block;
  line-height:1.4;
}

.fac-divider{
  display:flex; align-items:center; gap:.8rem;
  margin:1.6rem 0 1rem;
}
.fac-divider .line{
  flex:1; height:1px;
  background:linear-gradient(to right, var(--gold), transparent);
}
.fac-divider .dot{
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
}
.fac-divider .label{
  font-family:'Cinzel', serif;
  font-size:1.1rem;
  letter-spacing:.2em;
  color:var(--gold-dark);
  line-height:1;
}

@media (max-width:991px){
  .fac-visual{ padding:0 0 30px 20px; margin-bottom:2rem; }
  .fac-visual .img-main{ height:380px; }
  .fac-visual .img-accent{ height:200px; }
  .fac-visual::before{ display:none; }
  .fac-visual .img-tag{ display:none; }
}

/* ========== PARALLAX BANNER ========== */
.banner {
    position: relative;
    background-image: linear-gradient(rgb(18 64 67), rgb(18 64 67 / 90%)), url(images/hotel-exterior-pool-overview-portrait.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
    padding: 6rem 0;
    text-align: center;
}
.banner h2{
  font-family:'Cinzel', serif;
  color:#fff;
  margin:1rem 0 1.4rem;
  font-style:italic;
}
.banner h2 .em{ font-style:normal; color:var(--gold-light); }
.banner .lead{ color:rgba(255,255,255,.85); max-width:640px; margin:0 auto 2rem; font-size:1.05rem; }

/* ========== GALLERY (Masonry Portfolio) ========== */
.gallery-header{
  text-align:left;
  max-width:780px;
}
.section-p {
    padding: 1.5rem 0 !important;
    background-color: #fff;
}
.gallery-header .gh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.95rem;
  font-weight:400;
  color:var(--ink-soft);
  margin-bottom:1.2rem;
  letter-spacing:.01em;
}
.gallery-header .gh-eyebrow .gh-line{
  width:42px;
  height:1px;
  background:var(--ink);
  display:inline-block;
}
.gallery-header .gh-title {
    /* font-size: clamp(2rem, 4.4vw, 2.6rem); */
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}
.gallery-header .gh-sub{
  font-size:.95rem;
  line-height:1.7;
  color:var(--muted, #8a8378);
  margin:1.4rem 0 0;
  max-width:640px;
}

.gallery-fullwidth{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.gallery-masonry{
  column-count:4;
  column-gap:6px;
}
.gallery-masonry .gm-item,
.gallery-masonry .gm-textcard{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:6px;
}
.gallery-masonry .gm-item{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:#0a0a0a;
  display:block;
  width:100%;
  text-align:left;
  padding:0;
  border:0;
  text-decoration:none;
  color:inherit;
}
.gallery-masonry .gm-item img{
  width:100%; height:auto;
  object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
  display:block;
}
.gallery-masonry .gm-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,46,50,0) 40%, rgba(6,46,50,.78) 100%);
  opacity:0;
  transition:opacity .45s ease;
  z-index:1;
}
.gallery-masonry .gm-item:hover img{ transform:scale(1.06); }
.gallery-masonry .gm-item:hover::after{ opacity:1; }

.gallery-masonry .gm-zoom{
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:.85rem;
  opacity:0;
  transform:translateY(-8px);
  transition:all .35s ease;
  z-index:2;
  pointer-events:none;
}
.gallery-masonry .gm-item:hover .gm-zoom{ opacity:1; transform:translateY(0); }

.gallery-masonry .gm-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1.2rem 1.4rem;
  transform:translateY(15px);
  opacity:0;
  transition:all .45s ease .05s;
  z-index:2;
  color:#fff;
}
.gallery-masonry .gm-item:hover .gm-caption{
  transform:translateY(0);
  opacity:1;
}
.gallery-masonry .gm-caption .gm-cat{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.7rem;
  letter-spacing:.3em;
  color:var(--gold-light);
  text-transform:uppercase;
  display:block;
  margin-bottom:.3rem;
}
.gallery-masonry .gm-caption h3{
  font-family:'Cinzel', serif;
  font-weight:500;
  color:#fff;
  margin:0;
  line-height:1.2;
}

/* text card (Inspired by) — sits inline in the masonry flow like any other tile */
.gm-textcard{
  background:#fff;
  padding:1.8rem 1.6rem;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.gm-textcard::before{
  content:"the Palace";
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  font-family:'Cinzel', serif;
  font-size:3rem;
  letter-spacing:.18em;
  color:rgba(191,164,114,.15);
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.gm-textcard .gm-eyebrow{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-dark);
  display:block;
  margin-bottom:.5rem;
  position:relative;
  z-index:2;
}
.gm-textcard h3{
  font-family:'Cinzel', serif;
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 .6rem;
  position:relative;
  z-index:2;
}
.gm-textcard p{
  color:var(--muted, #8a8378);
  line-height:1.55;
  margin:0 0 .9rem;
  position:relative;
  z-index:2;
}
.gm-textcard .gm-cta-label{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink);
  display:block;
  margin-bottom:.8rem;
  position:relative;
  z-index:2;
}
.gm-textcard .gm-book-btn{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  background:var(--gold);
  color:#fff;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.65rem .65rem .65rem 1.6rem;
  border-radius:100px;
  position:relative;
  z-index:2;
  transition:background .3s ease;
}
.gm-textcard .gm-book-btn i{
  width:34px; height:34px;
  background:#fff;
  color:var(--gold);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  transition:transform .3s ease, background .3s;
}
.gm-textcard .gm-book-btn:hover{
  background:var(--gold-dark);
}
.gm-textcard .gm-book-btn:hover i{
  transform:rotate(45deg);
}

/* ===== Tablet / iPad (≤991px) ===== */
@media (max-width: 991px){
  .gallery-masonry{
    column-count:3;
  }
  .gm-textcard{
    min-height:240px;
    padding:1.6rem 1.4rem;
  }
  .gm-textcard::before{ font-size:4rem; top:10px; }
  .gm-textcard .gm-eyebrow{ font-size:.65rem; margin-bottom:.6rem; }
  .gm-textcard h3{ font-size:1.15rem; margin-bottom:.7rem; }
  .gm-textcard p{ font-size:.82rem; line-height:1.6; margin-bottom:1rem; }
  .gm-textcard .gm-cta-label{ font-size:.7rem; margin-bottom:.9rem; }
  .gm-textcard .gm-book-btn{ font-size:.72rem; padding:.6rem .6rem .6rem 1.3rem; }
}

/* ===== Mobile / iPhone (≤575px) ===== */
@media (max-width: 575px){

  /* ── true masonry, 2 คอลัมน์ ไล่ตามความสูงจริงของรูป ── */
  .gallery-masonry{
    column-count:2;
    column-gap:4px;
  }
  .gallery-masonry .gm-item,
  .gallery-masonry .gm-textcard{
    margin-bottom:4px;
  }

  /* caption ติดอยู่ตลอด ไม่ต้อง hover */
  .gallery-masonry .gm-item::after{ opacity:1; }
  .gallery-masonry .gm-item .gm-zoom{ opacity:1; transform:none; width:30px; height:30px; top:8px; right:8px; font-size:.7rem; }
  .gallery-masonry .gm-caption{
    opacity:1;
    transform:translateY(0);
    padding:.65rem .8rem;
  }
  .gallery-masonry .gm-caption .gm-cat{
    font-size:.58rem;
    letter-spacing:.2em;
    margin-bottom:.1rem;
  }
  .gallery-masonry .gm-caption h3{
    font-size:.95rem;
    line-height:1.15;
  }

  /* textcard: compact, full column width */
  .gm-textcard{
    min-height:0;
    padding:1.6rem 1.4rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
  }
  .gm-textcard::before{ font-size:4.5rem; top:6px; opacity:.05; }
  .gm-textcard .gm-eyebrow{ font-size:.62rem; letter-spacing:.28em; margin-bottom:.5rem; }
  .gm-textcard h3{ font-size:1.15rem; line-height:1.2; margin-bottom:.55rem; }
  .gm-textcard p{
    font-size:.83rem;
    line-height:1.55;
    margin-bottom:.85rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .gm-textcard .gm-cta-label{ font-size:.65rem; margin-bottom:.65rem; }
  .gm-textcard .gm-book-btn{
    align-self:stretch;
    justify-content:center;
    padding:.6rem .6rem .6rem 1.3rem;
    font-size:.7rem;
    letter-spacing:.16em;
  }
}

/* ===== Small phones (≤390px) ===== */
@media (max-width: 390px){
  .gm-textcard{ padding:1.4rem 1.2rem; }
  .gm-textcard h3{ font-size:1.1rem; }
  .gm-textcard p{ -webkit-line-clamp:2; }
}

/* ========================================
   GALLERY LIGHTBOX
   ======================================== */
.gm-lightbox{
  position:fixed; inset:0;
  background:rgba(6,26,28,.95);
  backdrop-filter:blur(8px);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.gm-lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.gm-lb-stage{
  position:relative;
  max-width:min(1080px, 88vw);
  max-height:88vh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.gm-lightbox.is-open .gm-lb-stage{
  animation:gmLbIn .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes gmLbIn{
  from{ opacity:0; transform:scale(.96) translateY(14px); }
  to{ opacity:1; transform:none; }
}
.gm-lb-stage img{
  width:auto;
  max-width:100%;
  max-height:72vh;
  object-fit:contain;
  display:block;
  border:1px solid rgba(255,255,255,.08);
  background:#050505;
}
.gm-lb-info{
  padding:1.3rem .5rem 0;
  color:#fff;
  text-align:center;
  max-width:560px;
}
.gm-lb-info .gm-lb-cat{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-light);
  display:block;
  margin-bottom:.5rem;
}
.gm-lb-info h3{
  font-family:'Cinzel', serif;
  font-weight:500;
  color:#fff;
  margin:0 0 .9rem;
  font-size:1.4rem;
  line-height:1.25;
}
.gm-lb-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--gold-light);
  text-decoration:none;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.78rem;
  letter-spacing:.1em;
  border-bottom:1px solid rgba(212,170,106,.4);
  padding-bottom:3px;
  transition:all .3s ease;
}
.gm-lb-link:hover{ color:#fff; border-color:#fff; gap:.75rem; }
.gm-lb-link i{ font-size:.75rem; }

.gm-lb-close, .gm-lb-nav{
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  width:46px; height:46px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all .3s ease;
  z-index:2001;
  padding:0;
}
.gm-lb-close:hover, .gm-lb-nav:hover{ background:var(--gold); border-color:var(--gold); }
.gm-lb-close{ top:22px; right:22px; }
.gm-lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.gm-lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.gm-lb-count{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.55);
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.72rem;
  letter-spacing:.18em;
}

@media (max-width: 767px){
  .gm-lb-close{ width:38px; height:38px; top:14px; right:14px; font-size:.85rem; }
  .gm-lb-nav{ width:38px; height:38px; font-size:.85rem; }
  .gm-lb-prev{ left:8px; }
  .gm-lb-next{ right:8px; }
  .gm-lb-info h3{ font-size:1.15rem; }
  .gm-lb-stage img{ max-height:64vh; }
  .gm-lb-count{ bottom:10px; }
}

/* ========== HERO GALLERY (GSAP pin-style) ========== */
/* ========== GALLERY SCATTERED ========== */
.gallery-area-section{
  position:relative;
  background:#fff;
}
.gallery-area{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#fff;
}
.gallery-thumb-wrap{
  position:absolute;
  inset:0;
}

/* ── MAIN center portrait ── */
.gallery-thumb{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:24vw;
  max-width:360px;
  height:54vh;
  overflow:hidden;
  box-shadow:0 24px 64px -16px rgba(6,46,50,.45);
  z-index:4;
}
.gallery-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ── Scattered thumbs ── */
.gallery-thumb-inner-1,
.gallery-thumb-inner-2,
.gallery-thumb-inner-3,
.gallery-thumb-inner-4,
.gallery-thumb-inner-5,
.gallery-thumb-inner-6,
.gallery-thumb-inner-7{
  position:absolute;
  overflow:hidden;
  box-shadow:0 12px 36px -10px rgba(6,46,50,.28);
  z-index:2;
  will-change:transform,opacity;
}
.gallery-thumb-inner-1 img,
.gallery-thumb-inner-2 img,
.gallery-thumb-inner-3 img,
.gallery-thumb-inner-4 img,
.gallery-thumb-inner-5 img,
.gallery-thumb-inner-6 img,
.gallery-thumb-inner-7 img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/*
  Reference layout — all thumbs within 6vh~94vh to never clip
  ┌─────────────────────────────────────────────────────────┐
  │  [1 top-left]      [2 top-center]        [3 top-right]  │  6–34vh
  │                    [  MAIN  portrait  ]  [5 mid-right]  │  23–63vh
  │  [4 mid-left]                                           │  40–70vh
  │          [6 bottom-center wide]  [7 bottom-right]       │  68–94vh
  └─────────────────────────────────────────────────────────┘
*/

/* 1 — top-left tall portrait */
.gallery-thumb-inner-1{
  top:6vh;     left:8%;
  width:18vw;  height:28vh;
}
/* 2 — top-center wide & short */
.gallery-thumb-inner-2{
  top:6vh;     left:36%;
  width:22vw;  height:13vh;
}
/* 3 — top-right small portrait */
.gallery-thumb-inner-3{
  top:6vh;     right:4%;
  width:12vw;  height:18vh;
}
/* 4 — mid-left square */
.gallery-thumb-inner-4{
  top:40vh;    left:9%;
  width:16vw;  height:26vh;
}
/* 5 — mid-right large — top starts below thumb-3 bottom (6+18=24vh) */
.gallery-thumb-inner-5{
  top:28vh;    right:3%;
  width:22vw;  height:34vh;
}
/* 6 — bottom-center wide */
.gallery-thumb-inner-6{
  bottom:6vh;  left:27%;
  width:27vw;  height:24vh;
}
/* 7 — bottom-right narrow portrait */
.gallery-thumb-inner-7{
  bottom:6vh;  right:11%;
  width:9vw;   height:22vh;
}

@media (max-width:1199px){
  .gallery-thumb-inner-1,.gallery-thumb-inner-2,
  .gallery-thumb-inner-3,.gallery-thumb-inner-4,
  .gallery-thumb-inner-5,.gallery-thumb-inner-6,
  .gallery-thumb-inner-7{ display:none; }
  .gallery-thumb{ width:280px; height:400px; }
  .pin-spacer{ height:100vh; }
}
@media (max-width:767px){
  .pin-spacer{ height:80vh; }
  .gallery-area{ height:80vh; }
  .gallery-thumb{ width:78vw; height:56vw; }
}

/* ========== TESTIMONIAL ========== */
.testimonial-section{
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.testimonial-section h2, .testimonial-section .eyebrow{ color:#fff; }
.testimonial-section .eyebrow{ color:var(--gold-light); }
.testimonial-section .eyebrow.bold{ color:rgba(255,255,255,.85); }
.testimonial-section .eyebrow.bold::before,
.testimonial-section .eyebrow.bold::after{ background:rgba(255,255,255,.7); }
.testimonial-section h2 .em,
.testimonial-section h2 em{ color:var(--gold-light); font-style:italic; font-weight:700; }
.testimonial-section .section-title{ color:#fff; }

.tcard{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:2.5rem 2.2rem 2.2rem;
  position:relative;
  height:100%;
}
.tcard .quote{
  font-family:'Cinzel', serif;
  font-size:5rem;
  color:var(--gold);
  line-height:.6;
  position:absolute;
  top:1.4rem; right:1.5rem;
  font-style:italic;
}
.tcard .stars{ color:var(--gold-light); letter-spacing:.15em; margin-bottom:1.1rem; font-size:.85rem; }
.tcard p{
  font-family:'Cinzel', serif;
  font-style:italic;
  font-size:1.18rem;
  line-height:1.55;
  color:rgba(255,255,255,.85);
  margin-bottom:1.7rem;
}
.tcard .person{ display:flex; gap:.9rem; align-items:center; }
.tcard .person img{
  width:48px; height:48px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--gold);
}
.tcard .person .initials-avatar{
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(191,164,114,.15);
  color:var(--gold-light);
  font-family:'Cinzel', serif;
  font-size:1.4rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.tcard .person .name{
  font-family:'Cinzel', serif;
  font-size:1.15rem;
  color:#fff;
  display:block;
  line-height:1.1;
}
.tcard .person .role{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-top:.2rem;
  display:block;
}

/* ========== BLOG ========== */
.blog-card{
  background:#fff;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 25px 50px -20px rgba(6,46,50,.18); }
.blog-img{ height:230px; overflow:hidden; }
.blog-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s; }
.blog-card:hover .blog-img img{ transform:scale(1.08); }
.blog-body{ padding:1.8rem; }
.blog-meta{
  display:flex; gap:1.2rem;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.8rem;
}
.blog-meta i{ color:var(--gold); margin-right:.3rem; }
.blog-card h4{ line-height:1.3; margin-bottom:1rem; }
.blog-card h4 a{ color:inherit; text-decoration:none; transition:color .25s; }
.blog-card h4 a:hover{ color:var(--gold-dark); }

.blog-date-badge{
  position:absolute;
  top:1rem; left:1rem;
  background:#fff;
  color:var(--ink);
  padding:.7rem 1rem;
  text-align:center;
  z-index:2;
  line-height:1;
}
.blog-date-badge .d{
  font-family:'Cinzel', serif;
  font-size:1.5rem;
  font-weight:600;
  display:block;
}
.blog-date-badge .m{
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-top:.25rem;
  display:block;
}

/* ========== NEWSLETTER ========== */
.newsletter{
  background:var(--gold);
  color:#fff;
  padding:4rem 0;
  position:relative;
  overflow:hidden;
}
.newsletter h3{
  color:#fff;
  font-style:italic;
}
.newsletter h3 .em{ font-style:normal; }
.newsletter p{ color:rgba(255,255,255,.85); margin:0; }
.news-form{
  display:flex;
  background:#fff;
  padding:.4rem;
}
.news-form input{
  flex:1;
  border:0;
  outline:none;
  padding:0 1.2rem;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.92rem;
  color:var(--ink);
  background:transparent;
}
.news-form button{
  background:var(--ink);
  color:#fff;
  border:0;
  padding:1rem 2rem;
  font-size:.78rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:500;
  cursor:pointer;
  transition:background .3s;
}
.news-form button:hover{ background:var(--gold-dark); }

/* ========== FOOTER ========== */
footer{
  background:#0a4248;
  color:rgba(255,255,255,.7);
  padding:5rem 0 0;
}
footer .ftitle{
  font-family:'Cinzel', serif;
  color:#fff;
  margin-bottom:1.5rem;
  position:relative;
  padding-bottom:.7rem;
}
footer .ftitle::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:30px; height:2px;
  background:var(--gold);
}
footer .brand-foot{ color:#fff; }
footer .brand-foot .dot{ background:var(--gold); }
footer p, footer li, footer a{ font-size:.92rem; line-height:1.85; }
footer a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .25s, padding-left .25s; }
footer ul.flist{ list-style:none; padding:0; margin:0; }
footer ul.flist li a{ display:inline-block; }
footer ul.flist li a:hover{ color:var(--gold-light); padding-left:6px; }
footer .contact-li{ display:flex; gap:.8rem; margin-bottom:.9rem; align-items:flex-start; }
footer .contact-li i{ color:var(--gold); font-size:1.05rem; margin-top:3px; }
.social-row{ display:flex; gap:.6rem; margin-top:1.2rem; }
.social-row a{
  width:38px; height:38px;
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:all .3s;
}
.social-row a:hover{ background:var(--gold); border-color:var(--gold); }
.footer-bottom{
  margin-top:3.5rem;
  padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem;
  color:rgba(255,255,255,.55);
}

/* ========== UTILITIES ========== */
.divider-fancy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:1rem 0;
}
.divider-fancy .line{ width:60px; height:1px; background:var(--gold); }
.divider-fancy i{ color:var(--gold); font-size:1rem; }

.back-top{
  position:fixed;
  bottom:25px; right:25px;
  width:42px; height:42px;
  background:var(--gold);
  color:#fff;
  border:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:all .35s;
  z-index:999;
}
.back-top.show{ opacity:1; pointer-events:auto; }
.back-top:hover{ background:var(--ink); }

/* ========== VIDEO MODAL ========== */
.video-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,46,50,.88);
  backdrop-filter:blur(6px);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.video-modal-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.video-modal-box{
  position:relative;
  width:90vw;
  max-width:960px;
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  transform:scale(.92);
  transition:transform .35s ease;
}
.video-modal-overlay.open .video-modal-box{
  transform:scale(1);
}
.video-modal-box iframe{
  width:100%;
  height:100%;
  border:0;
}
.video-modal-close{
  position:absolute;
  top:-48px;
  right:0;
  width:38px; height:38px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#fff;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s;
}
.video-modal-close:hover{ background:var(--gold); border-color:var(--gold); }

/* ========================================
   MOBILE — COMPREHENSIVE OVERRIDES ≤767px
   ======================================== */
@media (max-width: 767px){

  /* --- Global overflow prevention --- */
  html, body{ overflow-x:hidden; max-width:100vw; }
  *, *::before, *::after{ box-sizing:border-box; }
  .container, .container-fluid{ padding-left:1.1rem !important; padding-right:1.1rem !important; max-width:100% !important; }
  .row{ margin-left:0 !important; margin-right:0 !important; }
  [class*="col-"]{ padding-left:.75rem; padding-right:.75rem; }

  /* --- Global spacing --- */
  section, .section{  padding-bottom:3.5rem !important; }
  .section-p{ padding-top:3.5rem !important; padding-bottom:3.5rem !important; }

  /* --- Typography handled by unified scale above --- */
  .section-title{ word-break:break-word; }
  .living-features-title{ /* size from unified scale */ }
  .eyebrow{ font-size:.7rem; letter-spacing:.28em; }
  .eyebrow.bold{ font-size:.85rem; }
  .eyebrow::before, .eyebrow::after{ width:24px; }
  h2, h3{ word-break:break-word; }

  /* --- Gather / Meetings / Stay sections --- */
  .gather-grid{ grid-template-columns:1fr !important; gap:2rem !important; margin-bottom:2.5rem !important; }
  .gather-grid--reverse > div:first-child{ order:2; }
  .gather-grid--reverse > div:last-child{ order:1; }
  .gather-grid img[style*="height:300px"]{ height:220px !important; }
  .gather-grid img[style*="height:160px"]{ height:110px !important; }
  .gather-grid img[style*="height:220px"]{ height:180px !important; }
  .gather-grid img[style*="height:120px"]{ height:90px !important; }

  /* --- Stats bar (4 col → 2x2) --- */
  div[style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"] > div{ border-right:none !important; border-bottom:1px solid #e8e3db; }
  div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(1),
  div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(3){ border-right:1px solid #e8e3db !important; }
  div[style*="bottom:-40px"]{ bottom:-60px !important; }

  /* --- Icon grid (3 col → 2x3 wrap) --- */
  div[style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:repeat(3,1fr) !important; }

  
  body{ font-size:.93rem; }
  .hero-sub{ font-size:.88rem; line-height:1.6; margin:1rem 0 1.6rem; max-width:100%; }
  .banner .lead{ font-size:.95rem; }

  /* --- About --- */
  .about-bullets li{ font-size:.85rem; padding:.8rem 1rem; }

  /* --- Destination tags --- */
  .destination-wrap ul li{ font-size:.78rem; padding:.4rem .75rem; }

  /* --- Rooms --- */
  .rooms-slide__desc{ font-size:.88rem; line-height:1.65; margin-bottom:1.4rem; }
  .rooms-slide__meta-pill{ font-size:.8rem; }
  .rooms-slide__price .from{ font-size:.88rem; }
  .rooms-slide__price .amt{ font-size:1.6rem; }

  /* --- Facilities --- */
  .fac-item .fac-body small{ font-size:.75rem; }

  /* --- Gallery / GM cards --- */
  .gm-textcard p{ font-size:.82rem; line-height:1.55; }
  .gm-textcard .gm-cta-label{ font-size:.68rem; }

  /* --- Testimonials --- */
  .tcard p{ font-size:.95rem; line-height:1.5; }
  .tcard .person .name{ font-size:1rem; }
  .tcard .person .role{ font-size:.68rem; }
  .tcard .stars{ font-size:.8rem; }

  /* --- Blog --- */
  .blog-meta{ font-size:.7rem; }
  .blog-body{ padding:1.2rem; }

  /* --- Newsletter --- */
  .newsletter p{ font-size:.88rem; }
  .news-form input{ font-size:.88rem; }

  /* --- Footer --- */
  footer p, footer li, footer a{ font-size:.85rem; line-height:1.75; }
  footer .contact-li{ font-size:.85rem; }
  .hero-content{ padding-top:80px; align-items:flex-end; padding-bottom:4rem; }
  .hero-title{ font-size:clamp(1.8rem, 8vw, 2.8rem); max-width:100%; word-break:break-word; overflow-wrap:break-word; }
  .hero-sub{ font-size:.88rem; line-height:1.6; margin:1rem 0 1.6rem; max-width:100%; }
  .hero-stars{ font-size:.85rem; margin-bottom:1rem; }
  .hero-bg-text{ font-size:clamp(3rem, 16vw, 5rem); bottom:-1vw; overflow:hidden; white-space:nowrap; }
  .hero-play{ display:none !important; }
  .btn-discover{ font-size:.72rem; padding:.65rem .6rem .65rem 1.4rem; gap:.7rem; }
  .btn-discover .arr{ width:32px; height:32px; }
  .col-lg-9, .col-xl-8{ max-width:100%; flex:0 0 100%; padding-left:0 !important; }

  /* --- Navbar --- */
  .navbar-custom{ min-height:64px !important; }
  .brand{ width:100px; min-height:64px; padding:.5rem .6rem; }
  .brand-lotus{ width:38px; height:28px; margin-bottom:.2rem; }
  .brand-egp{ font-size:1.35rem; }
  .brand-sub{ font-size:.32rem; }


  /* --- About section — handled in component CSS --- */



  /* --- Destination / Residence slider --- */
  .destination-area{ padding:3rem 0 4rem; }
  .destination-slide-wrapper{ padding-top:4rem; max-width:100%; }
  .destination-bg{ height:300px; padding:1.2rem; }
  .destination-title{ font-size:clamp(1.3rem, 5vw, 1.7rem); margin-bottom:.8rem; }
  .residence-bg-title{ font-size:clamp(2.5rem, 11vw, 5rem); }
  .destination-arrow-box{ width:calc(100% + 2rem); left:-1rem; padding:0 .5rem; }
  .destination-arrow-box button{ width:36px; height:36px; font-size:.78rem; }

  /* --- Feature mini cards --- */
  .feature-mini-img{ width:64px; }
  .feature-mini-body{ padding:.65rem .8rem; }
  .feature-mini-body p{ font-size:.72rem; }
  .living-features{ padding-top:2.5rem; }

  /* --- Rooms slider --- */
  .rooms-slide{ grid-template-columns:1fr; min-height:auto; }
  .rooms-slide__img{ height:260px; }
  .rooms-slide__content{ padding:3rem 1.4rem 4.5rem; }
  .rooms-slide__bgword{ font-size:clamp(2.5rem, 14vw, 4rem); top:1rem; }
  .rooms-slide__bgword-icon{ width:55px; height:42px; top:4rem; }
  .rooms-slide__body{ margin-top:2.5rem; }
  .rooms-slide__title{ font-size:clamp(1.3rem, 5vw, 1.7rem); margin-bottom:1rem; }
  .rooms-slide__desc{ font-size:.88rem; margin-bottom:1.6rem; }
  .rooms-slide__meta-pill{ font-size:.78rem; }
  .rooms-slide__price .amt{ font-size:1.6rem; }
  .rooms-nav{ top:260px; }
  .rooms-nav button{ width:46px; height:46px; font-size:.95rem; }

  /* --- Facilities --- */
  .stat-num{ font-size:3rem; }
  .stat-lbl{ font-size:1rem; }
  .stat-desc{ font-size:.82rem; }
  .facility-card{ padding:1.6rem 1.2rem; }
  .facility-icon{ width:64px; height:64px; }
  .facility-icon i{ font-size:1.5rem; }

  /* --- Gallery fullwidth + masonry --- */
  .gallery-fullwidth{ width:100%; position:static; left:auto; right:auto; margin-left:0; margin-right:0; }
  .gallery-masonry{ column-count:2; }

  /* --- Gallery scatter (GSAP) area --- */
  .gallery-area{ overflow:hidden; }
  .gallery-thumb{ width:80vw; height:58vw; position:relative !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; margin:0 auto; }

  /* --- Testimonials --- */
  .tcard{ padding:1.8rem 1.4rem 1.6rem; }
  .tcard p{ font-size:1rem; line-height:1.5; }
  .tcard .quote{ font-size:3.5rem; }

  /* --- Blog cards --- */
  .blog-img{ height:200px; }
  .blog-body{ padding:1.3rem; }

  /* --- Newsletter --- */
  .newsletter{ padding:3rem 0; }
  .news-form{ flex-direction:column; }
  .news-form input{ padding:1rem; border-bottom:1px solid var(--line); }
  .news-form button{ width:100%; padding:.9rem; }

  /* --- Footer --- */
  footer{ padding:3.5rem 0 0; }
  footer p, footer li, footer a{ font-size:.85rem; }
  .footer-bottom{ margin-top:2rem; font-size:.75rem; }
  .footer-bottom .d-flex{ flex-direction:column; gap:.5rem; text-align:center; }

  /* --- Back to top --- */
  .back-top{ bottom:16px; right:16px; width:36px; height:36px; font-size:.85rem; }
}

/* ========================================
   SMALL PHONES ≤390px
   ======================================== */
@media (max-width: 390px){
  .hero-title{ font-size:clamp(1.6rem, 9vw, 2rem); }
  .section-title{ font-size:1.3rem; }
  .living-features-title{ font-size:1.3rem; }
  .gm-textcard h3{ font-size:1.05rem; }
  .blog-card h4{ font-size:1rem; }
  .rooms-slide__title{ font-size:clamp(1.2rem, 5vw, 1.5rem); }
  .destination-title{ font-size:clamp(1.2rem, 5vw, 1.5rem); }
  .rooms-slide__content{ padding:2.5rem 1.1rem 4rem; }
  .destination-bg{ height:260px; }
  .about-img-wrap{ height:280px; }
  .news-form button{ letter-spacing:.15em; }
}







/* ============================================================
   explore.css — หน้า Explore Pattaya & Jomtien
   ใช้ร่วมกับ main_styles.css (ไม่ซ้ำ class เดิม)
   ============================================================ */

/* ── PAGE HERO ── */
.explore-hero {
  position: relative;
  height: 80vh;
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.explore-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../images/hero-bg.jpg') center/cover no-repeat;
}
.explore-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(6,30,34,.82) 0%, rgba(15,92,99,.60) 60%, rgba(6,30,34,.50) 100%);
}
.explore-hero__body {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 5rem 1rem 2rem;
}
.explore-hero__eyebrow {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
  display: block;
  margin-bottom: 1rem;
}
.explore-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  color: #fff !important;
  letter-spacing: .06em;
  line-height: 1.1;
  margin-bottom: .8rem;
}
.explore-hero__sub {
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  letter-spacing: .04em;
  margin: 0;
}
/* Big ghost text behind hero */
.explore-hero__ghost {
  position: absolute;
  bottom: -1.5vw;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,170,106,.22);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: .08em;
}

/* ── INTRO STRIP ── */
.explore-intro {
  background: #fff;
  padding: 4.5rem 0 3.5rem;
}
.explore-intro__label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: .9rem;
}
.explore-intro__heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 0;
  letter-spacing: .04em;
}
.explore-intro__text {
  font-size: .93rem;
  line-height: 1.85;
  color: #666;
}
.explore-intro__divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: 1.8rem 0;
}

/* ── FILTER TABS ── */
.xp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 3rem;
}
.xp-filter__btn {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: .55rem 1.3rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all .28s ease;
}
.xp-filter__btn:hover,
.xp-filter__btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── ATTRACTION CARDS (main grid) ── */
.xp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.xp-card {
  background: #fff;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .38s ease, box-shadow .38s ease, border-color .38s ease;
  display: flex;
  flex-direction: column;
}
.xp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 55px -20px rgba(6,46,50,.18);
  border-color: var(--line);
}
.xp-card__img-wrap {
  position: relative;
  overflow: hidden;
  height: 240px;
  flex-shrink: 0;
}
.xp-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.xp-card:hover .xp-card__img-wrap img {
  transform: scale(1.07);
}
/* Category badge */
.xp-card__cat {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: 'Cinzel', serif;
  font-size: .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--gold);
  color: #fff;
  padding: .35rem .85rem;
  z-index: 2;
}
/* Gradient overlay on image */
.xp-card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,46,50,.55) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 1;
}
.xp-card:hover .xp-card__img-wrap::after { opacity: 1; }

.xp-card__body {
  padding: 1.6rem 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.xp-card__title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .7rem;
  letter-spacing: .03em;
  line-height: 1.25;
}
.xp-card__desc {
  font-size: .85rem !important;
  line-height: 1.75 !important;
  color: var(--muted);
  margin-bottom: 1.4rem;
  flex: 1;
}
/* Reuse existing .btn-link-arrow from main_styles */

/* ── FEATURED CARD (spans 2 cols) ── */
.xp-card--featured {
  grid-column: span 2;
  flex-direction: row;
}
.xp-card--featured .xp-card__img-wrap {
  height: auto;
  width: 55%;
  flex-shrink: 0;
}
.xp-card--featured .xp-card__body {
  justify-content: center;
  padding: 2.5rem 2.8rem;
}
.xp-card--featured .xp-card__title {
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.xp-card--featured .xp-card__desc {
  font-size: .9rem !important;
  margin-bottom: 1.8rem;
}

/* ── MAP CTA STRIP ── */
.xp-map-strip {
  background: var(--ink);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.xp-map-strip::before {
  content: "PATTAYA";
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cinzel', serif;
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.06);
  pointer-events: none;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}
.xp-map-strip h2 {
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  margin-bottom: 1rem;
}
.xp-map-strip h2 em {
  font-style: italic;
  color: var(--gold-light) !important;
}
.xp-map-strip p {
  color: rgba(255,255,255,.75) !important;
  font-size: .9rem !important;
  max-width: 520px;
  margin-bottom: 2rem;
}
.xp-map-strip .xp-map-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}
.xp-map-strip .xp-map-icon-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  letter-spacing: .05em;
}
.xp-map-strip .xp-map-icon-item i {
  color: var(--gold-light);
  font-size: 1rem;
}

/* ── DISTANCE CHIPS ── */
.xp-distances {
  background: var(--cream);
  padding: 4rem 0;
}
.xp-dist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.xp-dist-item {
  background: #fff;
  padding: 1.8rem 1.4rem;
  text-align: center;
  transition: background .3s, transform .3s;
}
.xp-dist-item:hover {
  background: var(--cream);
  transform: translateY(-3px);
}
.xp-dist-item i {
  font-size: 1.6rem;
  color: var(--gold);
  display: block;
  margin-bottom: .8rem;
}
.xp-dist-item__name {
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: .3rem;
  letter-spacing: .04em;
}
.xp-dist-item__km {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .1em;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .xp-grid { grid-template-columns: repeat(2, 1fr); }
  .xp-card--featured {
    grid-column: span 2;
    flex-direction: column;
  }
  .xp-card--featured .xp-card__img-wrap {
    width: 100%;
    height: 300px;
  }
  .xp-dist-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-intro { padding: 3.5rem 0 2.5rem; }
}

@media (max-width: 767px) {
  .explore-hero { height: 50vw; min-height: 500px; }
  .explore-hero__ghost { display: none; }
  .xp-grid { grid-template-columns: 1fr; }
  .xp-card--featured {
    grid-column: span 1;
    flex-direction: column;
  }
  .xp-card--featured .xp-card__img-wrap { width: 100%; height: 220px; }
  .xp-card--featured .xp-card__body { padding: 1.4rem 1.5rem 1.8rem; }
  .xp-card--featured .xp-card__title { font-size: 1.1rem; }
  .xp-dist-grid { grid-template-columns: repeat(2, 1fr); }
  .xp-filter { gap: .4rem; }
  .xp-filter__btn { font-size: .55rem; padding: .45rem 1rem; }
  .xp-map-strip { padding: 3.5rem 0; }
  .xp-map-strip::before { display: none; }
}

@media (max-width: 575px) {
  .xp-card__img-wrap { height: 200px; }
  .xp-card__body { padding: 1.2rem 1.3rem 1.5rem; }
  .xp-dist-grid { grid-template-columns: 1fr 1fr; }
  .xp-dist-item { padding: 1.2rem 1rem; }
  .explore-intro__heading { font-size: clamp(1.3rem, 5vw, 1.6rem); }
}



/* ============================================================
   explore_details.css — หน้า Explore Detail Page
   ใช้ร่วมกับ main_styles.css + explore.css
   class prefix: xpd-  (explore detail)
   ============================================================ */

/* ── DETAIL HERO — ซ้อนรูปเต็มหน้าจอ ── */
.xpd-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.xpd-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}
.xpd-hero:hover .xpd-hero__bg {
  transform: scale(1.04);
}
.xpd-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6,30,34,.18)  0%,
    rgba(6,30,34,.35) 40%,
    rgba(6,30,34,.82) 100%
  );
  z-index: 1;
}
.xpd-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 3.5rem;
  color: #fff;
}
.xpd-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.xpd-hero__cat::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gold);
}
.xpd-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff !important;
  letter-spacing: .05em;
  line-height: 1.08;
  margin-bottom: 1.2rem;
  max-width: 860px;
}
.xpd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
}
.xpd-hero__meta-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: rgba(255,255,255,.82);
  letter-spacing: .04em;
}
.xpd-hero__meta-item i {
  color: var(--gold-light);
  font-size: .9rem;
}

/* ── BREADCRUMB ── */
.xpd-breadcrumb {
  background: var(--ink-soft);
  padding: .75rem 0;
}
.xpd-breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.xpd-breadcrumb ol li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.xpd-breadcrumb ol li a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .22s;
}
.xpd-breadcrumb ol li a:hover { color: var(--gold-light); }
.xpd-breadcrumb ol li.active { color: var(--gold-light); }
.xpd-breadcrumb ol li + li::before {
  content: "›";
  color: rgba(255,255,255,.3);
  font-size: .7rem;
}

/* ── MAIN LAYOUT ── */
.xpd-layout {
  background: #fff;
  padding: 4rem 0 5rem;
}

/* ── CONTENT COLUMN ── */
.xpd-content {}
.xpd-section-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: .8rem;
}
.xpd-content h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
  line-height: 1.18;
  margin-bottom: 1.4rem;
}
.xpd-content p {
  font-size: .93rem !important;
  line-height: 1.9 !important;
  color: #555;
  margin-bottom: 1.2rem;
}
.xpd-divider {
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 2rem 0;
}

/* Highlight pull-quote */
.xpd-pullquote {
  border-left: 3px solid var(--gold);
  padding: 1.2rem 1.6rem;
  margin: 2rem 0;
  background: var(--cream);
}
.xpd-pullquote p {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: 1rem !important;
  color: var(--ink) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Highlight info list */
.xpd-infolist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.xpd-infolist li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-size: .88rem;
  color: #555;
  line-height: 1.6;
  padding: .7rem 1rem;
  background: var(--cream);
  border-left: 2px solid var(--gold);
}
.xpd-infolist li i {
  color: var(--gold-dark);
  font-size: .95rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Photo gallery strip (below content) */
.xpd-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 2.5rem;
}
.xpd-photo-strip__item {
  position: relative;
  overflow: hidden;
  height: 200px;
  cursor: pointer;
}
.xpd-photo-strip__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}
.xpd-photo-strip__item:hover img { transform: scale(1.08); }
.xpd-photo-strip__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6,46,50,.3);
  opacity: 0;
  transition: opacity .35s;
}
.xpd-photo-strip__item:hover::after { opacity: 1; }
.xpd-photo-strip__item--wide {
  grid-column: span 2;
}

/* ── SIDEBAR ── */
.xpd-sidebar {
  position: sticky;
  top: 90px;
}

/* Info card */
.xpd-info-card {
  background: var(--cream);
  padding: 0;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.xpd-info-card__head {
  background: var(--ink);
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.xpd-info-card__head i {
  color: var(--gold-light);
  font-size: 1rem;
}
.xpd-info-card__head span {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}
.xpd-info-card__body {
  padding: 1.4rem 1.5rem;
}
.xpd-info-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(187,138,60,.15);
  font-size: .82rem;
  color: #555;
  line-height: 1.55;
}
.xpd-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.xpd-info-row:first-child { padding-top: 0; }
.xpd-info-row i {
  color: var(--gold);
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: .15rem;
  width: 16px;
  text-align: center;
}
.xpd-info-row strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink);
  margin-bottom: .15rem;
}

/* Book now sidebar card */
.xpd-book-card {
  background: var(--ink);
  padding: 2rem 1.6rem;
  text-align: center;
  margin-bottom: 1.6rem;
}
.xpd-book-card h4 {
  font-family: 'Cinzel', serif;
  font-size: .95rem !important;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: .06em;
  margin-bottom: .6rem;
}
.xpd-book-card p {
  font-size: .78rem !important;
  color: rgba(255,255,255,.7) !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem;
}
.xpd-book-card .btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-bottom: .75rem;
}
.xpd-book-card .xpd-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: rgba(255,255,255,.65);
  font-size: .75rem;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .25s;
}
.xpd-book-card .xpd-tel:hover { color: var(--gold-light); }
.xpd-book-card .xpd-tel i { color: var(--gold); }

/* Distance card */
.xpd-dist-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.xpd-dist-card__head {
  background: var(--gold-dark);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.xpd-dist-card__head i { color: rgba(255,255,255,.8); font-size: .95rem; }
.xpd-dist-card__head span {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}
.xpd-dist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.5rem;
  border-bottom: 1px solid var(--cream);
  font-size: .8rem;
}
.xpd-dist-row:last-child { border-bottom: none; }
.xpd-dist-row span:first-child { color: #555; }
.xpd-dist-row span:last-child {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  color: var(--gold-dark);
  font-weight: 600;
  letter-spacing: .06em;
}

/* ── "YOU MIGHT ALSO LIKE" ── */
.xpd-related {
  background: var(--cream-soft);
  padding: 4.5rem 0;
}
.xpd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 2.5rem;
}

/* reuse .xp-card for related cards */

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .xpd-hero { height: 58vw; min-height: 360px; }
  .xpd-hero__title { font-size: clamp(1.8rem, 5vw, 2.8rem) !important; }
  .xpd-sidebar { position: static; }
  .xpd-photo-strip { grid-template-columns: 1fr 1fr; }
  .xpd-photo-strip__item--wide { grid-column: span 2; }
  .xpd-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .xpd-hero { height: 60vw; min-height: 280px; }
  .xpd-hero__body { padding-bottom: 2rem; }
  .xpd-hero__title { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
  .xpd-hero__meta { gap: .9rem; }
  .xpd-layout { padding: 2.5rem 0 3.5rem; }
  .xpd-photo-strip { grid-template-columns: 1fr 1fr; }
  .xpd-photo-strip__item { height: 140px; }
  .xpd-photo-strip__item--wide { grid-column: span 2; height: 200px; }
  .xpd-related-grid { grid-template-columns: 1fr; }
  .xpd-pullquote { padding: 1rem 1.2rem; }
}

@media (max-width: 575px) {
  .xpd-hero { min-height: 500px; }
  .xpd-hero__meta-item { font-size: .7rem; }
  .xpd-photo-strip { grid-template-columns: 1fr; gap: 4px; }
  .xpd-photo-strip__item,
  .xpd-photo-strip__item--wide { grid-column: span 1; height: 180px; }
  .xpd-related-grid { grid-template-columns: 1fr; }
}




/* ============================================================
   enjoy.css — หน้า Dine, Relax & Rejuvenate
   ใช้ร่วมกับ main_styles.css
   class prefix: enj-
   ============================================================ */

/* ── HERO ── */
.enj-hero {
  position: relative;
  height: 62vh;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.enj-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../images/hotel-exterior-pool-overview-portrait.jpg') center/cover no-repeat;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.enj-hero:hover .enj-hero__bg { transform: scale(1); }
.enj-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    175deg,
    rgba(6,30,34,.75) 0%,
    rgba(15,92,99,.55) 55%,
    rgba(6,30,34,.45) 100%
  );
}
.enj-hero__body {
  position: relative;
  z-index: 2;
  padding: 5rem 1rem 2rem;
  color: #fff;
}
.enj-hero__label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
  display: block;
  margin-bottom: 1.1rem;
}
.enj-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff !important;
  letter-spacing: .05em;
  line-height: 1.1;
  margin-bottom: .9rem;
}
.enj-hero__sub {
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  letter-spacing: .06em;
  margin: 0;
}
.enj-hero__ghost {
  position: absolute;
  bottom: -1.8vw;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,170,106,.18);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: .08em;
}

/* ── INTRO NUMBERS BAR ── */
.enj-stats {
  background: var(--ink);
  padding: 0;
}
.enj-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.enj-stat {
  padding: 1.8rem 1.4rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .3s;
}
.enj-stat:last-child { border-right: none; }
.enj-stat:hover { background: rgba(255,255,255,.04); }
.enj-stat__num {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--gold-light);
  display: block;
  line-height: 1;
  margin-bottom: .4rem;
}
.enj-stat__label {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-family: 'Cinzel', serif;
}

/* ── SECTION COMMON ── */
.enj-section {
  padding: 5.5rem 0;
}
.enj-section--cream { background: var(--cream); }
.enj-section--white { background: #fff; }
.enj-section--teal  { background: var(--ink); }

/* ── SPLIT BLOCK (image + text) ── */
.enj-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 560px;
}
.enj-split--reverse { direction: rtl; }
.enj-split--reverse > * { direction: ltr; }

.enj-split__img {
  position: relative;
  overflow: hidden;
}
.enj-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.enj-split__img:hover img { transform: scale(1.05); }

/* floating badge on image */
.enj-split__badge {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: var(--gold);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .7rem 1.2rem;
  z-index: 2;
}
.enj-split--reverse .enj-split__badge {
  right: auto;
  left: 2rem;
}

.enj-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem;
  background: #fff;
}
.enj-split--cream .enj-split__body { background: var(--cream); }

.enj-split__label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  display: block;
  margin-bottom: .9rem;
}
.enj-split__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.enj-split__divider {
  width: 44px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 1.4rem;
}
.enj-split__text {
  font-size: .9rem !important;
  line-height: 1.88 !important;
  color: #666;
  margin-bottom: 1.2rem;
}
.enj-split__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.enj-split__list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .84rem;
  color: #555;
}
.enj-split__list li i {
  color: var(--gold);
  font-size: .85rem;
  flex-shrink: 0;
}

/* ── AMENITIES GRID ── */
.enj-amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 3.5rem;
}
.enj-amenity {
  background: #fff;
  padding: 2.2rem 1.8rem;
  text-align: center;
  transition: background .3s, transform .3s;
  position: relative;
}
.enj-amenity::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .4s ease;
}
.enj-amenity:hover { background: var(--cream); transform: translateY(-4px); }
.enj-amenity:hover::before { width: 100%; left: 0; transform: none; }
.enj-amenity i {
  font-size: 1.8rem;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}
.enj-amenity__name {
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: .3rem;
  letter-spacing: .05em;
}
.enj-amenity__desc {
  font-size: .76rem !important;
  color: var(--muted);
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── FULL-WIDTH PHOTO STRIP ── */
.enj-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 380px;
}
.enj-strip__item {
  position: relative;
  overflow: hidden;
}
.enj-strip__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
  filter: brightness(.88);
}
.enj-strip__item:hover img {
  transform: scale(1.1);
  filter: brightness(1);
}
.enj-strip__item--wide { grid-column: span 2; }

/* caption on hover */
.enj-strip__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.4rem 1rem;
  background: linear-gradient(180deg, transparent 50%, rgba(6,30,34,.7) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 2;
  text-align: center;
}
.enj-strip__item:hover .enj-strip__caption { opacity: 1; }
.enj-strip__caption span {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

/* ── DARK CTA STRIP ── */
.enj-cta {
  background: var(--ink);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.enj-cta::before {
  content: "ENJOY";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-family: 'Cinzel', serif;
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: .1em;
  line-height: 1;
}
.enj-cta h2 {
  color: #fff !important;
  margin-bottom: 1rem;
}
.enj-cta h2 em {
  font-style: italic;
  color: var(--gold-light) !important;
}
.enj-cta p {
  color: rgba(255,255,255,.72) !important;
  font-size: .9rem !important;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.enj-cta__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* ── PHOTO STRIP ── */
.enj-strip {
  display: flex;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.enj-strip__item {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.enj-strip__item--wide {
  flex: 2; /* รูปแรกกว้างกว่า */
}

.enj-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.enj-strip__item:hover img {
  transform: scale(1.05);
}

.enj-strip__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
}

.enj-strip__caption span {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
  .enj-strip {
    flex-direction: column;
    height: auto;
  }
  .enj-strip__item,
  .enj-strip__item--wide {
    height: 220px;
    flex: none;
  }
}
/* ── RESPONSIVE ── */
@media (max-width: 1199px) {
  .enj-split__body { padding: 3.5rem 3.5rem; }
}
@media (max-width: 991px) {
  .enj-split { grid-template-columns: 1fr; min-height: auto; }
  .enj-split--reverse { direction: ltr; }
  .enj-split__img { height: 340px; }
  .enj-split__body { padding: 3rem 2.5rem; }
  .enj-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .enj-stat { border-bottom: 1px solid rgba(255,255,255,.08); }
  .enj-stat:nth-child(2) { border-right: none; }
  .enj-amenities { grid-template-columns: repeat(2, 1fr); }
  .enj-strip { grid-template-columns: repeat(3, 1fr); height: 280px; }
  .enj-strip__item--wide { grid-column: span 1; }
}
@media (max-width: 767px) {
  .enj-hero { height: 55vw; min-height: 500px; }
  .enj-hero__ghost { display: none; }
  .enj-section { padding: 3.5rem 0; }
  .enj-split__img { height: 260px; }
  .enj-split__body { padding: 2.2rem 1.4rem; }
  .enj-split__title { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .enj-amenities { grid-template-columns: repeat(2, 1fr); }
  .enj-strip { grid-template-columns: 1fr 1fr; height: 220px; }
  .enj-strip__item--wide { grid-column: span 2; }
  .enj-cta { padding: 3.5rem 0; }
}
@media (max-width: 575px) {
  .enj-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .enj-amenities { grid-template-columns: 1fr 1fr; }
  .enj-strip { grid-template-columns: 1fr 1fr; height: 180px; }
  .enj-strip__item--wide { grid-column: span 2; height: 200px; }
}



/* ═══════════════════════════════════════════════════════════
   OFFERS PAGE  —  css/offers.css
   Prefix: off-   (no conflicts with global or other pages)
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@300;400;600;700&display=swap');

/* ── Tokens ── */
:root {
  --off-teal:    #1a4d4a;
  --off-teal-lt: #2a6b66;
  --off-gold:    #b8965a;
  --off-gold-lt: #d4af7a;
  --off-cream:   #f8f5f0;
  --off-ink:     #1c1c1c;
  --off-muted:   #6b6b6b;
  --off-line:    rgba(184,150,90,.25);
  --off-radius:  4px;
  --off-ff-disp: 'Cinzel', serif;
  --off-ff-body: 'Cinzel', serif;
  --off-trans:   .35s ease;
}

/* ════════════════════════════
   HERO
════════════════════════════ */
.off-hero {
  position: relative;
  min-height: 480px;
  height: auto;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--off-teal);
}
.off-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../images/hero-bg.jpg') center/cover no-repeat;
  opacity: .35;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.off-hero:hover .off-hero__bg { transform: scale(1); }

.off-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 7vw 4rem;
}
.off-hero__label {
  display: inline-block;
  font-family: var(--off-ff-body);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off-gold-lt);
  margin-bottom: .75rem;
}
.off-hero__title {
  font-family: var(--off-ff-disp);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 .6rem;
}
.off-hero__title em { font-style: italic; color: var(--off-gold-lt); }
.off-hero__sub {
  font-family: var(--off-ff-body);
  font-size: 1.05rem;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.off-hero__ghost {
  position: absolute;
  right: 5vw;
  bottom: -1.5rem;
  font-family: var(--off-ff-disp);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 700;
  color: rgba(255,255,255,.04);
  letter-spacing: .08em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ════════════════════════════
   INTRO BAND
════════════════════════════ */
.off-intro {
  background: var(--off-teal);
  padding: 2rem 7vw;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.off-intro__text {
  flex: 1;
  min-width: 260px;
  font-family: var(--off-ff-body);
  font-size: .92rem;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  margin: 0;
}
.off-intro__text strong { color: var(--off-gold-lt); font-weight: 600; }
.off-intro__pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.4rem;
  border: 1px solid var(--off-gold);
  border-radius: 40px;
  font-family: var(--off-ff-body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--off-gold-lt);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--off-trans), color var(--off-trans);
}
.off-intro__pill:hover {
  background: var(--off-gold);
  color: var(--off-teal);
}

/* ════════════════════════════
   FILTER TABS
════════════════════════════ */
.off-filters {
  padding: 2.5rem 7vw 0;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--off-line);
  background: #fff;
}
.off-filter-btn {
  padding: .55rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 40px;
  background: transparent;
  font-family: var(--off-ff-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--off-muted);
  cursor: pointer;
  transition: all var(--off-trans);
  margin-bottom: -.5px;
}
.off-filter-btn:hover,
.off-filter-btn.active {
  background: var(--off-teal);
  color: #fff;
  border-color: var(--off-teal);
}

/* ════════════════════════════
   OFFERS SECTION & GRID
════════════════════════════ */
.off-section {
  background: #fff;
  padding: 3.5rem 7vw 5rem;
}
.off-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.off-card--featured {
  grid-column: span 2;
}

/* ════════════════════════════
   CARD
════════════════════════════ */
.off-card {
  border: 1px solid var(--off-line);
  border-radius: var(--off-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--off-trans), transform var(--off-trans);
  background: #fff;
}
.off-card:hover {
  box-shadow: 0 12px 40px rgba(26,77,74,.12);
  transform: translateY(-4px);
}

.off-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--off-teal);
}
.off-card--featured .off-card__img-wrap {
  aspect-ratio: 21/9;
}
.off-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.off-card:hover .off-card__img-wrap img { transform: scale(1.05); }

.off-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .3rem .85rem;
  background: var(--off-gold);
  color: #fff;
  font-family: var(--off-ff-body);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 40px;
  font-weight: 600;
}
.off-card__save {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .3rem .85rem;
  background: var(--off-teal);
  color: #fff;
  font-family: var(--off-ff-body);
  font-size: .68rem;
  letter-spacing: .1em;
  border-radius: 40px;
  font-weight: 600;
}

.off-card__body {
  padding: 1.6rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.off-card__eyebrow {
  font-family: var(--off-ff-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--off-gold);
  margin-bottom: .5rem;
}
.off-card__title {
  font-family: var(--off-ff-disp);
  font-size: 1.45rem !important;
  font-weight: 600;
  color: var(--off-ink);
  line-height: 1.25;
  margin: 0 0 .85rem;
}
.off-card--featured .off-card__title { font-size: 1.9rem; }

.off-card__desc {
  font-family: var(--off-ff-body);
  font-size: .9rem;
  color: var(--off-muted);
  line-height: 1.7;
  flex: 1;
  margin: 0 0 1.5rem;
}

.off-card__meta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--off-line);
}
.off-card__meta-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--off-ff-body);
  font-size: .78rem;
  color: var(--off-muted);
}
.off-card__meta-item i { color: var(--off-gold); font-size: .85rem; }

.off-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.5rem;
  background: var(--off-teal);
  color: #fff;
  font-family: var(--off-ff-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--off-radius);
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--off-trans);
}
.off-card__cta:hover { background: var(--off-teal-lt); color: #fff; }
.off-card__cta i { font-size: .75rem; }

/* ════════════════════════════
   HIGHLIGHT STRIP — Pattaya Pass
════════════════════════════ */
.off-highlight {
  margin: 0 0 2rem;
  padding: 2.8rem 2.4rem;
  background: var(--off-teal);
  border-radius: var(--off-radius);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.off-highlight__eyebrow {
  font-family: var(--off-ff-body);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--off-gold-lt);
  margin-bottom: .5rem;
}
.off-highlight__title {
  font-family: var(--off-ff-disp);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #fff;
  font-weight: 300;
  margin: 0 0 .6rem;
}
.off-highlight__title em { font-style: italic; color: var(--off-gold-lt); }
.off-highlight__desc {
  font-family: var(--off-ff-body);
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}
.off-highlight__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-start;
  flex-shrink: 0;
}
.off-highlight__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.8rem;
  border-radius: var(--off-radius);
  font-family: var(--off-ff-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--off-trans);
}
.off-highlight__btn--gold { background: var(--off-gold); color: #fff; }
.off-highlight__btn--gold:hover { background: var(--off-gold-lt); color: #fff; }
.off-highlight__btn--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}
.off-highlight__btn--outline:hover { border-color: #fff; color: #fff; }

/* ════════════════════════════
   FAQ
════════════════════════════ */
.off-faq {
  background: var(--off-cream);
  padding: 5rem 7vw;
}
.off-faq__head {
  text-align: center;
  margin-bottom: 3rem;
}
.off-faq__eyebrow {
  display: inline-block;
  font-family: var(--off-ff-body);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off-gold);
  margin-bottom: .6rem;
}
.off-faq__title {
  font-family: var(--off-ff-disp);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--off-ink);
  margin: 0;
}
.off-faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.off-faq__item {
  border: 1px solid var(--off-line);
  border-radius: var(--off-radius);
  background: #fff;
  overflow: hidden;
}
.off-faq__q {
  width: 100%;
  background: none;
  border: none;
  padding: 1.2rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--off-ff-body);
  font-size: .95rem;
  color: var(--off-ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--off-trans);
}
.off-faq__q:hover { color: var(--off-teal); }
.off-faq__q i {
  color: var(--off-gold);
  font-size: .85rem;
  flex-shrink: 0;
  transition: transform var(--off-trans);
}
.off-faq__item.open .off-faq__q { color: var(--off-teal); }
.off-faq__item.open .off-faq__q i { transform: rotate(45deg); }
.off-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 1.6rem;
}
.off-faq__a p {
  font-family: var(--off-ff-body);
  font-size: .9rem;
  color: var(--off-muted);
  line-height: 1.75;
  margin: 0 0 1.2rem;
}
.off-faq__item.open .off-faq__a {
  max-height: 400px;
  padding: .2rem 1.6rem;
}

/* ════════════════════════════
   CTA BAND
════════════════════════════ */
.off-cta {
  background: var(--off-teal);
  padding: 5rem 7vw;
  text-align: center;
}
.off-cta__eyebrow {
  display: inline-block;
  font-family: var(--off-ff-body);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off-gold-lt);
  margin-bottom: .75rem;
}
.off-cta__title {
  font-family: var(--off-ff-disp);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 300;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.off-cta__title em { font-style: italic; color: var(--off-gold-lt); }
.off-cta__sub {
  font-family: var(--off-ff-body);
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  max-width: 540px;
  margin: 0 auto 2.2rem;
  line-height: 1.65;
}
.off-cta__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.off-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 2rem;
  border-radius: var(--off-radius);
  font-family: var(--off-ff-body);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--off-trans);
}
.off-cta__btn--gold { background: var(--off-gold); color: #fff; }
.off-cta__btn--gold:hover { background: var(--off-gold-lt); color: #fff; }
.off-cta__btn--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.9);
}
.off-cta__btn--outline:hover { border-color: #fff; color: #fff; }

/* ════════════════════════════
   FILTER UTILITY
════════════════════════════ */
.off-card[data-cat].hidden { display: none; }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (max-width: 900px) {
  .off-card--featured       { grid-column: span 1; }
  .off-highlight            { grid-template-columns: 1fr; }
  .off-highlight__actions   { flex-direction: row; }
}
@media (max-width: 600px) {
  .off-hero    { min-height: 360px; height: auto; }
  .off-section { padding: 2.5rem 5vw 3.5rem; }
  .off-faq     { padding: 3.5rem 5vw; }
  .off-cta     { padding: 3.5rem 5vw; }
  .off-filters { padding: 1.5rem 5vw 0; }
  .off-card__body { padding: 1.2rem 1.4rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   OFFER DETAILS PAGE  —  css/offers-details.css
   Prefix: od-   (no conflicts with global, off-, or other pages)
═══════════════════════════════════════════════════════════ */

/* ── Inherit tokens from offers.css (load offers.css first) ── */
/* Fallbacks in case offers.css not loaded */
:root {
  --od-teal:    var(--off-teal,    #1a4d4a);
  --od-teal-lt: var(--off-teal-lt, #2a6b66);
  --od-gold:    var(--off-gold,    #b8965a);
  --od-gold-lt: var(--off-gold-lt, #d4af7a);
  --od-cream:   var(--off-cream,   #f8f5f0);
  --od-ink:     var(--off-ink,     #1c1c1c);
  --od-muted:   var(--off-muted,   #6b6b6b);
  --od-line:    var(--off-line,    rgba(184,150,90,.25));
  --od-radius:  var(--off-radius,  4px);
  --od-ff:      var(--off-ff-body, 'Cinzel', serif);
  --od-trans:   var(--off-trans,   .35s ease);
}

/* ════════════════════════════
   HERO
════════════════════════════ */
.od-hero {
  position: relative;
  min-height: 520px;
  height: auto;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--od-teal);
}
.od-hero__bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: .4;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.od-hero:hover .od-hero__bg { transform: scale(1); }
.od-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,77,74,.92) 0%, rgba(26,77,74,.3) 60%, transparent 100%);
}
.od-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 4rem;
}
.od-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--od-ff);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.od-hero__breadcrumb a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--od-trans);
}
.od-hero__breadcrumb a:hover { color: var(--od-gold-lt); }
.od-hero__breadcrumb i { font-size: .6rem; }
.od-hero__tag {
  display: inline-block;
  padding: .3rem 1rem;
  border: 1px solid var(--od-gold);
  border-radius: 40px;
  font-family: var(--od-ff);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--od-gold-lt);
  margin-bottom: .85rem;
}
.od-hero__title {
  font-family: var(--od-ff);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 .75rem;
  max-width: 780px;
}
.od-hero__sub {
  font-family: var(--od-ff);
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .08em;
  margin: 0;
}

/* ════════════════════════════
   PRICE BAND
════════════════════════════ */
.od-price-band {
  background: var(--od-gold);
  padding: 1.1rem 0;
}
.od-price-band__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.od-price-band__item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.od-price-band__label {
  font-family: var(--od-ff);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.od-price-band__value {
  font-family: var(--od-ff);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.od-price-band__sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.35);
}
.od-price-band__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.8rem;
  background: var(--od-teal);
  color: #fff;
  font-family: var(--od-ff);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--od-radius);
  text-decoration: none;
  transition: background var(--od-trans);
}
.od-price-band__cta:hover { background: var(--od-teal-lt); color: #fff; }

/* ════════════════════════════
   MAIN LAYOUT
════════════════════════════ */
.od-layout-wrap {
  background: #fff;
  padding: 4rem 0 5rem;
}
.od-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3.5rem;
  align-items: start;
}

/* ── CONTENT (left) ── */
.od-content__intro {
  font-family: var(--od-ff);
  font-size: .88rem;
  color: var(--od-muted);
  line-height: 1.9;
  margin: 0 0 2.5rem;
  letter-spacing: .03em;
}

.od-section-title {
  font-family: var(--od-ff);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--od-teal);
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--od-line);
}

/* Packages list */
.od-packages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.od-package {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius);
  transition: border-color var(--od-trans), box-shadow var(--od-trans);
}
.od-package:hover {
  border-color: var(--od-gold);
  box-shadow: 0 4px 20px rgba(184,150,90,.1);
}
.od-package__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--od-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--od-gold);
  font-size: 1.1rem;
}
.od-package__name {
  font-family: var(--od-ff);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--od-ink);
  margin-bottom: .25rem;
}
.od-package__detail {
  font-family: var(--od-ff);
  font-size: .8rem;
  color: var(--od-muted);
  line-height: 1.6;
  letter-spacing: .02em;
}
.od-package__price {
  margin-left: auto;
  font-family: var(--od-ff);
  font-size: 1rem;
  font-weight: 700;
  color: var(--od-teal);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inclusions */
.od-inclusions {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.od-inclusions li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-family: var(--od-ff);
  font-size: .82rem;
  color: var(--od-muted);
  line-height: 1.6;
  letter-spacing: .02em;
}
.od-inclusions li i {
  color: var(--od-gold);
  font-size: .85rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Quote block */
.od-quote {
  margin: 0 0 2.5rem;
  padding: 1.6rem 2rem;
  border-left: 3px solid var(--od-gold);
  background: var(--od-cream);
  border-radius: 0 var(--od-radius) var(--od-radius) 0;
}
.od-quote p {
  font-family: var(--od-ff);
  font-size: .88rem;
  font-style: italic;
  color: var(--od-teal);
  line-height: 1.8;
  margin: 0;
  letter-spacing: .03em;
}

/* CTA inline */
.od-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem;
  background: var(--od-teal);
  color: #fff;
  font-family: var(--od-ff);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--od-radius);
  text-decoration: none;
  margin-bottom: 3rem;
  transition: background var(--od-trans);
}
.od-inline-cta:hover { background: var(--od-teal-lt); color: #fff; }

/* ── GALLERY ── */
.od-gallery {
  margin-bottom: 3rem;
}
.od-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: .6rem;
}
.od-gallery__item {
  overflow: hidden;
  border-radius: var(--od-radius);
  aspect-ratio: 4/3;
  cursor: pointer;
}
.od-gallery__item--wide {
  grid-column: span 2;
  aspect-ratio: 16/6;
}
.od-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.od-gallery__item:hover img { transform: scale(1.05); }

/* Lightbox */
.od-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.od-lightbox.open {
  opacity: 1;
  pointer-events: all;
}
.od-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--od-radius);
}
.od-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: .7;
  transition: opacity var(--od-trans);
}
.od-lightbox__close:hover { opacity: 1; }

/* ── T&C ── */
.od-tc {
  margin-bottom: 2rem;
}
.od-tc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.od-tc__list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-family: var(--od-ff);
  font-size: .78rem;
  color: var(--od-muted);
  line-height: 1.65;
  letter-spacing: .02em;
}
.od-tc__list li::before {
  content: '—';
  color: var(--od-gold);
  flex-shrink: 0;
  margin-top: .05rem;
}

/* ── SIDEBAR (right) ── */
.od-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Booking form inside sidebar */
.od-form__group {
  margin-bottom: 1rem;
}
.od-form__label {
  display: block;
  font-family: var(--od-ff);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--od-muted);
  margin-bottom: .4rem;
}
.od-form__input {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius);
  font-family: var(--od-ff);
  font-size: .78rem;
  color: var(--od-ink);
  background: #fff;
  outline: none;
  transition: border-color var(--od-trans);
  box-sizing: border-box;
  letter-spacing: .04em;
}
.od-form__input:focus { border-color: var(--od-teal); }
.od-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.od-form__btn {
  width: 100%;
  padding: .85rem;
  background: var(--od-gold);
  color: #fff;
  border: none;
  border-radius: var(--od-radius);
  font-family: var(--od-ff);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--od-trans);
  margin-top: .5rem;
}
.od-form__btn:hover { background: var(--od-teal); }

/* Contact card */
.od-sidebar__contact-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
  font-family: var(--od-ff);
  font-size: .78rem;
  color: var(--od-muted);
  line-height: 1.6;
  letter-spacing: .02em;
}
.od-sidebar__contact-item:last-child { margin-bottom: 0; }
.od-sidebar__contact-item i {
  color: var(--od-gold);
  font-size: .9rem;
  margin-top: .15rem;
  flex-shrink: 0;
}
.od-sidebar__contact-item a {
  color: var(--od-teal);
  text-decoration: none;
}
.od-sidebar__contact-item a:hover { color: var(--od-gold); }

/* Related offers */
.od-related {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.od-related__item {
  display: flex;
  gap: .85rem;
  align-items: center;
  text-decoration: none;
  padding: .6rem;
  border-radius: var(--od-radius);
  transition: background var(--od-trans);
}
.od-related__item:hover { background: var(--od-cream); }
.od-related__img {
  width: 64px;
  height: 48px;
  border-radius: var(--od-radius);
  object-fit: cover;
  flex-shrink: 0;
}
.od-related__name {
  font-family: var(--od-ff);
  font-size: .75rem;
  font-weight: 600;
  color: var(--od-ink);
  line-height: 1.4;
  letter-spacing: .05em;
}
.od-related__tag {
  font-family: var(--od-ff);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--od-gold);
  margin-top: .2rem;
}

/* ════════════════════════════
   BACK LINK DIVIDER
════════════════════════════ */
.od-back-bar {
  background: var(--od-cream);
  padding: 1.2rem 0;
}
.od-back-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.od-back-bar__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--od-ff);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--od-teal);
  text-decoration: none;
  transition: color var(--od-trans);
}
.od-back-bar__link:hover { color: var(--od-gold); }
.od-back-bar__next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--od-ff);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--od-muted);
  text-decoration: none;
  transition: color var(--od-trans);
}
.od-back-bar__next:hover { color: var(--od-gold); }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (max-width: 1024px) {
  .od-layout {
    grid-template-columns: 1fr;
  }
  .od-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .od-hero          { min-height: 500px; height: auto; }
  .od-layout-wrap   { padding: 2.5rem 0 3.5rem; }
  .od-price-band    { padding: 1rem 0; }
  .od-price-band__cta { margin-left: 0; width: 100%; justify-content: center; }
  .od-gallery__grid { grid-template-columns: 1fr; }
  .od-gallery__item--wide { grid-column: span 1; aspect-ratio: 4/3; }
  .od-sidebar       { grid-template-columns: 1fr; }
  .od-form__row     { grid-template-columns: 1fr; }
  .od-back-bar      { padding: 1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ══════════════════════════════════════════
   ENJOY PAGE — page-scoped styles only
   Prefix: ed-  (enjoy-details)
   No duplication of enj-, nav, footer classes
══════════════════════════════════════════ */

/* ── HERO override: cinematic full-height ── */
.enj-hero {
  height: 90vh;
  min-height: 560px;
}
.enj-hero__bg {
  background-image: url('../images/hotel-exterior-pool-overview-portrait.jpg');
}
.enj-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(6,30,34,.65) 0%,
    rgba(15,92,99,.35) 50%,
    rgba(6,30,34,.8) 100%
  );
}
.enj-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.55);
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.enj-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: ed-scroll-pulse 2s ease-in-out infinite;
}
@keyframes ed-scroll-pulse {
  0%, 100% { opacity: .4; transform: scaleY(1); }
  50%       { opacity: 1;  transform: scaleY(1.2); }
}

/* ── INTRODUCTION RIBBON ── */
.ed-intro {
  background: var(--cream);
  padding: 4rem 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.ed-intro__text {
  max-width: 680px;
  margin: 1.6rem auto 0;
  font-size: .95rem !important;
  line-height: 1.9 !important;
  color: #666;
}

/* ── SECTION LABEL pill ── */
.ed-pill {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: .54rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .4rem .95rem;
  margin-bottom: 1.2rem;
}

/* ── DINING — three-card showcase ── */
.ed-dining {
  background: #fff;
  padding: 6rem 0;
}
.ed-dining__header {
  text-align: center;
  margin-bottom: 4rem;
}
.ed-dining__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
}
.ed-dining__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}
.ed-dining__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter: brightness(.75);
}
.ed-dining__card:hover img {
  transform: scale(1.07);
  filter: brightness(.55);
}
.ed-dining__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,30,34,.92) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.8rem;
  transition: background .5s ease;
}
.ed-dining__card:hover .ed-dining__card-overlay {
  background: linear-gradient(to top, rgba(6,30,34,.97) 0%, rgba(6,30,34,.4) 100%);
}
.ed-dining__card-tag {
  font-family: 'Cinzel', serif;
  font-size: .54rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .5rem;
}
.ed-dining__card-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1.2;
  margin-bottom: .7rem;
}
.ed-dining__card-desc {
  font-size: .8rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.72);
  margin: 0 !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease;
  opacity: 0;
}
.ed-dining__card:hover .ed-dining__card-desc {
  max-height: 5rem;
  opacity: 1;
}
.ed-dining__card-divider {
  width: 28px;
  height: 1px;
  background: var(--gold);
  margin-bottom: .85rem;
}
.ed-dining__highlights {
  background: var(--cream);
  padding: 2.5rem 3rem;
  margin-top: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
}
.ed-dining__highlight-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .84rem;
  color: #555;
}
.ed-dining__highlight-item i {
  color: var(--gold);
}
.ed-dining__header-sub {
  max-width: 560px;
  margin: 1.2rem auto 0;
  font-size: .9rem !important;
  color: #666;
  line-height: 1.8 !important;
}
.ed-dining__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ── POOL — full-bleed image + dark panel ── */
.ed-pool {
  position: relative;
  min-height: 700px;
  display: grid;
  grid-template-columns: 1fr 520px;
  align-items: stretch;
}
.ed-pool__visual {
  position: relative;
  overflow: hidden;
}
.ed-pool__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 12s ease;
}
.ed-pool:hover .ed-pool__visual img {
  transform: scale(1.04);
}
.ed-pool__visual-label {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15,92,99,.85);
  padding: .5rem 1rem;
  backdrop-filter: blur(6px);
}
.ed-pool__panel {
  background: var(--ink);
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ed-pool__panel .ed-pill {
  align-self: flex-start;
}
.ed-pool__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 600;
  color: #fff !important;
  letter-spacing: .04em;
  line-height: 1.1;
  margin-bottom: .6rem;
}
.ed-pool__title em {
  font-style: italic;
  color: var(--gold-light) !important;
}
.ed-pool__divider {
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: 1.4rem 0;
}
.ed-pool__text {
  font-size: .9rem !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,.68);
  margin-bottom: 1.2rem !important;
}
.ed-pool__features {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.ed-pool__features li {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ed-pool__features li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ed-pool__features li i {
  color: var(--gold-light);
  font-size: .85rem;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.ed-pool__hours {
  display: flex;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-bottom: 2.5rem;
}
.ed-pool__hour-block {
  text-align: center;
}
.ed-pool__hour-time {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-light);
  display: block;
  line-height: 1;
  margin-bottom: .3rem;
}
.ed-pool__hour-label {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  font-family: 'Cinzel', serif;
}
.ed-pool__hour-sep {
  width: 1px;
  background: rgba(255,255,255,.12);
  align-self: stretch;
}

/* ── AMENITIES — icon cards on cream ── */
.ed-amenities-section {
  background: var(--cream);
  padding: 6rem 0;
}
.ed-amenities-section .text-center {
  margin-bottom: 3.5rem;
}
.ed-amen-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ed-amen-card {
  background: var(--cream);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background .3s ease, transform .3s ease;
}
.ed-amen-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .4s ease;
}
.ed-amen-card:hover {
  background: #fff;
  transform: translateY(-3px);
}
.ed-amen-card:hover::after {
  width: 70%;
}
.ed-amen-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(187,138,60,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  transition: background .3s ease;
}
.ed-amen-card:hover .ed-amen-card__icon {
  background: var(--gold);
}
.ed-amen-card__icon i {
  font-size: 1.2rem;
  color: var(--gold);
  transition: color .3s ease;
}
.ed-amen-card:hover .ed-amen-card__icon i {
  color: #fff;
}
.ed-amen-card__name {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: .5rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ed-amen-card__desc {
  font-size: .74rem !important;
  color: var(--muted);
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ── DAY TIMELINE ── */
.ed-timeline {
  background: #fff;
  padding: 6rem 0;
}
.ed-timeline__header {
  text-align: center;
  margin-bottom: 4rem;
}
.ed-timeline__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.ed-timeline__track::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 1px;
  background: var(--line);
}
.ed-timeline__item {
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
}
.ed-timeline__dot {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
  transition: background .3s, border-color .3s;
}
.ed-timeline__item:hover .ed-timeline__dot {
  background: var(--gold);
}
.ed-timeline__dot i {
  font-size: 1rem;
  color: var(--gold);
  transition: color .3s;
}
.ed-timeline__item:hover .ed-timeline__dot i {
  color: #fff;
}
.ed-timeline__time {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: .15em;
  display: block;
  margin-bottom: .4rem;
}
.ed-timeline__label {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: .5rem;
  letter-spacing: .04em;
}
.ed-timeline__desc {
  font-size: .78rem !important;
  color: var(--muted);
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── CTA — photo backdrop wrapper ── */
.ed-cta-wrap {
  position: relative;
  overflow: hidden;
}
.ed-cta-inner {
  background: transparent;
  position: relative;
  z-index: 1;
}
.ed-cta-eyebrow {
  color: var(--gold-light);
}
.ed-cta-bg {
  position: absolute;
  inset: 0;
  background: url('../images/hotel-exterior-pool-overview-portrait1.jpg') center/cover no-repeat;
  filter: brightness(.22) saturate(1.3);
}

/* Pool CTA button — gold tint on dark bg */
.ed-pool__btn {
  align-self: flex-start;
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .ed-pool { grid-template-columns: 1fr 460px; }
  .ed-pool__panel { padding: 4rem 3rem; }
  .ed-amen-track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .ed-dining__grid { grid-template-columns: 1fr 1fr; }
  .ed-dining__card:nth-child(3) { grid-column: span 2; aspect-ratio: 16/7; }
  .ed-pool { grid-template-columns: 1fr; min-height: auto; }
  .ed-pool__visual { height: 460px; }
  .ed-pool__panel { padding: 3.5rem 2.5rem; }
  .ed-timeline__track { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 0; }
  .ed-timeline__track::before { display: none; }
}
@media (max-width: 767px) {
  .enj-hero { height: 75vh; min-height: 500px; }
  .ed-dining__grid { grid-template-columns: 1fr; }
  .ed-dining__card { aspect-ratio: 4/3; }
  .ed-dining__card:nth-child(3) { grid-column: span 1; aspect-ratio: 4/3; }
  .ed-amen-track { grid-template-columns: repeat(2, 1fr); }
  .ed-pool__panel { padding: 2.5rem 1.5rem; }
  .ed-pool__hours { flex-direction: column; gap: 1rem; }
  .ed-pool__hour-sep { display: none; }
  .ed-timeline__track { grid-template-columns: 1fr; gap: 2rem; }
  .ed-dining { padding: 4rem 0; }
  .ed-dining__highlights { padding: 2rem 1.5rem; }
  .ed-amenities-section { padding: 4rem 0; }
  .ed-timeline { padding: 4rem 0; }
}
@media (max-width: 575px) {
  .ed-amen-track { grid-template-columns: 1fr 1fr; }
  .ed-pool__panel { padding: 2rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ══════════════════════════════════════════
   STAY PAGE — page-scoped styles
   Prefix: st-   (stay)
   No duplication of nav, footer, or main_styles classes
══════════════════════════════════════════ */

/* ── HERO ── */
.st-hero {
  position: relative;
  height: 88vh;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.st-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 12s ease;
}
.st-hero:hover .st-hero__bg {
  transform: scale(1.08);
}
.st-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 30, 34, .92) 0%,
    rgba(15, 92, 99, .3) 55%,
    rgba(6, 30, 34, .4) 100%
  );
}
.st-hero__body {
  position: relative;
  z-index: 2;
  padding: 0 0 5rem 6rem;
}
.st-hero__label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.st-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.6rem, 6vw, 4.5rem) !important;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: .06em;
  line-height: 1 !important;
  margin-bottom: 1.8rem;
}
.st-hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.st-hero__meta span {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.st-hero__meta i {
  color: var(--gold-light);
  font-size: .72rem;
}
.st-hero__meta-sep {
  width: 1px !important;
  height: 14px !important;
  background: rgba(255,255,255,.25) !important;
  padding: 0 !important;
}
.st-hero__scroll {
  position: absolute;
  bottom: 2rem;
  right: 3rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.45);
  font-family: 'Cinzel', serif;
  font-size: .5rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.st-hero__scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.45), transparent);
  animation: st-pulse 2s ease-in-out infinite;
}
@keyframes st-pulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: 1; }
}

/* ── BREADCRUMB ── */
.st-breadcrumb {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: .75rem 0;
}
.st-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.st-breadcrumb__list li {
  font-family: 'Cinzel', serif;
  font-size: .6rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-breadcrumb__list li i {
  font-size: .5rem;
  opacity: .5;
}
.st-breadcrumb__list a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.st-breadcrumb__list a:hover {
  color: var(--gold-dark);
}
.st-breadcrumb__active {
  color: var(--ink) !important;
  font-weight: 600;
}

/* ── ABOUT + FACILITIES ── */
.st-about {
  padding: 6rem 0;
  background: #fff;
}
.st-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.st-about__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 600;
  color: var(--ink) !important;
  line-height: 1.15 !important;
  margin: 1rem 0 0;
}
.st-about__title em {
  font-style: italic;
  color: var(--gold-dark) !important;
}
.st-about__divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 1.4rem 0;
}
.st-about__desc {
  font-size: .9rem !important;
  line-height: 1.85 !important;
  color: #666;
  margin-bottom: 1rem !important;
}
.st-about__specs {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 1.8rem 0 2rem;
}
.st-spec {
  text-align: center;
}
.st-spec__num {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  display: block;
}
.st-spec__unit {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  color: var(--gold);
  letter-spacing: .1em;
  display: inline;
}
.st-spec__label {
  display: block;
  font-size: .6rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
  font-family: 'Cinzel', serif;
}
.st-spec__sep {
  width: 1px;
  height: 40px;
  background: var(--line);
  flex-shrink: 0;
}
.st-about__cta {
  align-self: flex-start;
}

/* Facilities */
.st-facilities {
  background: var(--cream);
  padding: 2.5rem;
}
.st-facilities__head {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.st-facilities__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.st-facility {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .5rem;
  font-size: .78rem !important;
  color: #555;
  border-bottom: 1px solid rgba(187,138,60,.1);
  transition: background .2s, color .2s;
}
.st-facility:hover {
  background: rgba(187,138,60,.06);
  color: var(--ink);
}
.st-facility i {
  color: var(--gold);
  font-size: .85rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.st-facility span {
  font-size: .78rem !important;
  line-height: 1.3 !important;
}

/* ── GALLERY ── */
.st-gallery {
  padding: 6rem 0 0;
  background: var(--cream);
}
.st-gallery__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 3px;
  margin-top: 3rem;
}
.st-gallery__item {
  position: relative;
  overflow: hidden;
}
.st-gallery__item--main {
  grid-row: span 2;
}
.st-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter: brightness(.88);
}
.st-gallery__item:hover img {
  transform: scale(1.06);
  filter: brightness(.7);
}
.st-gallery__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(6,30,34,.7);
  padding: .3rem .7rem;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.st-gallery__item:hover .st-gallery__label {
  opacity: 1;
  transform: translateY(0);
}

/* ── ADDITIONAL INFO — dark panel ── */
.st-info {
  background: var(--ink);
  padding: 6rem 0;
}
.st-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.st-info__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 600;
  color: #fff !important;
  line-height: 1.15 !important;
  margin: 1rem 0 0;
}
.st-info__title em {
  font-style: italic;
  color: var(--gold-light) !important;
}
.st-info__divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 1.4rem 0;
}
.st-info__desc {
  font-size: .88rem !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,.65);
  margin-bottom: 1rem !important;
}
.st-info__icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.st-info-icon {
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.8rem 1rem;
  text-align: center;
  transition: background .25s ease;
}
.st-info-icon:hover {
  background: rgba(187,138,60,.12);
}
.st-info-icon i {
  font-size: 1.3rem;
  color: var(--gold-light);
}
.st-info-icon span {
  font-family: 'Cinzel', serif;
  font-size: .58rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

/* ── OTHER ROOMS ── */
.st-other {
  background: #fff;
  padding: 6rem 0 4rem;
}
.st-other__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.st-room-card {
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.st-room-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
.st-room-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.st-room-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
  filter: brightness(.9);
}
.st-room-card:hover .st-room-card__img img {
  transform: scale(1.05);
}
.st-room-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: 'Cinzel', serif;
  font-size: .52rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gold);
  padding: .28rem .75rem;
  font-weight: 600;
}
.st-room-card__body {
  padding: 1.5rem 1.5rem 1.8rem;
}
.st-room-card__name {
  font-family: 'Cinzel', serif;
  font-size: .95rem !important;
  font-weight: 600;
  color: var(--ink) !important;
  letter-spacing: .06em;
  margin-bottom: .5rem !important;
}
.st-room-card__bed {
  font-size: .78rem !important;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem !important;
  font-family: 'Cinzel', serif;
  letter-spacing: .04em;
}
.st-room-card__bed i { font-size: .7rem; }
.st-room-card__size {
  font-size: .75rem !important;
  color: var(--muted);
  margin-bottom: 1.2rem !important;
}
.st-room-card__link {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .2s, gap .2s;
}
.st-room-card__link:hover {
  color: var(--gold-dark);
  gap: .85rem;
}

/* Dots */
.st-other__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
}
.st-other__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  display: block;
  transition: background .3s, transform .3s;
}
.st-other__dot--active {
  background: var(--gold);
  transform: scale(1.3);
}

/* ── CTA STRIP ── */
.st-cta {
  position: relative;
  overflow: hidden;
  padding: 7rem 0;
  text-align: center;
}
.st-cta__bg {
  position: absolute;
  inset: 0;
  background: url('../images/r55.jpg') center/cover no-repeat;
  filter: brightness(.18) saturate(1.2);
}
.st-cta .container {
  position: relative;
  z-index: 1;
}
.st-cta__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 600;
  color: #fff !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem;
}
.st-cta__title em {
  font-style: italic;
  color: var(--gold-light) !important;
}
.st-cta__sub {
  max-width: 520px;
  margin: 0 auto 2.5rem !important;
  font-size: .88rem !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.8 !important;
}
.st-cta__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .st-about__grid  { gap: 3rem; }
  .st-info__grid   { gap: 3rem; }
}
@media (max-width: 991px) {
  .st-about__grid  { grid-template-columns: 1fr; gap: 3rem; }
  .st-info__grid   { grid-template-columns: 1fr; gap: 3rem; }
  .st-other__grid  { grid-template-columns: repeat(2, 1fr); }
  .st-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 260px 260px 260px;
  }
  .st-gallery__item--main { grid-column: span 2; grid-row: span 1; }
  .st-hero__body { padding: 0 0 4rem 2.5rem; }
}
@media (max-width: 767px) {
  .st-hero { height: 70vh; min-height: 460px; }
  .st-hero__body { padding: 0 1.5rem 3rem; }
  .st-hero__meta { gap: .6rem; }
  .st-about { padding: 4rem 0; }
  .st-info  { padding: 4rem 0; }
  .st-other { padding: 4rem 0 3rem; }
  .st-gallery { padding: 4rem 0 0; }
  .st-cta   { padding: 5rem 0; }
  .st-facilities { padding: 1.8rem; }
  .st-facilities__grid { grid-template-columns: 1fr; }
  .st-gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .st-gallery__item { aspect-ratio: 4/3; }
  .st-gallery__item--main { grid-column: span 2; }
  .st-other__grid { grid-template-columns: 1fr; }
  .st-info__icons { grid-template-columns: repeat(3, 1fr); }
  .st-about__specs { gap: 1rem; }
}
@media (max-width: 480px) {
  .st-hero__title { font-size: 2.2rem !important; }
  .st-info__icons { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}




/* ══════════════════════════════════════════
   MEET & CELEBRATE — page-scoped styles
   Prefix: mc-   (no conflict with nav/footer/main_styles)
   All colors from brand CSS vars
══════════════════════════════════════════ */

/* ── SUB-NAV sticky — อยู่หลัง section#overview ติดบนเมื่อ scroll ── */
.mc-subnav {
  position: relative;          /* sits in normal flow, just below the hero */
  z-index: 1018;
  background: var(--ink);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 4px 24px rgba(15,92,99,.25);
}
/* Once scrolled to, pin to the very top and COVER the main navbar */
.mc-subnav--stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;               /* above .navbar-custom (1030) → replaces it */
  animation: mcSubnavDrop .35s ease;
}
@keyframes mcSubnavDrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
/* Reserves the subnav's height while it's fixed, so content doesn't jump */
.mc-subnav__spacer { height: 0; }
.mc-subnav__inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.mc-subnav__inner::-webkit-scrollbar { display: none; }
.mc-subnav__link {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  padding: .95rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.mc-subnav__link:hover,
.mc-subnav__link--active { 
color: #bb8a3c;
    font-weight: 700;
     }
.mc-subnav__cta {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 1.4rem;
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s;
}
.mc-subnav__cta:hover { background: var(--gold-dark); color: #fff; }

/* ── Sub-nav: mobile usability ── */
@media (max-width: 767px) {
  .mc-subnav__inner {
    padding: 0 .9rem;
    -webkit-overflow-scrolling: touch;     /* momentum scrolling on iOS */
    scroll-snap-type: x proximity;
  }
  .mc-subnav__link {
    font-size: .64rem;                     /* slightly larger, easier to read */
    letter-spacing: .14em;
    padding: 0.7rem 0.5rem;                  /* taller, comfier tap target */
    scroll-snap-align: center;
  }
  /* Edge fades hint that the bar scrolls horizontally */
  .mc-subnav::before,
  .mc-subnav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .mc-subnav::before { left: 0;  background: linear-gradient(90deg,  var(--ink), rgba(15,92,99,0)); }
  .mc-subnav::after  { right: 0; background: linear-gradient(270deg, var(--ink), rgba(15,92,99,0)); }
  .mc-subnav.is-start::before { opacity: 1; }
  .mc-subnav.is-end::after    { opacity: 1; }

  /* On mobile, sit just UNDER the navbar instead of covering it,
     so the logo + hamburger stay reachable. */
  .mc-subnav--stuck { top: var(--mc-nav-h, 64px); }
}

/* ── SHARED ATOMS ── */
.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: .75rem 1.7rem;
  text-decoration: none;
  transition: background .25s, color .25s;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
}
.mc-btn:hover { background: var(--ink); color: #fff; }
.mc-btn--gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.mc-btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
.mc-btn--outline-light { border-color: rgba(255,255,255,.55); color: rgba(255,255,255,.9); }
.mc-btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.mc-btn--full { width: 100%; justify-content: center; }

.mc-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .2s, gap .2s;
}
.mc-link:hover { color: var(--gold-dark); gap: .7rem; }

.mc-divider { width: 40px; height: 2px; background: var(--gold); margin: 1.4rem 0; }
.mc-divider--light { background: rgba(255,255,255,.45); }

/* ── PAGE HERO (section banners) ── */
.mc-page-hero {
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mc-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,66,72,.62);
}
.mc-page-hero__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 2rem;
}
.mc-page-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}
.mc-page-hero__sub {
  font-size: .88rem !important;
  color: rgba(255,255,255,.78);
  margin: 0 !important;
}

/* ══════════════════════════════════════════
   OVERVIEW / HOME
══════════════════════════════════════════ */

/* Main Hero — full-bleed image with overlaid copy */
.mc-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-soft);
}
.mc-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;                      /* full-bleed image */
  transform: scale(1.03);
  transition: transform 12s ease;
  pointer-events: none;
}
.mc-hero:hover .mc-hero__bg { transform: scale(1.08); }
/* Readability gradient — heavier on the left where the copy sits */
.mc-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,38,42,.92) 0%, rgba(7,38,42,.78) 32%, rgba(7,38,42,.42) 64%, rgba(7,38,42,.12) 100%),
    linear-gradient(0deg, rgba(7,38,42,.55) 0%, rgba(7,38,42,0) 42%);
}
.mc-hero__body {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 8rem 3rem 5rem 5rem;   /* extra top padding clears the overlaying navbar */
}
.mc-hero__kicker {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.mc-hero__title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #fff !important;
  line-height: 1.08 !important;
  margin-bottom: 1.6rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.mc-hero__title em { font-style: italic; color: var(--gold-light) !important; }
.mc-hero__desc { font-size: .9rem !important; color: rgba(255,255,255,.78); line-height: 1.85 !important; margin-bottom: 2.5rem !important; max-width: 480px; }
/* Gold accent badge, anchored to the bottom-right corner */
.mc-hero__badge {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  background: var(--gold);
  padding: 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  z-index: 2;
}
.mc-hero__badge-num { font-family: 'Cinzel', serif; font-size: 2.8rem; font-weight: 700; color: #fff; line-height: 1; }
.mc-hero__badge-txt { font-family: 'Cinzel', serif; font-size: .52rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.88); text-align: center; margin-top: .3rem; }

/* Stats bar */
.mc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--gold);
}
.mc-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,.2);
  transition: background .25s;
}
.mc-stat:last-child { border-right: none; }
.mc-stat:hover { background: var(--gold-dark); }
.mc-stat__num { font-family: 'Cinzel', serif; font-size: 1.8rem; font-weight: 700; color: #fff; display: block; line-height: 1; }
.mc-stat__lbl { font-family: 'Cinzel', serif; font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.8); display: block; margin-top: .35rem; }

/* Teaser (Event Spaces preview on Home) */
.mc-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
}
.mc-teaser__img { overflow: hidden; min-height: 420px; }
.mc-teaser__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 10s ease; }
.mc-teaser:hover .mc-teaser__img img { transform: scale(1.04); }
.mc-teaser__body { padding: 4.5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.mc-teaser__title { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2rem) !important; font-weight: 600; color: var(--ink) !important; line-height: 1.15 !important; margin: .8rem 0 0; }
.mc-teaser__title em { font-style: italic; color: var(--gold-dark) !important; }
.mc-teaser__desc { font-size: .88rem !important; color: #666; line-height: 1.85 !important; margin-bottom: 1rem !important; }

/* Promo row */
.mc-promo-row { display: grid; grid-template-columns: 1fr 1fr; }
.mc-promo-card { position: relative; min-height: 300px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.mc-promo-card--dark { background: var(--ink-soft); }
.mc-promo-card--cream { background: var(--cream-soft); }
.mc-promo-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .2; transition: opacity .4s; }
.mc-promo-card:hover .mc-promo-card__bg { opacity: .32; }
.mc-promo-card__body { position: relative; z-index: 1; padding: 2.5rem 2.5rem; display: flex; flex-direction: column; height: 100%; gap: .5rem; }
.mc-promo-card__eyebrow { font-family: 'Cinzel', serif; font-size: .55rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-light); }
.mc-promo-card__eyebrow--dark { color: var(--gold-dark); }
.mc-promo-card__title { font-family: 'Cinzel', serif; font-size: 1rem !important; font-weight: 600; color: #fff !important; margin: 0 !important; }
.mc-promo-card__title--dark { color: var(--ink) !important; }
.mc-promo-card__sub { font-size: .78rem !important; color: rgba(255,255,255,.6); margin: 0 !important; }
.mc-promo-card__sub--dark { color: var(--muted); }
.mc-promo-card__arrow { margin-top: auto; color: var(--gold-light); font-size: 1.2rem; transition: transform .25s; }
.mc-promo-card__arrow--dark { color: var(--gold); }
.mc-promo-card:hover .mc-promo-card__arrow { transform: translate(4px, -4px); }
.mc-promo-card__img { overflow: hidden; max-height: 180px; }
.mc-promo-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Split blocks */
.mc-split { display: grid; grid-template-columns: 1fr 1fr; }
.mc-split--ink { background: var(--ink-soft); }
.mc-split--cream { background: var(--cream); }
.mc-split--white { background: #fff; }
.mc-split--reverse .mc-split__body { order: 1; }
.mc-split--reverse .mc-split__img  { order: 0; }
.mc-split__body { padding: 4.5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.mc-split__title { font-family: 'Cinzel', serif; font-size: clamp(1.3rem, 2.8vw, 2rem) !important; font-weight: 600; line-height: 1.18 !important; margin: .8rem 0 0; }
.mc-split--ink   .mc-split__title { color: #fff !important; }
.mc-split--cream .mc-split__title { color: var(--ink) !important; }
.mc-split--white .mc-split__title { color: var(--ink) !important; }
.mc-split__title em { font-style: italic; color: var(--gold-light) !important; }
.mc-split--cream .mc-split__title em,
.mc-split--white .mc-split__title em { color: var(--gold-dark) !important; }
.mc-split__desc { font-size: .88rem !important; line-height: 1.85 !important; margin-bottom: 1rem !important; }
.mc-split--ink   .mc-split__desc { color: rgba(255,255,255,.65); }
.mc-split--cream .mc-split__desc { color: #666; }
.mc-split--white .mc-split__desc { color: #666; }
.mc-split__img { overflow: hidden; min-height: 420px; }
.mc-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 10s ease; }
.mc-split:hover .mc-split__img img { transform: scale(1.04); }

/* Find Us */
.mc-findus { background: var(--ink); display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.mc-findus__body { padding: 4.5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.mc-findus__title { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2.2rem) !important; font-weight: 600; color: #fff !important; line-height: 1.15 !important; margin: .8rem 0 0; }
.mc-findus__title em { font-style: italic; color: var(--gold-light) !important; }
.mc-findus__label { font-family: 'Cinzel', serif; font-size: .58rem !important; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 1.4rem 0 .4rem !important; }
.mc-findus__addr { font-size: .86rem !important; color: rgba(255,255,255,.65); line-height: 1.85 !important; margin-bottom: 2rem !important; }
.mc-findus__img { position: relative; overflow: hidden; }
.mc-findus__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.75); }
.mc-findus__brand { position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); font-family: 'Cinzel', serif; font-size: .52rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.45); writing-mode: vertical-rl; }

/* ══════════════════════════════════════════
   VENUE CARDS (Event Spaces)
══════════════════════════════════════════ */
.mc-cards-wrap { padding: 4rem 0; }
.mc-cards-wrap--cream { background: var(--cream); }
.mc-grid3 {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mc-venue-card { background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .3s, transform .3s; }
.mc-venue-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.1); transform: translateY(-4px); }
.mc-venue-card__img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.mc-venue-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s; filter: brightness(.9); }
.mc-venue-card:hover .mc-venue-card__img img { transform: scale(1.06); }
.mc-venue-card__badge { position: absolute; bottom: .6rem; left: .6rem; font-family: 'Cinzel', serif; font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; background: var(--gold); color: #fff; padding: .22rem .65rem; }
.mc-venue-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.mc-venue-card__name { font-family: 'Cinzel', serif; font-size: .88rem !important; font-weight: 600; color: var(--ink) !important; margin-bottom: .4rem !important; text-align: center; letter-spacing: .04em; }
.mc-venue-card__cap { font-size: .75rem !important; color: var(--muted); margin-bottom: .8rem !important; display: flex; align-items: center; justify-content: center; gap: .4rem; }
.mc-venue-card__cap i { color: var(--gold); font-size: .7rem; }
.mc-venue-card__body .mc-link { display: flex; justify-content: center; }

/* ══════════════════════════════════════════
   PHOTO MOSAIC
══════════════════════════════════════════ */
.mc-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 3px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 2rem 0;
}
.mc-mosaic > div { overflow: hidden; }
.mc-mosaic__a { grid-row: span 2; }
.mc-mosaic__f { grid-column: span 2; }
.mc-mosaic > div img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s, filter .5s; filter: brightness(.88); }
.mc-mosaic > div:hover img { transform: scale(1.06); filter: brightness(.7); }

/* ══════════════════════════════════════════
   WHY US (Corporate dark / Private cream)
══════════════════════════════════════════ */
.mc-why { padding: 4rem 0; }
.mc-why--ink  { background: var(--ink-soft); }
.mc-why--cream { background: var(--cream); }
.mc-why__head { text-align: center; margin-bottom: 3rem; }
.mc-why__sub { font-size: .88rem !important; color: #666; margin-top: .5rem !important; }
.mc-why--ink .mc-why__sub { color: rgba(255,255,255,.55); }
.mc-why__grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mc-why__card {
  background: #fff;
  padding: 2.2rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
  transition: background .25s, transform .25s;
}
.mc-why__card:hover { background: var(--cream); transform: translateY(-2px); }
.mc-why__card--light { background: var(--cream); }
.mc-why__card--light:hover { background: #fff; }
.mc-why__card i { font-size: 1.6rem; color: var(--gold); }
.mc-why__card strong { font-family: 'Cinzel', serif; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: block; }
.mc-why__card p { font-size: .76rem !important; color: var(--muted); line-height: 1.6 !important; margin: 0 !important; }

/* ══════════════════════════════════════════
   OFFER CARDS
══════════════════════════════════════════ */
.mc-grid-offers {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mc-offer-card { background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .3s, transform .3s; }
.mc-offer-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.1); transform: translateY(-4px); }
.mc-offer-card__img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.mc-offer-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s; filter: brightness(.9); }
.mc-offer-card:hover .mc-offer-card__img img { transform: scale(1.06); }
.mc-offer-card__cat { position: absolute; bottom: .6rem; left: .6rem; font-family: 'Cinzel', serif; font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; background: var(--gold); color: #fff; padding: .22rem .65rem; }
.mc-offer-card__body { padding: 1.4rem 1.5rem 1.6rem; }
.mc-offer-card__name { font-family: 'Cinzel', serif; font-size: .9rem !important; font-weight: 600; color: var(--ink) !important; margin-bottom: .6rem !important; line-height: 1.25 !important; }
.mc-offer-card__desc { font-size: .78rem !important; color: #666; line-height: 1.7 !important; margin-bottom: 1rem !important; }

/* ══════════════════════════════════════════
   LOCATION
══════════════════════════════════════════ */
.mc-location-wrap { background: var(--cream); padding: 4rem 0 5rem; }
.mc-location-intro { font-size: .92rem !important; color: #555; text-align: center; margin-bottom: 2.5rem !important; }
.mc-map { border: 1px solid var(--line); overflow: hidden; margin-bottom: 2.5rem; }
.mc-map iframe { width: 100%; height: 460px; display: block; border: none; }
.mc-location-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.mc-location-info { display: flex; flex-direction: column; gap: 1.2rem; }
.mc-loc-item { display: flex; gap: .9rem; align-items: flex-start; }
.mc-loc-item i { color: var(--gold); font-size: 1rem; background: rgba(187,138,60,.12); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 2px; margin-top: .1rem; }
.mc-loc-item strong { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: .25rem; }
.mc-loc-item p { font-size: .82rem !important; color: #666; margin: 0 !important; line-height: 1.65 !important; }
.mc-loc-item a { color: var(--gold-dark); text-decoration: none; transition: color .2s; }
.mc-loc-item a:hover { color: var(--gold); }
.mc-route-label { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: .8rem !important; }
.mc-route-row { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.mc-route-input { flex: 1; min-width: 180px; border: none; border-bottom: 1px solid var(--line); padding: .55rem .3rem; font-size: .84rem; outline: none; background: transparent; color: #333; transition: border-color .2s; }
.mc-route-input:focus { border-bottom-color: var(--gold); }
.mc-share { display: flex; align-items: center; gap: .6rem; font-size: .75rem !important; color: var(--muted); }
.mc-share__btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .78rem; text-decoration: none; transition: opacity .2s; }
.mc-share__btn:hover { opacity: .8; }
.mc-share__btn--fb { background: #1877f2; }
.mc-share__btn--tw { background: #111; }
.mc-share__btn--li { background: #0a66c2; }

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.mc-contact { background: #fff; padding: 5rem 0; }
.mc-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.mc-contact__title { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2.2rem) !important; font-weight: 600; color: var(--ink) !important; line-height: 1.18 !important; margin: .8rem 0 0; }
.mc-contact__title em { font-style: italic; color: var(--gold-dark) !important; }
.mc-contact__desc { font-size: .86rem !important; color: #666; line-height: 1.85 !important; margin-bottom: 1.5rem !important; }
.mc-contact-item { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.mc-contact-item i { color: var(--gold); font-size: .95rem; background: rgba(187,138,60,.1); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 2px; margin-top: .05rem; }
.mc-contact-item span { font-size: .82rem !important; color: #555; line-height: 1.65 !important; }
.mc-contact__form-title { font-family: 'Cinzel', serif; font-size: clamp(1.3rem, 2.8vw, 2rem) !important; font-weight: 600; color: var(--ink) !important; line-height: 1.18 !important; margin: .8rem 0 0; }
.mc-contact__form-title em { font-style: italic; color: var(--gold-dark) !important; }
.mc-contact__form-sub { font-size: .78rem !important; color: var(--muted); margin: .5rem 0 1.2rem !important; }
.mc-form { display: flex; flex-direction: column; gap: .85rem; }
.mc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.mc-input { width: 100%; border: none; border-bottom: 1px solid var(--line); padding: .7rem .2rem; font-size: .84rem; font-family: 'LINESeedSansTH', sans-serif; color: #333; outline: none; background: transparent; transition: border-color .22s; display: block; }
.mc-input::placeholder { color: #bbb; }
.mc-input:focus { border-bottom-color: var(--gold); }
.mc-textarea { resize: vertical; min-height: 140px; border: 1px solid var(--line) !important; padding: .7rem 1rem !important; }
.mc-textarea:focus { border-color: var(--gold) !important; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1199px) {
  .mc-grid3      { grid-template-columns: repeat(2, 1fr); }
  .mc-grid-offers { grid-template-columns: repeat(2, 1fr); }
  .mc-contact__grid { gap: 3rem; }
}
@media (max-width: 991px) {
  .mc-teaser, .mc-split,
  .mc-findus, .mc-corp-split    { grid-template-columns: 1fr; }
  .mc-hero                      { min-height: 560px; }
  .mc-hero__body                { padding: 6rem 1.8rem 3.5rem; max-width: 100%; }
  .mc-hero__overlay             { background: linear-gradient(180deg, rgba(7,38,42,.55) 0%, rgba(7,38,42,.78) 60%, rgba(7,38,42,.9) 100%); }
  .mc-hero__badge               { right: 1.4rem; bottom: 1.4rem; padding: 1.1rem 1.4rem; }
  .mc-teaser__body              { padding: 3rem 2rem; }
  .mc-split__body               { padding: 3rem 2rem; }
  .mc-split__img                { min-height: 280px; order: -1; }
  .mc-split--reverse .mc-split__img  { order: -1; }
  .mc-split--reverse .mc-split__body { order: 0; }
  .mc-findus__body              { padding: 3rem 2rem; }
  .mc-findus__img               { min-height: 260px; }
  .mc-promo-row                 { grid-template-columns: 1fr; }
  .mc-stats                     { grid-template-columns: repeat(2, 1fr); }
  .mc-why__grid                 { grid-template-columns: repeat(2, 1fr); }
  .mc-contact__grid             { grid-template-columns: 1fr; gap: 3rem; }
  .mc-location-row              { grid-template-columns: 1fr; gap: 2.5rem; }
  .mc-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mc-mosaic__a, .mc-mosaic__f { grid-row: span 1; grid-column: span 1; }
}
@media (max-width: 767px) {
  .mc-grid3, .mc-grid-offers { grid-template-columns: 1fr; }
  .mc-why__grid               { grid-template-columns: 1fr 1fr; }
  .mc-subnav__cta             { display: none; }
  .mc-page-hero               { height: 160px; }
  .mc-form__row               { grid-template-columns: 1fr; }
  .mc-cards-wrap              { padding: 2.5rem 0; }
  .mc-mosaic                  { padding: 1rem 1rem 0; }
  .mc-contact                 { padding: 3rem 0; }
  .mc-hero                    { min-height: 500px; }
  .mc-hero__body              { padding: 5.25rem 1.4rem 3rem; }
  .mc-hero__desc              { margin-bottom: 1.8rem !important; }
  .mc-hero__badge             { display: none; }   /* avoid overlapping the CTA on phones */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════
   CONTACT PAGE — page-specific styles only
   ไม่ซ้ำ class ที่มีใน main_styles.css
══════════════════════════════════════════ */

/* ── Page Hero ── */
.ct-hero {
    position: relative;
    height: 80vh;
    background: var(--ink-soft);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.ct-hero__bg {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(160deg, rgba(10,66,72,.92) 0%, rgba(7,38,42,.75) 60%, transparent 100%),
        url('../images/hero-bg.jpg') center/cover no-repeat;
}
/* Decorative vertical line accent */
.ct-hero__bg::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 72px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
    opacity: .18;
}
.ct-hero__body {
    position: relative;
    z-index: 1;
    padding: 0 0 3.5rem;
    width: 100%;
}
.ct-hero__eyebrow {
    padding-top: 72px; /* push past navbar */
}
.ct-hero__eyebrow .eyebrow {
    color: rgba(255,255,255,.55);
}
.ct-hero__eyebrow .eyebrow::before,
.ct-hero__eyebrow .eyebrow::after {
    background: rgba(255,255,255,.3);
}
.ct-hero__title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    font-weight: 600;
    color: #fff !important;
    line-height: 1.1 !important;
    letter-spacing: .05em;
    margin: .6rem 0 0 !important;
}
.ct-hero__title em {
    font-style: italic;
    color: var(--gold-light) !important;
}

/* ── Divider ornament ── */
.ct-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3.5rem 0 3rem;
}
.ct-divider::before,
.ct-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.ct-divider__diamond {
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ── Info column extras ── */
.ct-info-label {
    font-family: 'Cinzel', serif;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-dark);
    display: block;
    margin-bottom: .2rem;
}
.ct-info-value {
    font-size: .88rem !important;
    color: #444;
    line-height: 1.7 !important;
    margin: 0 !important;
}
.ct-info-value a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.ct-info-value a:hover {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

/* ── Social links ── */
.ct-social {
    display: flex;
    gap: .7rem;
    margin-top: .5rem;
}
.ct-social__link {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    font-size: .85rem;
    transition: background .22s, color .22s, border-color .22s;
}
.ct-social__link:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* ── Form panel ── */
.ct-form-panel {
    background: var(--cream);
    padding: 2.8rem 2.5rem;
    border-left: 3px solid var(--gold);
}

/* ── Subject chips ── */
.ct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
}
.ct-chip {
    font-family: 'Cinzel', serif;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .42rem 1rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
}
.ct-chip:hover,
.ct-chip.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* ── Form submit row ── */
.ct-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}
.ct-privacy {
    font-size: .72rem !important;
    color: var(--muted);
    line-height: 1.6 !important;
    margin: 0 !important;
}
.ct-privacy a {
    color: var(--gold-dark);
    text-decoration: none;
}
.ct-privacy a:hover { text-decoration: underline; }

/* ── Map strip ── */
.ct-map-strip {
    position: relative;
    height: 420px;
    overflow: hidden;
}
.ct-map-strip iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    filter: grayscale(.25) contrast(.95);
}
/* Map overlay badge */
.ct-map-badge {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: var(--ink-soft);
    color: #fff;
    padding: 1.2rem 1.8rem;
    max-width: 260px;
    z-index: 10;
}
.ct-map-badge__title {
    font-family: 'Cinzel', serif;
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-light);
    display: block;
    margin-bottom: .3rem;
}
.ct-map-badge p {
    font-size: .78rem !important;
    color: rgba(255,255,255,.75);
    margin: 0 !important;
    line-height: 1.65 !important;
}
.ct-map-badge a {
    font-family: 'Cinzel', serif;
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .8rem;
    transition: color .2s;
}
.ct-map-badge a:hover { color: #fff; }

/* ── Success toast ── */
.ct-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--ink-soft);
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: .82rem;
    display: none;
    align-items: center;
    gap: .7rem;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
}
.ct-toast.show { display: flex; }
.ct-toast i { color: var(--gold-light); }

/* ── Responsive ── */
@media (max-width: 991px) {
    .ct-hero        { height: 500px; }
    .ct-form-panel  { padding: 2rem 1.5rem; }
    .ct-map-strip   { height: 320px; }
    .ct-map-badge   { display: none; }
}
@media (max-width: 767px) {
    .ct-hero         { height: 540px; }
    .ct-hero__title  { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
    .ct-divider      { margin: 2.5rem 0 2rem; }
    .ct-map-strip    { height: 260px; }
    .ct-form-footer  { flex-direction: column; align-items: flex-start; }
}



/* ==========================================================
   Meet & Celebrate — DETAILS PAGE
   Only NEW classes live here (prefixed "mcd-") so nothing in
   meet-celebrate.css is redefined or duplicated. Uses the same
   theme variables (--gold / --gold-dark / --ink / --cream ...)
   already defined in main_styles.css.
   ========================================================== */

/* ---------- Breadcrumb ---------- */
.mcd-breadcrumb{
    background:var(--cream-soft);
    border-bottom:1px solid rgba(15,92,99,.08);
}
.mcd-breadcrumb__inner{
    max-width:1200px;
    margin:0 auto;
    padding:16px 24px;
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'LINESeedSansTH', sans-serif;
    font-size:.85rem;
    color:var(--ink-soft);
}
.mcd-breadcrumb__inner a{
    color:var(--ink-soft);
    text-decoration:none;
    opacity:.7;
    transition:opacity .2s ease;
}
.mcd-breadcrumb__inner a:hover{ opacity:1; color:var(--gold-dark); }
.mcd-breadcrumb__inner i{ font-size:.65rem; opacity:.5; }
.mcd-breadcrumb__inner span{ color:var(--gold-dark); font-weight:600; }

/* ---------- Intro / Text block ---------- */
.mcd-intro{
    max-width:1200px;
    margin:0 auto;
    padding:72px 24px 24px;
}
.mcd-intro__head{
    max-width:760px;
    margin:0 auto 40px;
    text-align:center;
}
.mcd-intro__title{
    font-family:'Cinzel', serif;
    color:var(--ink);
    font-size:2.2rem;
    line-height:1.25;
    margin:14px 0 0;
}
.mcd-intro__title em{ color:var(--gold-dark); font-style:normal; }
.mc-page-hero{
    height: 80vh;
    min-height: 560px;
    /* ...ค่าอื่นๆ ที่มีอยู่เดิม เช่น background-size, position คงไว้เหมือนเดิม */
}
.mcd-intro__desc{
    max-width:820px;
    margin:0 auto;
    font-family:'LINESeedSansTH', sans-serif;
    color:var(--ink-soft);
    font-size:1.02rem;
    line-height:1.85;
}
.mcd-intro__desc p{ margin:0 0 20px; }
.mcd-intro__desc p:last-child{ margin-bottom:0; }

/* ---------- Quick facts strip ---------- */
.mcd-facts{
    max-width:1000px;
    margin:44px auto 0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border:1px solid rgba(15,92,99,.12);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}
.mcd-fact{
    text-align:center;
    padding:26px 16px;
    border-right:1px solid rgba(15,92,99,.12);
}
.mcd-fact:last-child{ border-right:none; }
.mcd-fact i{
    font-size:1.4rem;
    color:var(--gold);
    display:block;
    margin-bottom:10px;
}
.mcd-fact strong{
    display:block;
    font-family:'Cinzel', serif;
    color:var(--ink);
    font-size:1rem;
    margin-bottom:4px;
}
.mcd-fact span{
    font-family:'LINESeedSansTH', sans-serif;
    color:var(--ink-soft);
    font-size:.85rem;
    opacity:.8;
}

/* ---------- Gallery section ---------- */
.mcd-gallery{
    max-width:1200px;
    margin:0 auto;
    padding:64px 24px 96px;
}
.mcd-gallery__head{
    text-align:center;
    margin-bottom:36px;
}
.mcd-gallery__title{
    font-family:'Cinzel', serif;
    color:var(--ink);
    font-size:1.7rem;
    margin:14px 0 0;
}
.mcd-gallery__title em{ color:var(--gold-dark); font-style:normal; }

/* Pure-CSS masonry via column layout (no JS required) */
.mcd-masonry{
    column-count:3;
    column-gap:16px;
}
.mcd-masonry__item{
    break-inside:avoid;
    margin-bottom:16px;
    border-radius:8px;
    overflow:hidden;
    position:relative;
    display:block;
    cursor:zoom-in;
}
.mcd-masonry__item img{
    display:block;
    width:100%;
    height:auto;
    transition:transform .5s ease;
}
.mcd-masonry__item::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(15,92,99,0) 55%, rgba(15,92,99,.55) 100%);
    opacity:0;
    transition:opacity .35s ease;
}
.mcd-masonry__item i{
    position:absolute;
    right:14px;
    bottom:14px;
    color:#fff;
    font-size:1.1rem;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .35s ease, transform .35s ease;
}
.mcd-masonry__item:hover img{ transform:scale(1.06); }
.mcd-masonry__item:hover::after,
.mcd-masonry__item:hover i{ opacity:1; transform:translateY(0); }

@media (max-width: 991px){
    .mcd-masonry{ column-count:2; }
    .mcd-facts{ grid-template-columns:repeat(2, 1fr); }
    .mcd-fact:nth-child(2){ border-right:none; }
}
@media (max-width: 575px){
    .mcd-masonry{ column-count:1; }
    .mcd-intro__title{ font-size:1.7rem; }
}

/* ---------- Lightbox (pure CSS, no JS dependency) ---------- */
.mcd-lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(10,20,20,.92);
    align-items:center;
    justify-content:center;
    padding:40px;
}
.mcd-lightbox.is-open{ display:flex; }
.mcd-lightbox img{
    max-width:100%;
    max-height:100%;
    border-radius:6px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.mcd-lightbox__close{
    position:absolute;
    top:24px;
    right:28px;
    color:#fff;
    font-size:1.8rem;
    background:none;
    border:none;
    cursor:pointer;
    opacity:.85;
    transition:opacity .2s ease;
}
.mcd-lightbox__close:hover{ opacity:1; }


/* ══════════════════════════════════════════
   CAREERS PAGE — page-specific styles only
   ไม่ซ้ำ class ที่มีใน main_styles.css

   Reuses global tokens already defined in main_styles.css:
     --gold --gold-light --gold-dark --ink --ink-soft
     --cream --cream-soft --muted --line
   Reuses global classes already defined in main_styles.css:
     .eyebrow  .btn-gold  .btn-outline-gold  .container (Bootstrap)
   Every new selector below is prefixed "job-" — this prefix
   does not exist anywhere in main_styles.css.
══════════════════════════════════════════ */

/* ════════════════════════════
   HERO
════════════════════════════ */
.job-hero{
  position:relative;
  min-height:72vh;
  background:var(--ink-soft);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.job-hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(165deg, rgba(10,66,72,.90) 0%, rgba(7,38,42,.74) 55%, rgba(7,38,42,.55) 100%),
    url('../images/hero-bg.jpg') center/cover no-repeat;
}
.job-hero__ghost{
  position:absolute;
  right:4vw;
  bottom:-3vh;
  font-family:'Cinzel', serif;
  font-size:clamp(5rem, 16vw, 13rem);
  font-weight:700;
  letter-spacing:.06em;
  color:rgba(255,255,255,.04);
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.job-hero__body{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 0 4rem;
}
.job-hero__eyebrow{ margin-bottom:.9rem; }
.job-hero__eyebrow .eyebrow{ color:rgba(255,255,255,.6); }
.job-hero__eyebrow .eyebrow::before,
.job-hero__eyebrow .eyebrow::after{ background:rgba(255,255,255,.32); }
.job-hero__title{
  font-family:'Cinzel', serif;
  font-size:clamp(2rem, 4.6vw, 3.1rem) !important;
  font-weight:600;
  color:#fff !important;
  line-height:1.18 !important;
  letter-spacing:.03em;
  margin:0 0 1.1rem !important;
  max-width:760px;
}
.job-hero__title em{
  font-style:italic;
  color:var(--gold-light) !important;
}
.job-hero__sub{
  font-size:1.02rem;
  color:rgba(255,255,255,.72);
  max-width:520px;
  line-height:1.75;
  margin:0 0 2.2rem;
}
.job-hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; }
.job-hero__cta a{ text-decoration:none; }

@media (max-width:767px){
  .job-hero{ min-height:64vh; }
  .job-hero__ghost{ display:none; }
}

/* ════════════════════════════
   SECTION HEADS (shared layout only)
════════════════════════════ */
.job-intro__head,
.job-positions__head,
.job-apply__head{
  text-align:center;
  max-width:640px;
  margin:0 auto 3rem;
}
.job-intro__head p,
.job-apply__head p{ color:var(--muted); margin:1rem 0 0; }
.job-apply__head a{ color:var(--gold-dark); }

.job-benefits__head{
  text-align:center;
  max-width:600px;
  margin:0 auto 3.2rem;
}
.job-benefits__head .eyebrow{ color:var(--gold-light); }
.job-benefits__head .eyebrow::before,
.job-benefits__head .eyebrow::after{ background:var(--gold-light); }
.job-benefits__head h2{ color:#fff !important; margin:0; }

/* ════════════════════════════
   WHY JOIN US
════════════════════════════ */
.job-intro{
  background:var(--cream-soft);
  padding:6rem 0;
}
.job-value-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2.4rem 2rem;
}
.job-value{ text-align:center; }
.job-value__icon{
  width:64px; height:64px;
  margin:0 auto 1.2rem;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:1.5rem;
  transition:background .3s ease, color .3s ease;
}
.job-value:hover .job-value__icon{ background:var(--gold); color:#fff; }
.job-value h3{ font-size:1.05rem !important; margin:0 0 .5rem; }
.job-value p{ color:var(--muted); font-size:.92rem; margin:0; line-height:1.65; }

@media (max-width:991px){ .job-value-grid{ grid-template-columns:repeat(2,1fr); gap:2.6rem 1.5rem; } }
@media (max-width:575px){ .job-value-grid{ grid-template-columns:1fr; max-width:300px; margin:0 auto; } }

/* ════════════════════════════
   OPEN POSITIONS
════════════════════════════ */
.job-positions{
  background:#fff;
  padding:6rem 0;
}

.job-filter-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-bottom:3rem;
}
.job-filter-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  padding:.55rem 1.3rem;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:100px;
  cursor:pointer;
  transition:all .3s ease;
}
.job-filter-btn:hover{ border-color:var(--gold); color:var(--gold-dark); }
.job-filter-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.job-list{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.job-item{
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.job-item.open{ box-shadow:0 18px 40px -15px rgba(6,46,50,.15); }
.job-item[hidden]{ display:none; }

.job-item__head{
  width:100%;
  background:none;
  border:0;
  padding:1.3rem 1.7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  cursor:pointer;
  text-align:left;
}
.job-item__title-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; }
.job-item__title{
  font-family:'Cinzel', serif;
  font-size:1.05rem !important;
  font-weight:500;
  color:var(--ink);
  margin:0;
}
.job-item__meta{ display:flex; flex-wrap:wrap; gap:.5rem; }
.job-item__tag{
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold-dark);
  background:rgba(187,138,60,.1);
  padding:.22rem .65rem;
  border-radius:100px;
  white-space:nowrap;
}
.job-item__icon{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:.85rem;
  transition:transform .35s ease, background .3s ease, color .3s ease;
}
.job-item.open .job-item__icon{ background:var(--gold); color:#fff; transform:rotate(45deg); }

.job-item__body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.job-item.open .job-item__body{ max-height:640px; }
.job-item__body-inner{ padding:0 1.7rem 1.7rem; }
.job-item__body-inner p{ color:var(--muted); margin:0 0 1rem; }
.job-item__body-inner ul{ margin:0 0 1.3rem; padding-left:1.15rem; color:var(--muted); font-size:.92rem; line-height:1.8; }
.job-item__apply{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid var(--gold);
  padding-bottom:3px;
}
.job-item__apply:hover{ color:var(--gold-dark); }

.job-empty{
  display:none;
  text-align:center;
  color:var(--muted);
  max-width:880px;
  margin:0 auto;
  padding:1.5rem 0 0;
}

@media (max-width:575px){
  .job-item__head{ padding:1.1rem 1.2rem; }
  .job-item__body-inner{ padding:0 1.2rem 1.4rem; }
}

/* ════════════════════════════
   BENEFITS
════════════════════════════ */
.job-benefits{
  background:var(--ink);
  padding:6rem 0;
}
.job-benefits__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.4rem 2rem;
  max-width:920px;
  margin:0 auto;
}
.job-benefit{ display:flex; gap:1rem; align-items:flex-start; }
.job-benefit__icon{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-light);
  font-size:1.1rem;
}
.job-benefit h4{ color:#fff !important; font-size:.98rem !important; margin:0 0 .3rem; }
.job-benefit p{ color:rgba(255,255,255,.6); font-size:.87rem; margin:0; line-height:1.6; }

@media (max-width:991px) and (min-width:768px){ .job-benefits__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .job-benefits__grid{ grid-template-columns:1fr; gap:1.8rem; max-width:380px; } }

/* ════════════════════════════
   APPLY
════════════════════════════ */
.job-apply{
  background:var(--cream-soft);
  padding:6rem 0;
}
.job-apply__wrap{ max-width:760px; margin:0 auto; }

.job-apply__form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:2.6rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
.job-field{ display:flex; flex-direction:column; gap:.5rem; }
.job-field--full{ grid-column:1/-1; }
.job-field label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.job-field input,
.job-field select,
.job-field textarea{
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  padding:.6rem .1rem;
  font-size:.95rem;
  color:#333;
  font-family:inherit;
  transition:border-color .3s ease;
}
.job-field textarea{ resize:vertical; min-height:90px; }
.job-field input:focus,
.job-field select:focus,
.job-field textarea:focus{
  outline:0;
  border-color:var(--gold);
}
.job-field-file{
  display:flex;
  align-items:center;
  gap:.6rem;
  border:1px dashed var(--line);
  border-radius:4px;
  padding:.9rem 1rem;
  font-size:.85rem;
  color:var(--muted);
  cursor:pointer;
  background:transparent;
  transition:border-color .3s ease, color .3s ease;
}
.job-field-file:hover{ border-color:var(--gold); color:var(--gold-dark); }

.job-apply__submit{
  grid-column:1/-1;
  justify-self:start;
  margin-top:.5rem;
  cursor:pointer;
}

@media (max-width:767px){
  .job-apply__form{ grid-template-columns:1fr; padding:1.8rem; }
}

/* ════════════════════════════
   TOAST
════════════════════════════ */
.job-toast{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  background:var(--ink);
  color:#fff;
  padding:1rem 1.4rem;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.88rem;
  max-width:340px;
  box-shadow:0 18px 40px -15px rgba(6,46,50,.5);
  transform:translateY(20px);
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease, opacity .35s ease;
  z-index:1200;
}
.job-toast.show{ transform:translateY(0); opacity:1; }
.job-toast i{ color:var(--gold-light); font-size:1.15rem; flex-shrink:0; }

@media (max-width:575px){
  .job-toast{ left:1rem; right:1rem; max-width:none; }
}

/* ════════════════════════════
   ACCESSIBILITY / QUALITY FLOOR
════════════════════════════ */
.job-filter-btn:focus-visible,
.job-item__head:focus-visible,
.job-item__apply:focus-visible,
.job-hero__cta a:focus-visible,
.job-field-file:focus-within,
.job-apply__form input:focus-visible,
.job-apply__form select:focus-visible,
.job-apply__form textarea:focus-visible,
.job-apply__submit:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .job-item__body,
  .job-item__icon,
  .job-toast,
  .job-value__icon,
  .job-hero__bg{ transition:none !important; }
}

/* ══════════════════════════════════════════
   FAQ PAGE — page-specific styles only
   ไม่ซ้ำ class ที่มีใน main_styles.css

   Reuses global tokens already defined in main_styles.css:
     --gold --gold-light --gold-dark --ink --ink-soft
     --cream --cream-soft --muted --line
   Reuses global classes already defined in main_styles.css:
     .eyebrow  .btn-gold  .btn-outline-gold  .container (Bootstrap)
   Every new selector below is prefixed "faq-" — this prefix
   does not exist anywhere in main_styles.css (only appears
   combined as "off-faq" on the Offers page, which is untouched).
══════════════════════════════════════════ */

/* ════════════════════════════
   HERO
════════════════════════════ */
.faq-hero{
  position:relative;
  min-height:56vh;
  background:var(--ink-soft);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.faq-hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(165deg, rgba(10,66,72,.90) 0%, rgba(7,38,42,.74) 55%, rgba(7,38,42,.55) 100%),
    url('../images/hero-bg.jpg') center/cover no-repeat;
}
.faq-hero__ghost{
  position:absolute;
  right:5vw;
  bottom:-8vh;
  font-family:'Cinzel', serif;
  font-size:clamp(9rem, 24vw, 19rem);
  font-weight:700;
  color:rgba(255,255,255,.045);
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.faq-hero__body{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 0 3.5rem;
}
.faq-hero__eyebrow{ margin-bottom:.9rem; }
.faq-hero__eyebrow .eyebrow{ color:rgba(255,255,255,.6); }
.faq-hero__eyebrow .eyebrow::before,
.faq-hero__eyebrow .eyebrow::after{ background:rgba(255,255,255,.32); }
.faq-hero__title{
  font-family:'Cinzel', serif;
  font-size:clamp(2rem, 4.6vw, 3.1rem) !important;
  font-weight:600;
  color:#fff !important;
  line-height:1.18 !important;
  letter-spacing:.03em;
  margin:0 0 1.1rem !important;
  max-width:700px;
}
.faq-hero__title em{
  font-style:italic;
  color:var(--gold-light) !important;
}
.faq-hero__sub{
  font-size:1.02rem;
  color:rgba(255,255,255,.72);
  max-width:540px;
  line-height:1.75;
  margin:0;
}

@media (max-width:767px){
  .faq-hero{ min-height:46vh; }
  .faq-hero__ghost{ display:none; }
}

/* ════════════════════════════
   TOOLBAR — search + category filter
════════════════════════════ */
.faq-toolbar{
  background:var(--cream-soft);
  padding:3.5rem 0 2.5rem;
}
.faq-search{
  position:relative;
  max-width:560px;
  margin:0 auto 1.6rem;
}
.faq-search i{
  position:absolute;
  left:1.2rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--gold-dark);
  font-size:1rem;
}
.faq-search input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:100px;
  padding:.9rem 1.4rem .9rem 2.8rem;
  font-size:.95rem;
  color:#333;
  font-family:inherit;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-search input:focus{
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(187,138,60,.15);
}
.faq-search input::placeholder{ color:var(--muted); }

.faq-filter-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
}
.faq-filter-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  padding:.55rem 1.3rem;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:100px;
  cursor:pointer;
  transition:all .3s ease;
}
.faq-filter-btn:hover{ border-color:var(--gold); color:var(--gold-dark); }
.faq-filter-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ════════════════════════════
   FAQ LIST — accordion
   (same interaction technique as the Offers page's
   .off-faq, rebuilt here under its own prefix/file)
════════════════════════════ */
.faq-list-section{
  background:var(--cream-soft);
  padding:0 0 6rem;
}
.faq-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.faq-category-label{
  font-family:'Cinzel', serif;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin:2.2rem 0 .8rem;
  padding-left:.2rem;
}
.faq-category-label:first-child{ margin-top:.4rem; }

.faq-item{
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.faq-item.open{ box-shadow:0 18px 40px -15px rgba(6,46,50,.15); }
.faq-item[hidden]{ display:none; }

.faq-item__q{
  width:100%;
  background:none;
  border:0;
  padding:1.15rem 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  cursor:pointer;
  text-align:left;
  font-family:'Cinzel', serif;
  font-size:.98rem;
  font-weight:500;
  color:var(--ink);
}
.faq-item__q:hover{ color:var(--gold-dark); }
.faq-item__icon{
  flex-shrink:0;
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:.78rem;
  transition:transform .35s ease, background .3s ease, color .3s ease;
}
.faq-item.open .faq-item__q{ color:var(--gold-dark); }
.faq-item.open .faq-item__icon{ background:var(--gold); color:#fff; transform:rotate(45deg); }

.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.faq-item.open .faq-item__a{ max-height:400px; }
.faq-item__a-inner{ padding:0 1.6rem 1.4rem; }
.faq-item__a-inner p{ color:var(--muted); font-size:.92rem; line-height:1.75; margin:0; }

.faq-empty{
  display:none;
  text-align:center;
  color:var(--muted);
  padding:2.5rem 0 0;
}

@media (max-width:575px){
  .faq-item__q{ padding:1rem 1.2rem; font-size:.92rem; }
  .faq-item__a-inner{ padding:0 1.2rem 1.2rem; }
}

/* ════════════════════════════
   CLOSING CTA
════════════════════════════ */
.faq-cta{
  background:var(--ink);
  padding:4.5rem 0;
  text-align:center;
}
.faq-cta .eyebrow{ justify-content:center; color:var(--gold-light); margin-bottom:.9rem; }
.faq-cta .eyebrow::before,
.faq-cta .eyebrow::after{ background:var(--gold-light); }
.faq-cta h2{ color:#fff !important; margin:0 0 .7rem; }
.faq-cta p{ color:rgba(255,255,255,.65); max-width:460px; margin:0 auto 1.8rem; }
.faq-cta__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.faq-cta__actions a{ text-decoration:none; }
/* .btn-gold's ink fill would blend into this section's ink background,
   so make it a proper filled-gold primary here (scoped to this section only) */
.faq-cta__actions .btn-gold{ background:var(--gold); border-color:var(--gold); }
.faq-cta__actions .btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); }

/* ════════════════════════════
   ACCESSIBILITY / QUALITY FLOOR
════════════════════════════ */
.faq-filter-btn:focus-visible,
.faq-item__q:focus-visible,
.faq-search input:focus-visible,
.faq-cta__actions a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .faq-item__a,
  .faq-item__icon,
  .faq-hero__bg{ transition:none !important; }
}
/* ══════════════════════════════════════════
   RESTAURANTS PAGE — page-specific styles only
   ไม่ซ้ำ class ที่มีใน main_styles.css

   This page reuses existing shared classes for its hero, intro,
   filter pills, "good to know" strip, and closing map/CTA band:
     .explore-hero*  .explore-intro*  .xp-filter*
     .xp-dist-grid / .xp-dist-item*   .xp-map-strip*
   (all already defined in main_styles.css from the Explore page)
   — so only the dining card grid below is genuinely new.
   Every new selector is prefixed "dine-", which does not exist
   anywhere in main_styles.css.
══════════════════════════════════════════ */

.dine-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.dine-card{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
}
.dine-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 55px -20px rgba(6,46,50,.18);
}
.dine-card__icon-wrap{
  position:relative;
  height:170px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.dine-card__icon-wrap i{
  font-size:2.4rem;
  color:rgba(255,255,255,.9);
}
.dine-card--nearby .dine-card__icon-wrap{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
}
.dine-card__cat{
  position:absolute;
  top:1rem;
  left:1rem;
  font-family:'Cinzel', serif;
  font-size:.55rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:600;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  padding:.35rem .85rem;
}
.dine-card__body{
  padding:1.6rem 1.8rem 2rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.dine-card__title{
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:.4rem;
  letter-spacing:.03em;
  line-height:1.25;
}
.dine-card__meta{
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--gold-dark);
  margin-bottom:.8rem;
}
.dine-card__desc{
  font-size:.85rem !important;
  line-height:1.75 !important;
  color:var(--muted);
  margin:0;
  flex:1;
}

/* ── Featured card (hotel's flagship venue) — spans 2 cols ── */
.dine-card--featured{
  grid-column:span 2;
  flex-direction:row;
}
.dine-card--featured .dine-card__icon-wrap{
  width:42%;
  height:auto;
}
.dine-card--featured .dine-card__icon-wrap i{ font-size:3rem; }
.dine-card--featured .dine-card__body{
  justify-content:center;
  padding:2.2rem 2.5rem;
}
.dine-card--featured .dine-card__title{ font-size:1.3rem; }

/* ── Responsive (mirrors the breakpoints already used for .xp-grid) ── */
@media (max-width:991px){
  .dine-grid{ grid-template-columns:repeat(2, 1fr); }
  .dine-card--featured{ grid-column:span 2; flex-direction:column; }
  .dine-card--featured .dine-card__icon-wrap{ width:100%; height:200px; }
}
@media (max-width:767px){
  .dine-grid{ grid-template-columns:1fr; }
  .dine-card--featured{ grid-column:span 1; }
}

@media (prefers-reduced-motion: reduce){
  .dine-card{ transition:none !important; }
}
/* ══════════════════════════════════════════
   TRANSPORTATION PAGE — page-specific styles only
   ไม่ซ้ำ class ที่มีใน main_styles.css

   This page reuses existing shared classes for its hero, intro,
   "distance to transport hubs" grid, and closing map/CTA band:
     .explore-hero*  .explore-intro*
     .xp-distances / .xp-dist-grid / .xp-dist-item*
     .xp-map-strip*
   (all already defined in main_styles.css from the Explore page)
   — so only the transport-options grid below is genuinely new.
   Every new selector is prefixed "transit-", which does not
   exist anywhere in main_styles.css.
══════════════════════════════════════════ */

.transit-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.transit-card{
  background:#fff;
  border:1px solid var(--line);
  padding:2.2rem 2rem;
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.transit-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 55px -20px rgba(6,46,50,.18);
  border-color:var(--line);
}
.transit-card__icon{
  width:64px; height:64px;
  margin:0 auto 1.3rem;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:1.5rem;
  transition:background .3s ease, color .3s ease;
}
.transit-card:hover .transit-card__icon{ background:var(--gold); color:#fff; }
.transit-card__title{
  font-family:'Cinzel', serif;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:.6rem;
  letter-spacing:.03em;
}
.transit-card__desc{
  font-size:.85rem !important;
  line-height:1.75 !important;
  color:var(--muted);
  margin:0 0 .9rem;
}
.transit-card__tag{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-dark);
  background:rgba(187,138,60,.1);
  padding:.3rem .8rem;
}

@media (max-width:991px){
  .transit-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:575px){
  .transit-grid{ grid-template-columns:1fr; }
  .transit-card{ padding:1.8rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce){
  .transit-card{ transition:none !important; }
}
/* ══════════════════════════════════════════════════════
   MEETINGS.PHP — page-specific styles only
   Reuses brand tokens (--gold, --ink, --line, fonts, etc.)
   and shared components (explore-hero, gallery-header,
   btn-gold, xp-map-strip) already defined in main_styles.css.
   All classes below are namespaced with "mt-" so nothing
   here collides with or redefines existing site classes.
   ══════════════════════════════════════════════════════ */


/* ── Stat strip ───────────────────────────────────────── */
.mt-stats{
  background:var(--ink);
  padding:2.6rem 0;
}
.mt-stats__row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
.mt-stat{
  text-align:center;
  color:#fff;
  padding:0 1rem;
  border-left:1px solid rgba(255,255,255,.14);
}
.mt-stat:first-child{ border-left:0; }
.mt-stat__num{
  display:block;
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  color:var(--gold-light);
  line-height:1;
  margin-bottom:.5rem;
}
.mt-stat__lbl{
  display:block;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.8rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.75);
}

@media (max-width: 767px){
  .mt-stats__row{ grid-template-columns:repeat(2, 1fr); row-gap:1.8rem; }
  .mt-stat{ border-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:1.2rem; }
  .mt-stat:nth-child(1),
  .mt-stat:nth-child(2){ border-top:0; padding-top:0; }
}


/* ── Feature list (intro split) ──────────────────────────── */
.mt-feature-list{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.mt-feature-list li{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.98rem;
  color:var(--ink-soft);
}
.mt-feature-list li i{
  width:26px; height:26px;
  flex:0 0 26px;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
}


/* ── Image collage ───────────────────────────────────────── */
.mt-collage{
  position:relative;
  padding-bottom:2.5rem;
  padding-right:2.5rem;
}
.mt-collage__main{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}
.mt-collage__small{
  position:absolute;
  width:150px; height:110px;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.mt-collage__small--a{ bottom:0; left:30px; }
.mt-collage__small--b{ bottom:40px; right:0; }

@media (max-width: 575px){
  .mt-collage{ padding-right:1.2rem; }
  .mt-collage__main{ height:260px; }
  .mt-collage__small{ width:110px; height:82px; }
  .mt-collage__small--a{ left:12px; }
}


/* ── Capacity ledger ─────────────────────────────────────── */
.mt-capacity-section{ background:var(--cream-soft); }

.mt-ledger{
  background:#fff;
  border:1px solid var(--line);
}
.mt-ledger__row{
  display:grid;
  grid-template-columns:2fr repeat(4, 1fr);
  align-items:center;
  padding:.95rem 1.4rem;
  border-bottom:1px solid var(--line);
}
.mt-ledger__row:last-child{ border-bottom:0; }
.mt-ledger__row span{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.9rem;
  color:var(--ink-soft);
  text-align:center;
}
.mt-ledger__row--head{
  background:var(--ink);
}
.mt-ledger__row--head span{
  color:rgba(255,255,255,.85);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.mt-ledger__row--head .mt-ledger__name{ color:#fff; }
.mt-ledger__name{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-align:left !important;
  font-family:'Cinzel', serif;
  font-weight:500;
  font-size:1rem !important;
  color:var(--ink);
}
.mt-ledger__name i{
  color:var(--gold);
  font-size:.85rem;
}

@media (max-width: 767px){
  .mt-ledger{ overflow-x:auto; }
  .mt-ledger__row{
    grid-template-columns:140px repeat(4, 80px);
    min-width:540px;
    padding:.85rem 1rem;
  }
}


/* ── Amenities grid ──────────────────────────────────────── */
.mt-amenity-section{ background:#fff; }

.mt-amenity-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.mt-amenity{
  padding:2rem 1.6rem;
  text-align:center;
  border:1px solid var(--line);
  transition:border-color .3s ease, transform .3s ease;
}
.mt-amenity:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}
.mt-amenity i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--cream-soft);
  color:var(--gold-dark);
  font-size:1.35rem;
  margin-bottom:1.1rem;
}
.mt-amenity h4{
  font-family:'Cinzel', serif;
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:.4rem;
}
.mt-amenity p{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.85rem;
  color:var(--muted);
  margin:0;
}

@media (max-width: 767px){
  .mt-amenity-grid{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
  .mt-amenity{ padding:1.6rem 1rem; }
}
@media (max-width: 480px){
  .mt-amenity-grid{ grid-template-columns:1fr; }
}


/* ── Package cards ───────────────────────────────────────── */
.mt-package-section{ background:var(--cream-soft); }

.mt-package{
  background:#fff;
  height:100%;
  padding:2.2rem 2rem;
  border:1px solid var(--line);
  position:relative;
}
.mt-package__tag{
  display:inline-block;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-dark);
  background:rgba(187,138,60,.1);
  padding:.4rem .8rem;
  margin-bottom:1rem;
}
.mt-package h3{
  font-family:'Cinzel', serif;
  font-weight:500;
  font-size:1.3rem;
  color:var(--ink);
  margin-bottom:.9rem;
  line-height:1.3;
}
.mt-package p{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.92rem;
  line-height:1.65;
  color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.mt-package__link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.85rem;
  color:var(--gold-dark);
  text-decoration:none;
  border-bottom:1px solid rgba(122,90,58,.35);
  padding-bottom:2px;
  transition:all .3s ease;
}
.mt-package__link:hover{ color:var(--gold); gap:.7rem; }


/* ── Gallery preview strip ───────────────────────────────── */
.mt-preview-section{ background:#fff; }

.mt-preview-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.mt-preview-item{
  display:block;
  overflow:hidden;
  aspect-ratio:4/3;
}
.mt-preview-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  display:block;
}
.mt-preview-item:hover img{ transform:scale(1.08); }

@media (max-width: 767px){
  .mt-preview-strip{ grid-template-columns:repeat(2, 1fr); }
}


/* ── Enquiry form ─────────────────────────────────────────── */
.mt-enquiry-section{ background:var(--cream-soft); }

.mt-enquiry{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:3rem;
  background:#fff;
  border:1px solid var(--line);
  padding:3rem;
}
.mt-enquiry__intro h2{
  font-family:'Cinzel', serif;
  font-weight:500;
  color:var(--ink);
  margin-bottom:1rem;
}
.mt-enquiry__intro em{
  font-style:normal;
  color:var(--gold-dark);
}
.mt-enquiry__intro p{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.92rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:1.6rem;
}

.mt-enquiry__form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem 1.4rem;
}
.mt-field{ display:flex; flex-direction:column; gap:.4rem; }
.mt-field--full{ grid-column:1 / -1; }
.mt-field label{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
.mt-field input,
.mt-field select,
.mt-field textarea{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.92rem;
  color:var(--ink);
  background:var(--cream-soft);
  border:1px solid var(--line);
  padding:.75rem .9rem;
  width:100%;
}
.mt-field input:focus,
.mt-field select:focus,
.mt-field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:#fff;
}
.mt-field textarea{ resize:vertical; }

button.btn-gold.mt-field--full{
  border:0;
  cursor:pointer;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

@media (max-width: 991px){
  .mt-enquiry{ grid-template-columns:1fr; padding:2.2rem; gap:2rem; }
}
@media (max-width: 575px){
  .mt-enquiry{ padding:1.6rem; }
  .mt-enquiry__form{ grid-template-columns:1fr; }
}
/* ══════════════════════════════════════════════════════
   MEETING-ROOMS.PHP — page-specific styles only
   Reuses: explore-hero, gallery-header, mt-ledger / mt-capacity-section
   (from meetings.css), btn-gold, xp-map-strip (from main_styles.css).
   New classes here are namespaced "mr-" to avoid any collision.
   ══════════════════════════════════════════════════════ */


/* ── Ledger rows made clickable (reused .mt-ledger table) ── */
.mr-ledger-link{
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease;
}
.mr-ledger-link:hover{
  background:var(--cream-soft);
}
.mr-ledger-link:hover .mt-ledger__name{
  color:var(--gold-dark);
}


/* ── Jump chip nav ────────────────────────────────────────── */
.mr-jump{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}
.mr-jump::-webkit-scrollbar{ display:none; }
.mr-jump__row{
  display:flex;
  gap:.5rem;
  padding:.9rem 1rem;
  white-space:nowrap;
}
.mr-jump__row a{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--ink-soft);
  text-decoration:none;
  padding:.55rem 1.1rem;
  border:1px solid var(--line);
  border-radius:999px;
  transition:all .25s ease;
  flex:0 0 auto;
}
.mr-jump__row a:hover,
.mr-jump__row a.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

@media (max-width: 575px){
  .mr-jump__row{ padding:.7rem .9rem; }
  .mr-jump__row a{ font-size:.76rem; padding:.5rem .9rem; }
}


/* ── Room detail block ───────────────────────────────────── */
.mr-room{
  padding:5rem 0;
  background:#fff;
  scroll-margin-top:70px;
}
.mr-room--alt{
  background:var(--cream-soft);
}

.mr-room__img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

.mr-room__eyebrow{
  display:block;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:.8rem;
}
.mr-room__title{
  font-family:'Cinzel', serif;
  font-weight:500;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  color:var(--ink);
  margin-bottom:1rem;
}
.mr-room__desc{
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.98rem;
  line-height:1.75;
  color:var(--ink-soft);
  margin-bottom:1.8rem;
  max-width:44ch;
}

/* quick spec row */
.mr-specs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.9rem;
  margin-bottom:1.8rem;
  max-width:420px;
}
.mr-spec{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.85rem;
  color:var(--ink-soft);
}
.mr-spec i{
  color:var(--gold);
  font-size:1rem;
  flex:0 0 auto;
}

/* feature bullets */
.mr-features{
  list-style:none;
  margin:0 0 2rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.mr-features li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  font-family:'LINESeedSansTH', sans-serif;
  font-size:.92rem;
  color:var(--ink-soft);
}
.mr-features li i{
  width:22px; height:22px;
  flex:0 0 22px;
  margin-top:.15rem;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
}

@media (max-width: 767px){
  .mr-room{ padding:3.2rem 0; }
  .mr-room__img{ height:260px; margin-bottom:.5rem; }
  .mr-room__desc{ max-width:none; }
  .mr-specs{ max-width:none; grid-template-columns:1fr 1fr; }
}
/* ══════════════════════════════════════════
   WEDDINGS PAGE — extends meetings.css / meeting-rooms.css
   Reuses existing site variables: --gold, --gold-light, --ink, --cream, etc.
══════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---- Intro ---- */
.wd-intro {
  background: var(--cream, #faf7f2);
}
.wd-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1rem 0;
}
.wd-intro__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ---- Ceremony cards ---- */
.wd-ceremony-card {
  height: 100%;
  padding: 2.5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-top: 3px solid var(--gold);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wd-ceremony-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.wd-ceremony-card__eyebrow {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
  font-weight: 600;
}
.wd-ceremony-card h3 {
  font-family: var(--font-serif, serif);
  margin-bottom: .75rem;
}

/* ---- Venue cards ---- */
.wd-venue-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wd-venue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
  color: inherit;
}
.wd-venue-card__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.wd-venue-card__body {
  padding: 1.5rem;
}
.wd-venue-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.75rem;
}
.wd-venue-card__body h3 {
  font-family: var(--font-serif, serif);
  margin-bottom: 0.5rem;
}
.wd-venue-card__body p {
  margin-bottom: 0.4rem;
}
.wd-venue-card__desc {
  color: #666;
  font-size: 0.92rem;
}

/* ---- Essentials ---- */
.wd-essentials {
  background: var(--cream, #faf7f2);
}
.wd-essential {
  text-align: center;
  padding: 1.5rem 1rem;
}
.wd-essential i {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.wd-essential h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.wd-essential p {
  font-size: 0.88rem;
  color: #666;
}
/* ══════════════════════════════════════════
   SOCIAL EVENTS PAGE — extends meetings.css / meeting-rooms.css
   Reuses existing site variables: --gold, --gold-light, --ink, --cream, etc.
══════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---- Intro ---- */
.se-intro {
  background: var(--cream, #faf7f2);
}
.se-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1rem 0;
}
.se-intro__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ---- Occasion chips ---- */
.se-occasion-card {
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-bottom: 3px solid var(--gold);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.se-occasion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.se-occasion-card i {
  font-size: 2rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}
.se-occasion-card h4 {
  font-size: 0.98rem;
  margin: 0;
}

/* ---- Venue cards ---- */
.se-venue-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.se-venue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
  color: inherit;
}
.se-venue-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.se-venue-card__body {
  padding: 1.5rem;
}
.se-venue-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.75rem;
}
.se-venue-card__body h3 {
  font-family: var(--font-serif, serif);
  margin-bottom: 0.5rem;
}
.se-venue-card__body p {
  margin-bottom: 0.4rem;
}
.se-venue-card__desc {
  color: #666;
  font-size: 0.92rem;
}

/* ---- Essentials ---- */
.se-essentials {
  background: var(--cream, #faf7f2);
}
.se-essential {
  text-align: center;
  padding: 1.5rem 1rem;
}
.se-essential i {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.se-essential h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.se-essential p {
  font-size: 0.88rem;
  color: #666;
}

/* ══════════════════════════════════════════
   STAY PACKAGES PAGE — extends meetings.css / meeting-rooms.css
   Reuses existing site variables: --gold, --gold-light, --ink, --cream, etc.
══════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---- Intro ---- */
.sp-intro {
  background: var(--cream, #faf7f2);
}
.sp-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1rem 0;
}
.sp-intro__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ---- Package cards ---- */
.sp-card {
  height: 100%;
  padding: 2.5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.sp-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
  width: fit-content;
}
.sp-card h3 {
  font-family: var(--font-serif, serif);
  margin-bottom: 0.5rem;
}
.sp-card__price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.sp-card__price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: #666;
  text-transform: none;
}
.sp-card__desc {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.sp-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.sp-card__list li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.92rem;
}
.sp-card__list i {
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--gold);
}
.sp-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.sp-note {
  font-size: 0.85rem;
  color: #888;
}

/* ---- Amenities ---- */
.sp-amenities {
  background: var(--cream, #faf7f2);
}
.sp-amenity {
  text-align: center;
  padding: 1.5rem 1rem;
}
.sp-amenity i {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.sp-amenity h4 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.sp-amenity p {
  font-size: 0.85rem;
  color: #666;
}
/* ══════════════════════════════════════════
   MEETING PACKAGES PAGE — extends meetings.css / meeting-rooms.css
   Reuses existing site variables: --gold, --gold-light, --ink, --cream, etc.
══════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---- Intro ---- */
.mp-intro {
  background: var(--cream, #faf7f2);
}
.mp-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1rem 0;
}
.mp-intro__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ---- Package cards ---- */
.mp-card {
  height: 100%;
  padding: 2.5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.mp-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
  width: fit-content;
}
.mp-card h3 {
  font-family: var(--font-serif, serif);
  margin-bottom: 0.5rem;
}
.mp-card__price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.mp-card__price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: #666;
  text-transform: none;
}
.mp-card__desc {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.mp-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}
.mp-card__list li {
  font-size: 0.9rem;
  padding-left: 1.6rem;
  position: relative;
}
.mp-card__list i {
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--gold);
}
.mp-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.mp-note {
  font-size: 0.85rem;
  color: #888;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.mp-note a {
  color: var(--gold);
  text-decoration: underline;
}

/* ---- Rooms ledger section ---- */
.mp-rooms {
  background: var(--cream, #faf7f2);
}

@media (max-width: 576px) {
  .mp-card__list {
    grid-template-columns: 1fr;
  }
}
/* ══════════════════════════════════════════
   WEDDING PACKAGES PAGE — extends meetings.css / meeting-rooms.css
   Reuses existing site variables: --gold, --gold-light, --ink, --cream, etc.
══════════════════════════════════════════ */

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ---- Intro ---- */
.wp-intro {
  background: var(--cream, #faf7f2);
}
.wp-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1rem 0;
}
.wp-intro__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

/* ---- Package cards ---- */
.wp-card {
  height: 100%;
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-top: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.wp-card--featured {
  border-top-width: 4px;
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
  transform: translateY(-8px);
}
.wp-card--featured:hover {
  transform: translateY(-12px);
}
.wp-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1rem;
  width: fit-content;
}
.wp-card h3 {
  font-family: var(--font-serif, serif);
  margin-bottom: 0.75rem;
}
.wp-card__desc {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.wp-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.wp-card__list li {
  margin-bottom: 0.55rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.92rem;
}
.wp-card__list i {
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--gold);
}
.wp-card .btn {
  align-self: flex-start;
}
.wp-note {
  font-size: 0.85rem;
  color: #888;
}

/* ---- Essentials ---- */
.wp-essentials {
  background: var(--cream, #faf7f2);
}
.wp-essential {
  text-align: center;
  padding: 1.5rem 1rem;
}
.wp-essential i {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  display: block;
}
.wp-essential h4 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.wp-essential p {
  font-size: 0.85rem;
  color: #666;
}

@media (max-width: 991px) {
  .wp-card--featured {
    transform: none;
  }
  .wp-card--featured:hover {
    transform: translateY(-4px);
  }
}

/* ════════════════════════════
   FLOATING CONTACT BUTTONS
   (วางต่อท้าย main_styles.css)
════════════════════════════ */
.float-contact{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1100;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.float-contact__btn{
  position:relative;
  width:50px; height:50px;
  border-radius:50%;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.3rem;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease, opacity .3s ease, visibility .3s;
}
.float-contact__btn:hover{
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 12px 24px -8px rgba(0,0,0,.55);
}
.float-contact__btn:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
}

.float-contact__btn--fb  { background:#1877F2; }
.float-contact__btn--line{ background:#06C755; font-size:1.45rem; }
.float-contact__btn--tel { background:var(--gold); }
.float-contact__btn--tel:hover{ background:var(--gold-dark); }
.float-contact__btn--top { background:var(--ink); }
.float-contact__btn--top:hover{ background:var(--ink-soft); }

/* ปุ่มกลับด้านบน: ซ่อนไว้จนกว่าจะเลื่อนลง */
.float-contact__btn--top{
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
}
.float-contact__btn--top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* Tooltip ด้านซ้ายของปุ่ม (เดสก์ท็อป) */
.float-contact__tip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translate(6px,-50%);
  white-space:nowrap;
  background:rgba(10,66,72,.95);
  color:#fff;
  font-size:.78rem;
  line-height:1;
  padding:.5rem .75rem;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.float-contact__btn:hover .float-contact__tip{
  opacity:1;
  transform:translate(0,-50%);
}

@media (max-width:767px){
  .float-contact{ right:14px; bottom:14px; gap:10px; }
  .float-contact__btn{ width:44px; height:44px; font-size:1.15rem; }
  .float-contact__btn--line{ font-size:1.3rem; }
  .float-contact__tip{ display:none; }
}


/* ════════════════════════════
   DIRECT BOOKING PROMO CARD (ซ้ายล่าง)
════════════════════════════ */
.promo-card{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:99990;
  width:360px;
  max-width:calc(100vw - 110px); /* เว้นที่ให้ปุ่มลอยด้านขวา */
  display:flex;
  align-items:stretch;
  background:var(--cream);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 18px 40px -14px rgba(6,46,50,.55);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(24px);
  transition:opacity .4s ease, transform .4s ease, visibility .4s;
}
.promo-card.is-show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

.promo-card__img{
  flex:0 0 118px;
  margin:10px 0 10px 10px;
  border-radius:5px;
  overflow:hidden;
}
.promo-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.promo-card__body{
  flex:1;
  padding:14px 34px 14px 14px;
  min-width:0;
}
.promo-card__title{
  font-family:'Cinzel', serif;
  font-size:.98rem;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 .3rem;
}
.promo-card__text{
  font-size:.78rem;
  color:#6b6259;
  margin:0 0 .7rem;
  line-height:1.4;
}
.promo-card__btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--gold-dark);
  color:#fff;
  font-size:.5rem !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:3px;
  transition:background .25s ease;
}
.promo-card__btn:hover{ background:var(--gold); color:#fff; }
.promo-card__btn i{ transition:transform .25s ease; }
.promo-card__btn:hover i{ transform:translateX(3px); }

.promo-card__close{
  position:absolute;
  top:8px; right:8px;
  width:26px; height:26px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease;
}
.promo-card__close:hover{ background:rgba(15,92,99,.1); }
.promo-card__close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:767px){
  .promo-card{ left:12px; bottom:14px; width:auto; right:74px; max-width:none; }
  .promo-card__img{ flex-basis:84px; }
  .promo-card__body{ padding:10px 30px 10px 10px; }
  .promo-card__title{ font-size:.85rem; }
  .promo-card__text{ display:none; }
  .promo-card__btn{ font-size:.62rem; padding:.45rem .65rem; }
}


/* ════════════════════════════
   FOOTER — OUR COLLECTION
════════════════════════════ */
footer .fcollection-sub{
  font-size:.8rem;
  line-height:1.4;
  color:rgba(255,255,255,.5);
  margin:-.6rem 0 .8rem;
}
footer ul.fcollection li{ margin-bottom:.45rem; }
footer ul.fcollection li a,
footer ul.fcollection li .is-current{
  display:inline-block;
  line-height:1.45;
}
footer ul.fcollection li a i{
  font-size:.7rem;
  margin-left:3px;
  color:var(--gold);
  transition:transform .25s ease;
}
footer ul.fcollection li a:hover i{ transform:translate(2px,-2px); }
footer ul.fcollection li .is-current{
  color:#fff;
  font-size:.92rem;
}
@media (max-width:991px){
  footer ul.fcollection li .is-current{ font-size:.85rem; }
}

footer .fcollection-wrap .ftitle{ margin-bottom:1rem; }