/* =====================================================================
   RESHAPED — BRAND COLOUR LAYER
   ---------------------------------------------------------------------
   Loads AFTER site.css. Remove the one <link> line from a page and that
   page returns to the warm palette with nothing else disturbed.

   WHY THE COLOURS LAND WHERE THEY DO
   The logo is the brief: a mauve disc, a pear monogram, a black
   wordmark. Three colours, so those three do the work here and the rest
   of the brand palette stays in reserve.

   Every placement below was checked for contrast rather than chosen by
   eye. The measured ratios:

       ink on PEAR field           11.65   passes everything
       ink on MAUVE field           9.91   passes everything
       ink on ANTI-FLASH WHITE     15.00   passes everything
       ink on KELLY GREEN           7.31   passes everything
       ink on TOMATO                5.34   passes everything
       PEAR on ink (dark ground)   11.65   passes everything
       MAUVE on ink (dark ground)   9.91   passes everything

       white on TOMATO              3.26   FAILS body text
       white on KELLY GREEN         2.38   FAILS everything
       TOMATO text on white         3.26   FAILS body text
       MAUVE text on white          1.76   FAILS everything
       PEAR text on white           1.49   FAILS everything

   Which gives one rule that explains every decision in this file:

       PEAR AND MAUVE ARE FIELDS, NOT INK.

   They are luminous colours. Behind black type they are superb. As type
   on white they are effectively invisible — a pear headline on white is
   1.49:1, which is not a styling opinion, it is unreadable. So they are
   used as grounds, and text on them is always ink.

   Tomato is the only brand colour that can be type on white, and only
   at large sizes. Darkened to #AE2509 it reaches 6.84 and can be used
   anywhere, which is what the accent below does.
   ===================================================================== */

:root{
  /* --- grounds ---------------------------------------------------
     Anti-flash white is the brand's own neutral. It replaces the warm
     #FAF6F1 that was measured off the reference site — that colour was
     someone else's, this one is yours.                              */
  --sand:#EEEEEE;

  /* --- the accent that does the decorative work -------------------
     Was a warm taupe, invented to match the reference. Now brand
     tomato, darkened until it reads as text. Kept dark rather than
     using #F55B3C directly because the accent is used at 12px in the
     navigation hover, and raw tomato is 3.26 there.                 */
  --accent:#AE2509;
  --accent-soft:#BDE21E;   /* pear, and ONLY ever on dark grounds */
  --clay:#4A4A4A;          /* secondary text — neutral, not tinted */
}

/* ---------------------------------------------------------------------
   THE LOGO ON DARK GROUNDS
   site.css inverts the footer logo to white, which is right for a flat
   dark mark and wrong for ours — it would flatten the mauve disc and
   the pear monogram into a white blob. The badge carries its own field
   and sits happily on ink, so the filter comes off.
   ------------------------------------------------------------------ */
footer .mark img{filter:none;opacity:1;height:54px}
.mark img{height:44px}
@media(max-width:520px){.mark img{height:38px}}

/* ---------------------------------------------------------------------
   PEAR — the figures band
   The one place pear gets a whole section. Large ink numerals on a pear
   field is the strongest brand moment available at 11.65:1, and the
   figures band is already the loudest thing on the page, so the colour
   is reinforcing an emphasis that exists rather than inventing one.
   ------------------------------------------------------------------ */
.figs{background:var(--pear);color:var(--ink)}
.figs b{color:var(--ink)}
.figs span{color:rgba(26,26,26,.72)}
.figs b em{color:rgba(26,26,26,.55)}

/* FULL WIDTH, BUT WITH AIR AROUND IT.
   This band runs edge to edge, like the heroes and the footer.

   It briefly became an inset rounded panel instead, because as a solid
   pear block it was butting straight into the rounded grey panel below
   with nothing between them. That fixed the collision by changing what
   the section was, which was the wrong lever — the band is meant to be
   full-bleed.

   The actual cause: .on-sand and .on-linen carry margin-inline but no
   margin-block, so a neighbour with no margin of its own ends up flush
   against them. The band therefore brings its own vertical space.

   Margins between adjacent siblings collapse, so this produces one gap
   rather than stacking with whatever the next section brings. */
.figs{margin-block:var(--inset)}

/* ---------------------------------------------------------------------
   BUTTONS
   Ground stays near-black, because white on tomato is 3.26 and fails at
   button text size — the same conclusion the bold palette reached
   independently. What changes is the hover: pear with ink text, 11.65,
   and unmistakably the brand.
   ------------------------------------------------------------------ */
.btn:hover{background:var(--pear);border-color:var(--pear);color:var(--ink)}
.btn.out:hover,.btn.ghost:hover{background:var(--pear);border-color:var(--pear);color:var(--ink)}
.btn.cream:hover{background:var(--mauve);border-color:var(--mauve);color:var(--ink)}

/* ---------------------------------------------------------------------
   SMALL ACCENTS
   The play triangle and the before/after handle pick up pear. Both sit
   on photographs or dark grounds, so the luminance works for them.
   ------------------------------------------------------------------ */
.play{background:rgba(189,226,30,.22);border-color:var(--pear)}
.play:after{border-left-color:var(--pear)}
.ba .bar{background:var(--pear)}
.ba .bar:after{background:var(--pear)}
.ba .lab{background:var(--ink);color:#fff}

/* ---------------------------------------------------------------------
   BENEFITS
   The script numerals were taupe. Mauve would vanish on white at 1.76,
   so they take the darkened tomato with the rest of the accent work.
   ------------------------------------------------------------------ */
.ben{border-top-color:rgba(26,26,26,.14)}
.ben .n{color:var(--accent)}

/* ---------------------------------------------------------------------
   INSTAGRAM RAIL
   The arrows get pear on hover rather than filling with ink, so the
   brand shows up in a control people actually touch.
   ------------------------------------------------------------------ */
.ig-arrows button:hover{background:var(--pear);border-color:var(--pear);color:var(--ink)}

/* ---------------------------------------------------------------------
   FOOTER
   Pear on ink is 11.65, so the headings can carry real brand colour
   here where they could not on white.
   ------------------------------------------------------------------ */
footer h5{color:var(--pear)}
footer a:hover{color:var(--mauve)}

/* =====================================================================
   DELIBERATELY NOT DONE
   ---------------------------------------------------------------------
   No pear or mauve TEXT anywhere on a light ground. Repeated because it
   is the one change that will be tempting later and it is the one that
   breaks the site for anyone reading it in daylight on a phone.

   Kelly green is unused. Five brand colours on one page is a swatch,
   not a design, and the logo already narrowed the choice to three.
   It stays available in site.css as --green if a use appears.

   Tomato is not used at full strength on any large field. It is the
   brand's call-to-action colour and spending it on decoration would
   leave nothing louder for the thing you actually want clicked.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FOOTER LEGAL LINE
   Deliberately quiet but not hidden: a disclaimer nobody can read is
   not a disclaimer. Smaller and dimmer than the surrounding footer
   text, still comfortably above the contrast floor on the dark ground.
   ------------------------------------------------------------------ */
.foot-note.legal{
  margin-top:clamp(28px,4vw,44px);
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;line-height:1.7;
  color:rgba(255,255,255,.62);
  max-width:92ch;
}

/* ---------------------------------------------------------------------
   PRICING PANELS WITH MORE THAN THREE CARDS
   The memberships panel has six and the Bodyroll packages five. The
   base grid is a fixed three columns, which left the extras stranded on
   a second row at full width. Auto-fit keeps them even at any count.
   ------------------------------------------------------------------ */
.plans-5,.plans-6{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}

/* ---------------------------------------------------------------------
   HIGHLIGHTED PRICE CARDS
   The emphasised plan used to be a solid near-black block, which turned
   one card into a different object rather than the same card marked.
   It also meant the badge was doing nothing — the colour was the badge.

   Now the label carries it. The card keeps the same ground and gains a
   pear edge and a tinted badge, so the set reads as one row of
   comparable things with two of them flagged.

   .tag is ink on pear at 11.65:1, and the card ground is unchanged, so
   nothing here depends on a colour that fails contrast.
   ------------------------------------------------------------------ */
.rate.feature{
  background:var(--sand);
  color:inherit;
  box-shadow:inset 0 0 0 2px var(--pear);
}
.rate.feature h4,
.rate.feature .fig,
.rate.feature p,
.rate.feature .fig small{color:inherit}
.rate.feature h4{color:var(--grey)}
.rate.feature p{color:#3a3934}

.rate .tag{
  background:var(--pear);
  color:var(--ink);
  padding:.45em .7em;
  border-radius:99px;
  line-height:1;
}
/* "Best value" is arithmetic; give it the quieter treatment so the two
   labels are distinguishable at a glance. */
.rate .tag:not(:empty){letter-spacing:.12em}

/* ---------------------------------------------------------------------
   PRICING SMALL PRINT — A ROW OF FACTS, NOT A COLUMN OF PROSE
   These footnotes were first capped at 64ch, which left them stranded
   under a row of cards using the full width. The fix after that was CSS
   columns, and it was WRONG: columns flow text down one and into the
   next, so a four-sentence note split mid-sentence across the rule —
   "Memberships with a | commitment can be paused". It read as broken
   because, as a reading experience, it was.

   The note was never one thought. It is three or four separate rules
   about how buying works. So it is now marked up as separate items and
   laid out as a grid: each cell is a complete statement, the row fills
   the width, and nothing splits across a boundary.

   auto-fit so three items and four items both sit evenly, and so it
   collapses to one column on a phone without any extra rules.
   ------------------------------------------------------------------ */
ul.notes{
  list-style:none;margin-top:clamp(22px,3vw,34px);padding:0;
  display:grid;gap:clamp(16px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid rgba(26,26,26,.12);padding-top:clamp(18px,2.2vw,26px);
}
ul.notes li{font-size:12.5px;line-height:1.72;color:var(--grey)}
ul.notes b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}

/* PORTRAIT VIDEO
   The session film is a YouTube Short, so it is 9:16. Forcing it into a
   16:9 box would pillarbox it with two black bars wider than the video. */
.vid-portrait{aspect-ratio:9/16;max-width:420px;margin-inline:auto}
@media(max-width:700px){.vid-portrait{aspect-ratio:9/16;max-width:none}}

/* ---------------------------------------------------------------------
   BODYROLL vs MANUAL DRAINAGE — PAIRED COMPARISON
   One grid, two columns, so each row lines up against its counterpart.
   Two separate lists would drift apart the moment one side wrapped to a
   different number of lines, and the whole point is that row three on
   the left answers row three on the right.

   Ink with pear on our side (pear on ink is 11.65:1), anti-flash white
   on theirs — the logo's own pairing.

   Stays two columns at every width. Stacking on a phone would give
   eight of our points then eight of theirs, which is two lists rather
   than a comparison.
   ------------------------------------------------------------------ */
/* The wrapper holds the badge; the grid inside does the clipping.
   Both cannot live on one element: the grid needs overflow:hidden so its
   rounded corners cut the cell backgrounds, and that same rule sliced the
   badge in half where it crossed the top edge. */
.vsx-wrap{position:relative;margin-top:clamp(40px,5vw,60px)}
.vsx{
  display:grid;grid-template-columns:1fr 1fr;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 60px rgba(26,26,26,.10);
}

/* the VS disc, straddling the seam between the two headers */
.vsx-badge{
  position:absolute;top:0;left:50%;translate:-50% -50%;z-index:3;
  width:clamp(44px,5.4vw,60px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pear);color:var(--ink);
  font-family:var(--display);font-weight:600;
  font-size:clamp(11px,1.3vw,14px);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 0 6px var(--sand);
}

.vsx-head{
  font-family:var(--display);font-size:clamp(11px,1.3vw,14px);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-align:center;
  padding:clamp(26px,3.4vw,38px) 1rem clamp(18px,2.2vw,24px);
}

.vsx-cell{
  display:flex;gap:clamp(10px,1.4vw,16px);align-items:flex-start;
  padding:clamp(16px,2.1vw,24px) clamp(14px,2.4vw,30px);
}
.vsx-txt{min-width:0}
.vsx-cell h5{
  font-family:var(--display);font-weight:600;
  font-size:clamp(13px,1.5vw,15.5px);line-height:1.3;margin-bottom:.25rem;
}
.vsx-cell p{font-size:clamp(12.5px,1.3vw,14px);line-height:1.62;margin:0}

/* the tick / cross discs */
.vsx-ic{
  flex:none;width:clamp(22px,2.4vw,28px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;font-size:clamp(11px,1.2vw,13px);
  line-height:1;margin-top:.1rem;
}

/* --- our side ------------------------------------------------------ */
.vsx-us{background:var(--ink);color:#fff}
.vsx-head.vsx-us{color:var(--pear)}
.vsx-us h5{color:#fff}
.vsx-us p{color:rgba(255,255,255,.72)}
.vsx-cell.vsx-us{border-top:1px solid rgba(255,255,255,.09)}
.vsx-cell.vsx-us .vsx-ic{background:var(--pear);color:var(--ink)}
.vsx-cell.vsx-us .vsx-ic:before{content:"\2713"}

/* --- theirs -------------------------------------------------------- */
.vsx-them{background:var(--paper);color:var(--ink)}
.vsx-head.vsx-them{color:var(--grey)}
.vsx-them h5{color:var(--ink)}
.vsx-them p{color:var(--clay)}
.vsx-cell.vsx-them{border-top:1px solid rgba(26,26,26,.09)}
.vsx-cell.vsx-them .vsx-ic{background:rgba(26,26,26,.07);color:var(--grey)}
.vsx-cell.vsx-them .vsx-ic:before{content:"\2715"}

@media(max-width:600px){
  .vsx-cell{padding:13px 12px;gap:9px}
  .vsx-ic{width:19px;font-size:10px}
  .vsx-cell h5{font-size:12.5px}
  .vsx-cell p{font-size:11.5px;line-height:1.5}
}

/* ---------------------------------------------------------------------
   TINTED PANELS NEED VERTICAL SPACE
   .on-sand, .on-linen and .care carry margin-inline and a radius but no
   margin-block, so any neighbour without a margin of its own ends up
   flush against them. The figures band was patched individually for this
   before the same thing turned up on the comparison section, which is
   the point at which it stops being a one-off and becomes the rule.

   Adjacent margins collapse, so panels that already sit next to each
   other still get one gap rather than two.
   ------------------------------------------------------------------ */
.on-sand,.on-linen,.care{margin-block:var(--inset)}

/* ---------------------------------------------------------------------
   PRICE, WHERE THE QUESTION IS ACTUALLY ASKED
   Neither treatment page carried a price. Sculpt had none at all, so a
   reader had to leave the page to find out what it cost — and a good
   share of them do not come back.

   Two placements: one line in the hero for the people who want the
   number before they read anything, and a block at the foot for the
   people who read first and then ask. Both link to pricing rather than
   straight to booking, because someone who does not know the price is
   not ready for a checkout.
   ------------------------------------------------------------------ */
.hero-price{
  margin-top:1.1rem;font-size:clamp(14px,1.4vw,16px);
  color:rgba(255,255,255,.88);
}
.hero-price b{font-weight:600;color:#fff}
.hero-price a{color:var(--pear);border-bottom:1px solid rgba(189,226,30,.45)}
.hero-price a:hover{border-bottom-color:var(--pear)}

.price-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,56px);flex-wrap:wrap;
  background:var(--sand);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px);
}
.price-lead{
  display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.5rem;
}
.price-fig{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:var(--ink);
}
.price-fig small{
  font-family:var(--sans);font-size:.3em;font-weight:400;
  letter-spacing:.02em;color:var(--grey);margin-left:.5em;
}
.note-plain{margin-top:.9rem;font-size:13.5px;line-height:1.6;color:var(--clay);max-width:60ch}
.price-cta .acts{margin-top:0;flex:none}
@media(max-width:700px){
  .price-cta{display:block}
  .price-cta .acts{margin-top:1.6rem}
}

/* ---------------------------------------------------------------------
   PER-SESSION RATE
   These were written out in words — "Fifty-eight dollars a session" —
   which is correct prose and the wrong thing here. On a pricing card
   the per-session rate is the number people are actually comparing
   between tiers, and a word has to be read before it can be compared.
   Numerals, and given enough weight to be found at a glance.

   The cents are not decoration: $489 over ten sessions is $48.90, not
   $49. Rounding up cost us money on the page and accuracy off it.
   ------------------------------------------------------------------ */
.rate .per{
  font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------------------------------------------------------------------
   MAINTENANCE BLOCK
   Sits under the Signature Sculpt panels and shows only when Sculpt is
   selected — site.js already hides anything carrying data-note that does
   not match the current treatment, so it inherits that behaviour free.

   Styled unlike the .rate cards on purpose. It is not another thing to
   buy off the shelf; it is an offer made to someone who has finished a
   course, and it should read as a different kind of object so nobody
   mistakes it for a fourth package.
   ------------------------------------------------------------------ */
.maint{
  display:grid;grid-template-columns:1.35fr .9fr;
  gap:clamp(26px,3.6vw,56px);align-items:center;
  background:var(--ink);color:#F4F0E8;
  border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,48px);
  margin-top:clamp(26px,3.2vw,40px);
}
@media(max-width:860px){.maint{grid-template-columns:1fr}}

.maint-tag{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pear);margin-bottom:.7rem;
}
.maint h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;
  color:#F4F0E8;margin:0 0 .8rem;
}
.maint h3 em.it{color:var(--pear)}
.maint-body p{font-size:14px;line-height:1.65;color:rgba(244,240,232,.82);margin:0}

.maint-list{list-style:none;margin:1.2rem 0 0;padding:0}
.maint-list li{
  position:relative;padding-left:1.4rem;margin-bottom:.5rem;
  font-size:13.5px;line-height:1.5;color:rgba(244,240,232,.9);
}
.maint-list li:before{
  content:"";position:absolute;left:0;top:.62em;
  width:13px;height:1px;background:var(--pear);
}

.maint-side{
  background:rgba(244,240,232,.06);
  border:1px solid rgba(244,240,232,.14);
  border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
}
.maint-fig{
  font-family:var(--display);font-weight:300;line-height:1;color:#fff;
  font-size:clamp(2.2rem,4vw,3rem);
}
.maint-fig small{
  font-family:var(--sans);font-size:.3em;font-weight:400;
  letter-spacing:.02em;color:rgba(244,240,232,.7);margin-left:.5em;
}
.maint-alt{margin:.7rem 0 1.3rem;font-size:13px;color:rgba(244,240,232,.78)}
.maint-alt b{color:var(--pear);font-weight:600}
.maint-side .btn{width:100%;justify-content:center}
.maint-small{
  margin:1.1rem 0 0;font-size:11.5px;line-height:1.55;
  color:rgba(244,240,232,.62);
}
.maint-small b{color:rgba(244,240,232,.9);font-weight:600}

/* ---------------------------------------------------------------------
   COMING SOON
   Used on the Consultation and Shop pages while those services are
   being finished. Dark, so it separates cleanly from the page it is
   qualifying, and placed under the hero so nobody reads a price before
   they read the status.

   The pages stay published on purpose. Someone can still decide they
   want the thing, which is the point of showing it early - what they
   cannot do is try to buy it and fail.
   ------------------------------------------------------------------ */
.soon{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  background:var(--ink);color:#F4F0E8;
  border-radius:var(--r-lg);padding:clamp(22px,2.8vw,36px) clamp(24px,3.2vw,44px);
}
.soon-tag{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pear);margin-bottom:.6rem;
}
.soon h3{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.2;
  color:#F4F0E8;margin:0 0 .5rem;
}
.soon p{
  margin:0;font-size:13.5px;line-height:1.6;
  color:rgba(244,240,232,.8);max-width:62ch;
}
.soon .btn{flex:none}
@media(max-width:760px){.soon{display:block}.soon .btn{margin-top:1.4rem}}

/* the shop cards are no longer links, so they must stop behaving like one */
.good.is-soon{cursor:default}
.good.is-soon:hover .well{transform:none}
.good-soon{
  display:inline-block;margin-left:.8em;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);vertical-align:middle;
}

/* ---------------------------------------------------------------------
   SHOP — "Coming soon" where the price used to sit
   Nothing is purchasable, so no number is shown. The label takes the
   price's place in the card rather than sitting beside it, which stops
   the card looking like it is missing something.
   ------------------------------------------------------------------ */
.fig-soon{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}

/* ---------------------------------------------------------------------
   COMPARISON TABLE
   Used on sculpt-offer.html and signature-sculpt.html. Lives here rather
   than in the landing-page layer so both can share one definition.
   Built to be scanned, not read — the same logic as the Bodyroll
   versus-hands panel. A tick or a cross in every cell means the shape of
   the answer lands before any of the words do, and our column is tinted
   so the eye starts there.

   Rounded, shadowed, clipped: it reads as one object rather than a grid
   of text, which is what stops it looking like a spec sheet.
   ------------------------------------------------------------------ */
.cmp-wrap{margin-top:clamp(30px,3.6vw,46px)}
.cmp{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 60px rgba(26,26,26,.10);
  background:var(--paper);
}
.cmp-head{
  font-family:var(--display);font-size:clamp(11px,1.2vw,13px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  padding:clamp(22px,2.8vw,30px) .8rem clamp(16px,2vw,20px);
  color:var(--grey);
}
.cmp-head.cmp-us{background:var(--ink);color:var(--pear)}
.cmp-corner{background:var(--sand)}

.cmp-lab{
  display:flex;align-items:center;
  padding:clamp(14px,1.8vw,20px) clamp(14px,1.8vw,22px);
  font-size:clamp(12.5px,1.3vw,14px);line-height:1.4;font-weight:500;
  color:var(--ink);background:var(--sand);
}
.cmp-cell{
  display:flex;align-items:center;gap:10px;
  padding:clamp(14px,1.8vw,20px) clamp(10px,1.4vw,16px);
  font-size:clamp(12px,1.25vw,13.5px);line-height:1.45;color:var(--clay);
  border-top:1px solid rgba(26,26,26,.07);
}
.cmp-cell.cmp-us{background:rgba(189,226,30,.10);color:var(--ink);font-weight:500}
.cmp-t{min-width:0}

/* the tick / cross / half discs */
.cmp-ic{
  flex:none;width:clamp(19px,2vw,23px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;
}
.cmp-ic.y{background:var(--pear);color:var(--ink)}
.cmp-ic.y:after{content:"\2713"}
.cmp-ic.n{background:rgba(26,26,26,.09);color:rgba(26,26,26,.5)}
.cmp-ic.n:after{content:"\2715"}
.cmp-ic.p{background:rgba(26,26,26,.09);color:rgba(26,26,26,.5)}
.cmp-ic.p:after{content:"\2013"}

/* ---------------------------------------------------------------------
   Below 820px four columns cannot be read. Each attribute becomes its
   own block: the label as a heading, then three labelled lines with the
   ticks still doing the work. Ours keeps its tint so it stays first.
   ------------------------------------------------------------------ */
@media(max-width:820px){
  .cmp{display:block;box-shadow:none;border-radius:0;background:none}
  .cmp-head,.cmp-corner{display:none}
  .cmp-lab{
    background:none;padding:1.5rem 0 .6rem;
    border-top:1px solid rgba(26,26,26,.16);font-size:14px;
  }
  .cmp-cell{
    justify-content:flex-start;padding:.45rem 0;border-top:0;
    font-size:13px;
  }
  .cmp-cell:before{
    content:attr(data-col);order:-1;flex:none;width:8.5em;
    font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--grey);
  }
  .cmp-cell.cmp-us{border-radius:8px;padding:.6rem .7rem;margin:.25rem 0}
}

/* ---------------------------------------------------------------------
   GOOGLE REVIEWS
   A summary row and a slot. The row is small on purpose: until the real
   rating is in, an enormous empty number is worse than no number, and
   once it is in, the reviews themselves do the persuading.
   ------------------------------------------------------------------ */
.rev-summary{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.2vw,28px);flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,28px);
}
.rev-stars{font-size:18px;letter-spacing:.14em;color:var(--accent);line-height:1}
.rev-fig{display:flex;align-items:baseline;gap:.6em}
.rev-fig b{font-family:var(--display);font-weight:300;font-size:1.9rem;line-height:1;color:var(--ink)}
.rev-fig span{font-size:13px;color:var(--grey)}
#google-reviews{margin-top:clamp(22px,2.8vw,32px)}

/* ---------------------------------------------------------------------
   THE CATCH-ALL
   Dark, full-width inside the wrap, and visually unlike every other
   block on the page — it is the last thing before the footer and it has
   to read as a different offer, not another restatement of the first.
   ------------------------------------------------------------------ */
.capture{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
  background:var(--ink);color:#F4F0E8;
  border-radius:var(--r-lg);padding:clamp(28px,3.6vw,52px);
}
.capture .label{color:var(--pear)}
.capture h2{color:#F4F0E8;margin:.5rem 0 .8rem}
.capture .lede{color:rgba(244,240,232,.8);max-width:62ch;margin:0}
.capture .acts{margin-top:0;flex:none;flex-direction:column;align-items:stretch}
.capture .btn.ghost{border-color:rgba(244,240,232,.4);color:#F4F0E8}
@media(max-width:820px){
  .capture{display:block}
  .capture .acts{margin-top:1.6rem;flex-direction:row}
}

/* the Sculpt intro strip is a link, the Bodyroll one a div - same object,
   so they must look identical whichever element carries them */
a.intro-strip{text-decoration:none}
a.intro-strip:hover{background:#000}

/* ---------------------------------------------------------------------
   LEGAL PAGES
   A single readable column. Legal text is the one place on this site
   where someone reads top to bottom rather than scanning, so the measure
   is tighter than the rest and the headings are plain.
   ------------------------------------------------------------------ */
.legal-body{max-width:72ch}
.legal-meta{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:1.6rem;
}
.legal-body h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.2;
  margin:2.4rem 0 .7rem;color:var(--ink);
}
.legal-body h3{
  font-size:14px;font-weight:600;margin:1.5rem 0 .4rem;color:var(--ink);
}
.legal-body p{font-size:14.5px;line-height:1.75;color:var(--clay);margin:0 0 1rem}
.legal-body p.lede{font-size:16px;color:var(--ink)}
.legal-body a{color:var(--accent);border-bottom:1px solid rgba(174,37,9,.3)}
.legal-body a:hover{border-bottom-color:var(--accent)}
.legal-list{list-style:none;margin:0 0 1.2rem;padding:0}
.legal-list li{
  position:relative;padding-left:1.4rem;margin-bottom:.55rem;
  font-size:14.5px;line-height:1.7;color:var(--clay);
}
.legal-list li:before{
  content:"";position:absolute;left:0;top:.78em;
  width:13px;height:1px;background:var(--accent);
}
.legal-list li b{color:var(--ink)}