/* GRO Partners. ORDER 21 token system and component set.
   Tokens first, components second, page specifics last.
   No page-wide gradient: contrast is certified per surface, and a moving
   background makes every ratio position dependent. */

/* ------------------------------------------------------------------ 1 TOKENS */
:root{
  /* 1.1 colour. Measured ratios in specs/ORDER-21-LAYOUT.md section 1.1. */
  --paper:#F5FAF6; --dew:#E9F5EE; --mint:#CFE9DA;
  --leaf:#1F7A4D; --forest:#0B3D2E; --ink:#0E2A1F;
  /* ORDER 25 section 15. Two measured additions, for the mark only. The first
     ramp tried mint, leaf, forest: mint on paper is 1.22, so the first bar was
     invisible and a three step mark read as two. */
  --leaf-deep:#14573A;   /* 8.10 on paper */
  --leaf-mid:#5FB98B;    /* 5.11 on forest */
  --mark-1:var(--leaf); --mark-2:var(--leaf-deep); --mark-3:var(--forest);

  /* 1.3 space. 4px base. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px; --s24:96px; --s32:128px;
  --band-pad:clamp(40px,9vw,96px);
  --gutter:20px;
  --container:1120px;
  --prose:34em;

  /* 1.4 shape. Two radii, not five. */
  --r-control:6px; --r-card:12px;

  /* surface defaults, overridden per band */
  --bg:var(--paper); --fg:var(--ink); --link:var(--leaf); --focus:var(--forest);
}
@media (min-width:700px){ :root{ --gutter:32px; } }

/* 1.2 type */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Figtree,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:700px){ body{font-size:1.125rem} }
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,"Helvetica Neue",Arial,sans-serif;
  font-weight:800; margin:0 0 var(--s4); text-wrap:balance}
h1{font-size:clamp(1.9rem,9vw,3.4rem); line-height:1.05; letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,5.5vw,2rem); line-height:1.15; letter-spacing:-.01em}
h3{font-size:clamp(1.15rem,3.5vw,1.25rem); line-height:1.25}
p{margin:0 0 var(--s4)}
small,.small,.fine{font-size:.875rem; line-height:1.4}      /* 14px floor */
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:2px;
}
img{max-width:100%; height:auto}

/* ------------------------------------------------- 2 BANDS AND SURFACES */
.band{background:var(--bg); color:var(--fg); padding:var(--band-pad) 0}
.band[data-surface="paper"] {--bg:var(--paper); --fg:var(--ink);   --link:var(--leaf);  --focus:var(--forest)}
.band[data-surface="dew"]   {--bg:var(--dew);   --fg:var(--ink);   --link:var(--forest);--focus:var(--forest)}
.band[data-surface="mint"]  {--bg:var(--mint);  --fg:var(--ink);   --link:var(--forest);--focus:var(--forest)}
.band[data-surface="leaf"]  {--bg:var(--leaf);  --fg:var(--paper); --link:var(--paper); --focus:var(--paper)}
.band[data-surface="forest"]{--bg:var(--forest);--fg:var(--paper); --link:var(--paper); --focus:var(--paper)}
.band--tight{padding:var(--s10) 0}
.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.prose{max-width:var(--prose)}                      /* 62 to 68 characters */
/* A prose band keeps the page's left edge and caps its children, rather than
   centring itself. Centring one band while every other is left aligned reads
   as a mistake, not as emphasis. */
.wrap.prose{max-width:var(--container)}
.wrap.prose > *{max-width:var(--prose)}
/* Everything that is a line of prose gets the cap, wherever it sits. A table
   cell cannot take a max-width in table layout, so its text carries an inline
   block instead. */
.fine,.frozen,.stage-line,.stage-note,.bubble p,.msg p,.exp-body p,
.ledger-table caption,.registered p,.price-terms,.lcard p,.fitlist{max-width:var(--prose)}
.linecap{display:inline-block; max-width:var(--prose)}
.band > .wrap > h2{margin-bottom:var(--s6)}
.eyebrow{font-size:.9375rem; line-height:1.4; font-weight:700; letter-spacing:.01em;
  color:var(--leaf); margin:0 0 var(--s3)}
.band[data-surface="dew"] .eyebrow,
.band[data-surface="mint"] .eyebrow{color:var(--forest)}
.band[data-surface="forest"] .eyebrow{color:var(--mint)}          /* 9.5 */
.band[data-surface="leaf"] .eyebrow{color:var(--paper)}          /* 5.0; mint here is 4.1 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------- 5.7 CONTROLS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s6);
  font:inherit; font-weight:700; text-decoration:none;
  border-radius:var(--r-control); border:2px solid transparent; cursor:pointer;
}
.btn--primary{background:var(--leaf); color:var(--paper)}       /* 5.0 */
.btn--primary:hover{background:var(--forest)}                   /* 11.6 */
.band[data-surface="forest"] .btn--primary,
.band[data-surface="leaf"] .btn--primary{background:var(--paper); color:var(--forest)}
.band[data-surface="forest"] .btn--primary:hover,
.band[data-surface="leaf"] .btn--primary:hover{background:var(--mint); color:var(--forest)}
.btn--ghost{border-color:currentColor; color:var(--fg); background:transparent}
@media (max-width:399px){ .btn{display:flex; width:100%} }
.cta-row{margin:var(--s6) 0 var(--s3)}
/* R4. The hero's skip link, directly under the primary button. A plain link on
   purpose: a second button beside the first makes two primaries, and the gate stops
   being soft the moment booking looks like the equal choice. */
.hero-skip{margin:0 0 var(--s4)}

/* ------------------------------------------------------------ 5.4 NAV */
.sitenav{position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid transparent}
.sitenav.is-scrolled{border-bottom-color:rgba(14,42,31,.12)}
.sitenav .wrap{display:flex; align-items:center; gap:var(--s2); min-height:56px}
@media (min-width:480px){ .sitenav .wrap{gap:var(--s4)} }
.wordmark{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:1.0625rem; color:var(--forest); text-decoration:none; margin-right:auto;
  white-space:nowrap; display:inline-flex; align-items:center; gap:var(--s2)}
.mark{flex:none; display:block}
/* On forest the light ramp fails: leaf is 2.29 there. The dark surfaces get
   their own, measured the same way. */
.sitefooter{--mark-1:var(--leaf-mid); --mark-2:var(--mint); --mark-3:var(--paper)}                    /* wrapping it doubled the 56px nav */
@media (min-width:480px){ .wordmark{font-size:1.125rem} }
.nav-links{display:none; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--forest); text-decoration:none; font-weight:600}
.nav-links a:hover{text-decoration:underline}
.menu-btn{display:inline-flex; align-items:center; min-height:48px; padding:0 var(--s2);
  white-space:nowrap;
  font-weight:700; color:var(--forest); text-decoration:none; background:none;
  border:0; font-size:inherit; font-family:inherit; cursor:pointer}
.nav-book{min-height:44px; padding:0 var(--s3); white-space:nowrap}
@media (min-width:480px){ .nav-book{padding:0 var(--s4)} }
@media (min-width:900px){
  .menu-btn{display:none}
  .nav-links{display:flex; gap:var(--s6); margin-right:var(--s6)}
}
/* full screen panel, only ever opened by script; markup falls back to an anchor */
.navpanel{position:fixed; inset:0; z-index:60; background:var(--paper);
  display:flex; flex-direction:column; padding:var(--s5)}
.navpanel[hidden]{display:none}
.navpanel-top{display:flex; justify-content:flex-end}
.navpanel ul{list-style:none; margin:var(--s6) 0 0; padding:0}
.navpanel li + li{border-top:1px solid rgba(14,42,31,.12)}
.navpanel a{display:flex; align-items:center; min-height:56px; font-size:1.25rem;
  font-weight:700; color:var(--forest); text-decoration:none}
.navpanel-close{min-height:48px; min-width:48px; font-size:1.5rem; line-height:1;
  background:none; border:0; color:var(--forest); cursor:pointer}
body.is-locked{overflow:hidden}

/* --------------------------------------------------------------- HERO */
.hero{padding-top:var(--s10)}
.hero h1{margin-bottom:var(--s4)}
.hero .lede{font-size:1.125rem; font-weight:600; max-width:var(--prose)}
@media (min-width:700px){ .hero .lede{font-size:1.25rem} }
.hero p{max-width:var(--prose)}
.hero-grid{display:grid; gap:var(--s10)}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:var(--s16); align-items:start}
}
/* the ticket never sits above the H1 and never beside it below 900px */
.hero-visual{display:grid; gap:var(--s4)}

.ticket{background:var(--paper); border:1px solid rgba(14,42,31,.18);
  border-radius:var(--r-card); padding:var(--s5); position:relative}
.band[data-surface="dew"] .ticket{background:var(--paper)}
.ticket-head{display:flex; justify-content:space-between; gap:var(--s3);
  font-weight:700; margin-bottom:var(--s4)}
.ticket dl{margin:0; display:grid; gap:var(--s2)}
.ticket dl > div{display:flex; justify-content:space-between; gap:var(--s4);
  border-top:1px solid rgba(14,42,31,.10); padding-top:var(--s2)}
.ticket dt{color:var(--forest); font-weight:600}
.ticket dd{margin:0; text-align:right}
.stamp{display:inline-block; font-size:.875rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--forest); background:var(--mint);
  border-radius:var(--r-control); padding:2px var(--s2); margin-bottom:var(--s3)}
.bubble{background:var(--mint); color:var(--ink); border-radius:var(--r-card);
  padding:var(--s5)}
.bubble p{margin:0 0 var(--s2)}
.bubble .fine{color:var(--forest)}

/* ------------------------------------------------------------ 5 STEPS */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--s6)}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr); gap:var(--s8)} }
.steps--five{gap:var(--s6)}
@media (min-width:760px){ .steps--five{grid-template-columns:repeat(5,1fr)} }
.step-num{display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background:var(--forest);
  color:var(--paper); font-weight:800; margin-bottom:var(--s3)}
.steps h3{margin-bottom:var(--s2)}
.steps p{margin:0}

/* --------------------------------------------------------- 5.1 LADDER */
/* Pure CSS rise: growing indent, growing marker, band colour. No observers,
   no .js guard, nothing initialised invisible. It cannot fail because it
   never depended on script. */
.ladder{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4)}
/* SCOPED TO THE LADDER, and this cost an hour. These two selectors were bare
   .stage and bare .stage-name, left over from the ORDER 21 ladder on /tiers and
   /how, both retired by ORDER 24 and now reachable only through a redirect. They
   still matched ORDER 31's new <details class="stage">: the bare .stage made every
   accordion row a two column grid, which made each <summary> a grid item sized by
   its track, so three of the five rows were 207 to 296px wide inside a 350px list
   and the chevron landed wherever that row's subtitle happened to stop. Dead CSS
   with a generic name is a landmine. */
.ladder .stage{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4);
  align-items:start}
.stage-mark{display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; font-weight:800; font-size:1rem}
.stage-1 .stage-mark{background:var(--forest); color:var(--paper)}   /* 11.6 */
.stage-2 .stage-mark{background:var(--leaf);   color:var(--paper)}   /*  5.0 */
.stage-3 .stage-mark{background:var(--mint);   color:var(--ink)}     /* 11.9 */
.stage-4 .stage-mark{background:var(--dew);    color:var(--ink)}     /* 13.7 */
/* The marker fill ramps forest, leaf, mint, dew to carry the climb. Two of
   those are nearly the colour of the surface they land on: stage 4's dew
   circle on Home's dew band was a 1.0 ratio, invisible, and Lighthouse scored
   the page 100 anyway. A screenshot caught it. So the two light markers keep
   their fill and get a forest ring, which is 10.9 on dew and 9.5 on mint, well
   past the 3.0 a non-text control needs. */
.ladder--compact .stage-3 .stage-mark,
.ladder--compact .stage-4 .stage-mark{box-shadow:inset 0 0 0 2px var(--forest)}
/* On the full ladder each stage sits on a band of its own colour, so the ramp
   cancels exactly: forest on forest, leaf on leaf, mint on mint, dew on dew,
   all four 1.0. There the marker inverts against its own band instead, which
   is the band's own certified pair read backwards. */
.stageband .stage-mark{background:var(--fg); color:var(--bg); box-shadow:none}
.stage-when{font-size:.875rem; line-height:1.4; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--forest); margin:0 0 var(--s1)}
.ladder .stage-name{margin:0 0 var(--s2)}
.stage-line{margin:0; max-width:var(--prose)}
.stage-note{margin:var(--s3) 0 0; max-width:var(--prose)}
/* the rise: each stage steps further in and its marker grows */
@media (min-width:760px){
  .ladder--compact .stage-2{margin-left:var(--s6)}
  .ladder--compact .stage-3{margin-left:var(--s10)}
  .ladder--compact .stage-4{margin-left:var(--s14)}
  .stage-2 .stage-mark{width:40px;height:40px}
  .stage-3 .stage-mark{width:44px;height:44px}
  .stage-4 .stage-mark{width:48px;height:48px;font-size:1.15rem}
}
.ladder--compact .stage{padding:var(--s5) 0; border-top:1px solid rgba(14,42,31,.12)}
.ladder--compact .stage:first-child{border-top:0}
.band[data-surface="forest"] .ladder--compact .stage,
.band[data-surface="leaf"] .ladder--compact .stage{border-top-color:rgba(245,250,246,.22)}
/* full variant: four full bleed bands, lighter as they rise */
.ladder--full{display:block; gap:0}
.ladder--full .stage{padding:var(--band-pad) 0; border:0; margin:0}
.stageband[data-surface="forest"] .stage-when{color:var(--mint)}
.stageband[data-surface="leaf"] .stage-when{color:var(--paper)}   /* mint on leaf is 4.1, fails */

/* ------------------------------------------------------ 5.2 EXPANDERS */
.exp{margin-top:var(--s4); max-width:var(--prose)}
.exp > summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; min-height:48px; padding:0 var(--s4);
  background:var(--paper); color:var(--forest);
  border:1px solid rgba(14,42,31,.20); border-radius:var(--r-control);
  font-weight:700; cursor:pointer; list-style:none;
}
.exp > summary::-webkit-details-marker{display:none}   /* Safari draws two */
.exp > summary::marker{content:""}
.band[data-surface="forest"] .exp > summary,
.band[data-surface="leaf"] .exp > summary{background:transparent; color:var(--paper);
  border-color:rgba(245,250,246,.5)}
.exp .chev{flex:none; transition:transform .18s ease}
.exp[open] .chev{transform:rotate(180deg)}
.exp-body{padding:var(--s4) var(--s4) 0}
.exp-body > div + div{margin-top:var(--s4)}
.exp-body b{display:block}
.exp-body p{margin:0}

/* --------------------------------------------------------- 5.3 LEDGER */
.ledger-cards{display:grid; gap:var(--s4)}
.lcard{background:var(--paper); border:1px solid rgba(14,42,31,.18);
  border-radius:var(--r-card); padding:var(--s4)}
.lcard h3{margin:0 0 var(--s3)}
.lcard dl{margin:0; display:grid; gap:var(--s2)}
.lcard dl > div{display:flex; justify-content:space-between; gap:var(--s4)}
.lcard dt{color:var(--forest); font-weight:600}
.lcard dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.lcard--totals{background:var(--mint); border-color:transparent}
.ledger-table{display:none}
@media (min-width:700px){
  .ledger-cards{display:none}
  .ledger-table{display:table; width:100%; border-collapse:collapse;
    background:var(--paper); border-radius:var(--r-card); overflow:hidden}
  .ledger-table caption{text-align:left; font-weight:700; padding:var(--s4);
    color:var(--forest)}
  .ledger-table th,.ledger-table td{padding:var(--s3) var(--s4); text-align:left;
    border-bottom:1px solid rgba(14,42,31,.12)}
  .ledger-table thead th{font-size:.875rem; line-height:1.4; text-transform:uppercase;
    letter-spacing:.04em; color:var(--forest); background:var(--mint)}
  .ledger-table .num{text-align:right; font-variant-numeric:tabular-nums}
  .ledger-table tfoot td{font-weight:700; background:var(--dew)}
}

/* ---------------------------------------------------------- 5 PROOF */
.proof{display:grid; gap:var(--s8)}
@media (min-width:900px){ .proof--two{grid-template-columns:1fr 1fr; gap:var(--s16)} }
.proof img{border-radius:var(--r-card); display:block; margin-bottom:var(--s4)}
.proof h3{margin-bottom:var(--s2)}
.proof p{max-width:var(--prose)}

/* ---------------------------------------------------------- 8 PRICE */
/* Heading size, but it is a sentence, not a heading. ORDER 21's 1.15 is right
   for a two line h2 and wrong for this, which runs to four lines and a number. */
.price-answer{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:clamp(1.4rem,5.5vw,2rem); line-height:1.3; max-width:20ch;
  margin:0 0 var(--s6)}
.price-answer .cents{font-size:clamp(2.2rem,11vw,4rem); display:block;
  line-height:1; letter-spacing:-.02em}
.price-terms{list-style:none; margin:0 0 var(--s6); padding:0; display:grid;
  gap:var(--s3); max-width:var(--prose)}
.price-terms li{padding-left:var(--s6); position:relative}
.price-terms li::before{content:""; position:absolute; left:0; top:.62em;
  width:10px; height:2px; background:currentColor}

/* --------------------------------------------------- 5.5 CALENDAR */
/* THE BOOKING CONTAINER, AND THE BUG THAT KILLED IT.
   ORDER 25 put the fallback and the embed in ONE grid cell so the reserved
   space would hold something usable. Visually that worked: the embed was empty
   and transparent, so the fallback showed through. But the embed comes later
   in the DOM, so it painted on top and swallowed every tap. Both booking
   controls sat under an empty div, and elementFromPoint on each one returned
   cal-embed rather than the button. That is the owner's "two buttons that do
   nothing".
   No stacking any more. Normal flow, an empty embed takes no space and catches
   no clicks, and the two controls that matter live OUTSIDE this box so nothing
   the third party does can cover them.
   Heights are measured off the live embed, not guessed: 1064px at 390 and
   569px at 1280 (ORDER 21 5.5). They are reserved on the wrap so the page does
   not jump when the embed mounts. */
.calwrap{border:1px solid rgba(14,42,31,.18); border-radius:var(--r-card);
  padding:var(--s5); background:var(--paper); display:block;
  min-height:var(--cal-min,1064px)}
@media (min-width:700px){ .calwrap{min-height:var(--cal-min-wide,569px)} }
.calwrap-fallback{display:grid; gap:var(--s3); justify-items:start;
  align-content:start}
.calwrap.is-mounted .calwrap-fallback{display:none}
.cal-embed{min-width:0}
.cal-embed:empty{display:none; pointer-events:none}
.calwrap.is-mounted .cal-embed{min-height:1064px}
@media (min-width:700px){ .calwrap.is-mounted .cal-embed{min-height:569px} }
.phone-fallback{font-weight:600; max-width:var(--prose)}

/* 5.6 book bar: not shipped. See tools/site_build.py bookbar() for the
   inspection that decided it. The sticky nav already pins Book a call to
   every screen, so a second fixed control was duplication that covered
   content. */

/* --------------------------------------------------------- 5.8 FOOTER */
.sitefooter{background:var(--forest); color:var(--paper); padding:var(--band-pad) 0 var(--s10);
  --link:var(--paper); --focus:var(--paper)}
.sitefooter a{color:var(--paper)}
.footer-brand{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:1.25rem; color:var(--paper); text-decoration:none;
  display:inline-flex; align-items:center; gap:var(--s3)}
.footer-brand .mark{width:24px; height:24px}
.footer-groups{display:grid; gap:var(--s8); margin-top:var(--s8)}
@media (min-width:700px){ .footer-groups{grid-template-columns:1fr 1fr 1fr} }
.footer-groups h2{font-size:.875rem; line-height:1.4; text-transform:uppercase;
  letter-spacing:.06em; color:var(--mint); margin:0 0 var(--s3)}
.footer-groups ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.footer-social{list-style:none; margin:var(--s8) 0 0; padding:0; display:flex; gap:var(--s2)}   /* queue 530: one row, monochrome */
.footer-social a{display:inline-flex; padding:10px; color:var(--paper)}                               /* 24px icon, 44px tap target */
.registered{margin-top:var(--s10); padding-top:var(--s6);
  border-top:1px solid rgba(245,250,246,.25); font-size:.875rem; line-height:1.4}
.registered p{margin:0 0 var(--s2)}

/* --------------------------------------------------------- 5.7 MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .bookbar{transition:none}
}

/* ------------------------------------------------- LEGACY: THE /legal PAGES */
/* The three /legal pages are protected content and this pass does not rewrite
   them, so they still carry the pre-component class names. Without these rules
   they would render with an unstyled nav and footer, which is exactly the
   defect the owner read on live /tiers: classes with no rules at all. The
   pages are untouched; only the stylesheet knows about them. */
.site-nav{position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid rgba(14,42,31,.12)}
.nav-inner{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:var(--s3); min-height:56px}
.nav-inner .wordmark{margin-right:auto}
.menu-toggle{position:absolute; opacity:0; width:1px; height:1px}
.menu-label{order:1; display:inline-flex; align-items:center; min-height:48px;
  padding:0 var(--s2); color:var(--forest); font-weight:700; cursor:pointer;
  white-space:nowrap}
.menu-toggle:focus-visible + .menu-label{outline:3px solid var(--forest); outline-offset:2px}
.menu-toggle:checked ~ .nav-links{display:flex; flex-direction:column;
  position:absolute; left:0; right:0; top:56px; background:var(--paper);
  padding:var(--s4) var(--gutter); gap:var(--s2);
  border-bottom:1px solid rgba(14,42,31,.12)}
.btn-book{order:2; display:inline-flex; align-items:center; min-height:44px;
  padding:var(--s3); background:var(--leaf); color:var(--paper); font-weight:700;
  text-decoration:none; border-radius:var(--r-control); white-space:nowrap}
.btn-book:hover{background:var(--forest)}
@media (min-width:900px){ .menu-label{display:none} .btn-book{padding:var(--s3) var(--s4)} }

.legal{display:block; padding:var(--band-pad) 0}
.legal > .wrap,.legal > .section > .wrap{max-width:var(--container)}
.legal .narrow,.legal p,.legal li,.legal h2 + p{max-width:var(--prose)}
.legal .wrap{margin:0 auto; padding:0 var(--gutter)}
.legal .section{padding:var(--s10) 0 0; border-top:1px solid rgba(14,42,31,.12);
  margin-top:var(--s10)}
.legal .updated{font-size:.875rem; line-height:1.4; color:var(--forest)}
.legal .box{background:var(--dew); border-radius:var(--r-card); padding:var(--s5);
  margin:var(--s6) 0; max-width:var(--prose)}
.legal .bignum{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:clamp(1.4rem,5.5vw,2rem); line-height:1.3; margin:0 0 var(--s3)}
.legal .keyword{font-weight:700; color:var(--forest)}
.legal .convo{margin:var(--s6) 0; max-width:var(--prose)}
.legal .lbl{font-size:.875rem; line-height:1.4; font-weight:700; color:var(--forest);
  margin:0 0 var(--s3)}
.legal .convo-inner{display:grid; gap:var(--s3)}
.legal .cm{border-radius:var(--r-card); padding:var(--s4); max-width:90%}
.legal .cm p{margin:0}
.legal .cm.them{background:var(--mint); color:var(--ink); justify-self:start}
.legal .cm.us{background:var(--forest); color:var(--paper); justify-self:end}
.legal .cm .who{display:block; font-size:.875rem; line-height:1.4; font-weight:700;
  margin-bottom:var(--s1)}
.legal .cm.us .who{color:var(--mint)}
.legal .cm.them .who{color:var(--forest)}

.site-footer{background:var(--forest); color:var(--paper);
  padding:var(--band-pad) 0 var(--s10); --link:var(--paper); --focus:var(--paper)}
.site-footer a{color:var(--paper)}
.foot-grid{display:grid; gap:var(--s8)}
@media (min-width:700px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} }
.wordmark-foot{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:1.25rem; margin:0 0 var(--s2)}
.tagline{color:var(--mint)}
.foot-links{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}

/* ------------------------------------------- BLOCKS THE PAGES ACTUALLY USE */
/* Found by the orphan-class scan, not by looking: a class in the markup with
   no rule in the stylesheet is how /tiers shipped unstyled last time. */
.hero-copy{min-width:0}
.stage-body{min-width:0}

/* /how, "who it's for": two short lists, side by side at 700px+ */
.fit-grid{display:grid; gap:var(--s8)}
@media (min-width:700px){ .fit-grid{grid-template-columns:1fr 1fr; gap:var(--s16)} }
.fitlist{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.fitlist li{padding-left:var(--s6); position:relative}
.fitlist li::before{content:""; position:absolute; left:0; top:.62em;
  width:10px; height:2px; background:var(--forest)}

/* /how, the seven day rule alone in its band at heading size */
.ledger-rule{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:clamp(1.4rem,5.5vw,2rem); line-height:1.3; margin:0; max-width:var(--prose)}

/* /tiers, the 14-day promise under stage 1 */
.promise{margin-top:var(--s6); font-size:1.0625rem}
@media (min-width:700px){ .promise{font-size:1.125rem} }

/* /book, "what this call is" */
.plain{list-style:none; margin:0 0 var(--s6); padding:0; display:grid; gap:var(--s5);
  max-width:var(--prose)}
.plain li{padding-left:var(--s6); position:relative}
.plain li::before{content:""; position:absolute; left:0; top:.62em;
  width:10px; height:2px; background:var(--forest)}
.plain strong{display:block}
/* -------------------------------------------------- THE SIX AREAS */
/* A numbered sequence, not six equal cards. The order is part of the
   argument: operations first, because that is the order the work runs in,
   and the template says most of what we find sits in the first two. */
.areas{list-style:none; margin:0; padding:0; display:grid; gap:var(--s8)}
@media (min-width:900px){ .areas{grid-template-columns:1fr 1fr; gap:var(--s10) var(--s16)} }
.area{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4);
  align-items:start}
.area-n{display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; font-weight:800;
  background:var(--forest); color:var(--paper)}
.band[data-surface="forest"] .area-n{background:var(--paper); color:var(--forest)}
.area h3{margin:0 0 var(--s2)}
.area p{margin:0; max-width:var(--prose)}

/* Home lists the six by name. The bodies live on /what-we-find, whole. */
.area-names{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
@media (min-width:600px){ .area-names{grid-template-columns:1fr 1fr; gap:var(--s4) var(--s8)} }
.area-names li{display:flex; align-items:center; gap:var(--s4);
  font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:700;
  font-size:1.15rem; border-top:1px solid rgba(14,42,31,.12); padding-top:var(--s3)}
.area-names .area-n{flex:none; width:32px; height:32px; font-size:.9375rem}

/* Section 6's heading is two weights on one line and the contrast IS the
   argument. It was set with <strong> inside an h2 that is already 800, asking
   for 900, which is not a loaded weight: it clamped back to 800 and the two
   halves rendered identical. The line is 400 now so the emphasis is real. */
h2[data-approved="teach_heading"]{font-weight:400}
h2[data-approved="teach_heading"] strong{font-weight:800}
h2[data-approved="teach_heading"] em{font-style:italic}

/* ----------------------------------------------------- THE FIVE STAGES */
/* ORDER 31 v3. Five collapsed rows ARE the scan, so the separate glance strip
   from ORDER 27 is gone: two scans was one too many, and five open stages ran
   about a thousand pixels each at 390.

   Native <details>. Nothing here needs script to open, and the chevron is a
   CSS pseudo element rather than an icon file. The default marker is removed
   in both engines: ::-webkit-details-marker for WebKit, list-style on the
   summary for everything else. */
/* The one-screen requirement is the section's whole vertical rhythm, not just the
   rows: at 390 the heading, the approved lede, five rows, the approved closing and
   the button all have to land inside 812px. The rows gave up 186px; these five
   margins give up the last 32, and they are scoped to this section so the rest of
   the page keeps its spacing. */
.stages-h{margin-bottom:var(--s5)}
.stages-lede{margin-bottom:var(--s3)}
/* ORDER 33B: the closing line was hugging the accordion and read as a sixth item.
   Clear space above it, at least the height of one collapsed row (68px at 390). */
.stages-closing{margin-top:calc(var(--s16) + var(--s1)); margin-bottom:var(--s3)}
.stages-cta{margin-top:var(--s4)}

/* Flush, not five floating cards. Gaps between rows cost 48px at 390 and bought
   nothing: an accordion reads as one list. One border around the group, hairlines
   between the rows. */
.stages{list-style:none; margin:var(--s5) 0 0; padding:0;
  border:1px solid rgba(14,42,31,.16); border-radius:var(--r-card); overflow:hidden;
  background:var(--paper)}
.band[data-surface="paper"] .stages{background:var(--dew); border-color:rgba(14,42,31,.10)}
.stages > li + li{border-top:1px solid rgba(14,42,31,.12)}
.stage{background:transparent}

/* EXPLICIT AREAS, NOT COLUMN ARITHMETIC. Auto-placement put the chevron
   immediately after a short name on three of the five rows and hard right on the
   other two, because the free space in the middle column depends on how long the
   subtitle is. Named areas pin every part in both layouts. */
/* width:100% is not decoration. A <summary> is display:list-item by default and
   giving it display:grid leaves it shrink-to-fit in both engines: the five rows
   measured 207px to 296px inside a 350px list, so the chevron landed wherever the
   subtitle happened to end. The .exp expander in section 5.2 carries the same line
   for the same reason. */
.stage > summary{display:grid; width:100%; align-items:center; gap:var(--s1) var(--s3);
  padding:var(--s3) var(--s4); cursor:pointer; list-style:none;
  font-weight:700; color:var(--forest);
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"num name chev" "num title chev"}
.stage > summary::-webkit-details-marker{display:none}
.stage > summary::after{content:""; grid-area:chev; align-self:center; justify-self:end;
  width:.62em; height:.62em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease}
.stage[open] > summary::after{transform:rotate(225deg) translate(-2px,-2px)}
@media (prefers-reduced-motion:reduce){ .stage > summary::after{transition:none} }

.stage-n{grid-area:num; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--forest);
  color:var(--paper); font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-weight:800; font-size:.875rem}
.stage-name{grid-area:name; font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:.9375rem; color:var(--leaf); align-self:center}
.stage-title{grid-area:title; font-weight:400; font-size:.8125rem; line-height:1.3;
  min-width:0}
/* One line from 561 up: number, name, subtitle, chevron. */
@media (min-width:561px){
  .stage > summary{grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:"num name title chev"}
  .stage-title{font-size:.9375rem; line-height:1.32}
}

.stage > summary:focus-visible{outline:3px solid var(--leaf); outline-offset:-3px}
.stage[open] > summary{border-bottom:1px solid rgba(14,42,31,.14)}

.subs{display:grid; gap:var(--s4); padding:var(--s4) var(--s4) var(--s5)}
@media (min-width:900px){ .subs{grid-template-columns:1fr 1fr; gap:var(--s5) var(--s8)} }
.sub h3{font-family:Figtree,sans-serif; font-weight:700; font-size:.9375rem;
  margin:0 0 var(--s1); color:var(--forest)}
.sub p{margin:0; max-width:var(--prose)}
.sub strong{font-weight:800}
.sub em{font-style:italic}

/* ORDER 33 6a. "How the plan works" was hugging the block above it. One line
   height of clear space, minimum. */
h3.spaced{margin-top:calc(var(--s6) + 1em)}

/* ------------------------------------------------------------- THE FAQ */
/* ORDER 33. The layers moved off the price block and into here. Same native
   accordion as the five stages: <details name="faq">, every answer in the HTML
   whether the row is open or shut, one open at a time from the browser rather
   than from us.
   The selectors are .faq and .faqs, NOT .faq-anything-generic, and they are
   declared here in one place. ORDER 31 lost an hour to a bare .stage rule left
   over from a retired page; a new component gets its own namespace. */
.faqs{list-style:none; margin:var(--s5) 0 0; padding:0;
  border:1px solid rgba(14,42,31,.16); border-radius:var(--r-card); overflow:hidden;
  background:var(--paper); max-width:var(--prose-wide,46rem)}
.band[data-surface="paper"] .faqs{background:var(--dew); border-color:rgba(14,42,31,.10)}
.faqs > li + li{border-top:1px solid rgba(14,42,31,.12)}
.faq{background:transparent}
.faq > summary{display:grid; width:100%; align-items:center; gap:var(--s3);
  grid-template-columns:minmax(0,1fr) auto; padding:var(--s3) var(--s4);
  cursor:pointer; list-style:none; font-weight:700; color:var(--forest)}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::after{content:""; justify-self:end; align-self:center;
  width:.58em; height:.58em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease}
.faq[open] > summary::after{transform:rotate(225deg) translate(-2px,-2px)}
@media (prefers-reduced-motion:reduce){ .faq > summary::after{transition:none} }
.faq > summary:focus-visible{outline:3px solid var(--leaf); outline-offset:-3px}
.faq[open] > summary{border-bottom:1px solid rgba(14,42,31,.14)}
.faq-q{font-size:.9375rem; line-height:1.35; min-width:0}
.faq-a{padding:var(--s4)}
.faq-a p{margin:0; max-width:var(--prose)}

/* ------------------------------------- THE TWO DOORS AND THE FOUR THINGS */
/* Both doors are real. Door 2 gets the same weight as door 1, because a
   business that would rather run it themselves is still a client. */
.doors{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:var(--s5)}
@media (min-width:760px){ .doors{grid-template-columns:1fr 1fr; gap:var(--s8)} }
.door{background:var(--paper); border:1px solid rgba(14,42,31,.18);
  border-radius:var(--r-card); padding:var(--s5)}
.band[data-surface="paper"] .door{background:var(--dew)}
.door h4{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:1.0625rem; margin:0 0 var(--s2)}
.door p{margin:0; max-width:none}

/* The audit stops at the diagnosis. Four things, and they are the deliverable. */
.gets{gap:var(--s3)}
.gets li{font-weight:600}

/* ------------------------------------------------------- THE PRICE */
/* Three statements, not one paragraph: the operations audit, the coaching
   after it, and on site. On the dark band they are the page's landmark. */
.band[data-surface="forest"] [data-tagline]{font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-weight:800; font-size:clamp(1.15rem,4vw,1.5rem); color:var(--mint);
  max-width:24ch; margin:0 0 var(--s8)}
.price-grid{display:grid; gap:var(--s8)}
@media (min-width:760px){ .price-grid{grid-template-columns:repeat(3,1fr); gap:var(--s10)} }
.price-part h3{font-size:clamp(1.15rem,3.5vw,1.35rem); margin:0 0 var(--s3)}
.price-part p{margin:0; max-width:34em}

/* The size table. Three rows, so it filters the calls we do not want without
   reading as a menu. It scrolls inside itself rather than the page. */
.sizes{width:100%; border-collapse:collapse; margin-top:var(--s8);
  font-variant-numeric:tabular-nums}
.sizes th,.sizes td{text-align:left; padding:var(--s3) var(--s4);
  border-bottom:1px solid rgba(245,250,246,.22)}
.sizes thead th{font-size:.875rem; line-height:1.4; text-transform:uppercase;
  letter-spacing:.04em; color:var(--mint); border-bottom-width:2px}
.band[data-surface="paper"] .sizes th,.band[data-surface="paper"] .sizes td{
  border-bottom-color:rgba(14,42,31,.14)}
.band[data-surface="paper"] .sizes thead th{color:var(--forest)}
@media (max-width:520px){ .sizes th,.sizes td{padding:var(--s2) var(--s3); font-size:.9375rem} }
.band[data-surface="forest"] .price-part h3{color:var(--mint)}

/* /demo, the sample text exchange. Every frame carries its own label. */
.phone{background:var(--paper); border:1px solid rgba(14,42,31,.18);
  border-radius:var(--r-card); padding:var(--s5); max-width:34em}
.band[data-surface="paper"] .phone{background:var(--dew)}
.phone > .fine{margin-bottom:var(--s4); color:var(--forest)}
.thread{display:grid; gap:var(--s3)}
.msg{border-radius:var(--r-card); padding:var(--s4); max-width:90%}
.msg p{margin:0}
.msg--out{background:var(--forest); color:var(--paper); justify-self:end}
.msg--in{background:var(--mint); color:var(--ink); justify-self:start}


/* ------------------------------------------- 5.9 THE LEAK CHECK AND THE SAMPLE */
/* ORDER 35B. One question at a time on a phone, a readable column on a desktop.
   Nothing here depends on script to LOOK right: screen one is a plain form and the
   result is plain prose, so a failed script leaves a page that still reads. */
.leakform{display:grid; gap:var(--s6); max-width:var(--prose); margin:var(--s6) 0 0}
/* [hidden] must win. An author display:grid beats the UA sheet's [hidden]{display:none},
   so screen one stayed on screen above its own result and the prospect saw the whole
   form again under his answer. Every element this page toggles gets the same guard. */
.leakform[hidden], #lcresult[hidden], #lc2wrap[hidden], .cta-row[hidden]{display:none}
.leakform h3{margin:var(--s4) 0 0}
.lq{display:grid; gap:var(--s3); border:0; margin:0; padding:0; min-width:0}
.lq legend, .lq > label{font-weight:700; line-height:1.35; padding:0;
  display:flex; gap:var(--s3); align-items:baseline}
.lq-n{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:24px; height:24px; border-radius:50%; background:var(--forest);
  color:var(--paper); font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-weight:800; font-size:.8125rem}
.opts{display:grid; gap:var(--s2)}
/* The optional one line: Q5's "Something else" sentence and Q6's. It sits inside its
   own question's fieldset and is deliberately quieter than the legend above it, because
   it is never required and must not read as another question. Contrast holds: --forest
   on --paper is the same pair the rest of the form uses for secondary text. */
.lq-line{display:grid; gap:var(--s2); margin-top:var(--s1)}
.lq-line > label{font-weight:500; font-size:.9375rem; color:var(--forest)}
.opt{display:flex; gap:var(--s3); align-items:flex-start; cursor:pointer;
  padding:var(--s3) var(--s4); border:1px solid rgba(14,42,31,.18);
  border-radius:var(--r-control); background:var(--paper); min-height:44px;
  line-height:1.35}
.opt:has(input:checked){border-color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest)}
.opt input{flex:none; margin-top:.15em; width:18px; height:18px; accent-color:var(--forest)}
.opt:focus-within{outline:3px solid var(--leaf); outline-offset:2px}
.leakform input[type=text],.leakform input[type=tel],.leakform input[type=email]{
  font:inherit; padding:var(--s3) var(--s4); min-height:44px;
  border:1px solid rgba(14,42,31,.24); border-radius:var(--r-control);
  background:var(--paper); color:var(--ink); width:100%; min-width:0}
.leakform input:focus-visible{outline:3px solid var(--leaf); outline-offset:2px}

/* scrollIntoView lands under the sticky nav without this, so the result's own headline
   was the one line a prospect could not read. */
#lcresult{margin-top:var(--s8); scroll-margin-top:84px}
#lcresult .shape{scroll-margin-top:84px}
#lcresult h3{margin:var(--s6) 0 var(--s3)}
.checks{margin:0 0 var(--s4); padding-left:var(--s6); display:grid; gap:var(--s3);
  max-width:var(--prose)}
.checks li{line-height:1.5}
.yourwords{margin:0 0 var(--s3); padding:var(--s3) var(--s5); border-left:3px solid var(--leaf);
  background:var(--dew); max-width:var(--prose)}
.shape{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:0;
  border:1px solid rgba(14,42,31,.16); border-radius:var(--r-card); overflow:hidden}
.shape li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s2) var(--s4);
  padding:var(--s4) var(--s5); background:var(--paper)}
.shape li + li{border-top:1px solid rgba(14,42,31,.12)}
.shape-a{font-weight:700}
.shape-l{justify-self:end; font-size:.8125rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:2px var(--s3); border-radius:999px;
  background:var(--dew); color:var(--forest)}
.shape-l[data-l="loose"]{background:var(--forest); color:var(--paper)}
.shape-l[data-l="unknown"]{background:var(--mint); color:var(--ink)}
.shape-line{grid-column:1 / -1; line-height:1.5; max-width:var(--prose)}
@media (min-width:700px){ .shape li{grid-template-columns:14ch auto minmax(0,1fr)}
  .shape-line{grid-column:3}
  .shape-l{justify-self:start} }

/* the three hooks. Small type, a middle dot, no buttons: it is a footer for the
   ending, not a third call to action competing with the one above it. */
.hooks{margin:var(--s5) 0 0; font-size:.9375rem; line-height:1.6;
  max-width:var(--prose)}
.hooks a{color:inherit}
.band[data-surface="mint"] .hooks a{color:var(--ink)}

/* the sample. The disclosure is BODY SIZE, three times, because a footnote is what
   somebody skips on the page where skipping it matters most. */
.samplenote{margin:var(--s5) 0; padding:var(--s4) var(--s5);
  border:2px solid var(--forest); border-radius:var(--r-card);
  background:var(--dew); font-weight:700; max-width:var(--prose)}
.sampleitems{margin:0 0 var(--s5); padding-left:var(--s6); display:grid; gap:var(--s3);
  max-width:var(--prose)}
.sampleitems li{line-height:1.5}