/* ===========================================================================
   theme.css — base design system (tokens, typography, layout primitives)
   ---------------------------------------------------------------------------
   LOAD ORDER: theme.css is loaded FIRST, cms.css SECOND.

   37 class names are defined in both files. For any property both files set,
   the cms.css declaration wins. Three fixes during the UI audit appeared to do
   nothing for exactly this reason (.cardgrid columns, .topstrip mobile layout,
   .ctaband background).

   Rule of thumb: if a class already appears in cms.css, put the change THERE.
   Check first:  grep -n "\.yourclass" public/assets/theme/cms.css
   =========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root{--muted-strong:#5C6678;--init-bg:#EDF1F2;--init-fg:#053943;
  --navy:#031E42;
  --navy-2:#0A2C55;
  --navy-3:#123A63;
  --mist:#F2F5F7;
  --mist-2:#E1E7EB;
  --paper:#FFFFFF;
  --jade:#064B58;
  --jade-2:#053943;
  --jade-soft:#E1E9EB;
  --ink:#0C1420;
  --slate:#445064;
  --slate-2:#5C6678;
  --line:#E1E4E8;
  --line-2:#BDC4CE;
  --amber:#9A3412;
  --amber-soft:#FDF3EE;

  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --t-xxs:0.6875rem;
  --t-xs:0.8125rem;   /* was .75rem — 12px is too small for the disclaimer and hints */
  --t-sm:0.8125rem;
  --t-base:clamp(0.9688rem,0.94rem + 0.14vw,1.0625rem);
  --t-lead:clamp(1.0625rem,1rem + 0.32vw,1.1875rem);
  --t-h4:clamp(1.0625rem,1rem + 0.32vw,1.1875rem);
  --t-h3:clamp(1.25rem,1.12rem + 0.62vw,1.5rem);
  --t-h2:clamp(1.875rem,1.5rem + 1.75vw,2.875rem);
  --t-h1:clamp(2.375rem,1.7rem + 3.1vw,4.25rem);
  --t-stat:clamp(2.25rem,1.75rem + 2.4vw,3.5rem);

  --s1:.5rem; --s2:1rem;  --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:4rem;  --s7:5.5rem; --s8:7rem;
  --s9:clamp(4rem,2.8rem + 6vw,9rem);

  --shell:min(1240px,100% - 2.5rem);
  --measure:68ch;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(3,30,66,.06);
  --sh-2:0 10px 28px -14px rgba(3,30,66,.22),0 2px 5px rgba(3,30,66,.04);
  --sh-3:0 28px 60px -28px rgba(3,30,66,.34),0 4px 10px rgba(3,30,66,.05);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   2 · RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
table{border-collapse:collapse}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.12}
h1{font-size:var(--t-h1);letter-spacing:-.035em;line-height:1.04}
h2{font-size:var(--t-h2);letter-spacing:-.03em;line-height:1.1}
h3{font-size:var(--t-h3);font-weight:600}
h4{font-size:var(--t-h4);font-weight:600;line-height:1.35}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}

::selection{background:var(--jade);color:#fff}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:var(--s2);top:-6rem;z-index:200;padding:.75rem 1.25rem;
  background:var(--navy);color:#fff;border-radius:var(--r-sm);font-weight:600;
  transition:top .2s var(--ease)}
.skip:focus{top:var(--s2)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   3 · PRIMITIVES
   ========================================================================== */
.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--s9)}
.measure{max-width:var(--measure)}
.tnum{font-variant-numeric:tabular-nums}

/* Micro label — the signature of this concept */
.label{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-size:var(--t-xxs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--jade);
}
.label::before{content:"";width:6px;height:6px;background:currentColor;flex:none}
.label--onDark{color:#8FE0CF}
.label--amber{color:var(--amber)}

.lead{font-size:var(--t-lead);line-height:1.62;color:var(--slate)}
.lead--onDark{color:rgba(255,255,255,.68)}

/* Section head — recurring but never identical in layout */
.head{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.head p{max-width:60ch}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:.85rem 1.4rem;border-radius:var(--r-sm);
  font-family:var(--display);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--jade);color:#fff;box-shadow:var(--sh-2)}
.btn--primary:hover{background:var(--jade-2);box-shadow:var(--sh-3)}
.btn--primary:hover svg{transform:translateX(3px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-2)}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink);background:var(--paper)}
.btn--ghost:hover{border-color:var(--jade);color:var(--jade);background:var(--jade-soft)}
.btn--onDark{background:#fff;color:var(--navy)}
.btn--onDark:hover{background:var(--mist)}
.btn--onDarkGhost{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn--onDarkGhost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
.btn--sm{min-height:42px;padding:.55rem 1.05rem;font-size:.875rem}
.btn--block{width:100%}

.tlink{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--display);font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--jade);
  padding-bottom:2px;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out);
}
.tlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.tlink:hover{background-size:100% 1.5px}
.tlink:hover svg{transform:translate(2px,-2px)}
.tlink--onDark{color:#8FE0CF}

.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--lg{width:24px;height:24px;stroke-width:1.5}

/* Baseline for sprite icons rendered without a class.
   icon() in app/Support/theme.php emits <svg aria-hidden focusable="false">
   with no width/height unless the caller passes a class or size, and most
   callers pass neither. An SVG with no intrinsic size and no CSS size falls
   back to 300x150px, which is what blew the header search icon up.
   Every contextual rule (.btn svg, .utility svg, .nav__link svg, ...) is more
   specific than this, so this only ever catches the ones nothing else styles. */
svg:not([class]){width:1em;height:1em;flex:none;max-width:none;
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   4 · HEADER
   ========================================================================== */
.utility{background:var(--navy);color:rgba(255,255,255,.72);font-size:var(--t-sm)}
.utility__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:40px;flex-wrap:wrap}
.utility span.u-note{display:inline-flex;align-items:center;gap:.45rem}
.utility svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.utility__links{display:flex;align-items:center;gap:var(--s3)}
.utility a{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:color .3s var(--ease)}
.utility a:hover{color:#fff}
.utility .u-emg{color:#F6CDB2;font-weight:500}

.masthead{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .35s var(--ease)}
.masthead[data-stuck="true"]{box-shadow:0 1px 20px -10px rgba(3,30,66,.3)}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:72px}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}

.nav{display:none}
.nav__list{display:flex;align-items:center;gap:.15rem}
.nav__link{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .8rem;border-radius:var(--r-xs);
  font-family:var(--display);font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--slate);
  transition:color .25s var(--ease),background .25s var(--ease)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--navy);background:var(--mist)}
.nav__link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .3s var(--ease)}
.nav__item{position:relative}
.nav__item--menu:hover .nav__link svg,.nav__item--menu:focus-within .nav__link svg{transform:rotate(180deg)}
/* Match the panel's leave delay so the chevron does not un-rotate first. */
.nav__item--menu .nav__link svg{transition-delay:.22s}
.nav__item--menu:hover .nav__link svg,.nav__item--menu:focus-within .nav__link svg{transition-delay:0s}

.mega{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 6px;width:min(660px,88vw);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
  padding:var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),translate .28s var(--ease),visibility .28s;
  transition-delay:.22s}
/* The panel is offset 10px below the trigger, so the pointer crosses a gap on
   its way down and :hover is lost before it arrives. This bridges the gap with
   an invisible strip that belongs to the panel, so hover never breaks. It is
   absolutely positioned to stay out of the grid flow, and inherits the panel's
   visibility, so it is only hoverable while the panel is actually open. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* Two or three links: one column, sized to the longest label rather than to
   the fixed 660px the multi-column panel needs. */
.mega--simple{width:max-content;min-width:190px;max-width:min(320px,88vw);
  grid-template-columns:1fr;gap:.1rem;padding:var(--s2)}
.nav__item--menu:hover .mega,.nav__item--menu:focus-within .mega{opacity:1;visibility:visible;translate:-50% 0;
  transition-delay:0s}
.mega__label{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-2);margin-bottom:.75rem}
.mega__link{display:block;padding:.5rem .65rem;border-radius:var(--r-xs);text-decoration:none;
  font-size:.9375rem;color:var(--slate);transition:background .22s var(--ease),color .22s var(--ease)}
.mega__link:hover{background:var(--mist);color:var(--navy)}
.mega__link b{display:block;font-family:var(--display);font-weight:600;color:var(--ink);font-size:.9375rem}
.mega__link span{font-size:var(--t-xs);color:var(--slate-2)}
.mega__link:hover b{color:var(--jade)}
.mega__foot{grid-column:1/-1;padding-top:var(--s2);border-top:1px solid var(--line)}

.masthead__cta{display:none}

/* Search collapsed from a text field to an icon (see partials/header.php):
   the field crowded the bar once a seventh nav item was added. Sized to sit on
   the same baseline as the burger and the CTA. */
.masthead__searchlink{display:none;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-xs);
  color:var(--slate);text-decoration:none;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.masthead__searchlink:hover{color:var(--navy);background:var(--mist);border-color:var(--line-2)}
.masthead__searchlink svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.burger{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--display);font-size:.875rem;font-weight:600}
.burger svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}

.drawer{position:fixed;inset:0;z-index:150;background:var(--paper);
  transform:translateX(100%);visibility:hidden;transition:transform .42s var(--ease-out);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.drawer[data-open="true"]{transform:translateX(0);visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:72px;
  border-bottom:1px solid var(--line)}
/* .drawer__body and .drawer__link are from the approved single-page design;
   this build renders .drawer__in and .drawer__list > li > a instead. The live
   rules are further down — these two are kept only for that reference. */
.drawer__sub{padding:.8rem 0 1rem;display:grid;gap:.5rem}
.drawer__sub a{font-size:.9375rem;color:var(--slate);text-decoration:none;padding-left:.85rem;
  border-left:2px solid var(--line)}
.drawer__sub a:hover{color:var(--jade);border-color:var(--jade)}
.drawer__actions{display:grid;gap:.65rem;margin-top:var(--s4)}

/* ==========================================================================
   4b · BREADCRUMB
   --------------------------------------------------------------------------
   The trail is rendered inside the page hero, beneath the title and intro, so
   it reads as part of the page header instead of floating in a strip of its
   own between the masthead and the page.

   The separator is a CSS pseudo-element rather than an inline icon, so the
   breadcrumbs() helper's markup is unchanged and the chevron is never
   announced by a screen reader.
   ========================================================================== */
.crumbs{margin-top:var(--s4)}
.crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  list-style:none;margin:0;padding:0;font-size:var(--t-sm)}
.crumbs__item{display:inline-flex;align-items:center;gap:.35rem;min-width:0}

.crumbs__item:not(:last-child)::after{
  content:"";flex:none;width:6px;height:6px;margin-inline-start:.2rem;
  border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);
  transform:rotate(45deg)}

.crumbs__list a{color:var(--slate);text-decoration:none;
  transition:color .25s var(--ease)}
.crumbs__list a:hover{color:var(--jade);text-decoration:underline;text-underline-offset:3px}
.crumbs__list [aria-current="page"]{color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(48ch,70vw)}

/* Invert the trail only on a genuinely dark ground.
   `.phero--article` and `.phero--treatment` are LIGHT headers in this theme —
   inverting them painted white text onto a white background and the breadcrumb
   vanished. Key the inversion off the dark section classes instead. */
.section--dark .crumbs__list a,
.hero .crumbs__list a{color:rgba(255,255,255,.66)}
.section--dark .crumbs__list a:hover,
.hero .crumbs__list a:hover{color:#8FE0CF}
.section--dark .crumbs__list [aria-current="page"],
.hero .crumbs__list [aria-current="page"]{color:#fff}
.section--dark .crumbs__item:not(:last-child)::after,
.hero .crumbs__item:not(:last-child)::after{border-color:rgba(255,255,255,.4)}

/* ==========================================================================
   5 · HERO — SPLIT STAGE
   --------------------------------------------------------------------------
   Navy copy panel locked left, image stage right. Slides advance the WHOLE
   right panel plus a swappable strapline; the h1 never moves. Vertical step
   dots sit on the seam between the two panels.
   ========================================================================== */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero__in{display:grid;position:relative}

.hero__panel{position:relative;z-index:2;padding-block:var(--s7) var(--s6);
  display:flex;flex-direction:column;justify-content:center}
.hero__panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 60% at 12% 4%,rgba(143,224,207,.15),transparent 62%)}
.hero__chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:var(--s4)}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.2);font-size:var(--t-xs);color:rgba(255,255,255,.84);
  font-family:var(--display);font-weight:500}
.chip svg{width:12px;height:12px;stroke:#8FE0CF;fill:none;stroke-width:2.6}
.hero h1{color:#fff;margin-bottom:var(--s3)}
.hero h1 span{color:#8FE0CF}
.hero__lead{max-width:min(54ch,100%);margin-bottom:var(--s3);color:rgba(255,255,255,.72);
  font-size:var(--t-lead);line-height:1.6}

/* the one line that changes per slide */
.hero__strap{display:grid;min-height:4.6rem;margin-bottom:var(--s4)}
.strap{grid-area:1/1;display:flex;gap:.85rem;align-items:flex-start;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),visibility 0s linear .6s}
.strap[data-active="true"]{opacity:1;visibility:visible;transform:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),visibility 0s}
.strap__ico{width:34px;height:34px;border-radius:var(--r-xs);background:rgba(143,224,207,.14);
  color:#8FE0CF;display:grid;place-items:center;flex:none}
.strap__ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.strap b{display:block;font-family:var(--display);font-weight:600;font-size:.9375rem;color:#fff}
.strap span{display:block;font-size:var(--t-sm);color:rgba(255,255,255,.6);line-height:1.5}
.hero__actions{display:flex;flex-wrap:wrap;gap:.65rem}

/* image stage */
.hero__stage{position:relative;min-height:320px}
.hslide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1s var(--ease-out),visibility 0s linear 1s}
.hslide[data-active="true"]{opacity:1;visibility:visible;
  transition:opacity 1s var(--ease-out),visibility 0s}
.hslide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform 11s linear}
.hslide[data-active="true"] img{transform:scale(1)}
.hero__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(3,30,66,.55) 26%,transparent 62%)}

/* vertical step dots on the seam */
.hero__steps{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;
  display:none;flex-direction:column;gap:.6rem}
.hstep{width:3px;height:34px;border-radius:2px;background:rgba(255,255,255,.24);
  position:relative;overflow:hidden;transition:background .3s var(--ease)}
.hstep:hover{background:rgba(255,255,255,.44)}
.hstep::after{content:"";position:absolute;inset:0;background:#8FE0CF;
  transform:scaleY(0);transform-origin:top}
.hstep[aria-current="true"]::after{transform:scaleY(1)}
.hero[data-playing="true"] .hstep[aria-current="true"]::after{animation:h-fill-y 7s linear forwards}
@keyframes h-fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.hero__bar{position:relative;z-index:3;display:flex;align-items:center;gap:var(--s3);
  padding-block:1rem;border-top:1px solid rgba(255,255,255,.16)}
.hero__btn{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.28);
  color:#fff;display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.hero__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hero__btn--play svg{fill:currentColor;stroke:none}
.hero__btn:hover{background:#8FE0CF;color:var(--navy);border-color:#8FE0CF}
.hero__btn--play .h-play{display:none}
.hero[data-playing="false"] .hero__btn--play .h-pause{display:none}
.hero[data-playing="false"] .hero__btn--play .h-play{display:block}
.hero__count{margin-left:auto;font-size:var(--t-sm);letter-spacing:.1em;
  color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.hero__count b{color:#fff}

@media (prefers-reduced-motion:reduce){
  .hslide,.strap,.hslide img{transition:none}
  .hero[data-playing="true"] .hstep[aria-current="true"]::after{animation:none}
}
@media (min-width:900px){
  .hero__in{grid-template-columns:1.02fr .98fr;min-height:clamp(600px,84vh,860px)}
  .hero__stage{min-height:100%}
  .hero__steps{display:flex;left:auto;right:calc(50% - 1.5rem);translate:0 -50%}
  .hero__panel{padding-right:var(--s5)}
}
/* ==========================================================================
   6 · SYMPTOM EXPLORER — tabs
   ========================================================================== */
.explorer{background:var(--mist);border-bottom:1px solid var(--line)}
.explorer__head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}

.tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tab{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);
  font-family:var(--display);font-size:.875rem;font-weight:600;color:var(--slate);white-space:nowrap;
  transition:all .28s var(--ease)}
.tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.tab:hover{border-color:var(--jade);color:var(--jade)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.tab[aria-selected="true"] svg{stroke:#8FE0CF}

.panel{display:none;margin-top:var(--s4);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.panel[data-active="true"]{display:block;animation:fade .45s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel__in{display:grid}
.panel__lead{padding:var(--s4);border-bottom:1px solid var(--line);background:var(--jade-soft)}
.panel__lead h3{margin-bottom:.6rem;color:var(--jade-2)}
.panel__lead p{font-size:.9375rem;color:var(--ink);line-height:1.62;max-width:72ch}
.panel__cols{display:grid}
.panel__col{padding:var(--s4);border-top:1px solid var(--line)}
.panel__col h4{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;color:var(--navy)}
.panel__col h4 svg{width:16px;height:16px;stroke:var(--jade);fill:none;stroke-width:2}
.panel__col ul{display:grid;gap:.55rem}
.panel__col li{position:relative;padding-left:1.15rem;font-size:.9375rem;color:var(--slate);line-height:1.55}
.panel__col li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1.5px;background:var(--jade)}
.panel__foot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--mist);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.panel__urgent{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--t-sm);color:var(--amber);
  max-width:56ch;line-height:1.55}
.panel__urgent svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none;margin-top:.15rem}

/* ==========================================================================
   7 · SURGEON
   ========================================================================== */
.surgeon__grid{display:grid;gap:var(--s6)}
.surgeon__fig{position:relative;align-self:start}
.surgeon__fig img{border-radius:var(--r-md);width:100%}
.surgeon__badge{position:absolute;right:-8px;bottom:-8px;background:var(--navy);color:#fff;
  border-radius:var(--r-sm);padding:.9rem 1.1rem;box-shadow:var(--sh-3);max-width:220px}
.surgeon__badge b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;line-height:1;color:#8FE0CF}
.surgeon__badge span{display:block;font-size:var(--t-xs);color:rgba(255,255,255,.7);margin-top:.3rem}

.surgeon__quote{margin-top:var(--s4);padding-left:var(--s3);border-left:2px solid var(--jade);
  font-family:var(--display);font-weight:500;font-size:1.125rem;letter-spacing:-.015em;
  line-height:1.5;color:var(--navy)}
.surgeon__quote cite{display:block;font-family:var(--body);font-style:normal;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-top:.7rem}

.credgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;margin-top:var(--s5)}
.credgrid > div{background:var(--paper);padding:var(--s3)}
.credgrid dt{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jade);margin-bottom:.5rem;display:flex;align-items:center;gap:.45rem}
.credgrid dt svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.credgrid dd{font-size:.9375rem;line-height:1.55;color:var(--slate)}
.credgrid dd b{color:var(--ink);font-weight:600}

/* ==========================================================================
   8 · PROCEDURES
   ========================================================================== */
.proc{background:var(--navy);color:#fff}
.proc h2{color:#fff}
.proc__grid{display:grid;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);overflow:hidden;margin-top:var(--s5)}
.pcard{background:var(--navy);padding:var(--s4);transition:background .35s var(--ease);position:relative}
.pcard:hover{background:var(--navy-2)}
.pcard__n{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.16em;
  color:rgba(255,255,255,.35);margin-bottom:var(--s3);display:block}
.pcard__ico{width:40px;height:40px;border-radius:var(--r-xs);background:rgba(143,224,207,.14);color:#8FE0CF;
  display:grid;place-items:center;margin-bottom:var(--s3);transition:all .35s var(--ease)}
.pcard:hover .pcard__ico{background:#8FE0CF;color:var(--navy)}
.pcard h3{color:#fff;margin-bottom:.55rem;font-size:1.125rem}
.pcard p{font-size:.875rem;color:rgba(255,255,255,.62);line-height:1.6;margin-bottom:1rem}
.pcard__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.ptag{font-family:var(--display);font-size:var(--t-xxs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.28rem .55rem;border-radius:var(--r-xs);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.72)}

/* Comparison table */
.cmp{margin-top:var(--s6);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  overflow:hidden;background:rgba(255,255,255,.03)}
.cmp__scroll{overflow-x:auto}
.cmp table{width:100%;min-width:580px}
.cmp caption{text-align:left;padding:var(--s4) var(--s4) var(--s2);font-family:var(--display);
  font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em;color:#fff}
.cmp th,.cmp td{padding:.95rem var(--s4);text-align:left;font-size:.9375rem;
  border-top:1px solid rgba(255,255,255,.1)}
.cmp thead th{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(255,255,255,.04)}
.cmp tbody th{font-family:var(--display);font-weight:600;color:#fff}
.cmp tbody td{color:rgba(255,255,255,.65)}
.cmp tbody td:last-child{color:#8FE0CF;font-weight:500}

/* ==========================================================================
   9 · RECOVERY RAIL
   ========================================================================== */
.rec__rail{display:grid;gap:0;margin-top:var(--s5);counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding-block:var(--s3);
  border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step__when{font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.02em;
  color:var(--jade);min-width:5.5rem;padding-top:.15rem}
.step h3{font-size:1.0625rem;margin-bottom:.3rem}
.step p{font-size:.9375rem;color:var(--slate);line-height:1.6}

/* ==========================================================================
   10 · WHY / DIFFERENTIATORS
   ========================================================================== */
.why{background:var(--mist);border-block:1px solid var(--line)}
.why__grid{display:grid;gap:var(--s4);margin-top:var(--s5)}
.wcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.wcard:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-3px)}
.wcard__ico{width:38px;height:38px;border-radius:var(--r-xs);background:var(--jade-soft);color:var(--jade);
  display:grid;place-items:center;margin-bottom:var(--s3)}
.wcard h3{font-size:1.0625rem;margin-bottom:.5rem}
.wcard p{font-size:.9375rem;color:var(--slate);line-height:1.6}

/* ==========================================================================
   11 · JOURNEY — numbered horizontal rail
   ========================================================================== */
.journey__rail{display:grid;gap:0;margin-top:var(--s5)}
.jstep{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding-block:var(--s3);
  border-top:1px solid var(--line);align-items:start}
.jstep:last-child{border-bottom:1px solid var(--line)}
.jstep__n{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.8125rem;
  color:var(--jade);flex:none}
.jstep h3{font-size:1.0625rem;margin-bottom:.3rem}
.jstep p{font-size:.9375rem;color:var(--slate);line-height:1.6;max-width:60ch}

/* ==========================================================================
   12 · OUTCOMES — measured bars, real text
   ========================================================================== */
.outcomes__grid{display:grid;gap:var(--s5);margin-top:var(--s5)}
.ostat{padding-top:var(--s3);border-top:2px solid var(--navy)}
.ostat dt{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-2);margin-bottom:.6rem}
.ostat dd{font-family:var(--display);font-weight:800;font-size:var(--t-stat);letter-spacing:-.04em;
  line-height:.95;color:var(--navy)}
.ostat p{font-size:var(--t-sm);color:var(--slate);margin-top:.7rem;line-height:1.55}
.meter{height:4px;background:var(--mist-2);border-radius:2px;margin-top:1rem;overflow:hidden}
.meter i{display:block;height:100%;background:var(--jade);border-radius:2px;
  transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease-out)}
.is-in .meter i{transform:scaleX(1)}
.meter--92 i{width:92%}
.meter--98 i{width:98%}
.meter--100 i{width:100%}
.meter--97 i{width:97%}
.outcomes__note{margin-top:var(--s5);font-size:var(--t-xs);color:var(--slate-2);max-width:80ch;line-height:1.7}

/* ==========================================================================
   13 · REVIEWS
   ========================================================================== */
.reviews{background:var(--navy);color:#fff}
.reviews h2{color:#fff}
.reviews__head{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.reviews__score{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem 1rem;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);width:fit-content}
.reviews__score b{font-family:var(--display);font-weight:800;font-size:1.375rem;letter-spacing:-.03em}
.reviews__score span{font-size:var(--t-xs);color:rgba(255,255,255,.6);line-height:1.35}
.reviews__grid{display:grid;gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);overflow:hidden}
.rev{background:var(--navy);padding:var(--s4);display:flex;flex-direction:column;
  transition:background .35s var(--ease)}
.rev:hover{background:var(--navy-2)}
.rev .stars{margin-bottom:var(--s3)}
.rev blockquote{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.86);flex:1;margin-bottom:var(--s3)}
.rev figcaption{display:flex;align-items:center;gap:.7rem;padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.12)}
.rev__init{width:36px;height:36px;border-radius:var(--r-xs);background:rgba(143,224,207,.15);color:#8FE0CF;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.8125rem;flex:none}
.rev figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:.875rem}
.rev figcaption span{display:flex;align-items:center;gap:.3rem;font-size:var(--t-xxs);
  color:rgba(255,255,255,.5)}
.rev figcaption span svg{width:11px;height:11px;stroke:#8FE0CF;fill:none;stroke-width:2.6}

/* ==========================================================================
   14 · HOSPITAL & INSURANCE
   ========================================================================== */
.hosp__grid{display:grid;gap:var(--s5)}
.hosp__fig img{border-radius:var(--r-md);width:100%}
.hosp__list{display:grid;gap:0;margin-top:var(--s4)}
.hosp__list div{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding-block:.9rem;
  border-top:1px solid var(--line);align-items:start}
.hosp__list div:last-child{border-bottom:1px solid var(--line)}
.hosp__list svg{width:17px;height:17px;stroke:var(--jade);fill:none;stroke-width:1.9;margin-top:.2rem}
.hosp__list b{display:block;font-family:var(--display);font-weight:600;font-size:.9375rem}
.hosp__list span{font-size:var(--t-sm);color:var(--slate)}

.ins{margin-top:var(--s6);padding:var(--s4);background:var(--mist);border:1px solid var(--line);
  border-radius:var(--r-md)}
.ins h3{font-size:1.0625rem;margin-bottom:.6rem}
.ins p{font-size:.9375rem;color:var(--slate);max-width:72ch}
.ins__marks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s3)}
.ins__marks span{font-family:var(--display);font-size:var(--t-xs);font-weight:600;letter-spacing:.03em;
  padding:.45rem .8rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xs);
  color:var(--slate)}

/* ==========================================================================
   15 · EDUCATION
   ========================================================================== */
.edu{background:var(--mist);border-block:1px solid var(--line)}
.edu__head{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:end;justify-content:space-between;
  margin-bottom:var(--s5)}
.edu__grid{display:grid;gap:var(--s4)}
.post{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.post:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.post__img{aspect-ratio:16/9;overflow:hidden;background:var(--mist-2)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.post:hover .post__img img{transform:scale(1.04)}
.post__body{padding:var(--s3);display:flex;flex-direction:column;flex:1}
/* Card meta:  DIGESTIVE HEALTH
               8 min read · 30 Jun 2026
   The category is uppercase with wide tracking, so in a three-up grid it never
   fits on one line with the rest. Rather than let it wrap — which squeezed it
   mid-word and stranded a "·" at the start of the next line — it gets its own
   line, and only the short facts share a row with a generated separator. */
.post__meta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.2rem;
  font-size:var(--t-xxs);color:var(--slate-2);letter-spacing:.04em;margin-bottom:.6rem}
.post__meta em{flex:0 0 100%;font-style:normal;font-family:var(--display);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
/* Separator only between the inline facts, never after the category. */
.post__meta > span + span::before{content:"·";margin-right:.5rem;color:var(--line-2)}
.post h3{font-size:1.0625rem;line-height:1.4;margin-bottom:.5rem}
.post p{font-size:.875rem;color:var(--slate);line-height:1.55;flex:1;margin-bottom:var(--s3)}
.post__more{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--display);
  font-size:.875rem;font-weight:600;color:var(--jade)}
.post__more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .3s var(--ease)}
.post:hover .post__more svg{transform:translateX(3px)}

.res{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;margin-top:var(--s4)}
.res a{background:var(--paper);padding:var(--s3);display:flex;align-items:center;gap:.8rem;
  text-decoration:none;transition:background .3s var(--ease)}
.res a:hover{background:var(--mist)}
.res__ico{width:34px;height:34px;border-radius:var(--r-xs);background:var(--jade-soft);color:var(--jade);
  display:grid;place-items:center;flex:none}
.res b{display:block;font-family:var(--display);font-weight:600;font-size:.9375rem}
.res span{display:block;font-size:var(--t-xs);color:var(--slate-2)}
.res__arr{margin-left:auto;color:var(--slate-2)}

/* ==========================================================================
   16 · FAQ
   ========================================================================== */
.faq__grid{display:grid;gap:var(--s5)}
.faq__list{border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line)}
.qa__q{display:flex;align-items:flex-start;justify-content:space-between;gap:1.1rem;width:100%;
  text-align:left;padding:1.25rem 0;font-family:var(--display);font-size:1.0625rem;font-weight:600;
  line-height:1.45;letter-spacing:-.015em;transition:color .28s var(--ease)}
.qa__q:hover{color:var(--jade)}
.qa__q svg{width:18px;height:18px;stroke:var(--jade);fill:none;stroke-width:2;stroke-linecap:round;
  flex:none;margin-top:.25rem;transition:transform .38s var(--ease)}
.qa__q[aria-expanded="true"] svg{transform:rotate(45deg)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.qa__a[data-open="true"]{grid-template-rows:1fr}
.qa__aIn{overflow:hidden}
.qa__a p{font-size:.9375rem;line-height:1.68;color:var(--slate);padding-bottom:1.25rem;max-width:70ch}
.qa__a strong{color:var(--ink);font-weight:600}

.faq__side{background:var(--navy);color:#fff;border-radius:var(--r-md);padding:var(--s4);align-self:start}
.faq__side h3{color:#fff;font-size:1.125rem;margin-bottom:.6rem}
.faq__side p{font-size:.9375rem;color:rgba(255,255,255,.68);margin-bottom:var(--s3)}
.faq__side .small{font-size:var(--t-xs);color:rgba(255,255,255,.45);margin-top:var(--s3);margin-bottom:0}

/* ==========================================================================
   17 · EMERGENCY — inline banner, deliberately unlike concept 1
   ========================================================================== */
.emg{background:var(--amber-soft);border-block:1px solid #F3DACB}
.emg__in{display:grid;gap:var(--s4);padding-block:var(--s6);align-items:start}
.emg h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2.125rem);color:#7C2D12}
.emg__list{display:grid;gap:.5rem;margin-top:var(--s3)}
.emg__list li{position:relative;padding-left:1.3rem;font-size:.9375rem;color:#7C2D12;line-height:1.55}
.emg__list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--amber)}
.emg__act{display:grid;gap:.6rem;background:var(--paper);border:1px solid #F3DACB;
  border-radius:var(--r-md);padding:var(--s3)}
.emg__act .btn--amber{background:var(--amber);color:#fff}
.emg__act .btn--amber:hover{background:#7C2D12}
.emg__note{font-size:var(--t-xs);color:#8A5A3C;line-height:1.6}

/* ==========================================================================
   18 · APPOINTMENT
   ========================================================================== */
.book{background:var(--mist)}
.book__grid{display:grid;gap:var(--s5)}
.book__side{display:grid;gap:var(--s4);align-content:start}
.chan{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden}
.chan a{background:var(--paper);padding:1.05rem var(--s3);display:flex;align-items:center;gap:.85rem;
  text-decoration:none;transition:background .3s var(--ease)}
.chan a:hover{background:var(--jade-soft)}
.chan__ico{width:38px;height:38px;border-radius:var(--r-xs);background:var(--mist);color:var(--jade);
  display:grid;place-items:center;flex:none;transition:all .3s var(--ease)}
.chan a:hover .chan__ico{background:var(--jade);color:#fff}
.chan b{display:block;font-family:var(--display);font-weight:600;font-size:.9375rem}
.chan span{display:block;font-size:var(--t-xs);color:var(--slate-2)}
.chan__arr{margin-left:auto;color:var(--slate-2)}

.assure{display:grid;gap:.7rem}
.assure div{display:flex;align-items:flex-start;gap:.6rem;font-size:.875rem;color:var(--slate)}
.assure svg{width:16px;height:16px;stroke:var(--jade);fill:none;stroke-width:2.4;flex:none;margin-top:.18rem}

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4);box-shadow:var(--sh-2)}
.form h2,.form h3{font-size:1.25rem;margin-bottom:.4rem}
.form__sub{font-size:.875rem;color:var(--slate-2);margin-bottom:var(--s4)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-family:var(--display);font-size:var(--t-xxs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:.4rem}
.field .req{color:var(--amber)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);font-size:.9375rem;min-height:48px;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease)}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(6,75,88,.13)}
.field input::placeholder,.field textarea::placeholder{color:#8C97A6}
.field__hint{font-size:var(--t-xs);color:var(--slate-2);margin-top:.3rem}
.field--row{display:grid;gap:var(--s3)}
.consent{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:var(--s3)}
.consent input{width:18px;height:18px;min-height:0;margin-top:.2rem;flex:none;accent-color:var(--jade)}
.consent label{font-family:var(--body);font-size:var(--t-xs);letter-spacing:0;text-transform:none;
  font-weight:400;color:var(--slate);line-height:1.55;margin:0}
.consent a{color:var(--jade)}
.form__foot{font-size:var(--t-xs);color:var(--slate-2);margin-top:var(--s3);text-align:center;line-height:1.6}
.form__foot a{color:var(--jade);font-weight:600}

/* ==========================================================================
   19 · FOOTER
   ========================================================================== */
.foot{background:var(--navy);color:rgba(255,255,255,.66);padding-top:var(--s8)}
.foot a{text-decoration:none;transition:color .28s var(--ease)}
.foot a:hover{color:#fff}
.foot__top{display:grid;gap:var(--s5);padding-bottom:var(--s6);border-bottom:1px solid rgba(255,255,255,.12)}
.foot__blurb{font-size:.875rem;line-height:1.65;margin-top:var(--s3);max-width:40ch}
.foot__social{display:flex;gap:.45rem;margin-top:var(--s3)}
.foot__social a{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-xs);
  border:1px solid rgba(255,255,255,.16);transition:all .28s var(--ease)}
.foot__social a:hover{border-color:#8FE0CF;color:#8FE0CF;background:rgba(143,224,207,.1)}
.foot__social svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

.foot__cols{display:grid;gap:var(--s4)}
.foot__col h3{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8FE0CF;margin-bottom:var(--s3)}
.foot__col li + li{margin-top:.55rem}
.foot__col a{font-size:.875rem}

.foot__nap{display:grid;gap:.9rem;font-size:.875rem;line-height:1.6}
.foot__nap div{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start}
.foot__nap svg{width:15px;height:15px;stroke:#8FE0CF;fill:none;stroke-width:1.9;margin-top:.25rem}
.foot__nap b{color:#fff;font-family:var(--display);font-weight:600;display:block}
.foot__map{margin-top:var(--s3);border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.foot__map iframe{width:100%;height:170px;border:0;filter:grayscale(1) invert(.9) contrast(.85)}

.foot__mid{padding-block:var(--s4);border-bottom:1px solid rgba(255,255,255,.12)}
.foot__mid h3{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8FE0CF;margin-bottom:var(--s3)}
.foot__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.foot__tags a{font-size:var(--t-xs);padding:.32rem .7rem;border-radius:var(--r-xs);
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6)}
.foot__tags a:hover{border-color:#8FE0CF;color:#8FE0CF}

.foot__disc{padding-block:var(--s4);font-size:var(--t-xs);line-height:1.7;color:rgba(255,255,255,.45);
  border-bottom:1px solid rgba(255,255,255,.12);max-width:100ch}
.foot__disc strong{color:rgba(255,255,255,.7)}
.foot__bar{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;
  align-items:center;padding-block:var(--s3) var(--s4);font-size:var(--t-xs);color:rgba(255,255,255,.45)}
.foot__bar nav{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ==========================================================================
   20 · STICKY MOBILE BAR
   ========================================================================== */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:2px solid var(--jade);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 20px -10px rgba(3,30,66,.28)}
.actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  padding:.7rem .4rem;min-height:72px;font-family:var(--display);font-size:var(--t-sm);font-weight:700;
  letter-spacing:.01em;text-decoration:none;color:var(--jade-2);
  transition:color .28s var(--ease),background .28s var(--ease)}
.actionbar a:hover{color:var(--jade);background:var(--jade-soft)}
.actionbar a + a{border-left:1px solid var(--line)}
.actionbar svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.actionbar .is-primary{color:var(--jade)}
body{padding-bottom:72px}

/* ==========================================================================
   21 · MOTION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .meter i{transform:scaleX(1)}
}

/* ==========================================================================
   22 · RESPONSIVE
   ========================================================================== */
@media (min-width:560px){
  .field--row{grid-template-columns:1fr 1fr}
  .panel__cols{grid-template-columns:1fr 1fr}
}

@media (min-width:768px){
  .surgeon__grid{grid-template-columns:.85fr 1.15fr;gap:var(--s6)}
  .credgrid{grid-template-columns:1fr 1fr}
  .proc__grid{grid-template-columns:1fr 1fr}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .outcomes__grid{grid-template-columns:repeat(2,1fr)}
  .reviews__grid{grid-template-columns:repeat(3,1fr)}
  .hosp__grid{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
  .edu__grid{grid-template-columns:repeat(3,1fr)}
  .res{grid-template-columns:repeat(2,1fr)}
  .faq__grid{grid-template-columns:1.7fr 1fr;gap:var(--s6)}
  .emg__in{grid-template-columns:1.4fr 1fr;gap:var(--s6)}
  .book__grid{grid-template-columns:1fr 1.1fr;gap:var(--s6)}
  .foot__top{grid-template-columns:1.1fr 1.5fr}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:7rem 1fr}
  .journey__rail{grid-template-columns:1fr}
}

@media (min-width:1024px){
  .nav{display:block}
  .masthead__cta{display:inline-flex}
  .masthead__searchlink{display:inline-flex}
  .burger{display:none}
  .actionbar{display:none}
  body{padding-bottom:0}
  .proc__grid{grid-template-columns:repeat(4,1fr)}
  .why__grid{grid-template-columns:repeat(4,1fr)}
  .outcomes__grid{grid-template-columns:repeat(4,1fr)}
  .edu__grid{grid-template-columns:repeat(3,1fr)}
  /* Columns follow the item count, capped at four.
     A hard repeat(4) left a permanent empty cell whenever the section had
     three items — and because .res paints its gaps in --line over a bordered
     box, that cell showed as a grey block rather than as nothing. auto-fit is
     not the answer either: at 1440px a 240px minimum fits five tracks, so it
     made the gap worse. Counting the children is exact. */
     :has() has shipped in Safari since 15.4, Chrome 105 and Firefox 121, so
     it is safe here; the fallback below still gives a sensible layout on
     anything older. */
  .res{grid-template-columns:repeat(3,1fr)}          /* fallback: matches today's content */
  .res:has(> :last-child:nth-child(4)){grid-template-columns:repeat(4,1fr)}
  .res:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,1fr)}
  .res:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
  .res:has(> :only-child){grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1.3fr 1fr}
  .journey__rail{grid-template-columns:1fr}
  .jstep{grid-template-columns:auto 1fr}
}

@media (min-width:1440px){
  /* container width is standardised at 1240px in the design system below */
}

/* ==========================================================================
   23 · UTILITIES
   ========================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mt-2{margin-top:var(--s2)}
.mt-4{margin-top:var(--s4)}
.mb-4{margin-bottom:var(--s4)}
.h2-flow{margin:var(--s2) 0 var(--s3)}

/* ==========================================================================
   BRAND MARK — the supplied logo artwork, optimised.
   Positive art on light grounds, reversed art on navy. Never scaled beyond
   its intrinsic size, so it can never appear soft or stretched.
   ========================================================================== */
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none;
  transition:opacity .3s var(--ease)}
.brand:hover{opacity:.82}
.brand__logo{display:block;width:auto;height:clamp(38px,1.6rem + 1.1vw,48px)}
.foot .brand__logo{height:clamp(44px,1.9rem + 1.3vw,56px)}
.drawer__top .brand__logo{height:38px}
@media (max-width:420px){ .brand__logo{height:34px} }

/* Utility bar: the email address cannot fit beside the emergency number on a
   narrow phone, so it is dropped there (it still appears in the footer NAP). */
.utility__links{flex-wrap:wrap;min-width:0}
.utility__links a{min-width:0;overflow-wrap:anywhere}
@media (max-width:719px){
  .utility__in{justify-content:center}
  .utility__note{display:none}
  .utility__links a[href^="mailto:"]{display:none}
}

/* Review stars — amber is the universal convention for a rating, so it is the
   one colour deliberately kept outside the brand ramp. */
.stars{display:inline-flex;gap:1px;color:#C8891B;line-height:0}
.stars svg{width:12px;height:12px;fill:currentColor;stroke:none;flex:none}


/* ==========================================================================
   ACCESSIBILITY CORRECTIONS
   Each rule closes a contrast shortfall measured on the rendered page. The
   selectors below are scoped to the panels that are actually dark in THIS
   file; .form is excluded because it is a white card nested inside one.
   ========================================================================== */
.faq__side h2,.faq__side h3,.faq__side h4,
.reviews h2,.reviews h3,.reviews h4,
.proc h2,.proc h3,.proc h4,
.foot h2,.foot h3,.foot h4{color:#fff}
.form h2,.form h3,.form h4{color:var(--navy, #031E42)}
/* Card titles moved from h3 to h2 for heading order; the size is unchanged. */
.post .post__body h2,.post-card h2{font-size:1.0625rem;line-height:1.4;margin-bottom:.5rem}

/* low-alpha white on navy: 4.29 -> 6.26 */
.foot__disc,.foot__bar,.foot__bar p,.foot__bar a{color:rgba(255,255,255,.62)}
.faq__side .small{color:rgba(255,255,255,.62)}

/* initial badges: 3.61 -> 11.5 */
.rev__init,.voice__init,.qt__init{background:var(--init-bg);color:var(--init-fg)}

.cmp thead th{color:rgba(255,255,255,.72)}              /* 2.86 -> 8.1  */
.pcard__n{color:rgba(255,255,255,.60)}                  /* 3.12 -> 6.6  */
.outcomes__note{color:var(--muted-strong)}              /* light ground */
.compare thead th{color:var(--muted-strong)}

/* ==========================================================================
   UI REPAIRS
   ========================================================================== */
.voices__rating .stars,.reviews__score .stars,.score .stars,.rev .stars,.qt .stars{color:#C8891B}
.voices__rating .stars svg,.reviews__score .stars svg,.score .stars svg,
.rev .stars svg,.qt .stars svg{width:13px;height:13px;fill:currentColor;stroke:none}
.cnd__panel,.qa__a{overflow:hidden}
.cnd__panel[data-open="true"] .cnd__panelIn,
.qa__a[data-open="true"] .qa__aIn{animation:disc-in .5s var(--ease-out) both}
@keyframes disc-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cnd__panel[data-open="true"] .cnd__panelIn,
  .qa__a[data-open="true"] .qa__aIn{animation:none}
}

/* ==========================================================================
   Z · DESIGN SYSTEM CORRECTIONS
   --------------------------------------------------------------------------
   Added after a full UI/UX audit. Three classes of problem are addressed:

   1 · SPACING  Every .section carried padding-block:var(--s9) — 131px top AND
       bottom at 1440px, so two stacked sections put 262px of dead space
       between them. The scale is now tighter and, crucially, collapses where
       two same-toned sections meet, which is what produced the "random white
       space" through the site.

   2 · UNSTYLED COMPONENTS  The templates emit .treatment, .article,
       .article__body, .prose, .toc, .drawer__in, .drawer__list, .foot__brand,
       .cardgrid, .tcard and .section--* — none of which had a single rule in
       either stylesheet. They fell back to browser defaults, which is why body
       copy was 12px, cards had no gaps, and the mobile drawer had no padding.

   3 · MOBILE  Touch targets under 32px, edge-flush content and the header
       overflowing at 360px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Z1 · SPACING SCALE
   -------------------------------------------------------------------------- */
:root{
  /* Section rhythm: generous but not cavernous. 56px phone -> 96px desktop. */
  --sec:clamp(3.5rem,2.6rem + 3.6vw,6rem);
  --sec-tight:clamp(2.5rem,2rem + 2.2vw,3.75rem);
  --gutter:clamp(1.25rem,1rem + 1.4vw,2.5rem);
  --flow:1.5rem;              /* heading -> paragraph -> button */
  --card-gap:clamp(1rem,.8rem + .9vw,1.5rem);
}

.section{padding-block:var(--sec)}
.section--tight{padding-block:var(--sec-tight)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}

/* Two *untinted* sections in a row do not both need full padding — the doubled
   gap is the biggest source of excess white space on the site.

   This may only collapse where the background is genuinely continuous. The
   original rule collapsed every .section + .section and restored the padding
   only for .section--band, which no template emits: the builder writes
   .section--bg-mist/-navy/-jade and the hand-built homepage sections carry
   their own names (.proc, .why, .reviews …). So the exception never matched,
   every tinted band lost its top padding, and headings sat flush against the
   band edge.

   Both naming schemes are listed below. A section keeps its padding whenever
   it is tinted, or follows something tinted. */
.section:not([class*="section--bg-"]):not(.explorer):not(.proc):not(.why):not(.reviews):not(.edu):not(.book):not(.ctaband):not(.emg)
+ .section:not([class*="section--bg-"]):not(.explorer):not(.proc):not(.why):not(.reviews):not(.edu):not(.book):not(.ctaband):not(.emg){
  padding-top:0;
}

/* Tonal bands. */
.section--band{background:var(--mist);border-block:1px solid var(--line)}
.section--dark{background:var(--navy);color:rgba(255,255,255,.72)}
.section--dark h2,.section--dark h3{color:#fff}

/* One container width everywhere. */
.shell{width:min(1240px,100% - (var(--gutter) * 2));margin-inline:auto}
.section--narrow > .shell,.shell--narrow{max-width:820px}

/* Consistent vertical flow inside a block of copy. */
.head{display:grid;gap:var(--flow);margin-bottom:var(--sec-tight)}
.head > * + *{margin-top:0}

/* --------------------------------------------------------------------------
   Z2 · PROSE — migrated body copy
   -------------------------------------------------------------------------- */
.prose{max-width:72ch}
.prose > * + *{margin-top:var(--flow)}
.prose h2{font-size:var(--t-h3);margin-top:calc(var(--flow) * 1.85);scroll-margin-top:6.5rem}
.prose h3{font-size:var(--t-h4);margin-top:calc(var(--flow) * 1.3);color:var(--navy)}
.prose h4{font-size:1rem;margin-top:var(--flow);color:var(--navy)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--slate);line-height:1.72;font-size:var(--t-base)}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--jade);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{color:var(--jade-2)}
.prose ul,.prose ol{display:grid;gap:.6rem;padding-left:0;list-style:none;min-width:0}
/* A list nested inside an <li> must be able to shrink, or the grid track sizes
   to its content and the copy is clipped off the side of a phone. */
.prose li{min-width:0}
.prose li > ul,.prose li > ol{margin-top:.5rem;gap:.4rem}
.prose li > ul > li{padding-left:1.1rem}
.prose ol{counter-reset:pstep}
.prose ul > li{position:relative;padding-left:1.4rem}
.prose ul > li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;
  background:var(--jade)}
.prose ol > li{position:relative;padding-left:2.2rem;counter-increment:pstep}
.prose ol > li::before{content:counter(pstep);position:absolute;left:0;top:.05em;
  width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:.75rem;color:var(--jade)}
.prose img{max-width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);
  margin-block:var(--flow)}
.prose blockquote{margin:var(--flow) 0;padding-left:var(--s3);border-left:2px solid var(--jade);
  font-family:var(--display);font-weight:500;font-size:1.0625rem;color:var(--navy)}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.prose th,.prose td{padding:.85rem var(--s3);text-align:left;border-top:1px solid var(--line)}
.prose thead th{background:var(--mist);font-family:var(--display);font-size:var(--t-xxs);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-strong);
  border-top:0}
/* Wide tables scroll inside their own box rather than the page. */
.prose > table{display:block;overflow-x:auto}

/* --------------------------------------------------------------------------
   Z3 · ARTICLE / TREATMENT WRAPPERS
   -------------------------------------------------------------------------- */
.article,.treatment,.page{display:block}
.article__body,.treatment__body{padding-block:var(--sec)}
.article__body > .shell,.treatment__body > .shell{display:grid;gap:var(--sec-tight)}
@media (min-width:1024px){
  .article__body > .shell,.treatment__body > .shell{
    grid-template-columns:minmax(0,1fr) 320px;gap:var(--sec-tight) var(--s6);align-items:start}
}

/* --------------------------------------------------------------------------
   Z4 · TABLE OF CONTENTS
   -------------------------------------------------------------------------- */
.toc{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);background:var(--paper)}
/* Sticky only when the contents list stands on its own. Inside .art__rail or
   .svc__rail the rail is already the sticky element, and a nested sticky child
   detaches from the flow and slides over the card beneath it as you scroll —
   which is what made the list look like it was sliding underneath. */
@media (min-width:1024px){
  .toc:not(.art__rail .toc):not(.svc__rail .toc){position:sticky;top:6.5rem}
}
.toc__title{font-family:var(--display);font-size:var(--t-xxs);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--jade);margin-bottom:var(--s2)}
.toc ol,.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.toc a{display:block;padding:.45rem .6rem;border-radius:var(--r-xs);font-size:.875rem;
  line-height:1.45;color:var(--slate);text-decoration:none;
  transition:background .22s var(--ease),color .22s var(--ease)}
.toc a:hover,.toc a[aria-current="true"]{background:var(--mist);color:var(--navy)}
.toc__l2 a{padding-left:.6rem}
.toc__l3 a{padding-left:1.5rem;font-size:.8125rem}

/* --------------------------------------------------------------------------
   Z5 · CARD GRIDS
   -------------------------------------------------------------------------- */
/* .cardgrid itself is owned by cms.css, which loads after this file. Only the
   overflow guard belongs here. */
.cardgrid > *{min-width:0}

.tcard{display:flex;flex-direction:column;height:100%;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.tcard__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist);
  border-bottom:1px solid var(--line)}
.tcard__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-out)}
.tcard:hover .tcard__img img{transform:scale(1.04)}
.tcard__ico{width:44px;height:44px;border-radius:var(--r-xs);background:var(--jade-soft);
  color:var(--jade);display:grid;place-items:center;margin:var(--s3) var(--s3) 0}
.tcard__body{display:flex;flex-direction:column;flex:1;padding:var(--s3)}
.tcard__body h2,.tcard__body h3,.tcard h2,.tcard h3{font-size:1.0625rem;line-height:1.35;margin-bottom:.45rem}
.tcard__body p{font-size:.875rem;color:var(--slate);line-height:1.6;flex:1;margin-bottom:var(--s3)}
.tcard__more{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--display);
  font-size:.875rem;font-weight:600;color:var(--jade);margin-top:auto}
.tcard__more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .3s var(--ease)}
.tcard:hover .tcard__more svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   Z6 · MOBILE DRAWER + FOOTER BRAND
   -------------------------------------------------------------------------- */
/* The approved design styled `.drawer__link`, but this build's header renders
   `.drawer__list > li > a` — so the menu had no styling at all: underlined
   default links, no padding, chevrons dropping onto their own line, and no
   horizontal gutter. These rules target the markup that is actually emitted. */
.drawer__in{display:flex;flex-direction:column;flex:1;
  padding:var(--s3) var(--gutter) var(--s6)}
.drawer__top{padding-block:var(--s2);margin-bottom:var(--s3)}
.drawer__top .brand b{font-size:1.0625rem}
/* The brand in the drawer is a link home — give it a real tap target rather
   than the 20px the text alone produced. */
.drawer__top .brand{display:inline-flex;align-items:center;min-height:44px}

.drawer__list{display:grid;gap:0;list-style:none;margin:0;padding:0}
.drawer__list > li + li{border-top:1px solid var(--line)}
.drawer__list > li > a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  min-height:56px;padding:.9rem 0;
  font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
  transition:color .22s var(--ease)}
.drawer__list > li > a:hover,.drawer__list > li > a:focus-visible{color:var(--jade)}
.drawer__list > li > a svg{width:16px;height:16px;flex:none;max-width:none;
  stroke:var(--line-2);fill:none;stroke-width:2.2;
  transition:transform .22s var(--ease),stroke .22s var(--ease)}
.drawer__list > li > a:hover svg{stroke:var(--jade);transform:translateX(3px)}

/* The action buttons use .drawer__foot, which is defined in cms.css; only the
   spacing above the block belongs here. */
.drawer__foot{margin-top:auto;padding-top:var(--s4)}
.foot__brand{display:grid;gap:var(--s3);align-content:start}

/* --------------------------------------------------------------------------
   Z7 · MOBILE CORRECTIONS
   -------------------------------------------------------------------------- */
/* Touch targets: 44px is the accessible minimum for anything tappable. */
@media (max-width:899px){
  /* WCAG 2.5.8 sets 24px as the floor; 44px is the comfortable target for
     anything a thumb has to find in a dense list. */
  .tlink,.crumbs__list a,.toc a,.pager__n,.jumpbar a,
  .foot a,.utility a,.foot__nap a,.foot__legal a,.foot__bar a{
    min-height:44px;display:inline-flex;align-items:center}
  .foot__col li,.foot__nap p{display:flex;flex-wrap:wrap}
  /* Inline links inside a sentence must not become blocks — WCAG 2.5.8
     exempts targets whose size is constrained by surrounding line-height. */
  .prose p > a,.foot__disc a,.amet a{min-height:0;display:inline}
  /* A list item that is nothing but a link is navigation, not prose, so it
     does need a proper target. */
  .prose li > a:only-child,
  .linklist a,.sitemap__list a,
  .topstrip a,.label a,.post__meta a{
    min-height:44px;display:inline-flex;align-items:center}

  /* A paragraph that contains only a link is a call to action, not a sentence,
     so it gets a real target too. */
  .prose p > a:only-child{min-height:44px;display:inline-flex;align-items:center}
}

/* The masthead runs out of room once the search field is in the row. */
@media (max-width:1023px){
  .hdr__search,.masthead__search{display:none}
}
@media (max-width:420px){
  .burger{padding-inline:.55rem;font-size:0;gap:0}
  .burger svg{width:22px;height:22px}
}

/* --------------------------------------------------------------------------
   VIDEO LIBRARY
   The cards come from an html_block section, so the markup is limited to what
   the sanitiser permits: figure / iframe / figcaption. Every video on the
   channel is a YouTube Short, so the frame is 9:16 rather than 16:9.
   -------------------------------------------------------------------------- */
.videogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.videocard{margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1)}
.videocard iframe{display:block;width:100%;height:auto;aspect-ratio:9/16;border:0;background:var(--ink)}
.videocard__cap{padding:.8rem .9rem .95rem;font-family:var(--display);font-weight:600;
  font-size:.9375rem;line-height:1.35;color:var(--ink)}
.videogrid__more{margin-top:var(--s3)}
@media (max-width:420px){
  .videogrid{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
}

/* Nothing may sit flush against the viewport edge. */
main > *:not(.hero):not(.phero):not(.crumbs){overflow-x:clip}

/* Media inside any migrated block stays inside its column. */
.prose iframe,.prose video,.article__body iframe{max-width:100%}

/* --------------------------------------------------------------------------
   Z8 · SHARED OVERFLOW GUARD
   Grid and flex items default to min-width:auto, so a track can never shrink
   below its content — the usual cause of horizontal scroll on a phone.
   -------------------------------------------------------------------------- */
.shell > *,.cardgrid > *,.head > *,.prose > *,
.article__body > .shell > *,.treatment__body > .shell > *{min-width:0}
/* …but an icon is a fixed-size graphic, not a layout track.
   The base reset applies `max-width:100%` to every svg. On a sprite icon —
   an <svg> with no viewBox whose only child is a <use> — that percentage has
   no definite basis to resolve against inside a grid/flex parent, so the icon
   collapsed to zero width and the card badges rendered as empty squares.
   Opting icons out of the percentage cap restores their declared size. */
.ico,.tcard__ico svg,.wcard__ico svg,.crow__ico svg,.awards__ico svg,
.chan__ico svg,.res__ico svg,.side__links svg,.toc svg{max-width:none;flex:none}
.prose p,.prose li,.prose h1,.prose h2,.prose h3,.prose td,.prose th,
.toc a,.crumbs__list a{overflow-wrap:anywhere}

/* --------------------------------------------------------------------------
   Z9 · REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tcard,.tcard__img img,.toc a{transition:none}
}

/* The micro-label is designed for two or three tracked words. A doctor's
   designation is a full sentence, so at 11px uppercase it stops being readable.
   These slots drop the tracking and sit at normal small-text size instead. */
.label{max-width:100%;line-height:1.5}
.label--long,
.doctor__role,
.dcard__role,
.doctors__role{font-size:var(--t-sm);letter-spacing:.04em;text-transform:none;
  line-height:1.55;color:var(--jade)}

/* Where a long designation is rendered with the generic .label class, keep it
   legible rather than shrinking it to the micro size. */
.dcard .label,
.doctor .label,
.doctors .label{font-size:var(--t-sm);letter-spacing:.04em;text-transform:none}

/* --------------------------------------------------------------------------
   Z10 · HERO ALIGNMENT
   The hero copy panel is a .shell inside a grid column, so it centred itself
   within that column and started 64px left of every section below it. Aligning
   it to the page gutter puts the headline on the same vertical line as the
   rest of the page.
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  .hero__in > .shell.hero__panel{
    width:auto;margin-inline:0;
    padding-left:max(var(--gutter), (100vw - 1240px) / 2);
    padding-right:var(--s5);
  }
}

/* --------------------------------------------------------------------------
   Z11 · HEADER FIT
   The masthead CTA wrapped to two lines once the search field joined the row,
   which made the button taller than the rest of the header. Keep the label on
   one line and let the search field give up width first.
   -------------------------------------------------------------------------- */
.masthead .btn,.masthead__cta,.hdr__cta .btn{white-space:nowrap}
.hdr__search,.masthead__search{min-width:0;flex:0 1 auto}
@media (min-width:1024px) and (max-width:1279px){
  .hdr__search input,.masthead__search input{width:clamp(120px,14vw,180px)}
  .nav__list{gap:.05rem}
  .nav__link{padding-inline:.6rem}
}

/* --------------------------------------------------------------------------
   Z12 · MOBILE VERTICAL RHYTHM
   Two measured problems on a 375px screen:
     • the utility strip wrapped to three lines and consumed 119px before the
       header even began;
     • the article header left a 143px gap before the featured image, because
       its own bottom padding, the figure's margin and the section rhythm all
       stacked.
   -------------------------------------------------------------------------- */
@media (max-width:719px){
  /* .topstrip is owned by cms.css, which loads after this file — its mobile
     rule lives there so it is not immediately overridden. */
  .utility span.u-note{display:none}
  .utility__in{justify-content:center;min-height:0;padding-block:.4rem;gap:.5rem}
}

@media (max-width:899px){
  /* Collapse the stacked gap between an article header and its lead image. */
  .phero--article,.phero--treatment{padding-bottom:var(--s3)}
  .article__fig,.post__fig,.article > figure{margin-top:var(--s3)}
  .article__meta{margin-bottom:var(--s2)}
  .article__body,.treatment__body{padding-block:var(--sec-tight)}
  /* A hero that only carries a title does not need desktop-scale padding. */
  .phero{padding-block:var(--sec-tight)}
}

/* --------------------------------------------------------------------------
   Z13 · DARK BAND TEXT COLOURS
   .proc, .reviews and .ctaband are navy bands from the approved design, but
   .label and .lead carry the light-ground colours (jade #064B58 and slate),
   which measured 1.7:1 and 2.0:1 against navy — far below the 4.5:1 AA floor
   and effectively invisible. Invert every text token that lands on a dark band.
   -------------------------------------------------------------------------- */
.proc .label,.reviews .label,.ctaband .label,
.section--dark .label,.section--bg-navy .label{color:#8FE0CF}
.proc .lead,.reviews .lead,.ctaband .lead,
.section--dark .lead,.section--bg-navy .lead{color:rgba(255,255,255,.72)}
.proc p:not([class]),.reviews p:not([class]),.ctaband p:not([class]),
.section--dark p:not([class]){color:rgba(255,255,255,.78)}
.proc h2,.proc h3,.proc h4,
.reviews h2,.reviews h3,.ctaband h2,.ctaband h3{color:#fff}
.proc a:not(.btn),.reviews a:not(.btn),.ctaband a:not(.btn),
.section--dark a:not(.btn){color:#8FE0CF}

/* --------------------------------------------------------------------------
   Z14 · HEADER AT 320px
   The brand lock-up is 262px wide, which on a 320px screen pushed the burger
   to x=326 and put the whole page into horizontal scroll. Let the brand shrink
   and the burger hold its size, so the row always fits.
   -------------------------------------------------------------------------- */
@media (max-width:400px){
  .masthead .shell,.hdr__in,.masthead__in{gap:.5rem}
  .brand{min-width:0;flex:1 1 auto}
  .brand__text{display:block;min-width:0}
  .brand b,.brand__name{font-size:1rem;line-height:1.15;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .burger{flex:0 0 auto;margin-left:auto}
}
/* The strapline only has to go on the very narrowest screens — at 375px there
   is still room for it, and it carries the specialty. */
@media (max-width:360px){
  .brand small,.brand__tagline,.brand__text > span,.brand__text small{display:none}
}
@media (max-width:340px){
  .brand b,.brand__name{font-size:.9375rem}
}

/* ==========================================================================
   Z15 · SERVICE PAGE (treatments/show)
   --------------------------------------------------------------------------
   A conversion landing page rather than an article: two columns on desktop
   (sticky rail + body), collapsing to one below 1080px.

   NOTE: theme.css loads FIRST and cms.css SECOND. Every class below was
   checked against cms.css before writing, so nothing here is overridden.
   Do not re-declare .toc a, .btn--block, .prose or .label in this file —
   cms.css owns those and would win.

   Anchor offset is handled globally by html{scroll-padding-top:5.5rem}.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.svc__hero{
  background:linear-gradient(168deg,var(--mist) 0%,var(--paper) 62%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,1.4rem + 2.4vw,3.5rem) clamp(2.5rem,1.8rem + 2.8vw,4rem);
}
.svc__heroIn{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(280px,32vw,420px));
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  align-items:center;
}
.svc__heroCopy{min-width:0}
.svc__heroCopy h1{
  font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em;
  margin:.5rem 0 0;text-wrap:balance;
}
.svc__lede{
  font-size:var(--t-lead);line-height:1.6;color:var(--slate);
  max-width:60ch;margin:var(--flow) 0 0;
}
.svc__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:var(--s3) 0 0}
.svc__heroFig{margin:0;min-width:0}
.svc__heroFig img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-md);box-shadow:var(--sh-3);
}

/* Trust row: four proof points, two columns on phones. */
.trustrow{
  list-style:none;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s2) var(--s3);
}
.trustrow li{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.trustrow b{
  font-family:var(--display);font-size:1.125rem;font-weight:700;
  color:var(--jade);line-height:1.2;
}
.trustrow span{font-size:var(--t-xs);color:var(--slate-2);line-height:1.35}

/* --- key facts (AEO definition block) ------------------------------------ */
.svc__facts{
  background:var(--navy);color:#fff;
  padding-block:clamp(1.25rem,1rem + .8vw,1.75rem);
}
.factgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s2) var(--s3);margin:0;
}
.factgrid > div{min-width:0}
.factgrid dt{
  font-size:var(--t-xxs);text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.62);margin:0 0 .1875rem;
}
.factgrid dd{
  margin:0;font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:#fff;line-height:1.35;
}

/* --- two-column layout --------------------------------------------------- */
.svc__layout{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(2rem,1rem + 3vw,4rem);
  padding-block:var(--sec);align-items:start;
}
.svc__main{min-width:0}
.svc__rail{
  position:sticky;top:5.5rem;
  display:flex;flex-direction:column;gap:var(--s3);min-width:0;
}
.toc__title{
  font-family:var(--display);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate-2);
  margin:0 0 .625rem;
}
.svc__rail .toc{border-left:2px solid var(--line);padding-left:var(--s2)}
.svc__rail .toc a{display:block;padding:.3125rem 0;line-height:1.35}

/* Rail CTA */
.railcta{
  background:var(--jade);color:#fff;border-radius:var(--r-md);
  padding:var(--s3);display:flex;flex-direction:column;gap:.625rem;
}
.railcta__eyebrow{
  font-size:var(--t-xxs);text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.68);margin:0;
}
.railcta__title{
  font-family:var(--display);font-size:1.0625rem;font-weight:700;
  line-height:1.3;margin:0;color:#fff;
}
.railcta__body{font-size:var(--t-sm);line-height:1.55;color:rgba(255,255,255,.85);margin:0}
.railcta__note{font-size:var(--t-xxs);color:rgba(255,255,255,.62);margin:.125rem 0 0}
.railcta .btn--ghost{border-color:rgba(255,255,255,.42);color:#fff;background:transparent}
.railcta .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* --- body sections -------------------------------------------------------- */
.svc__sec{margin:0 0 var(--sec-tight)}
.svc__sec:last-of-type{margin-bottom:0}
.svc__sec > h2{
  font-size:var(--t-h2);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 var(--flow);text-wrap:balance;
}
.svc__intro{
  font-size:var(--t-lead);color:var(--slate);line-height:1.6;
  max-width:var(--measure);margin:calc(var(--flow) * -.5) 0 var(--flow);
}

/* Discrete, quotable points. */
.pointlist{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.pointlist > li{
  display:grid;grid-template-columns:1.375rem minmax(0,1fr);
  gap:.6875rem;align-items:start;
  font-size:var(--t-base);line-height:1.6;color:var(--slate);
}
.pointlist > li svg{
  width:1.375rem;height:1.375rem;flex:none;max-width:none;
  color:var(--jade);margin-top:.0625rem;
}
.pointlist--warn > li svg{color:var(--amber)}

/* Numbered procedure steps. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps__item{
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);
  gap:var(--s2);padding:0 0 var(--s3);position:relative;
}
.steps__item:not(:last-child)::before{
  content:"";position:absolute;left:1.125rem;top:2.5rem;bottom:.25rem;
  width:2px;background:var(--line);
}
.steps__n{
  width:2.25rem;height:2.25rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--jade);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.9375rem;
  position:relative;z-index:1;
}
.steps__item p{margin:.3125rem 0 0;line-height:1.6;color:var(--slate);min-width:0}

/* Comparison table: scrolls inside itself, never the page. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}
.cmptable{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--t-base)}
.cmptable th,.cmptable td{
  padding:.8125rem 1rem;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;
}
.cmptable thead th{
  background:var(--mist);font-family:var(--display);font-weight:700;
  font-size:var(--t-sm);color:var(--ink);white-space:nowrap;
}
.cmptable tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.cmptable td{color:var(--slate)}
.cmptable tbody tr:last-child th,.cmptable tbody tr:last-child td{border-bottom:0}
.cmptable thead th:last-child,.cmptable tbody td:last-child{background:var(--jade-soft)}

/* Red-flag aside. */
.redflag{
  background:var(--amber-soft);border:1px solid rgba(154,52,18,.22);
  border-left:4px solid var(--amber);border-radius:var(--r-md);
  padding:var(--s3);margin:0 0 var(--sec-tight);
}
.redflag > h2{font-size:var(--t-h3);color:var(--amber);margin:0 0 .75rem;line-height:1.25}
.redflag ul{margin:0;padding-left:1.125rem;display:grid;gap:.4375rem}
.redflag li{font-size:var(--t-base);line-height:1.55;color:var(--ink)}
.redflag .btn{margin-top:var(--s2)}

/* Why-choose grid. */
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--card-gap)}
.whycard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);display:flex;flex-direction:column;gap:.625rem;min-width:0;
}
.whycard__ico{
  width:2.5rem;height:2.5rem;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--jade-soft);color:var(--jade);flex:none;
}
.whycard__ico svg{width:1.25rem;height:1.25rem;max-width:none;flex:none}
.whycard h3{font-size:var(--t-h4);margin:0;line-height:1.3}
.whycard p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--slate)}

/* Surgeon / E-E-A-T card. */
.surgeon__card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  align-items:start;background:var(--mist);border-radius:var(--r-md);padding:var(--s3);
}
.surgeon__photo{margin:0;width:120px;flex:none}
.surgeon__photo img{width:120px;height:120px;object-fit:cover;border-radius:var(--r-md);display:block}
.surgeon__body{min-width:0}
.surgeon__name{font-size:var(--t-h3);margin:.1875rem 0 .25rem;line-height:1.25}
.surgeon__name a{color:var(--ink);text-decoration:none}
.surgeon__name a:hover{color:var(--jade)}
.surgeon__role{font-size:var(--t-base);color:var(--jade);font-weight:600;margin:0}
.surgeon__qual{font-size:var(--t-sm);color:var(--slate-2);margin:.1875rem 0 0}
.surgeon__bio{font-size:var(--t-sm);line-height:1.6;color:var(--slate);margin:.625rem 0 0}
.surgeon__meta{
  list-style:none;margin:.875rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;
}
.surgeon__meta li{display:flex;align-items:center;gap:.4375rem;font-size:var(--t-xs);color:var(--slate-2)}
.surgeon__meta svg{width:1rem;height:1rem;flex:none;max-width:none;color:var(--jade)}
.surgeon__act{margin:.875rem 0 0}

/* Testimonials. */
.quotegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--card-gap)}
.quote{
  margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s3);
  display:flex;flex-direction:column;gap:.75rem;min-width:0;
}
.quote__stars{display:flex;gap:.125rem;color:#B4690E}
.quote__stars svg{width:1rem;height:1rem;flex:none;max-width:none}
.quote blockquote{margin:0;font-size:var(--t-base);line-height:1.65;color:var(--ink)}
.quote figcaption{
  display:flex;flex-direction:column;gap:.1875rem;
  margin-top:auto;padding-top:.625rem;border-top:1px solid var(--line);
}
.quote figcaption b{font-size:var(--t-sm);color:var(--ink)}
.quote figcaption span{display:flex;align-items:center;gap:.3125rem;font-size:var(--t-xxs);color:var(--slate-2)}
.quote figcaption svg{width:.875rem;height:.875rem;flex:none;max-width:none;color:var(--jade)}

/* FAQ: <details> so it works with JS disabled, mirroring FAQPage schema. */
.faqlist{display:grid;gap:.625rem}
.faq{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);overflow:hidden}
.faq[open]{border-color:var(--line-2)}
.faq > summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:1rem var(--s2);cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:var(--t-base);
  line-height:1.45;color:var(--ink);min-height:56px;
}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary:hover{background:var(--mist)}
.faq > summary:focus-visible{outline:2px solid var(--jade);outline-offset:-2px}
.faq > summary svg{
  width:1.25rem;height:1.25rem;flex:none;max-width:none;color:var(--jade);
  transition:transform .22s var(--ease);
}
.faq[open] > summary svg{transform:rotate(45deg)}
.faq__a{padding:0 var(--s2) 1rem}
.faq__a p{margin:0;font-size:var(--t-base);line-height:1.65;color:var(--slate);max-width:var(--measure)}

/* Related conditions. */
.relgrid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--card-gap);
}
.relgrid a{
  display:flex;flex-direction:column;gap:.3125rem;height:100%;
  padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;background:var(--paper);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.relgrid a:hover{border-color:var(--jade);transform:translateY(-2px)}
.relgrid b{font-family:var(--display);font-size:var(--t-base);color:var(--ink);line-height:1.35}
.relgrid span{font-size:var(--t-xs);color:var(--slate-2);line-height:1.5}
.svc__more{margin:var(--s3) 0 0}

/* Reviewed-by line. */
.reviewedby{
  display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.75rem;
  align-items:start;margin:var(--sec-tight) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--t-xs);line-height:1.65;color:var(--slate-2);
}
.reviewedby svg{width:1.25rem;height:1.25rem;flex:none;max-width:none;color:var(--jade)}
.reviewedby b{color:var(--ink)}

/* Closing CTA band. */
.svc__close{background:var(--navy);color:#fff;padding-block:var(--sec)}
.svc__closeIn{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:center;
}
.svc__close h2{font-size:var(--t-h2);color:#fff;margin:.375rem 0 var(--flow);line-height:1.15}
.svc__close p{color:rgba(255,255,255,.78);line-height:1.65;margin:0;max-width:52ch}
.svc__closeAct{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.svc__closeNote{font-size:var(--t-xs);color:rgba(255,255,255,.6);margin:.25rem 0 0}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .svc__layout{grid-template-columns:minmax(0,1fr)}
  .svc__rail{position:static;order:-1;margin-bottom:var(--s2)}
  .svc__rail .toc{
    border-left:0;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s2);
  }
  .svc__rail .toc ol{flex-direction:row;flex-wrap:wrap;gap:.375rem .875rem}
  .svc__rail .toc a{padding:.25rem 0}
}
@media (max-width:900px){
  .svc__heroIn{grid-template-columns:minmax(0,1fr)}
  .svc__heroFig{order:-1}
  .svc__heroFig img{max-height:320px;object-fit:cover}
  .svc__closeIn{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .trustrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__cta .btn{flex:1 1 auto;justify-content:center}
  .surgeon__card{grid-template-columns:minmax(0,1fr)}
  .surgeon__photo,.surgeon__photo img{width:88px;height:88px}
  .steps__item{grid-template-columns:1.875rem minmax(0,1fr);gap:.75rem}
  .steps__n{width:1.875rem;height:1.875rem;font-size:.8125rem}
  .steps__item:not(:last-child)::before{left:.9375rem;top:2.125rem}
  .faq > summary{padding:.875rem 1rem}
  .faq__a{padding:0 1rem .875rem}
}

/* Respect reduced motion (WCAG 2.2.2). */
@media (prefers-reduced-motion:reduce){
  .relgrid a:hover{transform:none}
  .faq > summary svg{transition:none}
}

/* ==========================================================================
   Z16 · ARTICLE PAGE (blog/show)
   --------------------------------------------------------------------------
   Long-form reading: measure-limited body column plus a sticky rail carrying
   the contents list, CTA, most-read and topics.

   NOTE: theme.css loads FIRST, cms.css SECOND. .sidebox, .taglist and .prose
   are owned by cms.css and are reused here as-is rather than re-declared —
   anything restated here would simply be overridden. The prev/next nav is
   .artnav, not .pager, because cms.css already uses .pager for pagination.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.art__hero{
  background:linear-gradient(168deg,var(--mist) 0%,var(--paper) 68%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,1.4rem + 2.4vw,3.25rem) clamp(2.5rem,1.8rem + 2.8vw,4rem);
}
/* Copy beside the image so the picture is above the fold, not below it. */
.art__heroIn{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,40vw,520px));
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  align-items:center;
}
.art__heroCopy{min-width:0}
.art__heroIn h1{
  font-size:clamp(1.875rem,1.35rem + 2.4vw,3.25rem);
  line-height:1.12;letter-spacing:-.02em;margin:.5rem 0 0;text-wrap:balance;
}
.art__heroFig{margin:0;min-width:0}
.art__heroFig img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-md);box-shadow:var(--sh-3);
}
.art__heroFig figcaption{
  font-size:var(--t-xs);color:var(--slate-2);margin-top:.625rem;
}
.art__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;
  margin:var(--s3) 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--slate-2);
}
.art__meta > span{display:inline-flex;align-items:center;gap:.4375rem}
.art__meta svg{width:1rem;height:1rem;flex:none;max-width:none;color:var(--jade)}
.art__by{font-weight:500;color:var(--ink)}
.art__by a{color:var(--jade);text-decoration:underline;text-underline-offset:2px}

/* Featured image. */
.art__fig{margin:var(--s4) 0 0;max-width:1000px;margin-inline:auto}
.art__fig img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-md);box-shadow:var(--sh-2);
}
.art__fig figcaption{
  font-size:var(--t-xs);color:var(--slate-2);margin-top:.625rem;text-align:center;
}

/* --- layout -------------------------------------------------------------- */
.art__layout{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(2rem,1rem + 3vw,4rem);
  padding-block:var(--sec-tight) var(--sec);align-items:start;
}
.art__main{min-width:0;max-width:var(--measure)}
/* The sidebar scrolls with the page. It is not sticky, and it does not scroll
   inside itself.

   It previously had max-height + overflow-y:auto, which put a second scrollbar
   on screen: a wheel over the sidebar moved the sidebar while the article
   stayed still. Sticky was no better on a long contents list — anchored to the
   top, an over-tall rail pinned its head and its last card was unreachable at
   every scroll offset; anchored to the bottom, the cards scrolled out of view
   on a long article. Plain document flow is the behaviour that is actually
   predictable, and it is what a reader expects. */
.art__rail{
  display:flex;flex-direction:column;gap:var(--s3);min-width:0;
}
/* In a scrolling flex column the children must keep their natural height —
   the default flex-shrink:1 squashes them to fit and the cards visually
   collide instead of scrolling. */
.art__rail > *{flex:0 0 auto}
.art__rail .toc__l3{padding-left:.875rem;font-size:var(--t-xs)}

/* --- key takeaways (the AEO block) --------------------------------------- */
.takeaways{
  background:var(--jade-soft);border-left:4px solid var(--jade);
  border-radius:var(--r-md);padding:var(--s3);margin:0 0 var(--s4);
}
.takeaways > h2{
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-h4);color:var(--jade-2);margin:0 0 .75rem;line-height:1.3;
}
.takeaways > h2 svg{width:1.25rem;height:1.25rem;flex:none;max-width:none}
.takeaways ul{margin:0;padding-left:1.125rem;display:grid;gap:.5rem}
.takeaways li{font-size:var(--t-base);line-height:1.6;color:var(--ink)}

/* --- share --------------------------------------------------------------- */
.share{
  margin:var(--s4) 0 0;padding:var(--s3) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem var(--s3);
}
.share__label{
  font-family:var(--display);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate-2);margin:0;
}
.share__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.share__list a{
  display:inline-flex;align-items:center;gap:.4375rem;
  min-height:44px;padding:.5rem .875rem;
  border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-xs);color:var(--slate);text-decoration:none;background:var(--paper);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.share__list a:hover{border-color:var(--jade);color:var(--jade)}
.share__list svg{width:1rem;height:1rem;flex:none;max-width:none}

/* --- topics -------------------------------------------------------------- */
.art__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem var(--s2);margin:var(--s3) 0 0}
.art__tagsLabel{
  font-family:var(--display);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate-2);
}

/* --- article FAQ (reuses .faqlist/.faq from the service page) ------------ */
.art__faqs{margin:var(--s5) 0 0}
.art__faqs > h2{font-size:var(--t-h3);margin:0 0 var(--s2);line-height:1.25}

/* --- prev / next --------------------------------------------------------- */
.artnav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap);
  margin:var(--s5) 0 0;padding-top:var(--s3);border-top:1px solid var(--line);
}
.artnav__item{
  display:flex;flex-direction:column;gap:.375rem;min-width:0;
  padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;background:var(--paper);
  transition:border-color .18s var(--ease);
}
.artnav__item:hover{border-color:var(--jade)}
.artnav__item--next{text-align:right;align-items:flex-end}
.artnav__dir{
  display:inline-flex;align-items:center;gap:.3125rem;
  font-size:var(--t-xxs);text-transform:uppercase;letter-spacing:.08em;color:var(--slate-2);
}
.artnav__dir svg{width:.875rem;height:.875rem;flex:none;max-width:none}
.artnav__item b{
  font-family:var(--display);font-size:var(--t-sm);color:var(--ink);line-height:1.4;
}

/* --- disclaimer ---------------------------------------------------------- */
.art__disclaimer{
  display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.75rem;
  align-items:start;margin:var(--s4) 0 0;padding:var(--s2);
  background:var(--mist);border-radius:var(--r-md);
  font-size:var(--t-xs);line-height:1.6;color:var(--slate-2);
}
.art__disclaimer svg{width:1.25rem;height:1.25rem;flex:none;max-width:none;color:var(--slate-2)}
.art__disclaimer b{color:var(--ink)}

/* --- rail widgets -------------------------------------------------------- */
.sidebox__title{
  font-family:var(--display);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate-2);margin:0 0 .75rem;
}
.poplist{margin:0;padding:0 0 0 1.125rem;display:grid;gap:.625rem}
.poplist li{font-size:var(--t-sm);line-height:1.45}
.poplist a{color:var(--ink);text-decoration:none}
.poplist a:hover{color:var(--jade)}
.catlist{list-style:none;margin:0;padding:0;display:grid;gap:.375rem}
.catlist a{
  display:block;padding:.375rem 0;font-size:var(--t-sm);
  color:var(--slate);text-decoration:none;
}
.catlist a:hover{color:var(--jade)}

/* --- related + closing --------------------------------------------------- */
.art__related{background:var(--mist);border-top:1px solid var(--line)}
.art__close{background:var(--navy);color:#fff;padding-block:var(--sec)}
.art__closeIn{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:center;
}
.art__close h2{font-size:var(--t-h2);color:#fff;margin:.375rem 0 var(--flow);line-height:1.15}
.art__close p{color:rgba(255,255,255,.78);line-height:1.65;margin:0;max-width:52ch}
.art__closeAct{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.art__closeNote{font-size:var(--t-xs);color:rgba(255,255,255,.6);margin:.25rem 0 0}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .art__layout{grid-template-columns:minmax(0,1fr)}
  .art__main{max-width:none}
  /* Stacked above the article: nothing is sticky, so nothing should scroll
     inside itself either. */
  .art__rail{
    position:static;order:-1;margin-bottom:var(--s2);
    max-height:none;overflow:visible;padding-right:0;margin-right:0;
  }
  .art__rail .toc ol{display:flex;flex-direction:row;flex-wrap:wrap;gap:.375rem .875rem}
  .art__rail .toc__l3{padding-left:0}
}
@media (max-width:900px){
  .art__closeIn{grid-template-columns:minmax(0,1fr)}
  /* Stack, image first — on a phone the picture reads as the lead. */
  .art__heroIn{grid-template-columns:minmax(0,1fr)}
  .art__heroFig{order:-1}
  .art__heroFig img{max-height:280px;object-fit:cover}
}
@media (max-width:640px){
  .artnav{grid-template-columns:minmax(0,1fr)}
  .artnav__item--next{text-align:left;align-items:flex-start}
  .share{flex-direction:column;align-items:flex-start;gap:.75rem}
  .share__list a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .share__list a{width:44px;justify-content:center;padding:.5rem}
}

@media (prefers-reduced-motion:reduce){
  .artnav__item,.share__list a{transition:none}
}

/* ==========================================================================
   Z17 · TOUCH TARGET FLOOR (all viewports)
   --------------------------------------------------------------------------
   WCAG 2.5.8 sets a 24px minimum for pointer targets, and it is not a mobile-
   only criterion — the existing rules only applied below 900px, so the top-bar
   phone link and the footer legal links sat at 21px on desktop.

   24px here rather than 44px: these are single links on their own line in
   low-density rows, so the comfortable-thumb size is not needed and forcing it
   would visibly stretch the strip.
   ========================================================================== */
.topstrip__in a,.foot__legal a,.foot__bar a{
  min-height:24px;display:inline-flex;align-items:center
}

/* ==========================================================================
   Z18 · ABOUT PAGE HERO
   --------------------------------------------------------------------------
   Editorial two-column opener: credential line, headline, lede, CTAs and the
   four figures that carry the most weight, beside a portrait.

   The four facts sit in the hero rather than further down because they are the
   reason a patient keeps reading; the stat band lower on the page repeats them
   with context for anyone who scrolls.

   All class names are unique to this file — checked against cms.css, which
   loads second and would otherwise win.
   ========================================================================== */

.ahero{
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(6,75,88,.10) 0%, rgba(6,75,88,0) 55%),
    linear-gradient(168deg, var(--mist) 0%, var(--paper) 66%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2.25rem,1.6rem + 2.6vw,4rem) clamp(2.5rem,1.8rem + 3vw,4.5rem);
}
.ahero__in{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,clamp(280px,34vw,440px));
  gap:clamp(2rem,1.2rem + 3.4vw,4rem);
  align-items:center;
}
.ahero__copy{min-width:0}
.ahero__copy h1{
  font-size:var(--t-h1);line-height:1.03;letter-spacing:-.025em;
  margin:.5rem 0 0;text-wrap:balance;
}
.ahero__lede{
  font-size:var(--t-lead);line-height:1.6;color:var(--slate);
  max-width:54ch;margin:var(--flow) 0 0;
}
.ahero__qual{
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-sm);color:var(--jade);font-weight:600;
  margin:var(--s2) 0 0;
}
.ahero__qual svg{width:1.125rem;height:1.125rem;flex:none;max-width:none}
.ahero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:var(--s3) 0 0}

/* Four figures, on one row at desktop and two columns on a phone. */
.ahero__facts{
  list-style:none;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2) var(--s3);
}
.ahero__facts li{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.ahero__facts b{
  font-family:var(--display);font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);
  font-weight:700;color:var(--jade);line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.ahero__facts span{font-size:var(--t-xs);color:var(--slate-2);line-height:1.35}

.ahero__fig{margin:0;min-width:0}
.ahero__fig img{
  width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-md);box-shadow:var(--sh-3);
}

@media (max-width:900px){
  .ahero__in{grid-template-columns:minmax(0,1fr)}
  .ahero__fig{order:-1}
  .ahero__fig img{aspect-ratio:16/10;max-height:300px}
}
@media (max-width:640px){
  .ahero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ahero__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   Z19 · DARK-SECTION CONTRACT (completing it)
   --------------------------------------------------------------------------
   The .section--bg-navy rules covered .label, .lead, bare <p>, headings and
   links, but not the components that carry their own colours. Any section can
   now be set to a dark background from the admin, so a component that only
   works on white is a latent bug — the About page's stat band rendered navy
   figures on a navy ground and was completely invisible.
   ========================================================================== */

/* Stat band / outcome figures. */
.section--bg-navy .ostat dt,
.section--dark .ostat dt{color:rgba(255,255,255,.72)}
.section--bg-navy .ostat dd,
.section--bg-navy .tnum,
.section--dark .ostat dd,
.section--dark .tnum{color:#fff}
.section--bg-navy .ostat p,
.section--dark .ostat p{color:rgba(255,255,255,.62)}
.section--bg-navy .ostat,
.section--dark .ostat{border-color:rgba(255,255,255,.16)}
.section--bg-navy .meter,
.section--dark .meter{background:rgba(255,255,255,.16)}
.section--bg-navy .meter > i,
.section--dark .meter > i{background:#8FE0CF}

/* Cards sitting on a dark band need their own surface, not white-on-white. */
.section--bg-navy .vcard,.section--bg-navy .tcard,.section--bg-navy .whycard,
.section--dark .vcard,.section--dark .tcard,.section--dark .whycard{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
}
.section--bg-navy .vcard h3,.section--bg-navy .tcard h3,.section--bg-navy .whycard h3,
.section--dark .vcard h3,.section--dark .tcard h3,.section--dark .whycard h3{color:#fff}
.section--bg-navy .vcard p,.section--bg-navy .tcard p,.section--bg-navy .whycard p,
.section--dark .vcard p,.section--dark .tcard p,.section--dark .whycard p{color:rgba(255,255,255,.72)}
.section--bg-navy .vcard__ico,.section--bg-navy .whycard__ico,
.section--dark .vcard__ico,.section--dark .whycard__ico{
  background:rgba(143,224,207,.14);color:#8FE0CF;
}

/* Timeline on a dark band. */
.section--bg-navy .jstep h3,.section--dark .jstep h3{color:#fff}
.section--bg-navy .jstep p,.section--dark .jstep p{color:rgba(255,255,255,.72)}
.section--bg-navy .jstep__n,.section--dark .jstep__n{background:#8FE0CF;color:var(--navy)}
.section--bg-navy .journey__rail,.section--dark .journey__rail{border-color:rgba(255,255,255,.18)}

/* Footnotes and small print. */
.section--bg-navy .foot-note,.section--bg-navy .note,.section--bg-navy small,
.section--dark .foot-note,.section--dark .note,.section--dark small{color:rgba(255,255,255,.55)}

/* Credentials card — stands in for a portrait the practice does not have.
   A stock photograph of a different person would misrepresent who operates,
   so the hero shows verifiable facts instead of a face. */
.ahero__card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);box-shadow:var(--sh-2);
}
.ahero__cardName{
  font-family:var(--display);font-size:var(--t-h3);font-weight:700;
  color:var(--ink);margin:0;line-height:1.2;letter-spacing:-.01em;
}
.ahero__cardRole{
  font-size:var(--t-sm);color:var(--jade);font-weight:600;
  margin:.25rem 0 0;line-height:1.45;
}
.ahero__cardList{
  margin:var(--s3) 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--line);
  display:grid;gap:.875rem;
}
.ahero__cardList > div{display:grid;gap:.1875rem}
.ahero__cardList dt{
  font-size:var(--t-xxs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate-2);
}
.ahero__cardList dd{
  margin:0;font-size:var(--t-sm);color:var(--ink);line-height:1.45;
}

/* ==========================================================================
   Z20 · FAQ PAGE HERO
   --------------------------------------------------------------------------
   The three most-asked questions are answered in the hero rather than left
   inside a collapsed accordion. They are the reason most people open this page
   at all, and making someone hunt through thirteen rows for "do I need a
   referral" is a worse experience than simply answering it.
   ========================================================================== */

.fhero{
  background:
    radial-gradient(100% 80% at 88% 0%, rgba(6,75,88,.09) 0%, rgba(6,75,88,0) 58%),
    linear-gradient(170deg, var(--mist) 0%, var(--paper) 70%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2.25rem,1.6rem + 2.6vw,3.75rem) clamp(2.25rem,1.6rem + 2.6vw,3.5rem);
}
.fhero h1{
  font-size:var(--t-h1);line-height:1.05;letter-spacing:-.025em;
  margin:.5rem 0 0;text-wrap:balance;
}
.fhero__lede{
  font-size:var(--t-lead);line-height:1.6;color:var(--slate);
  max-width:56ch;margin:var(--flow) 0 0;
}

/* Three answered questions, side by side. */
.fhero__quick{
  list-style:none;margin:var(--s4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);
}
.fhero__quick li{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:.375rem;min-width:0;
}
.fhero__q{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:var(--t-sm);font-weight:700;
  color:var(--ink);line-height:1.35;
}
.fhero__q svg{width:1.125rem;height:1.125rem;flex:none;max-width:none;color:var(--jade)}
.fhero__a{font-size:var(--t-sm);color:var(--slate);line-height:1.5}
.fhero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:var(--s3) 0 0}

@media (max-width:900px){
  .fhero__quick{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .fhero__cta .btn{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   Z21 · FAQ ACCORDION — column order and dark-panel link
   --------------------------------------------------------------------------
   .faq__grid is 1.7fr 1fr, but the markup puts the navy intro panel first, so
   the panel took the wide column and the questions were squeezed into the
   narrow one. With thirteen questions the panel ended up roughly a third the
   height of the list, leaving a large empty well beneath it.

   The intro panel is the secondary element here, so it takes the narrow
   column and the questions take the wide one; on desktop the panel also
   sticks, which uses that space rather than leaving it blank.
   ========================================================================== */
@media (min-width:1024px){
  .faq__grid{grid-template-columns:1fr 1.7fr}
  .faq__side{grid-column:1;position:sticky;top:5.5rem}
  .faq__list{grid-column:2}
}

/* .tlink is jade — near-invisible on the navy panel. */
.faq__side .tlink{color:#8FE0CF}
.faq__side .tlink:hover{color:#fff}
.faq__side .tlink svg{color:currentColor}

/* ==========================================================================
   Z22 · CONTACT PAGE HERO
   --------------------------------------------------------------------------
   Four contact methods as tappable cards directly under the H1. Someone on
   this page has already decided to make contact; the how should not be below
   the fold or buried in a paragraph.
   ========================================================================== */

.chero{
  background:
    radial-gradient(100% 80% at 90% 0%, rgba(6,75,88,.09) 0%, rgba(6,75,88,0) 58%),
    linear-gradient(170deg, var(--mist) 0%, var(--paper) 70%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(2.25rem,1.6rem + 2.6vw,3.75rem) clamp(2.25rem,1.6rem + 2.6vw,3.5rem);
}
.chero h1{
  font-size:var(--t-h1);line-height:1.05;letter-spacing:-.025em;
  margin:.5rem 0 0;text-wrap:balance;
}
.chero__lede{
  font-size:var(--t-lead);line-height:1.6;color:var(--slate);
  max-width:56ch;margin:var(--flow) 0 0;
}

.chero__ways{
  list-style:none;margin:var(--s4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--card-gap);
}
.chero__ways li{min-width:0}
.chero__ways a{
  display:flex;flex-direction:column;gap:.25rem;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3) var(--s2);text-decoration:none;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.chero__ways a:hover{border-color:var(--jade);transform:translateY(-2px)}
.chero__ico{
  width:2.25rem;height:2.25rem;border-radius:var(--r-sm);
  display:grid;place-items:center;margin-bottom:.5rem;
  background:var(--jade-soft);color:var(--jade);
}
.chero__ico svg{width:1.125rem;height:1.125rem;max-width:none;flex:none}
.chero__label{
  font-size:var(--t-xxs);text-transform:uppercase;letter-spacing:.08em;color:var(--slate-2);
}
.chero__ways b{
  font-family:var(--display);font-size:var(--t-base);color:var(--ink);
  line-height:1.35;overflow-wrap:anywhere;
}
.chero__note{font-size:var(--t-xs);color:var(--slate-2);line-height:1.45}
.chero__hours{
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-sm);color:var(--slate);margin:var(--s3) 0 0;
}
.chero__hours svg{width:1.125rem;height:1.125rem;flex:none;max-width:none;color:var(--jade)}

@media (max-width:1000px){
  .chero__ways{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .chero__ways{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .chero__ways a:hover{transform:none}
}

/* Contact: consulting hours line and the map, which previously never rendered
   because contact.map_embed was never set. */
.chan__hours{
  display:flex;align-items:flex-start;gap:.5rem;
  font-size:var(--t-sm);color:var(--slate);line-height:1.5;margin:var(--s3) 0 0;
}
.chan__hours svg{width:1.125rem;height:1.125rem;flex:none;max-width:none;color:var(--jade);margin-top:.125rem}
.chan__map{
  margin:var(--s3) 0 0;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--mist);
  aspect-ratio:16/10;
}
.chan__map iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:640px){
  .chan__map{aspect-ratio:4/3}
}

/* Contact channels: a flex item defaults to min-width:auto, so the long email
   address could not shrink and pushed the row 95px past its container on a
   390px screen. The text column must be allowed to wrap. */
.chan a > span:not(.chan__ico):not(.chan__arr){min-width:0;flex:1 1 auto}
.chan b,.chan a > span > span{overflow-wrap:anywhere}
.chan__arr{flex:none}

/* ==========================================================================
   Z23 · TOUCH TARGETS — slider steps and the reviewed-by link
   --------------------------------------------------------------------------
   WCAG 2.5.8 wants 24px minimum. Two controls were under it site-wide:

   .hstep  the hero slider markers are a deliberate 3px bar; widening the bar
           would change the approved design, so the hit area is widened with
           transparent padding and the bar is drawn as a pseudo-element that
           keeps its original size.

   .art__by a  "Medically reviewed by Dr. …" sits inside a sentence, so it is
           exempt from 2.5.8 as an inline link — but it is also the article's
           E-E-A-T signal and worth being comfortably tappable, so it gets a
           slightly taller line box without becoming a block.
   ========================================================================== */
.hstep{
  width:24px;height:44px;background:none;border-radius:0;
  display:grid;place-items:center;overflow:visible;
}
.hstep::before{
  content:"";width:3px;height:34px;border-radius:2px;
  background:rgba(255,255,255,.24);transition:background .3s var(--ease);
}
.hstep:hover::before{background:rgba(255,255,255,.44)}
.hstep::after{
  width:3px;height:34px;border-radius:2px;left:50%;top:50%;
  transform:translate(-50%,-50%) scaleY(0);transform-origin:center top;inset:auto;
}
.hstep[aria-current="true"]::after{transform:translate(-50%,-50%) scaleY(1)}
.hero[data-playing="true"] .hstep[aria-current="true"]::after{animation:h-fill-yc 7s linear forwards}
@keyframes h-fill-yc{
  from{transform:translate(-50%,-50%) scaleY(0)}
  to{transform:translate(-50%,-50%) scaleY(1)}
}

.art__by a{display:inline-block;padding-block:.2rem;line-height:1.4}

/* Two more components that only worked on a light ground.
   .rev__init  the reviewer initials chip: the avatar keeps a light background
               from the base rule while the text turned white on a dark band,
               giving 1.14:1 — effectively invisible.
   .outcomes__note  the stat-band footnote stayed slate on navy at 2.86:1. */
.section--bg-navy .rev__init,.section--dark .rev__init,
.reviews .rev__init{
  background:rgba(143,224,207,.16);color:#8FE0CF;
}
.section--bg-navy .outcomes__note,.section--dark .outcomes__note{
  color:rgba(255,255,255,.62);
}

/* Footer column labels. Formerly <h3>, which skipped h2 on every page whose
   body had no h2 — the heading-order defect the audit found site-wide. The
   appearance is identical; only the element changed. */
.foot__colTitle{
  font-family:var(--display);font-size:var(--t-xxs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8FE0CF;
  margin:0 0 var(--s3);
}
.foot__mid .foot__colTitle{margin-bottom:var(--s2)}

/* The mobile action bar measures 61px — 58px of button plus its top border and
   the safe-area inset — but the body reserved a flat 58px, so the last few
   pixels of every page sat under the bar. Reserve the real height. */
@media (max-width:899px){
  body{
    padding-bottom:calc(58px + 1px + env(safe-area-inset-bottom, 0px));
  }
}

/* Email addresses: prefer breaking at the @ or a dot rather than mid-word.
   overflow-wrap:anywhere stopped the row overflowing but split the domain as
   "gastrodocto / rchennai.com", which is hard to read and hard to dictate. */
.chan a b,.chero__ways b{
  overflow-wrap:break-word;word-break:normal;line-break:anywhere;
}

/* ==========================================================================
   Z24 · STICKY RAIL CTA
   --------------------------------------------------------------------------
   The rail as a whole cannot be sticky: measured across all 25 articles, every
   rail is taller than the 788px usable below the header (up to 2002px), and a
   sticky element taller than its viewport pins its head and hides its foot —
   the contents list' last entries became permanently unreachable.

   So the rail keeps scrolling with the page, and only the CTA sticks. At 241px
   it always fits, and it is the one element worth keeping in view: a reader
   deep in a long article should never have to scroll back to book.

   It pins against .art__layout, so it releases naturally at the end of the
   article rather than floating over the footer.
   ========================================================================== */
@media (min-width:1024px){
  .art__rail .railcta{
    position:sticky;
    top:5.5rem;
    /* Sits above the boxes that scroll past beneath it. */
    z-index:2;
  }
}

/* Not gated on prefers-reduced-motion: sticky is a layout position, not an
   animation, and removing it would take the booking card away from exactly the
   users most likely to want it within reach. */

/* The rail must fill the grid row, or the sticky CTA runs out of containing
   block and breaks free part-way down (measured: pinned at y=1600, gone by
   y=3200). A sticky child can only travel inside its parent, and .art__layout
   sets align-items:start, which shrink-wraps the rail to its content. */
@media (min-width:1024px){
  .art__rail{
    align-self:stretch;
    /* Stretching makes it a full-height flex column, so the cards must stay
       packed at the top instead of spreading down the whole article. */
    justify-content:flex-start;
  }
}
/* ==========================================================================
   Floating WhatsApp button
   Sits clear of the sticky mobile actionbar, respects reduced motion, and
   keeps a 44px+ touch target. Colour is WhatsApp brand green.
   ========================================================================== */
.wafab{
  position:fixed;
  right:clamp(1rem,2vw,1.75rem);
  bottom:clamp(1rem,2vw,1.75rem);
  z-index:900;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  height:56px;
  padding:0 1.1rem 0 .8rem;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  font-family:var(--display,inherit);
  font-size:.9375rem;
  font-weight:600;
  line-height:1;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.55),0 3px 8px rgba(3,30,66,.18);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .2s;
}
.wafab:hover,
.wafab:focus-visible{
  background:#1FBE5A;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(37,211,102,.6),0 4px 10px rgba(3,30,66,.2);
  color:#fff;
}
.wafab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wafab:active{transform:translateY(0)}

.wafab__ico{display:grid;place-items:center;width:34px;height:34px;flex:none}
.wafab__ico svg{display:block}

/* gentle attention pulse, once the page has settled */
@media (prefers-reduced-motion:no-preference){
  .wafab::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:0 0 0 0 rgba(37,211,102,.55);
    animation:wafabPulse 2.8s ease-out 3s infinite;
  }
}
@keyframes wafabPulse{
  0%   {box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%  {box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100% {box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* Small screens: the sticky actionbar owns the bottom edge, so lift the
   button above it and drop the label to a circle. */
@media (max-width:47.99rem){
  .wafab{
    bottom:calc(60px + 1rem);
    height:54px;width:54px;padding:0;justify-content:center;
  }
  .wafab__label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

/* Never sit on top of the back-to-top control if one is present */
.totop{margin-bottom:0}
@media (min-width:48rem){
  .totop{bottom:calc(1.75rem + 56px + .75rem)}
}

@media print{.wafab{display:none!important}}
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
   Hero tweaks  — site-wide adjustments appended after the theme stylesheet.
   Kept in ONE block so it can be replaced wholesale on each deploy.

   1. Hero H1 smaller — the client headline is far longer than the one the
      design was set for, so the original clamp filled the viewport.
   2. Hero strap hidden — it carries "Ninety-two per cent done by keyhole",
      a figure nothing on the site supports. The slide copy cannot be edited
      in the CMS (the slider admin form does not render its fields).
   3. Surgeon H2 smaller — that heading is 5 lines at the shared 46px size.
   4. Hospital section: the insurance card sits beside the hospital panel on
      desktop instead of stacking underneath it.
   ========================================================================== */

/* ---------- 1 · hero headline ---------- */
.hero h1{
  font-size:clamp(1.875rem, 1.35rem + 2.1vw, 3.125rem);
  line-height:1.08;
  letter-spacing:-.02em;
  max-width:19ch;
}
.hero h1 span{display:inline}
@media (max-width:47.99rem){
  .hero h1{font-size:clamp(1.75rem, 1.2rem + 3.4vw, 2.375rem);max-width:none}
}

/* ---------- 2 · unsourced hero claim ---------- */
.hero .hero__strap,
.hero .strap{display:none!important}

/* ---------- 3 · surgeon heading ---------- */
#surgeon h2{
  font-size:clamp(1.5rem, 1.15rem + 1.35vw, 2.125rem);
  line-height:1.18;
  letter-spacing:-.015em;
  text-wrap:balance;
}
@media (max-width:47.99rem){
  #surgeon h2{font-size:clamp(1.375rem, 1.05rem + 1.9vw, 1.75rem)}
}

/* ---------- 4 · hospital + insurance side by side ---------- */
@media (min-width:62rem){
  #hospital > .shell{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:var(--s6,3rem);
    align-items:start;
  }
  /* .hosp__grid is itself a 2-column grid, but the insurance card used to be
     its second column. Now that the card has moved out, collapse it to one
     column so the remaining panel fills the space instead of leaving a hole. */
  #hospital .hosp__grid{grid-template-columns:minmax(0,1fr)}
  /* the insurance card reads as a panel next to the hospital copy */
  #hospital .ins{
    background:var(--mist,#F2F5F7);
    border:1px solid var(--line,#E1E4E8);
    border-radius:var(--r-md,12px);
    padding:var(--s4,2rem);
    position:sticky;
    top:6.5rem;
  }
  #hospital .ins h3{margin-top:0}
}

/* below that breakpoint they stack, with the card still reading as a card */
@media (max-width:61.99rem){
  #hospital .ins{
    margin-top:var(--s5,3rem);
    background:var(--mist,#F2F5F7);
    border:1px solid var(--line,#E1E4E8);
    border-radius:var(--r-md,12px);
    padding:var(--s4,2rem);
  }
  #hospital .ins h3{margin-top:0}
}