/* Whale Hua Hin — 2026 design (Bricolage Grotesque display).
   Idea: one day at the hotel. Pages move from pool-blue daylight to a dusk-violet evening, framed by the lobby roof's long timber curve (the "arc" radius on photos). */
:root{
  --aqua:#18C0CC;        /* Whale Aqua (brand) */
  --teal:#0F6B73;
  --ink:#0A2D31;         /* deep teal, near-black */
  --paper:#F4F7F5;
  --white:#fff;
  --teak:#B26E3E;        /* lobby timber */
  --dusk:#2B2552;        /* after sunset */
  --blush:#F1B7A0;
  --muted:#4C6A6E;
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --gut:clamp(20px,5vw,72px);
  --max:1240px;
  --arc:clamp(90px,14vw,220px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{display:block}
figure{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;line-height:1.02;letter-spacing:-.02em;font-variation-settings:"opsz" 72}
h1 em,h2 em{font-style:normal}
p{margin:0 0 1em}

/* Type scale */
.h-display{font-size:clamp(2.8rem,7vw,6rem);font-weight:800}
.h-section{font-size:clamp(2rem,4.2vw,3.4rem);max-width:18ch}
.h-card{font-size:clamp(1.8rem,3vw,2.5rem)}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 1.1em}
.lede{font-size:1.15rem;color:var(--muted);max-width:44ch}

/* Buttons / links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.95em 1.7em;border-radius:999px;font:600 .82rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-aqua{background:var(--aqua);color:var(--ink)}
.btn-aqua:hover{background:#4fd6df}
.btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{border-color:currentColor}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-sm{padding:.7em 1.3em;font-size:.74rem}
.link-arrow{font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;display:inline-block}
.link-arrow::after{content:"→";display:inline-block;margin-left:.5em;transition:transform .2s}
.link-arrow:hover::after{transform:translateX(5px)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* Media */
.media{position:relative;overflow:hidden;background:var(--teal)}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arc{border-radius:var(--arc) 24px 24px 24px}
.ph{position:relative;overflow:hidden;background:var(--teal)}
.ph-note{position:absolute;right:12px;bottom:10px;font:500 .7rem var(--f-body);color:rgba(255,255,255,.75);background:rgba(11,42,51,.4);padding:3px 9px;border-radius:99px}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--gut);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(244,247,245,.95);color:var(--ink);box-shadow:0 1px 0 rgba(10,45,49,.08);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 .9rem var(--f-body);letter-spacing:.22em}
.brand b{font-weight:400;opacity:.8}
.nav{display:flex;gap:30px;font-size:.92rem;font-weight:500}
.nav a{text-decoration:none;opacity:.92}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.header-end{display:flex;align-items:center;gap:16px}
.lang select{background:transparent;color:inherit;border:0;font:600 .85rem var(--f-body);cursor:pointer}
.lang select option{color:var(--ink)}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background:var(--ink)}
.hero-slides{position:absolute;inset:0}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.hero-slides img.is-active{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,45,49,.6) 0%,rgba(10,45,49,.12) 60%,rgba(10,45,49,0) 100%),linear-gradient(180deg,rgba(10,45,49,.45) 0%,rgba(10,45,49,0) 30%,rgba(10,45,49,.5) 100%)}
.hero-copy{position:relative;padding:0 var(--gut) 150px;max-width:var(--max);width:100%;margin:0 auto}
.hero h1{font-size:clamp(3.4rem,11vw,9.5rem);font-weight:800;line-height:.92;letter-spacing:-.04em;margin-bottom:.3em}
.hero h1 em{color:var(--blush)}
.hero p{font-size:clamp(1.05rem,1.8vw,1.35rem);max-width:30ch;margin-bottom:1.6em}
.hero h1,.hero p{text-shadow:0 2px 26px rgba(10,45,49,.35)}
.booking{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:min(1080px,calc(100% - 2*var(--gut)));display:grid;grid-template-columns:1fr 1fr .8fr auto;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 20px 50px rgba(10,45,49,.3);z-index:5}
.booking label{display:flex;flex-direction:column;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 20px;border-right:1px solid rgba(10,45,49,.1)}
.booking input,.booking select{border:0;background:transparent;font:500 1rem var(--f-body);color:var(--ink);padding:4px 0 0;min-width:0}
.booking input:focus,.booking select:focus{outline:none}
.booking label:focus-within{background:var(--paper)}
.booking .btn{margin:10px;border-radius:12px}
.booking .ota{display:flex;align-items:center;gap:6px;padding-right:10px}
.booking .ota .btn{margin:10px 0;white-space:nowrap}
.booking-open,.booking-close{display:none}

/* Sections */
.section{padding:clamp(72px,10vw,140px) var(--gut);max-width:calc(var(--max) + 2*var(--gut));margin:0 auto}
.section-head{margin-bottom:48px}
.section-foot{margin-top:48px;text-align:center}

/* Four reasons — photo tiles */
.reasons{padding-top:clamp(64px,8vw,110px)}
.reasons .h-section{margin-bottom:44px}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tiles li{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;color:#fff}
.tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.tiles li:hover img{transform:scale(1.05)}
.tiles li::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,45,49,.82),rgba(10,45,49,0) 55%)}
.tiles div{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2}
.tiles h3{font-size:1.5rem;margin-bottom:.25em}
.tiles p{margin:0;font-size:.95rem;opacity:.92}
.tiles li:nth-child(even){transform:translateY(28px)}

/* Story */
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center}
.story-copy p{font-size:1.15rem;color:var(--muted);margin:1.2em 0 1.6em}
.collage{position:relative;padding-bottom:14%}
.collage .c1{aspect-ratio:4/5;width:82%}
.collage .c2{position:absolute;right:0;bottom:0;width:48%;aspect-ratio:1/1;border-radius:24px;border:8px solid var(--paper)}

/* Stay — bento */
.stay-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.room{position:relative;border-radius:24px;overflow:hidden;color:#fff;min-height:340px;display:flex;align-items:flex-end;background:var(--ink)}
.room>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.room:hover>img{transform:scale(1.04)}
.room::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,45,49,.85) 0%,rgba(10,45,49,.1) 60%)}
.room-body{position:relative;z-index:2;padding:clamp(22px,3vw,40px);max-width:520px}
.room-body h3{font-size:clamp(1.7rem,2.6vw,2.4rem);margin-bottom:.2em}
.room-body p{margin:0 0 .8em;opacity:.92}
.room-tag{font:600 1.15rem var(--f-display);color:var(--blush)}
.room .from{font-size:.85rem;opacity:1}
.room-feature{grid-column:span 7;grid-row:span 2;min-height:640px}
.room-premier,.room-superior{grid-column:span 5}
.room-family{grid-column:1/-1;min-height:440px}
.room-family::after{background:linear-gradient(90deg,rgba(10,45,49,.85),rgba(10,45,49,.05) 70%)}
.room-family{align-items:center}

/* Full-bleed */
.full{position:relative;min-height:88svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.full::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,45,49,.72),rgba(10,45,49,0) 60%),linear-gradient(90deg,rgba(10,45,49,.45),rgba(10,45,49,0) 60%)}
.full-copy{position:relative;z-index:2;padding:0 var(--gut) clamp(48px,8vw,100px);max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;width:100%}
.full-copy p:not(.eyebrow){font-size:1.2rem;max-width:36ch}
.full .eyebrow{color:var(--aqua)}
.full-copy .h-display{margin-bottom:.35em}

/* Shuttle */
.shuttle{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.shuttle-photo{aspect-ratio:5/4;border-radius:24px 24px 24px var(--arc)}
.note{font-size:.9rem;color:var(--teal);font-weight:600}
.shuttle-card{background:#fff;border-radius:24px;padding:clamp(22px,3vw,36px);margin-top:28px;box-shadow:0 20px 50px rgba(10,45,49,.08)}
.next{display:inline-block;background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;border-radius:999px;padding:.45em 1.1em;margin-bottom:18px}
.next b{color:var(--aqua)}
.shuttle-card table{width:100%;border-collapse:collapse}
.shuttle-card th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-align:left;color:var(--muted);padding:0 0 10px}
.shuttle-card td{padding:14px 0;border-top:1px solid rgba(10,45,49,.1);vertical-align:top}
.shuttle-card td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.shuttle-card td b{display:block;font:600 1.5rem var(--f-display)}
.shuttle-card td span{font-size:.88rem;color:var(--muted)}

/* Rooftop bar — after sunset */
.bar{background:linear-gradient(180deg,var(--paper) 0,var(--dusk) 22%,var(--ink) 100%);color:#fff;padding:clamp(120px,16vw,220px) var(--gut) clamp(72px,10vw,130px)}
.bar-in{max-width:var(--max);margin:0 auto}
.bar-top{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
.bar-photo{aspect-ratio:4/3;border-radius:var(--arc) 24px 24px 24px}
.bar .eyebrow,.bar .hours{color:var(--blush)}
.bar-copy p:not(.eyebrow):not(.hours){font-size:1.2rem;max-width:34ch;color:#DCD8EE}
.hours{font-size:.95rem;font-weight:600;letter-spacing:.04em}
.drinks{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.drinks li{aspect-ratio:2/3;border-radius:16px;overflow:hidden}
.drinks img{width:100%;height:100%;object-fit:cover}

/* Pair */
.pair{display:grid;grid-template-columns:3fr 2fr;gap:clamp(28px,5vw,72px)}
.pair .media{aspect-ratio:4/3;margin-bottom:24px;border-radius:22px}
.pair-well .media{border-radius:var(--arc) 22px 22px 22px}
.pair-breakfast .media{aspect-ratio:4/5}
.pair article p:not(.eyebrow){color:var(--muted);max-width:40ch}
.pair .h-card{margin-bottom:.4em}

/* Play */
.play{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(28px,5vw,72px);align-items:end}
.mosaic{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:clamp(380px,45vw,540px)}
.mosaic figure{position:relative;border-radius:18px;overflow:hidden;background:var(--teal)}
.mosaic figure:first-child{grid-row:span 2}
.mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;color:#fff;font-size:.88rem;background:linear-gradient(0deg,rgba(10,45,49,.78),transparent)}
.mosaic figcaption b{display:block;font:600 1.5rem var(--f-display)}
.mosaic figure.scene-theater{background:linear-gradient(180deg,#2B1B3D,#0F0A1A)}
.mosaic figure.scene-archery{background:radial-gradient(circle at 50% 45%,#fff 0 6%,#E54B4B 6.5% 12%,#fff 12.5% 18%,#1B6CA8 18.5% 25%,transparent 25.5%),linear-gradient(180deg,#B6D9B0,#6FA06A)}

/* Town */
.town{max-width:none;padding-inline:max(var(--gut),calc((100vw - var(--max))/2))}
.town-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.town-list a{display:block;text-decoration:none}
.town-list .ph{aspect-ratio:3/4;border-radius:22px;margin-bottom:16px;transition:transform .4s}
.town-list a:hover .ph{transform:translateY(-6px)}
.town-list h3{font-size:1.5rem}
.town-list p{color:var(--muted);font-size:.9rem;margin-top:.3em}
.t1{background:linear-gradient(180deg,#F2C46D,#C9703A)}
.t2{background:linear-gradient(180deg,#3B2F63,#E58A5A)}
.t3{background:linear-gradient(180deg,#7FD3DE,#2A8A98)}

/* Reviews */
.guests .h-section{margin-bottom:44px}
.review-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.review{padding:28px 0 0;border-top:2px solid var(--ink)}
.review blockquote{margin:0 0 1em;font:600 1.4rem/1.3 var(--f-display);letter-spacing:-.01em}
.review figcaption{font-size:.85rem;color:var(--muted)}
.review .tag{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--teal);margin-bottom:12px}

/* Final */
.final{position:relative;min-height:92svh;display:flex;align-items:center;color:#fff;overflow:hidden;text-align:center;background:var(--dusk)}
.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;background:rgba(43,37,82,.45)}
.final-copy{position:relative;z-index:2;margin:0 auto;padding:80px var(--gut)}
.final-copy h2 em{color:var(--blush)}
.final-copy p{font-size:1.2rem;max-width:34ch;margin:0 auto 1.8em}
.final .cta-row{justify-content:center}
.direct-perks{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;font-size:.9rem}
.direct-perks li::before{content:"✓";color:var(--aqua);margin-right:.6em;font-weight:700}

/* Footer */
.site-footer{background:var(--ink);color:#BFD9DD;padding:72px var(--gut) 100px}
.foot-cols,.foot-base{max-width:var(--max);margin:0 auto}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-cols h3{font:600 .75rem var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--aqua);margin-bottom:14px}
.foot-cols a{display:block;text-decoration:none;padding:5px 0}
.foot-cols a:hover{color:#fff}
.foot-base{padding-top:32px;font-size:.88rem;display:grid;gap:12px}
.foot-base p{margin:0}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.site-footer .lang select{color:#fff}

/* Mobile sticky bar */
.sticky-bar{display:none}

/* Inner pages */
.page-inner .site-header .brand svg circle{fill:#fff}
.page-hero{position:relative;background:linear-gradient(180deg,var(--ink),var(--teal));color:#fff;padding:150px var(--gut) 90px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero.has-img{min-height:min(72svh,680px)}
.page-hero.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,45,49,.78),rgba(10,45,49,.1) 70%),linear-gradient(90deg,rgba(10,45,49,.5),rgba(10,45,49,0) 65%);z-index:1}
.page-hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%}
.page-hero .eyebrow{color:var(--aqua)}
.page-hero .lede{color:#E2EEEE;margin-bottom:1em}
.page-hero .note{color:var(--aqua)}
.prose{max-width:760px}
.prose p{font-size:1.15rem;color:var(--muted)}
.prose .h-section{margin-bottom:.6em;max-width:none}
.prose details{border-top:1px solid rgba(10,45,49,.15);padding:18px 0}
.prose details:last-child{border-bottom:1px solid rgba(10,45,49,.15)}
.prose summary{font:600 1.5rem var(--f-display);cursor:pointer}
.prose details p{margin:.8em 0 0;font-size:1rem}
.photo-band{padding:0 var(--gut);max-width:calc(var(--max) + 2*var(--gut));margin:0 auto}
.photo-band .media{aspect-ratio:21/9;border-radius:24px}
.bus-band .media{aspect-ratio:16/8}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.map-img{width:100%;border-radius:24px;background:#fff}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:32px}
.info-cards article{background:#fff;border-radius:22px;padding:26px}
.info-cards .media,.info-cards .ph{aspect-ratio:4/3;border-radius:16px;margin:-6px -6px 18px}
.info-cards h3{font-size:1.5rem;margin-bottom:.3em}
.info-cards p{color:var(--muted)}
.spec{margin:24px 0 0;max-width:760px}
.spec div{display:flex;gap:24px;padding:14px 0;border-top:1px solid rgba(10,45,49,.15)}
.spec dt{flex:0 0 11em;font-weight:600}
.spec dd{margin:0;color:var(--muted)}
.band-cta{text-align:center;padding:72px var(--gut) 96px}
.band-cta p{font:600 clamp(1.8rem,3.4vw,2.6rem) var(--f-display);margin-bottom:.8em}
.steps{list-style:none;counter-reset:s;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps li{counter-increment:s;border-top:2px solid var(--aqua);padding-top:18px}
.steps li::before{content:counter(s);font:600 3rem var(--f-display);color:var(--teal);display:block;line-height:1}
.steps h3{font-size:1.4rem;margin:.4em 0}
.steps p{color:var(--muted)}
.steps a{font-weight:600}
.final-sm{min-height:60svh;background:var(--ink)}
.route-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.route-tabs button{font:600 .95rem var(--f-body);padding:.7em 1.3em;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.route-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.route-panel{background:#fff;border-radius:24px;padding:clamp(22px,3vw,44px);max-width:640px;box-shadow:0 20px 50px rgba(10,45,49,.08)}
.route-panel h3{font-size:2rem}
.panel-sub{color:var(--muted);margin:.3em 0 1.2em}
.route-panel table{width:100%;border-collapse:collapse}
.route-panel th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-align:left;color:var(--muted);padding-bottom:10px}
.route-panel td{padding:12px 0;border-top:1px solid rgba(10,45,49,.1);font:600 1.6rem var(--f-display);font-variant-numeric:tabular-nums}
.route-panel td:last-child{text-align:right}
.route-panel .is-next td{color:var(--teal)}
.pill{background:var(--aqua);color:var(--ink);font:600 .72rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:.35em .9em;border-radius:99px}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.tiles li.reveal.in:nth-child(even){transform:translateY(28px)}

/* Tablet */
@media (max-width:980px){
  .nav{display:none}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .story,.shuttle,.play,.bar-top{grid-template-columns:1fr}
  .collage{max-width:560px}
  .room-feature{grid-column:1/-1;grid-row:auto;min-height:480px}
  .room-premier,.room-superior{grid-column:span 6}
  .pair{grid-template-columns:1fr}
  .review-list,.town-list{grid-template-columns:1fr}
  .town-list .ph{aspect-ratio:16/10}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .drinks{grid-template-columns:repeat(3,1fr)}
  .drinks li:nth-child(n+4){display:none}
}

/* Mobile */
@media (max-width:720px){
  body{font-size:16px;padding-bottom:64px}
  .header-end .btn{display:none}
  .brand span b{display:none}
  main{display:flex;flex-direction:column}
  #hero{order:1}#reasons{order:2}#story{display:none}#stay{order:4}#pool{order:5}#shuttle{order:6}#bar{order:7}#experiences{order:8}#play{order:9}#hua-hin{order:10}#reviews{order:11}#offers{order:12}
  .hero-copy{padding-bottom:110px}
  .hero .cta-row .btn-ghost{display:none}
  .booking{position:fixed;left:0;right:0;bottom:0;top:auto;transform:translateY(105%);width:100%;grid-template-columns:1fr 1fr;border-radius:22px 22px 0 0;padding:36px 0 0;z-index:80;transition:transform .35s ease}
  .booking.open{transform:none}
  .booking label:nth-of-type(3){grid-column:1/-1;border-top:1px solid rgba(10,45,49,.1)}
  .booking .ota{grid-column:1/-1;padding:0 14px 14px}
  .booking .ota .btn{flex:1;margin:0;padding-left:10px;padding-right:10px}
  .booking .btn{grid-column:1/-1;margin:14px}
  .booking-close{display:block;position:absolute;top:6px;right:10px;border:0;background:none;font-size:1.2rem;padding:8px;cursor:pointer}
  .booking-open{display:inline-flex;position:absolute;left:var(--gut);right:var(--gut);bottom:30px;z-index:5}
  .reasons{overflow:hidden}
  .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1*var(--gut));padding:0 var(--gut) 8px 0;scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}
  .tiles li{flex:0 0 70%;scroll-snap-align:start}
  .tiles li:nth-child(even){transform:none}
  .room-premier,.room-superior{grid-column:1/-1}
  .room{min-height:360px}
  .mosaic{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .mosaic figure,.mosaic figure:first-child{grid-row:auto;aspect-ratio:16/10}
  .foot-cols{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .photo-band .media{aspect-ratio:4/3}
  .spec div{flex-direction:column;gap:2px}
  .page-hero{padding-top:110px}
  .sticky-bar{display:grid;grid-template-columns:1fr 1fr 1.4fr;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;padding:10px 14px;box-shadow:0 -4px 20px rgba(10,45,49,.12)}
  .sticky-bar a:not(.btn){text-align:center;font-weight:600;text-decoration:none;padding:.6em}
  .sticky-bar .btn{padding:.8em 1em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-slides img{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.link-arrow::after,.town-list .ph,.tiles img,.room>img{transition:none}
}

/* Translations: per-language type */
html[lang="th"]{--f-display:'Noto Sans Thai','Bricolage Grotesque',sans-serif;--f-body:'Noto Sans Thai','Instrument Sans',sans-serif}
html[lang="zh"]{--f-display:'Noto Sans SC','Bricolage Grotesque',sans-serif;--f-body:'Noto Sans SC','Instrument Sans',sans-serif}
html[lang="ru"]{--f-display:'Onest','Bricolage Grotesque',sans-serif;--f-body:'Onest','Instrument Sans',sans-serif}
html:not([lang="en"]) h1,html:not([lang="en"]) h2,html:not([lang="en"]) h3{letter-spacing:0;font-weight:600}
html:not([lang="en"]) h1 em,html:not([lang="en"]) h2 em{font-style:normal}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3,html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3{line-height:1.25}
html[lang="th"] .hero h1,html[lang="zh"] .hero h1{font-size:clamp(3rem,9vw,7.5rem);line-height:1.1}
html[lang="th"] .btn,html[lang="zh"] .btn,html[lang="th"] .eyebrow,html[lang="zh"] .eyebrow{text-transform:none;letter-spacing:.03em}
html[lang="ru"] .h-display{font-size:clamp(2.4rem,6vw,5rem)}
html[lang="ru"] .hero h1{font-size:clamp(3rem,9vw,8rem)}
.full .eyebrow{color:#fff;text-shadow:0 1px 14px rgba(10,45,49,.6)}

/* Inner-page refinements */
.page-hero h1{margin-bottom:.3em}
.page-hero .eyebrow{margin-bottom:.8em}
.section.prose{margin-left:max(var(--gut),calc((100vw - var(--max))/2));margin-right:auto;padding-inline:0}
.gallery{grid-auto-flow:dense}
@media (max-width:720px){.section.prose{margin-left:0;padding-inline:var(--gut)}}

/* Logo */
.brand-logo{height:52px;width:auto;display:block}
.brand .logo-color{display:none}
.site-header.scrolled .logo-white{display:none}
.site-header.scrolled .logo-color{display:block}
.foot-logo{height:64px;width:auto;margin:0 auto 36px;max-width:var(--max);display:block;margin-left:max(0px,calc((100vw - var(--max))/2 - var(--gut)))}
@media (max-width:720px){.brand-logo{height:44px}.foot-logo{margin-left:0}}

/* Gallery: hover + photo viewer */
.gallery .g-item{position:relative;display:block;width:100%;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:var(--teal);aspect-ratio:4/3;transition:transform .35s ease,box-shadow .35s ease}
.gallery .g-item img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.gallery .g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,45,49,.45),rgba(10,45,49,0) 45%);opacity:0;transition:opacity .35s}
.gallery .g-item::before{content:"+";position:absolute;right:14px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font:400 1.5rem/38px var(--f-body);text-align:center;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .35s,transform .35s}
.gallery .g-item:hover,.gallery .g-item:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,45,49,.22)}
.gallery .g-item:hover img,.gallery .g-item:focus-visible img{transform:scale(1.07)}
.gallery .g-item:hover::after,.gallery .g-item:focus-visible::after,.gallery .g-item:hover::before,.gallery .g-item:focus-visible::before{opacity:1;transform:none}
.gallery .g-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.gallery .g-item:nth-child(5n+1):not(:first-child){grid-column:auto;grid-row:auto;aspect-ratio:4/3;height:auto}
@media (max-width:720px){.gallery .g-item:first-child{grid-row:auto;aspect-ratio:16/10;height:auto}}

.lb{position:fixed;inset:0;z-index:200;background:rgba(6,24,27,.94);display:flex;align-items:center;justify-content:center;animation:lb-in .25s ease}
.lb[hidden]{display:none}
.lb-open{overflow:hidden}
.lb-stage{margin:0;max-width:min(92vw,1500px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-stage img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:12px;opacity:0;transform:scale(.97);transition:opacity .3s ease,transform .3s ease}
.lb-stage img.in{opacity:1;transform:none}
.lb-stage figcaption{color:#cfe3e5;font-size:.88rem;letter-spacing:.04em}
.lb button{position:absolute;border:0;color:#fff;background:rgba(255,255,255,.12);cursor:pointer;border-radius:50%;width:48px;height:48px;font:400 1.6rem/1 var(--f-body);transition:background .2s,transform .2s}
.lb button:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}
.lb-close{top:18px;right:18px;font-size:1.1rem!important}
.lb-prev{left:18px;top:50%;margin-top:-24px}
.lb-next{right:18px;top:50%;margin-top:-24px}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@media (max-width:720px){.lb-prev,.lb-next{top:auto;bottom:18px;margin-top:0}.lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}.lb-stage img{max-height:74vh}}
@media (prefers-reduced-motion:reduce){.lb,.lb-stage img,.gallery .g-item,.gallery .g-item img,.gallery .g-item::before,.gallery .g-item::after{transition:none;animation:none}.gallery .g-item:hover img{transform:none}}

/* Card hover (rooms index, Hua Hin guide) */
.info-cards article{transition:transform .35s ease,box-shadow .35s ease}
.info-cards article:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,45,49,.14)}
.info-cards .media img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.info-cards article:hover .media img{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.info-cards article,.info-cards .media img{transition:none}.info-cards article:hover{transform:none}}

/* Google Map */
.gmap{border-radius:24px;overflow:hidden;background:#dfe9e8;aspect-ratio:16/8}
.gmap iframe{width:100%;height:100%;border:0;display:block}
.map-links{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:20px 0 0}
@media (max-width:720px){.gmap{aspect-ratio:4/5}}
.gmap{margin-top:48px}

/* Date fields: formatted DD/MM/YYYY text with the native picker invisible on top */
.dfield{position:relative;display:block}
.dfield-text{display:block;font:500 1rem var(--f-body);color:var(--ink);padding:4px 0 0;min-height:1.9em}
.dfield-text.empty{color:#8aa0a3}
.dfield input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}

/* A five-photo gallery would leave a hole in the last row: let the fifth fill it */
.gallery .g-item:nth-child(5):last-child{grid-column:span 2;aspect-ratio:auto;height:100%}
@media (max-width:720px){.gallery .g-item:nth-child(5):last-child{grid-column:auto;aspect-ratio:4/3;height:auto}}