/* Tracy Limbrick — Chinese Cosmetic Health
   Direction 1 "Warm Linen" — shared stylesheet
   version 6.3 — 2026-08-24 */

:root{
  --linen:#FAF5EC;
  --linen-deep:#F2E9DA;
  --oat:#EADFCB;
  --ink:#382E24;
  --ink-soft:#6D6053;
  /* v5.0 — accent moved from a pink-leaning rose (hue 18°) to a warmer clay
     (hue 22°) so it sits with the photography, which averages hue 30°.
     Creams and inks were measured against the photographs and left alone:
     --ink already matches the images exactly, and the cream hue difference
     is below the threshold of visibility at that lightness (deltaE < 1).
     The three clay steps are pitched so every text pair on the site clears
     WCAG AA at 4.5:1 — see the contrast table in CHANGELOG.md. */
  --rose:#B57A5C;        /* light accent — hover borders, rules */
  --rose-mist:#E5CDBE;   /* tinted text on dark clay */
  --rose-deep:#926145;   /* buttons, eyebrows, small accent text */
  --rose-dark:#84543C;   /* large surfaces — CTA band, lead card, button hover */
  --rule:#E3D6C3;
  --rule-deep:#DBCBB3;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--linen);color:var(--ink);font-family:var(--sans);font-weight:300;
     font-size:18px;line-height:1.78;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 44px}
a{color:inherit}
img{max-width:100%}

/* ---------- nav ---------- */
nav{padding:36px 0 0}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:40px}
/* Brand lockup: Tracy's butterfly mark beside live text (v5.5).
   The mark is her logo; the wordmark stays as real type rather than an image so
   it remains selectable, searchable and crisp at any zoom. The logo files were
   supplied on white and have been recomposited onto --linen, so the surfaces
   they sit on must stay that colour. */
.brand{display:flex;align-items:center;gap:15px;font-family:var(--serif);font-size:27px;
       letter-spacing:.015em;line-height:1.15;text-decoration:none}
.brand .mark{width:54px;height:auto;display:block;flex:none}
.brand small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.3em;
             text-transform:uppercase;color:var(--rose-deep);margin-top:8px;font-weight:400}
.navlinks{display:flex;gap:24px;align-items:center;font-size:13px;letter-spacing:.07em;
          text-transform:uppercase;color:var(--ink-soft)}
.navlinks a{text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.navlinks a:hover{border-color:var(--rose)}
.navlinks a.on{border-color:var(--rose);color:var(--ink)}
/* Selector must be `.navlinks a.navbtn`, not `.navbtn`.
   `.navlinks a` sets padding-bottom:3px for the hover underline, and at (0,1,1)
   it outranks a bare `.navbtn` at (0,1,0) — so the shorthand padding lost on the
   bottom edge only, giving 12px above the label and 3px below it. The label sat
   low in the pill. Matching the specificity fixes it. */
.navlinks a.navbtn{background:var(--rose-deep);color:#fff!important;border-radius:100px;
        border:0!important;font-size:12.5px;display:inline-block;text-align:center;
        line-height:1;padding:13px 24px 11px}
.navlinks a.navbtn:hover{background:var(--rose-dark)}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:300;font-size:63px;line-height:1.14;letter-spacing:-.005em}
h1 em{font-style:italic;color:var(--rose-deep)}
h2{font-family:var(--serif);font-weight:300;font-size:46px;line-height:1.18}
h3{font-family:var(--serif);font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:24px}
.lede{font-size:20px;line-height:1.75;color:var(--ink-soft);margin-top:28px;max-width:31em}
.prose p{margin-top:22px;font-size:17.5px;color:var(--ink-soft)}
.prose p.first{font-size:20px;color:var(--ink);line-height:1.7}

/* ---------- buttons ----------
   Letter-spacing adds a trailing space after the last character, which pushes
   centred text left. text-indent of the same value cancels it out. */
.btn,.navbtn,.bookbtn,.strapbtn,.telbtn,.callbar a,.opt .tel,.cta .tel{text-indent:.15em}
.navbtn{text-indent:.07em}
.telbtn{text-indent:.16em}
.telbtn b,.opt .tel,.cta .tel{text-indent:0}
.callbar a{text-indent:.12em}

.btnrow{display:flex;gap:22px;align-items:center;margin-top:42px;flex-wrap:wrap}
.btn{background:var(--rose-deep);color:#fff;text-decoration:none;padding:17px 36px;border-radius:100px;
     font-size:13px;letter-spacing:.15em;text-transform:uppercase;display:inline-block;border:0;cursor:pointer;
     font-family:var(--sans);font-weight:400}
.btn:hover{background:var(--rose-dark)}
.ghost{text-decoration:none;font-size:15px;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:4px}
.ghost:hover{border-color:var(--rose)}

/* ---------- image zones ---------- */
.imgzone{position:relative;border-radius:3px;overflow:hidden;background:var(--oat)}
.imgzone img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- page header (interior pages) ---------- */
.phead{padding:76px 0 68px;border-bottom:1px solid var(--rule)}
.phead h1{font-size:56px;max-width:14em}
.phead .lede{max-width:34em}

/* ---------- home hero ---------- */
.hero{padding:86px 0 92px;display:grid;grid-template-columns:1.02fr .98fr;gap:76px;align-items:center}
.heroimg{height:560px}

/* ---------- three-up band ---------- */
.calm{background:var(--linen-deep);padding:84px 0}
.calmhead{margin-bottom:50px;max-width:34em}
.calmgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.calmgrid>div{border-top:1px solid var(--rule-deep);padding-top:26px}
.calmgrid h3{font-size:26px;line-height:1.25;margin-bottom:10px}
.calmgrid p{font-size:16.5px;color:var(--ink-soft);line-height:1.75}

/* ---------- generic band ---------- */
.band{padding:100px 0}
.band-tight{padding:76px 0}

/* ---------- treatment cards (home) ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:58px}
.tcard .imgzone{height:280px;margin-bottom:24px}
.tcard h3{font-size:26px;line-height:1.28;margin-bottom:10px}
.tcard p{font-size:16.5px;color:var(--ink-soft);line-height:1.75}
.dur{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:14px}

/* ---------- treatment list (treatments page) ---------- */
.tlist{margin-top:0}
.titem{display:grid;grid-template-columns:190px 1fr 1.9fr auto;gap:44px;padding:40px 0;
       border-bottom:1px solid var(--rule);align-items:start}
.titem .thumb{width:100%;height:150px;object-fit:cover;border-radius:3px;display:block}
.titem h3{font-size:29px;line-height:1.2}
.titem p{font-size:16.5px;color:var(--ink-soft);line-height:1.75}
/* Booking option button — the single booking component, shared by the Treatments
   page fee column and the Book page grouped list.
   v5.1: each option is ONE button carrying its own label and price, so a price
   can never be read against the wrong appointment.
   v5.3: collapsed to a single line. The duration used to sit on a second line at
   12.5px, which made near-identical appointments hard to tell apart at a glance —
   it now shares the main label at full size: "First visit · 90 min". */
.feebtn{display:flex;align-items:center;justify-content:space-between;gap:20px;
        text-decoration:none;border-radius:5px;padding:15px 18px;margin-bottom:9px;
        background:var(--rose-deep);border:1px solid var(--rose-deep);color:#fff;
        transition:background .15s,border-color .15s}
.feebtn:hover{background:var(--rose-dark);border-color:var(--rose-dark)}
.feebtn .l{font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.35}
.feebtn .p{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1;white-space:nowrap}
.feebtn.sec{background:transparent;border-color:var(--rule-deep);color:var(--ink)}
.feebtn.sec:hover{background:var(--linen-deep);border-color:var(--rose-deep)}

/* Treatments page — narrow fee column */
.fee{width:268px;text-align:left}
.fee .feebtn .l{font-size:13.5px}

/* Book page — one group per treatment, all its lengths together (v5.3).
   Previously each length was its own row, so "Tracy's signature Gua Sha Facial
   Acupuncture" appeared three times in a row and the only difference was a line
   of small grey text. */
.tgroup{padding:32px 0;border-bottom:1px solid var(--rule)}
.tgroup:last-child{border-bottom:0;padding-bottom:8px}
.tgroup h4{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.25}
.tgroup .note{font-size:15px;color:var(--ink-soft);margin-top:6px;max-width:44em}
.tgroup .opts{margin-top:18px;max-width:560px}
.tgroup .opts .feebtn:last-child{margin-bottom:0}

/* phone fallback — one quiet line, evenly spaced above and below its rule */
.feetel{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule);
        font-size:13px;line-height:1.65;color:var(--ink-soft)}
.feetel a{color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap;
          border-bottom:1px solid var(--rule-deep);padding-bottom:1px}
.feetel a:hover{border-color:var(--rose-deep)}
.feetel b{font-weight:500;color:var(--ink)}

@media(max-width:900px){
  .fee{width:100%;max-width:340px}
}

/* ---------- experience band ---------- */
.exp{background:var(--oat);padding:100px 0}
.expgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.exp .imgzone{height:520px}
.exp p{color:#5E5041;margin-top:24px;font-size:18px}
blockquote{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.5;margin-top:34px;
           padding-top:30px;border-top:1px solid #D8C6AC}
blockquote cite{display:block;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.28em;
                text-transform:uppercase;color:var(--rose-deep);margin-top:18px}

/* v6.1 — Tracy's butterfly above the Lao Tzu quote. Her logo is a butterfly and
   the quote is the caterpillar-and-butterfly line; the mark ties the two together.
   Only on this quote — used as a repeating motif it would tip into twee.
   NOTE: this uses logo-butterfly.png, not logo-mark.png. The supplied logo files
   are composited onto cream and are NOT transparent, so logo-mark.png shows a
   visible box on any surface that isn't --linen — and one of these two quotes
   sits on the --oat .exp band. logo-butterfly.png is the same art un-composited
   back to true alpha, so it sits correctly on both. */
.quotemark{display:block;width:46px;height:auto;margin:40px auto 18px}
.quotemark+blockquote{margin-top:0}

/* ---------- about / split ---------- */
.split{padding:100px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:76px;align-items:center}
.split img.portrait{width:100%;height:560px;object-fit:cover;object-position:center 18%;border-radius:3px;display:block}
.credlist{margin-top:36px;border-top:1px solid var(--rule)}
.credlist div{padding:19px 0;border-bottom:1px solid var(--rule);display:flex;gap:20px;
              font-size:16.5px;color:var(--ink-soft)}
.credlist b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ink);
            flex-shrink:0;width:112px;line-height:1.5}

/* ---------- article (why chinese medicine) ---------- */
.article{max-width:44em;padding:82px 0 40px}
.article h2{font-size:34px;margin-top:56px}
.article p{margin-top:20px;font-size:18px;color:var(--ink-soft);line-height:1.82}
.article p.first{font-size:21px;color:var(--ink);line-height:1.7}
.pullimg{height:420px;margin:56px 0 0}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:76px;padding:84px 0;align-items:start}
.cblock{margin-bottom:38px}
.cblock h3{font-size:23px;margin-bottom:12px}
.cblock a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.cblock a:hover{border-color:var(--rose)}
.cblock p{font-size:17.5px;color:var(--ink-soft);line-height:1.9}
/* v6.3 — the enquiry form was removed from contact.html. Its rules are gone with it;
   .formnote stays because treatments.html uses it too. If a form ever comes back,
   contact.html as it stood is inside builds/tracy-site-v6.2.zip. */
.askpanel{background:var(--linen-deep);border:1px solid var(--rule);border-radius:3px;
          padding:36px 34px}
.askpanel h2{font-size:30px;line-height:1.2}
.askpanel p{margin-top:16px;font-size:17px;color:var(--ink-soft);line-height:1.78}
.askpanel .btnrow{margin-top:26px}
.askpanel .formnote{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-deep);
                    line-height:1.75}
.askpanel .formnote a{color:var(--ink);font-weight:500;text-decoration:none;
                      border-bottom:1px solid var(--rule-deep)}
.askpanel .formnote a:hover{border-color:var(--rose-deep)}
.formnote{font-size:14.5px;color:var(--ink-soft);margin-top:18px}

/* ---------- START HERE panel (new patients) ---------- */
.starthere{background:var(--ink);color:var(--linen);border-radius:4px;padding:52px 56px;margin:0 0 8px}
.starthere .eyebrow{color:var(--rose-mist)}
.starthere h2{color:var(--linen);font-size:38px}
.starthere>p{color:#B7A899;margin-top:16px;font-size:18px;max-width:36em}
.startgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;margin-top:38px}
/* On the Book page the panel leads with the cards and has no heading above them,
   so the 38px gap would otherwise double up with the panel's own 52px padding. */
.startgrid:first-child{margin-top:0}
.startcard{background:#453A2E;border-radius:4px;padding:34px 32px;display:flex;flex-direction:column}
.startcard.lead{background:var(--rose-dark)}
.startcard .tag{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#E7CFC2;margin-bottom:14px}
.startcard.lead .tag{color:#FBEFE8}
.startcard h3{font-family:var(--serif);font-weight:400;font-size:27px;color:#fff;line-height:1.22;margin-bottom:10px}
.startcard p{font-size:16px;color:#D6CBBE;line-height:1.7;flex:1}
.startcard.lead p{color:#FBEDE5}
.startcard .meta{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#E7CFC2;margin:18px 0 20px}
.startcard.lead .meta{color:#FBEFE8}
.bookbtn{display:inline-block;background:#fff;color:var(--ink);text-decoration:none;text-align:center;
         padding:17px 30px;border-radius:100px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
         font-weight:400;transition:opacity .18s}
.bookbtn:hover{opacity:.86}

/* strap below the start-here cards */
.strap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
       margin-top:26px;padding:24px 30px;border:1px solid #5C5044;border-radius:4px}
.strap p{font-size:17px;color:#D6CBBE;line-height:1.6;margin:0;flex:1;min-width:16em}
.strap p b{color:var(--linen);font-weight:400;font-family:var(--serif);font-size:21px;display:block;margin-bottom:3px}
.strapbtn{display:inline-block;border:1px solid var(--rose-mist);color:var(--linen);text-decoration:none;
          padding:14px 28px;border-radius:100px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
          white-space:nowrap}
.strapbtn:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:#fff}
@media(max-width:900px){ .strap{padding:22px 20px} .strapbtn{width:100%;text-align:center} }

/* ---------- booking option cards (book page) ---------- */
.optgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:44px}
.opt{background:var(--linen-deep);border:1px solid var(--rule);border-radius:4px;padding:40px 38px;
     display:flex;flex-direction:column}
.opt.primary{background:var(--oat);border-color:var(--rule-deep)}
.opt .num{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--rose-deep);margin-bottom:12px}
.opt h3{font-size:28px;line-height:1.22;margin-bottom:12px}
.opt p{font-size:16.5px;color:var(--ink-soft);line-height:1.75;flex:1}
.opt .btn{margin-top:26px;text-align:center}
.opt .tel{display:block;font-family:var(--serif);font-size:38px;color:var(--ink);text-decoration:none;margin-top:18px}
.opt .tel:hover{color:var(--rose-deep)}

/* booking row list with per-treatment buttons */
.brow{display:grid;grid-template-columns:1fr auto auto;gap:36px;padding:26px 0;
      border-bottom:1px solid var(--rule);align-items:center}
.brow h4{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.25}
.brow .sub{font-size:14.5px;color:var(--ink-soft);margin-top:4px}
.brow .px{font-family:var(--serif);font-size:23px;white-space:nowrap}
.brow .btn{padding:13px 26px;font-size:12px}
.quiet{opacity:.72}

/* ---------- sticky mobile call bar ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;
           box-shadow:0 -2px 18px rgba(56,46,36,.16)}
  .callbar a{padding:16px 8px;text-align:center;text-decoration:none;font-size:13px;
             letter-spacing:.12em;text-transform:uppercase}
  .callbar .c1{background:var(--ink);color:var(--linen)}
  .callbar .c2{background:var(--rose-deep);color:#fff}
  body{padding-bottom:56px}
}

/* ---------- strong call to action ---------- */
.cta{background:var(--rose-dark);color:#fff;padding:88px 0;text-align:center}
.cta .eyebrow{color:#F4DCCF}
.cta h2{color:#fff;font-size:48px;max-width:15em;margin:0 auto}
.cta p{color:#F6E5DB;margin:18px auto 0;font-size:19px;max-width:34em}
.cta .tel{display:block;font-family:var(--serif);font-size:44px;color:#fff;text-decoration:none;
          margin-top:30px;letter-spacing:.01em}
.cta .tel:hover{color:#FBEFE8}
.cta .btnrow{justify-content:center;margin-top:30px}
.cta .btn{background:#fff;color:var(--ink);padding:19px 44px;font-size:13.5px}
.cta .btn:hover{background:var(--linen-deep)}
.cta .orcall{font-size:17px;color:#F6E5DB;margin-top:20px}
.cta .orcall a{font-family:var(--serif);font-size:27px;color:#fff;text-decoration:none;
               border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;margin-left:6px}
.cta .orcall a:hover{border-color:#fff}
.cta .btn{font-size:14.5px;padding:20px 48px}
.cta .fine{font-size:15px;color:#F2D8CB;margin-top:26px}
.cta .fine a{color:#fff}

/* ---------- clinic listing name ---------- */
.listedas{display:block;font-size:13px;line-height:1.5;color:var(--ink-soft);margin:6px 0 14px;font-style:italic}
.listedas b{font-style:normal;font-weight:400;color:var(--ink)}
.startcard .listedas{color:#C4B8AA;margin:2px 0 12px}
.startcard .listedas b{color:#EFE6DA}
.startcard.lead .listedas{color:#F2DACE}
.startcard.lead .listedas b{color:#fff}

/* ---------- "ask for Tracy" note ---------- */
.askfor{display:block;margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);
        text-align:center;font-style:italic}
.askfor b{font-style:normal;font-weight:500;color:var(--ink)}
.startcard .askfor{color:#CFC3B5;margin-top:14px}
.startcard .askfor b{color:#fff}
.startcard.lead .askfor{color:#F8E6DC}
.startcard.lead .askfor b{color:#fff}
.cta .askfor{color:#F2D8CB;font-size:15px;margin-top:20px;max-width:34em;margin-left:auto;margin-right:auto}
.cta .askfor b{color:#fff}
.notebox{background:var(--linen-deep);border-left:2px solid var(--rose);border-radius:3px;
         padding:20px 24px;margin-top:26px;font-size:16.5px;line-height:1.7;color:var(--ink-soft);
         max-width:46em}
.notebox b{color:var(--ink);font-weight:500}
/* The phone number in a note box is an action, so it gets the same underlined
   treatment as the one under the fee buttons rather than looking like body copy. */
.notebox .tel{font-family:var(--serif);font-size:23px;color:var(--ink);text-decoration:none;
              border-bottom:1px solid var(--rule-deep);padding-bottom:1px;white-space:nowrap}
.notebox .tel:hover{border-color:var(--rose-deep)}

/* ---------- map ---------- */
.mapwrap{border-radius:3px;overflow:hidden;border:1px solid var(--rule);line-height:0}
.mapwrap iframe{width:100%;height:420px;border:0;display:block;filter:saturate(.82)}

/* ---------- visit / footer ---------- */
.visit{background:var(--ink);color:var(--linen);padding:96px 0}
.visit .eyebrow{color:var(--rose-mist)}
.visit h2{color:var(--linen)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.visit p{color:#B7A899;margin-top:22px;font-size:17.5px}
.addr{font-family:var(--serif);font-size:26px;line-height:1.55}
.lines{margin-top:28px;font-size:17px;line-height:2.15}
.lines a{color:var(--linen);text-decoration:none;border-bottom:1px solid #6D6053}
.lines a:hover{border-color:var(--rose-mist)}
footer{padding:64px 0 48px;font-size:13px;letter-spacing:.06em;color:var(--ink-soft);
       text-align:center;border-top:1px solid var(--rule)}
footer .flogo{width:230px;height:auto;display:block;margin:0 auto 30px}
footer .fmeta{display:flex;justify-content:center;gap:10px 30px;flex-wrap:wrap}
/* v5.6 — Instagram and Facebook, footer, sitewide. Inline SVG so nothing is
   fetched from an external host; currentColor so the icons inherit --ink-soft
   and pick up the clay on hover like every other link on the site. */
footer .fsocial{display:flex;justify-content:center;gap:22px;margin:0 0 26px}
footer .fsocial a{display:inline-flex;color:var(--ink-soft);transition:color .18s ease}
footer .fsocial a:hover{color:var(--rose-deep)}
footer .fsocial svg{width:20px;height:20px;display:block}

/* v5.6 — health fund rebate marker. Tracy's two non-cosmetic treatments only. */
.rebate{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:12px;
        letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);
        border:1px solid var(--rule-deep);border-radius:100px;padding:5px 14px;
        line-height:1.5;font-weight:400}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .wrap{padding:0 22px}
  .navlinks a:not(.navbtn){display:none}
  .brand{font-size:23px;gap:11px}
  .brand .mark{width:42px}
  footer{padding:48px 0 40px}
  footer .flogo{width:180px;margin-bottom:24px}
  footer .fsocial{margin-bottom:22px}
  nav{padding:24px 0 0}
  h1{font-size:42px}
  h2{font-size:34px}
  .phead h1{font-size:38px}
  .phead{padding:52px 0 44px}
  .hero,.expgrid,.split,.vgrid,.cgrid{grid-template-columns:1fr;gap:44px}
  .tgrid,.calmgrid{grid-template-columns:1fr;gap:44px}
  .titem{grid-template-columns:1fr;gap:14px;padding:30px 0}
  .titem .thumb{height:200px;margin-bottom:6px}
  .starthere{padding:36px 24px}
  .starthere h2{font-size:28px}
  .startgrid,.optgrid{grid-template-columns:1fr;gap:18px}
  .brow{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .brow .px{font-size:20px}
  .cta h2{font-size:32px}
  .cta .tel{font-size:32px}
  .mapwrap iframe{height:300px}
  .fee{text-align:left}
  .fee b{display:inline;font-size:22px}
  .fee span{margin-left:10px}
  .heroimg,.exp .imgzone,.split img.portrait,.pullimg{height:380px}
  .band{padding:72px 0}
  .article{padding:52px 0 30px}
  .article h2{font-size:28px;margin-top:44px}
}

/* ---------- accent legibility on tinted bands (v5.0) ----------
   The clay eyebrow is set against cream. On the oat and linen-deep bands
   the background lifts and 4.5:1 is lost, so those bands use the deeper step. */
.exp .eyebrow,.calm .eyebrow,.opt.primary .eyebrow,.notebox .eyebrow{color:var(--rose-dark)}
.exp blockquote cite,.calm blockquote cite{color:var(--rose-dark)}

/* "Or email …" under a button inside an option card. Was borrowing .askfor,
   which is centred italic and meant for the "specify Tracy" note. */
.opt .optmail{font-size:15px;color:var(--ink-soft);margin-top:14px;text-align:center}
.opt .optmail a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-deep)}
.opt .optmail a:hover{border-color:var(--rose-deep)}

/* ================================================================
   v6.4 — mobile navigation and hero
   Three problems, all only visible below 900px:
   1. There was no hamburger at all. `.navlinks a:not(.navbtn){display:none}`
      hid every link and nothing replaced them, so a phone visitor had no route
      to any of the five content pages.
   2. The brand mark sat at 42px and the subline wrapped to two lines.
   3. The hero photograph started 802px down a 844px screen — never seen.
   ================================================================ */

/* ---------- the hamburger ---------- */
.navtoggle{display:none;background:none;border:0;padding:0;cursor:pointer;flex:none;
           width:44px;height:44px;align-items:center;justify-content:center;color:var(--ink)}
.navtoggle .bars{position:relative}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{
           display:block;width:24px;height:1.5px;background:currentColor;border-radius:2px;
           transition:transform .22s ease,background-color .18s ease}
.navtoggle .bars::before,.navtoggle .bars::after{content:'';position:absolute;left:0}
.navtoggle .bars::before{top:-7px}
.navtoggle .bars::after{top:7px}
nav[data-open="true"] .navtoggle .bars{background:transparent}
nav[data-open="true"] .navtoggle .bars::before{transform:translateY(7px) rotate(45deg)}
nav[data-open="true"] .navtoggle .bars::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  /* padding-bottom gives the dropdown a hairline of clearance below the brand
     subline, which otherwise sits hard against the panel's top border */
  nav{position:relative;padding:24px 0 12px}
  .navrow{gap:16px}
  .navtoggle{display:flex}

  /* Mark up from 42px, and the subline held to one line so the lockup reads as
     a single unit rather than three stacked fragments. */
  .brand{font-size:22px;gap:12px}
  .brand .mark{width:52px}
  .brand small{font-size:9px;letter-spacing:.2em;margin-top:6px;white-space:nowrap}

  /* The link row becomes the dropdown panel — same markup, so the `.on`
     current-page marker and the Book link carry over untouched. The Book pill
     leaves the bar itself: the sticky call bar already offers "Book online" on
     every screen, so a second one in the header was duplication. */
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
            flex-direction:column;align-items:stretch;gap:0;
            background:var(--linen);border-top:1px solid var(--rule);
            box-shadow:0 14px 26px rgba(56,46,36,.12);padding:6px 22px 20px}
  nav[data-open="true"] .navlinks{display:flex}
  .navlinks a:not(.navbtn){display:block;padding:16px 2px;border-bottom:1px solid var(--rule);
            font-family:var(--serif);font-size:20px;letter-spacing:0;text-transform:none;
            color:var(--ink)}
  .navlinks a:not(.navbtn):hover{border-color:var(--rule)}
  .navlinks a:not(.navbtn).on{color:var(--rose-deep)}
  .navlinks a.navbtn{margin-top:18px;width:100%;padding:17px 24px 15px}
}

/* ---------- hero ----------
   `display:contents` promotes the eyebrow, headline, lede and buttons to grid
   items in their own right, so the photograph can be ordered between the
   headline and the lede rather than stranded below all of the copy. */
@media(max-width:900px){
  .hero{padding:40px 0 64px;gap:0}
  .hero > div:not(.heroimg){display:contents}
  .hero .eyebrow{order:1;margin-bottom:18px}
  .hero h1{order:2}
  .hero .heroimg{order:3;margin-top:26px}
  .hero .lede{order:4;margin-top:24px}
  .hero .btnrow{order:5;margin-top:28px}
  .heroimg{height:300px}
}
@media(max-width:480px){
  h1{font-size:35px}
  .hero .lede{font-size:17px;line-height:1.6}
  .hero .btnrow{gap:16px}
  .hero .ghost{font-size:14.5px}
}

/* ================================================================
   v6.5 — brand prominence
   Her name is the brand and was reading as a utility item: on desktop the
   lockup took 25% of the header while the five nav links took 69%, and the
   headline outweighed the wordmark 2.33:1.
   ================================================================ */

/* Desktop, 1200px and up. 36/78 is the largest a single row will carry —
   measured, not guessed: at 40/86 three links wrap onto a second line even at
   1440px. Headline-to-wordmark now reads 1.75:1 instead of 2.33:1. */
.brand{font-size:36px;gap:19px}
.brand .mark{width:78px}
.brand small{font-size:11px;letter-spacing:.3em;margin-top:9px}
.navlinks{gap:19px;font-size:12.5px}

/* 901–1199px. The single row cannot hold the brand, five links and the Book
   pill at any readable size — and it could not before this change either: at
   the old 27/54 sizing the shipped site wrapped three links onto a second line
   anywhere below 1200px, so this band has been broken all along. Tightening the
   links only rescues it as far as 1100px and needs 11px type to do it. The nav
   therefore takes its own row here, under a hairline, with Book pushed right. */
@media(max-width:1199px) and (min-width:901px){
  .navrow{flex-direction:column;align-items:flex-start;gap:20px}
  .brand{font-size:34px;gap:18px}
  .brand .mark{width:74px}
  .navlinks{width:100%;justify-content:flex-start;gap:24px;font-size:12.5px;
            padding-top:18px;border-top:1px solid var(--rule)}
  .navlinks a.navbtn{margin-left:auto}
  /* The headline was still running at its full 63px in a ~500px column here,
     which broke "Facial" onto a line of its own. Pre-existing, but the taller
     header makes it plain, so it steps down in the same band. */
  h1{font-size:52px}
  .phead h1{font-size:46px}
  .hero{padding:64px 0 72px}
}

/* Mobile. Same left-aligned lockup, scaled — one system, not a second design.
   Re-declared here because the base rules above sit later in the stylesheet
   than the v6.4 mobile block and would otherwise win on source order. */
@media(max-width:900px){
  .brand{font-size:26px;gap:13px}
  .brand .mark{width:64px}
  .brand small{font-size:9.5px;letter-spacing:.2em;margin-top:6px;white-space:nowrap}
}

/* ================================================================
   v6.6 — "What a visit with Tracy involves" band
   The paragraphs are two lines carrying line-height 1.75 (28.9px on 16.5px
   type). That ratio is right for long-form prose and is what the rest of the
   site uses, but across two lines it separates them enough that they stop
   reading as one block. The surrounding rhythm was generous on top of that.
   David also wanted the band itself shallower, so the spacing comes in with
   the leading rather than the leading alone. Band height 443px → 396px.
   ================================================================ */
.calm{padding:72px 0}
.calmhead{margin-bottom:40px}
.calmgrid{gap:44px}
.calmgrid>div{padding-top:22px}
.calmgrid h3{line-height:1.2;margin-bottom:8px}
.calmgrid p{line-height:1.58}
@media(max-width:900px){
  /* Three stacked cards is where the airiness compounds on a phone. */
  .calmgrid{gap:34px}
}

/* ================================================================
   v6.7 — mobile type scale
   The home page carried 13 distinct sizes on a phone; across all six pages
   desktop carries 11 body sizes alone (16, 16.5, 17, 17.5, 18, 19, 20, 21…).
   Most of that is drift, not hierarchy — 16.5 against 17, 18 against 19 —
   pairs a reader cannot distinguish but which stop the page feeling designed.
   David also read the 16.5px blocks as noticeably smaller than the 18px ones,
   and the 11px labels as too small to read.

   Mobile settles on four text sizes plus the heads. Body resolves UP to 18px,
   the size he identified as reading well, so nothing he already liked shrinks.
   Desktop is deliberately untouched here — audited separately, decision pending.
   ================================================================ */
@media(max-width:900px){

  /* Lede — 19px. Was 17px in the hero and 20px elsewhere. */
  .lede,.hero .lede,.prose p.first,.article p.first,.cta p,.lede.lede-sm{font-size:19px;line-height:1.68}

  /* Body — one size. Was 16, 16.5, 17, 17.5, 18 and 19 depending on the panel. */
  .calmgrid p,.tcard p,.titem p,.opt p,.exp p,.prose p,.article p,.cblock p,
  .visit p,.askpanel p,.startcard p,.strap p,.starthere>p,.notebox,
  .credlist div,.lines,.cta .orcall,.note{font-size:18px}

  /* Keep the tighter leading the calm band gained in v6.6 at the larger size. */
  .calmgrid p,.tcard p,.titem p,.opt p{line-height:1.65}

  /* Secondary and fine print — 15px. Was 14.5 and 15 interchangeably. */
  .ghost,.hero .ghost,.tgroup .note,.cta .fine,.cta .askfor,.opt .optmail,
  .formnote,.brow .sub{font-size:15px}

  /* Labels. 11px at 0.32em tracking is below the practical floor on a phone,
     and .dur is where the prices live. */
  .eyebrow{font-size:12.5px;letter-spacing:.2em}
  .dur{font-size:12.5px;letter-spacing:.13em}
  blockquote cite{font-size:12px;letter-spacing:.2em}

  /* Heads. h2 was landing at 32 and 34 — near-identical to the 35px h1, so the
     step between page title and section title barely registered. Card heads come
     down because at 26px against 18px body the contrast had gone soft. */
  h2,.cta h2,.starthere h2,h2.h2-sm{font-size:30px}
  /* Card and group heads. 26, 27 and 28 were doing the same job in different
     panels — one step at 23px, and the booking-card heads a touch larger since
     they carry the treatment name people are choosing between. */
  .calmgrid h3,.tcard h3,.titem h3{font-size:23px}
  .startcard h3,.tgroup h4{font-size:24px}
  .artsec h2{font-size:30px}
  blockquote{font-size:25px}
}

/* v6.7 — declarations lifted out of inline style attributes. An inline style
   beats every stylesheet rule, so these five were silently defeating the type
   scale. Desktop values are preserved exactly, with one exception: .note was
   16px in Contact and 16.5px in Treatments and is now 16px in both, removing a
   duplicate nobody could see. Scoped to desktop so they cannot outrank the
   mobile scale on source order. */
@media(min-width:901px){
  .note{font-size:16px}
  h2.h2-sm{font-size:32px}
  .lede.lede-sm{font-size:18px}
}

/* ================================================================
   v6.8 — desktop type scale
   The mobile pass (v6.7) left desktop untouched by choice. Audited afterwards
   it was the worse of the two: 11 body sizes and 12 heading sizes across the
   six pages, with treatments.html alone using eight body sizes.

   The important finding is that the site's own intent was already 18/20 —
   `body{font-size:18px}` and `.lede{font-size:20px}`. Six further values had
   crept in around them (14.5, 16, 16.5, 17, 17.5, 19, 21), none of them a
   hierarchy decision. This restores the original pair and folds the rest in.

   Scoped to min-width:901px so it cannot outrank the mobile scale on source
   order — the two scales are independent and neither should reach the other.
   ================================================================ */
@media(min-width:901px){

  /* Lede — 20px, as the stylesheet always intended. Was also 21. */
  .lede,.prose p.first,.article p.first{font-size:20px}

  /* Body — 18px, as the stylesheet always intended.
     Was 16, 16.5, 17, 17.5, 18 and 19 depending on the panel. */
  .calmgrid p,.tcard p,.titem p,.opt p,.credlist div,.notebox,.startcard p,
  .strap p,.askpanel p,.prose p,.cblock p,.visit p,.lines,
  .cta p,.cta .orcall,.note{font-size:18px}

  /* Secondary and fine print — 15px. Was 14.5 and 15 interchangeably. */
  .formnote,.brow .sub,.tgroup .note,.cta .fine,.cta .askfor,
  .opt .optmail,.ghost{font-size:15px}

  /* Section heads — 46px. `.cta h2` sat at 48, a difference nobody can see. */
  .cta h2{font-size:46px}

  /* Panel heads — 34px. These are h2s inside a boxed or tinted panel rather
     than section titles, and they were spread across 30, 32, 34 and 38 with
     no distinction of role behind the spread. `.artsec h2` is already 34 and
     sets the step. */
  .starthere h2,h2.h2-sm,.askpanel h2{font-size:34px}

  /* Card heads — 26px. Was 26, 27 and 29 doing the same job. */
  .titem h3,.startcard h3{font-size:26px}

  /* Labels — 12px, folding the 11/12 split. Kept smaller than mobile's 12.5px
     because desktop reading distance is greater and the tracking still reads. */
  .eyebrow,blockquote cite{font-size:12px}
}