/* ============================================================
   LUXURY ON THE BAY — design system
   NOTE: --ink is a TYPE colour only. Every dark surface is a blue
         (--harbour / --harbour-deep); nothing on the site has a black
         background.

   Palette: the client's own three colours, built out for the coast.
            Sage #AAAE98 and white are theirs, untouched. Their black
            softens to an ink with blue in it, and the blues are all
            pitched at the sage's own 12–30% chroma so nothing in the
            palette outshouts anything else.
   Type:    Italiana (display) · Cormorant Garamond (italic accents) ·
            Jost (labels/nav) ·
            Hanken Grotesk (body)
   ============================================================ */
:root{
  /* --- theirs, unchanged ------------------------------------- */
  --white:      #FFFFFF;   /* page base */
  --sage:       #AAAE98;   /* their brand green. Every call to action */

  /* --- the coastal build-out --------------------------------- */
  --shell:      #FFFFFF;   /* was the warm sand surface. Cream is out of the
                              palette — every light surface is white now, and
                              the dark blues carry all the contrast. */
  --driftwood:  #A0B2BA;   /* light coastal blue: lines, accents on the dark */
  --seaglass:   #2D4F58;   /* the water blue, darkened to carry text */
  --harbour:    #2B4050;   /* the feature band */
  --harbour-deep: #223546; /* the closing surfaces: footer, reel, orbit */
  --ink:        #191F24;   /* type only. Never a background — see note below */

  /* --- tints and states -------------------------------------- */
  --sage-soft:  #C4C7B6;
  --sage-pale:  #D6DACB;   /* sage at half volume, as a section surface */
  --sage-deep:  #979C83;   /* the brand green, pressed */
  --shell-deep: #FFFFFF;   /* nothing pressed a cream surface; kept as an alias */
  --weathered:  #42596C;   /* secondary text, quiet structural blue */
  --btn-ink:    #1C1C1A;   /* button type. Near-black, never a blue */

  /* names used through the sheet, mapped onto the palette above */
  --paper:      var(--white);
  --cream:      var(--white);
  --cream-deep: var(--sage-pale);
  --sand:       var(--shell);
  --sand-deep:  var(--shell-deep);
  --sage-wash:  var(--sage-pale);
  --ocean:      var(--harbour);
  --ocean-deep: var(--harbour-deep);
  --ocean-mid:  var(--weathered);
  --ocean-bright: var(--seaglass);   /* wayfinding on light surfaces */
  --ocean-lit:    var(--driftwood);  /* the same idea on the dark */
  --forest:     var(--harbour);
  --forest-deep:var(--harbour-deep);
  --ink-soft:   var(--weathered);
  --line:       rgba(34,53,70,.18);

  --f-display: "Italiana", Didot, Georgia, serif;
  /* Italiana ships upright only, so italics borrow Cormorant */
  --f-italic:  "Cormorant Garamond", Didot, Georgia, serif;
  --f-label:   "Jost", system-ui, sans-serif;
  --f-body:    "Hanken Grotesk", system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --gutter: clamp(4rem, 13vh, 11rem);
  --fill-ease:cubic-bezier(.22,.61,.36,1);
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

/* --- type ------------------------------------------------- */
/* Italiana is a single upright weight with wide, high-waisted letterforms.
   It wants a touch of tracking and more line height than a normal serif. */
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.18;
  letter-spacing:.005em; margin:0; padding-bottom:.06em}
h1{font-size:clamp(2.8rem,6.4vw,5.6rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.9rem)}
h3{font-size:clamp(1.4rem,2.1vw,1.85rem); line-height:1.24; letter-spacing:.01em}
em{font-style:italic; font-family:var(--f-italic); font-weight:500;
  letter-spacing:0}
.label{
  font-family:var(--f-label); font-weight:400; font-size:.6875rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft);
}
.lede{font-size:clamp(1.125rem,1.05rem + .5vw,1.375rem); line-height:1.65;
  font-weight:300; color:var(--ink)}
.muted{color:var(--ink-soft)}

/* --- buttons ---------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-label); font-weight:400; text-transform:uppercase;
  font-size:.6875rem; letter-spacing:.16em; text-decoration:none;
  padding:1.15em 2.3em; border:1px solid var(--sage); background:transparent;
  color:var(--ink); cursor:pointer; position:relative; isolation:isolate;
  overflow:hidden;
  transition:background .45s var(--ease), color .55s var(--fill-ease),
  border-color .45s var(--ease);
}
/* The fill rises from the base rather than switching on. The label is a
   bare text node so it cannot be raised above the fill with z-index —
   isolation plus a negative z-index on the pseudo does it instead.
   Scoped away from the modifiers: those set their own hover background
   and a rising fill under it would fight them. */
.btn:not([class*="--"])::before,.dbtn::before,.gask__btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--sage); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--fill-ease)}
.btn:not([class*="--"]):hover::before,.dbtn:hover::before,
.gask__btn:hover::before{transform:scaleY(1)}
/* outlined in the brand sage, filling with it on hover. The label stays
   ink: sage type on white measures 2.8:1 and stops reading. */
.btn:hover{border-color:var(--sage); color:var(--btn-ink)}
/* Over photography the label runs the same sage as its outline — legible
   there, where sage measures well against the scrim. On light grounds the
   label stays ink: sage on white is 2.3:1. */
.phero .btn, .bay__body .btn{border-color:var(--sage); color:var(--sage)}
.phero .btn:hover, .bay__body .btn:hover{
  border-color:var(--sage); color:var(--btn-ink)}

/* On the blue the button is filled in the logo's sage from the start —
   an outline on that ground reads as secondary, and nothing beside it is
   competing for the eye. The fill runs in reverse on hover: it drops
   away and leaves the outline, which is the same movement backwards. */
.band .btn:not([class*="--"]), .orbit .btn:not([class*="--"]),
.gask .btn:not([class*="--"]), .cta .btn:not([class*="--"]),
.phero--deep .btn:not([class*="--"]), .vband .btn:not([class*="--"]){
  border-color:var(--sage); color:var(--btn-ink)}
.band .btn:not([class*="--"])::before, .orbit .btn:not([class*="--"])::before,
.gask .btn:not([class*="--"])::before, .cta .btn:not([class*="--"])::before,
.phero--deep .btn:not([class*="--"])::before,
.vband .btn:not([class*="--"])::before{transform:scaleY(1)}
.band .btn:not([class*="--"]):hover, .orbit .btn:not([class*="--"]):hover,
.gask .btn:not([class*="--"]):hover, .cta .btn:not([class*="--"]):hover,
.phero--deep .btn:not([class*="--"]):hover,
.vband .btn:not([class*="--"]):hover{color:var(--sage)}
.band .btn:not([class*="--"]):hover::before,
.orbit .btn:not([class*="--"]):hover::before,
.gask .btn:not([class*="--"]):hover::before,
.cta .btn:not([class*="--"]):hover::before,
.phero--deep .btn:not([class*="--"]):hover::before,
.vband .btn:not([class*="--"]):hover::before{transform:scaleY(0)}
/* the plain header is a light ground, so its buttons stay ink */
.phero--plain .btn{border-color:var(--sage); color:var(--ink)}
.phero--plain .btn:hover{border-color:var(--sage); color:var(--btn-ink)}
.btn--ghost{background:transparent; color:var(--harbour); border-color:var(--harbour)}
.btn--ghost:hover{background:var(--harbour); color:var(--white)}
/* on photography and dark bands the beige stays the CTA, it just sits alone */
.btn--light{background:var(--sage); border-color:var(--sage); color:var(--btn-ink)}
.btn--light:hover{background:transparent; border-color:var(--sage); color:var(--sage)}
/* On the sage surfaces the sage button all but disappears, so the
   CTA flips to navy there. Same shape, same weight, still one filled
   action per group. */
.on-sage .btn:not(.btn--ghost), .on-sage-wash .btn:not(.btn--ghost){
  background:var(--ocean); border-color:var(--ocean); color:var(--paper)}
.on-sage .btn:not(.btn--ghost):hover,
.on-sage-wash .btn:not(.btn--ghost):hover{
  background:var(--ocean-deep); border-color:var(--ocean-deep)}
.proof .btn{background:var(--ocean); border-color:var(--ocean); color:var(--paper)}

/* the quiet second action beside a beige CTA over photography */
.btn--outline{background:transparent; border-color:rgba(247,244,238,.5);
  color:var(--paper)}
.btn--outline:hover{background:rgba(247,244,238,.12);
  border-color:var(--paper)}
.link{
  font-family:var(--f-label); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; padding-bottom:.45em;
  border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease), color .4s var(--ease)
}
.link:hover{border-color:var(--ocean-bright); color:var(--ocean-bright)}
.band .link:hover{border-color:var(--ocean-lit); color:var(--ocean-lit)}

/* body links and inline actions */
.intro__body a:not(.btn), .demo a:not(.btn), p a:not(.btn){
  color:var(--ocean-bright); text-decoration-thickness:1px;
  text-underline-offset:.22em}
.band p a:not(.btn){color:var(--ocean-lit)}

/* keyboard focus, everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible{outline:2px solid var(--ocean-bright);
  outline-offset:3px}
.band a:focus-visible, .band button:focus-visible,
.cta a:focus-visible, .cta button:focus-visible,
.phero a:focus-visible, .walk a:focus-visible{outline-color:var(--ocean-lit)}

/* --- layout ----------------------------------------------- */
.wrap{padding-inline:var(--pad)}
.section{padding-block:var(--gutter)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* --- header: utility bar + nav (living header) -------------- */
.head{position:fixed; inset:0 0 auto 0; z-index:60}
.util{
  display:flex; align-items:center; justify-content:center; gap:2.5rem;
  height:2.5rem; overflow:hidden;
  background:transparent; color:rgba(255,255,255,.82);
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.24em;
  text-transform:uppercase;
  transition:height .55s var(--ease), opacity .45s var(--ease),
             color .55s var(--ease), border-color .55s var(--ease);
}
.util a{text-decoration:none}
.util span{opacity:.75}
.head.is-solid .util{height:0; opacity:0}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.1rem var(--pad);
  background:transparent;
  transition:background .55s var(--ease), padding .55s var(--ease),
             box-shadow .55s var(--ease);
}
.nav__mark{position:relative; display:block; width:4.6rem; aspect-ratio:1/.9;
  line-height:0; flex:none;
  transition:width .55s var(--ease)}
/* both marks are absolute and the box carries the size — otherwise the box
   collapses to zero height in whichever state hides the in-flow image, and
   the logo renders outside the bar */
.nav__mark img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; transition:opacity .45s var(--ease)}
.nav__mark .on-dark{opacity:0}
.nav__mark .on-light{opacity:1}
.head.is-solid .nav__mark{width:3.9rem}
.nav__links{display:flex; gap:2.1rem; align-items:center}
.nav__links a{
  font-family:var(--f-label); font-size:.71rem; letter-spacing:.2em;
  font-weight:500; text-transform:uppercase; text-decoration:none;
  color:var(--ink); opacity:1;
  transition:color .35s var(--ease);
}
.nav__links a:hover{color:var(--seaglass)}
/* Transparent over the hero photograph, so the menu runs white there and
   turns dark the moment the header goes solid. */
.head:not(.is-solid) .util{color:rgba(255,255,255,.82)}
.head:not(.is-solid) .nav__links a{color:var(--white)}
.head:not(.is-solid) .nav__links a:hover{color:var(--sage-soft)}
.head:not(.is-solid) .nav__toggle{color:var(--white)}
.head:not(.is-solid) .nav__mark .on-light{opacity:0}
.head:not(.is-solid) .nav__mark .on-dark{opacity:1}
.head.is-solid .util{color:var(--weathered);
  border-bottom:1px solid var(--line)}
.head.is-solid{background:var(--white)}
.head.is-solid .nav{padding-block:.9rem}
.nav__toggle{display:none; background:none; border:0; color:inherit; padding:.5rem;
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer}

/* --- hero: scroll walkthrough ------------------------------ */
/* Signature moment. A scroll-scrubbed walk from the street to the water,
   built from one property's real photography. Transform + opacity only. */
.walk{position:relative; background:var(--harbour-deep)}
.walk__stage{position:relative; height:100svh; min-height:34rem; overflow:hidden;
  color:var(--white)}
.walk__frame{position:absolute; inset:0}
.walk__frame img{width:100%; height:100%; object-fit:cover}
/* the loop sits over the still; the still is the poster + the no-motion fallback */
.walk__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 40%; z-index:0}
@media (prefers-reduced-motion:reduce){.walk__video{display:none}}
.walk__frame::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(34,53,70,.50) 0%,rgba(34,53,70,.10) 32%,
    rgba(34,53,70,.22) 62%,rgba(34,53,70,.74) 100%);
}

/* keeps the nav legible whichever frame is showing */
.walk__scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(72% 62% at 50% 46%, rgba(34,53,70,.52) 0%,
      rgba(34,53,70,.30) 46%, rgba(34,53,70,0) 78%),
    linear-gradient(180deg, rgba(34,53,70,.62) 0%, rgba(34,53,70,.06) 26%,
      rgba(34,53,70,.10) 62%, rgba(34,53,70,.58) 100%)}

/* fixed overlay furniture */
.walk__inner{position:absolute; inset:0; z-index:3; display:flex;
  flex-direction:column; justify-content:flex-end;
  padding:9rem var(--pad) clamp(2rem,5vh,3.5rem); pointer-events:none}
.walk__inner > *{pointer-events:auto}
.walk__eyebrow{color:rgba(255,255,255,.9); margin-bottom:1.6rem}
.walk h1{max-width:15ch}
.walk h1 em{font-style:italic; color:var(--sage-soft)}
.walk__sub{max-width:44ch; margin:1.75rem 0 0; color:rgba(255,255,255,.9)}
.walk__lead{will-change:opacity, transform}

/* per-beat caption */
.walk__caption{position:absolute; left:var(--pad); bottom:clamp(9rem,20vh,12rem);
  z-index:4; display:grid; gap:.4rem; pointer-events:none}
.walk__caption span{
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(255,255,255,.92);
  grid-area:1/1; opacity:0; transform:translateY(8px);
  will-change:opacity, transform;
}

/* beat ticks */
.walk__ticks{position:absolute; right:var(--pad); top:50%; z-index:4;
  transform:translateY(-50%); display:grid; gap:.7rem; pointer-events:none}
.walk__ticks i{display:block; width:1px; height:1.9rem;
  background:rgba(255,255,255,.28); transition:background .5s var(--ease)}
.walk__ticks i.on{background:var(--ocean-lit)}

/* scroll cue */
.walk__cue{position:absolute; left:50%; bottom:2rem; z-index:4;
  transform:translateX(-50%); font-family:var(--f-label); font-size:.625rem;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.7);
  display:grid; justify-items:center; gap:.6rem; pointer-events:none}
.walk__cue::after{content:""; width:1px; height:2.5rem;
  background:linear-gradient(rgba(255,255,255,.7), transparent);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top}
  55%{transform:scaleY(1); transform-origin:top}
  56%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* the search bar arrives with the last beat */
.walk__search{margin-top:2.75rem; will-change:opacity, transform;
  display:flex; justify-content:center}

/* --- search bar ------------------------------------------- */

/* --- intro ------------------------------------------------ */
.intro{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,6vw,6rem);
  align-items:start}
.intro h2{max-width:22ch}
/* the reference's hairline, run under every section heading */
.intro__head::after{content:""; display:block; height:1px;
  background:var(--line); margin-top:clamp(1.75rem,3.5vh,2.75rem)}
.band .intro__head::after{background:rgba(255,255,255,.28)}
/* .lede states ink, so on the blue it was invisible while the plain
   paragraphs beside it inherited the band's white */
.band .lede{color:var(--paper)}
.intro__body p{margin:0 0 1.35em}
.intro__body p:last-of-type{margin-bottom:2rem}

/* --- residences ------------------------------------------- */
.res__head{display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem 4rem; flex-wrap:wrap;
  padding-bottom:clamp(1.75rem,3.5vh,2.75rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(3rem,6vh,5rem)}
.res__head h2{max-width:24ch}
.rail{display:flex; gap:clamp(1rem,2vw,1.75rem); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:1.5rem; padding-inline:var(--pad);
  scroll-padding-inline:var(--pad); scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(19rem,32vw,29rem); scroll-snap-align:start;
  text-decoration:none; display:block; group:card}
.card__media{position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--shell)}
.card__media img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__tag{position:absolute; top:1rem; left:1rem; z-index:2;
  background:rgba(255,255,255,.93); padding:.5em .95em;
  font-family:var(--f-label); font-size:.5875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--forest)}
.card__body{padding-top:1.35rem}
.card__body h3{margin-bottom:.45rem}
.card__meta{display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:.9rem;
  padding-top:.9rem; border-top:1px solid var(--line)}
.card__meta span{font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.card__price{font-family:var(--f-display); font-size:1.05rem; color:var(--ink)}
.rail__nav{display:flex; gap:.6rem; margin-top:.5rem}
.rail__btn{width:3rem; height:3rem; border:1px solid var(--line); background:none;
  color:var(--forest); cursor:pointer; font-size:1rem; line-height:1;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease)}
.rail__btn:hover{background:var(--forest); color:var(--cream); border-color:var(--forest)}

/* --- feature band ----------------------------------------- */
.band{background:var(--ocean); color:var(--white)}
.band .label{color:var(--sage-soft)}
.band .rule{background:rgba(255,255,255,.18)}
.band__grid{display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(2.5rem,7vw,7rem); align-items:center}
.band__media{aspect-ratio:4/5; overflow:hidden;
  margin-right:calc(var(--pad) * -1)}
.band__media img{width:100%; height:100%; object-fit:cover}
.band h2{max-width:15ch}

/* --- services --------------------------------------------- */
/* Cards, not hairline-separated columns. Set on the dark band the type
   ran at 76% white with nothing bounding it, which is where the
   legibility went. Each item is now a white panel lifted off the blue. */
.svc{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem);
  margin-top:clamp(3rem,7vh,5.5rem)}
.svc__item{background:var(--white); color:var(--ink);
  padding:clamp(1.75rem,3.2vh,2.5rem);
  box-shadow:0 18px 40px -22px rgba(9,24,34,.55),
             0 2px 6px -2px rgba(9,24,34,.3);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.svc__item:hover{transform:translateY(-4px);
  box-shadow:0 26px 54px -22px rgba(9,24,34,.62),
             0 3px 8px -2px rgba(9,24,34,.34)}
.svc__item h3{margin:0 0 .6rem; max-width:20ch; font-size:1.28rem;
  color:var(--ink)}
.svc__item p{margin:0; max-width:38ch; font-size:.975rem;
  color:var(--ink-soft)}
/* seaglass, not sage: sage on a white card measures 2.8:1 and the
   number stops reading. Same call as the criteria marks. */
.svc__num{font-family:var(--f-display); font-size:1.4rem; font-weight:400;
  color:var(--seaglass); display:block; margin-bottom:1.35rem; line-height:1}
@media (prefers-reduced-motion:reduce){
  .svc__item, .svc__item:hover{transition:none; transform:none}
}
@media (max-width:900px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .svc{grid-template-columns:1fr} }

/* --- guide (The Bay) --------------------------------------- */
.guide__head{max-width:34rem; margin-bottom:clamp(2rem,4vh,3.25rem)}
.guide__head h2{max-width:15ch}
.guide__head p{margin:1.5rem 0 0}
/* ============================================================
   KNOWING THE BAY — scattered index
   Big display headings run down the right, set at uneven indents
   so the column reads as scattered rather than listed. Hovering
   (or focusing, or tapping) one pops its image, a short intro and
   a button into the panel on the left. One panel, cross-faded.
   ============================================================ */
/* the panel sits against the index rather than across the page from it */
.bay{display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(1.5rem,2.5vw,2.75rem); align-items:center}

/* the panel */
/* landscape, so the crop carries the coastline rather than a slice of it.
   The cards inside are absolutely positioned, so the box has no intrinsic
   width — stating it is what stops an alignment rule shrink-to-fitting it
   to zero. */
.bay__panel{position:relative; aspect-ratio:3/2; max-height:76svh;
  width:100%; justify-self:stretch;
  overflow:hidden; background:var(--shell)}
.bay__card{position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .75s var(--ease), visibility .75s var(--ease)}
.bay__card.on{opacity:1; visibility:visible}
.bay__card img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform 3s var(--ease)}
.bay__card.on img{transform:none}
.bay__card::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(34,53,70,0) 22%, rgba(34,53,70,.55) 52%,
  rgba(34,53,70,.94) 100%)}
.bay__body{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1.5rem,3vw,2.5rem); color:var(--paper)}
.bay__body p{margin:0 0 1.6rem; max-width:34ch; font-size:.975rem;
  color:rgba(251,247,239,.86)}

/* the scattered headings */
/* centred in its column, with the scatter read as jitter either side of
   that centre rather than a left-hand stagger */
.bay__index{display:grid; gap:clamp(.6rem,1.8vh,1.5rem);
  list-style:none; margin:0; padding:0; justify-items:center}
/* Each entry drifts on its own clock, so the column never lines up
   twice the same way. Long durations and small distances — it should
   read as floating, never as animation. */
@keyframes drift{
  0%   {transform:translate3d(0,0,0)}
  50%  {transform:translate3d(var(--dx), var(--dy), 0)}
  100% {transform:translate3d(0,0,0)}
}
.bay__index li{animation:drift var(--dur,15s) ease-in-out infinite;
  animation-delay:var(--delay,0s); will-change:transform}
.bay__index li:nth-child(1){--dx:1.4rem;  --dy:-.9rem; --dur:17s; --delay:0s}
.bay__index li:nth-child(2){--dx:-1.7rem; --dy:1.1rem; --dur:21s; --delay:-4s}
.bay__index li:nth-child(3){--dx:2rem;    --dy:.8rem;  --dur:19s; --delay:-9s}
.bay__index li:nth-child(4){--dx:-1.2rem; --dy:-1.3rem;--dur:23s; --delay:-2s}
.bay__index li:nth-child(5){--dx:1.1rem;  --dy:1.4rem; --dur:18s; --delay:-13s}
.bay__link{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--f-display); font-weight:400; line-height:1.14;
  font-size:clamp(2.4rem,5.2vw,4.5rem); letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--ink); opacity:.34; padding-bottom:.06em;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.bay__link:hover,.bay__link:focus-visible,.bay__link.on{opacity:1}
/* the live entry runs the logo's sage. At full opacity on white it is
   2.3:1, which is fine for display type at 40px-plus but would not be at
   body size — the others sit at .34 so the contrast between them, not the
   absolute value, is what marks the selection. */
.bay__link.on{color:var(--sage)}
.bay__link.on{transform:translateX(.6rem)}
.bay__link em{font-style:italic}

/* mobile: no hover, so every entry carries its own image inline */
.bay__inline{display:none}

@media (prefers-reduced-motion:reduce){
  .bay__index li{animation:none}
}
@media (max-width:960px){
  .bay{grid-template-columns:1fr; gap:clamp(2rem,5vh,3rem)}
  .bay__panel{display:none}
  .bay__index li{animation:none}
  .bay__index{gap:clamp(2rem,5vh,3rem)}
  .bay__index li{margin-left:0 !important}
  .bay__index{justify-items:start}
  .bay__link{opacity:1; font-size:clamp(1.9rem,8vw,2.6rem); white-space:normal}
  .bay__link.on{transform:none}
  .bay__inline{display:block; margin-top:1rem}
  .bay__inline img{aspect-ratio:3/2; object-fit:cover; width:100%}
  .bay__inline p{margin:1rem 0 1.25rem; font-size:.975rem; color:var(--ink-soft)}
}

/* --- owners ----------------------------------------------- */
.owners{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem);
  align-items:center}
.stats{display:flex; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; margin:2.25rem 0}
.stat b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.1rem,3.4vw,3rem); line-height:1}
.stat span{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:.55rem}
.owners__media{aspect-ratio:4/5; overflow:hidden}
.owners__media img{width:100%; height:100%; object-fit:cover}

/* --- quote ------------------------------------------------ */
/* the pull quote sits on white now — the owner read-through above it is
   sage, and two sage blocks running together read as one */
.quote{background:var(--shell); text-align:center}
.quote blockquote{margin:0 auto; max-width:24ch; font-family:var(--f-display);
  font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.18; letter-spacing:-.015em}
.quote figcaption{margin-top:2rem}

/* --- cta -------------------------------------------------- */
.cta{position:relative; color:var(--cream); text-align:center; overflow:hidden;
  background:var(--harbour-deep)}
.cta__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta::after{content:""; position:absolute; inset:0; background:rgba(14,38,52,.78)}
.cta__inner{position:relative; z-index:2; padding-block:clamp(4rem,12vh,8.5rem);
  display:flex; flex-direction:column; align-items:center}
.cta h2{max-width:22ch}
.cta p{max-width:46ch; margin:1.5rem auto 2.5rem; color:rgba(255,255,255,.9)}

/* --- footer ----------------------------------------------- */
.foot{background:var(--harbour-deep); color:var(--white);
  font-size:.925rem; padding-block:clamp(3rem,7vh,5rem) 2rem}
/* full white, so the links do not dim on the way out of the page */
.foot a{text-decoration:none; opacity:1; color:var(--white)}
.foot a:hover{color:var(--sage-soft)}
.foot__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(1.5rem,4vw,3rem)}
.foot__mark{font-family:var(--f-display); font-size:1.6rem; color:var(--cream)}
.foot h4{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400; color:var(--sage);
  margin:0 0 1.25rem; padding-bottom:.9rem;
  border-bottom:1px solid rgba(251,247,239,.16)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.foot__base{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(2.5rem,6vh,4rem); padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.14); font-size:.8125rem; opacity:1}

/* --- stacked editorial titles (borrowed structure, not voice) ---- */
.stack{display:grid; gap:clamp(1.1rem,2vw,1.6rem); align-items:start}
.stack h2{line-height:.98}
.stack__note{max-width:46ch}

/* --- proof strip (pastel green surface) ------------------------- */
.proof{background:var(--sage); color:var(--forest)}
.proof__grid{display:grid; grid-template-columns:repeat(4,1fr);
  border-left:1px solid rgba(38,48,42,.22)}
.proof__cell{padding:clamp(1.75rem,3vw,2.5rem) clamp(1.1rem,2vw,2rem);
  border-right:1px solid rgba(38,48,42,.22)}
.proof__cell b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.35rem); line-height:1.05}
.proof__cell span{display:block; margin-top:.7rem; font-family:var(--f-label);
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(38,48,42,.72)}

/* --- concierge timeline (the focal section) ---------------------- */
.tl__intro{max-width:52rem; margin:0 auto clamp(3rem,6vh,4.5rem); text-align:center}
.tl__intro .stack{justify-items:center}
.tl__intro .lede{color:rgba(255,255,255,.84); margin:0}

.tl{position:relative; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(1rem,1.8vw,1.75rem)}
/* the spine */
.tl__track{position:absolute; left:0; right:0; top:var(--node-y, 13.5rem);
  height:1px; background:rgba(255,255,255,.22)}
.tl__fill{position:absolute; inset:0; background:var(--sage);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .1s linear}

.tl__step{position:relative; display:grid; grid-auto-rows:max-content;
  align-content:start}
.tl__time{font-family:var(--f-label); font-size:.625rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sage); min-height:2.4em}
.tl__media{aspect-ratio:4/5; overflow:hidden; margin:.35rem 0 0;
  background:rgba(255,255,255,.06)}
.tl__media img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease)}
.tl__step:hover .tl__media img{transform:scale(1.05)}
/* node sits on the spine, between the label and the image */
.tl__node{position:relative; height:2.6rem; display:grid; place-items:center}
.tl__node i{width:.5rem; height:.5rem; border-radius:50%;
  background:var(--forest); box-shadow:0 0 0 1px rgba(255,255,255,.4);
  transition:background .5s var(--ease), box-shadow .5s var(--ease),
             transform .5s var(--ease)}
.tl__step.on .tl__node i{background:var(--sage);
  box-shadow:0 0 0 1px var(--sage), 0 0 0 6px rgba(170,174,152,.18);
  transform:scale(1.15)}
.tl__step h3{font-size:1.2rem; margin:1.25rem 0 .5rem; min-height:2.4em}
.tl__step p{margin:0; font-size:.9375rem; line-height:1.65;
  color:rgba(255,255,255,.74)}
.tl__price{display:block; margin-top:.9rem; font-family:var(--f-label);
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.tl__foot{display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap; margin-top:clamp(2.5rem,5vh,3.5rem);
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.18)}
.tl__sms{margin:0; color:rgba(255,255,255,.78)}
.tl__sms a{border-bottom:1px solid rgba(255,255,255,.4); text-decoration:none}

/* --- follow strip ----------------------------------------------- */
.follow{background:var(--paper)}
.follow__head{display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap; margin-bottom:clamp(1.75rem,3vh,2.5rem)}
.follow__grid{display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(.6rem,1.2vw,1rem)}
.follow__grid a{display:block; aspect-ratio:1; overflow:hidden; background:var(--cream)}
.follow__grid img{width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), opacity .5s var(--ease)}
.follow__grid a:hover img{transform:scale(1.06); opacity:.9}

/* --- in-depth CTA ------------------------------------------------ */
.cta__cols{position:relative; z-index:2; display:grid;
  grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); text-align:left;
  align-items:start}
/* This form was built for the dark CTA it used to sit in: white labels,
   a translucent panel and cream input text. On the off-white it now sits
   on, every one of those was invisible. Rewritten for a light ground. */
.form{display:grid; gap:1rem;
  padding:clamp(1.5rem,2.6vw,2.25rem)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form label{display:grid; gap:.5rem}
.form .label{color:var(--ink-soft)}
.form input, .form textarea, .form select{
  background:var(--white); border:1px solid var(--line);
  color:var(--ink); font-family:var(--f-body); font-size:.975rem;
  padding:.85rem 1rem; border-radius:0; width:100%;
  transition:border-color .4s var(--ease)}
.form input::placeholder, .form textarea::placeholder{color:var(--ink-soft);
  opacity:.7}
.form input:focus, .form textarea:focus, .form select:focus{outline:none;
  border-color:var(--sage)}
.form textarea{resize:vertical; min-height:6.5rem}
.contact-list{display:grid; gap:1.35rem; margin:2rem 0 0; padding:0; list-style:none}
.contact-list li{display:grid; gap:.35rem}
.contact-list a{text-decoration:none; border-bottom:1px solid var(--sage);
  justify-self:start; padding-bottom:.15em; color:var(--ink)}
.contact-list a:hover{color:var(--seaglass)}
.contact-list .label{color:var(--ink-soft)}

/* --- footer depth ------------------------------------------------ */
.foot__logo{width:5.5rem; height:auto; margin-bottom:1.4rem; opacity:.9}
.foot__grid{align-items:start}
.foot__social{display:flex; gap:1.25rem; margin-top:1.5rem}
.foot__social a{font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.2em; text-transform:uppercase}
.foot__areas{display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin:0; padding:0;
  list-style:none}
.foot__areas li{font-size:.875rem}
.foot__base{align-items:center}
.foot__legal{display:flex; gap:1.25rem; flex-wrap:wrap}
.tbc{opacity:.55; font-style:italic}

/* --- reveal ----------------------------------------------- */
.rv{opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rv.in{opacity:1; transform:none}

/* --- responsive ------------------------------------------- */
@media (max-width:960px){
  .intro,.band__grid,.owners,.foot__grid,.cta__cols{grid-template-columns:1fr}
  .guide{grid-template-columns:1fr 1fr}
  /* timeline goes vertical, spine down the left */
  .tl{grid-template-columns:1fr; gap:0; padding-left:3.25rem}
  .tl__track{left:.6rem; right:auto; top:1rem; bottom:1rem; width:1px; height:auto}
  .tl__fill{transform:scaleY(0); transform-origin:top center}
  .tl__step{grid-template-columns:1fr; padding-bottom:clamp(2.5rem,5vh,3.5rem)}
  .tl__step:last-child{padding-bottom:0}
  .tl__node{position:absolute; left:-3.25rem; top:.1rem; height:auto; width:1.2rem}
  .tl__time{min-height:0; margin-bottom:.9rem}
  .tl__step h3{min-height:0}
  .tl__media{aspect-ratio:16/10}
  .proof__grid{grid-template-columns:1fr 1fr}
  .proof__cell:nth-child(-n+2){border-bottom:1px solid rgba(38,48,42,.22)}
    .follow__grid{grid-template-columns:repeat(3,1fr)}
  .follow__grid a:nth-child(n+4){display:none}
  .util{gap:1.5rem; font-size:.5625rem}
  .svc{grid-template-columns:1fr; border-top:0}
  .svc__item{border-right:0; border-top:1px solid rgba(255,255,255,.18);
    padding-right:0}
  .search{grid-template-columns:1fr 1fr; max-width:none}
  .search__field:nth-child(3){border-right:1px solid var(--line)}
  .search .btn{grid-column:1 / -1}
  .nav__links{display:none}
  .nav__toggle{display:block}
  .foot__grid{gap:2.5rem}
}
@media (max-width:760px){
  .nav{padding-block:1.1rem}
  .nav__mark{font-size:1.05rem}
  .nav .btn--light{display:none}
  .walk__inner{padding-top:6rem}
  .walk__sub{margin-top:1.25rem}
  .walk__search{margin-top:2rem}
  .walk__ticks{display:none}
  .walk__caption{bottom:auto; top:6.5rem}
  .search__field{padding:.95rem 1.25rem}
}
@media (max-width:520px){
  .search{grid-template-columns:1fr}
  .search__field{border-right:0 !important; border-bottom:1px solid var(--line)}
  .guide{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .util span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .walk__frame{transform:none !important}
  .walk__cue{display:none}
}


/* ============================================================
   INTERIOR PAGE HERO
   Shorter than the homepage walkthrough. One image, held type,
   the same slow push-in so the pages feel like one site.
   ============================================================ */
.phero{position:relative; min-height:clamp(38rem,86svh,52rem); display:flex;
  align-items:flex-end; overflow:hidden; background:var(--harbour-deep);
  padding-top:clamp(9rem,16vh,12rem)}
.phero__img{position:absolute; inset:0}
.phero__img img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 2.4s var(--ease)}
.phero.in .phero__img img{transform:none}
.phero__scrim{position:absolute; inset:0; background:
  linear-gradient(to bottom, rgba(14,38,52,.62) 0%, rgba(14,38,52,.14) 30%,
  rgba(14,38,52,.60) 58%, rgba(14,38,52,.88) 100%)}
/* Left-aligned and bottom-anchored. Only the homepage title card is
   centred; every interior hero reads from the left so the eye starts in
   the same place it does on the rest of the page. */
/* --- headers arrive ------------------------------------------
   Every page opens the same way: the header lifts in a line at a time
   under the transition veil, so the first thing on screen settles rather
   than appears. Delays are short and the whole run is done inside a
   second — it should be felt, not waited for. */
@keyframes head-in{
  from{opacity:0; transform:translate3d(0,14px,0)}
  to  {opacity:1; transform:none}
}
.phero__inner > *, .title-card__inner > *{
  animation:head-in .95s var(--fill-ease) both;
  animation-delay:calc(.08s + var(--hi, 0) * .09s)}
.phero__inner > :nth-child(2),.title-card__inner > :nth-child(2){--hi:1}
.phero__inner > :nth-child(3),.title-card__inner > :nth-child(3){--hi:2}
.phero__inner > :nth-child(4),.title-card__inner > :nth-child(4){--hi:3}
.phero__inner > :nth-child(5),.title-card__inner > :nth-child(5){--hi:4}
.phero__inner > :nth-child(6),.title-card__inner > :nth-child(6){--hi:5}
@media (prefers-reduced-motion:reduce){
  .phero__inner > *, .title-card__inner > *{animation:none}
}

.phero__inner{position:relative; width:100%; text-align:left;
  padding:0 var(--pad) clamp(4.5rem,11vh,8rem); color:var(--white)}
.phero__inner .orn{margin:0 0 1.5rem; filter:brightness(0) invert(1);
  opacity:.9}
.phero__inner .label{color:rgba(255,255,255,.82); padding-left:0}
.phero__inner h1{margin:.9rem 0 0; max-width:18ch}
.phero__inner h1 em{font-family:var(--f-italic); font-weight:500}
.phero__inner .lede{margin:1.5rem 0 0; max-width:50ch;
  color:rgba(255,255,255,.88)}
.phero__actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem;
  justify-content:flex-start}

/* --- a numbered standard / process list -------------------- */
.steps{display:grid; gap:0; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line)}
.steps li{display:grid; grid-template-columns:5rem 1fr; gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.75rem,3.5vh,2.75rem) 0; border-bottom:1px solid var(--line)}
.steps b{font-family:var(--f-display); font-size:1.75rem; font-weight:400;
  color:var(--sage); line-height:1}
.steps h3{margin:0 0 .6rem}
.steps p{margin:0; max-width:62ch}

/* --- the no/yes split -------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,7rem)}
.split > div{padding-top:clamp(1.75rem,3vh,2.5rem); border-top:1px solid var(--line)}
.split h3{margin:0 0 clamp(1.5rem,3vh,2.25rem)}
.split ul{margin:0; padding:0; list-style:none; display:grid}
.split li{padding:1.15rem 0; border-bottom:1px solid var(--line);
  max-width:44ch}
.split li:first-child{padding-top:0}

/* --- shop grid --------------------------------------------- */
.shop{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,3vw,2.5rem)}
.shop figure{margin:0}
.shop img{aspect-ratio:4/5; object-fit:cover; width:100%}
.shop figcaption{margin-top:1rem}
.shop b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:1.25rem}

@media (max-width:960px){
  .split,.shop{grid-template-columns:1fr}
  .steps li{grid-template-columns:3rem 1fr}
}

/* --- property index grid (Stay) ---------------------------- */
.plist{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.75rem)}
.plist .card{width:auto; flex:none}
/* Index cards sit shorter than the rail cards so the photo AND the
   house details land inside one screen. 4/3, capped against the
   viewport so a tall window never stretches them back out. */
.plist .card__media{aspect-ratio:4/3; max-height:46vh}

/* --- availability chart mount ------------------------------ */
.avail{background:var(--shell); border:1px solid rgba(34,53,70,.16);
  padding:clamp(2rem,4vw,3rem); min-height:16rem;
  display:grid; place-items:center; text-align:center}
.avail p{max-width:46ch; margin:.75rem auto 0}

/* --- filter bar -------------------------------------------- */
.filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vh,3rem)}
.filters button{
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; padding:.85em 1.5em; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.filters button:hover{border-color:var(--ocean-bright); color:var(--ocean-bright)}
.filters button[aria-pressed="true"]{background:var(--sage);
  border-color:var(--sage); color:var(--btn-ink)}

@media (max-width:960px){ .plist{grid-template-columns:1fr 1fr}
  .plist .card__media{aspect-ratio:3/2; max-height:40vh} }
@media (max-width:640px){ .plist{grid-template-columns:1fr}
  .plist .card__media{aspect-ratio:16/10; max-height:38vh} }


/* ============================================================
   HERO TITLE CARD
   The reference opens on a centred mark, not a left-aligned
   headline. Emblem, wordmark in wide-tracked caps, place line
   under it. It reads as a title card rather than a web page.
   ============================================================ */
.title-card{position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:0 var(--pad); pointer-events:none; z-index:3}
.title-card__inner{max-width:52rem}
.title-card img{width:clamp(4.5rem,7vw,6.5rem); margin:0 auto 2rem; opacity:.95}
.title-card h1{
  font-family:var(--f-label); font-weight:300;
  font-size:clamp(1.5rem,3.4vw,3rem); line-height:1.22;
  letter-spacing:.22em; text-transform:uppercase; color:var(--paper);
  text-shadow:0 1px 40px rgba(34,53,70,.45);
}
.title-card__sub{
  font-family:var(--f-italic); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.5rem); color:var(--paper);
  margin:1.4rem 0 0; opacity:.94;
}
.title-card__place{
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(251,247,239,.8);
  margin:1.75rem 0 0;
}
.title-card__rule{width:3.5rem; height:1px; background:rgba(255,255,255,.5);
  margin:1.75rem auto 0}
.title-card__act{margin-top:2.25rem; display:flex; justify-content:center;
  pointer-events:auto}
.title-card__act .datecue{color:var(--white)}


/* --- surfaces ---------------------------------------------- */
/* Four in rotation: white, shell, sage, harbour — closing on ink. */
.on-shell{background:var(--shell)}
.on-shell .split > div{border-top-color:rgba(34,53,70,.18)}
.on-shell .split li{border-bottom-color:rgba(34,53,70,.14)}

/* Four page surfaces in rotation: white, ivory, sage, navy. White
   is where photography does the work — grids and the bay panel —
   because the ivory warms every image sitting on it. */
.on-white{background:var(--white)}
.on-white .avail{background:var(--white)}

/* --- sage surfaces ----------------------------------------- */
/* The client's brand green carried as a page surface, not only as
   the proof strip. Two volumes: pale for a section that should feel
   set apart, wash for quiet alternation against the ivory base. */
.on-sage{background:var(--sage-pale)}
.on-sage-wash{background:var(--sage-pale)}  /* alias: one sage surface */
.on-sage .split > div,
.on-sage-wash .split > div{border-top-color:rgba(34,53,70,.2)}
.on-sage .split li,
.on-sage-wash .split li{border-bottom-color:rgba(34,53,70,.16)}
.avail{background:var(--shell); border-color:rgba(34,53,70,.16)}
.avail .label{color:var(--ocean-bright)}


/* ============================================================
   CONCIERGE OPTIONS — package rail
   Left column holds the heading, the intro and a view-all. Right
   is a horizontal rail of tall cards, title and copy set into the
   top of the image, action pinned bottom-right, with a progress
   bar tracking how far along the rail you are.
   ============================================================ */
.pkg{display:grid; grid-template-columns:minmax(16rem,.72fr) 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:start}
/* grid items default to min-width:auto, which lets the rail's cards
   stretch the column instead of overflowing it — so it never scrolls */
.pkg > *{min-width:0}
.pkg__intro h2{max-width:22ch}
.pkg__intro p{margin:2rem 0 2.5rem; max-width:38ch}
.pkg__all{
  display:inline-flex; align-items:center; gap:.9em; text-decoration:none;
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sage);
}
.pkg__all svg{transition:transform .5s var(--ease)}
.pkg__all:hover svg{transform:translateX(.4rem)}

.pkg__rail{display:flex; gap:clamp(1rem,1.8vw,1.5rem); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:1.75rem;
  /* run the rail off the right page edge so it reads as continuing */
  margin-right:calc(var(--pad) * -1); padding-right:var(--pad)}
.pkg__rail::-webkit-scrollbar{display:none}
.pkg__card{position:relative; flex:0 0 clamp(17rem,25vw,22rem);
  aspect-ratio:3/4.35; scroll-snap-align:start; overflow:hidden;
  text-decoration:none; color:var(--paper); display:block}
.pkg__card img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease)}
.pkg__card:hover img{transform:scale(1.05)}
.pkg__card::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(34,53,70,.80) 0%, rgba(34,53,70,.52) 26%,
  rgba(34,53,70,.16) 54%, rgba(34,53,70,.12) 68%, rgba(34,53,70,.68) 100%);
  transition:opacity .55s var(--ease)}
/* a second, flatter wash that sits on at rest and lifts on hover, so the
   card starts readable and the photograph opens up as you touch it */
.pkg__card::before{content:""; position:absolute; inset:0; z-index:1;
  background:rgba(34,53,70,.46); opacity:1;
  transition:opacity .55s var(--ease)}
.pkg__card:hover::before,.pkg__card:focus-visible::before{opacity:0}
.pkg__top{position:absolute; inset:auto auto 0 0; top:0; z-index:3;
  padding:clamp(1.5rem,2.2vw,2rem)}
.pkg__top h3{margin:0 0 1rem; max-width:11ch; color:var(--paper)}
.pkg__top p{margin:0; font-size:.9375rem; line-height:1.6; max-width:24ch;
  color:rgba(255,255,255,.92)}
.pkg__price{position:absolute; left:clamp(1.5rem,2.2vw,2rem);
  bottom:clamp(1.5rem,2.2vw,2rem); z-index:3;
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(251,247,239,.78); max-width:14ch}
.pkg__go{position:absolute; right:0; bottom:0; z-index:3;
  padding:1.05em 1.8em; background:var(--sage); color:var(--btn-ink);
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .45s var(--ease)}
.pkg__card:hover .pkg__go{background:var(--white)}

/* rail navigation, sitting under the intro in the left column */
.pkg__nav{display:flex; gap:.6rem; margin-top:clamp(2rem,4vh,3rem)}
.pkg__btn{width:3.25rem; height:3.25rem; cursor:pointer; line-height:0;
  background:none; color:var(--paper); border:1px solid rgba(255,255,255,.34);
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), opacity .4s var(--ease)}
.pkg__btn:hover:not(:disabled){background:var(--sage); color:var(--btn-ink);
  border-color:var(--sage)}
.pkg__btn:disabled{opacity:.28; cursor:default}

/* the rail counter, same language as the collection reel */
.pkg__count{margin-top:1.5rem; justify-content:start}
.pkg__bar{position:relative; height:2px; background:rgba(255,255,255,.22);
  margin-top:.5rem}
.pkg__bar span{position:absolute; inset:0 auto 0 0; width:30%;
  background:var(--ocean-lit); transition:width .25s linear, left .25s linear}

@media (max-width:960px){
  .pkg{grid-template-columns:1fr; gap:clamp(2rem,5vh,3rem)}
  .pkg__card{flex:0 0 78vw}
}


/* ============================================================
   DATE PANEL
   The heroes carry a plus action rather than a search module; it
   opens the date selector over the page.
   ============================================================ */
.dates{position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:var(--pad); opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease)}
.dates.open{opacity:1; visibility:visible}
.dates__scrim{position:absolute; inset:0; background:rgba(34,53,70,.72)}
.dates__box{position:relative; z-index:2; width:min(46rem,100%);
  background:var(--white); padding:clamp(1.75rem,4vw,3rem);
  transform:translateY(14px); transition:transform .55s var(--ease)}
.dates.open .dates__box{transform:none}
.dates__box h2{font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .4rem}
.dates__box .label{margin:0 0 1.5rem}
.dates__close{position:absolute; top:.85rem; right:.85rem; width:2.6rem;
  height:2.6rem; display:grid; place-items:center; cursor:pointer;
  background:none; border:0; color:var(--ink-soft); font-size:1.1rem;
  line-height:1; transition:color .35s var(--ease)}
.dates__close:hover{color:var(--ocean-bright)}
.dates__fields{display:grid; grid-template-columns:1fr 1fr 1fr;
  border:1px solid var(--line); margin:1.75rem 0}
.dates__field{padding:1.1rem 1.4rem; border-right:1px solid var(--line);
  display:grid; gap:.5rem}
.dates__field:last-child{border-right:0}
.dates__field input{border:0; background:none; font:inherit; color:inherit;
  padding:0; width:100%}
.dates__field input::placeholder{color:var(--ink-soft); opacity:1}
.dates__note{margin:1.25rem 0 0; font-size:.875rem; color:var(--ink-soft)}

@media (max-width:640px){
  .dates__fields{grid-template-columns:1fr}
  .dates__field{border-right:0; border-bottom:1px solid var(--line)}
  .dates__field:last-child{border-bottom:0}
}


/* ============================================================
   OWNER READ-THROUGH
   The owner is not sold in a separate lane. They are sold by
   watching the guest get sold, so these slim bands sit directly
   under the strongest guest sections and reframe what has just
   been read. Quiet by design — they interrupt nothing.
   ============================================================ */
.readthru{background:var(--sage-pale)}
.readthru__inner{display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(1.75rem,4vh,2.75rem)}
.readthru .label{margin:0; white-space:nowrap; letter-spacing:.2em}
.readthru p{margin:0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.6rem); line-height:1.35; max-width:52ch}
.readthru em{font-style:italic}
.readthru a{white-space:nowrap}

@media (max-width:820px){
  .readthru__inner{grid-template-columns:1fr; gap:1.25rem}
}


/* ============================================================
   HERO FURNITURE
   The title card sits centred in the frame, with a thin vertical
   rule running off the bottom edge instead of the word "scroll".
   It used to hold the bottom third the way the reference build
   does; centred reads better with this mark and this measure.
   ============================================================ */
.title-card{align-items:center; padding-bottom:0}
.scrollrule{position:absolute; left:50%; bottom:0; z-index:4;
  width:1px; height:clamp(2.5rem,6vh,4.5rem);
  background:linear-gradient(to bottom, rgba(255,255,255,0),
    rgba(255,255,255,.75)); transform:translateX(-50%)}

/* ============================================================
   ORNAMENT
   Their wave mark, used the way the reference uses its floral:
   one small centred divider that recurs and ties the page together.
   ============================================================ */
.orn{display:block; width:2.9rem; height:auto; margin:0 auto 1.75rem;
  opacity:.9}
.orn--line{display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1.75rem; margin-bottom:clamp(2rem,4vh,3rem)}
.orn--line::before,.orn--line::after{content:""; height:1px; background:var(--line)}

/* ============================================================
   COLLAGE
   A centred heading with photography scattered around it at
   different sizes and vertical offsets. Not a grid — the point
   is that it reads composed rather than laid out.
   ============================================================ */
.collage{position:relative; display:grid;
  grid-template-columns:repeat(12,1fr); align-items:center;
  gap:clamp(1rem,2vw,2rem); padding-block:clamp(3rem,9vh,7rem)}
.collage__body{grid-column:4 / 10; text-align:center; z-index:2}
.collage__body h2{margin:0 auto; max-width:16ch}
.collage__body p{margin:1.75rem auto 0; max-width:46ch}
.collage__body .btn{margin-top:2.25rem}
.collage figure{margin:0; position:relative; z-index:1}
.collage figure img{width:100%; height:100%; object-fit:cover}
.collage figure:nth-of-type(1){grid-column:1 / 4; grid-row:1;
  aspect-ratio:3/4; align-self:start; transform:translateY(-8%)}
.collage figure:nth-of-type(2){grid-column:2 / 4; grid-row:1;
  aspect-ratio:4/3; align-self:end; transform:translateY(46%)}
.collage figure:nth-of-type(3){grid-column:10 / 13; grid-row:1;
  aspect-ratio:4/5; align-self:end; transform:translateY(16%)}
.collage figure:nth-of-type(4){grid-column:10 / 12; grid-row:1;
  aspect-ratio:1/1; align-self:start; transform:translateY(-56%)}
/* the reveal keeps each pane's resting offset */
.collage figure{opacity:0}
.collage.in figure{opacity:1}
/* each pane fades up on its own clock, resting offsets preserved */
.collage figure{transition:opacity 1.2s var(--ease)}
.collage.in figure:nth-of-type(2){transition-delay:.14s}
.collage.in figure:nth-of-type(3){transition-delay:.28s}
.collage.in figure:nth-of-type(4){transition-delay:.42s}

/* ============================================================
   REEL — the big-type collection carousel
   One full-bleed frame per residence. The name runs at full page
   width with the neighbouring names bleeding in off both edges,
   a counter above it and an inset detail card below.
   ============================================================ */
.reel{position:relative; height:clamp(36rem,88svh,54rem);
  overflow:hidden; background:var(--harbour-deep); color:var(--white);
  /* each name occupies less than the frame, so the neighbouring names
     bleed in off both edges the way the reference build does */
  --slot:62%}
@media (max-width:820px){ .reel{--slot:86%} }
.reel__frame{position:absolute; inset:0; opacity:0;
  transition:opacity 1.1s var(--ease)}
.reel__frame.on{opacity:1}
.reel__frame > img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); transition:transform 6s var(--ease)}
.reel__frame.on > img{transform:none}
.reel__frame::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(34,53,70,.52) 0%, rgba(34,53,70,.18) 34%,
  rgba(34,53,70,.30) 62%, rgba(34,53,70,.80) 100%)}

.reel__stage{position:absolute; inset:0; z-index:3; display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center; justify-items:center; gap:clamp(1.25rem,2.5vh,2rem);
  padding:6rem var(--pad) 0; pointer-events:none}
.reel__count{display:grid; grid-template-columns:auto 4.5rem auto;
  align-items:center; gap:1rem; font-family:var(--f-label);
  font-size:.75rem; letter-spacing:.2em; color:rgba(255,255,255,.72)}
.reel__count i{height:1px; background:rgba(255,255,255,.4); font-style:normal}
.reel__count b{font-weight:400; color:var(--white)}
.reel__cap{margin:0; font-size:.9375rem; color:rgba(255,255,255,.86);
  text-align:center}

/* the names track sideways, neighbours bleeding in off each edge */
.reel__names{position:relative; width:100%; min-width:0; pointer-events:none}
/* the track keeps the parent's width so it cannot blow out the grid — it
   simply overflows it, and the section edge does the clipping */
.reel__track{display:flex; width:100%; align-items:center;
  will-change:transform; transition:transform 1s var(--ease)}
.reel__name{flex:0 0 var(--slot); text-align:center; white-space:nowrap;
  font-family:var(--f-display); font-weight:400; line-height:1.1;
  font-size:clamp(2.6rem,8vw,7rem); letter-spacing:.005em;
  opacity:.34; transition:opacity 1s var(--ease)}
.reel__name.on{opacity:1}

.reel__meta{display:flex; gap:clamp(1.25rem,3vw,2.5rem); flex-wrap:wrap;
  justify-content:center; font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.78)}
/* centred under the meta row — at the page edges they got lost against
   the photography */
.reel__act{display:flex; gap:.9rem; align-items:center; justify-content:center;
  margin-top:clamp(.75rem,2vh,1.5rem); pointer-events:auto}
.reel__btn{width:3.25rem; height:3.25rem; cursor:pointer; line-height:0;
  background:rgba(34,53,70,.28); backdrop-filter:blur(2px);
  color:var(--white); border:1px solid rgba(255,255,255,.55);
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease)}
.reel__btn:hover{background:var(--sage); color:var(--btn-ink);
  border-color:var(--sage)}

/* the inset detail card, sitting over the bottom edge */
.reel__inset{position:absolute; right:var(--pad); bottom:0; z-index:4;
  width:clamp(8.5rem,13vw,12rem); aspect-ratio:3/4; overflow:hidden;
  transform:translateY(28%)}
.reel__inset img{width:100%; height:100%; object-fit:cover; opacity:0;
  position:absolute; inset:0; transition:opacity 1.1s var(--ease)}
.reel__inset img.on{opacity:1}

/* the collage's phone layout lives in the PHONE block at the end; this
   older one stacked two images full width and hid the other two, and its
   margin:0 !important was cancelling the stagger */
@media (max-width:820px){
  .reel__inset{display:none}
  .reel__stage{padding-top:5rem}
}
@media (prefers-reduced-motion:reduce){
  .collage figure{opacity:1; transform:none}
  .reel__frame > img{transform:none !important}
}


/* reel: only the live caption, meta row and link are shown.
   Every variant of each is stacked into one shared grid cell, so the row
   is always as tall as its tallest variant and nothing below it moves
   when the house changes. Collapsing the hidden ones to height:0 used to
   do the opposite — the row took the live one's height, so a caption
   that wrapped to two lines pushed the name, the numbers and the arrows
   down, and each hidden item still cost a full grid gap. */
.reel__stage > .label{grid-row:1}
.reel__count{grid-row:2}
.reel__cap{grid-row:3; grid-column:1}
.reel__names{grid-row:4}
.reel__meta-row{grid-row:5; grid-column:1}
.reel__go{grid-row:6; grid-column:1}
.reel__act{grid-row:7}
.reel__cap,.reel__meta-row{opacity:0; visibility:hidden; margin:0;
  transition:opacity .8s var(--ease), visibility .8s var(--ease)}
.reel__cap.on,.reel__meta-row.on{opacity:1; visibility:visible}
.reel__meta-row i{opacity:.5; font-style:normal; margin:0 .2em}
.reel__count i{display:block}


/* ============================================================
   FEATURE — image with an overlapping offset panel
   The reference's "Southern Style" block: photography holding the
   left, a panel in the page colour breaking over its right edge,
   dropped down from the top, opened by a hairline rule.
   ============================================================ */
.feature{position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:start}
.feature__media{grid-column:1 / 2; grid-row:1;
  aspect-ratio:1/1; overflow:hidden;
  /* runs off the left page edge */
  margin-left:calc(var(--pad) * -1)}
/* the square crop is pulled right so the subject lands in the part of the
   frame the panel does not cover */
.feature__media img{width:100%; height:100%; object-fit:cover;
  object-position:72% 42%}
.feature__panel{grid-column:2 / 3; grid-row:1; z-index:2;
  background:var(--white); border-top:1px solid var(--harbour);
  padding:clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem)
          clamp(2.25rem,5vw,4rem);
  /* break back over the image, and drop clear of its top edge */
  margin-left:clamp(-8rem,-9vw,-3rem);
  margin-top:clamp(3rem,9vh,8rem)}
/* on a shell section the panel stays white, so it lifts off the ground */
.on-shell .feature__panel{background:var(--white)}
.on-sage .feature__panel{background:var(--sage-pale)}
.feature__panel h2{margin:0; max-width:11ch}
.feature__panel .label{margin:0 0 1.25rem}
.feature__panel p{margin:1.75rem 0 0; max-width:42ch}
.feature__panel .arrowlink{margin-top:clamp(1.75rem,4vh,2.75rem)}
.feature__stats{display:flex; gap:clamp(1.5rem,3vw,2.75rem);
  flex-wrap:wrap; margin:2.25rem 0 0}

/* the reference's text action: caps, then an arrow that travels */
.arrowlink{display:inline-flex; align-items:center; gap:.9em;
  text-decoration:none; font-family:var(--f-label); font-size:.6875rem;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink)}
.arrowlink svg{transition:transform .5s var(--ease)}
.arrowlink:hover{color:var(--seaglass)}
.arrowlink:hover svg{transform:translateX(.45rem)}

@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature__media{grid-column:1; grid-row:1; margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1); aspect-ratio:4/3}
  .feature__panel{grid-column:1; grid-row:2; margin:0}
}


/* ============================================================
   CROSS-LINKS — the reference's "Discover More" trio
   Three cards at the foot of an interior page pointing onward,
   so no page is a dead end.
   ============================================================ */
/* three links on most pages. The four-up row on Experience opts in with
   .cross--4 rather than auto-fit, which left the three-card rows short
   of the container. */
.cross{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem)}
/* Same shadow as the guide cards: nothing over the top two-fifths of
   the photograph, the type lifted off the bottom edge. Square, and no
   height cap — capping a square card caps its width too, which left the
   row short of its container at both ends of the range. That the row
   fits a screen is checked instead of enforced here. */
.cross a{display:block; text-decoration:none; position:relative;
  aspect-ratio:1; overflow:hidden; color:var(--white)}
.cross img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease)}
.cross a:hover img{transform:scale(1.05)}
.cross a::after{content:""; position:absolute; inset:auto 0 0 0; height:58%;
  background:linear-gradient(180deg, rgba(34,53,70,0), rgba(34,53,70,.78))}
.cross__body{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1rem,1.8vw,1.4rem)}
.cross__body h3{margin:0 0 .5rem; color:var(--white);
  font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.14;
  text-shadow:0 1px 18px rgba(34,53,70,.6)}
.cross__body span{font-family:var(--f-label); font-size:.5875rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.82)}


/* ============================================================
   CATALOGUE — grouped entries with a price or a note
   The reference spa and experience pages both run a long list of
   named offerings under group headings. Hairlines, no boxes.
   ============================================================ */
.cat{display:grid; gap:0; border-top:1px solid var(--line)}
.cat__row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;
  gap:clamp(1rem,3vw,3rem); align-items:baseline;
  padding:clamp(1.5rem,3.2vh,2.4rem) 0; border-bottom:1px solid var(--line)}
/* with a thumbnail the row gains a lead column and centres on it */
.cat__row--img{grid-template-columns:9rem minmax(0,1fr) minmax(0,1.3fr) auto;
  align-items:center}
.cat__thumb{width:9rem; aspect-ratio:4/3; overflow:hidden}
.cat__thumb img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease)}
.cat__row--img:hover .cat__thumb img{transform:scale(1.06)}
.cat__row h3{margin:0}
.cat__row p{margin:0; color:var(--ink-soft)}
.cat__note{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap}
.cat__group{margin-top:clamp(3rem,7vh,5rem)}
.cat__group:first-of-type{margin-top:0}

/* a tabbed group switcher, the way the reference experience page groups */
.tabs{display:flex; gap:.6rem; flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vh,3rem)}
.tabs button{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; padding:.85em 1.5em; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease)}
.tabs button:hover{border-color:var(--seaglass); color:var(--seaglass)}
.tabs button[aria-selected="true"]{background:var(--harbour);
  border-color:var(--harbour); color:var(--white)}

@media (max-width:820px){
  .cross{grid-template-columns:1fr}
  .cat__row{grid-template-columns:1fr; gap:.6rem}
  .cat__row--img{grid-template-columns:1fr; gap:.9rem}
  .cat__thumb{width:100%; aspect-ratio:16/9}
  .cat__note{white-space:normal}
}


/* ============================================================
   HEADER CTA
   No fill. Caps text over a hairline that carries a slow light
   sweep at rest, draws fully on hover, and moves an arrow with it.
   It has to read as the one important action without becoming a
   button on a page that has no other buttons in the header.
   ============================================================ */
.navcta{
  position:relative; display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--f-label); font-weight:500; font-size:.71rem;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); padding:.35em 0 .7em; background:none; border:0;
  cursor:pointer; transition:color .35s var(--ease);
}
.head:not(.is-solid) .navcta{color:var(--white)}
.navcta svg{flex:none; transition:transform .55s var(--ease)}
.navcta:hover svg{transform:translateX(.4rem)}

/* the rule: a quiet base line, plus a brighter one that draws on hover */
.navcta::before,.navcta::after{content:""; position:absolute; left:0; right:0;
  bottom:0; height:1px}
.navcta::before{background:currentColor; opacity:.32}
.navcta::after{background:currentColor; transform:scaleX(0);
  transform-origin:left; transition:transform .6s var(--ease)}
.navcta:hover::after,.navcta:focus-visible::after{transform:scaleX(1)}

/* at rest a narrow highlight travels the rule every few seconds, so the
   eye is drawn back to it without anything ever moving quickly */
.navcta__sweep{position:absolute; left:0; bottom:0; height:1px; width:34%;
  background:linear-gradient(90deg, transparent,
    currentColor 45%, currentColor 55%, transparent);
  opacity:0; animation:ctasweep 5.5s var(--ease) infinite;
  pointer-events:none}
/* The travel stops where the rule does. At 34% of the button's width it
   can only move 194% of itself before its right edge clears the end —
   past that it was drawing a second line out to the right of the CTA and
   parking there. It also fades out rather than resting lit. */
@keyframes ctasweep{
  0%   {transform:translateX(-110%); opacity:0}
  6%   {opacity:.9}
  30%  {opacity:.9}
  38%  {transform:translateX(194%); opacity:0}
  100% {transform:translateX(194%); opacity:0}
}
.navcta:hover .navcta__sweep{animation-play-state:paused; opacity:0}

@media (prefers-reduced-motion:reduce){
  .navcta__sweep{animation:none; opacity:0}
}
@media (max-width:760px){ .navcta{display:none} }


/* ============================================================
   SCATTER — a band's media side, composed like the orbit
   Three panes pinned to distinct points in the column at
   different scales, with real air between them. They do not stack
   into a clump, and each drifts on its own clock.
   ============================================================ */
.scatter{position:relative; min-height:clamp(27rem,60vh,41rem)}
.scatter figure{position:absolute; margin:0; overflow:hidden;
  opacity:0; transition:opacity 1.2s var(--ease);
  animation:orbitdrift var(--dur,20s) ease-in-out infinite;
  animation-delay:var(--delay,0s); will-change:transform}
.scatter img{width:100%; height:100%; object-fit:cover; display:block}
.rv.in .scatter figure,.scatter.in figure{opacity:1}
.rv.in .scatter figure:nth-of-type(2){transition-delay:.16s}
.rv.in .scatter figure:nth-of-type(3){transition-delay:.32s}

/* three points, deliberately far apart */
.scatter figure:nth-of-type(1){left:0;    top:0;     width:46%; aspect-ratio:4/3;
  --dx:1.1rem;  --dy:.9rem;   --dur:21s; --delay:0s}
.scatter figure:nth-of-type(2){right:0;   top:24%;   width:35%; aspect-ratio:3/4;
  --dx:-1.2rem; --dy:-1rem;   --dur:24s; --delay:-7s}
.scatter figure:nth-of-type(3){left:12%;  bottom:1%; width:27%; aspect-ratio:1/1;
  --dx:.9rem;   --dy:-1.1rem; --dur:18s; --delay:-13s}

@media (max-width:820px){
  .scatter{position:static; min-height:0; display:grid;
    grid-template-columns:1fr 1fr; gap:.6rem}
  .scatter figure{position:static; width:auto !important; inset:auto;
    animation:none; aspect-ratio:4/3 !important}
  .scatter figure:nth-of-type(1){grid-column:1 / 3}
}
@media (prefers-reduced-motion:reduce){ .scatter figure{opacity:1; animation:none} }

/* ============================================================
   ORBIT — centred statement with photography scattered around it
   Panes sit at fixed points around the frame, several deliberately
   cropped by the section edge, each drifting on its own clock.
   The type holds the middle and nothing is allowed near it.
   ============================================================ */
.orbit{position:relative; overflow:hidden; background:var(--harbour-deep);
  color:var(--white); min-height:clamp(38rem,94svh,58rem);
  display:grid; place-items:center; padding:clamp(4rem,10vh,8rem) var(--pad)}

.orbit__mid{position:relative; z-index:3; text-align:center; max-width:34rem}
.orbit__mid .label{color:var(--sage-soft); margin:0 auto 1.1rem}
.orbit__mid h2{margin:0; color:var(--white)}
.orbit__mid p:not(.label){margin:1.5rem auto 0; max-width:38ch;
  color:rgba(255,255,255,.82)}
/* ============================================================
   PLUS ACTION
   The site's check-dates control: a caps label and a circled plus
   that rotates and fills sage on hover. Used in the heroes, the
   orbit and anywhere the date selector is opened.
   ============================================================ */
/* the label carries a rule instead of a circled plus — the circle read
   as a second button beside the words */
.plusact,.orbit__act{display:inline-flex; align-items:center;
  background:none; border:0; cursor:pointer; padding:0 0 .55em;
  /* the anchor keeps the browser's own underline otherwise, which sits
     right above this rule and reads as two lines */
  text-decoration:none;
  font-family:var(--f-label); font-weight:500; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:currentColor;
  border-bottom:1px solid currentColor;
  transition:color .35s var(--ease), border-color .35s var(--ease),
             letter-spacing .35s var(--ease)}
.plusact:hover,.orbit__act:hover{letter-spacing:.26em}
.plusact i,.orbit__act i{display:none}
.orbit__act{margin-top:2.25rem}
/* the circled plus is retired; the label carries a rule instead */
/* over photography and on the dark bands it runs white */
.orbit__act,.title-card__act .plusact,.phero__actions .plusact,
.band .plusact,.cta .plusact{color:var(--white)}

.orbit figure{position:absolute; margin:0; overflow:hidden; z-index:1;
  opacity:0; transition:opacity 1.4s var(--ease);
  animation:orbitdrift var(--dur,19s) ease-in-out infinite;
  animation-delay:var(--delay,0s); will-change:transform}
.orbit img{width:100%; height:100%; object-fit:cover; display:block}
.rv.in.orbit figure,.orbit.in figure{opacity:1}

@keyframes orbitdrift{
  0%   {transform:translate3d(0,0,0)}
  50%  {transform:translate3d(var(--dx,1rem), var(--dy,-1rem), 0)}
  100% {transform:translate3d(0,0,0)}
}

/* eight points around the frame — the four corner-most are cropped by
   the section edge on purpose. Positions are held clear of each other
   and of the centred type down to a 1000px viewport; verified, not
   eyeballed, because each pane drifts on its own clock. */
.orbit figure:nth-of-type(1){left:-5%; top:10%; width:12%; aspect-ratio:3/4;
  --dx:1.2rem;  --dy:.9rem;   --dur:21s; --delay:0s}
.orbit figure:nth-of-type(2){left:6%; top:45%; width:13%; aspect-ratio:4/5;
  --dx:-1.4rem; --dy:-1.1rem; --dur:24s; --delay:-5s}
.orbit figure:nth-of-type(3){left:5%; bottom:-10%; width:12%; aspect-ratio:1/1;
  --dx:1rem;    --dy:-1.3rem; --dur:18s; --delay:-11s}
.orbit figure:nth-of-type(4){left:32%; bottom:-3%; width:15%; aspect-ratio:4/3;
  --dx:-1.1rem; --dy:1rem;    --dur:22s; --delay:-3s}
.orbit figure:nth-of-type(5){right:30%; top:-1%; width:11%; aspect-ratio:4/3;
  --dx:1.3rem;  --dy:1.2rem;  --dur:20s; --delay:-8s}
.orbit figure:nth-of-type(6){right:8%; top:44%; width:11%; aspect-ratio:3/4;
  --dx:-1.2rem; --dy:1.1rem;  --dur:23s; --delay:-14s}
.orbit figure:nth-of-type(7){right:-6%; top:13%; width:13%; aspect-ratio:4/5;
  --dx:1.1rem;  --dy:-1rem;   --dur:19s; --delay:-6s}
.orbit figure:nth-of-type(8){right:3%; bottom:-10%; width:16%; aspect-ratio:1/1;
  --dx:-1rem;   --dy:-1.2rem; --dur:25s; --delay:-17s}

.rv.in.orbit figure:nth-of-type(2){transition-delay:.10s}
.rv.in.orbit figure:nth-of-type(3){transition-delay:.20s}
.rv.in.orbit figure:nth-of-type(4){transition-delay:.30s}
.rv.in.orbit figure:nth-of-type(5){transition-delay:.40s}
.rv.in.orbit figure:nth-of-type(6){transition-delay:.50s}
.rv.in.orbit figure:nth-of-type(7){transition-delay:.60s}
.rv.in.orbit figure:nth-of-type(8){transition-delay:.70s}

@media (max-width:1100px){
  .orbit figure{width:20% !important}
  .orbit figure:nth-of-type(2),.orbit figure:nth-of-type(5){display:none}
}
@media (max-width:820px){
  .orbit{min-height:0; padding-block:clamp(3rem,8vh,5rem)}
  .orbit figure{position:relative; width:auto !important; inset:auto;
    animation:none; aspect-ratio:1/1 !important}
  .orbit figure:nth-of-type(n+5){display:none}
  .orbit{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
  .orbit__mid{grid-column:1 / -1; order:-1; margin-bottom:2rem}
}
@media (prefers-reduced-motion:reduce){
  .orbit figure{animation:none; opacity:1}
}


/* Tracked caps carry a trailing letter-space after the last glyph, so a
   centred label sits half the tracking left of true centre. The padding
   puts it back. */
.orbit__mid .label,
.phero__inner .label,
.title-card__place,
.title-card .label{padding-left:.13em}


/* ============================================================
   INSTAGRAM MARQUEE
   A single unbroken run of photography above the footer, tracking
   left to right. The track holds two identical sets, so when the
   first set has fully passed the transform resets and the join is
   invisible. Pauses on hover and stops dead under reduced motion.
   ============================================================ */
.igm{position:relative; background:var(--white);
  padding-block:clamp(3rem,7vh,5rem); overflow:hidden}
.igm__head{display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; padding-inline:var(--pad);
  padding-bottom:clamp(1.75rem,3.5vh,2.5rem)}
.igm__head h2{margin:0}
.igm__head .label{margin:0 0 .8rem}
.igm__rail{display:flex; width:max-content;
  animation:igmrun 64s linear infinite}
.igm:hover .igm__rail{animation-play-state:paused}
.igm__rail a{display:block; flex:none;
  width:clamp(13rem,19vw,17rem); aspect-ratio:1;
  margin-right:clamp(.6rem,1vw,1rem); overflow:hidden; position:relative}
.igm__rail img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease), opacity .45s var(--ease)}
.igm__rail a::after{content:""; position:absolute; inset:0;
  background:var(--harbour); opacity:.16;
  transition:opacity .45s var(--ease)}
.igm__rail a:hover img{transform:scale(1.05)}
.igm__rail a:hover::after{opacity:0}

/* the track starts pulled back by one full set and releases, so the
   photography visibly travels left to right */
@keyframes igmrun{
  from {transform:translate3d(-50%,0,0)}
  to   {transform:translate3d(0,0,0)}
}

/* the run fades into the page at both edges rather than being cut off.
   Painted as two gradients rather than a mask, which composites
   unreliably over an animated track. */
.igm__rail{position:relative}
.igm::before,.igm::after{content:""; position:absolute; z-index:3;
  top:0; bottom:0; width:clamp(3rem,8vw,10rem); pointer-events:none}
.igm::before{left:0;  background:linear-gradient(90deg,
  var(--white) 12%, rgba(255,255,255,0))}
.igm::after{right:0; background:linear-gradient(270deg,
  var(--white) 12%, rgba(255,255,255,0))}

@media (prefers-reduced-motion:reduce){
  .igm__rail{animation:none}
}


/* ============================================================
   PACKAGE GRID
   The concierge rail's card, laid out as a grid so every service
   is visible at once rather than scrolled through.
   ============================================================ */
/* Tabbed: a panel can hold one card or three, so the columns pack from
   the left at the card's own width rather than stretching a lone card
   across a third of the page. */
.pkggrid{display:grid; justify-content:start; gap:clamp(1rem,1.8vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr))}
.pkggrid .pkg__card{flex:none; width:auto; aspect-ratio:3/4.1}
.pkggrid__group{margin-top:clamp(3rem,7vh,5rem)}
.pkggrid__group:first-of-type{margin-top:0}
/* one panel shows at a time, so it never carries a group's top margin */
.pkggrid__group[data-pkg-panel]{margin-top:0}
.pkggrid__group > .label{margin:0 0 clamp(1.25rem,2.5vh,1.75rem);
  padding-bottom:clamp(1rem,2vh,1.4rem); border-bottom:1px solid var(--line)}

@media (max-width:640px){ .pkggrid{grid-template-columns:1fr} }


/* ============================================================
   TIMELINE — interactive, five steps
   A spine of numbered nodes across the top; the spine fills to
   whichever step is live and the panel below cross-fades. Click,
   arrow keys and the next/back control all drive the same index.
   ============================================================ */
/* condensed: the heading, the spine and the open step have to land on
   one screen together, so the rail's bottom margin comes right down */
.tline__rail{position:relative; display:grid;
  grid-auto-flow:column; grid-auto-columns:1fr;
  /* top-aligned, so a two-line label hangs down rather than lifting its
     number above the others */
  align-items:start;
  gap:0; margin-bottom:clamp(1.5rem,3vh,2.25rem)}
/* the spine sits behind the nodes, level with their centres */
.tline__rail::before,.tline__rail::after{content:""; position:absolute;
  left:0; right:0; top:.72rem; height:1px}
.tline__rail::before{background:var(--line)}
.tline__rail::after{background:var(--harbour);
  transform:scaleX(var(--fill,0)); transform-origin:left;
  transition:transform .8s var(--ease)}

.tline__step{position:relative; z-index:2; display:grid;
  justify-items:start; gap:.9rem; padding:0 1.25rem 0 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit}
.tline__dot{width:1.45rem; height:1.45rem; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  display:grid; place-items:center;
  transition:background .45s var(--ease), border-color .45s var(--ease),
             transform .45s var(--ease)}
.tline__dot span{width:.42rem; height:.42rem; border-radius:50%;
  background:var(--harbour); opacity:0; transition:opacity .45s var(--ease)}
.tline__step[aria-selected="true"] .tline__dot{background:var(--sage);
  border-color:var(--sage); transform:scale(1.12)}
.tline__step[aria-selected="true"] .tline__dot span{opacity:1}
.tline__step.is-done .tline__dot{border-color:var(--harbour)}
.tline__step.is-done .tline__dot span{opacity:.45}
.tline__num{font-family:var(--f-label); font-size:.875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  transition:color .4s var(--ease)}
.tline__lbl{font-family:var(--f-body); font-weight:400;
  font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.3;
  max-width:14ch; color:var(--ink-soft); transition:color .4s var(--ease)}
.tline__step[aria-selected="true"] .tline__num,
.tline__step[aria-selected="true"] .tline__lbl{color:var(--ink)}
.tline__step:hover .tline__lbl{color:var(--ink)}

.tline__stage{position:relative; min-height:clamp(15rem,28vh,20rem)}
.tline__panel{position:absolute; inset:0; opacity:0; visibility:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:end;
  transition:opacity .7s var(--ease), visibility .7s var(--ease)}
.tline__panel.on{opacity:1; visibility:visible; position:relative}
.tline__panel h3{margin:0 0 1.1rem; max-width:16ch;
  font-size:clamp(2.1rem,3.6vw,3.1rem); line-height:1.1}
.tline__panel p{margin:0; max-width:46ch}
/* square, and parked in the bottom-right corner of the block so its
   base sits level with the arrows on the left */
.tline__media{aspect-ratio:1; width:min(100%,clamp(16rem,24vw,23rem));
  justify-self:end; align-self:end; overflow:hidden}
/* where the timeline has arrows, they are drawn up into the bottom of
   the stage, and the copy keeps clear of them */
.tline:has(.tline__nav:not(.tline__nav--added)) .tline__panel > div:first-child{
  padding-bottom:calc(3.25rem + clamp(1.25rem,2.5vh,1.75rem))}
.tline:has(.tline__nav:not(.tline__nav--added)) .tline__nav{position:relative; z-index:2;
  width:max-content; margin-top:-3.25rem}
.tline__media img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 3s var(--ease)}
.tline__panel.on .tline__media img{transform:none}

.tline__nav{display:flex; gap:.9rem; margin-top:clamp(1.25rem,2.5vh,1.75rem)}
.tline__btn{width:3.25rem; height:3.25rem; cursor:pointer; line-height:0;
  background:none; border:1px solid var(--line); color:var(--ink);
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), opacity .4s var(--ease)}
.tline__btn:hover:not(:disabled){background:var(--sage);
  color:var(--btn-ink); border-color:var(--sage)}
.tline__btn:disabled{opacity:.28; cursor:default}

@media (max-width:900px){
  /* Phone: the rail stays a horizontal spine like desktop, just the
     five nodes and their numbers, and the live step shows as one card
     underneath — photograph first, then its heading and copy. The old
     phone form turned the rail into a vertical list of five labels a
     screen tall before the content even started. */
  .tline__rail{grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
    margin-bottom:clamp(1.5rem,4vh,2rem)}
  .tline__step{justify-items:center; text-align:center; gap:.6rem; padding:0}
  .tline__lbl{display:none}
  .tline__num{font-size:.75rem}
  .tline__panel{grid-template-columns:1fr; gap:1.25rem; align-items:start}
  .tline__stage{min-height:0}
  .tline__media{order:-1; width:100%; justify-self:stretch; aspect-ratio:4/3}
  .tline__panel h3{font-size:clamp(1.9rem,8vw,2.4rem); margin-bottom:.75rem}
  .tline:has(.tline__nav:not(.tline__nav--added)) .tline__panel > div:first-child{padding-bottom:0}
  .tline:has(.tline__nav:not(.tline__nav--added)) .tline__nav{margin-top:clamp(1.25rem,2.5vh,1.75rem)}
}


/* ============================================================
   PROPERTY PAGE
   Content column on the left, the HomHero booking widget parked
   in a sticky rail on the right. The widget is a cross-origin
   iframe: four colour params and Inter, nothing else. So the rail
   around it carries the styling and the widget just sits on the
   page background with no card behind it.
   ============================================================ */
/* the rail widens to hold a photograph beside the calendar, each the
   same width, so the booking block is not one tall lonely column */
.prop{display:grid; grid-template-columns:minmax(0,1fr) 48rem;
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start}
.prop__pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem); align-items:start}
.prop__shot{margin:1.5rem 0 0}
.prop__shot img{display:block; width:100%; height:53rem; object-fit:cover}
@media (max-width:1200px){
  .prop{grid-template-columns:1fr}
  .prop__rail{position:static}
}
@media (max-width:720px){
  .prop__pair{grid-template-columns:1fr}
  .prop__shot img{height:auto; aspect-ratio:3/4}
}
.prop__rail{position:sticky; top:7.5rem}
/* No box around the widget. The HomHero calendar renders its own white
   card with its own border and rounded corners and that cannot be changed,
   so a second frame around it reads as a double border. Our price and
   actions sit on the page above and below it instead. */
/* the price block sits over the calendar, hard right, rather than
   starting above the photograph */
.prop__book{background:none; border:0; padding:0}
.prop__intro{margin-left:auto; text-align:right;
  max-width:calc(50% - clamp(.5rem,1vw,.875rem))}
.prop__book .label{margin:0 0 .4rem}
.prop__price{font-family:var(--f-display); font-size:2.1rem; line-height:1.1;
  margin:0 0 .35rem}
.prop__price small{font-family:var(--f-body); font-size:.875rem;
  color:var(--ink-soft); letter-spacing:0}
/* the live iframe is ~850px of content; the placeholder matches it so the
   rail's real length is visible on the concept */
.prop__widget{margin:1.5rem 0 1.5rem; min-height:53rem;
  display:grid; place-items:center; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:clamp(1.25rem,2.5vw,1.75rem)}
.prop__widget p{margin:.6rem 0 0; font-size:.875rem; color:var(--ink-soft);
  max-width:24ch}
.prop__widget iframe{width:100%; min-width:100%; height:850px; border:0;
  display:block}
.prop__book .btn{width:100%}
.prop__note{margin:1.1rem 0 0; font-size:.8125rem; color:var(--ink-soft)}

/* key facts */
/* sits under the heading now, directly above the copy */
.facts{display:flex; flex-wrap:wrap; gap:clamp(1.5rem,3.5vw,3rem);
  padding:clamp(1.5rem,3vh,2.25rem) 0;
  border-block:1px solid var(--line);
  margin:clamp(1.75rem,3.5vh,2.5rem) 0 clamp(1.75rem,3.5vh,2.5rem)}
.facts div b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1}
.facts div span{display:block; margin-top:.5rem; font-family:var(--f-label);
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft)}

/* the gallery: one lead frame, then an uneven pair */
.pgal{display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.6rem,1.2vw,1rem)}
.pgal a{display:block; overflow:hidden; position:relative}
.pgal img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease)}
.pgal a:hover img{transform:scale(1.04)}
.pgal a:nth-child(1){grid-column:1 / 3; grid-row:1 / 3; aspect-ratio:4/5}
.pgal a:nth-child(2){grid-column:3 / 5; aspect-ratio:16/9}
.pgal a:nth-child(3){grid-column:3 / 4; aspect-ratio:1}
.pgal a:nth-child(4){grid-column:4 / 5; aspect-ratio:1}

/* amenities */
.amen{display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(2rem,4vw,4rem); border-top:1px solid var(--line)}
.amen div{padding:1.1rem 0; border-bottom:1px solid var(--line)}

@media (max-width:1000px){
  .prop{grid-template-columns:1fr}
  .prop__rail{position:static; max-width:26rem}
  .pgal{grid-template-columns:repeat(2,1fr)}
  .pgal a:nth-child(1){grid-column:1 / 3; grid-row:auto}
  .pgal a:nth-child(2){grid-column:1 / 3}
  .pgal a:nth-child(3){grid-column:1 / 2}
  .pgal a:nth-child(4){grid-column:2 / 3}
  .amen{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){ .amen{grid-template-columns:1fr} }


/* ============================================================
   RESTAURANT CARDS
   Square image with the name set into its bottom edge over a
   shadow, then the copy below the image and the action below
   that. Four across; if there are more than four the row becomes
   a rail with its own prev/next.
   ============================================================ */
.rrail{display:flex; gap:clamp(1rem,1.8vw,1.5rem); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:.5rem;
  margin-right:calc(var(--pad) * -1); padding-right:var(--pad)}
.rrail::-webkit-scrollbar{display:none}

.rcard{flex:0 0 calc((100% - 3 * clamp(1rem,1.8vw,1.5rem)) / 4);
  scroll-snap-align:start; text-decoration:none; color:inherit;
  display:flex; flex-direction:column}
.rcard__media{position:relative; aspect-ratio:1; overflow:hidden}
.rcard__media img{width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease)}
.rcard:hover .rcard__media img{transform:scale(1.05)}
/* the name sits on the image's bottom edge, lifted by a shadow */
.rcard__media::after{content:""; position:absolute; inset:auto 0 0 0;
  height:58%; background:linear-gradient(180deg,
    rgba(34,53,70,0), rgba(34,53,70,.78))}
.rcard__name{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1rem,1.8vw,1.4rem); margin:0; color:var(--white);
  font-family:var(--f-display); font-weight:400; line-height:1.14;
  font-size:clamp(1.3rem,1.9vw,1.7rem);
  text-shadow:0 1px 18px rgba(34,53,70,.6)}
.rcard__where{display:block; margin-top:.5rem; font-family:var(--f-label);
  font-size:.5875rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-shadow:none}
/* everything below the image is on the page, never over it */
.rcard__body{padding-top:clamp(1rem,2vh,1.35rem); display:flex;
  flex-direction:column; flex:1}
.rcard__body p{margin:0 0 1.25rem; font-size:.9375rem; color:var(--ink-soft)}
.rcard__body .arrowlink{margin-top:auto}

.rnav{display:flex; gap:.9rem; margin-top:clamp(1.5rem,3vh,2.25rem)}
.rnav button{width:3.25rem; height:3.25rem; cursor:pointer; line-height:0;
  background:none; border:1px solid var(--line); color:var(--ink);
  display:grid; place-items:center;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), opacity .4s var(--ease)}
.rnav button:hover:not(:disabled){background:var(--sage);
  color:var(--btn-ink); border-color:var(--sage)}
.rnav button:disabled{opacity:.28; cursor:default}

@media (max-width:1100px){ .rcard{flex:0 0 calc((100% - 2 * 1.2rem) / 3)} }
@media (max-width:820px){  .rcard{flex:0 0 calc((100% - 1.2rem) / 2)} }
@media (max-width:560px){  .rcard{flex:0 0 82%} }

/* ============================================================
   GUIDE DETAIL PAGES — the drawn map
   A hand-built SVG of the bay rather than an embedded map.
   One geometry, one highlighted spot per page via data-spot.
   Coastline projected from real coordinates, Belongil through
   Cape Byron and south past Suffolk Park.
============================================================ */
.gmap{position:relative; background:var(--shell); border:1px solid var(--line);
  overflow:hidden}
.gmap svg{display:block; width:100%; height:auto}
.gmap__sea{fill:rgba(45,79,88,.10)}
.gmap__land{fill:var(--white)}
.gmap__coast{fill:none; stroke:var(--seaglass); stroke-width:1.1;
  stroke-opacity:.55}
.gmap__rule{stroke:var(--seaglass); stroke-width:.5; stroke-opacity:.14}
.gmap__pin circle{fill:var(--sage)}
.gmap__pin--soft circle{fill:var(--driftwood)}
.gmap__ring{fill:none; stroke:var(--sage); stroke-width:1; transform-origin:center}
.gmap__leader{stroke:var(--ink-soft); stroke-width:.7; stroke-opacity:.45}
.gmap__label{font-family:var(--f-label); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; fill:var(--ink-soft)}
.gmap__land-label{font-family:var(--f-label); font-size:11px; letter-spacing:.32em;
  text-transform:uppercase; fill:var(--ink-soft); fill-opacity:.5}
.gmap__label--here{fill:var(--ink); font-weight:500}
.gmap__place{font-family:var(--f-display); font-size:20px; fill:var(--ink);
  letter-spacing:.02em}
.gmap__sealabel{font-family:var(--f-label); font-size:11px; letter-spacing:.42em;
  text-transform:uppercase; fill:var(--seaglass); fill-opacity:.42}
.gmap__cap{display:flex; flex-wrap:wrap; gap:1.75rem; padding:1.15rem 1.35rem;
  border-top:1px solid var(--line); background:var(--white)}
.gmap__cap div{display:grid; gap:.3rem}
.gmap__cap b{font-family:var(--f-display); font-size:1.15rem; font-weight:400;
  color:var(--ink)}
.gmap__cap span{font-family:var(--f-label); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft)}

@media (prefers-reduced-motion:no-preference){
  .gmap__ring{animation:gmapping 3.4s var(--ease) infinite}
}
@keyframes gmapping{
  0%   {r:9;  stroke-opacity:.7}
  70%  {r:26; stroke-opacity:0}
  100% {r:26; stroke-opacity:0}
}

/* the two-up: map on one side, the practical notes on the other */
/* the map ran a head taller than the notes beside it, which read as
   one big picture and a short list. Sized to sit level with them. */
.gsplit{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:start}
.gmap{max-width:26rem}
@media (max-width:900px){ .gsplit{grid-template-columns:1fr} }

/* --- the big contact close-out ------------------------------ */
.gask{background:var(--harbour); color:var(--white); text-align:center;
  padding:clamp(4rem,11vh,7.5rem) var(--pad)}
.gask .label{color:rgba(255,255,255,.72)}
.gask h2{margin:1rem 0 0; color:var(--white)}
.gask p{margin:1.5rem auto 0; max-width:48ch; color:rgba(255,255,255,.8)}
/* identical to .btn: same weight, size, tracking and padding, so the
   site has one button rather than a special one per section */
.gask__btn{display:inline-flex; align-items:center; justify-content:center;
  gap:.6em; margin-top:2.75rem;
  background:transparent; color:var(--sage); border:1px solid var(--sage);
  text-decoration:none; font-family:var(--f-label); font-weight:400;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.15em 2.3em; position:relative; isolation:isolate; overflow:hidden;
  transition:border-color .45s var(--ease), color .55s var(--fill-ease)}
.gask__btn:hover{border-color:var(--sage); color:var(--btn-ink)}

/* --- practical notes list ----------------------------------- */
.gnotes{display:grid; gap:0; border-top:1px solid var(--line)}
.gnotes div{display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:1.5rem; padding:1.15rem 0; border-bottom:1px solid var(--line)}
.gnotes dt, .gnotes b{font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  font-weight:400}
.gnotes p{margin:0; color:var(--ink)}
@media (max-width:560px){ .gnotes div{grid-template-columns:1fr; gap:.4rem} }

/* the page's own copy now opens the notes column, above the list */
.gtext{margin-bottom:clamp(2rem,4vh,3rem)}
.gtext .lede{margin:0 0 1.25rem}
.gtext p:last-child{margin:0; color:var(--ink-soft)}

/* attribution for licensed third-party photography */
.phero__credit{position:absolute; right:var(--pad); bottom:1.1rem; z-index:3;
  margin:0; font-family:var(--f-label); font-size:.5625rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55)}
.phero__credit a{color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:.5px}
.phero__credit a:hover{color:rgba(255,255,255,.9)}

/* ============================================================
   PLAIN PAGE HEADER — no photograph, type centred
   The interior pages open on a typographic title block instead of
   a hero image. Warm sand ground, ink type, the sage ornament above
   the label. Shorter than the photo hero was: with no image there is
   nothing to look at, so it takes the space it needs and no more.
============================================================ */
.phero--plain{min-height:clamp(20rem,46svh,28rem); background:var(--white);
  align-items:center; padding-top:clamp(8.5rem,15vh,11rem);
  border-bottom:1px solid var(--line)}
.phero--plain .phero__inner{text-align:center; color:var(--ink);
  padding-bottom:clamp(3rem,7vh,5rem)}
.phero--plain .phero__inner .orn{margin:0 auto 1.5rem; filter:none; opacity:1}
.phero--plain .phero__inner .label{color:var(--ink-soft)}
.phero--plain .phero__inner h1{max-width:22ch; margin:.9rem auto 0}
/* the hero copy runs to the page measure, not a narrow centred column */
.phero--plain .phero__inner{max-width:74rem; margin-inline:auto}
.phero--plain .phero__inner h1{max-width:26ch}
.phero--plain .phero__inner .lede{max-width:62ch; margin:1.5rem auto 0;
  color:var(--ink-soft)}
.phero--plain .phero__inner p:not(.label):not(.lede){max-width:74ch;
  margin:1.1rem auto 0; color:var(--ink-soft); font-size:.9375rem}
.phero--plain .phero__actions{justify-content:center}
.phero--plain .btn--outline{border-color:var(--line); color:var(--ink)}
.phero--plain .btn--outline:hover{background:rgba(34,53,70,.05);
  border-color:var(--seaglass); color:var(--seaglass)}
.phero--plain .scrollrule{display:none}

/* With no photograph behind it the nav needs its light treatment from
   the first pixel. Unlike is-solid this keeps the utility bar. */
/* no rule under the bar: the page's own first hairline does that job */
.head.is-light{background:var(--white)}
.head.is-light .nav__links a{color:var(--ink)}
.head.is-light .nav__links a:hover{color:var(--ocean-bright)}
.head.is-light .nav__toggle{color:var(--ink)}
.head.is-light .nav__mark .on-light{opacity:1}
.head.is-light .nav__mark .on-dark{opacity:0}
.head.is-light .navcta{color:var(--ink)}

/* the date control runs white over photography; on the plain header it
   has to run ink or it disappears into the sand */
.phero--plain .phero__actions .plusact{color:var(--ink)}
.phero--plain .phero__actions .plusact:hover{color:var(--seaglass)}

/* the Book now card is the action in that row, not another link: sage
   edge, sage label, and the arrow slides on hover */
.cross--book{box-shadow:inset 0 3px 0 var(--sage)}
.cross--book .cross__body span{color:var(--sage-soft); display:inline-flex;
  align-items:center; gap:.7em}
.cross--book .cross__body span svg{transition:transform .45s var(--ease)}
.cross--book:hover .cross__body span svg{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .cross--book .cross__body span svg{transition:none}
}

/* the four-up row: never 3 + 1 orphan — four across, then a balanced
   2 x 2, then one column */
.cross--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){ .cross--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .cross--4{grid-template-columns:1fr} }

/* ============================================================
   DIRECT — image flush to the page edge, statement type beside it
   The reference build runs a tall photograph hard against the left
   edge with the copy held in the right half: small label, a display
   heading over three lines, one paragraph, one filled button with a
   mark either side of its label.
============================================================ */
.direct{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; background:var(--white)}
/* the photograph is a portrait block standing in its own white space,
   not a full-bleed panel — the padding is the point */
/* padded, but held to the right so it sits against the copy */
.direct__media{padding:clamp(3rem,8vh,6rem) clamp(1.5rem,2.5vw,2.5rem)
  clamp(3rem,8vh,6rem) clamp(2rem,5vw,5.5rem)}
.direct__media img{display:block; width:100%; max-width:38rem;
  margin-left:auto; margin-right:0; aspect-ratio:4/5; object-fit:cover;
  object-position:50% 50%}
.direct__body{align-self:center; padding:clamp(3rem,8vh,6.5rem) var(--pad)
  clamp(3rem,8vh,6.5rem) clamp(1.5rem,2.5vw,2.5rem); max-width:44rem}
.direct__body .label{margin:0}
.direct__body h2{margin:1.1rem 0 0; max-width:16ch}
.direct__body .lede{margin:1.75rem 0 0; max-width:46ch}
.direct__body p:not(.lede){margin:1.25rem 0 0; max-width:50ch;
  color:var(--ink-soft)}

/* the button: sage fill, ink type, a small mark on each side */
/* sage outline, ink label. The label ran sage for a moment and came back:
   on white it measures 2.28:1 and reads as disabled. Sage carries the
   label only where the ground is dark, which is 5.4:1. */
.dbtn{display:inline-flex; align-items:center; justify-content:center;
  gap:.6em; margin-top:2.75rem;
  background:transparent; color:var(--ink); border:1px solid var(--sage);
  text-decoration:none; font-family:var(--f-label); font-weight:400;
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.15em 2.3em; position:relative; isolation:isolate; overflow:hidden;
  transition:border-color .4s var(--ease), color .55s var(--fill-ease)}
.dbtn:hover{border-color:var(--sage); color:var(--btn-ink)}

@media (max-width:900px){
  .direct{grid-template-columns:1fr}
  .direct__media{padding:clamp(2.5rem,6vh,4rem) var(--pad) 0}
  .direct__media img{max-width:26rem; aspect-ratio:4/5}
  .direct__body{padding:clamp(2.5rem,6vh,4rem) var(--pad); max-width:none}
}

/* ============================================================
   PROPERTY GALLERY — the complete set
   The mosaic above shows four. This is every remaining photograph
   the listing has, four across, each opening the lightbox.
============================================================ */
/* One uniform grid, so every gutter is the same in both directions.
   The mosaic's mixed ratios made the vertical rhythm uneven. */
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.6rem,1.2vw,1rem)}
.pgrid button{padding:0; border:0; background:none; cursor:zoom-in;
  display:block; overflow:hidden; aspect-ratio:4/3}
.pgrid img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease)}
.pgrid button:hover img{transform:scale(1.05)}
.pgal a{cursor:zoom-in}
@media (max-width:900px){ .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){ .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.galcount{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin:0}

/* --- lightbox ---------------------------------------------- */
.lbox{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(34,53,70,.94); padding:clamp(1rem,4vw,3rem)}
.lbox[hidden]{display:none}
.lbox img{max-width:100%; max-height:84vh; object-fit:contain; display:block}
.lbox__bar{position:absolute; left:0; right:0; bottom:clamp(1rem,3vh,2rem);
  display:flex; justify-content:center; align-items:center; gap:1.5rem;
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.7)}
.lbox button{width:3rem; height:3rem; cursor:pointer; line-height:0;
  background:none; border:1px solid rgba(255,255,255,.35); color:var(--white);
  display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease)}
.lbox button:hover{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.7)}
.lbox__close{position:absolute; top:clamp(1rem,3vh,2rem);
  right:clamp(1rem,4vw,3rem); font-size:1.4rem}

/* ============================================================
   CRITERIA — what we take on / what we pass on, as two tabs
   Two lists of the same shape read as one undifferentiated block
   side by side. One at a time, with the items staggering in on the
   switch, makes the second list land as the answer to the first.
============================================================ */
.crit{max-width:none}
.crit .tabs{margin:0 0 clamp(1.5rem,3vh,2.25rem); gap:.5rem; flex-wrap:wrap}
.crit .tabs button{padding:.8em 1.15em; font-size:.625rem; letter-spacing:.16em}
.crit__list li{grid-template-columns:1.25rem minmax(0,1fr); gap:.9rem;
  padding:clamp(.9rem,1.8vh,1.2rem) 0}
.crit__note{margin-top:clamp(1.25rem,2.5vh,1.75rem); font-size:.9375rem}
.crit__panel[hidden]{display:none}
.crit__list{margin:0; padding:0; list-style:none; display:grid;
  border-top:1px solid var(--line)}
.crit__list li{display:grid; grid-template-columns:1.75rem minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem); align-items:baseline;
  padding:clamp(1.15rem,2.4vh,1.6rem) 0; border-bottom:1px solid var(--line)}
/* both marks run in the wayfinding blue. Sage on white measures 2.8:1,
   which is too faint for a hairline glyph, and the + / - carries the
   difference on its own. */
.crit__list li span{font-family:var(--f-label); font-size:1rem; font-weight:400;
  color:var(--seaglass); line-height:1.2; letter-spacing:0}
.crit__note{margin:clamp(1.75rem,3.5vh,2.5rem) 0 0; max-width:52ch;
  color:var(--ink-soft)}

/* the stagger: items sit low and clear until the panel is shown */
@media (prefers-reduced-motion:no-preference){
  .crit__list li{opacity:0; transform:translateY(14px);
    transition:opacity .65s var(--ease), transform .65s var(--ease);
    transition-delay:calc(var(--i,0) * 70ms)}
  .crit__panel.is-in .crit__list li{opacity:1; transform:none}
}

/* ============================================================
   THE POSITION — the whole argument in three columns
   Statement, reasoning, then the criteria you can act on. One
   hairline across the top ties them together as a single block.
============================================================ */
.pos3{display:grid; grid-template-columns:1fr 1fr;
  /* the row gap only ever separates the lede from the paragraph under
     it, so it is much tighter than the gap between the columns */
  gap:clamp(.9rem,1.8vh,1.4rem) clamp(2.5rem,5vw,5rem);
  padding-top:clamp(2rem,4vh,3rem); border-top:1px solid var(--line)}
/* the written argument runs down the left, the two lists sit beside it */
.pos3__head,.pos3__body{grid-column:1}
.pos3__crit{grid-column:2; grid-row:1 / span 2; align-self:start}
.pos3 > *{min-width:0}
.pos3__head .orn{margin:0 0 1.25rem}
.pos3__head .label{margin:0}
.pos3__head h2{margin:.9rem 0 0}
.pos3__head .lede{margin:1.5rem 0 0; color:var(--ink-soft)}
.pos3__body p{margin:0 0 1.25rem; color:var(--ink-soft)}
.pos3__body p:first-child{color:var(--ink)}
.pos3__body p:last-child{margin-bottom:0}
@media (max-width:900px){
  .pos3{grid-template-columns:1fr; gap:2.25rem}
  .pos3__head,.pos3__body,.pos3__crit{grid-column:1; grid-row:auto}
}

/* ============================================================
   GALLERY VIEW TOGGLE — slideshow or the full grid
   The grid is the complete set. The slideshow is for looking
   properly: two photographs at a time, much larger.
============================================================ */
.gview{display:flex; gap:.6rem; margin:clamp(1.5rem,3vh,2.25rem) 0 0}
.gview button{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; padding:.85em 1.5em; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease)}
.gview button:hover{border-color:var(--seaglass); color:var(--seaglass)}
.gview button[aria-selected="true"]{background:var(--harbour);
  border-color:var(--harbour); color:var(--white)}

.gshow[hidden], .gfull[hidden]{display:none}
/* both views clear the toggle by the same amount */
.gshow, .gfull{margin-top:clamp(1.75rem,3.5vh,2.75rem)}
.gshow__rail{display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - clamp(.6rem,1.2vw,1rem)) / 2);
  gap:clamp(.6rem,1.2vw,1rem); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none}
.gshow__rail::-webkit-scrollbar{display:none}
.gshow__rail button{padding:0; border:0; background:none; cursor:zoom-in;
  scroll-snap-align:start; display:block; overflow:hidden; aspect-ratio:3/2}
.gshow__rail img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease)}
.gshow__rail button:hover img{transform:scale(1.04)}
.gshow__nav{display:flex; gap:.9rem; align-items:center;
  margin-top:clamp(1.25rem,2.5vh,1.75rem)}
.gshow__nav button{width:3.25rem; height:3.25rem; cursor:pointer; line-height:0;
  background:none; border:1px solid var(--line); color:var(--ink);
  display:grid; place-items:center;
  transition:border-color .3s var(--ease), color .3s var(--ease)}
.gshow__nav button:hover:not(:disabled){border-color:var(--seaglass);
  color:var(--seaglass)}
.gshow__nav button:disabled{opacity:.3; cursor:default}
.gshow__at{font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 0 .5rem}
@media (max-width:700px){
  .gshow__rail{grid-auto-columns:100%}
}

/* ============================================================
   GUIDE PAGE INTRO — the photograph, then what it is
   The description used to sit in the map's right column. It gets
   its own block now, with a portrait photograph beside it, and the
   map drops below with the practical notes.
============================================================ */
.bintro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,2.5vw,2.5rem); align-items:center}
/* held right inside its column so it sits against the copy */
.bintro__media img{display:block; width:100%; max-width:34rem;
  margin-left:auto; margin-right:0; aspect-ratio:4/5; object-fit:cover}
.bintro__body .label{margin:0}
.bintro__body h2{margin:1rem 0 0; max-width:16ch}
.bintro__body .lede{margin:1.75rem 0 0; max-width:46ch}
.bintro__body p:not(.lede):not(.label){margin:1.25rem 0 0; max-width:50ch;
  color:var(--ink-soft)}
.bintro__credit{margin:1.25rem 0 0; font-family:var(--f-label);
  font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft)}
.bintro__credit a{color:inherit}
@media (max-width:900px){
  .bintro{grid-template-columns:1fr; gap:2rem}
  .bintro__media img{max-width:26rem; margin-right:auto; aspect-ratio:4/5}
}

/* --- the same block, flipped: copy left, media right --------- */
.direct--flip .direct__media{grid-column:2; grid-row:1;
  padding:clamp(3rem,8vh,6rem) clamp(2rem,5vw,5.5rem)
          clamp(3rem,8vh,6rem) clamp(1.5rem,2.5vw,2.5rem)}
.direct--flip .direct__media img,
.direct--flip .direct__media video{margin-left:0; margin-right:auto}
.direct--flip .direct__body{grid-column:1; grid-row:1;
  padding:clamp(3rem,8vh,6.5rem) clamp(1.5rem,2.5vw,2.5rem)
          clamp(3rem,8vh,6.5rem) var(--pad);
  margin-left:auto}
.direct__media video{display:block; width:100%; max-width:38rem;
  aspect-ratio:4/5; object-fit:cover; background:var(--shell)}
@media (max-width:900px){
  .direct--flip .direct__media,
  .direct--flip .direct__body{grid-column:1; grid-row:auto}
  .direct--flip .direct__media{grid-row:1}
  .direct--flip .direct__body{grid-row:2; margin-left:0;
    padding:clamp(2.5rem,6vh,4rem) var(--pad)}
  .direct__media video{max-width:26rem}
}

/* --- full-width video band ---------------------------------- */
.vband{position:relative; overflow:hidden; background:var(--harbour-deep);
  aspect-ratio:21/9; max-height:82svh}
.vband video{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:900px){ .vband{aspect-ratio:16/9} }
@media (max-width:560px){ .vband{aspect-ratio:4/3} }

/* the split band: footage on two thirds, the standing note on the blue
   beside it. Edge to edge — the band is the section, there is no wrap
   inside it. The ratio lives on the media, not the band, so the copy can
   run taller than the footage on a narrow desktop without cropping it. */
.vband--split{display:grid; grid-template-columns:65% 35%;
  aspect-ratio:auto; max-height:none; background:var(--harbour)}
.vband--split .vband__media{position:relative; aspect-ratio:16/9;
  overflow:hidden; background:var(--harbour-deep)}
.vband__note{display:flex; flex-direction:column; justify-content:center;
  gap:1.25rem; padding:clamp(2rem,3.5vw,4rem); color:rgba(251,247,239,.82)}
/* sized down from the page's h2: it is a standing note beside the
   footage, not a section opening */
.vband__note .label{font-size:.6875rem; letter-spacing:.26em;
  color:var(--sage-soft)}
.vband__head{margin:0; color:var(--paper);
  font-size:clamp(1.5rem,2.1vw,2.1rem); line-height:1.12}
/* when the band opens a section rather than annotating one, the heading
   runs at the page's own h2 scale. The italic is set explicitly: left to
   inherit it renders visibly smaller than the roman beside it. */
.vband__head--big{font-size:clamp(2.2rem,4.4vw,3.9rem); line-height:1.04}
.vband__head--big em{font-size:1em; line-height:1}
.vband__note p{margin:0; font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.72; max-width:42ch}
.vband__note p:last-child{color:var(--paper)}
@media (max-width:900px){
  .vband--split{grid-template-columns:1fr; aspect-ratio:auto}
  .vband--split .vband__media{aspect-ratio:16/9}
}

/* --- the guide bar: tabs left, rail navigation right --------- */
.guidebar{display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vh,3rem)}
.guidebar .tabs{margin:0}
.rnavs{flex:none}
.rnavs .rnav{margin:0}
.rnavs .rnav[hidden]{display:none}
@media (max-width:820px){
  .guidebar{justify-content:flex-start}
}

/* ============================================================
   SERVICE RAIL — portrait cards, no imagery
   Six stacked cards made a wall on the dark band. They run as a
   rail now, three across, scrolled rather than scanned.
============================================================ */
.svcrail{display:flex; gap:clamp(1rem,2vw,1.75rem); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:.25rem}
.svcrail::-webkit-scrollbar{display:none}
.svcrail .svc__item{flex:0 0 calc((100% - 2 * clamp(1rem,2vw,1.75rem)) / 3);
  scroll-snap-align:start; aspect-ratio:3/4; justify-content:flex-start}
@media (max-width:900px){
  .svcrail .svc__item{flex-basis:calc((100% - clamp(1rem,2vw,1.75rem)) / 2)}
}
@media (max-width:620px){ .svcrail .svc__item{flex-basis:100%; aspect-ratio:4/3} }
.svcnav{display:flex; gap:.9rem; margin-top:clamp(1.5rem,3vh,2.25rem)}
.svcnav button{width:3.25rem; height:3.25rem; cursor:pointer; line-height:0;
  background:none; border:1px solid rgba(255,255,255,.35); color:var(--white);
  display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease)}
.svcnav button:hover:not(:disabled){background:var(--sage);
  border-color:var(--sage); color:var(--btn-ink)}
.svcnav button:disabled{opacity:.3; cursor:default}

/* ============================================================
   THE DIRECTORS — three portraits, name and position
   Portrait frames are placeholders until the real photographs
   arrive: a monogram on the sand ground, not a stock face.
============================================================ */
.team{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem)}
.team figure{margin:0}
/* the placeholder frame needs to read on a white page, and --shell is
   white since cream came out — so it carries its own hairline and tint */
.team__shot{position:relative; aspect-ratio:4/5; overflow:hidden;
  background:rgba(45,79,88,.045); border:1px solid var(--line);
  display:grid; place-items:center}
.team__shot:has(img){background:none; border:0}
.team__shot img{width:100%; height:100%; object-fit:cover; display:block}
/* the placeholder state */
.team__mono{font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.6rem,5vw,4rem); color:var(--driftwood); line-height:1;
  letter-spacing:.04em}
.team__shot::after{content:"Portrait to come"; position:absolute;
  left:0; right:0; bottom:clamp(1rem,2vh,1.5rem); text-align:center;
  font-family:var(--f-label); font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); opacity:.6}
.team__shot:has(img)::after{content:none}
.team figcaption{margin-top:clamp(1rem,2vh,1.4rem)}
.team figcaption b{display:block; font-family:var(--f-display);
  font-weight:400; font-size:clamp(1.25rem,1.9vw,1.6rem); color:var(--ink);
  line-height:1.15}
.team figcaption span{display:block; margin-top:.55rem;
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:820px){ .team{grid-template-columns:1fr; max-width:24rem} }

/* the directors link out to their profiles */
.team a{text-decoration:none; color:inherit; display:block}
.team a:hover .team__shot{background:rgba(45,79,88,.08)}
.team figcaption em{display:block; margin-top:.9rem; font-style:normal;
  font-size:.9375rem; color:var(--ink-soft); max-width:34ch}

/* ============================================================
   PAGE TRANSITION
   A veil in the harbour blue with the mark centred. In on the way
   out, out on the way in. Short on purpose — 340ms out, 460ms in —
   because a slow curtain on every click stops reading as luxury
   about two clicks later.
============================================================ */
/* The arrival is the half you actually watch, so it is the slow one:
   the veil lifts over 900ms on a long ease-out while the mark fades
   first. Leaving stays brisk at 420ms — nobody wants to wait to go. */
.pt{position:fixed; inset:0; z-index:300; background:var(--harbour-deep);
  display:grid; place-items:center; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             visibility .9s cubic-bezier(.22,.61,.36,1)}
.pt img{width:clamp(3.4rem,6vw,4.6rem); height:auto; opacity:0;
  filter:brightness(0) invert(1); transform:scale(1.04);
  transition:opacity .5s var(--ease), transform 1.1s cubic-bezier(.22,.61,.36,1)}
/* leaving: the veil closes, quickly */
.pt.is-out{opacity:1; visibility:visible; pointer-events:all;
  transition-duration:.42s}
.pt.is-out img{opacity:.92; transform:scale(1); transition-duration:.42s}
/* arriving: it lifts, slowly, and the mark goes first */
.pt.is-in{opacity:1; visibility:visible}
.pt.is-in img{opacity:.92; transform:scale(1)}
.pt:not(.is-in):not(.is-out) img{opacity:0; transition-duration:.35s}
@media (prefers-reduced-motion:reduce){
  .pt, .pt img{transition:none}
  .pt{display:none}
}

/* ============================================================
   COMPARISON ONLY — the boxed booking-platform card
   Used on layout-comparison.html, which is not linked from the
   site. Delete this block with the page if option A wins.
============================================================ */
.pgridlist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem)}
.pcard{display:block; text-decoration:none; color:inherit; background:var(--white);
  border-radius:14px; overflow:hidden;
  box-shadow:0 18px 44px -26px rgba(9,24,34,.45), 0 2px 6px -3px rgba(9,24,34,.2);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.pcard:hover{transform:translateY(-4px);
  box-shadow:0 28px 60px -26px rgba(9,24,34,.5), 0 3px 9px -3px rgba(9,24,34,.24)}
.pcard__media{position:relative; aspect-ratio:16/10; overflow:hidden}
.pcard__media img{width:100%; height:100%; object-fit:cover; display:block}
.pcard__tag{position:absolute; left:1rem; top:1rem;
  background:rgba(255,255,255,.94); padding:.5em .95em;
  font-family:var(--f-label); font-size:.5875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--forest)}
.pcard__body{padding:clamp(1.25rem,2.4vw,1.85rem)}
.pcard__body h3{margin:0 0 .5rem; font-size:clamp(1.35rem,2.1vw,1.75rem)}
.pcard__meta{margin:0; font-size:.9375rem; color:var(--ink-soft)}
.pcard__price{margin:1.1rem 0 0; font-family:var(--f-label);
  font-size:.8125rem; color:var(--ink-soft)}
.pcard__price em{font-style:normal; font-family:var(--f-display);
  font-size:1.75rem; color:var(--ink); letter-spacing:.01em}
.pcard__price b{font-weight:400; text-transform:uppercase; letter-spacing:.16em;
  font-size:.6875rem}
.pcard__price span{letter-spacing:.06em}
@media (max-width:820px){ .pgridlist{grid-template-columns:1fr} }

/* --- deep header, preview only -------------------------------
   The plain header on the harbour blue with light type, for the beach
   pages. Everything is inherited from .phero--plain: this only restates
   what changes ground. Delete with beach-main-deep.html if it is not
   taken up. */
.phero--deep{background:var(--harbour); border-bottom:0}
.phero--deep .phero__inner{color:var(--paper)}
.phero--deep .phero__inner .orn{filter:brightness(0) invert(1); opacity:.92}
.phero--deep .phero__inner .label{color:rgba(251,247,239,.7)}
.phero--deep .phero__inner .lede{color:rgba(251,247,239,.86)}
.phero--deep .phero__inner p:not(.label):not(.lede){color:rgba(251,247,239,.78)}
.phero--deep .btn--outline{border-color:rgba(251,247,239,.45); color:var(--paper)}
.phero--deep .btn--outline:hover{background:rgba(251,247,239,.12);
  border-color:rgba(251,247,239,.7); color:var(--paper)}

/* --- nav dropdowns -------------------------------------------
   Stay and Experience open a panel under the bar carrying the same
   headings their pages use. The panel is full-bleed: it is absolute
   against .head, not against the item, so it runs edge to edge no
   matter where the item sits in the row. */
.nav__item{position:static; display:inline-flex; align-items:center}
.drop{position:absolute; left:0; right:0; top:100%;
  background:var(--harbour); border-top:1px solid rgba(251,247,239,.14);
  opacity:0; transform:translate3d(0,-.35rem,0); pointer-events:none;
  /* not the fill's ease: that curve is nearly finished a third of the way
     in, so a longer duration on it still read as instant. This one holds
     back at the start and lets the panel arrive. */
  transition:opacity .9s cubic-bezier(.45,.05,.25,1),
             transform .9s cubic-bezier(.45,.05,.25,1)}
/* hidden is the closed state for assistive tech and for the first paint;
   the class is what animates, so it is removed a frame before is-open */
.drop[hidden]{display:none}
.drop.is-open{opacity:1; transform:none; pointer-events:auto}
/* one line, centred — the panel names the page's own headings and
   nothing else, so it never becomes a second site map */
.drop__inner{display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:clamp(1.4rem,3vw,2.6rem);
  padding:.95rem var(--pad)}
/* the panel runs the harbour on every page, so its links stay light even
   when the bar above them has gone solid white */
.head .drop a, .head:not(.is-solid) .drop a, .head.is-light .drop a{
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.18em;
  font-weight:500; text-transform:uppercase; color:rgba(251,247,239,.82);
  padding-bottom:.3em; border-bottom:1px solid transparent;
  transition:color .4s var(--ease), border-color .4s var(--ease)}
.head .drop a:hover, .head:not(.is-solid) .drop a:hover,
.head.is-light .drop a:hover{color:var(--paper);
  border-bottom-color:var(--sage)}
@media (max-width:1080px){
  .drop{display:none}
}

/* the dbtn and the guide's ask button, filled on the blue like .btn */
.band .dbtn, .orbit .dbtn, .gask__btn{
  border-color:var(--sage); color:var(--btn-ink)}
.band .dbtn::before, .orbit .dbtn::before, .gask__btn::before{transform:scaleY(1)}
.band .dbtn:hover, .orbit .dbtn:hover, .gask__btn:hover{color:var(--sage)}
.band .dbtn:hover::before, .orbit .dbtn:hover::before,
.gask__btn:hover::before{transform:scaleY(0)}

/* --- sheet: a panel over the page ----------------------------
   The amenities list on a property page. Same behaviour as the date
   dialog, sized for a list rather than a form, and scrollable in its own
   box so a long list never scrolls the page behind it. */
.section--tight{padding-bottom:clamp(1.5rem,3vh,2.5rem)}
.sheet{position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:var(--pad); opacity:0; visibility:hidden;
  transition:opacity .45s var(--fill-ease), visibility .45s var(--fill-ease)}
.sheet[hidden]{display:none}
.sheet.open{opacity:1; visibility:visible}
.sheet__scrim{position:absolute; inset:0; background:rgba(34,53,70,.72)}
.sheet__box{position:relative; z-index:2; width:min(52rem,100%);
  max-height:min(82svh,44rem); overflow:auto; background:var(--white);
  padding:clamp(1.75rem,4vw,3rem);
  transform:translateY(14px); transition:transform .55s var(--fill-ease)}
.sheet.open .sheet__box{transform:none}
.sheet__box h2{font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 1.75rem}
.sheet__box .label{margin:0 0 .6rem}
.sheet__box .amen{grid-template-columns:repeat(2,1fr)}
.sheet__close{position:absolute; top:.85rem; right:.85rem; width:2.6rem;
  height:2.6rem; display:grid; place-items:center; cursor:pointer;
  background:none; border:0; color:var(--ink-soft); font-size:1.1rem;
  line-height:1; transition:color .35s var(--ease)}
.sheet__close:hover{color:var(--ocean-bright)}
@media (max-width:640px){ .sheet__box .amen{grid-template-columns:1fr} }

/* --- the timeline on the blue --------------------------------
   Everything in it is drawn against white by default. On the band the
   spine, the nodes and the unselected labels all have to come back up
   off the dark, and the live node keeps the sage so the eye still finds
   where it is. */
.band .res__head{border-bottom-color:rgba(251,247,239,.22)}
.band .tline__rail::before{background:rgba(251,247,239,.22)}
.band .tline__rail::after{background:var(--sage)}
.band .tline__dot{background:transparent; border-color:rgba(251,247,239,.35)}
.band .tline__dot span{background:var(--harbour)}
.band .tline__step.is-done .tline__dot{border-color:var(--sage)}
.band .tline__num,.band .tline__lbl{color:rgba(251,247,239,.6)}
.band .tline__step[aria-selected="true"] .tline__num,
.band .tline__step[aria-selected="true"] .tline__lbl,
.band .tline__step:hover .tline__lbl{color:var(--paper)}
.band .tline__panel h3{color:var(--paper)}
.band .tline__panel p{color:rgba(251,247,239,.82)}
.band .tline__btn{border-color:rgba(251,247,239,.35); color:var(--paper)}
.band .tline__btn:hover:not(:disabled){background:var(--sage);
  border-color:var(--sage); color:var(--btn-ink)}

/* the role under a director's name: the same label face as everywhere
   else, set to wrap, since two of the three titles run long */
.prof__role{margin:.75rem 0 1.75rem; font-family:var(--f-label);
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.9; max-width:34ch}
/* the placeholder frame is portrait like the photograph it stands in for */
.direct__media .team__shot{max-width:38rem; margin-left:auto}
.direct--flip .direct__media .team__shot{margin-left:0; margin-right:auto}

/* --- directors, set over the photograph ----------------------
   The same card as the home page's concierge panel: portrait crop, a
   scrim that only starts a third of the way down so the face stays
   clear, and the copy held at the base. */
.team--over figure{position:relative; overflow:hidden; aspect-ratio:4/5;
  background:var(--harbour-deep)}
.team--over a{position:absolute; inset:0; display:block; text-decoration:none}
.team--over img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.04); transition:transform 3s var(--ease)}
.team--over a:hover img{transform:none}
.team--over a::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(34,53,70,0) 28%, rgba(34,53,70,.6) 58%,
  rgba(34,53,70,.94) 100%)}
.team--over figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2;
  margin:0; padding:clamp(1.25rem,2.2vw,1.9rem); color:var(--paper)}
.team--over figcaption b{color:var(--paper)}
.team--over figcaption span{color:rgba(251,247,239,.7)}
.team--over figcaption em{display:block; margin-top:.75rem; font-style:normal;
  font-size:.875rem; line-height:1.65; color:rgba(251,247,239,.84);
  font-family:var(--f-body)}
@media (max-width:820px){ .team--over{max-width:24rem} }

/* --- the service list ---------------------------------------- */
.slist{list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; gap:clamp(1.1rem,2.2vh,1.6rem)}
.slist > li{display:grid; grid-template-columns:3.6rem minmax(0,1fr);
  gap:.5rem; padding-top:clamp(1.1rem,2.2vh,1.6rem);
  border-top:1px solid var(--line)}
.slist > li:first-child{padding-top:0; border-top:0}
.slist__num{font-family:var(--f-label); font-size:1rem; letter-spacing:.14em;
  color:var(--sage); padding-top:.2em}
.slist h3{margin:0 0 .6rem; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.14; color:var(--ink)}
.slist p{margin:0; font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.65;
  color:var(--ink-soft); max-width:46ch}
/* the lines a service actually buys, set under it */
.vband__lede{margin:1.1rem 0 0; font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.72; color:rgba(251,247,239,.82); max-width:46ch}
.slist__pts{list-style:none; margin:.9rem 0 0; padding:0;
  display:grid; gap:.45rem}
.slist__pts li{position:relative; padding-left:1.25rem;
  font-size:clamp(.9375rem,1.05vw,1.05rem); line-height:1.6;
  color:var(--ink-soft)}
.slist__pts li::before{content:""; position:absolute; left:0; top:.62em;
  width:.32rem; height:1px; background:var(--sage)}

/* three across: the block is the list, so it gets the page width */
.slist--wide{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,2.8vh,2.4rem) clamp(2rem,4vw,4rem); margin-top:clamp(2.5rem,5vh,3.5rem)}
.slist--wide > li:nth-child(-n+3){padding-top:0; border-top:0}
.bhead{max-width:52rem}
.bhead .vband__head{color:var(--ink)}
.bhead .vband__lede{color:var(--ink-soft)}
/* and on a dark ground it all comes back up */
.band .bhead .vband__head,.band .slist h3{color:var(--paper)}
.band .bhead .vband__lede,.band .slist p,.band .slist__pts li{
  color:rgba(251,247,239,.78)}
.band .slist > li{border-top-color:rgba(251,247,239,.16)}
.vband__note .slist h3{color:var(--paper)}
.vband__note .slist p,.vband__note .slist__pts li{color:rgba(251,247,239,.78)}
.vband__note .slist > li{border-top-color:rgba(251,247,239,.16)}
@media (max-width:1000px){
  .slist--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slist--wide > li:nth-child(3){padding-top:clamp(1.1rem,2.2vh,1.6rem);
    border-top:1px solid var(--line)}
}
@media (max-width:680px){
  .slist--wide{grid-template-columns:1fr}
  .slist--wide > li:nth-child(2),.slist--wide > li:nth-child(3){
    padding-top:clamp(1.1rem,2.2vh,1.6rem);
    border-top:1px solid var(--line)}
}

/* --- pinned profiles -----------------------------------------
   The three directors occupy one screen between them. Each pane is
   sticky at the top AND pulled back by its own height, so they all land
   on the same spot and nothing slides: the page scrolls, the panes do
   not move, and the next bio is revealed over the one before it.

   Opacity is driven from the scroll position in site.js, which also
   adds .is-live — without it, or under reduced motion, these are three
   ordinary stacked sections. */
.pinstack{position:relative}
.pinstack > .prof{background:var(--white); border-top:1px solid var(--line)}
.pinstack > .prof:first-child{border-top:0}

.pinstack.is-live{height:calc(var(--panes,3) * 100svh)}
.pinstack.is-live > .prof{position:sticky; top:0; height:100svh;
  margin-bottom:-100svh; display:grid; align-content:center;
  padding-block:clamp(.75rem,1.6vh,1.4rem); border-top:0;
  opacity:var(--o,1); will-change:opacity}
.pinstack.is-live .direct{gap:clamp(1.5rem,3.5vw,3.5rem); align-items:center}
.pinstack.is-live .direct__body h2{margin-bottom:.25rem}
.pinstack.is-live .direct__body .lede{
  font-size:clamp(1.02rem,.98rem + .3vw,1.15rem); margin-bottom:.85rem}
.pinstack.is-live .direct__body p{font-size:.9rem; line-height:1.62}
.pinstack.is-live .direct__body p + p{margin-top:.7rem}
.pinstack.is-live .dbtn{margin-top:1.25rem}
.pinstack.is-live .direct__media .team__shot{max-height:58svh}

/* --- the service list ---------------------------------------- */
.slist{list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; gap:clamp(1.1rem,2.2vh,1.6rem)}
.slist > li{display:grid; grid-template-columns:3.6rem minmax(0,1fr);
  gap:.5rem; padding-top:clamp(1.1rem,2.2vh,1.6rem);
  border-top:1px solid var(--line)}
.slist > li:first-child{padding-top:0; border-top:0}
.slist__num{font-family:var(--f-label); font-size:1rem; letter-spacing:.14em;
  color:var(--sage); padding-top:.2em}
.slist h3{margin:0 0 .6rem; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.14; color:var(--ink)}
.slist p{margin:0; font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.65;
  color:var(--ink-soft); max-width:46ch}
/* the lines a service actually buys, set under it */
.vband__lede{margin:1.1rem 0 0; font-size:clamp(.9375rem,1.05vw,1.0625rem);
  line-height:1.72; color:rgba(251,247,239,.82); max-width:46ch}
.slist__pts{list-style:none; margin:.9rem 0 0; padding:0;
  display:grid; gap:.45rem}
.slist__pts li{position:relative; padding-left:1.25rem;
  font-size:clamp(.9375rem,1.05vw,1.05rem); line-height:1.6;
  color:var(--ink-soft)}
.slist__pts li::before{content:""; position:absolute; left:0; top:.62em;
  width:.32rem; height:1px; background:var(--sage)}

/* three across: the block is the list, so it gets the page width */
.slist--wide{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,2.8vh,2.4rem) clamp(2rem,4vw,4rem); margin-top:clamp(2.5rem,5vh,3.5rem)}
.slist--wide > li:nth-child(-n+3){padding-top:0; border-top:0}
.bhead{max-width:52rem}
.bhead .vband__head{color:var(--ink)}
.bhead .vband__lede{color:var(--ink-soft)}
/* and on a dark ground it all comes back up */
.band .bhead .vband__head,.band .slist h3{color:var(--paper)}
.band .bhead .vband__lede,.band .slist p,.band .slist__pts li{
  color:rgba(251,247,239,.78)}
.band .slist > li{border-top-color:rgba(251,247,239,.16)}
.vband__note .slist h3{color:var(--paper)}
.vband__note .slist p,.vband__note .slist__pts li{color:rgba(251,247,239,.78)}
.vband__note .slist > li{border-top-color:rgba(251,247,239,.16)}
@media (max-width:1000px){
  .slist--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slist--wide > li:nth-child(3){padding-top:clamp(1.1rem,2.2vh,1.6rem);
    border-top:1px solid var(--line)}
}
@media (max-width:680px){
  .slist--wide{grid-template-columns:1fr}
  .slist--wide > li:nth-child(2),.slist--wide > li:nth-child(3){
    padding-top:clamp(1.1rem,2.2vh,1.6rem);
    border-top:1px solid var(--line)}
}

/* the heading holds the first of three columns and the list takes the
   other two, so the block reads across the page instead of stacking a
   wide header above a wide list */
.getgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem)}
.getgrid .bhead{grid-column:1; max-width:none}
.getgrid .slist{grid-column:2 / -1; margin-top:0}
.slist--pair{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,2.8vh,2.4rem) clamp(2rem,4vw,4rem)}
.slist--pair > li:nth-child(-n+2){padding-top:0; border-top:0}
@media (max-width:1100px){
  .getgrid{grid-template-columns:1fr}
  .getgrid .bhead,.getgrid .slist{grid-column:1 / -1}
  .getgrid .slist{margin-top:clamp(2rem,4vh,3rem)}
}
@media (max-width:680px){
  .slist--pair{grid-template-columns:1fr}
  .slist--pair > li:nth-child(2){padding-top:clamp(1.1rem,2.2vh,1.6rem);
    border-top:1px solid var(--line)}
}

/* a subheading inside the contact form, so the fields read as two asks
   rather than one long column */
.form__head{margin:0; font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  color:var(--sage-soft)}
.form__head + *{margin-top:-.4rem}

/* the live residence's own link, under its measurements */
.reel__go{display:inline-flex; justify-self:center; align-self:center;
  opacity:0; visibility:hidden; pointer-events:none;
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--white);
  /* the same glass as the arrows under it: sage type alone disappeared
     against the bright parts of the photography */
  background:rgba(34,53,70,.34); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.55); padding:1em 2.1em;
  position:relative; isolation:isolate; overflow:hidden;
  transition:color .55s var(--fill-ease), border-color .45s var(--ease)}
.reel__go::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--sage); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--fill-ease)}
.reel__go:hover{color:var(--btn-ink); border-color:var(--sage)}
.reel__go:hover::before{transform:scaleY(1)}
.reel__go{transition:opacity .8s var(--ease), visibility .8s var(--ease),
  color .55s var(--fill-ease), border-color .45s var(--ease)}
.reel__go.on{opacity:1; visibility:visible; pointer-events:auto}

/* the map answers the intro directly above it, so the seam between them
   closes up from two full gutters to about one */
.section--tightup{padding-top:clamp(1.5rem,3vh,2.5rem)}

/* --- back to where you came from ------------------------------
   Only on the deep headers, which are the pages you arrive at from
   somewhere else: a beach from the guide, a house from the collection.
   Top left of the header itself rather than the bar, so it reads as
   part of the page and not as another nav item. */
.pback{position:absolute; left:var(--pad); top:clamp(7.5rem,13vh,9.5rem);
  display:inline-flex; align-items:center; gap:.7em; z-index:2;
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none;
  color:rgba(251,247,239,.72);
  transition:color .35s var(--ease), gap .35s var(--ease)}
.pback:hover{color:var(--paper); gap:1em}
.pback svg{flex:none}
@media (max-width:900px){
  .pback{top:clamp(6rem,11vh,7.5rem); font-size:.5625rem}
}

/* --- the enquiry form ----------------------------------------
   Details on the left, the form beside them. Two asks in the fields and
   a third for anything that does not fit, so a long form still reads as
   three short ones. */
.enq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,5rem); margin-top:clamp(2.5rem,5vh,3.5rem)}
.enq__aside{display:grid; align-content:start; gap:clamp(1.5rem,3vh,2.25rem)}
.enq__note{margin:0; font-size:.875rem; color:var(--ink-soft); max-width:34ch}
.enq__note a{color:var(--seaglass)}
.enq__small{margin:0; font-size:.8125rem; color:var(--ink-soft)}
/* the form sits on an off-white panel so it reads as one object on the
   page, with the fields themselves left white against it */
.enq__form{background:#F6F5F2; padding:clamp(1.5rem,3vw,2.5rem)}
.enq__form select{appearance:none; cursor:pointer}
.enq__form label{display:grid; gap:.5rem}
.enq__form .form__row{display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.75rem,1.5vw,1.25rem)}
.enq__form textarea{min-height:7rem}
.enq__form .form__check{display:flex; align-items:flex-start; gap:.75rem;
  font-size:.875rem; color:var(--ink-soft)}
.enq__form .form__check input{width:auto; margin-top:.2rem; padding:0;
  accent-color:var(--sage)}
.enq__form .form__head{color:var(--ink-soft); margin-top:.5rem}
.enq__form .form__head:first-child{margin-top:0}
@media (max-width:900px){
  .enq{grid-template-columns:1fr}
  .enq__form .form__row{grid-template-columns:1fr}
}

/* air above and below the block, where it lands between two full
   sections rather than butting onto a band */
.direct--pad{padding-block:clamp(2.5rem,6vh,4.5rem)}

/* the copy column sets the height and the footage fills whatever it
   needs, for a band carrying more than a standing note */
.vband--fill .vband__media{aspect-ratio:auto; height:100%; min-height:100%}
.vband--fill .vband__media video,
.vband--fill .vband__media img{width:100%; height:100%; object-fit:cover;
  display:block}
.vband--fill .vband__note{gap:0}
/* a longer heading in a narrow column, so it sits between the standing
   note size and the page h2 */
.vband--fill .vband__head{font-size:clamp(1.8rem,2.6vw,2.4rem);
  line-height:1.1; margin-bottom:.35rem}
.vband--fill .vband__note p + p{margin-top:1.1rem}
@media (max-width:900px){
  .vband--fill .vband__media{aspect-ratio:16/9; height:auto; min-height:0}
}

/* --- the collection, running -------------------------------
   The other five houses on a marquee. The set is written twice and the
   track travels exactly one set, so the loop closes on itself with
   nothing to reset. Pauses on hover and stops outright under
   prefers-reduced-motion, where it becomes a rail you can push. */
.mq{position:relative; background:var(--white);
  padding-block:clamp(3rem,7vh,5rem); overflow:hidden}
.mq__head{display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem 4rem; flex-wrap:wrap; padding-inline:var(--pad);
  padding-bottom:clamp(1.75rem,3.5vh,2.5rem)}
.mq__head h2{margin:0}
.mq__head .label{margin:0 0 .8rem}
.mq__rail{display:flex; width:max-content;
  animation:mqrun 52s linear infinite}
.mq:hover .mq__rail{animation-play-state:paused}
.mq__rail a{display:block; flex:none; position:relative; overflow:hidden;
  width:clamp(16rem,24vw,22rem); aspect-ratio:4/3;
  margin-right:clamp(.75rem,1.4vw,1.25rem); text-decoration:none}
.mq__rail img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.4s var(--ease)}
.mq__rail a:hover img{transform:scale(1.07)}
.mq__rail a::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(34,53,70,0) 42%, rgba(34,53,70,.62) 76%,
  rgba(34,53,70,.9) 100%)}
.mq__rail span{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1rem,1.8vw,1.5rem); color:var(--paper);
  font-family:var(--f-label); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase}
.mq__rail b{display:block; margin-bottom:.45rem; font-family:var(--f-display);
  font-weight:400; font-size:clamp(1.15rem,1.6vw,1.45rem); letter-spacing:0;
  text-transform:none; color:var(--paper)}
@keyframes mqrun{
  from {transform:translate3d(0,0,0)}
  to   {transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .mq__rail{animation:none; width:auto; overflow-x:auto;
    scroll-snap-type:x mandatory; padding-inline:var(--pad)}
  .mq__rail a{scroll-snap-align:start}
  /* the second set is only there to close the loop */
  .mq__rail a:nth-child(n+6){display:none}
}

/* --- the phone menu -------------------------------------------
   Full screen, on the off-white, the main links set large in the
   display face with the residences and the guide under a rule. The
   items rise in on a short stagger; under reduced motion they simply
   appear. */
.nav__toggle{min-width:2.75rem; min-height:2.75rem}
.mm-open, .mm-open body{overflow:hidden}
.mmenu{position:fixed; inset:0; z-index:120; overflow-y:auto;
  overscroll-behavior:contain; background:#F6F5F2; color:var(--ink);
  display:flex; flex-direction:column;
  padding:0 var(--pad) max(1.5rem, env(safe-area-inset-bottom));
  opacity:0; transition:opacity .5s var(--fill-ease)}
.mmenu[hidden]{display:none}
.mmenu.is-open{opacity:1}
.mmenu ul{list-style:none; margin:0; padding:0}
.mmenu a{text-decoration:none; color:inherit}
.mmenu__bar{display:flex; align-items:center; justify-content:space-between;
  min-height:4.5rem; padding-top:env(safe-area-inset-top)}
.mmenu__close{width:2.75rem; height:2.75rem; margin-left:-.6rem; display:grid;
  place-items:center; background:none; border:0; color:var(--ink); cursor:pointer}
.mmenu__mark img{width:3.4rem; height:auto; display:block}
.mmenu__lbl{margin:0 0 1rem; font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.mmenu__main{padding:clamp(1.5rem,6vh,3.5rem) 0 clamp(1.75rem,5vh,2.75rem)}
.mmenu__main li + li{margin-top:.15rem}
.mmenu__main a{display:inline-block; font-family:var(--f-display);
  font-weight:400; font-size:clamp(2.35rem,10.5vw,3.6rem); line-height:1.12;
  letter-spacing:.005em; padding:.1rem 0}
.mmenu__main a[aria-current]{color:var(--seaglass)}
.mmenu__main a[aria-current]::after{content:""; display:inline-block;
  width:.4rem; height:.4rem; margin-left:.6rem; border-radius:50%;
  background:var(--sage); vertical-align:middle}
.mmenu__sub{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 1.25rem;
  padding:clamp(1.75rem,4.5vh,2.5rem) 0; border-top:1px solid var(--line)}
.mmenu__sub li + li{margin-top:.8rem}
.mmenu__sub a{font-size:.975rem; color:var(--ink)}
.mmenu__foot{margin-top:auto; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase}
.mmenu__foot a{color:var(--ink-soft); min-height:2.75rem; display:inline-flex;
  align-items:center}
/* the stagger */
.mmenu__main li, .mmenu__sub > div, .mmenu__foot{opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .7s var(--fill-ease), transform .7s var(--fill-ease)}
.mmenu.is-open .mmenu__main li, .mmenu.is-open .mmenu__sub > div,
.mmenu.is-open .mmenu__foot{opacity:1; transform:none}
.mmenu.is-open .mmenu__main li:nth-child(1){transition-delay:.08s}
.mmenu.is-open .mmenu__main li:nth-child(2){transition-delay:.13s}
.mmenu.is-open .mmenu__main li:nth-child(3){transition-delay:.18s}
.mmenu.is-open .mmenu__main li:nth-child(4){transition-delay:.23s}
.mmenu.is-open .mmenu__main li:nth-child(5){transition-delay:.28s}
.mmenu.is-open .mmenu__main li:nth-child(6){transition-delay:.33s}
.mmenu.is-open .mmenu__main li:nth-child(7){transition-delay:.38s}
.mmenu.is-open .mmenu__sub > div{transition-delay:.4s}
.mmenu.is-open .mmenu__foot{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .mmenu, .mmenu__main li, .mmenu__sub > div, .mmenu__foot{transition:none;
    transform:none}
}
@media (min-width:1081px){ .mmenu{display:none} }

/* ============================================================
   PHONE
   The desktop compositions — photographs orbiting the type, a collage
   around the welcome, cards in a grid — each get a phone form that
   keeps the idea rather than collapsing into a stack.
   ============================================================ */

/* the strip the orbit figures now live in: on desktop it is simply the
   section's own box, so every figure lands where it always did */
.orbit__strip{position:absolute; inset:0; z-index:1; pointer-events:none}
.orbit__track{position:absolute; inset:0}
.orbit__copy{display:none}

@media (max-width:820px){
  :root{--gutter:clamp(3.25rem,9vh,5.5rem)}

  /* orbit: the type, then the photographs running as a band beneath it */
  .orbit{display:flex; flex-direction:column; min-height:0; text-align:center;
    padding:clamp(3.5rem,9vh,5rem) 0 clamp(2.5rem,7vh,4rem)}
  /* the strip is the first child so desktop can place against it; on a
     phone it belongs after the type */
  .orbit__mid{order:1}
  .orbit__strip{order:2}
  .orbit__mid{margin:0 auto clamp(2.25rem,5vh,3rem); padding-inline:var(--pad)}
  .orbit__strip{position:relative; inset:auto; overflow:hidden;
    pointer-events:auto}
  .orbit__track{position:relative; inset:auto; display:flex;
    width:max-content; animation:mqrun 46s linear infinite}
  .orbit figure, .orbit__copy{display:block !important;
    position:relative !important; inset:auto !important;
    width:clamp(9.5rem,40vw,13rem) !important; aspect-ratio:4/5 !important;
    flex:none; margin:0 .6rem 0 0; transform:none !important;
    animation:none !important; opacity:1 !important}
  .orbit figure:nth-of-type(even){margin-top:1.5rem}

  /* cross-links: a rail you swipe, rather than four full-width cards
     stacked a screen and a half deep */
  .cross, .cross--4{display:flex !important; gap:.75rem; overflow-x:auto;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);
    scroll-padding-inline:var(--pad); scrollbar-width:none}
  .cross::-webkit-scrollbar{display:none}
  .cross > a{flex:0 0 min(78vw,20rem); scroll-snap-align:start}

  /* the property booking rail reads left to right on a phone */
  .prop__intro{margin-left:0; text-align:left}
  .prop__shot{display:none}
  .prop__widget{min-height:24rem}

  /* split bands and offset panels had desktop-sized air around them */
  .direct__media{padding:clamp(1.5rem,4vh,2.5rem) var(--pad) 0}
  .direct__body{padding-block:clamp(1.75rem,5vh,2.75rem)}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .orbit__track{animation:none; width:auto; overflow-x:auto;
    padding-inline:var(--pad)}
  .orbit__copy{display:none !important}
}

/* the burger: three hairlines, the middle one short */
.nav__toggle{display:none; place-items:center}
.nav__toggle .burger{display:block}
/* matches the width at which the link row hides */
@media (max-width:960px){ .nav__toggle{display:grid} }

/* phone rails: the arrows and count only exist on a phone */
.railnav{display:none}
@media (max-width:820px){
  .pkggrid{display:flex !important; gap:.75rem; overflow-x:auto;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad);
    scroll-padding-inline:var(--pad); scrollbar-width:none}
  .pkggrid::-webkit-scrollbar{display:none}
  .pkggrid .pkg__card{flex:0 0 min(80vw,21rem); scroll-snap-align:start}
  .railnav{display:flex; align-items:center; gap:.9rem;
    margin-top:clamp(1.1rem,2.5vh,1.5rem)}
  .railnav__at{margin-left:.35rem; font-family:var(--f-label);
    font-size:.6875rem; letter-spacing:.2em; color:var(--ink-soft)}
  .band .railnav__at{color:rgba(251,247,239,.7)}
}

/* the four extra collage images only exist on a phone */
.collage__more{display:none !important}

@media (max-width:820px){
  /* home header: the title had no auto margins, so on a narrow screen it
     sat left of centre with the rest of the card centred under it */
  .title-card h1{margin-inline:auto}

  /* welcome: eight small photographs scattered above and below the type,
     the way the desktop floats four around it, rather than a stack */
  .collage{display:grid; grid-template-columns:repeat(6,1fr);
    gap:.55rem; align-items:start;
    padding-block:clamp(1.75rem,4vh,2.5rem)}
  .collage figure, .collage__more{display:block !important;
    transform:none !important; opacity:1; margin:0; overflow:hidden}
  .collage__body{grid-column:1 / -1; grid-row:3; padding:1.5rem .25rem 1.75rem}
  /* above the type */
  .collage figure:nth-of-type(1){grid-column:1 / 3 !important; grid-row:1 !important;
    aspect-ratio:3/4 !important}
  .collage figure:nth-of-type(5){grid-column:3 / 5 !important; grid-row:1 !important;
    aspect-ratio:1 !important; margin-top:1.75rem}
  .collage figure:nth-of-type(3){grid-column:5 / 7 !important; grid-row:1 !important;
    aspect-ratio:4/5 !important; margin-top:.6rem}
  .collage figure:nth-of-type(6){grid-column:2 / 4 !important; grid-row:2 !important;
    aspect-ratio:4/3 !important; margin-top:-1.25rem; width:88%; justify-self:end}
  /* below the type */
  .collage figure:nth-of-type(2){grid-column:1 / 3 !important; grid-row:4 !important;
    aspect-ratio:1 !important; margin-top:.9rem}
  .collage figure:nth-of-type(7){grid-column:3 / 5 !important; grid-row:4 !important;
    aspect-ratio:3/4 !important}
  .collage figure:nth-of-type(4){grid-column:5 / 7 !important; grid-row:4 !important;
    aspect-ratio:4/5 !important; margin-top:1.4rem}
  .collage figure:nth-of-type(8){grid-column:4 / 6 !important; grid-row:5 !important;
    aspect-ratio:4/3 !important; margin-top:-.9rem; width:88%}

  /* concierge's one-number block: the flipped media carried its desktop
     padding on all four sides, so the photograph sat under 118px of air */
  .direct--pad{padding-block:0}
  .direct .direct__media, .direct--flip .direct__media{
    padding:clamp(1.25rem,3vh,2rem) var(--pad) 0}
  .direct .direct__body, .direct--flip .direct__body{
    padding:clamp(1.5rem,4vh,2.25rem) var(--pad) clamp(2rem,5vh,3rem)}
}

/* --- the bay on a phone ----------------------------------------
   The same idea as desktop: the headings float, and one photograph
   underneath changes to whichever is tapped. Previously each heading
   carried its own image and paragraph inline, five full blocks deep. */
@media (max-width:960px){
  .bay{display:grid; grid-template-columns:1fr; gap:clamp(1.25rem,3vh,1.75rem)}
  .bay__index{order:1; display:flex; flex-wrap:wrap; justify-content:center;
    align-items:baseline; gap:.35rem 1.9rem; padding:.5rem 0}
  .bay__index li{margin:0 !important;
    animation:drift var(--dur,15s) ease-in-out infinite !important;
    animation-delay:var(--delay,0s) !important;
    --dx:.35rem; --dy:-.3rem}
  .bay__index li:nth-child(2n){--dx:-.4rem; --dy:.35rem}
  .bay__index li:nth-child(2){margin-top:.9rem !important}
  .bay__index li:nth-child(4){margin-top:.6rem !important}
  .bay__link{font-size:clamp(1.55rem,7.2vw,2.15rem) !important;
    opacity:.36; white-space:nowrap}
  .bay__link.on{opacity:1; transform:none}
  .bay__inline{display:none !important}
  .bay__panel{display:block !important; order:2; width:100% !important;
    aspect-ratio:4/5; max-height:none; justify-self:stretch}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .bay__index li{animation:none !important}
}

@media (max-width:820px){
  /* the guide tabs sit on two lines: Beaches, Restaurants and Activities
     across the first, the other two under them */
  .guidebar .tabs{gap:.5rem}
  .guidebar .tabs [role="tab"]{padding:.85em 1.05em; letter-spacing:.15em}
  /* management: the stand-in photograph beside Who looks after it is
     dropped on a phone, where it was a screen of house before the copy */
  #who .direct__media{display:none}
}

/* --- director bios: Read more on a phone ------------------------ */
.bio__toggle{display:none}
@media (max-width:820px){
  .bio__more{display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .55s var(--fill-ease), opacity .45s var(--ease)}
  .bio__inner{overflow:hidden; min-height:0}
  .bio__more.is-open{grid-template-rows:1fr; opacity:1}
  .bio__inner > p:first-child{margin-top:.9rem}
  .bio__inner > p + p{margin-top:.85rem}
  .bio__toggle{display:inline-flex; align-items:center; gap:.6rem;
    margin-top:1.1rem; min-height:2.75rem; padding:0; background:none; border:0;
    border-bottom:1px solid var(--sage); cursor:pointer;
    font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink)}
  .bio__toggle svg{transition:transform .45s var(--fill-ease)}
  .bio__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .bio__more, .bio__toggle svg{transition:none}
}

/* stay: the kitchen photograph beside Straight to us is dropped on a
   phone, where the collection above has already shown the houses */
@media (max-width:820px){ #direct .direct__media{display:none} }

/* home welcome on a phone: the section gutter and the collage's own
   padding were stacking into 132px above the first photograph */
@media (max-width:820px){
  #position{padding-block:clamp(1.25rem,3vh,1.75rem) clamp(2rem,5vh,2.75rem)}
  #position .collage{padding-block:0}
  #position .collage__body{padding:1.1rem .25rem 1.25rem}
}

@media (max-width:900px){
  /* home owners block: the copy leads on a phone, the video follows */
  #owners .direct__body{grid-row:1 !important}
  #owners .direct__media{grid-row:2 !important;
    padding:0 var(--pad) clamp(2rem,5vh,3rem) !important}
}
@media (max-width:960px){
  /* the bay words: a smaller drift and wider gaps, so a word at the far
     point of its drift never touches its neighbour */
  .bay__index{gap:.5rem 2.2rem !important}
  .bay__index li{--dx:.15rem !important; --dy:-.2rem !important}
  .bay__index li:nth-child(2n){--dx:-.15rem !important; --dy:.2rem !important}
}

/* the concierge timeline has no arrows of its own; on a phone it gets
   the same pair management has, drawn in by site.js */
@media (min-width:901px){ .tline__nav--added{display:none} }

/* property pages: on a phone the collection marquee stops and becomes a
   rail you swipe, with the same arrows and count as every other rail */
@media (max-width:820px){
  .mq__rail{animation:none; width:auto; display:flex; overflow-x:auto;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    padding-inline:var(--pad); scroll-padding-inline:var(--pad);
    scrollbar-width:none}
  .mq__rail::-webkit-scrollbar{display:none}
  .mq__rail a{scroll-snap-align:start; width:min(78vw,20rem)}
  .mq__rail a:nth-child(n+6){display:none}
  .mq .railnav{padding-inline:var(--pad)}
}

/* ============================================================
   SHOP
   A simple retail layout on the Mecca pattern: gallery left, the
   product and one clear action right, the rest in accordions. The
   ground stays white and the product photography does the work.
   ============================================================ */
.shopgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem)}
.shopgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shopcard{display:grid; gap:.35rem; text-decoration:none; color:var(--ink)}
.shopcard__img{position:relative; display:block; aspect-ratio:4/5;
  overflow:hidden; background:#F6F5F2; margin-bottom:.75rem}
.shopcard__img img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:opacity .7s var(--fill-ease), transform 1.4s var(--ease)}
.shopcard__alt{opacity:0}
.shopcard:hover .shopcard__alt, .shopcard:focus-visible .shopcard__alt{opacity:1}
.shopcard:hover .shopcard__img img{transform:scale(1.03)}
.shopcard__name{font-family:var(--f-display); font-size:clamp(1.2rem,1.6vw,1.45rem);
  line-height:1.2}
.shopcard__kick{font-size:.875rem; color:var(--ink-soft)}
.shopcard__price{margin-top:.2rem; font-family:var(--f-label); font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sage)}

/* product page */
.pdp{padding-top:clamp(7rem,13vh,9rem); padding-bottom:clamp(3rem,7vh,5rem)}
.pdp__crumbs{display:flex; gap:.6rem; margin-bottom:clamp(1.25rem,3vh,2rem);
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft)}
.pdp__crumbs a{color:var(--ink-soft); text-decoration:none}
.pdp__crumbs a:hover{color:var(--ink)}
.pdp__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem); align-items:start}
.pdp__gallery{display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:1rem;
  position:sticky; top:6.5rem}
.pdp__main{grid-column:2; aspect-ratio:4/5; overflow:hidden; background:#F6F5F2}
.pdp__main img{width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .45s var(--ease)}
.pdp__main img.is-swapping{opacity:0}
.pdp__thumbs{grid-column:1; grid-row:1; display:grid; gap:.6rem; align-content:start}
.pdp__thumb{padding:0; border:1px solid transparent; background:#F6F5F2;
  aspect-ratio:4/5; cursor:pointer; overflow:hidden; opacity:.55;
  transition:opacity .35s var(--ease), border-color .35s var(--ease)}
.pdp__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pdp__thumb:hover{opacity:.85}
.pdp__thumb.is-on{opacity:1; border-color:var(--ink)}
.pdp__info{padding-top:.5rem; max-width:34rem}
.pdp__brand{margin:0 0 .6rem}
.pdp__title{margin:0; font-size:clamp(2.1rem,3.6vw,3.1rem); line-height:1.08}
.pdp__kicker{margin:.6rem 0 0; color:var(--ink-soft)}
.pdp__price{margin:1.25rem 0 0; font-family:var(--f-label); font-size:.8125rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink)}
.pdp__lede{margin:1.4rem 0 0; font-size:1.02rem; line-height:1.7; color:var(--ink)}
.pdp__opts{border:0; padding:0; margin:1.75rem 0 0}
.pdp__opts legend{margin-bottom:.7rem}
.pdp__pills{display:flex; flex-wrap:wrap; gap:.5rem}
.pdp__pill input{position:absolute; opacity:0; pointer-events:none}
.pdp__pill span{display:inline-flex; align-items:center; min-height:2.75rem;
  padding:0 1.2rem; border:1px solid var(--line); cursor:pointer;
  font-size:.9rem; transition:border-color .3s var(--ease)}
.pdp__pill input:checked + span{border-color:var(--ink)}
.pdp__pill input:focus-visible + span{outline:2px solid var(--sage); outline-offset:2px}
.pdp__colour{display:flex; align-items:center; gap:.7rem; margin-top:1.5rem;
  font-size:.9rem}
.pdp__colour .label{margin:0 .4rem 0 0}
.pdp__swatch{width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--sage); box-shadow:0 0 0 1px #fff, 0 0 0 2px var(--ink)}
.pdp__cta{width:100%; margin-top:1.9rem; min-height:3.4rem}
.pdp__note{margin:.9rem 0 0; font-size:.8125rem; line-height:1.6; color:var(--ink-soft)}
.pdp__acc{margin-top:2.25rem; border-top:1px solid var(--line)}
.pdp__acc details{border-bottom:1px solid var(--line)}
.pdp__acc summary{list-style:none; cursor:pointer; display:flex;
  justify-content:space-between; align-items:center; min-height:3.6rem;
  font-family:var(--f-label); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink)}
.pdp__acc summary::-webkit-details-marker{display:none}
.pdp__acc summary::after{content:""; width:.55rem; height:.55rem;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .35s var(--ease)}
.pdp__acc details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.pdp__acc p, .pdp__acc ul{margin:0 0 1.4rem; font-size:.95rem; line-height:1.7;
  color:var(--ink-soft)}
.pdp__acc ul{padding-left:1.1rem}
.pdp__acc li + li{margin-top:.3rem}
.pdp__small{font-size:.8125rem !important}
.pdp__pairsec{border-top:1px solid var(--line)}

/* express interest */
.interest__lede{margin:.4rem 0 1.5rem; color:var(--ink-soft)}
#interest .enq__form{padding:0; background:none}
.interest__done .btn{margin-top:1.5rem}

@media (max-width:1000px){
  .shopgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shopgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .pdp{padding-top:6rem}
  .pdp__grid{grid-template-columns:1fr}
  .pdp__gallery{position:static; grid-template-columns:1fr}
  .pdp__main{grid-column:1}
  .pdp__thumbs{grid-column:1; grid-row:2; grid-template-columns:repeat(3,4.5rem)}
  .shopgrid--3{display:flex; gap:.75rem; overflow-x:auto;
    scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad); scrollbar-width:none}
  .shopgrid--3::-webkit-scrollbar{display:none}
  .shopgrid--3 .shopcard{flex:0 0 min(62vw,16rem); scroll-snap-align:start}
}
/* the one action on a product page is filled, the way a retail page
   marks its buy button; the sage rises over it on hover */
.pdp__cta{background:var(--harbour); border-color:var(--harbour);
  color:var(--white); letter-spacing:.2em}
.pdp__cta::before{background:var(--sage) !important}
.pdp__cta:hover{color:var(--btn-ink); border-color:var(--sage)}

/* --- read more: a long block folded to its first paragraph -------
   Used on property pages, where HomHero's description can run to six
   or seven paragraphs. Works at every width. */
.more{display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .6s var(--fill-ease), opacity .45s var(--ease)}
.more__in{overflow:hidden; min-height:0}
.more.is-open{grid-template-rows:1fr; opacity:1}
.more__in > p:first-child{margin-top:1rem}
.more__toggle{display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.1rem; min-height:2.75rem; padding:0; background:none; border:0;
  border-bottom:1px solid var(--sage); cursor:pointer;
  font-family:var(--f-label); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink)}
.more__toggle svg{transition:transform .45s var(--fill-ease)}
.more__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .more, .more__toggle svg{transition:none} }