/* ==========================================================================
   CRAYTON — Private Grooming
   Editorial / quiet-luxury system. Mobile-first. No framework.
   ========================================================================== */

:root{
  /* Surfaces */
  --bone:#F4F1EC;
  --paper:#FBFAF8;
  --dark:#171712;
  --dark-2:#20201A;

  /* Ink */
  --ink:#191917;
  --ink-2:#4C4C45;
  --muted:#5C5C53;
  --on-dark:#EDEAE2;
  --on-dark-2:#BCBAAF;

  /* Lines */
  /* Two tracking voices for every small uppercase label on the page. A
     census found TWELVE different letter-spacing values doing one job, which
     is exactly the kind of drift a reader feels without being able to name.
     Standard labels at 11px+ take --ls-label; 10px-and-under take the wider
     --ls-micro, because tracking has to grow as type shrinks. */
  --ls-label:.14em;
  --ls-micro:.18em;
  --line:#E2DED6;
  --line-strong:#CFC9BE;
  --line-dark:rgba(237,234,226,.16);

  /* Accent — warm stone. Used sparingly: labels, rules, numerals. */
  --accent:#7A6A4E;
  --accent-on-dark:#9BA093;

  /* Type */
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Space */
  --shell:1180px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --section-y:clamp(4.5rem,10vw,8.5rem);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Long, decelerating tail — movement that settles rather than snaps. */
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(74px + 1.5rem);
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  font-weight:400;
  line-height:1.65;
  letter-spacing:.005em;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
figure{margin:0;}

/* --------------------------------------------------------------------- */
/* Grain                                                                  */
/* Every surface here is a flat colour fill, which is the main reason the  */
/* page reads as digital rather than as a material. A single fixed layer   */
/* of fine noise gives the paper a tooth — the same reason good print      */
/* stock feels expensive and coated stock does not. Kept at 3.5% so it is  */
/* felt rather than seen; above ~6% it starts to look like a dirty screen. */
/* --------------------------------------------------------------------- */

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.015em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(2.35rem,1.5rem + 3.9vw,4.4rem);line-height:1.05;}
h2{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.25rem);}
h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem);line-height:1.2;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

a{color:inherit;}

::selection{background:rgb(93 96 88 / .22);color:var(--ink);}
.section-dark ::selection,
.section-request ::selection,
.site-footer ::selection{background:rgb(155 160 147 / .3);color:var(--on-dark);}

/* --------------------------------------------------------------------- */
/* Layout primitives                                                      */
/* --------------------------------------------------------------------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y);}
.section-value{background:var(--paper);}
.section-pricing{background:var(--paper);}
.section-proof{background:var(--paper);}
/* The dark bands were a single flat #171712, which is why they read as blocks
   dropped onto the page rather than as rooms. A very soft light fall from the
   upper left gives them a sense of a light source without ever reading as a
   gradient — the shift is ~6 levels of luminance across the whole band. */
.section-dark,
.section-request{
  background:var(--dark);
  color:var(--on-dark);
  background-image:radial-gradient(120% 90% at 12% 0%, #1F1F18 0%, #171712 46%, #131310 100%);
}
.section-dark h2,.section-dark h3{color:var(--on-dark);}
.section-dark,.section-request,.site-footer,.compare-new{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.section-head{margin-bottom:clamp(2.75rem,6vw,4.5rem);}
/* The measure lives on the heading itself, in ITS OWN em. The old 56ch on
   the parent resolved against Inter body size (~608px) while these render
   in 52px Newsreader needing up to 749px, so five of the page's headings
   broke into a stubby second line for want of 15 to 142 pixels. The ch-unit
   family of bugs has now shipped three times; measures on display type are
   set in em, on the element, always. */
.section-head h2{max-width:13em;}
.section-head .section-lede{
  text-wrap:pretty;max-width:54ch;}

/* --------------------------------------------------------------------- */
/* Section head variants                                                  */
/* Every section opened with the identical silhouette — eyebrow, heading,  */
/* lede, flush left at the same x and the same measure, eleven times. By   */
/* the third one the eye stops reading section openings as events and      */
/* starts reading them as a repeating header. These break that at three    */
/* points; the rest keep the default so the variation reads as intent      */
/* rather than as an inconsistent system.                                  */
/* --------------------------------------------------------------------- */

/* The core argument of the page gets display scale.
   The measure belongs on the heading, in `em`, so it resolves against the
   display size. Set as `20ch` on the container it resolved against Inter at
   17px instead, which is 174px, and the heading came out one word per line
   down the left edge of the page at every desktop width. */
.section-head--lead{max-width:none;}
.section-head--lead h2{
  font-size:clamp(2.4rem,1.4rem + 4vw,4.8rem);
  line-height:1.02;
  letter-spacing:-.025em;
  max-width:9.5em;
}
.section-head--lead .section-lede{max-width:52ch;}

/* Label steps aside into its own column, so the heading starts where the
   content does and the section opens on a horizontal rather than a stack. */
@media (min-width:900px){
  .section-head--split{
    display:grid;
    grid-template-columns:11rem minmax(0,1fr);
    column-gap:clamp(2rem,4vw,4rem);
    max-width:none;
    align-items:start;
  }
  .section-head--split .eyebrow{grid-column:1;grid-row:1;margin:0;padding-top:.85rem;}
  .section-head--split h2{grid-column:2;grid-row:1;max-width:20ch;}
  /* Column pinned, row left to auto-place. Pinning grid-row:2 stacked every
     lede into the same cell — the membership section has two, and they
     rendered on top of each other. */
  .section-head--split .section-lede{grid-column:2;margin-top:1.6rem;}
  .section-head--split .section-lede + .section-lede{margin-top:1.1rem;}
  /* The rule would run into the heading column; the label carries itself. */
  .section-head--split .eyebrow::after{display:none;}
}
.section-lede{
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:var(--ink-2);
  margin-top:1.4rem;
  max-width:54ch;
}
.section-dark .section-lede{color:var(--on-dark-2);}

.eyebrow{
  font-size:.688rem;
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.35rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
/* The rule draws itself out of the label rather than arriving whole. It is a
   small move, but it repeats beside every section heading on the page, so it
   does more for the sense of life than any single large animation would.
   Fades along its length so it reads as drawn rather than as a border. */
.eyebrow::after{
  content:"";
  flex:0 0 auto;
  width:clamp(24px,6vw,48px);
  height:1px;
  background:linear-gradient(90deg, currentColor, transparent);
  opacity:.5;
  transform:scaleX(0);
  transform-origin:left center;
  /* Was 1.1s with a .25s delay stacked on the reveal stagger — a section
     label finished drawing its own rule ~1.7s after appearing, eleven
     times down the page. */
  transition:transform .6s var(--ease-out) .05s;
}
.eyebrow.is-in::after{transform:scaleX(1);}
/* Eyebrows that are not part of the reveal system stay drawn. */
.eyebrow:not(.reveal)::after{transform:scaleX(1);}
.section-dark .eyebrow{color:var(--accent-on-dark);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--bone);
  padding:.85rem 1.25rem;font-size:.9rem;
}
.skip-link:focus{left:0;}

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */

.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--bone);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  position:relative;
  padding:.95rem 1.9rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bg);
  border-radius:2px;
  font-family:var(--sans);
  font-size:.813rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  /* justify-content centres a single line box and does nothing once the
     label wraps: the wrapped lines fall to the start edge and the button
     comes out with its text shoved into the top-left corner and half of it
     empty. On a 375px screen eight buttons wrap, including the one that
     takes the booking. */
  text-align:center;
  /* And they were set solid, so two wrapped lines nearly touched. The
     padding is trimmed to keep a single-line button the same height it was. */
  line-height:1.25;
  cursor:pointer;
  transition:transform .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(25,25,23,.55);}
.btn:active{transform:translateY(0);}

.btn-ink{--btn-bg:var(--ink);--btn-fg:var(--bone);}
.btn-ink:hover{--btn-bg:#2E2E28;}

.btn-bone{--btn-bg:var(--bone);--btn-fg:var(--dark);}
.btn-bone:hover{--btn-bg:#FFFFFF;}

.btn-ghost{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  border-color:var(--line-strong);
}
.btn-ghost:hover{--btn-bg:transparent;border-color:var(--ink);box-shadow:none;}

.btn-sm{padding:.74rem 1.35rem;font-size:.72rem;letter-spacing:.1em;}
/* The header button is the page's primary action and is sized for it: a
   touch-comfortable 46px, a step up in type, and a hair more tracking so
   the uppercase label does not tighten as it grows. Still a flat bone
   pill; nothing is added to shout with. */
/* Scoped to 768 and up. The legal pages show this button at EVERY width
   (.legal-header .header-cta), so unscoped it overflowed a 375px header
   alongside the wordmark on privacy, terms and 404. Above 768 there is room
   and that is also the only place the homepage header shows it. */
@media (min-width:768px){
  .header-cta.btn-sm{
    padding:.92rem 1.6rem;
    font-size:.78rem;
    letter-spacing:.11em;
    min-height:46px;
  }
}
/* Full-width already; the wide inline padding only forces the label to wrap. */
.btn-block{width:100%;padding-inline:1rem;}
@media (max-width:430px){
  .btn-block{font-size:.75rem;letter-spacing:.06em;}
}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:1px solid var(--ink);
  outline-offset:3px;
  box-shadow:0 0 0 3px rgb(93 96 88 / .24);
}
.section-dark :focus-visible,
.section-request :focus-visible,
.site-footer :focus-visible{
  outline-color:var(--on-dark);
  /* Reads from the token so the re-grade reaches it. Written as a raw gold
     literal it survived a re-grade that only changed outline-color, and the
     focus ring came out as a sage outline wrapped in a warm-gold glow: the
     exact amber-on-near-black the palette was built to avoid, on the most
     visible interaction state the page has. */
  box-shadow:0 0 0 3px rgb(155 160 147 / .3);
}
/* Keeps the ring inside the row rather than spanning the full 78ch measure. */
.faq-item summary:focus-visible{outline-offset:-3px;}

/* --------------------------------------------------------------------- */
/* Header                                                                 */
/* --------------------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(244,241,236,0);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
/* Opaque, not translucent: at 90% the content scrolling underneath ghosted
   through and read as doubled text. Nothing about this design needs glass. */
.site-header.is-scrolled{
  background:var(--bone);
  box-shadow:0 1px 0 var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.35rem;
  min-height:74px;
}
/* No gap widening at 1280. The flex line is capped by --shell at 1100px of
   content and had about 26px of slack; widening the two gaps here added
   about 62px, so from 1280 up the header ran 37px past the right edge of
   every section below it. On a page whose whole discipline is one vertical
   spine, the call to action was the one thing breaking it. */
.site-nav,.wordmark{flex:0 0 auto;}

.wordmark{text-decoration:none;display:block;line-height:1;}
.wordmark-name{
  display:block;
  font-family:var(--serif);
  font-size:1.32rem;
  font-weight:300;
  /* Was .34em — the widest tracking on the page, on its LARGEST uppercase
     item, when everything else that wide is under 11px. At 21px the gaps
     read as letters standing apart rather than a name. .16em keeps the
     engraved formality; the negative margin swallows the trailing
     letter-space so the optical right edge sits where the maths says. */
  letter-spacing:.16em;
  margin-right:-.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.wordmark-sub{
  display:block;
  margin-top:.42rem;
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.site-nav{display:none;gap:1.45rem;}

.site-nav a{
  /* 27x29 before this. Only the hit area grows; the negative margin keeps the
     header's height and the nav's spacing exactly where they were. */
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-block:-10px;

  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-2);
  position:relative;
  padding-block:.3rem;
  transition:color .3s var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.site-nav a:hover{color:var(--ink);}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left;}

.header-actions{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto;}
.header-cta{display:none;}

.header-phone{
  display:none;
  text-decoration:none;
  line-height:1.2;
  text-align:right;
  transition:color .3s var(--ease);
}
.header-phone:not([hidden]){display:block;}
.header-phone-label{
  display:none;
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.2rem;
}
.header-phone span:last-child{
  font-size:.813rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--ink);
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.header-phone:hover span:last-child{color:var(--accent);}

/* The button used to arrive with the nav at 900px. The nav needs that
   width; a single button does not, and a tablet visitor had no header
   action at all. It comes in at 768 with the short label and grows into
   the full one at 900. */
@media (min-width:768px){
  .header-cta{display:inline-flex;}
}
@media (min-width:900px){
  .header-phone-label{display:block;}
  .header-phone span:last-child{font-size:.875rem;border-bottom:0;padding-bottom:0;}
}
/* The nav arrives later than the rest of the header on purpose. Measured,
   the five links are 459px and the wordmark, direct line and button are
   another 448px; with the gaps that is 950px of content, so bringing them
   in at 900 pushed the header 31px wider than the window and clipped the
   call to action off the right edge between roughly 900 and 1060. */
@media (min-width:1080px){
  .site-nav{display:flex;}
}

/* --------------------------------------------------------------------- */
/* 1 · Hero                                                               */
/* --------------------------------------------------------------------- */

.hero{padding-top:clamp(2.5rem,6vw,4rem);}
.hero-inner{
  display:grid;
  gap:clamp(2.5rem,6vw,4.5rem);
  align-items:center;
  padding-bottom:clamp(3.5rem,8vw,6rem);
}
@media (min-width:900px){
  .hero-inner{grid-template-columns:1.08fr .92fr;gap:clamp(3rem,5vw,5rem);}
}

/* Set when there is no hero photograph. Without a second column to balance it,
   the type has to carry the screen alone — so it gets bigger and the measure
   stays short enough to still read as a statement rather than a paragraph. */
.hero-inner.no-media{grid-template-columns:1fr;}
.hero-inner.no-media h1{font-size:clamp(2.6rem,1.4rem + 6vw,6rem);}
.hero-inner.no-media .lede{max-width:44ch;}
@media (min-width:900px){
  /* `ch` resolves against the element's OWN font. On the h1 that is Newsreader
     at display size, which is what we want. It must never be set on .hero-copy,
     whose font is Inter at 17px — 20ch there computed to 204px and crushed the
     entire hero into a third of a phone screen. */
  .hero-inner.no-media h1{max-width:16ch;}
}

.hero h1{margin-bottom:1.6rem;}

.lede{
  font-size:clamp(1.075rem,1rem + .5vw,1.32rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:46ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:2.35rem;
}
.hero-actions .btn{flex:1 1 auto;}
@media (min-width:520px){.hero-actions .btn{flex:0 0 auto;}}

.hero-direct{
  margin-top:1.5rem;
  font-size:.938rem;
  color:var(--ink-2);
}
.hero-direct a{
  color:var(--ink);
  font-weight:400;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:var(--accent);
  white-space:nowrap;
}
.hero-direct a:hover{color:var(--accent);}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem .8rem;
  margin-top:2rem;
  font-size:.813rem;
  letter-spacing:.02em;
  color:var(--muted);
}
.hero-meta strong{color:var(--ink);font-weight:500;}
.hero-meta .dot{color:var(--line-strong);}

.hero-media{position:relative;}
.hero-media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:2px;
  filter:saturate(.88) contrast(1.02);
}
@media (max-width:899px){
  .hero-media img{aspect-ratio:16/10;}
  .hero-inner{gap:2.25rem;padding-bottom:clamp(2.5rem,7vw,3.5rem);}
  .hero{padding-top:1.5rem;}
}

.areabar{border-block:1px solid var(--line);}
.areabar-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .9rem;
  padding-block:1.15rem;
  font-size:.688rem;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--muted);
}
.areabar-label{color:var(--accent);font-weight:500;}
.areabar .sep{color:var(--line-strong);}

/* --------------------------------------------------------------------- */
/* 1b · Who it's for                                                      */
/* A beat, not a section — deliberately shorter than --section-y so it     */
/* reads as a continuation of the hero's qualification rather than a new   */
/* argument. Left-aligned and narrow: this is meant to be read, not scanned.*/
/* --------------------------------------------------------------------- */

.whofor{
  padding-block:clamp(2.75rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);
}
/* The measure sits on the paragraphs, not on the .shell wrapper. Narrowing
   the shell itself left `margin-inline:auto` centring the whole block, so
   this beat floated 230px right of the left rule every other section is on,
   which is the opposite of what it was written to do. */
.whofor-inner{max-width:var(--shell);}
.whofor-title{
  font-size:clamp(1.45rem,1.2rem + 1.3vw,2.25rem);
  line-height:1.15;
  margin-bottom:1.2rem;
  max-width:17em;
}
.whofor-body{
  font-size:clamp(1.02rem,.98rem + .35vw,1.18rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:58ch;
  margin:0;
}

/* --------------------------------------------------------------------- */
/* 2 · Problem / value                                                    */
/* --------------------------------------------------------------------- */

.compare{
  display:grid;
  gap:1.25rem;
}
@media (min-width:820px){.compare{grid-template-columns:1fr 1fr;gap:1.5rem;}}

.compare-card{
  padding:clamp(1.75rem,4vw,2.6rem);
  border:1px solid var(--line);
  border-radius:2px;
  background:transparent;
}
.compare-old{color:var(--muted);}
.compare-new{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--on-dark-2);
}

.compare-label{
  font-size:.688rem;
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  margin-bottom:1.75rem;
  color:var(--muted);
}
.compare-new .compare-label{color:var(--accent-on-dark);}

.ledger{list-style:none;margin:0 0 1.6rem;padding:0;}
.ledger li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding-block:.72rem;
  border-bottom:1px solid var(--line);
  font-size:.938rem;
}
.compare-new .ledger li{border-color:var(--line-dark);}
.ledger .t{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-size:.813rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.compare-new .ledger li{color:var(--on-dark);}
.compare-new .ledger .t{color:var(--accent-on-dark);}

.compare-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 1.15rem;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.compare-total strong{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem);
  font-weight:300;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}
.compare-new .compare-total{color:var(--on-dark-2);}
.compare-new .compare-total strong{color:var(--bone);}

.compare-note{font-size:.875rem;line-height:1.6;margin:0;}
.compare-old .compare-note strong{color:var(--ink);font-weight:400;}
.compare-new .compare-note{color:var(--on-dark-2);}

/* The differentiator now opens the founder section and is set a size up, so
   the single strongest claim on the page reads as a statement rather than as
   the second sentence of a paragraph. */
.about-lead{
  /* A display-size claim must not drop its last two words onto a line of
     their own. balance evens the lines; pretty is the fallback for engines
     that only have that one. */
  text-wrap:pretty;
  text-wrap:balance;
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  line-height:1.35;
  letter-spacing:-.008em;
  color:var(--ink);
  margin:0 0 1.35rem;
}

.value-close{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  max-width:60ch;
  font-family:var(--serif);
  font-size:clamp(1.25rem,1.1rem + .85vw,1.85rem);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* The CTA that sits where the argument finishes. Quiet on purpose: the
   button carries the action and the line beneath it carries the price, so
   nothing here has to raise its voice to be the obvious next step. */
.value-cta{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem 1.4rem;
}
.value-cta-note{
  margin:0;
  font-size:.938rem;
  color:var(--ink-2);
}
@media (max-width:520px){
  /* Stacked, the note reads as a caption under the button rather than as a
     second thing competing with it. */
  .value-cta{display:block;}
  .value-cta .btn{width:100%;}
  .value-cta-note{margin-top:.85rem;}
}

.section-dark .value-close{color:var(--on-dark);}

/* Mid-page CTA bands — an ask after each stretch of persuasion */
.midcta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 2rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line-dark);
}
.midcta-light{border-top-color:var(--line);}
.midcta .btn{flex:1 1 100%;}
@media (min-width:560px){.midcta .btn{flex:0 0 auto;}}
.midcta-note{
  margin:0;
  font-size:.875rem;
  color:var(--on-dark-2);
  max-width:42ch;
}
.midcta-light .midcta-note{color:var(--muted);}

.areabar-trust{
  margin-left:auto;
  color:var(--ink-2);
  letter-spacing:var(--ls-label);
}
@media (max-width:820px){.areabar-trust{margin-left:0;flex-basis:100%;}}

/* --------------------------------------------------------------------- */
/* 2b · Pull quote                                                        */
/* Breaks the eyebrow/heading/body rhythm every other section runs on, and */
/* puts proof in front of the reader long before the testimonials section. */
/* --------------------------------------------------------------------- */

.pullquote{
  background:var(--bone);
  /* More air than a normal section, not less — this is the interruption. */
  padding-block:clamp(5rem,13vh,10rem);
  border-bottom:1px solid var(--line);
}
/* No max-width override here — .shell already sets 1180px. Resetting it to
   none broke the page left rule and floated the quote 123px left of every
   other section. The measure belongs on the blockquote, in em. */
.pullquote blockquote{
  margin:0;
  position:relative;
  font-family:var(--serif);
  font-weight:300;
  /* Measure in `em` so it resolves against the display size. `ch` on the
     parent resolved against Inter 17px and rendered this 180px wide at seven
     characters a line — a vertical ribbon, not a pull quote. */
  max-width:min(100%,13em);
  font-size:clamp(2rem,1.1rem + 4.2vw,4.2rem);
  line-height:1.06;
  letter-spacing:-.028em;
  color:var(--ink);
  text-wrap:balance;
}
/* The opening quote mark hangs into the margin so the text edge stays flush
   with every other section's left rule. */
.pullquote blockquote::before{
  content:"\201C";
  position:absolute;
  margin-left:-.52em;
  color:var(--accent);
  opacity:.5;
}
.pullquote-by{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  font-size:.688rem;
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:600px){
  .pullquote blockquote::before{position:static;margin-left:0;}
}

/* --------------------------------------------------------------------- */
/* 3 · The experience                                                     */
/* --------------------------------------------------------------------- */

.steps{list-style:none;margin:0;padding:0;counter-reset:step;}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.35rem;
  padding-block:clamp(1.75rem,3.5vw,2.4rem);
  border-top:1px solid var(--line-dark);
}
.step:last-child{border-bottom:1px solid var(--line-dark);}
@media (min-width:820px){
  .step{grid-template-columns:5rem minmax(0,20ch) minmax(0,1fr);gap:2.5rem;align-items:start;}
  .step-body{display:contents;}
  .step-body h3{grid-column:2;}
  .step-body p{grid-column:3;margin:0;}
}
.step-num{
  font-family:var(--serif);
  font-size:clamp(1.75rem,1.2rem + 1.6vw,2.6rem);
  font-weight:200;
  line-height:1;
  letter-spacing:.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--accent-on-dark);
  opacity:.5;
  padding-top:.06em;
  transition:opacity .6s var(--ease-out);
}
@media (hover:hover){ .step:hover .step-num{opacity:1;} }
.step-body h3{margin-bottom:.7rem;}
.step-body p{color:var(--on-dark-2);margin:0;max-width:60ch;}

/* --------------------------------------------------------------------- */
/* 4 · Pillars                                                            */
/* --------------------------------------------------------------------- */

.pillars{
  display:grid;
  gap:1px;
  /* --line measured 1.22:1 against the cells: a grid drawn in ink nobody
     can see. A 1px rule on a light ground needs to be darker than a border
     token chosen for softness. Hard-set, not tokenised, because this is
     the only 1px-grid-on-bone on the page. */
  background:#B9B1A0;
  border:1px solid #B9B1A0;
  border-radius:2px;
  overflow:hidden;
}
@media (min-width:640px){.pillars{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.pillars{grid-template-columns:repeat(3,1fr);}}

.pillar{
  position:relative;
  background:var(--bone);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  transition:background-color .45s var(--ease-out);
}
.pillar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s var(--ease-out);
}
@media (hover:hover){
  .pillar:hover{background:#FEFCF8;}
  .pillar:hover::before{transform:scaleX(1);}
  .pillar:hover p{color:var(--ink);}
}
.pillar p{transition:color .45s var(--ease-out);}
.pillar h3{margin-bottom:.85rem;}
.pillar p{color:var(--ink-2);font-size:.938rem;margin:0;}
/* The sixth pillar's heading used to take the sage accent. As a text colour
   the sage sits so close to the muted grey that one heading among six read
   as FADED — like a disabled state — rather than emphasised. The sage works
   as a device colour (rules, kickers, focus); it fails as running text. Six
   identical cells, six identical headings. */
.pillar-accent h3{color:inherit;}

/* --------------------------------------------------------------------- */
/* 5 · Pricing                                                            */
/* --------------------------------------------------------------------- */

.offer{
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:var(--bone);
}
.offer-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.5rem;
  padding:clamp(1.75rem,4vw,2.75rem);
  border-bottom:1px solid var(--line);
}
.offer-name{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.15rem);}
.offer-sub{
  margin:.6rem 0 0;
  font-size:.813rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.offer-price{text-align:left;}
@media (min-width:640px){.offer-price{text-align:right;}}
.price,.mx-price,.compare-total strong{font-variant-numeric:lining-nums tabular-nums;}
.price{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.6rem,2rem + 2.4vw,3.6rem);
  font-weight:200;
  line-height:1;
  letter-spacing:-.02em;
}
.price-note{
  display:block;
  margin-top:.5rem;
  font-size:.688rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.offer-body{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  padding:clamp(1.75rem,4vw,2.75rem);
}
@media (min-width:860px){.offer-body{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4rem);}}

.offer-col-label{
  font-size:.688rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.5rem;
}

.ticks{list-style:none;margin:0;padding:0;}
.ticks li{
  position:relative;
  padding:0 0 .85rem 1.6rem;
  font-size:.938rem;
  color:var(--ink-2);
}
.ticks li::before{
  content:"";
  position:absolute;
  left:1px;top:.34em;
  width:6px;height:10px;
  border-right:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  transform:rotate(42deg);
}

.notes{list-style:none;margin:0 0 2rem;padding:0;}
.notes li{
  padding-block:.85rem;
  border-bottom:1px solid var(--line);
  font-size:.906rem;
  color:var(--ink-2);
}
.notes li:first-child{padding-top:0;}
.notes strong{color:var(--ink);font-weight:500;}

.assurance{
  padding:1.5rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:2px;
}
.section-pricing .assurance{background:var(--bone);}
.assurance-title{
  font-size:.688rem;
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.75rem;
}
.assurance p:last-child{font-size:.906rem;color:var(--ink-2);margin:0;}

.offer-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.75rem;
  padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.75rem,4vw,2.75rem);
  border-top:1px solid var(--line);
  background:var(--paper);
}
.section-pricing .offer-foot{background:rgb(93 96 88 / .05);}
.offer-foot .btn{flex:1 1 100%;}
@media (min-width:560px){.offer-foot .btn{flex:0 0 auto;}}
.offer-foot-note{
  margin:0;
  font-size:.813rem;
  color:var(--muted);
  max-width:34ch;
}
/* --muted measures 4.45:1 on bone at 13px — under AA by five hundredths, and
   this particular link is the direct line offered to a man who would rather
   ask before he books. Small text carrying a phone number is the last place
   to be a rounding error under the threshold. */
.offer-foot-note a{color:var(--ink-2);}

/* --------------------------------------------------------------------- */
/* 6 · Membership                                                         */
/* --------------------------------------------------------------------- */

.tiers{
  display:grid;
  gap:1.15rem;
  align-items:stretch;
}
@media (min-width:980px){.tiers{grid-template-columns:repeat(3,1fr);gap:1.25rem;}}

.tier{
  display:flex;
  flex-direction:column;
  padding:clamp(1.6rem,3.5vw,2.25rem);
  /* Measured at 1.07:1 against the section behind it — the three cards
     holding the practice's whole pricing ladder were invisible as objects.
     On a dark ground a raised surface goes LIGHTER than the room, and a
     1px hairline needs real contrast to exist at all. */
  background:#201E16;
  border:1px solid rgb(241 236 225 / .26);
  border-radius:2px;
}
.tier-featured{
  background:#262319;
  /* The middle tier is the one being chosen, so its edge is the one place
     the sage speaks at full strength on this ground. */
  border-color:var(--accent-on-dark);
}

.tier-label{
  font-size:.625rem;
  font-weight:500;
  letter-spacing:var(--ls-micro);
  text-transform:uppercase;
  color:var(--accent-on-dark);
  margin-bottom:1.15rem;
}
.tier-name{
  font-size:clamp(1.32rem,1.2rem + .55vw,1.65rem);
  margin-bottom:1.15rem;
}
/* Keep the three prices on one line across the row, whatever the name length */
@media (min-width:980px){
  .tier-name{min-height:2.4em;}
  .tier-for{min-height:6.2em;}
}
.tier-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0 0 1.15rem;
  padding-bottom:1.35rem;
  border-bottom:1px solid var(--line-dark);
}
.tier-price .price{
  display:inline;
  font-size:clamp(2.15rem,1.8rem + 1.5vw,2.75rem);
  color:var(--bone);
}
.tier-price .price-note{
  display:inline;
  margin:0;
  color:var(--accent-on-dark);
  letter-spacing:.16em;
}
.tier-for{
  /* Was .906rem. This line is what distinguishes one level of access from
     the next, so it should not be the smallest text in the card. */
  font-size:.96rem;
  line-height:1.6;
  color:var(--on-dark);
  margin-bottom:1.5rem;
}

.tier-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
  align-content:start;
}

/* margin-top:auto pins the CTA to the base of every card regardless of how
   many lines the list above it runs to, so the row of buttons stays level. */
.tier-foot{margin-top:auto;padding-top:1.75rem;}
.tier-cta{width:100%;}
.tier-featured .tier-cta{
  --btn-bg:var(--bone);
  --btn-fg:var(--dark);
  border-color:var(--bone);
}
.tier-featured .tier-cta:hover{--btn-bg:#fff;border-color:#fff;}
.tier-list li{
  position:relative;
  padding-left:1.5rem;
  font-size:.875rem;
  line-height:1.55;
  color:var(--on-dark-2);
}
.tier-list li::before{
  content:"";
  position:absolute;
  left:1px;top:.32em;
  width:5px;height:9px;
  border-right:1px solid var(--accent-on-dark);
  border-bottom:1px solid var(--accent-on-dark);
  transform:rotate(42deg);
}

/* --------------------------------------------------------------------- */
/* Tier comparison matrix                                                 */
/* --------------------------------------------------------------------- */

.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.matrix-wrap{margin-top:clamp(2.5rem,5vw,3.75rem);}
.matrix-head{margin-bottom:1.75rem;}
.matrix-eyebrow{
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-on-dark);
  margin-bottom:.75rem;
}
.matrix-title{
  font-size:clamp(1.32rem,1.15rem + .8vw,1.85rem);
  color:var(--on-dark);
}

/* Mobile tier selector — a table of four columns is unreadable on a phone,
   so the phone shows one retainer at a time. */
.tier-switch{
  display:flex;
  gap:.4rem;
  margin-bottom:1.25rem;
  padding:.3rem;
  border:1px solid var(--line-dark);
  border-radius:2px;
  background:rgba(255,255,255,.03);
}
.tier-switch-btn{
  flex:1 1 0;
  min-width:0;
  padding:.7rem .5rem;
  background:transparent;
  border:0;
  border-radius:2px;
  font-family:var(--sans);
  font-size:.688rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.tier-switch-btn:hover{color:var(--on-dark);}
.tier-switch-btn.is-active{
  background:var(--bone);
  color:var(--dark);
}
@media (min-width:820px){.tier-switch{display:none;}}

.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.matrix{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
  text-align:left;
}
.matrix caption{text-align:left;}
.matrix thead th{
  vertical-align:bottom;
  padding:0 1rem 1.1rem;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:300;
  line-height:1.25;
  color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);
}
.matrix thead th:first-child{padding-left:0;width:38%;}
.mx-price{
  display:block;
  margin-top:.45rem;
  font-family:var(--sans);
  font-size:.813rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--accent-on-dark);
}
.mx-price small{font-weight:300;opacity:.75;}

.matrix tbody th{
  padding:.95rem 1.5rem .95rem 0;
  font-weight:300;
  font-size:.875rem;
  line-height:1.45;
  color:var(--on-dark-2);
  border-bottom:1px solid rgba(237,234,226,.09);
}
.matrix tbody td{
  padding:.95rem 1rem;
  border-bottom:1px solid rgba(237,234,226,.09);
  color:var(--on-dark);
  white-space:nowrap;
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td{border-bottom:0;}

.mx-yes{
  display:inline-block;
  width:7px;height:12px;
  border-right:1.5px solid var(--accent-on-dark);
  border-bottom:1.5px solid var(--accent-on-dark);
  transform:rotate(42deg);
  margin:0 0 3px 2px;
}
/* Needs the tbody td prefix to outrank `.matrix tbody td`, otherwise the
   dashes render as brightly as the checkmarks and the ladder reads flat. */
.matrix tbody td.mx-off{color:rgba(237,234,226,.28);}
.mx-val{font-size:.813rem;letter-spacing:.02em;}

/* The middle column carries a faint wash so the eye has an anchor,
   without making the outer tiers look deficient. */
@media (min-width:820px){
  .matrix thead th[data-col="2"],
  .matrix tbody td[data-col="2"]{background:rgb(155 160 147 / .06);}
}

/* One column at a time below the breakpoint */
@media (max-width:819px){
  .matrix thead th:first-child{width:auto;}
  .matrix [data-col]{display:none;}
  .matrix[data-active-tier="1"] [data-col="1"],
  .matrix[data-active-tier="2"] [data-col="2"],
  .matrix[data-active-tier="3"] [data-col="3"]{display:table-cell;}
  /* The active tier is already named on the button above — repeating it in
     the header is redundant and eats vertical space. Keep only the price. */
  .matrix .mx-name{display:none;}
  .matrix thead th{padding:0 0 .9rem;}
  .matrix thead th[data-col]{text-align:right;}
  .mx-price{margin-top:0;font-size:1rem;}
  .matrix tbody td{text-align:right;padding-right:0;}
  .matrix tbody th{padding-right:1rem;}
}

/* No JavaScript: show every column rather than a single one */
.no-js .tier-switch{display:none;}
.no-js .matrix [data-col]{display:table-cell;}

/* Sets the "you don't have to choose yet" note apart from the argument above
   it, so a first-time reader stops evaluating three prices he cannot buy. */
.lede-note{
  color:var(--accent-on-dark);
  font-weight:500;
}

.member-terms{
  margin:clamp(1.75rem,3.5vw,2.5rem) 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  font-size:.875rem;
  color:var(--on-dark-2);
  max-width:72ch;
}
.member-terms strong{color:var(--on-dark);font-weight:400;}

.member-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.75rem;
  margin-top:1.75rem;
}
.member-foot .btn{flex:1 1 100%;}
@media (min-width:560px){.member-foot .btn{flex:0 0 auto;}}
.member-foot .offer-foot-note{color:var(--on-dark-2);}

/* --------------------------------------------------------------------- */
/* 7 · About                                                              */
/* --------------------------------------------------------------------- */

.about-inner{
  display:grid;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
@media (min-width:900px){.about-inner{grid-template-columns:.85fr 1.15fr;}}

.about-media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  /* Bias the crop upward. A headshot has headroom at the top and chest at the
     bottom; centring the crop eats the hair before it eats the shoulders. */
  object-position:50% 32%;
  border-radius:2px;
  filter:saturate(.88) contrast(1.02);
}
/* This slot used to go 3:2 landscape on phones, which was fine for a room but
   turns a portrait into a band across the face. Stays portrait, just shorter. */
@media (max-width:899px){
  .about-media{max-width:340px;}
  .about-media img{aspect-ratio:4/5;}
}

.about-copy h2{margin-bottom:1.6rem;}
.about-copy p{color:var(--ink-2);max-width:58ch;}

.credentials{
  list-style:none;
  margin:2.25rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem;
  border-top:1px solid var(--line);
  padding-top:1.75rem;
}
.credentials li{
  position:relative;
  padding-left:1.35rem;
  font-size:.875rem;
  letter-spacing:.01em;
  color:var(--ink-2);
}
/* Tabular figures so the licence number reads as a record, not as prose. */
.cred-num{
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  color:var(--ink);
}
.credentials li::before{
  content:"";
  position:absolute;left:0;top:.66em;
  width:5px;height:5px;
  background:var(--accent);
  border-radius:50%;
}

/* --------------------------------------------------------------------- */
/* 8 · Social proof                                                       */
/* --------------------------------------------------------------------- */

.testimonials{display:grid;gap:1.25rem;}
@media (min-width:820px){.testimonials{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}}

.testimonial{
  padding:clamp(1.75rem,3.5vw,2.4rem);
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:2px;
}
.testimonial blockquote{
  margin:0 0 1.5rem;
  font-family:var(--serif);
  font-size:clamp(1.075rem,1rem + .4vw,1.25rem);
  line-height:1.5;
  color:var(--ink);
}
.testimonial figcaption{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.proof-note{
  max-width:60ch;
  margin:clamp(2rem,4vw,2.75rem) 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.906rem;
  line-height:1.6;
  color:var(--muted);
}
.proof-note[hidden]{display:none;}

.proof-empty{
  max-width:62ch;
  padding:clamp(1.75rem,4vw,2.75rem);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:2px;
  background:var(--bone);
}
.proof-empty-lede{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem);
  line-height:1.4;
  color:var(--ink);
  margin-bottom:1.15rem;
}
.proof-empty p{color:var(--ink-2);font-size:.969rem;}
.proof-empty-foot{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:.688rem !important;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent) !important;
}

/* --------------------------------------------------------------------- */
/* 9 · FAQ                                                                */
/* --------------------------------------------------------------------- */

.faq-list{border-top:1px solid var(--line);max-width:78ch;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  padding-block:clamp(1.25rem,2.5vw,1.6rem);
  cursor:pointer;
  list-style:none;
  font-family:var(--serif);
  font-size:clamp(1.075rem,1rem + .45vw,1.32rem);
  line-height:1.3;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--accent);}

.chev{
  flex:0 0 auto;
  position:relative;
  width:13px;height:13px;
}
.chev::before,.chev::after{
  content:"";position:absolute;
  background:var(--ink-2);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.chev::before{left:0;top:6px;width:13px;height:1px;}
.chev::after{left:6px;top:0;width:1px;height:13px;}
.faq-item[open] .chev::after{transform:scaleY(0);opacity:0;}

.faq-answer{padding:0 0 1.6rem;max-width:70ch;}
/* Was .969rem — smaller than the body copy above it, for text that is
   genuinely read rather than scanned. Answers to real objections should not
   be the hardest thing on the page to read. */
.faq-answer p{color:var(--ink-2);font-size:1.02rem;line-height:1.72;margin:0;text-wrap:pretty;}
.faq-item[open] .faq-answer{animation:faq-in .4s var(--ease);}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* <details> height is not animatable by default, so every one of the thirteen
   questions shifted the page 60–120px instantly while the fade played on top
   of the jump. Where the engine supports it, the height now interpolates.
   Guarded by @supports because block-size:0 without a working transition would
   hide every answer permanently — the failure has to be the old behaviour,
   not a blank FAQ. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords;}
  .faq-item::details-content{
    block-size:0;
    overflow:clip;
    opacity:0;
    transition:block-size .5s var(--ease-out),
               opacity .4s var(--ease-out),
               content-visibility .5s allow-discrete;
    transition-behavior:allow-discrete;
  }
  .faq-item[open]::details-content{block-size:auto;opacity:1;}
  /* The keyframe would double up with the height transition. */
  .faq-item[open] .faq-answer{animation:none;}
}

/* The label recoloured on hover while the mark beside it stayed put, so the
   two halves of one control disagreed. */
.chev::before,.chev::after{
  transition:transform .35s var(--ease),opacity .35s var(--ease),background-color .3s var(--ease);
}
.faq-item summary:hover .chev::before,
.faq-item summary:hover .chev::after,
.faq-item[open] .chev::before{background:var(--accent);}

/* A 78ch clickable strip that changes only its text colour gives the pointer
   nothing to land on. Kept to .5rem — more and it reads as a nav item. */
.faq-item summary{transition:color .3s var(--ease),padding-left .45s var(--ease-out);}
@media (hover:hover){.faq-item summary:hover{padding-left:.5rem;}}

/* --------------------------------------------------------------------- */
/* 10 · Request / final CTA                                               */
/* --------------------------------------------------------------------- */

.section-request{
  /* background-color only — the shorthand here would wipe the light-fall
     gradient set on the shared .section-dark/.section-request rule above. */
  background-color:var(--dark);
  color:var(--on-dark);
  padding-bottom:calc(var(--section-y) + 4.5rem);
}
@media (min-width:900px){.section-request{padding-bottom:var(--section-y);}}
.section-request h2{color:var(--on-dark);}
.section-request .eyebrow{color:var(--accent-on-dark);}
.section-request .lede{color:var(--on-dark-2);}

.request-inner{
  display:grid;
  gap:clamp(2.75rem,6vw,4.5rem);
  align-items:start;
}
@media (min-width:960px){.request-inner{grid-template-columns:1fr 1.05fr;gap:clamp(3rem,6vw,5.5rem);}}

.request-copy h2{margin-bottom:1.5rem;}
.request-assurances{
  list-style:none;
  margin:2.5rem 0 0;
  padding:0;
  display:grid;
  gap:.9rem;
}
.request-assurances li{
  position:relative;
  padding-left:1.6rem;
  font-size:.938rem;
  color:var(--on-dark-2);
}
.request-assurances li::before{
  content:"";
  position:absolute;left:1px;top:.34em;
  width:6px;height:10px;
  border-right:1px solid var(--accent-on-dark);
  border-bottom:1px solid var(--accent-on-dark);
  transform:rotate(42deg);
}
.request-assurances strong{color:var(--on-dark);font-weight:400;}

.direct-access{
  margin-top:2.5rem;
  padding:clamp(1.35rem,3vw,1.85rem);
  border:1px solid var(--line-dark);
  border-left:2px solid var(--accent-on-dark);
  border-radius:2px;
  background:rgba(255,255,255,.03);
}
.direct-label{
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-on-dark);
  margin-bottom:.75rem;
}
.direct-copy{
  font-size:.906rem;
  color:var(--on-dark-2);
  margin-bottom:1.35rem;
}
.direct-actions{display:flex;flex-wrap:wrap;gap:.7rem;}
.direct-actions .btn{flex:1 1 auto;}
@media (min-width:480px){.direct-actions .btn{flex:0 0 auto;}}

.btn-outline-dark{
  --btn-bg:transparent;
  --btn-fg:var(--on-dark);
  border-color:rgba(237,234,226,.32);
}
.btn-outline-dark:hover{--btn-bg:transparent;border-color:var(--on-dark);box-shadow:none;}

.request-alt{
  margin-top:2.25rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  font-size:.875rem;
  color:var(--on-dark-2);
}
.request-alt a{color:var(--accent-on-dark);text-underline-offset:4px;}

/* Form ------------------------------------------------------------------ */

.request-form-wrap{
  background:var(--bone);
  border-radius:2px;
  padding:clamp(1.5rem,4vw,2.75rem);
  color:var(--ink);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.8);
}

/* --------------------------------------------------------------------- */
/* Guided application — three steps                                       */
/* --------------------------------------------------------------------- */

.step-rail[hidden]{display:none;}
.step-rail{
  display:flex;
  align-items:center;
  gap:.5rem;
  list-style:none;
  margin:0 0 1.85rem;
  padding:0 0 1.35rem;
  border-bottom:1px solid var(--line);
  font-size:.688rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.step-rail li{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex:1 1 0;
  min-width:0;
  transition:color .35s var(--ease);
}
.step-rail li + li::before{
  content:"";
  flex:0 0 auto;
  width:clamp(8px,2vw,18px);
  height:1px;
  background:var(--line-strong);
  margin:0 .5rem 0 .25rem;
}
.step-rail li{white-space:nowrap;}
.step-num-sm{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:20px;height:20px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  font-size:.625rem;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.step-rail .is-current{color:var(--ink);}
.step-rail .is-current .step-num-sm{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--bone);
}
.step-rail .is-done{color:var(--accent);}
.step-rail .is-done .step-num-sm{
  border-color:var(--accent);
  color:var(--accent);
}
/* Below ~400px the three labels plus connectors exceed the card width.
   Drop the connectors rather than shrinking the type any further. */
@media (max-width:430px){
  .step-rail{font-size:.625rem;letter-spacing:.04em;gap:.35rem;}
  .step-rail li + li::before{display:none;}
  .step-num-sm{width:18px;height:18px;}
}

.fstep{
  border:0;
  padding:0;
  margin:0;
  min-width:0; /* fieldset defaults break grid children without this */
}
.fstep[hidden]{display:none;}
.fstep-legend{
  padding:0;
  margin-bottom:1.5rem;
  font-family:var(--serif);
  font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  font-weight:300;
  line-height:1.25;
  color:var(--ink);
}
.fstep-legend:focus{outline:none;}
.fstep-legend:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

.retainer-note{
  margin:0 0 1.5rem;
  padding:1.1rem 1.25rem;
  background:rgba(122,106,78,.07);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:2px;
  font-size:.844rem;
  line-height:1.55;
  color:var(--ink-2);
}
.retainer-note strong{color:var(--ink);font-weight:500;}
.retainer-note[hidden]{display:none;}

/* Was --muted (#6B6A5F), which measures 4.45:1 on bone at 13px — under AA
   by a hair, on the line that tells a man in a hurry to call instead. */
.field-hint{
  color:var(--ink-2);
  margin:.45rem 0 0;
  font-size:.75rem;
  line-height:1.5;
  color:var(--muted);
}

.fstep-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
  margin-top:.5rem;
}
.fstep-actions .btn-block{flex:1 1 60%;width:auto;}
.btn-step-back{flex:0 0 auto;padding-inline:1.25rem;}
.btn-step-back[hidden]{display:none;}
.fstep-actions [data-step-next][hidden],
.fstep-actions #submit-btn[hidden]{display:none;}

/* Without JS the form is one page: no rail, no step buttons, submit shown. */
.no-js .step-rail,
.no-js [data-step-next],
.no-js [data-step-back]{display:none !important;}
.no-js .fstep{margin-bottom:2rem;}

.field-row{display:grid;gap:1.15rem;}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr;gap:1.15rem;}}

.field{margin-bottom:1.15rem;}
/* Was .688rem — about eleven pixels, uppercase and tracked, which is the
   hardest combination to read at speed, sitting on the one part of the page
   a client has to fill in correctly. The uppercase label is the house style
   and stays; the size is no longer the price of it. */
.field label{
  display:block;
  margin-bottom:.55rem;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.req{color:var(--accent);}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:.95rem 1rem;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:2px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55;}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234C4C45' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  cursor:pointer;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted);}
@media (hover:hover){
  .field input:hover,.field select:hover,.field textarea:hover{
    border-color:#BDB6A9;
    background:#FFFDFB;
  }
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  background:#fff;
  box-shadow:inset 0 -2px 0 0 var(--accent);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:#9A3B2E;}

.field-error{
  margin:.45rem 0 0;
  font-size:.75rem;
  letter-spacing:.02em;
  color:#9A3B2E;
  min-height:0;
  display:none;
}
.field.has-error .field-error{display:block;}

.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}

#submit-btn{margin-top:.5rem;min-height:54px;}
#submit-btn[disabled]{opacity:.75;cursor:progress;transform:none;box-shadow:none;}
.btn-spinner{
  display:none;
  width:15px;height:15px;
  border:1.5px solid rgba(244,241,236,.35);
  border-top-color:var(--bone);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
#submit-btn.is-loading .btn-spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

.form-fineprint{
  margin:1.15rem 0 0;
  font-size:.75rem;
  line-height:1.55;
  color:var(--muted);
  text-align:center;
}
.form-error{
  margin:1.15rem 0 0;
  padding:.9rem 1rem;
  background:rgba(154,59,46,.07);
  border:1px solid rgba(154,59,46,.28);
  border-radius:2px;
  font-size:.875rem;
  color:#8A3427;
}
.form-error a{color:inherit;font-weight:500;}

.form-success{text-align:left;padding:clamp(.5rem,2vw,1.5rem) 0;}
.success-mark{
  width:42px;height:42px;
  margin:0 0 1.5rem;
  border-radius:50%;
  border:1px solid var(--accent);
  position:relative;
}
.success-mark::after{
  content:"";
  position:absolute;
  left:14px;top:12px;
  width:8px;height:15px;
  border-right:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  transform:rotate(42deg);
}
.form-success h3{margin-bottom:1rem;font-size:clamp(1.5rem,1.3rem + 1vw,2rem);}
.form-success > p{color:var(--ink-2);}
.success-next{
  list-style:none;
  margin:1.75rem 0 0;
  padding:1.75rem 0 0;
  border-top:1px solid var(--line);
  display:grid;
  gap:.85rem;
}
.success-next li{
  position:relative;
  padding-left:1.5rem;
  font-size:.906rem;
  color:var(--ink-2);
}
.success-next li::before{
  content:"";
  position:absolute;left:1px;top:.32em;
  width:5px;height:9px;
  border-right:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  transform:rotate(42deg);
}
.success-foot{
  margin-top:1.75rem;
  font-size:.813rem;
  color:var(--muted);
}
.success-foot a{color:var(--accent);}

/* --------------------------------------------------------------------- */
/* Footer                                                                 */
/* --------------------------------------------------------------------- */

.site-footer{
  background:var(--dark);
  color:var(--on-dark-2);
  border-top:1px solid var(--line-dark);
  padding-block:clamp(3rem,6vw,4.5rem);
}
.footer-inner{display:grid;gap:2.5rem;}
@media (min-width:820px){
  .footer-inner{grid-template-columns:auto 1fr;align-items:start;gap:3rem;}
}
.footer-brand .wordmark-name{color:var(--on-dark);}
.footer-brand .wordmark-sub{color:var(--accent-on-dark);}

.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem 1.75rem;
}
@media (min-width:820px){.footer-nav{justify-content:flex-end;}}
.footer-nav a{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--on-dark-2);
  /* 27x20 before this. The type is unchanged — only the hit area grows, with
     the negative margin keeping the row's spacing exactly where it was. */
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-block:-12px;
  transition:color .3s var(--ease);
}
.footer-nav a:hover{color:var(--on-dark);}

.footer-legal{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.75rem;
  margin:0;
  padding-top:2rem;
  border-top:1px solid var(--line-dark);
  font-size:.75rem;
  color:#93928A;
}
.footer-legal a{color:var(--on-dark-2);text-underline-offset:3px;}

/* --------------------------------------------------------------------- */
/* Legal pages (privacy, terms)                                           */
/* --------------------------------------------------------------------- */

/* Legal pages have no sticky CTA, so the header keeps one at every width */
.legal-header .header-cta{display:inline-flex;}

/* The header carries wordmark + nav + phone + button. Below 1200px that is
   more than fits on one line, so the button label shortens rather than
   letting the nav wrap to two rows. */
.header-cta .cta-short{display:inline;}
.header-cta .cta-long{display:none;}
@media (min-width:1200px){
  .header-cta .cta-short{display:none;}
  .header-cta .cta-long{display:inline;}
}

/* The sticky bar carries the full wording wherever it fits. Measured at
   390px the full phrase renders a 291px button inside a 390px bar, which
   pushes the price out; above 560px there is room for both. */
.sticky-cta .cta-long{display:none;}
.sticky-cta .cta-short{display:inline;}
@media (min-width:560px){
  .sticky-cta .cta-long{display:inline;}
  .sticky-cta .cta-short{display:none;}
}

.legal{padding-block:clamp(3rem,7vw,5.5rem);}
.legal-shell{max-width:760px;}
.legal h1{
  font-size:clamp(2.15rem,1.6rem + 2.2vw,3.15rem);
  margin-bottom:1rem;
}
.legal-updated{
  font-size:.688rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--line);
}
.legal-lede{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.05rem + .6vw,1.45rem);
  line-height:1.45;
  color:var(--ink);
  margin-bottom:2.75rem;
}
.legal h2{
  font-size:clamp(1.32rem,1.2rem + .6vw,1.65rem);
  margin:2.75rem 0 1rem;
}
.legal p,.legal li{color:var(--ink-2);}
.legal ul{margin:0 0 1.1em;padding-left:1.35rem;}
.legal li{margin-bottom:.6rem;}
.legal li::marker{color:var(--accent);}
.legal strong{color:var(--ink);font-weight:500;}
/* :not(.btn) matters — without it this repaints buttons with body-link colour
   and an underline, which makes dark-on-dark button text disappear. */
.legal a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);}
.legal a:not(.btn):hover{color:var(--accent);}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.875em;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.1em .35em;
}

/* --------------------------------------------------------------------- */
/* Mobile sticky CTA                                                      */
/* --------------------------------------------------------------------- */

.sticky-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:90;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:var(--bone);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(25,25,23,.4);
  transform:translateY(110%);
  transition:transform .45s var(--ease);
  pointer-events:none;
}
.sticky-cta.is-visible{transform:translateY(0);pointer-events:auto;}
@media (min-width:900px){.sticky-cta{display:none;}}

.sticky-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  max-width:var(--shell);
  margin-inline:auto;
}
.sticky-text{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.sticky-text strong{font-size:.875rem;font-weight:500;color:var(--ink);}
.sticky-text span{font-size:.75rem;color:var(--muted);}
.sticky-cta .btn{flex:0 0 auto;}
.sticky-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;}
.sticky-phone[hidden]{display:none;}

/* --------------------------------------------------------------------- */
/* Reveal motion                                                          */
/* --------------------------------------------------------------------- */

/* No `will-change` here on purpose. Leaving it set permanently promotes every
   one of these to its own compositor layer, and text rasterized on a layer at a
   subpixel offset renders with a faint ghost — it reads as double-printed type.
   The animation is a plain opacity/transform pair; browsers handle it unaided. */
/* Motion differentiated by role.
   Previously one rule — opacity + translateY(26px) — ran on roughly ninety
   elements: a 4rem blockquote, a price card, a form hint, a list item. Ninety
   identical gestures is perceptually the same as none, because the eye stops
   registering a move it has already seen twice. So each kind of thing now
   moves the way that kind of thing should: text fades and holds still, objects
   settle, headings rise, rules draw. */

/* Default: body copy, hints, small print. Fades. Does not move.
   Text that slides while you are trying to read it is a website tic. */
/* Timings tightened across the board: reveals fired 54px from the bottom
   edge and ran up to 1.45s, so content read as arriving late — the page
   felt slower than it was. Roughly halved; the trigger in main.js now
   fires while elements are genuinely below the fold. */
.reveals-cut .reveal, .reveals-cut .reveal.is-in,
.reveals-cut .eyebrow::after{transition:none !important;}
.reveal{
  opacity:0;
  transition:opacity .5s var(--ease-out);
}
.reveal.is-in{opacity:1;}

/* Headings and display type rise — they are arriving, and they carry weight. */
h1.reveal, h2.reveal, h3.reveal,
.value-close.reveal, .whofor-title.reveal,
.pullquote blockquote.reveal{
  transform:translateY(30px);
  transition:opacity .55s var(--ease-out),transform .65s var(--ease-out);
}

/* Objects settle: a shorter travel plus a fractional scale, so a card reads as
   coming to rest on the page rather than sliding onto it. */
.tier.reveal, .offer.reveal, .compare-card.reveal, .member-card.reveal,
.matrix-wrap.reveal, .request-form-wrap.reveal, .testimonial.reveal,
.proof-empty.reveal, .assurance.reveal{
  transform:translateY(14px) scale(.994);
  transform-origin:center top;
  transition:opacity .55s var(--ease-out),transform .7s var(--ease-out);
}

/* Labels arrive tight and quick — they are captions, not events. */
.eyebrow.reveal, .compare-label.reveal, .step-num.reveal{
  transform:translateY(8px);
  transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);
}

h1.reveal.is-in, h2.reveal.is-in, h3.reveal.is-in,
.value-close.reveal.is-in, .whofor-title.reveal.is-in,
.pullquote blockquote.reveal.is-in,
.tier.reveal.is-in, .offer.reveal.is-in, .compare-card.reveal.is-in,
.member-card.reveal.is-in, .matrix-wrap.reveal.is-in,
.request-form-wrap.reveal.is-in, .testimonial.reveal.is-in,
.proof-empty.reveal.is-in, .assurance.reveal.is-in,
.eyebrow.reveal.is-in, .compare-label.reveal.is-in, .step-num.reveal.is-in{
  transform:none;
}

/* The masked word reveal that used to live here went with the old hero. It
   sat each word in an overflow-hidden box and lifted it out. The
   scroll-scrubbed hero splits its own headline in hero.js and animates it
   with transforms only, so nothing on this page is clipped any more and
   there are no descenders left to protect. */

/* Numbers in the cost ledger tick up as the card comes into view, so the
   reader watches the cost accumulate rather than just reading a total. */
.t{font-variant-numeric:tabular-nums;}

/* --------------------------------------------------------------------- */
/* Micro-interactions                                                     */
/* --------------------------------------------------------------------- */

.tier,.compare-card,.testimonial{
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
@media (hover:hover){
  .tier:hover,.testimonial:hover{
    transform:translateY(-4px);
    box-shadow:0 26px 50px -34px rgba(25,25,23,.5);
  }
  .offer:hover{box-shadow:0 26px 60px -40px rgba(25,25,23,.35);}
  .offer{transition:box-shadow .55s var(--ease-out);}
}

/* A mark that draws out of the label on hover. Set on the button itself, not
   on .btn-label — that span exists on exactly one element in the document
   (the form's submit), so scoping to it left all six other primary CTAs with
   no hover affordance at all. .btn is inline-flex, so ::after lands as a flex
   item after the text. */
.btn-ink::after,
.btn-bone::after{
  content:"";
  flex:0 0 auto;
  width:0;height:1px;
  margin-left:0;
  background:currentColor;
  opacity:0;
  transition:width .5s var(--ease-out),margin-left .5s var(--ease-out),opacity .5s var(--ease-out);
}
@media (hover:hover){
  .btn-ink:hover::after,
  .btn-bone:hover::after{width:16px;margin-left:12px;opacity:.75;}
}
/* The submit button already has a spinner as its trailing flex item. */
#submit-btn::after{display:none;}
.no-js .reveal{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
  .btn:hover{transform:none;}
  /* ::details-content is its own pseudo-element; the universal selector
     above does not reach it, so the FAQ kept animating for the one
     audience that asked it not to. */
  .faq-item::details-content{transition:none !important;}
}

@media print{
  .site-header,.sticky-cta,.hero-media,.about-media{display:none;}
  body{background:#fff;color:#000;}
}

/* Last-line orphans in the two places that still had them: a retainer bullet
   and a FAQ answer. Nothing moves; the browser just picks a better break. */
.tier-list li,
.notes li,
.ticks li{text-wrap:pretty;}

/* --------------------------------------------------------------------- */
/* 7b · The setup                                                         */
/*                                                                        */
/* Two columns: the copy, and one quiet line drawing of a prepared        */
/* surface. The previous version drew a chair three times, which made the */
/* equipment the subject of a section about preparation — and the folded  */
/* state read as a battery. Linen reads as hospitality; a chair reads as  */
/* a barbershop.                                                          */
/* --------------------------------------------------------------------- */

.setup-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,3.5rem);
  align-items:center;
}
@media (min-width:900px){
  .setup-inner{grid-template-columns:1.15fr .85fr;}
}
.setup-needs{
  list-style:none;
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  padding:0;
  display:grid;
  gap:.55rem;
  max-width:34ch;
}
.setup-needs li{
  position:relative;
  padding-left:1.4rem;
  color:var(--ink-2);
}
.setup-needs li::before{
  content:"";
  position:absolute;
  left:0; top:.68em;
  width:8px; height:1px;
  background:var(--accent);
}
.setup-close{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  max-width:46ch;
  color:var(--ink-2);
  text-wrap:pretty;
}
.setup-figure{
  display:grid;
  place-items:center;
  padding:clamp(1.5rem,4vw,2.5rem);
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
}
.setup-figure svg{width:100%;max-width:320px;height:auto;display:block;}
@media (prefers-reduced-motion:reduce){
  .setup-figure svg{transition:none;}
}


/* ===================================================================== */
/* 15 · Launch pass: readability, hierarchy, and the add-on row          */
/* ===================================================================== */

/* One label colour. The live --accent (the olive-gray, #5D6058) already
   renders near 6:1 on both bone and paper, so nothing here needs a
   separate text tone. */
.setup-card-label{color:var(--accent);}

/* Small type was set tight enough that the tracking closed the lines up.
   Nothing here changes a size on desktop; it changes the room each line
   has. */
.ticks li{line-height:1.62;}
.fine{line-height:1.7;}
.offer-foot-note{line-height:1.65;}
.setup-close{line-height:1.7;}
.legal-shell li{line-height:1.7;}
.faq-answer p{line-height:1.72;}

/* Membership bullets: the one block of small text on a dark ground, which
   is where a compressed line-height costs the most. */
.tier-list li{
  font-size:.938rem;
  line-height:1.7;
  color:var(--on-dark-2);
}

/* The service area line, and the label row under the price. */
.price-note,
.offer-sub{letter-spacing:.02em;}

/* Section rhythm. Eyebrow, headline and lede were each spaced by their own
   rule, so the gap between them varied section to section. One scale. */
.section-head .eyebrow{margin-bottom:1.15rem;}
.section-head h2{margin-bottom:1.1rem;}
.section-head .section-lede{margin-top:0;}

/* ---- the $125 add-on row ---------------------------------------------- */
/* It sits on the same card as the $500, divided by a hairline, so the two
   numbers are read together. A separate box would have implied a separate
   product. */
.offer-addon{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem 1.5rem;
  padding-bottom:clamp(1.35rem,3vw,1.75rem);
  margin-bottom:clamp(1.75rem,3.5vw,2.35rem);
  border-bottom:1px solid var(--line);
}
.addon-copy{max-width:46ch;}
.addon-name{
  margin:0 0 .3rem;
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.3;
  color:var(--ink);
}
.addon-note{
  margin:0;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--muted);
}
.addon-price{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem);
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.addon-plus{color:var(--muted);margin-right:.06em;}

/* ---- the setup card ---------------------------------------------------- */
/* Replaces a line drawing that read as an unfinished wireframe. This is the
   same information the lede used to carry as prose, made scannable. No
   photograph is invented to fill the column. */
.setup-card{
  display:grid;
  gap:clamp(1.5rem,3vw,2rem);
  padding:clamp(1.5rem,4vw,2.25rem);
  background:var(--paper);
  border:1px solid var(--line);
}
.setup-card-part + .setup-card-part{
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.setup-card-label{
  margin:0 0 1rem;
  font-size:.688rem;
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--accent);
}
.setup-card-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6rem;
  font-size:.938rem;
  line-height:1.6;
  color:var(--ink-2);
}
.setup-card-list li{position:relative;padding-left:1.4rem;}
.setup-card-list li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:8px; height:1px;
  background:var(--accent);
}
@media (min-width:900px){
  .setup-card-part + .setup-card-part{padding-top:clamp(1.5rem,3vw,2rem);}
}

/* ---- the add-on checkbox ---------------------------------------------- */
/* A checkbox, not another select, because it composes with the appointment
   rather than replacing it. The whole row is the hit target. */
.check-row{
  display:flex !important;
  align-items:flex-start;
  gap:.7rem;
  margin:0 0 .5rem !important;
  padding:.85rem .95rem;
  border:1px solid var(--line-strong);
  border-radius:2px;
  cursor:pointer;
  font-size:.938rem !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  line-height:1.5;
  color:var(--ink) !important;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.check-row:hover{border-color:var(--accent);background:rgba(122,106,78,.045);}
.check-row:focus-within{border-color:var(--accent);}
/* .field input sets appearance:none for the text fields, which also
   strips a checkbox of its tick and makes accent-color do nothing. So
   the tick is drawn here, the same way the select arrow is. */
.check-row input[type="checkbox"]{
  flex:0 0 auto;
  width:1.35rem;
  height:1.35rem;
  min-width:1.35rem;
  margin:.12rem 0 0;
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background-color:var(--paper);
  background-repeat:no-repeat;
  background-position:center;
  background-size:.82rem auto;
  cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.check-row input[type="checkbox"]:checked{
  background-color:var(--ink);
  border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.6l4.2 4.2L13 1.2' fill='none' stroke='%23F4F1EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* The inset underline the text fields use for focus reads as damage on a
   17px square. A ring is the right shape here. */
.check-row input[type="checkbox"]:focus,
.check-row input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:none;
}
/* The whole row is the target, so it should look like one. */
.check-row:active{background:rgba(93,96,88,.07);}
.check-row:has(input:checked){
  border-color:var(--ink);
  background:rgba(93,96,88,.05);
}
.check-row strong{font-weight:500;white-space:nowrap;}
.field-note{
  margin:0;
  font-size:.75rem;
  line-height:1.6;
  color:var(--muted);
}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width:560px){
  /* Serif headlines break badly at narrow measures; balance stops the
     one-word last line. */
  .section-head h2,
  .offer-name,
  .addon-name{text-wrap:balance;}
  /* Neither number should ever be the thing that wraps. */
  .price,
  .addon-price,
  .tier-price{white-space:nowrap;}
  .offer-addon{gap:.5rem;}
  .addon-price{font-size:1.45rem;}
  /* A button that wraps to two lines reads as a mistake. */
  .btn{min-height:48px;}
  .offer-foot .btn,
  .member-foot .btn{width:100%;justify-content:center;}
}

/* Email links, unmistakably links. */
.request-alt a,
.footer-legal a,
.success-foot a{text-decoration:underline;text-decoration-thickness:1px;}

/* The add-on and The Assurance share a column, so the label above the
   add-on carries the same weight as INCLUDED opposite it. */
.offer-col .offer-addon .addon-copy{flex:1 1 15rem;}
@media (max-width:859px){
  .offer-addon{margin-bottom:1.5rem;}
}

/* The sticky bar at narrow widths ------------------------------------- */
/* .sticky-actions was flex:0 0 auto and .sticky-text had min-width:0, so
   the text block was the only thing that could shrink and it did: measured
   0 to 28px wide at 320 to 414px, wrapping "$500 / At your address" onto
   three lines that overflowed under the buttons. The price is the anchor
   here, so it is the part that must not be crushed. */
@media (max-width:559px){
  .sticky-text{flex:0 0 auto;min-width:auto;}
  /* "$500" alone carries it; the location is stated in the hero, the offer
     card, and the FAQ. */
  .sticky-text span{display:none;}
  .sticky-actions{flex:1 1 auto;justify-content:flex-end;min-width:0;}
  .sticky-cta .btn-ink{flex:0 1 auto;min-width:0;}
  .sticky-inner{gap:.75rem;}
}

/* Email is still offered after a request, one step down from call and
   text, because that is the order he actually answers in. */
.success-foot--alt{margin-top:.4rem;font-size:.8125rem;opacity:.75;}

/* ===================================================================== */
/* 17 - Final pass: mobile legibility                                     */
/* ===================================================================== */

/* The longest option overran the chevron at 390px. A native select cannot
   ellipsize, so the control gives back a fraction of its type on the
   narrowest screens rather than truncating a price. */
@media (max-width:430px){
  .field select{font-size:.95rem;padding-right:2.25rem;}
}

/* Body copy on a phone. Nothing here changes desktop: these are the sizes
   that measured under 15px on a 375px screen, where a serif at 14px on a
   warm ground is the first thing to go soft. */
@media (max-width:560px){
  .ticks li{font-size:.975rem;line-height:1.65;}
  .setup-card-list{font-size:.975rem;}
  .tier-list li{font-size:.975rem;line-height:1.72;}
  .step-body p{line-height:1.68;}
  .faq-answer p{line-height:1.75;}
  .fine,.field-hint,.field-note{font-size:.8125rem;line-height:1.65;}
}

/* ---- membership on a phone ---------------------------------------- */
/* The label, the name and the price never fold: that is the ladder he
   wants readable at a glance. Only the detail does. */
.tier-detail{margin:0;}
/* Deliberately NOT display:contents: with it the body has no box of its own
   and the content escaped the closed state entirely, so the fold folded
   nothing. A plain block wrapper is what a details panel needs. */
.tier-detail-body{display:block;}
.tier-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
  margin-top:.35rem;
  border-top:1px solid rgb(241 236 225 / .18);
  cursor:pointer;
  list-style:none;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--on-dark-2);
  transition:color .25s var(--ease);
}
.tier-summary::-webkit-details-marker{display:none;}
.tier-summary:hover{color:var(--on-dark);}
.tier-summary .chev{
  width:9px;height:9px;flex:0 0 auto;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.tier-detail[open] > .tier-summary .chev{transform:rotate(-135deg);}
.tier-detail[open] > .tier-summary{color:var(--on-dark);}

/* Above the three-across breakpoint there is no fold at all: the summary
   is not rendered, so nothing can be left closed by a stale script. */
@media (min-width:980px){
  .tier-summary{display:none;}
  /* Deliberately NOT display:contents: with it the body has no box of its own
   and the content escaped the closed state entirely, so the fold folded
   nothing. A plain block wrapper is what a details panel needs. */
.tier-detail-body{display:block;}
}

/* ---- the founder signature, at the close of the three steps -------- */
/* A rule, a small round portrait and one sentence. It sits on the dark
   experience ground, so it borrows that section's type colours rather
   than introducing any of its own. */
.signature{
  display:flex;
  align-items:center;
  gap:clamp(.9rem,2.5vw,1.25rem);
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line-dark);
}
.signature-portrait{
  flex:0 0 auto;
  width:clamp(44px,10vw,58px);
  height:clamp(44px,10vw,58px);
  border-radius:50%;
  object-fit:cover;
  object-position:50% 22%;
  filter:grayscale(1) contrast(1.03);
}
.signature-copy{
  margin:0;
  max-width:52ch;
  font-size:.9375rem;
  line-height:1.62;
  color:var(--on-dark-2);
}
.signature-copy strong{color:var(--on-dark);font-weight:400;}
@media (max-width:560px){
  .signature{gap:.9rem;}
  .signature-copy{font-size:.9rem;}
}

/* ---- the setup section's second paragraph -------------------------- */
/* One step down from the lede and one step up from body copy: it is the
   argument of the section, not its opening. */
.setup-note{
  margin:clamp(1.15rem,2.5vw,1.5rem) 0 0;
  max-width:52ch;
  font-size:1rem;
  line-height:1.72;
  color:var(--ink-2);
}
@media (max-width:560px){
  .setup-note{font-size:.9375rem;line-height:1.7;}
}

/* ---- the direct line under the hero ------------------------------- */
/* It sits at the far end of the strip on a wide screen, where the trust
   line already sits, and moves to its own line on a phone so the number
   is a clean tap rather than the tail of a sentence. */
/* Everything else in this strip is a label. This is the one thing you can
   act on, so it stops wearing the label treatment: sentence case instead of
   tracked uppercase, and a size you can read at arm's length. It was 11px
   uppercase, which made the only tappable thing under the hero the quietest
   thing under the hero. */
.areabar-direct{
  margin-left:auto;
  color:var(--ink-2);
  white-space:nowrap;
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none;
}
.areabar-direct a{font-weight:500;}
.areabar-direct a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.areabar-direct a:hover{color:var(--accent);}
/* A real click target on a mouse too: it was 14px tall. */
/* Its own row at every width, not the tail of the neighbourhood list.
   It was findable but never obvious, because nothing is obvious when it
   sits third on a crowded line. Isolation does the work that size would
   otherwise have to do, and size is what would make it compete with the
   Request button. */
@media (min-width:769px){
  .areabar-direct{
    margin-left:0;
    flex:1 0 100%;
    padding-top:.7rem;
    margin-top:.15rem;
    border-top:1px solid var(--line);
  }
  .areabar-direct a{display:inline-block;padding:.35rem 0;}
}
@media (max-width:768px){
  .areabar-direct{
    margin-left:0;
    flex:1 0 100%;
    padding-top:.55rem;
    border-top:1px solid var(--line);
  }
  /* a tap target, not a line of small caps */
  .areabar-direct a{display:inline-block;padding:.85rem 0;}
}