:root{
    --porcelain:#FBF8F3; --oat:#F2EADF; --blush:#EAD8D2; --euc:#DDE6DF;
    --apricot:#E7A17F; --cocoa:#242322; --taupe:#5C5B58; --clay:#A65343; --clay-d:#8A4034;
    --clay-ink:#8A4034;
    --line:#E4DACC; --sticky-h:78px;
    --gold-1:#F2E7C4; --gold-2:#DFC983; --gold-3:#C9AD62; --gold-4:#B0934C;
    --gold:linear-gradient(160deg,var(--gold-1) 0%,var(--gold-2) 38%,var(--gold-3) 68%,var(--gold-4) 100%);
    --gold-h:linear-gradient(160deg,#EADCAE 0%,#D4BB6C 38%,#BFA155 68%,#AC8F45 100%);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* one scroll settles into the next section (desktop, motion allowed) */
  @media(min-width:901px) and (prefers-reduced-motion:no-preference){
    html{scroll-snap-type:y proximity}
    .hero,main:not(.tpage) section[id],footer{scroll-snap-align:start}
  }
  body{font-family:"Inter",sans-serif;color:var(--cocoa);background:var(--porcelain);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4,.serif{font-family:"Fraunces",Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.015em;color:var(--cocoa)}
  .wrap{max-width:1240px;margin:0 auto;padding:0 40px}
  @media(max-width:640px){.wrap{padding:0 22px}}
  .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--clay-ink)}
  a{color:inherit}
  img{max-width:100%;display:block}
  section[id]{scroll-margin-top:var(--sticky-h)}
  .btn{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--cocoa)!important;text-decoration:none;font-weight:600;font-size:15px;padding:16px 32px;border-radius:2px;transition:transform .2s,background .2s,box-shadow .2s;min-height:50px;line-height:1;border:0;cursor:pointer;box-shadow:0 1px 2px rgba(20,18,16,.22),0 5px 14px rgba(20,18,16,.15),inset 0 1px 0 rgba(255,255,255,.5)}
  .btn:hover{transform:translateY(-2px);background:var(--gold-h);box-shadow:0 2px 4px rgba(20,18,16,.26),0 10px 24px rgba(20,18,16,.22),inset 0 1px 0 rgba(255,255,255,.5)}
  .btn:active{transform:translateY(0)}
  .btn.light{background:var(--porcelain);color:var(--clay-ink)!important}
  .btn.light:hover{background:#fff}
  .btn.ghost{background:transparent;border:1px solid currentColor;color:var(--cocoa)!important}
  .btn.ghost:hover{background:var(--cocoa);color:#fff!important;border-color:var(--cocoa)}
  .btn.ghost-w{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff!important}
  .btn.ghost-w:hover{background:#fff;color:var(--clay-ink)!important;border-color:#fff}
  .btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(4px)}
  .btn.sm{padding:13px 24px;font-size:14px;min-height:46px}
  .skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--cocoa);color:#fff;padding:12px 18px}
  .skip:focus{left:0}
  :focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}
  .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* HEADER */
  header{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,box-shadow .3s,padding .3s;padding:16px 0}
  header.solid{background:rgba(251,248,243,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
  .hbar{display:flex;align-items:center;justify-content:space-between;gap:20px}
  .brand{display:flex;align-items:center;text-decoration:none;flex:none}
  .brand img{height:88px;width:auto;transition:height .35s cubic-bezier(.4,0,.2,1)}
  header.solid .brand img{height:46px}
  @media(max-width:900px){.brand img{height:64px}header.solid .brand img{height:40px}}
  @media(max-width:520px){.brand img{height:54px}header.solid .brand img{height:36px}}
  .brand .logo-dark{display:none}.brand .logo-cream{display:block}
  header.solid .brand .logo-dark{display:block}header.solid .brand .logo-cream{display:none}
  nav.desk{display:flex;align-items:center;gap:24px}
  nav.desk>a,nav.desk .navitem{color:#fff;text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.02em;background:none;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;padding:6px 0}
  header.solid nav.desk>a,header.solid nav.desk .navitem{color:var(--cocoa)}
  nav.desk>a:hover,nav.desk .navitem:hover{color:var(--apricot)}
  header.solid nav.desk>a:hover,header.solid nav.desk .navitem:hover{color:var(--clay-ink)}
  nav.desk .book{background:var(--gold);color:var(--cocoa)!important;padding:13px 26px;border-radius:2px;font-size:14px;font-weight:600;border:0}
  nav.desk .book:hover{background:var(--gold-h)}
  .has-drop{position:relative}
  .drop{position:absolute;top:100%;left:0;transform:translateY(8px);background:var(--porcelain);border:1px solid var(--line);border-radius:4px;padding:8px;min-width:250px;opacity:0;visibility:hidden;transition:.2s;box-shadow:0 20px 50px rgba(36,35,34,.14);z-index:90}
  .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(4px)}
  .drop a{display:block;color:var(--cocoa);padding:10px 12px;border-radius:3px;font-size:13.5px;white-space:nowrap}
  .drop a:hover{background:var(--oat);color:var(--clay-ink)}
  .chev{font-size:10px}
  .burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
  .burger span{width:24px;height:2px;background:#fff;transition:.3s}
  header.solid .burger span{background:var(--cocoa)}
  @media(max-width:1024px){nav.desk{display:none}.burger{display:flex}}

  /* MOBILE MENU */
  .mmenu{position:fixed;inset:0;z-index:120;background:var(--porcelain);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:18px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto}
  .mmenu.open{transform:none}
  .mmenu .mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .mmenu .mtop img{height:42px;width:auto;flex:none;object-fit:contain}
  .mclose{width:44px;height:44px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--cocoa)}
  .mmenu a,.mmenu .macc{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 4px;font-family:"Fraunces";font-size:21px;color:var(--cocoa);text-decoration:none;border:0;background:none;cursor:pointer;border-bottom:1px solid var(--line);text-align:left;min-height:44px}
  .mmenu .msub{display:none;padding:0 0 8px 12px}
  .mmenu .msub.open{display:block}
  .mmenu .msub a{font-family:"Inter";font-size:15px;padding:11px 4px}
  .mmenu .mbook{margin-top:18px;background:var(--gold);color:var(--cocoa);justify-content:center;font-family:"Inter";font-weight:600;font-size:16px;border-radius:2px}
  .macc .chev{transition:transform .3s;font-size:13px;color:var(--clay-ink)}
  .macc[aria-expanded="true"] .chev{transform:rotate(180deg)}

  /* HERO */
  .hero{position:relative;min-height:min(74svh,720px);overflow:hidden;background:var(--porcelain);display:flex}
  .hscene{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;z-index:1}
  .hscene.active{opacity:1}
  .hscene video,.hscene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* one vertical scrim: readable at the top for the logo, light through the middle so the
     room still reads, and fully cocoa at the foot so the clip flows into the band below */
  /* Two layers: a short one behind the header so the cream logo reads, and one that
     leaves the top third of the footage completely untouched before resolving to cocoa
     under the words. Measured on this clip, the text band is 51% bright and 26% dark,
     so words cannot sit on clear footage at any colour - they sit in the resolved part. */
  /* light wash, anchored to the bottom in pixels so it always sits under the words */
  .hveil{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,
    var(--porcelain) 0,rgba(251,248,243,.95) 90px,rgba(251,248,243,.82) 330px,
    rgba(251,248,243,.34) 410px,rgba(251,248,243,0) 480px)}
  .hero-inner{position:relative;z-index:3;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:120px 24px 76px;color:var(--cocoa)}
  /* cocoa rather than the site's clay eyebrow: clay measures 2.8:1 where the wash is
     thinnest over the footage, cocoa holds above 6:1 at every width */
  .hero .eyebrow{color:var(--cocoa);background:none;padding:0;margin-bottom:18px;
    font-size:11px;letter-spacing:.26em}
  .hero h1{color:var(--cocoa);font-size:clamp(42px,5.4vw,72px);font-weight:500;line-height:1.0;max-width:16ch}
  .hero h1 em{font-style:italic;font-weight:600;color:var(--clay)}
  .heromsg{display:flex;flex-direction:column;align-items:center}
  .heroacts{display:flex;flex-direction:column;align-items:center}
  .hero-cta{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
  .hrev{margin-top:20px;display:inline-flex;flex-direction:column;align-items:center;
    gap:5px;text-decoration:none;color:var(--cocoa)}
  /* row 1: Google mark, score, stars. The mark deletes itself until the official
     asset is dropped in at assets/google-g.svg (see onerror in index.html). */
  .hrev .hrtop{display:inline-flex;align-items:center;gap:9px}
  .hrev .glogo{width:22px;height:22px;flex:none;display:block}
  .hrev .st{color:var(--clay);letter-spacing:2.5px;font-size:14.5px}
  .hrev .sc{font-family:"Fraunces",Georgia,serif;font-size:22px;line-height:1}
  .hrev .cn{letter-spacing:.01em}
  .hrev .cn{font-size:13px;color:var(--taupe)}
  .hrev:hover .cn{text-decoration:underline}
  .hero-cta .primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#F6EDD2,#DFC983 46%,#B0934C);color:var(--cocoa)!important;padding:clamp(17px,1.4vw,21px) clamp(32px,3vw,44px);font-size:clamp(15px,1.15vw,17px);font-weight:600;box-shadow:0 2px 6px rgba(20,18,16,.5),0 14px 34px rgba(20,18,16,.44),inset 0 1px 0 rgba(255,255,255,.55)}
  .hero-cta .primary:hover{background:linear-gradient(135deg,#FAF3E0,#D4BB6C 46%,#AC8F45);box-shadow:0 3px 8px rgba(20,18,16,.52),0 18px 40px rgba(20,18,16,.5),inset 0 1px 0 rgba(255,255,255,.6)}
  /* trust row */

  /* short phones: shorten the hero so the band below still shows */
  @media(max-width:900px) and (max-height:700px){
    .hero{min-height:min(90svh,640px)}
    .hero-inner{padding-top:96px;padding-bottom:40px}
    .hero h1{font-size:clamp(33px,9.2vw,42px)}
  }

  /* CATEGORY STRIP — rides over the foot of the clip, above the promise band */
  /* transparent across the overlap, then cocoa, so it carries the band's ground up
     behind the cards instead of letting the page background show through */
  .bandstrip{position:relative;z-index:5;margin:-96px auto 0;padding:60px 40px 0;
    background:linear-gradient(180deg,transparent 0,transparent 60px,var(--porcelain) 60px)}
  .bandstrip>*{max-width:1240px;margin-left:auto;margin-right:auto}
  .catnav{display:flex;flex-direction:row;gap:16px}
  .catnav .catcard{flex:1 1 0;min-height:190px}

  /* PROMISE BAND — the clip resolves into this */
  /* depth rather than one flat slab; the top edge stays exactly --cocoa so the seam
     where the clip resolves into this band stays invisible */
  /* light band: the hero wash already ends in this exact porcelain, so the seam
     between the clip and this section does not exist */
  .promise{color:var(--cocoa);text-align:center;padding:62px 0 72px;
    background:linear-gradient(180deg,var(--porcelain) 0,#F7F2EA 55%,var(--oat) 100%)}
  .promise .pstate{font-family:"Fraunces",Georgia,serif;font-weight:300;color:var(--cocoa);
    font-size:clamp(27px,6.2vw,44px);line-height:1.2;letter-spacing:-.015em;
    max-width:22ch;margin:0 auto}
  .promise .psub{margin:16px auto 0;font-size:clamp(15px,1.4vw,17.5px);
    color:var(--taupe);max-width:34ch}
  .pstats{margin:44px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:30px 22px;max-width:520px}
  .pstats .pn{display:block;font-family:"Fraunces",Georgia,serif;font-weight:300;
    font-size:clamp(30px,7.6vw,42px);line-height:1;color:var(--clay-ink)}
  .pstats .pl{display:block;margin-top:11px;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--taupe)}
  @media(max-width:640px){.promise{padding:44px 0 56px}.pstats{margin-top:36px;gap:26px 16px}}

  /* SECTION SHELL */
  .band{padding:96px 0}
  @media(max-width:640px){.band{padding:64px 0}}
  .rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0}
  .kicker{display:block;margin-bottom:14px}
  .lede{color:var(--taupe);font-size:16px}

  /* SIGNATURE SERVICES SPLIT */
  .begin{position:relative;background:
    radial-gradient(60% 80% at 15% 20%,rgba(221,230,223,.5),transparent 60%),
    radial-gradient(60% 80% at 90% 90%,rgba(234,216,210,.5),transparent 60%),
    var(--porcelain)}
  .begin .head{max-width:760px;margin:0 auto 44px;text-align:center}
  .begin .head h2{font-size:clamp(30px,4.4vw,54px);font-weight:300}
  .begin .head h2 em{font-style:italic;color:var(--clay-ink)}
  .beginwrap{display:grid;grid-template-columns:1fr;max-width:520px;margin:0 auto}
  /* carousel */
  .carousel{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:var(--cocoa)}
  @media(max-width:900px){.carousel{aspect-ratio:3/4;min-height:520px;max-width:100%}}
  @media(max-width:640px){.carousel{aspect-ratio:4/5;min-height:0;max-width:100%}}
  .cslide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;z-index:1}
  .cslide.active{opacity:1;z-index:2}
  .cslide img,.cslide video{width:100%;height:100%;object-fit:cover;display:block}
  .cslide .cinner{position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:flex-start;align-items:flex-start;text-align:left;
    /* top padding clears .cctl, which is a full-width control row at top:20px,
       height 30px. With the copy at the top the dots used to strike through the
       kicker. Keep these in step if .cctl moves. */
    padding:64px 30px 30px;
    background:linear-gradient(180deg,rgba(36,35,34,.72) 0%,rgba(36,35,34,.34) 30%,
      rgba(36,35,34,0) 52%,rgba(36,35,34,0) 68%,rgba(36,35,34,.52) 100%);color:#fff}
  .cslide .ck{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--apricot);margin-bottom:10px}
  .cslide h3{color:#fff;font-size:clamp(25px,2.4vw,33px);font-weight:400;max-width:15ch;
    text-shadow:0 1px 2px rgba(20,18,16,.8),0 2px 14px rgba(20,18,16,.6)}
  .cslide p{color:#fff;margin-top:12px;max-width:38ch;font-size:15px;
    text-shadow:0 1px 2px rgba(20,18,16,.85),0 2px 10px rgba(20,18,16,.6)}
  .cslide .cacts{margin-top:auto;padding-top:22px;display:flex;gap:12px;flex-wrap:wrap}
  .cslide .explore{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff!important}
  .cslide .explore:hover{background:rgba(255,255,255,.15)}
  .cctl{position:absolute;top:20px;left:32px;right:32px;z-index:5;display:flex;align-items:center;gap:14px}
  @media(max-width:900px){.cctl{top:12px;left:22px;right:22px;gap:10px}}
  .cdots{display:flex;gap:10px;flex:1}
  @media(max-width:900px){.cdots{gap:8px}}
  .cdot{width:58px;height:29px;padding:12px 0;background:rgba(255,255,255,.42);background-clip:content-box;border:0;cursor:pointer;transition:background .3s,transform .2s}
  .cdot:hover{background:rgba(255,255,255,.7);background-clip:content-box;transform:scaleY(1.4)}
  @media(max-width:900px){.cdot{width:44px;height:28px}}
  .cdot.active{background:var(--apricot);background-clip:content-box}
  .cpause{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(36,35,34,.4);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
  .cpause:hover{background:rgba(36,35,34,.7);border-color:#fff}
  /* category list */
  /* phones: one card centred with both neighbours peeking, advancing on its own */
  @media(max-width:900px){
    .bandstrip{margin:0 auto;padding:0;background:var(--porcelain)}
    .catnav{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain;gap:12px;padding:0 19vw;
      scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
    .catnav::-webkit-scrollbar{display:none}
    .catnav .catcard{flex:0 0 62vw;scroll-snap-align:center;min-height:150px;border-radius:8px}
    .catcard h3{font-size:17px}
    .catcard .cov{background:linear-gradient(180deg,rgba(251,248,243,.94) 0,
      rgba(251,248,243,.82) 58px,rgba(251,248,243,0) 100px)}
  }
  @media(prefers-reduced-motion:reduce){.catnav{scroll-behavior:auto}}
  .catcard{position:relative;border-radius:8px;overflow:hidden;min-height:172px;display:flex;flex-direction:column;justify-content:flex-start;padding:20px 20px;text-decoration:none;color:#fff;flex:1}
  .catcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* scrim at both ends now that the title sits high and the action sits low */
  /* Two scrims anchored in pixels, not percentages: one behind the title band at the
     top, one behind the Explore band at the bottom. The middle of the photo stays clear,
     and legibility no longer depends on the card's height or on how bright the photo is. */
  /* a light wash at the top, not a black filter: the title is the site's dark type */
  .catcard .cov{position:absolute;inset:0;z-index:1;background:
    linear-gradient(180deg,rgba(251,248,243,.93) 0,rgba(251,248,243,.82) 70px,rgba(251,248,243,0) 120px)}
  .catcard .ci{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;width:100%}
  .catcard h3{color:var(--cocoa);font-size:19px;font-weight:400;line-height:1.14}
  .catcard img{transition:transform .7s}.catcard:hover img{transform:scale(1.05)}

  /* SERVICE EDITORIAL ROWS + TABLE LISTS */
  .srow{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  @media(max-width:900px){.srow{grid-template-columns:1fr}}
  .srow .media{position:relative;min-height:520px;overflow:hidden}
  .srow .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .srow.flip .media{order:2}
  .srow .body{padding:70px 58px;display:flex;flex-direction:column;justify-content:center}
  @media(max-width:640px){.srow .body{padding:44px 22px}}
  .srow .body h2{font-size:clamp(28px,3.6vw,44px);font-weight:300;margin-top:12px}
  .srow .body .lede{margin-top:14px;max-width:46ch}
  .aperture{-webkit-mask-image:radial-gradient(130% 130% at 28% 24%,#000 62%,transparent 100%);mask-image:radial-gradient(130% 130% at 28% 24%,#000 62%,transparent 100%)}
  /* expandable table list */
  .stable{margin-top:24px;border-top:1px solid var(--line)}
  .strow{border-bottom:1px solid var(--line)}
  .sthead{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;text-align:left;font-family:"Fraunces";font-size:19px;font-weight:400;color:var(--cocoa);min-height:44px;transition:color .2s}
  .sthead:hover{color:var(--clay-ink)}
  .sthead .ex{color:var(--clay-ink);font-size:15px;transition:transform .3s;flex:none}
  .sthead[aria-expanded="true"] .ex{transform:rotate(45deg)}
  .stpanel{max-height:0;overflow:hidden;transition:max-height .35s ease}
  .stpanel .stin{padding:0 2px 20px;color:var(--taupe);font-size:15px;line-height:1.65;max-width:56ch}
  .stpanel .sacts{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
  .stpanel .sacts .ghost{background:transparent;border:1px solid var(--line);color:var(--cocoa)!important}
  .stpanel .sacts .ghost:hover{background:var(--cocoa);color:#fff!important;border-color:var(--cocoa)}

  /* FOUNDER */
  .founder{position:relative;background:linear-gradient(180deg,var(--oat),var(--porcelain))}
  .founder .row{display:grid;grid-template-columns:.8fr 1.2fr;grid-template-rows:auto auto;
    gap:0 64px;align-items:center}
  .founder .pic{grid-column:1;grid-row:1 / span 2}
  .founder .fhead{grid-column:2;grid-row:1;align-self:end}
  .founder .fbody{grid-column:2;grid-row:2;align-self:start}
  .founder .picname{display:none}
  .founder .pic{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5}
  .founder .pic img{width:100%;height:100%;object-fit:cover}
  .founder .pic::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 70% at 72% 18%,rgba(231,161,127,.45),transparent 58%);mix-blend-mode:screen;pointer-events:none}
  .founder h2{font-size:clamp(28px,3.8vw,46px);font-weight:300}
  .founder .msg{margin-top:20px;font-size:16.5px;line-height:1.8;max-width:54ch}
  .founder .msg p+p{margin-top:14px}
  .founder .sign{margin-top:22px;font-family:"Fraunces";font-style:italic;font-size:26px;color:var(--clay-ink)}
  .founder .role{font-size:13px;color:var(--taupe);margin-top:4px}
  .founder .bridge{margin-top:24px;font-family:"Fraunces";font-style:italic;font-size:19px;max-width:46ch;color:var(--cocoa)}

  /* REVIEWS */
  .reviews{background:linear-gradient(180deg,var(--porcelain),var(--oat))}
  .reviews .row{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  @media(max-width:900px){.reviews .row{grid-template-columns:1fr;gap:34px}}
  .reviews h2{font-size:clamp(30px,4vw,50px);font-weight:300}
  .reviews h2 em{font-style:italic;color:var(--clay-ink)}
  .rsum{display:inline-flex;flex-direction:column;gap:3px;margin:18px 0;text-decoration:none;color:var(--cocoa)}
  .rsum .st{color:var(--clay-ink);letter-spacing:4px;font-size:22px}
  .rsum .sc{font-family:"Fraunces";font-size:40px;line-height:1}
  .rsum .cn{font-size:14px;color:var(--taupe)}
  .rbtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .rinvite{color:var(--taupe);font-size:16px;max-width:44ch;margin-bottom:22px}
  /* review rail */
  .rrail{position:relative}
  .rtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .rtrack::-webkit-scrollbar{height:6px}.rtrack::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .rcard{flex:0 0 300px;scroll-snap-align:start;background:var(--porcelain);border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;flex-direction:column}
  @media(max-width:640px){.rcard{flex:0 0 85%}}
  .rcard .st{color:var(--clay-ink);letter-spacing:1px;font-size:14px}
  .rcard p{margin:12px 0 16px;font-size:14.5px;line-height:1.6;flex:1}
  .rcard .gl{font-size:12px;font-weight:600;color:var(--clay-ink);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
  .rnav{display:flex;gap:8px;margin-top:16px}
  .rnav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--porcelain);cursor:pointer;font-size:16px;color:var(--cocoa);display:flex;align-items:center;justify-content:center;transition:.2s}
  .rnav button:hover{background:var(--clay);color:#fff;border-color:var(--clay-ink)}

  /* VISIT US */
  .visit{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:var(--cocoa)}
  .visit video,.visit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .visit .vov{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(36,35,34,.86),rgba(36,35,34,.6))}
  .visit .panel{position:relative;z-index:2;color:#fff;padding-top:60px;padding-bottom:60px}
  .visit h2{color:#fff;font-size:clamp(30px,4vw,50px);font-weight:300}
  .vgrid{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:620px}
  @media(max-width:560px){.vgrid{grid-template-columns:1fr}}
  .vitem{display:flex;gap:12px;align-items:flex-start}
  .vitem svg{width:24px;height:24px;flex:none;stroke:var(--apricot);fill:none;stroke-width:1.6;margin-top:2px}
  .vitem .vt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--apricot);font-weight:600;margin-bottom:4px}
  .vitem .vd{font-size:15px;color:#fff;line-height:1.5}
  .vitem .vd a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
  .vacts{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .visocial{display:flex;gap:10px}
  .visocial a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s}
  .visocial a:hover{background:var(--clay);border-color:var(--clay-ink)}
  .visocial svg{width:20px;height:20px;fill:currentColor}

  /* FAQ */
  .faq{background:var(--oat)}
  .faq .row{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
  @media(max-width:900px){.faq .row{grid-template-columns:1fr;gap:28px}}
  .faq h2{font-size:clamp(28px,3.8vw,46px);font-weight:300}
  .faq .intro-l p{margin-top:14px;color:var(--taupe);font-size:16px;max-width:40ch}
  .faq .intro-l .btn{margin-top:22px}
  .fitem{border-bottom:1px solid var(--line)}
  .fitem:first-child{border-top:1px solid var(--line)}
  .fq{width:100%;background:none;border:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;text-align:left;font-family:"Fraunces";font-size:18px;font-weight:400;color:var(--cocoa);min-height:44px}
  .fq:hover{color:var(--clay-ink)}
  .fq .chev{color:var(--clay-ink);font-size:14px;transition:transform .3s;flex:none}
  .fq[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .fa{max-height:0;overflow:hidden;transition:max-height .35s ease}
  .fa .inner{padding:0 0 20px;color:var(--taupe);font-size:15.5px;line-height:1.7;max-width:62ch}
  .faq-book{margin-top:34px;text-align:center;background:var(--porcelain);border:1px solid var(--line);border-radius:8px;padding:36px 24px}
  .faq-book h3{font-size:clamp(24px,3vw,34px);font-weight:300}
  .faq-book p{margin:12px auto 22px;color:var(--taupe);max-width:44ch}

  /* FOOTER */
  footer{background:var(--cocoa);color:rgba(251,248,243,.82);padding:56px 0 30px}
  footer .fgrid{display:grid;grid-template-columns:1.35fr .95fr 1.05fr .9fr 1.05fr;gap:32px}
  @media(max-width:820px){footer .fgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){footer .fgrid{grid-template-columns:1fr}}
  footer .brand img{height:54px;margin-bottom:14px}
  footer h4{color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
  footer a{color:rgba(251,248,243,.82);text-decoration:none;display:block;margin-bottom:8px;font-size:14px}
  footer a:hover{color:var(--apricot)}
  footer p{font-size:14px;line-height:1.7}
  footer .fsoc{display:flex;gap:10px;margin-top:10px}
  footer .fsoc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(251,248,243,.3);display:flex;align-items:center;justify-content:center;margin:0}
  footer .fsoc svg{width:18px;height:18px;fill:currentColor}
  footer .fbtm{border-top:1px solid rgba(251,248,243,.16);margin-top:38px;padding-top:22px;font-size:12px;color:rgba(251,248,243,.55);text-align:center}

  /* MEET THE TEAM */
  .team{background:var(--oat)}
  .team .head{text-align:center;max-width:62ch;margin:0 auto}
  .team h2{font-size:clamp(28px,3.8vw,46px);font-weight:300}
  .team .tlede{margin-top:14px;color:var(--taupe);font-size:16px}
  .tgrid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  @media(max-width:980px){.tgrid{grid-template-columns:repeat(2,1fr)}}
  .tswipe{display:none;margin-top:14px;text-align:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
  .tswipe .ar{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  @media(prefers-reduced-motion:reduce){.tswipe .ar{animation:none}}
  @media(max-width:620px){
    /* mobile: swipeable carousel with the next card peeking */
    .tgrid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:flex-start;
           padding:4px 22px 8px;margin-left:-22px;margin-right:-22px;scrollbar-width:none;-ms-overflow-style:none}
    .tgrid::-webkit-scrollbar{display:none}
    .tcard{flex:0 0 80%;scroll-snap-align:center}
    .tswipe{display:block}
  }
  .tcard{background:var(--porcelain);border:1px solid var(--line);border-radius:10px;padding:30px 26px 26px;text-align:center;display:flex;flex-direction:column}
  .tphoto{width:150px;height:150px;margin:0 auto 20px;border-radius:50%;overflow:hidden;position:relative;background:var(--blush);flex:none}
  .tphoto img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
  .tphoto::after{content:attr(data-initials);position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-family:"Fraunces",Georgia,serif;font-size:44px;color:var(--clay-ink);letter-spacing:.02em}
  .tphoto.noimg::after{display:flex}
  .tphoto.noimg img{display:none}
  .tcard h3{font-size:23px;font-weight:400}
  .tcred{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--clay-ink);line-height:1.45}
  .tspec{margin-top:10px;font-size:14px;color:var(--taupe);line-height:1.6}
  .tacts{margin-top:auto;padding-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .tbio{max-height:0;overflow:hidden;transition:max-height .4s ease}
  .tbin{padding-top:18px;margin-top:18px;border-top:1px solid var(--line);text-align:left;font-size:14.5px;color:var(--taupe);line-height:1.7}
  .tbin p+p{margin-top:12px}
  .todo{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:3px;background:#F6E3DE;color:#9E3B2E;font-size:12px;font-weight:600;letter-spacing:.04em}
  /* internal notes for Jenny/Kamal — only rendered when the URL carries ?review */
  .review-only{display:none!important}
  body.review .review-only{display:revert!important}

  /* INQUIRY FORM */
  .inquiry{background:var(--porcelain)}
  .inquiry .row{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  @media(max-width:900px){.inquiry .row{grid-template-columns:1fr;gap:30px}}
  .inquiry h2{font-size:clamp(28px,3.8vw,46px);font-weight:300}
  .inquiry .intro-l p{margin-top:14px;color:var(--taupe);font-size:16px;max-width:42ch}
  .inqnote{margin-top:22px;padding:18px 20px;background:var(--oat);border-radius:8px;font-size:14.5px;color:var(--taupe);line-height:1.65}
  .inqnote strong{color:var(--cocoa)}
  .inqnote a{color:var(--clay-ink);font-weight:600}
  .iwrap{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px}
  @media(max-width:560px){.iwrap{padding:22px}}
  .ifgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:640px){.ifgrid{grid-template-columns:1fr}}
  .ifield{display:flex;flex-direction:column;gap:7px}
  .ifield.full{grid-column:1/-1}
  .ifield label{font-size:13px;font-weight:600;letter-spacing:.02em}
  .ifield .req{color:var(--clay-ink)}
  .ifield input,.ifield select,.ifield textarea{font-family:inherit;font-size:15px;color:var(--cocoa);background:var(--porcelain);border:1px solid var(--line);border-radius:4px;padding:13px 14px;width:100%;min-height:48px;transition:border-color .2s,background .2s}
  .ifield textarea{min-height:132px;resize:vertical;line-height:1.6}
  .ifield input:focus,.ifield select:focus,.ifield textarea:focus{outline:none;border-color:var(--clay-ink);background:#fff}
  .ifoot{margin-top:22px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
  .ifine{font-size:12.5px;color:var(--taupe);max-width:44ch;line-height:1.55}
  .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
  .ierr{display:none;margin-top:16px;font-size:14px;color:#9E3B2E}
  .ierr.show{display:block}
  .imsg{display:none;text-align:center;padding:34px 20px}
  .imsg.show{display:block}
  .imsg .tick{width:54px;height:54px;border-radius:50%;background:var(--oat);color:var(--clay-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px}
  .imsg h3{font-size:28px;font-weight:400}
  .imsg p{margin-top:10px;color:var(--taupe);font-size:15px;max-width:38ch;margin-left:auto;margin-right:auto}
  .imsg .btn{margin-top:22px}

  /* STICKY BOOK (mobile) */
  .sticky-book{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(251,248,243,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;transform:translateY(120%);transition:transform .3s}
  .sticky-book.show{transform:none}
  .sticky-book a{display:flex;justify-content:center}
  @media(max-width:1024px){.sticky-book{display:block}footer{padding-bottom:104px}}

  /* LIGHTBOX */
  .lightbox{position:fixed;inset:0;z-index:150;background:rgba(20,20,19,.92);display:none;align-items:center;justify-content:center;padding:24px}
  .lightbox.open{display:flex}
  .lightbox img{max-width:92vw;max-height:82vh;border-radius:4px}
  .lbclose{position:absolute;top:20px;right:24px;width:44px;height:44px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}
  .lbnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);color:#fff;font-size:22px;cursor:pointer}
  .lbprev{left:20px}.lbnext{right:20px}

  /* INTERIOR PAGE HEAD */
  .pagehead{background:var(--oat);padding-top:calc(var(--sticky-h) + 54px)}
  .pagehead h1{font-size:clamp(34px,5vw,60px);font-weight:300;margin-top:10px}
  .pagehead .phlede{margin-top:16px;color:var(--taupe);font-size:17px;max-width:62ch;line-height:1.7}
  .crumb{font-size:13px;color:var(--taupe);margin-bottom:18px}
  .crumb a{color:var(--clay-ink);text-decoration:none;font-weight:600}
  .crumb a:hover{text-decoration:underline}
  .team.team{padding-top:0}

  /* QUICK ANSWER / TOC / CANDIDACY */
  .fitnote{margin-top:18px;font-size:13px;color:var(--taupe)}

/* ============ TREATMENT PAGE (.tpage) ============ */
  .tpage{--rail:250px}
  /* scroll progress */
  .prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--apricot),var(--clay));z-index:200;transition:width .1s linear}

  /* HERO */
  .thero{position:relative;background:var(--cocoa);color:#fff;padding:clamp(150px,14vw,190px) 0 clamp(56px,6vw,84px);overflow:hidden;min-height:min(62vh,560px);display:flex;align-items:flex-end}
  .therobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
  .therov{position:absolute;inset:0;background:linear-gradient(105deg,rgba(31,31,30,.94) 0%,rgba(31,31,30,.82) 42%,rgba(31,31,30,.42) 100%)}
  .theroin{position:relative;z-index:2}
  
  .thero .crumb{color:rgba(251,248,243,.55)}
  .thero .crumb a{color:rgba(251,248,243,.85)}
  .thero .eyebrow{color:var(--apricot)}
  .thero h1{color:var(--apricot);font-size:clamp(40px,6.2vw,82px);font-weight:300;line-height:1.0;letter-spacing:-.025em;margin-top:16px;text-shadow:0 2px 24px rgba(20,20,19,.55)}
  .thero h1 em{font-style:italic;font-weight:400;color:inherit}
  .therolede{margin-top:22px;font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:rgba(251,248,243,.82);max-width:52ch}
  .theroacts{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

  /* meta strip */

  /* body + sticky rail */
  .tbodygrid{display:grid;grid-template-columns:var(--rail) 1fr;gap:70px;align-items:start}
  @media(max-width:1080px){.tbodygrid{grid-template-columns:1fr;gap:0}}
  .trail{position:sticky;top:calc(var(--sticky-h) + 28px)}
  @media(max-width:1080px){.trail{display:none}}
  .trail .toch{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--taupe);margin-bottom:16px}
  .trail ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
  .trail li a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--taupe);text-decoration:none;font-size:14px;line-height:1.4;transition:.2s}
  .trail li a:hover{color:var(--cocoa)}
  .trail li a.on{color:var(--clay-ink);border-left-color:var(--clay-ink);font-weight:600}
  .trailbook{margin-top:26px}

  /* sections */
  .tsec{padding:38px 40px;margin-bottom:16px;border-radius:14px;background:var(--sec,var(--porcelain));transition:background .3s}
  .tsec:first-child{margin-top:0}
  .tnum{font-family:"Fraunces",Georgia,serif;font-size:13px;color:var(--clay-ink);letter-spacing:.16em;display:block;margin-bottom:14px}
  .tpage h2{font-size:clamp(27px,3.3vw,42px);font-weight:300;line-height:1.14;letter-spacing:-.015em;max-width:20ch}
  .tpage .tsec>p,.tpage .tsec .lede{margin-top:16px;color:var(--taupe);font-size:16.5px;line-height:1.8;max-width:66ch}
  .tpage h3{font-size:20px;font-weight:400;line-height:1.35}

  /* quick answer */
  .qa2{position:relative}
  @media(max-width:560px){.qa2{padding:26px 22px}}
  .qa2 h2{font-family:"Inter",sans-serif;font-size:10.5px!important;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--clay-ink);max-width:none}
  .qa2 p{margin-top:12px!important;font-size:clamp(16px,1.3vw,17.5px)!important;line-height:1.7!important;color:var(--cocoa)!important;max-width:72ch}

  /* benefits */

  /* helps-with editorial grid */
  .hgrid{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  @media(max-width:720px){.hgrid{grid-template-columns:1fr}}
  .hcell{background:var(--porcelain);padding:28px 26px;transition:background .3s}
  .hcell:hover{background:#fff}
  .hcell .hn{font-family:"Fraunces",Georgia,serif;font-size:34px;color:var(--blush);line-height:1;display:block;margin-bottom:14px}
  .hcell p{margin-top:11px;color:var(--taupe);font-size:15px;line-height:1.7}

  /* steps */
  .steps{margin-top:34px;counter-reset:st}
  .step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .stepn{width:40px;height:40px;border-radius:50%;border:1px solid var(--clay);color:var(--clay-ink);display:flex;align-items:center;justify-content:center;font-family:"Fraunces",Georgia,serif;font-size:16px}
  .step h3{font-size:18px}
  .step p{margin-top:7px;color:var(--taupe);font-size:15px;line-height:1.7}

  /* spec sheet */
  .spec{margin-top:30px;border-top:1px solid var(--cocoa)}
  .specrow{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
  @media(max-width:600px){.specrow{grid-template-columns:1fr;gap:5px}}
  .speck{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe);padding-top:3px}
  .specv{color:var(--cocoa);font-size:15.5px;line-height:1.7}

  /* candidacy */
  .fit2{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
  @media(max-width:820px){.fit2{grid-template-columns:1fr}}
  .fitbox{border-radius:12px;padding:26px 24px;border:1px solid var(--line);background:var(--porcelain)}
  .fitbox.alert{background:#FCF6F4;border-color:#EBD6D0}
  .fitbox h3{display:flex;gap:11px;align-items:flex-start}
  .fitbox h3 svg{flex:none;width:21px;height:21px;margin-top:2px;fill:none;stroke-width:2}
  .fitbox.good h3 svg{stroke:#4E7A5A}.fitbox.alert h3 svg{stroke:#B5563F}
  .fitbox ul{margin-top:18px;padding-left:0;list-style:none}
  .fitbox li{padding:10px 0;border-top:1px solid var(--line);color:var(--taupe);font-size:15px;line-height:1.65}
  .fitbox.alert li{border-color:#EBD6D0}

  /* aftercare timeline */
  .tl{margin-top:26px;position:relative;padding-left:30px}
  .tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
  .tlrow{position:relative;padding:12px 0}
  .tlrow::before{content:"";position:absolute;left:-30px;top:23px;width:11px;height:11px;border-radius:50%;background:var(--porcelain);border:2px solid var(--clay)}
  .tlk{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--clay-ink)}
  .tlv{margin-top:6px;color:var(--taupe);font-size:15.5px;line-height:1.7}
  .tl.one{padding-left:0;margin-top:20px}
  .tl.one::before,.tl.one .tlrow::before{display:none}
  .tl.one .tlrow{padding:0}

  /* practitioner */
  .pcards{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media(max-width:820px){.pcards{grid-template-columns:1fr}}
  .pcard{display:flex;gap:20px;align-items:flex-start;background:var(--porcelain);border:1px solid var(--line);border-radius:12px;padding:26px}
  .pcard .tphoto{width:78px;height:78px;margin:0;flex:none}
  .pcard .tphoto::after{font-size:24px}
  .pcard h3{font-size:19px}
  .pcard .tcred{margin-top:6px;font-size:12.5px}
  .pcard .tspec{margin-top:9px;font-size:14px;text-align:left}
  .pcard .tacts{margin-top:15px;padding-top:0;justify-content:flex-start}

  /* pull quote */
  .pquote{background:var(--cocoa);color:#fff;border-radius:12px;padding:52px 46px;text-align:center;margin-top:8px}
  @media(max-width:600px){.pquote{padding:36px 24px}}
  .pquote .st{color:var(--apricot);font-size:19px;letter-spacing:4px}
  .pquote blockquote{margin-top:18px;font-family:"Fraunces",Georgia,serif;font-size:clamp(20px,2.3vw,29px);font-weight:300;line-height:1.55;max-width:34ch;margin-left:auto;margin-right:auto}
  .pquote a{display:inline-block;margin-top:20px;color:var(--apricot);font-weight:600;font-size:13.5px;text-decoration:none}
  .pquote a:hover{text-decoration:underline}

  /* faq */
  .tpage .fitem{border-bottom:1px solid var(--line)}
  .tpage .fq{font-size:17px;padding:22px 0}

  /* end cta */
  .tcta{background:var(--cocoa);color:#fff;text-align:center;padding:72px 0}
  .tcta h2{color:#fff;max-width:24ch;margin:0 auto;font-size:clamp(28px,3.6vw,46px)}
  .tcta p{margin-top:16px;color:rgba(251,248,243,.75);max-width:52ch;margin-left:auto;margin-right:auto;font-size:16.5px}
  .tctaacts{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  /* compact fact chips */
  .facts{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
  .facts li{font-size:13px;color:var(--cocoa);background:var(--oat);border:1px solid var(--line);border-radius:100px;padding:7px 15px;line-height:1.3}
  /* horizontal steps */
  .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 22px;margin-top:28px;counter-reset:st}
  @media(max-width:900px){.steps4{grid-template-columns:repeat(2,1fr);gap:0 20px}}
  @media(max-width:520px){.steps4{grid-template-columns:1fr}}
  .steps4 .step{display:block;padding:0;border-bottom:0;border-top:2px solid var(--clay);padding-top:16px}
  .steps4 .stepn{width:auto;height:auto;border:0;border-radius:0;display:block;font-size:12px;letter-spacing:.2em;color:var(--clay-ink);margin-bottom:8px}
  .steps4 .step h3{font-size:17px}
  .steps4 .step p{font-size:14.5px;line-height:1.65}

  /* USER-CONTROLLED DISCLOSURE (content stays in the DOM) */
  .dischead{display:flex;align-items:baseline;gap:18px;width:100%;background:none;border:0;padding:6px 0 4px;cursor:pointer;text-align:left;font-family:inherit;color:inherit}
  .dischead .tnum{margin-bottom:0;flex:none}
  .dischead h2{flex:1;margin:0}
  .dischead:hover h2{color:var(--clay-ink)}
  .dischead h2{transition:color .2s}
  .discico{flex:none;position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);align-self:center;transition:.25s}
  .discico::before,.discico::after{content:"";position:absolute;left:50%;top:50%;background:var(--clay);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .discico::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
  .discico::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
  .dischead:hover .discico{border-color:var(--clay-ink);background:var(--oat)}
  .dischead[aria-expanded="true"] .discico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
  .discbody{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
  .discin{padding-top:6px}
  @media(prefers-reduced-motion:reduce){.discbody{transition:none}.discico::before,.discico::after{transition:none}}

  /* SECTION TINTS — colour, not numbers, separates the sections */
  .t-shell  {--sec:#FBF8F3}   /* porcelain */
  .t-sand   {--sec:#F4EDE2}   /* oat */
  .t-blush  {--sec:#F0DCD5}   /* blush */
  .t-apricot{--sec:#FAE6D8}   /* apricot, lightened */
  .t-plain{--sec:transparent;padding-left:0;padding-right:0}
  @media(max-width:640px){.tsec{padding:28px 22px;border-radius:12px}}
  /* inner components lift off the tint */
  .tsec .hcell{background:#fff}
  .tsec .hcell:hover{background:#FFFDFA}
  .tsec .hgrid{background:rgba(36,35,34,.10);border-color:transparent}
  .tsec .fitbox{background:#fff;border-color:rgba(36,35,34,.10)}
  .tsec .fitbox.alert{background:#FFF7F4;border-color:rgba(181,86,63,.22)}
  .tsec .facts li{background:#fff;border-color:rgba(36,35,34,.10)}
  .tsec .specrow,.tsec .fitem{border-bottom-color:rgba(36,35,34,.12)}
  .tsec .tl::before{background:rgba(36,35,34,.16)}
  .tsec .tlrow::before{background:var(--sec,var(--porcelain))}
  .tsec .pcard{background:#fff;border-color:rgba(36,35,34,.10)}
  .dischead{padding:0}
  .discico{border-color:rgba(36,35,34,.18)}
  .dischead:hover .discico{background:#fff}

  /* body text on tinted panels: taupe drops under 4.5:1 on the sage tint */
  .tpage .tsec p,.tpage .tsec li,.tpage .tsec dd,.tpage .tsec .tspec,.tpage .tsec .tlv,.tpage .tsec .specv{color:var(--taupe)}

  /* PRICE TABLE */
  .ptab{width:100%;border-collapse:collapse;margin-top:6px}
  .ptab caption{text-align:left;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--taupe);padding-bottom:10px}
  .ptab th{text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--taupe);padding:0 0 10px;border-bottom:1px solid var(--cocoa)}
  .ptab td{padding:14px 0;border-bottom:1px solid rgba(36,35,34,.12);font-size:15.5px;color:var(--taupe);vertical-align:top}
  .ptab td:first-child{color:var(--cocoa);padding-right:18px}
  .ptab .dur{white-space:nowrap;width:88px}
  .ptab .amt{white-space:nowrap;width:92px;text-align:right;font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--cocoa)}

  .pcards.one{grid-template-columns:1fr}
  .pcards.one .pcard{max-width:none}

  /* what each practitioner offers */
  .poffer{list-style:none;padding:0;margin:16px 0 0;text-align:left;border-top:1px solid var(--line)}
  .poffer li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--taupe);line-height:1.4}
  .poffer b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:14.5px;color:var(--cocoa);white-space:nowrap}

  /* ============ PHONE / TABLET LAYOUT (<=900px) ============ */
  /* The clinic clip is landscape, so cropping it to a portrait screen hides most of
     the frame. Below 900px the hero stacks: the whole video, then the words on a
     light ground. No veil over the footage at all. */
  @media(max-width:900px){
    /* PHONES: the clip is a clean band — 90% of it completely untouched, with a milky
       dissolve across only the bottom tenth. The message sits below that dissolve on
       porcelain, in the site's own type colours, because text laid over untouched
       footage measures 1.5-1.6:1 on this clip whatever colour it is. */
    header,header.solid{background:rgba(251,248,243,.96);backdrop-filter:blur(10px);
      box-shadow:0 1px 0 var(--line);padding:12px 0}
    .brand .logo-dark,header.solid .brand .logo-dark{display:block}
    .brand .logo-cream,header.solid .brand .logo-cream{display:none}
    .brand img,header.solid .brand img{height:42px}
    .burger span,header.solid .burger span{background:var(--cocoa)}

    .hero{display:block;min-height:0;height:auto;overflow:visible;
      background:var(--porcelain);padding-top:66px}
    .hscene{position:relative;inset:auto;opacity:1;transition:none;overflow:hidden}
    .hscene:not(.active){display:none}
    .hscene video,.hscene img{position:relative;inset:auto;width:100%;height:auto;
      height:70svh;object-fit:cover;background:var(--porcelain);display:block}
    /* CRYSTAL CLEAR. Nothing is laid over the footage except the milky tenth at its
       foot. To put a scrim back, add a second dark linear-gradient layer here.
       Legibility rests on the glyph shadows below, which sit on the type rather than
       over the image, so the footage keeps its own brightness. */
    .hscene::after{content:"";position:absolute;inset:0;pointer-events:none;background:
      linear-gradient(180deg,rgba(251,248,243,0) 88%,var(--porcelain) 100%)}
    .hveil{display:none}

    .hero-inner{position:static;padding:0;display:block;background:none}
    /* the headline overlays the clip: matching aspect-ratio pins it to the band exactly,
       whatever the screen width */
    .heromsg{position:absolute;top:66px;left:0;width:100%;height:70svh;
      z-index:3;justify-content:center;padding:0 22px 5%;text-align:center}
    .heromsg .eyebrow{color:#FBF8F3;font-size:clamp(10px,1.7vw,14px);letter-spacing:.2em;
      font-weight:700;margin-bottom:10px;
      text-shadow:0 1px 1px rgba(20,18,16,.98),0 1px 4px rgba(20,18,16,.95),
        0 2px 10px rgba(20,18,16,.85),0 0 26px rgba(20,18,16,.7)}
    .heromsg h1{color:#fff;font-size:clamp(30px,9.4vw,40px);line-height:1.06;max-width:15ch;
      text-shadow:0 1px 2px rgba(20,18,16,.7),0 3px 16px rgba(20,18,16,.62),
        0 0 44px rgba(20,18,16,.45)}
    .heromsg h1 em{color:#FFC79E}

    /* actions now ride the footage with the headline -- see the base overlay rules */
    .hero-cta{margin-top:0}
    .hero-cta .primary{padding:17px 28px;font-size:15.5px;
      box-shadow:0 2px 6px rgba(20,18,16,.5),0 12px 28px rgba(20,18,16,.44),
        inset 0 1px 0 rgba(255,255,255,.5)}
    .hrev{gap:9px}
    .hrev .sc{font-size:19px}
    .hrev .cn{font-size:12.5px}

    /* Each section photo becomes the backdrop of its own list, behind a light
       porcelain wash rather than a dark one, so the imagery still reads. */
    .srow{position:relative;overflow:hidden;background:var(--porcelain)}
    .srow .media{position:absolute;inset:0;min-height:0;z-index:0;order:0}
    .srow.flip .media{order:0}
    .srow .media img{width:100%;height:100%;object-fit:cover}
    .srow .media img.aperture{-webkit-mask-image:none;mask-image:none}
    .srow::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background:linear-gradient(180deg,rgba(251,248,243,.72),rgba(251,248,243,.82))}
    .srow .body{position:relative;z-index:2;padding-top:52px;padding-bottom:52px}
    .srow .body .lede,.srow .stpanel .stin{color:#414140}
    .srow .stable{border-top-color:rgba(36,35,34,.22)}
    .srow .strow{border-bottom-color:rgba(36,35,34,.22)}
    .srow .stpanel .sacts .ghost{border-color:rgba(36,35,34,.34)}
    section[id] + section[id] .srow{box-shadow:inset 0 1px 0 rgba(36,35,34,.10)}

    /* founder: section title above the portrait, her name on the portrait */
    .founder .row{display:flex;flex-direction:column;gap:22px}
    .founder .fhead{order:1}
    .founder .pic{order:2}
    .founder .fbody{order:3}
    .founder .fbody .sign,.founder .fbody .role{display:none}
    .founder .picname{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;
      padding:56px 20px 18px;text-align:left;
      background:linear-gradient(180deg,rgba(36,35,34,0),rgba(36,35,34,.88) 42%,rgba(36,35,34,.92))}
    .founder .picname .sign{margin-top:0;color:#FFC79E;font-size:24px;line-height:1.1}
    .founder .picname .role{margin-top:4px;color:rgba(255,255,255,.9);font-size:12px;line-height:1.45}
    .founder .msg{margin-top:0}
  }

  /* ============ HERO / CAROUSEL ALIGNMENT (overrides above) ============ */
  /* logo and menu sit on the footage itself: no bar, and the dark mark because the
     top of the clip is consistently bright (measured L 0.29-0.71 across the clip) */
  header,header.solid{background:none;box-shadow:none;padding:14px 0}
  header.solid{background:rgba(251,248,243,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
  .brand .logo-dark,header.solid .brand .logo-dark{display:block}
  .brand .logo-cream,header.solid .brand .logo-cream{display:none}
  .burger span,header.solid .burger span{background:var(--cocoa)}
  nav.desk>a,nav.desk .navitem{color:var(--cocoa)}

  /* one hero at every width: footage untouched, white type on it, actions below */
  .hero{position:relative;display:block;min-height:0;height:auto;overflow:visible;
    background:var(--porcelain);padding-top:0}
  .hscene{position:relative;inset:auto;opacity:1;transition:none;overflow:hidden}
  .hscene:not(.active){display:none}
  .hscene video,.hscene img{position:relative;inset:auto;width:100%;height:70svh;
    object-fit:cover;background:var(--porcelain);display:block}
  .hscene::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(251,248,243,0) 88%,var(--porcelain) 100%)}
  .hveil{display:none}
  /* ONE OVERLAY AT EVERY WIDTH: headline, button and rating all ride the footage.
     z-index must clear .bandstrip (5), else children cannot escape this context. */
  .hero-inner{position:absolute;top:0;left:0;width:100%;height:70svh;z-index:6;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:56px 22px 6%;background:none}
  .heromsg{position:static;top:auto;left:auto;width:auto;height:auto;padding:0;
    display:flex;flex-direction:column;align-items:center;text-align:center}
  .heromsg .eyebrow{color:#FBF8F3;font-weight:700;letter-spacing:.2em;margin-bottom:12px;
    font-size:clamp(10px,1.1vw,13px);
    text-shadow:0 1px 1px rgba(20,18,16,.98),0 1px 4px rgba(20,18,16,.95),
      0 2px 10px rgba(20,18,16,.85),0 0 26px rgba(20,18,16,.7)}
  .heromsg h1{color:#fff;font-size:clamp(30px,5vw,64px);line-height:1.06;max-width:15ch;
    text-shadow:0 1px 2px rgba(20,18,16,.7),0 3px 16px rgba(20,18,16,.62),
      0 0 44px rgba(20,18,16,.45)}
  .heromsg h1 em{color:#FFC79E}
  .heroacts{background:none;padding:0;margin-top:22px;
    display:flex;flex-direction:column;align-items:center}
  .hero-cta{margin-top:0}
  /* Small text over untouched footage measures 1.5-1.6:1 on this clip whatever colour
     it is. Legibility here rests ENTIRELY on these glyph shadows -- the same stack the
     eyebrow uses, sitting on the type rather than over the image. Do not thin them
     without re-measuring. */
  .hrev{margin-top:13px;color:#fff;text-shadow:0 1px 1px rgba(20,18,16,.98),0 1px 4px rgba(20,18,16,.95),
      0 2px 10px rgba(20,18,16,.85),0 0 26px rgba(20,18,16,.7)}
  .hrev .st{color:#FFD9A8} .hrev .sc{color:#fff} .hrev .cn{color:#fff}
  .bandstrip{margin:0 auto;padding:26px 0 0;background:var(--porcelain)}
  @media(min-width:901px){
    .bandstrip{padding:30px 40px 0}
  }

  /* sections whose picture is now a carousel keep it in flow, not as a backdrop */
  .srow.hascar .media{position:relative;inset:auto;min-height:0;z-index:2}
  .srow.hascar::after{display:none}
  .srow .media .carousel{border-radius:0;margin:0}
  @media(min-width:901px){.srow .media .carousel{height:100%;aspect-ratio:auto;min-height:520px}}
  @media(max-width:900px){
    .srow.hascar{display:block;background:var(--porcelain)}
    .srow.hascar .body{background:var(--porcelain)}
    .srow .media .carousel{aspect-ratio:4/5;min-height:0;max-width:100%}
  }

/* --- kicker above the signature carousel on mobile (title -> carousel -> headline) --- */
.rowkick{display:none}
@media(max-width:900px){
  .srow.hascar{display:flex;flex-direction:column}
  .srow.hascar .rowkick{display:block;order:1;padding:38px 22px 16px;background:var(--porcelain);
    position:relative;z-index:3;color:var(--clay-ink)}
  .srow.hascar .media{order:2}
  .srow.hascar .body{order:3;padding-top:30px}
  .srow.hascar .body>.eyebrow{display:none}
}
.carousel .cinner .ck{text-shadow:0 1px 2px rgba(20,18,16,.9),0 0 12px rgba(20,18,16,.55)}

/* ============ signature carousel: portrait crop, buttons on one row ============ */
.carousel{aspect-ratio:3/4}
@media(min-width:901px){
  .srow .media .carousel{height:auto;aspect-ratio:3/4;min-height:0;max-height:none;
    width:min(100%,520px);margin:0 auto;border-radius:18px;overflow:hidden}
  .srow.hascar .media{display:flex;align-items:center;justify-content:center;padding:56px 40px}
}
@media(max-width:900px){
  .srow.hascar .media .carousel{aspect-ratio:3/4;width:min(100%,420px);margin:0 auto;
    border-radius:16px;overflow:hidden}
  .srow.hascar .media{padding:0 22px}
  .carousel .cacts{display:flex;flex-direction:row;gap:10px;flex-wrap:nowrap;align-items:stretch}
  .carousel .cacts .btn{flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;
    font-size:14px;white-space:nowrap;justify-content:center;text-align:center}
}

/* ============ service pages: crystal-clear hero ============ */
.thero{background:var(--porcelain)}
.thero .therov{display:none}
.thero .crumb{color:#FBF8F3;text-shadow:0 1px 2px rgba(20,18,16,.95),0 0 10px rgba(20,18,16,.6)}
.thero .crumb a{color:#fff}
.thero h1{color:#fff;text-shadow:0 1px 2px rgba(20,18,16,.75),0 2px 10px rgba(20,18,16,.6),0 0 26px rgba(20,18,16,.45)}
.thero h1 em{color:#FFC79E}
.thero .btn.ghost-w{border-color:rgba(255,255,255,.9);color:#fff;
  text-shadow:0 1px 2px rgba(20,18,16,.8);background:rgba(20,18,16,.18)}
.thero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,rgba(251,248,243,0),var(--porcelain))}

/* ============ single-column body (the "On this page" rail is gone) ============ */
.tbodygrid{display:block}
.tanchor{display:block;height:0;scroll-margin-top:calc(var(--sticky-h) + 20px)}

/* ============ tabbed section ============ */
.tabsec{padding-top:34px}
.tabbar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:6px;margin:0 0 26px;background:var(--oat);border-radius:999px;
  position:sticky;top:calc(var(--sticky-h) + 8px);z-index:5}
.tabbar::-webkit-scrollbar{display:none}
.tabpill{flex:0 0 auto;border:0;background:none;cursor:pointer;font:inherit;font-size:14.5px;
  font-weight:600;color:var(--taupe);padding:11px 20px;border-radius:999px;white-space:nowrap;
  transition:background .18s,color .18s}
.tabpill:hover{color:var(--cocoa)}
.tabpill.on{background:var(--porcelain);color:var(--cocoa);box-shadow:0 1px 3px rgba(36,35,34,.14)}
.tabpill:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.tabpanel>h2:first-of-type{margin-top:0}
@media(max-width:700px){.tabpill{font-size:13.5px;padding:10px 15px}.tabbar{margin-bottom:20px}}

/* ============ treatment-process step carousel ============ */
.stepcar{margin-top:6px}
.stepvp{overflow:hidden;border-radius:16px;background:var(--porcelain);border:1px solid var(--line)}
.steptrack{display:flex;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.stepslide{flex:0 0 100%;padding:34px 32px 36px;min-height:196px}
.stepslide .stepn{display:inline-block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--clay-ink);margin-bottom:14px}
.stepslide h3{margin:0 0 10px;font-size:clamp(20px,2.4vw,26px);font-weight:400}
.stepslide p{margin:0;color:#414140;line-height:1.7;max-width:56ch}
.stepnav{display:flex;align-items:center;gap:14px;margin-top:16px}
.stepbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--porcelain);
  color:var(--cocoa);font-size:17px;cursor:pointer;line-height:1;transition:.18s}
.stepbtn:hover:not(:disabled){background:var(--oat);border-color:var(--clay)}
.stepbtn:disabled{opacity:.32;cursor:default}
.stepbtn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.stepcount{font-size:13.5px;color:var(--taupe);letter-spacing:.04em}
.stepcount b{color:var(--cocoa);font-weight:600}
@media(max-width:700px){.stepslide{padding:28px 22px 30px}}

/* ============ fee / insurance plan cards ============ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;align-items:start}
.plan{background:var(--porcelain);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px 26px;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(36,35,34,.06)}
.planhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plan h3{margin:0;font-size:19px;font-weight:500;line-height:1.3}
.planbadge{flex:0 0 auto;background:var(--clay);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.04em;padding:5px 11px;border-radius:999px;white-space:nowrap}
.planprice{margin:16px 0 0;font-size:40px;font-weight:300;letter-spacing:-.02em;color:var(--cocoa)}
.planprice span{font-size:15px;font-weight:500;color:var(--taupe);letter-spacing:0}
.planblurb{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#414140}
.planbtn{margin-top:20px;width:100%;justify-content:center}
.planfeat{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.pfh{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--taupe);margin-bottom:12px}
.planfeat ul{list-style:none;margin:0;padding:0}
.planfeat li{position:relative;padding-left:22px;margin-bottom:10px;font-size:14px;line-height:1.55;color:#414140}
.planfeat li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:5px;
  border-left:1.6px solid var(--clay);border-bottom:1.6px solid var(--clay);transform:rotate(-45deg)}
.planconfirm{margin-top:18px}
@media(max-width:820px){
  .plans{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 22px 6px;margin:0 -22px}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 82%;scroll-snap-align:center}
}
.stepslide .stepn{width:auto;height:auto;border:0;border-radius:0;background:none;padding:0;line-height:1;font-family:"Inter",system-ui,sans-serif}

/* ---- "Learn more" teaser ---- */
.teaser{margin-top:0;color:#414140;line-height:1.75}
.morewrap>p:first-child{margin-top:0}
.morebtn{margin-top:14px;border:1px solid var(--line);background:var(--porcelain);color:var(--cocoa);
  font:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.18s}
.morebtn:hover{background:var(--oat);border-color:var(--clay)}
.morebtn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.mplus{color:var(--clay-ink);font-weight:700}

/* ---- "Right for you" collapsible cells ---- */
.fitacc{display:grid;gap:12px;margin-top:18px}
.fitcell{border:1px solid var(--line);border-radius:14px;background:var(--porcelain);overflow:hidden}
.fitcell.alert{border-color:#E8CFC6}
.fithead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:0;font:inherit;font-size:16px;font-weight:500;color:var(--cocoa);
  text-align:left;padding:18px 20px;cursor:pointer}
.fithead:focus-visible{outline:2px solid var(--clay);outline-offset:-3px}
.fitico{flex:0 0 auto;position:relative;width:15px;height:15px}
.fitico::before,.fitico::after{content:"";position:absolute;background:var(--clay-ink);border-radius:2px}
.fitico::before{left:0;top:6.5px;width:15px;height:2px}
.fitico::after{left:6.5px;top:0;width:2px;height:15px;transition:transform .2s}
.fitcell.open .fitico::after{transform:scaleY(0)}
.fitbody{padding:0 20px 20px}
.fitbody ul{margin:0;padding-left:20px}
.fitbody li{margin-bottom:8px;color:#414140;line-height:1.6}

/* ---- price boxes: equal height, single card capped ---- */
.plans{align-items:stretch}
.plan{height:100%}
.planblurb{flex:1 0 auto}
.plans.one{grid-template-columns:minmax(0,380px);justify-content:start}
@media(max-width:820px){.plans.one{display:block;padding:2px 0 6px;margin:0}.plans.one .plan{width:100%}}
.planhead{min-height:50px}
.planblurb{flex:1 1 auto}

/* ---- two alternating gradient section grounds ---- */
.t-g1{background:linear-gradient(155deg,#FDFBF7 0%,#F7F0E6 55%,#F3EADD 100%)}
.t-g2{background:linear-gradient(155deg,#FCF3EB 0%,#F7E7DA 60%,#F2DECE 100%)}
.t-g1,.t-g2{padding-left:40px;padding-right:40px}
@media(max-width:700px){.t-g1,.t-g2{padding-left:22px;padding-right:22px}}
.t-g2 .tabbar{background:rgba(255,255,255,.55)}
.t-g2 .tabpill.on{background:#FDFBF7}
/* the tab pill titles already name each panel */
.tabpanel>h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tabsec{padding-top:30px}

/* ================= HOMEPAGE ================= */
/* two-column "Bodywork" mega dropdown */
.drop2{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;min-width:560px;padding:20px 22px}
.drop2 .dcol{display:flex;flex-direction:column}
.dch{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--clay-ink);
  padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.mch{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--clay-ink);margin:16px 0 4px}
.msub .mch:first-child{margin-top:6px}

/* section kicker: louder */
.srow .body>.eyebrow,.rowkick{font-size:13px;letter-spacing:.16em;font-weight:700;color:var(--clay)}
.srow .body>.eyebrow{display:inline-flex;align-items:center;gap:12px}
.srow .body>.eyebrow::after{content:"";width:38px;height:2px;background:var(--clay);opacity:.45}

/* image + list: closer together and centred */
@media(min-width:901px){
  .srow{max-width:1200px;margin:0 auto;grid-template-columns:440px minmax(0,1fr);gap:56px;align-items:center}
  .srow .media{min-height:0;padding:0;border-radius:18px;overflow:hidden}
  .srow:not(.hascar) .media{aspect-ratio:3/4}
  .srow.hascar .media{display:block;padding:0}
  .srow .media .carousel{width:100%;max-width:none;margin:0;aspect-ratio:3/4;min-height:0;height:auto}
  .srow .body{padding:64px 0}
  .srow.flip{grid-template-columns:minmax(0,1fr) 440px}
  .srow.flip .media{order:2}
  #begin.services{padding-bottom:24px}
  #begin.services .head{margin-bottom:8px}
}

/* ================= SERVICE PAGES ================= */
/* full-width gradient bands instead of rounded boxes */
.tband{padding:58px 0}
.tband>.wrap{max-width:1080px}
.tband.t-g1,.tband.t-g2{padding-left:0;padding-right:0}
.tband.qa2{padding:40px 0 38px}
.tband.qa2 p{text-align:center;margin:0 auto!important;max-width:70ch;
  font-size:clamp(14.5px,1.15vw,16.5px)!important;line-height:1.75!important;color:#3B3A39!important}
.tband.t-plain,.tband.faq{padding-left:0;padding-right:0}
.tband>.wrap>h2:first-child{margin-top:0}
@media(max-width:700px){.tband{padding:42px 0}}

/* hero title: full service name in the display face */
.thero h1 em{font-style:italic;font-weight:400;color:#FFC79E;display:inline}

/* step carousel: arrows flank the cell, no counter */
.stepcar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
.stepvp{min-width:0}
.stepcount{display:none}
@media(max-width:700px){
  .stepcar{gap:8px}
  .stepbtn{width:36px;height:36px;font-size:15px}
  .stepslide{padding:26px 18px 28px}
}

/* fee cards: one row, badge overlapping the corner */
.plan{position:relative;overflow:visible}
.planhead{min-height:0;display:block}
.plan h3{font-size:17px;min-height:2.5em;display:flex;align-items:flex-start}
.planbadge{position:absolute;top:-12px;left:18px;box-shadow:0 2px 6px rgba(36,35,34,.18)}
@media(max-width:820px){.planbadge{top:-11px}}

/* practitioners: photo on top, bio behind a toggle */
.pcard{flex-direction:column;align-items:center;text-align:center;gap:0}
.pcard .tphoto{width:132px;height:132px;margin:0 0 18px}
.pinfo{width:100%}
.pcard h3{margin:0}
.pcard .tspec{margin-top:0}
.biobtn{margin-top:14px;border:1px solid var(--line);background:var(--porcelain);color:var(--cocoa);
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;padding:8px 16px;border-radius:999px;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.18s}
.biobtn:hover{background:var(--oat);border-color:var(--clay)}
.biobtn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.biobody{margin-top:12px}
.pcard .tacts{margin-top:16px;display:flex;justify-content:center}
.drop2{left:auto;right:0;min-width:0;width:600px;max-width:min(600px,calc(100vw - 48px))}
.drop2 a{white-space:normal;line-height:1.35;padding:9px 10px}
/* long service names must fit the hero */
.thero h1{font-size:clamp(30px,4.2vw,56px);line-height:1.08;max-width:20ch}
/* single practitioner card shouldn't stretch */
.pcards.one{grid-template-columns:minmax(0,420px);justify-content:center}
.whobody{margin-top:6px}
/* mobile fee carousel: no forced title height, room for the badge */
@media(max-width:820px){
  .plan h3{min-height:0}
  .plans{padding-top:20px}
}

/* ===== service page: section titles in the homepage kicker format ===== */
.tband>.wrap>h2{font-family:"Inter",system-ui,sans-serif;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--clay);margin:0 0 22px;line-height:1.2;
  white-space:nowrap;font-style:normal}
@media(max-width:430px){.tband>.wrap>h2{font-size:11px;letter-spacing:.12em}}
.tband.qa2>.wrap>h2{display:none}

/* ===== tab bar: centred, clearer, brand border on the active pill ===== */
.tabbar{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;justify-content:flex-start}
.tabpill{border:1px solid transparent;color:#5C5B58}
.tabpill:hover{color:var(--clay-ink);background:rgba(255,255,255,.5)}
.tabpill.on{background:#FDFBF7;color:var(--clay-ink);border-color:var(--clay);
  box-shadow:0 1px 4px rgba(166,83,67,.18)}
.t-g2 .tabpill.on{background:#FDFBF7}

/* ===== practitioner card: Book + Bio on one line ===== */
.pcard .tacts{margin-top:16px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.pcard .tacts .biobtn{margin-top:0}

/* ===== homepage: the three service rows sit on the "begin" ground ===== */
#begin.services>section,
#begin.services .srow,
#begin.services .srow.hascar,
#begin.services .srow.hascar .body,
#begin.services .srow.hascar .rowkick{background:transparent}
#begin.services{padding-bottom:72px}
@media(max-width:640px){#begin.services{padding-bottom:48px}}
.tband>.wrap>h2{max-width:none}

/* signature carousel awaiting final creative from the clinic */
.carousel.tbc{background:linear-gradient(155deg,#F7EFE5 0%,#EFE0D2 55%,#E9D6C7 100%)}
.carousel.tbc .cslide::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 30% 25%,rgba(255,255,255,.55),transparent 65%)}
.carousel.tbc .cinner{position:relative;z-index:2}
.carousel.tbc .cinner .ck{color:var(--clay-ink);text-shadow:none}
.carousel.tbc .cinner h3{color:var(--cocoa);text-shadow:none}
.carousel.tbc .cinner p{color:#4A4846;text-shadow:none}
.carousel.tbc .cinner .btn.explore{border-color:var(--cocoa);color:var(--cocoa);background:transparent}
.tbcflag{position:absolute;top:16px;left:16px;z-index:3;background:rgba(36,35,34,.82);color:#FBF8F3;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.carousel.tbc .cctl .cdot{background:rgba(36,35,34,.28)}
.carousel.tbc .cctl .cdot.active{background:var(--clay)}
.carousel.tbc .cpause{background:rgba(36,35,34,.7);color:#FBF8F3;border-color:transparent}
.carousel.tbc .cslide .cinner{background:none;position:absolute;inset:0;z-index:2}
.tbcflag{top:auto;bottom:16px;left:auto;right:16px}
.carousel.tbc .cinner .cacts .btn.explore{color:var(--cocoa);border-color:rgba(36,35,34,.55);background:rgba(255,255,255,.35)}
.carousel.tbc .cinner .cacts .btn.explore .ar{color:var(--cocoa)}
.tbcflag{top:54px;left:18px;bottom:auto;right:auto}
.carousel.tbc .cslide .explore{color:var(--cocoa)!important}

  /* DESKTOP: same overlay, just roomier spacing. Layout itself is in the base
     block above, shared with mobile. */
  @media(min-width:901px){
    .hero-inner{padding:56px 40px 4%}
    .heroacts{margin-top:28px}
    .hrev{margin-top:15px}
  }


  /* Service pages sit the transparent header on a DARK hero image, so it needs the
     light treatment. The homepage keeps the dark one because its footage is bright.
     Measured before this fix: nav links 1.69:1 (buccals) and 1.19:1 (TMJ) against
     a 4.5:1 requirement -- effectively invisible. Reverts on scroll via .solid. */
  body.svc header:not(.solid) nav.desk>a,
  body.svc header:not(.solid) nav.desk .navitem{color:#FBF8F3;
    text-shadow:0 1px 2px rgba(20,18,16,.9),0 2px 9px rgba(20,18,16,.65)}
  body.svc header:not(.solid) .brand .logo-dark{display:none}
  body.svc header:not(.solid) .brand .logo-cream{display:block}
  body.svc header:not(.solid) .burger span{background:#FBF8F3}

  /* Carousel Book button: translucent champagne so the clip reads through it.
     Alpha is .74, not lower, and that is a measured floor rather than taste. The
     composite over a dark clip is what carries the cocoa label:
       alpha .46 + brightness(1.62)  ->  1.63:1  (brightness is multiplicative, so it
                                                  barely lifts a near-black frame)
       alpha .62 plain               ->  1.82:1 darkest patch
       alpha .74 plain               ->  see numbers in media-pipeline.md
     Blur stays for the frosted-glass read. Lower the alpha and the label fails on the
     buccal clip first -- re-measure both carousels if you touch it. */
  .cslide .cacts .btn:not(.explore){
    background:linear-gradient(160deg,rgba(242,231,196,.82),rgba(223,201,131,.78) 38%,
      rgba(176,147,76,.76) 100%);
    -webkit-backdrop-filter:blur(6px) saturate(1.06);
    backdrop-filter:blur(6px) saturate(1.06);
    color:var(--cocoa)!important;
    box-shadow:0 1px 3px rgba(20,18,16,.34),inset 0 1px 0 rgba(255,255,255,.45)}
  .cslide .cacts .btn:not(.explore):hover{
    background:linear-gradient(160deg,rgba(242,231,196,.92),rgba(212,187,108,.9) 38%,
      rgba(172,143,69,.88) 100%);
    box-shadow:0 3px 10px rgba(20,18,16,.4),inset 0 1px 0 rgba(255,255,255,.52)}

  /* mobile: .cctl sits at top:12px with 28px controls */
  @media(max-width:900px){.cslide .cinner{padding:52px 22px 22px}}

/* ==========================================================================
   SERVICE-PAGE COMPONENTS — all scoped to body.svc so index.html cannot
   regress. Added for the Sept 2026 brief: real fee tables, appointment
   summary, and the contextual comparison block.
   ========================================================================== */

/* compact appointment summary, sits under the page intro */
body.svc .apptsum{margin:18px auto 0;max-width:760px;font-size:14.5px;color:var(--taupe);
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:center;line-height:1.6}
body.svc .apptsum .apptk{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--clay);background:rgba(166,83,67,.09);padding:4px 9px;border-radius:3px}
body.svc .apptsum a{color:var(--clay-ink);font-weight:600}

/* fee tables */
body.svc .feewrap{margin-top:26px}
body.svc .feelead{max-width:62ch;font-size:16px}
body.svc .feegrp{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--clay);margin:26px 0 10px}
body.svc .feegrp:first-child{margin-top:0}
body.svc .feetable{width:100%;border-collapse:collapse;margin-bottom:6px;font-size:15px}
body.svc .feetable th,body.svc .feetable td{text-align:left;padding:13px 14px;
  border-bottom:1px solid var(--line);vertical-align:top}
body.svc .feetable thead th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);font-weight:700;border-bottom:1.5px solid var(--line);padding-top:0}
body.svc .feetable tbody th{font-weight:500;color:var(--cocoa)}
body.svc .feetable .feeamt{font-weight:700;white-space:nowrap}
body.svc .feetable .feewho{color:var(--taupe);font-size:14px}
body.svc .feenote,body.svc .feesrc{max-width:66ch;font-size:14px;color:var(--taupe);margin-top:14px}
body.svc .feesrc{font-size:13px;font-style:italic}
body.svc .feewrap>.btn{margin-top:20px}
body.svc .feebill{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
body.svc .feebill .pfh{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--clay);margin-bottom:10px}
body.svc .feebill ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--taupe);line-height:1.75}

/* comparison block */
body.svc .cmpsec .wrap{max-width:1080px}
body.svc .cmplead{max-width:64ch;margin-top:10px;font-size:16px;color:var(--taupe)}
body.svc .cmpgrid{display:grid;gap:18px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
body.svc .cmpopt{background:#FDFBF7;border:1px solid var(--line);border-radius:8px;
  padding:20px 20px 18px;display:flex;flex-direction:column}
body.svc .cmpopt h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:19px;
  margin-bottom:8px;line-height:1.25}
body.svc .cmpopt p{font-size:14.5px;color:var(--taupe);flex:1 1 auto;line-height:1.6}
body.svc .cmpopt .cmplink{margin-top:14px;font-size:13.5px;font-weight:600;
  color:var(--clay-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
body.svc .cmpopt .cmplink:hover{text-decoration:underline}
body.svc .cmpopt.is-here{background:var(--oat);border-color:rgba(166,83,67,.34)}
body.svc .cmpopt.is-here h3::after{content:"You are here";display:block;font-family:"Inter",sans-serif;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--clay);margin-top:6px}
body.svc .cmpask{margin-top:22px;font-size:14.5px;color:var(--taupe)}
body.svc .cmpask a{color:var(--clay-ink);font-weight:600}

@media(max-width:640px){
  /* comparison: one column, and let grid items shrink below their content width.
     Without min-width:0 a grid item refuses to go under its min-content size and
     pushes the whole page wider — this was 13px of horizontal overflow at 390. */
  body.svc .cmpgrid{grid-template-columns:1fr}
  body.svc .cmpopt{min-width:0}
  body.svc .cmpopt h3,body.svc .cmpopt p,body.svc .cmpopt .cmplink,
  body.svc .cmplead,body.svc .cmpask{overflow-wrap:anywhere}
  /* stack the fee table into cards — a 4-column table overflows at 390px */
  body.svc .feetable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body.svc .feetable,body.svc .feetable tbody,body.svc .feetable tr,
  body.svc .feetable th,body.svc .feetable td{display:block;width:100%}
  body.svc .feetable tr{border:1px solid var(--line);border-radius:7px;padding:14px 15px;
    margin-bottom:12px;background:#FDFBF7}
  body.svc .feetable th,body.svc .feetable td{border:0;padding:0}
  body.svc .feetable tbody th{font-weight:600;font-size:15.5px;margin-bottom:8px}
  body.svc .feetable td{font-size:14px;color:var(--taupe)}
  body.svc .feetable .feeamt{display:inline-block;font-size:17px;color:var(--cocoa);margin-right:10px}
  body.svc .feetable td:nth-of-type(1){display:inline-block;color:var(--taupe)}
  body.svc .apptsum{justify-content:flex-start;text-align:left}
}

/* Section titles are deliberately single-line (`.tband>.wrap>h2` has
   white-space:nowrap) — that suits short labels like "Fees & booking".
   The comparison and FAQ headings are reader-facing questions and are far
   longer, so they were overflowing the viewport by up to 106px at 390.
   Let just those two wrap; every other section title keeps the one-line style. */
body.svc .cmpsec>.wrap>h2,
body.svc .tband.faq>.wrap>h2{white-space:normal;max-width:28ch;text-wrap:balance}
@media(max-width:430px){
  body.svc .cmpsec>.wrap>h2,
  body.svc .tband.faq>.wrap>h2{max-width:none}
}

/* ==========================================================================
   CONDITION PAGES — scoped to body.cond. Pilot: musculoskeletal & orthopedic.
   Nothing here touches index.html or the service pages.
   ========================================================================== */
body.cond{--cw:1180px}

/* --- editorial hero ------------------------------------------------------ */
body.cond .chero{position:relative;min-height:min(84svh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--cocoa)}
body.cond .chero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%}
body.cond .chero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(185deg,rgba(20,18,16,.62) 0%,rgba(20,18,16,.20) 34%,rgba(20,18,16,.34) 62%,rgba(20,18,16,.80) 100%)}
body.cond .cheroin{position:relative;z-index:2;width:100%;max-width:var(--cw);margin:0 auto;
  padding:150px 30px 58px;color:#fff}
body.cond .ceyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#F2E7C4;
  text-shadow:0 1px 2px rgba(20,18,16,.9),0 2px 10px rgba(20,18,16,.7)}
body.cond .ceyebrow::before{content:"";width:34px;height:1.5px;background:#DFC983}
body.cond .chero h1{font-family:"Fraunces",Georgia,serif;font-weight:300;color:#fff;
  font-size:clamp(38px,7.4vw,86px);line-height:.98;letter-spacing:-.028em;margin:20px 0 0;max-width:19ch;
  text-shadow:0 2px 4px rgba(20,18,16,.6),0 4px 28px rgba(20,18,16,.55)}
body.cond .chero h1 em{font-style:italic;color:#F2E7C4}
body.cond .chero .clede{margin-top:22px;max-width:56ch;font-size:clamp(16px,1.35vw,19px);
  line-height:1.62;color:rgba(255,255,255,.94);
  text-shadow:0 1px 2px rgba(20,18,16,.85),0 2px 12px rgba(20,18,16,.6)}
body.cond .cheroacts{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* --- shared section frame ----------------------------------------------- */
body.cond .cband{padding:clamp(58px,7vw,104px) 0}
body.cond .cband>.wrap{max-width:var(--cw);margin:0 auto;padding:0 30px}
body.cond .c-g1{background:
  radial-gradient(1100px 520px at 12% -10%,#EEF3EE 0%,transparent 62%),
  radial-gradient(900px 460px at 92% 8%,#FBEDE2 0%,transparent 58%),var(--porcelain)}
body.cond .c-g2{background:var(--oat)}
body.cond .cnum{display:block;font-family:"Fraunces",Georgia,serif;font-size:13px;
  letter-spacing:.2em;color:var(--clay);margin-bottom:12px}
body.cond .cband h2{font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;max-width:24ch;color:var(--cocoa)}
body.cond .cband .csub{margin-top:16px;max-width:62ch;font-size:16.5px;line-height:1.68;color:var(--taupe)}

/* --- region selector ---------------------------------------------------- */
body.cond .regbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
body.cond .regchip{appearance:none;border:1px solid var(--line);background:#FDFBF7;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--cocoa);
  padding:12px 20px;border-radius:999px;transition:background .18s,border-color .18s,transform .18s;
  display:inline-flex;align-items:center;gap:9px;min-height:46px}
body.cond .regchip:hover{background:var(--oat);transform:translateY(-1px)}
body.cond .regchip[aria-pressed="true"]{background:linear-gradient(160deg,#F2E7C4,#DFC983 46%,#B0934C);
  border-color:transparent;box-shadow:0 1px 3px rgba(20,18,16,.22),inset 0 1px 0 rgba(255,255,255,.5)}
body.cond .regchip:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
body.cond .regcount{margin-top:22px;font-size:14.5px;color:var(--taupe);min-height:1.5em}
body.cond .regcount b{color:var(--cocoa)}
body.cond .regreset{background:none;border:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--clay-ink);cursor:pointer;text-decoration:underline;padding:0;margin-left:10px}

/* --- service match cards ------------------------------------------------ */
body.cond .matchgrid{display:grid;gap:20px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
body.cond .mcard{position:relative;display:flex;flex-direction:column;min-width:0;
  background:#FDFBF7;border:1px solid var(--line);border-radius:11px;padding:26px 25px 24px;
  transition:box-shadow .22s,transform .22s,border-color .22s}
body.cond .mcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(36,35,34,.09);
  border-color:rgba(166,83,67,.28)}
body.cond .mcard[hidden]{display:none}
body.cond .mcard .mstart{position:absolute;top:-11px;left:24px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--clay);
  padding:5px 11px;border-radius:3px}
body.cond .mcard h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:22px;
  line-height:1.22;margin-bottom:6px}
body.cond .mcard h3 a{color:var(--cocoa);text-decoration:none}
body.cond .mcard h3 a:hover{text-decoration:underline}
body.cond .mmeta{font-size:13px;color:var(--taupe);letter-spacing:.02em;margin-bottom:13px}
body.cond .mmeta .mdot{opacity:.5;margin:0 7px}
body.cond .mcard p{font-size:15px;line-height:1.62;color:var(--taupe);flex:1 1 auto}
body.cond .mtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
body.cond .mtag{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--clay-ink);
  background:rgba(166,83,67,.08);padding:5px 10px;border-radius:999px}
body.cond .macts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
body.cond .macts .btn{font-size:14px;padding:13px 22px;min-height:46px}
body.cond .mghost{background:none!important;border:1px solid rgba(36,35,34,.3);
  color:var(--cocoa)!important;box-shadow:none!important;font-weight:600;font-size:14px;
  padding:13px 20px;border-radius:2px;text-decoration:none;display:inline-flex;align-items:center;
  gap:7px;min-height:46px}
body.cond .mghost:hover{background:var(--oat)!important}
body.cond .noresult{margin-top:26px;padding:24px 26px;background:#FDFBF7;border:1px dashed var(--line);
  border-radius:10px;font-size:15.5px;color:var(--taupe)}

/* --- assessment steps --------------------------------------------------- */
body.cond .stepgrid{display:grid;gap:22px;margin-top:36px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
body.cond .cstep{min-width:0;padding-top:22px;border-top:2px solid var(--clay)}
body.cond .cstep .sn{font-family:"Fraunces",Georgia,serif;font-size:34px;font-weight:300;
  color:var(--clay);line-height:1;display:block;margin-bottom:12px}
body.cond .cstep h3{font-size:17px;font-weight:600;margin-bottom:8px}
body.cond .cstep p{font-size:14.5px;line-height:1.64;color:var(--taupe)}

/* --- safety block ------------------------------------------------------- */
body.cond .safety{background:#FDFBF7;border:1px solid var(--line);border-left:3px solid var(--clay);
  border-radius:9px;padding:28px 30px;margin-top:32px}
body.cond .safety h3{font-size:16.5px;font-weight:600;margin-bottom:14px}
body.cond .safety ul{margin:0;padding-left:20px;font-size:15px;line-height:1.85;color:var(--taupe)}

/* --- closing CTA -------------------------------------------------------- */
body.cond .cclose{background:var(--cocoa);color:#fff;padding:clamp(56px,6.5vw,92px) 0;text-align:center}
body.cond .cclose h2{color:#fff;margin:0 auto;max-width:22ch}
body.cond .cclose p{margin:18px auto 0;max-width:52ch;color:rgba(255,255,255,.82);font-size:16.5px}
body.cond .cclose .cheroacts{justify-content:center}

/* --- reveal (disabled for reduced motion) ------------------------------- */
body.cond .rvl{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
body.cond .rvl.seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.cond .rvl{opacity:1;transform:none;transition:none}
  body.cond .mcard,body.cond .regchip{transition:none}
}
/* no-JS: never leave content hidden behind a reveal that will not fire */
body.cond.nojs .rvl{opacity:1;transform:none}

@media(max-width:900px){
  body.cond .cheroin{padding:120px 22px 44px}
  body.cond .cband>.wrap{padding:0 22px}
}
@media(max-width:640px){
  body.cond .matchgrid{grid-template-columns:1fr}
  body.cond .regchip{font-size:14px;padding:11px 16px}
  body.cond .macts .btn,body.cond .mghost{flex:1 1 auto;justify-content:center}
  body.cond .safety{padding:22px 20px}
}

/* ==========================================================================
   HOMEPAGE AREA MATCHER — every selector is scoped to #hurt, so nothing here
   can reach any other section or any other page. Added 2026-09-09 at Jenny's
   request; see HOMEPAGE-CHANGE-LOG.json. Delete this block to revert.
   ========================================================================== */
#hurt{position:relative;background:linear-gradient(180deg,var(--porcelain) 0,#F7F2EA 58%,var(--oat) 100%)}
#hurt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 62% at 84% 8%,rgba(234,216,210,.42),transparent 62%)}
#hurt>.wrap{position:relative;z-index:1;max-width:1180px}

#hurt .hurthead{max-width:760px;margin:0 auto 34px;text-align:center}
#hurt .hurthead h2{font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(30px,4.4vw,54px);line-height:1.06;letter-spacing:-.01em}
#hurt .hurthead h2 em{font-style:italic;color:var(--clay-ink)}
#hurt .hurtsub{margin:18px auto 0;max-width:60ch;font-size:16.5px;line-height:1.68;color:var(--taupe)}

/* --- chips ---------------------------------------------------------------- */
#hurt .hurtbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px;margin-top:6px}
#hurt .hchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
#hurt .hchip{appearance:none;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;
  letter-spacing:.01em;color:var(--cocoa);background:#FDFBF7;border:1px solid var(--line);
  border-radius:999px;padding:11px 20px;min-height:44px;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
#hurt .hchip:hover{background:var(--oat);transform:translateY(-1px)}
#hurt .hchip[aria-pressed="true"]{color:var(--cocoa);border-color:#B0934C;
  background:linear-gradient(160deg,#F2E7C4 0,#DFC983 42%,#C9AD62 72%,#B0934C 100%);
  box-shadow:0 4px 14px rgba(176,147,76,.28)}
#hurt .hchip:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
#hurt .hclear{appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  font-size:14px;font-weight:600;color:var(--clay-ink);text-decoration:underline;
  text-underline-offset:3px;padding:8px 4px;min-height:40px}
#hurt .hclear:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
#hurt .hurtcount{margin:20px 0 0;text-align:center;font-size:14.5px;color:var(--taupe);min-height:1.5em}

/* --- cards --------------------------------------------------------------- */
#hurt .hurtgrid{display:grid;gap:20px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
#hurt .hcard{position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 26px 24px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
#hurt .hcard::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;
  background:var(--clay);opacity:0;transition:opacity .3s ease}
#hurt .hcard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(36,35,34,.09);
  border-color:#D9CDBB}
#hurt .hcard:hover::after{opacity:1}
#hurt .hcard[hidden]{display:none}
#hurt .hstart{position:absolute;top:-11px;left:24px;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#4A3C18;border-radius:999px;
  padding:5px 12px;background:linear-gradient(160deg,#F2E7C4,#DFC983 60%,#C9AD62)}
#hurt .hcard h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:21px;
  line-height:1.24;margin:6px 0 9px}
#hurt .hcard h3 a{color:var(--cocoa);text-decoration:none}
#hurt .hcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
#hurt .hmeta{font-size:13px;color:var(--taupe);letter-spacing:.02em;margin:0 0 12px}
#hurt .hmeta .hdot{opacity:.5;margin:0 7px}
#hurt .hwhy{margin:0;font-size:15px;line-height:1.62;color:var(--taupe);flex:1 1 auto}
#hurt .htags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
#hurt .htag{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--taupe);
  background:rgba(36,35,34,.045);border:1px solid transparent;border-radius:999px;
  padding:4px 11px;transition:background .25s ease,color .25s ease,border-color .25s ease}
#hurt .htag.on{color:#4A3C18;font-weight:600;border-color:#DFC983;
  background:linear-gradient(160deg,rgba(242,231,196,.9),rgba(223,201,131,.85))}
#hurt .hacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}

/* --- footer link --------------------------------------------------------- */
#hurt .hurtmore{margin:34px 0 0;text-align:center}
#hurt .hurtmore a{font-size:15px;font-weight:600;color:var(--clay-ink);text-decoration:none;
  border-bottom:1px solid rgba(138,64,52,.35);padding-bottom:3px;
  display:inline-flex;align-items:center;gap:8px}
#hurt .hurtmore a:hover{border-bottom-color:var(--clay-ink)}
#hurt .hurtmore .ar{transition:transform .25s ease}
#hurt .hurtmore a:hover .ar{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  #hurt .hcard,#hurt .hchip,#hurt .hurtmore .ar{transition:none}
}
@media(max-width:640px){
  #hurt .hchip{font-size:14px;padding:10px 16px}
  #hurt .hurtgrid{grid-template-columns:1fr}
  #hurt .hcard{padding:24px 20px 22px}
  #hurt .hacts .btn{flex:1 1 auto;justify-content:center}
  /* let the arrow stay on the last line of text instead of floating right */
  #hurt .hurtmore a{display:inline;border-bottom:0;text-decoration:underline;
    text-decoration-color:rgba(138,64,52,.4);text-underline-offset:4px}
}

/* ==========================================================================
   TEMPLATE v2 — service pages (body.sv2) and condition pages (body.cn2).
   Additive. Every selector is scoped to .sv2 or .cn2, so index.html and
   team.html cannot regress. Nothing here reuses .tband / .tpage / .cond,
   so the old templates keep working side by side during rollout.

   Accent: P1 Champagne on CTAs, clay on eyebrows and key numbers. No apricot.
   Band rhythm: cream -> white -> oat -> white -> cream ...  Eucalyptus appears
   only as a card tint, never as a full band.
   ========================================================================== */
.sv2, .cn2{--cw:1200px; --prose:720px; --euc-tint:#EDF3EE; --amber:#8A6220;
  --amber-bg:#FBF5EA; --amber-line:#E5D3B0; --euc-line:#CBDCD0}

/* ---------- shared band system ------------------------------------------ */
.sv2 .s2band, .cn2 .s2band{padding:clamp(56px,6.4vw,96px) 0;position:relative}
.sv2 .s2band>.wrap, .cn2 .s2band>.wrap{max-width:var(--cw)}
.sv2 .g-cream, .cn2 .g-cream{background:var(--porcelain)}
.sv2 .g-white, .cn2 .g-white{background:#fff}
.sv2 .g-oat,   .cn2 .g-oat{background:var(--oat)}
.sv2 .g-dark,  .cn2 .g-dark{background:var(--cocoa);color:#fff}
.sv2 .s2head, .cn2 .s2head{max-width:var(--prose)}
.sv2 .s2band h2, .cn2 .s2band h2{font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.1vw,40px);line-height:1.14;letter-spacing:-.01em;
  margin:12px 0 0;white-space:normal;text-wrap:balance;max-width:26ch}
.sv2 .s2band h2 em, .cn2 .s2band h2 em{font-style:italic;color:var(--clay-ink)}
.sv2 .g-dark h2, .cn2 .g-dark h2{color:#fff}
.sv2 .g-dark h2 em, .cn2 .g-dark h2 em{color:var(--gold-1,#F2E7C4)}
.sv2 .s2prose, .cn2 .s2prose{max-width:var(--prose);margin-top:22px}
.sv2 .s2prose p, .cn2 .s2prose p{font-size:16.5px;line-height:1.75;color:var(--taupe);
  margin:0 0 17px}
.sv2 .s2prose p:last-child, .cn2 .s2prose p:last-child{margin-bottom:0}
.sv2 .s2band>.wrap>.eyebrow, .cn2 .s2band>.wrap>.eyebrow{display:block}

/* ---------- hero -------------------------------------------------------- */
.sv2 .s2hero, .cn2 .s2hero{position:relative;min-height:min(88svh,780px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--cocoa)}
.sv2 .s2hero>picture, .cn2 .s2hero>picture{position:absolute;inset:0;display:block}
.sv2 .s2hero>picture>img, .cn2 .s2hero>picture>img{width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;display:block}
/* Dark-green wash, built as an editorial vignette rather than a flat scrim:
   darkening is concentrated in the header zone at the top and the copy zone at
   the bottom-left, so the middle of the frame stays clear. Every stop below was
   set by measuring the composited pixels behind the real glyphs - see the
   verification report for the numbers. */
.sv2 .s2hero::after, .cn2 .s2hero::after{content:"";position:absolute;inset:0;
  pointer-events:none;background:
    /* 1. behind the fixed header */
    linear-gradient(180deg,rgba(14,22,18,.66) 0,rgba(14,22,18,.34) 96px,
                    transparent 210px),
    /* 2. behind the crumb, H1, chips and trust line */
    linear-gradient(0deg,rgba(11,19,15,.90) 0,rgba(11,19,15,.70) 24%,
                    rgba(11,19,15,.22) 52%,transparent 70%),
    /* 3. left weighting for the copy column */
    linear-gradient(90deg,rgba(13,21,17,.56) 0,rgba(13,21,17,.18) 52%,transparent 78%),
    /* 4. a soft pool under the copy column itself, so 13px text clears AA
          without darkening the right half of the frame */
    radial-gradient(125% 88% at 0% 100%,rgba(9,16,13,.72) 0,rgba(9,16,13,.34) 42%,
                    transparent 66%)}
.sv2 .s2heroin, .cn2 .s2heroin{position:relative;z-index:2;width:100%;
  max-width:var(--cw);margin:0 auto;padding:150px 40px 52px}
/* The crumb sits in the deliberately clear middle of the frame, where 13px
   white measured 4.02:1. It gets its own translucent backdrop rather than a
   heavier scrim, so the still stays crisp and the number still clears AA. */
.sv2 .s2hero .crumb, .cn2 .s2hero .crumb{display:inline-flex;flex-wrap:wrap;
  align-items:center;gap:7px;color:#fff;font-size:13px;margin:0 0 22px;
  background:rgba(9,16,13,.56);backdrop-filter:blur(7px);border-radius:999px;
  padding:8px 16px;line-height:1.4}
.sv2 .s2hero .crumb a, .cn2 .s2hero .crumb a{color:#fff;font-weight:600;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.sv2 .s2hero .crumb a:hover, .cn2 .s2hero .crumb a:hover{border-bottom-color:#fff}
.sv2 .s2hero h1, .cn2 .s2hero h1{font-family:"Fraunces",Georgia,serif;font-weight:300;
  color:#fff;font-size:clamp(33px,5.1vw,66px);line-height:1.04;letter-spacing:-.018em;
  max-width:22ch;margin:0;text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 3px 22px rgba(0,0,0,.45)}
.sv2 .s2hero h1 em, .cn2 .s2hero h1 em{font-style:italic;color:#F2E7C4}
.sv2 .s2vp, .cn2 .s2vp{margin:20px 0 0;max-width:50ch;font-size:clamp(16px,1.3vw,18.5px);
  line-height:1.62;color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sv2 .s2chips, .cn2 .s2chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.sv2 .s2chip, .cn2 .s2chip{display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.01em;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:8px 15px;backdrop-filter:blur(5px)}
.sv2 .s2chip b, .cn2 .s2chip b{color:#F2E7C4;font-weight:700}
.sv2 .s2acts, .cn2 .s2acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
/* A white outline alone measured 1.77:1 where the still is bright. The
   translucent fill is the minimum that clears AA without hiding the image. */
.sv2 .s2hero .btn.ghost-w, .cn2 .s2hero .btn.ghost-w{background:rgba(11,19,15,.46);
  backdrop-filter:blur(7px) saturate(1.05);border-color:rgba(255,255,255,.74)}
.sv2 .s2hero .btn.ghost-w:hover, .cn2 .s2hero .btn.ghost-w:hover{background:#fff;
  color:var(--clay-ink)!important;border-color:#fff;backdrop-filter:none}
.sv2 .s2trust, .cn2 .s2trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:22px 0 0;font-size:13.5px;color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.55)}
.sv2 .s2trust .st, .cn2 .s2trust .st{color:#F2E7C4;letter-spacing:2px;font-size:14px}
.sv2 .s2trust .sep, .cn2 .s2trust .sep{opacity:.45}
.sv2 .s2trust a, .cn2 .s2trust a{color:#fff;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}

/* The shared header is not redesigned - only its backdrop on v2 pages, so the
   cream nav clears AA over a photographic hero. Inert once site.js adds .solid. */
.sv2 header:not(.solid), .cn2 header:not(.solid){
  background:linear-gradient(180deg,rgba(10,17,14,.58) 0,rgba(10,17,14,.26) 62%,transparent 100%)}

/* ---------- answer-first block + at-a-glance ---------------------------- */
.sv2 .s2ans, .cn2 .s2ans{max-width:820px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--clay);border-radius:12px;padding:30px 34px;
  box-shadow:0 10px 30px rgba(36,35,34,.05)}
.sv2 .s2ans p, .cn2 .s2ans p{margin:0;font-size:clamp(16.5px,1.45vw,19px);
  line-height:1.66;color:var(--cocoa)}
.sv2 .s2ans p b, .cn2 .s2ans p b{font-weight:600}
.sv2 .s2rev-by, .cn2 .s2rev-by{margin:14px 0 0;font-size:12.5px;color:var(--taupe)}
.sv2 .s2glance, .cn2 .s2glance{display:grid;gap:1px;margin-top:26px;max-width:820px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sv2 .s2gitem, .cn2 .s2gitem{min-width:0;background:var(--euc-tint);padding:20px 22px}
.sv2 .s2gitem .k, .cn2 .s2gitem .k{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink);margin-bottom:8px}
.sv2 .s2gitem .v, .cn2 .s2gitem .v{font-size:15.5px;line-height:1.5;color:var(--cocoa);
  font-weight:500}

/* ---------- sticky sub-nav ---------------------------------------------- */
.sv2 .s2nav, .cn2 .s2nav{position:sticky;top:calc(var(--sticky-h) - 6px);z-index:40;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sv2 .s2nav ul, .cn2 .s2nav ul{display:flex;gap:4px;list-style:none;margin:0;
  padding:0 40px;max-width:var(--cw);margin:0 auto;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sv2 .s2nav ul::-webkit-scrollbar, .cn2 .s2nav ul::-webkit-scrollbar{display:none}
.sv2 .s2nav a, .cn2 .s2nav a{display:inline-block;white-space:nowrap;padding:15px 15px;
  font-size:13.5px;font-weight:600;color:var(--taupe);text-decoration:none;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.sv2 .s2nav a:hover, .cn2 .s2nav a:hover{color:var(--cocoa)}
.sv2 .s2nav a.on, .cn2 .s2nav a.on{color:var(--cocoa);border-bottom-color:var(--clay)}
.sv2 .s2nav a:focus-visible, .cn2 .s2nav a:focus-visible{outline:2px solid var(--clay);
  outline-offset:-3px}
.sv2 section[id], .cn2 section[id]{scroll-margin-top:calc(var(--sticky-h) + 54px)}

/* ---------- fact list --------------------------------------------------- */
.sv2 .s2facts, .cn2 .s2facts{list-style:none;margin:26px 0 0;padding:0;
  max-width:var(--prose);display:grid;gap:11px}
.sv2 .s2facts li, .cn2 .s2facts li{position:relative;padding-left:28px;font-size:15.5px;
  line-height:1.6;color:var(--cocoa)}
.sv2 .s2facts li::before, .cn2 .s2facts li::before{content:"";position:absolute;
  left:0;top:.52em;width:11px;height:11px;border-radius:50%;
  background:linear-gradient(160deg,#F2E7C4,#C9AD62);box-shadow:0 0 0 3px rgba(201,173,98,.16)}

/* ---------- numbered cards (why people book) ---------------------------- */
.sv2 .s2cards, .cn2 .s2cards{display:grid;gap:20px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.sv2 .s2card, .cn2 .s2card{position:relative;min-width:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:26px 24px 22px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s}
.sv2 .s2card:hover, .cn2 .s2card:hover{transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(36,35,34,.09);border-color:#D9CDBB}
.sv2 .s2card .n, .cn2 .s2card .n{font-family:"Fraunces",Georgia,serif;font-size:15px;
  font-weight:400;letter-spacing:.14em;color:var(--clay);display:block;margin-bottom:12px}
.sv2 .s2card h3, .cn2 .s2card h3{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:20px;line-height:1.26;margin:0 0 9px}
.sv2 .s2card p, .cn2 .s2card p{margin:0;font-size:15px;line-height:1.62;color:var(--taupe);
  flex:1 1 auto}
.sv2 .s2card .clink, .cn2 .s2card .clink{margin-top:17px;font-size:13.5px;font-weight:600;
  color:var(--clay-ink);text-decoration:none;display:inline;align-self:flex-start;
  text-decoration:underline;text-decoration-color:rgba(138,64,52,.34);
  text-underline-offset:4px;text-decoration-thickness:1px}
.sv2 .s2card .clink:hover, .cn2 .s2card .clink:hover{text-decoration-color:var(--clay-ink)}
.sv2 .s2card .clink .ar, .cn2 .s2card .clink .ar{transition:transform .25s}
.sv2 .s2card .clink:hover .ar, .cn2 .s2card .clink:hover .ar{transform:translateX(3px)}

/* ---------- vertical timeline ------------------------------------------- */
.sv2 .s2time, .cn2 .s2time{position:relative;margin-top:36px;max-width:840px;
  padding-left:0;list-style:none}
.sv2 .s2time::before, .cn2 .s2time::before{content:"";position:absolute;left:19px;
  top:14px;bottom:14px;width:1px;background:linear-gradient(180deg,var(--clay),
  rgba(166,83,67,.18))}
.sv2 .s2step, .cn2 .s2step{position:relative;padding:0 0 30px 60px}
.sv2 .s2step:last-child, .cn2 .s2step:last-child{padding-bottom:0}
.sv2 .s2step .sn, .cn2 .s2step .sn{position:absolute;left:0;top:-2px;width:39px;height:39px;
  border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-family:"Fraunces",Georgia,serif;
  font-size:15px;color:var(--clay);z-index:1}
.sv2 .s2step h3, .cn2 .s2step h3{font-size:17.5px;font-weight:600;margin:0 0 7px}
.sv2 .s2step p, .cn2 .s2step p{margin:0;font-size:15.5px;line-height:1.65;color:var(--taupe)}
.sv2 .s2after, .cn2 .s2after{margin-top:34px;max-width:840px;background:var(--euc-tint);
  border:1px solid var(--euc-line);border-radius:11px;padding:24px 26px}
.sv2 .s2after h3, .cn2 .s2after h3{font-size:16px;font-weight:600;margin:0 0 10px}
.sv2 .s2after p, .cn2 .s2after p{margin:0 0 12px;font-size:15px;line-height:1.65;
  color:var(--taupe)}
.sv2 .s2after dl, .cn2 .s2after dl{margin:16px 0 0;display:block}
.sv2 .s2after dt, .cn2 .s2after dt{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay-ink);margin-top:16px}
.sv2 .s2after dt:first-of-type, .cn2 .s2after dt:first-of-type{margin-top:0}
.sv2 .s2after dd, .cn2 .s2after dd{margin:5px 0 0;font-size:14.5px;line-height:1.6;
  color:var(--taupe)}

/* ---------- is it right for you: two lists ------------------------------ */
.sv2 .s2fit, .cn2 .s2fit{display:grid;gap:20px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sv2 .s2fitcard, .cn2 .s2fitcard{min-width:0;border-radius:12px;padding:26px 28px;
  border:1px solid var(--line);background:#fff}
.sv2 .s2fitcard.good, .cn2 .s2fitcard.good{background:var(--euc-tint);
  border-color:var(--euc-line)}
.sv2 .s2fitcard.care, .cn2 .s2fitcard.care{background:var(--amber-bg);
  border-color:var(--amber-line);border-left:3px solid #C69A4A}
.sv2 .s2fitcard h3, .cn2 .s2fitcard h3{font-size:16.5px;font-weight:600;margin:0 0 15px;
  display:flex;align-items:center;gap:10px}
.sv2 .s2fitcard ul, .cn2 .s2fitcard ul{margin:0;padding:0;list-style:none;display:grid;
  gap:11px}
.sv2 .s2fitcard li, .cn2 .s2fitcard li{position:relative;padding-left:26px;font-size:15px;
  line-height:1.6;color:var(--taupe)}
.sv2 .s2fitcard li::before, .cn2 .s2fitcard li::before{position:absolute;left:0;
  top:0;font-weight:700;font-size:14px}
.sv2 .s2fitcard.good li::before, .cn2 .s2fitcard.good li::before{content:"\2713";
  color:#3E6B4E}
.sv2 .s2fitcard.care li::before, .cn2 .s2fitcard.care li::before{content:"\0021";
  color:var(--amber)}

/* ---------- fees -------------------------------------------------------- */
.sv2 .s2feegrid, .cn2 .s2feegrid{display:grid;gap:24px;margin-top:32px;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);align-items:start}
.sv2 .s2feescroll, .cn2 .s2feescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;background:#fff}
.sv2 .s2feetable, .cn2 .s2feetable{width:100%;border-collapse:collapse;min-width:540px}
.sv2 .s2feetable caption, .cn2 .s2feetable caption{text-align:left;padding:18px 22px 0;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--clay-ink)}
.sv2 .s2feetable th, .cn2 .s2feetable th{text-align:left;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);
  padding:16px 18px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.sv2 .s2feetable td, .cn2 .s2feetable td{padding:15px 18px;font-size:15px;
  border-bottom:1px solid #F0E8DC;vertical-align:middle;color:var(--cocoa)}
.sv2 .s2feetable tbody tr:last-child td, .cn2 .s2feetable tbody tr:last-child td{border-bottom:0}
.sv2 .s2feetable .fee, .cn2 .s2feetable .fee{font-family:"Fraunces",Georgia,serif;
  font-size:19px;color:var(--clay-ink);white-space:nowrap}
.sv2 .s2feetable .who, .cn2 .s2feetable .who{font-size:13.5px;color:var(--taupe)}
.sv2 .s2feetable .len, .cn2 .s2feetable .len{white-space:nowrap;font-size:14.5px;
  color:var(--taupe)}
.sv2 .s2feetable td.bk, .cn2 .s2feetable td.bk{text-align:right;white-space:nowrap}
/* group headings ("Before you start", "Online counselling") live inside the
   table so they stay attached to their rows when it scrolls horizontally */
.sv2 .s2feetable tr.grp td, .cn2 .s2feetable tr.grp td{padding:20px 18px 8px;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--clay-ink);border-bottom:1px solid var(--line)}
.sv2 .s2feetable tbody tr:first-child.grp td, .cn2 .s2feetable tbody tr:first-child.grp td{
  padding-top:6px}
.sv2 .s2feegrp, .cn2 .s2feegrp{margin:14px 0 2px;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--clay-ink)}
.sv2 .s2feetable .btn, .cn2 .s2feetable .btn{padding:12px 18px;font-size:13px;min-height:44px}
.sv2 .s2feeside, .cn2 .s2feeside{min-width:0;background:var(--porcelain);
  border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.sv2 .s2feeside h3, .cn2 .s2feeside h3{font-size:15.5px;font-weight:600;margin:0 0 14px}
.sv2 .s2feeside ul, .cn2 .s2feeside ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.sv2 .s2feeside li, .cn2 .s2feeside li{position:relative;padding-left:16px;font-size:14px;
  line-height:1.62;color:var(--taupe)}
.sv2 .s2feeside li::before, .cn2 .s2feeside li::before{content:"";position:absolute;left:0;
  top:.62em;width:5px;height:5px;border-radius:50%;background:var(--clay);opacity:.55}
.sv2 .s2fsrc, .cn2 .s2fsrc{margin:18px 0 0;font-size:12.5px;color:var(--taupe)}
.sv2 .s2nofee, .cn2 .s2nofee{margin-top:30px;max-width:var(--prose);background:#fff;
  border:1px dashed var(--line);border-radius:12px;padding:24px 26px;font-size:15.5px;
  line-height:1.68;color:var(--taupe)}
.sv2 .s2feemob, .cn2 .s2feemob{display:none;margin-top:20px}
.sv2 .s2feemobcta, .cn2 .s2feemobcta{display:none}

/* ---------- practitioners ----------------------------------------------- */
/* Practitioners run as a 2-up carousel (Jenny, 2026-09-10). It is a
   scroll-snap track, not a slider: every card stays in the DOM and in the
   accessibility tree, so nothing is hidden from crawlers or from a reader who
   simply swipes. JS adds auto-advance on top; without JS it is still a
   perfectly usable horizontal scroller. */
.sv2 .s2praccar, .cn2 .s2praccar{position:relative;margin-top:34px}
.sv2 .s2pracs, .cn2 .s2pracs{display:flex;gap:20px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:5px 5px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sv2 .s2pracs::-webkit-scrollbar, .cn2 .s2pracs::-webkit-scrollbar{display:none}
.sv2 .s2pracs:focus-visible, .cn2 .s2pracs:focus-visible{outline:2px solid var(--clay);
  outline-offset:2px;border-radius:12px}
.sv2 .s2prac, .cn2 .s2prac{flex:0 0 calc((100% - 20px) / 2);min-width:0;
  scroll-snap-align:start;display:flex;gap:18px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:22px}

/* controls: revealed by JS only when there is more than one slide.
   The display rules below beat the UA's [hidden]{display:none}, so the
   attribute has to be re-asserted or the bar shows on a one-slide carousel. */
.sv2 [hidden], .cn2 [hidden]{display:none!important}

/* controls centred under the cards (Jenny, 2026-09-10) */
.s2pcbar{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px;margin-top:22px}
.s2pcbtn{appearance:none;cursor:pointer;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--cocoa);
  font-size:16px;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;transition:background .25s,border-color .25s,transform .25s}
.s2pcbtn:hover{background:var(--oat);transform:translateY(-1px)}
.s2pcbtn:focus-visible{outline:2px solid var(--clay);
  outline-offset:2px}
.s2pcbtn[aria-pressed="true"]{
  border-color:#B0934C;background:linear-gradient(160deg,#F2E7C4,#DFC983 46%,#C9AD62)}
.s2pcstatus{margin:0 4px;font-size:13.5px;color:var(--taupe);
  order:-1;flex-basis:100%;text-align:center}
/* The dot is 8px but the button is 44px: the hit area has to clear the tap
   target minimum even though the mark is small. Negative margins keep the row
   looking as tight as the dots suggest. */
.s2pcdot{appearance:none;cursor:pointer;border:0;padding:0;
  background:none;width:44px;height:44px;margin:0 -12px;display:inline-flex;
  align-items:center;justify-content:center}
.s2pcdot::before{content:"";width:8px;height:8px;
  border-radius:50%;background:rgba(36,35,34,.22);
  transition:background .25s,transform .25s}
.s2pcdot[aria-current="true"]::before{
  background:linear-gradient(160deg,#DFC983,#B0934C);transform:scale(1.4)}
.s2pcdot:focus-visible{outline:2px solid var(--clay);
  outline-offset:-12px;border-radius:50%}
.s2pcdotwrap{display:flex;gap:7px;align-items:center;
  min-height:44px;margin-left:6px}
@media(prefers-reduced-motion:reduce){
  .sv2 .s2pracs, .cn2 .s2pracs{scroll-behavior:auto}
  .s2pcbtn{transition:none}
  .s2pcdot::before{transition:none}
}
.sv2 .s2pphoto, .cn2 .s2pphoto{position:relative;flex:none;width:82px;height:82px;
  border-radius:50%;overflow:hidden;background:var(--oat)}
.sv2 .s2pphoto img, .cn2 .s2pphoto img{width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2pphoto::after, .cn2 .s2pphoto::after{content:attr(data-initials);position:absolute;
  inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",Georgia,serif;font-size:27px;color:var(--clay-ink)}
.sv2 .s2pphoto.hasimg::after, .cn2 .s2pphoto.hasimg::after{display:none}
.sv2 .s2pbody, .cn2 .s2pbody{min-width:0}
.sv2 .s2prac h3, .cn2 .s2prac h3{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:19px;margin:0 0 5px}
.s2pcred{font-size:12.5px;font-weight:600;color:var(--clay-ink);
  line-height:1.45;margin:0 0 9px}
.sv2 .s2prac p, .cn2 .s2prac p{margin:0;font-size:14.5px;line-height:1.6;color:var(--taupe)}
.sv2 .s2pacts, .cn2 .s2pacts{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.sv2 .s2pghost, .cn2 .s2pghost{display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(36,35,34,.28);border-radius:2px;padding:12px 16px;min-height:44px;
  font-size:13px;font-weight:600;color:var(--cocoa);text-decoration:none}
.sv2 .s2pghost:hover, .cn2 .s2pghost:hover{background:var(--oat)}

/* ---------- related ----------------------------------------------------- */
.sv2 .s2rel, .cn2 .s2rel{display:grid;gap:20px;margin-top:32px;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.sv2 .s2relcard, .cn2 .s2relcard{min-width:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.sv2 .s2relcard:hover, .cn2 .s2relcard:hover{transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(36,35,34,.1)}
.sv2 .s2relcard picture, .cn2 .s2relcard picture{display:block}
.sv2 .s2relcard img, .cn2 .s2relcard img{width:100%;height:148px;object-fit:cover;display:block}
/* condition cards carry no photograph; give the text room instead */
.cn2 #related .s2relin{padding:26px 24px 24px}
.sv2 .s2relin, .cn2 .s2relin{padding:20px 22px 22px;display:flex;flex-direction:column;
  flex:1 1 auto}
.sv2 .s2relcard h3, .cn2 .s2relcard h3{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:18.5px;line-height:1.26;margin:0 0 8px;color:var(--cocoa)}
.sv2 .s2relcard p, .cn2 .s2relcard p{margin:0;font-size:14.5px;line-height:1.6;
  color:var(--taupe);flex:1 1 auto}
.sv2 .s2relcard .go, .cn2 .s2relcard .go{margin-top:15px;font-size:13px;font-weight:600;
  color:var(--clay-ink);display:inline-flex;align-items:center;gap:7px}
.sv2 .s2relcard:hover .go .ar, .cn2 .s2relcard:hover .go .ar{transform:translateX(3px)}
.sv2 .s2relcard .ar, .cn2 .s2relcard .ar{transition:transform .25s}

/* ---------- reviews ----------------------------------------------------- */
.sv2 .s2revs, .cn2 .s2revs{display:grid;gap:20px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.sv2 .s2quote, .cn2 .s2quote{min-width:0;background:var(--porcelain);
  border:1px solid var(--line);border-radius:12px;padding:26px 26px 22px}
.sv2 .s2quote .st, .cn2 .s2quote .st{color:var(--clay-ink);letter-spacing:2px;font-size:14px;
  display:block;margin-bottom:12px}
.sv2 .s2quote blockquote, .cn2 .s2quote blockquote{margin:0;font-size:15.5px;line-height:1.68;
  color:var(--cocoa)}
.sv2 .s2quote cite, .cn2 .s2quote cite{display:block;margin-top:14px;font-style:normal;
  font-size:13px;font-weight:600;color:var(--taupe)}
.sv2 .s2revlink, .cn2 .s2revlink{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- FAQ (details/summary: open with no JS) ---------------------- */
.sv2 .s2faq, .cn2 .s2faq{max-width:860px;margin-top:30px;border-top:1px solid var(--line)}
.sv2 .s2faq details, .cn2 .s2faq details{border-bottom:1px solid var(--line)}
.sv2 .s2faq summary, .cn2 .s2faq summary{cursor:pointer;list-style:none;display:flex;
  gap:16px;align-items:flex-start;justify-content:space-between;padding:21px 4px;
  font-size:16.5px;font-weight:600;line-height:1.42;color:var(--cocoa)}
.sv2 .s2faq summary::-webkit-details-marker, .cn2 .s2faq summary::-webkit-details-marker{display:none}
.sv2 .s2faq summary:hover, .cn2 .s2faq summary:hover{color:var(--clay-ink)}
.sv2 .s2faq summary:focus-visible, .cn2 .s2faq summary:focus-visible{outline:2px solid var(--clay);
  outline-offset:2px}
.sv2 .s2faq summary .chev, .cn2 .s2faq summary .chev{flex:none;color:var(--clay-ink);
  font-size:14px;transition:transform .3s;margin-top:3px}
.sv2 .s2faq details[open] summary .chev, .cn2 .s2faq details[open] summary .chev{transform:rotate(180deg)}
.sv2 .s2faq .fa, .cn2 .s2faq .fa{padding:0 4px 24px;max-width:68ch;font-size:15.5px;
  line-height:1.72;color:var(--taupe)}

/* ---------- closing CTA ------------------------------------------------- */
.sv2 .s2cta, .cn2 .s2cta{text-align:center}
.sv2 .s2cta .s2head, .cn2 .s2cta .s2head{max-width:none}
.sv2 .s2cta p, .cn2 .s2cta p{margin:18px auto 0;max-width:54ch;font-size:16.5px;
  line-height:1.7;color:rgba(255,255,255,.84)}
.sv2 .s2cta .s2acts, .cn2 .s2cta .s2acts{justify-content:center;margin-top:30px}
.sv2 .s2cta .s2acts .btn.ghost, .cn2 .s2cta .s2acts .btn.ghost{border-color:rgba(255,255,255,.6);
  color:#fff!important}
.sv2 .s2cta .s2acts .btn.ghost:hover, .cn2 .s2cta .s2acts .btn.ghost:hover{background:#fff;
  color:var(--cocoa)!important;border-color:#fff}
.sv2 .s2ctaphone, .cn2 .s2ctaphone{margin-top:22px;font-size:14.5px;color:rgba(255,255,255,.72)}
.sv2 .s2ctaphone a, .cn2 .s2ctaphone a{color:#F2E7C4;text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(242,231,196,.4)}

/* ---------- mid-page image band ----------------------------------------- */
.sv2 .s2imgband, .cn2 .s2imgband{position:relative;height:clamp(210px,26vw,340px);
  overflow:hidden;background:var(--cocoa)}
.sv2 .s2imgband picture, .cn2 .s2imgband picture{display:block;height:100%}
.sv2 .s2imgband img, .cn2 .s2imgband img{width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2imgband figcaption, .cn2 .s2imgband figcaption{position:absolute;left:0;right:0;
  bottom:0;padding:22px 40px;background:linear-gradient(0deg,rgba(16,24,20,.78),transparent);
  color:#fff;font-size:14px;max-width:var(--cw);margin:0 auto}

/* ---------- reveal ------------------------------------------------------ */
.sv2 .r2, .cn2 .r2{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.sv2 .r2.seen, .cn2 .r2.seen{opacity:1;transform:none}
.sv2.nojs2 .r2, .cn2.nojs2 .r2{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sv2 .r2, .cn2 .r2{opacity:1!important;transform:none!important;transition:none}
  .sv2 .s2card,.sv2 .s2relcard,.cn2 .s2card,.cn2 .s2relcard{transition:none}
}

/* ---------- condition-page specifics ------------------------------------ */
/* ---- area tabs: one panel at a time ------------------------------------ */
/* A tab hides five of six panels, which is a reversal of the brief's "content
   is never hidden". The mitigations: every panel is in the DOM, and with JS off
   the tab strip disappears and all six render as a stacked list. */
.cn2 .c2tabwrap{margin-top:30px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:4px}
.cn2 .c2tabwrap::-webkit-scrollbar{display:none}
.cn2 .c2tabs{display:flex;flex-wrap:wrap;gap:10px;min-width:min-content}
.cn2 .c2tab{appearance:none;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;
  white-space:nowrap;color:var(--cocoa);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:11px 20px;min-height:44px;
  transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.cn2 .c2tab:hover{background:var(--oat);transform:translateY(-1px)}
.cn2 .c2tab[aria-selected="true"]{border-color:#B0934C;
  background:linear-gradient(160deg,#F2E7C4,#DFC983 42%,#C9AD62 72%,#B0934C);
  box-shadow:0 4px 14px rgba(176,147,76,.28)}
.cn2 .c2tab:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
/* keyboard activation moves focus between tabs; leave room for the fixed header
   and the sticky sub-nav so a focused tab is never scrolled under them */
.cn2 .c2tab{scroll-margin-top:calc(var(--sticky-h) + 66px)}

.cn2 .c2panels{margin-top:26px}
.cn2 .c2panel{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:30px 32px;box-shadow:0 10px 30px rgba(36,35,34,.05)}
.cn2 .c2panel:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.cn2 .c2panel h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:24px;
  line-height:1.2;margin:0 0 10px}
.cn2 .c2pdesc{margin:0;max-width:62ch;font-size:16px;line-height:1.68;color:var(--taupe)}
.cn2 .c2howh{margin:26px 0 0;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay-ink)}
.cn2 .c2hows{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.cn2 .c2how{display:flex;align-items:center;gap:22px;padding:20px 0;
  border-top:1px solid var(--line)}
.cn2 .c2how:first-child{border-top:0;padding-top:6px}
.cn2 .c2hbody{min-width:0;flex:1 1 auto}
.cn2 .c2how h4{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:18.5px;
  line-height:1.24;margin:0 0 7px}
.cn2 .c2how h4 a{color:var(--cocoa);text-decoration:none}
.cn2 .c2how h4 a:hover{text-decoration:underline;text-underline-offset:3px}
.cn2 .c2how p{margin:0;font-size:15px;line-height:1.62;color:var(--taupe);max-width:64ch}
.cn2 .c2how .btn{flex:none}
.cn2 .c2more{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px}
.cn2 .c2more a{color:var(--clay-ink);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid rgba(138,64,52,.3);
  padding-bottom:2px}
.cn2 .c2more a:hover{border-bottom-color:var(--clay-ink)}
.cn2 .c2more .ar{transition:transform .25s}
.cn2 .c2more a:hover .ar{transform:translateX(3px)}
/* no JS: no tab strip, every panel stacked and readable */
.cn2.nojs2 .c2tabwrap{display:none}
.cn2.nojs2 .c2panel{display:block!important;margin-bottom:18px}
@media(prefers-reduced-motion:reduce){.cn2 .c2tab,.cn2 .c2more .ar{transition:none}}

/* treatment comparison grid */
.cn2 .c2cmpscroll{margin-top:32px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;background:#fff}
.cn2 .c2cmp{width:100%;border-collapse:collapse;min-width:820px}
.cn2 .c2cmp col.c-svc{width:212px}
.cn2 .c2cmp col.c-best{width:220px}
.cn2 .c2cmp col.c-inv{width:auto}
.cn2 .c2cmp col.c-fee{width:132px}
.cn2 .c2cmp col.c-bk{width:118px}
.cn2 .c2cmp th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--taupe);padding:16px 18px 11px;
  border-bottom:1px solid var(--line);vertical-align:bottom}
.cn2 .c2cmp td{padding:18px;font-size:14.5px;line-height:1.6;color:var(--taupe);
  border-bottom:1px solid #F0E8DC;vertical-align:top}
.cn2 .c2cmp tbody tr:last-child td{border-bottom:0}
/* The highlight has to be unmistakable - a faint tint alone was not readable
   against the zebra-free table, so matching rows also get a champagne edge and
   the rest are dimmed. Nothing is ever hidden. */
.cn2 .c2cmp tbody tr{transition:background .3s ease,opacity .3s ease}
.cn2 .c2cmp tbody tr.hit{background:linear-gradient(90deg,#FBF3DC,#FFFDF6 22%)}
.cn2 .c2cmp tbody tr.hit td:first-child{box-shadow:inset 3px 0 0 #C9AD62}
.cn2 .c2cmp tbody tr.hit .svc h3 a{color:#4A3C18}
.cn2 .c2cmp .svc h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:18px;
  margin:0 0 6px;line-height:1.24}
.cn2 .c2cmp .svc h3 a{color:var(--cocoa);text-decoration:none}
.cn2 .c2cmp .svc h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.cn2 .c2cmp .svc .start{display:inline-block;margin-top:8px;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#4A3C18;border-radius:999px;
  padding:4px 9px;background:linear-gradient(160deg,#F2E7C4,#DFC983 60%,#C9AD62);
  white-space:nowrap}
.cn2 .c2cmp .price{font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--clay-ink);
  white-space:nowrap}
.cn2 .c2cmp td.bk{white-space:nowrap;text-align:right}
.cn2 .c2cmp .btn{padding:12px 18px;font-size:13px;min-height:44px}
.cn2 .c2route{margin-top:22px;max-width:var(--prose);background:var(--euc-tint);
  border:1px solid var(--euc-line);border-radius:11px;padding:20px 24px;font-size:15.5px;
  line-height:1.68;color:var(--cocoa)}
.cn2 .c2cmpmob{display:none}

/* ---------- tablet ------------------------------------------------------ */
@media(max-width:1000px){
  .sv2 .s2feegrid, .cn2 .s2feegrid{grid-template-columns:1fr}
  .sv2 .s2cards, .cn2 .s2cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media(max-width:900px){
  .sv2 .s2heroin, .cn2 .s2heroin{padding:124px 22px 42px}
  .sv2 .s2band>.wrap, .cn2 .s2band>.wrap{padding:0 22px}
  .sv2 .s2nav ul, .cn2 .s2nav ul{padding:0 22px}
  .sv2 .s2imgband figcaption, .cn2 .s2imgband figcaption{padding:18px 22px}
}
/* ---------- phone ------------------------------------------------------- */
@media(max-width:640px){
  .sv2 .s2hero, .cn2 .s2hero{min-height:min(82svh,660px)}
  .sv2 .s2ans, .cn2 .s2ans{padding:24px 22px}
  .sv2 .s2glance, .cn2 .s2glance{grid-template-columns:1fr}
  .sv2 .s2acts .btn, .cn2 .s2acts .btn{flex:1 1 auto;justify-content:center}
  .sv2 .s2cards, .cn2 .s2cards{grid-template-columns:1fr}
  .cn2 .c2panel{padding:24px 20px}
  .cn2 .c2how{flex-direction:column;align-items:stretch;gap:14px}
  .cn2 .c2how .btn{width:100%;justify-content:center}
  .cn2 .c2tabs{flex-wrap:nowrap}
  .sv2 .s2fit, .cn2 .s2fit{grid-template-columns:1fr}
  .sv2 .s2fitcard, .cn2 .s2fitcard{padding:22px 20px}
  .sv2 .s2prac, .cn2 .s2prac{flex:0 0 100%;flex-direction:column;gap:14px}
  .sv2 .s2step, .cn2 .s2step{padding-left:52px}
  .sv2 .s2time::before, .cn2 .s2time::before{left:17px}
  .sv2 .s2step .sn, .cn2 .s2step .sn{width:35px;height:35px;font-size:14px}
  /* the fee table becomes cards; one Book CTA for the whole section */
  .sv2 .s2feescroll, .cn2 .s2feescroll{border:0;background:none;overflow:visible}
  .sv2 .s2feetable, .cn2 .s2feetable{display:none}
  .sv2 .s2feemob, .cn2 .s2feemob{display:grid;gap:12px}
  .sv2 .s2feerow, .cn2 .s2feerow{background:#fff;border:1px solid var(--line);
    border-radius:11px;padding:18px 20px}
  .sv2 .s2feerow .rt, .cn2 .s2feerow .rt{font-size:15.5px;font-weight:600;color:var(--cocoa);
    margin:0 0 6px;line-height:1.4}
  .sv2 .s2feerow .rm, .cn2 .s2feerow .rm{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:10px;font-size:13.5px;color:var(--taupe)}
  .sv2 .s2feerow .rm .fee, .cn2 .s2feerow .rm .fee{font-family:"Fraunces",Georgia,serif;
    font-size:19px;color:var(--clay-ink)}
  .sv2 .s2feemobcta, .cn2 .s2feemobcta{display:block;margin-top:14px}
  .sv2 .s2feemobcta .btn, .cn2 .s2feemobcta .btn{width:100%;justify-content:center}
  /* comparison grid becomes stacked cards */
  .cn2 .c2cmpscroll{display:none}
  .cn2 .c2cmpmob{display:grid;gap:16px;margin-top:28px}
  .cn2 .c2mcard{background:#fff;border:1px solid var(--line);border-radius:11px;
    padding:22px 20px;transition:border-color .3s,box-shadow .3s,background .3s}
  .cn2 .c2mcard.hit{border-color:#C9AD62;background:#FFFDF6;border-left:3px solid #C9AD62;
    box-shadow:0 10px 26px rgba(176,147,76,.16)}
  .cn2 .c2mcard h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:19px;
    margin:0 0 10px;line-height:1.24}
  .cn2 .c2mcard h3 a{color:var(--cocoa);text-decoration:none}
  .cn2 .c2mcard dl{margin:0;display:grid;gap:11px}
  .cn2 .c2mcard dt{font-size:10.5px;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--clay-ink)}
  .cn2 .c2mcard dd{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--taupe)}
  .cn2 .c2mcard .btn{width:100%;justify-content:center;margin-top:16px}
  .sv2 .s2faq summary, .cn2 .s2faq summary{font-size:15.5px;padding:19px 2px}
}
/* print / no-JS: never leave an answer collapsed */
@media print{
  .sv2 .s2faq details, .cn2 .s2faq details{break-inside:avoid}
  .sv2 .s2nav, .cn2 .s2nav, .sv2 .s2hero::after{display:none}
}

/* review-build notes inside the v2 templates */
.sv2 .review-only, .cn2 .review-only{margin-top:18px;font-size:13px;line-height:1.6;
  color:#7A3126;max-width:var(--prose)}
.sv2 .review-only .todo, .cn2 .review-only .todo{margin:0 8px 0 0;vertical-align:1px}







/* ==========================================================================
   TEAM / ABOUT v2 — body.tm2. Additive, and every selector is scoped to .tm2,
   so deleting this block reverts the page to the v2 service look with no other
   page affected. The page also carries .sv2, which is where the bands, hero,
   sub-nav, fee styling, carousel controls, FAQ and CTA all come from — nothing
   below re-implements any of that.
   ========================================================================== */

/* ---------- our story --------------------------------------------------- */
.tm2 .t2story{display:grid;grid-template-columns:320px minmax(0,1fr);
  gap:clamp(30px,4.6vw,64px);align-items:start}
.tm2 .t2spic{margin:0;position:relative}
.tm2 .t2spic picture{display:block;border-radius:16px;overflow:hidden}
.tm2 .t2spic img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 18%}
.tm2 .t2spic figcaption{margin-top:14px}
.tm2 .t2sname{display:block;font-family:"Fraunces",Georgia,serif;font-size:18px;
  color:var(--cocoa)}
.tm2 .t2srole{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;
  color:var(--taupe)}
.tm2 .t2quote{margin:22px 0 0;padding:0 0 0 20px;border-left:2px solid var(--euc-line);
  max-width:var(--prose)}
.tm2 .t2quote p{font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(18px,1.7vw,21px);line-height:1.62;color:var(--cocoa);margin:0 0 16px}
.tm2 .t2quote p:last-child{margin-bottom:0}
.tm2 .t2sattrib{margin:20px 0 0;font-size:13px;font-weight:600;color:var(--clay-ink)}
.tm2 .t2sattrib span{display:block;margin-top:4px;font-weight:400;color:var(--taupe)}

/* ---------- jump index -------------------------------------------------- */
.tm2 .t2jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tm2 .t2jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:9px 17px 9px 9px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--cocoa);text-decoration:none;font-size:14.5px;
  font-weight:500;line-height:1.3;transition:border-color .2s,box-shadow .2s}
.tm2 .t2jump a:hover{border-color:var(--clay-ink);box-shadow:0 6px 18px rgba(60,42,32,.08)}
.tm2 .t2jump a:focus-visible{outline:2px solid var(--clay-ink);outline-offset:2px}
.tm2 .t2jump .t2mono{flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--oat);color:var(--clay-ink);display:flex;align-items:center;
  justify-content:center;font-family:"Fraunces",Georgia,serif;font-size:13px}

/* ---------- the six profiles ------------------------------------------- */
/* Desktop: a plain stack of alternating bands. Mobile: the same markup becomes
   a one-up scroll-snap carousel. Nothing is added or removed between the two —
   every profile is in the DOM and the accessibility tree at both sizes. */
.tm2 .t2track{display:block}
.tm2 .t2p{padding:clamp(52px,6vw,88px) 0;background:#fff;
  scroll-margin-top:calc(var(--sticky-h) + 54px)}
.tm2 .t2p:nth-child(even){background:var(--porcelain)}
.tm2 .t2cbar{display:none}

.tm2 .t2grid{display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:clamp(28px,4vw,58px);align-items:start}
.tm2 .t2photo{position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;
  overflow:hidden;background:var(--oat)}
.tm2 .t2photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block}
.tm2 .t2photo::after{content:attr(data-initials);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:62px;
  color:var(--clay-ink);letter-spacing:.02em}
.tm2 .t2photo.hasimg::after{display:none}
.tm2 .t2sidenote{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--taupe)}
.tm2 .t2sidenote a{color:var(--clay-ink)}

.tm2 .t2body h3{font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(24px,2.7vw,34px);line-height:1.14;letter-spacing:-.01em;
  color:var(--cocoa);margin:12px 0 0}
.tm2 .t2cred{margin:14px 0 0;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--clay-ink)}
.tm2 .t2body .s2prose{margin-top:20px}

/* ---------- 20 words, then "more…" ------------------------------------- */
.tm2 .t2bio.is-clamped .t2rest{display:none}
.tm2 .t2bio.is-clamped>p::after{content:"\2026"}
.tm2 .t2morebtn{margin-top:12px;min-height:44px;padding:10px 2px;background:none;
  border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--clay-ink);display:inline-flex;align-items:center;gap:7px}
.tm2 .t2morebtn .t2mlabel{border-bottom:1px solid var(--euc-line);padding-bottom:2px}
.tm2 .t2morebtn:hover .t2mlabel{border-bottom-color:var(--clay-ink)}
.tm2 .t2morebtn:focus-visible{outline:2px solid var(--clay-ink);outline-offset:3px}

/* ---------- what they offer -------------------------------------------- */
.tm2 .t2sub{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:18px;
  color:var(--cocoa);margin:34px 0 0}
.tm2 .t2sub2{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:20px;
  color:var(--cocoa);margin:44px 0 0}
.tm2 .t2offers{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.tm2 .t2offers li{background:#fff;padding:16px 18px;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 18px}
.tm2 .t2p:nth-child(even) .t2offers li{background:#fff}
.tm2 .t2offers .t2name{flex:1 1 220px;min-width:0;font-size:15.5px;line-height:1.45;
  color:var(--cocoa);font-weight:500}
.tm2 .t2offers .t2name a{color:var(--cocoa);text-decoration:none;
  border-bottom:1px solid var(--euc-line)}
.tm2 .t2offers .t2name a:hover{border-bottom-color:var(--clay-ink)}
.tm2 .t2offers .t2also{display:block;margin-top:5px;font-size:12.5px;font-weight:400;
  color:var(--taupe)}
.tm2 .t2offers .t2fee{flex:0 0 auto;font-size:13.5px;color:var(--taupe);
  font-variant-numeric:tabular-nums}
.tm2 .t2offers .btn{flex:none}
.tm2 .t2langs{margin:20px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--euc-tint);border:1px solid var(--euc-line);font-size:14.5px;
  line-height:1.65;color:var(--cocoa);max-width:var(--prose)}
.tm2 .t2langs b{font-weight:600}

/* ---------- "not sure who to book with" -------------------------------- */
/* Shared with the two hub pages (body.hb2), which use the same chip row. */
.tm2 .t2chips, .hb2 .t2chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tm2 .t2chips a, .hb2 .t2chips a{display:inline-flex;align-items:center;min-height:44px;
  padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--cocoa);text-decoration:none;font-size:14.5px;line-height:1.3;
  transition:border-color .2s,box-shadow .2s}
.tm2 .t2chips a:hover, .hb2 .t2chips a:hover{border-color:var(--clay-ink);box-shadow:0 6px 18px rgba(60,42,32,.08)}
.tm2 .t2chips a:focus-visible, .hb2 .t2chips a:focus-visible{outline:2px solid var(--clay-ink);outline-offset:2px}

/* ---------- services index --------------------------------------------- */
.tm2 .t2svcs{display:grid;gap:26px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tm2 .t2svcgrp h3{font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay-ink);margin:0 0 12px}
.tm2 .t2svcgrp ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tm2 .t2svcgrp a{display:block;padding:11px 0;font-size:15.5px;line-height:1.45;
  color:var(--cocoa);text-decoration:none;border-bottom:1px solid var(--line)}
.tm2 .t2svcgrp a:hover{color:var(--clay-ink)}

/* ---------- clinic tour ------------------------------------------------- */
/* Video only - Jenny asked for the still to come out (10 Sep). Capped so a
   1280px clip does not stretch across a 1200px band and go soft. */
.tm2 .t2tour{margin-top:30px;max-width:900px}
.tm2 .t2tour figure{margin:0}
.tm2 .t2tour video, .tm2 .t2tour img{display:block;width:100%;height:auto;
  border-radius:16px;background:var(--oat)}
.tm2 .t2still picture{display:block}
.tm2 .t2still img{aspect-ratio:4/3;object-fit:cover}
.tm2 .t2tour figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:var(--taupe)}

/* ---------- mobile: profiles become a 3s carousel ---------------------- */
@media (max-width:900px){
  .tm2 .t2story{grid-template-columns:1fr;gap:24px}
  .tm2 .t2spic{max-width:250px}
  .tm2 .t2quote{padding-left:16px}

  /* The controls sit ABOVE the cards on a phone. Below a full-height profile
     a reader might never scroll far enough to find the pause button, and
     WCAG 2.2.2 is only satisfied if the control for moving content is
     actually reachable. */
  .tm2 .t2car.on{display:flex;flex-direction:column;background:var(--porcelain);
    padding-top:30px}
  .tm2 .t2car.on .t2cbar{order:-1;display:flex;justify-content:center;flex-wrap:wrap;
    align-items:center;gap:10px;padding:0 16px 4px}
  .tm2 .t2car.on .t2cstatus{order:-1;flex-basis:100%;text-align:center;margin:0 0 6px}
  .tm2 .t2car.on .t2track{transition:height .32s ease}
  .tm2 .t2track{display:flex;align-items:flex-start;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tm2 .t2track::-webkit-scrollbar{display:none}
  .tm2 .t2track:focus-visible{outline:2px solid var(--clay-ink);outline-offset:-2px}
  .tm2 .t2p{flex:0 0 100%;scroll-snap-align:start;padding:22px 0 34px}
  .tm2 .t2p, .tm2 .t2p:nth-child(even){background:transparent}

  .tm2 .t2grid{grid-template-columns:1fr;gap:22px}
  .tm2 .t2photo{max-width:190px;aspect-ratio:1/1;border-radius:14px}
  .tm2 .t2photo::after{font-size:46px}
  .tm2 .t2offers li{padding:15px 16px}
  .tm2 .t2offers .btn{width:100%;justify-content:center}
  .tm2 .t2tour{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .tm2 .t2car.on .t2track{transition:none}
}

/* ==========================================================================
   HUB PAGES v2 — services.html and conditions.html (body.hb2). They reuse the
   sv2 card grid wholesale; the only thing they add is the fee line inside a
   card, which no other page needs.
   ========================================================================== */
.hb2 .hbhcard .s2relin{display:flex;flex-direction:column;align-items:flex-start}
.hb2 .hbfee{display:inline-block;margin-top:12px;padding:5px 11px;border-radius:999px;
  background:var(--euc-tint);border:1px solid var(--euc-line);font-size:12.5px;
  color:var(--cocoa);font-variant-numeric:tabular-nums;line-height:1.4}
.hb2 .hbhcard .go{margin-top:14px}

/* ==========================================================================
   v32 — two additions to the v2 templates, both scoped to .sv2/.cn2/.hb2 so
   index.html cannot regress.

   1. .s2urgent — the "get medical advice before booking" card. It is
      deliberately NOT styled like the ordinary amber caution card next to it:
      the whole point of splitting it out is that a reader must not read
      "loss of bladder or bowel control" and "you are pregnant, so we can plan
      positioning" as the same kind of instruction.
   2. .s2cmp — the "which appointment fits" comparison list.
   ========================================================================== */

.sv2 .s2urgent, .cn2 .s2urgent{max-width:820px;margin:0 0 28px;padding:22px 24px;
  border-radius:14px;background:#FBF1EE;border:1px solid #E3BFB4;
  border-left:4px solid #A6402C}
.sv2 .s2urgent h3, .cn2 .s2urgent h3{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:18px;color:#7A2E1F;margin:0 0 12px;line-height:1.3}
.sv2 .s2urgent ul, .cn2 .s2urgent ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sv2 .s2urgent li, .cn2 .s2urgent li{position:relative;padding-left:26px;font-size:15px;
  line-height:1.6;color:var(--cocoa)}
.sv2 .s2urgent li::before, .cn2 .s2urgent li::before{content:"!";position:absolute;left:0;
  top:1px;width:17px;height:17px;border-radius:50%;background:#A6402C;color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sv2 .s2ufoot, .cn2 .s2ufoot{margin:14px 0 0;font-size:14px;line-height:1.6;
  color:#7A2E1F;font-weight:500}

/* ---------- which appointment fits? ------------------------------------- */
.sv2 .s2cmp, .cn2 .s2cmp{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;
  max-width:900px}
.sv2 .s2cmpitem, .cn2 .s2cmpitem{padding:20px 22px;border:1px solid var(--line);
  border-radius:14px;background:var(--porcelain);transition:border-color .2s,box-shadow .2s}
.sv2 .g-white .s2cmpitem, .cn2 .g-white .s2cmpitem{background:var(--porcelain)}
.sv2 .s2cmpitem:hover, .cn2 .s2cmpitem:hover{border-color:var(--clay-ink);
  box-shadow:0 8px 22px rgba(60,42,32,.07)}
.sv2 .s2cmplink, .cn2 .s2cmplink{display:inline-flex;align-items:baseline;gap:9px;
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:18px;line-height:1.35;
  color:var(--cocoa);text-decoration:none;text-wrap:balance}
.sv2 .s2cmplink .ar, .cn2 .s2cmplink .ar{color:var(--clay-ink);transition:transform .2s}
.sv2 .s2cmpitem:hover .s2cmplink, .cn2 .s2cmpitem:hover .s2cmplink{color:var(--clay-ink)}
.sv2 .s2cmpitem:hover .s2cmplink .ar,
.cn2 .s2cmpitem:hover .s2cmplink .ar{transform:translateX(3px)}
.sv2 .s2cmplink:focus-visible, .cn2 .s2cmplink:focus-visible{outline:2px solid var(--clay-ink);
  outline-offset:3px;border-radius:4px}
.sv2 .s2cmpitem p, .cn2 .s2cmpitem p{margin:9px 0 0;font-size:15px;line-height:1.65;
  color:var(--taupe);max-width:64ch}

@media (max-width:600px){
  .sv2 .s2urgent, .cn2 .s2urgent{padding:18px 18px}
  .sv2 .s2cmpitem, .cn2 .s2cmpitem{padding:18px 18px}
  .sv2 .s2cmplink, .cn2 .s2cmplink{font-size:16.5px}
}

/* crisis signposting: a definition list inside the urgent card */
.sv2 .s2crisis, .cn2 .s2crisis{margin:0;display:grid;gap:16px}
.sv2 .s2crisis dt, .cn2 .s2crisis dt{font-size:14.5px;font-weight:700;color:#7A2E1F;
  line-height:1.45}
.sv2 .s2crisis dd, .cn2 .s2crisis dd{margin:5px 0 0;font-size:15px;line-height:1.65;
  color:var(--cocoa)}
.sv2 .s2crisis dd a, .cn2 .s2crisis dd a{color:#7A2E1F;font-weight:600}

/* HP-8: the official Google mark is not in the package and must not be redrawn,
   so the slot carries the word instead, at the same optical weight. */
.hrev .glabel{font-size:12px;font-weight:600;letter-spacing:.04em;opacity:.92;margin-right:2px}

/* v32.1 — dropdown menus read as menus, not as underlined links */
/* .drop a never set text-decoration, so every item in the Bodywork and
   Conditions menus carried the browser's default underline. A navigation menu
   is a list of destinations, not running prose with links in it. */
.drop a{text-decoration:none;line-height:1.35;transition:background .16s,color .16s}
.drop a:hover,.drop a:focus-visible{background:var(--oat);color:var(--clay-ink);
  text-decoration:none}
.drop a:focus-visible{outline:2px solid var(--clay-ink);outline-offset:-2px}
.drop2 .dcol a{padding:9px 12px;border-radius:4px}
.drop2 .dcol{gap:1px}
/* the landing-page entry closes each column, set off by a rule rather than
   left to look like one more item that happens to be bold */
.drop a.dall{margin-top:9px;padding-top:12px;border-top:1px solid var(--line);
  border-radius:0;font-weight:600;color:var(--clay-ink);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.drop a.dall::after{content:"\2192";font-size:13px;opacity:.75;transition:transform .16s}
.drop a.dall:hover{background:none}
.drop a.dall:hover::after{transform:translateX(3px)}
.msub a.dall{font-weight:600;color:var(--clay-ink)}

/* v32.1 — practitioner portraits. The avatar was built for a monogram; real
   4:5 portraits need a face-weighted crop or everyone is framed at the chin. */
.sv2 .s2pphoto img, .cn2 .s2pphoto img{object-position:50% 24%}
.tm2 .t2photo img{object-position:50% 26%}

/* ==========================================================================
   v32.1 — the hero, rebuilt.

   v31 laid the copy over a full-bleed photograph. That needed a four-layer
   vignette to drag 13px white text up to AA, and six of the eleven service
   stills were 900px sources stretched over a 780px-tall band. This puts the
   type on a brand gradient, where its contrast is not in question, and gives
   the footage a panel of its own at a size it was actually shot for.

   Scoped to .sv2 / .cn2 / .hb2. index.html carries none of them.
   ========================================================================== */

.sv2 .s2hero, .cn2 .s2hero, .hb2 .s2hero{
  position:relative;min-height:0;display:block;overflow:hidden;
  padding:clamp(132px,15vw,178px) 0 clamp(52px,6vw,78px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(166,83,67,.34) 0, transparent 62%),
    radial-gradient(90% 70% at 4% 96%, rgba(20,16,14,.55) 0, transparent 64%),
    linear-gradient(126deg,#241F1C 0%,#33241F 34%,#5A3228 68%,#6E3A2E 100%);
  color:#fff}
/* the old vignette and the absolutely-positioned backdrop are gone */
.sv2 .s2hero::after, .cn2 .s2hero::after, .hb2 .s2hero::after{content:none}
.sv2 .s2hero>picture, .cn2 .s2hero>picture{position:static}

/* a hairline of champagne along the foot, so the hero resolves into the page
   rather than stopping dead against the cream band below */
.sv2 .s2hero::before, .cn2 .s2hero::before, .hb2 .s2hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(223,201,131,.75) 28%,
             rgba(223,201,131,.75) 72%,transparent)}

.sv2 .s2heroin, .cn2 .s2heroin, .hb2 .s2heroin{
  position:relative;z-index:2;width:100%;max-width:var(--cw);margin:0 auto;
  padding:0 40px;display:grid;grid-template-columns:minmax(0,1.05fr) 400px;
  gap:clamp(34px,5vw,72px);align-items:center}
.sv2 .s2hcopy, .cn2 .s2hcopy, .hb2 .s2hcopy{min-width:0}

/* ---------- type on the gradient ---------------------------------------- */
/* No text-shadow anywhere: the ground is a known colour now, so the type can
   simply be the right colour. Measured against the darkest and lightest stops
   of the gradient, the worst case is the trust line at 8.9:1. */
.sv2 .s2hero h1, .cn2 .s2hero h1, .hb2 .s2hero h1{text-shadow:none;max-width:16ch}
.sv2 .s2vp, .cn2 .s2vp, .hb2 .s2vp{text-shadow:none;color:rgba(251,248,243,.88);
  max-width:46ch}
.sv2 .s2hero .crumb, .cn2 .s2hero .crumb, .hb2 .s2hero .crumb{
  background:rgba(255,255,255,.09);backdrop-filter:none;
  border:1px solid rgba(255,255,255,.16)}
.sv2 .s2trust, .cn2 .s2trust, .hb2 .s2trust{text-shadow:none}

/* ---------- the media panel --------------------------------------------- */
.sv2 .s2media, .cn2 .s2media, .hb2 .s2media{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:18px;
  overflow:hidden;background:#1B1512;
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.42);
  outline:1px solid rgba(255,255,255,.10);outline-offset:-1px}
.sv2 .s2media video, .cn2 .s2media video, .hb2 .s2media video,
.sv2 .s2media img, .cn2 .s2media img, .hb2 .s2media img{
  width:100%;height:100%;object-fit:cover;display:block}
.sv2 .s2media picture, .cn2 .s2media picture, .hb2 .s2media picture{
  display:block;width:100%;height:100%}
/* a whisper of warmth over the clip so it belongs to the same image as the
   gradient behind it, without dulling the footage */
.sv2 .s2media::after, .cn2 .s2media::after, .hb2 .s2media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,24,20,.10) 0,transparent 34%,
             transparent 72%,rgba(36,24,20,.22) 100%)}

/* ---------- reduced motion ---------------------------------------------- */
/* The clip is not paused - the element is hidden and its own poster frame
   takes its place, so nothing moves at all for a reader who asked for that. */
@media (prefers-reduced-motion: reduce){
  .sv2 .s2media video, .cn2 .s2media video, .hb2 .s2media video{display:none}
  .sv2 .s2media[data-still], .cn2 .s2media[data-still], .hb2 .s2media[data-still]{
    background-size:cover;background-position:50% 30%}
}

/* ---------- narrower ----------------------------------------------------- */
@media (max-width:1040px){
  .sv2 .s2heroin, .cn2 .s2heroin, .hb2 .s2heroin{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:820px){
  .sv2 .s2hero, .cn2 .s2hero, .hb2 .s2hero{
    padding:clamp(112px,22vw,150px) 0 clamp(38px,8vw,54px)}
  .sv2 .s2heroin, .cn2 .s2heroin, .hb2 .s2heroin{
    grid-template-columns:1fr;gap:30px;padding:0 22px}
  .sv2 .s2hero h1, .cn2 .s2hero h1, .hb2 .s2hero h1{max-width:100%}
  .sv2 .s2media, .cn2 .s2media, .hb2 .s2media{
    max-width:340px;margin:0 auto;aspect-ratio:1/1;border-radius:16px}
}

/* ==========================================================================
   v32.1 — related treatments play their clip, like the homepage carousel.
   ========================================================================== */
/* The clip box is the still box: a card whose media is a video and a card
   whose media is a photograph sit in the same row, so they must be exactly the
   same height. 148px is the height .s2relcard img has carried since v31 - the
   card proportions are unchanged, only what is inside the box. */
.sv2 .s2relcard .s2relvid, .cn2 .s2relcard .s2relvid{
  position:relative;display:block;height:148px;overflow:hidden;
  background:var(--oat)}
.sv2 .s2relcard .s2relvid video, .cn2 .s2relcard .s2relvid video{
  width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
@media (prefers-reduced-motion: reduce){
  .sv2 .s2relcard .s2relvid video, .cn2 .s2relcard .s2relvid video{display:none}
  .sv2 .s2relcard .s2relvid, .cn2 .s2relcard .s2relvid{
    background-size:cover;background-position:50% 38%}
}

/* ==========================================================================
   v32.4 — the card, with nothing over the footage.

   Jenny, 11 September 2026: "no milky bacground for the wording part ... I need
   the video to be crystal clear shown and no milky shadow cover!"

   v32.3 laid a translucent cream wash over the top and bottom of the clip.
   Translucent IS milky, and it dulled the footage. So the copy no longer
   overlaps the media at all. Three stacked bands:

       solid cream   name + intro
       the footage   nothing on top of it. No wash, no scrim, no filter.
       solid cream   Book + Explore

   Contrast stops being a question - the type is cocoa on opaque cream, 13.6:1,
   and it cannot change when a photograph changes. tools/contrast.py is still
   the check if anything here moves.
   ========================================================================== */
.sv2 .s2rel.s2relslides, .cn2 .s2rel.s2relslides, .s2relslides{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch}

.s2relslide{
  position:relative;display:flex;flex-direction:column;min-width:0;
  border-radius:16px;overflow:hidden;background:var(--porcelain);
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(36,35,34,.07),0 12px 30px rgba(36,35,34,.10);
  transition:box-shadow .25s, transform .25s}
.s2relslide:hover{transform:translateY(-2px);
  box-shadow:0 3px 7px rgba(36,35,34,.10),0 18px 42px rgba(36,35,34,.15)}

.s2relslide .s2reltop{padding:20px 20px 14px;background:var(--porcelain)}
.s2relslide .s2relfoot{padding:14px 20px 18px;background:var(--porcelain);margin-top:auto}

/* the footage: a fixed band so a row of cards lines up whatever the copy does */
/* Portrait, matching the clips (Jenny, 11 Sep: "i want the whole grid display
   the video footpage (that's mean protrait, instead of now like 16:9)"). The
   clips are 720x900, so a 4:5 band shows the whole frame instead of a letterbox
   crop through the middle of it. */
.s2relslide .s2relmedia{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--oat)}
.s2relslide .s2relmedia video,
.s2relslide .s2relmedia img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.s2relslide .s2relmedia picture{display:block;width:100%;height:100%}

/* ---------- type: cocoa on opaque cream --------------------------------- */
.s2relslide h3{
  margin:0;color:var(--cocoa);font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(18px,1.35vw,21px);line-height:1.22}
.s2relslide p{
  margin:8px 0 0;color:#4A4846;font-size:14px;line-height:1.55}

/* ---------- actions ------------------------------------------------------ */
.s2relslide .cacts{display:flex;gap:9px;flex-wrap:wrap;margin:0;padding:0}
.s2relslide .cacts .btn{font-size:13px;padding:10px 14px}
.s2relslide .cacts .btn:not(.explore){
  background:linear-gradient(160deg,#F2E7C4,#DFC983 38%,#B0934C 100%);
  color:var(--cocoa)!important;box-shadow:0 1px 2px rgba(36,35,34,.16)}
.s2relslide .cacts .btn:not(.explore):hover{
  background:linear-gradient(160deg,#F5EDD3,#D4BB6C 38%,#AC8F45 100%)}
.s2relslide .cacts .btn.explore{
  background:#fff;border:1px solid rgba(36,35,34,.40);color:var(--cocoa)!important}
.s2relslide .cacts .btn.explore:hover{
  background:var(--cocoa);color:#FBF8F3!important;border-color:var(--cocoa)}

/* The three bands line up across a row even when the intros differ in length.
   Without this the media band starts at a different height on each card and
   the row looks ragged. Subgrid makes the cards share the parent's row tracks;
   where it is unsupported the cards stay flex and simply keep their own
   heights, which is the v32.4 behaviour and is not broken, only less tidy. */
@supports (grid-template-rows: subgrid){
  .sv2 .s2rel.s2relslides, .cn2 .s2rel.s2relslides, .s2relslides{
    grid-auto-rows:auto}
  /* ONLY inside the grid. The home page carousel puts the same cards in a FLEX
     track, where `grid-row: span 3` has no parent rows to inherit and the
     browser resolved the media row to 8px - the card rendered as a sliver with
     its footage clipped. Scope the subgrid to the layout that can honour it. */
  .s2relslides > .s2relslide{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .s2relslides > .s2relslide .s2relfoot{margin-top:0}
}

@media (prefers-reduced-motion: reduce){
  .s2relslide{transition:none}
  .s2relslide:hover{transform:none}
  .s2relslide .s2relmedia video{display:none}
  .s2relslide .s2relmedia[data-still]{background-size:cover;background-position:50% 42%}
}
@media (max-width:980px){
  .sv2 .s2rel.s2relslides, .cn2 .s2rel.s2relslides, .s2relslides{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sv2 .s2rel.s2relslides, .cn2 .s2rel.s2relslides, .s2relslides{
    grid-template-columns:1fr;gap:16px}
  .s2relslide{max-width:420px;margin-inline:auto;width:100%}

}

/* ==========================================================================
   v32.2 — About: the clinic footage and the practical details, side by side.

   Jenny asked for the "Visit Us" facts next to the clip and the standalone band
   gone from this page. The shared band is untouched everywhere else; About just
   stops rendering it and carries the same four facts here instead, so a reader
   meets each one once.
   ========================================================================== */
.tm2 .t2tour.t2tour2{
  max-width:1120px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,48px);align-items:start}
.tm2 .t2tour2 .t2visit{
  background:var(--oat);border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,2.4vw,30px)}
.tm2 .t2tour2 .t2visit h3{
  margin:0 0 18px;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(20px,1.7vw,24px);color:var(--cocoa)}
.tm2 .t2vgrid{display:grid;gap:15px}
.tm2 .t2vit .vt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--clay-ink);margin-bottom:3px}
.tm2 .t2vit .vd{font-size:14.5px;line-height:1.6;color:#4A4846}
.tm2 .t2vit .vd a{color:var(--clay-ink);text-underline-offset:3px}
.tm2 .t2vacts{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.tm2 .t2vacts .btn{justify-content:center}
@media (max-width:900px){
  .tm2 .t2tour.t2tour2{grid-template-columns:1fr}
  .tm2 .t2vacts{flex-direction:row;flex-wrap:wrap}
}

/* ==========================================================================
   v32.2 — the home page conditions section.

   The v32.1 area matcher's own rules (#hurt .hchip, .hcard, .hurtbar and the
   rest) are left in place but no longer match anything: the section now renders
   the seven guide cards instead. Only the grid needs saying, because the card
   itself is the shared .s2relslide, defined once above.
   ========================================================================== */
#hurt.hurt2 .s2relslides{margin-top:34px}
#hurt.hurt2 .hurtmore{margin-top:30px;text-align:center}
@media (min-width:1100px){
  /* seven cards: four then three, rather than a 3x3 with two holes in it */
  #hurt.hurt2 .s2relslides{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* ==========================================================================
   v32.3 — the hero is light.

   Jenny, 11 September 2026: "for the other tab with solid color as the
   background, can we change it to a more light yellow tone with gradient
   effect, as now it is so dark now feeling relex."

   v32.1 put the copy on a cocoa-to-clay gradient because that was the only
   ground dark enough to carry white type without a photograph fighting it.
   Inverting it means inverting everything the dark ground was holding up: the
   type, the breadcrumb, the chips, the outline button, the media panel's
   shadow, and the header nav. All of those are below, in that order.

   Measured worst case on the new ground: cocoa on the darkest stop (#EFD9A6)
   is 11.6:1; the clay italic in the h1 is 5.3:1 as large text (needs 3:1).
   ========================================================================== */
.sv2 .s2hero, .cn2 .s2hero, .hb2 .s2hero{
  background:
    radial-gradient(120% 92% at 88% 6%, rgba(223,201,131,.55) 0, transparent 60%),
    radial-gradient(86% 68% at 2% 98%, rgba(166,83,67,.10) 0, transparent 62%),
    linear-gradient(126deg,#FFFCF4 0%,#FBF2DC 32%,#F5E6C2 66%,#EFD9A6 100%);
  color:var(--cocoa)}

/* the champagne hairline at the foot was there to separate a dark hero from the
   cream band below. On a light hero it would be invisible; a soft clay rule
   does the same job. */
.sv2 .s2hero::before, .cn2 .s2hero::before, .hb2 .s2hero::before{
  background:linear-gradient(90deg,transparent,rgba(166,83,67,.30) 28%,
             rgba(166,83,67,.30) 72%,transparent)}

/* ---------- type ---------------------------------------------------------- */
.sv2 .s2hero h1, .cn2 .s2hero h1, .hb2 .s2hero h1{color:var(--cocoa);text-shadow:none}
.sv2 .s2hero h1 em, .sv2 .s2hero h1 i,
.cn2 .s2hero h1 em, .cn2 .s2hero h1 i,
.hb2 .s2hero h1 em, .hb2 .s2hero h1 i{color:var(--clay)}
.sv2 .s2vp, .cn2 .s2vp, .hb2 .s2vp{color:#4A4846}
.sv2 .s2trust, .cn2 .s2trust, .hb2 .s2trust{color:#5A5754}
.sv2 .s2trust .st, .cn2 .s2trust .st, .hb2 .s2trust .st{color:var(--clay)}
.sv2 .s2hero .crumb, .cn2 .s2hero .crumb, .hb2 .s2hero .crumb{
  background:rgba(36,35,34,.05);border:1px solid rgba(36,35,34,.13);
  color:#5A5754}
.sv2 .s2hero .crumb a, .cn2 .s2hero .crumb a, .hb2 .s2hero .crumb a{
  color:var(--clay-ink)}

/* the condition guides' three chips */
.sv2 .s2hero .s2chip, .cn2 .s2hero .s2chip{
  color:var(--cocoa);background:rgba(255,255,255,.62);
  border:1px solid rgba(36,35,34,.16);text-shadow:none}

/* the outline button next to Book. The renderers emit .ghost-w, which is white
   on white here; this is the dark equivalent rather than a rename across four
   templates. */
.sv2 .s2hero .btn.ghost-w, .cn2 .s2hero .btn.ghost-w, .hb2 .s2hero .btn.ghost-w{
  background:rgba(255,255,255,.5);border:1px solid rgba(36,35,34,.45);
  color:var(--cocoa)!important;backdrop-filter:none}
.sv2 .s2hero .btn.ghost-w:hover, .cn2 .s2hero .btn.ghost-w:hover,
.hb2 .s2hero .btn.ghost-w:hover{background:var(--cocoa);color:#FBF8F3!important;
  border-color:var(--cocoa)}

/* ---------- the media panel on a light ground ---------------------------- */
.sv2 .s2media, .cn2 .s2media, .hb2 .s2media{
  box-shadow:0 2px 5px rgba(36,35,34,.10),0 20px 48px rgba(36,35,34,.16);
  outline:1px solid rgba(36,35,34,.08)}

/* ---------- the header --------------------------------------------------- */
/* body.svc gives every v2 page a cream nav and a dark backdrop band, because
   until now every v2 hero was dark. They are all light now. Measured before
   this rule: nav links 1.3:1 on the new ground. */
body.sv2 header:not(.solid), body.cn2 header:not(.solid){background:none}
body.sv2 header:not(.solid) nav.desk>a, body.cn2 header:not(.solid) nav.desk>a,
body.sv2 header:not(.solid) nav.desk .navitem,
body.cn2 header:not(.solid) nav.desk .navitem{color:var(--cocoa);text-shadow:none}
body.sv2 header:not(.solid) .brand .logo-cream,
body.cn2 header:not(.solid) .brand .logo-cream{display:none}
body.sv2 header:not(.solid) .brand .logo-dark,
body.cn2 header:not(.solid) .brand .logo-dark{display:block}
body.sv2 header:not(.solid) .burger span,
body.cn2 header:not(.solid) .burger span{background:var(--cocoa)}

/* ---------- the photograph hero ------------------------------------------ */
/* Was scoped to .hb2 when only the hubs used it. Counselling uses it now too
   (Jenny: "change to be attached photo - adult-therapy and you can take out the
   picture at the right side"), and that page carries no .hb2. */
.s2hero.hbhero{
  position:relative;min-height:0;display:block;overflow:hidden;
  padding:clamp(128px,14vw,168px) 0 clamp(56px,7vw,88px);
  background:var(--oat);color:var(--cocoa)}
.s2hero.hbhero::after{content:none}
/* The header overlays the hero. On a gradient hero the cocoa nav has a known
   pale ground; on a PHOTOGRAPH hero it does not, and it measured 1.87:1 on
   counselling and 2.81:1 on the hubs. A soft cream band under the header only -
   it has faded to nothing by 150px - gives the nav a ground without putting a
   dark tone on the picture. It sits above the photo (z-index 1) and below the
   copy card (z-index 2). */
.s2hero.hbhero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(251,248,243,.95) 0,
             rgba(251,248,243,.74) 46%,rgba(251,248,243,0) 100%)}
.hbbg{position:absolute;inset:0;z-index:0}
.hbbg picture, .hbbg img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.s2hero.hbhero .s2heroin{
  position:relative;z-index:2;grid-template-columns:minmax(0,560px);
  justify-content:start}
@media (min-width:1200px){
  .s2hero.hbhero .s2heroin{grid-template-columns:minmax(0,600px)}
}
.hbhcard{
  background:rgba(251,248,243,.955);
  border:1px solid rgba(223,201,131,.85);
  border-radius:16px;
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.2vw,38px)}
.hbhcard .crumb{background:rgba(36,35,34,.06);border:1px solid rgba(36,35,34,.14);
  color:var(--cocoa)}
.hbhcard .crumb a{color:var(--clay-ink)}
.hbhcard h1{color:var(--cocoa);text-shadow:none;max-width:18ch}
.hbhcard h1 em, .hbhcard h1 i{color:var(--clay)}
.hbhcard .s2vp{color:#4A4846;text-shadow:none;max-width:48ch}
.hbhcard .s2trust{color:#5A5754;text-shadow:none}
.hbhcard .s2trust .st{color:var(--clay)}
.hbhcard .btn.ghost{border-color:rgba(36,35,34,.5)}
@media (max-width:820px){
  .s2hero.hbhero{padding:clamp(104px,20vw,140px) 0 clamp(34px,7vw,48px)}
  .s2hero.hbhero .s2heroin{grid-template-columns:1fr;padding:0 18px}
  .hbhcard{padding:22px 20px}
}

/* ==========================================================================
   v32.3 — the home page conditions carousel.

   Jenny: "lets use a movement carousell format to display this". It runs the
   same JS as the practitioner carousel rather than a second implementation -
   see the note in site.js - so it inherits the whole accessibility contract:
   a pause control (WCAG 2.2.2 requires one for anything that moves by itself
   for more than five seconds), prev/next, dots, a live region, pausing on
   hover, focus and touch, and no motion at all under prefers-reduced-motion.

   It is a scroll-snap TRACK, not a slider: every card stays in the DOM and in
   the accessibility tree at every position, so nothing is hidden from a reader
   using a screen reader, from a crawler, or from someone who just wants to
   swipe.
   ========================================================================== */
#hurt.hurt2 .gcar{position:relative;margin-top:30px}
/* flex, not grid. The track first carried .s2relslides too, whose
   grid-template-columns:repeat(3,1fr) fought grid-auto-columns and squeezed
   four of the seven cards to 50px. One layout per element. */
#hurt.hurt2 .hurttrack{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px}
#hurt.hurt2 .hurttrack>*{flex:0 0 calc((100% - 3*20px)/4);scroll-snap-align:start}
#hurt.hurt2 .hurttrack::-webkit-scrollbar{display:none}

#hurt.hurt2 .hurttrack:focus-visible{outline:2px solid var(--clay);outline-offset:3px;
  border-radius:18px}
#hurt.hurt2 .s2pcbar{margin-top:20px}
#hurt.hurt2 .hurtmore{margin-top:26px;text-align:center}

@media (max-width:1100px){
  #hurt.hurt2 .hurttrack{gap:18px}
  #hurt.hurt2 .hurttrack>*{flex-basis:calc((100% - 2*18px)/3)}
}
@media (max-width:820px){
  #hurt.hurt2 .hurttrack{gap:16px}
  #hurt.hurt2 .hurttrack>*{flex-basis:calc((100% - 16px)/2)}
}
@media (max-width:560px){
  #hurt.hurt2 .hurttrack{gap:14px}
  #hurt.hurt2 .hurttrack>*{flex-basis:86%}
  #hurt.hurt2 .s2relslide.cslide{max-width:none;margin-inline:0}
}
/* the cards are all 4:5, so the track needs no height management */
#hurt.hurt2 .hurttrack{transition:none}

/* ==========================================================================
   v32.4 — three fixes from Jenny's 11 Sep review.
   ========================================================================== */

/* ---------- 1. the CTA headings sit centred ------------------------------
   .s2cta already sets text-align:center, but .s2head h2 carries its own
   max-width with no auto margins, so the heading stayed hard left while the
   eyebrow, the sentence and the buttons under it were all centred. */
.sv2 .s2cta .s2head h2, .cn2 .s2cta .s2head h2,
.sv2 .s2cta .s2head .eyebrow, .cn2 .s2cta .s2head .eyebrow{
  margin-left:auto;margin-right:auto;text-align:center}
.sv2 .s2cta .s2head, .cn2 .s2cta .s2head{text-align:center}

/* ---------- 2. the phone hero is a banner --------------------------------
   Jenny: "On mobile, i need the condition/service page hero banner background
   should be the feature video/pic."

   Under 820px the 4:5 panel stops being a panel and becomes the background of
   the whole hero. The copy then needs a ground that is not the footage, so it
   goes on the same solid cream card the photograph heroes already use - no
   translucent wash over the picture, consistent with the card change above.
   ========================================================================== */
@media (max-width:820px){
  .sv2 .s2hero:not(.hbhero), .cn2 .s2hero:not(.hbhero){
    position:relative;overflow:hidden;
    padding:clamp(118px,24vw,158px) 0 clamp(46px,11vw,68px)}

  .sv2 .s2hero:not(.hbhero) .s2media,
  .cn2 .s2hero:not(.hbhero) .s2media{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;max-width:none;margin:0;
    aspect-ratio:auto;border-radius:0;box-shadow:none;outline:none}
  .sv2 .s2hero:not(.hbhero) .s2media::after,
  .cn2 .s2hero:not(.hbhero) .s2media::after{content:none}
  .sv2 .s2hero:not(.hbhero) .s2media video,
  .sv2 .s2hero:not(.hbhero) .s2media img,
  .cn2 .s2hero:not(.hbhero) .s2media video,
  .cn2 .s2hero:not(.hbhero) .s2media img{
    width:100%;height:100%;object-fit:cover;object-position:50% 38%}

  /* static, so the absolutely-positioned media resolves against .s2hero and
     covers the hero's padding too. With .s2heroin positioned, the media only
     covered the content box and left a band of gradient above and below. */
  .sv2 .s2hero:not(.hbhero) .s2heroin,
  .cn2 .s2hero:not(.hbhero) .s2heroin{
    position:static;grid-template-columns:1fr;padding:0 16px}

  /* .s2hcopy is not positioned, so an absolutely-positioned sibling paints
     over it whatever its z-index. Lift it out of the background layer. */
  .sv2 .s2hero:not(.hbhero) .s2hcopy,
  .cn2 .s2hero:not(.hbhero) .s2hcopy{position:relative;z-index:2}

  /* the copy card: opaque, so the type is read against a known colour and the
     picture behind it carries no wash of any kind */


  /* the header overlays the banner. Same soft cream band the photograph heroes
     use, faded to nothing by 130px - the nav needs a ground, the picture does
     not need a tint. */
  .sv2 .s2hero:not(.hbhero)::before,
  .cn2 .s2hero:not(.hbhero)::before{
    content:"";position:absolute;left:0;right:0;top:0;bottom:auto;height:130px;
    z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(251,248,243,.95) 0,
               rgba(251,248,243,.72) 46%,rgba(251,248,243,0) 100%)}

  /* the hero's own foot rule would now sit over the picture */
  .sv2 .s2hero:not(.hbhero)::after, .cn2 .s2hero:not(.hbhero)::after{content:none}
}

/* ---------- 3. a rule between the guides and Kamal ----------------------- */
/* Jenny: "put a division line between or start with what you are dealing with
   and Kamal profile". The home page already has a .rule element for exactly
   this; this is the same one, emitted by hp_matcher. */
#hurt.hurt2 + .rule{margin:0 auto;max-width:1180px}

/* ==========================================================================
   v32.5 — the home page conditions carousel, arrows beside the cards.

   Jenny, 11 September 2026: "'Showing 1 of 7' can be taken out, and put the
   arrow right next to the photo carousell, so it is more interative."

   The status line is not deleted, it is moved to .visually-hidden: sighted
   readers now get the position from the dots and the arrows, and a screen
   reader still hears "Showing 3 of 7" when the track moves. Deleting it would
   have taken the position away from the people who cannot see the dots.
   ========================================================================== */
#hurt.hurt2 .gcar{position:relative;padding-inline:0}

/* 30%, not 50%: the cards now carry their copy in the lower half, and a white
   circle at the midpoint sat directly on the first and last card's heading -
   measured at 1.12:1 against the type it was covering. At 30% the arrows sit
   over the clear top of the picture, where they belong. */
#hurt.hurt2 .hcarnav{
  position:absolute;top:30%;transform:translateY(-50%);z-index:3;
  appearance:none;cursor:pointer;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.94);
  color:var(--cocoa);font:inherit;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(36,35,34,.14),0 10px 24px rgba(36,35,34,.12);
  transition:background .18s, transform .18s, box-shadow .18s}
#hurt.hurt2 .hcarnav:hover{background:var(--cocoa);color:#FBF8F3;
  transform:translateY(-50%) scale(1.06)}
#hurt.hurt2 .hcarnav:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
#hurt.hurt2 .hcarprev{left:-10px}
#hurt.hurt2 .hcarnext{right:-10px}

/* the bar is only the dots now */
#hurt.hurt2 .s2pcbar{margin-top:18px}

@media (prefers-reduced-motion: reduce){
  #hurt.hurt2 .hcarnav{transition:none}
  #hurt.hurt2 .hcarnav:hover{transform:translateY(-50%)}
}
@media (max-width:900px){
  /* inside the track edge on a phone, where there is no room beside it */
  #hurt.hurt2 .hcarprev{left:4px}
  #hurt.hurt2 .hcarnext{right:4px}
  #hurt.hurt2 .hcarnav{width:40px;height:40px;font-size:20px;
    background:rgba(255,255,255,.92)}
}

/* ==========================================================================
   v32.5 — three mobile fixes.
   ========================================================================== */

/* 1. The hero copy card lets the picture through.
      Jenny: "i don't want the white cell cover the whole background, make it
      transparent, so we can see the background."

      Alpha alone would not survive: a photograph runs the full luminance range
      and the type would fail over its dark patches. The card is translucent AND
      blurred, so what shows through is a soft wash of the picture's own colour
      rather than its detail - the background reads, and the ground under the
      type is smooth enough to measure. Re-measure with tools/contrast.py if
      these numbers move; where backdrop-filter is unsupported the alpha steps
      back up so nothing is left unreadable. */
/* The translucent blurred copy card that lived here is gone: Jenny asked for
   no white cell on any banner at all (v32.6). The copy now sits on the
   gradient on desktop and on the footage on a phone. */


@media (max-width:820px){
  /* 2. Each stacked fee box gets its own Book button (markup in svc2.fees). */
  .sv2 .s2feerow, .cn2 .s2feerow{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:14px;row-gap:4px}
  .sv2 .s2feerow .rt, .cn2 .s2feerow .rt{grid-column:1;margin:0}
  .sv2 .s2feerow .rm, .cn2 .s2feerow .rm{grid-column:1}
  .sv2 .s2feerow .btn, .cn2 .s2feerow .btn{grid-column:2;grid-row:1 / span 2;
    white-space:nowrap}

  /* 3. The second practitioner peeks in, so it is obvious the row scrolls.
        Jenny: "i want to show the second practitioners a bit to indicate that
        there are another choice and they can scroll to the right to see." */
  .sv2 .s2prac, .cn2 .s2prac{flex:0 0 86%}
}

/* ==========================================================================
   v32.5 — the About profiles.
   ========================================================================== */

/* On a phone the services list folds away with the biography (Jenny: "hide the
   what he offers under more... too"). The toggle already switches .is-clamped
   on .t2bio, so the list follows it as a sibling rather than needing its own
   button and its own state. */
@media (max-width:900px){
  .tm2 .t2bio.is-clamped ~ .t2offblock{display:none}
}
/* A practitioner whose bio is a single sentence has nothing to reveal on
   desktop, so that card's button is a phone-only control. */
@media (min-width:901px){
  .tm2 .t2morebtn.t2mobonly{display:none}
}

/* ==========================================================================
   v32.6 — no white cell on any banner.

   Jenny, 11 September 2026: "for all the banner in the page, I don't need a
   white cell! Just simply put the wording onto the solid color background
   (desktop) / onto the picture/footage (mobile)."

   Desktop is easy: the copy goes straight onto the champagne gradient, which is
   a known colour, and the photograph heroes stop being a special case - they
   use the same layout as everything else, picture in the panel beside the copy.

   Mobile is the part that needed care. White type over arbitrary footage is the
   failure this project has already hit three times. The answer is not a panel
   and not a wash over the whole picture: it is a gradient that belongs to the
   banner itself, dark at the foot where the words are and completely clear at
   the top. That is how a photographic banner has always worked - it does not
   read as a cell over the image, it reads as the image.
   ========================================================================== */

/* the card is gone everywhere */
.hbhcard{background:none;border:0;padding:0;-webkit-backdrop-filter:none;
  backdrop-filter:none}

@media (max-width:820px){
  .sv2 .s2hero:not(.hbhero) .s2hcopy,
  .cn2 .s2hero:not(.hbhero) .s2hcopy{
    background:none;border:0;padding:0;
    -webkit-backdrop-filter:none;backdrop-filter:none}

  /* the banner's own gradient: clear at the top, deep at the foot */
  /* The banner is taller on a phone so the picture has a clear quarter at the
     top before the copy starts. Below that the gradient has to reach alpha .80
     or the white type fails over the brightest frames - measured, not guessed:
     at .34 through the middle the h1 came out at 1.47:1. This is a photographic
     gradient, not a panel: it has no edges, no corners and no fill of its own,
     and the top of the footage is untouched. */
  .sv2 .s2hero:not(.hbhero), .cn2 .s2hero:not(.hbhero){
    min-height:92vh;padding-top:clamp(190px,44vw,240px)}
  .sv2 .s2hero:not(.hbhero) .s2media::after,
  .cn2 .s2hero:not(.hbhero) .s2media::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,
      rgba(22,16,13,.34) 0, rgba(22,16,13,.13) 14%,
      rgba(22,16,13,.46) 19%, rgba(22,16,13,.87) 26%,
      rgba(22,16,13,.90) 60%, rgba(22,16,13,.92) 100%)}

  /* white type, because the foot of the banner is now reliably dark */
  .sv2 .s2hero:not(.hbhero) h1, .cn2 .s2hero:not(.hbhero) h1{color:#fff}
  .sv2 .s2hero:not(.hbhero) h1 em, .sv2 .s2hero:not(.hbhero) h1 i,
  .cn2 .s2hero:not(.hbhero) h1 em, .cn2 .s2hero:not(.hbhero) h1 i{color:#F2E7C4}
  .sv2 .s2hero:not(.hbhero) .s2vp, .cn2 .s2hero:not(.hbhero) .s2vp{
    color:rgba(255,255,255,.94)}
  .sv2 .s2hero:not(.hbhero) .s2trust, .cn2 .s2hero:not(.hbhero) .s2trust{
    color:rgba(255,255,255,.88)}
  .sv2 .s2hero:not(.hbhero) .s2trust .st,
  .cn2 .s2hero:not(.hbhero) .s2trust .st{color:#DFC983}
  .sv2 .s2hero:not(.hbhero) .crumb, .cn2 .s2hero:not(.hbhero) .crumb{
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
    color:rgba(255,255,255,.92)}
  .sv2 .s2hero:not(.hbhero) .crumb a, .cn2 .s2hero:not(.hbhero) .crumb a{color:#fff}
  .sv2 .s2hero:not(.hbhero) .s2chip, .cn2 .s2hero:not(.hbhero) .s2chip{
    color:#fff;background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28)}
  .sv2 .s2hero:not(.hbhero) .btn.ghost-w,
  .cn2 .s2hero:not(.hbhero) .btn.ghost-w{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.7);
    color:#fff!important}

  /* the copy sits at the foot, in the dark part of the gradient */
  .sv2 .s2hero:not(.hbhero) .s2heroin,
  .cn2 .s2hero:not(.hbhero) .s2heroin{align-items:end}

  /* the header band over a banner that is now light at the top */
  /* the banner is dark at the top now, so the nav goes back to the cream
     treatment body.svc gives it, and the cream band under the header is not
     needed - it would only lighten the picture for no reason. */
  .sv2 .s2hero:not(.hbhero)::before,
  .cn2 .s2hero:not(.hbhero)::before{content:none}
  body.sv2 header:not(.solid) nav.desk>a, body.cn2 header:not(.solid) nav.desk>a,
  body.sv2 header:not(.solid) nav.desk .navitem,
  body.cn2 header:not(.solid) nav.desk .navitem{color:#FBF8F3;
    text-shadow:0 1px 2px rgba(20,18,16,.8)}
  body.sv2 header:not(.solid) .brand .logo-dark,
  body.cn2 header:not(.solid) .brand .logo-dark{display:none}
  body.sv2 header:not(.solid) .brand .logo-cream,
  body.cn2 header:not(.solid) .brand .logo-cream{display:block}
  body.sv2 header:not(.solid) .burger span,
  body.cn2 header:not(.solid) .burger span{background:#FBF8F3}
}

/* ==========================================================================
   v32.6 — the home page guide cards: the picture IS the card.

   Jenny: "can you make the picture as the background and the details and
   description, CTA can be on the picture. DON'T PUT THE WORD ON WHITE CELL
   AGAIN!!!"

   So: full-bleed picture, white copy and the button laid over it, and a
   gradient that belongs to the picture rather than a panel sitting on it -
   clear at the top, deep at the foot. It is the same device as the signature
   carousel on the same page, which is the look this is meant to match.

   Only the home page. The hub and the seven guides keep the three-band card
   Jenny asked for in v32.4, where the footage has nothing over it at all.
   ========================================================================== */
.s2relslide.s2relover{
  position:relative;display:block;border:0;background:#1B1512;
  aspect-ratio:3/4;overflow:hidden}
.s2relslide.s2relover .s2relmedia{
  position:absolute;inset:0;aspect-ratio:auto;height:100%;width:100%;z-index:0}
.s2relslide.s2relover .s2relmedia::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* The top third of the picture is untouched; below that the gradient has to
     reach .86 or white type fails over the brightest of the seven photographs -
     measured, not guessed: at .62 through the copy the worst card came out at
     1.10:1. */
  background:linear-gradient(180deg,
    rgba(20,15,12,0) 0, rgba(20,15,12,.06) 24%, rgba(20,15,12,.55) 36%,
    rgba(20,15,12,.86) 46%, rgba(20,15,12,.92) 72%, rgba(20,15,12,.94) 100%)}

.s2relslide.s2relover .s2reltop{
  position:absolute;left:0;right:0;bottom:74px;z-index:2;
  background:none;padding:0 20px}
.s2relslide.s2relover .s2relfoot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:none;padding:0 20px 20px;margin:0}

.s2relslide.s2relover h3{color:#fff;font-size:clamp(19px,1.5vw,22px)}
.s2relslide.s2relover p{color:rgba(255,255,255,.92);margin-top:7px}
.s2relslide.s2relover .cacts .btn.explore{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.72);
  color:#fff!important}
.s2relslide.s2relover .cacts .btn.explore:hover{
  background:#fff;color:var(--cocoa)!important;border-color:#fff}

@media (prefers-reduced-motion: reduce){
  .s2relslide.s2relover{transition:none}
}

/* ==========================================================================
   v32.7 — nothing over the picture. Anywhere.

   Jenny, 12 September 2026: "i need a crystal clear background without any
   black dilute effect at the back. That means we can clearly see the whole
   picture and the word but NO black shadow at the back!!!! ... on mobile ...
   i don't why there is a grey banner for brand logo and hamburger menu ... just
   simply put the logo and menu on the background photo / video footage."

   The "grey banner" was the top stop of that same gradient, darkening the strip
   the logo and burger sit on. One removal fixes both complaints.

   WHAT REPLACES IT, and the honest cost:

   The contrast has to come from somewhere, and with no layer over the picture
   the only place left is the glyphs themselves - a tight dark halo plus a soft
   spread, which is the standard treatment for type over photography. Between
   the letters the photograph is at 100%: nothing is dulled, tinted or covered.

   WCAG 2.1 does not count text-shadow toward the contrast ratio, so an
   automated audit will flag this type even though it is readable in practice.
   That is a real trade and it is Jenny's decision, made explicitly and more
   than once. Recorded as CLINIC-CONFIRMATIONS item 82 rather than quietly
   reintroduced - if the position ever changes, the gradients are one block of
   CSS away.
   ========================================================================== */

/* ---------- 1. the home page guide cards -------------------------------- */
.s2relslide.s2relover .s2relmedia::after{content:none}

/* ---------- 2. the phone hero banner ------------------------------------ */
@media (max-width:820px){
  .sv2 .s2hero:not(.hbhero) .s2media::after,
  .cn2 .s2hero:not(.hbhero) .s2media::after{content:none}
}

/* ---------- 3. the halo that replaces them ------------------------------ */
/* Two shadows, not one: a 1px dark ring gives the glyph an edge against a
   light frame, and the wider soft spread separates it from a busy one. */
/* The cards carry small type on busy frames, so they get a true 1px stroke
   (four offset copies) under the soft spread. A stroke sits ON the glyph edge;
   it does not touch the pixels between the letters, so the photograph is still
   at 100% everywhere you can see it. */
.s2relslide.s2relover h3,
.s2relslide.s2relover p{
  text-shadow:
    -1px -1px 0 rgba(8,6,5,.92),  1px -1px 0 rgba(8,6,5,.92),
    -1px  1px 0 rgba(8,6,5,.92),  1px  1px 0 rgba(8,6,5,.92),
     0 2px 5px rgba(8,6,5,.95),
     0 4px 18px rgba(8,6,5,.88),
     0 0 36px rgba(8,6,5,.7)}
.s2relslide.s2relover h3{font-weight:500}
/* 14px at weight 400 is the hardest thing to read over a photograph; a half
   step of weight does more for it than any amount of extra shadow. */
.s2relslide.s2relover p{font-weight:500;font-size:14.5px;line-height:1.5}
.s2relslide.s2relover .cacts .btn.explore{
  background:rgba(16,12,10,.42);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(10,8,6,.9)}

@media (max-width:820px){
  .sv2 .s2hero:not(.hbhero) h1, .cn2 .s2hero:not(.hbhero) h1,
  .sv2 .s2hero:not(.hbhero) .s2vp, .cn2 .s2hero:not(.hbhero) .s2vp,
  .sv2 .s2hero:not(.hbhero) .s2trust, .cn2 .s2hero:not(.hbhero) .s2trust{
    text-shadow:
      0 1px 1px rgba(10,8,6,.95),
      0 0 3px rgba(10,8,6,.9),
      0 2px 16px rgba(10,8,6,.82),
      0 0 34px rgba(10,8,6,.6)}

  /* the chips, the crumb and the outline button carry their own tinted fill
     rather than a layer over the picture - they are small, opaque objects, not
     a wash across the frame */
  .sv2 .s2hero:not(.hbhero) .crumb, .cn2 .s2hero:not(.hbhero) .crumb{
    background:rgba(16,12,10,.46);border-color:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    text-shadow:0 1px 2px rgba(10,8,6,.9)}
  .sv2 .s2hero:not(.hbhero) .s2chip, .cn2 .s2hero:not(.hbhero) .s2chip{
    background:rgba(16,12,10,.46);border-color:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    text-shadow:0 1px 2px rgba(10,8,6,.9)}
  .sv2 .s2hero:not(.hbhero) .btn.ghost-w,
  .cn2 .s2hero:not(.hbhero) .btn.ghost-w{
    background:rgba(16,12,10,.46);border-color:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    text-shadow:0 1px 2px rgba(10,8,6,.9)}

  /* 4. the logo and the burger sit on the footage, with nothing behind them */
  body.sv2 header:not(.solid) nav.desk>a, body.cn2 header:not(.solid) nav.desk>a,
  body.sv2 header:not(.solid) nav.desk .navitem,
  body.cn2 header:not(.solid) nav.desk .navitem{
    text-shadow:0 1px 2px rgba(10,8,6,.95),0 0 12px rgba(10,8,6,.8)}
  body.sv2 header:not(.solid) .brand img,
  body.cn2 header:not(.solid) .brand img{
    filter:drop-shadow(0 1px 3px rgba(10,8,6,.9))
           drop-shadow(0 0 10px rgba(10,8,6,.6))}
  body.sv2 header:not(.solid) .burger span,
  body.cn2 header:not(.solid) .burger span{
    box-shadow:0 1px 3px rgba(10,8,6,.9)}
}

/* =======================================================================
   v32.8 — two defects Jenny reported on 12 Sep 2026.

   1. "the FAQ in the About tab - it can't show the whole message."

      The answers were not being clipped by anything in the FAQ code. They
      were being clipped by the ORIGINAL homepage accordion, which declares

          .fa{max-height:0;overflow:hidden;transition:max-height .35s ease}

      unscoped, near the top of this file (~line 337). That accordion is
      driven by JS on index.html: the button sets an inline max-height to
      open the panel. The v2 FAQ uses <details>/<summary> and has no JS to
      set that inline value, so every answer on every generated page kept
      max-height:0 and showed nothing but its 24px of padding. About was
      simply where it was noticed; the six condition guides and the eleven
      service pages had the same defect.

      Scoping the old rule would mean editing a block index.html depends
      on, so the reset goes here instead. .s2faq .fa is (0,2,0) against the
      old rule's (0,1,0), so it wins wherever both apply and the homepage
      accordion is untouched.

   2. "for the mobile screen, take out the shadow at the top of the page,
       i don't need any shadow bar behind the logo and menu."

      v40 removed the header's background and box-shadow, and moved the
      .solid threshold past the hero, but the phone block at ~line 656 also
      sets backdrop-filter:blur(10px) and nothing reset it. A backdrop
      filter with no background of its own still paints: it blurs a
      header-shaped rectangle of whatever is behind it, which over a photo
      or a clip reads as exactly the grey bar she is pointing at. Measured
      on 390px: header background rgba(0,0,0,0), box-shadow none,
      backdrop-filter blur(10px).

      Reset it while the header is transparent. header.solid re-declares
      the blur, so the frosted bar still appears once the page is scrolled
      past the hero, which is the only place it was ever wanted.
   ======================================================================= */

/* 1. the v2 FAQ answers open to their full height */
.s2faq .fa{max-height:none;overflow:visible;transition:none}

/* 2. no blurred band behind the logo and the hamburger */
header:not(.solid){backdrop-filter:none;-webkit-backdrop-filter:none}

/* -----------------------------------------------------------------------
   v32.8b — Jenny, 12 Sep 2026: "i need to add a footnote in every page to
   indicate that everything inside the page is belonged to Blossom Wellness
   clinic."

   The footer already carried the copyright line; it did not say what the
   copyright covers. The notice is a second line under it, in the same
   footer type but one step quieter, so the credit line stays the thing you
   read first. It ships from tools/chrome.json, so all 21 generated pages
   get it from one source; index.html is hand-maintained and carries the
   same wording inline.

   The wording is the clinic's standard ownership notice. Whether the clinic
   in fact holds the rights to every clip on the site is a question only
   Kamal can answer - logged as item 83 in CLINIC-CONFIRMATIONS.md, with the
   photographer/videographer agreement as the thing to check.
   ----------------------------------------------------------------------- */
footer .fbtm .fown{margin:8px auto 0;max-width:78ch;font-size:11.5px;
  line-height:1.6;color:rgba(251,248,243,.55)}
@media(max-width:600px){footer .fbtm .fown{font-size:11px;max-width:42ch}}

/* =======================================================================
   v32.9 — Jenny, 12 September 2026:
   "For homepage tab bar & logo, before scrolling to below, i want to in
    white font and font logo"

   So: over the hero, the home page nav goes white and the brand switches to
   the cream mark. On scroll the header goes .solid and both revert to cocoa,
   which is unchanged.

   The home page is the only page with a bare <body> - every generated page
   carries .svc - so body:not(.svc) is the whole scope. This deliberately
   overrides the top-level block at ~line 733, whose comment reads "the dark
   mark because the top of the clip is consistently bright". That was true of
   the part of the frame it was measured on and false of the rest:

     MEASURED under the header strip at 1440px, header hidden, first frame of
     clinic-fast.mp4 --
       under the wordmark   L 0.163 - 0.189   (a warm mid-brown wall)
       under the nav links  L 0.083 - 0.994   (a dark doorway AND a lit ceiling
                                               in the same 300px strip)

   No single type colour clears 4.5:1 across a strip that runs from L 0.08 to
   L 0.99. Cocoa failed on the dark half - that is confirmation item 78, which
   recorded 1.60:1 and has been open since the v20 round. White fails on the
   lit ceiling instead. Neither is a fix; the choice is which half to lose.

   White at least has a remedy the dark mark does not: the glyph stroke used
   on the guide cards in v32.7, which Jenny has already accepted as the way
   type sits on a picture here. It is applied below, heavier than the service
   pages use, because the ground it has to beat is brighter.

   WCAG 2.1 does not count text-shadow toward contrast, so this does not close
   item 78 - it changes what is failing and why. Both are recorded there.
   ======================================================================= */

/* nav links and the two dropdown buttons */
/* The Book CTA is its own champagne button with cocoa type on it - it already
   carries its own ground, so it must NOT inherit the stroke meant for type
   sitting straight on the footage. Measured 2.21:1 either way; unchanged by
   this round, and it is the same button the service pages use. */
body:not(.svc) header:not(.solid) nav.desk > a:not(.book),
body:not(.svc) header:not(.solid) nav.desk .navitem{
  color:#FBF8F3;
  text-shadow:
    -1px -1px 0 rgba(10,8,6,.9),  1px -1px 0 rgba(10,8,6,.9),
    -1px  1px 0 rgba(10,8,6,.9),  1px  1px 0 rgba(10,8,6,.9),
     0 2px 6px rgba(10,8,6,.95),
     0 4px 16px rgba(10,8,6,.85)}
body:not(.svc) header:not(.solid) nav.desk .navitem .chev{color:#FBF8F3}

/* the cream wordmark, with the same lift so it does not dissolve into the
   bright half of the frame */
body:not(.svc) header:not(.solid) .brand .logo-dark{display:none}
body:not(.svc) header:not(.solid) .brand .logo-cream{display:block}
body:not(.svc) header:not(.solid) .brand img{
  filter:drop-shadow(0 1px 3px rgba(10,8,6,.85))
         drop-shadow(0 0 12px rgba(10,8,6,.6))}

/* the hamburger, on the widths that show one */
/* The hamburger needs a real outline, not a soft shadow. At 390px the top of
   clinic-fast.mp4 is a lit ceiling, and three white bars with a blurred
   shadow under them all but vanished on it. The 1px spread ring below is an
   actual dark edge around each bar; the blur underneath is what lifts it off
   a mid-tone frame. Checked against both halves of the clip. */
body:not(.svc) header:not(.solid) .burger span{
  background:#FBF8F3;
  box-shadow:0 0 0 1px rgba(10,8,6,.78), 0 2px 5px rgba(10,8,6,.9)}

/* Scrolled state is untouched: .solid keeps the cocoa mark and cocoa type on
   the frosted cream bar. Nothing below this line should reintroduce a
   background or a blur on the transparent header - see v32.8. */