/* RheumWell theme: shared stylesheet. Loaded on every page. Page-specific rules live in contact.css. */
/* ===================== SELF-HOSTED FONTS =====================
   Variable fonts served from this theme. No third-party font CDN anywhere
   on the site (HIPAA: no visitor IP or page URL leaves the practice's host). */
@font-face {
  font-family:'Fraunces'; src:url('../fonts/Fraunces-VF.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Fraunces'; src:url('../fonts/Fraunces-Italic-VF.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face {
  font-family:'Source Sans 3'; src:url('../fonts/SourceSans3VF-Upright.otf.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Source Sans 3'; src:url('../fonts/SourceSans3VF-Italic.otf.woff2') format('woff2');
  font-weight:200 900; font-style:italic; font-display:swap;
}

/* =====================================================================
   DESIGN SYSTEM
   One grid, one left edge. Three backgrounds with meaning:
     cream       = the page
     warm-white  = slow-down bands (patient voice, first visit) + the form card
     ink (dark)  = the two anchors: testimonials and footer
   Three type voices:
     Fraunces upright = headings
     Fraunces italic  = the practice's voice: section markers, lead-ins, pull quotes
     Source Sans 3    = body and UI
   ===================================================================== */
:root {
  /* Terracotta in three grades. Brand terra fails AA as small text on cream (3.5:1)
     and as a fill under white text (3.7:1), so text and buttons use the darker grades. */
  --terra: #B87351;          /* decorative: stars, icons, rules, large display */
  --terra-text: #9C5F40;     /* text and links on cream: 4.8:1 */
  --terra-fill: #A36545;     /* button fill under white text: 4.7:1 */
  --terra-hover: #96573A;    /* hover for both: 5.3:1 */
  --terra-soft: #C8907A;     /* on ink: 4.7:1 */
  --terra-whisper: rgba(184,115,81,0.08);

  /* Sage system: echoes the logo green. Used only for the conditions band and the form success icon. */
  --sage-deep: #4F5F36;
  --sage-soft: #A3B585;
  --sage-whisper: rgba(107,127,74,0.08);
  --sage-tint: #E8ECDB;
  --logo-green: #82a034;   /* brand reference only; never a functional colour (aging eyes lose green first) */

  --cream: #FFF8E7;
  --cream-mid: #F5EDE1;
  --cream-deep: #EDE4D6;
  --warm-white: #FFFDF7;
  --white: #ffffff;

  --text: #3E2F28;
  --text-2: #5E504A;
  --text-3: #766A64;         /* small text on cream: 4.9:1. No lighter text token exists on purpose. */
  --border: #E4D9CE;
  --border-strong: #D3C5B6;

  --display: 'Fraunces', 'Lora', Georgia, serif;
  --body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;

  /* GRID: one container, 12 columns, 32px gutters */
  --wrap: 1200px;
  --gutter: 40px;
  --col-gap: 32px;

  /* VERTICAL RHYTHM */
  --s-section: clamp(64px, 8vw, 112px);
  --s-block: clamp(40px, 5vw, 64px);
  --header-h: 76px;

  --shadow-card: 0 1px 2px rgba(62,47,40,0.04), 0 24px 64px -24px rgba(62,47,40,0.22);
  --r-s: 4px; --r-m: 8px;
  --fast: 150ms ease;

  /* TYPE SCALE */
  --t-hero: clamp(2.75rem, 5.6vw, 4.5rem);
  --t-hero-lead: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-section: clamp(2rem, 3.2vw, 2.625rem);
  --t-quote: clamp(1.375rem, 2vw, 1.75rem);
  --t-pull: clamp(1.5rem, 2.2vw, 1.875rem);
  --t-h3: 1.25rem;
  --t-body: 1.125rem;
  --t-ui: 1rem;
  --t-small: 0.875rem;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* Global keyboard focus (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--terra); outline-offset:3px; border-radius:2px;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--text); color:var(--warm-white);
  padding:12px 20px; font-weight:600; text-decoration:none;
  border-radius:0 0 var(--r-s) 0;
}
.skip-link:focus { left:0; }
html { font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
[id] { scroll-margin-top:calc(var(--header-h) + 24px); }
body { font-family:var(--body); font-size:var(--t-body); line-height:1.6; color:var(--text); background:var(--cream); }
img { max-width:100%; display:block; }
a { color:inherit; }
h1, h2, h3, h4 { text-wrap:balance; font-family:var(--display); font-variation-settings:"opsz" 48, "SOFT" 50; }
p, li, blockquote, figcaption { text-wrap:pretty; }

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

/* ===================== LAYOUT PRIMITIVES ===================== */
.wrap { max-width:var(--wrap); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap); }
.section { padding-top:var(--s-section); padding-bottom:var(--s-section); }
/* Sections that follow one of the same background get a rule instead of a tone shift */
.section.ruled { padding-top:0; }
.section.ruled > .wrap { border-top:1px solid var(--border); padding-top:var(--s-section); }

/* Sidebar register: heading column stays put while a long list scrolls */
.split-side { grid-column:1 / span 4; align-self:start; position:sticky; top:calc(var(--header-h) + 40px); }
.split-main { grid-column:6 / -1; }

/* Section marker: the practice's voice, small italic. No numbers: the sections are not a sequence. */
.kicker {
  display:block; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.0625rem; color:var(--terra-text); letter-spacing:0.005em;
  margin-bottom:14px; line-height:1.3;
  font-variation-settings:"opsz" 24, "SOFT" 60;
}
.section-title {
  font-size:var(--t-section); font-weight:500; color:var(--text);
  letter-spacing:-0.022em; line-height:1.1; margin-bottom:16px;
  font-variation-settings:"opsz" 96, "SOFT" 30;
}

/* ===================== SHARED CONTROLS ===================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; font-family:var(--body); font-size:var(--t-ui);
  font-weight:600; text-decoration:none; border-radius:var(--r-s);
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color var(--fast), color var(--fast), border-color var(--fast);
  letter-spacing:0.01em; line-height:1.2; white-space:nowrap;
}
.btn-primary { background:var(--terra-fill); color:var(--white); border-color:var(--terra-fill); }
.btn-primary:hover { background:var(--terra-hover); border-color:var(--terra-hover); }
.btn-secondary { background:transparent; color:var(--terra-text); border-color:var(--terra-text); }
.btn-secondary:hover { background:var(--terra-whisper); color:var(--terra-hover); border-color:var(--terra-hover); }
.btn-light { background:var(--warm-white); color:var(--text); border-color:var(--warm-white); }
.btn-light:hover { background:var(--white); }
.btn-large { padding:16px 32px; font-size:1.0625rem; }
.phone-link { color:var(--terra-text); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--fast); white-space:nowrap; }
.phone-link:hover { border-bottom-color:var(--terra-text); }

/* In-text link (map, portal, forms). */
.text-link { color:var(--terra-text); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--fast); }
.text-link:hover { border-bottom-color:var(--terra-text); }

/* CTA row: button + "Or call" on one line */
.cta-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; }
.cta-row .cta-phone { display:inline-flex; align-items:center; gap:0.3em; min-height:48px; font-size:var(--t-ui); color:var(--text-2); }
.cta-row .phone-link { padding:10px 0; }

/* ===================== HEADER ===================== */
/* Utility bar removed: it rendered as an empty dark strip. When the patient portal URL
   exists, add the link to .header-utils, not a new bar. */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,248,231,0.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  position:relative; height:var(--header-h);
  display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.logo-link { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.logo-img { height:36px; width:auto; }
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a { font-size:var(--t-ui); font-weight:600; color:var(--text-2); text-decoration:none; transition:color var(--fast); line-height:1.25; white-space:nowrap; }
.nav-links a:hover { color:var(--text); }
/* Current page in the nav: ink, with a thin terracotta rule under it. */
.nav-links a[aria-current="page"] { color:var(--text); text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1.5px; text-decoration-color:var(--terra); }
.header-right { display:flex; align-items:center; gap:24px; }
.header-utils { display:flex; align-items:center; gap:18px; }
/* Phone pill: hangs under the appointment button, outside the nav row, so it costs no
   nav width. Hidden on phones, where the 44px phone icon in the row is the call target. */
.header-cta-wrap { position:relative; display:flex; }
.header-right { position:relative; }
.header-tongue {
  position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--cream); color:var(--text-2);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:5px 12px 5px 10px; font-size:0.75rem; font-weight:600; line-height:1.2; text-decoration:none;
  box-shadow:0 1px 2px rgba(62,47,40,0.06), 0 2px 6px rgba(62,47,40,0.04);
}
.tongue-icon { width:12px; height:12px; flex-shrink:0; color:var(--terra-text); }
.header-cta { padding:10px 18px; font-size:var(--t-small); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--text); }
.nav-toggle svg { width:24px; height:24px; }
.mobile-phone-icon { display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--terra-text); text-decoration:none; }
.mobile-phone-icon svg { width:22px; height:22px; }


/* Header utilities: Patient Portal text link sits where the phone number was */
.header-portal { font-size:var(--t-ui); font-weight:600; color:var(--text-2); text-decoration:none; white-space:nowrap; transition:color var(--fast); }
.header-portal:hover { color:var(--text); }
.tongue-phone { color:var(--terra-text); font-weight:700; }
.header-tongue:hover .tongue-phone { color:var(--terra-hover); }

/* ===================== MOBILE NAV ===================== */
.mobile-nav {
  visibility:hidden; position:fixed; top:0; left:0; right:0; bottom:0; z-index:102;
  background:rgba(62,47,40,0.3); opacity:0; transition:opacity 0.3s ease, visibility 0.3s;
  pointer-events:none;
}
.mobile-nav.open { visibility:visible; opacity:1; pointer-events:auto; }
.mobile-nav-panel {
  position:absolute; top:0; right:0; width:280px; height:100%;
  background:var(--cream); padding:80px 32px 40px;
  transform:translateX(100%); transition:transform 0.3s ease;
  box-shadow:-4px 0 24px rgba(62,47,40,0.1);
}
.mobile-nav.open .mobile-nav-panel { transform:translateX(0); }
.mobile-nav-close {
  position:absolute; top:16px; right:16px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:0;
}
.mobile-nav-close svg { width:24px; height:24px; color:var(--text); }
.mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:0; }
.mobile-nav-links li { border-bottom:1px solid var(--border); }
.mobile-nav-links a {
  display:block; padding:16px 0; font-size:var(--t-body); font-weight:600;
  color:var(--text); text-decoration:none; transition:color var(--fast);
}
.mobile-nav-links a:hover { color:var(--terra-text); }
.mobile-nav-links a[aria-current="page"] { color:var(--terra-text); }
.mobile-nav-meta { margin-top:28px; }
.mobile-nav-meta a { display:block; font-size:var(--t-ui); color:var(--text-2); text-decoration:none; margin-bottom:12px; }
.mobile-nav-cta { display:block; margin-top:24px; width:100%; }

/* ===================== HERO (statement register) ===================== */
.hero { padding-top:calc(var(--header-h) + 56px); padding-bottom:0; overflow:hidden; }
.hero-inner { align-items:center; }
.hero-content { grid-column:1 / span 6; padding-bottom:var(--s-block); }
.hero-kicker { margin-bottom:40px; }
.hero-headline { margin-bottom:28px; }
.hero-headline .l1 {
  display:block; font-family:var(--display); font-style:italic; font-weight:400;
  font-size:var(--t-hero-lead); color:var(--text-2); line-height:1.3;
  margin-bottom:12px; letter-spacing:-0.005em;
  font-variation-settings:"opsz" 48, "SOFT" 60;
}
.hero-headline .l2 {
  display:block; font-size:var(--t-hero); line-height:1.0;
  color:var(--text); font-weight:500; letter-spacing:-0.035em;
  font-variation-settings:"opsz" 144, "SOFT" 30;
}
.hero-sub { font-size:1.1875rem; line-height:1.5; color:var(--text-2); margin-bottom:40px; max-width:44ch; }
.hero-sub .l1, .hero-sub .l2 { display:block; }
.hero-sub .nowrap { white-space:nowrap; } /* 1.0.10: the answer starts its own line */
.hero-focus { font-size:var(--t-small); color:var(--text-3); margin-top:16px; }
.hero-proof {
  display:flex; flex-wrap:wrap; gap:20px 48px; align-items:flex-end;
  margin-top:48px; padding-top:24px; border-top:1px solid var(--border);
}
.hero-proof-stat { display:flex; flex-direction:column; gap:2px; }
.hero-proof-num {
  font-family:var(--display); font-size:1.75rem; font-weight:500;
  color:var(--text); line-height:1; letter-spacing:-0.01em;
  font-variation-settings:"opsz" 72, "SOFT" 30;
}
.hero-proof-num .stars { color:var(--terra); font-size:0.85em; margin-right:4px; position:relative; top:-2px; }
.hero-proof-label { font-size:var(--t-small); color:var(--text-3); }

/* The photo is a photograph, not a card: no radius, no shadow. It sits on the grid
   (columns 7 to 12) so its right edge lines up with the header button and the footer.
   4:3 at every width; the file is cut to the same frame, so nothing is cropped in the browser. */
.hero-figure { grid-column:7 / -1; margin:0; display:flex; flex-direction:column; }
.hero-img-wrap { aspect-ratio:4 / 3; overflow:hidden; background:var(--cream-mid); }
.hero-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* Lockup under the photo: who is in it, then Dr. Kromo's role */
.hero-caption { padding:16px 0 var(--s-block); line-height:1.4; }
.hero-caption .cap-name { display:block; font-size:var(--t-ui); font-weight:600; color:var(--text); }
.hero-caption .cap-role { display:block; font-size:var(--t-small); color:var(--text-3); }

/* ===================== BELIEVE (patient voice, slow-down band) ===================== */
.believe { background:var(--warm-white); }
.believe-grid { align-items:start; }
/* Patient voice, read in two beats: the line that answers the hero ("listened to and truly heard")
   is the large line; the rest of the review follows at reading size. Real quotation marks in the
   text, nothing hanging outside the left edge. */
.believe-quote {
  grid-column:1 / span 10;
  font-family:var(--display); font-style:italic; font-weight:400; color:var(--text);
  font-variation-settings:"opsz" 72, "SOFT" 80;
}
/* One size for the whole review; each sentence on its own line. The couplet that answers the
   hero is in ink, the two support lines in the secondary colour. Colour carries the hierarchy. */
.believe-quote p {
  font-size:clamp(1.375rem, 1.95vw, 1.75rem); line-height:1.45; letter-spacing:-0.008em;
  color:var(--text-2); margin:0 0 0.45em; text-wrap:pretty;
}
.believe-quote p.believe-lead { color:var(--text); margin-bottom:0.7em; }
.believe-quote p:last-child { margin-bottom:0; }
/* Attribution belongs to its quote: one line below it, on the same left edge. Same rule everywhere on the page. */
.believe-attr { grid-column:1 / span 10; margin-top:1.75rem; font-size:var(--t-small); color:var(--text-3); line-height:1.5; }
.believe-attr .attr-name { display:block; font-weight:600; color:var(--text-2); font-size:var(--t-ui); }
.attr-stars { color:var(--terra); letter-spacing:0.04em; margin-right:4px; font-size:0.75rem; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================== APPROACH (narrative with image) =====================
   One grid, two shared rows. Row 1 is the heading block (columns 1 to 6) and the pull quote
   (7 to 12); row 2 is the standfirst and paragraph (1 to 6) and the photo (7 to 12). Each row is
   as tall as its taller block and the shorter one stretches to it: the quote spreads its three
   lines to the heading's height, the text spreads its two blocks to the photo's height, and the
   photo fills the row when the text is taller (object-fit trims a few percent at its sides on
   narrow desktops). The four blocks are direct children in reading order; the grid places them. */
.approach-grid { row-gap:var(--s-block); align-items:stretch; grid-template-rows:auto auto; }
.approach-head { grid-column:1 / span 6; grid-row:1; }
.approach-body { font-size:var(--t-body); line-height:1.6; color:var(--text-2); max-width:56ch; }
/* The practice's aside, in the secondary ink so the title keeps the lead. Its size follows the
   section title (about 0.86 of it) so the two scale together and the first line never breaks. */
.approach-cherry {
  grid-column:7 / -1; grid-row:1; align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
  margin:calc(1.0625rem * 1.3 + 14px) 0 0; /* the kicker's height: the first line sits level with the title */
  font-family:var(--display); font-size:calc(var(--t-section) * 0.857);
  font-style:italic; font-weight:400; line-height:1.22; color:var(--text-2);
  letter-spacing:-0.015em;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.approach-cherry span { display:block; }
.approach-prose { grid-column:1 / span 6; grid-row:2; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
.approach-prose p { font-size:var(--t-body); line-height:1.6; color:var(--text-2); max-width:56ch; }
.approach-prose p + p { margin-top:18px; } /* two plain paragraphs since 1.0.7; the flex column spreads them further when the photo is taller */
.approach-prose .nowrap { white-space:nowrap; } /* the quoted line starts its own line as speech */
/* Standfirst: the lead sentence as its own short paragraph in the aside voice.
   Scoped under .approach-prose so it outranks the .approach-prose p rule above. */
.approach-prose .approach-prose-lead {
  font-family:var(--display); font-style:italic; font-weight:500; color:var(--text);
  font-size:1.3125rem; line-height:1.45; margin-bottom:18px;
  font-variation-settings:"opsz" 24, "SOFT" 60;
}
/* The photo is a photograph, not a card: square corners, like the hero */
.approach-img { grid-column:7 / -1; grid-row:2; align-self:stretch; overflow:hidden; background:var(--cream-mid); }
.approach-img picture { display:contents; }
.approach-img img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

/* ===================== CONDITIONS (the filter) =====================
   This section decides fit, for the practice and for the patient. The sentence is unchanged;
   it is set so the lead clause frames and the four conditions read as a scannable list.
   The only green band on the page: the logo's colour marks the one place a patient self-selects. */
.conditions { background:var(--sage-tint); }
.conditions .kicker { color:var(--sage-deep); }
.conditions-lead {
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap);
  align-items:start; font-weight:400; color:var(--text);
}
/* The clause is set exactly like every other section title; the list continues it at the same size. */
.conditions-clause {
  grid-column:1 / span 5;
  font-size:var(--t-section); font-weight:500; line-height:1.1; letter-spacing:-0.022em;
  font-variation-settings:"opsz" 96, "SOFT" 30;
  padding-top:20px; text-wrap:pretty;
}
.conditions-list { grid-column:7 / -1; display:block; list-style:none; }
/* Seven rows at 2rem: the list ends near where the five-line clause ends. At the title size it ran 300px past it.
   1.0.9: the rows are list items, no longer inside the h2, so they take the display face here. */
.conditions-item {
  display:block; padding:14px 0; border-top:1px solid rgba(62,47,40,0.18);
  font-family:var(--display);
  font-size:clamp(1.5rem, 2.2vw, 2rem); line-height:1.15; font-weight:500;
  letter-spacing:-0.022em; font-variation-settings:"opsz" 96, "SOFT" 30;
}
.conditions-item:last-child { border-bottom:1px solid rgba(62,47,40,0.18); }
.conditions-item .punct { color:var(--text-3); font-weight:400; }


/* ===================== EXPECT (sidebar register) ===================== */
.expect-side .section-title { margin-bottom:28px; }
.founder-quote {
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.25rem; line-height:1.5; color:var(--text-2);
  padding-top:24px; border-top:1px solid var(--border);
  font-variation-settings:"opsz" 48, "SOFT" 60;
}
.founder-attr { display:block; font-size:var(--t-small); color:var(--text-3); margin-top:10px; font-family:var(--body); font-style:normal; }
.expect-block { padding:28px 0; border-top:1px solid var(--border); }
.expect-block:first-child { padding-top:0; border-top:none; }
.expect-block h3 {
  font-size:1.375rem; font-weight:500; color:var(--text);
  margin-bottom:8px; line-height:1.25; letter-spacing:-0.01em; text-wrap:pretty;
  font-variation-settings:"opsz" 48, "SOFT" 30;
}
/* Reading measure: the full column is about 66 characters at 17px, inside the 45 to 75 range.
   Fewer, fuller lines than the old 58ch cap; pretty-wrap prevents one-word last lines. */
.expect-block p { font-size:1.0625rem; line-height:1.55; color:var(--text-2); max-width:68ch; text-wrap:pretty; }
.expect-scope { margin-top:12px; padding-top:36px; border-top:1px solid var(--border-strong); }
.expect-scope p { font-size:var(--t-body); line-height:1.6; color:var(--text-2); margin-bottom:12px; max-width:68ch; }
.expect-scope p:first-child { font-family:var(--display); font-style:italic; color:var(--text); font-size:1.25rem; }
.expect-scope p:last-child { margin-bottom:0; }
.expect-cta { margin-top:40px; }

/* ===================== TEAM (gallery) ===================== */
.team-header { margin-bottom:var(--s-block); }
.team-sub { font-size:var(--t-body); color:var(--text-2); }
.team-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 32px; } /* three across since 1.0.7 (Gene, Oct 25: T4) */
.team-card { text-align:left; }
.team-photo { width:220px; max-width:100%; aspect-ratio:3 / 4; border-radius:var(--r-s); margin-bottom:14px; overflow:hidden; background:var(--cream-mid); } /* 220 px from 901 px up; the phone rule sets 100% of its 88 px column */
.team-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; }
.team-card h3 { font-size:1.0625rem; font-weight:600; color:var(--text); margin-bottom:4px; line-height:1.3; text-wrap:pretty; }
.team-card p { font-size:0.9375rem; line-height:1.5; color:var(--text-2); }

/* ===================== TESTIMONIALS (dark anchor) ===================== */
.testimonials { background:var(--text); color:rgba(255,253,247,0.92); }
.testimonials .attr-stars { color:var(--terra-soft); }
.testimonials :focus-visible { outline-color:var(--terra-soft); }
.testimonials .kicker { color:var(--terra-soft); }
/* Heading in the practice's voice (upright, like every section title) on the left;
   the patient's voice (italic) on the right. Two voices, two columns, one row. */
.testimonials-head { grid-column:1 / span 5; }
.testimonials-header {
  font-size:var(--t-section); font-weight:500; font-style:normal;
  line-height:1.1; color:var(--warm-white); margin-bottom:16px;
  letter-spacing:-0.022em; font-variation-settings:"opsz" 96, "SOFT" 30;
}
.testimonials-sub { font-size:var(--t-body); line-height:1.55; color:rgba(255,253,247,0.72); max-width:38ch; }

/* First line of the quote sits level with the first line of the title, not with the kicker above it:
   kicker line (1.0625rem x 1.3) + its 14px margin, plus 4px for the smaller x-height of the quote. */
.testimonial-featured { grid-column:7 / -1; padding-top:calc(1.0625rem * 1.3 + 14px + 4px); }
.testimonial-featured blockquote {
  font-family:var(--display); font-size:var(--t-quote);
  font-style:italic; font-weight:400; line-height:1.45; color:var(--warm-white);
  letter-spacing:-0.005em; font-variation-settings:"opsz" 72, "SOFT" 80;
}
.t-attr { margin-top:1.5rem; font-size:var(--t-small); color:rgba(255,253,247,0.65); line-height:1.5; }
.t-attr .attr-name { display:block; color:rgba(255,253,247,0.85); font-weight:600; font-size:var(--t-ui); }

.testimonial-grid {
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px;
  margin-top:var(--s-block); padding:var(--s-block) 0; border-top:1px solid rgba(255,253,247,0.14);
}
.testimonial-card blockquote {
  font-family:var(--display); font-size:1.125rem; line-height:1.5;
  color:var(--warm-white); font-style:italic; font-weight:400; margin:0;
  font-variation-settings:"opsz" 48, "SOFT" 80;
}
.testimonial-card .t-attr { margin-top:1.5rem; }
.testimonials-footer {
  grid-column:1 / -1;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--s-block); border-top:1px solid rgba(255,253,247,0.14);
  gap:24px; flex-wrap:wrap;
}
.testimonials-proof { font-size:var(--t-ui); color:rgba(255,253,247,0.7); }
.testimonials-proof strong { color:var(--warm-white); font-weight:600; }

/* ===================== YOUR FIRST VISIT (sidebar register, slow-down band) ===================== */
.first-visit { background:var(--warm-white); }
.first-visit-time {
  font-family:var(--display); font-style:italic; font-size:1.3125rem; line-height:1.4;
  color:var(--text-2); margin-top:4px;
  font-variation-settings:"opsz" 48, "SOFT" 60;
}
.first-visit-narrative { max-width:60ch; }
.first-visit-narrative p { font-size:var(--t-body); line-height:1.65; color:var(--text-2); margin-bottom:24px; }
/* The first paragraph is the entry point: larger, in ink, so the eye lands on "We start by listening." */
.first-visit-narrative p:first-child { font-size:1.3125rem; line-height:1.5; color:var(--text); margin-bottom:28px; }
.first-visit-narrative p:last-child { margin-bottom:0; }
.first-visit-closer {
  margin-top:40px; padding-top:28px; border-top:1px solid var(--border);
  font-family:var(--display); font-size:var(--t-pull); font-style:italic;
  font-weight:400; color:var(--text); line-height:1.3; letter-spacing:-0.01em;
  font-variation-settings:"opsz" 96, "SOFT" 60;
}
.first-visit-closer span { display:block; max-width:24ch; }
.first-visit-closer .nowrap { display:inline; white-space:nowrap; } /* the second clause starts its own line */
.first-visit-cta { margin-top:32px; }

/* ===================== FAQ (sidebar register) ===================== */
.faq-grid { display:grid; gap:0; border-top:1px solid var(--border); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  font-weight:600; font-size:1.0625rem; color:var(--text);
  padding:18px 44px 18px 0; margin:0;
  cursor:pointer; position:relative; transition:color var(--fast);
  -webkit-user-select:none; user-select:none; line-height:1.4;
  background:none; border:none; appearance:none;
  width:100%; text-align:left; font-family:inherit; display:block;
}
.faq-q:hover { color:var(--terra-text); }
.faq-q:focus-visible { outline:2px solid var(--terra); outline-offset:4px; border-radius:2px; }
.faq-q::after {
  content:''; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:20px; height:20px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%23B87351' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
  transition:transform 0.3s ease;
}
.faq-item.open .faq-q { color:var(--terra-text); }
.faq-item.open .faq-q::after { transform:translateY(-50%) rotate(45deg); }
.faq-a-wrap { max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
.faq-item.open .faq-a-wrap { max-height:500px; }
.faq-a { font-size:var(--t-ui); line-height:1.6; color:var(--text-2); padding:0 44px 20px 0; max-width:66ch; } /* 66ch: fewest stub last lines across all 15 answers at 1440 */

/* ===================== FORM (action register) ===================== */
.form-side { grid-column:1 / span 5; }
.form-main { grid-column:7 / -1; }
.form-header p { font-size:var(--t-body); color:var(--text-2); max-width:40ch; }
.form-emergency { font-size:var(--t-small); color:var(--text-3); margin-top:12px; line-height:1.6; }

.form-next { margin-top:var(--s-block); padding-top:28px; border-top:1px solid var(--border); }
.form-next-label {
  font-family:var(--display); font-style:italic; font-size:1.125rem;
  color:var(--text); margin:0 0 16px; font-variation-settings:"opsz" 24, "SOFT" 60;
}
.form-next-steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; counter-reset:step; }
.form-next-steps li { display:flex; gap:14px; align-items:flex-start; font-size:var(--t-ui); line-height:1.5; color:var(--text-2); counter-increment:step; }
/* The numeral is drawn by CSS, so assistive tech and copy-paste get the list once, not "1. 1" */
.form-next-steps li::before {
  content:counter(step); flex-shrink:0; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--terra-text); color:var(--terra-text);
  font-size:0.75rem; font-weight:700; line-height:22px; text-align:center; margin-top:1px;
}
.form-emergency-after { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
.form-box {
  background:var(--warm-white);
  padding:40px 40px 32px;
  border-radius:var(--r-m);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  position:relative;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:var(--t-ui); font-weight:600; color:var(--text); margin-bottom:6px; }
.form-group .opt { color:var(--text-3); font-weight:400; }
.form-field {
  width:100%; padding:12px 14px; font-family:var(--body); font-size:var(--t-body);
  border:1px solid var(--border-strong); border-radius:var(--r-s); background:var(--white);
  color:var(--text); transition:border-color var(--fast), box-shadow var(--fast); line-height:1.4;
}
.form-field::placeholder { color:var(--text-3); }
.form-field:focus { outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(184,115,81,0.14); }
.form-field.field-error { border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,0.08); }
.form-textarea { min-height:120px; resize:vertical; }
.form-helper { font-size:var(--t-small); color:var(--text-3); margin-top:6px; }
.form-error-msg { font-size:var(--t-small); color:#c0392b; margin-top:4px; display:none; }
.form-error-msg.visible { display:block; }
.form-field-consent { font-size:var(--t-small); color:var(--text-3); margin-top:6px; line-height:1.5; }
.form-submit { margin-top:8px; }
.form-submit .btn { width:100%; }
.form-submit .btn:disabled { opacity:0.65; cursor:not-allowed; }
.form-post-button { margin-top:16px; }
.form-ops { font-size:var(--t-small); color:var(--text-2); line-height:1.6; }
.form-legal { font-size:var(--t-small); color:var(--text-2); line-height:1.5; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.form-legal a { color:var(--text-2); text-decoration:underline; text-underline-offset:2px; }
.form-caregiver { font-size:var(--t-small); color:var(--text-2); font-style:italic; line-height:1.5; margin-bottom:20px; }
.form-success { display:none; text-align:center; padding:40px 24px; }
.form-success.visible { display:block; }
.form-success-icon {
  width:56px; height:56px; border-radius:50%; background:var(--sage-whisper);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  border:1px solid var(--sage-soft);
}
.form-success-icon svg { stroke:var(--sage-deep); }
.form-success h3 { font-size:var(--t-h3); font-weight:400; font-style:italic; color:var(--text); margin-bottom:12px; }
.form-success p { font-size:var(--t-body); color:var(--text-2); line-height:1.6; max-width:36ch; margin:0 auto 8px; }
.form-submit-error {
  display:none; background:#fdf2f0; border:1px solid #e8bbb4; border-radius:var(--r-s);
  padding:14px 16px; font-size:var(--t-small); color:#8b2c20; text-align:center;
  margin-bottom:16px; line-height:1.5;
}
.form-submit-error.visible { display:block; }

/* ===================== FOOTER (dark anchor, with the closing line as its head) ===================== */
.footer { background:var(--text); color:rgba(255,255,255,0.7); }
.footer :focus-visible { outline-color:var(--terra-soft); }
.footer-close {
  display:flex; justify-content:space-between; align-items:center; gap:24px 40px; flex-wrap:wrap;
  padding:var(--s-block) 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-closing {
  font-family:var(--display); font-size:var(--t-pull); font-style:italic;
  font-weight:400; color:var(--warm-white); line-height:1.3; letter-spacing:-0.01em;
  font-variation-settings:"opsz" 96, "SOFT" 70;
}
.footer-close-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-call { color:var(--terra-soft); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--fast); white-space:nowrap; }
.footer-call:hover { border-bottom-color:var(--terra-soft); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:48px 0 40px; }
.footer-brand .logo-footer-link { display:inline-block; }
.footer-brand .logo-footer-img { height:28px; width:auto; opacity:0.85; }
.footer-brand p { font-size:var(--t-ui); line-height:1.6; margin-top:14px; }
.footer-brand a { color:rgba(255,255,255,0.7); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.2); }
.footer-brand a:hover { color:var(--white); }
.footer-hours { margin-top:16px; font-size:var(--t-ui); line-height:1.6; color:rgba(255,255,255,0.62); }
.footer h3 { font-family:var(--body); font-size:var(--t-small); font-weight:600; color:rgba(255,255,255,0.62); margin-bottom:14px; }
.footer ul { list-style:none; }
.footer li { font-size:var(--t-ui); padding:4px 0; }
.footer li a { text-decoration:none; transition:color var(--fast); }
.footer li a:hover { color:var(--white); }
.footer-espanol { font-family:var(--display); font-style:italic; font-size:var(--t-ui); color:rgba(255,255,255,0.7); line-height:1.5; }
.footer-espanol-icon { display:inline-flex; align-items:center; gap:6px; }
.footer-espanol-icon svg { width:16px; height:16px; flex-shrink:0; opacity:0.6; }
.footer-emergency { padding:20px 0; border-top:1px solid rgba(255,255,255,0.1); font-size:var(--t-small); color:rgba(255,255,255,0.62); }
.footer-bottom {
  padding:20px 0 28px; border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap;
  font-size:var(--t-small); color:rgba(255,255,255,0.62);
}
.footer-legal { display:flex; flex-wrap:wrap; gap:8px 16px; }
.footer-legal a { color:rgba(255,255,255,0.62); text-decoration:none; transition:color var(--fast); padding:2px 0; }
.footer-legal a:hover { color:var(--white); }

/* ===================== INTERIOR PAGES ===================== */
.page-hero { padding:140px 40px 48px; background:var(--cream); border-bottom:1px solid var(--border); }
.page-hero-inner { max-width:720px; margin:0 auto; }
.page-hero .section-title { margin-bottom:8px; }
.page-hero .page-updated { font-size:var(--t-small); color:var(--text-3); }
.page-body { padding:60px 40px 100px; background:var(--warm-white); }
.page-body-inner { max-width:720px; margin:0 auto; }
.page-body h2 { font-family:var(--display); font-size:var(--t-h3); font-weight:600; color:var(--text); margin:40px 0 12px; line-height:1.3; }
.page-body h2:first-child { margin-top:0; }
.page-body h3 { font-size:var(--t-body); font-weight:700; color:var(--text); margin:28px 0 8px; line-height:1.3; }
.page-body p { font-size:var(--t-ui); line-height:1.7; color:var(--text-2); margin-bottom:16px; }
.page-body ul { margin:0 0 16px 24px; padding:0; }
.page-body li { font-size:var(--t-ui); line-height:1.7; color:var(--text-2); margin-bottom:6px; }
.page-body a { color:var(--terra-text); text-decoration:underline; text-underline-offset:2px; }
.page-body a:hover { color:var(--terra-hover); }
.page-body .contact-block { margin:32px 0; padding:24px 28px; background:var(--cream); border-radius:var(--r-m); border-left:3px solid var(--terra-soft); }
.page-body .contact-block p { margin-bottom:6px; }
.page-body .contact-block p:last-child { margin-bottom:0; }
.page-body .lang-taglines { margin:24px 0 8px; }
.page-body .lang-taglines h3 { font-family:var(--body); font-size:var(--t-ui); font-weight:700; color:var(--text); margin:28px 0 6px; }
/* Notice of Availability taglines: 20-point sans serif minimum (45 CFR 92.11). Do not reduce. */
.page-body .lang-taglines p { font-family:var(--body); font-size:20pt; line-height:1.4; color:var(--text); margin-bottom:8px; }
.page-body .lang-taglines [dir="rtl"] { text-align:right; }
.page-body .npp-header { font-weight:700; color:var(--text); }
.page-body .legal-note { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); font-size:var(--t-small); color:var(--text-3); font-style:italic; }

/* ===================== STICKY MOBILE BAR ===================== */
.sticky-bar {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:98;
  background:var(--cream); border-top:1px solid var(--border);
  padding:10px 20px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(62,47,40,0.08);
  transform:translateY(100%); transition:transform 0.3s ease;
}
.sticky-bar.visible { transform:translateY(0); }
.sticky-bar-inner { display:flex; gap:10px; max-width:var(--wrap); margin:0 auto; }
.sticky-bar-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 12px; border-radius:var(--r-s);
  font-family:var(--body); font-size:0.9375rem; font-weight:600;
  text-decoration:none; min-height:48px; white-space:nowrap;
}
.sticky-bar-call { flex:0 0 auto; padding:12px 22px; }
.sticky-bar-btn svg { width:18px; height:18px; flex-shrink:0; }
.sticky-bar-call { background:var(--terra-fill); color:var(--white); }
.sticky-bar-call:hover { background:var(--terra-hover); }
.sticky-bar-book { background:var(--white); color:var(--terra-text); border:1.5px solid var(--terra-text); }
.sticky-bar-book:hover { background:var(--terra-whisper); }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1100px) {
  .nav-links { gap:20px; }
  .header-right { gap:16px; }
  .hero-content { grid-column:1 / span 6; }
  .believe-quote { grid-column:1 / span 10; }
  .split-side { grid-column:1 / span 4; }
  .split-main { grid-column:5 / -1; }
  .form-side { grid-column:1 / span 5; }
  .form-main { grid-column:6 / -1; }
  .team-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px 24px; }
}

@media (max-width:900px) {
  :root { --gutter:20px; --header-h:64px; --col-gap:16px; } /* 1.0.7: eleven 32 px gaps forced a 352 px floor and a 12 px sideways scroll on 360 px phones; every grid child is full width here, so the smaller gap changes nothing visible */
  .header-inner { gap:12px; }
  .logo-img { height:30px; }
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  .header-utils { display:none; }
  .header-cta { display:none; }
  .header-cta-wrap { position:static; }
  .header-tongue { display:none; } /* the 44px phone icon in the row is the call target on phones */
  .mobile-phone-icon { display:block; }

  .hero { padding-top:calc(var(--header-h) + 36px); }
  .hero-content { grid-column:1 / -1; padding-bottom:0; }
  .hero-kicker { margin-bottom:28px; }
  .hero-sub { margin-bottom:32px; }
  .hero-proof { margin-top:36px; padding-top:20px; gap:16px 36px; }
  .hero-figure { grid-column:1 / -1; margin:var(--s-block) calc(-1 * var(--gutter)) 0; }
  .hero-img-wrap { aspect-ratio:4 / 3; }
  .hero-caption { padding:12px var(--gutter) var(--s-block); }

  .believe-quote { grid-column:1 / -1; }
  .believe-lead br { display:none; } /* the couplet break only works at desktop measure */
  .believe-attr { grid-column:1 / -1; }

  .approach-grid { grid-template-rows:none; }
  .approach-head, .approach-cherry, .approach-img, .approach-prose { grid-column:1 / -1; grid-row:auto; }
  .approach-cherry { margin-top:0; display:block; font-size:var(--t-pull); line-height:1.3; color:var(--text); }
  .approach-img { aspect-ratio:4 / 3; }
  .approach-prose { display:block; }

  .conditions-clause { grid-column:1 / -1; padding-top:0; margin-bottom:28px; }
  .conditions-list { grid-column:1 / -1; }
  .conditions-item { padding:12px 0; }

  .split-side { grid-column:1 / -1; position:static; margin-bottom:36px; }
  .split-main { grid-column:1 / -1; }
  .founder-quote { max-width:40ch; }

  .team-grid { grid-template-columns:1fr; gap:20px; }
  .team-card { display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:16px; align-items:center; }
  .team-photo { grid-row:1 / span 2; width:100%; aspect-ratio:3 / 4; margin-bottom:0; } /* same ratio as the files: the 1:1 frame cut the chins (caught on staging Oct 24) */
  .team-card h3 { align-self:end; }
  .team-card p { align-self:start; }

  .testimonials-head { grid-column:1 / -1; margin-bottom:32px; }
  .testimonial-featured { grid-column:1 / -1; padding-top:0; }
  .testimonial-grid { grid-template-columns:1fr; gap:28px; }
  .testimonials-footer { flex-direction:column; align-items:flex-start; gap:18px; }

  .form-side { grid-column:1 / -1; margin-bottom:var(--s-block); }
  .form-main { grid-column:1 / -1; }
  .form-box { padding:28px 22px 24px; }
  .form-row { grid-template-columns:1fr; gap:0; }

  .footer-close { flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px 28px; }
  .footer-brand { grid-column:1 / -1; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); }
  .footer-espanol-col { grid-column:1 / -1; padding-top:4px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }

  .sticky-bar { display:block; }
  body.home { padding-bottom:72px; } /* room for the sticky bar, which is front page only */

  .page-hero { padding:100px 20px 36px; }
  .page-body { padding:40px 20px 70px; }
}

@media (max-width:480px) {
  .form-box { padding:24px 18px 20px; }
  .cta-row .btn { width:100%; }
}