/* =====================================================================
   RESHAPED — site stylesheet
   ---------------------------------------------------------------------
   Everything visual lives in this file. The HTML carries structure and
   content only, so the whole site can change direction from here.

   ---------------------------------------------------------------------
   THIS VERSION IS BUILT FROM THE REFERENCE, MEASURED

   I had been designing from a text dump of exhalespa.com without ever
   looking at it. Loading it and reading the computed styles showed the
   system is nothing like what I had built:

     background          #FFFFFF — plain white, not a warm off-white
     headings            a LIGHT SANS at 50-56px, sentence case,
                         weight 400, no letter-spacing. Not a serif.
     the signature       every heading is two lines. The first is that
                         sans in black; the SECOND is a fine SCRIPT in
                         warm taupe #B28A6D:

                             Your well-being        (sans, black)
                             is everything          (script, taupe)

                             Relax and recharge     (sans, black)
                             at the spa             (script, taupe)

     dark sections       #1A1A1A
     uppercase           almost nowhere

   So the "modern luxury" quality is: white space, light sans, big
   photography, and one warm script line doing all the decorative work.
   Everything I had been adding — serif display face, uppercase tomato
   labels, swatch marks, coloured fields — was working against it.

   ---------------------------------------------------------------------
   THREE DEVIATIONS FROM THE BRAND BOOK, ALL DELIBERATE, ALL REVERSIBLE

   1. Headings are Montserrat, not Belisha. The reference's whole feeling
      depends on a light sans heading. A display serif cannot produce it.
      Belisha would still be right for the logotype and print.

   2. The accent is a warm taupe, #B28A6D, taken from the reference. It
      is not in the brand book. It is, however, close to Tomato
      desaturated and darkened, so it reads as a quiet relative rather
      than a foreign colour.

   3. Primary buttons are near-black rather than Tomato. Tomato at full
      strength beside taupe on white is loud. Tomato is kept for hover
      states and small emphasis.

   Each is one variable. If you would rather hold the book exactly,
   change --display and --accent back and everything still
   works — it will simply look less like the reference.
   ===================================================================== */

:root{
  /* --- brand colours, unchanged --------------------------------- */
  --pear:#BDE21E;
  --mauve:#E4B0FF;
  --green:#5CBE06;
  --tomato:#F55B3C;

  /* --- the reference's neutrals --------------------------------- */
  --paper:#FFFFFF;         /* white. Measured off the reference.     */
  --sand:#FAF6F1;          /* barely-there warm band                 */
  --linen:#FFFFFF;
  --ink:#1A1A1A;
  --espresso:#1A1A1A;

  /* --- the accent that does all the decorative work -------------- */
  --accent:#B28A6D;        /* warm taupe, measured off the reference */
  --sage:#6F8A5E;          /* the reference's button green (#7A8B7A),
                              pulled toward YOUR Kelly Green so it is a
                              desaturation of your own colour rather
                              than someone else's                      */
  --accent-soft:#E3C9B7;   /* its blush tint, for dark grounds       */
  --clay:#8C7B68;

  --mauve-field:#F3EDF5;
  --green-deep:#3F6B14;

  --grey:#6E6E6E;
  --line:rgba(26,26,26,.12);
  --plum:#5f2b86;

  /* --- type ------------------------------------------------------ */
  /* --- type, per the brand book (page 14-16) ---------------------
     Heading      BELISHA Regular
     Sub-heading  MONTSERRAT, all caps
     Body         Montserrat

     --head is Belisha and is applied ONLY to h1/h2/h3 and .d. It is
     deliberately NOT --display, because --display is also used at small
     sizes — pull quotes, figures, testimonial text — and a display face
     set at 1.1rem usually reads badly. If Belisha turns out to hold up
     small, widen its use then; that is a decision to make while looking
     at it, not in advance.

     Belisha falls back to Montserrat until the files are in
     assets/fonts/, so the site is never broken by their absence — it
     just looks like it did before. Drop the files in and the headings
     change with no other edit.

     Italianno is kept as the script accent. It is not in the brand book;
     it echoes the script lettering on the live Wix site and is a
     deliberate departure rather than an oversight. */
  --head:"Belisha","Montserrat",system-ui,-apple-system,sans-serif;
  --display:"Montserrat",system-ui,-apple-system,sans-serif;
  --sans:"Montserrat",system-ui,-apple-system,sans-serif;
  --script:"Italianno",cursive;

  /* --- layout ---------------------------------------------------- */
  --pad:clamp(22px,4.6vw,68px);
  --max:1280px;

  /* --- vertical rhythm ---------------------------------------------
     ONE value drives the gap above and below every section. It used to
     be a base rule plus seven inline overrides, which is why the spacing
     read as uneven — some sections had 148px above them and others 90px
     for no reason anyone could see. Change --sp and the whole page
     breathes differently, in step.
     ---------------------------------------------------------------- */
  --sp:clamp(72px,9vw,128px);
  --sp-tight:clamp(44px,5.5vw,76px);   /* the dark figures band only */

  /* --- corners ----------------------------------------------------
     Two treatments, deliberately:

     FULL BLEED, SQUARE — the heroes on every page, the wide photographic
     band, the dark figures strip and the footer. These run edge to edge
     with no rounding, because a photograph meant to fill the screen
     starts to look like a component the moment you round it.

     INSET, ROUNDED — everything that is a panel of content rather than a
     photograph: the treatment halves, the tinted sections, cards, and
     images sitting inside a section.
     ---------------------------------------------------------------- */
  --r:22px;
  --r-lg:34px;
  --inset:clamp(12px,2.2vw,30px);   /* gap between a panel and the page */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
/* inside an inset panel the page padding is already partly supplied by the
   panel margin, so pull it back a touch */
.on-sand>.wrap,.on-linen>.wrap,.care>.wrap,.figs>.wrap{padding-inline:clamp(18px,3.4vw,52px)}

section{padding-block:var(--sp)}
/* a section that follows another with no visual break between them drops
   its top padding, so two stacked sections give one gap and not two */
.tight{padding-top:0}

/* Belisha when present, Montserrat until then. See --head above. */
@font-face{
  font-family:"Belisha";
  src:url("../fonts/belisha.woff2") format("woff2"),
      url("../fonts/belisha.woff")  format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;      /* show Montserrat immediately, swap when it loads */
}

h1,h2,h3,.d{font-family:var(--head);font-weight:400;line-height:1.18;letter-spacing:normal}

/* ---------------------------------------------------------------------
   THE SIGNATURE: the second line of a heading is a script, in taupe.
   Works two ways so the HTML barely changed —
     <h2 class="stack"><span>first line</span><span>second line</span></h2>
     <h2>first line <em class="it">second line</em></h2>
   ------------------------------------------------------------------ */
em.it,.stack span+span{
  font-family:var(--script);font-style:normal;font-weight:400;
  color:var(--accent);font-size:1.5em;line-height:.9;
  letter-spacing:.01em;display:inline-block;
}
.stack span+span{display:block;margin-top:.06em}
/* on dark grounds the taupe goes to its blush tint so it stays legible */
.hero-full em.it,.hero-full .stack span+span,
.phero em.it,.phero .stack span+span,
.band em.it,.band .stack span+span,
.duo.on-ink em.it,.duo.on-ink .stack span+span,
.figs em.it{color:var(--accent-soft)}
.lede{font-size:clamp(17px,1.25vw,19px);line-height:1.6;max-width:56ch;color:#3D3D3D;font-weight:400}
.lede+.lede{margin-top:1rem}

/* RETIRED: the eyebrow label ("Treatment one", "Our story", "Voices").
   Thirty-seven of them across the site, and almost all were restating the
   heading directly beneath — "Treatment two — new" above a heading that
   said Signature Sculpt. The reference uses none. The style is kept here so any
   single one can be brought back by adding the class again. */
.label{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:1.2rem;
}

/* retired: the Pear highlight. The script line is the accent now, and
   two accents in one heading is one too many. */

.h-sec{font-size:clamp(1.9rem,3.6vw,3.1rem);margin-bottom:clamp(30px,4.5vw,52px)}
.h-page{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:.38em}

/* ---------------------------------------------------------------------
   Media wells — every image and video slot, labelled with its crop.
   Replace a well with: <img src="assets/img/x.jpg" alt="...">
   ------------------------------------------------------------------ */
.well{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:#EDE8E2;
}
.well b{
  font-weight:400;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(28,23,20,.42);text-align:center;line-height:2.1;padding:1rem;
}
.well.dark{background:#1A1A1A}
.well.dark b{color:rgba(255,255,255,.4)}
.play{position:absolute;width:82px;height:82px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(3px);display:grid;place-items:center}
.play:after{content:"";border-left:15px solid #fff;border-block:10px solid transparent;margin-left:5px}

/* ---------------------------------------------------------------------
   Buttons — near-black, square, generous padding. Tomato on hover, so
   the brand's call-to-action colour is still doing a job without
   shouting over the taupe.
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:14px;font-weight:500;letter-spacing:normal;text-transform:uppercase;
  padding:.85em 2.6em;border-radius:999px;border:1px solid var(--sage);
  background:var(--sage);color:#fff;transition:.3s;cursor:pointer;
}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.out{background:transparent;color:var(--ink);border-color:rgba(26,26,26,.28)}
.btn.cream{background:#fff;border-color:#fff;color:var(--ink)}
.btn.cream:hover{background:var(--tomato);border-color:var(--tomato);color:#fff}
.btn.outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn.out:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}

/* ---------------------------------------------------------------------
   Swatch spine — the brand book's palette page, turned into navigation
   ------------------------------------------------------------------ */
.spine{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:16px}
/* removed: the fixed swatch rail was more small squares */
.spine a{display:flex;align-items:center;gap:12px}
.spine i{width:26px;height:9px;background:var(--ink);opacity:.22;transition:.35s}
.spine a:hover i,.spine a.on i{opacity:1;width:38px}
.spine a:nth-child(1):hover i,.spine a:nth-child(1).on i{background:var(--green)}
.spine a:nth-child(2):hover i,.spine a:nth-child(2).on i{background:var(--mauve)}
.spine a:nth-child(3):hover i,.spine a:nth-child(3).on i{background:var(--pear)}
.spine a:nth-child(4):hover i,.spine a:nth-child(4).on i{background:var(--tomato)}
.spine a:nth-child(5):hover i,.spine a:nth-child(5).on i{background:var(--green)}
.spine a:nth-child(6):hover i,.spine a:nth-child(6).on i{background:var(--ink)}
.spine s{text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:.35s;white-space:nowrap}
.spine a:hover s{opacity:.75;transform:none}

/* ---------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:72px}
/* ---------------------------------------------------------------------
   LOGO
   Drop assets/img/logo.svg (or .png) in and it appears automatically.
   Until then the markup falls back to the RESHAPED wordmark in type, so
   the header is never empty and never shows a broken image.
   Height is what to adjust — never width; the aspect ratio takes care of
   itself and a logo squashed by a fixed width is the most common way a
   good identity gets ruined on a website.
   ------------------------------------------------------------------ */
.mark{
  font-family:var(--display);font-weight:400;font-size:1.15rem;
  letter-spacing:.34em;text-transform:uppercase;
  display:inline-flex;align-items:center;line-height:1;
}
.mark img{height:26px;width:auto;display:block}
@media(max-width:520px){.mark{font-size:1rem;letter-spacing:.24em}.mark img{height:22px}}

/* footer logo, on the dark ground — supply a light version, or the same
   file will be inverted by the filter below if it is a dark SVG */
footer .mark img{height:30px;filter:brightness(0) invert(1);opacity:.95}
.nav nav{display:flex;gap:1.7rem}
.nav nav a{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#3B342D;transition:.25s;padding-block:.4rem;border-bottom:1.5px solid transparent}
.nav nav a:hover{color:var(--accent)}
.nav nav a.current{border-color:var(--accent)}
.burger{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;line-height:1}
@media(max-width:1020px){
  .nav nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:1rem var(--pad) 1.6rem;border-bottom:1px solid var(--line)}
  .nav nav.open{display:flex}
  .nav nav a{padding-block:.75rem;border-bottom:1px solid var(--line)}
  .burger{display:block}
}

/* ---------------------------------------------------------------------
   Hero — home
   ------------------------------------------------------------------ */
/* removed: dead .hero rule — the site uses .hero-full */
.hero .g{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,66px);align-items:center}
@media(max-width:940px){.hero .g{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.9rem,8.6vw,7.2rem);margin-bottom:.4em}
.hero .well{aspect-ratio:5/6}

/* page header, for inner pages */
/* removed: dead .phead rules — inner pages use .phero */

/* removed: .facts (the three small labels under the hero headline) and
   .rail (the four-item strip below the hero). Both were small-print
   devices competing with the photograph. */

/* ---------------------------------------------------------------------
   Statement
   ------------------------------------------------------------------ */
/* ---------------------------------------------------------------------
   THE STATEMENT BLOCK
   A large opening line on the left, the body copy on the right. Genuine
   two-column asymmetry — the whole width is used, and the eye has
   somewhere to go.

   It was briefly a single narrow column with half the page empty, which
   is what made the text look like it had fallen out of the layout.
   ------------------------------------------------------------------ */
.state{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(26px,4.5vw,78px);
  align-items:start;
}
@media(max-width:920px){
  .state{grid-template-columns:1fr;gap:1.4rem}
}
.state .big{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.55rem,2.9vw,2.5rem);line-height:1.22;
  max-width:17ch;
}
.state-body .lede{max-width:56ch}
.state-body .lede+.lede{margin-top:1.1rem}

/* ---------------------------------------------------------------------
   Treatment blocks
   ------------------------------------------------------------------ */
.treat{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4.6vw,72px);align-items:center}
.treat+.treat{margin-top:clamp(52px,7vw,104px)}
.treat.flip .media{order:2}
@media(max-width:940px){.treat{grid-template-columns:1fr}.treat.flip .media{order:0}}
.treat .well{aspect-ratio:4/5}
.treat h2{font-size:clamp(2rem,5vw,3.8rem);margin-bottom:1rem}

.ticks{list-style:none;margin-top:1.6rem;display:grid;gap:.6rem;font-size:16px}
.ticks li{padding-left:1.9rem;position:relative;color:#38312A}
.ticks li:before{content:"";position:absolute;left:0;top:.9em;width:14px;height:1px;background:var(--accent)}
.ticks.mv li:before{background:var(--mauve)}

/* spec table, used on the treatment pages */
.spec{margin-top:2rem;border-top:1.5px solid var(--ink)}
.spec div{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;padding-block:15px;border-bottom:1px solid var(--line);font-size:16px}
.spec dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding-top:.34em}
@media(max-width:620px){.spec div{grid-template-columns:1fr;gap:.2rem}}

/* ---------------------------------------------------------------------
   Figures band
   ------------------------------------------------------------------ */
.figs{background:var(--espresso);color:#F4F0E8}
.figs .in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,42px)}
@media(max-width:840px){.figs .in{grid-template-columns:repeat(2,1fr);gap:32px}}
.figs b{display:block;font-family:var(--display);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:300;line-height:1}
.figs b em{font-family:var(--sans);font-style:normal;color:var(--accent-soft);font-size:.5em;vertical-align:.4em;margin-left:.06em}
.figs span{display:block;margin-top:.9rem;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,240,232,.7);max-width:18ch}

/* Centre each statistic in its column.
   The four columns are equal, but the contents were left-aligned inside
   them, and the labels are different lengths — so the band read as
   drifting left with a ragged gap on the right.

   Three parts, and all three are needed:
     justify-items  centres each cell's box within its column
     text-align     centres the number and the label inside that box
     margin-inline  the label is a block with max-width:18ch, so it needs
                    auto margins or it stays pinned left however the text
                    inside it is aligned */
.figs .in{justify-items:center;text-align:center}
.figs span{margin-inline:auto}

/* ---------------------------------------------------------------------
   Care field — the single Mauve moment
   ------------------------------------------------------------------ */
.care{background:var(--mauve-field)}
.care .in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.6vw,70px);align-items:center}
@media(max-width:900px){.care .in{grid-template-columns:1fr}}
.care .label{color:var(--plum)}
.care .label:before{background:var(--plum)}
.care h2{font-size:clamp(1.9rem,4.4vw,3.2rem);margin-bottom:1.2rem}
.care .lede{color:#2a1338}
.care .well{aspect-ratio:4/3}
.pull{font-family:var(--script);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.15;color:var(--accent);border:0;padding:0;margin-block:1.9rem}

/* ---------------------------------------------------------------------
   Film
   ------------------------------------------------------------------ */
.film .well{aspect-ratio:16/8}
@media(max-width:700px){.film .well{aspect-ratio:4/3}}

/* ---------------------------------------------------------------------
   Method
   ------------------------------------------------------------------ */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.2vw,50px)}
@media(max-width:840px){.method{grid-template-columns:1fr;gap:30px}}
.method .n{font-family:var(--script);font-size:3.1rem;line-height:.85;color:var(--accent);margin-bottom:.9rem;display:block}
.method .well{aspect-ratio:4/3;margin-bottom:1.2rem}
.method h4{font-family:var(--display);font-weight:400;font-size:1.25rem;margin-bottom:.5rem}
.method p{font-size:16px;color:#38312A}

/* ---------------------------------------------------------------------
   Voices
   ------------------------------------------------------------------ */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,26px)}
@media(max-width:900px){.voices{grid-template-columns:1fr}}
.voice{background:var(--sand);border:0;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:1rem}
.voice .st{color:var(--accent);font-size:12px;letter-spacing:.3em}
.voice q{font-family:var(--display);font-weight:300;font-size:1.1rem;line-height:1.6;flex:1;quotes:"\201C" "\201D"}
.voice .by{display:flex;align-items:center;gap:.7rem;font-size:14px;color:#3a3934}
.voice .av{width:34px;height:34px;background:var(--accent-soft);display:grid;place-items:center;font-size:12px;font-weight:500;color:#000;flex:none}

/* ---------------------------------------------------------------------
   Rates
   ------------------------------------------------------------------ */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:860px){.rates{grid-template-columns:1fr}}
.rate{background:var(--sand);border:0;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:.5rem;transition:.3s}
/* the whole card is the link, not just the button inside it */
a.rate:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(26,26,26,.09)}
a.rate .btn{pointer-events:none}
.rate.hot{background:var(--espresso);color:#F4F0E8;border-color:var(--espresso)}
.rate h4{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.rate.hot h4{color:rgba(255,255,255,.6)}
.rate .fig{font-family:var(--display);font-weight:300;font-size:2.7rem;line-height:1}
.rate.hot .fig{color:var(--accent-soft)}
.rate p{font-size:15px;color:#3a3934}
.rate.hot p{color:rgba(255,255,255,.76)}
.rate .btn{margin-top:1.4rem;align-self:flex-start}

/* ---------------------------------------------------------------------
   Shop
   ------------------------------------------------------------------ */
.goods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
@media(max-width:860px){.goods{grid-template-columns:1fr}}
.good .well{aspect-ratio:4/5;margin-bottom:1rem;transition:.4s}
.good:hover .well{transform:translateY(-5px)}
.good h4{font-family:var(--display);font-weight:400;font-size:1.15rem;margin-bottom:.3rem}
.good p{font-size:15px;color:#3a3934;margin-bottom:.5rem}
.good .fig{font-family:var(--display);font-size:1.15rem}

/* ---------------------------------------------------------------------
   Visit & forms
   ------------------------------------------------------------------ */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.6vw,66px)}
@media(max-width:860px){.visit{grid-template-columns:1fr}}
.irow{display:grid;grid-template-columns:104px 1fr;gap:1rem;padding-block:13px;border-bottom:1px solid var(--line);font-size:14px}
.irow b{font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding-top:.34em}
.field{margin-bottom:.85rem}
.field input,.field textarea{width:100%;font-family:var(--sans);font-weight:400;font-size:16px;padding:1em 1.15em;border:1px solid var(--line);background:var(--linen);transition:.25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}

/* ---------------------------------------------------------------------
   FAQ — accordion, used on treatment pages
   ------------------------------------------------------------------ */
.faq details{border-bottom:1px solid var(--line);padding-block:4px}
.faq summary{cursor:pointer;list-style:none;padding-block:20px;font-family:var(--display);font-weight:400;font-size:1.12rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:var(--sans);font-size:20px;font-weight:300;color:var(--accent);flex:none;transition:.3s;line-height:1}
.faq details[open] summary:after{transform:rotate(45deg)}
/* The answer now fills the panel, matching the question row above it.
   Previously capped at 64ch, which is the comfortable reading measure —
   but it left the answer using about half the width while the question
   spanned all of it, and that lopsidedness read as a bug.

   Filling the width makes the line long: roughly 115 characters at the
   1280px container. That is past the 45-75 usually recommended, so the
   type size goes up with it — bigger text means fewer characters per
   line at the same width, which claws back most of the loss.

   IF THE LINES STILL FEEL LONG, the better fix is the opposite one:
   narrow the whole accordion instead of just the answer, so question
   and answer share an edge. Delete the two lines below and add

       .faq{max-width:76ch}

   which keeps them aligned and keeps the measure readable. */
.faq p{padding-bottom:22px;font-size:17px;line-height:1.72;color:#38312A}
.faq summary{padding-right:2.2rem}

/* ---------------------------------------------------------------------
   Cross-links between pages
   ------------------------------------------------------------------ */
.next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
@media(max-width:760px){.next{grid-template-columns:1fr}}
.next a{background:var(--sand);border:0;padding:clamp(24px,3vw,34px);transition:.3s;display:flex;flex-direction:column;justify-content:center;min-height:100%}
.next a:hover{background:#F2ECE5}
.next span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.6rem}
.next h4{font-family:var(--display);font-weight:400;font-size:1.3rem}

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
footer{background:var(--espresso);color:#F4F0E8;padding-block:var(--sp-tight) 2rem;margin-top:0}
.fg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2.4rem}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
footer h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:1rem}
footer ul{list-style:none;display:grid;gap:.6rem;font-size:15px;color:rgba(244,240,232,.78)}
footer ul a:hover{color:var(--pear)}
.fb{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(244,240,232,.18);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* =====================================================================
   PHOTO-LED LAYOUT
   ---------------------------------------------------------------------
   Added after the reference sites (exhale, Woodhouse). The change is
   proportion, not palette: photography goes full width and edge to edge,
   type sits over it or beside it, and the brand colours retreat to
   labels, buttons and small marks.

   Two devices borrowed deliberately:
     - the two-line stacked heading ("Discover the path / to a better
       you") — .stack
     - full-bleed image bands that break out of the container
   ===================================================================== */

/* full-bleed helper: escapes .wrap without needing a different DOM */
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}

/* --- two-line stacked heading -------------------------------------- */
.stack{display:block}
.stack span{display:block}
.stack span+span{padding-left:clamp(14px,3vw,56px)}
/* the stagger only makes sense left-aligned; centred it just looks off-axis */
.hero-full .stack span+span,.band .stack span+span,.centre .stack span+span{padding-left:0}

/* --- full-height hero with a photograph behind --------------------- */
.hero-full{
  position:relative;min-height:min(94vh,860px);display:grid;align-items:center;
  color:#fff;overflow:hidden;
}
.hero-full .bg{position:absolute;inset:0;background:#3E3A36;background-size:cover;background-position:center}
.hero-full .bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,20,14,.30) 0%,rgba(28,20,14,.42) 100%)}
.hero-full .slot{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center}
.hero-full .inner{position:relative;padding-block:clamp(84px,14vh,160px);text-align:center;max-width:940px;margin-inline:auto}
.hero-full .label{color:rgba(244,240,232,.8)}

.hero-full h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.5em;max-width:20ch;margin-inline:auto}
.hero-full .lede{color:rgba(244,240,232,.9);max-width:52ch;margin-inline:auto}
.hero-full .acts{justify-content:center}
@media(max-width:700px){.hero-full{min-height:auto}.hero-full .bg:after{background:linear-gradient(180deg,rgba(28,20,14,.40),rgba(28,20,14,.70))}}

/* --- smaller page hero for inner pages ----------------------------- */
.phero{position:relative;min-height:min(58vh,520px);display:grid;align-items:end;color:#fff;overflow:hidden}
.phero .bg{position:absolute;inset:0;background:#3E3A36;background-size:cover;background-position:center}
.phero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,20,14,.22),rgba(28,20,14,.70))}
.phero .slot{position:absolute;right:18px;top:16px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.phero .inner{position:relative;padding-block:clamp(52px,9vh,96px)}
.phero .label{color:rgba(244,240,232,.8)}

.phero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:.38em}
.phero .lede{color:rgba(244,240,232,.9)}

/* --- full-bleed band: photograph with type centred over it --------- */
.band{position:relative;min-height:min(76vh,660px);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.band .bg{position:absolute;inset:0;background:#3E3A36;background-size:cover;background-position:center}
.band .bg:after{content:"";position:absolute;inset:0;background:rgba(28,20,14,.44)}
.band .slot{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.band .inner{position:relative;padding:clamp(56px,9vw,110px) var(--pad);max-width:820px}
.band .label{color:rgba(244,240,232,.8)}

.band h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1.1rem}
.band .lede{color:rgba(244,240,232,.9);margin-inline:auto;max-width:56ch}
.band .acts{justify-content:center}

/* --- full-bleed 50/50: image to the page edge ---------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(74vh,640px)}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.duo .pic{position:relative;min-height:340px;
  background:#EDE8E2;
  background-size:cover;background-position:center;display:grid;place-items:center}
.duo .pic b{font-weight:400;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.4);text-align:center;line-height:2}
.duo .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5.4vw,88px)}
.duo.flip .pic{order:2}
@media(max-width:900px){.duo.flip .pic{order:0}}
.duo.on-ink{background:var(--espresso);color:#F4F0E8}
.duo.on-ink .lede{color:rgba(244,240,232,.82)}
.duo.on-ink .label{color:rgba(244,240,232,.8)}

.duo.on-mauve{background:var(--mauve-field)}
.duo.on-mauve .lede{color:#2a1338}
.duo.on-paper{background:var(--linen)}

/* --- photo-topped cards -------------------------------------------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)}
@media(max-width:900px){.pcards{grid-template-columns:1fr}}
.pcard{background:var(--linen);overflow:hidden;transition:.35s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.08)}
.pcard .pic{aspect-ratio:4/3;
  background:#EFEAE4;
  background-size:cover;background-position:center;display:grid;place-items:center}
.pcard .pic b{font-weight:400;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.4);text-align:center;line-height:2}
.pcard .bd{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.55rem;flex:1}
.pcard h4{font-family:var(--display);font-weight:400;font-size:1.25rem}
.pcard p{font-size:16px;color:#38312A;flex:1}
.pcard .more{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tomato);font-weight:600}

/* --- centred section head ------------------------------------------ */
.centre{text-align:center;max-width:720px;margin-inline:auto}
.centre .label{justify-content:center}
.centre .lede{margin-inline:auto}

/* ---------------------------------------------------------------------
   Motion preference
   ------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ---------------------------------------------------------------------
   Alternating warm grounds. Space and a slow change of tone are what
   make a page feel unhurried; a single flat background for 4000px of
   scrolling is what makes it feel cheap.
   ------------------------------------------------------------------ */
.on-sand{background:var(--sand)}
.on-linen{background:var(--linen)}


/* =====================================================================
   WHY THE LITTLE SQUARES ARE GONE

   There were small coloured blocks before every section label, before
   every bullet, before each item in the trust strip, and a fixed rail of
   them down the left edge. Individually each was a small idea; together
   they turned a page into a diagram. They also read as craft rather than
   as luxury — pinned swatches, not a spa.

   Labels are plain letterspaced caps. Bullets are a short hairline.
   The trust strip is text with space around it. The fixed rail is gone
   entirely.
   ===================================================================== */


/* =====================================================================
   ROUNDED, INSET EVERYTHING
   ---------------------------------------------------------------------
   The big panels no longer touch the edges of the window. Each sits in
   a margin with the page showing around it, and every corner is
   rounded. Same for photographs, cards and form fields.
   ===================================================================== */

/* --- FULL BLEED, SQUARE ---------------------------------------------
   Photography that is the whole point of a section runs to the edges of
   the window with no rounding: the heroes on every page, the wide
   photographic band, and the dark figures strip. Rounding a photograph
   that is meant to fill the screen makes it look like a component rather
   than an image.
   ------------------------------------------------------------------ */
.hero-full,.phero,.band,.figs{
  margin-inline:0;
  margin-block:0;
  border-radius:0;
  width:100%;
  max-width:none;
}
.hero-full .bg,.phero .bg,.band .bg{border-radius:0}

/* --- INSET AND ROUNDED ----------------------------------------------
   Everything that is a panel of content rather than a photograph keeps
   the rounded, inset treatment.
   ------------------------------------------------------------------ */
.duo,
.care{
  margin-inline:var(--inset);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.care,.duo{margin-block:var(--inset)}
/* ---------------------------------------------------------------------
   .tight EXISTS FOR PLAIN SECTIONS ONLY

   It removes the top padding so two stacked plain sections give one gap
   instead of two. On a TINTED, ROUNDED PANEL that is wrong: the panel is
   its own box, so zero top padding puts the text flush against the
   rounded top edge while the bottom keeps a full gap. Asymmetric, and it
   is what made the copy look like it had escaped its container.

   Every panel therefore keeps symmetric internal padding regardless.
   ------------------------------------------------------------------ */
.care.tight,
.on-sand.tight,
.on-linen.tight,
.figs.tight{padding-top:var(--sp)}
.figs.tight{padding-top:var(--sp-tight)}

/* the dark stats band and the mauve field are sections, so their inner
   padding has to come in a little to match */
.figs{padding-block:var(--sp-tight)}

/* --- the split halves ---------------------------------------------- */
/* the photograph half is now inset inside the panel rather than bleeding
   into the corner, so the rounding reads on the image too */
.duo .pic{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.duo.flip .pic{border-radius:0 var(--r-lg) var(--r-lg) 0}
@media(max-width:900px){
  .duo .pic,.duo.flip .pic{border-radius:var(--r-lg) var(--r-lg) 0 0}
}

/* --- photographs ---------------------------------------------------- */
.well,
.pcard .pic,
.good .well,
.method .well,
.duo .pic img,
.pcard,
img{border-radius:var(--r)}
.pcard{overflow:hidden}
.pcard .pic{border-radius:var(--r) var(--r) 0 0}

/* --- cards ---------------------------------------------------------- */
.voice,
.rate,
.next a,
.field input,
.field textarea{border-radius:var(--r)}
.field textarea{border-radius:var(--r)}

/* --- max width so inset panels do not sprawl on a wide screen ------- */
@media(min-width:1600px){
  .duo,.care{max-width:1560px;margin-inline:auto}
}

/* --- keep the scrim inside the rounded corner ----------------------- */
.hero-full .bg,.phero .bg,.band .bg{border-radius:inherit}

/* the tinted sections are panels too, so they get the same treatment —
   otherwise a rounded hero sits above a hard-edged colour block */
.on-sand,.on-linen{
  margin-inline:var(--inset);
  border-radius:var(--r-lg);
}
.on-linen{background:var(--sand)}   /* white-on-white had nothing to round */

/* the footer runs to the edges, matching the heroes */
footer{margin-inline:0;margin-bottom:0;border-radius:0}

@media(min-width:1600px){
  .on-sand,.on-linen{max-width:1560px;margin-inline:auto}
}


/* =====================================================================
   FILLED PHOTO SLOTS
   A slot carrying an inline background-image shows the photograph and
   hides its placeholder label. Same markup either way, so an empty slot
   still explains itself and a filled one just works.
   ===================================================================== */
.well[style*="url("],
.pic[style*="url("],
.bg[style*="url("]{background-size:cover;background-position:center;background-repeat:no-repeat}
.well[style*="url("] b,
.pic[style*="url("] b{display:none}


/* =====================================================================
   ONE TYPE SCALE, ONE SET OF GAPS
   ---------------------------------------------------------------------
   Section headings had drifted into four different treatments across the
   eight pages — two inline clamps, the .h-sec class, and bare unstyled
   h2s. Two sizes now, both here, no inline overrides anywhere.
   ===================================================================== */

/* full-width section heading */
.h-sec{font-size:clamp(1.9rem,3.6vw,3.1rem);margin-bottom:clamp(30px,4.5vw,52px)}

/* heading inside a half-width panel — one step down, ONE rule, so every
   half-width heading on the site matches every other one */
.duo .txt h2,
.care h2,
.visit h2,
.treat h2{font-size:clamp(1.6rem,2.7vw,2.3rem);margin-bottom:1.1rem;line-height:1.2}

/* a heading immediately followed by body copy needs less gap than one
   followed by a grid of cards */
.duo .txt h2+.lede,
.care h2+.lede,
.visit h2+.lede,
.treat h2+.lede{margin-top:0}

/* the opening statement paragraph */
.state .big+.lede{margin-top:1.6rem}

/* centred section heads */
.centre{margin-bottom:clamp(30px,4.5vw,52px)}
.centre .h-sec{margin-bottom:0}
.centre .h-sec+.lede{margin-top:1.2rem}
.acts-centre{justify-content:center}

/* small print, wherever it appears */
.note{margin-top:1.4rem;font-size:12.5px;color:var(--grey);max-width:64ch}
.foot-note{font-size:14px;color:rgba(244,240,232,.62);max-width:34ch}
footer .mark{margin-bottom:.9rem}
.ln{border-bottom:1px solid var(--accent)}

/* =====================================================================
   CARD ALIGNMENT
   Every card grid is a flex column with one flexible element, so the
   bottom row of every card in a row lines up regardless of how much text
   sits above it. The shop cards were the one grid missing this, which is
   why their prices sat at different heights.
   ===================================================================== */
.good{display:flex;flex-direction:column;height:100%}
.good p{flex:1}
.good .fig{margin-top:.2rem}
.goods,.rates,.voices,.pcards,.next{align-items:stretch}

/* buttons pinned to the bottom of their card, not floating after the text */
.rate .btn,
.rate .btn.out{margin-top:auto;padding-top:1.05em}
.rate>*:last-child{margin-top:auto}

.irow-last{border-bottom:0}
.well-wide{aspect-ratio:16/9}
.well-map{aspect-ratio:16/10;margin-top:1.8rem}

/* the statement line carries the same script accent as the headings, so the
   display type across the site speaks with one voice */
.state .big em.it{font-size:1.35em;line-height:.85}


/* =====================================================================
   THE DISPLAY SCALE, top to bottom. Five steps, each clearly below the
   one above it. The inner-page title used to render LARGER than the
   homepage hero, because .phero h1 beat .h-page on specificity and
   carried a bigger clamp — so a sub-page shouted louder than the front
   door. Fixed here rather than by juggling specificity.

     home hero      clamp(2.4rem, 5vw,   4rem)
     page hero      clamp(2.1rem, 4.2vw, 3.3rem)
     feature band   clamp(2rem,   4vw,   3.2rem)
     section head   clamp(1.9rem, 3.6vw, 3.1rem)
     half-width     clamp(1.6rem, 2.7vw, 2.3rem)
   ===================================================================== */


/* =====================================================================
   PRICING SWITCHES + PLAN PANELS
   ===================================================================== */
.switch{
  display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;
  background:var(--sand);border-radius:999px;
}
.switch-sub,.switch-area{margin-left:10px}
@media(max-width:620px){
  .switch{display:flex;width:100%;margin-left:0}
  .switch-area{margin-bottom:26px}
}

/* set by site.js: the area switch is only meaningful for Signature Sculpt, and each
   treatment has its own footnote. display:none rather than visibility so
   nothing reserves space. */
.hide{display:none!important}
.switch button{
  font-family:var(--sans);font-size:13px;font-weight:500;
  padding:.7em 1.5em;border:0;border-radius:999px;background:transparent;
  color:#5a5a5a;cursor:pointer;transition:.25s;white-space:nowrap;flex:1;
}
.switch button:hover{color:var(--ink)}
.switch button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(26,26,26,.10)}

/* eight panels in the markup — two Bodyroll, six Signature Sculpt — one visible */
.plans{display:none}
.plans.on{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);align-items:stretch;
  margin-top:clamp(22px,3vw,34px);
}
@media(max-width:860px){.plans.on{grid-template-columns:1fr}}

/* the badge on a plan */
.rate{position:relative}
.rate .tag{
  position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.rate.hot .tag{color:var(--accent-soft)}
.rate h4{padding-right:8ch}

/* the per-month / per-year qualifier sits with the figure, not under it */
.rate .fig small{
  font-family:var(--sans);font-size:.28em;font-weight:400;
  letter-spacing:.02em;color:var(--grey);margin-left:.35em;
}
.rate.hot .fig small{color:rgba(244,240,232,.6)}


/* =====================================================================
   .tight AFTER A PANEL

   .tight removes a section's top padding on the assumption that the
   section ABOVE it is plain, so the two share one gap. After a tinted
   or full-bleed PANEL that assumption is wrong: the panel's bottom
   padding sits INSIDE the panel, so the next section begins with
   nothing above it at all — the cross-link cards butt straight up
   against the cream block, and the footer against those.

   Any .tight section following a panel gets its own gap back.
   ===================================================================== */
.on-sand + .tight,
.on-linen + .tight,
.care + .tight,
.figs + .tight,
.duo + .tight,
.band + .tight,
.hero-full + .tight,
.phero + .tight{padding-top:var(--sp)}

/* and the footer needs air after a panel too */
.on-sand + footer,
.on-linen + footer,
.care + footer,
.figs + footer,
.duo + footer,
.band + footer{margin-top:var(--sp)}

.note-centre{margin-inline:auto;text-align:center}
.acts-second{margin-top:1rem}


/* =====================================================================
   SLIM CTA BAND
   Was a full-height section built to hold a calendar widget. With the
   widget gone it was mostly empty space around four stacked buttons, so
   it now sits on one line: a short prompt on the left, the two actions
   on the right, and roughly a third of the height.
   ===================================================================== */
.cta-slim{padding-block:var(--sp-tight)!important}
.cta-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,56px);flex-wrap:wrap;
}
.cta-row h3{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.25}
.cta-row h3 em.it{font-size:1.3em}
.cta-row .note{margin-top:.5rem}
.cta-row .acts{margin-top:0;flex:none}
@media(max-width:760px){
  .cta-row{display:block}
  .cta-row .acts{margin-top:1.4rem}
}

/* =====================================================================
   ADDED IN V3 — benefits, before/after, video, Instagram
   ---------------------------------------------------------------------
   Every value below uses the variables at the top of this file and no
   hardcoded colours, so these sections work unchanged if you swap in
   site-bold.css. That is the whole point of keeping one stylesheet.
   ===================================================================== */

/* ---------------------------------------------------------------------
   BENEFITS
   A typographic grid rather than icons — we have no icon set, and
   inventing one would date faster than the words. The script numeral
   echoes the method cards so the two read as the same family.
   ------------------------------------------------------------------ */
.bens{
  display:grid;gap:clamp(26px,3.4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(28px,4vw,46px);
}
.ben{border-top:1px solid var(--line);padding-top:1.5rem}
.ben .n{
  font-family:var(--script);font-size:2.9rem;line-height:.8;
  color:var(--accent);display:block;margin-bottom:.85rem;
}
.ben h4{font-family:var(--display);font-weight:400;font-size:1.12rem;margin-bottom:.45rem}
.ben p{font-size:.95rem;line-height:1.68;color:var(--clay)}

/* ---------------------------------------------------------------------
   BEFORE / AFTER
   A draggable divider over two stacked images. The "after" sits on top
   and is clipped from the right, so dragging left reveals more of it.

   Works without JavaScript: with no script the clip stays at 50% and
   you still see half of each, which is a usable — if static — comparison
   rather than a broken component.

   NOTE ON THE IMAGES. Both must be the same dimensions and framing or
   the comparison is misleading. Shoot from a fixed mark on the floor.
   ------------------------------------------------------------------ */
.ba{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:3/2;background:var(--sand);touch-action:none;user-select:none;
  --split:50%;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .after{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba .lab{
  position:absolute;bottom:14px;z-index:3;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);padding:.5em .85em;border-radius:99px;
}
.ba .lab-b{right:14px}
.ba .lab-a{left:14px}
.ba .bar{
  position:absolute;top:0;bottom:0;left:var(--split);width:2px;
  background:var(--paper);z-index:4;transform:translateX(-1px);cursor:ew-resize;
}
.ba .bar:after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;background:var(--paper);
  box-shadow:0 2px 14px rgba(0,0,0,.22);
}
.ba .bar:before{
  content:"\2194";position:absolute;top:50%;left:50%;translate:-50% -50%;
  z-index:2;color:var(--ink);font-size:1.1rem;
}
.ba-note{margin-top:1rem;font-size:.82rem;line-height:1.6;color:var(--clay)}
@media(max-width:700px){.ba{aspect-ratio:4/5}}

/* ---------------------------------------------------------------------
   VIDEO
   Reuses the dark well so an empty slot looks deliberate rather than
   broken. Drop an <iframe> inside .vid and it fills it.
   ------------------------------------------------------------------ */
.vid{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--ink)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:700px){.vid{aspect-ratio:4/3}}

/* ---------------------------------------------------------------------
   INSTAGRAM
   A horizontal scroll strip. Scroll-snap does the work; the arrows are
   a convenience and the strip still scrolls by touch and trackpad
   without them.

   On WordPress the contents of .igrail get replaced by the feed plugin's
   shortcode. These tiles are stand-ins so the layout can be judged now.
   ------------------------------------------------------------------ */
.ig-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ig-head .h-sec{margin-bottom:0}
.igrail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,26vw);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:clamp(26px,3.6vw,44px);padding-bottom:6px;
  scrollbar-width:none;
}
.igrail::-webkit-scrollbar{display:none}
.igrail>a{
  scroll-snap-align:start;aspect-ratio:1;border-radius:calc(var(--r) - 6px);
  overflow:hidden;background:var(--sand);display:block;position:relative;
}
.igrail img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.igrail>a:hover img{transform:scale(1.04)}
.ig-arrows{display:flex;gap:8px}
.ig-arrows button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;transition:.25s;
}
.ig-arrows button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:700px){
  .ig-arrows{display:none}
  .igrail{grid-auto-columns:64vw}
}

/* ---------------------------------------------------------------------
   INTRO STRIP
   One row, above the treatment switches, always visible. The $29 first
   session is the front door of the whole business; it was sitting inside
   the Packages tab, which meant a first-time visitor landing on
   Memberships never saw it at all.
   ------------------------------------------------------------------ */
.intro-strip{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
  background:var(--ink);color:#F4F0E8;
  border-radius:var(--r);padding:clamp(16px,2vw,22px) clamp(20px,2.6vw,30px);
  margin-bottom:clamp(20px,2.6vw,30px);transition:.3s;
}
.intro-strip:hover{background:#000}
.intro-tag{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pear);white-space:nowrap;
}
.intro-body{flex:1 1 300px;font-size:14px;line-height:1.55;color:rgba(244,240,232,.86)}
.intro-body b{color:#fff;font-weight:600}
.intro-go{font-size:13px;font-weight:500;color:var(--pear);white-space:nowrap}

/* four package cards, not three-and-a-widow */
.plans.on.plans-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.plans.on.plans-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.plans.on.plans-4{grid-template-columns:1fr}}

/* the promo code, shown as something you can take rather than read */
.code{
  font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12px;font-weight:600;letter-spacing:.1em;
  background:rgba(244,240,232,.13);color:var(--pear);
  border:1px dashed rgba(189,226,30,.55);border-radius:6px;
  padding:.28em .65em;margin:0 .15em;cursor:pointer;transition:.2s;
}
.code:hover{background:rgba(189,226,30,.18)}
.code.done{color:#F4F0E8;border-style:solid}
/* the same chip on a light ground (the Bodyroll price block is sand) */
.code-dark{
  background:rgba(26,26,26,.06);color:var(--accent);
  border-color:rgba(174,37,9,.45);
}
.code-dark:hover{background:rgba(26,26,26,.1)}
.code-dark.done{color:var(--ink);border-style:solid}
/* two membership cards, centred rather than orphaned in a three-col grid */
.plans.on.plans-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}
@media(max-width:860px){.plans.on.plans-2{grid-template-columns:1fr}}