/* ---------- Web fonts, served from this site ---------------------
   Playfair Display (a variable font, 400 to 500) and Poppins 300/400/500,
   Latin subset, in assets/fonts. Self-hosted so no request goes to Google,
   the fonts arrive with the page, and the text never waits on a third
   party. Rebuild from Google Fonts if a weight is ever added. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/playfair-display-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/poppins-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =============================================================
   Colombo Court Hotel & Spa
   Design direction: "A day in the court."
   The page's light warms from morning through noon into late
   afternoon as you descend. Only the photographs go dark; every
   surface on the page is a warm off-white, linen or sand.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */
:root{
  /* ink */
  --ink:#26221E;            /* warm charcoal, never pure black */
  --ink-soft:#4A443C;
  --stone:#5F5952;          /* meta on light, 5.2:1 on the warmest stop */
  --espresso:#241F1A;       /* the one dark panel on the page: the enquiry form */
  --stone-l:#A79E93;        /* meta on espresso, 6.3:1 */

  /* light */
  --cream:#FCFAF6;
  --paper:#F7F4EF;
  --linen:#FAF0E6;
  --dawn:#EDE8E0;
  --sand:#E7D5BE;

  /* accent, in rare doses */
  --crimson:#C0222E;
  --crimson-d:#A31C27;
  --wa:#25D366;             /* WhatsApp green */
  --wa-d:#1EBE5A;

  --rule:rgba(38,34,30,.14);
  --rule-2:rgba(38,34,30,.09);

  /* type */
  --f-display:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  --f-body:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* rhythm */
  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:82.5rem;              /* 1320px */
  --sec-y:clamp(2.75rem,5vw,4.5rem);

  /* motion */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
a,button,summary,label{-webkit-tap-highlight-color:rgba(0,0,0,0)}
input[type="search"]{-webkit-appearance:none;appearance:none}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:6.5rem;scrollbar-gutter:stable}
body{
  margin:0;
  background:var(--dawn);
  color:var(--ink);
  font:300 1.0625rem/1.75 var(--f-body);
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%;height:auto}
[hidden]{display:none !important}   /* nothing hidden is ever clickable or tabbable */
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
address{font-style:normal}
summary::-webkit-details-marker{display:none}

:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.book :focus-visible,.form-card :focus-visible{outline-color:#F0C9CC}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);padding:.9rem 1.4rem}
.skip:focus{left:0}
#main:focus{outline:none}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right))}
.nw{white-space:nowrap}

/* Grid children default to min-width:auto, so one intrinsically wide image
   can push a whole row past the viewport. Opt every grid child out. */
.hotel>*,.green__in>*,.events>*,.venue>*,.rooms>*,.hotel__pair>*,
.foot__top>*,.foot__nav>*,.sechead--split>*,.gds__list>*,.news__row>*,
.cookie__in>*,.events__gal>*,.faq__list>*,.msplit__stack>*{min-width:0}

/* ---------- 3. The canvas: the page's light ------------------- */
.canvas{
  position:fixed;inset:0;z-index:-2;
  background:var(--dawn);
  transition:background-color .9s linear;
}
/* the faintest grain, so the large flats never band */
.canvas::after{
  content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(rgba(38,34,30,.03) .5px,transparent .5px);
  background-size:4px 4px;
}

/* ---------- 4. Type scale ------------------------------------ */
.h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.05rem,4.4vw,3.7rem);
  line-height:1.04;letter-spacing:-.018em;
  text-wrap:balance;
}
.h2--sm{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.h2--big{font-size:clamp(2.5rem,6vw,5rem);text-transform:uppercase;letter-spacing:-.012em}
.h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.14;letter-spacing:-.01em}
.h4{font-family:var(--f-display);font-weight:500;font-size:1.2rem;line-height:1.2;display:block}

.lede{font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.7;color:var(--ink)}
.prose p{max-width:60ch;margin-top:1.15em}
.prose p:first-child{margin-top:0}
.h2+.prose,.h2+.lede,.h2+.ticks,.h3+.prose{margin-top:1.25rem}

/* the recurring device: an hour and what happens then.
   Information, not an eyebrow: it says when in the day this is. */
.stamp{
  display:flex;align-items:baseline;gap:.7rem;
  font-size:.78rem;font-weight:400;letter-spacing:.02em;color:var(--stone);
  margin-bottom:1.3rem;
}
.stamp__t{
  font-variant-numeric:tabular-nums lining-nums;
  font-weight:500;color:var(--ink);letter-spacing:.04em;
  padding-right:.7rem;border-right:1px solid var(--rule);
}
.stamp--light{color:rgba(255,255,255,.88)}
.stamp--light .stamp__t{color:#FFF;border-right-color:rgba(255,255,255,.4)}

/* ---------- 5. Buttons and links ----------------------------- */
.btn{
  --bg:var(--ink);--fg:var(--cream);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.85rem 1.75rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:0;
  font-size:.78rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .4s var(--e-out),color .4s var(--e-out),border-color .4s var(--e-out);
}
.btn--solid{--bg:var(--crimson);--bd:var(--crimson);--fg:#FFF}
/* A slow light passes across BOOK NOW every eight seconds. It is the only
   thing on the page that moves without being asked, so it is kept to one
   sweep, low contrast, and nothing else: no scale, no colour change, no
   bounce. Reduced motion removes it with the rest of the animation. */
.head .btn--solid{position:relative;overflow:hidden}
.head .btn--solid::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:sheen 8s var(--e-soft) 3s infinite;
}
@keyframes sheen{
  0%{left:-60%}
  14%{left:130%}
  100%{left:130%}
}
.btn--solid:hover{--bg:var(--crimson-d);--bd:var(--crimson-d)}
.btn--line{--bg:transparent;--fg:var(--ink);--bd:rgba(38,34,30,.42)}
.btn--line:hover{--bg:var(--ink);--fg:var(--cream);--bd:var(--ink)}
.btn--ghost{--bg:transparent;--fg:#FFF;--bd:rgba(255,255,255,.62)}
.btn--ghost:hover{--bg:rgba(255,255,255,.16);--bd:#FFF}
.btn--wa{--bg:var(--wa);--bd:var(--wa);--fg:#08331A}
.btn--wa:hover{--bg:var(--wa-d);--bd:var(--wa-d)}
.btn--sm{min-height:2.6rem;padding:.6rem 1.15rem;font-size:.7rem}
.btn--lg{min-height:3.4rem;padding:1.05rem 2.3rem}
.btn--full{width:100%}

.link{
  display:inline-block;margin-top:1.5rem;
  font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  padding-bottom:.35rem;border-bottom:1px solid var(--crimson);
  transition:color .35s var(--e-out)
}
.link:hover{color:var(--crimson)}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.25em;font:inherit}

/* ---------- 6. Header ---------------------------------------- */
.head{
  position:fixed;inset:0 0 auto;z-index:80;
  transition:background-color .5s var(--e-out),box-shadow .5s var(--e-out);
}
.head__in{
  max-width:var(--max);margin-inline:auto;padding:1.15rem var(--gut);padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right));
  display:flex;align-items:center;gap:2rem;
}
.brand{flex:none;display:block;line-height:0}
.brand__logo{width:clamp(118px,12vw,158px);height:auto}
.brand__logo--dark{display:none}

.nav{margin-left:auto}
.nav__list{display:flex;gap:clamp(1.1rem,2.3vw,2.2rem)}
.nav a{
  display:block;padding:.35rem 0;text-decoration:none;color:#FFF;
  font-size:.95rem;font-weight:400;letter-spacing:.012em;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:.05rem;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
/* the page you are on keeps its rule drawn */
.nav a[aria-current="page"]::after{transform:scaleX(1);opacity:.55}
/* margin-left keeps the burger hard right once .nav is display:none */
.head__act{display:flex;align-items:center;gap:.75rem;flex:none;margin-left:auto}
/* small type over live photography gets a shadow as well as the scrim */
.head:not(.is-stuck) .nav a,.head:not(.is-stuck) .burger{text-shadow:0 1px 3px rgba(6,8,5,.75)}

.head.is-stuck{background:var(--cream);box-shadow:0 1px 0 var(--rule)}
.head.is-stuck .brand__logo--light{display:none}
.head.is-stuck .brand__logo--dark{display:block}
.head.is-stuck .nav a{color:var(--ink)}

.burger{display:none;align-items:center;gap:.55rem;background:none;border:0;cursor:pointer;padding:.5rem 0;color:#FFF}
.head.is-stuck .burger{color:var(--ink)}
.burger__box{display:block;width:22px;height:12px;position:relative}
.burger__box span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--e-out)}
.burger__box span:nth-child(1){top:0}
.burger__box span:nth-child(2){bottom:0}
.burger__label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.burger[aria-expanded="true"] .burger__box span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box span:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- 7. Mobile menu ----------------------------------- */
.menu{position:fixed;inset:0;z-index:75;background:#2A2521;display:flex;opacity:0;transition:opacity .45s var(--e-out)}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu__in{
  width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(6rem,16vh,9rem) var(--gut) 2.5rem;
  display:flex;flex-direction:column;gap:2rem;overflow-y:auto;
}
.menu__list{display:flex;flex-direction:column;gap:.2rem}
.menu__list a{
  display:block;padding:.5rem 0;text-decoration:none;color:var(--cream);
  font-family:var(--f-display);font-size:clamp(2rem,9vw,3rem);line-height:1.15;
  opacity:0;transform:translateY(14px);
}
.menu.is-open .menu__list a{opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.menu.is-open .menu__list li:nth-child(1) a{transition-delay:.06s}
.menu.is-open .menu__list li:nth-child(2) a{transition-delay:.11s}
.menu.is-open .menu__list li:nth-child(3) a{transition-delay:.16s}
.menu.is-open .menu__list li:nth-child(4) a{transition-delay:.21s}
.menu.is-open .menu__list li:nth-child(5) a{transition-delay:.26s}
.menu.is-open .menu__list li:nth-child(6) a{transition-delay:.31s}
.menu__foot{margin-top:auto;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;padding-top:2rem;border-top:1px solid rgba(252,250,246,.2)}
.menu__link{color:#C6BAA9;text-decoration:none;font-size:.9rem}
.menu__link:hover{color:var(--cream)}

/* ---------- 8. Hero ------------------------------------------ */
/* The block is centred, not bottom-anchored, so a 1080px-tall or a
   1440px-tall screen both put the words in the middle. The extra top
   padding is the header: it pushes the optical centre down by half of it. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;isolation:isolate;overflow:hidden;text-align:center}
.hero__media{position:absolute;inset:0;z-index:-1;background:#232A22}
.hero__img,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__img{transform:scale(1.05);animation:heroDrift 30s var(--e-soft) both}
.hero__video{opacity:0;transition:opacity 1.1s var(--e-out);z-index:1}
.hero.video-on .hero__video{opacity:1}
.hero.video-on .hero__img{animation:none}
@keyframes heroDrift{from{transform:scale(1.09)}to{transform:scale(1.005)}}

/* Vertical gradients only, edge to edge, so there is never a dark band
   down the left and right sides on a wide screen. One pass darkens the
   strip under the header, the other carries the copy block. */
.hero__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to bottom,rgba(10,12,8,.72) 0%,rgba(10,12,8,.58) 9%,rgba(10,12,8,.2) 18%,rgba(10,12,8,0) 28%),
    linear-gradient(to bottom,rgba(10,12,8,0) 10%,rgba(10,12,8,.5) 20%,rgba(10,12,8,.68) 30%,rgba(10,12,8,.74) 50%,rgba(10,12,8,.72) 74%,rgba(10,12,8,.66) 100%);
}
.hero__in{
  position:relative;z-index:3;
  width:100%;max-width:var(--max);margin-inline:auto;
  padding:clamp(6rem,9vh,8rem) var(--gut) clamp(2.5rem,4vh,4rem);
  color:#FFF;
  text-shadow:0 1px 2px rgba(5,5,10,.55),0 4px 22px rgba(5,5,10,.5);
}
.hero .stamp{margin-bottom:2.25rem;justify-content:center}
.hero__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.6rem,6vw,5.4rem);line-height:1.02;letter-spacing:-.022em;
  text-transform:uppercase;
  max-width:20ch;margin-inline:auto;margin-bottom:1.5rem;
}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;line-height:1.6;max-width:56ch;margin-inline:auto;color:#F2EDE5;margin-bottom:2.5rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.hero__cta .btn{text-shadow:none}

.hero__down{position:absolute;left:50%;bottom:1.6rem;z-index:4;transform:translateX(-50%);display:block;padding:1rem}
.hero__downline{display:block;width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.85));overflow:hidden}
.hero__downline::after{content:"";display:block;width:1px;height:16px;background:#FFF;animation:fall 2.9s var(--e-soft) infinite}
@keyframes fall{0%{transform:translateY(-18px);opacity:0}30%{opacity:1}100%{transform:translateY(46px);opacity:0}}

/* one orchestrated arrival, on load only */
.is-ready .hero__title,.is-ready .hero__sub,.is-ready .hero__cta,
.is-ready .hero .stamp{opacity:0;transform:translateY(18px)}
.is-ready .hero .stamp{animation:rise .9s .15s var(--e-out) forwards}
.is-ready .hero__title{animation:rise 1.05s .26s var(--e-out) forwards}
.is-ready .hero__sub{animation:rise .95s .46s var(--e-out) forwards}
.is-ready .hero__cta{animation:rise .95s .58s var(--e-out) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- 9. Section frame --------------------------------- */
.sec{position:relative;padding-block:var(--sec-y)}
.sechead{max-width:46rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sechead .h2{margin-bottom:1rem}
.sechead--centre{max-width:40rem;margin-inline:auto;text-align:center}
.sechead--centre .stamp{justify-content:center}
/* Heading left, description right, the two centred on each other rather
   than sharing a baseline. Every lede is written to two lines at this
   measure, so the pair reads as one balanced block. */
.sechead--split{display:grid;grid-template-columns:1fr;gap:1.3rem 3rem;max-width:none;align-items:center}
.sechead--split .stamp{grid-column:1/-1;margin-bottom:0}
.sechead--split .h2{margin-bottom:0;max-width:15ch}
.sechead--split .lede{max-width:50ch;margin-bottom:0}
.seccta{margin-top:clamp(2rem,4vw,3rem);text-align:center}
/* These five end on a grid, a gallery, a rail or a closing line, and the
   shape itself already reads as a full stop. They need less air underneath
   than a section that ends mid-thought, so the foot is a little over half
   the head. Sustainability, Events, Q&A and the closing image keep theirs. */
.sec--hotel,.sec--stay,.sec--eat,.sec--spa,.sec--reviews{
  padding-bottom:calc(var(--sec-y) * .55);
}
/* ...and the section that follows one of those takes a shorter head to
   match, so the join is one tightened gap rather than a full foot meeting
   a full head. The run of light sections then holds an even rhythm. */
.sec--stay,.sec--eat,.sec--spa,.sec--exp,.sec--faq{
  padding-top:calc(var(--sec-y) * .62);
}

/* Enhancement only: without JavaScript the .is-ready class never lands and
   every one of these stays visible. The page must read with JS switched off. */
.is-ready .reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--e-out),transform .8s var(--e-out)}

.wipe img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e-out)}
.wipe.is-in img{clip-path:inset(0 0 0 0)}

.drift{animation:slowdrift 32s var(--e-soft) infinite alternate;animation-delay:-8s}
@keyframes slowdrift{from{transform:scale(1.001)}to{transform:scale(1.055)}}

/* ---------- 10. The Hotel ------------------------------------ */
.hotel{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hotel__text{max-width:38rem}
/* the headline reads on two lines here, which needs it a size smaller
   than the sections whose headings are three or four words long */
.sec--hotel .h2{font-size:clamp(1.95rem,3.5vw,3.1rem)}
.hotel__media{display:grid;gap:clamp(.6rem,1.2vw,1rem)}
.hotel__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.2vw,1rem)}
/* the two details are cropped taller than they were shot so the picture
   column finishes within a line or two of the writing beside it */
.hotel__pair img{width:100%;height:100%;aspect-ratio:7/10;object-fit:cover}

/* the one interactive moment */
.turn{position:relative}
.turn__stack{position:relative;overflow:hidden;background:var(--sand)}
.turn__img{width:100%;height:auto}
.turn__img--night{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--turn,0);transition:opacity .12s linear}
.turn__btn{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  display:flex;align-items:center;gap:.7rem;
  padding:.5rem 1.05rem .5rem .5rem;
  background:rgba(20,17,14,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.26);border-radius:999px;
  color:#FFF;cursor:pointer;max-width:calc(100% - 2rem);
  transition:background-color .4s var(--e-out),border-color .4s var(--e-out);
  touch-action:none;
}
.turn__btn:hover{background:rgba(20,17,14,.72);border-color:rgba(255,255,255,.48)}
.turn__ring{width:26px;height:26px;flex:none;transform:rotate(-90deg)}
.turn__arc{transition:stroke-dashoffset .1s linear}
.turn__label{font-size:.72rem;letter-spacing:.06em;line-height:1.3;text-align:left}

/* ---------- 11. The Stay ------------------------------------- */
.stagewide{position:relative;margin-bottom:clamp(2rem,4vw,3.25rem);overflow:hidden}
.stagewide img{width:100%}

.rooms{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,2.6vw,2.1rem);align-items:stretch}
.room{display:flex}
.room__a{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit}
.room__media{display:block;overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.room__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
@media (hover:hover){.room__a:hover .room__media img,.room__a:focus-visible .room__media img{transform:scale(1.045)}}
.room__b{display:flex;flex-direction:column;flex:1;padding-top:1.1rem}
.room__meta{margin-top:.45rem;font-size:.78rem;letter-spacing:.05em;color:var(--stone)}
.room__copy{margin-top:.75rem;font-size:.95rem;line-height:1.7}
.room__cta{
  display:inline-block;margin-top:auto;padding-top:1.1rem;
  font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
}
.room__cta::after{
  content:"";display:block;width:2.25rem;height:1px;margin-top:.5rem;
  background:var(--crimson);transition:width .45s var(--e-out);
}
.room__a:hover .room__cta::after,.room__a:focus-visible .room__cta::after{width:4.5rem}

/* ---------- 12. Eat & Drink ---------------------------------- */
.venue{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,3.5vw,3rem);align-items:center;padding-inline:var(--gut);max-width:var(--max);margin-inline:auto}
.venue__body{max-width:38rem}
.venue__body .h2{margin-bottom:.85rem}
.venue__lead{font-family:var(--f-display);font-style:italic;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.35;margin-bottom:.95rem}
.venue__body p{max-width:48ch}
.venue__body p+p{margin-top:.9em}
.venue__body .btn{margin-top:1.9rem}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.5rem;align-content:start}
.vcard .tags{margin-top:.25rem}
.tags li{border:1px solid var(--rule);padding:.4rem .8rem;font-size:.74rem;letter-spacing:.05em;color:var(--stone)}

/* The two restaurants sit side by side from tablet up. Each card is a
   fixed order: film, two portrait frames, then the words. They stack on a
   phone, where one column is the only readable shape. */
.venues{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(2rem,4vw,3rem)}
.venues>*{min-width:0}
.vcard{display:grid;gap:clamp(.9rem,1.8vw,1.35rem);align-content:start}
.vcard__head .h2{margin-bottom:0}
.vcard__body p{max-width:52ch}

/* A <video poster> is fetched the moment the element parses, whatever
   preload says, so the still is a lazy <img> underneath and the film fades
   in over it once it can actually play. Same picture, none of the weight
   for a visitor who never scrolls this far. */
.reel__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .7s var(--e-out);
}
.reel.is-on{opacity:1}

/* ---------- 13. The mini gallery ----------------------------- */
.gal{position:relative}
.gal__view{position:relative;display:grid;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.gal__view--tall{aspect-ratio:9/16}
.gal__view--wide{aspect-ratio:16/9}
.gal__img{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity .8s var(--e-out),transform 1.4s var(--e-out),visibility 0s .8s;
}
.gal__img.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s var(--e-out),transform 1.4s var(--e-out),visibility 0s}
/* The photo galleries carry no arrows and no dots: they change on their
   own, pause under the cursor, and take a swipe on a phone. Reduced motion
   stops them on the first frame, which is the accessible resting state.
   .gnav survives because the rail and the review slider still use it. */
.gnav{
  width:2.5rem;height:2.5rem;flex:none;display:grid;place-items:center;
  background:transparent;border:1px solid var(--rule);color:var(--ink);cursor:pointer;
  transition:background-color .35s var(--e-out),color .35s var(--e-out),border-color .35s var(--e-out);
}
.gnav:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.gnav[disabled]{opacity:.32;cursor:default}
.gnav[disabled]:hover{background:transparent;color:var(--ink);border-color:var(--rule)}

/* ---------- 14. Wellness ------------------------------------- */
/* Amber Spa still runs on .venue. The frame is square rather than 4:5 so
   the photograph finishes where the words do and the whole section holds
   one screen at 900px tall. */
.venue--spa .gal__view{aspect-ratio:1/1}
.ticks{margin:1.5rem 0 0;display:grid;gap:.65rem}
.ticks li{position:relative;padding-left:1.4rem;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--crimson)}

/* ---------- 15. Experiences ---------------------------------- */
.railwrap{position:relative;margin-top:.25rem}
.railwrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.rail{
  display:flex;gap:clamp(1rem,1.6vw,1.4rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:.25rem 0 1.25rem;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 min(76vw,21rem);scroll-snap-align:start}
.card__a{display:block;text-decoration:none;color:inherit}
.card__media{display:block;overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
@media (hover:hover){.card__a:hover .card__media img,.card__a:focus-visible .card__media img{transform:scale(1.05)}}
.card__b{display:block;padding-top:.9rem}
.card__copy{margin-top:.4rem;font-size:.9rem;color:var(--stone);max-width:30ch}
.rail__foot{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-top:.25rem}
.rail__nav{display:flex;gap:.5rem;grid-column:1;justify-self:start}
.rail__foot .btn{grid-column:2}

/* ---------- 16. Sustainability ------------------------------- */
.green{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5rem,10vw,8rem)}
.green__bg{position:absolute;inset:0;z-index:-1}
.green__bg img{width:100%;height:100%;object-fit:cover}
/* a deep wash off the left edge, so the garden keeps its own light */
.green__wash{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(12,15,10,.86) 0%,rgba(12,15,10,.74) 34%,rgba(12,15,10,.42) 64%,rgba(12,15,10,.2) 100%),
    linear-gradient(to top,rgba(12,15,10,.5),rgba(12,15,10,0) 55%);
}
.green__in{display:grid}
.green__text{max-width:40rem}
.green .h2{color:#FFF}
.green .stamp{color:rgba(255,255,255,.82)}
.green .stamp__t{color:#FFF;border-right-color:rgba(255,255,255,.34)}
.green__lead{
  font-family:var(--f-display);font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.4;margin-top:1.25rem;max-width:30ch;color:#F6F2EA;
}
.green__body{margin-top:1.15rem;max-width:52ch;color:#DCD5C9}
.green .link{color:#FFF}
.green .link:hover{color:#F0C9CC}

/* ---------- 17. Events --------------------------------------- */
.events{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.25rem);align-items:start;
}
/* One picture component for the two restaurants and for events: a portrait
   film beside two still photographs, the columns finishing level. The film
   is the only thing that moves in it, which is the whole idea. */
.msplit{display:grid;grid-template-columns:1fr;gap:clamp(.6rem,1.2vw,.9rem)}
.msplit>*{min-width:0}
.msplit__film{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:9/16}
.msplit__stack{display:grid;gap:clamp(.6rem,1.2vw,.9rem);align-content:start}
.msplit__stack>*{min-width:0}
.frame{overflow:hidden;background:var(--sand);aspect-ratio:16/9}
.frame img{width:100%;height:100%;object-fit:cover}
.events__copy{margin-top:1.5rem}
.events__copy p{max-width:52ch}
.events__copy .ticks{margin-top:1.35rem}

.form-card{background:var(--espresso);color:#F1EAE1;padding:clamp(1.5rem,3.2vw,2.35rem)}
.form-card .h3{color:var(--cream);margin-bottom:.45rem}
.form-card__note{font-size:.9rem;color:var(--stone-l);margin-bottom:1.6rem;max-width:40ch}
.eform{display:grid;gap:1.05rem}
.field label{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);margin-bottom:.4rem}
.field input,.field textarea{
  width:100%;background:transparent;color:inherit;
  border:0;border-bottom:1px solid var(--rule);
  padding:.55rem 0;font-size:1rem;border-radius:0;
  transition:border-color .35s var(--e-out);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(38,34,30,.35)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--crimson)}
.field textarea{resize:vertical;min-height:5.5rem}
.field.has-err input,.field.has-err textarea{border-bottom-color:var(--crimson)}
.err{margin-top:.35rem;font-size:.8rem;color:var(--crimson)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card__legal{margin-top:.2rem;font-size:.76rem;color:var(--stone-l)}
.form-card__legal a,.check a{color:inherit;text-underline-offset:.22em}

/* the form card is the one dark panel on the page, so its fields invert */
.form-card .field label{color:var(--stone-l)}
.form-card .field input,.form-card .field textarea{color:var(--cream);border-bottom-color:rgba(252,250,246,.3)}
.form-card .field input::placeholder,.form-card .field textarea::placeholder{color:rgba(252,250,246,.42)}
.form-card .field input:focus,.form-card .field textarea:focus{border-bottom-color:#E5A2A8}
.form-card .field.has-err input,.form-card .field.has-err textarea{border-bottom-color:#F0A0A6}
.form-card .err{color:#F0A0A6}
.form-card .btn--line{--fg:#F1EAE1;--bd:rgba(252,250,246,.36)}
.form-card .btn--line:hover{--bg:var(--cream);--fg:var(--ink);--bd:var(--cream)}

.form-ok{padding-top:.4rem}
.form-ok__t{font-family:var(--f-display);font-size:1.3rem;line-height:1.25;margin-bottom:.6rem;color:var(--cream)}
.form-ok p{font-size:.92rem;color:var(--stone-l);max-width:40ch}
.form-ok__acts{display:grid;gap:.6rem;margin-top:1.35rem}
.form-ok__acts .btn{width:100%}

/* ---------- 18. Reviews -------------------------------------- */
/* White is now the page's ordinary ground and the warm canvas is the
   exception: it shows through at Amber Spa and at Events, between the white
   sections, which is what keeps the descent from reading as one flat sheet. */
.sec--hotel,.sec--stay,.sec--eat,.sec--exp,.sec--reviews,.sec--faq{background:#FFF}

.revfoot{margin-top:2rem;text-align:center;font-size:.85rem;color:var(--stone)}
.revfoot .link{margin-top:0;font-size:.74rem;margin-left:.4rem}

/* ---------- 19. Good to know --------------------------------- */
.faq__list{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  display:flex;align-items:center;gap:1.25rem;justify-content:space-between;
  padding:1.1rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.3;
}
.qa summary::after{
  content:"";flex:none;width:.85rem;height:.85rem;
  background:
    linear-gradient(var(--crimson),var(--crimson)) center/100% 1px no-repeat,
    linear-gradient(var(--crimson),var(--crimson)) center/1px 100% no-repeat;
  transition:transform .4s var(--e-out);
}
.qa[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--crimson),var(--crimson)) center/100% 1px no-repeat}
.qa summary:hover{color:var(--crimson)}
.qa__a{padding:0 0 1.3rem;max-width:100ch}
.qa__a p{color:var(--ink-soft);font-size:.98rem}

/* ---------- 20. Final CTA ------------------------------------ */
.book{position:relative;isolation:isolate;color:#FFF;padding-block:clamp(5rem,12vw,9rem);overflow:hidden}
.book__media{position:absolute;inset:0;z-index:-1;background:#1A1714}
.book__media img{width:100%;height:100%;object-fit:cover}
.book__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,11,9,.86),rgba(14,11,9,.5) 55%,rgba(14,11,9,.62))}
.book__in{text-align:center;text-shadow:0 1px 2px rgba(5,5,10,.55),0 4px 24px rgba(5,5,10,.5)}
.book__in .stamp{justify-content:center}
.book__in .h2{color:#FFF;margin-bottom:1.1rem}
.book__lead{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:34ch;margin:0 auto 2.2rem;color:#F2EDE5}
.book__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.book__cta .btn{text-shadow:none}
.book__perks{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;justify-content:center;margin-top:2.2rem;font-size:.8rem;color:#E4DACD;text-shadow:none}
.book__perks li{position:relative;padding-left:1rem}
.book__perks li::before{content:"";position:absolute;left:0;top:.65em;width:.4rem;height:1px;background:rgba(255,255,255,.55)}
.book .btn--ghost{--bd:rgba(255,255,255,.7)}
.book .btn--ghost:hover{--bg:#FFF;--fg:var(--ink);--bd:#FFF}

/* ---------- 21. Footer --------------------------------------- */
.foot{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule);font-size:.92rem}
.foot a{text-decoration:none}

.foot__top{
  display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,3.5vw,3rem);
  padding-block:clamp(2rem,4vw,3rem);
}
.news{max-width:30rem}
.news .h3{font-size:1.45rem}
.news p{margin:.5rem 0 1.1rem;color:var(--stone);max-width:42ch;font-size:.88rem}
.news__form{display:grid;gap:.75rem}
.news__row{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:end}
.news__form .btn--line:hover{--bg:var(--crimson);--fg:#FFF;--bd:var(--crimson)}
.check{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.78rem;color:var(--stone);cursor:pointer}
.check input{margin-top:.28rem;accent-color:var(--crimson);width:1rem;height:1rem}

/* The columns are sized to their words and share one gutter, so the gap
   after Stay is the same as the gap after Eat & Drink. Equal 1fr columns
   made the short list look adrift from the long one. */
.foot__nav{display:grid;grid-template-columns:repeat(2,max-content);gap:1.5rem clamp(2rem,4vw,4rem);justify-content:start}
.foot__h{
  font-family:var(--f-body);font-size:.66rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--stone);margin-bottom:.75rem;
}
.foot__nav a{color:var(--ink)}
.foot__nav a:hover{color:var(--crimson)}
.foot__nav li+li{margin-top:.35rem}

/* GDS codes get their own band across the footer. Inside a single nav
   column the open list had nowhere to go and set four codes in a strip
   one word wide; here it has the whole measure. */
.gds{border-top:1px solid var(--rule-2);padding-block:.9rem}
.gds summary{
  display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;list-style:none;
  font-size:.66rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--stone);
  padding-block:.35rem;
}
.gds summary::after{
  content:"";width:.5rem;height:.5rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .35s var(--e-out);
}
.gds[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.gds summary:hover{color:var(--ink)}
.gds__list{display:grid;gap:.6rem 1.5rem;margin-top:.9rem;font-size:.78rem;color:var(--stone);justify-content:center;text-align:center}
.gds__list b{color:var(--ink);font-weight:500;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;margin-right:.4rem}

/* Find us, centred, with the social row directly under it */
.foot__mid{
  text-align:center;padding-block:1.5rem;
  border-top:1px solid var(--rule-2);
}
.foot__mid .foot__h{margin-bottom:.7rem}
.foot__contact{display:flex;flex-wrap:wrap;gap:.35rem 1.75rem;justify-content:center;font-size:.88rem;color:var(--stone)}
.foot__contact a{color:var(--ink)}
.foot__contact a:hover{color:var(--crimson)}

.social{display:flex;gap:.6rem;justify-content:center;margin-top:1.25rem}
.social a{
  width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;
  color:var(--stone);border:1px solid var(--rule);background:transparent;
  transition:color .4s var(--e-out),border-color .4s var(--e-out),background-color .4s var(--e-out),transform .4s var(--e-out);
}
.social a:hover{color:#FFF;background:var(--crimson);border-color:var(--crimson);transform:translateY(-3px)}
.social svg{display:block}

/* the legal line, set in ink */
.foot__bot{background:#141210;color:#9C948A}
.foot__bot__in{
  display:grid;gap:.5rem;padding-block:1.05rem;justify-items:center;text-align:center;font-size:.76rem;
}
.foot__bot a,.foot__bot .linkbtn{color:#C6BCB0}
.foot__bot a:hover,.foot__bot .linkbtn:hover{color:#FFF}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem 1.4rem;line-height:1.6}
/* the button has to sit on the same line as the links beside it */
.foot__bot .linkbtn{line-height:inherit;vertical-align:baseline;text-decoration:none}
.foot__bot .linkbtn:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- 22. Mobile dock and WhatsApp --------------------- */
.wafloat{
  position:fixed;right:max(clamp(1rem,2.4vw,2rem),env(safe-area-inset-right));bottom:calc(clamp(1rem,2.4vw,2rem) + env(safe-area-inset-bottom));z-index:60;
  width:3.25rem;height:3.25rem;display:grid;place-items:center;border-radius:50%;
  background:var(--wa);color:#08331A;border:0;
  box-shadow:0 14px 30px -14px rgba(37,211,102,.7),0 2px 6px rgba(20,18,16,.18);
  transform:none;
  transition:opacity .45s var(--e-out),transform .45s var(--e-out),background-color .35s var(--e-out);
}
.is-ready .wafloat{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}
.is-ready .wafloat.is-on{opacity:1;transform:none;pointer-events:auto}
.wafloat:hover{background:var(--wa-d)}

.dockbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:.5rem;padding:.6rem max(var(--gut),env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left));
  background:rgba(252,250,246,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);
  transition:transform .45s var(--e-out);
}
.is-ready .dockbar{transform:translateY(110%)}
.is-ready .dockbar.is-on{transform:none}
.dockbar__wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:.7rem 1.1rem;flex:none;
  background:var(--wa);color:#08331A;text-decoration:none;
  font-size:.74rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
}
.dockbar__ico{display:grid;place-items:center;line-height:0}
.dockbar__book{flex:1}

/* ---------- 23. Cookie banner -------------------------------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--cream);border-top:1px solid var(--rule);
  box-shadow:0 -18px 40px -32px rgba(38,34,30,.7);
  transform:translateY(110%);transition:transform .5s var(--e-out);
}
.cookie.is-on{transform:none}
.cookie__in{
  max-width:var(--max);margin-inline:auto;
  padding:1.2rem var(--gut) calc(1.2rem + env(safe-area-inset-bottom));
  display:grid;gap:1rem;align-items:center;
}
.cookie__t{font-family:var(--f-display);font-weight:400;font-size:1.1rem;margin-bottom:.3rem}
.cookie__d{font-size:.85rem;color:var(--stone);max-width:66ch}
.cookie__d a{color:var(--ink);text-underline-offset:.22em}
.cookie__act{display:flex;gap:.6rem;flex-wrap:wrap}

/* =============================================================
   24. Breakpoints
   ============================================================= */
@media (min-width:560px){
  .form-ok__acts{grid-template-columns:1fr 1fr}
  .gds__list{grid-template-columns:repeat(2,max-content)}   /* two up */
}

@media (min-width:600px){
  .cookie__in{grid-template-columns:1fr auto}
}

@media (min-width:760px){
  .rooms{grid-template-columns:repeat(3,1fr)}
  /* A tablet is wide enough for the two restaurants to sit as a pair. The
     four rows are shared: name, pictures, copy, tags. Subgrid is what makes
     the two cards line up on every row even though one has more to say than
     the other; without it they still stack correctly, just unaligned. */
  .venues{grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);grid-template-rows:auto auto 1fr auto}
  .vcard{grid-row:span 4;grid-template-rows:subgrid}
  .msplit{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:stretch}
  /* the two stacked frames set the row height; the film fills it, so the
     block finishes level on both sides */
  .msplit__film{aspect-ratio:auto;height:100%}
  /* clear of the plus sign column, which only exists at this width */
  .qa__a{padding-right:2.5rem}
  .foot__nav{grid-template-columns:repeat(3,max-content);justify-content:space-between}
}

@media (min-width:900px){
  .hotel{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,5rem)}
  .hotel__text{padding-top:clamp(.5rem,2vw,2rem)}
  .venue{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.25rem,4.5vw,4.5rem)}
  .venue--spa .venue__body{padding-left:clamp(0rem,2vw,2rem)}
  .events{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2.25rem,4.5vw,3.5rem)}
  .sechead--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.3rem clamp(2rem,5vw,4rem)}
  .foot__top{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(2.5rem,6vw,5.5rem)}
  .gds__list{grid-template-columns:repeat(4,max-content)}
  /* the legal line runs edge to edge on one row here; the phone keeps the
     stacked, centred version, which is the only shape that fits at 375px */
  .foot__bot__in{grid-template-columns:1fr auto;gap:2rem;justify-items:stretch;text-align:left}
  .foot__bot__in .foot__links{justify-content:flex-end}
  .cookie__in{padding-block:1.4rem}
  /* four cards at a time, moving along on their own. Snapping is off here
     because the carousel drives the scroll itself. */
  .card{flex:0 0 calc((100% - 3 * clamp(1rem,1.6vw,1.4rem)) / 4)}
  .rail{scroll-snap-type:none}
}

/* --- phone: a real mobile design, not a squeezed desktop one --- */
@media (max-width:899px){
  .green__wash{
    background:linear-gradient(to bottom,rgba(12,15,10,.5) 0%,rgba(12,15,10,.78) 40%,rgba(12,15,10,.88) 100%);
  }
}

@media (max-width:860px){
  .nav{display:none}
  .burger{display:inline-flex}
  .head__act .btn--sm{display:none}
}

@media (max-width:720px){
  body{font-size:1rem;line-height:1.72}
  .head__in{padding-block:.9rem}
  .hero{min-height:94vh;min-height:94svh}
  .hero__in{padding-top:clamp(7rem,15vh,9.5rem);padding-bottom:clamp(4rem,8vh,6rem)}
  .hero .stamp{margin-bottom:1.75rem}
  /* on a phone the measure is the column itself: 12ch broke "in a different" apart */
  .hero__title{font-size:clamp(2.35rem,10vw,3.4rem);max-width:none;margin-bottom:1.25rem}
  .hero__sub{margin-bottom:2.1rem}
  .hero__cta .btn{width:100%}
  .hero__down{display:none}

  .dockbar{display:flex}
  .foot{padding-bottom:5rem}
  .wafloat{display:none}
  .cookie.is-on ~ .dockbar.is-on{transform:translateY(110%)}

  /* a phone gets the short footer: tighter bands, no newsletter blurb */
  .foot__top{padding-block:1.6rem;gap:1.6rem}
  .news p{display:none}
  .news .h3{font-size:1.3rem}
  .news__form{gap:.6rem}
  .foot__nav{gap:1.1rem 2rem}
  .foot__nav li+li{margin-top:0}
  .foot__mid{padding-block:1.1rem}
  .gds{padding-block:.55rem}
  .foot__bot__in{padding-block:.9rem;gap:.35rem}
  .foot__contact{gap:.2rem 1.1rem;font-size:.82rem}
  .social{flex-wrap:wrap;margin-top:.9rem}
  .social a{width:2.35rem;height:2.35rem}
  /* a full-bleed 9:16 film is 600px of one phone screen, which is more than
     any single picture on this page has earned. object-fit crops it. */
  .msplit__film{aspect-ratio:4/5}
  .news__row{grid-template-columns:1fr}
  .news__row .btn{width:100%}
  .book__perks{flex-direction:column;align-items:center;gap:.3rem}
  .book__perks li{padding-left:0}
  .book__perks li::before{display:none}
  .turn__label{font-size:.68rem}
}

/* short screens: floating extras have no room */
@media (max-height:560px){
  .hero__down{display:none}
}

/* touch: 44px minimum without breaking layout */
@media (pointer:coarse){
  .btn{min-height:2.9rem}
  .nav a,.menu__list a,.foot__nav a,.foot__links a{min-height:44px;display:inline-flex;align-items:center}
  .gnav{width:2.9rem;height:2.9rem;display:grid;place-items:center}
  .qa summary{padding-block:1.25rem}
}

/* =============================================================
   25. Reduced motion, honoured completely
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  .is-ready .reveal,.reveal{opacity:1 !important;transform:none !important}
  .wipe img{clip-path:none}
  .is-ready .hero__title,.is-ready .hero__sub,.is-ready .hero__cta,
  .is-ready .hero .stamp{opacity:1 !important;transform:none !important}
  .hero__img,.hero__video,.drift{transform:none}
  .gal__img{transition:none}
}
body.motion-off .reveal{opacity:1 !important;transform:none !important}
body.motion-off .wipe img{clip-path:none}
body.motion-off .drift,body.motion-off .hero__img{animation:none;transform:none}
body.motion-off .hero__title,body.motion-off .hero__sub,body.motion-off .hero__cta,
body.motion-off .hero .stamp{opacity:1 !important;transform:none !important}

/* pause every loop off-tab: animation-play-state does not inherit */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* print: give someone the address and the essentials */
@media print{
  .head,.menu,.dockbar,.wafloat,.cookie,.hero__down,.rail__nav,.reel,.social{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .canvas,.hero__media,.book__media,.green__bg{display:none}
  .book,.foot,.form-card{background:#fff !important;color:#000 !important}
  .qa__a{display:block !important}
}

/* ---------- Guest reviews, live from Tripadvisor ------------- */
.tarev{max-width:44rem;margin:clamp(1.5rem,3vh,2.5rem) auto 0;text-align:center}
.tarev__gate p{color:var(--ink-soft);margin:0 0 1.1rem}
.tarev__frame{display:block;width:100%;border:0;overflow:hidden;transition:height .3s var(--e-out)}

/* ---------- Quoted guest reviews, written by the hub ---------
   The hub writes a plain list. With scripts on, main.js section 10a turns
   it into a slider: one review at a time, changing by itself, with dots.
   With scripts off the reviews simply stack. */
.quotes{
  list-style:none;margin:clamp(1.5rem,3vh,2.5rem) auto 0;padding:0;max-width:56rem;
  display:grid;grid-template-columns:1fr;gap:2.5rem;
}
.quote{display:flex;flex-direction:column;align-items:center;gap:1.3rem;text-align:center}
.quote__stars{color:var(--crimson);letter-spacing:.35em;font-size:.9rem;margin:0}
.quote__text{margin:0}
.quote__text p{
  margin:0 auto;font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.45;max-width:34ch;color:var(--ink);text-wrap:pretty;
}
.quote__by{margin:0;font-size:.85rem;color:var(--ink)}
.quote__by span{display:block;margin-top:.25rem;font-size:.8rem;color:var(--stone)}
.quote__by a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.quotes.is-slider{gap:0;align-items:start}
.quotes.is-slider .quote{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s var(--e-out),transform .6s var(--e-out),visibility 0s .6s}
.quotes.is-slider .quote.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--e-out),transform .7s var(--e-out),visibility 0s}
.quotes__dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.5rem}
.quotes__dots .dot{width:.5rem;height:.5rem;padding:0;border:1px solid var(--stone);background:transparent;border-radius:50%;cursor:pointer;transition:background-color .35s,border-color .35s;position:relative}
.quotes__dots .dot::after{content:"";position:absolute;inset:-.6rem}
.quotes__dots .dot[aria-current="true"]{background:var(--crimson);border-color:var(--crimson)}
@media (prefers-reduced-motion:reduce){.quotes.is-slider .quote{transition:none}}

/* Select fields, shared by every form (the homepage does not load pages.css). */
.field select{
  width:100%;background:transparent;color:inherit;
  border:0;border-bottom:1px solid var(--rule);
  padding:.55rem 0;font-size:1rem;border-radius:0;
  -webkit-appearance:none;appearance:none;padding-right:1.6rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2326221E' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .15rem center;background-size:.75rem auto;
}
.form-card .field select{color:var(--cream);border-bottom-color:rgba(252,250,246,.3);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FCFAF6' stroke-width='1.4'/%3E%3C/svg%3E")}
.form-card .field select option{background:var(--espresso);color:var(--cream)}

/* The navigation has six items and "Plan an Event" is a long one. Labels
   never wrap, and between a tablet and a small laptop the Menu button takes
   over rather than letting the row crowd the logo. */
.nav a{white-space:nowrap}
@media (max-width:1060px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* ---------- The site's own pop-up: a notice, or a short form ---------- */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(12,12,10,.62)}
.modal__panel{position:relative;width:min(100%,42rem);max-height:calc(100vh - 2rem);overflow:auto;padding:clamp(1.5rem,3.2vw,2.35rem);padding-top:clamp(2.6rem,4vw,3rem)}
.modal__close{position:absolute;top:.85rem;right:.85rem;width:2.4rem;height:2.4rem;border:1px solid rgba(252,250,246,.35);background:transparent;color:var(--cream);border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.4rem;line-height:1;padding:0}
.modal__close:hover{background:rgba(252,250,246,.12)}
.modal__p{color:var(--stone-l);max-width:44ch}
.modal__acts{margin-top:1.4rem;display:flex;gap:.7rem;flex-wrap:wrap}
body.modal-open{overflow:hidden}
.modal .form-ok{padding-top:0}
.eform--modal{gap:1rem}
@media (min-width:600px){
  .eform--modal{grid-template-columns:1fr 1fr;gap:1rem 1.25rem}
  .eform--modal .f-msg,.eform--modal .f-send,.eform--modal .form-card__legal{grid-column:1/-1}
}
.form-card .field input[type="date"],.form-card .field input[type="time"]{color-scheme:dark}
.qa__a .qlink{color:var(--crimson);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.qa__a p + p{margin-top:.75em}

/* The wide enquiry form, the same layout as the Plan an Event page (pages.css
   has the same rules; the homepage only loads this file). */
.form-card--wide{margin-top:clamp(2rem,4vw,3rem)}
.eform--wide{gap:1.15rem}
@media (min-width:760px){
  .eform--wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.5rem}
  .eform--wide .f-msg,.eform--wide .f-send,.eform--wide .form-card__legal,.eform--wide .hp{grid-column:1/-1}
}
@media (min-width:1100px){
  .eform--wide{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.35rem 1.75rem}
  .eform--wide .f-msg{grid-column:span 3}
  .eform--wide .f-send{grid-column:span 1;align-self:end}
  .eform--wide .form-card__legal{grid-column:1/-1;margin-top:.3rem}
}

/* Events photographs: three frames that change together */
.msplit--slides .msplit__film,.msplit--slides .frame{position:relative}
.msplit--slides .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--e-out),transform 6s linear}
.msplit--slides .slide.is-on{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.msplit--slides .slide{transition:none;transform:none}}
body.motion-off .msplit--slides .slide{transition:none;transform:none}

/* Reviews from several platforms: the guest, then the platform and the month */
.quote__src{margin:0;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;font-size:.8rem;color:var(--stone)}
.plat{display:inline-block;padding:.24rem .65rem;border-radius:999px;font-size:.72rem;font-weight:500;letter-spacing:.04em;line-height:1.2;background:#E8E4DC;color:var(--ink)}
.plat--tripadvisor{background:#34E0A1;color:#0E1F17}
.plat--google{background:#FFF;border:1px solid var(--rule);color:#1A73E8}
.plat--bookingcom{background:#003580;color:#FFF}
.plat--facebook{background:#1877F2;color:#FFF}
.plat--agoda{background:#5C2D91;color:#FFF}
.plat--expedia{background:#FFC94D;color:#191E3B}