/* ============================================================
   Soul Spa Studio, LLC by Angela Nails
   Original visual system — warm bone / clay / espresso.
   Editorial, quiet, high-whitespace. Mobile-first.
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root{
  --ink:      #1e1b18;
  --ink-2:    #3a342f;
  --muted:    #6a6058;
  --bone:     #f6f2ec;
  --paper:    #fffdfa;
  --sand:     #ece5da;
  --line:     #d9cfc1;
  --line-2:   #c6b9a7;
  --clay:     #9a5f47;
  --clay-deep:#7d4b37;
  --espresso: #26201d;
  --espresso-2:#332b26;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1240px;
  --header-h: 4.2rem;   /* sticky masthead, so the hero can fill the rest */
  --rule: 1px solid var(--line);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip rather than hidden: overflow-x:hidden on <body> turns it into a
     scroll container on iOS, which interferes with position:fixed children
     and adds scroll jank. clip contains the overflow without that side
     effect; hidden stays as the fallback for older browsers. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,iframe{ max-width:100%; display:block; }
h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--clay); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.9rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---- Type -------------------------------------------------- */
.h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2rem, 1.35rem + 3.1vw, 3.85rem);
  line-height:1.02;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 96, "SOFT" 0;
  max-width:16ch;
}
.h3{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}
.eyebrow,.marker{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}
.marker{
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:clamp(1rem,2vw,1.6rem);
}
.marker span{
  color:var(--clay);
  font-family:var(--f-display);
  font-size:.85rem;
  letter-spacing:.04em;
}
.marker::after{
  content:""; flex:1; height:1px; background:var(--line); max-width:8rem;
}
.lead{
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:46ch;
}
.prose p + p{ margin-top:1.15em; }
.prose{ color:var(--ink-2); max-width:58ch; }

/* ---- Buttons ----------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  padding:.95rem 1.6rem;
  font-size:.82rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  border-radius:2px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.btn:hover{ --bg:var(--clay-deep); --bd:var(--clay-deep); transform:translateY(-1px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-2); }
.btn--ghost:hover{ --bg:transparent; --fg:var(--clay-deep); --bd:var(--clay); }
.btn--sm{ padding:.6rem 1.05rem; font-size:.72rem; letter-spacing:.1em; }
.btn--lg{ padding:1.1rem 2rem; font-size:.86rem; }

/* Booking is the primary action everywhere it appears: it takes the clay
   accent so it outranks the ink and ghost buttons beside it. */
.btn--book{ --bg:var(--clay-deep); --fg:var(--paper); --bd:var(--clay-deep); }
.btn--book:hover{ --bg:var(--ink); --bd:var(--ink); }
.btn__ext{
  font-size:.85em; line-height:1; margin-left:.1em;
  transform:translateY(-.04em);
}

/* Visually hidden, still read aloud — used to announce new-tab links. */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---- Masthead ---------------------------------------------- */
/* Opaque on purpose. A backdrop-filter on a position:sticky bar makes iOS
   Safari re-blur the area behind it on every scroll frame, which reads as
   flicker/shake while the address bar animates. The bar was already 88%
   opaque, so dropping the blur costs nothing visually. */
.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--bone);
  border-bottom:var(--rule);
}
.masthead__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:.85rem var(--gut);
  display:flex; align-items:center; gap:1.25rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; margin-right:auto;
}
/* Studio emblem, lifted from the client's logo lockup. */
.brand__mark{
  width:auto; height:2.35rem; flex:none;
  transition:opacity .35s var(--ease);
}
.brand:hover .brand__mark{ opacity:.68; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--f-display); font-size:1.02rem; letter-spacing:-.005em;
}
.brand__name--lg{ font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem); }
.brand__sub{
  font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
  margin-top:.15rem;
}

.masthead__actions{
  display:flex; align-items:center; gap:.9rem; flex:none;
}
.masthead__tel{
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.masthead__tel:hover{ color:var(--clay-deep); border-bottom-color:var(--clay); }

.nav ul{ display:flex; gap:clamp(1rem,2.2vw,2rem); }
.nav a{
  text-decoration:none; font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
  padding:.35rem 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--clay); transition:right .4s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after{ right:0; }
.nav a.is-active{ color:var(--ink); }

.burger{
  display:none; width:2.5rem; height:2.5rem; flex:none;
  background:none; border:1px solid var(--line-2); border-radius:2px;
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  display:block; width:16px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ---- Hero ---------------------------------------------------
   Full-bleed studio-sign photograph as a real background-image,
   with a warm espresso scrim so the copy stays legible on it. */
.hero{
  position:relative;
  /* vh first as the fallback for Safari < 15.4; svh then overrides it where
     supported. svh is deliberate: it is pinned to the SMALL viewport, so it
     does not change when the iOS toolbar shows or hides. dvh would resize
     continuously during scroll, which is the jitter itself. */
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(2rem,7vh,4.5rem) var(--gut) clamp(1.5rem,3vh,2.5rem);
  background-image:
    /* deepens the left column, where the copy sits, and lets the
       olive branch on the right keep its light */
    linear-gradient(
      100deg,
      rgba(24,20,18,.68) 0%,
      rgba(24,20,18,.46) 40%,
      rgba(24,20,18,.12) 72%,
      rgba(24,20,18,.04) 100%),
    linear-gradient(
      175deg,
      rgba(24,20,18,.40) 0%,
      rgba(24,20,18,.46) 38%,
      rgba(24,20,18,.66) 78%,
      rgba(24,20,18,.78) 100%),
    url("../assets/photos/hero-sign.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#f4efe8;
}
.hero__inner{
  width:100%; max-width:calc(var(--maxw) - var(--gut) * 2);
  margin-inline:auto;
  margin-top:auto;
}
.hero__copy{ max-width:48ch; }
/* Slightly tighter than the old two-column hero so the whole block —
   headline, copy, both buttons and the stats row — clears the fold. */
.hero .hero__title{ font-size:clamp(2.3rem,1.35rem + 3.4vw,4.3rem); max-width:15ch; }
.hero .lead{ max-width:44ch; }

/* Hero type sits on the photograph, so it takes the light palette. */
.hero .eyebrow{ color:rgba(244,239,232,.82); }
.hero .lead{ color:rgba(244,239,232,.88); }
.hero .btn--ghost{ --fg:#f4efe8; --bd:rgba(244,239,232,.5); }
.hero .btn--ghost:hover{ --fg:#fff; --bd:#fff; --bg:rgba(255,255,255,.08); }

/* Short laptop screens: pull the hero type in so the headline, the copy
   and both buttons still land above the fold. */
@media (min-width:900px) and (max-height:820px){
  .hero{ padding-top:clamp(1.25rem,3vh,2rem); }
  .hero .hero__title{ font-size:clamp(2rem,1rem + 2.5vw,3.25rem); max-width:17ch; }
  .hero .lead{ font-size:1rem; max-width:48ch; }
}
.hero__title{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2.4rem, 1.4rem + 4.4vw, 5.1rem);
  line-height:1.0;
  letter-spacing:-.028em;
  font-variation-settings:"opsz" 144, "SOFT" 20;
  margin:clamp(1rem,2vw,1.5rem) 0 clamp(1.25rem,2.5vw,1.9rem);
  max-width:13ch;
  text-wrap:balance;
}
.hero__title{ color:#f7f3ed; }
.hero__title em{
  font-style:italic; color:#dda98a; font-weight:400;
}
/* Both actions share a row now that there are only two; Book Now still
   reads as primary through its clay fill against the ghost outline. */
.hero__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-top:clamp(1.25rem,3vh,2rem);
}
.hero__alt{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Stats band sits directly beneath the full-screen hero — keeping it out
   of the hero is what lets the headline and both CTAs clear the fold on
   a short laptop screen. */
.factband{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(1.5rem,4vw,2.5rem) var(--gut) 0;
}
.factbar{
  display:grid; gap:0;
  border-top:var(--rule);
}
.factbar li{
  padding:1.1rem 0 .2rem;
  font-size:.9rem; color:var(--ink-2);
}
.factbar span{
  display:block; font-size:.65rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.3rem; font-weight:600;
}

/* ---- Creed strip ------------------------------------------- */
.creed{
  margin-top:clamp(3rem,6vw,5rem);
  border-block:var(--rule);
  background:var(--sand);
  padding:clamp(1.5rem,3vw,2.25rem) var(--gut);
}
.creed__line{
  max-width:var(--maxw); margin-inline:auto;
  font-family:var(--f-display);
  font-size:clamp(1.05rem,.85rem + 1.1vw,1.7rem);
  font-weight:300; font-style:italic;
  letter-spacing:-.01em;
  display:flex; flex-wrap:wrap; gap:.4rem clamp(1rem,3vw,2.5rem);
  color:var(--ink-2);
}
.creed__line span:nth-child(2){ color:var(--clay); }

/* ---- Section shell ----------------------------------------- */
.section{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3.5rem,8vw,7.5rem) var(--gut);
}
/* Full-bleed sections keep their gutter on the section itself and
   align their contents through a single inner wrapper — so a child
   with its own background never paints into the gutter. */
.section--dark, .section--sand{
  max-width:none; margin-inline:0;
}
.section--dark{ background:var(--espresso); color:#e8e1d8; }
.section--sand{ background:var(--sand); }

.section--dark > .wrap, .section--sand > .wrap{
  max-width:calc(var(--maxw) - var(--gut) * 2);
  margin-inline:auto;
}
.section--dark .h2, .section--dark .h3{ color:#f4efe8; }
.section--dark .marker{ color:#a79c90; }
.section--dark .marker span{ color:#c98a6c; }
.section--dark .marker::after{ background:#4a413a; }
.section--dark .prose, .section--dark .section__note, .section--dark .policy p{ color:#c9c0b6; }

.section__head{ margin-bottom:clamp(2rem,4vw,3.25rem); }
.section__note{
  margin-top:clamp(1rem,2vw,1.4rem);
  color:var(--muted);
  max-width:52ch;
  font-size:1rem;
}

/* ---- Split (studio) ---------------------------------------- */
.split{ display:grid; gap:clamp(2rem,4vw,3.5rem); }

.ledger{ display:grid; }
.ledger > div{
  display:flex; align-items:baseline; gap:1rem;
  padding:.95rem 0;
  border-bottom:var(--rule);
}
.ledger > div:first-child{ border-top:var(--rule); }
.ledger dt{
  flex:1;
  display:flex; flex-direction:column; gap:.2rem;
  font-weight:500;
  line-height:1.35;
}
.ledger dd{
  font-family:var(--f-display);
  font-size:1.15rem;
  white-space:nowrap;
  color:var(--clay-deep);
  letter-spacing:-.01em;
}
.ledger__desc{
  font-size:.83rem; font-weight:400; color:var(--muted); line-height:1.45;
  max-width:44ch;
}
.ledger--facts dd{ color:var(--ink); }
.ledger--facts dt{ color:var(--muted); font-weight:500; font-size:.9rem; }

.duo{
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
/* Both pairs mix a landscape and a portrait source, so they get a
   square crop — a 4:3 slot cuts the top off the tall originals. */
.duo--edu{ margin:0 0 clamp(2.5rem,5vw,4rem); }
.duo--edu .ph,
.duo--studio .ph{ aspect-ratio:1/1; }
/* The waiting-area graphic is 4:5 and carries its headline near the top and
   its logo near the bottom. Biasing the square slot's window down to 74%
   keeps both inside the frame; only the empty wall above and the thin
   template border below fall outside. */
.duo--studio .ph:last-child img{ object-position:center 74%; }

/* ---- Story (philosophy) ------------------------------------ */
.story{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
.pull{
  /* the bio is a single paragraph now, so the quote gets a little more air
     above it to keep the column from reading as top-heavy */
  margin-top:clamp(2rem, 4vw, 3.25rem);
  padding-left:clamp(1rem,2vw,1.5rem);
  border-left:2px solid var(--clay);
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1rem + .75vw,1.55rem);
  font-style:italic; font-weight:300; line-height:1.32;
  color:#f0e9e0 !important;
  letter-spacing:-.01em;
}

/* ---- Services menu ----------------------------------------- */
.menu{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
}
.menu__cat{ display:grid; gap:1.25rem; align-content:start; }
.menu__catHead{
  display:flex; align-items:baseline; gap:1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--line-2);
}
.menu__catHead::after{
  content:""; flex:1; height:1px;
}
.menu__aside{
  font-size:.9rem; color:var(--muted); max-width:44ch;
}
.menu__cat .ph{ margin-top:.5rem; }

.cta-strip{
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line-2);
  display:grid; gap:1.25rem;
}
.cta-strip p{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,1.1rem + 1.1vw,2rem);
  font-weight:300; letter-spacing:-.015em; line-height:1.15;
  max-width:20ch;
}
.cta-strip__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---- Education --------------------------------------------- */
.formats{
  display:grid; gap:1px; background:var(--line-2);
  border:1px solid var(--line-2);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.format{
  background:var(--sand);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:grid; gap:.85rem; align-content:start;
}
.format p{ color:var(--ink-2); max-width:40ch; }

.topics{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.topics__title{
  font-family:var(--f-text);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
  margin-bottom:1.25rem;
}
.topics__list{
  display:grid; gap:0;
  border-top:1px solid var(--line-2);
}
.topics__list li{
  padding:.7rem 0 .7rem 1.6rem;
  border-bottom:1px solid var(--line-2);
  position:relative;
  font-size:.98rem;
}
.topics__list li::before{
  content:""; position:absolute; left:.25rem; top:1.25rem;
  width:5px; height:5px; border-radius:50%; background:var(--clay);
}
.topics__note{
  margin-top:clamp(1.5rem,3vw,2rem);
  color:var(--ink-2); max-width:56ch;
}

.rates{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem); max-width:640px; }
.rates .ledger > div{ border-color:var(--line-2); }

/* ---- Inquiry form ------------------------------------------ */
.inquiry{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(1.5rem,4vw,3rem);
  display:grid; gap:clamp(1.75rem,3vw,2.5rem);
}
.inquiry__intro{ display:grid; gap:.85rem; max-width:52ch; }
.inquiry__intro p{ color:var(--muted); }

.form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.req{ letter-spacing:.05em; text-transform:none; font-weight:500; }
.field input, .field select, .field textarea{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.8rem .9rem;
  font-size:.98rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  width:100%;
}
.field textarea{ resize:vertical; min-height:7rem; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--clay); background:var(--paper);
}
.field input[aria-invalid="true"]{ border-color:#a33; }
.err{ color:#a33; font-size:.85rem; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.5rem; }
.form__hint{ font-size:.85rem; color:var(--muted); max-width:34ch; }
.form__hint a{ color:var(--clay-deep); }
.form__done{
  background:var(--sand); border-left:2px solid var(--clay);
  padding:1rem 1.15rem; font-size:.95rem; color:var(--ink-2);
}

/* ---- Gallery ----------------------------------------------- */
.grid-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-flow:dense;
  gap:clamp(.5rem,1.5vw,1.25rem);
}
.grid-gallery .ph{ aspect-ratio:1/1; }
.grid-gallery--five .ph{ aspect-ratio:4/5; }

/* ---- Policies ---------------------------------------------- */
.policies{ display:grid; gap:1px; background:#413830; border-block:1px solid #413830; }
.policy{
  background:var(--espresso);
  padding:clamp(1.5rem,3vw,2.5rem) 0;
  display:grid; gap:.75rem; align-content:start;
}
.policy__num{
  font-family:var(--f-display); font-size:.85rem; color:#c98a6c; letter-spacing:.05em;
}
.policy p{ max-width:38ch; font-size:.97rem; }
.policy strong{ color:#f0e9e0; font-weight:600; }

/* ---- Visit ------------------------------------------------- */
.visit{ display:grid; gap:clamp(2rem,4vw,3rem); }
.contact > div{
  padding:1.1rem 0; border-bottom:var(--rule);
  display:grid; gap:.3rem;
}
.contact > div:first-child{ border-top:var(--rule); }
.contact dt{
  font-size:.65rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.contact dd{ font-size:1.05rem; line-height:1.45; }
.contact a{ text-decoration:none; border-bottom:1px solid var(--line-2); }
.contact a:hover{ color:var(--clay-deep); border-color:var(--clay); }
.visit__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.5rem,3vw,2rem); }
.visit__map{
  border:1px solid var(--line);
  background:var(--sand);
  min-height:320px;
  filter:grayscale(.35) contrast(.95);
}
.visit__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }

/* ---- Footer ------------------------------------------------ */
.footer{
  background:var(--espresso); color:#c9c0b6;
  padding:clamp(3rem,6vw,5rem) var(--gut) clamp(1.5rem,3vw,2rem);
  margin-bottom:0;
}
.footer__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid #413830;
}
.footer__logo{
  width:auto; height:clamp(6.5rem,12vw,8.5rem);
  margin-bottom:1.5rem;
}
.footer__tag{ margin-top:1rem; font-size:.92rem; max-width:30ch; }
.footer__h{
  font-family:var(--f-text);
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  color:#a79c90; font-weight:600; margin-bottom:1rem;
}
.footer__col p{ font-size:.92rem; margin-bottom:.75rem; line-height:1.55; }
.footer__col a{ text-decoration:none; border-bottom:1px solid #4a413a; }
.footer__col a:hover{ color:#f4efe8; border-color:#c98a6c; }
/* Booking link is the emphasised one in the contact column — declared
   after .footer__col a so its border and colour win. */
.footer__book a{
  color:#f0d9c9; font-weight:600; letter-spacing:.05em;
  border-bottom-color:#8a5a44;
}
.footer__book a:hover{ color:#fff; border-bottom-color:#c98a6c; }
.footer__nav li{ margin-bottom:.5rem; font-size:.92rem; }
.footer__nav a{ text-decoration:none; }
.footer__nav a:hover{ color:#f4efe8; }
.footer__legal{
  max-width:var(--maxw); margin:clamp(1.5rem,3vw,2rem) auto 0;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8d8378;
}

/* ---- Sticky mobile action bar ------------------------------
   Booking stays one tap away while scrolling; calling sits
   beside it as the narrower secondary option. */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:stretch;
  box-shadow:0 -6px 24px rgba(30,27,24,.16);
  /* Sized in rem, never in viewport units, so the iOS toolbar showing or
     hiding cannot resize it. translateZ gives it its own compositing
     layer so it is not repainted with the page on every scroll frame. */
  transform:translateZ(0);
  /* keeps the bar clear of the iOS home indicator */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.actionbar a{
  display:flex; align-items:center; justify-content:center;
  padding:1rem .75rem;
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
}
.actionbar__book{
  flex:1;
  background:var(--clay-deep); color:var(--paper);
}
.actionbar__tel{
  flex:0 0 30%;
  background:var(--ink); color:var(--paper);
}
.actionbar a:active{ filter:brightness(1.12); }

/* ============================================================
   Photo slots — elegant placeholder until real photos are added
   ============================================================ */
.ph{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(154,95,71,.07), rgba(154,95,71,0) 60%),
    repeating-linear-gradient(-45deg, var(--sand) 0 10px, #e5ddd1 10px 20px);
  border:1px solid var(--line);
  aspect-ratio:4/5;
}
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph--tall{ aspect-ratio:4/5; }
.ph--portrait{ aspect-ratio:4/5; }
.ph--wide{ aspect-ratio:4/3; }
.ph--sq{ aspect-ratio:1/1; }

.ph__note{
  display:none;
  position:absolute; inset:auto 0 0 0;
  padding:.55rem .7rem;
  font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); background:color-mix(in srgb, var(--bone) 80%, transparent);
  border-top:1px solid var(--line);
}
.ph.is-missing img{ display:none; }
.ph.is-missing .ph__note{ display:block; }
.ph.is-missing::after{
  content:"Photo";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--f-display); font-style:italic;
  font-size:1.1rem; color:var(--line-2);
}

/* ---- Reveal ------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .btn:hover{ transform:none; }
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- Mobile nav (below 900px) --- */
@media (max-width:899px){
  .burger{ display:flex; }
  .masthead__actions{ display:none; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--bone);
    border-bottom:var(--rule);
    padding:0 var(--gut);
    max-height:0; overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .nav.is-open{ max-height:24rem; }
  .nav ul{ flex-direction:column; gap:0; padding:.5rem 0 1.25rem; }
  .nav li{ border-bottom:var(--rule); }
  .nav li:last-child{ border-bottom:0; }
  .nav a{ display:block; padding:.95rem 0; font-size:.85rem; }
  .nav a::after{ display:none; }
  body{ padding-bottom:3.5rem; } /* room for the sticky action bar */
  /* the sticky bar overlays the fold, so the hero stops short of it */
  .hero{
    min-height:calc(100vh - var(--header-h) - 3.5rem);
    min-height:calc(100svh - var(--header-h) - 3.5rem);
  }
  .grid-gallery--five{ grid-template-columns:repeat(2,1fr); }
  .grid-gallery--five .ph:last-child{ grid-column:span 2; aspect-ratio:16/10; }
}

@media (min-width:520px){
  .factbar{ grid-template-columns:repeat(3,1fr); }
  .factbar li{ padding-inline:0; }
  .factbar li + li{ padding-left:1.25rem; }
  .grid-gallery:not(.grid-gallery--five){ grid-template-columns:repeat(3,1fr); }
  /* Five tiles: one clean row on desktop, 2-up with a wide closer below. */
  .grid-gallery--five{ grid-template-columns:repeat(5,1fr); }
  .grid-gallery--five .ph:last-child{ grid-column:auto; aspect-ratio:4/5; }
  .duo{ grid-template-columns:1fr 1fr; }
  .formats{ grid-template-columns:1fr 1fr; }
  .topics__list{ grid-template-columns:1fr 1fr; column-gap:2.5rem; }
  .form{ grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem; }
  .field--full{ grid-column:1 / -1; }
}

@media (min-width:900px){
  .actionbar{ display:none; }


  .split{ grid-template-columns:1.35fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:start; }
  .story{ grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,6vw,5.5rem); align-items:start; }
  .story__portrait{ position:sticky; top:6rem; }

  .menu{ grid-template-columns:1fr 1fr; gap:clamp(3rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem); }

  .cta-strip{ grid-template-columns:1fr auto; align-items:center; gap:2.5rem; }

  .topics__list{ grid-template-columns:repeat(3,1fr); }

  .inquiry{ grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,5vw,4.5rem); align-items:start; }

  .policies{ grid-template-columns:repeat(3,1fr); }
  .policy{ padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem); }

  .visit{ grid-template-columns:.9fr 1.1fr; gap:clamp(3rem,5vw,4.5rem); align-items:start; }
  .visit__map{ min-height:460px; }
  .visit__map iframe{ min-height:460px; }

  .footer__inner{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
}

@media (min-width:1200px){
  .grid-gallery:not(.grid-gallery--five){ grid-template-columns:repeat(4,1fr); }
}