/* ==========================================================================
   SAMBODHI RETREAT — site.css (v3)

   Palette and proportions sampled directly from the supplied reference
   screenshots:
     deep green  #172D20   (section fill, hamburger, FAB, body ink on light)
     sage        #C0CFA6   (light section fill AND heading colour on green)
     white       #FFFFFF   (editorial sections)
     gold        #A88800   (sampled from the Sambodhi logo, not the reference)
     header      80px on a 390px viewport (152/739 of screenshot width)
     FAB         68px circle, 20px from the right edge

   Content, links and functionality are unchanged — this is the UI layer only.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Sambodhi's own identity: gold sampled from the logo (#A88800), greens and
     creams from the brand brief. Deliberately NOT the reference's brand values. */
  --green:    #17291E;   /* sampled from the comp */
  --green-2:  #284B39;   /* forest      */
  --green-3:  #33573F;   /* raised      */
  --olive:    #657458;   /* olive       */
  --sage:     #CFD3BD;   /* pale olive band, tinted from --olive toward ivory */
  --sage-2:   #DDE0CF;
  --gold:     #A98A4A;   /* comp's label + icon gold */
  --gold-2:   #C6A667;   /* lighter, for use on dark */
  --cream:    #F2EEE8;   /* sampled from the comp */
  --ivory:    #FAF9F5;
  --paper:    #FBFAF7;
  --white:    #F2EEE8;   /* light sections are the comp's warm cream */
  --ink:      #12241E;   /* sampled from the comp */
  --muted:    #4E5C52;
  --muted-d:  rgba(250,249,245,.80);
  --line:     rgba(18,36,30,.13);
  --line-d:   rgba(207,211,189,.28);

  --f-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:   'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-outline: clamp(3.1rem, 19vw, 11rem);
  --fs-h1:      clamp(2.3rem, 9.2vw, 4.6rem);
  --fs-h2:      clamp(2.15rem, 8.6vw, 4rem);
  --fs-h3:      clamp(1.4rem, 5vw, 1.95rem);
  --fs-lede:    clamp(1rem, 4.1vw, 1.12rem);
  --fs-body:    clamp(.95rem, 4vw, 1.02rem);
  --fs-label:   .7rem;

  --gut:     clamp(1.35rem, 6vw, 4.5rem);
  --section: clamp(3.4rem, 12vw, 7.5rem);
  --maxw:    1360px;
  --curve-h: clamp(52px, 13vw, 150px);

  --e-out: cubic-bezier(.22,.72,.2,1);
  --e-cur: cubic-bezier(.76,0,.24,1);
  --e-hero: cubic-bezier(.16,1,.3,1);   /* expo out — settles, never bounces */
  --hdr-h: 88px;
  --radius: 10px;   /* the comp rounds its photographs */
}
/* The nav rail is hidden (burger-only navigation), so the desktop header is
   a single tier again. 150px was reserving space the rail no longer takes. */
@media (min-width:1100px){ :root{ --hdr-h:118px; } }

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x is CLIPPED, not HIDDEN. `hidden` turns html/body into scroll
   containers, and a sticky element then has nothing scrollable to stick
   inside — which silently kills the pinned hero. `clip` trims the same
   horizontal overflow without creating that container. The `hidden` line
   stays first as the fallback for engines that don't know `clip`. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
      overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; overflow-x:hidden; overflow-x:clip; background:var(--white); color:var(--ink);
  font-family:var(--f-sans); font-size:var(--fs-body); font-weight:400;
  line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* no top padding: the hero runs up behind the transparent header */
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:400; line-height:1.06; margin:0; }
p{ margin:0 0 1.15em; } p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--sage); color:var(--green); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip-link{ position:fixed;top:8px;left:8px;z-index:9999;transform:translateY(-250%);
  background:var(--green);color:#fff;padding:.7rem 1.1rem;font-size:.74rem; }
.skip-link:focus{ transform:none; }

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:880px; }
.section{ position:relative; padding-block:var(--section); }
.section--tight{ padding-block:calc(var(--section)*.62); }
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }
.section > .wrap,.section > .curve + .wrap{ position:relative; z-index:2; }

.split{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.6rem,3.4vw,4rem); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:clamp(1.6rem,6vw,2.4rem); } }
.col-7{ grid-column:span 7; } .col-6{ grid-column:span 6; }
.col-5{ grid-column:span 5; } .col-4{ grid-column:span 4; }
@media (max-width:900px){ .col-7,.col-6,.col-5,.col-4{ grid-column:1/-1; } .m-order-first{ order:-1; } }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,1.6vw,1.3rem); }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }
.center{ text-align:center; }
.measure{ max-width:64ch; margin-inline:auto; }
.bleed-l{ margin-left:calc(var(--gut)*-1); }
.bleed-r{ margin-right:calc(var(--gut)*-1); }
@media (max-width:900px){ .bleed-l,.bleed-r{ margin-left:0; margin-right:0; } }

/* ---------- 4. SECTION SURFACES ----------------------------------------- */
.on-green{ background:var(--green); color:#fff; }
.on-sage { background:var(--sage);  color:var(--green); }
.on-white{ background:var(--white); color:var(--ink); }
.on-green .lede,.on-green .body-copy{ color:var(--muted-d); }
.on-sage  .lede,.on-sage  .body-copy{ color:#33452F; }

/* ---------- 4b. AUTO-DECORATION LAYER ------------------------------------
   The corner watermarks alone left the tall editorial bands looking bare: on a
   1440px canvas the widest piece capped at 660px, so a 2000px-tall cream
   section was only ~5% covered and read as a flat field. This layer gives
   every coloured band two further pieces, sized in viewport units so they
   scale up rather than cap out, and hung off the left and right edges so the
   viewport crops them.

   It is CSS-only and keys off the existing .on-* classes, so it applies to any
   build of the markup and survives a rebuild. Corner pieces stay with the .wm
   spans; this layer only takes the side and bottom edges, so the two never
   fight for the same corner.

   Both pseudo-elements are pointer-events:none at z-index 0, under the
   z-index:2 content layer set by `.section > .wrap`.                        */

.section.on-white, .section.on-sage, .section.on-green{
  --wm-o:.085;                         /* brief band is 5-12% */
  /* piece 1 — tall branch entering the left edge */
  --a1-img:url("../img/wm-branch.svg"); --a1-ar:560/1000;
  --a1-w:auto; --a1-h:76%; --a1-max:152vh;
  --a1-l:-9vw; --a1-r:auto; --a1-t:6%; --a1-b:auto; --a1-fx:1; --a1-rot:0deg;
  /* piece 2 — trailing vine along the lower right */
  --a2-img:url("../img/wm-vine.svg");   --a2-ar:1000/560;  --a2-w:48vw;
  --a2-l:auto; --a2-r:-13vw; --a2-t:auto; --a2-b:4%; --a2-fx:-1; --a2-rot:0deg;
}
.section.on-sage { --wm-o:.115; }
.section.on-green{ --wm-o:.075; }

.section.on-white::before, .section.on-white::after,
.section.on-sage::before,  .section.on-sage::after,
.section.on-green::before, .section.on-green::after{
  content:""; position:absolute; z-index:0;
  pointer-events:none; user-select:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:var(--wm-o);
}
.section.on-green::before, .section.on-green::after{
  filter:brightness(0) invert(1);      /* dark ink art -> pale line on green */
}
.section.on-white::before, .section.on-sage::before, .section.on-green::before{
  left:var(--a1-l); right:var(--a1-r); top:var(--a1-t); bottom:var(--a1-b);
  width:var(--a1-w); height:var(--a1-h,auto); aspect-ratio:var(--a1-ar);
  max-height:var(--a1-max,none); min-height:var(--a1-min,0);
  transform:scaleX(var(--a1-fx)) rotate(var(--a1-rot));
  background-image:var(--a1-img);
}
.section.on-white::after, .section.on-sage::after, .section.on-green::after{
  left:var(--a2-l); right:var(--a2-r); top:var(--a2-t); bottom:var(--a2-b);
  width:var(--a2-w); height:var(--a2-h,auto); aspect-ratio:var(--a2-ar);
  max-height:var(--a2-max,none); min-height:var(--a2-min,0);
  transform:scaleX(var(--a2-fx)) rotate(var(--a2-rot));
  background-image:var(--a2-img);
}

/* Four compositions, cycled so no two neighbouring bands repeat. */
.section:nth-of-type(4n+2).on-white, .section:nth-of-type(4n+2).on-sage,
.section:nth-of-type(4n+2).on-green{
  --a1-img:url("../img/wm-bloom.svg"); --a1-ar:1/1;
  --a1-w:auto; --a1-h:34%; --a1-max:88vh; --a1-min:300px;
  --a1-l:auto; --a1-r:-11vw; --a1-t:7%; --a1-b:auto; --a1-fx:1; --a1-rot:8deg;
  --a2-img:url("../img/wm-branch.svg"); --a2-ar:560/1000;
  --a2-w:auto; --a2-h:66%; --a2-max:138vh;
  --a2-l:-8vw; --a2-r:auto; --a2-t:auto; --a2-b:2%; --a2-fx:-1; --a2-rot:0deg;
}
.section:nth-of-type(4n+3).on-white, .section:nth-of-type(4n+3).on-sage,
.section:nth-of-type(4n+3).on-green{
  --a1-img:url("../img/wm-vine.svg"); --a1-ar:1000/560; --a1-w:52vw;
  --a1-l:-15vw; --a1-r:auto; --a1-t:2%; --a1-b:auto; --a1-fx:1; --a1-rot:0deg;
  --a2-img:url("../img/wm-branch.svg"); --a2-ar:560/1000;
  --a2-w:auto; --a2-h:60%; --a2-max:130vh;
  --a2-l:auto; --a2-r:-9vw; --a2-t:auto; --a2-b:3%; --a2-fx:-1; --a2-rot:0deg;
}
.section:nth-of-type(4n+4).on-white, .section:nth-of-type(4n+4).on-sage,
.section:nth-of-type(4n+4).on-green{
  --a1-img:url("../img/wm-branch.svg"); --a1-ar:560/1000;
  --a1-w:auto; --a1-h:72%; --a1-max:146vh;
  --a1-l:auto; --a1-r:-9vw; --a1-t:auto; --a1-b:2%; --a1-fx:-1; --a1-rot:0deg;
  --a2-img:url("../img/watermark-lotus.svg"); --a2-ar:700/420; --a2-w:44vw;
  --a2-l:-13vw; --a2-r:auto; --a2-t:6%; --a2-b:auto; --a2-fx:1; --a2-rot:0deg;
}

/* Tablet: one piece only, so the bands stay airy on a narrower canvas. */
@media (max-width:900px){
  .section.on-white::after, .section.on-sage::after, .section.on-green::after{ display:none; }
  .section.on-white, .section.on-sage, .section.on-green{
    --a1-w:58vw; --a1-h:auto; --a1-max:none; --a1-min:0; --a1-l:-22vw; }
  .section:nth-of-type(4n+2).on-white, .section:nth-of-type(4n+2).on-sage,
  .section:nth-of-type(4n+2).on-green{ --a1-w:62vw; --a1-h:auto; --a1-max:none; --a1-min:0; --a1-r:-24vw; }
  .section:nth-of-type(4n+3).on-white, .section:nth-of-type(4n+3).on-sage,
  .section:nth-of-type(4n+3).on-green{ --a1-w:86vw; --a1-l:-26vw; }
  .section:nth-of-type(4n+4).on-white, .section:nth-of-type(4n+4).on-sage,
  .section:nth-of-type(4n+4).on-green{ --a1-w:58vw; --a1-h:auto; --a1-max:none; --a1-min:0; --a1-r:-22vw; }
}
@media (max-width:600px){
  .section.on-white, .section.on-sage, .section.on-green{ --wm-o:.07; }
  .section.on-sage{ --wm-o:.10; }
}

/* ---------- 5. CURVED SECTION TRANSITIONS -------------------------------- */
/* An absolutely-placed SVG carrying its own section's fill, so the boundary
   between two bands is an organic curve rather than a straight edge.        */
.curve{ position:absolute; left:0; right:0; z-index:1; line-height:0; pointer-events:none; }
.curve--top   { bottom:100%; margin-bottom:-1px; }
.curve--bottom{ top:100%;    margin-top:-1px; }
.curve svg{ display:block; width:100%; height:var(--curve-h); fill:var(--c,var(--green)); }
.curve--flip svg{ transform:scaleY(-1); }
.curve--mirror svg{ transform:scaleX(-1); }
.curve--flip.curve--mirror svg{ transform:scale(-1,-1); }

/* A following section's curve reaches back over this one, so reserve room for
   it — otherwise flush-bottom content is clipped by the arc. The amenities
   stage opts out by name and carries the clearance itself; see section 31. */
.section:has(+ section .curve--top){ padding-bottom:calc(var(--section) + var(--curve-h) * .85); }
@supports not selector(:has(*)){
  .section{ padding-bottom:calc(var(--section) + var(--curve-h) * .5); }
}

/* ---------- 6. BOTANICAL WATERMARK -------------------------------------- */
/* Original line-art, held well below the text so contrast is never affected. */
.wm{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  width:clamp(280px,54vw,1040px); aspect-ratio:700/420;
  background:url("../img/watermark.svg") no-repeat center/contain;
  opacity:.10;                 /* brief band is 5-12%; .10 reads without shouting */
}
.on-sage  .wm{ opacity:.13; }
.on-green .wm{ opacity:.085; filter:brightness(0) invert(1); }  /* lighter green on dark */
.on-green .wm--leafbig{ opacity:.10; }
/* held well into the margins so no glyph ever sits over running text */
.wm--tr{ top:-6%;    right:-12%; }
.wm--tl{ top:-5%;    left:-12%;  transform:scaleX(-1); }
.wm--br{ bottom:-8%; right:-12%; transform:scale(-1,-1); }
.wm--bl{ bottom:-6%; left:-12%;  transform:scaleY(-1); }
@media (max-width:600px){ .wm{ width:78vw; } }
/* Different compositions per section, as the reference does — an ornate
   rosette for the eco band, a sparse sprig where margins are tight. */
.wm--mandala{ background-image:url("../img/watermark-mandala.svg"); }
.wm--sprig  { background-image:url("../img/watermark-sprig.svg"); }
.wm--sprig  { width:clamp(240px,42vw,760px); }
.wm--lotus  { background-image:url("../img/watermark-lotus.svg"); }
.wm--leafbig{ background-image:url("../img/watermark-leafbig.svg"); width:clamp(340px,62vw,1180px); }
.wm--bloom { background-image:url("../img/wm-bloom.svg");  aspect-ratio:1/1;      width:clamp(300px,40vw,760px); }
.wm--branch{ background-image:url("../img/wm-branch.svg"); aspect-ratio:560/1000; width:clamp(200px,30vw,560px); }
.wm--vine  { background-image:url("../img/wm-vine.svg");   aspect-ratio:1000/560; width:clamp(320px,56vw,1200px); }
/* edge entries, not just corners — artwork cropped by the viewport */
.wm--l{ top:50%; left:-10%;  transform:translateY(-50%) scaleX(-1); }
.wm--r{ top:50%; right:-10%; transform:translateY(-50%); }
.wm--t{ top:-20%; left:50%;  transform:translateX(-50%); }
.wm--b{ bottom:-20%; left:50%; transform:translateX(-50%) scaleY(-1); }
@media (max-width:600px){
  .wm--l{ left:-46%; } .wm--r{ right:-46%; }
  .wm--leafbig{ width:96vw; }
}
@media (max-width:600px){ .wm--sprig{ width:60vw; } }

/* ---------- 7. TYPOGRAPHY ------------------------------------------------ */
/* Reference pattern: heading line 1 roman, line 2 italic, forced break. */
.dhead{ font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.004em; }
.dhead b{ font-weight:400; display:block; }
.dhead em{ font-style:italic; }
.on-green .dhead{ color:var(--sage); }
.on-sage  .dhead,.on-white .dhead{ color:var(--green); }
.h1{ font-size:var(--fs-h1); } .h3{ font-size:var(--fs-h3); line-height:1.2; }

.label{
  font-family:var(--f-sans); font-size:var(--fs-label); font-weight:500;
  text-transform:uppercase; letter-spacing:.3em; color:var(--gold);
  margin:0 0 1.3rem; display:block;
}
.label--center{ text-align:center; }
.on-green .label{ color:var(--gold-2); }

.lede{ font-size:var(--fs-lede); line-height:1.72; color:var(--muted); max-width:60ch; }
.body-copy{ color:var(--muted); max-width:62ch; }
.justify{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.meta{ font-size:.72rem; text-transform:lowercase; letter-spacing:.24em; color:var(--muted); }

.shead{ margin-bottom:clamp(1.9rem,4.5vw,3.4rem); }
.shead--center{ text-align:center; }
.shead--center .lede{ margin-inline:auto; }
.shead__lede{ margin-top:1.3rem; }
.shead--split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,4rem); align-items:end; }
@media (max-width:900px){ .shead--split{ grid-template-columns:1fr; } }

/* ---------- 7b. SPLIT EDITORIAL HEAD ------------------------------------
   Heading left, running copy right, as the design comp sets the story block.
   Collapses to a single column below 900px.                                */
.story-split{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.8rem,5vw,5rem); align-items:start;
}
@media (max-width:900px){ .story-split{ grid-template-columns:1fr; gap:1.6rem; } }
.story-split__head .dhead{ margin-top:1.1rem; }
.story-split__body{ margin:0; }
.story-split__body p + p{ margin-top:1.1rem; }

/* label with the trailing gold rule the comp uses */
.label--rule{ display:flex; align-items:center; gap:.9rem; }
.label--rule::after{
  content:""; flex:0 0 auto; width:clamp(28px,4vw,54px);
  height:1px; background:var(--gold); opacity:.75;
}

/* ---------- 8. HOLLOW / OUTLINED TYPE ------------------------------------ */
.outline{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--fs-outline); line-height:.82; letter-spacing:-.012em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(255,255,255,.96);
  text-stroke:1.2px rgba(255,255,255,.96);
  paint-order:stroke fill;
  margin:0;
  /* A soft cast shadow does the heavy lifting on bright, busy photographs:
     it separates the hairline from whatever is behind it without tinting
     the picture the way a full overlay would. */
  /* Stacked drop-shadows compound, each filtering the previous result, so a
     tight dark halo builds up hugging the glyph edge. That is what makes a
     white hairline readable over a near-white photograph — the darkening is
     a few pixels around each letter, not a wash across the picture. */
  filter:drop-shadow(0 0 1px rgba(8,18,14,.92))
         drop-shadow(0 0 2px rgba(8,18,14,.85))
         drop-shadow(0 1px 4px rgba(8,18,14,.7))
         drop-shadow(0 4px 18px rgba(8,18,14,.42));
}
@media (min-width:900px){ .outline{ -webkit-text-stroke-width:1.8px; text-stroke-width:1.8px; } }
.outline em{ font-style:italic; }
.outline b{ font-weight:400; display:block; }
/* fallback for engines without text-stroke */
@supports not ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)){
  .outline{ color:rgba(255,255,255,.34); }
}

/* headline sitting over a photograph */
.overtitle{
  position:absolute; z-index:5; left:clamp(.9rem,4vw,3rem); right:clamp(.9rem,4vw,3rem);
  top:50%; transform:translateY(-50%); pointer-events:none;
  isolation:isolate;
}
/* A soft pool of shade sits under the word only — not across the photograph,
   so the image keeps its own light. Anchored to wherever the title sits. */
.overtitle::before{
  content:""; position:absolute; inset:-40% -12%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 62% at var(--sx,50%) var(--sy,50%),
             rgba(8,18,14,.46) 0%, rgba(8,18,14,.24) 48%, rgba(8,18,14,0) 80%);
}
.overtitle--tl{ --sx:24%; --sy:50%; }
.overtitle--tr{ --sx:76%; --sy:50%; }
.overtitle--bl{ --sx:24%; --sy:50%; }
.overtitle--br{ --sx:76%; --sy:50%; }
.overtitle--bleed{ --sx:30%; }
.overtitle--top{ top:clamp(1rem,4vw,3rem); transform:none; }
/* left-set and allowed to run past the frame edge; the frame clips it */
.overtitle--bleed{ left:-3%; right:-3%; text-align:left; }
/* hero setting: uppercase, tracked, filling the frame edge to edge */
.hero__center .outline{
  text-transform:uppercase; letter-spacing:.045em; line-height:.94;
  /* floats down into the frame once the hero image is up */
  opacity:0; transform:translateY(-120px);
  transition:opacity 1.25s var(--e-hero), transform 1.5s var(--e-hero);
  will-change:transform,opacity;
  font-size:clamp(2.4rem,min(14.4vw,19.5svh),14rem);
}
@media (max-width:600px){ .hero__center .outline{ font-size:clamp(2.2rem,min(13vw,19svh),4rem); letter-spacing:.03em; } }
.hero--page .hero__center .outline{ font-size:clamp(2rem,7.6vw,6.4rem); }
.overtitle--bleed .outline{ text-align:left; }
/* editorial placements — words sit differently image to image */
.overtitle--tl{ top:clamp(1rem,5%,3.5rem); bottom:auto; transform:none; text-align:left; left:-2%; }
.overtitle--br{ top:auto; bottom:clamp(.5rem,4%,2.5rem); transform:none; text-align:right; right:-2%; }
.overtitle--bl{ top:auto; bottom:clamp(.5rem,4%,2.5rem); transform:none; text-align:left; left:-2%; }
.overtitle--tr{ top:clamp(1rem,5%,3.5rem); bottom:auto; transform:none; text-align:right; right:-2%; }

/* ---------- 9. BUTTONS / LINKS ------------------------------------------ */
.btn{
  --fg:#fff; --bg:var(--green); --bd:var(--green);
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1rem 2.1rem; font-size:.74rem; font-weight:600;
  text-transform:lowercase; letter-spacing:.16em; white-space:nowrap;
  color:var(--fg); background:var(--bg); border:1px solid var(--bd);
  border-radius:999px; transition:background .4s var(--e-out), color .4s var(--e-out), border-color .4s var(--e-out);
}
.btn:hover,.btn:focus-visible{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--green); }
.btn--light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5); }
.btn--light:hover,.btn--light:focus-visible{ background:#fff; border-color:#fff; color:var(--green); }
.btn--gold{ --bg:var(--gold); --bd:var(--gold); }
.btn--gold:hover,.btn--gold:focus-visible{ background:var(--green); border-color:var(--green); }
.btn__arrow{ width:15px; height:9px; flex:0 0 auto; transition:transform .45s var(--e-out); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.btn-row--center{ justify-content:center; }

/* reference's arrow link: label + long arrow, hairline rules above and below */
.alink{
  display:inline-flex; align-items:center; gap:1.5rem;
  font-size:1rem; font-weight:400; color:inherit;
  padding:.65rem 0; position:relative;
}
.alink svg{ width:58px; height:11px; flex:0 0 auto; transition:transform .45s var(--e-out); }
.alink:hover svg{ transform:translateX(7px); }
.alink--ruled{ padding:.85rem 0; }
.alink--ruled::before,.alink--ruled::after{
  content:''; position:absolute; left:0; width:min(180px,60%); height:1px; background:currentColor; opacity:.5;
}
.alink--ruled::before{ top:0; } .alink--ruled::after{ bottom:0; }
.tlink{ display:inline-flex; align-items:center; gap:.7rem; font-size:.95rem; color:inherit; }
.tlink svg{ width:26px; height:10px; transition:transform .45s var(--e-out); }
.tlink:hover svg{ transform:translateX(6px); }
.tlink--light{ color:#fff; }

/* ---------- 10. HEADER --------------------------------------------------- */
/* Transparent over the hero, solid cream once scrolling starts; the wordmark
   crossfades from a knocked-out white version to the normal one. */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:600;
  background:transparent; color:#fff; border-bottom:1px solid transparent;
  transition:background .45s var(--e-out), color .45s var(--e-out),
             border-color .45s var(--e-out), box-shadow .45s var(--e-out);
}
.hdr.is-stuck{
  background:var(--cream); color:var(--ink);
  border-bottom-color:rgba(18,36,30,.10);
  box-shadow:0 2px 24px -14px rgba(18,36,30,.5);
}
.hdr__top{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:clamp(.85rem,2vw,1.35rem) clamp(.9rem,4vw,3rem);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.75rem;
}
.hdr__nav{
  display:none; justify-content:center; gap:clamp(.9rem,2.1vw,2.1rem);
  padding:0 clamp(.9rem,4vw,3rem) .95rem;
}
/* Burger-only navigation, as the design comp sets it: the overlay menu is
   the only nav. The rail markup stays in the DOM for a one-line revert. */
@media (min-width:1100px){ .hdr__nav{ display:none; } }
.hdr__nav a{
  position:relative; font-size:.68rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:currentColor; opacity:.86; padding-bottom:.35rem;
  transition:opacity .3s var(--e-out);
}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:center;
  transition:transform .4s var(--e-out);
}
.hdr__nav a:hover{ opacity:1; }
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{ transform:scaleX(1); }
.hdr__nav a[aria-current="page"]{ opacity:1; }

/* plain rules, no disc — as drawn in the comp */
.menu-btn{ justify-self:start; display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:50%; padding:0; color:currentColor;
  border:1px solid rgba(255,255,255,.34); background:rgba(18,36,30,.42);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background .35s var(--e-out), border-color .35s var(--e-out); }
.menu-btn:hover{ background:rgba(18,36,30,.62); border-color:rgba(255,255,255,.6); }
/* once the header goes solid the ring has to read against cream, not sky */
.hdr.is-stuck .menu-btn{ background:var(--green); border-color:transparent; color:#fff; }
.hdr.is-stuck .menu-btn:hover{ background:var(--green-3); }
.burger-i{ width:24px; height:14px; position:relative; }
.burger-i span{ position:absolute; left:0; height:1.5px; width:24px;
  background:currentColor; border-radius:2px; transition:width .35s var(--e-out); }
.burger-i span:nth-child(1){ top:0; }
.burger-i span:nth-child(2){ top:6px; width:18px; }
.burger-i span:nth-child(3){ top:12px; }
.menu-btn:hover .burger-i span{ width:24px; }
.menu-btn__label{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
@media (max-width:700px){ .menu-btn__label{ display:none; } }

.brand{ justify-self:center; display:block; line-height:0; position:relative; }
.brand img{ height:clamp(48px,13vw,70px); width:auto; display:block;
  transition:filter .45s var(--e-out); }
@media (min-width:1100px){ .brand img{ height:74px; } }
.hdr:not(.is-stuck) .brand img{ filter:brightness(0) invert(1); }

.hdr__right{ justify-self:end; display:flex; align-items:center; gap:.7rem; }
.btn--pill{
  border-radius:999px; padding:.82rem 1.6rem; font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  border:1px solid currentColor; background:transparent; color:currentColor;
  transition:background .35s var(--e-out), color .35s var(--e-out), border-color .35s;
}
/* Explicit pairs. `background:currentColor` used to resolve against the hover
   `color`, painting green text on a green fill — the button vanished. */
.hdr:not(.is-stuck) .btn--pill:hover{ background:#fff; border-color:#fff; color:var(--green); }
.hdr.is-stuck .btn--pill:hover{ background:var(--green); border-color:var(--green); color:var(--cream); }
@media (max-width:820px){ .hdr__right .btn--pill{ display:none; } }
.iconbtn{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; color:currentColor;
  border:1px solid currentColor; background:transparent;
  transition:background .35s var(--e-out), color .35s var(--e-out);
}
.iconbtn svg{ width:16px; height:16px; }
.hdr:not(.is-stuck) .iconbtn:hover{ background:#fff; border-color:#fff; color:var(--green); }
.hdr.is-stuck .iconbtn:hover{ background:var(--green); border-color:var(--green); color:var(--cream); }

/* ---------- 11. OVERLAY MENU — SPLIT SCREEN ------------------------------
   Left: deep-green navigation. Right: a stack of photographs, one per
   destination, crossfaded as the pointer moves down the list. Below 900px the
   image panel steps back and the navigation takes the full width.          */
.ovl{
  position:fixed; inset:0; z-index:700; background:var(--green); color:#fff;
  display:grid; grid-template-columns:1fr 1fr;
  clip-path:inset(0 0 100% 0); visibility:hidden; overflow:hidden;
  transition:clip-path .8s var(--e-cur), visibility .8s;
}
.ovl.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.ovl .wm{ opacity:.07; }

/* -- left: navigation ---------------------------------------------------- */
.ovl__left{
  position:relative; z-index:2; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding:calc(var(--hdr-h) + 1rem) clamp(1.4rem,5vw,5rem) 2rem;
  overflow-y:auto;
}
.ovl__mark{ margin:0 0 .4rem; }
.ovl__mark img{ height:56px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.ovl__tel{ font-size:.82rem; letter-spacing:.1em; color:var(--muted-d);
  margin-bottom:clamp(1.2rem,3.4vh,2.2rem); }
.ovl__tel:hover{ color:var(--gold-2); }

.ovl__nav{ display:flex; flex-direction:column; width:100%; }
.ovl__nav a{
  position:relative; display:flex; align-items:baseline; gap:clamp(.6rem,1.4vw,1.1rem);
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,3.1vw,2.7rem); line-height:1.32;
  color:rgba(255,255,255,.88); text-transform:capitalize; padding:.06em 0;
  opacity:0; transform:translateY(26px);
  transition:opacity .55s var(--e-out), transform .6s var(--e-out),
             color .32s var(--e-out);
}
/* staggered entrance, ordered by --i set on each link */
.ovl.is-open .ovl__nav a{
  opacity:1; transform:none;
  transition-delay:calc(.20s + var(--i) * .052s);
}
.ovl__num{ font-family:var(--f-body); font-size:.58rem; letter-spacing:.2em;
  color:var(--gold-2); opacity:.55; transition:opacity .32s, transform .38s var(--e-out); }
.ovl__word{ position:relative; transition:transform .42s var(--e-out); display:inline-block; }
/* the gold hairline grows from the left on hover */
.ovl__word::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:1px;
  background:var(--gold-2); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--e-out);
}
.ovl__arrow{ display:inline-block; width:26px; color:var(--gold-2);
  opacity:0; transform:translateX(-10px);
  transition:opacity .36s var(--e-out), transform .42s var(--e-out); }
.ovl__arrow svg{ width:26px; height:8px; display:block; }

.ovl__nav a:hover,.ovl__nav a:focus-visible,.ovl__nav a.is-hot{ color:#fff; }
.ovl__nav a:hover .ovl__word,
.ovl__nav a:focus-visible .ovl__word,
.ovl__nav a.is-hot .ovl__word{ transform:translateX(clamp(6px,1vw,14px)); }
.ovl__nav a:hover .ovl__word::after,
.ovl__nav a:focus-visible .ovl__word::after,
.ovl__nav a.is-hot .ovl__word::after{ transform:scaleX(1); }
.ovl__nav a:hover .ovl__arrow,
.ovl__nav a:focus-visible .ovl__arrow,
.ovl__nav a.is-hot .ovl__arrow{ opacity:1; transform:translateX(0); }
.ovl__nav a:hover .ovl__num,
.ovl__nav a.is-hot .ovl__num{ opacity:1; }
.ovl__nav a[aria-current="page"]{ color:#fff; }
.ovl__nav a[aria-current="page"] .ovl__num{ opacity:1; }

.ovl__foot{ margin-top:clamp(1.2rem,3.4vh,2.4rem);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s .62s var(--e-out), transform .6s .62s var(--e-out); }
.ovl.is-open .ovl__foot{ opacity:1; transform:none; }

/* -- right: image panel -------------------------------------------------- */
.ovl__right{ position:relative; overflow:hidden; background:var(--green-3); }
.ovl__shot{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity .9s var(--e-out), transform 1.6s var(--e-out);
}
.ovl__shot.is-active{ opacity:1; transform:scale(1); }
.ovl__shot-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(23,41,30,.55) 0%, rgba(23,41,30,.12) 42%, rgba(23,41,30,.22) 100%);
}
/* the panel itself eases in a beat after the green lands */
.ovl__right{ opacity:0; transition:opacity .7s .16s var(--e-out); }
.ovl.is-open .ovl__right{ opacity:1; }

.ovl__close{
  position:absolute; top:calc(var(--hdr-h)/2); right:clamp(.9rem,4vw,3rem);
  transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.42); background:rgba(18,36,30,.34);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; color:#fff;
  transition:background .32s, border-color .32s, color .32s, transform .32s; }
.ovl__close:hover{ border-color:var(--gold-2); color:var(--gold-2);
  background:rgba(18,36,30,.6); transform:translateY(-50%) rotate(90deg); }
.ovl__close svg{ width:13px; height:13px; }

@media (max-width:900px){
  .ovl{ grid-template-columns:1fr; }
  .ovl__left{ align-items:center; text-align:center; justify-content:center;
    padding-inline:clamp(1.1rem,6vw,3rem); }
  .ovl__nav a{ justify-content:center; font-size:clamp(1.5rem,7vw,2.3rem); }
  .ovl__arrow{ display:none; }
  /* image sits behind the navigation rather than beside it */
  .ovl__right{ position:absolute; inset:0; z-index:0; }
  .ovl__shot-scrim{ background:linear-gradient(180deg, rgba(23,41,30,.86), rgba(23,41,30,.92)); }
}
@media (prefers-reduced-motion:reduce){
  .ovl__nav a,.ovl__foot,.ovl__right{ transition:none; }
  .ovl__shot{ transition:opacity .01s; transform:none; }
}
body.is-locked{ overflow:hidden; }

/* ---------- 12. FLOATING BOOK BUTTON ------------------------------------ */
.fab{
  position:fixed; z-index:620;
  right:clamp(14px,5vw,32px); bottom:clamp(16px,5vw,36px);
  width:68px; height:68px; border-radius:50%;
  background:var(--green); color:#fff;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px -12px rgba(23,45,32,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:background .4s var(--e-out), transform .4s var(--e-out);
}
@media (min-width:900px){ .fab{ width:82px; height:82px; } }
.fab:hover{ background:var(--gold); transform:translateY(-3px); }
.fab svg{ width:23px; height:23px; }
.fab span{ font-size:.66rem; font-weight:500; letter-spacing:.03em; line-height:1; }


/* ---------- 13. HERO ----------------------------------------------------- */
.hero{ position:relative; overflow:hidden; background:var(--green); }
.hero__media{ position:relative; height:100svh; min-height:560px; }
.hero--page .hero__media{ height:clamp(420px,68svh,640px); }
.hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.07); transition:opacity 2s linear, transform 9s linear; }
.hero__slide.is-active{ opacity:1; transform:scale(1); }
.hero__scrim{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom,rgba(18,36,30,.42) 0%,rgba(18,36,30,.14) 38%,rgba(18,36,30,.55) 100%); }

/* headline block, optically centred allowing for the fixed header */
.hero__center{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  /* bottom padding clears the wave AND the absolutely-placed scroll cue,
     which is what the hero stack was colliding with on short windows */
  padding:calc(var(--hdr-h) + 1rem) clamp(.9rem,4vw,3rem)
          calc(var(--curve-h) + clamp(3.4rem,8vh,6.4rem));
  overflow:hidden;
}
.hero__orn{ display:block; width:26px; margin:clamp(.7rem,2.4vh,2rem) auto .8rem; color:rgba(255,255,255,.8); }
.hero__tag{
  font-size:clamp(.86rem,2.6vw,1.02rem); letter-spacing:.02em;
  color:rgba(255,255,255,.92); margin:0; max-width:46ch;
  opacity:0; transform:translateY(16px);
  transition:opacity .9s .55s var(--e-out), transform .9s .55s var(--e-out);
}
.is-loaded .hero__center .outline{ opacity:1; transform:none; }
.is-loaded .hero__tag{ opacity:1; transform:none; }
.hero__map{ display:inline-flex; align-items:center; gap:.5rem;
  /* fluid rather than a flat 1.2rem: on a short window the stack tightens
     itself instead of the link having to stand down entirely */
  margin-top:clamp(.65rem,2.2vh,1.2rem);
  font-size:.72rem; letter-spacing:.2em; text-transform:lowercase; color:#fff;
  padding-bottom:.3rem; border-bottom:1px solid rgba(255,255,255,.5); }
.hero__map:hover{ color:var(--sage); border-color:var(--sage); }
.hero__map svg{ width:11px; height:14px; }
/* The hero stack and the bottom-pinned scroll cue compete for the same band
   on short windows. This used to hide the link below 880px tall, which took
   it off every phone in portrait (a 390x844 handset is 844). The stack in
   fact clears the cue comfortably down to ~620px; only landscape phones and
   similarly letterboxed windows genuinely run out of room, so the cutoff now
   sits there. Delete this block to keep it at every height, or delete the
   .hero__map line in build.py to drop it everywhere.                        */
@media (max-height:620px){ .hero__map{ display:none; } }

/* scroll cue */
.hero__scroll{
  position:absolute; z-index:4; left:50%; bottom:calc(var(--curve-h) + clamp(1rem,3vh,2.2rem));
  transform:translateX(-50%);
  width:24px; height:38px; border:1px solid rgba(255,255,255,.65); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px;
  opacity:0; transition:opacity .9s 1s var(--e-out);
}
.is-loaded .hero__scroll{ opacity:1; }
.hero__wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:5; line-height:0; pointer-events:none; }
.hero__wave svg{ display:block; width:100%; height:var(--curve-h); fill:var(--cream); }
.hero__scroll i{ width:3px; height:6px; border-radius:2px; background:#fff;
  animation:cue 2.1s var(--e-out) infinite; }
@keyframes cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(13px);opacity:0} 100%{opacity:0} }

.crumbs{ display:flex; gap:.6rem; justify-content:center; align-items:center;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.75); margin-bottom:1rem; }
.crumbs span{ color:var(--gold-2); }

/* ---------- 14. FRAMES / IMAGERY ---------------------------------------- */
.frame{ position:relative; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(140deg,var(--green-3),var(--green)); }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame--tall{ aspect-ratio:3/4; } .frame--portrait{ aspect-ratio:4/5; }
.frame--square{ aspect-ratio:1/1; } .frame--wide{ aspect-ratio:16/10; }
.frame--pano{ aspect-ratio:16/9; }
@media (max-width:640px){ .frame--pano{ aspect-ratio:4/3; } .frame--tall{ aspect-ratio:4/5; } }
.frame--plx img{ height:118%; position:absolute; top:-9%; left:0; }
/* the reference clips some photographs with an organic edge, not just the
   section bands — clipPathUnits are objectBoundingBox so this stays fluid */
.frame--wave    { clip-path:url(#clipWaveBottom); }
.frame--wave-top{ clip-path:url(#clipWaveTop); }
.frame__caption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem clamp(1rem,2vw,1.8rem);
  background:linear-gradient(to top,rgba(23,45,32,.8),transparent);
  color:#fff; font-size:.66rem; letter-spacing:.22em; text-transform:lowercase; }

.img-missing{
  position:relative; display:grid !important; place-items:center; min-height:170px;
  background:repeating-linear-gradient(135deg,rgba(192,207,166,.07) 0 12px,transparent 12px 24px),
             linear-gradient(140deg,var(--green-3),var(--green));
}
.img-missing > img{ display:none !important; }
.img-missing::after{ content:attr(data-label); font-family:var(--f-sans); font-size:.6rem;
  letter-spacing:.22em; text-transform:lowercase; color:rgba(192,207,166,.6);
  text-align:center; padding:1.2rem; max-width:26ch; line-height:1.9; }
.masonry .img-missing{ aspect-ratio:4/3; }

/* ---------- 15. REVEALS -------------------------------------------------- */
html.js [data-reveal]{
  transition:opacity .95s var(--e-out), transform 1.1s var(--e-out), clip-path 1.2s var(--e-cur);
  transition-delay:var(--d,0s);
}
html.js [data-reveal="left"]  { opacity:0; transform:translate3d(-5vw,0,0); }
html.js [data-reveal="right"] { opacity:0; transform:translate3d(5vw,0,0); }
html.js [data-reveal="up"]    { opacity:0; transform:translate3d(0,46px,0); }
html.js [data-reveal="down"]  { opacity:0; transform:translate3d(0,-34px,0); }
html.js [data-reveal="scale"] { opacity:0; transform:scale(.88); }
html.js [data-reveal="zoom"]  { opacity:0; transform:scale(1.07); }
html.js [data-reveal="fade"]  { opacity:0; }
html.js [data-reveal="clip-l"]{ clip-path:inset(0 100% 0 0); }
html.js [data-reveal="clip-r"]{ clip-path:inset(0 0 0 100%); }
html.js [data-reveal="clip-u"]{ clip-path:inset(100% 0 0 0); }
html.js [data-reveal="clip-d"]{ clip-path:inset(0 0 100% 0); }
/* Wedding Experience entrances. Same observer, same settle rule; only the
   starting pose differs — a longer horizontal push plus a slight scale, at
   the 820/950ms the brief asks for rather than the site default. */
html.js [data-reveal="wed-l"], html.js [data-reveal="wed-r"]{
  transition:opacity .82s var(--e-out), transform .95s var(--e-out);
  transition-delay:var(--d,0s);
}
/* Photo gallery tiles. Direction alternates strictly left/right down the
   source order; the shared observer fires each tile once and unobserves. */
html.js [data-reveal="gal-l"], html.js [data-reveal="gal-r"]{
  transition:opacity .78s var(--e-out), transform .9s var(--e-out);
  transition-delay:var(--d,0s);
}
html.js [data-reveal="gal-l"]{ opacity:0; transform:translate3d(-46px,0,0) scale(.955); }
html.js [data-reveal="gal-r"]{ opacity:0; transform:translate3d(46px,0,0)  scale(.955); }

html.js [data-reveal="wed-l"]{ opacity:0; transform:translate3d(-7vw,0,0) scale(.966); }
html.js [data-reveal="wed-r"]{ opacity:0; transform:translate3d(7vw,0,0)  scale(.966); }

/* Only the curtain reveals may touch clip-path on settle — resetting it for
   every reveal type would silently erase the organic wave masks on photos. */
html.js [data-reveal].is-in{ opacity:1; transform:none; }
html.js [data-reveal^="clip-"].is-in{ clip-path:inset(0 0 0 0); }

/* ---------- 16. AMENITY ICON GRID --------------------------------------- */
/* Comp treatment: a bare gold line-icon, serif title, two lines of copy. */
.amen{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1.2rem,2.6vw,2.4rem); }
@media (max-width:900px){ .amen{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .amen{ grid-template-columns:repeat(2,1fr); } }
.amen__item{ text-align:center; }
.amen__ring{ display:block; width:clamp(44px,6vw,58px); margin:0 auto 1rem; color:var(--gold); }
.on-green .amen__ring{ color:var(--gold-2); }
.amen__ring svg{ width:100%; height:auto; }
.amen__item h3{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(1rem,3.2vw,1.2rem); line-height:1.25; margin:0 0 .55rem; color:var(--ink); }
.on-green .amen__item h3{ color:var(--sage); }
.amen__item p{ font-size:.8rem; line-height:1.65; color:var(--muted); margin:0; max-width:22ch; margin-inline:auto; }
.on-green .amen__item p{ color:var(--muted-d); }

/* ---------- 18. ACCOMMODATION CAROUSEL ---------------------------------- */
/* Desktop reference: a rail of thin-line icon + uppercase label tabs above a
   hairline rule, the active one marked; slide image left, copy right, circular
   arrows straddling the image edge, and the next slide peeking in. */
.carousel{ position:relative; --slide-w:100%; }
@media (min-width:900px){ .carousel{ --slide-w:88%; } }

.carousel__rail{
  display:flex; gap:clamp(1rem,3vw,3.2rem); overflow-x:auto; scrollbar-width:none;
  -ms-overflow-style:none; padding-bottom:1rem; margin-bottom:clamp(1.6rem,3.4vw,2.8rem);
  border-bottom:1px solid var(--line-d);
}
.carousel__rail::-webkit-scrollbar{ display:none; }
.on-white .carousel__rail,.on-sage .carousel__rail{ border-bottom-color:var(--line); }
.carousel__tab{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:.3rem .2rem .55rem; position:relative; color:rgba(255,255,255,.55);
  transition:color .35s var(--e-out);
}
.on-white .carousel__tab,.on-sage .carousel__tab{ color:var(--muted); }
.carousel__tab svg{ width:clamp(26px,4.4vw,34px); height:clamp(26px,4.4vw,34px); }
.carousel__tab b{
  font-family:var(--f-sans); font-weight:500; font-size:.6rem;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
}
.carousel__tab::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--sage); transform:scaleX(0); transition:transform .4s var(--e-out);
}
.on-white .carousel__tab::after,.on-sage .carousel__tab::after{ background:var(--gold); }
.carousel__tab:hover{ color:rgba(255,255,255,.85); }
.on-white .carousel__tab:hover,.on-sage .carousel__tab:hover{ color:var(--green); }
.carousel__tab[aria-selected="true"]{ color:var(--sage); }
.on-white .carousel__tab[aria-selected="true"],
.on-sage  .carousel__tab[aria-selected="true"]{ color:var(--gold); }
.carousel__tab[aria-selected="true"]::after{ transform:scaleX(1); }

.carousel__viewport{ overflow:hidden; }
.carousel__track{
  display:flex;
  transform:translate3d(calc(var(--i,0) * var(--slide-w) * -1),0,0);
  transition:transform .85s var(--e-cur);
}
.slide{ flex:0 0 var(--slide-w); padding-right:clamp(0px,2vw,28px); }
.slide__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.4rem,3.4vw,3.4rem); align-items:center; }
/* the arrow pair lives in this gutter, so it has to be wider than the pair */
@media (min-width:900px){ .slide__grid{ column-gap:clamp(4.75rem,7vw,7.5rem); } }
@media (max-width:900px){ .slide__grid{ grid-template-columns:1fr; } }
.slide__media{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3;
  background:linear-gradient(140deg,var(--green-3),var(--green)); }
.slide__media img{ width:100%; height:100%; object-fit:cover; }
.slide__sub{ font-size:.66rem; text-transform:lowercase; letter-spacing:.26em; color:var(--gold-2); margin-bottom:.8rem; }
.on-white .slide__sub,.on-sage .slide__sub{ color:var(--gold); }
.slide__name{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.8rem,6.4vw,2.7rem); line-height:1.1; margin:0 0 1rem; }
.on-green .slide__name{ color:var(--sage); }
.slide__text{ margin-bottom:1.4rem; }
.slide__specs{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-bottom:1.5rem;
  font-size:.72rem; text-transform:lowercase; letter-spacing:.1em; color:var(--muted); }
.on-green .slide__specs{ color:rgba(255,255,255,.66); }
.slide__specs b{ font-family:var(--f-display); font-weight:400; font-size:1.15rem;
  letter-spacing:0; text-transform:none; color:var(--gold-2); }
.on-white .slide__specs b,.on-sage .slide__specs b{ color:var(--gold); }
.slide__links{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; }

/* arrows straddle the right edge of the slide image */
/* the pair straddles the bottom-right corner of the slide image; the image
   column is the grid's 1.05fr of (1.05fr + 1fr + gap), so ~51% less the gap */
.carousel__arrows{
  position:absolute; z-index:4; display:flex; gap:.5rem;
  left:calc(43% - 62px); top:0; transform:translateY(-100%);
  margin-top:calc(-1 * clamp(1.5rem,3vw,2.4rem));
}
@media (min-width:900px){
  /* centred on the image's bottom edge, which is the lowest point in the slide,
     so the pair never lands on the copy column's links */
  .carousel__arrows{ top:auto; bottom:0; transform:none;
    margin-bottom:calc(clamp(1.5rem,3vw,2.4rem) + 8px - 23px); }
}
@media (max-width:900px){ .carousel__arrows{ position:static; margin-top:1.1rem; justify-content:flex-start; } }
.carousel__nav{ width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--green); display:grid; place-items:center;
  box-shadow:0 6px 18px -8px rgba(23,45,32,.5);
  transition:background .35s var(--e-out), color .35s var(--e-out); }
.carousel__nav:hover{ background:var(--gold); color:#fff; }
.carousel__dots{ display:flex; gap:.5rem; justify-content:center; margin-top:clamp(1.5rem,3vw,2.4rem); }
.carousel__dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); transition:background .35s; }
.on-white .carousel__dots button,.on-sage .carousel__dots button{ background:rgba(23,45,32,.2); }
.carousel__dots button[aria-current="true"]{ background:var(--sage); }
.on-white .carousel__dots button[aria-current="true"],
.on-sage  .carousel__dots button[aria-current="true"]{ background:var(--gold); }

/* ---------- 19. THREE-UP TEXT BLOCKS ------------------------------------ */
.threeup{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.8rem); }
@media (max-width:900px){ .threeup{ grid-template-columns:1fr; } }
.tblock__media{ overflow:hidden; border-radius:var(--radius); aspect-ratio:16/11; margin-bottom:1.4rem;
  background:linear-gradient(140deg,var(--green-3),var(--green)); }
.tblock__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--e-out); }
.tblock:hover .tblock__media img{ transform:scale(1.07); }
.tblock__title{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.45rem,5vw,1.9rem); line-height:1.15; margin:0 0 .9rem; }
.on-green .tblock__title{ color:var(--sage); }
.tblock__text{ margin-bottom:1.2rem; }


/* ---------- 20. LISTS / FACTS ------------------------------------------- */
.routes li{ padding:1.15rem 0; border-bottom:1px solid var(--line-d);
  display:flex; align-items:center; gap:1.1rem; font-size:.98rem; color:var(--muted-d); font-style:italic; }
.routes li svg{ width:30px; height:18px; flex:0 0 auto; color:var(--sage); }
.on-white .routes li,.on-sage .routes li{ color:var(--muted); border-color:var(--line); }
.on-white .routes li svg,.on-sage .routes li svg{ color:var(--gold); }

.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem 2.4rem; }
@media (max-width:560px){ .facts{ grid-template-columns:1fr; } }
.facts li{ padding:.8rem 0; border-bottom:1px solid var(--line);
  display:flex; gap:.9rem; align-items:baseline; font-size:.92rem; color:var(--muted); }
.facts li::before{ content:''; flex:0 0 auto; width:5px; height:5px;
  border:1px solid var(--gold); transform:rotate(45deg); translate:0 -2px; }
.on-green .facts li{ border-color:var(--line-d); color:var(--muted-d); }
.on-green .facts li::before{ border-color:var(--sage); }

.specsheet{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); }
.specsheet div{ background:var(--white); padding:1.5rem 1.4rem; }
.on-sage .specsheet div{ background:var(--sage-2); }
.specsheet dt{ font-size:.58rem; text-transform:lowercase; letter-spacing:.26em; color:var(--gold); margin-bottom:.55rem; }
.specsheet dd{ margin:0; font-family:var(--f-display); font-size:1.5rem; line-height:1.22; color:var(--green); }

.infolist li{ padding:1.35rem 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:120px 1fr; gap:1.1rem; align-items:baseline; }
@media (max-width:480px){ .infolist li{ grid-template-columns:1fr; gap:.35rem; } }
.infolist .k{ font-size:.58rem; text-transform:lowercase; letter-spacing:.26em; color:var(--gold); }
.infolist .v{ font-size:1rem; line-height:1.72; }
.infolist .v a:hover{ color:var(--gold); }
.on-green .infolist li{ border-color:var(--line-d); }
.on-green .infolist .k{ color:var(--gold-2); }

.notice{ border:1px solid var(--line); border-left:2px solid var(--gold);
  padding:1.3rem 1.5rem; font-size:.9rem; color:var(--muted); background:rgba(23,45,32,.03); }
.on-green .notice{ background:rgba(255,255,255,.04); border-color:var(--line-d);
  border-left-color:var(--sage); color:var(--muted-d); }
.rule{ height:1px; width:100%; background:var(--line); border:0; margin:0; }
.on-green .rule{ background:var(--line-d); }

/* ---------- 21. ROOM CARDS / FILTERS ------------------------------------ */
.rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.7rem); }
@media (max-width:1100px){ .rooms{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .rooms{ grid-template-columns:1fr; } }
.rcard{ position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:box-shadow .6s var(--e-out); }
.on-sage .rcard{ background:var(--sage-2); border-color:rgba(23,45,32,.12); }
.rcard:hover{ box-shadow:0 24px 56px -32px rgba(23,45,32,.45); }
.rcard__media{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/5;
  background:linear-gradient(140deg,var(--green-3),var(--green)); }
.rcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--e-out); }
.rcard:hover .rcard__media img{ transform:scale(1.07); }
.rcard__veil{ position:absolute; inset:0;
  background:linear-gradient(to top,rgba(23,45,32,.82) 0%,rgba(23,45,32,.14) 48%,transparent 100%); }
.rcard__over{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem clamp(1.1rem,1.8vw,1.5rem);
  color:#fff; transition:transform .6s var(--e-out); }
.rcard:hover .rcard__over{ transform:translateY(-6px); }
.rcard__name{ font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.4rem,4.6vw,1.8rem); line-height:1.1; margin:0 0 .5rem; }
.rcard__specs{ display:flex; flex-wrap:wrap; gap:.35rem 1rem;
  font-size:.66rem; text-transform:lowercase; letter-spacing:.12em; color:rgba(255,255,255,.8); }
.rcard__specs li{ display:flex; align-items:center; gap:.5rem; }
.rcard__specs li + li::before{ content:''; width:3px; height:3px; border-radius:50%;
  background:var(--sage); margin-right:.55rem; }
.rcard__body{ padding:1.5rem clamp(1.1rem,1.8vw,1.5rem) 1.7rem; display:flex; flex-direction:column; gap:1rem; flex:1; }
.rcard__desc{ color:var(--muted); font-size:.9rem; line-height:1.72; margin:0; }
.rcard__foot{ margin-top:auto; padding-top:1.15rem; border-top:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.rcard__price{ display:flex; flex-direction:column; gap:.1rem; }
.rcard__price b{ font-family:var(--f-display); font-weight:400; font-size:1.5rem; color:var(--green); }
.rcard__price span{ font-size:.58rem; text-transform:lowercase; letter-spacing:.2em; color:var(--muted); }
.rcard__links{ display:flex; gap:1rem; align-items:center; }
.rcard__links a{ font-size:.68rem; text-transform:lowercase; letter-spacing:.12em;
  padding-bottom:.25rem; border-bottom:1px solid var(--line); transition:border-color .35s, color .35s; }
.rcard__links a:hover{ border-color:var(--gold); color:var(--gold); }
.rcard.is-hidden{ display:none; }

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.7rem,3.5vw,2.6rem); }
.filters button{ padding:.6rem 1.4rem; border-radius:999px; font-size:.7rem;
  text-transform:lowercase; letter-spacing:.12em; border:1px solid var(--line); color:var(--muted);
  transition:all .4s var(--e-out); }
.filters button:hover{ border-color:var(--green); color:var(--green); }
.filters button[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#fff; }

/* ---------- 22. GALLERY / LIGHTBOX -------------------------------------- */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(84px,11vw,146px); gap:clamp(.45rem,1vw,.85rem); }
@media (max-width:900px){ .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:33vw; } }
.tile{ position:relative; overflow:hidden; border-radius:var(--radius); grid-column:span 1; grid-row:span 2;
  background:linear-gradient(140deg,var(--green-3),var(--green)); }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--e-out); }
.tile:hover img{ transform:scale(1.08); }
.tile--w2{ grid-column:span 2; } .tile--h3{ grid-row:span 3; } .tile--h2{ grid-row:span 2; }
@media (max-width:900px){ .tile--w2{ grid-column:span 2; } .tile--h3,.tile--h2{ grid-row:span 2; } }
.masonry{ columns:4 250px; column-gap:clamp(.45rem,1vw,.85rem); }
@media (max-width:900px){ .masonry{ columns:2 140px; } }
.masonry .tile{ break-inside:avoid; margin-bottom:clamp(.45rem,1vw,.85rem);
  display:block; grid-column:auto; grid-row:auto; }
.masonry .tile img{ height:auto; }

.lb{ position:fixed; inset:0; z-index:900; background:rgba(23,45,32,.97);
  display:flex; align-items:center; justify-content:center; padding:clamp(2.5rem,6vw,4rem);
  opacity:0; visibility:hidden; transition:opacity .45s var(--e-out), visibility .45s; }
.lb.is-open{ opacity:1; visibility:visible; }
.lb__img{ max-width:100%; max-height:82vh; object-fit:contain; opacity:0; transform:scale(.97);
  transition:opacity .5s var(--e-out), transform .6s var(--e-out); }
.lb.is-open .lb__img{ opacity:1; transform:none; }
.lb__count{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.65); font-size:.68rem; letter-spacing:.22em; }
.lb__btn{ position:absolute; width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  color:#fff; border:1px solid rgba(255,255,255,.28); transition:border-color .35s, color .35s; }
.lb__btn:hover{ border-color:var(--sage); color:var(--sage); }
.lb__close{ top:1.2rem; right:1.2rem; }
.lb__prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lb__next{ right:1.2rem; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lb__prev{ left:.5rem; } .lb__next{ right:.5rem; } .lb__btn{ width:42px; height:42px; } }

/* ---------- 23. JOURNAL / FORMS ----------------------------------------- */
.jfeature{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.6rem,3.5vw,3.4rem); align-items:center; }
@media (max-width:900px){ .jfeature{ grid-template-columns:1fr; } }
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.8vw,2.4rem); }
@media (max-width:1000px){ .jgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .jgrid{ grid-template-columns:1fr; } }
.jcard{ display:flex; flex-direction:column; gap:1rem; }
.jcard__media{ overflow:hidden; border-radius:var(--radius); aspect-ratio:16/11; background:linear-gradient(140deg,var(--green-3),var(--green)); }
.jcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.5s var(--e-out); }
.jcard:hover .jcard__media img{ transform:scale(1.07); }
.jcard__title{ font-family:var(--f-display); font-weight:400; font-size:1.3rem; line-height:1.24; margin:0;
  transition:color .35s var(--e-out); }
.jcard:hover .jcard__title{ color:var(--gold); }
.jcard__excerpt{ font-size:.88rem; line-height:1.7; color:var(--muted); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.contact-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; }
.field label{ font-size:.6rem; text-transform:lowercase; letter-spacing:.24em; color:var(--muted); }
.field input,.field textarea{ font-family:var(--f-sans); font-size:.95rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line); padding:.7rem 0;
  transition:border-color .4s var(--e-out); width:100%; border-radius:0; }
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--gold); }
.field textarea{ resize:vertical; min-height:118px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.76rem; color:var(--muted); margin-top:1rem; }
.mapframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius);
  filter:grayscale(1) contrast(1.04) brightness(.97); transition:filter .8s var(--e-out); }
.mapframe:hover{ filter:grayscale(0); }
@media (max-width:640px){ .mapframe{ aspect-ratio:4/3; } }

/* ---------- 24. CTA BAND ------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; background:var(--green); color:#fff;
  min-height:clamp(420px,68svh,620px); display:grid; place-items:center; text-align:center; }
.cta-band__bg{ position:absolute; inset:0; z-index:0; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band__bg::after{ content:''; position:absolute; inset:0; background:rgba(23,45,32,.5); }
.cta-band__in{ position:relative; z-index:3; padding:clamp(3rem,9vw,6rem) var(--gut); max-width:820px; }

/* ---------- 25. LOCALE / FOOTER ----------------------------------------- */
.locale{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.6rem,3vw,3rem); }
@media (max-width:900px){ .locale{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .locale{ grid-template-columns:1fr; } }
.locale h4{ font-family:var(--f-sans); font-size:.62rem; font-weight:600; text-transform:lowercase;
  letter-spacing:.28em; color:var(--gold-2); margin:0 0 1.1rem; }
.locale__place{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,5vw,2rem);
  line-height:1.32; color:var(--sage); text-transform:lowercase; }
.locale p,.locale li{ font-size:.9rem; color:var(--muted-d); margin-bottom:.45rem; }
.locale a:hover{ color:var(--sage); }

.ftr{ position:relative; overflow:hidden; background:var(--green); color:var(--muted-d);
  padding-block:clamp(3rem,7vw,5.5rem) 1.6rem; }
/* one-class switch to the reference's light footer — see README */
.ftr--light{ background:var(--white); color:var(--muted); }
.ftr__grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(1.8rem,4vw,4rem); align-items:start; }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr; } .ftr__brandcol{ grid-column:1/-1; } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr__mark{ margin:0 0 1.4rem; }
.ftr__mark img{ height:clamp(60px,15vw,92px); width:auto; filter:brightness(0) invert(1); opacity:.95; }
.ftr--light .ftr__mark img{ filter:none; opacity:1; }
.ftr__col a,.ftr__col li{ display:block; font-family:var(--f-display); font-size:clamp(1rem,3.4vw,1.22rem);
  line-height:1.9; color:inherit; transition:color .3s; }
.ftr__col a:hover{ color:var(--sage); }
.ftr--light .ftr__col a:hover{ color:var(--gold); }
.news{ margin-top:1.6rem; max-width:420px; }
.news h4{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.15rem,4vw,1.45rem);
  color:var(--sage); margin:0 0 .3rem; }
.ftr--light .news h4{ color:var(--green); }
.news p{ font-size:.74rem; color:rgba(255,255,255,.5); margin-bottom:1rem; }
.ftr--light .news p{ color:var(--muted); }
.news__row{ display:flex; gap:.8rem; align-items:flex-end; }
.news__row input{ flex:1; background:transparent; border:0; border-bottom:1px solid var(--line-d);
  color:inherit; font-family:var(--f-sans); font-size:.92rem; padding:.6rem 0; border-radius:0; }
.ftr--light .news__row input{ border-bottom-color:var(--line); }
.news__row input:focus{ outline:none; border-bottom-color:var(--sage); }
.news__row button{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--sage); padding:.6rem 0; }
.ftr--light .news__row button{ color:var(--green); }
.news__consent{ display:flex; gap:.55rem; align-items:flex-start; margin-top:.9rem;
  font-size:.68rem; color:rgba(255,255,255,.5); }
.ftr--light .news__consent{ color:var(--muted); }
.news__consent input{ margin-top:.3rem; accent-color:var(--sage); }
.ftr__social{ display:flex; gap:.55rem; margin-top:clamp(1.8rem,4vw,2.8rem); }
.ftr__social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-3); color:#fff; transition:background .35s, transform .35s; }
.ftr--light .ftr__social a{ background:var(--green); }
.ftr__social a:hover{ background:var(--gold); transform:translateY(-2px); }
.ftr__social svg{ width:15px; height:15px; }
.ftr__bottom{ margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:1.4rem;
  border-top:1px solid var(--line-d); font-size:.74rem; color:rgba(255,255,255,.45); }
.ftr--light .ftr__bottom{ border-top-color:var(--line); color:var(--muted); }
.ftr > .wrap{ position:relative; z-index:2; }

/* ---------- 25b. CURSOR RING -------------------------------------------- */
/* A follower ring only — the native cursor stays visible, so pointing and
   clicking behave exactly as the user expects. Desktop, fine pointers only. */
.cursor-ring{
  position:fixed; top:0; left:0; z-index:999999; pointer-events:none;
  width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%;
  /* a single mid-gold hairline washed out over both the dark header buttons
     and bright photography; the paired shadows give it an edge on either. */
  border:1.5px solid rgba(212,178,98,.9); opacity:0;
  box-shadow:0 0 0 1px rgba(18,36,30,.28), inset 0 0 0 1px rgba(255,255,255,.28),
             0 2px 10px rgba(0,0,0,.18);
  transition:opacity .35s linear, width .35s var(--e-out), height .35s var(--e-out),
             margin .35s var(--e-out), border-color .35s var(--e-out), background .35s var(--e-out);
  will-change:transform;
}
html.has-ring .cursor-ring{ opacity:1; }
.cursor-ring.is-hot{ width:54px; height:54px; margin:-27px 0 0 -27px;
  border-color:rgba(226,196,124,.95); background:rgba(226,196,124,.10);
  box-shadow:0 0 0 1px rgba(18,36,30,.34), inset 0 0 0 1px rgba(255,255,255,.34),
             0 3px 14px rgba(0,0,0,.24); }
.cursor-ring.is-media{ width:74px; height:74px; margin:-37px 0 0 -37px;
  border-color:rgba(169,138,74,.35); background:rgba(169,138,74,.12); }
.cursor-ring__label{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); opacity:0; transition:opacity .3s; }
.cursor-ring.is-media .cursor-ring__label{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .cursor-ring{ display:none !important; } }
@media (prefers-reduced-motion:reduce){
  .hero__center .outline{ opacity:1; transform:none; transition:none; }
}

/* ---------- 26. PAGE CURTAIN -------------------------------------------- */
.page-fade{ position:fixed; inset:0; z-index:950; background:var(--green); pointer-events:none;
  clip-path:inset(0 0 0 0); transition:clip-path .8s var(--e-cur); display:grid; place-items:center; }
.page-fade.is-out{ clip-path:inset(0 0 100% 0); }
.page-fade.is-in{ clip-path:inset(0 0 0 0); pointer-events:all; }
.page-fade img{ height:70px; width:auto; filter:brightness(0) invert(1); opacity:.9; }

/* ---------- 27. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero__slide{ transform:none !important; }
  .page-fade{ display:none !important; }
  .frame--plx img{ position:static; height:100%; top:auto; }
}

/* ---------- 28. HERO — CINEMATIC REVEAL (home only) ---------------------- */
/* The first screen is photograph and nothing else. The picture is cut a little
   taller than the window, so its lower band is parked below the fold and the
   curve and the next section wait out of sight behind it.

   Scrolling lifts the picture inside a pinned window: the frame stays exactly
   one screen tall the whole way, the image slides up inside it to show the
   band that was hidden, the wave rises into the bottom edge, and only then
   does the page hand over to the story section.

   --hero-p runs 0 -> 1 and is written by site.js on each frame of scroll.
   Everything that moves here reads from that one number, so the picture, the
   wordmark and the scroll cue can never drift out of step with each other.
   Scoped to .hero--reveal so the inner-page banners keep their old behaviour. */

.hero--reveal{
  /* How much picture is parked below the fold. Deliberately short — a single
     flick of the wheel should clear the whole hero. The max() floor keeps the
     wave far enough down that no cream is visible on the first paint. */
  --hero-reveal: max(clamp(150px, 26svh, 300px), calc(var(--curve-h) + 90px));
  --hero-p: 0;
  height: calc(100svh + var(--hero-reveal));
  min-height: calc(560px + var(--hero-reveal));
  overflow: visible;          /* a clipping ancestor would kill the pin */
  background: var(--green);
}

/* The pinned window — exactly one screen, never taller. */
.hero--reveal .hero__media{
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden;
}

/* The picture: one screen plus the reveal, lifted by the scroll. */
.hero--reveal .hero__frame{
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100svh + var(--hero-reveal));
  min-height: calc(560px + var(--hero-reveal));
  transform: translate3d(0, calc(var(--hero-p) * var(--hero-reveal) * -1), 0);
  will-change: transform;
  z-index: 1;
}
.hero--reveal .hero__slide{ position: absolute; inset: 0; }

/* Shade only where the words need it: a soft pool under the wordmark and a
   light wash at the very top for the header, not a blanket over the photo. */
.hero--reveal .hero__scrim{
  background:
    radial-gradient(94% 58% at 50% 46%,
      rgba(8,20,15,.46) 0%, rgba(8,20,15,.22) 54%, rgba(8,20,15,0) 86%),
    linear-gradient(to bottom,
      rgba(18,36,30,.46) 0%, rgba(18,36,30,.10) 32%,
      rgba(18,36,30,.10) 64%, rgba(18,36,30,.42) 100%);
}

/* The wordmark holds the centre of the pinned window, then lifts and dissolves
   a beat ahead of the picture so the two layers separate as the hero closes.
   No wave sits inside this window any more, so the block centres honestly. */
.hero--reveal .hero__center{
  z-index: 3;
  padding: calc(var(--hdr-h) + 1rem) clamp(.9rem,4vw,3rem) clamp(3.4rem,8.5vh,5.6rem);
  transform: translate3d(0, calc(var(--hero-p) * -7svh), 0);
  opacity: clamp(0, calc((1 - var(--hero-p)) / .38), 1);
  will-change: transform, opacity;
}

/* Scroll cue: retires as soon as the invitation has been taken up. */
.hero--reveal .hero__scroll{
  bottom: clamp(1.5rem, 4.5vh, 3.2rem);
  transition: opacity .28s var(--e-out);
}
.is-loaded .hero--reveal .hero__scroll{
  opacity: clamp(0, calc(1 - var(--hero-p) * 3), 1);
}

/* The curve now belongs to the section, not the window, so it climbs into
   view on its own as the hero runs out — no JS, and it can never fall out of
   sync with the scroll. No shadow on it: a drop-shadow here spills a grey band
   onto the cream section underneath, which is exactly the seam this whole
   transition is meant to remove. The cream-against-photograph edge is contrast
   enough. */
.hero--reveal > .hero__wave{ z-index: 6; }

/* ---- fallbacks: no JS, or motion turned down ---------------------------- */
/* Without --hero-p being written there is nothing to lift, so the hero simply
   returns to a single honest screen with the curve at its foot. */
html:not(.js) .hero--reveal,
.hero--reveal.is-static{
  --hero-reveal: 0px;
  height: 100svh; min-height: 560px;
}
html:not(.js) .hero--reveal .hero__media,
.hero--reveal.is-static .hero__media{ position: relative; }
html:not(.js) .hero--reveal .hero__frame,
.hero--reveal.is-static .hero__frame{ transform: none; }
html:not(.js) .hero--reveal .hero__center,
.hero--reveal.is-static .hero__center{ transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .hero--reveal{
    --hero-reveal: 0px;
    height: 100svh; min-height: 560px;
  }
  .hero--reveal .hero__media{ position: relative; }
  .hero--reveal .hero__frame{ transform: none !important; }
  .hero--reveal .hero__center{ transform: none !important; opacity: 1 !important; }
  .is-loaded .hero--reveal .hero__scroll{ opacity: 1; }
}

/* Engines without overflow:clip keep html/body as scroll containers, so the
   pin cannot work there — those fall back to one honest screen. */
@supports not (overflow: clip){
  .hero--reveal{ --hero-reveal: 0px; height: 100svh; min-height: 560px; }
  .hero--reveal .hero__media{ position: relative; }
  .hero--reveal .hero__frame{ transform: none; }
  .hero--reveal .hero__center{ transform: none; opacity: 1; }
}

/* ---------- 29. EDITORIAL STORY ROWS ------------------------------------ */
/* Two alternating compositions: copy one side, a tall photograph the other,
   and an oversized outlined word straddling the top edge of the picture.

   The word is a decoration, not a heading — but it sits on its own layer
   ABOVE the photograph, so the letters run across the top of the picture
   instead of being cropped by it. The row still reserves a full word-height
   of padding at the top, so the word never lands on the copy. */

.estory{
  --eword-fs: clamp(2.9rem, 12.4vw, 11rem);
  /* AWAKEN is two letters shorter than SAMBODHI, so on the mirrored row it
     would only just graze the picture. This nudges it toward the photograph
     so both rows take a comparable bite. */
  --eword-tuck: clamp(0px, 7vw, 112px);
}
/* The eyebrow needs its own air — the word's cap-height starts at the top of
   the row below it and the two were all but touching. */
.estory__lead{ margin-bottom: clamp(1.4rem, 3.4vw, 3rem); }

/* The row reserves a full word-height of space at the top, so the COPY can
   never run into the word at any column width — at ~1024px the text column
   gets tall enough to drive the row height, and a part-height reservation
   let the heading collide with the letters. The picture is then pulled back
   up into that reserved band by half its height, which is what produces the
   overlap. Copy clearance and picture overlap are set independently. */
.estory__row{
  --eword-h: calc(var(--eword-fs) * .82);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  gap: clamp(1.8rem, 5vw, 5.5rem);
  align-items: center;
  padding-top: var(--eword-h);
}
.estory__row + .estory__row{ margin-top: clamp(3.6rem, 10vw, 8.5rem); }

/* Row 1 reads copy -> picture; row 2 is the mirror. Explicit placement rather
   than source order, so the stacking order on small screens stays ours. */
.estory__copy { grid-column: 1; grid-row: 1; z-index: 3; }
.estory__media{ grid-column: 2; grid-row: 1; }
.estory__row--rev .estory__media{ grid-column: 1; }
.estory__row--rev .estory__copy { grid-column: 2; }

.estory__copy .dhead{ margin-bottom: 1.3rem; }
.estory__copy .lede + .body-copy{ margin-top: 1.1rem; }
.estory__copy .alink{ margin-top: 1.5rem; display: inline-flex; }

/* The photograph: tall, prominent, and the thing that crops the word. */
.estory__media{
  position: relative; z-index: 2; margin: 0;
  /* pinned to the top of the row and lifted into the word's band, so it
     always catches the letters however tall the copy column becomes */
  align-self: start;
  margin-top: calc(var(--eword-h) * -.46);
  /* 4:5 rather than 3:4 — clearly vertical, but it crops a landscape source
     by ~18% instead of ~27%, which matters because these photographs are
     centre-weighted. One value to change if you want it taller. */
  aspect-ratio: 4/5;
}

/* The word. Anchored to the outer edge so it runs inward and crosses the top
   of the picture; `nowrap` keeps it one line at every size.

   z-index 4 puts it over the photograph (2) and the copy (3). It stays
   pointer-events:none, so it never intercepts a click on either. */
.estory__word{
  position: absolute; z-index: 4; top: 0;
  line-height: .72; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.estory__word--right{ left: 0; }
.estory__word--left { right: var(--eword-tuck); }
.estory__word .outline{
  font-size: var(--eword-fs);
  text-transform: uppercase; letter-spacing: .045em; display: block;
}
/* Now that the letters cross the photograph, a bare ink hairline disappears
   into the darker parts of the image. drop-shadow traces the stroke itself
   (text-shadow would fill the glyph and turn it into a blob), giving a
   whisker of separation over the picture and reading as nothing on cream. */
.estory__word .outline--ink{
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.6));
}

/* Outlined type on cream. The hero's .outline is a white hairline with a dark
   halo built for photographs; on a pale field that halo turns to smudge, so
   this variant is a bare ink hairline and no filter at all. Kept faint on
   purpose — it is texture behind the page, not a second headline. */
.outline--ink{
  -webkit-text-stroke: 1.1px rgba(23,41,30,.34);
  text-stroke: 1.1px rgba(23,41,30,.34);
  filter: none;
}
@media (min-width:900px){
  .outline--ink{ -webkit-text-stroke-width:1.5px; text-stroke-width:1.5px; }
}
@supports not ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)){
  .outline--ink{ color: rgba(23,41,30,.17); }
}

/* Section eyebrow: a gold dot with a soft halo, then the words. */
.label--dot{ display: flex; align-items: center; gap: .85rem; }
.label--dot::before{
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(169,138,74,.15);
}

/* ---- stacked ------------------------------------------------------------ */
/* Picture first in both rows, so the word still lands on a photograph rather
   than on the heading — the overlap survives the breakpoint. */
@media (max-width:900px){
  .estory{ --eword-fs: clamp(2.6rem, 15vw, 5.4rem); }
  .estory__row{ grid-template-columns: 1fr; gap: clamp(1.4rem,4vw,2.2rem); }
  .estory__media,
  .estory__row--rev .estory__media{ grid-column: 1; grid-row: 1; }
  .estory__copy,
  .estory__row--rev .estory__copy { grid-column: 1; grid-row: 2; }
  .estory__media{ aspect-ratio: 4/5; }
  .estory__copy{ align-self: start; }
  .estory__word--left{ right: auto; left: 0; }
  .estory__lead{ margin-bottom: clamp(1rem, 3vw, 1.8rem); }
}

@media (prefers-reduced-motion: reduce){
  .estory__word{ transition: none; }
}

/* ---------- 30. SUITES & VILLAS — LAYERED FEATURE BLOCKS ---------------- */
/* Two alternating blocks on the dark green band: a photograph one side, a
   raised copy panel the other, the two overlapping by one column of twelve.

   The overlap is done with grid column spans rather than negative margins, so
   the amount is a ratio rather than a guessed pixel value: the picture spans
   7 of 12 columns and the panel starts on the last of them, which puts one
   seventh — about 14% — of the photograph behind the panel. Change the spans
   and the overlap changes with the layout instead of drifting out of step.

   The panel carries its own background and sits above the picture, so the
   layering never costs any readability: nothing is ever printed over the
   photograph. */

.villas{ --villa-gap: clamp(2.4rem, 7vw, 6rem); }

.villa{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.villa + .villa{ margin-top: var(--villa-gap); }

.villa__media, .villa__copy{ grid-row: 1; }
.villa__media{ z-index: 1; }
.villa__copy { z-index: 2; }

/* Block 1 — picture left, copy right. Block 2 mirrors it. */
.villa--a .villa__media{ grid-column: 1 / span 7; }
.villa--a .villa__copy { grid-column: 7 / span 6; }
.villa--b .villa__copy { grid-column: 1 / span 6; }
.villa--b .villa__media{ grid-column: 6 / span 7; }

.villa__media{
  margin: 0; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, var(--green-3), var(--green));
}
/* --villa-p runs 0 -> 1 as the block crosses the window (written by site.js).
   It drives a gentle zoom-out and a small vertical drift — the parallax. The
   scale never drops below 1.05, which is what leaves headroom for the drift:
   at 1.05 there is 2.5% of overflow on each edge and the drift only asks for
   1.5%, so no matter where the block sits an edge can never be exposed.
   No transition here on purpose — this transform is driven by the scroll
   itself, and a transition would make it lag behind the finger. */
.villa__media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center;
  transform: translate3d(0, calc((var(--villa-p, .5) - .5) * -3%), 0)
             scale(calc(1.10 - var(--villa-p, .5) * .05));
  will-change: transform;
}

.villa__copy{
  background: var(--green-2);
  border: 1px solid var(--line-d);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.1vw, 3rem);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.75);
}
.villa__name{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.45rem, 4.4vw, 2.05rem); line-height: 1.14;
  margin: 0 0 .85rem; color: var(--sage);
}
.villa__text{
  font-size: .92rem; line-height: 1.75;
  color: rgba(255,255,255,.82); margin: 0 0 1.35rem; max-width: 42ch;
}

/* These two blocks use their own attribute, [data-villa-in], instead of the
   site-wide [data-reveal]. That is deliberate: the shared system fires once and
   then unobserves, and its scroll sweep re-reveals anything above the fold —
   so a block that reset itself would be re-revealed by the sweep on the very
   next frame. Owning the attribute keeps the two systems from fighting and
   lets these blocks replay when you scroll back up. */
html.js .villa [data-villa-in]{
  opacity: 0;
  transition: opacity 1s var(--e-hero), transform 1.15s var(--e-hero);
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
html.js .villa [data-villa-in="left"] { transform: translate3d(-5vw, 0, 0); }
html.js .villa [data-villa-in="right"]{ transform: translate3d(5vw, 0, 0); }
html.js .villa [data-villa-in].is-in{ opacity: 1; transform: none; }

/* ---- stacked ------------------------------------------------------------ */
/* Picture first, panel lapped up over its lower edge — the layering survives
   the breakpoint instead of collapsing into two plain stacked boxes. */
@media (max-width:900px){
  .villa{ grid-template-columns: 1fr; }
  .villa--a .villa__media,
  .villa--b .villa__media{ grid-column: 1; grid-row: 1; }
  .villa--a .villa__copy,
  .villa--b .villa__copy { grid-column: 1; grid-row: 2;
    margin: clamp(-3.4rem, -7vw, -2rem) clamp(.5rem, 3vw, 1.5rem) 0; }
  .villa__media{ aspect-ratio: 16/11; }
  /* Sideways travel reads as a jolt on a narrow screen — the elements are
     full-width, so there is nothing for them to slide past. A short rise is
     calmer and costs nothing in character. */
  html.js .villa [data-villa-in="left"],
  html.js .villa [data-villa-in="right"]{ transform: translate3d(0, 30px, 0); }
}

/* With motion turned down site.js does not run the controller at all, so
   nothing would ever add .is-in — without this the blocks would stay at
   opacity 0 and the section would be blank. */
@media (prefers-reduced-motion: reduce){
  html.js .villa [data-villa-in]{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .villa__media img{ transform: none !important; }
}

/* ---------- 31. DISCOVER OUR AMENITIES — CINEMATIC STAGE ----------------
   Two halves in one band. Above: a calm cream introduction on the site's
   normal editorial measure. Below: a full-bleed photograph with a rail of
   five bordered cells ruled straight over it.

   The rail is not decoration next to a slider — it IS the slider. Cell N
   selects slide N, the active slide writes itself back onto cell N, and a
   gold frame plus a filling progress bar mark which one is live. One index
   in site.js drives both, so they cannot drift apart.

   Layering inside .amenx__stage:
     1  .amenx__media   photographs, cross-slid and cross-faded
     2  .amenx__scrim   gradient that buys back type contrast
     3  .amenx__wave    the cream band spilling over the top of the picture
     4  .amenx__body    captions and the rail
   ------------------------------------------------------------------------ */

/* No overflow:hidden on the section itself — .curve--top lives outside its own
   box (bottom:100%), and hiding overflow here would clip the next section's
   wave where it reaches back over this one. The stage clips instead. */
.amenx__intro{ text-align:center; max-width:900px; }
.amenx__head{ margin-inline:auto; }
.amenx__lede{ margin:1.4rem auto 0; max-width:60ch; }
/* The pricing qualifier that used to sit under the old amenity grid. It is
   a commercial disclosure, so it follows the amenities rather than being
   dropped with the cards it happened to live next to. */
.amenx__note{ margin:1rem auto 0; max-width:60ch; font-size:.8rem;
  letter-spacing:.01em; color:var(--muted); opacity:.85; }

/* Section 5 gives any section followed by a curve enough bottom padding to
   clear it. That rule outranks .section--flush-bottom, so the flush edge has
   to be asked for by name — the stage carries the clearance itself instead
   (see .amenx__stage padding-bottom) so the picture can run right into the
   green wave that follows while the rail stays above it. */
.section.on-white.amenx{ padding-bottom:0; }   /* (0,3,0) — see note above */

/* The next section's wave is drawn by an absolutely-placed SVG that sits
   OUTSIDE its own section (bottom:100%) at z-index 1. The stage has to sit at
   z-index 2 to clear this section's decoration pseudo-elements — which also
   put it above that wave, so the photograph covered it and the junction went
   back to being the hard edge this brief exists to remove. Lift just the wave
   that follows the stage; it is positioned clear of its own section's content,
   so nothing else is affected. */
.amenx + .section > .curve--top{ z-index:3; }

.amenx__stage{
  position:relative; z-index:2;                 /* over the decoration layer */
  margin-top:clamp(2.8rem,6vw,5rem);
  min-height:clamp(560px,82vh,860px);
  /* Clearance so the rail sits clear of the green wave that reaches back
     over this section, while the photograph itself runs on underneath it. */
  padding-bottom:calc(var(--curve-h) + clamp(.6rem,1.6vh,1.6rem));
  overflow:hidden;
  background:var(--green);                      /* holds the frame if a photo is slow */
  isolation:isolate;
  touch-action:pan-y;
}

/* -- 31a. photographs ---------------------------------------------------- */
.amenx__media{
  position:absolute; inset:0; overflow:hidden; z-index:1;
  transition:transform 1.3s var(--e-out);
}
.amenx__slide{
  position:absolute; inset:0; z-index:1; opacity:0;
  transform:translate3d(calc(var(--dir,1) * 4%),0,0);
  transition:opacity .9s var(--e-out), transform .95s var(--e-out);
  will-change:opacity, transform;
}
.amenx__slide.is-active{ opacity:1; transform:none; z-index:2; }
/* Applied to the outgoing slide only, and stripped once it has faded — so the
   reset back to the entry pose always happens at opacity 0, unseen. */
.amenx__slide.is-out{ opacity:0; transform:translate3d(calc(var(--dir,1) * -4%),0,0); z-index:1; }
.amenx__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.045);
}
/* Slow cinematic drift on whichever slide is live. Restarted by site.js. */
.amenx__slide.is-active img{ animation:amenxZoom 12s linear forwards; }
@keyframes amenxZoom{ from{ transform:scale(1.045); } to{ transform:scale(1.13); } }

.amenx__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(10,22,15,.44) 0%, rgba(10,22,15,.10) 18%,
      rgba(10,22,15,.50) 46%, rgba(10,22,15,.68) 62%, rgba(10,22,15,.74) 100%),
    linear-gradient(to right, rgba(10,22,15,.62), rgba(10,22,15,.04) 70%);
}

/* -- 31b. the organic hand-off from cream to photograph ------------------ */
.amenx__wave{
  position:absolute; top:-1px; left:0; right:0; z-index:4;
  line-height:0; pointer-events:none;
}
.amenx__wave svg{ display:block; width:100%; height:var(--curve-h); fill:var(--white); }

/* -- 31c. captions ------------------------------------------------------- */
.amenx__body{
  position:relative; z-index:5;
  min-height:inherit;
  display:grid; grid-template-rows:1fr auto;
}
.amenx__caps{
  display:grid; align-items:end;
  padding:calc(var(--curve-h) + clamp(2rem,5vh,4rem)) var(--gut) clamp(2.2rem,5vh,3.6rem);
}
.amenx__cap{
  grid-area:1/1;                                /* all captions share one cell */
  max-width:min(620px,100%);
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .9s;
}
.amenx__cap.is-active{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.amenx__cap > *{
  opacity:0; transform:translate3d(calc(var(--dir,1) * 26px),0,0);
  transition:opacity .8s var(--e-out), transform .9s var(--e-out);
}
.amenx__cap.is-active > *{ opacity:1; transform:none; }
.amenx__cap.is-active .amenx__num  { transition-delay:.06s; }
.amenx__cap.is-active .amenx__title{ transition-delay:.14s; }
.amenx__cap.is-active .amenx__text { transition-delay:.22s; }
.amenx__cap.is-active .amenx__go   { transition-delay:.30s; }

.amenx__num{
  display:flex; align-items:center; gap:.85rem; margin:0 0 1rem;
  font-size:.68rem; font-weight:500; letter-spacing:.28em; color:var(--gold-2);
}
.amenx__num b{ font-weight:600; color:#fff; }
.amenx__num i{ flex:0 0 auto; width:clamp(26px,3.4vw,58px); height:1px; background:currentColor; opacity:.55; }
.amenx__num span{ opacity:.65; }

.amenx__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.05rem,5.4vw,3.55rem); line-height:1.04; letter-spacing:-.006em;
  color:#fff; margin:0 0 1.05rem;
}
.amenx__text{
  margin:0 0 1.5rem; max-width:48ch;
  font-size:clamp(.92rem,1.15vw,1.02rem); line-height:1.78; color:rgba(255,255,255,.9);
}
.amenx__go{ color:#fff; }
.amenx__go::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; opacity:.35;
}

/* -- 31d. the bordered rail --------------------------------------------- */
.amenx__cells{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.22);
  background:linear-gradient(to bottom, rgba(8,18,13,.20), rgba(8,18,13,.54));
}
.amenx__cell{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:flex-start; gap:.85rem;
  min-height:clamp(196px,25vh,268px);
  padding:clamp(1.15rem,1.9vw,2rem) clamp(1rem,1.6vw,1.75rem);
  font:inherit; text-align:left; color:#fff; cursor:pointer;
  background:transparent; border:0;
  border-left:1px solid rgba(255,255,255,.17);
  transition:background .55s var(--e-out);
}
.amenx__cell:first-child{ border-left:0; }

/* Gold frame on the live cell: one hairline down each vertical edge. The two
   pseudo-elements are the frame; .amenx__prog is a real element so the bar can
   have its own animation without competing for ::before. */
.amenx__cell::before, .amenx__cell::after{
  content:''; position:absolute; top:0; bottom:0; width:1px; z-index:2;
  background:linear-gradient(to bottom,
    rgba(198,166,103,.12), var(--gold-2) 40%, rgba(198,166,103,.22));
  opacity:0; pointer-events:none; transition:opacity .55s var(--e-out);
}
.amenx__cell::before{ left:-1px; }
.amenx__cell::after { right:-1px; }
.amenx__cell.is-active::before, .amenx__cell.is-active::after{ opacity:1; }

.amenx__prog{
  position:absolute; top:-1px; left:0; z-index:3;
  width:0; height:2px; background:var(--gold-2); pointer-events:none;
}
.amenx__cell.is-active .amenx__prog{
  animation:amenxProg var(--amenx-dur,6400ms) linear forwards;
}
@keyframes amenxProg{ from{ width:0; } to{ width:100%; } }
/* Paused while the reader is choosing, and while the tab is in the background. */
.amenx__stage.is-held .amenx__prog{ animation-play-state:paused; }

.amenx__ico{
  display:block; width:clamp(26px,2.1vw,32px); height:auto;
  color:rgba(255,255,255,.7);
  transition:color .5s var(--e-out), transform .6s var(--e-out);
}
.amenx__ico svg{ width:100%; height:auto; }
.amenx__cellbody{ display:block; }
.amenx__name{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.02rem,1.45vw,1.32rem); line-height:1.2; letter-spacing:.005em;
  color:rgba(255,255,255,.92); transition:color .5s var(--e-out);
}
.amenx__sub{
  display:block; margin-top:.4rem;
  font-size:.72rem; line-height:1.55; letter-spacing:.04em;
  color:rgba(255,255,255,.70); transition:color .5s var(--e-out);
}
.amenx__tick{
  display:block; width:22px; margin-top:auto; color:rgba(255,255,255,.6);
  transition:color .5s var(--e-out), transform .5s var(--e-out);
}
.amenx__tick svg{ width:100%; height:auto; }

.amenx__cell.is-active{ background:rgba(255,255,255,.07); }
.amenx__cell.is-active .amenx__ico { color:var(--gold-2); transform:translateY(-2px); }
.amenx__cell.is-active .amenx__name{ color:#fff; }
.amenx__cell.is-active .amenx__sub { color:rgba(255,255,255,.72); }
.amenx__cell.is-active .amenx__tick{ color:var(--gold-2); transform:translateX(4px); }

@media (hover:hover){
  .amenx__cell:hover{ background:rgba(255,255,255,.06); }
  .amenx__cell:hover::before, .amenx__cell:hover::after{ opacity:.5; }
  .amenx__cell:hover .amenx__ico { color:var(--gold-2); transform:translateY(-2px); }
  .amenx__cell:hover .amenx__name{ color:#fff; }
  .amenx__cell:hover .amenx__sub { color:rgba(255,255,255,.7); }
  .amenx__cell:hover .amenx__tick{ color:var(--gold-2); transform:translateX(4px); }
  /* The "very subtle image zoom" of the brief. Applied to the wrapper, not the
     <img>, so it never fights the Ken Burns keyframe running on the picture. */
  .amenx__stage:has(.amenx__cell:hover) .amenx__media{ transform:scale(1.022); }
}
.amenx__cell:focus-visible{
  outline:1px solid var(--gold-2); outline-offset:-4px; background:rgba(255,255,255,.09);
}

/* -- 31e. tablet: four cells fit, the fifth wraps into a scroll ---------- */
@media (max-width:1100px){
  .amenx__stage{ min-height:clamp(600px,88vh,860px); }
  .amenx__cell{ min-height:clamp(180px,22vh,230px); }
  .amenx__sub{ font-size:.68rem; }
}

/* -- 31f. mobile: the rail becomes a swipe rail -------------------------- */
@media (max-width:860px){
  .amenx__stage{ min-height:0; padding-bottom:calc(var(--curve-h) * .5); }
  .amenx__body{ display:block; }
  .amenx__caps{
    padding:calc(var(--curve-h) + clamp(3rem,11vh,5rem)) var(--gut) clamp(2rem,5vh,2.8rem);
    min-height:clamp(360px,52vh,520px);
  }
  .amenx__cap{ max-width:none; }
  .amenx__text{ font-size:.93rem; line-height:1.72; }

  /* On a phone the caption spans nearly the full width, so the left-to-right
     half of the scrim stops doing the work it does on a wide screen. Measured
     at 390px the body copy fell to 4.15:1 over a bright frame; this ramp puts
     it back over 4.5:1 without visibly flattening the photograph. */
  .amenx__scrim{
    background:
      linear-gradient(to bottom,
        rgba(10,22,15,.50) 0%, rgba(10,22,15,.22) 14%,
        rgba(10,22,15,.62) 40%, rgba(10,22,15,.74) 66%, rgba(10,22,15,.78) 100%),
      linear-gradient(to right, rgba(10,22,15,.55), rgba(10,22,15,.30) 100%);
  }

  .amenx__cells{
    display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
    background:linear-gradient(to top, rgba(9,20,14,.90), rgba(9,20,14,.60));
  }
  .amenx__cells::-webkit-scrollbar{ display:none; }
  .amenx__cell{
    flex:0 0 62%; max-width:290px; scroll-snap-align:center;
    min-height:0; gap:.7rem;
    padding:1.15rem 1.15rem 1.3rem;
  }
  .amenx__tick{ margin-top:.35rem; }
}
@media (max-width:420px){
  .amenx__cell{ flex-basis:74%; }
}

/* -- 31g. no motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .amenx__media{ transform:none !important; }
  .amenx__slide{ transform:none !important; }
  .amenx__slide img{ animation:none !important; transform:none !important; }
  .amenx__cap > *{ opacity:1 !important; transform:none !important; }
  /* No timer runs, so the bar states the position instead of counting it. */
  .amenx__cell.is-active .amenx__prog{ animation:none !important; width:100%; }
}
/* No JS: every caption is legible and the rail still reads as a summary. */
html:not(.js) .amenx__cap{ visibility:visible; }
html:not(.js) .amenx__cap > *{ opacity:1; transform:none; }
html:not(.js) .amenx__cap:not(.is-active){ display:none; }


/* ---------- 32. WEDDING EXPERIENCE — ASYMMETRIC COMPOSITION -------------
   Three photographs and one copy panel in a 12-column grid. The areas are
   deliberately unequal — a tall portrait anchoring the left across both rows,
   a wide landscape along the top right, the copy panel beneath it and a square
   tucked into the remaining well — so it can never settle into a card row.
   Each block declares its own reveal direction, so the composition assembles
   from both sides as it arrives. */
.wedg{ background:var(--ivory); }
.wedg__intro{ text-align:center; margin-bottom:clamp(2.4rem,5.5vw,4rem); }
.wedg__head{ margin-inline:auto; }

.wedg__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-template-rows:clamp(230px,26vw,390px) auto;
  gap:clamp(.85rem,1.7vw,1.6rem);
}
.wedg__a{ grid-column:1/6;   grid-row:1/3; }   /* tall portrait, left  */
.wedg__b{ grid-column:6/13;  grid-row:1/2; }   /* wide landscape, top  */
.wedg__c{ grid-column:6/10;  grid-row:2/3; }   /* copy panel           */
.wedg__d{ grid-column:10/13; grid-row:2/3; }   /* square, tucked right */

.wedg__shot{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(140deg,var(--green-3),var(--green));
}
.wedg__shot img{ width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform 1.5s var(--e-out); }
@media (hover:hover){ .wedg__shot:hover img{ transform:scale(1.045); } }

/* The copy panel is the one dark element in an ivory band, which is what makes
   the composition read as editorial rather than as a gallery of four. */
.wedg__panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.5rem,2.5vw,2.6rem);
  border-radius:var(--radius); background:var(--green); color:#fff;
}
.wedg__eyebrow{
  margin:0 0 .9rem; font-size:.66rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2);
}
.wedg__title{
  margin:0 0 .9rem; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.1rem); line-height:1.14; color:var(--sage);
}
.wedg__text{ margin:0 0 1.4rem; font-size:.93rem; line-height:1.75; color:var(--muted-d); }
.wedg__list{ list-style:none; margin:0 0 1.5rem; padding:0; }
.wedg__list li{
  position:relative; padding:.62rem 0 .62rem 1.4rem;
  border-top:1px solid var(--line-d); font-size:.84rem; line-height:1.5;
}
.wedg__list li:first-child{ border-top:0; }
.wedg__list li::before{
  content:''; position:absolute; left:0; top:1.12rem;
  width:6px; height:6px; border:1px solid var(--gold-2); transform:rotate(45deg);
}
.wedg__list b{ display:block; font-weight:500; color:var(--sage); letter-spacing:.01em; }
.wedg__list span{ color:rgba(250,249,245,.62); }
.wedg__panel .alink{ color:#fff; align-self:flex-start; }

@media (max-width:1000px){
  .wedg__grid{ grid-template-rows:clamp(190px,29vw,300px) auto; }
  .wedg__a{ grid-column:1/7;   grid-row:1/2; }
  .wedg__b{ grid-column:7/13;  grid-row:1/2; }
  .wedg__c{ grid-column:1/9;   grid-row:2/3; }
  .wedg__d{ grid-column:9/13;  grid-row:2/3; }
}
@media (max-width:700px){
  /* Stacked, an asymmetric grid just reads as an inconsistent one. */
  .wedg__grid{ grid-template-columns:1fr; grid-template-rows:none; }
  .wedg__a,.wedg__b,.wedg__c,.wedg__d{ grid-column:1/-1; grid-row:auto; }
  .wedg__shot{ aspect-ratio:3/2; }
  .wedg__c{ order:-1; }        /* lead with the words on a narrow screen */
}


/* ---------- 33. STORIES FROM SAMBODHI ----------------------------------- */
.jrn__head{ margin-inline:auto; }
.jrn__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2.2rem); }
@media (max-width:900px){ .jrn__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .jrn__grid{ grid-template-columns:1fr; } }

.jrn__link{
  display:flex; flex-direction:column; height:100%; color:inherit;
  transition:transform .65s var(--e-out);
}
.jrn__media{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); aspect-ratio:4/3;
  background:linear-gradient(140deg,var(--green-3),var(--green));
}
.jrn__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--e-out); }
.jrn__cat{
  position:absolute; left:.9rem; top:.9rem; z-index:2;
  padding:.4rem .85rem; border-radius:999px;
  background:rgba(23,41,30,.82); color:var(--sage);
  font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.jrn__body{ display:flex; flex-direction:column; flex:1; padding-top:1.1rem; }
.jrn__title{
  margin:0 0 .6rem; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.28; color:var(--green);
  transition:color .4s var(--e-out);
}
.jrn__excerpt{ display:block; font-size:.86rem; line-height:1.7; color:var(--muted); }
.jrn__more{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:1.1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:lowercase;
  color:var(--gold);
}
.jrn__more svg{ width:26px; height:10px; transition:transform .45s var(--e-out); }

@media (hover:hover){
  .jrn__card:hover .jrn__link { transform:translateY(-7px); }
  .jrn__card:hover .jrn__media img{ transform:scale(1.07); }
  .jrn__card:hover .jrn__title{ color:var(--gold); }
  .jrn__card:hover .jrn__more svg{ transform:translateX(7px); }
}
.jrn__link:focus-visible{ outline:1px solid var(--gold); outline-offset:6px; border-radius:4px; }


/* ---------- 34. PICKUP & DROP + GET IN TOUCH ---------------------------- */
/* One dark band doing two jobs: transfers and the map on the left, the contact
   card on the right. It replaces the old Getting Here block and the locale
   strip, and carries every route, number and address both of them had. */
.pdg__grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:start;
}
@media (max-width:980px){ .pdg__grid{ grid-template-columns:1fr; } }

.pdg__routes{ list-style:none; margin:clamp(1.8rem,3.4vw,2.6rem) 0 0; padding:0; }
.pdg__routes li{
  display:flex; align-items:flex-start; gap:1.05rem;
  padding:1.05rem 0; border-top:1px solid var(--line-d);
}
.pdg__routes li:last-child{ border-bottom:1px solid var(--line-d); }
.pdg__ico{ flex:0 0 auto; width:clamp(26px,2.4vw,32px); color:var(--gold-2); }
.pdg__ico svg{ width:100%; height:auto; }
.pdg__routes span:last-child{ font-size:.88rem; line-height:1.62; color:var(--muted-d); }
.pdg__routes b{
  display:block; margin-bottom:.16rem; font-family:var(--f-display);
  font-weight:400; font-size:clamp(1.05rem,1.6vw,1.24rem); color:var(--sage);
}

.pdg__map{
  margin:clamp(1.8rem,3.4vw,2.6rem) 0 0; overflow:hidden;
  border-radius:var(--radius); background:var(--green-3);
}
.pdg__map iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; }
@media (max-width:640px){ .pdg__map iframe{ aspect-ratio:4/3; } }

/* Ivory card on the dark ground — the one bright plane in the band, so the
   details a guest actually needs to act on are the first thing found. */
.pdg__card{
  background:var(--ivory); color:var(--ink);
  border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem);
}
.pdg__card .label{ color:var(--gold); }
.pdg__name{
  margin:0 0 1.4rem; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:1.1; color:var(--green);
}
.pdg__contact{ list-style:none; margin:0 0 1.8rem; padding:0; }
.pdg__contact li{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1rem 0; border-top:1px solid var(--line);
  font-size:.9rem; line-height:1.65; color:var(--muted);
}
.pdg__contact li:first-child{ border-top:0; padding-top:0; }
.pdg__contact .pdg__ico{ color:var(--gold); }
.pdg__contact a{ color:var(--ink); transition:color .35s; }
.pdg__contact a:hover{ color:var(--gold); }
/* The entry rate used to live on the closing CTA band, which the brief's
   Gallery-then-Footer flow retires. It is a commercial claim, so it moves
   to the panel that carries the enquiry and booking buttons. */
.pdg__rate{ margin:0 0 1.1rem; font-size:.86rem; color:var(--muted); }
.pdg__rate b{ font-family:var(--f-display); font-weight:400;
  font-size:1.24rem; color:var(--green); }

.pdg__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }
.pdg__cta .btn--light{ --fg:var(--green); --bd:rgba(18,36,30,.28); }
.pdg__cta .btn--light:hover,.pdg__cta .btn--light:focus-visible{
  background:var(--green); border-color:var(--green); color:#fff; }
.pdg__alt{
  margin:1.5rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.74rem; line-height:1.6; color:var(--muted); opacity:.9;
}


/* ---------- 35. PHOTO GALLERY — ASYMMETRIC MASONRY ---------------------- */
/* Each tile names its own column and row span (tile--w2 / --h2 / --h3, shared
   with the mosaic in section 22), so the rhythm is composed rather than
   uniform. grid-auto-flow:dense lets short tiles backfill the wells the tall
   ones leave, which is what keeps the block from growing ragged holes. */
.gal__head{ margin-inline:auto; }
.gal__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(78px,10vw,140px); grid-auto-flow:dense;
  gap:clamp(.5rem,1vw,.9rem);
}
@media (max-width:900px){ .gal__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:31vw; } }

.gtile{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); grid-column:span 1; grid-row:span 2;
  background:linear-gradient(140deg,var(--green-3),var(--green));
}
/* The span modifiers are shared with the mosaic in section 22, where they are
   declared at (0,1,0) — the same weight as .gtile above and EARLIER in the
   file, so .gtile's own span won and every tile came out identical. Re-declare
   them scoped to this grid, which lifts them to (0,2,0) and restores the
   asymmetry the brief asks for. */
.gal__grid .tile--w2{ grid-column:span 2; }
.gal__grid .tile--h2{ grid-row:span 2; }
.gal__grid .tile--h3{ grid-row:span 3; }
@media (max-width:900px){
  .gal__grid .tile--w2{ grid-column:span 2; }
  .gal__grid .tile--h2,.gal__grid .tile--h3{ grid-row:span 2; }
}

.gtile img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--e-out); }
.gtile__veil{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(to top, rgba(12,26,18,.62), rgba(12,26,18,.06));
  transition:opacity .55s var(--e-out);
}
.gtile__zoom{
  position:absolute; left:50%; top:50%; width:44px; height:44px;
  margin:-22px 0 0 -22px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.75); color:#fff;
  opacity:0; transform:scale(.82); pointer-events:none;
  transition:opacity .5s var(--e-out), transform .55s var(--e-out);
}
.gtile__zoom svg{ width:17px; height:17px; }
@media (hover:hover){
  .gtile:hover img{ transform:scale(1.07); }
  .gtile:hover .gtile__veil{ opacity:1; }
  .gtile:hover .gtile__zoom{ opacity:1; transform:scale(1); }
}
.gtile:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.gtile:focus-visible .gtile__zoom{ opacity:1; transform:scale(1); }


/* ---------- 36. FOOTER — BOTANICAL GROUND, IVORY PANEL ------------------ */
/* Deep green ground carrying the botanical artwork, with one large ivory panel
   lifted off it. Every link, number and address is the same as before; only
   the plane they sit on changed. */
.ftr--panel{ background:var(--green); padding-block:clamp(2.2rem,5vw,4.5rem) clamp(1.6rem,3vw,2.4rem); }
.ftr--panel .ftr__panel{
  position:relative; z-index:2;
  background:var(--ivory); color:var(--ink);
  border-radius:clamp(12px,2vw,22px);
  padding:clamp(1.8rem,4vw,3.6rem);
}
.ftr--panel .ftr__grid{
  grid-template-columns:1.3fr .78fr .78fr 1.1fr;
  gap:clamp(1.6rem,3.2vw,3.4rem);
}
@media (max-width:1000px){
  .ftr--panel .ftr__grid{ grid-template-columns:1fr 1fr; }
  .ftr--panel .ftr__brandcol{ grid-column:1/-1; }
  .ftr--panel .ftr__newscol{ grid-column:1/-1; }
}
@media (max-width:560px){ .ftr--panel .ftr__grid{ grid-template-columns:1fr; } }

.ftr--panel .ftr__mark img{ filter:none; opacity:1; }
.ftr__blurb{ margin:0 0 .55rem; font-size:.82rem; line-height:1.7; color:var(--muted); }
.ftr__blurb a{ color:var(--muted); transition:color .3s; }
.ftr__blurb a:hover{ color:var(--gold); }
.ftr__ch{
  margin:0 0 .9rem; font-family:var(--f-sans); font-size:.62rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.ftr--panel .ftr__col a{ font-size:clamp(.95rem,1.4vw,1.1rem); line-height:1.85; color:var(--ink); }
.ftr--panel .ftr__col a:hover{ color:var(--gold); }
.ftr--panel .news{ margin-top:0; }
.ftr--panel .news h4{ color:var(--green); }
.ftr--panel .news p{ color:var(--muted); }
.ftr--panel .news__row input{ border-bottom-color:var(--line); color:var(--ink); }
.ftr--panel .news__row input::placeholder{ color:rgba(78,92,82,.62); }
.ftr--panel .news__row input:focus{ border-bottom-color:var(--gold); }
.ftr--panel .news__row button{ color:var(--green); transition:color .35s; }
.ftr--panel .news__row button:hover{ color:var(--gold); }
.ftr--panel .news__consent{ color:var(--muted); font-size:.7rem; line-height:1.6; }
.ftr--panel .news__consent a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.ftr--panel .news__consent a:hover{ color:var(--gold); }
.ftr--panel .news__consent input{ accent-color:var(--green); }
.news__note{ margin:.8rem 0 0; font-size:.72rem; line-height:1.55; min-height:1.1em; color:var(--gold); }
.news__note[data-ok]{ color:var(--green-2); }
.ftr--panel .ftr__social{ margin-top:clamp(1.3rem,2.6vw,1.9rem); }
.ftr--panel .ftr__social a{ background:var(--green); }
.ftr--panel .ftr__social a:hover{ background:var(--gold); }
.ftr--panel .ftr__bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; justify-content:space-between;
  margin-top:clamp(1.8rem,3.4vw,2.8rem); padding-top:1.3rem;
  border-top:1px solid var(--line); color:var(--muted); font-size:.74rem;
}
.ftr--panel .ftr__bottom p{ margin:0; }
.ftr__alt{ opacity:.8; }