/* ============================================================================
   GRAND ARYASH — SITE STYLESHEET
   The one stylesheet for every page (loaded by components/PageStyles.jsx).
   There is no second theme layer and no per-page <style> block: change the
   look here, once.

     1. Design tokens
     2. Base: type, links, focus, layout
     3. Header, mobile navigation drawer, opening-status band
     4. Page introduction ("hero")
     5. Sections and long-form content
     6. Buttons, cards, calls to action
     7. Homepage sections
     8. React components (ga-*): booking bar, enquiry form, rooms, gallery
     9. Footer, WhatsApp button
    10. Motion and print

   Identity: deep green, cream and a restrained gold. Serif (Cormorant
   Garamond) for short headings only; Jost for everything read. No uppercase
   tracking, thin italics or decorative motion.
   ========================================================================= */

/* ============================================================================
   1. DESIGN TOKENS
   Contrast ratios are against --ga-ivory unless stated; all meet WCAG 2.2 AA
   (tests/contrast.test.js).
   ========================================================================= */
:root{
  /* colour */
  --ga-green-900: #0e2417;
  --ga-green-800: #14311f;   /* primary buttons, brand: 13.2:1 */
  --ga-green-700: #1d4429;   /* links: 11.4:1 */
  --ga-green-100: #e8efe2;   /* banded sections */
  --ga-green-50:  #eef3ea;   /* tinted panels */
  --ga-ivory:     #f7f2e6;   /* page background */
  --ga-surface:   #fffdf6;   /* panels and cards */
  --ga-white:     #ffffff;
  --ga-ink:       #16281c;   /* headings: 13.9:1 */
  --ga-text:      #3b382f;   /* body copy: 10.3:1 */
  --ga-muted:     #5f594b;   /* hints, captions: 6.2:1 */
  --ga-gold:      #c9a84c;   /* decorative gold and gold fills only */
  --ga-gold-light:#e8d199;   /* gold text on deep green: 9.4:1 */
  --ga-gold-text: #7a5410;   /* gold used for text on light: 6.1:1 */
  --ga-on-gold:   #241a08;   /* text on gold: 7.5:1 */
  --ga-on-dark:   #fbf4e2;   /* text on deep green: 14.9:1 */
  --ga-on-dark-2: #e8dcc0;   /* secondary text on deep green */
  --ga-line:      rgba(22, 40, 28, .14);   /* dividers (decorative) */
  --ga-line-strong: #767e72; /* control borders: 4.1:1 on white (WCAG 1.4.11) */
  --ga-error:     #a3301a;
  --ga-error-bg:  #fdeeea;
  --ga-success:   #1f6b3b;
  --ga-warning:   #8a5a08;
  --ga-focus:     #7a5410;
  --ga-focus-on-dark: #e8d199;
  /* type */
  --ga-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ga-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ga-fs-body: 1.0625rem;
  --ga-fs-small: .9375rem;
  --ga-fs-h1: clamp(2rem, 1.45rem + 2.2vw, 2.9rem);
  --ga-fs-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --ga-fs-h3: 1.4rem;
  /* shape and space */
  --ga-radius: 10px;
  --ga-radius-sm: 6px;
  --ga-shadow-sm: 0 4px 14px rgba(14, 36, 23, .06);
  --ga-shadow: 0 14px 36px rgba(14, 36, 23, .10);
  --ga-maxw: 1160px;
  --ga-measure: 44rem;
  --ga-gutter: clamp(16px, 4vw, 32px);
  --ga-section-y: clamp(40px, 5vw, 64px);
  --ga-header-h: 72px;

  /* ACCESSIBILITY & LEGIBILITY LAYER — semantic aliases of the tokens above,
     so there is one set of colour values. */
  --c-bg:             var(--ga-ivory);
  --c-surface:        var(--ga-surface);
  --c-surface-alt:    #e8efe2;
  --c-text:           var(--ga-ink);
  --c-text-secondary: #413d34;
  --c-text-muted:     var(--ga-muted);
  --c-brand:          var(--ga-green-800);
  --c-accent:         var(--ga-gold);
  --c-accent-text:    var(--ga-gold-text);
  --c-border:         var(--ga-line);
  --c-success:        var(--ga-success);
  --c-warning:        var(--ga-warning);
  --c-error:          var(--ga-error);
  --c-focus:          var(--ga-focus);
}

/* ============================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ga-header-h) + 16px); }
html,body{ max-width: 100%; overflow-x: hidden; }
body{
  margin: 0;
  background: var(--ga-ivory);
  color: var(--ga-text);
  font-family: var(--ga-sans);
  font-size: var(--ga-fs-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe{ max-width: 100%; }
img{ height: auto; }

h1, h2, h3, h4{ color: var(--ga-ink); margin: 0 0 .5em; text-wrap: balance; }
h1, h2{ font-family: var(--ga-serif); font-weight: 600; letter-spacing: 0; font-variant-numeric: lining-nums; }
h1{ font-size: var(--ga-fs-h1); line-height: 1.1; }
h2{ font-size: var(--ga-fs-h2); line-height: 1.15; }
/* Longer headings (questions, list titles) read better in the text face. */
h3{ font-family: var(--ga-sans); font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
h4{ font-family: var(--ga-sans); font-size: 1rem; font-weight: 600; line-height: 1.4; }
p, ul, ol, dl{ margin: 0 0 1em; }
strong{ font-weight: 600; color: var(--ga-ink); }

a{ color: var(--ga-green-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--ga-green-900); text-decoration-thickness: 2px; }

/* Focus: always visible, 3px, never removed. */
:focus-visible{ outline: 3px solid var(--ga-focus); outline-offset: 2px; border-radius: 2px; }
.hero :focus-visible, .site-footer :focus-visible, .status-inline :focus-visible{ outline-color: var(--ga-focus-on-dark); }

.skip-link{
  position: absolute; left: 12px; top: -100px; z-index: 2000;
  padding: 12px 18px; border-radius: var(--ga-radius-sm);
  background: var(--ga-green-900); color: var(--ga-on-dark); font-weight: 500; text-decoration: none;
}
.skip-link:focus{ top: 12px; color: var(--ga-on-dark); }

.ga-visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ga-contents{ display: contents; }
.ga-icon{ display: inline-block; flex: 0 0 auto; vertical-align: -0.2em; }

.wrap{ width: 100%; max-width: var(--ga-maxw); margin-inline: auto; padding-inline: var(--ga-gutter); }

/* ============================================================================
   3. HEADER, NAVIGATION, STATUS BAND
   ========================================================================= */
.site-header{
  position: sticky; top: 0; z-index: 900;
  background: var(--ga-surface);
  border-bottom: 1px solid var(--ga-line);
}
.site-header__bar{
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  min-height: var(--ga-header-h);
}
.brand{
  display: inline-flex; flex-direction: column; justify-content: center; flex: 0 0 auto;
  min-height: 44px; text-decoration: none; color: var(--ga-green-800); line-height: 1.05;
}
.brand:hover{ color: var(--ga-green-900); }
.brand__name{ font-family: var(--ga-serif); font-weight: 700; font-size: 1.55rem; }
.brand__place{ font-size: .8125rem; font-weight: 500; color: var(--ga-gold-text); letter-spacing: .02em; }

.links{ display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.links__list{ display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.links a{
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ga-ink); font-size: .9875rem; font-weight: 500; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.links__list a:hover{ color: var(--ga-green-700); border-bottom-color: var(--ga-line-strong); }
.links__list a[aria-current="page"],
.links__list a[aria-current="true"]{ color: var(--ga-green-800); border-bottom-color: var(--ga-gold); }
/* Gallery, Blog and Careers: in the mobile menu and the footer, not the bar. */
.links__list--secondary{ display: none; }
.links a.links__cta{ min-height: 44px; padding-inline: 18px; color: var(--ga-on-dark); border: 1px solid var(--ga-green-800); }

/* --- mobile drawer (components/MobileNav.jsx sets data-nav="enhanced") ---- */
.nav-toggle, .nav-call{ display: none; }

@media (max-width: 1024px){
  :root{ --ga-header-h: 64px; }
  .brand__name{ font-size: 1.35rem; }

  [data-nav="enhanced"] .site-header__bar{ flex-wrap: nowrap; gap: 8px; }
  [data-nav="enhanced"] .brand{ flex: 1 1 auto; min-width: 0; }

  [data-nav="enhanced"] .nav-toggle,
  [data-nav="enhanced"] .nav-call{
    position: relative; z-index: 1002;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; padding: 0;
    border-radius: var(--ga-radius-sm); border: 1px solid var(--ga-line-strong);
    background: var(--ga-surface); color: var(--ga-green-800); cursor: pointer; text-decoration: none;
  }
  [data-nav="enhanced"] .nav-toggle:hover,
  [data-nav="enhanced"] .nav-call:hover{ background: var(--ga-green-50); }
  [data-nav="enhanced"] .nav-toggle{ flex-direction: column; gap: 5px; }
  [data-nav="enhanced"] .nav-toggle span{
    display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ga-green-800);
    transition: transform .2s ease, opacity .2s ease;
  }
  [data-nav="enhanced"].nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  [data-nav="enhanced"].nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  [data-nav="enhanced"].nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* The same <nav class="links"> presented as a panel. visibility (not just
     transform) keeps the closed drawer out of the tab order and the
     accessibility tree. */
  [data-nav="enhanced"] .links{
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
    width: min(86vw, 340px);
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto;
    margin: 0; padding: 80px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--ga-surface);
    border-left: 1px solid var(--ga-line);
    box-shadow: -18px 0 44px rgba(14, 36, 23, .18);
    visibility: hidden; transform: translateX(100%);
    transition: transform .25s ease, visibility .25s ease;
  }
  [data-nav="enhanced"].nav-open .links{ visibility: visible; transform: translateX(0); }
  [data-nav="enhanced"] .links__list{ display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  [data-nav="enhanced"] .links__list--secondary{
    margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--ga-line);
  }
  [data-nav="enhanced"] .links__list a{
    display: flex; min-height: 50px; padding: 4px 4px; font-size: 1.0625rem;
    border-bottom: 1px solid rgba(22, 40, 28, .08);
  }
  [data-nav="enhanced"] .links__list--secondary a{ font-size: 1rem; color: var(--ga-text); }
  [data-nav="enhanced"] .links__list a[aria-current]{ border-bottom-color: rgba(22, 40, 28, .08); box-shadow: inset 3px 0 0 var(--ga-gold); padding-left: 12px; }
  [data-nav="enhanced"] .links a.links__cta{ justify-content: center; margin-top: 20px; }

  .nav-backdrop{
    position: fixed; inset: 0; z-index: 999;
    background: rgba(14, 36, 23, .5); opacity: 0; transition: opacity .25s ease;
  }
  [data-nav="enhanced"].nav-open .nav-backdrop{ opacity: 1; }
  /* The header is a stacking context: lift it above the backdrop while open,
     or the backdrop swallows taps meant for the menu links. */
  [data-nav="enhanced"].nav-open .site-header{ z-index: 1001; }
  [data-nav="enhanced"].nav-open .whatsapp-float{ opacity: 0; pointer-events: none; }
}

/* Without JavaScript on small screens: the links simply wrap under the brand. */
@media (max-width: 1024px){
  html:not([data-nav="enhanced"]) .site-header__bar{ flex-wrap: wrap; padding-block: 8px; }
  html:not([data-nav="enhanced"]) .links__list--secondary{ display: flex; }
}
@media (min-width: 1025px){
  .nav-backdrop{ display: none; }
}
@media (min-width: 1025px) and (max-width: 1180px){
  .links__list{ gap: 0 13px; }
  .links a{ font-size: .9375rem; }
}

/* --- opening status band ------------------------------------------------- */
.status-band{ background: var(--ga-green-100); border-bottom: 1px solid var(--ga-line); }
.status-band__inner{ display: flex; align-items: baseline; gap: 6px 14px; padding-block: 12px; }
.status-band__title,
.status-inline__title{
  flex: 0 0 auto; display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--ga-green-800); color: var(--ga-on-dark);
  font-size: .8125rem; font-weight: 500; line-height: 1.6; white-space: nowrap;
}
.status-band__text{ margin: 0; font-size: var(--ga-fs-small); line-height: 1.55; color: var(--ga-ink); max-width: 62rem; }
@media (max-width: 640px){
  .status-band__inner{ flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 12px; }
  .status-band__text{ font-size: .9rem; }
}

/* ============================================================================
   4. PAGE INTRODUCTION
   Compact: sized to what it holds, never to the viewport.
   ========================================================================= */
main .hero{
  background: linear-gradient(160deg, var(--ga-green-800) 0%, var(--ga-green-900) 100%);
  color: var(--ga-on-dark);
  padding-block: clamp(36px, 5.5vw, 64px) clamp(32px, 5vw, 56px);
}
main .hero .article{ max-width: var(--ga-maxw); }
main .hero .article > *{ max-width: var(--ga-measure); }
main .hero h1{ color: var(--ga-on-dark); margin-bottom: .35em; }
main .hero .eyebrow{ color: var(--ga-gold-light); }
main .hero .eyebrow a{ color: var(--ga-gold-light); }
main .hero .lead{ color: var(--ga-on-dark-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); line-height: 1.6; margin-bottom: 0; }
main .hero a:not(.btn){ color: var(--ga-on-dark); }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.hero__contact{ margin: 14px 0 0; font-size: var(--ga-fs-small); color: var(--ga-on-dark-2); }
.hero--home{ padding-bottom: clamp(64px, 8vw, 96px) !important; }
.hero__grid{ display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 64px); align-items: center; }
.hero__main > *{ max-width: var(--ga-measure); }
.hero__aside{
  padding: 22px 24px; border-radius: var(--ga-radius);
  background: rgba(251, 244, 226, .06); border: 1px solid rgba(232, 209, 153, .3);
}
.hero__aside-title{ margin: 0 0 12px; font-size: 1.5rem; color: var(--ga-on-dark); }
.hero__contact-list{ margin: 0 0 16px; }
.hero__contact-list > div{ padding: 8px 0; border-top: 1px solid rgba(232, 209, 153, .2); }
.hero__contact-list dt{ font-size: .875rem; color: var(--ga-gold-light); }
.hero__contact-list dd{ margin: 2px 0 0; color: var(--ga-on-dark); overflow-wrap: anywhere; }
.hero__aside-actions{ margin: 0; }
@media (max-width: 960px){ .hero__grid{ grid-template-columns: 1fr; } }
/* Phones: the header's call button and the enquiry section carry the
   contact details, so the introduction stays short. */
.hero__contact--compact{ display: none; }
@media (max-width: 640px){
  .hero__aside--contact{ display: none; }
  .hero__contact--compact{ display: block; }
}
/* A labelled design concept beside a page introduction */
.hero__figure{ margin: 0; }
.hero__figure-frame{ position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ga-radius); background: var(--ga-green-900); }
.hero__figure-frame img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__figure figcaption{ margin-top: 10px; font-size: .875rem; color: var(--ga-on-dark-2); }
.nowrap{ white-space: nowrap; }
.status-inline{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 18px; padding: 10px 14px; border-radius: var(--ga-radius-sm);
  background: rgba(251, 244, 226, .08); border: 1px solid rgba(232, 209, 153, .35);
  color: var(--ga-on-dark); font-size: var(--ga-fs-small); line-height: 1.55;
}
.status-inline__title{ background: var(--ga-gold); color: var(--ga-on-gold); }
.status-inline__text{ flex: 1 1 20rem; }

.eyebrow{
  margin: 0 0 10px; font-size: .9rem; font-weight: 500; letter-spacing: .01em; color: var(--ga-gold-text);
}
.eyebrow a{ color: inherit; }

/* ============================================================================
   5. SECTIONS AND LONG-FORM CONTENT
   ========================================================================= */
main > section,
main > .ga-contents > section,
.section{ padding-block: var(--ga-section-y); }
main > .hero, main > .ga-contents > .hero{ padding-block: clamp(36px, 5.5vw, 64px) clamp(32px, 5vw, 56px); }
.section--tint{ background: var(--ga-green-50); }
.section__head{ max-width: var(--ga-measure); margin-bottom: clamp(22px, 3vw, 32px); }
.section__head h2{ margin-bottom: .3em; }
.section__lead{ margin: 0; font-size: 1.0625rem; color: var(--ga-text); }
.section__more{ margin: 24px 0 0; }
.subheading{ margin: 28px 0 12px; font-size: 1.125rem; }
.note{ font-size: var(--ga-fs-small); color: var(--ga-muted); }
.actions{ display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.link-arrow{ font-weight: 500; }
.link-arrow::after{ content: " \2192"; }
.link-list{ margin: 0 0 1em; padding-left: 1.1em; }
.link-list li{ margin: .3em 0; }

/* Long-form page content from legacy/*.html. The container keeps the site
   width, so text lines up with every other section; the children carry the
   reading measure. */
.wrap.article, .wrap.content-wide{ max-width: var(--ga-maxw); }
.article > *{ max-width: 48rem; }
.article > .fact-list, .article > .grid, .article > table, .article > .cta-band,
.article > .status-columns, .article > .info-list, .article > .map{ max-width: 62rem; }
.article h2{ margin-top: 1.6em; }
.article h2:first-child{ margin-top: 0; }
.article h3{ margin-top: 1.4em; margin-bottom: .35em; }
.article ul, .article ol{ padding-left: 1.2em; }
.article li{ margin: .3em 0; }
.article .lead2{ font-size: 1.125rem; line-height: 1.6; color: var(--ga-ink); }
.article table{
  display: block; overflow-x: auto; width: 100%; margin: 20px 0;
  border-collapse: collapse; font-size: var(--ga-fs-small);
}
.article th, .article td{ padding: 10px 12px; border: 1px solid var(--ga-line); text-align: left; vertical-align: top; }
.article th{ background: var(--ga-green-50); color: var(--ga-ink); font-weight: 600; }
.article pre, .article code{ white-space: pre-wrap; overflow-wrap: anywhere; }
.article p, .article li{ overflow-wrap: break-word; }

.toc{
  margin: 20px 0 28px; padding: 16px 20px; border: 1px solid var(--ga-line); border-radius: var(--ga-radius);
  background: var(--ga-surface);
}
.toc strong{ display: block; margin-bottom: 6px; }
.toc ul{ margin: 0; padding-left: 1.1em; columns: 2 16rem; column-gap: 32px; }
.toc li{ margin: .25em 0; break-inside: avoid; }

.fact-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 12px; margin: 20px 0; }
.fact{ padding: 14px 16px; border: 1px solid var(--ga-line); border-radius: var(--ga-radius-sm); background: var(--ga-surface); font-size: var(--ga-fs-small); }
.fact strong{ display: block; margin-bottom: 2px; color: var(--ga-ink); }

.policy-date, .post-meta{ font-size: var(--ga-fs-small); color: var(--ga-muted); margin: 0 0 20px; }
.author-box{ margin-top: 32px; padding: 18px 20px; border-radius: var(--ga-radius); background: var(--ga-green-50); }
.author-box h3{ margin-top: 0; }
.author-box p{ margin: 0; }

.map{ display: block; width: 100%; min-height: 340px; border: 0; border-radius: var(--ga-radius); background: var(--ga-green-50); }
.map-fallback{ margin-top: 10px; font-size: var(--ga-fs-small); color: var(--ga-muted); }

.two-col{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

/* ============================================================================
   6. BUTTONS, CARDS, CALLS TO ACTION
   ========================================================================= */
.btn{
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; margin: 0;
  border-radius: var(--ga-radius-sm); border: 1px solid transparent;
  font-family: var(--ga-sans); font-size: 1rem; font-weight: 500; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ text-decoration: none; }
.btn--primary{ background: var(--ga-green-800); border-color: var(--ga-green-800); color: var(--ga-on-dark); }
.btn--primary:hover{ background: var(--ga-green-900); border-color: var(--ga-green-900); color: var(--ga-on-dark); }
.btn--secondary{ background: var(--ga-white); border-color: var(--ga-line-strong); color: var(--ga-green-800); }
.btn--secondary:hover{ background: var(--ga-green-50); border-color: var(--ga-green-700); color: var(--ga-green-900); }
.btn--small{ min-height: 44px; padding: 8px 14px; font-size: .9375rem; }
.btn--wide{ min-width: 14rem; }
.btn--block{ display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity: .65; cursor: not-allowed; }
/* On the deep-green introduction: gold primary, light outline secondary. */
main .hero .btn--primary{ background: var(--ga-gold); border-color: var(--ga-gold); color: var(--ga-on-gold); }
main .hero .btn--primary:hover{ background: var(--ga-gold-light); border-color: var(--ga-gold-light); color: var(--ga-on-gold); }
main .hero .btn--secondary{ background: transparent; border-color: rgba(251, 244, 226, .7); color: var(--ga-on-dark); }
main .hero .btn--secondary:hover{ background: rgba(251, 244, 226, .1); border-color: var(--ga-on-dark); color: var(--ga-on-dark); }
@media (max-width: 480px){
  .hero__actions .btn, .cta-band__actions .btn, .panel__actions .btn, .actions .btn{ width: 100%; }
}

.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 16px; }
.card{
  display: block; padding: 18px 20px; border: 1px solid var(--ga-line); border-radius: var(--ga-radius);
  background: var(--ga-surface); color: var(--ga-text); text-decoration: none;
  transition: border-color .15s ease;
}
a.card:hover{ border-color: var(--ga-green-700); color: var(--ga-text); }
.card h3{
  margin: 0 0 6px; font-family: var(--ga-serif); font-size: var(--ga-fs-h3); font-weight: 600; line-height: 1.2;
  color: var(--ga-green-800); text-wrap: pretty; font-variant-numeric: lining-nums;
}
a.card:hover h3{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card p{ margin: 0; font-size: var(--ga-fs-small); color: var(--ga-text); }
.card__meta{ display: block; margin-top: 10px; font-size: .875rem; color: var(--ga-muted); }
.blog-category{ margin-top: 1.4em; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.blog-category:first-child{ margin-top: 0; }
.related{ background: var(--ga-green-50); }
.related h2{ font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }

.cta-band{
  margin: 40px 0 0; padding: clamp(20px, 3vw, 28px); border-radius: var(--ga-radius);
  background: var(--ga-surface); border: 1px solid var(--ga-line); border-left: 4px solid var(--ga-gold);
}
.cta-band__title, .cta-band h2, .cta-band h3{
  margin: 0 0 8px; font-family: var(--ga-serif); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); font-weight: 600;
}
.cta-band p{ max-width: 42rem; }
.cta-band__actions{ display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }

/* ============================================================================
   7. HOMEPAGE SECTIONS
   ========================================================================= */
.status-columns{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px){ .status-columns{ grid-template-columns: 1fr; } }
.status-card{ padding: 20px 22px; border: 1px solid var(--ga-line); border-radius: var(--ga-radius); background: var(--ga-surface); }
.status-card--confirmed{ border-top: 4px solid var(--ga-green-700); }
.status-card:not(.status-card--confirmed):not(.status-card--pending){ border-top: 4px solid var(--ga-gold); }
.status-card--pending{ border-top: 4px solid var(--ga-line-strong); background: var(--ga-ivory); }
.status-card__title{ display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.125rem; }
.status-card--confirmed .status-card__title .ga-icon{ color: var(--ga-success); }
.status-card__title .ga-icon{ color: var(--ga-gold-text); }
.status-card--pending .status-card__title .ga-icon{ color: var(--ga-muted); }
.status-card__list{ margin: 0; padding-left: 1.1em; font-size: var(--ga-fs-small); }
.status-card__list li{ margin: .45em 0; }

.split{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }
.panel{ padding: clamp(20px, 3vw, 28px); border: 1px solid var(--ga-line); border-radius: var(--ga-radius); background: var(--ga-surface); }
.panel__title{ font-family: var(--ga-serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; margin-bottom: .5em; color: var(--ga-green-800); }
.panel__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 20px 0 0; }
.panel__more{ margin: 14px 0 0; }

.info-list{ margin: 0; border-top: 1px solid var(--ga-line); }
.info-list__row{ display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ga-line); }
.info-list dt{ font-weight: 600; color: var(--ga-ink); }
.info-list dd{ margin: 0; }
@media (max-width: 520px){ .info-list__row{ grid-template-columns: 1fr; gap: 2px; } }
.distance-list{ margin: 0 0 12px; padding: 0; list-style: none; border-top: 1px solid var(--ga-line); }
.distance-list li{ display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ga-line); }
.distance-list li span:first-child{ color: var(--ga-ink); font-weight: 500; }
.distance-list li span:last-child{ text-align: right; font-variant-numeric: tabular-nums; }

.faq-list{ display: grid; gap: 10px; max-width: 48rem; }

/* ============================================================================
   8. REACT COMPONENTS (ga-*)
   ========================================================================= */

/* --- disclosures (FAQ, optional sections) -------------------------------- */
.ga-disclosure{ border: 1px solid var(--ga-line); border-radius: var(--ga-radius-sm); background: var(--ga-surface); }
.ga-disclosure__summary{
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; cursor: pointer;
  font-weight: 500; color: var(--ga-ink); list-style: none;
}
.ga-disclosure__summary::-webkit-details-marker{ display: none; }
.ga-disclosure__summary::before{ content: "+"; flex: 0 0 1.2em; font-weight: 600; color: var(--ga-green-700); }
.ga-disclosure[open] > .ga-disclosure__summary::before{ content: "\2212"; }
.ga-disclosure__body{ padding: 0 16px 6px 46px; }
.ga-disclosure__body p{ max-width: 42rem; }

/* --- booking bar --------------------------------------------------------- */
.ga-bar-wrap{
  position: relative; z-index: 5;
  max-width: var(--ga-maxw); margin: calc(-1 * clamp(36px, 5vw, 56px)) auto 0;
  padding-inline: var(--ga-gutter);
}
.ga-bar{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1.2fr)) repeat(2, minmax(0, .65fr)) minmax(0, 1.2fr) auto;
  align-items: end; gap: 12px;
  background: var(--ga-surface); border: 1px solid var(--ga-line); border-radius: var(--ga-radius);
  box-shadow: var(--ga-shadow); padding: 16px;
}
.ga-bar__field{ display: flex; flex-direction: column; min-width: 0; }
.ga-bar__field label{ margin-bottom: 6px; font-size: .875rem; font-weight: 500; color: var(--ga-ink); }
.ga-bar__submit{ min-height: 48px; }
.ga-bar__note{ margin: 10px 4px 0; font-size: .9rem; color: var(--ga-muted); }
@media (max-width: 1100px){
  .ga-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, .6fr)); }
  .ga-bar__field:nth-child(5){ grid-column: 1 / 3; }
  .ga-bar__submit{ grid-column: 3 / 5; }
}
@media (max-width: 640px){
  .ga-bar-wrap{ margin-top: -28px; }
  .ga-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .ga-bar__field:nth-child(5), .ga-bar__submit{ grid-column: 1 / -1; }
}

/* --- form controls -------------------------------------------------------- */
.ga-input{
  display: block; width: 100%; max-width: 100%; min-height: 48px; margin: 0; padding: 10px 12px;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ga-ink);
  background: var(--ga-white); border: 1px solid var(--ga-line-strong); border-radius: var(--ga-radius-sm);
  color-scheme: light;
}
.ga-input:focus{ outline: 3px solid var(--ga-focus); outline-offset: 1px; border-color: var(--ga-green-800); }
.ga-select{ padding-right: 32px; }
.ga-textarea{ min-height: 110px; resize: vertical; }
.ga-field--error .ga-input{ border-color: var(--ga-error); border-width: 2px; }

.ga-form{ color: var(--ga-text); }
.ga-form__required{ margin: 0 0 18px; font-size: .9rem; color: var(--ga-muted); }
.ga-fieldset{ min-width: 0; margin: 0 0 26px; padding: 0; border: 0; }
.ga-fieldset__legend{ display: block; padding: 0; margin: 0 0 14px; font-family: var(--ga-serif); font-size: 1.45rem; font-weight: 600; color: var(--ga-ink); }
.ga-fieldset--nested{ margin: 4px 0 18px; }
.ga-fieldset--nested > legend{ margin-bottom: 8px; }
.ga-field{ display: flex; flex-direction: column; min-width: 0; margin-bottom: 16px; }
.ga-field--narrow{ max-width: 18rem; }
.ga-field--medium{ max-width: 28rem; }
.ga-field__label{ margin: 0 0 6px; font-size: .975rem; font-weight: 500; color: var(--ga-ink); line-height: 1.35; }
.ga-field__optional{ font-weight: 400; color: var(--ga-muted); }
.ga-field__hint{ margin: 6px 0 0; font-size: .9rem; line-height: 1.45; color: var(--ga-muted); }
.ga-field__hint--after{ margin: 6px 0 0; }
.ga-field__hint--before{ margin: -2px 0 8px; }
.ga-field__error{ margin: 0 0 8px; font-size: .95rem; font-weight: 500; line-height: 1.4; color: var(--ga-error); }
.ga-field__error::before{ content: "! "; font-weight: 700; }
.ga-field__ok{ margin: 6px 0 0; font-size: .9rem; color: var(--ga-success); }
.ga-field__ok::before{ content: "\2713  "; font-weight: 700; }
.ga-field__aside{ margin: -6px 0 16px; }
.ga-link-button{
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--ga-green-700); text-decoration: underline; text-underline-offset: 3px;
}

.ga-grid{ display: grid; gap: 0 16px; }
.ga-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ga-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ga-grid--phone{ grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 560px){
  .ga-grid--2, .ga-grid--phone{ grid-template-columns: 1fr; }
  .ga-grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ga-phone{ display: flex; align-items: stretch; min-width: 0; }
.ga-phone__code{
  display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 12px;
  border: 1px solid var(--ga-line-strong); border-right: 0; border-radius: var(--ga-radius-sm) 0 0 var(--ga-radius-sm);
  background: var(--ga-green-50); color: var(--ga-ink); font-variant-numeric: tabular-nums;
}
.ga-phone .ga-input{ flex: 1 1 auto; min-width: 0; border-radius: 0 var(--ga-radius-sm) var(--ga-radius-sm) 0; }
.ga-field--error .ga-phone__code{ border-color: var(--ga-error); border-width: 2px; }

/* enquiry type — radio cards */
.ga-choice-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 10px; }
.ga-choice{
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; align-content: start;
  min-height: 48px; padding: 12px 14px;
  background: var(--ga-white); border: 1px solid var(--ga-line-strong); border-radius: var(--ga-radius-sm); cursor: pointer;
}
.ga-choice.is-selected{ border: 2px solid var(--ga-green-800); padding: 11px 13px; background: var(--ga-green-50); }
.ga-choice__input{ grid-row: 1 / 3; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ga-green-800); }
.ga-choice__label{ font-weight: 500; color: var(--ga-ink); line-height: 1.3; }
.ga-choice__hint{ grid-column: 2; font-size: .875rem; color: var(--ga-muted); line-height: 1.35; }
.ga-choice:focus-within{ outline: 3px solid var(--ga-focus); outline-offset: 2px; }

/* reply method — segmented radios */
.ga-segmented{ display: flex; flex-wrap: wrap; gap: 8px; }
.ga-segmented__option{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--ga-line-strong); border-radius: var(--ga-radius-sm); background: var(--ga-white);
  cursor: pointer; font-weight: 500; color: var(--ga-ink);
}
.ga-segmented__option input{ width: 18px; height: 18px; margin: 0; accent-color: var(--ga-green-800); }
.ga-segmented__option.is-selected{ border: 2px solid var(--ga-green-800); padding: 7px 13px; background: var(--ga-green-50); }
.ga-segmented__option:focus-within{ outline: 3px solid var(--ga-focus); outline-offset: 2px; }

/* room choice */
.ga-room-choice{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 8px; }
.ga-room-option{
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; align-content: start;
  min-height: 48px; padding: 10px 12px;
  background: var(--ga-white); border: 1px solid var(--ga-line-strong); border-radius: var(--ga-radius-sm); cursor: pointer;
}
.ga-room-option input{ grid-row: 1 / 3; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ga-green-800); }
.ga-room-option__name{ font-weight: 500; color: var(--ga-ink); }
.ga-room-option__meta{ grid-column: 2; font-size: .875rem; color: var(--ga-muted); }
.ga-room-option.is-selected{ border: 2px solid var(--ga-green-800); padding: 9px 11px; background: var(--ga-green-50); }
.ga-room-option:focus-within{ outline: 3px solid var(--ga-focus); outline-offset: 2px; }

.ga-dates{ margin-bottom: 4px; }
.ga-check{ display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 2px 0 16px; }
.ga-check input{ width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 22px; accent-color: var(--ga-green-800); }
.ga-check label{ color: var(--ga-ink); line-height: 1.45; cursor: pointer; }
.ga-note{ margin: 0 0 16px; padding: 10px 14px; font-size: .9375rem; line-height: 1.5; background: var(--ga-green-50); border-radius: var(--ga-radius-sm); }

.ga-honeypot{ position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ga-form__submit{ margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--ga-line); }
.ga-form__enquiry-only{ margin: 0 0 16px; font-size: .9375rem; color: var(--ga-text); max-width: 40rem; }
.ga-form__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ga-form__status{ margin: 0; font-size: .95rem; }

.ga-error-summary{ margin: 0 0 24px; padding: 16px 18px; border: 3px solid var(--ga-error); border-radius: var(--ga-radius-sm); background: var(--ga-white); }
.ga-error-summary__title{ margin: 0 0 8px; font-size: 1.1rem; }
.ga-error-summary__list{ margin: 0; padding-left: 1.1em; }
.ga-error-summary__list li{ margin: .3em 0; }
.ga-error-summary__list a{ color: var(--ga-error); font-weight: 500; }

.ga-alert{ margin: 0 0 24px; padding: 16px 18px; border-radius: var(--ga-radius-sm); line-height: 1.55; }
.ga-alert p{ margin: 0 0 6px; }
.ga-alert--error{ background: var(--ga-error-bg); border: 1px solid rgba(163, 48, 26, .45); color: #5c1a0d; }
.ga-alert--error p{ color: #5c1a0d; }
.ga-alert--info{ background: var(--ga-green-50); border: 1px solid var(--ga-line); }
.ga-alert__title{ font-weight: 600; }
.ga-alert__actions a{ color: var(--ga-green-800); font-weight: 500; }

/* --- enquiry section ------------------------------------------------------ */
.ga-enquiry{ background: var(--ga-green-50); }
.ga-enquiry__layout{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: clamp(20px, 3vw, 36px); align-items: start; }
.ga-enquiry__panel{
  min-width: 0; padding: clamp(18px, 3vw, 32px);
  background: var(--ga-surface); border: 1px solid var(--ga-line); border-radius: var(--ga-radius); box-shadow: var(--ga-shadow-sm);
}
.ga-enquiry__aside{
  position: sticky; top: calc(var(--ga-header-h) + 20px);
  padding: 20px; background: var(--ga-white); border: 1px solid var(--ga-line); border-radius: var(--ga-radius);
}
.ga-enquiry__aside-title{ margin: 0 0 10px; font-family: var(--ga-serif); font-size: 1.4rem; font-weight: 600; }
.ga-ticks{ margin: 0 0 14px; padding: 0; list-style: none; }
.ga-ticks li{ position: relative; margin: 0 0 10px; padding-left: 26px; font-size: .9375rem; line-height: 1.5; }
.ga-ticks li::before{
  content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px;
  border-left: 2px solid var(--ga-green-700); border-bottom: 2px solid var(--ga-green-700); transform: rotate(-45deg);
}
.ga-enquiry__policies{ margin: 0 0 16px; font-size: .9rem; line-height: 1.8; color: var(--ga-muted); }
.ga-enquiry__contact{ display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ga-line); }
.ga-enquiry__contact-title{ margin: 0 0 2px; font-weight: 600; color: var(--ga-ink); }
.ga-enquiry__contact .btn{ overflow-wrap: anywhere; }
@media (max-width: 900px){
  .ga-enquiry__layout{ grid-template-columns: 1fr; }
  .ga-enquiry__aside{ position: static; }
}

/* --- confirmation ---------------------------------------------------------- */
.ga-confirmation:focus{ outline: 3px solid var(--ga-focus); outline-offset: 4px; }
.ga-confirmation__title{ margin: 0 0 12px; font-family: var(--ga-serif); font-size: 1.9rem; font-weight: 600; color: var(--ga-green-800); }
.ga-confirmation__reference{ display: inline-block; padding: 10px 14px; background: var(--ga-green-50); border: 1px dashed var(--ga-green-700); border-radius: var(--ga-radius-sm); }
.ga-confirmation__subtitle{ margin: 22px 0 8px; font-size: 1rem; }
.ga-summary-list{ margin: 0 0 20px; border-top: 1px solid var(--ga-line); }
.ga-summary-list__row{ display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ga-line); }
.ga-summary-list dt{ font-weight: 500; color: var(--ga-ink); }
.ga-summary-list dd{ margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px){ .ga-summary-list__row{ grid-template-columns: 1fr; gap: 2px; } }

/* --- photographs and design concepts -------------------------------------- */
.ga-photo{ margin: 0; }
.ga-photo__frame{ position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ga-radius-sm); background: var(--ga-green-50); }
.ga-photo__frame img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ga-photo__badge{
  position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(14, 36, 23, .88); color: var(--ga-on-dark); font-size: .8125rem; font-weight: 500; line-height: 1.5;
}
.ga-photo__caption{ display: grid; gap: 2px; margin-top: 8px; font-size: .9rem; }
.ga-photo__note{ color: var(--ga-muted); }

/* --- room cards: rows line up across the four cards (subgrid) ------------- */
.ga-room-grid{
  --rows: 4;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px;
}
.ga-room-card{
  display: grid; grid-template-rows: subgrid; grid-row: span calc(var(--rows) + 2);
  min-width: 0; margin-bottom: 16px;
  background: var(--ga-surface); border: 1px solid var(--ga-line); border-radius: var(--ga-radius); overflow: hidden;
}
.ga-room-card__photo .ga-photo__frame{ border-radius: 0; }
.ga-room-card__head{ padding: 18px 18px 6px; }
.ga-room-card__title{ margin: 0 0 4px; font-family: var(--ga-serif); font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: var(--ga-green-800); }
.ga-room-card__benefit{ margin: 0; font-size: .9375rem; color: var(--ga-text); }
.ga-room-card__facts{ display: contents; }
.ga-room-card__row{ margin: 0 18px; padding: 9px 0; border-top: 1px solid var(--ga-line); }
.ga-room-card__row dt{ display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--ga-muted); }
.ga-room-card__row dt .ga-icon{ color: var(--ga-green-700); width: 16px; height: 16px; }
.ga-room-card__row dd{ margin: 2px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ga-ink); overflow-wrap: anywhere; }
.ga-room-card__row dd.is-pending, .ga-facts dd.is-pending{ color: var(--ga-muted); font-style: normal; }
.ga-room-card__foot{ align-self: end; padding: 8px 18px 18px; }
.ga-room-card__note{ margin: 0 0 12px; padding: 10px 12px; border-radius: var(--ga-radius-sm); background: var(--ga-green-50); font-size: .875rem; line-height: 1.5; }
.ga-room-card__actions{ display: grid; gap: 8px; }
@media (max-width: 1100px){ .ga-room-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){
  .ga-room-grid{ grid-template-columns: 1fr; }
  .ga-room-card{ grid-template-rows: none; grid-row: auto; display: flex; flex-direction: column; }
  .ga-room-card__foot{ align-self: stretch; }
  .ga-room-card__facts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 18px; column-gap: 12px; }
  .ga-room-card__row{ margin: 0; }
}
/* Browsers without subgrid: cards simply stack their rows. */
@supports not (grid-template-rows: subgrid){
  .ga-room-card{ display: flex; flex-direction: column; grid-row: auto; }
  .ga-room-card__foot{ margin-top: auto; align-self: stretch; }
}

/* shared amenities, listed once */
.ga-shared{ margin-top: 20px; padding: clamp(18px, 3vw, 24px); border: 1px solid var(--ga-line); border-radius: var(--ga-radius); background: var(--ga-surface); }
.ga-shared__title{ margin: 0 0 14px; font-family: var(--ga-serif); font-size: 1.45rem; font-weight: 600; }
.ga-inclusions{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 16px 24px; }
.ga-inclusions__title{ display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .9375rem; }
.ga-inclusions__group--included .ga-inclusions__title .ga-icon{ color: var(--ga-success); }
.ga-inclusions__group--planned .ga-inclusions__title .ga-icon{ color: var(--ga-gold-text); }
.ga-inclusions__group--on-request .ga-inclusions__title .ga-icon,
.ga-inclusions__group--extra-charge .ga-inclusions__title .ga-icon{ color: var(--ga-green-700); }
.ga-inclusions__list{ margin: 0; padding-left: 1.1em; }
.ga-inclusions__list li{ margin: .3em 0; font-size: .9375rem; line-height: 1.5; }
.ga-inclusions__label{ color: var(--ga-ink); }
.ga-inclusions__note{ color: var(--ga-muted); }

/* --- room detail summary --------------------------------------------------- */
.ga-room-summary__grid{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 860px){ .ga-room-summary__grid{ grid-template-columns: 1fr; } }
.ga-room-summary__lead{ font-size: 1.125rem; color: var(--ga-ink); max-width: 40rem; }
.ga-facts{ margin: 0; border-top: 1px solid var(--ga-line); }
.ga-facts__row{ display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ga-line); }
.ga-facts dt{ display: flex; align-items: center; gap: 6px; font-size: .9375rem; color: var(--ga-muted); }
.ga-facts dt .ga-icon{ color: var(--ga-green-700); }
.ga-facts dd{ margin: 0; font-weight: 500; color: var(--ga-ink); overflow-wrap: anywhere; }
@media (max-width: 480px){ .ga-facts__row{ grid-template-columns: 1fr; gap: 2px; } }
.ga-room-summary__aside{ display: grid; gap: 16px; position: sticky; top: calc(var(--ga-header-h) + 20px); }
@media (max-width: 860px){ .ga-room-summary__aside{ position: static; } }
.ga-enquire-card{ padding: 20px; border: 1px solid var(--ga-line); border-radius: var(--ga-radius); background: var(--ga-surface); }
.ga-enquire-card__title{ margin: 0 0 6px; font-family: var(--ga-serif); font-size: 1.4rem; font-weight: 600; color: var(--ga-ink); }
.ga-enquire-card p:not(.ga-enquire-card__title){ font-size: .9375rem; }
.ga-enquire-card__alt{ margin: 12px 0 0; }
.ga-room-summary__more{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); margin-top: 32px; }
@media (max-width: 860px){ .ga-room-summary__more{ grid-template-columns: 1fr; } }
.ga-room-summary__panel{ min-width: 0; }

/* --- gallery + enlarged view ----------------------------------------------- */
.ga-gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ga-gallery--compact{ grid-template-columns: 1fr; }
.ga-gallery__cell, .ga-gallery__item{ margin: 0; min-width: 0; }
.ga-gallery__trigger{
  position: relative; display: block; width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: var(--ga-radius-sm); overflow: hidden; background: var(--ga-green-50);
  aspect-ratio: 4 / 3; cursor: zoom-in;
}
.ga-gallery__trigger img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ga-gallery__trigger:focus-visible{ outline: 3px solid var(--ga-focus); outline-offset: 3px; }
.ga-gallery__zoom{
  position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255, 253, 246, .94); color: var(--ga-green-800);
}
.ga-gallery__caption{ display: grid; gap: 2px; margin-top: 10px; }
.ga-gallery__caption-title{ font-weight: 600; color: var(--ga-ink); }
.ga-gallery__caption-note{ font-size: .875rem; color: var(--ga-muted); }

html.ga-lightbox-open{ overflow: hidden; }
.ga-lightbox{
  width: min(96vw, 1000px); max-width: 96vw; max-height: 94vh; padding: 0; border: 0; border-radius: var(--ga-radius);
  background: var(--ga-white); color: var(--ga-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.ga-lightbox::backdrop{ background: rgba(10, 20, 14, .82); }
.ga-lightbox__inner{ display: flex; flex-direction: column; max-height: 94vh; }
.ga-lightbox__bar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--ga-line); }
.ga-lightbox__count{ margin: 0; font-size: .95rem; }
.ga-lightbox__close, .ga-lightbox__step{
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0;
  border: 1px solid var(--ga-line-strong); border-radius: 50%; background: var(--ga-white); color: var(--ga-ink); cursor: pointer;
}
.ga-lightbox__close:hover, .ga-lightbox__step:hover{ background: var(--ga-green-50); }
.ga-lightbox__figure{ margin: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.ga-lightbox__image{ display: flex; justify-content: center; background: #0e1812; }
.ga-lightbox__image img{ display: block; width: 100%; max-height: 68vh; object-fit: contain; }
.ga-lightbox__caption{ display: grid; gap: 4px; padding: 14px 18px; }
.ga-lightbox__caption strong{ font-size: 1.05rem; }
.ga-lightbox__note{ font-size: .95rem; color: var(--ga-text); }
.ga-lightbox__nav{ display: flex; justify-content: center; gap: 12px; padding: 0 18px 16px; }

/* ============================================================================
   9. FOOTER, WHATSAPP BUTTON
   ========================================================================= */
.site-footer{ background: var(--ga-green-900); color: #d9e0d2; font-size: var(--ga-fs-small); }
.site-footer a{ color: var(--ga-on-dark-2); text-decoration: none; }
.site-footer a:hover{ color: var(--ga-on-dark); text-decoration: underline; }
.site-footer__grid{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 32px 48px; padding-block: 48px 32px; }
.site-footer__brand{ margin: 0 0 6px; font-family: var(--ga-serif); font-size: 1.7rem; font-weight: 700; color: var(--ga-on-dark); }
.site-footer__about{ margin: 0 0 16px; max-width: 24rem; }
.site-footer__contact{ font-style: normal; line-height: 1.9; }
.site-footer__contact a{ color: var(--ga-gold-light); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__nav{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.site-footer__heading{ margin: 0 0 10px; font-family: var(--ga-sans); font-size: .9375rem; font-weight: 600; color: var(--ga-on-dark); }
.site-footer__col ul{ margin: 0; padding: 0; list-style: none; }
.site-footer__col li{ margin: 0; }
.site-footer__col a{ display: inline-flex; align-items: center; min-height: 36px; }
.site-footer__base{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px 28px; border-top: 1px solid rgba(232, 220, 192, .18); }
.site-footer__base p{ margin: 0; }
@media (max-width: 960px){
  .site-footer__grid{ grid-template-columns: 1fr; }
  .site-footer__nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){ .site-footer__nav{ grid-template-columns: 1fr 1fr; gap: 20px 16px; } }

/* Floating WhatsApp button. components/FloatGuard.jsx hides it while the page
   introduction, the enquiry form or the footer is on screen, so it never
   covers an action or the policy links. */
/* Hidden until FloatGuard has checked what is under it (so it never flashes
   over the page introduction while the page loads). */
.whatsapp-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1f7a45; box-shadow: 0 6px 18px rgba(14, 36, 23, .3);
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease;
}
html[data-float="ready"] .whatsapp-float{ visibility: visible; opacity: 1; }
.whatsapp-float svg{ width: 28px; height: 28px; fill: #fff; }
.whatsapp-float:focus-visible{ outline: 3px solid var(--ga-focus); outline-offset: 3px; }
html.ga-float-hidden .whatsapp-float{ visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 640px){ .whatsapp-float{ right: 14px; bottom: 14px; width: 50px; height: 50px; } .whatsapp-float svg{ width: 26px; height: 26px; } }

/* ============================================================================
   10. MOTION AND PRINT
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print{
  .site-header, .status-band, .whatsapp-float, .nav-backdrop, .site-footer__nav, .ga-bar-wrap{ display: none !important; }
  main .hero{ background: none; color: #000; }
  main .hero h1, main .hero .lead{ color: #000; }
}