/* The Healing Centre: shared system extracted from the approved N4 homepage.
   Tokens, type, buttons, header, mobile menu, footer and the shared inner-page components.
   Page-specific composition lives in each page. */

/* ---------- fonts (self-hosted so the preview works offline; the live site loads the same families from Squarespace) ---------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-full-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-ext-full-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-ext-full-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  --hdr:104px;
  --navy:#071F2E; --navy-deep:#04151F; --teal:#0E4A56;
  --ivory:#F7F2E8; --sand:#EADFC9;
  --gold:#C4AD6E; --gold-pale:#DCC891; --gold-dark:#74601F;
  --ink:#14232E; --ink-soft:#3F4D58;
  --cream:#F2EADB; --cream-soft:rgba(242,234,219,.76);
  --line-dark:rgba(242,234,219,.22); --line-light:rgba(20,35,46,.18);
  --wrap:1440px; --gutter:64px; --gap:32px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}
body{background:var(--navy);color:var(--ink-soft);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.serif{font-family:var(--display);font-weight:400;font-optical-sizing:auto;letter-spacing:-.012em;text-wrap:balance}
p{max-width:34em}
ul,ol{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.g{display:grid;grid-template-columns:minmax(var(--gutter),1fr) repeat(12,minmax(0,calc((var(--wrap) - 2*var(--gutter) - 11*var(--gap))/12))) minmax(var(--gutter),1fr);column-gap:var(--gap)}
.split{display:grid;grid-template-columns:7fr 5fr;column-gap:96px;align-items:end}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase}
.dark{background:var(--navy);color:var(--cream)}
.dark .eyebrow{color:var(--gold-pale)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p{color:var(--cream)}
.light .eyebrow{color:var(--gold-dark)}
.light h1,.light h2,.light h3,.light h4{color:var(--ink)}
.teal-bg{background:var(--teal);color:var(--cream)}
.teal-bg .eyebrow{color:var(--gold-pale)}
.teal-bg h2,.teal-bg h3{color:#fff}
.teal-bg p{color:var(--cream)}
.ivory{background:var(--ivory)}
.sand-bg{background:var(--sand)}
figure img{width:100%;height:100%;object-fit:cover}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--navy);padding:10px 16px;font:600 13px var(--body)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.light :focus-visible,.sand-bg :focus-visible{outline-color:var(--gold-dark)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons and links: one system ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;font:600 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;border:1.5px solid transparent;white-space:nowrap;transition:background .2s,border-color .2s,color .2s;cursor:pointer}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-pale);border-color:var(--gold-pale)}
.btn-line{border-color:rgba(242,234,219,.5);color:var(--cream)}
.btn-line:hover{border-color:var(--cream)}
.light .btn-line,.sand-bg .btn-line{border-color:rgba(20,35,46,.45);color:var(--ink)}
.light .btn-line:hover,.sand-bg .btn-line:hover{border-color:var(--ink)}
.btn-sm{min-height:46px;padding:0 22px;font-size:12px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.arrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase}
.arrow span{transition:transform .2s}
.arrow:hover span{transform:translateX(4px)}
.dark .arrow,.teal-bg .arrow{color:var(--cream)} .dark .arrow span,.teal-bg .arrow span{color:var(--gold)}
.light .arrow{color:var(--ink)} .light .arrow span{color:var(--gold-dark)}
.textlink{color:var(--gold-dark);border-bottom:1px solid rgba(116,96,31,.45)}
.dark .textlink,.teal-bg .textlink{color:var(--cream);border-bottom-color:rgba(242,234,219,.4)}
.routes{border-top:1px solid var(--line-light)}
.routes a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-light);font:600 15px/1.2 var(--body);color:var(--ink)}
.routes a span{color:var(--gold-dark);font-size:18px;transition:transform .2s}
.routes a:hover span{transform:translateX(4px)}
.dark .routes,.teal-bg .routes{border-top-color:var(--line-dark)}
.dark .routes a,.teal-bg .routes a{border-bottom-color:var(--line-dark);color:var(--cream)}
.dark .routes a span,.teal-bg .routes a span{color:var(--gold)}

/* ---------- header (transparent over the homepage hero, solid navy band elsewhere) ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20}
.site-header.solid{position:static;background:var(--navy)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hdr)}
.logo{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.logo img{height:42px;width:auto}
.logo .name{font-family:var(--display);font-size:24px;line-height:1;color:#fff;letter-spacing:-.01em}
.logo .name small{display:block;font:700 9.5px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.nav{display:flex;align-items:center;flex:0 1 auto;gap:clamp(18px,2.05vw,30px)}
.nav a{font:500 clamp(14px,1.04vw,15px)/1 var(--body);color:var(--cream);padding:6px 0;white-space:nowrap}
.nav a:hover{color:#fff}
.nav a[aria-current="page"],.nav a.is-section{color:#fff;box-shadow:inset 0 -1.5px 0 var(--gold)}
.nav .has{position:relative}
.nav .has > a::after{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);margin:0 0 3px 8px}
.nav .dd{position:absolute;left:-22px;top:100%;padding-top:14px;display:none;z-index:30}
.nav .has:hover .dd,.nav .has:focus-within .dd{display:block}
.nav .dd ul{background:var(--navy-deep);border:1px solid var(--line-dark);padding:10px 0;min-width:240px;column-gap:0}
.nav .dd.wide ul{display:grid;grid-template-columns:1fr 1fr;min-width:480px}
.nav .dd a{display:block;padding:9px 22px;font:500 14.5px/1.3 var(--body);color:var(--cream);white-space:nowrap}
.nav .dd a:hover{color:#fff;background:rgba(242,234,219,.06)}
.nav .dd .all{border-top:1px solid var(--line-dark);margin-top:6px;padding-top:12px;color:var(--gold-pale)}
.nav .dd.wide .all{grid-column:1 / -1}
.hdr-cta{display:flex;align-items:center;flex:0 0 auto;gap:clamp(14px,1.8vw,26px)}
.hdr-cta .hdr-mail{font:600 14px/1 var(--body);color:#fff;white-space:nowrap;border-bottom:1px solid rgba(242,234,219,.35);padding-bottom:2px}
.hdr-cta .hdr-mail:hover{border-bottom-color:#fff}
.menu-btn{display:none}
.menu-panel{display:none}

/* ---------- breadcrumbs and compact page introductions (inner pages) ---------- */
.crumbs{font:500 13px/1.4 var(--body);color:var(--cream-soft);display:flex;flex-wrap:wrap;gap:6px 10px;padding:22px 0 22px}
.crumbs a{color:var(--cream-soft)}
.crumbs a:hover{color:#fff}
.crumbs span[aria-current]{color:var(--gold-pale)}
.pagehead{padding:34px 0 68px;border-top:1px solid var(--line-dark)}
.pagehead .eyebrow{color:var(--gold-pale);margin-top:26px}
.pagehead h1{font-size:clamp(50px,5.4vw,76px);line-height:1;color:#fff;margin-top:18px;max-width:11em}
.pagehead h1 em{font-style:italic;color:var(--gold-pale)}
.pagehead .lead{font-size:19px;line-height:1.55;color:var(--cream);margin-top:22px;max-width:34em}
.pagehead .ctas{margin-top:30px}
.pagehead .grid{display:grid;grid-template-columns:7fr 5fr;column-gap:96px;align-items:end}
.pagehead .facts{font-size:15.5px;line-height:1.5;color:var(--cream)}
.pagehead .facts dt{font:600 11.5px/1.9 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-soft);margin-top:10px}
.pagehead .facts dt:first-child{margin-top:0}
.pagehead .facts a{border-bottom:1px solid rgba(242,234,219,.4)}

/* ---------- sections ---------- */
.sec{padding:88px 0}
.sec-tight{padding:64px 0}
.sec + .sec.same{border-top:1px solid var(--line-light)}
.sec-head{display:grid;grid-template-columns:7fr 5fr;column-gap:96px;align-items:end;margin-bottom:44px}
.sec-head h2{font-size:clamp(38px,3.6vw,52px);line-height:1.06;margin-top:18px}
.sec-head .right p{font-size:17px}
.dark .sec-head .right p,.teal-bg .sec-head .right p{color:var(--cream)}
.two{display:grid;grid-template-columns:5fr 7fr;column-gap:96px;align-items:start}
.two h2{font-size:clamp(34px,3.2vw,44px);line-height:1.08}
.two .lead{font-size:16.5px;color:var(--ink-soft);margin-top:16px}
.dark .two .lead,.teal-bg .two .lead{color:var(--cream)}

/* ---------- prose (care, mission and information pages) ---------- */
.prose{max-width:38em;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.prose p{max-width:none}
.prose p + p{margin-top:16px}
.prose h2{font-size:clamp(30px,2.8vw,38px);line-height:1.12;color:var(--ink);margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:23px;line-height:1.25;color:var(--ink);margin:30px 0 10px}
.prose ul,.prose ol{margin:14px 0 18px;padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:6px 0;padding-left:4px}
.prose li::marker{color:var(--gold-dark)}
.prose a{color:var(--gold-dark);border-bottom:1px solid rgba(116,96,31,.45)}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose .note{margin:22px 0;padding:18px 22px;border-left:2px solid var(--gold);background:rgba(196,173,110,.12);font-size:15.5px;line-height:1.6}
.prose .note b{display:block;margin-bottom:4px}
.prose .urgent{margin:22px 0;padding:18px 22px;border-left:2px solid var(--navy);background:rgba(7,31,46,.06);font-size:15.5px;line-height:1.6}
.prose .urgent b{display:block;margin-bottom:6px;color:var(--ink)}
.contents{font:500 14px/1.6 var(--body)}
.contents h2{font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:12px}
.contents a{display:block;padding:8px 0;border-top:1px solid var(--line-light);color:var(--ink)}
.contents a:last-child{border-bottom:1px solid var(--line-light)}
.sticky{position:sticky;top:24px}
.sticky .card{margin-top:28px;padding:22px 0 0;border-top:2px solid var(--gold)}
.sticky .card h3{font-size:22px;line-height:1.2;color:var(--ink)}
.sticky .card p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin-top:8px;max-width:none}
.sticky .card .ctas{margin-top:16px}
.sticky .card .ctas .btn{width:100%}

/* ---------- price table and inclusions ---------- */
.prices h3{font-size:24px;line-height:1.2;color:var(--ink)}
.prices table,.ptable{width:100%;border-collapse:collapse;font-size:16px}
.ptable th,.ptable td,.prices th,.prices td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line-light);vertical-align:top}
.ptable thead th,.prices thead th{font:600 11.5px/1.6 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);border-bottom:1px solid rgba(20,35,46,.35)}
.ptable th:nth-child(n+2),.ptable td:nth-child(n+2),.prices th:nth-child(n+2),.prices td:nth-child(n+2){text-align:right;padding-left:20px;white-space:nowrap}
.ptable td.v,.prices td.v{font-family:var(--display);font-size:25px;line-height:1;color:var(--ink)}
.ptable td.cat{font:600 11.5px/1.6 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-top:24px;border-bottom:0}
.ptable td .sub{display:block;font-size:14px;color:var(--ink-soft);margin-top:2px}
.dark .ptable th,.dark .ptable td{border-bottom-color:var(--line-dark);color:var(--cream)}
.dark .ptable thead th{color:var(--gold-pale);border-bottom-color:rgba(242,234,219,.45)}
.dark .ptable td.v{color:#fff}
.dark .ptable td.cat{color:var(--gold-pale)}
.fine{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:none}
.dark .fine{color:var(--cream-soft)}
.notes{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.notes li{padding:8px 0 8px 18px;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:1px;background:var(--gold-dark)}
.notes b{color:var(--ink);font-weight:700}
.incl{border-top:1px solid var(--line-light)}
.incl li{display:grid;grid-template-columns:40px 1fr;column-gap:8px;padding:14px 0;border-bottom:1px solid var(--line-light);font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.incl .n{font-family:var(--display);font-style:italic;font-size:24px;line-height:1.1;color:var(--gold-dark)}
.incl b{color:var(--ink);font-weight:700}

/* ---------- booking choices ---------- */
.types{border-top:1px solid var(--line-light)}
.types li{display:grid;grid-template-columns:1fr 176px;column-gap:24px;padding:18px 0;border-bottom:1px solid var(--line-light)}
.types h3{font-size:22px;line-height:1.2;color:var(--ink)}
.types p{font-size:15px;color:var(--ink-soft);margin-top:6px;max-width:none}
.types .dur{font:600 12px/1.7 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);text-align:right}
.dark .types{border-top-color:var(--line-dark)} .dark .types li{border-bottom-color:var(--line-dark)} .dark .types h3{color:#fff} .dark .types p{color:var(--cream-soft)} .dark .types .dur{color:var(--gold-pale)}

/* ---------- clinic information ---------- */
.clinic-card dl{display:grid;grid-template-columns:96px 1fr;row-gap:12px;column-gap:16px;font-size:15.5px;line-height:1.5}
.clinic-card dt{font:600 11.5px/1.9 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-soft)}
.clinic-card dd{color:var(--cream)}
.clinic-card dd a{border-bottom:1px solid rgba(242,234,219,.4)}
.light .clinic-card dt{color:var(--ink-soft)} .light .clinic-card dd{color:var(--ink)} .light .clinic-card dd a{border-bottom-color:rgba(20,35,46,.35)}

/* ---------- accordion (native details, styled) ---------- */
.acc{border-top:1px solid var(--line-light)}
.acc details{border-bottom:1px solid var(--line-light)}
.acc summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;cursor:pointer;font-family:var(--display);font-size:22px;line-height:1.25;color:var(--ink);list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:none;font:400 26px/1 var(--display);color:var(--gold-dark);transition:transform .2s}
.acc details[open] summary::after{content:"\2212"}
.acc .body{padding:0 0 22px;font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:40em}
.acc .body p + p{margin-top:10px}
.acc .body a{color:var(--gold-dark);border-bottom:1px solid rgba(116,96,31,.45)}

/* ---------- related links and next step ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px}
.related a{display:block;padding:18px 0;border-top:1px solid var(--line-dark)}
.related .t{font-family:var(--display);font-size:22px;line-height:1.2;color:#fff}
.related .d{font-size:14.5px;line-height:1.5;color:var(--cream-soft);margin-top:6px}
.related a:hover .t{color:var(--gold-pale)}
.next{display:grid;grid-template-columns:1fr auto;column-gap:64px;align-items:center}
.next h2{font-size:clamp(36px,3.6vw,52px);line-height:1.04;color:#fff}
.next h2 em{font-style:italic;color:var(--gold-pale)}
.next p{color:var(--cream);margin-top:14px}
.next .ctas{margin-top:26px}

/* ---------- footer (N4) ---------- */
.site-footer{background:var(--navy-deep);color:var(--cream-soft);border-top:1px solid var(--line-dark);padding:44px 0 30px;font-size:14px}
.fcols{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr;column-gap:48px;padding-bottom:32px;border-bottom:1px solid var(--line-dark)}
.fcols h4{font:600 11.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fcols li{margin-bottom:7px}
.fcols a:hover{color:var(--cream)}
.fbrand .logo{margin-bottom:16px}
.fbrand .logo img{height:34px}
.fbrand .logo .name{font-size:19px}
.fbrand p{max-width:26em;line-height:1.6}
.fbrand p + p{margin-top:10px}
.fbrand a:not(.logo){color:var(--cream);border-bottom:1px solid rgba(242,234,219,.3)}
.fbrand .logo{border-bottom:0}
.fbottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;font-size:12.5px;color:rgba(242,234,219,.55)}
.fbottom a{border-bottom:1px solid rgba(242,234,219,.3)}

/* ---------- mobile (N4 breakpoint) ---------- */
@media (max-width:860px){
  :root{--gutter:22px;--gap:16px}
  body{font-size:16px}
  .g{display:block}
  .split,.sec-head,.two,.next,.pagehead .grid,.related{grid-template-columns:1fr;column-gap:0;row-gap:24px}
  .btn{min-height:52px}
  .ctas{flex-direction:column} .ctas .btn{width:100%;white-space:normal;line-height:1.3;padding:12px 20px}
  .logo{gap:10px} .logo img{height:32px} .logo .name{font-size:16px;white-space:nowrap} .logo .name small{font-size:7.5px;margin-top:4px;letter-spacing:.24em}
  .hdr-cta{gap:8px}
  .hdr-cta .btn-sm{letter-spacing:.14em;white-space:nowrap}
  .menu-btn{width:36px;height:36px}
  .crumbs{font-size:12.5px;padding:16px 0 16px}
  .pagehead{padding:26px 0 48px}
  .pagehead .eyebrow{margin-top:20px}
  .pagehead h1{font-size:clamp(40px,10.5vw,48px);max-width:none}
  .pagehead .lead{font-size:17px}
  .sec{padding:64px 0}
  .sec-tight{padding:48px 0}
  .sec-head{margin-bottom:32px}
  .sec-head h2{font-size:36px;margin-top:14px}
  .prose{font-size:16.5px}
  .prose h2{font-size:29px;margin-top:40px}
  .sticky{position:static}
  .types li{grid-template-columns:1fr;row-gap:6px}
  .types .dur{text-align:left}
  .ptable td.v,.prices td.v{font-size:22px}
  .clinic-card dl{grid-template-columns:84px 1fr}
  .acc summary{font-size:20px;padding:16px 0}
  .fcols{grid-template-columns:1fr 1fr;row-gap:26px;padding-bottom:30px}
  .fbrand{grid-column:1 / -1}
  .fbottom{flex-direction:column;gap:8px}
}
@media (max-width:1199px) and (min-width:861px){
  :root{--gutter:48px}
}

/* ---------- header: the desktop bar needs about 1200px to hold seven items, the wordmark
   and the two booking buttons without cramming. Below that, the menu button. ---------- */
@media (max-width:1199px){
  .nav,.hdr-cta .hdr-mail{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--cream)}
  .menu-btn i{display:block;width:18px;height:11px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
  .menu-btn[aria-expanded="true"] i{border:0;height:2px;background:currentColor;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] i::after{content:"";position:absolute;inset:0;background:currentColor;transform:rotate(90deg)}
  .menu-panel{display:none;background:var(--navy);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
  .menu-panel.open{display:block}
  .menu-panel a{display:block;padding:16px var(--gutter);font:500 17px/1.3 var(--body);color:var(--cream);border-bottom:1px solid rgba(242,234,219,.1)}
  .menu-panel a[aria-current="page"],.menu-panel a.is-section{color:var(--gold-pale)}
  .menu-panel .sub{padding-left:calc(var(--gutter) + 18px);font-size:15.5px;color:var(--cream-soft)}
  .menu-panel .mp-foot{display:grid;grid-template-columns:1fr;gap:10px;padding:18px var(--gutter) 22px}
  .menu-panel .mp-foot a{padding:0;border:0}
  .menu-panel .mp-foot .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 14px;font-size:12px;letter-spacing:.12em;white-space:nowrap;text-align:center;text-transform:none}
  .menu-panel .mp-foot .btn.btn-gold{text-transform:uppercase;letter-spacing:.16em}
  .menu-panel .mp-foot .btn.btn-line{border:1.5px solid rgba(242,234,219,.5);letter-spacing:.02em;font-size:13.5px}
  .menu-panel .mp-foot .btn.btn-line:hover{border-color:var(--cream)}
  .site-header:not(.solid) .menu-panel{position:absolute;left:0;right:0;top:100%}
  /* D15: below the desktop bar the header stays in view while scrolling (Wyld-style), on every page. */
  :root{--hdr:68px}
  .hdr-cta .btn-sm{min-height:36px;padding:0 16px;font-size:10.5px}
  .site-header,.site-header.solid{position:-webkit-sticky;position:sticky;top:0;z-index:40;background:rgba(7,31,46,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(242,234,219,.14)}
  .menu-panel{max-height:calc(100vh - var(--hdr));overflow:auto}
}
@media (max-width:860px){
  :root{--hdr:56px}
  .hdr-cta .btn-sm{min-height:32px;padding:0 12px;font-size:9.5px;letter-spacing:.12em}
  .menu-btn{width:36px;height:36px}
}


/* ---------- Google Maps preview (clinic addresses) ---------- */
.mapbox{margin-top:24px;border:1px solid var(--line-light);overflow:hidden;background:var(--cream)}
.mapbox .mapframe{position:relative;background:var(--sand)}
.mapbox iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.mapbox .mapfall{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;background:var(--sand);font:500 14px/1.5 var(--body);color:var(--ink-soft)}
.mapbox .mapfall b{font-family:var(--display);font-size:20px;font-weight:400;color:var(--ink)}
.mapbox .mapfall .pin{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gold-dark);margin-bottom:8px}
.mapbox .mapfoot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line-light);font:500 14px/1.4 var(--body);color:var(--ink-soft);background:var(--cream)}
.dark .mapbox,.teal-bg .mapbox{border-color:var(--line-dark);background:rgba(255,255,255,.06)}
.dark .mapbox .mapfoot,.teal-bg .mapbox .mapfoot{background:rgba(255,255,255,.06);border-top-color:var(--line-dark);color:var(--cream-soft)}
.dark .mapbox .mapfoot a,.teal-bg .mapbox .mapfoot a{color:var(--cream);border-bottom-color:rgba(242,234,219,.4)}
@media (max-width:860px){.mapbox .mapframe{height:220px !important}}

/* ---------- practitioner portraits on the clinic pages ---------- */
.team .person .portrait{display:block;margin-bottom:18px;border-bottom:0}
.team .person .portrait img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;background:var(--sand)}
@media (max-width:860px){.team .person .portrait{margin-bottom:14px}}

/* Very narrow phones: keep the header CTA from pushing the row wider than the screen. */
@media (max-width:400px){
  .site-header .wrap{gap:6px;padding-right:12px}
  .logo .name{font-size:15px}
  .logo .name small{display:none}
  .logo img{height:28px}
  .hdr-cta{gap:2px}
  .hdr-cta .btn-sm{padding:0 9px;font-size:9.5px;letter-spacing:.06em}
  .menu-btn{width:36px}
}
@media (max-width:860px){
  .site-header .logo .name{display:none}
  .site-header .logo img{height:30px}
  .site-header .logo{gap:0}
}

/* ---------- page figures: diagrams, illustrated scenes and equipment photographs ----------
   The global `figure img` rule crops with object-fit:cover. These rules are scoped to .fig so
   diagrams and full scenes are never cropped and labels stay complete. */
.fig{margin:34px 0 36px}
.fig > img{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
.fig.fig-narrow{max-width:400px}
.fig.fig-mid{max-width:560px}
.fig.fig-wide{max-width:680px}
.fig figcaption{margin-top:14px;font:400 14.5px/1.6 var(--body);color:var(--ink-soft);max-width:38em}
.fig figcaption b{color:var(--ink);font-weight:600}
.fig .credit{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-light);font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.fig .credit a{color:var(--gold-dark);border-bottom:1px solid rgba(116,96,31,.4)}
.fig .credit a:hover{border-bottom-color:var(--gold-dark)}
.fig-photo > img{object-fit:cover}
.dark .fig figcaption,.teal-bg .fig figcaption{color:var(--cream-soft)}
.dark .fig figcaption b,.teal-bg .fig figcaption b{color:#fff}
.dark .fig .credit,.teal-bg .fig .credit{border-top-color:var(--line-dark);color:var(--cream-soft)}
.dark .fig .credit a,.teal-bg .fig .credit a{color:var(--cream);border-bottom-color:rgba(242,234,219,.4)}
@media (max-width:860px){
  .fig{margin:26px 0 28px}
  .fig.fig-narrow,.fig.fig-mid,.fig.fig-wide{max-width:none}
  .fig figcaption{font-size:14px}
  /* Labelled diagrams: keep the labels readable rather than shrinking them to nothing.
     The diagram scrolls inside its own box; the page itself never scrolls sideways. */
  .fig-diagram{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
  .fig-diagram > img{min-width:540px}
  .fig-diagram figcaption{position:sticky;left:0;width:calc(100vw - 2*var(--gutter));max-width:100%}
  .fig-diagram .swipe{display:block;margin-top:10px;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark)}
}
.fig .swipe{display:none}
@media (max-width:860px){.fig.fig-diagram .swipe{display:block}}

/* ---------------------------------------------------------------------------
   Header fit, added 21 September 2026 during the Netlify migration.
   Between 1440 and about 1470 viewport pixels the header row needed roughly 8px
   more than the 1280 wrapper gives it, so the Book appointment button sat past
   the right edge and the page carried a horizontal scrollbar. 1440 is the
   standard MacBook width, so this was visible to a large share of desktop
   visitors. Tightening the two gaps in that band only. Nothing below 1200px and
   nothing above 1480px is affected.
   --------------------------------------------------------------------------- */
@media (min-width:1200px) and (max-width:1480px){
  .site-header .wrap{gap:12px}
  .nav{gap:clamp(16px,1.7vw,30px)}
}


/* ---------------------------------------------------------------------------
   Header legibility, 21 September 2026.
   Over a photograph the navigation had nothing behind it. A soft top-down wash
   sits behind the transparent header only, so the links and the wordmark read
   cleanly whatever the photograph is doing underneath.
   --------------------------------------------------------------------------- */
.site-header:not(.solid)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,21,31,.82) 0%,rgba(4,21,31,.58) 38%,rgba(4,21,31,.24) 72%,rgba(4,21,31,0) 100%)}
@media (max-width:1199px){
  /* D15: the sticky header has its own background, so the wash is not needed and would leak below the bar. */
  .site-header:not(.solid)::before{display:none}
}

/* ---------------------------------------------------------------------------
   Citations, 21 September 2026.
   The research references carry DOI links, which are long unbroken strings. Without
   this they push the page sideways at phone width.
   --------------------------------------------------------------------------- */
.refs li,.evidence .src,.fig .credit{overflow-wrap:anywhere;word-break:break-word}
.evidence .src a,.refs li a{overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   Header logo, a size up, 21 September 2026. Header only: the footer keeps its own.
   --------------------------------------------------------------------------- */
.site-header .logo img{height:54px}
.site-header .logo .name{font-size:28px}
.site-header .logo .name small{font-size:10.5px;margin-top:7px}
@media (min-width:1200px) and (max-width:1480px){
  .site-header .logo img{height:50px}
  .site-header .logo .name{font-size:26px}
}
@media (max-width:1199px) and (min-width:861px){
  .site-header .logo img{height:40px}
  .site-header .logo .name{font-size:24px}
}
@media (max-width:860px){
  /* D15: must fit inside the 56px sticky bar with room above the fingertips. */
  .site-header .logo img{height:36px}
}
@media (min-width:1200px) and (max-width:1279px){
  .site-header .logo img{height:46px}
  .site-header .logo .name{font-size:23px}
  .site-header .logo{gap:11px}
}

/* ---------------------------------------------------------------- page transition
   A short fade in on load, so moving between pages is a soften rather than a snap.
   Deliberately starts at 0.6 and not at 0: the page is never invisible, nothing is
   hidden if the stylesheet arrives late, and the LCP element is painted on the very
   first frame, so Core Web Vitals are untouched. Pure CSS, no JavaScript, so it
   cannot leave a blank page if a script fails. Honours reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  body{animation:pagefade .22s ease-out both}
}
@keyframes pagefade{from{opacity:.6}to{opacity:1}}

/* Generated by publish.py. AVIF and WebP need a <picture> wrapper;
   these keep every direct-child image rule matching through it. */
picture{display:contents}
.fig > picture > img{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
.fig-photo > picture > img{object-fit:cover}
@media (max-width:860px){.fig-diagram > picture > img{min-width:540px}}