/* โ”€โ”€ Bookmania @font-face (via onlinewebfonts.com CDN) โ”€โ”€ */
 @font-face {
     font-family: "Bookmania";
     font-style: normal;
     font-weight: 300;
     src: url("https://db.onlinewebfonts.com/t/96070aef3f0b77f0ded04986b125c0c2.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/96070aef3f0b77f0ded04986b125c0c2.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/96070aef3f0b77f0ded04986b125c0c2.ttf") format("truetype");
 }

 @font-face {
     font-family: "Bookmania";
     font-style: normal;
     font-weight: 400;
     src: url("https://db.onlinewebfonts.com/t/c5dbc56f321f765543511ecf3739935b.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/c5dbc56f321f765543511ecf3739935b.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/c5dbc56f321f765543511ecf3739935b.ttf") format("truetype");
 }

 @font-face {
     font-family: "Bookmania";
     font-style: italic;
     font-weight: 400;
     src: url("https://db.onlinewebfonts.com/t/557560565ff3b3859a338b4e984fad7b.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/557560565ff3b3859a338b4e984fad7b.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/557560565ff3b3859a338b4e984fad7b.ttf") format("truetype");
 }

 @font-face {
     font-family: "Bookmania";
     font-style: normal;
     font-weight: 600;
     src: url("https://db.onlinewebfonts.com/t/29968bf3838262e13027188e3fb5d22d.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/29968bf3838262e13027188e3fb5d22d.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/29968bf3838262e13027188e3fb5d22d.ttf") format("truetype");
 }

 @font-face {
     font-family: "Bookmania";
     font-style: normal;
     font-weight: 700;
     src: url("https://db.onlinewebfonts.com/t/45d69d39537a77d4c7daa901370933e4.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/45d69d39537a77d4c7daa901370933e4.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/45d69d39537a77d4c7daa901370933e4.ttf") format("truetype");
 }

 @font-face {
     font-family: "Bookmania";
     font-style: normal;
     font-weight: 900;
     src: url("https://db.onlinewebfonts.com/t/14ab47f8c2407900c280b55811929fa6.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/14ab47f8c2407900c280b55811929fa6.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/14ab47f8c2407900c280b55811929fa6.ttf") format("truetype");
 }

 :root {
     /* โ”€โ”€ Brand Guideline Colors โ”€โ”€ */
     --wk-terracotta: #fb9200;
     --wk-terracotta-dark: #d97c00;
     --wk-terracotta-light: #fca933;
     --wk-navy: #2e5582;
     --wk-navy-light: #3a6a9e;
     --wk-charcoal: #353535;
     --wk-dark: #202020;
     --wk-white: #fefefe;
     --wk-off-white: #f8f5f1;
     --wk-cream: #ede7df;
     --wk-warm-gray: #9b958d;
     --wk-teal: #2e8b7a;
     --wk-teal-dark: #1f6b5e;
     /* โ”€โ”€ Brand Guideline Fonts โ”€โ”€ */
     --wk-heading: "Bookmania", serif;
     --wk-body: "DM Sans", Arial, sans-serif;
 }

 html {
     scroll-behavior: smooth;
 }

 /* Only apply momentum scrolling to actual scroll containers, not every element */
 body,
 .offcanvas-menu,
 .tailored-slider {
     -webkit-overflow-scrolling: touch;
 }

 /* โ”€โ”€โ”€ hTop performance hints โ”€โ”€โ”€ */
 #hImgLayer,
 #hImg,
 #hImgCover,
 #hElementsLayer {
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }

 p {
     font-family: "DM Sans", sans-serif !important;
 }

 /* will-change applied only when JS is actively animating */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Bookmania", serif !important;
     font-weight: 600;
     line-height: 1.3;
 }

 body {
     font-family: var(--wk-body);
     color: var(--wk-dark);
     background: #000;
     font-family: "DM Sans", sans-serif !important;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
 }

 /* โ”€โ”€โ”€ ANIMATIONS โ”€โ”€โ”€ */
 @keyframes heroZoom {
     0% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1.15);
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes scrollPulse {

     0%,
     100% {
         opacity: 1;
         transform: translateY(0);
     }

     50% {
         opacity: 0.4;
         transform: translateY(10px);
     }
 }

 /* Scroll-triggered reveal โ€” FADE IN only on mobile, FADE IN/OUT on desktop */
 [data-animate] {
     opacity: 0;
     transform: translateY(40px);
     transition:
         opacity 0.9s ease,
         transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
 }

 [data-animate].visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Fade out only on desktop */
 @media (min-width: 768px) {
     [data-animate].fade-out {
         opacity: 0;
         transform: translateY(-30px);
         transition:
             opacity 0.6s ease,
             transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     }
 }

 /* Elements with parallax (data-stagger): only animate opacity, let JS handle transform */
 [data-animate][data-stagger] {
     opacity: 0;
     transition: opacity 0.9s ease;
 }

 [data-animate][data-stagger].visible {
     opacity: 1;
 }

 @media (min-width: 768px) {
     [data-animate][data-stagger].fade-out {
         opacity: 0;
         transition: opacity 0.6s ease;
     }
 }

 [data-animate="left"] {
     transform: translateX(-50px);
 }

 [data-animate="left"].visible {
     opacity: 1;
     transform: translateX(0);
 }

 @media (min-width: 768px) {
     [data-animate="left"].fade-out {
         opacity: 0;
         transform: translateX(-30px);
     }
 }

 [data-animate="right"] {
     transform: translateX(50px);
     transition-delay: 0.15s;
 }

 [data-animate="right"].visible {
     opacity: 1;
     transform: translateX(0);
 }

 @media (min-width: 768px) {
     [data-animate="right"].fade-out {
         opacity: 0;
         transform: translateX(30px);
         transition-delay: 0s;
     }
 }

 /* Stagger children fade in */
 [data-animate-stagger]>* {
     opacity: 0;
     transform: translateY(25px);
     transition:
         opacity 0.7s ease,
         transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 }

 [data-animate-stagger].visible>* {
     opacity: 1;
     transform: translateY(0);
 }

 @media (min-width: 768px) {
     [data-animate-stagger].fade-out>* {
         opacity: 0;
         transform: translateY(-20px);
         transition:
             opacity 0.5s ease,
             transform 0.5s ease;
     }
 }

 [data-animate-stagger]>*:nth-child(1) {
     transition-delay: 0s;
 }

 [data-animate-stagger]>*:nth-child(2) {
     transition-delay: 0.1s;
 }

 [data-animate-stagger]>*:nth-child(3) {
     transition-delay: 0.2s;
 }

 [data-animate-stagger]>*:nth-child(4) {
     transition-delay: 0.3s;
 }

 [data-animate-stagger]>*:nth-child(5) {
     transition-delay: 0.4s;
 }

 [data-animate-stagger]>*:nth-child(6) {
     transition-delay: 0.5s;
 }

 /* Fade in scale variant */
 [data-animate="scale"] {
     opacity: 0;
     transform: scale(0.88);
     transition:
         opacity 1s ease,
         transform 1s cubic-bezier(0.4, 0, 0.2, 1);
 }

 [data-animate="scale"].visible {
     opacity: 1;
     transform: scale(1);
 }

 @media (min-width: 768px) {
     [data-animate="scale"].fade-out {
         opacity: 0;
         transform: scale(0.95);
         transition:
             opacity 0.6s ease,
             transform 0.6s ease;
     }
 }

 /* Fade in rotate variant */
 [data-animate="rotate"] {
     opacity: 0;
     transform: translateY(30px) rotate(2deg);
     transition:
         opacity 0.9s ease,
         transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
 }

 [data-animate="rotate"].visible {
     opacity: 1;
     transform: translateY(0) rotate(0deg);
 }

 @media (min-width: 768px) {
     [data-animate="rotate"].fade-out {
         opacity: 0;
         transform: translateY(-20px) rotate(-1deg);
     }
 }

 /* Fade in blur variant โ€” disable blur on mobile (GPU heavy) */
 [data-animate="blur"] {
     opacity: 0;
     transform: translateY(20px);
     transition:
         opacity 1s ease,
         transform 1s cubic-bezier(0.4, 0, 0.2, 1);
 }

 @media (min-width: 768px) {
     [data-animate="blur"] {
         filter: blur(8px);
         transition:
             opacity 1s ease,
             filter 1s ease,
             transform 1s cubic-bezier(0.4, 0, 0.2, 1);
     }
 }

 [data-animate="blur"].visible {
     opacity: 1;
     filter: blur(0);
     transform: translateY(0);
 }

 @media (min-width: 768px) {
     [data-animate="blur"].fade-out {
         opacity: 0;
         filter: blur(6px);
         transform: translateY(-15px);
         transition:
             opacity 0.6s ease,
             filter 0.6s ease,
             transform 0.6s ease;
     }
 }

 /* Fade-in clip reveal โ€” wipe from bottom */
 [data-animate="clip"] {
     clip-path: inset(100% 0 0 0);
     opacity: 0;
     transition:
         clip-path 1s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.6s ease;
 }

 [data-animate="clip"].visible {
     clip-path: inset(0 0 0 0);
     opacity: 1;
 }

 @media (min-width: 768px) {
     [data-animate="clip"].fade-out {
         clip-path: inset(0 0 100% 0);
         opacity: 0;
         transition:
             clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1),
             opacity 0.5s ease;
     }
 }

 /* โ”€โ”€โ”€ NAVBAR โ”€โ”€โ”€ */
 .navbar-wk {
     padding-top: 20px;
     padding-bottom: 20px;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar-wk.scrolled {
     background: rgb(0 0 0 / 96%) !important;
     backdrop-filter: blur(16px);
     box-shadow: 0 1px 30px rgba(0, 0, 0, 0.06);
     padding-top: 12px;
     padding-bottom: 12px;
 }

 .navbar-wk .hamburger {
     display: flex;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     background: none;
     border: none;
     padding: 6px;
     flex-shrink: 0;
 }

 .navbar-wk .hamburger span {
     display: block;
     width: 26px;
     height: 1.5px;
     background: #fff;
     transition: background 0.4s;
 }

 .navbar-wk.scrolled .hamburger span {
     background: var(--wk-dark);
 }

 .logo-link {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none !important;
     color: #fff;
     transition: color 0.4s;
     min-width: 0;
 }

 .navbar-wk.scrolled .logo-link {
     color: var(--wk-dark);
 }

 .navbar-wk.scrolled .logo-link .arch-stroke {
     stroke: var(--wk-terracotta);
 }

 .logo-name {
     font-family: var(--wk-heading);
     font-size: 18px;
     letter-spacing: 3px;
     line-height: 1.2;
     white-space: nowrap;
 }

 .logo-sub {
     font-size: 9px;
     letter-spacing: 4px;
     text-transform: uppercase;
     opacity: 0.7;
     white-space: nowrap;
 }

 .lang-switch {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .lang-switch a {
     font-size: 11px;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.65);
     text-decoration: none;
     transition: color 0.4s;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .lang-switch a:hover {
     color: #fff;
 }

 .lang-switch a i {
     font-size: 12px;
 }

 .navbar-wk.scrolled .lang-switch a {
     color: var(--wk-warm-gray);
 }

 .navbar-wk.scrolled .lang-switch a:hover {
     color: var(--wk-dark);
 }

 .lang-switch .sep {
     color: rgba(255, 255, 255, 0.25);
     font-size: 11px;
 }

 .navbar-wk.scrolled .lang-switch .sep {
     color: var(--wk-cream);
 }

 .social-circle {
     width: 36px;
     height: 36px;
     border: 1px solid #f89200;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #f89200 !important;
     font-size: 14px;
     transition: all 0.4s;
     text-decoration: none;
 }

 .navbar-wk.scrolled .social-circle {
     border: 1px solid #f89200;
     color: #f89200 !important;
 }

 .social-circle:hover {
     background: var(--wk-terracotta);
     border-color: var(--wk-terracotta);
     color: #fff !important;
 }

 .btn-book {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     padding: 10px 26px;
     background: transparent;
     border: 1px solid #f89200;
     color: #f89200;
     border-radius: 50px;
     transition: all 0.4s;
     overflow: hidden;
     position: relative;
     white-space: nowrap;
     flex-shrink: 0;
 }

 .navbar-wk.scrolled .btn-book {
     border-color: #f89200;
     color: #f89200;
 }

 .btn-book:hover {
     background: var(--wk-terracotta) !important;
     border-color: var(--wk-terracotta) !important;
     color: #fff !important;
 }

 /* Mobile navbar tweaks */
 @media (max-width: 575.98px) {
     .navbar-wk {
         padding-top: 14px;
         padding-bottom: 14px;
     }

     .navbar-wk.scrolled {
         padding-top: 10px;
         padding-bottom: 10px;
     }

     .logo-name {
         font-size: 15px;
         letter-spacing: 2px;
     }

     .logo-sub {
         display: none;
     }

     .logo-link svg {
         width: 24px;
         height: 28px;
     }

     .logo-link {
         gap: 8px;
     }

     .btn-book {
         font-size: 10px;
         letter-spacing: 1.5px;
         padding: 8px 14px;
     }

     .navbar-wk .hamburger {
         gap: 4px;
     }

     .navbar-wk .hamburger span {
         width: 22px;
     }
 }

 /* โ”€โ”€โ”€ HERO โ”€โ”€โ”€ */
 .hero {
     position: relative;
     height: 100vh;
     overflow: hidden;
 }

 /* YouTube video background */
 .hero-video-wrap {
     position: absolute;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
 }

 .hero-video-wrap::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg,
         rgba(20, 16, 12, 0.35) 0%,
         rgba(20, 16, 12, 0.1) 40%,
         rgba(20, 16, 12, 0.55) 100%);
     z-index: 1;
 }

 .hero-video-wrap iframe {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 180vw;
     height: 180vh;
     min-width: calc(100vh * 16 / 9);
     min-height: calc(100vw * 9 / 16);
     transform: translate(-50%, -50%);
     border: none;
 }

 /* Fallback bg shown while video loads / on mobile (autoplay blocked) */
 .hero-video-fallback {
     position: absolute;
     inset: 0;
     background: url("https://www.wangkaewhotel.com/media/pso/s/img/modules/mod_image_show_gk4/cache/demo.hero1gk-is-109.jpg") center/cover no-repeat;
     z-index: 0;
     transition: opacity 1s ease;
 }

 .hero-video-fallback.hidden {
     opacity: 0;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .hero-logo-large {
     opacity: 0;
     animation: fadeUp 1.2s 0.3s ease-out forwards;
 }

 .hero-title {
     font-family: var(--wk-heading);
     font-size: clamp(22px, 6vw, 72px);
     font-weight: 700;
     letter-spacing: clamp(4px, 2vw, 12px);
     text-transform: uppercase;
     text-shadow: 0 2px 60px rgba(0, 0, 0, 0.3);
     opacity: 0;
     animation: fadeUp 1.2s 0.6s ease-out forwards;
 }

 .hero-subtitle {
     font-size: clamp(10px, 1.5vw, 14px);
     letter-spacing: 6px;
     text-transform: uppercase;
     opacity: 0;
     animation: fadeUp 1.2s 0.9s ease-out forwards;
     color: rgba(255, 255, 255, 0.8);
 }

 .hero-scroll {
     position: absolute;
     bottom: 50px;
     left: auto;
     right: auto;
     z-index: 2;
     width: 100%;
     text-align: center;
     opacity: 0;
     animation: fadeUp 1s 1.6s ease-out forwards;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     white-space: nowrap;
 }

 .hero-scroll .arrow-line {
     display: block;
     width: 1px;
     height: 50px;
     background: rgba(255, 255, 255, 0.6);
     position: relative;
     animation: scrollPulse 2.5s ease-in-out infinite;
 }

 .hero-scroll .arrow-line::after {
     content: "";
     position: absolute;
     bottom: -1px;
     left: 50%;
     transform: translateX(-50%) rotate(0deg);
     width: 0;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 6px solid rgba(255, 255, 255, 0.7);
 }

 .hero-scroll span {
     font-size: 9px;
     letter-spacing: 4px;
     text-transform: uppercase;
     display: block;
     line-height: 1.7;
     text-align: center;
     color: rgba(255, 255, 255, 0.8);
 }

 /* โ”€โ”€โ”€ SECTION HELPERS โ”€โ”€โ”€ */
 .section-label {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--wk-terracotta);
 }

 .section-heading {
     font-family: var(--wk-heading);
     font-size: clamp(30px, 3.5vw, 52px);
     font-weight: 400;
     color: var(--wk-dark);
     line-height: 1.18;
 }

 .section-body {
     font-size: 15px;
     font-weight: 300;
     line-height: 1.95;
     color: var(--wk-warm-gray);
 }

 /* โ”€โ”€โ”€ TAILORED INTRO (white header above sticky slider) โ”€โ”€โ”€ */
 .tailored-intro {
     background: #090909;
     position: relative;
     z-index: 2;
 }

 .tailored-intro-heading {
     font-family: var(--wk-heading);
     font-style: italic;
     font-size: clamp(30px, 3.5vw, 52px);
     line-height: 1.15;
     color: var(--wk-dark);
     font-weight: 400;
 }

 .tailored-intro-body {
     font-size: 18px;
     font-weight: 300;
     line-height: 1.9;
     color: var(--wk-warm-gray);
 }

 .btn-see-more {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     padding: 14px 36px;
     background: var(--wk-terracotta);
     border: 1px solid var(--wk-terracotta);
     color: #fff;
     border-radius: 0;
     text-decoration: none;
     display: inline-block;
     transition: all 0.4s;
     white-space: nowrap;
     overflow: hidden;
     position: relative;
 }

 .btn-see-more:hover {
     background: var(--wk-terracotta-dark);
     border-color: var(--wk-terracotta-dark);
     color: #fff;
 }

 /* โ”€โ”€โ”€ TAILORED โ€” sticky + scroll-driven horizontal slider โ”€โ”€โ”€ */
 .tailored-section {
     position: relative;
     background: #000;
     z-index: 2;
     /* height set by JS */
 }

 /* Sticky viewport */
 .tailored-sticky {
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: hidden;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 /* Slider area */
 .tailored-slider {
     overflow: hidden;
     display: flex;
     align-items: flex-start;
     padding: clamp(20px, 3vh, 40px) 0 clamp(20px, 3vh, 40px);
     padding-left: clamp(28px, 5vw, 80px);
 }

 .tailored-scroller {
     display: flex;
     gap: clamp(24px, 2.5vw, 40px);
     will-change: transform;
     align-items: flex-start;
     padding-right: clamp(28px, 5vw, 80px);
 }

 /* Cards โ€” original style with text below */
 .tailored-card {
     flex-shrink: 0;
     width: clamp(280px, 22vw, 360px);
     text-align: center;
     cursor: pointer;
 }

 .tailored-card .card-img-wrap {
     overflow: hidden;
     aspect-ratio: 4/5;
     margin-bottom: 16px;
 }

 .tailored-card .card-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .tailored-card:hover .card-img-wrap img {
     transform: scale(1.05);
 }

 .tailored-card h4 {
     font-family: "GFS Didot", serif !important;
     font-size: 22px;
     font-weight: 400;
     color: #fff;
     position: static;
     padding: 0;
     margin: 0 0 8px;
 }

 .tailored-card p {
     display: block;
     font-family: "GFS Didot", serif !important;
     font-size: 14px;
     font-weight: 300;
     line-height: 1.7;
     color: #fff;
     margin: 0;
 }

 /* Stagger: even cards push down */
 .tailored-card:nth-child(even) {
     margin-top: 60px;
 }

 @media (max-width: 767.98px) {
     .tailored-card {
         width: 260px;
     }

     .tailored-card:nth-child(even) {
         margin-top: 30px;
     }
 }

 /* โ”€โ”€โ”€ DISCOVER / CAFE SECTION โ”€โ”€โ”€ */
 .discover-section {
     overflow: hidden;
     position: relative;
     z-index: 2;
 }

 .discover-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
     min-height: 700px;
 }

 /* Left top: text block */
 .discover-text {
     background: #000000;
     padding: clamp(40px, 5vw, 80px);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .discover-heading {
     font-family: var(--wk-heading);
     font-style: italic;
     font-size: clamp(30px, 3.5vw, 52px);
     line-height: 1.15;
     color: var(--wk-dark);
 }

 .discover-body {
     font-size: 15px;
     font-weight: 300;
     line-height: 1.9;
     color: var(--wk-warm-gray);
 }

 .btn-explore {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     padding: 14px 32px;
     background: var(--wk-terracotta);
     border: none;
     color: #fff;
     border-radius: 0;
     text-decoration: none;
     display: inline-block;
     transition: all 0.4s;
     overflow: hidden;
     position: relative;
 }

 .btn-explore:hover {
     background: var(--wk-terracotta-dark);
     color: #fff;
 }

 /* Left bottom: split into image + navy box */
 .discover-bottom-left {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 .discover-bottom-left .grid-img {
     overflow: hidden;
     position: relative;
     min-height: 320px;
 }

 .discover-bottom-left .grid-img img {
     width: 100%;
     height: 140%;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
     transform: translateY(-10%);
 }

 .discover-navy {
     background: #000000;
     color: #8c8279;
     padding: clamp(28px, 3vw, 44px);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .discover-navy h5 {
     font-family: var(--wk-heading);
     font-size: 20px;
     font-weight: 400;
     font-style: italic;
     color: #fff;
     margin-bottom: 12px;
 }

 .discover-navy p {
     font-size: 18px;
     font-weight: 300;
     line-height: 1.8;
     color: #8c8279;
     margin-bottom: 0;
 }

 .navy-divider {
     width: 100%;
     height: 1px;
     background: rgba(255, 255, 255, 0.12);
     margin: 24px 0;
 }

 /* Right: tall image spanning both rows */
 .discover-right-img {
     grid-column: 2;
     grid-row: 1 / 3;
     position: relative;
     overflow: hidden;
 }

 .discover-right-img img {
     width: 100%;
     height: 130%;
     object-fit: cover;
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
     transform: translateY(-10%);
 }

 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 68px;
     height: 68px;
     background: var(--wk-terracotta);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 22px;
     box-shadow: 0 4px 30px rgba(212, 113, 60, 0.4);
     transition:
         transform 0.3s,
         box-shadow 0.3s;
     text-decoration: none;
     z-index: 2;
 }

 .play-btn:hover {
     transform: translate(-50%, -50%) scale(1.1);
     box-shadow: 0 6px 40px rgba(212, 113, 60, 0.55);
     color: #fff;
 }

 @media (max-width: 991.98px) {
     .discover-layout {
         grid-template-columns: 1fr;
         grid-template-rows: auto auto auto;
     }

     .discover-right-img {
         grid-column: 1;
         grid-row: auto;
         min-height: 400px;
     }

     .discover-bottom-left .grid-img {
         min-height: 260px;
     }
 }

 @media (max-width: 575.98px) {
     .discover-bottom-left {
         grid-template-columns: 1fr;
     }
 }

 /* โ”€โ”€โ”€ EXPERIENCE โ”€โ”€โ”€ */
 .experience-img {
     overflow: hidden;
     aspect-ratio: 3/4;
     position: relative;
 }

 .experience-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s ease;
 }

 .experience-img:hover img {
     transform: scale(1.03);
 }

 .experience-img::after {
     content: "";
     position: absolute;
     top: 20px;
     left: 20px;
     right: 20px;
     bottom: 20px;
     border: 1px solid rgba(255, 255, 255, 0.25);
     pointer-events: none;
 }

 /* โ”€โ”€โ”€ FEATURE PANELS โ”€โ”€โ”€ */
 .feature-panels {
     background: #090909;
     padding: clamp(40px, 6vw, 80px) 0;
     position: relative;
     z-index: 2;
 }

 .feature-panels .container {
     display: flex;
     flex-direction: column;
     gap: 60px;
 }

 .fp-panel {
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 460px;
     overflow: hidden;
     background: #000;
 }

 /* Text side */
 .fp-text {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding: clamp(40px, 5vw, 80px) clamp(36px, 5vw, 72px);
     background: #090909;
 }

 /* Big ghost number โ€” crops at top like reference */
 .fp-number {
     font-family: var(--wk-heading);
     font-size: clamp(80px, 10vw, 140px);
     font-weight: 400;
     line-height: 0.85;
     color: #ece8e2;
     letter-spacing: -4px;
     margin-bottom: 20px;
     margin-top: -10px;
     user-select: none;
 }

 .fp-label {
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--wk-warm-gray);
     margin-bottom: 14px;
 }

 .fp-heading {
     font-family: var(--wk-heading);
     font-size: clamp(30px, 3.5vw, 52px);
     font-weight: 400;
     line-height: 1.18;
     color: var(--wk-dark);
     margin-bottom: 20px;
 }

 .fp-body {
     font-size: 18px;
     font-weight: 300;
     line-height: 1.85;
     color: var(--wk-warm-gray);
     margin-bottom: 14px;
     max-width: 420px;
 }

 /* Button matching reference: dark navy, small caps */
 .fp-btn {
     display: inline-block;
     margin-top: 10px;
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     padding: 12px 10px;
     width: fit-content;
     background: #f89200;
     color: #fff;
     border: none;
     text-decoration: none;
     transition: background 0.3s;
     overflow: hidden;
     position: relative;
 }

 .fp-btn:hover {
     background: var(--wk-terracotta);
     color: #fff;
 }

 /* Letter-split animation โ€” shared across all buttons */
 .fp-btn .tx__letter,
 .btn-see-more .tx__letter,
 .btn-explore .tx__letter,
 .btn-teal .tx__letter,
 .btn-book .tx__letter {
     display: inline-block;
     transition:
         transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
         opacity 0.35s ease;
 }

 .fp-btn .tx__top .tx__letter,
 .btn-see-more .tx__top .tx__letter,
 .btn-explore .tx__top .tx__letter,
 .btn-teal .tx__top .tx__letter,
 .btn-book .tx__top .tx__letter {
     transform: translateY(0);
     opacity: 1;
 }

 .fp-btn .tx__bottom .tx__letter,
 .btn-see-more .tx__bottom .tx__letter,
 .btn-explore .tx__bottom .tx__letter,
 .btn-teal .tx__bottom .tx__letter,
 .btn-book .tx__bottom .tx__letter {
     transform: translateY(100%);
     opacity: 0;
 }

 .fp-btn:hover .tx__top .tx__letter,
 .btn-see-more:hover .tx__top .tx__letter,
 .btn-explore:hover .tx__top .tx__letter,
 .btn-teal:hover .tx__top .tx__letter,
 .btn-book:hover .tx__top .tx__letter {
     transform: translateY(-100%);
     opacity: 0;
 }

 .fp-btn:hover .tx__bottom .tx__letter,
 .btn-see-more:hover .tx__bottom .tx__letter,
 .btn-explore:hover .tx__bottom .tx__letter,
 .btn-teal:hover .tx__bottom .tx__letter,
 .btn-book:hover .tx__bottom .tx__letter {
     transform: translateY(0);
     opacity: 1;
 }

 .fp-btn .tx__layers,
 .btn-see-more .tx__layers,
 .btn-explore .tx__layers,
 .btn-teal .tx__layers,
 .btn-book .tx__layers {
     position: relative;
     display: inline-block;
 }

 .fp-btn .tx__top,
 .btn-see-more .tx__top,
 .btn-explore .tx__top,
 .btn-teal .tx__top,
 .btn-book .tx__top {
     display: block;
 }

 .fp-btn .tx__bottom,
 .btn-see-more .tx__bottom,
 .btn-explore .tx__bottom,
 .btn-teal .tx__bottom,
 .btn-book .tx__bottom {
     position: absolute;
     top: 0;
     left: 0;
     white-space: nowrap;
 }

 /* Image side โ€” full bleed, no badge */
 .fp-img-wrap {
     position: relative;
     overflow: hidden;
 }

 .fp-img-wrap img {
     position: absolute;
     left: 0;
     width: 100%;
     top: -20%;
     height: 140%;
     object-fit: cover;
     will-change: transform;
 }

 /* Image label at bottom like reference */
 .fp-img-label {
     position: absolute;
     bottom: 24px;
     left: 24px;
     z-index: 2;
     font-family: var(--wk-heading);
     font-size: 16px;
     font-weight: 400;
     font-style: italic;
     color: #fff;
     text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
 }

 @media (max-width: 767.98px) {
     .fp-panel {
         grid-template-columns: 1fr;
         min-height: auto;
     }

     .fp-img-wrap {
         min-height: 300px;
         contain: layout style;
     }

     /* On mobile: fp-img-wrap images are static (no parallax) */
     .fp-img-wrap img {
         position: absolute;
         left: 0;
         width: 100%;
         top: 0;
         height: 100%;
         object-fit: cover;
         will-change: auto;
     }

     /* On mobile, image comes before text for panel 2 */
     .fp-panel.img-first .fp-img-wrap {
         order: -1;
     }
 }

 /* โ”€โ”€โ”€ TRIPTYCH โ”€โ”€โ”€ */
 .triptych-section {
     background: #fff;
     overflow: hidden;
 }

 /* 3-column flex: [left col] [centre slider] [right panel] */
 .triptych-layout {
     display: flex;
     height: 540px;
 }

 /* COL A โ€” Left: bg image behind, navy card overlays bottom half */
 .triptych-col-left {
     width: 22%;
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
 }

 .triptych-col-left-bg {
     position: absolute;
     inset: -10% 0;
     /* extra height for parallax travel */
     background-size: cover;
     background-position: center;
     will-change: transform;
 }

 /* Navy card: inset from left edge, covers bottom-right portion of col */
 .triptych-left {
     position: absolute;
     bottom: 0;
     right: 0;
     left: 18%;
     /* image peeks out on the left */
     height: auto;
     background: var(--wk-navy);
     padding: 32px 30px 40px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     gap: 13px;
     z-index: 2;
 }

 .triptych-tag {
     font-family: var(--wk-heading);
     font-size: 20px;
     font-weight: 400;
     font-style: italic;
     color: #fff;
     margin: 0;
 }

 .triptych-desc {
     font-size: 13px;
     font-weight: 300;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.78);
     margin: 0;
 }

 .btn-teal {
     display: inline-block;
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 10px 22px;
     background: var(--wk-teal);
     color: #fff;
     border: none;
     text-decoration: none;
     transition: background 0.3s;
     white-space: nowrap;
     align-self: center;
     overflow: hidden;
     position: relative;
 }

 .btn-teal:hover {
     background: var(--wk-teal-dark);
     color: #fff;
 }

 /* COL B โ€” Centre: main image slider */
 .triptych-slider {
     flex: 1;
     position: relative;
     overflow: hidden;
 }

 .triptych-slides {
     position: relative;
     width: 100%;
     height: 100%;
 }

 .triptych-slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 0.8s ease;
 }

 .triptych-slide.active {
     opacity: 1;
 }

 .triptych-slide-bg {
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     transition: transform 6s ease;
 }

 .triptych-slide.active .triptych-slide-bg {
     transform: scale(1.04);
 }

 /* Only right arrow visible, matching reference */
 .triptych-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(4px);
     border: 1px solid rgba(255, 255, 255, 0.5);
     color: #fff;
     font-size: 18px;
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 4;
     transition: background 0.3s;
 }

 .triptych-arrow:hover {
     background: rgba(255, 255, 255, 0.32);
 }

 .triptych-arrow.prev {
     left: 14px;
 }

 .triptych-arrow.next {
     right: 14px;
 }

 .triptych-dots {
     position: absolute;
     bottom: 16px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 8px;
     z-index: 4;
 }

 .triptych-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, 0.85);
     background: transparent;
     cursor: pointer;
     padding: 0;
     transition: background 0.3s;
 }

 .triptych-dot.active {
     background: #fff;
 }

 /* Room cards inside navy panel โ€” fade in/out sync with slider */
 .triptych-card {
     display: none;
     flex-direction: column;
     gap: 13px;
     animation: fadeUp 0.5s ease-out forwards;
 }

 .triptych-card.active {
     display: flex;
 }

 .triptych-room-label {
     font-size: 9px;
     font-weight: 500;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--wk-teal);
     margin: 0;
 }

 .triptych-meta {
     display: flex;
     flex-direction: column;
     gap: 5px;
     font-size: 12px;
     font-weight: 300;
     color: rgba(255, 255, 255, 0.65);
 }

 .triptych-meta span {
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .triptych-meta i {
     font-size: 13px;
     color: var(--wk-teal);
 }

 .triptych-right {
     width: 22%;
     flex-shrink: 0;
     background: #ffffff;
     padding: clamp(36px, 4vw, 64px) clamp(28px, 3.5vw, 52px);
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 28px;
 }

 .triptych-heading {
     font-family: var(--wk-heading);
     font-size: clamp(30px, 3.5vw, 52px);
     font-weight: 400;
     line-height: 1.12;
     color: var(--wk-dark);
     margin: 0;
 }

 @media (max-width: 991.98px) {
     .triptych-layout {
         flex-direction: column;
         height: auto;
     }

     /* COL B: slider on top */
     .triptych-slider {
         flex: none;
         width: 100%;
         height: 320px;
         order: 1;
     }

     /* COL A: navy card below slider */
     .triptych-col-left {
         width: 100%;
         height: auto;
         overflow: visible;
         order: 2;
     }

     .triptych-col-left-bg {
         display: none;
     }

     .triptych-left {
         position: relative;
         bottom: auto;
         right: auto;
         left: auto;
         height: auto;
         width: 100%;
         text-align: center;
         align-items: center;
         padding: 36px 28px 40px;
     }

     /* COL C: right panel last */
     .triptych-right {
         width: 100%;
         text-align: center;
         align-items: center;
         padding: 44px 28px;
         order: 3;
     }
 }

 /* โ”€โ”€โ”€ ABOUT โ”€โ”€โ”€ */
 .about-section {
     background: var(--wk-off-white);
 }

 .about-title {
     text-align: left;
 }

 .about-text {
     text-align: left;
 }

 .about-section .section-label {
     text-align: left;
 }

 .about-title {
     font-family: var(--wk-heading);
     font-size: clamp(30px, 3.5vw, 52px);
     font-weight: 400;
     font-style: italic;
     color: var(--wk-dark);
     line-height: 1.18;
 }

 .about-text {
     font-size: 15px;
     font-weight: 300;
     line-height: 2;
     color: var(--wk-warm-gray);
 }

 /* โ”€โ”€โ”€ ACCENT BAR โ”€โ”€โ”€ */
 .accent-bar {
     height: 4px;
     background: linear-gradient(90deg,
         var(--wk-terracotta),
         var(--wk-terracotta-light),
         var(--wk-navy));
 }

 /* โ”€โ”€โ”€ AWARDS โ”€โ”€โ”€ */
 .award-item {
     font-size: 10px;
     letter-spacing: 2px;
     text-transform: uppercase;
     line-height: 1.7;
     color: var(--wk-warm-gray);
 }

 .award-item .icon {
     font-size: 20px;
     display: block;
     color: var(--wk-navy);
 }

 /* โ”€โ”€โ”€ ROOM CARDS โ”€โ”€โ”€ */
 .room-card {
     position: relative;
     overflow: hidden;
     aspect-ratio: 3/4;
     cursor: pointer;
 }

 .room-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .room-card:hover img {
     transform: scale(1.06);
 }

 .room-card-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg,
         rgba(32, 32, 32, 0.6) 0%,
         transparent 50%);
     transition: background 0.5s;
 }

 .room-card:hover .room-card-overlay {
     background: linear-gradient(0deg,
         rgba(32, 32, 32, 0.75) 0%,
         rgba(32, 32, 32, 0.1) 60%);
 }

 .room-card-name {
     font-family: var(--wk-heading);
     font-size: 22px;
 }

 .room-card-desc {
     font-size: 12px;
     font-weight: 300;
     letter-spacing: 1px;
     color: rgba(255, 255, 255, 0.7);
 }

 /* โ”€โ”€โ”€ GALLERY โ”€โ”€โ”€ */
 /* โ”€โ”€โ”€ GALLERY SECTION โ”€โ”€โ”€ */
 .gallery-section {
     background: #090909;
     padding-top: clamp(60px, 8vw, 120px);
     padding-bottom: clamp(60px, 8vw, 120px);
     overflow: hidden;
     position: relative;
     z-index: 2;
 }

 .gallery-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: clamp(36px, 4vw, 60px);
     gap: 24px;
 }

 .gallery-header-left {
     flex: 1;
 }

 .gallery-header-right {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 12px;
     padding-bottom: 6px;
 }

 .gallery-count {
     font-size: 11px;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: var(--wk-warm-gray);
 }

 .gallery-line {
     width: 40px;
     height: 1px;
     background: var(--wk-terracotta);
 }

 /* Masonry-style grid โ€” 3 cols, 3 rows, fixed heights */
 .gallery-grid {
     display: grid;
     grid-template-columns: 1.15fr 0.85fr 1fr;
     grid-template-rows: 280px 280px 320px;
     gap: clamp(6px, 0.8vw, 12px);
 }

 .gallery-item {
     cursor: pointer;
     position: relative;
     overflow: hidden;
     min-height: 0;
     /* prevent blowout */
 }

 .gallery-img-wrap {
     position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;
     /* fill the grid cell fully */
 }

 /* Column + row placement */
 .gallery-item:nth-child(1) {
     grid-column: 1;
     grid-row: 1 / 3;
 }

 /* tall, left */
 .gallery-item:nth-child(2) {
     grid-column: 2 / 4;
     grid-row: 1;
 }

 /* wide top-right */
 .gallery-item:nth-child(3) {
     grid-column: 2;
     grid-row: 2;
 }

 .gallery-item:nth-child(4) {
     grid-column: 3;
     grid-row: 2;
 }

 .gallery-item:nth-child(5) {
     grid-column: 1;
     grid-row: 3;
 }

 .gallery-item:nth-child(6) {
     grid-column: 2;
     grid-row: 3;
 }

 .gallery-item:nth-child(7) {
     grid-column: 3;
     grid-row: 3;
 }

 .gallery-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .gallery-item:hover .gallery-img-wrap img {
     transform: scale(1.08);
 }

 /* Elegant overlay โ€” diagonal gradient + label bottom-left */
 .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(160deg,
         rgba(32, 20, 14, 0) 35%,
         rgba(32, 20, 14, 0.7) 100%);
     opacity: 0;
     transition: opacity 0.5s ease;
     pointer-events: none;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-end;
     padding: clamp(14px, 2vw, 26px);
     z-index: 1;
 }

 .gallery-item:hover .gallery-overlay {
     opacity: 1;
 }

 .gallery-overlay-icon {
     width: 38px;
     height: 38px;
     border: 1px solid rgba(255, 255, 255, 0.45);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 14px;
     margin-bottom: 9px;
     transform: translateY(10px);
     transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .gallery-overlay-label {
     font-size: 10px;
     letter-spacing: 3.5px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.75);
     transform: translateY(10px);
     transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
 }

 .gallery-item:hover .gallery-overlay-icon,
 .gallery-item:hover .gallery-overlay-label {
     transform: translateY(0);
 }

 /* Thin inset border on hover */
 .gallery-img-wrap::after {
     content: "";
     position: absolute;
     inset: 10px;
     border: 1px solid rgba(255, 255, 255, 0);
     transition: border-color 0.5s ease;
     pointer-events: none;
     z-index: 2;
 }

 .gallery-item:hover .gallery-img-wrap::after {
     border-color: rgba(255, 255, 255, 0.2);
 }

 /* Bottom CTA strip */
 .gallery-cta-strip {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: clamp(28px, 3vw, 48px);
     padding-top: clamp(20px, 2vw, 32px);
     border-top: 1px solid var(--wk-cream);
 }

 .gallery-cta-text {
     font-size: 13px;
     color: var(--wk-warm-gray);
     font-weight: 300;
     letter-spacing: 0.3px;
 }

 .gallery-cta-text strong {
     color: #f89200;
     font-weight: 400;
 }

 /* Mobile */
 @media (max-width: 991.98px) {
     .gallery-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 240px 200px 200px 200px;
         gap: 8px;
     }

     .gallery-item:nth-child(1) {
         grid-column: 1 / 3;
         grid-row: 1;
     }

     .gallery-item:nth-child(2) {
         grid-column: 1;
         grid-row: 2;
     }

     .gallery-item:nth-child(3) {
         grid-column: 2;
         grid-row: 2;
     }

     .gallery-item:nth-child(4) {
         grid-column: 1;
         grid-row: 3;
     }

     .gallery-item:nth-child(5) {
         grid-column: 2;
         grid-row: 3;
     }

     .gallery-item:nth-child(6) {
         grid-column: 1;
         grid-row: 4;
     }

     .gallery-item:nth-child(7) {
         grid-column: 2;
         grid-row: 4;
     }

     .gallery-header {
         flex-direction: column;
         align-items: flex-start;
         gap: 14px;
     }

     .gallery-cta-strip {
         flex-direction: column;
         gap: 18px;
         align-items: flex-start;
     }
 }

 @media (max-width: 575.98px) {
     .gallery-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 180px 160px 160px 160px;
         gap: 5px;
     }

     .gallery-overlay {
         display: none;
     }

     .gallery-img-wrap::after {
         display: none;
     }
 }

 /* โ”€โ”€โ”€ GLOBAL STAGGER UP / DOWN โ”€โ”€โ”€ */
 [data-stagger] {
     will-change: transform;
     transition: transform 0s linear;
     /* driven by RAF, no CSS transition */
 }

 /*
   * Every <img> that is NOT inside the hero gets wrapped with .wk-reveal-wrap.
   * The curtain slides away on scroll using clip-path.
   */
 .wk-reveal-wrap {
     position: relative;
     overflow: hidden;
     display: block;
 }

 /* Absolutely-positioned variant (for parallax images) */
 .wk-reveal-wrap.wk-abs {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
 }

 /* The sliding curtain โ€” cream layer */
 .wk-reveal-wrap::after {
     content: "";
     position: absolute;
     inset: 0;
     background: #ffffff33;
     transform-origin: right center;
     transform: scaleX(1);
     transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
     z-index: 2;
     pointer-events: none;
 }

 /* Terracotta flash layer behind cream */
 .wk-reveal-wrap::before {
     content: "";
     position: absolute;
     inset: 0;
     background: #ffffff33;
     transform-origin: right center;
     transform: scaleX(1);
     transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.1s;
     z-index: 3;
     pointer-events: none;
 }

 /* Triggered: both curtains retract right */
 .wk-reveal-wrap.wk-revealed::before {
     transform: scaleX(0);
 }

 .wk-reveal-wrap.wk-revealed::after {
     transform: scaleX(0);
     transition-delay: 0.18s;
 }

 /* Image scales gently into view */
 .wk-reveal-wrap>img {
     transform: scale(1.08);
     transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
 }

 .wk-reveal-wrap.wk-revealed>img {
     transform: scale(1);
 }

 /* Parallax images need to keep their own translateY โ€” only cancel the scale-in via scaleX on wrap */
 .wk-reveal-wrap.wk-abs>img {
     position: absolute;
     left: 0;
     width: 100%;
     top: -20%;
     height: 140%;
     object-fit: cover;
     transform: scale(1);
     /* let parallax JS handle transform */
     transition: none;
 }

 /* โ”€โ”€โ”€ LIGHTBOX โ”€โ”€โ”€ */
 .wk-lightbox {
     position: fixed;
     inset: 0;
     z-index: 9999;
     background: rgba(20, 16, 14, 0.96);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition:
         opacity 0.4s ease,
         visibility 0.4s ease;
 }

 .wk-lightbox.open {
     opacity: 1;
     visibility: visible;
 }

 .wk-lb-img-wrap {
     position: relative;
     max-width: 90vw;
     max-height: 88vh;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .wk-lb-img-wrap img {
     max-width: 90vw;
     max-height: 85vh;
     object-fit: contain;
     border: 1px solid rgba(255, 255, 255, 0.07);
     transform: scale(0.94);
     transition:
         transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
         opacity 0.35s ease;
     opacity: 0;
 }

 .wk-lightbox.open .wk-lb-img-wrap img {
     transform: scale(1);
     opacity: 1;
 }

 /* Close button */
 .wk-lb-close {
     position: fixed;
     top: 24px;
     right: 28px;
     width: 44px;
     height: 44px;
     border: 1px solid rgba(255, 255, 255, 0.25);
     border-radius: 50%;
     background: transparent;
     color: #fff;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s;
     z-index: 2;
 }

 .wk-lb-close:hover {
     background: var(--wk-terracotta);
     border-color: var(--wk-terracotta);
 }

 /* Arrows */
 .wk-lb-arrow {
     position: fixed;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     background: transparent;
     color: #fff;
     font-size: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s;
     z-index: 2;
 }

 .wk-lb-arrow:hover {
     background: var(--wk-terracotta);
     border-color: var(--wk-terracotta);
 }

 .wk-lb-arrow.prev {
     left: 20px;
 }

 .wk-lb-arrow.next {
     right: 20px;
 }

 /* Counter */
 .wk-lb-counter {
     position: fixed;
     bottom: 28px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 11px;
     letter-spacing: 3px;
     color: rgba(255, 255, 255, 0.45);
     text-transform: uppercase;
 }

 /* Hover overlay handled by .gallery-item-overlay element */

 /* โ”€โ”€โ”€ FOOTER โ”€โ”€โ”€ */
 .footer-wk {
     position: relative;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 2;
 }

 .footer-wk::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgb(0 0 0 / 92%);
     backdrop-filter: blur(2px);
 }

 .footer-wk .container {
     position: relative;
     z-index: 2;
 }

 .footer-label {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 3px;
     text-transform: uppercase;
     color: #f89200;
 }

 .footer-label::before {
     content: "โ—";
     margin-right: 8px;
     font-size: 8px;
     vertical-align: middle;
 }

 .footer-hotel-name {
     font-family: var(--wk-heading);
     font-size: clamp(28px, 3vw, 40px);
     font-weight: 400;
     color: #fff;
     line-height: 1.2;
 }

 .footer-address {
     font-size: 14px;
     font-weight: 300;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.7);
 }

 .footer-contact-block {
     font-size: 14px;
     font-weight: 300;
     line-height: 1.9;
     color: rgba(255, 255, 255, 0.55);
 }

 .footer-contact-block span {
     color: rgba(255, 255, 255, 0.75);
     font-weight: 400;
 }

 .footer-contact-block a {
     color: rgba(255, 255, 255, 0.75);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-contact-block a:hover {
     color: #fff;
 }

 .footer-nav {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 4px 0;
 }

 .footer-nav li {
     position: relative;
 }

 .footer-nav li:not(:last-child)::after {
     content: "|";
     color: rgba(255, 255, 255, 0.25);
     margin: 0 12px;
     font-size: 12px;
 }

 .footer-nav li a {
     font-size: 13px;
     font-weight: 300;
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-nav li a:hover {
     color: #fff;
 }

.footer-social a {
    width: 40px;
    height: 40px;
    background-color: #f8920000;
    border: 1px solid rgb(248 146 0);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(248 146 0);
    font-size: 17px;
    text-decoration: none;
    transition: all 0.3s;
}

 .footer-social a:hover {
     background: #f89200;
     border-color: #f89200;
     color: #fff;
 }
.navbar-wk.scrolled .social-circle:hover {
    color: #ffffff !important;
}
 .footer-copyright {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.8;
     color: rgba(255, 255, 255, 0.45);
 }

 .footer-copyright a {
     color: rgba(255, 255, 255, 0.6);
     text-decoration: underline;
     text-underline-offset: 2px;
     transition: color 0.3s;
 }

 .footer-copyright a:hover {
     color: #fff;
 }

 .footer-dot {
     width: 10px;
     height: 10px;
     border: 1.5px solid rgba(255, 255, 255, 0.4);
     border-radius: 50%;
 }

 /* โ”€โ”€โ”€ FOOTER MOBILE โ”€โ”€โ”€ */
 @media (max-width: 767.98px) {
     .footer-wk {
         text-align: center;
     }

     .footer-wk .row.g-5 {
         gap: 2rem 0;
     }

     .footer-hotel-name {
         font-size: clamp(24px, 6vw, 32px);
     }

     .footer-address {
         font-size: 13px;
     }

     .footer-contact-block {
         font-size: 13px;
     }

     .footer-contact-block p {
         text-align: center;
     }

     /* hide the invisible "Tel :" spacer on mobile โ€” stack neatly instead */
     .footer-contact-block span[style*="transparent"] {
         display: none;
     }

     .footer-nav {
         justify-content: center;
         gap: 6px 0;
     }

     .footer-nav li a {
         font-size: 12px;
     }

     .footer-nav li:not(:last-child)::after {
         margin: 0 8px;
     }

     .footer-social {
         justify-content: center;
     }

     .footer-copyright {
         text-align: center;
         font-size: 11px;
     }
 }

 @media (max-width: 575.98px) {
     .footer-wk {
         padding-top: 2.5rem !important;
         padding-bottom: 2.5rem !important;
     }

     .footer-label {
         font-size: 10px;
         letter-spacing: 2px;
     }

     .footer-hotel-name {
         font-size: 22px;
     }

     .footer-nav {
         flex-direction: column;
         align-items: center;
         gap: 10px;
     }

     .footer-nav li:not(:last-child)::after {
         display: none;
     }

     .footer-nav li a {
         font-size: 13px;
     }

     .footer-social a {
         width: 38px;
         height: 38px;
         font-size: 15px;
     }
 }

 .floating-mail {
     position: fixed;
     bottom: 28px;
     right: 88px;
     z-index: 1050;
     width: 44px;
     height: 44px;
     cursor: pointer;
     color: var(--wk-warm-gray);
     transition: color 0.3s;
 }

 .floating-mail:hover {
     color: var(--wk-dark);
 }

 .floating-mail.on-hero {
     color: rgba(255, 255, 255, 0.65);
 }

 .floating-mail.on-hero:hover {
     color: #fff;
 }

 .chat-widget {
     position: fixed;
     bottom: 26px;
     right: 26px;
     z-index: 1050;
     width: 52px;
     height: 52px;
     background: var(--wk-terracotta);
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 4px 24px rgba(212, 113, 60, 0.35);
     transition:
         transform 0.3s,
         box-shadow 0.3s;
 }

 .chat-widget:hover {
     transform: scale(1.08);
     box-shadow: 0 6px 32px rgba(212, 113, 60, 0.45);
 }

 /* โ”€โ”€โ”€ OFFCANVAS MENU โ”€โ”€โ”€ */
 .offcanvas-menu {
     width: 380px !important;
     max-width: 85vw;
     background: #141414;
     border: none;
     border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
 }

 .offcanvas-menu .offcanvas-header {
     padding: 28px 36px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .offcanvas-menu .btn-close {
     filter: invert(1);
     opacity: 0.4;
     transition: opacity 0.3s;
 }

 .offcanvas-menu .btn-close:hover {
     opacity: 0.9;
 }

 .offcanvas-menu .offcanvas-body {
     padding: 20px 36px 36px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .menu-nav {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .menu-nav li {
     border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }

 .menu-nav li a {
     display: block;
     padding: 9px 0;
     font-family: 'Bookmania', serif;
     font-size: 20px;
     font-weight: 400;
     color: rgba(255, 255, 255, 0.55);
     text-decoration: none;
     letter-spacing: 0.5px;
     transition:
         color 0.3s,
         padding-left 0.3s;
 }

 .menu-nav li a:hover {
     color: var(--wk-terracotta);
     padding-left: 8px;
 }

 .menu-nav li:first-child a {
     padding-top: 8px;
 }

 .menu-footer {
     padding-top: 28px;
     border-top: 1px solid rgba(255, 255, 255, 0.07);
 }

 .menu-footer .social-row a {
     width: 38px;
     height: 38px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: rgba(255, 255, 255, 0.35);
     font-size: 15px;
     text-decoration: none;
     transition: all 0.3s;
 }

 .menu-footer .social-row a:hover {
     background: var(--wk-terracotta);
     border-color: var(--wk-terracotta);
     color: #fff;
 }

 .menu-footer .menu-contact {
     font-size: 13px;
     font-weight: 300;
     line-height: 1.9;
     color: rgba(255, 255, 255, 0.3);
 }

 .menu-footer .menu-contact a {
     color: rgba(255, 255, 255, 0.45);
     text-decoration: none;
     transition: color 0.3s;
 }

 .menu-footer .menu-contact a:hover {
     color: var(--wk-terracotta);
 }

 /* โ”€โ”€โ”€ RESPONSIVE โ”€โ”€โ”€ */
 @media (max-width: 991.98px) {

     .lang-switch,
     .social-circle {
         display: none !important;
     }
 }

 /* โ”€โ”€โ”€ SCROLL PROGRESS BAR โ”€โ”€โ”€ */
 #wk-progress {
     position: fixed;
     top: 0;
     left: 0;
     width: 0%;
     height: 2px;
     background: linear-gradient(90deg,
         var(--wk-terracotta),
         var(--wk-terracotta-light));
     z-index: 99996;
     transition: width 0.1s linear;
 }

 /* โ”€โ”€โ”€ SECTION COUNTER โ”€โ”€โ”€ */
 #wk-section-counter {
     position: fixed;
     right: 28px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 1000;
     display: flex;
     flex-direction: column;
     gap: 10px;
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 #wk-section-counter.visible {
     opacity: 1;
 }

 .wk-sec-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: rgba(53, 53, 53, 0.2);
     cursor: pointer;
     transition:
         background 0.3s,
         transform 0.3s;
     position: relative;
 }

 .wk-sec-dot.active {
     background: var(--wk-terracotta);
     transform: scale(1.4);
 }

 .wk-sec-dot:hover {
     background: var(--wk-terracotta-light);
 }

 @media (max-width: 991.98px) {
     #wk-section-counter {
         display: none;
     }
 }

 /* โ”€โ”€โ”€ PRELOADER โ”€โ”€โ”€ */
 #wk-preloader {
     position: fixed;
     inset: 0;
     z-index: 99999;
     background: var(--wk-dark);
     display: flex;
     align-items: center;
     justify-content: center;
     transition:
         opacity 0.5s ease,
         visibility 0.5s ease;
 }

 #wk-preloader .pre-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 32px;
 }

 #wk-preloader.wk-pre-hide {
     opacity: 0;
     visibility: hidden;
 }

 #wk-preloader .pre-logo {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 14px;
 }

 #wk-preloader .pre-name {
     font-family: var(--wk-heading);
     font-size: clamp(18px, 3vw, 24px);
     letter-spacing: 8px;
     text-transform: uppercase;
     color: #fff;
     text-indent: 8px;
 }

 #wk-preloader .pre-sub {
     font-size: 9px;
     letter-spacing: 5px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.45);
     text-indent: 5px;
 }

 #wk-preloader .pre-bar-wrap {
     width: 180px;
     height: 1px;
     background: rgba(255, 255, 255, 0.12);
     position: relative;
     overflow: hidden;
     margin: 0 auto;
 }

 #wk-preloader .pre-bar {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 0%;
     background: var(--wk-terracotta);
     transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #wk-preloader .pre-pct {
     font-size: 10px;
     letter-spacing: 2px;
     color: rgba(255, 255, 255, 0.3);
     text-indent: 2px;
 }

 /* โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
     ENHANCED VISUAL EFFECTS
     โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• */

 /* โ”€โ”€โ”€ HERO ENHANCED โ”€โ”€โ”€ */
 .hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 50% 120%,
         rgba(212, 113, 60, 0.15) 0%,
         transparent 60%);
     z-index: 1;
     pointer-events: none;
 }

 /* Hero text shimmer effect */
 @keyframes textShimmer {
     0% {
         background-position: -200% center;
     }

     100% {
         background-position: 200% center;
     }
 }

 .hero-title-shimmer {
     background: linear-gradient(90deg,
         #fff 0%,
         #fff 40%,
         rgba(212, 113, 60, 0.8) 50%,
         #fff 60%,
         #fff 100%);
     background-size: 200% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: textShimmer 4s ease-in-out infinite;
     animation-delay: 2s;
 }

 /* Hero scroll indicator glow */
 .hero-scroll .arrow-line::before {
     content: "";
     position: absolute;
     bottom: -5px;
     left: 50%;
     transform: translateX(-50%);
     width: 20px;
     height: 20px;
     background: radial-gradient(circle,
         rgba(212, 113, 60, 0.4),
         transparent);
     border-radius: 50%;
     animation: scrollPulse 2.5s ease-in-out infinite;
 }

 /* โ”€โ”€โ”€ MAGNETIC BUTTON EFFECTS โ”€โ”€โ”€ */
 .btn-book,
 .btn-see-more,
 .btn-explore,
 .fp-btn,
 .btn-teal {
     position: relative;
     overflow: hidden;
 }

 .btn-book::before,
 .btn-see-more::before,
 .btn-explore::before,
 .fp-btn::before,
 .btn-teal::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: radial-gradient(circle,
         rgba(255, 255, 255, 0.2),
         transparent);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition:
         width 0.6s ease,
         height 0.6s ease;
     pointer-events: none;
     z-index: 0;
 }

 .btn-book:hover::before,
 .btn-see-more:hover::before,
 .btn-explore:hover::before,
 .fp-btn:hover::before,
 .btn-teal:hover::before {
     width: 300px;
     height: 300px;
 }

 /* โ”€โ”€โ”€ SECTION HEADING REVEAL โ”€โ”€โ”€ */
 @keyframes headingRevealLine {
     from {
         transform: scaleX(0);
     }

     to {
         transform: scaleX(1);
     }
 }

 .section-heading-enhanced {
     position: relative;
     display: inline-block;
 }

 .section-heading-enhanced::after {
     content: "";
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 60px;
     height: 2px;
     background: var(--wk-terracotta);
     transform-origin: left;
     transform: scaleX(0);
     transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
 }

 .section-heading-enhanced.visible::after {
     transform: scaleX(1);
 }

 /* โ”€โ”€โ”€ GALLERY ITEM HOVER โ”€โ”€โ”€ */

 /* โ”€โ”€โ”€ DISCOVER SECTION โ€” ANIMATED DIVIDER โ”€โ”€โ”€ */
 .navy-divider {
     position: relative;
     overflow: hidden;
 }

 .navy-divider::after {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
         transparent,
         rgba(212, 113, 60, 0.5),
         transparent);
     animation: dividerGlow 3s ease-in-out infinite;
 }

 @keyframes dividerGlow {
     0% {
         left: -100%;
     }

     100% {
         left: 100%;
     }
 }

 /* โ”€โ”€โ”€ ENHANCED PRELOADER โ”€โ”€โ”€ */
 @keyframes preloaderPulse {

     0%,
     100% {
         opacity: 0.3;
         transform: scale(1);
     }

     50% {
         opacity: 0.6;
         transform: scale(1.05);
     }
 }

 #wk-preloader .pre-logo {
     animation: preloaderPulse 2s ease-in-out infinite;
 }

 #wk-preloader::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle,
         rgba(212, 113, 60, 0.08),
         transparent 70%);
     animation: preloaderPulse 2.5s ease-in-out infinite;
     pointer-events: none;
 }

 /* โ”€โ”€โ”€ TAILORED CARD ENHANCEMENTS โ”€โ”€โ”€ */
 .tailored-card .card-img-wrap {
     position: relative;
 }

 .tailored-card .card-img-wrap::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg,
         transparent 50%,
         rgba(32, 32, 32, 0.2) 100%);
     opacity: 0;
     transition: opacity 0.6s ease;
     pointer-events: none;
     z-index: 1;
 }

 .tailored-card:hover .card-img-wrap::after {
     opacity: 1;
 }

 .tailored-card h4 {
     transition:
         color 0.4s ease,
         letter-spacing 0.4s ease;
 }

 .tailored-card:hover h4 {
     color: var(--wk-terracotta);
     letter-spacing: 0.5px;
 }

 /* โ”€โ”€โ”€ FP NUMBER COUNTER ANIMATION โ”€โ”€โ”€ */
 @keyframes fpNumberSlide {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fp-number {
     opacity: 0;
     transition: none;
 }

 .fp-number.animated {
     animation: fpNumberSlide 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 /* โ”€โ”€โ”€ ROOM CARD OVERLAY GRADIENT SHIFT โ”€โ”€โ”€ */
 .room-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
         rgba(212, 113, 60, 0.1),
         transparent,
         rgba(46, 85, 130, 0.1));
     opacity: 0;
     transition: opacity 0.6s ease;
     z-index: 1;
     pointer-events: none;
 }

 .room-card:hover::before {
     opacity: 1;
 }

 /* โ”€โ”€โ”€ FOOTER AMBIENT GLOW โ”€โ”€โ”€ */
 .footer-wk::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60%;
     height: 1px;
     background: linear-gradient(90deg,
         transparent,
         rgba(212, 113, 60, 0.3),
         transparent);
     z-index: 2;
 }

 /* โ”€โ”€โ”€ SMOOTH SCROLL SNAP HINT โ”€โ”€โ”€ */
 @keyframes sectionFadeIn {
     from {
         opacity: 0.5;
         filter: blur(2px);
     }

     to {
         opacity: 1;
         filter: blur(0);
     }
 }

 /* โ”€โ”€โ”€ ACCENT BAR ANIMATION โ”€โ”€โ”€ */
 .accent-bar {
     position: relative;
     overflow: hidden;
 }

 .accent-bar::after {
     content: "";
     position: absolute;
     top: 0;
     left: -50%;
     width: 50%;
     height: 100%;
     background: linear-gradient(90deg,
         transparent,
         rgba(255, 255, 255, 0.4),
         transparent);
     animation: accentBarShine 3s ease-in-out infinite;
 }

 @keyframes accentBarShine {
     0% {
         left: -50%;
     }

     100% {
         left: 150%;
     }
 }

 /* โ”€โ”€โ”€ PLAY BUTTON RIPPLE โ”€โ”€โ”€ */
 .play-btn::after {
     content: "";
     position: absolute;
     inset: -8px;
     border: 2px solid rgba(212, 113, 60, 0.4);
     border-radius: 50%;
     animation: playRipple 2s ease-out infinite;
 }

 @keyframes playRipple {
     0% {
         transform: scale(1);
         opacity: 0.6;
     }

     100% {
         transform: scale(1.5);
         opacity: 0;
     }
 }

 /* โ”€โ”€โ”€ SOCIAL CIRCLE GLOW ON HOVER โ”€โ”€โ”€ */
 .social-circle:hover {
     box-shadow: 0 0 20px rgba(212, 113, 60, 0.4);
 }

 /* โ”€โ”€โ”€ TRIPTYCH SLIDE TRANSITION ENHANCE โ”€โ”€โ”€ */
 .triptych-slide {
     transition:
         opacity 1s ease,
         transform 0.8s ease;
 }

 .triptych-slide:not(.active) {
     transform: scale(1.02);
 }

 .triptych-slide.active {
     transform: scale(1);
 }

 /* โ”€โ”€โ”€ ABOUT SECTION TEXT HIGHLIGHT โ”€โ”€โ”€ */
 .about-text::selection {
     background: var(--wk-terracotta);
     color: #fff;
 }

 /* โ”€โ”€โ”€ SMOOTH IMAGE GRAIN OVERLAY (luxury feel) โ”€โ”€โ”€ */
 .hero-video-fallback::before,
 .discover-right-img::before,
 .fp-img-wrap::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 1;
     opacity: 0.5;
     mix-blend-mode: overlay;
 }

 /* โ”€โ”€โ”€ LOADING SKELETON FOR IMAGES โ”€โ”€โ”€ */
 @keyframes imgSkeleton {
     0% {
         background-position: -200% 0;
     }

     100% {
         background-position: 200% 0;
     }
 }

 .wk-reveal-wrap:not(.wk-revealed)::before {
     background: linear-gradient(90deg,
         var(--wk-cream) 25%,
         var(--wk-off-white) 50%,
         var(--wk-cream) 75%) !important;
     background-size: 200% 100% !important;
     animation: imgSkeleton 1.5s ease-in-out infinite !important;
     transform: scaleX(1) !important;
     transition: none !important;
 }

 /* โ”€โ”€โ”€ MOBILE GLOBAL IMPROVEMENTS โ”€โ”€โ”€ */
 @media (max-width: 575.98px) {

     /* Hero booking bar โ€” stacked 2-col layout */
     #heroBookingBar {
         margin-top: 16px;
         border-radius: 8px;
     }

     .hbb-field {
         flex: 0 0 50% !important;
         padding: 12px 14px;
         min-height: 60px;
     }

     .hbb-field.hbb-guests {
         flex: 0 0 50% !important;
     }

     .hbb-label {
         font-size: 8px;
         margin-bottom: 4px;
     }

     .hbb-display {
         font-size: 13px;
     }

     .hbb-search {
         flex: 0 0 100% !important;
         width: 100%;
         height: 44px;
     }

     /* payLook big text โ€” readable on small screens */
     #payLook {
         font-size: 18vw !important;
         margin-left: 4vw !important;
         height: auto !important;
         padding: 8vw 0 4vw !important;
         line-height: 1 !important;
     }

     #payPerfection11 {
         font-size: 8vw !important;
     }

     #payFind {
         font-size: 12vw !important;
         margin-right: 4vw !important;
     }

     #payPerfection {
         font-size: 7vw !important;
         margin-right: 4vw !important;
         padding-bottom: 6vw !important;
     }

     #payLimits {
         font-size: 4vw !important;
         left: 4vw !important;
         bottom: -6vw !important;
     }

     #videoCard {
         display: none !important;
     }

     #hStrip {
         width: 100% !important;
         height: 30vw !important;
     }

     /* ca-intro text */
     .ca-mainContainer {
         width: calc(100% - 8vw) !important;
     }

     .ca-introText {
         width: 100% !important;
         font-size: 18px !important;
         line-height: 30px !important;
         text-align: center;
         padding: 0 4px;
     }

     /* discover section โ€” single column */
     .discover-layout {
         grid-template-columns: 1fr !important;
     }

     .discover-text {
         padding: clamp(28px, 6vw, 48px) !important;
         min-height: auto !important;
     }

     .discover-right-img {
         min-height: 260px !important;
         grid-column: 1 !important;
     }

     .discover-navy {
         padding: 24px 20px !important;
     }

     /* tailored section โ€” scroll-driven on mobile (same as desktop) */
     .tailored-card {
         width: 72vw !important;
         max-width: 320px !important;
     }

     /* feature panels โ€” full width stacked */
     .feature-panels .container {
         gap: 32px !important;
     }

     .fp-panel {
         grid-template-columns: 1fr !important;
     }

     .fp-text {
         padding: 32px 24px !important;
         order: 2 !important;
     }

     .fp-img-wrap {
         min-height: 240px !important;
         order: 1 !important;
     }

     .fp-number {
         font-size: 70px !important;
     }

     .fp-heading {
         font-size: 26px !important;
     }

     /* triptych โ€” vertical stack */
     .triptych-slider {
         height: 260px !important;
     }

     /* tailored intro section padding */
     .tailored-intro {
         padding-top: 48px !important;
         padding-bottom: 36px !important;
     }

     .tailored-intro-heading {
         font-size: 26px !important;
     }

     #payPerfection1 {
         font-size: 7vw !important;
     }

     /* About section */
     .about-title {
         font-size: 26px !important;
     }

     /* Gallery CTA strip */
     .gallery-cta-strip {
         gap: 14px !important;
     }

     /* Floating buttons reposition */
     .floating-mail {
         bottom: 20px !important;
         right: 76px !important;
         width: 40px !important;
         height: 40px !important;
     }

     .chat-widget {
         bottom: 18px !important;
         right: 18px !important;
         width: 46px !important;
         height: 46px !important;
     }

     /* Section headings */
     .section-heading {
         font-size: 26px !important;
     }

     /* Hero logo position on small screens */
     #hLogo {
         top: 24% !important;
     }

     #hLogo>div:first-child {
         font-size: clamp(24px, 7vw, 38px) !important;
     }

     #scrollDown {
         bottom: 12% !important;
         width: 180px !important;
         margin-left: -90px !important;
     }

     /* Navbar on small screens */
     .navbar-wk {
         padding-left: 12px !important;
         padding-right: 12px !important;
     }

     /* Room cards row gap */
     .row.g-4 {
         --bs-gutter-x: 1rem !important;
         --bs-gutter-y: 1rem !important;
     }
 }

 /* โ”€โ”€โ”€ TABLET (576โ€“991px) IMPROVEMENTS โ”€โ”€โ”€ */
 @media (min-width: 576px) and (max-width: 991.98px) {
     #heroBookingBar {
         flex-wrap: wrap;
     }

     .hbb-field {
         flex: 0 0 50%;
         padding: 14px 18px;
     }

     .hbb-field.hbb-guests {
         flex: 0 0 50%;
     }

     .hbb-divider {
         display: none;
     }

     .hbb-field:nth-child(3) {
         border-top: 1px solid rgba(255, 255, 255, 0.13);
     }

     .hbb-field:nth-child(5) {
         border-top: 1px solid rgba(255, 255, 255, 0.13);
     }

     .hbb-search {
         flex: 0 0 100%;
         width: 100%;
         height: 48px;
         font-size: 12px;
         letter-spacing: 0.18em;
         text-transform: uppercase;
         font-family: "DM Sans", sans-serif;
         font-weight: 400;
         gap: 8px;
     }

     .hbb-search::before {
         content: "Check Availability";
         font-size: 11px;
         letter-spacing: 0.22em;
     }

     .hbb-search i {
         display: none;
     }

     /* Tailored slider โ€” scroll-driven on tablet (same as desktop) */
 }

 </style><link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap"
 rel="stylesheet"

 /><style>
 /* โ”€โ”€ CASA ANGELINA HERO โ”€โ”€ */
 .no_overflow {
     overflow: hidden;
 }

 .inline_block {
     display: inline-block;
     will-change: transform;
 }

 .block {
     display: block;
     will-change: transform;
 }

 .uppercase {
     text-transform: uppercase;
 }

 .fit {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     will-change: transform;
 }

 .top_hidden {
     transform: translateY(101%);
 }

 .top_single {
     transform: translateY(50px);
     opacity: 0;
 }

 .top_translated {
     transform: translateY(25vw);
     opacity: 0;
 }

 .show .top_hidden,
 .top_hidden.show {
     transform: none;
 }

 .show .top_single,
 .top_single.show {
     transform: none;
     opacity: 1;
 }

 .show .top_translated,
 .top_translated.show {
     transform: none;
     opacity: 1;
 }

 .has_transition_2000 {
     transition:
         transform 2000ms cubic-bezier(0.19, 1, 0.22, 1),
         opacity 2000ms cubic-bezier(0.19, 1, 0.22, 1);
 }

 .has_transition_3000 {
     transition:
         transform 3000ms cubic-bezier(0.19, 1, 0.22, 1),
         opacity 3000ms cubic-bezier(0.19, 1, 0.22, 1);
 }

 .has_transition_1500 {
     transition:
         transform 1500ms cubic-bezier(0.19, 1, 0.22, 1),
         opacity 1000ms cubic-bezier(0.19, 1, 0.22, 1);
 }

 .show .d100,
 .show.d100 {
     transition-delay: 100ms;
 }

 .show .d200,
 .show.d200 {
     transition-delay: 200ms;
 }

 .show .d300,
 .show.d300 {
     transition-delay: 300ms;
 }

 .show .d400,
 .show.d400 {
     transition-delay: 400ms;
 }

 .show .d500,
 .show.d500 {
     transition-delay: 500ms;
 }

 .show .d150,
 .show.d150 {
     transition-delay: 150ms;
 }

 #hTop {
     position: relative;
     height: 150vh;
 }

 #hImgContainer {
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100vw;
     opacity: 0;
     z-index: 0;
 }

 #hImgContainer.show {
     opacity: 1;
 }

 #hImgLayer {
     position: absolute;
     width: 100%;
     height: 100vh;
     top: 0;
     left: 0;
     will-change: transform;
 }

 #hImgCover {
     height: 100%;
     overflow: hidden;
     width: 100vw;
     will-change: transform;
 }

 /* Desktop only: ใช้ 190vw สำหรับ parallax drift effect */
 @media screen and (min-width: 1200px) and (orientation: landscape) {
     #hImgCover {
         width: 190vw;
     }
 }

 #hImg {
     width: 100vw;
     height: 100vh;
     display: block;
     will-change: transform;
 }

 #hElementsLayer {
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100%;
     will-change: transform;
     z-index: 1;
     pointer-events: none;
 }

 #hLogo {
     width: 380px;
     position: absolute;
     top: 37%;
     left: calc(50% - 190px);
     pointer-events: all;
 }

 #scrollDown {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     position: absolute;
     bottom: 23%;
     left: 50%;
     margin-left: -165px;
     width: 330px;
     text-align: center;
     cursor: pointer;
     pointer-events: all;
 }

 .scrollDownText {
     font-family: "DM Sans", sans-serif;
     font-weight: 300;
     font-size: 14px;
     letter-spacing: 0.5px;
     margin-top: 12px;
     color: #fff;
 }

 #verticalArrow {
     width: 10px;
 }

 @keyframes arrowBounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(8px);
     }
 }

 #verticalArrow.bouncing {
     animation: arrowBounce 1.2s ease-in-out infinite;
 }

 @media (max-width: 767.98px) {

     /* No parallax on mobile โ€” normal 100vh hero */
     #hTop {
         height: 100vh;
     }

     #hImgCover {
         width: 100vw;
     }

     #hImg {
         width: 100vw;
         height: 100vh;
         will-change: auto;
     }

     /* On mobile: disable will-change on elements not actively animating */
     #hImgCover,
     #hElementsLayer {
         will-change: auto;
     }

     /* Contain layout for hero pay section on mobile */
     #hPayLayer {
         contain: layout style;
     }

     /* Disable grain overlay on mobile (SVG filter is GPU heavy) */
     .hero-video-fallback::before,
     .discover-right-img::before,
     .fp-img-wrap::before {
         display: none;
     }

     /* Disable play ripple on mobile */
     .play-btn::after {
         display: none;
     }

     /* Disable divider glow animation on mobile */
     .navy-divider::after {
         display: none;
     }

     /* Disable accent bar shine on mobile */
     .accent-bar::after {
         display: none;
     }

     #hLogo {
         width: 220px;
         left: calc(50% - 110px);
         top: 38%;
     }

     #scrollDown {
         margin-left: -100px;
         width: 200px;
         bottom: 15%;
     }
 }

 #hPay {
     position: relative;
     background: #000;
     z-index: 2;
 }

 #hPayTarget {
     position: absolute;
     top: 50vh;
     height: calc(100% - 50vh);
 }

 #hPayLayer {
     font-family: "DM Sans", sans-serif;
     top: 0;
     left: 0;
     width: 100%;
     display: flex;
     flex-direction: column;
 }

 #hPayLayer span {
     will-change: transform;
 }

 /* payLook โ€” EXACT from casangelina */
 #payLook {
     font-size: 13vw;
     font-weight: 200;
     margin-left: 8vw;
     height: 20vh;
     margin-top: 6vh;
     display: flex;
     position: relative;
     align-items: center;
     overflow: visible;
     color: transparent;
     -webkit-text-stroke: 1px #ccc8c2;
     letter-spacing: -0.02em;
 }

 #payLimits {
     font-size: 2.5vw;
     font-weight: 300;
     position: absolute;
     top: calc(50% + 2.3vw);
     left: 19vw;
     color: #8C8279;
     letter-spacing: 0.1em;
 }

 #payLook .l4 {
     position: relative;
     isolation: isolate;
 }

 #payLook .l4::before {
     content: '';
     position: absolute;
     inset: 0;
     background: #d4713c;
     z-index: -1;
     opacity: 0;
 }

 #payLook.show .l4::before {
     opacity: 1;
     transition: opacity 0.3s ease 0.28s;
 }

 /* videoCard โ€” floats over LOOK */
 #videoCard {
     position: absolute;
     top: -2vh;
     left: 52vw;
     width: 38vw;
     height: 24vh;
     overflow: hidden;
     pointer-events: none;
     will-change: transform, opacity;
     transform-origin: center bottom;
     opacity: 0;
     transform: translateY(80px) scale(0.88);
 }

 /* hStrip */
 #hStrip {
     width: 75vw;
     margin-top: 2.5vw;
     height: 20vh;
     position: relative;
     overflow: hidden;
 }

 #hImgStrip {
     position: absolute;
     top: -35%;
     height: 150%;
     width: 100%;
     will-change: transform;
 }

 #hImgStrip img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* payFind */
 #payFind {
     font-size: 2.5vw;
     font-weight: 200;
     margin-right: 7.5vw;
     font-family: 'Bookmania', serif;
     align-self: flex-end;
     margin-top: -7vw;
     overflow: hidden;
     text-transform: uppercase;
     color: #f89200;
     /* -webkit-text-stroke: 1px #b9933e; */
     letter-spacing: 0.04em;
 }

 #payFind p {
     font-size: 1.5vw;
     font-family: 'Bookmania', serif !important;
     color: #fff;
 }

 /* payPerfection */
 #payPerfection {
     font-family: 'Bookmania', serif;
     text-transform: uppercase;
     font-size: 3vw;
     margin-top: 0.5vw;
     font-weight: 200;
     margin-right: 7.5vw;
     align-self: flex-end;
     color: #fff;
     letter-spacing: 0.04em;
     padding-bottom: 5vh;
 }

 #trueWord {
     position: relative;
     display: inline-block;
 }

 #trueWord::before {
     content: '';
     position: absolute;
     inset: 0 -0.06em;
     background: #fff0;
     z-index: -1;
 }

 /* โ”€โ”€ hPay MOBILE โ”€โ”€ */
 @media (max-width: 767.98px) {
     #hTop {
         height: 100vh;
     }

     #hLogo {
         width: 260px;
         left: calc(50% - 130px);
         top: 40%;
     }

     #scrollDown {
         bottom: 18%;
     }

     #payLook {
         font-size: 20vw;
         margin-left: 4vw;
         height: auto;
         padding: 5vw 0 2vw;
     }

     #payLimits {
         font-size: 3vw;
         top: auto;
         bottom: -5vw;
         left: 4vw;
     }

     #videoCard {
         width: 55vw;
         left: 38vw;
         height: 22vh;
     }

     #hStrip {
         width: 100%;
         height: 28vw;
     }

     #payFind {
         font-size: 10vw;
         margin-right: 5vw;
     }

     #payPerfection {
         font-size: 10vw;
         margin-right: 5vw;
         padding-bottom: 8vw;
     }
 }

 #ca-intro {
     position: relative;
     background: #090909;
     padding-top: 2vw;
     z-index: 2;
 }

 .ca-mainContainer {
     margin: 0 auto;
     width: calc(100% - 15.5vw);
 }

 .ca-introTextContainer {
     display: flex;
     justify-content: center;
 }

 .ca-introText {
     width: 50%;
     font-family: "Bookmania", serif;
     font-weight: 300;
     font-size: 22px;
     line-height: 36px;
     color: #6e6259;
     padding-bottom: 0vw;
 }

 .ca-introText strong {
     display: block;
     font-family: "DM Sans", sans-serif;
     font-weight: 300;
     font-size: 23px;
     letter-spacing: 0.32em;
     text-transform: uppercase;
     color: #f89200;
     margin-bottom: 16px;
     font-style: normal;
 }

 /* โ”€โ”€ HERO BOOKING BAR โ”€โ”€ */
 #hLogo {
     width: min(780px, calc(100vw - 48px)) !important;
     left: 50% !important;
     transform: translateX(-50%) !important;
     top: 32% !important;
 }

 #heroBookingBar {
     margin-top: 32px;
     width: 100%;
     display: flex;
     align-items: stretch;
     background: rgb(255 255 255 / 20%);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     border: 1px solid rgba(255, 255, 255, 0.22);
     border-radius: 24px;
     overflow: hidden;
     pointer-events: all;
     opacity: 0;
     transform: translateY(14px);
     transition:
         opacity 1s ease 1.4s,
         transform 1s cubic-bezier(0.19, 1, 0.22, 1) 1.4s;
 }

 #heroBookingBar.show {
     opacity: 1;
     transform: translateY(0);
 }

 .hbb-field {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 16px 22px;
     position: relative;
     cursor: pointer;
     transition: background 0.25s ease;
     min-width: 0;
 }

 .hbb-field:hover {
     background: rgba(255, 255, 255, 0.08);
 }

 .hbb-label {
     font-family: "DM Sans", sans-serif;
     font-size: 9px;
     font-weight: 400;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.55);
     margin-bottom: 6px;
     display: block;
 }

 .hbb-display {
     font-family: "Bookmania", serif;
     font-size: 15px;
     font-weight: 300;
     color: #fff;
     letter-spacing: 0.04em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     display: flex;
     align-items: center;
     gap: 6px;
     pointer-events: none;
     /* let clicks pass through to input below */
     position: relative;
     z-index: 0;
 }

 .hbb-display i {
     font-size: 11px;
     opacity: 0.6;
 }

 /* Hidden native inputs โ€” sit on top, cover entire field */
 .hbb-select {
     position: absolute;
     inset: 0;
     opacity: 0;
     cursor: pointer;
     width: 100%;
     height: 100%;
     border: none;
     background: none;
     font-size: 16px;
     z-index: 3;
 }

 .hbb-divider {
     width: 1px;
     background: rgba(255, 255, 255, 0.15);
     flex-shrink: 0;
     margin: 14px 0;
 }

 /* Guest counter */
 .hbb-guests {
     min-width: 120px;
     flex: 0 0 auto;
 }

 .hbb-counter {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .hbb-cnt-btn {
     width: 26px;
     height: 26px;
     border: 1px solid rgba(255, 255, 255, 0.35);
     border-radius: 50%;
     background: transparent;
     color: #fff;
     font-size: 16px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition:
         background 0.2s,
         border-color 0.2s;
     flex-shrink: 0;
 }

 .hbb-cnt-btn:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.6);
 }

 .hbb-cnt-val {
     font-family: "Bookmania", serif;
     font-size: 18px;
     font-weight: 300;
     color: #fff;
     min-width: 20px;
     text-align: center;
 }

 /* Search button */
 .hbb-search {
     flex-shrink: 0;
     width: 72px;
     background: var(--wk-terracotta);
     border: none;
     color: #fff;
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s;
 }

 .hbb-search:hover {
     background: var(--wk-terracotta-dark);
 }

 /* Mobile */
 @media (max-width: 767.98px) {
     #payPerfection1 {
         font-size: 10vw !important;
     }

     .ca-introText {
         width: 100%;
         text-align: center;
     }

     #payPerfection11 {
         font-size: 10vw !important;
     }

     #hLogo {
         width: calc(100vw - 32px) !important;
         top: 28% !important;
     }

     #heroBookingBar {
         margin-top: 24px;
         flex-wrap: wrap;
         border-radius: 6px;
     }

     .hbb-field {
         flex: 0 0 50%;
         padding: 13px 16px;
     }

     .hbb-field.hbb-guests {
         flex: 0 0 50%;
     }

     .hbb-divider {
         display: none;
     }

     /* Full-width horizontal divider between rows */
     .hbb-field:nth-child(3) {
         border-top: 1px solid rgba(255, 255, 255, 0.13);
     }

     .hbb-field:nth-child(5) {
         border-top: 1px solid rgba(255, 255, 255, 0.13);
     }

     .hbb-search {
         flex: 0 0 100%;
         width: 100%;
         height: 46px;
         font-size: 13px;
         letter-spacing: 0.18em;
         text-transform: uppercase;
         font-family: "DM Sans", sans-serif;
         font-weight: 400;
         gap: 8px;
     }

     .hbb-search::before {
         content: "Check Availability";
         font-size: 11px;
         letter-spacing: 0.22em;
     }

     .hbb-search i {
         display: none;
     }
 }

 #payPerfection1 {
     font-family: 'Bookmania', serif;
     margin-top: 2vw;
     font-weight: 200;
     font-size: 3vw;
     padding-right: 4vw;
     grid-column: 1 / -1;
     grid-row: 3;
     text-align: left;
     color: #fff;
     letter-spacing: 0.04em;
     padding-bottom: 5vh;
 }

 #payPerfection11 {
     font-family: 'Bookmania', serif;
     font-size: 3vw;
     margin-top: 2vw;
     font-weight: 200;
     padding-right: 4vw;
     grid-column: 1 / -1;
     grid-row: 3;
     text-align: left;
     color: #fff;
     letter-spacing: 0.04em;
     padding-bottom: 5vh;
 }
.section-intro span{
    color: #f89200;
}
.section-intro h2{
    color: #fff;
}
.address-band span{
    color: #f89200;
}
.section-form span{
    color: #f89200;
}
.section-intro1 {
    padding: 5.5rem 0 70px !important;
    background: var(--black);
}

 /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */


  /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */



  /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */


 /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 /* โ”€โ”€โ”€ faq โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .faq-hero {
     height: 56vh;
     min-height: 360px;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: flex-end;
 }

 .faq-hero-bg {
     position: absolute;
     inset: 0;
     background-image: url("https://www.wangkaewhotel.com/media/pso/s/img/modules/mod_image_show_gk4/cache/demo.hero2gk-is-109.jpg");
     background-size: cover;
     background-position: center 30%;
     filter: brightness(0.3);
 }

 .faq-hero-inner {
     position: relative;
     z-index: 2;
     padding: 0 5vw 4.5rem;
     width: 100%;
 }

 .faq-eyebrow {
     font-family: var(--wk-body);
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: var(--wk-orange);
     display: block;
     margin-bottom: 0.9rem;
     opacity: 0;
     animation: fadeUp 0.9s ease 0.35s forwards;
 }

 .faq-big-title {
     font-family: var(--wk-heading) !important;
     font-size: clamp(5rem, 12vw, 11rem) !important;
     font-weight: 300 !important;
     color: #fff;
     line-height: 0.88;
     letter-spacing: -0.02em;
     opacity: 0;
     animation: fadeUp 0.9s ease 0.5s forwards;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(28px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 /* โ”€โ”€ BODY WRAPPER โ”€โ”€ */
 .faq-body {
     background: var(--wk-off-white);
 }

 /* โ”€โ”€ LEFT-BAR HELPER (like Casa Angelina oLeftBar) โ”€โ”€ */
 .ca-lbar {
     display: flex;
     flex-direction: column;
     padding-top: 4px;
 }

 .ca-lbar-line {
     width: 36px;
     height: 1px;
     background: var(--wk-orange);
     margin-bottom: 0.75rem;
 }

 .ca-lbar-text {
     font-family: var(--wk-body);
     font-size: 10px;
     font-weight: 500;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--wk-warm-gray);
 }

 /* โ”€โ”€ INDEX SECTION โ”€โ”€ */
 .faq-index {
     padding: 5.5rem 5vw 4.5rem;
     background-color: #000;
     display: grid;
     grid-template-columns: 180px 1fr;
     gap: 5rem;
     border-bottom: 1px solid var(--wk-cream);
 }

 .faq-index-intro {
     font-size: 16px;
     font-weight: 300;
     color: var(--wk-charcoal);
     line-height: 1.75;
     margin-bottom: 2.5rem;
     max-width: 600px;
 }

 .faq-toc {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .faq-toc li {
     border-top: 1px solid var(--wk-cream);
 }

 .faq-toc li:last-child {
     border-bottom: 1px solid var(--wk-cream);
 }

 .faq-toc-link {
     display: flex;
     align-items: baseline;
     gap: 1rem;
     padding: 0.9rem 0;
     text-decoration: none;
     color: var(--wk-charcoal);
     font-size: 14.5px;
     font-weight: 300;
     transition: color 0.25s, padding-left 0.25s;
 }

 .faq-toc-link:hover {
     color: var(--wk-orange);
     padding-left: 10px;
 }

 .faq-toc-num {
     font-size: 11px;
     color: var(--wk-orange);
     min-width: 30px;
     font-weight: 400;
 }

 /* โ”€โ”€ CONTENT SECTION โ”€โ”€ */
 .faq-content {
     background-color: #000;
     padding: 10.5rem 5vw 7rem;
     display: grid;
     grid-template-columns: 180px 1fr;
     gap: 5rem;
 }

 .faq-groups {
     display: flex;
     flex-direction: column;
 }

 .faq-group {
     padding-bottom: 5rem;
 }

 .faq-group:last-child {
     padding-bottom: 0;
 }

 .faq-group-h {

     font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
     font-weight: 400 !important;
     color: #f89200;
     display: flex;
     align-items: center;
     gap: 0.7rem;
     padding-bottom: 1.25rem;
     margin-bottom: 0;
     border-bottom: 1px solid #ede7df21;
 }

 .faq-item {
     display: grid;
     grid-template-columns: 52px 1fr;
     gap: 1.25rem;
     border-top: 1px solid #ede7df21;
     padding: 1.9rem 0;
     opacity: 0;
     transform: translateY(16px);
     transition: opacity 0.5s ease, transform 0.5s ease;
 }

 .faq-item.show {
     opacity: 1;
     transform: translateY(0);
 }

 .faq-item:last-child {
     border-bottom: 1px solid var(--wk-cream);
 }

 .faq-num {
     /* font-family: var(--wk-heading); */
     /* font-style: italic; */
     font-size: 15px;
     color: #f89200;
     font-weight: 300;
     padding-top: 2px;
     opacity: 0.9;
 }

 .faq-q {
     font-family: var(--wk-heading) !important;
     font-size: clamp(1rem, 1.35vw, 1.12rem) !important;
     font-weight: 400 !important;
     color: #f89200;
     margin-bottom: 0.6rem;
     line-height: 1.45;
 }

 .faq-a {
     font-size: 14.5px;
     font-weight: 300;
     line-height: 1.85;
     color: #aeaeae;
     margin: 0;
 }








 /* โ”€โ”€โ”€ contact โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 /* โ”€โ”€โ”€ contact โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .section-intro {
     padding: 10.5rem 0 70px;
     background: var(--black);
 }

 .intro-text p {
     font-size: 0.9rem;
     line-height: 2;
     color: var(--muted);
 }

 /* Photo stack */
 .photo-stack {
     position: relative;
     height: 460px;
 }

 .photo-stack img:first-child {
     position: absolute;
     top: 0;
     right: 30px;
     width: 60%;
     height: 300px;
     object-fit: cover;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
 }

 .photo-stack img:last-child {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 54%;
     height: 250px;
     object-fit: cover;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }

 /* โ”€โ”€โ”€ ADDRESS BAND โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .address-band {
     background: var(--d2);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     padding: 70px 0;
 }

 .address-text {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.1rem;
     font-weight: 300;
     line-height: 1.9;
     letter-spacing: 0.04em;
     color: rgba(255, 255, 255, 0.85);
 }

 .vertical-label {
     writing-mode: vertical-rl;
     text-orientation: mixed;
     transform: rotate(180deg);
     font-size: 0.58rem;
     letter-spacing: 0.42em;
     text-transform: uppercase;
     color: var(--gold);
     margin-right: 48px;
     flex-shrink: 0;
 }

 /* Email rows */
 .email-item {
     border-bottom: 1px solid var(--border);
     padding: 17px 0;
     transition: border-color 0.3s;
 }

 .email-item:last-child {
     border-bottom: none;
 }

 .email-item:hover {
     border-bottom-color: var(--gold);
 }

 .email-type {
     font-size: 0.56rem;
     letter-spacing: 0.32em;
     text-transform: uppercase;
     color: var(--muted);
     display: block;
     margin-bottom: 4px;
 }

 .email-link {
     color: rgba(255, 255, 255, 0.88);
     text-decoration: none;
     font-size: 0.85rem;
     letter-spacing: 0.05em;
     transition: color 0.3s;
 }

 .email-link:hover {
     color: var(--gold);
 }

 /* โ”€โ”€โ”€ FORM SECTION โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .section-form {
     padding: 100px 0;
     background: var(--black);
     border-top: 1px solid var(--border);
 }

 .form-big-label {
     font-size: clamp(2.8rem, 6vw, 3.5rem);
     font-weight: 300;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--white);
     line-height: 1;
 }

 .form-big-label em {
     display: block;
     font-size: 0.3em;
     font-style: italic;
     letter-spacing: 0.12em;
     color: var(--muted);
     margin-top: 14px;
     text-transform: none;
 }

 .wk-form .form-label {
     font-size: 0.53rem;
     letter-spacing: 0.32em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.32);
     margin-bottom: 0;
 }

 .wk-form .form-control,
 .wk-form .form-select {
     background: transparent;
     border: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.13);
     border-radius: 0;
     color: var(--white);
     font-family: 'Montserrat', sans-serif;
     font-size: 0.82rem;
     font-weight: 300;
     letter-spacing: 0.07em;
     padding: 12px 0;
     box-shadow: none;
     transition: border-color 0.3s;
 }

 .wk-form .form-control:focus,
 .wk-form .form-select:focus {
     border-bottom-color: var(--gold);
     background: transparent;
     color: var(--white);
     box-shadow: none;
 }

 .wk-form .form-control::placeholder {
     color: rgba(255, 255, 255, 0.18);
 }

 .wk-form textarea.form-control {
     resize: none;
     min-height: 110px;
 }

 .wk-form .form-select option {
     background: var(--d3);
     color: var(--white);
 }

 .btn-send {
     background: var(--gold);
     color: var(--black);
     border: none;
     font-family: 'Montserrat', sans-serif;
     font-size: 0.62rem;
     font-weight: 500;
     letter-spacing: 0.32em;
     text-transform: uppercase;
     padding: 16px 52px;
     cursor: pointer;
     transition: all 0.3s;
     margin-top: 12px;
 }

 .btn-send:hover {
     background: var(--white);
     color: var(--black);
 }

 /* โ”€โ”€โ”€ WORLD CLOCKS โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .world-clocks {
     background: var(--d3);
     border-top: 1px solid var(--border);
     padding: 30px 0;
 }

 .clock-wrap {
     display: flex;
     justify-content: space-around;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
 }

 .clock-item {
     text-align: center;
     padding: 6px 20px;
     border-right: 1px solid var(--border);
     min-width: 100px;
 }

 .clock-item:last-child {
     border-right: none;
 }

 .clock-city {
     font-size: 0.52rem;
     letter-spacing: 0.32em;
     text-transform: uppercase;
     color: var(--muted);
     display: block;
     margin-bottom: 4px;
 }

 .clock-time {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.4rem;
     font-weight: 300;
     color: var(--white);
 }

 /* โ”€โ”€โ”€ MAP โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .section-map {
     position: relative;
     background: var(--black);
     border-top: 1px solid var(--border);
 }

 .map-frame {
     width: 100%;
     height: 420px;
     border: none;
     filter: grayscale(85%) invert(90%) contrast(85%);
     opacity: 0.65;
     display: block;
 }

 .map-card {
     position: absolute;
     top: 50%;
     left: 6%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.94);
     border: 1px solid var(--border);
     border-left: 2px solid var(--gold);
     padding: 36px 32px;
     max-width: 310px;
     z-index: 10;
 }

 /* โ”€โ”€โ”€ NEWSLETTER โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .section-newsletter {
     padding: 90px 0;
     background: var(--black);
     border-top: 1px solid var(--border);
 }

 .newsletter-box {
     border: 1px solid var(--border);
     padding: 70px 60px;
 }

 .interest-tag {
     display: inline-block;
     border: 1px solid rgba(255, 255, 255, 0.15);
     font-size: 0.58rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     padding: 8px 18px;
     margin: 5px 3px;
     cursor: pointer;
     color: var(--muted);
     transition: all 0.3s;
 }

 .interest-tag:hover,
 .interest-tag.active {
     background: var(--gold);
     color: var(--black);
     border-color: var(--gold);
 }

 /* โ”€โ”€โ”€ FADE-UP โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 .fade-up {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.88s ease, transform 0.88s ease;
 }

 .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* โ”€โ”€โ”€ RESPONSIVE โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */
 @media (max-width: 991px) {
     .hero-inner {
         padding: 0 30px;
     }

     .photo-stack {
         display: none;
     }

     .intro-text {
         margin-bottom: 0;
     }

     .vertical-label {
         display: none;
     }

     .map-card {
         position: static;
         transform: none;
         max-width: 100%;
         border-left: none;
         border-top: 2px solid var(--gold);
     }

     .newsletter-box {
         padding: 40px 28px;
     }
 }

 @media (max-width: 767px) {
     .hero {
         min-height: 280px;
         height: 45vh;
         padding-bottom: 40px;
     }

     .section-intro,
     .section-form,
     .section-newsletter {
         padding: 60px 0;
     }

     .clock-item {
         border-right: none;
     }

     .map-frame {
         height: 260px;
     }
 }