/* ============================================================
   BODY ALCHEMY — theme (version two: photograph-led)
   One colour, one family of type. Change it here.
   ============================================================ */

:root{
  /* ONE brand colour, taken straight off Diana's logo: #959f97.
     Every band, footer and accent on the site is that exact colour.
     ONE text colour: #26302a. Every word on the site is that colour,
     on the paper (12.8:1) and on the sage (5.0:1) alike. */
  --sage:#959f97;          /* her logo colour — logo, favicon, accents */
  /* The ground under the white writing: the menu, the home panel, the
     heading bands, the footer. It is her logo colour.
     If the white ever reads too faint, change ONLY this line to
     #6b766d — the same sage, two shades deeper — and every band on
     the site follows. Nothing else needs touching. */
  --band:#959f97;
  /* the filled Book now button. Fletcher chose her exact logo sage over the
     deeper one. White on it is 2.7:1, so the label is bolder and wider set
     to hold up — see .price .btn. */
  --btn:#959f97;
  --sage-mid:#959f97;
  --sage-dark:#26302a;     /* aliases kept so nothing breaks — all text */
  --sage-deep:#26302a;
  --green:#959f97;
  --green-deep:#959f97;
  --wash:#e6eae7;          /* tinted panels, same hue */
  --wash-soft:#f0f3f0;

  --ground:#f7f8f6;        /* paper */
  --ground-2:#eef1ee;
  --ink:#26302a;           /* THE text colour — the only one */
  --ink-soft:#26302a;
  --rule:rgba(38,48,42,.18);
  --on-dark:#26302a;

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --measure:36rem;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1.04rem,.98rem + .3vw,1.15rem);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
/* the display face at 300 renders so thin it looks like a different,
   lighter colour to the body text. Same ink, same visual weight. */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;
  letter-spacing:-.01em;margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--sage-dark);outline-offset:3px;}
.wrap{max-width:80rem;margin-inline:auto;padding-inline:var(--pad);}
.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;}

.eyebrow{font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage-deep);}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.78rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;text-align:center;
  min-width:13.5rem;padding:1.05em 2em;line-height:1.5;
  border:1px solid var(--ink);color:var(--ink);
  background:transparent;cursor:pointer;transition:background .35s,color .35s;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--ground);}
/* the two old variants are kept as names only — every button on the site,
   on paper or on the sage, is now exactly the same button. */
.btn--solid,.btn--light{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn--solid:hover,.btn--light:hover{background:var(--ink);color:var(--ground);}
.btn--block{display:block;width:100%;text-align:center;}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:80;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1rem;padding:.42rem var(--pad);
  background:var(--band);font-weight:400;
  border-bottom:1px solid rgba(38,48,42,.22);
}
/* all three sit on ONE row — without this the bar silently doubled in height */
.nav__mark,.nav__links,.nav__side{grid-row:1;}
.nav__mark{grid-column:2;justify-self:center;display:inline-flex;}
.nav__logo{height:2.1rem;width:auto;max-width:100%;object-fit:contain;}
.nav__links{grid-column:1;display:flex;gap:1.5rem;align-items:center;}
.nav__side{grid-column:3;justify-self:end;display:flex;gap:1.25rem;align-items:center;}
.nav a.navlink{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:#fff;transition:opacity .25s;white-space:nowrap;}
.nav a.navlink:hover,.nav a.navlink.is-active{color:#fff;text-decoration:underline;}
/* the header Book now: the same button, sized to sit in the bar */
.nav__cta{font-family:var(--sans);font-size:.78rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;text-align:center;text-decoration:none;
  border:1px solid #fff;color:#fff;background:transparent;font-size:.7rem;
  padding:.72em 1.2em;transition:background .3s,color .3s;white-space:nowrap;}
.nav__cta:hover{background:#fff;color:var(--band);}
.nav__toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer;
  color:#fff;grid-column:1;justify-self:start;}
.nav__toggle span{display:block;width:1.35rem;height:1px;background:currentColor;margin:.28rem 0;}

.dd{position:relative;display:flex;align-items:center;gap:.35rem;}
.dd::after{content:"";position:absolute;top:100%;left:0;width:100%;height:1rem;}
.dd__btn{background:none;border:0;padding:.2rem;font:inherit;color:#fff;
  cursor:pointer;display:inline-flex;line-height:1;}
.dd__btn::after{content:"";width:.34rem;height:.34rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s;}
.dd__btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg);}
.dd__menu{display:none;position:absolute;top:calc(100% + .42rem);left:0;min-width:13rem;
  background:var(--band);border:0;padding:.35rem 0;z-index:90;
  box-shadow:0 22px 44px -26px rgba(38,48,42,.55);}
.dd__menu[data-open]{display:block;}
.dd__menu a{display:block;padding:.6rem 1.3rem;font-size:.85rem;line-height:1.5;
  text-decoration:none;color:#fff;transition:background .2s;}
.dd__menu a:hover{background:rgba(255,255,255,.14);color:#fff;}

@media (max-width:64rem){
  .nav{grid-template-columns:auto 1fr auto;}
  .nav__toggle{display:block;}
  .nav__mark{grid-column:2;}
  .nav__side .nav__cta{padding:.62em .9em;font-size:.64rem;}
  .nav__links{
    grid-column:1 / -1;grid-row:2;order:4;display:none;width:100%;flex-direction:column;
    align-items:flex-start;gap:.15rem;padding-top:1rem;margin-top:.85rem;
    border-top:1px solid var(--rule);
  }
  .nav__links[data-open]{display:flex;}
  .nav__links a.navlink{width:100%;padding:.7rem 0;font-size:.8rem;}
  /* the chevron sits BESIDE Services, not orphaned on the line below it */
  .dd{width:100%;justify-content:flex-start;align-items:center;
      flex-wrap:nowrap;gap:.5rem;padding:.7rem 0;}
  .dd .navlink{width:auto;padding:0;}
  .dd__btn{padding:.5rem .6rem;margin-left:-.2rem;}
  .dd__menu{flex:1 1 100%;}
  .dd__menu{position:static;border:0;box-shadow:none;background:transparent;
    width:100%;min-width:0;padding:.1rem 0 .3rem;}
  /* inside the phone menu the panel is the sage itself, so these
     six sit on sage and must be white like every other menu item */
  .dd__menu a{padding:.5rem 0 .5rem 1rem;color:#fff;}
  .dd__menu a:hover{background:transparent;color:#fff;text-decoration:underline;}
  .nav__logo{height:1.85rem;}
}

/* ---------------- full-bleed photo hero ---------------- */
.shot{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(28rem,82vh,46rem);display:grid;place-items:center;
  padding:clamp(3rem,10vw,7rem) var(--pad);text-align:center;color:#fff;}
.shot--short{min-height:clamp(20rem,50vh,28rem);}
.shot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.shot::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(38,48,42,.34),rgba(38,48,42,.5));}
.shot__inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  max-width:48rem;animation:up 1.1s cubic-bezier(.2,.7,.3,1) both;}
.shot__logo{width:min(38rem,80vw);height:auto;align-self:center;object-fit:contain;}
.shot h1{font-size:clamp(2.6rem,8vw,5.5rem);color:#fff;}
.shot__line{font-family:var(--display);font-size:clamp(1.25rem,3vw,1.9rem);
  line-height:1.35;color:#fff;max-width:34rem;}
.shot__sub{font-size:clamp(.98rem,1.8vw,1.1rem);color:rgba(255,255,255,.94);max-width:34rem;}
@keyframes up{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* a plain heading band where there is no photograph */
.page-head{padding:clamp(3rem,7vw,5rem) var(--pad) clamp(1.5rem,3vw,2.5rem);}
.page-head__inner{max-width:80rem;margin-inline:auto;display:flex;flex-direction:column;
  gap:.9rem;align-items:flex-start;}
.page-head h1{font-size:clamp(2.3rem,6.5vw,4rem);}
.page-head p{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.6rem);
  line-height:1.35;color:var(--ink-soft);max-width:34rem;font-weight:400;}

/* the sage ground — her logo colour — used on the home and services pages */
.band-head{background:var(--band);color:#fff;font-weight:400;
  padding:clamp(3.5rem,9vw,6rem) var(--pad);}
.band-head__inner{max-width:80rem;margin-inline:auto;display:flex;flex-direction:column;
  gap:1.1rem;align-items:flex-start;}
.band-head h1{font-size:clamp(2.4rem,7vw,4.5rem);color:#fff;}
.band-head p{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.7rem);
  line-height:1.35;color:#fff;max-width:32rem;}

/* ---------------- sections ---------------- */
/* the rhythm was built for a photo-heavy page; with the pictures moved
   to the bottom it left large empty gaps between short blocks of text */
.section{padding-block:clamp(2.5rem,5.5vw,4.5rem);}
.section--tight{padding-block:clamp(2.5rem,6vw,4.5rem);}
/* a block that holds only photographs does not need the full rhythm
   around it — one picture inside it left a screen of empty space */
.section--photos{padding-block:clamp(1.75rem,3.5vw,3rem);}
.section--dark{background:var(--band);color:#fff;font-weight:400;}
.section--dark .lede,.section--dark h2{color:#fff;}
.section--dark p{color:#fff;}
.section--tone{background:var(--wash-soft);}
.head{max-width:var(--measure);margin-bottom:clamp(2rem,4vw,3rem);
  display:flex;flex-direction:column;gap:.9rem;}
.head h2{font-size:clamp(2rem,4.6vw,3.2rem);}
.lede{font-family:var(--display);font-size:clamp(1.35rem,3vw,2.05rem);
  line-height:1.3;color:var(--ink);max-width:34rem;font-weight:400;}
.prose{display:flex;flex-direction:column;gap:1.2rem;max-width:var(--measure);
  color:var(--ink-soft);}
.prose--wide{max-width:46rem;}

/* ---------------- alternating photo + text ---------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);}
.duo + .duo{margin-top:clamp(3.5rem,7vw,6rem);}
.duo--flip .duo__media{order:2;}
@media (max-width:56rem){
  .duo{grid-template-columns:1fr;gap:1.75rem;}
  .duo--flip .duo__media{order:-1;}
}
.duo__media{max-width:26rem;}
.duo__media .shot-tile{aspect-ratio:1/1;}
.duo__body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.duo__body h3{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.duo__body p{color:var(--ink-soft);max-width:30rem;}
.duo__go{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--sage-dark);border-bottom:1px solid var(--rule);
  padding-bottom:.3rem;transition:border-color .25s;}
.duo__go:hover{border-bottom-color:var(--sage-dark);}

/* ---------------- Diana's bio, About page ----------------
   Her portrait is a 2:3 upright photo, so the frame is 2:3 too — it fills
   the tile exactly, no blurred bars and nothing cropped. On desktop it sits
   beside the writing and stays with you as you read; on a phone it comes
   first, so her face is the first thing on the page. */
.bio{display:grid;grid-template-columns:minmax(0,1fr) 21rem;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.bio__media{position:sticky;top:5.5rem;}
.bio__media .shot-tile{aspect-ratio:2/3;}
@media (max-width:64rem){
  .bio{grid-template-columns:1fr;gap:1.9rem;}
  .bio__media{position:static;order:-1;max-width:20rem;margin-inline:auto;width:100%;}
}

/* the home page's service cards — photo, name, one line, Learn more.
   Two across on a phone so seven of them are four short rows, not seven
   full screens of scrolling. */
.scards{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.75rem,1.6vw,1.5rem);}
@media (max-width:68rem){.scards{grid-template-columns:repeat(3,1fr);}}
@media (max-width:46rem){
  .scards{grid-template-columns:repeat(2,1fr);}
  /* seven cards leave one on its own — let the last run the full width */
  .scard:last-child{grid-column:1 / -1;}
  .scard:last-child .scard__img img{aspect-ratio:16/7;}
}

.scard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--ground-2);overflow:hidden;}
.scard__img{display:block;overflow:hidden;position:relative;aspect-ratio:4/3;
  background:var(--ground-2);}
.scard__img::before{content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:blur(20px) saturate(.85) brightness(.97);transform:scale(1.25);}
.scard__img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.scard:hover .scard__img img{transform:scale(1.05);}
.scard__body{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  text-align:center;padding:1.1rem clamp(.7rem,1.6vw,1.35rem) 1.35rem;flex:1;}
.scard__name{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.6rem);
  line-height:1.15;}
.scard__desc{font-size:clamp(.78rem,1.5vw,.92rem);line-height:1.55;
  color:var(--ink-soft);}
.scard__more{margin-top:auto;padding-top:.7rem;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:1px solid var(--rule);}
.scard:hover .scard__more{border-bottom-color:var(--ink);}

/* the seven services, read as a list — no photograph beside them */
.svc{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;
  padding:1.9rem 0;border-bottom:1px solid var(--rule);max-width:46rem;}
.svc:first-child{border-top:1px solid var(--rule);}
.svc h3{font-size:clamp(1.6rem,3.4vw,2.2rem);}
.svc p{color:var(--ink-soft);max-width:34rem;}

/* ---------------- lists ---------------- */
/* two tidy columns of short lines, each on its own rule — this reads as
   a list at a glance instead of a paragraph of fragments */
.list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,4rem);
  max-width:62rem;}
@media (max-width:46rem){.list{grid-template-columns:1fr;}}
.list li{padding:.7rem 0 .7rem 1.35rem;position:relative;
  border-bottom:1px solid var(--rule);font-size:.95rem;line-height:1.5;}
.list li::before{content:"";position:absolute;left:0;top:1.15rem;
  width:.3rem;height:.3rem;border-radius:50%;background:var(--ink);}
.section--dark .list li{border-bottom-color:rgba(255,255,255,.35);}
.section--dark .list li::before{background:#fff;}

/* ---------------- facts ---------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  column-gap:3rem;}
.fact{padding:1.1rem 0;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.15rem;}
.fact__k{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);}
.fact__v{font-family:var(--display);font-size:1.35rem;line-height:1.2;}

/* The Book now button on a booking row: small, sitting beside the service,
   filled so it stands out on the pale page. #6b766d is the same sage two
   shades deeper — white on it reads at 4.7:1 instead of 2.7:1. */
.price .btn{
  min-width:0;font-size:.72rem;font-weight:500;letter-spacing:.16em;
  padding:.75em 1.4em;
  background:var(--btn);border-color:var(--btn);color:#fff;
}
.price .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------------- prices: a line and a button, not a box ---------------- */
.prices{display:flex;flex-direction:column;max-width:46rem;
  border-top:1px solid var(--rule);}
.price{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  padding:1.5rem 0;border-bottom:1px solid var(--rule);position:relative;}
.price__name{font-family:var(--display);font-size:1.45rem;line-height:1.2;
  flex:1 1 12rem;}
.price__amt{font-family:var(--display);font-size:1.85rem;line-height:1;
  color:var(--ink);white-space:nowrap;}
.price__note{flex:1 1 100%;order:3;font-size:.85rem;color:var(--ink-soft);margin-top:-.3rem;}
.price .btn{margin-left:auto;}
.price__tag{position:absolute;top:.45rem;left:0;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);}
.price--best{padding-top:2.1rem;}
.term__now{flex:1 1 100%;order:-1;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage-deep);}
@media (max-width:40rem){
  /* stays beside the service name — it is small enough to fit now */
  .price{gap:.4rem 1rem;}
  .price__name{flex:1 1 8rem;font-size:1.25rem;}
  .price .btn{margin-left:auto;white-space:nowrap;}
  .price__note{order:3;}
}

/* ---------------- retreat cards ---------------- */
.rcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);}
.rcard{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.55rem;}
.rcard > span{display:block;}
.rcard__img{margin-bottom:.5rem;}
.rcard__img{display:block;overflow:hidden;}
.rcard__img{position:relative;aspect-ratio:3/2;background:var(--ground-2);}
.rcard__img::before{content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:blur(20px) saturate(.85) brightness(.97);transform:scale(1.25);}
.rcard__img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.rcard:hover .rcard__img img{transform:scale(1.05);}
.rcard__when{display:block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-deep);margin-top:.15rem;}
.rcard__name{display:block;font-family:var(--display);font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.1;}
.rcard__desc{display:block;font-size:.95rem;color:var(--ink-soft);line-height:1.65;}
.rcard__go{display:block;margin-top:.4rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-dark);}

/* ---------------- galleries ---------------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.75rem,1.5vw,1.25rem);}
@media (max-width:46rem){.grid{grid-template-columns:1fr;}}
.grid img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.grid--one{grid-template-columns:1fr;}
.grid--one img{aspect-ratio:var(--tile,16/9);}
.figure img{width:100%;height:auto;}

/* ---------------- closing band ---------------- */
.close{background:var(--band);color:#fff;font-weight:400;
  padding:clamp(3rem,7vw,5rem) var(--pad);}
.close__inner{max-width:80rem;margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:1.75rem 3rem;align-items:center;justify-content:space-between;}
.close h2{font-size:clamp(1.9rem,4vw,2.8rem);color:#fff;}
.close p{color:#fff;max-width:32rem;margin-top:.6rem;}

/* ---------------- deposit ---------------- */
.deposit{background:var(--band);color:#fff;font-weight:400;
  padding:clamp(2.5rem,6vw,4rem);}
.deposit h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);}
.deposit p{color:#fff;margin-top:.7rem;max-width:32rem;}
.deposit__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;}

/* ---------------- carousel ----------------
   Large controls that stay visible on every screen. The people using this
   site are 40+ and a hidden swipe gesture is not navigation. */
.slider{position:relative;}
.slider__track{
  display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  scroll-padding-left:var(--pad);
}
.slider__track::-webkit-scrollbar{display:none;}
.slide{flex:0 0 min(76vw,24rem);scroll-snap-align:start;}
.slide img{width:100%;height:auto;display:block;}

/* Every frame is the same size, AND the whole photograph is inside it.
   The photos run from very tall to very wide, so cropping them to one
   shape cut 25% off on average and 60% off the worst. Instead the picture
   is fitted whole and the frame fills itself with a soft blurred copy —
   uniform tiles, nothing chopped, no blank bars. */
.photo-frame{position:relative;overflow:hidden;display:block;background:var(--ground-2);}
.photo-frame::before{
  content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:blur(22px) saturate(.85) brightness(.97);transform:scale(1.25);
}
.photo-frame > img{position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;}
@media (prefers-reduced-motion:no-preference){.photo-frame{transition:none;}}

.slider--fit .slide{height:auto;aspect-ratio:4/3;position:relative;
  overflow:hidden;background:var(--ground-2);}
.slider--fit .slide::before{
  content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:blur(22px) saturate(.85) brightness(.97);transform:scale(1.25);
}
.slider--fit .slide img{position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;max-height:none;}

.slider__controls{display:flex;align-items:center;justify-content:center;
  gap:1.25rem;margin-top:1.5rem;flex-wrap:wrap;}
.slider__btn{
  width:3.4rem;height:3.4rem;border-radius:50%;
  border:1px solid var(--ink);background:#fff;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;font:inherit;font-size:1.5rem;
  line-height:1;transition:background .2s,color .2s,opacity .2s;
}
.slider__btn:hover{background:var(--ink);color:var(--ground);}
.slider__btn[disabled]{opacity:.3;cursor:default;}
.slider__count{font-size:.95rem;letter-spacing:.08em;color:var(--ink-soft);
  min-width:4.5rem;text-align:center;font-variant-numeric:tabular-nums;}
.slider__dots{display:flex;gap:.35rem;justify-content:center;margin-top:.75rem;}
.slider__dot{width:2rem;height:2rem;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;}
.slider__dot::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  background:rgba(38,48,42,.3);transition:background .2s,transform .2s;}
.slider__dot[aria-current="true"]::before{background:var(--ink);transform:scale(1.5);}
.slider__hint{display:none;}

/* one or two photographs: no carousel, no empty frame around them */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.6vw,1.25rem);
  max-width:56rem;}
.shot-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--ground-2);}
.shot-tile::before{content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
  filter:blur(22px) saturate(.85) brightness(.97);transform:scale(1.25);}
/* applies wherever a shot-tile is used, not only inside .shots — the
   About page portrait sits in one too */
.shot-tile > img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;}
.shots--one{grid-template-columns:1fr;max-width:38rem;}
.shots--one .shot-tile{aspect-ratio:3/2;}
@media (max-width:40rem){.shots{grid-template-columns:1fr;}}

/* ---------------- form ---------------- */
.form{display:flex;flex-direction:column;gap:1.4rem;max-width:34rem;}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:.7rem 0;border-radius:0;}
.field textarea{min-height:8rem;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--sage-dark);}
.hp{position:absolute;left:-9999px;}

/* ---------------- checkout modal ---------------- */
.co{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  padding:1.25rem;background:rgba(38,48,42,.55);backdrop-filter:blur(4px);}
.co[data-open]{display:grid;}
.co__panel{position:relative;width:min(30rem,100%);max-height:92vh;overflow:auto;
  background:var(--ground);padding:clamp(1.5rem,4vw,2.5rem);}
.co__demo{background:var(--sage);color:var(--ink);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.6em 1em;margin:-.4rem -.4rem 1.25rem;}
.co__close{position:absolute;top:.6rem;right:.7rem;background:none;border:0;
  font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink-soft);}
.co__step{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep);}
.co__title{font-family:var(--display);font-size:2rem;margin:.4rem 0 .6rem;}
.co__note{font-size:.88rem;color:var(--ink-soft);}
.co__lines{margin:1.25rem 0;border-top:1px solid var(--rule);}
.co__lines div{display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:.9rem;}
.co__total{display:flex;justify-content:space-between;font-family:var(--display);
  font-size:1.4rem;margin-bottom:1.25rem;}
.co__apple{width:100%;background:var(--ink);color:var(--ground);border:0;padding:1em;
  font:inherit;font-size:1rem;cursor:pointer;}
.co__or{text-align:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:1rem 0;}
.co__card{border:1px solid var(--rule);padding:1rem;margin-bottom:1.25rem;}
.co__field{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:.85rem;}
.co__field span{color:var(--ink-soft);}
.co__row{display:flex;gap:1.5rem;}
.co__row .co__field{flex:1;}
.co__sample{font-size:.72rem;color:var(--ink-soft);margin-top:.6rem;}
.co__fine{font-size:.75rem;color:var(--ink-soft);margin-top:.9rem;}
.co__back{background:none;border:0;font:inherit;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer;margin-top:.9rem;width:100%;}
.co__tick{font-size:2.5rem;color:var(--sage-dark);}
.co .btn{width:100%;text-align:center;}

/* ---------------- footer ---------------- */
.foot{background:var(--band);color:#fff;font-weight:400;
  padding:clamp(2.25rem,5vw,3rem) var(--pad) 1.5rem;}
.close + .foot,.section--tight + .foot{border-top:1px solid rgba(255,255,255,.35);}
.foot__inner{max-width:80rem;margin-inline:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:2rem 3rem;}
/* the footer stays two columns on the phone too — services on the left,
   contact on the right — so it is half as long to scroll past */
.foot__col--right{text-align:right;align-items:flex-end;}
@media (max-width:34rem){
  .foot__inner{gap:1.5rem 1rem;}
  .foot__col{font-size:.82rem;gap:.4rem;}
  .foot .btn{width:auto;}
}
.foot__logo{height:3.6rem;width:auto;max-width:100%;align-self:flex-start;
  object-fit:contain;}   /* flex would otherwise stretch it sideways */
.foot__col{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;}
.foot__col a{text-decoration:none;color:#fff;transition:opacity .2s;}
.foot__col a:hover{text-decoration:underline;}
.foot__col .eyebrow{color:#fff;margin-bottom:.35rem;}
.foot__note{max-width:80rem;margin:1.75rem auto 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.35);
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;}

/* ---------------- home opener: light, and no photograph is enlarged ---------------- */
.opener{padding-block:clamp(3rem,7vw,5rem) clamp(3rem,7vw,5rem);
  background:var(--ground);border-bottom:1px solid var(--rule);}
.opener__inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  text-align:center;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.opener__logo{width:min(30rem,74vw);height:auto;object-fit:contain;}
.opener h1{font-size:clamp(2.2rem,6vw,3.6rem);}
.opener__sub{max-width:34rem;color:var(--ink-soft);}

/* ---------------- one featured thing, not a catalogue ---------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,4rem);}
@media (max-width:56rem){.feature{grid-template-columns:1fr;}}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.feature__body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.feature__body h2{font-size:clamp(2rem,4.4vw,3rem);}
.feature__body p{color:var(--ink-soft);max-width:30rem;}
.feature__meta{font-family:var(--display);font-size:1.25rem;color:var(--ink)!important;
  line-height:1.4;}

/* ---------------- a quiet list of the rest ---------------- */
.slinks{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;}
.slink{text-decoration:none;color:var(--ink);font-family:var(--display);
  font-size:1.2rem;border-bottom:1px solid transparent;transition:border-color .2s;}
.slink:hover{border-bottom-color:var(--ink);}

/* home opener on the sage ground — her logo colour */
.opener--green{background:var(--band);border-bottom:0;font-weight:400;}
.opener--green h1,.opener--green .opener__sub{color:#fff;}

/* ---------------- buttons on the sage ----------------
   Exactly the same button — the colours simply flip, so it
   is always the opposite of the ground it sits on. */
.opener--green .btn,.band-head .btn,.close .btn,.deposit .btn,
.section--dark .btn,.foot .btn{border-color:#fff;color:#fff;background:transparent;}
.opener--green .btn:hover,.band-head .btn:hover,.close .btn:hover,.deposit .btn:hover,
.section--dark .btn:hover,.foot .btn:hover{background:#fff;color:var(--band);}
/* sized to its own text, inside the contact column */
.foot .btn{align-self:flex-end;min-width:0;font-size:.68rem;letter-spacing:.14em;
  padding:.72em 1.3em;margin-top:.35rem;}

/* the line that appears on the enquiry form when someone arrived by pressing
   Book now — it tells them what happens next, so nobody is left wondering
   whether they have paid. Hidden until a booking actually brought them here. */
.bookingnote{
  background:var(--ground-2);border-left:3px solid var(--sage);
  padding:.9rem 1.1rem;font-size:.9rem;line-height:1.55;color:var(--ink);
  border-radius:2px;margin:0;
}

.policy{max-width:46rem;margin:1.4rem 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-soft);}
.policy strong{color:var(--ink);font-weight:600;}