/* =============================================================
   Ion Residence — main stylesheet
   One file, no build step. Sections:
   1. Tokens / reset
   2. Typography
   3. Layout helpers
   4. Header + navigation
   5. Footer
   6. Hero
   7. Sections & editorial blocks
   8. Buttons & links
   9. Gallery + lightbox
   10. Forms
   11. Utilities, motion, responsive
   ============================================================= */

/* 1. Tokens / reset ------------------------------------------------ */
:root{
  --paper:#f6f4ef;        /* warm off-white / bone            */
  --paper-2:#efece4;       /* section tint                     */
  --stone:#e7e2d8;         /* cards / hairline fills           */
  --ink:#1f1e1b;           /* near-black, warm                 */
  --ink-soft:#3c3a35;
  --muted:#6d6a62;         /* secondary text                  */
  --line:#d9d4c9;          /* hairlines                        */
  --accent:#3c4a43;        /* deep muted eucalyptus            */
  --accent-ink:#2c3832;

  --measure:42rem;         /* text column                      */
  --wrap:78rem;            /* content width                    */
  --wrap-wide:88rem;       /* wide imagery                     */
  --gutter:clamp(1.25rem, 5vw, 4rem);

  --step--1:clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:clamp(2rem, 1.6rem + 2vw, 3.15rem);
  --step-4:clamp(2.6rem, 1.9rem + 3.4vw, 4.75rem);
  --step-5:clamp(3.1rem, 2rem + 5.4vw, 6.5rem);

  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:4.75rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 2. Typography -------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  color:var(--ink);
  letter-spacing:.005em;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{max-width:var(--measure)}
strong{font-weight:600;color:var(--ink)}

.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--step-5);
  line-height:1.02;
  letter-spacing:.01em;
}
.lead{
  font-size:var(--step-1);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:36rem;
}
.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.4rem;
}
.serif-note{
  font-family:var(--serif);
  font-size:var(--step-2);
  font-weight:300;
  font-style:italic;
  line-height:1.4;
  color:var(--ink);
  max-width:34rem;
}

/* 3. Layout helpers ------------------------------------------------ */
.wrap{width:min(var(--wrap), 100% - (var(--gutter) * 2));margin-inline:auto}
.wrap-wide{width:min(var(--wrap-wide), 100% - (var(--gutter) * 2));margin-inline:auto}
.section{padding-block:clamp(3rem, 6vw, 5.5rem)}
.section--tight{padding-block:clamp(2.25rem, 4vw, 3.5rem)}
.section--tint{background:var(--paper-2)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink .serif-note{color:var(--paper)}
.section--ink .eyebrow{color:#a9a49a}

.stack > * + *{margin-top:1.25rem}
.stack-lg > * + *{margin-top:2rem}

/* skip link */
.skip-link{
  position:absolute;left:1rem;top:-3rem;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;border-radius:2px;text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 4. Header + navigation ---------------------------------------- */
/* Over a hero photo: white text on a solid-enough dark, blurred panel — kept
   deliberately more opaque than a subtle fade so it reads clearly regardless
   of how bright the photo behind it is. Once scrolled past the hero (or on
   pages with no hero at all) it switches to plain paper with dark ink text,
   matching the page content below it. */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  color:var(--paper);
  /* Plain translucent bar, deliberately no backdrop-filter: that would make
     the header the containing block for the fixed mobile menu and collapse
     the menu to the height of the bar. */
  background:rgba(17,16,14,.66);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-solid,
.site-header.is-open,
body.has-solid-header .site-header{
  background:var(--paper);
  color:var(--ink);
  border-bottom-color:var(--line);
}
.site-header a{text-decoration:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:min(var(--wrap-wide), 100% - (var(--gutter) * 2));margin-inline:auto}

.brand{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.34em;
  font-size:.95rem;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav-menu{
  display:flex;align-items:center;gap:2.25rem;
  font-size:.82rem;letter-spacing:.06em;
}
.nav-menu a{position:relative;padding-block:.4rem;opacity:.92;transition:opacity .2s var(--ease)}
.nav-menu a:hover{opacity:1}
.nav-menu a[aria-current="page"]{opacity:1}
.nav-menu a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;
}
.nav-cta{
  border:1px solid currentColor;border-radius:999px;
  padding:.55rem 1.15rem!important;opacity:.75;
  transition:opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover{opacity:1;background:currentColor}
.site-header:not(.is-solid):not(.is-open) .nav-cta:hover{color:var(--ink)}
.site-header.is-solid .nav-cta:hover,
.site-header.is-open .nav-cta:hover,
body.has-solid-header .nav-cta:hover{color:var(--paper)}

.nav-toggle{
  display:none;
  width:2.75rem;height:2.75rem;
  background:none;border:0;cursor:pointer;
  position:relative;margin-right:-.6rem;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after{
  content:"";position:absolute;left:50%;width:1.5rem;height:1px;background:currentColor;
  transform:translateX(-50%);transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bar{top:50%}
.nav-toggle-bar::before{top:-.4rem}
.nav-toggle-bar::after{top:.4rem}
.site-header.is-open .nav-toggle-bar{background:transparent}
.site-header.is-open .nav-toggle-bar::before{transform:translateX(-50%) rotate(45deg);top:0}
.site-header.is-open .nav-toggle-bar::after{transform:translateX(-50%) rotate(-45deg);top:0}

@media (max-width:900px){
  .nav-toggle{display:block;z-index:2}
  .nav-menu{
    position:fixed;inset:var(--header-h) 0 0 0;
    flex-direction:column;justify-content:center;gap:1.75rem;
    background:var(--paper);color:var(--ink);
    font-size:1.35rem;letter-spacing:.02em;
    transform:translateY(calc(-100% - var(--header-h)));
    visibility:hidden;
    transition:transform .45s var(--ease), visibility 0s linear .45s;
    pointer-events:none;
  }
  .site-header.is-open .nav-menu{transform:translateY(0);visibility:visible;transition:transform .45s var(--ease), visibility 0s;pointer-events:auto}
  .nav-menu a{font-family:var(--serif)}
  .nav-cta{font-family:var(--sans)!important;font-size:.9rem;padding:.7rem 1.6rem!important;opacity:1}
}

/* 5. Footer --------------------------------------------------------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line)}
.site-footer a{text-decoration:none;color:var(--muted);transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--ink)}

.footer-cta{
  text-align:center;padding-block:clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);
}
.footer-cta h2{margin-block:.6rem 1.5rem}

.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;
  padding-block:clamp(3rem,6vw,4rem);
}
.footer-heading{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.1rem;
}
.footer-brand .brand{font-size:.95rem;margin-bottom:1rem;color:var(--ink);display:inline-block}
.footer-tag{color:var(--muted);max-width:20rem;font-size:.95rem}
.footer-social{display:flex;gap:1rem;margin-top:1.4rem}
.footer-social a{color:var(--muted);border:1px solid var(--line);border-radius:999px;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center}
.footer-social a:hover{color:var(--ink);border-color:var(--ink)}
.footer-social svg{width:1rem;height:1rem;fill:currentColor}
.footer-nav ul,.footer-contact,.footer-location{display:flex;flex-direction:column;gap:.7rem;font-size:.95rem}
.footer-location p{color:var(--muted);font-size:.95rem;line-height:1.6}

.footer-base{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.75rem;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted);letter-spacing:.02em;
}
.footer-base nav{display:flex;gap:1.5rem}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:2.5rem}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:2rem}
}

/* 6. Hero --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  color:var(--paper);
  background:var(--ink);
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(20,19,16,.72) 0%, rgba(20,19,16,.34) 38%, rgba(20,19,16,.12) 62%, rgba(20,19,16,.32) 100%);
}
.hero__title,.hero__sub{text-shadow:0 1px 24px rgba(18,17,14,.35)}
.hero__inner{
  width:min(var(--wrap-wide), 100% - (var(--gutter) * 2));
  margin-inline:auto;
  padding-bottom:clamp(3.5rem, 8vh, 7rem);
  padding-top:calc(var(--header-h) + 2rem);
}
.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--step-5);
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--paper); /* h1 sets its own ink colour globally — this overrides it for hero text */
}
.hero__sub{
  margin-top:1.5rem;
  max-width:30rem;
  font-size:var(--step-1);
  font-weight:300;
  line-height:1.5;
  color:rgba(246,244,239,.9);
}
.hero__actions{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero__scroll{
  position:absolute;left:50%;bottom:1.75rem;transform:translateX(-50%);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,244,239,.75);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hero__scroll span{width:1px;height:2.75rem;background:linear-gradient(rgba(246,244,239,.7),transparent);animation:drop 2.4s var(--ease) infinite}
/* hide the scroll cue where it would crowd the hero CTAs */
@media (max-width:900px), (max-height:720px){.hero__scroll{display:none}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* page hero (short, for interior pages) */
.page-hero{
  position:relative;min-height:70svh;display:flex;align-items:flex-end;
  color:var(--paper);isolation:isolate;
}
.page-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, rgba(20,19,16,.66), rgba(20,19,16,.14) 60%, rgba(20,19,16,.3))}
.page-hero h1,.page-hero .eyebrow{text-shadow:0 1px 20px rgba(18,17,14,.35)}
.page-hero__inner{width:min(var(--wrap-wide), 100% - (var(--gutter) * 2));margin-inline:auto;padding-bottom:clamp(3rem,7vh,5.5rem);padding-top:calc(var(--header-h) + 2rem)}
.page-hero h1{font-size:var(--step-4);letter-spacing:.02em;color:var(--paper)}
.page-hero .eyebrow{color:rgba(246,244,239,.8)}

/* 7. Sections & editorial blocks ------------------------------- */
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head p{color:var(--muted)}

/* Centred editorial opening statement (used directly under the homepage hero) */
.intro-statement{text-align:center}
.intro-statement__inner{max-width:34rem;margin-inline:auto}
.intro-statement .eyebrow{display:block}
.intro-statement .display{
  font-size:clamp(1.7rem, 1.35rem + 1.6vw, 2.6rem);
  margin-bottom:1.75rem;
}
.intro-statement__body{margin-bottom:1.75rem}
.intro-statement__body p{margin-inline:auto;font-size:.98rem}
.intro-statement__body > * + *{margin-top:1.1rem}

.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 6vw, 6rem);
  align-items:center;
}
.split--reverse .split__media{order:2}
.split__body{max-width:32rem}
.split__body .eyebrow{margin-bottom:1.1rem}
.split figure figcaption{margin-top:.85rem;font-size:.8rem;color:var(--muted);letter-spacing:.02em}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split--reverse .split__media{order:0}
}

.figure-frame{overflow:hidden;background:var(--stone)}
.figure-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.figure-frame.is-tall{aspect-ratio:4/5}
.figure-frame.is-wide{aspect-ratio:3/2}
.figure-frame.is-square{aspect-ratio:1/1}

/* Full-bleed technique deliberately avoids `transform` (left/margin-left instead):
   .reveal also animates via transform, and the two would otherwise cancel out
   whichever wins the cascade — that was the cause of the half-width image bug. */
.bleed{width:100vw;position:relative;left:50%;margin-left:-50vw}
.bleed img{width:100%;max-height:88svh;object-fit:cover}
.bleed figcaption{width:min(var(--wrap), 100% - (var(--gutter)*2));margin:.85rem auto 0;font-size:.8rem;color:var(--muted)}

/* thin panoramic banner — a quieter, shorter break between sections than .bleed */
.banner{width:100vw;position:relative;left:50%;margin-left:-50vw;overflow:hidden;
  aspect-ratio:21/6;max-height:34vh}
.banner img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.banner{aspect-ratio:3/4;max-height:52vh}}

/* feature list / spec grid */
.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.specs > div{background:var(--paper);padding:1.75rem 1.5rem}
.specs dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.specs dd{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.2}
.section--tint .specs > div{background:var(--paper-2)}

/* simple 3-up cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.card .figure-frame{margin-bottom:1.25rem;aspect-ratio:3/2}
.card h3{font-size:var(--step-1);margin-bottom:.5rem}
.card p{font-size:.95rem;color:var(--muted)}

/* "The spaces" — five tall photographs with rounded corners, spread evenly
   across the full width. Names overlaid. Below 900px: a swipeable row. */
.spaces-grid{display:flex;gap:clamp(.75rem,1.6vw,1.25rem)}
.spaces-grid figure{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:1.25rem;background:var(--stone)}
.spaces-grid img{display:block;width:100%;aspect-ratio:5/8;object-fit:cover;transition:transform 1s var(--ease)}
.spaces-grid figure:hover img{transform:scale(1.04)}
.spaces-grid figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;
  background:linear-gradient(to top,rgba(15,14,12,.6),rgba(15,14,12,0));
}
.spaces-grid figcaption{
  position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;z-index:1;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
}
.spaces-grid figure:nth-child(1) img{object-position:58% 50%}
.spaces-grid figure:nth-child(2) img{object-position:45% 50%}
.spaces-grid figure:nth-child(3) img{object-position:25% 50%}
.spaces-grid figure:nth-child(4) img{object-position:62% 50%}
.spaces-grid figure:nth-child(5) img{object-position:50% 50%}
@media (max-width:900px){
  .spaces-grid{
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);padding-bottom:.25rem;
  }
  .spaces-grid figure{flex:0 0 64%;scroll-snap-align:start;border-radius:1rem}
}

/* index list (rooms / stay inclusions) */
.rooms{border-top:1px solid var(--line)}
.rooms > li{
  display:grid;grid-template-columns:4rem 1fr;gap:1.5rem;
  padding-block:1.6rem;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.rooms .num{font-family:var(--serif);color:var(--muted);font-size:1.1rem}
.rooms h3{font-size:var(--step-1)}
.rooms p{color:var(--muted);font-size:.95rem;margin-top:.35rem}
@media (max-width:600px){.rooms > li{grid-template-columns:1fr;gap:.35rem}}

/* Award badges — logos sit quietly in greyscale, colour on hover, like a
   press/credentials strip. Swap .award-badge__placeholder for an <img> once
   the real logo files are supplied (see README). */
.award-badges{
  display:flex;flex-wrap:wrap;gap:2.5rem 3rem;align-items:flex-start;justify-content:center;
  margin-top:2.25rem;
}
.award-badge{max-width:15rem;text-align:center}
.award-badge img{max-height:5rem;width:auto;margin-inline:auto;display:block;filter:grayscale(1);opacity:.8;transition:filter .3s var(--ease), opacity .3s var(--ease)}
.award-badge:hover img{filter:none;opacity:1}
.award-badge__placeholder{
  display:flex;align-items:center;justify-content:center;
  width:11rem;height:5rem;margin-inline:auto;
  border:1px dashed var(--line);border-radius:2px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.award-badge figcaption{margin-top:1rem;font-size:.82rem;line-height:1.55;color:var(--muted)}

.quote{
  text-align:center;max-width:44rem;margin-inline:auto;
}
.quote blockquote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:var(--step-2);line-height:1.4;color:var(--ink);
}
.section--ink .quote blockquote{color:var(--paper)}
.quote cite{display:block;margin-top:1.5rem;font-family:var(--sans);font-style:normal;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* 8. Buttons & links ------------------------------------------- */
.btn{
  --btn-fg:var(--ink);--btn-bg:var(--paper);
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.9rem;border:1px solid var(--btn-fg);border-radius:999px;
  color:var(--btn-fg);background:transparent;cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{background:var(--btn-fg);color:var(--btn-bg)}
.btn--solid{background:var(--btn-fg);color:var(--btn-bg)}
.btn--solid:hover{background:transparent;color:var(--btn-fg)}
.hero .btn{--btn-fg:var(--paper);--btn-bg:var(--ink)}
.section--ink .btn{--btn-fg:var(--paper);--btn-bg:var(--ink)}

.link-underline{
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:.2rem;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:border-color .25s var(--ease)}
.link-underline:hover{border-color:var(--ink)}
.section--ink .link-underline{color:var(--paper);border-color:rgba(246,244,239,.35)}
.section--ink .link-underline:hover{border-color:var(--paper)}

a.text-link{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
a.text-link:hover{color:var(--accent-ink)}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

/* 9. Gallery + lightbox -------------------------------------- */
.gallery{
  columns:3 18rem;column-gap:1rem;
}
.gallery button{
  display:block;width:100%;margin-bottom:1rem;padding:0;border:0;background:var(--stone);
  cursor:pointer;overflow:hidden;
}
.gallery img{width:100%;transition:opacity .4s var(--ease), transform 1s var(--ease)}
.gallery button:hover img{opacity:.9;transform:scale(1.02)}
@media (max-width:520px){.gallery{columns:1}}

.lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(18,17,14,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:86svh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__btn{
  position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;
  width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;
  opacity:.7;transition:opacity .2s var(--ease)}
.lightbox__btn:hover{opacity:1}
.lightbox__btn svg{width:1.6rem;height:1.6rem;stroke:currentColor;stroke-width:1.25;fill:none}
.lightbox__close{top:1rem;right:1rem}
.lightbox__prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:.5rem;top:50%;transform:translateY(-50%)}
.lightbox__count{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);color:rgba(246,244,239,.7);font-size:.72rem;letter-spacing:.2em}
@media (max-width:600px){
  .lightbox__prev{left:0}.lightbox__next{right:0}
}

/* 10. Forms ---------------------------------------------------- */
.form{display:grid;gap:1.5rem;max-width:38rem}
.form-row{display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.65rem 0;color:var(--ink);border-radius:0;
  transition:border-color .2s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:5.5rem}
.form .btn{justify-self:start;margin-top:.5rem}
.form-note{font-size:.82rem;color:var(--muted)}

.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
@media (max-width:820px){.contact-cols{grid-template-columns:1fr}}
.contact-list{display:flex;flex-direction:column;gap:1.75rem}
.contact-list .eyebrow{margin-bottom:.4rem}
.contact-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.contact-list a:hover{border-color:var(--ink)}

/* map */
.map-embed{aspect-ratio:16/9;width:100%;border:1px solid var(--line);background:var(--stone);filter:grayscale(1) contrast(.95)}
.map-embed:hover{filter:none}

/* 11. Utilities / motion ------------------------------------- */
/* Reveal-on-scroll: only hide when JS is present, so no-JS/crawlers see everything */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none}}

.center{text-align:center}
.mt-lg{margin-top:clamp(2rem,5vw,3.5rem)}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}

/* TODO marker for unconfirmed copy (kept subtle; remove .todo styling before launch) */
.todo{border-bottom:1px dashed #b7a98a}

/* 12. Image tiles — distances, concierge, nearby destinations ------- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:1.1rem}
.photo-credits{margin-top:1.75rem;font-size:.72rem;line-height:1.7;color:var(--muted);max-width:none}
.photo-credits a{color:var(--muted);text-decoration:underline}
.tile{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink);
  isolation:isolate;
}
.tile img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(15,14,12,.82) 0%, rgba(15,14,12,.18) 52%, rgba(15,14,12,.05) 100%);
}
.tile-content{position:absolute;inset:auto 0 0 0;z-index:1;padding:1.1rem 1.2rem;color:var(--paper)}
.tile-duration{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;margin-bottom:.3rem}
.tile-label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,244,239,.92)}

/* Placeholder variant: used wherever a real photograph is still needed.
   Deliberately not a stock photo — see README "Photography still needed". */
.tile--placeholder{
  background:
    radial-gradient(120% 140% at 20% 0%, #33312b 0%, #211f1b 60%, #1b1a17 100%);
}
.tile--placeholder::after{background:none}
.tile--placeholder .tile-note{
  position:absolute;top:.9rem;right:.9rem;z-index:1;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,244,239,.45);border:1px solid rgba(246,244,239,.25);
  padding:.3rem .55rem;border-radius:999px;
}
.tile--placeholder .tile-content{color:var(--paper)}
.tile--placeholder .tile-label{color:rgba(246,244,239,.85)}

/* Concierge cards: label-led rather than duration-led */
.tile--concierge{aspect-ratio:3/4}
.tile--concierge .tile-content{padding:1.25rem}
.tile--concierge .tile-label{font-size:.92rem;letter-spacing:.06em;font-family:var(--serif);text-transform:none;font-size:1.15rem}

@media (max-width:480px){.tile-grid{grid-template-columns:repeat(2,1fr)}}


/* Highlights — slim dark band under the hero: a few centred facts, bulleted */
.highlights{
  background:#0f0f0e;color:var(--paper);
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
}
.highlights ul{list-style:none;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem clamp(2rem,6vw,5.5rem);
  padding:clamp(1.5rem,3vw,2.4rem) var(--gutter);
}
.highlights li{font-size:.86rem;letter-spacing:.04em;color:rgba(246,244,239,.92);white-space:nowrap}
.highlights li::before{content:"•";margin-right:.6rem;opacity:.75}

/* "View more photos →" cue at the foot of the hero */
.hero__more{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:rgba(246,244,239,.92);white-space:nowrap;
}
.hero__more svg{width:1.4rem;height:.8rem;transition:transform .4s var(--ease)}
.hero__more:hover svg{transform:translateX(5px)}
@media (max-width:900px), (max-height:720px){.hero__more{display:none}}

/* Recognition — logo sits directly on the page: no box, no tint.
   multiply blends the logo's white background into the page colour. */
.recognition{padding-block:clamp(2.5rem,5vw,4rem)}
.recognition__logo{
  display:block;margin:0 auto;width:min(30rem,88%);height:auto;
  mix-blend-mode:multiply;
}
.recognition__text{margin:1.25rem auto 0;font-size:.85rem;line-height:1.6;color:var(--muted)}

/* Centre every paragraph/heading inside a .center block (p has a max-width) */
.center p,.center h2,.footer-cta p,.footer-cta h2{margin-inline:auto}


/* =============================================================
   13. Motion layer (progressive enhancement — see assets/js/motion.js)
   Everything here is gated by html.motion / html.motion-pending, which the
   script only adds when GSAP/Lenis loaded and reduced-motion is off.
   ============================================================= */

/* page veil: covers the first paint so the entrance can start cleanly,
   and fades back in when leaving for another page */
body::before{
  content:"";position:fixed;inset:0;z-index:600;background:var(--paper);
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease);
}
html.motion-pending body::before{opacity:1;transition:none}
html.motion-leaving body::before{opacity:1;pointer-events:all;transition:opacity .28s var(--ease)}

/* GSAP owns the reveals: switch the CSS ones off */
html.motion .reveal,
html.motion .reveal.is-in{opacity:0;transform:none;transition:none}
html.motion .figure-frame img{transition:none}
html.motion .btn,
html.motion .nav-cta{transition-property:background,color,border-color,opacity}

/* split text (masks hide the rising letters/words) */
.m-word{display:inline-block;white-space:nowrap}
.m-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.m-mask--word{padding-top:.04em;margin-top:-.04em}
.m-in{display:inline-block;will-change:transform}

/* header tucks away while scrolling down */
.site-header{transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), top .5s var(--ease)}
.site-header.is-hidden{top:calc(var(--header-h) * -1)}

/* scroll progress hairline */
.m-progress{
  position:fixed;left:0;top:0;width:100%;height:2px;z-index:700;
  background:#fff;mix-blend-mode:difference;transform:scaleX(0);transform-origin:left;pointer-events:none;
}

/* discreet trailing cursor: a small soft dot that swells gently over links (desktop only; native cursor stays) */
.m-cursor{
  position:fixed;left:0;top:0;z-index:700;pointer-events:none;
  width:0;height:0;opacity:0;transition:opacity .3s var(--ease);mix-blend-mode:difference;
}
.m-cursor::before{
  content:"";position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;
  background:#fff;border-radius:50%;opacity:.9;
  transition:width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), opacity .4s var(--ease);
}
.m-cursor.is-on{opacity:1}
.m-cursor.is-hot::before{width:30px;height:30px;margin:-15px 0 0 -15px;opacity:.22}
.m-cursor.is-text{opacity:0}
@media (hover:none), (pointer:coarse){.m-cursor,.m-progress{display:none}}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* footer links are muted grey — don't let that rule grey out the button text */
.site-footer a.btn{color:var(--paper)}

/* footer column headings should all match (the location <p> rule was enlarging its heading) */
.site-footer .footer-location p.footer-heading{font-size:.72rem;line-height:inherit;margin-bottom:1.1rem}

.recognition__text strong{font-weight:500;color:var(--ink);letter-spacing:.02em}
.recognition__text + .recognition__text{margin-top:1.1rem}

/* footer credit */
.footer-powered{letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;opacity:.85;text-align:center}
@media (max-width:700px){.footer-base{flex-direction:column;align-items:center;text-align:center;gap:.6rem}}