/* ============================================================
   INSIGHT CHIROPRACTIC — site stylesheet
   Skin: resources/design-system/foundations/skins/insight-chiropractic.md

   REV 2, 2026-08-30. Rev 1 shipped two invisible-text bugs. Both are fixed
   below and both are commented where they were, so nobody reintroduces them.
   Respira handoff: semantic HTML, flex/grid layout, tokens not literals.
   ============================================================ */

:root{
  --ink:#14110D;          /* 18.82:1 on white */
  --ink-soft:#2A241C;
  --body:#4A443C;         /*  9.62:1 on white */
  --fineprint:#6B6358;    /*  5.91:1 on white */
  --paper:#FAF8F5;
  --surface:#FFFFFF;
  --hairline:#E8E2D9;
  --hairline-strong:#D6CCBE;
  --accent:#A7916C;       /*  3.04:1 white · 2.87:1 paper · 6.19:1 on ink.
                             LARGE TEXT AND DECORATION ONLY. Never body text,
                             never a focus ring on paper. */
  --accent-text:#7A6644;  /*  5.51:1 white · 5.20:1 paper · the ONLY gold for
                             body-size text and for focus rings on light.
                             WAS #867250 in rev 1, which is 4.63:1 on white but
                             only 4.37:1 on paper — and it is used mostly on
                             paper. Ratios must be computed against the ground
                             the colour actually sits on. */
  --accent-tint:#F2ECE2;
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.80);

  --display:'Cinzel',ui-serif,Georgia,serif;   /* headings; caps-only face */
  /* --gold-bright: Gary's bright yellow (9/13), ink labels only — white on it is banned. */
  --gold-bright:#F1BD47;
  /* --gold-ochre: eyebrow + card accent gold (Gary 9/13). ~2.8:1 on paper — display accents and fills with ink labels, not body text. */
  --gold-ochre:#BF8F3D;
  --text:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;   /* body + nav */
  --btn-text:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; /* buttons + CTAs */

  --rail:1240px;
  --rail-narrow:760px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(64px,9vw,132px);
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--body);font-family:var(--text);
  font-size:17px;line-height:1.7;font-feature-settings:'kern','liga';
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0 0 .45em;font-weight:600;
  line-height:1.12;letter-spacing:.015em}
h1{font-size:clamp(38px,5.6vw,68px);line-height:1.04}
h2{font-size:clamp(28px,3.8vw,46px)}
h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.006em}
h4{font-family:var(--text);font-size:17px;font-weight:600;letter-spacing:0}
p{margin:0 0 1.15em;max-width:70ch}
strong{font-weight:600;color:var(--ink)}
small{font-size:14px;color:var(--fineprint)}
a{color:var(--accent-text);text-underline-offset:3px;text-decoration-thickness:1px}
/* FIX S3: focus ring was --accent, which is 2.87:1 on paper and fails the
   1.4.11 non-text floor on roughly half the sections. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent-text);outline-offset:3px;border-radius:1px}
img{display:block;max-width:100%;height:auto;background:var(--hairline)}
hr{border:0;border-top:1px solid var(--hairline);margin:0}

.rail{width:min(var(--rail),100%);margin-inline:auto;padding-inline:var(--gutter)}
.rail--narrow{width:min(var(--rail-narrow),100%)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(44px,6vw,76px)}
.section--paper{background:var(--paper)}
.section--ruled{border-top:1px solid var(--hairline)}

/* ============================================================
   DARK BANDS. .section--ink and .belief are now interchangeable and each
   carries its FULL text contract, so neither can be used wrong.

   FIX S2: rev 1 gave .belief a background and no text colour, so every
   heading inside it inherited --ink on --ink = 1.00:1, invisible. Every
   final CTA on the site used it.
   ============================================================ */
.section--ink,.belief{background:var(--ink);color:var(--on-dark-soft)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4,
.belief h1,.belief h2,.belief h3,.belief h4{color:var(--on-dark)}
.section--ink strong,.belief strong{color:var(--on-dark)}
.section--ink p,.section--ink .lede,.section--ink li,
.belief p,.belief .lede,.belief li{color:var(--on-dark-soft)}
.section--ink .eyebrow,.belief .eyebrow{color:var(--gold-ochre)}
.section--ink small,.belief small{color:rgba(255,255,255,.62)}
/* FIX S1: `.section--ink a` at (0,1,1) beat `.btn--gold` at (0,1,0), so a gold
   button inside a dark band rendered gold-on-gold = 1.00:1, an invisible label.
   :not(.btn) drops the anchor rule out of the button's way. */
.section--ink a:not(.btn),.belief a:not(.btn){color:var(--accent)}
.section--ink .btn--gold,.belief .btn--gold{color:var(--on-dark)}
.section--ink .btn--on-dark,.belief .btn--on-dark{color:var(--ink)}
.section--ink .btn--ghost-on-dark,.belief .btn--ghost-on-dark{color:var(--on-dark)}
.section--ink .btn--primary,.belief .btn--primary{background:var(--surface);color:var(--ink)}

/* Eyebrow contrast (Gary, 2026-10-01): --gold-ochre is 2.7:1 on paper, under
   the 3:1 bar for this size, so light grounds use --accent-text (5.2:1). Gold
   stays on dark grounds (.section--ink, .belief, .booking ... set it). */
.eyebrow{font-family:var(--text);font-size:20px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 16px}
.lede{font-size:clamp(18px,2.05vw,21px);line-height:1.62;color:var(--body);max-width:62ch}
.measure{max-width:66ch}

/* ---- buttons. Only these pass AA:
   ink+white 18.82 · accent-text+white 5.51 · white+ink 18.82
   GOLD FILL WITH A WHITE LABEL IS 3.04:1. Gary overrode the ban 9/13: white
   labels on gold fills everywhere, deliberate brand call — documented ADA
   exception, not an oversight. */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;font-family:var(--btn-text);
  font-weight:600;font-size:16px;line-height:1;white-space:nowrap;text-decoration:none;border:1px solid transparent;
  border-radius:2px;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn--primary{background:var(--ink);color:var(--on-dark)}
.btn--primary:hover{background:var(--ink-soft)}
.btn--gold{background:var(--accent);color:var(--on-dark)}
.btn--gold:hover{background:#B8A17A}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--on-dark{background:var(--accent);color:var(--ink)}
.btn--ghost-on-dark{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.45)}
.btn--ghost-on-dark:hover{border-color:var(--on-dark)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn--cta{display:inline-flex;align-items:center;gap:12px;padding:18px 32px;border-radius:8px;white-space:nowrap;
  background:color-mix(in oklab,var(--accent),white 28%);color:var(--ink);
  font-family:var(--btn-text);font-size:17px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease}
.btn--cta .mk{width:22px;height:22px;flex:none}
.btn--cta:hover{background:var(--ink);color:var(--on-dark)}

/* ---- masthead · overlay-then-solid ---- */
.masthead{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .3s ease,border-color .3s ease}
.masthead__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);min-height:var(--nav-h)}
.masthead__brand{font-family:var(--display);font-size:21px;font-weight:600;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.masthead__brand small{display:block;font-family:var(--text);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-top:2px}
.sitefoot__wordmark{font-family:var(--display);font-size:22px;font-weight:600;color:var(--on-dark);margin:0 0 18px}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);flex-wrap:wrap}
.masthead nav a{font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.masthead nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent)}
.masthead__tel{font-variant-numeric:tabular-nums}
.masthead--overlay{background:transparent;border-bottom:1px solid transparent}
.masthead--overlay .masthead__brand,.masthead--overlay nav a{color:var(--on-dark)}
.masthead--overlay .masthead__brand small{color:var(--accent)}
.masthead--overlay .btn--gold{color:var(--on-dark)}
.masthead--solid{background:var(--surface);border-bottom:1px solid var(--hairline)}
.masthead--solid .masthead__brand,.masthead--solid nav a{color:var(--ink)}
.masthead--solid .masthead__brand small{color:var(--accent-text)}

/* ---- hero ---- */
.hero{position:relative;min-height:clamp(560px,82vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,10,8,.62) 0%,rgba(12,10,8,.12) 26%,rgba(12,10,8,0) 46%),
  linear-gradient(76deg,rgba(12,10,8,.86) 0%,rgba(12,10,8,.66) 38%,rgba(12,10,8,.12) 72%,rgba(12,10,8,0) 100%)}
.hero__body{position:relative;padding-block:clamp(56px,9vw,104px) clamp(48px,7vw,88px);color:var(--on-dark)}
.hero__glass{display:inline-block;background:rgba(12,10,8,.42);border:1px solid rgba(167,145,108,.28);
  border-radius:18px;padding:26px 30px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero__glass h1{margin-top:0}
.hero__body h1{color:var(--on-dark);max-width:20ch;margin-block:18px 22px;font-size:clamp(36px,4vw,58px);text-wrap:balance}
.hero__body .lede{font-size:clamp(16px,1.5vw,18px);max-width:440px;line-height:1.75}
.hero__body .lede{color:var(--on-dark-soft);max-width:52ch;margin-top:6px}
.hero__kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--text);font-size:13px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.hero__kicker::before{content:"";width:34px;height:1px;background:var(--accent)}
.hero__kicker--mark{margin-top:26px;margin-bottom:14px;display:inline-flex;align-items:center;gap:12px;
  color:var(--accent);letter-spacing:.26em;font-size:13px;
  background:rgba(12,10,8,.52);border:1px solid rgba(167,145,108,.35);border-radius:999px;
  padding:10px 22px;backdrop-filter:blur(6px)}
.hero__kicker--mark::before{content:none}
.hero__kicker--mark .mk{width:18px;height:18px;color:var(--accent)}
.hero__checks{list-style:none;margin:28px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));gap:14px 40px}
.hero__checks li{display:flex;align-items:center;gap:10px;font-family:var(--text);
  font-size:16px;font-weight:500;color:var(--on-dark)}
.hero__checks .mk{width:22px;height:22px;flex:none;color:var(--accent)}
.hero__reviews{display:flex;align-items:center;gap:16px;margin-top:32px}
.hero__avatars{display:flex}
.hero__avatars span{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.28);
  border:2px solid rgba(255,255,255,.7);margin-left:-10px}
.hero__avatars span:first-child{margin-left:0}
.hero__avatars .hero__avatars-n{display:grid;place-items:center;background:var(--accent);
  color:var(--ink);font:600 13px/1 var(--text);border-color:transparent}
.hero__stars{color:var(--accent);letter-spacing:3px;font-size:15px;line-height:1.2}
.hero__reviews small{color:var(--on-dark-soft);font-size:13px}
.hero-int{padding-top:calc(var(--nav-h) + clamp(44px,6vw,84px));padding-bottom:clamp(36px,5vw,64px);
  background:var(--paper);border-bottom:1px solid var(--hairline)}
.hero-int h1{max-width:19ch}
.hero-int .lede{margin-top:4px}
.crumbs{font-size:13px;color:var(--fineprint);margin:0 0 18px}
.crumbs a{color:var(--fineprint);text-decoration:none}
.crumbs a:hover{color:var(--accent-text);text-decoration:underline}
/* Gary, 10-3: the breadcrumbs were hard to notice (13px, all one grey). Now 15px, the page
   you are on in ink, the links above it in the accent brown with an underline. On paper:
   ink 17.8:1, accent brown 5.2:1. `body` lifts these over the Additional CSS box, which
   sets its own 13px grey on the split headers, and over insight-hero.css, which does the
   same on the band. */
body .crumbs,body .crumb-band .crumbs,body .hero-int--split .crumbs{font-size:15px;font-weight:600;color:var(--ink)}
body .crumbs a,body .crumb-band .crumbs a,body .hero-int--split .crumbs a{color:var(--accent-text);text-decoration:underline;text-decoration-color:rgba(122,102,68,.5);text-underline-offset:3px}
body .crumbs a:hover,body .crumb-band .crumbs a:hover,body .hero-int--split .crumbs a:hover{color:var(--ink);text-decoration-color:currentColor}
body .crumbs a:focus-visible{outline:3px solid #867250;outline-offset:2px}

/* ---- cards · FIX S5: works as a <ul> so Respira maps a list, not a raw block ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);margin-top:40px;list-style:none;padding:0}
.cards>li{display:contents}
.card{background:var(--surface);padding:30px 26px 28px;text-decoration:none;display:flex;
  flex-direction:column;gap:7px;position:relative;
  transition:background-color .2s ease,transform .22s ease,box-shadow .22s ease}
/* hover family: top-bar wipe + lift + CTA invert */
.card::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--accent);transition:width .28s ease}
a.card:hover{background:var(--paper);transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,17,13,.10);z-index:1}
a.card:hover::before{width:100%}
/* FIX S15: non-link cards were inheriting a hover state that promised a click. */
.card:not(a):hover{background:var(--surface)}
.card h3{margin:0;font-size:22px}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--fineprint);max-width:none}
a.card:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

.belief .statement{font-family:var(--text);font-weight:400;font-size:clamp(26px,3.6vw,44px);line-height:1.3;
  color:var(--on-dark);max-width:22ch;margin:0}
.belief .statement em{font-style:italic;color:var(--accent)}
.belief__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,80px);align-items:start}

/* ---- Day 1 divider-list ---- */
.day1{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(36px,5vw,80px);margin-top:44px}
.day1__col{min-width:0}
.day1__head{border-top:2px solid var(--ink);padding-top:16px;margin-bottom:6px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.day1__head h3{margin:0;font-size:21px}
.day1__count{font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
.day1 ol{list-style:none;margin:0;padding:0;counter-reset:d}
/* FIX S8: lets <ol start="7"> continue the count with no inline style. */
.day1 ol[start]{counter-reset:none}
.day1 li{counter-increment:d;display:grid;grid-template-columns:2.6em 1fr;gap:4px 14px;padding:17px 0;border-bottom:1px solid var(--hairline)}
.day1 li::before{content:counter(d,decimal-leading-zero);grid-row:span 2;font-family:var(--display);font-weight:600;
  font-size:15px;color:var(--accent-text);padding-top:4px;font-variant-numeric:tabular-nums}
.day1 li h4{margin:0}
.day1 li p{margin:0;font-size:15px;line-height:1.55;color:var(--fineprint);max-width:none}
.section--ink .day1 li p,.belief .day1 li p{color:var(--on-dark-soft)}

/* ---- split / pull ---- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5.5vw,84px);align-items:center}
.split--media-right{direction:rtl}
.split--media-right>*{direction:ltr}
.split img{width:100%;object-fit:cover}
.split .ratio-45 img{aspect-ratio:4/5}
.split .ratio-32 img{aspect-ratio:3/2}
.pull{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:26px 0;
  font-family:var(--text);font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.5;color:var(--ink)}
.pull cite{display:block;font-family:var(--text);font-size:13px;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fineprint);margin-top:12px}
.section--ink .pull,.belief .pull{color:var(--on-dark)}
.section--ink .pull cite,.belief .pull cite{color:rgba(255,255,255,.72)}
/* Safety callouts must not read as decorative quotations. */
.pull--alert{border-left-color:#B3402A;background:#FDF3F0;padding:18px 22px;font-family:var(--text);
  font-size:18px;line-height:1.55;color:var(--ink)}
.pull--alert strong{color:#8C2E1D}

/* ---- origin-story view: portrait card + pull-line (spec: views/origin-story.md).
   Homepage runs the teaser (no sticky); About Us gets the sticky treatment. ---- */
@media (min-width:900px){.split--origin{grid-template-columns:.82fr 1.18fr}}
.portrait-card{position:relative;margin:0;border-radius:10px;overflow:hidden;
  box-shadow:0 30px 60px -22px rgba(20,17,13,.38)}
.portrait-card img{aspect-ratio:4/5;width:100%;object-fit:cover}
.portrait-card figcaption{position:absolute;inset:auto 0 0;padding:64px 26px 20px;
  background:linear-gradient(180deg,rgba(11,9,7,0) 0%,rgba(11,9,7,.88) 68%)}
.portrait-card .name{font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:.02em;color:var(--on-dark)}
.portrait-card .role{font-family:var(--text);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);margin-top:3px}
.pull-line{position:relative;margin:30px 0 4px;padding-top:22px;border-top:1px solid var(--hairline)}
.pull-line::before{content:"";position:absolute;top:-1px;left:0;width:42px;height:2px;background:var(--accent)}
.pull-line p{font-family:var(--text);font-weight:600;font-size:clamp(20px,2.3vw,25px);
  line-height:1.42;color:var(--ink);margin:0}
.pull-line cite{display:block;font-family:var(--text);font-size:13px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fineprint);margin-top:12px}
/* Caption below the card instead of the gradient plate (Gary, 9/13). */
.portrait-card--below{overflow:visible;border-radius:0;box-shadow:none}
.portrait-card--below .crop{overflow:hidden;border-radius:10px;box-shadow:0 30px 60px -22px rgba(20,17,13,.38)}
.portrait-card--below img{border-radius:0;box-shadow:none;transform:scale(1.1);transform-origin:50% 100%}
.portrait-card--below figcaption{position:static;background:none;padding:16px 2px 0;
  font-family:var(--text);font-size:14px;line-height:1.5;color:var(--fineprint)}

/* ---- serve index · FIX S5 ---- */
.serve{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(24px,4vw,64px);
  margin-top:34px;border-top:1px solid var(--hairline);list-style:none;padding:0}
.serve>li{display:contents}
.serve a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px 2px;
  border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink);font-size:17px;transition:padding-left .2s ease}
.serve a:hover{padding-left:8px;color:var(--accent-text)}
.serve a span{font-size:13px;color:var(--fineprint)}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;margin-top:40px}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figure{margin:0}
.g-7{grid-column:span 7}.g-5{grid-column:span 5}.g-4{grid-column:span 4}
.g-8{grid-column:span 8}.g-6{grid-column:span 6}
.gallery .tall img{aspect-ratio:3/4}
.gallery .wide img{aspect-ratio:3/2}
.gallery .square img{aspect-ratio:1/1}
figcaption{font-family:var(--text);font-size:13px;color:var(--fineprint);padding-top:9px;line-height:1.45}

/* ---- team · FIX O4: a real slot so the grid rhythm survives ---- */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:42px;list-style:none;padding:0}
@media (max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.team{grid-template-columns:1fr}}
.team>li{display:contents}
.member img{aspect-ratio:4/5;object-fit:cover;width:100%}
.member__slot{aspect-ratio:4/5;width:100%;background:var(--accent-tint);border:1px dashed var(--hairline-strong);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  font-family:var(--text);font-size:13px;color:var(--accent-text);line-height:1.5}
.member h3{margin:20px 0 2px;font-size:22px}
.member .role{font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 12px}
.member p{font-size:15px;line-height:1.6;color:var(--body);max-width:none}

/* ---- steps ---- */
.steps{counter-reset:s;margin-top:40px;border-top:1px solid var(--hairline)}
.steps ol{margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;list-style:none;display:grid;grid-template-columns:3.4em 1fr;gap:6px 18px;
  padding:26px 0;border-bottom:1px solid var(--hairline)}
.steps li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font-family:var(--display);font-weight:600;
  font-size:26px;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.steps h3{margin:0 0 4px;font-size:21px}
.steps p{margin:0;max-width:64ch}
/* FIX S14: tolerate <ol class="steps"> as well as <div class="steps"><ol>. */
ol.steps{margin:40px 0 0;padding:0;list-style:none}

/* ---- faq ---- */
.faq{margin-top:36px;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;padding:22px 40px 22px 0;position:relative;list-style:none;
  font-family:var(--text);font-weight:600;font-size:clamp(17px,1.9vw,20px);color:var(--ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:20px;font-family:var(--text);font-size:22px;color:var(--accent-text)}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 0 24px}
.faq .answer p:last-child{margin-bottom:0}

/* ---- editorial ---- */
.editorial{max-width:68ch}
.editorial h2{margin-top:2em;font-size:clamp(24px,2.8vw,32px)}
.editorial h3{margin-top:1.7em;font-size:21px}
.editorial p{font-size:18px;line-height:1.78}
.editorial ul,.editorial ol{padding-left:1.2em;margin:0 0 1.3em}
.editorial li{margin-bottom:.55em;max-width:66ch}
.editorial>*:first-child{margin-top:0}
.byline{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:18px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:40px;
  font-family:var(--text);font-size:14px;color:var(--fineprint)}
.byline strong{color:var(--ink);font-weight:600}

/* ---- contact ---- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,72px);align-items:start}
.contact--spaced{margin-top:40px}
.map{background:var(--paper);border:1px solid var(--hairline);aspect-ratio:4/3;overflow:hidden}
.map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.78) contrast(1.02)}
.deflist{margin:0;border-top:1px solid var(--hairline)}
.deflist div{display:grid;grid-template-columns:minmax(96px,26%) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.deflist dt{font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fineprint)}
.deflist dd{margin:0;color:var(--ink)}
.deflist dd a{color:var(--ink)}
.hours{margin:0;border-top:1px solid var(--hairline)}
.hours div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.hours dt{color:var(--body)}
.hours dd{margin:0;color:var(--ink)}
.hours .closed dd{color:var(--fineprint)}
.stack-lg{margin-top:36px}
.stack-sm{margin-top:20px}

/* ---- form · FIX C5: its own class, and inputs that rev 1 never styled ---- */
.formgrid{margin:0;border-top:1px solid var(--hairline)}
.formgrid p{display:grid;grid-template-columns:minmax(96px,26%) 1fr;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--hairline);margin:0;max-width:none;align-items:center}
.formgrid label{font-family:var(--text);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fineprint)}
.formgrid input,.formgrid textarea{font-family:var(--text);font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline-strong);border-radius:2px;
  padding:11px 13px;width:100%;line-height:1.5}
.formgrid textarea{resize:vertical}
.formgrid input::placeholder,.formgrid textarea::placeholder{color:var(--fineprint)}
fieldset{border:0;margin:0;padding:0}
legend{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,23px);color:var(--ink);padding:0}

.booking{background:var(--ink);color:var(--on-dark-soft);padding:clamp(28px,3.4vw,44px)}
.booking h2,.booking h3{color:var(--on-dark)}
.booking strong{color:var(--on-dark)}
.booking .eyebrow{color:var(--gold-ochre)}
.booking a:not(.btn){color:var(--accent)}
.booking .btn--gold{color:var(--on-dark)}
.booking .btn--ghost-on-dark{color:var(--on-dark)}
.booking .fineprint{font-size:14px;color:rgba(255,255,255,.62);margin:18px 0 0}

/* ---- tail ---- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(28px,4vw,56px);margin-top:42px;list-style:none;padding:0}
.quotes>li{display:contents}
blockquote{margin:0}
.quotes blockquote{border-top:2px solid var(--accent);padding-top:24px}
.quotes blockquote p{font-family:var(--text);font-weight:400;font-size:18px;line-height:1.6;color:var(--ink)}
blockquote cite{display:block;font-style:normal;font-family:var(--text);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fineprint);margin-top:14px}

.cta-band{text-align:center}
.cta-band .btn-row{justify-content:center}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band .lede{margin-inline:auto}

.sitefoot{background:var(--ink);color:var(--on-dark-soft);padding-block:clamp(52px,6vw,82px) 104px;font-size:15px}
.sitefoot a{color:var(--on-dark-soft);text-decoration:none}
.sitefoot a:hover{color:var(--on-dark);text-decoration:underline}
.sitefoot__cols{display:grid;grid-template-columns:1.5fr repeat(auto-fit,minmax(150px,1fr));gap:clamp(28px,4vw,52px)}
.sitefoot h3{color:var(--on-dark);font-family:var(--text);font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;margin:0 0 18px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{padding:5px 0}
.sitefoot__brand{font-family:var(--display);font-weight:600;font-size:24px;color:var(--on-dark);margin:0 0 14px}
.sitefoot__legal{margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 28px;font-size:13px;color:rgba(255,255,255,.6)}

/* ---- footer v3 · 9/13, Graphy-inspired two-zone layout. Flat ink, no gradient, no CTA row. ---- */
.sitefoot--v3{background:var(--ink);padding-block:clamp(56px,7vw,88px) 0;
  border-top:1px solid rgba(167,145,108,.35)} /* divider above the footer; visible on the ink CTA band above */

/* 9/18 (Gary): the footer picks up the faceted texture from the interior heroes, so the
   page opens and closes on the same ground. Same file, same near-opaque scrim, one image
   and one overlay. The seams sit low and right, under the legal row rather than the copy.
   ADA: --foot-texture-scrim .93 keeps the composite within a point of flat ink. Measured
   on the seam, the worst case on the panel: fineprint rgba(255,255,255,.6) 6.3:1,
   body .82 white 10.1:1, headings and the logo on white 15.4:1. Do not lower it below .9.
   CARLOS: BB row background image plus one overlay gradient, same recipe as .c-intro__copy. */
.sitefoot--v3{--foot-texture-scrim:.93;
  background-image:linear-gradient(180deg,
      rgba(20,17,13,calc(var(--foot-texture-scrim) * 1.02)) 0%,
      rgba(20,17,13,var(--foot-texture-scrim)) 62%,
      rgba(20,17,13,calc(var(--foot-texture-scrim) * .93)) 100%),
    url("../img/hero-texture-ink-gold.jpg");
  background-size:cover,cover;
  background-position:center,var(--foot-texture-pos,72% 38%);
  background-repeat:no-repeat,no-repeat}
/* 9/18 (Gary): no rule across the footer. The texture separates the zones. */
.sitefoot--v3 .sitefoot__legal{border-top:0}
.sitefoot--v3 .sitefoot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(32px,5vw,72px);padding-bottom:clamp(40px,5vw,64px)}
@media (max-width:900px){.sitefoot--v3 .sitefoot__grid{grid-template-columns:1fr 1fr}
  .sitefoot--v3 .sitefoot__brandcol{grid-column:1/-1}}
.sitefoot--v3 .sitefoot__logo{display:block;height:48px;width:auto;max-width:100%;margin:0 0 26px;background:transparent}
.sitefoot--v3 p{max-width:38ch;margin:0 0 16px;line-height:1.75}
.sitefoot--v3 .sitefoot__serving{font-size:13.5px;color:rgba(255,255,255,.6)}
.sitefoot--v3 .sitefoot__social{display:flex;gap:12px;margin-top:24px}
.sitefoot--v3 .sitefoot__social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;color:var(--on-dark);font-size:15px}
.sitefoot--v3 .sitefoot__social a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.sitefoot--v3 .sitefoot__legal{margin-top:0;padding-block:24px 28px;justify-content:space-between}
.sitefoot--v3 .sitefoot__legal-links{display:flex;flex-wrap:wrap;gap:10px 24px}

/* ---- BBB accredited business seal · 9/20 (Gary). Sits in the footer Visit column, under
   Contact Us, on every page. The image is served live by BBB and must not be rehosted,
   recoloured or resized, so this only caps it at its natural 250x52 and drops the footer
   link underline. CARLOS: BB HTML module inside the Visit column. ---- */
.sitefoot--v3 .sitefoot__seal{margin-top:28px}
.sitefoot--v3 .sitefoot__seal a{display:inline-block;line-height:0;background:#fff;border-radius:6px;
  overflow:hidden;width:244px;height:46px;max-width:100%}
.sitefoot--v3 .sitefoot__seal a:hover{text-decoration:none}
.sitefoot--v3 .sitefoot__seal img{display:block;width:250px;height:52px;max-width:none;margin:-3px}

.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--ink);border-top:1px solid rgba(167,145,108,.5)}
.stickybar a{flex:1;text-align:center;padding:16px 10px;text-decoration:none;font-family:var(--btn-text);font-weight:600;font-size:16px;color:var(--on-dark)}
.stickybar a+a{background:var(--accent);color:var(--on-dark)}

/* ---- notes for Gary. STRIPPED BEFORE BUILD. ---- */
.wf-note{font-family:var(--text);font-size:13px;line-height:1.6;color:var(--fineprint);
  background:var(--accent-tint);border-left:3px solid var(--accent);padding:12px 16px;margin:20px 0;max-width:70ch}
.wf-note strong{color:var(--ink)}
.section--ink .wf-note,.belief .wf-note{background:rgba(255,255,255,.07);border-left-color:var(--accent);color:rgba(255,255,255,.72)}
.section--ink .wf-note strong,.belief .wf-note strong{color:var(--on-dark)}
/* TKTK = a placeholder that must never ship. Loud on purpose. */
.tktk{background:#FFF3B0;color:#5A4500;padding:2px 7px;border-radius:2px;font-family:var(--text);
  font-size:.92em;font-weight:600;letter-spacing:.02em}

@media (max-width:900px){
  .gallery{grid-template-columns:repeat(6,1fr)}
  .g-7,.g-5,.g-4,.g-8,.g-6{grid-column:span 3}
}
@media (max-width:620px){
  body{font-size:16px;padding-bottom:58px}
  .masthead nav a:not(.btn):not(.masthead__tel){display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .g-7,.g-5,.g-4,.g-8,.g-6{grid-column:span 1}
  .deflist div,.formgrid p{grid-template-columns:1fr;gap:6px}
  .split--media-right{direction:ltr}
}
@media (min-width:621px){ .stickybar{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ======================================================================
   Single Page Template (Gary, 2026-10-01): service pages and the other
   content singles. Five blocks, as supplied.
   ====================================================================== */

/* 1. Split interior hero. Headline left, lede right behind a rule. */
.hero-int--split .hero-int__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.hero-int--split h1{max-width:16ch;font-size:clamp(34px,4.6vw,58px)}
.hero-int--split .hero-int__aside{border-left:1px solid var(--hairline-strong);padding-left:clamp(20px,2.4vw,34px)}
.hero-int--split .lede{margin:0;max-width:46ch}
@media (max-width:860px){
  .hero-int--split .hero-int__in{grid-template-columns:1fr;gap:24px}
  .hero-int--split .hero-int__aside{border-left:0;border-top:1px solid var(--hairline-strong);padding-left:0;padding-top:22px}
  .hero-int--split h1{max-width:none}
}

/* 2. Single-page body: reading column plus the booking rail. */
.single{padding-block:clamp(40px,5vw,72px) var(--section-y)}
.single__grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:clamp(32px,5vw,80px);align-items:start}
.single__rail{position:sticky;top:calc(var(--nav-h) + 24px)}
@media (max-width:980px){
  .single__grid{grid-template-columns:1fr;gap:48px}
  .single__rail{position:static}
}

/* 3. Optional figure. */
.figure{margin:2.4em 0}
.figure img{display:block;width:100%;height:auto;background:var(--accent-tint)}
.figure figcaption{margin-top:10px;font-size:14px;line-height:1.6;color:var(--fineprint);max-width:60ch}

/* 4. Pull quote, in Dr. Cox's own words. One per page at most. */
.pull-single{margin:2.6em 0;padding-left:clamp(18px,2vw,28px);border-left:1px solid var(--accent);font-family:var(--display);font-size:clamp(21px,2.4vw,27px);line-height:1.38;color:var(--ink)}
.pull-single cite{display:block;margin-top:14px;font-family:var(--text);font-size:14px;font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fineprint)}

/* 5. Booking rail internals and the closing on-page CTA. */
.booking__row{display:grid;gap:12px;margin-top:22px}
.booking__tel{font-family:var(--display);font-size:26px;color:var(--on-dark);text-decoration:none;display:block;margin-top:4px}
.booking a.booking__tel{color:var(--on-dark)}
.booking a.booking__tel:hover{color:var(--accent)}
.booking__hours{margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:15px;line-height:1.7}
.booking__hours dl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:8px 0 0}
.booking__hours dt{color:var(--on-dark);font-weight:600}
.booking__hours dd{margin:0;font-variant-numeric:tabular-nums}
.cta-single{background:var(--accent-tint);padding:clamp(32px,4vw,56px);margin-top:3em}
.cta-single h2{font-size:clamp(24px,2.8vw,32px);max-width:20ch;margin-top:0}
.cta-single p{margin:14px 0 24px;max-width:56ch}

/* Footer hours (Gary, 2026-10-01: the footer carries the hours). */
.sitefoot--v3 .sitefoot__grid{grid-template-columns:1.4fr 1.3fr 1fr 1fr}
.sitefoot__hours{margin:0;font-size:14.5px;line-height:1.6}
.sitefoot__hours div{display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.sitefoot__hours dt{color:var(--on-dark);font-weight:600}
.sitefoot__hours dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
@media (max-width:900px){.sitefoot--v3 .sitefoot__grid{grid-template-columns:1fr 1fr}.sitefoot__hourscol{grid-column:1/-1;max-width:360px}}

/* Top strip: Patient beside the phone, quiet at rest (Gary's Global doc). */
.masthead__striprow{gap:22px}
.masthead__quiet{font-family:var(--text);font-size:13px;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.72);text-decoration:none}
.masthead__quiet:hover,.masthead__quiet:focus-visible{color:#fff}

/* Article typography (Gary, 2026-10-01): every element an Insight, legal or
   content page can carry, so they all match. Quote = the template's pull quote. */
.editorial h4{margin:1.6em 0 .4em;font-family:var(--text);font-size:17px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.editorial ol{padding-left:1.4em}
.editorial li::marker{color:var(--accent-text)}
.editorial blockquote,.editorial .wp-block-quote{margin:2.6em 0;padding-left:clamp(18px,2vw,28px);border-left:1px solid var(--accent);
  font-family:var(--display);font-size:clamp(21px,2.4vw,27px);line-height:1.38;color:var(--ink)}
.editorial blockquote p{font-size:inherit;line-height:inherit;margin:0}
.editorial blockquote p strong{font-weight:inherit}
.editorial blockquote cite{display:block;margin-top:14px;font-family:var(--text);font-size:14px;font-style:normal;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fineprint)}
.editorial figure,.editorial .wp-block-image{margin:2.4em 0}
.editorial figure img{display:block;width:100%;height:auto;background:var(--accent-tint)}
.editorial figcaption,.editorial .wp-element-caption{margin-top:10px;font-size:14px;line-height:1.6;color:var(--fineprint);max-width:60ch;text-align:left}
.editorial table{width:100%;border-collapse:collapse;margin:2em 0;font-size:16px;font-variant-numeric:tabular-nums}
.editorial th,.editorial td{padding:12px 14px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.editorial th{font-weight:600;color:var(--ink);border-bottom-color:var(--hairline-strong)}
.editorial .wp-block-table{margin:2em 0;overflow-x:auto}
.editorial .wp-block-buttons{margin:2em 0}
.editorial .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border-radius:0;
  background:var(--accent);color:var(--ink);font-family:var(--btn-text);font-weight:600;font-size:16px;text-decoration:none}
.editorial .wp-block-button__link:hover{background:#B8A078}
.editorial hr{border:0;border-top:1px solid var(--hairline);margin:2.4em 0}

/* Byline on its own under a hero (Condition pages). */
.byline-band .byline{margin:clamp(28px,3vw,40px) 0 0}

/* Logged-in visitors: the fixed header sits under WordPress's admin bar
   (32px; 46px at 782px and below). Under 600px WordPress lets the admin bar
   scroll away; it is pinned here so no gap opens above the header. */
.admin-bar .masthead{top:32px}
.admin-bar .single__rail{top:calc(var(--nav-h) + 56px)}
@media (max-width:782px){
  .admin-bar .masthead{top:46px}
}
@media (max-width:600px){
  .admin-bar #wpadminbar{position:fixed}
}

/* 10-2 (Gary): Related reading on Insights posts, between the article and the
   reviews, flush with both. single.php prints it inside .editorial. */
.editorial .related-reading{padding:clamp(44px,5vw,72px) 0 0}
.editorial .related-reading h2{margin:0 0 24px}

/* 10-2: byline author links to the doctor page. */
.byline strong a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.byline strong a:hover{color:var(--accent-text)}

/* 10-2: Expecting Mothers. The postpartum pubic symphysis section carries its own
   weight (doc note), as a tinted panel with the gold rule inside the article column. */
.editorial .postpartum-band{margin:clamp(36px,4vw,52px) 0;padding:clamp(24px,3vw,36px) clamp(22px,3vw,36px);background:var(--accent-tint);border-left:3px solid var(--accent);border-radius:0 6px 6px 0}
.editorial .postpartum-band h2,.editorial .postpartum-band .wp-block-group__inner-container > :first-child{margin-top:0}
.editorial .postpartum-band p:last-child{margin-bottom:0}

/* 10-2 responsive pass. At 375 px the header row (logo, Book Now, Menu) needed
   426 px, and the stuck header grew the logo again; the footer kept two columns
   the hours list cannot shrink into; a long source link in service copy could
   not wrap. Selectors carry extra weight because insight-hero.css loads later. */
@media (max-width:420px){
  .masthead .masthead__in{gap:10px}
  .masthead .masthead__in .masthead__brand img{height:30px}
  .masthead .masthead__in .masthead__book{padding:10px 12px;font-size:13px}
  .masthead .masthead__in .masthead__menu summary{padding:10px 11px;gap:6px}
}
@media (max-width:560px){
  .sitefoot--v3 .sitefoot__grid{grid-template-columns:minmax(0,1fr)}
  .sitefoot--v3 .sitefoot__grid .sitefoot__hourscol{max-width:none}
}
.single__grid > *{min-width:0}
.editorial{overflow-wrap:break-word}
/* The full-bleed reviews and booking bands on singles use 100vw, which counts a
   desktop scrollbar and caused an 8 to 15 px sideways scroll on Windows. */
body{overflow-x:clip}

/* 10-2: 404 and search results. The core search form arrived unstyled. Gold
   button with ink text and Poppins, like every other button on the site. */
.notfound__call{margin-top:24px}
.searchform > div{display:flex;gap:10px;max-width:520px}
.searchform input[type=text]{flex:1;min-width:0;height:48px;padding:0 16px;border:1px solid var(--hairline-strong);border-radius:8px;font-family:var(--text);font-size:16px;background:#fff;color:var(--ink)}
.searchform input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.searchform input[type=submit]{height:48px;padding:0 22px;border:0;border-radius:8px;background:#F7C86E;color:var(--ink);font-family:var(--brand-text,'Poppins',sans-serif);font-weight:600;font-size:15px;cursor:pointer}
.searchform input[type=submit]:hover,.searchform input[type=submit]:focus-visible{background:#EFBB55}

/* 10-3: service pages carry one Ohlson photo per section. Portrait and landscape
   frames crop to one 3:2 shape so short sections are not dwarfed. */
.editorial .section-photo{margin:1.6em 0 2.2em}
.editorial .section-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 35%}

/* 10-3 (Gary): doctor headers on very wide monitors. Past 1920 px the photo column
   kept growing and enlarged a tight headshot beyond the frame, cutting the chin. */
@media (min-width:1921px){
  .c-intro.dr-hero{grid-template-columns:minmax(0,1fr) 806px}
}
/* Listing headers: the copy column was a share of the screen while its left margin grew
   with the screen, so the text narrowed from 414 px at 1366 to 314 px at 2560. Above
   1440 px the column is sized from the text instead, and the photo takes the rest. */
@media (min-width:1441px){
  .c-intro.c-intro--arc{grid-template-columns:calc((100vw - var(--rail)) / 2 + var(--gutter) + 470px) minmax(0,1fr)}
}

/* 10-3 (Gary): pinned header crops. A percentage focus cannot hold a face steady: a
   wide, short box shows a thinner slice of a tall photo as the screen widens. With
   Photo focus "pin X% TOP%" the render adds .c-intro--pin and three variables, and the
   top of the visible photo sits TOP% down at every width. Container units give the
   photo's displayed height; the clamp keeps the photo covering the box if it is ever
   scaled by height instead. See inc/pin-crop.php. */
.c-intro.c-intro--pin .c-intro__media{container-type:size;padding:0}
.c-intro.c-intro--pin .c-intro__media img{object-position:var(--pin-x,50%) min(0px,max(calc(var(--pin-top) * var(--pin-ratio) * -100cqw),calc(100cqh - var(--pin-ratio) * 100cqw)))}
/* Past full HD the photo box stops growing, so framing there matches 1920 px. */
@media (min-width:1921px){
  .c-intro.c-intro--arc{grid-template-columns:minmax(0,1fr) 1040px}
  .c-intro.c-intro--arc .c-intro__inner{max-width:470px}
  .c-intro:not(.c-intro--arc):not(.dr-hero){grid-template-columns:minmax(0,1fr) 1010px}
}

/* 10-3 (Gary): photo crops checked on every page. Section photos default to a 3:2 crop
   aimed at 35%; these modifiers fix the ones that default cut. Every section photo is
   3:2 (Gary, 10-3): the square and tall crops are gone. The elbow photo is now a
   close-up file, and spinal-decompression-073 takes sp-y75, the lower part of the frame. */
.editorial .section-photo.sp-y16 img{object-position:50% 16%}
.editorial .section-photo.sp-y29 img{object-position:50% 29%}
.editorial .section-photo.sp-y75 img{object-position:50% 75%}
/* 10-3 (Gary): the H1 is the small search line and the big line under it is ad copy in
   plain text, as on Home. h1.eyebrow keeps the eyebrow look and .hero-line takes the look
   the big H1 had. The values are the rendered ones, which the Additional CSS sets on
   every interior header (eyebrow 15px/800, headline clamp(36px,4.2vw,54px) in white), so
   the swap changes no pixel. Eyebrow colours stay with the rules that already set them:
   gold on the single heroes, cream on the listing and Contact scrim.
   On the ink single hero the "Who We Serve" / "Insights" label was a ::before; with an
   H1 line (.hero-ink--h1line) the real H1 takes that row and the label is dropped. */
.hero-int h1.eyebrow,.c-intro h1.eyebrow,body.single .hero-ink--int h1.eyebrow{font-family:var(--text);
  font-size:15px;font-weight:400;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;
  max-width:none;text-wrap:balance}
/* Gary, 10-3: the Additional CSS rule ".single{padding-top}" is written for the single-page
   wrapper, but it also matches <body class="single">, so every single page (services, Who We
   Serve, Insights, doctors) started 18 to 30px below the nav bar. This cancels it on the body
   only; the wrapper keeps its padding. */
body.single{padding-top:0}
/* Gary, 10-3: the Menu control is the seven main links only, in big left-aligned rows.
   Rows are 56px (Google's tap guidance is 48). On phones the panel spans the screen and
   stops above the Call / Book Now bar. Sub-pages live on the listing pages (NN/g: more
   than five sub-pages do not belong in a mobile menu). */
.masthead .masthead__in .masthead__menu nav{padding:6px 10px;text-align:left;align-items:stretch;gap:0;width:300px}
.masthead .masthead__in .masthead__menu.masthead__menu nav a{display:flex;align-items:center;min-height:56px;
  padding:0 14px;font-size:18px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.12);white-space:normal}
.masthead .masthead__in .masthead__menu.masthead__menu nav a:last-child{border-bottom:0}
@media (max-width:760px){
  .masthead .masthead__in,.masthead .masthead__in .masthead__menu{position:static}
  .masthead .masthead__in .masthead__menu nav{left:0;right:0;top:100%;width:auto;min-width:0;border-radius:0;
    border-width:1px 0;padding:4px var(--gutter) 8px;max-height:calc(100dvh - 190px);overflow-y:auto}
  .masthead .masthead__in .masthead__menu.masthead__menu nav a{padding:0 2px}
}
/* Gary, 10-3: the top strip is the phone number alone, a little bigger (was 13px). */
.masthead .masthead__striprow .masthead__tel{font-size:16px}
/* Gary, 10-3: the small line is regular weight, not bold; bold pulled the eye off the big
   line. The doctor and legal headers keep a plain eyebrow, so it matches there too. */
.hero-int p.eyebrow,.c-intro p.eyebrow,.dr-hero p.eyebrow{font-weight:400}
.hero-int h1.eyebrow{margin:0 0 16px}
.c-intro h1.eyebrow{margin:0 0 14px}
body.single .hero-ink--int h1.eyebrow{grid-column:1/-1;color:#E3D3B3;margin:0 0 10px}
/* Gary, 10-3: one eyebrow colour on dark grounds. The single-page headers used a gold
   (#D9B36A) while every other header and dark section used cream (#E3D3B3, 6.7:1 against the
   brightest texture pixel). Cream everywhere now; light grounds keep --accent-text. */
.hero-int.hero-int--split .eyebrow,
body.single .hero-ink.hero-ink--int .hero-ink__copy::before{color:#E3D3B3}
body.single .hero-ink--int.hero-ink--h1line .hero-ink__copy::before{content:none}
.hero-int .hero-line,.c-intro .hero-line,body.single .hero-ink--int .hero-line{font-family:var(--display);
  font-weight:600;font-size:clamp(36px,4.2vw,54px);line-height:1.08;letter-spacing:.015em;color:#fff;
  text-wrap:balance}
.hero-int .hero-line{margin:0 0 .45em;max-width:16ch}
.c-intro .hero-line{margin:0 0 14px}
.c-intro--arc .hero-line{margin-bottom:12px}
body.single .hero-ink--int .hero-line{margin:0;max-width:16ch}
@media (max-width:860px){
  .hero-int--split .hero-line,body.single .hero-ink--int .hero-line{max-width:none}
}
/* Homepage, 900 px and under: these two photos sit in a 4:3 box, and a centered crop
   cut the top of Dr. Cox's head. */
@media (max-width:900px){
  body .fv__media img.fv__img--treat{object-position:50% 33%}
  body .injury__media img{object-position:50% 34%}
}

/* Section breaks on interior pages (Gary, 10-3, padding sweep). The space between the last
   content and the Reviews heading ran from 54px (Conditions) to 246px (Team) at laptop
   width, depending on which two paddings happened to meet: 80 on the singles, 88 on
   Contact, 108 on the doctor pages, 156 on Services, Who We Serve, Insights and the Patient
   Center. Now the section before Reviews ends flush and Reviews brings one fixed break:
   88px at laptop width, 56px on phones. The home page keeps its own full bands. */
body:not(.home) .section:not(.section--paper):not(.section--ink):has(+ .section.reviews){padding-bottom:0}
body:not(.home) .section.reviews.reviews{margin-top:0;padding-top:clamp(56px,6.5vw,88px)}
/* Doctor pages: the story starts as far under the breadcrumb band as the listing pages do.
   The Additional CSS rule that tightens this gap was written for the byline on the singles. */
body.single .crumb-band + .section.dr-body{padding-top:clamp(28px,3.2vw,44px)}
/* Legal pages and the Sitemap page: the copy started 123px under the breadcrumb band, against
   44px on the listing pages. And the Sitemap list's first heading kept its top margin. */
body .hero-int--split + .section{padding-top:clamp(36px,4.2vw,56px)}
body .rank-math-html-sitemap__section:first-child .rank-math-html-sitemap__title{margin-top:0}
/* Section headings that links land on (service pages, 10-4) stop clear of the fixed header. */
body h2[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
/* Author box at the end of an Insights article (Gary, 10-4). The photo frame is the Team
   card's, so the same zoom and offsets place the face. `body` and the element names lift
   these over the Additional CSS rule that sizes every paragraph in the article column. */
body .author-box{margin-top:clamp(40px,5vw,60px);padding:28px 0 0;border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:120px 1fr;grid-template-areas:"photo head" "photo body";
  column-gap:28px;row-gap:12px;align-items:start}
body .author-box__photo{grid-area:photo;position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:10px;
  background:radial-gradient(92% 72% at 50% 31%,#f4e7d6 0%,#eeddc9 54%,#e4d3ba 100%)}
body .author-box__photo img{position:absolute;display:block;background:none;max-width:none;width:auto;
  height:calc(var(--z,1)*100%);left:var(--l,0);top:var(--t,0)}
body .author-box__photo--flip img{transform:scaleX(-1)}
body .author-box__head{grid-area:head}
body .author-box p.eyebrow{margin:0 0 8px}
body .author-box p.author-box__name{font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(21px,2.2vw,25px);line-height:1.15;letter-spacing:.015em;margin:0 0 8px;text-wrap:balance}
body .author-box p.author-box__role{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);margin:0;line-height:1.5}
body .author-box__body{grid-area:body}
body .author-box__body p{font-size:16px;line-height:1.65;margin:0 0 12px;max-width:none}
body .author-box__links{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
body .author-box a.author-box__more,
body .author-box a.author-box__profile{font-weight:600;font-size:15px;color:var(--ink);text-underline-offset:5px}
@media (max-width:560px){
  body .author-box{grid-template-columns:84px 1fr;grid-template-areas:"photo head" "body body";
    column-gap:18px;row-gap:16px;align-items:center}
}

/* Trustindex widget inside the Reviews band: cards line up with the band's
   edges and sit clear of the heading row. Each card has 8px side padding;
   Trustindex sets the wrapper's margin to +8px on wide screens and -8px on
   narrow ones, so it is pinned at -8px to cancel the padding at every width. */
.reviews__widget{margin-top:clamp(28px,3.4vw,44px)}
.reviews .reviews__widget .ti-widget .ti-reviews-container-wrapper{margin-left:-8px!important;margin-right:-8px!important}