/* ==========================================================================
   GAST Pilates — design system
   Palette sampled from the studio: plaster walls, pale wood, charcoal
   reformer upholstery, and the lilac rings as the single accent.
   ========================================================================== */

:root{
  /* ground + surface */
  --plaster:#FBF9F6;
  --stone:#F1EAE0;
  --stone-deep:#E7DCCC;
  --wood:#D5C3A6;
  --white:#FFFFFF;

  /* ink */
  --ink:#2E3033;
  --ink-soft:#5E5A53;
  --ink-faint:#8E887E;
  --ink-invert:#FBF9F6;

  /* accent — used once per screen, never twice */
  --lilac:#7A669E;
  --lilac-deep:#665387;
  --lilac-wash:#EFEBF4;

  /* lines */
  --hair:#E4DACB;
  --hair-strong:#D3C4AD;

  /* type */
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --ethiopic:"Noto Sans Ethiopic","Abyssinica SIL",serif;

  /* rhythm */
  --gutter:clamp(20px,4vw,56px);
  --shell:1320px;
  --section:clamp(84px,11vw,168px);

  /* motion — slow and controlled, never bouncy */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1.1s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--plaster);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--lilac); outline-offset:3px; border-radius:2px}

/* ---------- layout ---------- */
.shell{width:100%; max-width:var(--shell); margin:0 auto; padding-inline:var(--gutter)}
.shell--narrow{max-width:940px}
.section{padding-block:var(--section)}
[id]{scroll-margin-top:112px}
.section--stone{background:var(--stone)}
.measure{max-width:62ch}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--display);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 22px;
}
.eyebrow--light{color:rgba(255,255,255,.86); text-shadow:0 1px 14px rgba(20,18,16,.5)}
.display{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(32px,4.9vw,64px);
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0 0 .5em;
  text-wrap:balance;
}
.display--sm{font-size:clamp(27px,3.4vw,44px)}
.lede{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,2.1vw,27px);
  line-height:1.46;
  letter-spacing:-.008em;
  color:var(--ink);
  margin:0 0 1.1em;
  text-wrap:pretty;
}
p{margin:0 0 1.15em; color:var(--ink-soft)}
p:last-child{margin-bottom:0}
.note{font-size:14px; color:var(--ink-faint); line-height:1.6}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--ink-invert); --btn-line:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:13.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  padding:15px 30px; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-line);
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--lilac); border-color:var(--lilac); color:#fff}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--ink); --btn-line:var(--hair-strong)}
.btn--light{--btn-bg:rgba(255,255,255,.10); --btn-fg:#fff; --btn-line:rgba(255,255,255,.45)}
.btn--light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:11px 22px; font-size:12px}

.textlink{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  padding-bottom:5px; border-bottom:1px solid var(--hair-strong);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.textlink:hover{color:var(--lilac); border-color:var(--lilac)}
.textlink .arrow{transition:transform .45s var(--ease)}
.textlink:hover .arrow{transform:translateX(5px)}

/* ==========================================================================
   Navigation — transparent over the hero, then a floating glass pill
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding:clamp(16px,2.4vw,30px) var(--gutter);
  transition:padding .7s var(--ease);
  pointer-events:none;
}
.nav__inner{
  pointer-events:auto;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  max-width:var(--shell); margin:0 auto;
  padding:12px 14px 12px 6px;
  border-radius:999px;
  border:1px solid transparent;
  transition:
    max-width .8s var(--ease),
    padding .8s var(--ease),
    background-color .6s var(--ease),
    border-color .6s var(--ease),
    box-shadow .6s var(--ease),
    color .6s var(--ease);
  position:relative;
  color:#fff;
}
/* the glass sheen sits above the blur, below the content */
.nav__inner::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,0) 72%);
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.nav.is-pinned .nav__inner{
  max-width:min(880px, 100%);
  padding:9px 9px 9px 22px;
  color:var(--ink);
  background:rgba(251,249,246,.62);
  border-color:rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 10px 34px rgba(46,48,51,.13),
    0 2px 8px rgba(46,48,51,.05);
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  backdrop-filter:blur(26px) saturate(190%);
}
.nav.is-pinned .nav__inner::before{opacity:1}
.nav.is-pinned{padding-top:clamp(10px,1.6vw,18px)}

.brand{display:flex; flex-direction:column; line-height:1; padding:2px 0 2px 16px; position:relative; z-index:1}
.brand__mark{font-family:var(--display); font-weight:400; font-size:23px; letter-spacing:-.005em}
.brand__sub{font-family:var(--display); font-size:8.5px; font-weight:400; letter-spacing:.42em; margin-top:5px; opacity:.72}

.nav__links{display:flex; align-items:center; gap:clamp(16px,2vw,30px); position:relative; z-index:1}
.nav__links a{
  font-family:var(--display); font-size:13px; font-weight:400; letter-spacing:.1em;
  opacity:.86; transition:opacity .35s var(--ease);
  position:relative; padding-block:4px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__cta{position:relative; z-index:1}
.nav .btn{transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease)}
.nav__inner .btn{--btn-bg:rgba(255,255,255,.12); --btn-fg:#fff; --btn-line:rgba(255,255,255,.42)}
.nav.is-pinned .nav__inner .btn{--btn-bg:var(--ink); --btn-fg:var(--ink-invert); --btn-line:var(--ink)}
.nav.is-pinned .nav__inner .btn:hover{background:var(--lilac); border-color:var(--lilac)}

.nav__burger{display:none; position:relative; z-index:1; padding:10px 14px; border-radius:999px}
.nav__burger span{display:block; width:19px; height:1.5px; background:currentColor; transition:transform .5s var(--ease), opacity .3s var(--ease)}
.nav__burger span + span{margin-top:5px}
.nav.is-open .nav__burger span:first-child{transform:translateY(6.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

/* mobile sheet */
.navsheet{
  position:fixed; inset:0; z-index:70;
  background:rgba(251,249,246,.86);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility .55s;
}
.nav.is-open ~ .navsheet{opacity:1; visibility:visible}
.navsheet a{
  font-family:var(--display); font-weight:300; font-size:clamp(28px,7vw,44px);
  letter-spacing:-.015em; padding:9px 0; border-bottom:1px solid var(--hair);
}
.navsheet a:last-of-type{border-bottom:0}

/* ==========================================================================
   Hero — three photographs, slow cross-dissolve, slow drift
   ========================================================================== */
.hero{position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--stone-deep)}
.hero__media{position:absolute; inset:0}
.hero__slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 2.6s var(--ease);
  will-change:opacity;
}
.hero__slide.is-active{opacity:1}
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 12s linear;
  will-change:transform;
}
.hero__slide.is-active img{transform:scale(1.11)}
.hero__slide:nth-child(2) img{object-position:center 62%}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(22,20,18,.46) 0%, rgba(22,20,18,.08) 26%, rgba(22,20,18,.30) 54%, rgba(22,20,18,.88) 100%),
    linear-gradient(to right, rgba(22,20,18,.58) 0%, rgba(22,20,18,.22) 40%, rgba(22,20,18,0) 74%);
}
.hero__plate{
  position:absolute; inset:auto 0 0 0;
  padding-bottom:clamp(52px,8vh,104px);
}
.hero__plate .shell{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap}
.hero h1,.hero__sub{text-shadow:0 1px 24px rgba(20,18,16,.35)}
.hero h1{
  font-family:var(--display); font-weight:200;
  font-size:clamp(38px,6.1vw,84px); line-height:1.02; letter-spacing:-.036em;
  color:#fff; margin:0 0 26px; max-width:16ch;
}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line > span{display:block}
.hero__sub{color:rgba(255,255,255,.84); font-size:16px; max-width:40ch; margin:0 0 30px}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}

.hero__aside{display:flex; flex-direction:column; align-items:flex-end; gap:18px; padding-bottom:6px}
.hero__dots{display:flex; gap:9px}
.hero__dots button{
  width:26px; height:2px; border-radius:2px; background:rgba(255,255,255,.34);
  transition:background .6s var(--ease), width .6s var(--ease);
}
.hero__dots button[aria-current="true"]{background:#fff; width:42px}
.hero__cue{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.hero__cue i{display:block; width:1px; height:38px; background:linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); animation:drip 2.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top}45%{transform:scaleY(1); transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ==========================================================================
   02 · Statement
   ========================================================================== */
.statement{text-align:left}
.statement .lede{max-width:26ch; font-size:clamp(26px,3.6vw,46px); line-height:1.16; margin-bottom:0}
.statement__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,90px); align-items:start}
.statement__body{max-width:48ch}

/* ==========================================================================
   03 · Four facts
   ========================================================================== */
.facts{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin-top:var(--section)}
.facts__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.fact{padding:34px 30px 34px 0; border-right:1px solid var(--hair)}
.fact:last-child{border-right:0; padding-right:0}
.fact:not(:first-child){padding-left:30px}
.fact b{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(28px,3vw,40px); line-height:1; letter-spacing:-.02em; margin-bottom:10px;
}
.fact span{font-size:13.5px; color:var(--ink-faint); line-height:1.45; display:block}

/* ==========================================================================
   04 · Classes — arch cards
   ========================================================================== */
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,64px)}
.sechead .display{margin-bottom:0}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,38px)}
.card{display:flex; flex-direction:column}
.card__arch{
  position:relative; overflow:hidden; background:var(--stone-deep);
  border-radius:1000px 1000px 4px 4px; aspect-ratio:3/4.05; margin-bottom:24px;
}
.card__arch img{width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform 1.6s var(--ease)}
.card:hover .card__arch img{transform:scale(1.06)}
.card__meta{
  font-family:var(--display); font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--lilac); margin-bottom:11px;
}
.card h3{font-family:var(--display); font-weight:400; font-size:23px; letter-spacing:-.01em; margin:0 0 10px}
.card p{font-size:15px; margin-bottom:0}

/* ==========================================================================
   05 · The space — asymmetric gallery
   ========================================================================== */
.space{background:var(--stone); padding-block:var(--section); overflow:hidden}
.space__grid{display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(18px,2.4vw,34px); align-items:stretch}
.space__figure{overflow:hidden; background:var(--stone-deep)}
.space__figure img{width:100%; height:100%; object-fit:cover}
.space__figure--tall{aspect-ratio:4/5}
.space__figure--wide{aspect-ratio:4/3; height:100%}
.space__figure--wide img{height:100%}
.space__col{display:grid; grid-template-rows:1fr 1fr; gap:clamp(18px,2.4vw,34px)}
.space__caption{
  display:flex; align-items:baseline; gap:14px; margin-top:22px;
  font-size:14px; color:var(--ink-faint);
}
.space__caption b{font-family:var(--display); font-weight:500; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink)}

/* ==========================================================================
   06 · Membership
   ========================================================================== */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); align-items:stretch}
.tier{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--hair); border-radius:3px;
  padding:34px 30px 30px; transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.tier:hover{border-color:var(--hair-strong)}
.tier--featured{border-color:var(--ink); background:var(--ink); color:var(--ink-invert)}
.tier--featured .tier__rate{color:rgba(251,249,246,.62)}
.tier--featured li{color:rgba(251,249,246,.86)}
.tier--featured .tier__price{color:#fff}
.tier--featured .tier__price small{color:rgba(251,249,246,.6)}
.tier--featured .tier__flag{color:var(--lilac)}
.tier--featured li::before{background:rgba(251,249,246,.45)}
.tier__flag{
  font-family:var(--display); font-size:10.5px; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; min-height:14px;
}
.tier h3{font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:.02em; margin:0 0 14px}
.tier__price{
  font-family:var(--display); font-weight:300; font-size:clamp(30px,3.2vw,40px);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.tier__price small{font-size:14px; letter-spacing:0; opacity:.6; font-weight:400}
.tier__rate{font-size:13.5px; color:var(--ink-faint); margin:9px 0 24px}
.tier ul{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px}
.tier li{position:relative; padding-left:17px; font-size:14.5px; color:var(--ink-soft)}
.tier li::before{content:""; position:absolute; left:0; top:.68em; width:7px; height:1px; background:var(--hair-strong)}
.tier .btn{margin-top:auto; justify-content:center}
.tier--featured .btn{--btn-bg:var(--ink-invert); --btn-fg:var(--ink); --btn-line:var(--ink-invert)}

.tiers__foot{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  margin-top:36px; padding-top:26px; border-top:1px solid var(--hair);
}
.tiers__foot p{margin:0; font-size:14.5px}

/* ==========================================================================
   07 · Private & buyout — image band
   ========================================================================== */
.band{position:relative; min-height:min(86vh,760px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink)}
.band__bg{position:absolute; inset:0}
.band__bg img{width:100%; height:100%; object-fit:cover}
.band__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(18,16,15,.34) 0%, rgba(18,16,15,.14) 30%, rgba(18,16,15,.62) 62%, rgba(18,16,15,.94) 100%),
    linear-gradient(to right, rgba(18,16,15,.62) 0%, rgba(18,16,15,.26) 46%, rgba(18,16,15,0) 80%);
}
.band__inner{position:relative; width:100%; padding-block:clamp(56px,8vw,96px); color:#fff}
.band .display{color:#fff; max-width:14ch}
.band p{color:rgba(255,255,255,.80)}
.rates{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin:40px 0 34px; border-top:1px solid rgba(255,255,255,.24); padding-top:26px}
.rate b{
  display:block; font-family:var(--display); font-weight:300; font-size:clamp(21px,2.3vw,30px);
  letter-spacing:-.015em; color:#fff; font-variant-numeric:tabular-nums; margin-bottom:6px;
}
.rate span{font-size:13px; color:rgba(255,255,255,.62); letter-spacing:.02em}

/* ==========================================================================
   08 · Wellness ladder
   ========================================================================== */
.ladder{border-top:1px solid var(--hair)}
.rung{
  display:grid; grid-template-columns:200px 1fr auto; gap:26px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--hair);
}
.rung__name{font-family:var(--display); font-size:17px; font-weight:400; letter-spacing:.01em}
.rung__benefit{color:var(--ink-soft); font-size:15px}
.rung__price{font-family:var(--display); font-size:15px; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap}
.rung--none .rung__benefit{color:var(--ink-faint)}
.rung--top{background:linear-gradient(90deg, var(--lilac-wash), transparent 70%); padding-inline:18px; margin-inline:-18px}
.rung--top .rung__name{color:var(--lilac-deep)}

/* ==========================================================================
   09 · Location
   ========================================================================== */
.locate__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center}
.locate dl{display:grid; grid-template-columns:120px 1fr; gap:14px 20px; margin:30px 0 0; font-size:15px}
.locate dt{font-family:var(--display); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); padding-top:4px}
.locate dd{margin:0; color:var(--ink-soft)}
.locate dd b{color:var(--ink); font-weight:500}
.locate__map{aspect-ratio:4/3; background:var(--stone-deep); overflow:hidden; position:relative}
.locate__map img{width:100%; height:100%; object-fit:cover}
.locate__map .pin{
  position:absolute; inset:auto 0 0 0; padding:20px 24px;
  background:rgba(251,249,246,.72);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.locate__map .pin b{font-family:var(--display); font-weight:400; font-size:15px}
.locate__map .pin span{font-size:13px; color:var(--ink-faint)}

/* ==========================================================================
   10 · Enquire
   ========================================================================== */
.enquire{background:var(--ink); color:var(--ink-invert)}
.enquire .display{color:#fff}
.enquire p{color:rgba(251,249,246,.66)}
.enquire__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,6vw,86px); align-items:start}
.form{display:grid; gap:18px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{
  font-family:var(--display); font-size:10.5px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(251,249,246,.5);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:15.5px; color:#fff;
  background:transparent; border:0; border-bottom:1px solid rgba(251,249,246,.24);
  padding:10px 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical; min-height:74px}
.field select{appearance:none; cursor:pointer}
.field select option{background:#2E3033; color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-bottom-color:var(--lilac)}
.field input::placeholder,.field textarea::placeholder{color:rgba(251,249,246,.32)}
.form .btn{--btn-bg:var(--ink-invert); --btn-fg:var(--ink); --btn-line:var(--ink-invert); justify-self:start; margin-top:8px}
.form .btn:hover{background:var(--lilac); border-color:var(--lilac); color:#fff}
.form__note{font-size:13px; color:rgba(251,249,246,.42); margin:0}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink); color:rgba(251,249,246,.6); padding-top:0; padding-bottom:56px}
.site-footer__top{border-top:1px solid rgba(251,249,246,.13); padding-top:56px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.site-footer h4{font-family:var(--display); font-size:10.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:rgba(251,249,246,.4); margin:0 0 16px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px}
.site-footer a:hover{color:#fff}
.site-footer .brand{color:#fff; padding-left:0}
.site-footer__base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:52px; padding-top:22px; border-top:1px solid rgba(251,249,246,.13);
  font-size:13px;
}
.langtoggle{display:inline-flex; border:1px solid rgba(251,249,246,.22); border-radius:999px; overflow:hidden}
.langtoggle button{padding:6px 15px; font-family:var(--display); font-size:11.5px; letter-spacing:.16em}
.langtoggle button[aria-pressed="true"]{background:rgba(251,249,246,.92); color:var(--ink)}

/* ==========================================================================
   Reveal on scroll — a controlled exhale, not a pop
   ========================================================================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.10s}
.reveal[data-delay="2"]{transition-delay:.20s}
.reveal[data-delay="3"]{transition-delay:.30s}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .statement__grid,.locate__grid,.enquire__grid{grid-template-columns:1fr; gap:34px}
  .space__grid{grid-template-columns:1fr}
  .site-footer__top{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:880px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__cta{display:none}
  .cards{grid-template-columns:1fr; gap:34px}
  .card__arch{aspect-ratio:4/3.4; border-radius:600px 600px 4px 4px}
  .tiers{grid-template-columns:1fr}
  .facts__grid{grid-template-columns:1fr 1fr}
  .fact{border-right:0; padding:24px 0 !important; border-bottom:1px solid var(--hair)}
  .fact:nth-child(odd){padding-right:24px !important}
  .fact:nth-child(even){padding-left:24px !important; border-left:1px solid var(--hair)}
  .fact:nth-last-child(-n+2){border-bottom:0}
  .rates{grid-template-columns:1fr 1fr; gap:22px}
  .rung{grid-template-columns:1fr; gap:5px; padding:18px 0}
  .rung__price{font-size:14px}
  .form__row{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hero__slide img{object-position:center 58%}
  .hero h1{font-size:clamp(38px,10.5vw,56px)}
  .hero .eyebrow{margin-bottom:16px}
}
@media (max-width:560px){
  .hero__plate .shell{flex-direction:column; align-items:flex-start}
  .hero__aside{align-items:flex-start; width:100%}
  .hero__cue{display:none}
  .site-footer__top{grid-template-columns:1fr}
}

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

/* ==========================================================================
   Inner pages — no hero, so the page needs to clear the fixed navigation
   ========================================================================== */
.pagehead{padding:clamp(148px,17vh,206px) 0 clamp(30px,5vw,56px); background:var(--stone)}
.pagehead .display{margin-bottom:.32em}
.pagehead .lede{max-width:46ch; margin-bottom:0}
.pagehead--plain{background:var(--plaster); border-bottom:1px solid var(--hair)}

/* ==========================================================================
   Story band — replaces the plain white statement and the stats row
   ========================================================================== */
.story{background:var(--stone); overflow:hidden}
.story__grid{display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(34px,6vw,96px); align-items:center}
.story__copy .lede{max-width:20ch; font-size:clamp(28px,3.9vw,50px); line-height:1.1; margin-bottom:.7em}
.story__copy p{max-width:44ch}
.story__media{position:relative; align-self:stretch; min-height:340px}
.story__media figure{margin:0; height:100%; overflow:hidden; background:var(--stone-deep)}
.story__media img{width:100%; height:100%; object-fit:cover; min-height:clamp(340px,54vw,620px)}
.story__plate{
  position:absolute; left:clamp(-30px,-2vw,-16px); bottom:clamp(18px,3vw,34px);
  display:grid; gap:14px; padding:22px 26px;
  background:rgba(251,249,246,.74);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 40px rgba(46,48,51,.16);
  border-radius:4px; max-width:250px;
}
.story__plate div{display:flex; align-items:baseline; gap:12px}
.story__plate b{
  font-family:var(--display); font-weight:300; font-size:30px; line-height:1;
  letter-spacing:-.03em; min-width:52px; font-variant-numeric:tabular-nums;
}
.story__plate span{font-size:12.5px; color:var(--ink-soft); line-height:1.35}

/* ==========================================================================
   Word band — slow drift between the quiet sections
   ========================================================================== */
.marquee{background:var(--ink); color:var(--ink-invert); padding:clamp(18px,2.4vw,28px) 0; overflow:hidden}
.marquee__track{display:flex; width:max-content; animation:slide 46s linear infinite}
.marquee__track > span{
  display:inline-flex; align-items:center; gap:clamp(26px,4vw,54px);
  padding-right:clamp(26px,4vw,54px);
  font-family:var(--display); font-weight:200;
  font-size:clamp(21px,3vw,42px); letter-spacing:.01em; white-space:nowrap;
}
.marquee i{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--lilac); flex:none}
@keyframes slide{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ==========================================================================
   Timetable
   ========================================================================== */
.daytabs{display:none; gap:8px; margin-bottom:20px; overflow-x:auto; padding-bottom:4px}
.daytabs button{
  flex:none; padding:9px 17px; border-radius:999px; border:1px solid var(--hair-strong);
  font-family:var(--display); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.daytabs button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--ink-invert)}

.timetable{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:4px; overflow:hidden}
.day{background:var(--plaster); padding:16px 13px 18px; display:flex; flex-direction:column; gap:9px; min-height:190px}
.day__name{
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 4px; display:flex; justify-content:space-between; gap:6px;
}
.day__name em{font-style:normal; font-weight:400; color:var(--hair-strong)}
.slot{
  display:block; background:var(--white); border:1px solid var(--hair); border-radius:3px;
  padding:10px 11px 11px; transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.slot:hover{border-color:var(--ink); transform:translateY(-2px); box-shadow:0 6px 18px rgba(46,48,51,.08)}
.slot__time{font-family:var(--display); font-weight:500; font-size:14.5px; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.slot__class{font-size:13px; color:var(--ink-soft); margin:2px 0 5px; line-height:1.3}
.slot__left{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lilac)}
.slot--tight .slot__left{color:#A8703C}
.slot--full{opacity:.48; pointer-events:none}
.slot--full .slot__left{color:var(--ink-faint)}
.timetable__foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; margin-top:24px}
.timetable__key{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint)}
.timetable__key b{font-weight:500; color:var(--lilac)}

/* ==========================================================================
   Wellness teaser
   ========================================================================== */
.teaser{display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; background:var(--ink); color:var(--ink-invert); overflow:hidden}
.teaser__media{position:relative; min-height:clamp(280px,36vw,460px)}
.teaser__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.teaser__body{padding:clamp(38px,5.5vw,78px); display:flex; flex-direction:column; justify-content:center}
.teaser__body .display{color:#fff; max-width:15ch}
.teaser__body p{color:rgba(251,249,246,.72); max-width:42ch}
.teaser__list{list-style:none; margin:6px 0 30px; padding:0; display:grid; gap:10px}
.teaser__list li{position:relative; padding-left:20px; font-size:14.5px; color:rgba(251,249,246,.86)}
.teaser__list li::before{content:""; position:absolute; left:0; top:.7em; width:9px; height:1px; background:var(--lilac)}

/* ==========================================================================
   Map
   ========================================================================== */
.mapframe{position:relative; aspect-ratio:16/11; overflow:hidden; border-radius:4px; background:var(--stone-deep); border:1px solid var(--hair)}
.mapframe iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.22) contrast(1.04) saturate(.92)}
.mapframe__pin{
  position:absolute; inset:auto 14px 14px 14px; padding:16px 20px; border-radius:3px;
  background:rgba(251,249,246,.80);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.66);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.mapframe__pin b{font-family:var(--display); font-weight:500; font-size:14.5px}
.mapframe__pin span{font-size:12.5px; color:var(--ink-faint); display:block; margin-top:2px}

/* ==========================================================================
   Closing section + baseline
   ========================================================================== */
.closing{position:relative; display:flex; align-items:center; overflow:hidden; background:var(--ink); min-height:min(92vh,820px)}
.closing__media{position:absolute; inset:0}
.closing__media img{width:100%; height:100%; object-fit:cover}
.closing__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(18,16,15,.52) 0%, rgba(18,16,15,.30) 34%, rgba(18,16,15,.86) 100%),
    linear-gradient(to right, rgba(18,16,15,.60) 0%, rgba(18,16,15,.22) 52%, rgba(18,16,15,.10) 100%);
}
.closing__inner{position:relative; width:100%; padding-block:clamp(72px,10vw,124px); color:#fff}
.closing .display{color:#fff; font-size:clamp(36px,5.6vw,78px); margin-bottom:.34em}
.closing__sub{color:rgba(255,255,255,.82); max-width:40ch; font-size:17px}
.closing__actions{display:flex; align-items:center; gap:clamp(18px,3vw,34px); flex-wrap:wrap; margin-top:30px}
.textlink--light{color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.42)}
.textlink--light:hover{color:#fff; border-bottom-color:#fff}
.closing__meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px);
  margin-top:clamp(52px,7vw,92px); padding-top:clamp(26px,3vw,36px);
  border-top:1px solid rgba(255,255,255,.24);
}
.closing__meta h4{
  font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.52); margin:0 0 12px;
}
.closing__meta p{color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.62; margin:0}
.closing__meta a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}

.baseline{background:var(--plaster); border-top:1px solid var(--hair); padding:20px 0}
.baseline .shell{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.baseline__nav{display:flex; gap:clamp(14px,2vw,26px); flex-wrap:wrap}
.baseline__nav a{font-size:13px; color:var(--ink-soft)}
.baseline__nav a:hover{color:var(--ink)}
.baseline__end{display:flex; align-items:center; gap:18px; font-size:12.5px; color:var(--ink-faint)}
.baseline .langtoggle{border-color:var(--hair-strong)}
.baseline .langtoggle button{color:var(--ink-soft)}
.baseline .langtoggle button[aria-pressed="true"]{background:var(--ink); color:var(--ink-invert)}

/* current page marker */
.nav__links a[aria-current="page"]{opacity:1}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

/* ==========================================================================
   Responsive for the new pieces
   ========================================================================== */
@media (max-width:1080px){
  .story__grid{grid-template-columns:1fr; gap:30px}
  .story__plate{left:auto; right:16px; bottom:16px}
  .teaser{grid-template-columns:1fr}
  .closing__meta{grid-template-columns:1fr 1fr; gap:26px}
}
@media (max-width:880px){
  .daytabs{display:flex}
  .timetable{grid-template-columns:1fr; border:0; background:transparent; gap:0}
  .day{display:none; border:1px solid var(--hair); border-radius:4px; min-height:0}
  .day.is-active{display:flex}
  .baseline .shell{flex-direction:column; align-items:flex-start; gap:14px}
}
@media (max-width:560px){
  .closing__meta{grid-template-columns:1fr}
  .story__plate{max-width:none; left:16px}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
}

/* ==========================================================================
   Price list (memberships, wellness) — four columns of the ladder
   ========================================================================== */
.pricelist{border-top:1px solid var(--hair)}
.prow{
  display:grid; grid-template-columns:1.1fr .8fr .8fr auto; gap:20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--hair);
}
.prow__name{font-family:var(--display); font-size:17px; font-weight:500; letter-spacing:-.01em}
.prow__name small{display:block; font-family:var(--body); font-size:12.5px; font-weight:400; color:var(--lilac); letter-spacing:.14em; text-transform:uppercase; margin-top:5px}
.prow__cell{color:var(--ink-soft); font-size:14.5px}
.prow__price{font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.prow--head{padding:0 0 12px; border-bottom:1px solid var(--hair-strong)}
.prow--head span{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.prow--top{background:linear-gradient(90deg,var(--lilac-wash),transparent 72%); padding-inline:18px; margin-inline:-18px}

/* steps — your first class */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); counter-reset:step}
.step-card{counter-increment:step; padding-top:22px; border-top:1px solid var(--hair-strong)}
.step-card::before{
  content:"0" counter(step); display:block; font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.2em; color:var(--lilac); margin-bottom:14px;
}
.step-card h3{font-family:var(--display); font-weight:500; font-size:18px; letter-spacing:-.01em; margin:0 0 8px}
.step-card p{font-size:14.5px; margin:0}

.prose p{max-width:62ch}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start}

@media (max-width:880px){
  .prow{grid-template-columns:1fr auto; gap:6px 16px}
  .prow__cell{grid-column:1/-1; font-size:13.5px}
  .prow--head{display:none}
  .steps{grid-template-columns:1fr 1fr}
  .twocol{grid-template-columns:1fr}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ==========================================================================
   Section grounds — the page alternates so no two neighbours are the same.
   Order on the homepage:
   photo → stone → ink → plaster → stone → wash → plaster → photo → ink → stone → photo
   ========================================================================== */
.section--wash{background:linear-gradient(180deg, var(--lilac-wash) 0%, #F7F3F8 58%, var(--plaster) 100%)}
.section--ink{background:var(--ink); color:var(--ink-invert)}
.section--ink .display,.section--ink h3{color:#fff}
.section--ink p{color:rgba(251,249,246,.74)}
.section--ink .eyebrow{color:rgba(255,255,255,.56)}

/* the dark membership card was losing its own price */
.tier--featured .tier__rate{color:rgba(251,249,246,.78)}
.tier--featured h3{color:#fff}
.tier--featured .tier__price{color:#fff}
.tier--featured .tier__price small{color:rgba(251,249,246,.72)}
.tier--featured .tier__flag{color:#C3B2E4}

/* cards sitting on the wash need a touch more definition */
.section--wash .slot{border-color:#E7DFEB}
.section--wash .timetable{border-color:#E7DFEB; background:#E7DFEB}
.section--wash .day{background:rgba(255,255,255,.62)}

/* ==========================================================================
   Fixes from browser review
   ========================================================================== */
/* timetable slots were running their three lines together */
.slot__time,.slot__class,.slot__left{display:block}
.slot__time{margin-bottom:1px}

/* the glass plate was too faint and its labels wrapped badly */
.story__plate{max-width:300px; background:rgba(251,249,246,.84); padding:24px 26px}
.story__plate div{align-items:center}
.story__plate b{font-size:32px; min-width:44px}
.story__plate span{font-size:12px; line-height:1.3; letter-spacing:.01em}

/* the wash was fading back to plaster, which erased the alternation */
.section--wash{background:linear-gradient(180deg,#F2EDF7 0%,#F5F1F8 62%,#F3EFF7 100%); border-top:1px solid #E9E1EF; border-bottom:1px solid #E9E1EF}

/* keep the closing meta readable over the brightest part of the photograph */
.closing__veil{
  background:
    linear-gradient(to bottom, rgba(18,16,15,.54) 0%, rgba(18,16,15,.32) 30%, rgba(18,16,15,.72) 74%, rgba(18,16,15,.92) 100%),
    linear-gradient(to right, rgba(18,16,15,.62) 0%, rgba(18,16,15,.26) 55%, rgba(18,16,15,.12) 100%);
}

/* the arch crop was filling with ceiling — bias it down to the machines */
.card__arch img{object-position:center 64%}

/* ==========================================================================
   REVISION 2 — nude palette, inspo-led timetable and plan cards
   ========================================================================== */
:root{
  /* the accent moves off purple and onto the room's own clay/bronze */
  --lilac:#95784F;
  --lilac-deep:#7A6140;
  --lilac-wash:#F2EADE;
  --tan:#C3AC94;
  --tan-deep:#B39A80;
  --sand:#EFE6D9;
}
.section--wash{
  background:linear-gradient(180deg,#F3ECE1 0%,#F6F1E9 60%,#F4EEE5 100%);
  border-top:1px solid #E8DDCC; border-bottom:1px solid #E8DDCC;
}
.section--wash .timetable{border-color:#E2D6C3; background:transparent}
.section--wash .day{background:transparent}

/* ---------- the room: left figure and right stack now match in height ---- */
.space__grid{grid-template-columns:1.28fr 1fr; align-items:stretch}
.space__figure--tall{aspect-ratio:4/5}
.space__figure--tall img{min-height:0}
.space__figure--wide{aspect-ratio:auto; height:auto; min-height:0}
.space__col{display:grid; grid-template-rows:1fr 1fr; min-height:0}
.space__figure{min-height:0}
.space__figure img{width:100%; height:100%; object-fit:cover; min-height:0}
@media (max-width:1080px){
  .space__figure--tall{aspect-ratio:4/5}
  .space__figure--wide{aspect-ratio:4/3}
  .space__col{grid-template-rows:auto auto}
}

/* ---------- word band: smaller, thinner, never pauses ------------------- */
.marquee{padding:10px 0}
.marquee__track > span{
  font-family:var(--display); font-weight:500;
  font-size:clamp(10.5px,1.05vw,12.5px); letter-spacing:.3em; text-transform:uppercase;
  gap:clamp(16px,2.2vw,30px); padding-right:clamp(16px,2.2vw,30px);
}
.marquee i{width:3px; height:3px; background:var(--tan)}
.marquee:hover .marquee__track{animation-play-state:running}

/* ---------- timetable, rebuilt on the reference layout ------------------ */
.timetable{
  grid-template-columns:repeat(7,1fr); gap:0;
  background:var(--plaster); border:1px solid var(--hair);
  border-radius:8px; overflow:hidden;
}
.day{
  padding:0; background:transparent; gap:0; min-height:0;
  border-right:1px solid var(--hair); display:flex; flex-direction:column;
}
.day:last-child{border-right:0}
.day__name{
  display:block; margin:0; padding:16px 8px; text-align:center;
  background:var(--tan); color:#fff;
  font-family:var(--display); font-weight:500; font-size:13.5px;
  letter-spacing:.04em; text-transform:none;
}
.day__name em{display:none}
.slot{
  display:block; background:transparent; border:0; border-radius:0;
  padding:20px 12px 21px; text-align:center;
  transition:background .35s var(--ease);
}
.slot:hover{background:#fff; transform:none; box-shadow:none; border:0}
.day .slot:nth-of-type(odd){background:var(--sand)}
.day .slot:nth-of-type(odd):hover{background:#F7F1E7}
.slot__time{font-family:var(--body); font-size:12.5px; font-weight:400; color:var(--ink-faint); letter-spacing:.03em; margin:0}
.slot__class{font-family:var(--display); font-weight:400; font-size:17px; letter-spacing:-.01em; color:var(--ink); margin:7px 0 6px}
.slot__left{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lilac)}
.slot--tight .slot__left{color:#B0713A}
.slot--full{opacity:.42}
.timetable__key b{color:var(--lilac)}

.daytabs button[aria-pressed="true"]{background:var(--tan-deep); border-color:var(--tan-deep); color:#fff}
@media (max-width:880px){
  .timetable{grid-template-columns:1fr; border-radius:8px}
  .day{border-right:0; border:0}
  .day.is-active{display:flex}
}

/* ---------- membership plans, built on the reference grid --------------- */
.plans{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(30px,5vw,76px); align-items:start}
.plans__intro .display{margin-bottom:.5em}
.plans__intro p{max-width:34ch}
.plans__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hair); border:1px solid var(--hair); border-radius:4px; overflow:hidden;
}
.plan{background:var(--plaster); display:flex; flex-direction:column; text-align:center}
.plan--featured{background:var(--sand)}
.plan__top{padding:32px 24px 28px; display:flex; flex-direction:column; flex:1}
.plan__flag{
  font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lilac); min-height:13px; margin-bottom:14px;
}
.plan__name{
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); margin:0 0 8px;
}
.plan__meta{font-size:13.5px; color:var(--ink-faint); margin:0}
.plan__price{
  font-family:var(--display); font-weight:200; font-size:clamp(34px,3.9vw,50px);
  line-height:1; letter-spacing:-.035em; margin:20px 0 0; font-variant-numeric:tabular-nums; color:var(--ink);
}
.plan__unit{
  display:block; font-family:var(--display); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px;
}
.plan__rate{font-size:13px; color:var(--ink-soft); margin:14px 0 0}
.plan__foot{
  border-top:1px solid var(--hair); padding:15px 16px;
  display:flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); transition:background .35s var(--ease), color .35s var(--ease);
}
.plan__foot:hover{background:var(--ink); color:var(--ink-invert)}
.plan__foot .arrow{transition:transform .4s var(--ease)}
.plan__foot:hover .arrow{transform:translateX(5px)}
@media (max-width:1080px){ .plans{grid-template-columns:1fr; gap:30px} }
@media (max-width:560px){ .plans__grid{grid-template-columns:1fr} }

/* ---------- placeholder notice on the pages we have not designed yet ---- */
.notice{padding:clamp(96px,12vh,124px) 0 0}
.notice__bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--sand); border:1px solid var(--tan); border-radius:4px;
  padding:14px 20px; font-size:14px; color:var(--ink-soft);
}
.notice__bar b{
  font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lilac-deep); background:#fff;
  border:1px solid var(--tan); border-radius:999px; padding:5px 12px; flex:none;
}
.notice + .pagehead{padding-top:clamp(30px,4vw,48px)}

/* ---------- the room, height-matched for real ---------------------------
   The two right-hand figures take their images out of flow so they add no
   intrinsic height. The row is then sized purely by the tall figure, and the
   right column splits exactly that height between its two rows.            */
.space__grid{align-items:stretch}
.space__figure--tall{aspect-ratio:4/5; height:auto}
.space__col{height:100%; min-height:0; grid-template-rows:1fr 1fr}
.space__figure--wide{position:relative; height:100%; min-height:0; aspect-ratio:auto; overflow:hidden}
.space__figure--wide picture{position:absolute; inset:0; display:block}
.space__figure--wide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

@media (max-width:1080px){
  .space__col{height:auto; grid-template-rows:auto auto}
  .space__figure--wide{aspect-ratio:4/3; height:auto}
}

/* figure carries a default 1em/40px margin in every browser — that was both
   the width shortfall and the 32px height mismatch in the room grid */
figure{margin:0}
.space__figure{margin:0}

/* the flat rules above were overriding the earlier breakpoint, so the room
   grid never collapsed to one column on a phone — restate it last */
@media (max-width:1080px){
  .space__grid{grid-template-columns:1fr; align-items:start}
}

/* ==========================================================================
   REVISION 3 — brown and light gold
   The accent moves off clay onto the brown / gold pairing from Option B, and
   an italic Playfair accent word is introduced for gilded headline words.
   ========================================================================== */
:root{
  /* gold — the accent, used once per screen */
  --gold:#B08A4E;
  --gold-soft:#DCC094;
  --gold-fill:#D6A860;
  --lilac:#B08A4E;          /* legacy token name, now gold */
  --lilac-deep:#8E6D3B;
  --lilac-wash:#F4ECDF;

  /* brown — every dark panel and all body text */
  --ink:#2B231F;
  --ink-soft:#5E564D;
  --ink-faint:#8C8479;
  --tan:#2E2521;            /* timetable header is now brown */
  --tan-deep:#241D19;

  /* warm neutrals retuned to sit under the gold */
  --plaster:#FBF9F5;
  --stone:#F2EBE1;
  --stone-deep:#E7DCCB;
  --sand:#EFE6D7;
  --hair:#E6DCCD;
  --hair-strong:#D3C4AD;

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
}

/* the gilded italic accent word */
.gilt{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  background:linear-gradient(96deg,var(--gold) 6%,var(--gold-soft) 58%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
  padding-right:.04em;   /* italics clip on the right edge without this */
}
.gilt--light{
  background:linear-gradient(96deg,#F2E0C4 6%,#D3AE79 52%,#F0DDC0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* a gold-filled call to action, as on the reference hero */
.btn--gold{--btn-bg:var(--gold-fill); --btn-fg:#fff; --btn-line:var(--gold-fill)}
.btn--gold:hover{background:transparent; color:#fff; border-color:#fff}

/* the wash section follows the gold */
.section--wash{
  background:linear-gradient(180deg,#F5EDE0 0%,#F8F2E8 60%,#F6EFE4 100%);
  border-top:1px solid #EADEC9; border-bottom:1px solid #EADEC9;
}
.section--wash .timetable{border-color:#E6D9C2}

/* ---------- the method section, set editorially ---------- */
.story__copy .kicker{
  font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 26px;
}
.story__head{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,3.9vw,54px); line-height:1.14; letter-spacing:-.012em;
  color:var(--ink); margin:0 0 .6em; max-width:15ch; text-wrap:balance;
}
.story__copy p{font-size:15.5px; line-height:1.85; max-width:46ch}

/* the figures on the glass plate */
.story__plate b{font-family:var(--serif); font-weight:400; font-size:32px}
.story__plate span{letter-spacing:.14em; text-transform:uppercase; font-size:10px; color:var(--ink-faint)}

/* ==========================================================================
   REVISION 4 — membership grid and the full pricing tables
   Hairline cells, serif prices, one brown signature cell. No cards, no shadows.
   ========================================================================== */
.pricehead{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(34px,5vw,60px)}
.pricehead .story__head{margin-bottom:0; max-width:none}
.pricehead p{margin:0; font-size:14.5px; max-width:44ch}

.pricegrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
.pcell{
  position:relative; display:flex; flex-direction:column; min-height:270px;
  padding:clamp(26px,2.8vw,42px);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  background:transparent; transition:background .5s var(--ease);
}
.pcell:hover{background:#fff}
.pcell__name{font-family:var(--serif); font-weight:400; font-size:25px; letter-spacing:-.01em; margin:0; color:var(--ink)}
.pcell__meta{
  font-family:var(--display); font-size:9.5px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint); margin:12px 0 0;
}
.pcell__price{
  font-family:var(--serif); font-weight:400; font-size:clamp(25px,2.5vw,33px);
  letter-spacing:-.01em; margin:auto 0 0; padding-top:32px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.pcell__per{
  display:block; font-family:var(--display); font-size:9.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px;
}
.pcell__go{
  margin-top:24px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft);
  transition:color .4s var(--ease), gap .4s var(--ease);
}
.pcell:hover .pcell__go{color:var(--gold); gap:16px}
.pflag{
  position:absolute; top:clamp(26px,2.8vw,42px); right:clamp(26px,2.8vw,42px);
  font-family:var(--display); font-size:8.5px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
}
.pcell--dark{background:var(--ink); color:var(--ink-invert)}
.pcell--dark:hover{background:var(--ink)}
.pcell--dark .pcell__name,.pcell--dark .pcell__price{color:#fff}
.pcell--dark .pcell__meta,.pcell--dark .pcell__per{color:rgba(251,249,246,.58)}
.pcell--dark .pcell__go{color:var(--gold-soft)}
.pcell--dark:hover .pcell__go{color:#fff}
.pcell--dark .pflag{color:var(--gold-soft)}
.pincl{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px}
.pincl li{position:relative; padding-left:16px; font-size:13.5px; color:rgba(251,249,246,.82)}
.pincl li::before{content:""; position:absolute; left:0; top:.72em; width:8px; height:1px; background:var(--gold-soft)}

.pricefoot{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center;
  margin-top:30px; font-size:14.5px; color:var(--ink-soft);
}

/* ---------- full pricing tables ---------- */
.ptable-wrap{overflow-x:auto; margin:0 0 12px}
.ptable{border-collapse:collapse; width:100%; min-width:640px}
.ptable thead th{
  background:var(--ink); color:var(--ink-invert); text-align:left;
  font-family:var(--serif); font-weight:400; font-size:15px; letter-spacing:.01em;
  padding:16px 20px; white-space:nowrap;
}
.ptable td{
  padding:15px 20px; border-bottom:1px solid var(--hair); font-size:14.5px;
  color:var(--ink-soft); vertical-align:top;
}
.ptable tbody tr:nth-child(odd){background:var(--sand)}
.ptable tbody tr:hover{background:#FFF}
.ptable td:first-child{font-weight:600; color:var(--ink); white-space:nowrap}
.ptable .num{font-family:var(--serif); font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.ptable .star{color:var(--gold); margin-right:6px}
.pnote{
  border-left:2px solid var(--gold); background:var(--sand);
  padding:16px 20px; margin:22px 0 0; font-size:14px; color:var(--ink-soft); font-style:italic;
}
.psec{margin-top:clamp(46px,6vw,78px)}
.psec:first-of-type{margin-top:0}
.psec__label{
  display:flex; align-items:center; gap:18px; margin:0 0 22px;
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:var(--lilac-deep);
}
.psec__label::after{content:""; flex:1; height:1px; background:var(--hair-strong)}

@media (max-width:980px){
  .pricegrid{grid-template-columns:repeat(2,1fr)}
  .pricehead{grid-template-columns:1fr; align-items:start; gap:18px}
}
@media (max-width:620px){
  .pricegrid{grid-template-columns:1fr}
}

/* ==========================================================================
   REVISION 5 — inner pages
   ========================================================================== */
.pagehead{background:var(--stone); padding:clamp(148px,17vh,206px) 0 clamp(38px,5.5vw,72px)}
.pagehead .story__head{font-size:clamp(34px,5vw,62px); max-width:17ch; margin:0 0 .34em}
.pagehead .lede{max-width:48ch; margin-bottom:0; font-size:clamp(17px,1.8vw,21px); color:var(--ink-soft)}
.pagehead--plain{background:var(--plaster); border-bottom:1px solid var(--hair)}
.notice + .pagehead{padding-top:clamp(30px,4vw,48px)}

/* the split feature can face either way */
.teaser--flip{grid-template-columns:1fr 1.05fr}
.teaser--flip .teaser__media{order:2}
.teaser__body .story__head{color:#fff; max-width:13ch; margin-bottom:.4em}
.teaser__body .kicker{color:rgba(255,255,255,.58); font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; margin:0 0 22px}
@media (max-width:1080px){ .teaser--flip{grid-template-columns:1fr} .teaser--flip .teaser__media{order:0} }

/* a quiet editorial two-column block */
.twocol .story__head{max-width:13ch}
.prose .story__head{max-width:15ch}

/* pull quote */
.pullquote{
  font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,34px);
  line-height:1.4; letter-spacing:-.01em; color:var(--ink);
  max-width:24ch; margin:0; padding-left:26px; border-left:2px solid var(--gold);
}

/* a plain fact row, hairline separated */
.facts-row{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair-strong); margin-top:clamp(30px,4vw,50px)}
.facts-row div{padding:24px 26px 0 0; border-right:1px solid var(--hair)}
.facts-row div:last-child{border-right:0}
.facts-row b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.6vw,34px); line-height:1; color:var(--ink)}
.facts-row span{display:block; margin-top:12px; font-family:var(--display); font-size:9.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint)}
@media (max-width:760px){ .facts-row{grid-template-columns:1fr} .facts-row div{border-right:0; border-bottom:1px solid var(--hair); padding:20px 0} }

/* buttons inside the flex column panels were stretching to full width */
.teaser__body .btn,.teaser__body .textlink{align-self:flex-start}
.prose .btn,.prose .textlink{align-self:flex-start}

/* ==========================================================================
   REVISION 6 — dark sections on every page
   ========================================================================== */
.section--ink{background:var(--ink); color:var(--ink-invert)}
.section--ink .story__head,.section--ink .display,.section--ink h2,.section--ink h3{color:#fff}
.section--ink p,.section--ink .lede{color:rgba(251,249,246,.76)}
.section--ink .eyebrow{color:rgba(255,255,255,.54)}
.section--ink .note{color:rgba(251,249,246,.52)}
.section--ink .textlink{color:#fff; border-bottom-color:rgba(255,255,255,.42)}
.section--ink .textlink:hover{color:var(--gold-soft); border-bottom-color:var(--gold-soft)}
.section--ink .btn--ghost{--btn-bg:transparent; --btn-fg:#fff; --btn-line:rgba(255,255,255,.45)}
.section--ink .btn--ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
.section--ink .pullquote{color:#fff; border-left-color:var(--gold-soft)}
.section--ink .step-card{border-top-color:rgba(255,255,255,.28)}
.section--ink .step-card h3{color:#fff}
.section--ink .step-card p{color:rgba(251,249,246,.72)}
.section--ink .facts-row{border-top-color:rgba(255,255,255,.34)}
.section--ink .facts-row div{border-right-color:rgba(255,255,255,.18)}
.section--ink .facts-row b{color:#fff}
.section--ink .facts-row span{color:rgba(255,255,255,.54)}