/* Sidney Sound & Hearing Services — shared stylesheet
   Tokens and component values extracted from the WordPress/Bricks draft
   (see design-tokens/tokens.css). Decisions on top of the extraction are
   noted inline where they replace a draft value. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---------- Tokens ---------- */
:root {
  /* Palette — names kept identical to the draft's color-palettes.min.css
     so the build stays greppable against the extraction (decision: item 9). */
  --primary: #a358a3;
  --primary-mid: #be8abe;
  --primary-light: #f5eef5;
  --primary-iconbk: #ecddec;
  --accent: #e53e74;
  --accent-dark: #b7315c;
  --accent-light: #fcebf1;
  --accent-medium: #f4b1c7;
  --text-dark: #333333;
  --text-mid: #666b73;
  --text-soft: #6B7280;
  --border: #E5E7EB;
  --chip-bg: #F3F4F6;
  --neutral-bg: #F8FAFF;
  --review-gold: #ffd64f;
  --dark-bgd: #301a30;
  /* Draft names this "--2accent" — not a legal CSS custom-property ident
     (can't start with a digit), so it's renamed --accent-2 here. */
  --accent-2: #5a90aa;

  /* Light band, standardized (decision: item 4 / item 13) — the draft's
     rgba(235,241,250,.37) and #F5F7FC blue tints were Remark residue. */
  --light-band: #F9FAFB;

  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius-card: 12px;

  --shadow-card-hover: 0 8px 24px 0 rgba(26, 43, 74, 0.10);
  --shadow-btn-hover: 0 4px 12px 0 rgba(26, 43, 74, 0.18);
  --shadow-panel: 0 8px 28px 0 hsla(0, 0%, 0%, 0.09);
  --shadow-header-scrolled: 0 2px 12px 0 rgba(26, 43, 74, 0.08);
}

@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;
  }
}

/* ---------- Base typography ---------- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-dark);
  background: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
}

a { color: var(--primary); font-weight: 500; }

/* Page H1: 35px everywhere except the Home hero (45px — decision: item 2). */
.h1 { font-size: 35px; }
.h1--home { font-size: 45px; }
/* Measured on Madisonville/Cleveland heroes (untagged h3 in the draft,
   promoted to h1 for our heading-hierarchy fix) — smaller than the
   standard 35px page H1. */
.h1--location { font-size: 28.8px; line-height: 1.2; }
/* Blog post title — measured on the draft's article template (WP prose
   type scale, distinct from the page-builder's .h1): 38.4px/46.08px. */
.h1--article { font-size: 38.4px; line-height: 1.2; }

/* Blog article body subheadings — measured on the same template: 33.6px.
   Was rendered as .h3 (18px) in the build, a large miss (TOKEN-AUDIT.md
   flagged this context as unverified; now confirmed and fixed). */
.h2--article { font-size: 33.6px; line-height: 1.2; font-weight: 700; color: var(--text-dark); }

/* Measured against the draft (DIFF-about.md): every section-heading
   instance came back 36px/1.2, not the 25px the earlier type-ramp table
   implied. That table was ranking a different heading level. */
.h2 { font-size: 36px; line-height: 1.2; }
/* Measured on 2 instances (Hearing Aids style-card title, brand-card
   title): 18px, not the 20px the type-ramp table implied — same root
   cause as the H2 bug. Not yet re-verified against every .h3 context
   (blog subheadings, FAQ category headers) — see TOKEN-AUDIT.md. */
.h3 { font-size: 18px; }
.h4 { font-size: 18px; }

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
  margin-bottom: 10px;
}
/* Hero-only treatment: pill badge, not plain text (decision: item 5 fix). */
.eyebrow--pill {
  display: inline-block;
  background: var(--accent-light);
  padding: 2px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Interior-page hero eyebrow: plain gray text, no dash (COMPONENTS.md §1a).
   Distinct from .eyebrow (section eyebrow, pink+dash) and .eyebrow--pill
   (Home hero only, §1b). */
.eyebrow--hero {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-soft);
  margin-bottom: 10px;
}

/* Purple CTA band eyebrow — a 4th role, measured on About's "Come meet us
   in person" band: accent-medium, centered, NO dash (unlike .eyebrow). */
.eyebrow--cta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent-medium);
  text-align: center;
  margin-bottom: 10px;
}

/* Was 15px/text-mid, inferred from a ranking-table entry. Measured 3/3
   wrong against real hero-intro instances (Hearing Aids, Contact, Hearing
   Testing) — every one is 16px/text-dark. Corrected globally. */
.lead { font-size: 16px; color: var(--text-dark); }
.text-soft { color: var(--text-soft); }

/* Half-height text marker (COMPONENTS.md §9). */
.highlight {
  background: linear-gradient(to bottom, transparent 50%, rgba(229, 62, 116, .3) 50%);
  padding: 0 4px;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 1000;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* WCAG AA needs the ring itself to meet 3:1 against its surroundings;
   the dark footer needs a lighter ring than the accent pink provides. */
.site-footer :focus-visible {
  outline-color: #fff;
}

/* ---------- Layout ---------- */
/* Hybrid container widths (decision: item 1). Reproduces the draft's
   percentage system at every width up to 1530px, then caps at the
   brief's pixel figures instead of growing unbounded on wide monitors. */
.container {
  width: 75%;
  max-width: 1148px;
  margin-inline: auto;
}
.container-wide {
  width: 90%;
  max-width: 1377px;
  margin-inline: auto;
}

section { width: 100%; }

/* 60/60 vertical rhythm, the draft's dominant pattern (decision: item 15). */
.section { padding-block: 60px; }
.section--tight { padding-block: 30px; background: var(--primary-light); }
.section--loose { padding-block: 100px; }

.bg-light { background: var(--light-band); }
.bg-primary-light { background: var(--primary-light); }
.bg-primary { background: var(--primary); color: #fff; }
.bg-primary h2, .bg-primary h3 { color: #fff; }

/* Base hero: solid fallback. The draft uses a different gradient per page
   (DESIGN-SYSTEM.md §6), so each page sets background-image inline. */
.hero { background: var(--primary-light); }
.hero--home { background-image: linear-gradient(300deg, var(--accent-medium) 10%, var(--primary-light)); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  transition: background-color .2s, box-shadow .2s;
}
.site-header.is-scrolled {
  background: var(--neutral-bg);
  box-shadow: var(--shadow-header-scrolled);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}
.nav-logo img { height: 56px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  transition: color .2s ease;
}
.nav-links > li > a:hover,
.site-header.is-scrolled .nav-links > li > a:hover { color: var(--primary); }
.nav-caret { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-links > li:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-panel);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-links > li:hover .nav-dropdown,
.nav-links > li:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  transition: background-color .35s ease;
}
.nav-dropdown a:hover { background: hsl(0, 0%, 95%); }
.nav-dropdown .drop-ico {
  width: 32px; height: 32px;
  border-radius: 12px;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-dropdown .drop-ico svg { width: 16px; height: 16px; color: var(--primary); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-hamburger svg { width: 26px; height: 26px; }
.nav-hamburger .icon-close { display: none; }
.nav-hamburger[aria-expanded="true"] .icon-open { display: none; }
.nav-hamburger[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Buttons ----------
   Every value below is measured (COMPONENTS.md / DIFF-*.md), not
   averaged or inferred. The base .btn used to be an unmatched 16px/10-30
   guess; it's now itself a measured value (Home hero "Book a
   Consultation" + all "Visit This Office" office-card buttons, 8+
   confirmed instances at 14px/10px 30px), so anything that legitimately
   falls through to the base class still lands on a real number. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
/* Size variants below are self-contained (explicit font-size) so they
   don't drift if the base font-size ever changes again. */
.btn-lg { font-size: 16px; padding: 16px 36px; }   /* About hero button — measured */
.btn-sm { font-size: 16px; padding: 15px 25px; }   /* About "Schedule With..." — measured */
/* Confirmed 4/4 independent instances: Hearing Testing, Tinnitus,
   Services, Hearing Aids hero buttons all measure 15px/16px 32px. */
.btn-hero { font-size: 15px; padding: 16px 32px; }
/* Purple CTA band button — confirmed 8/8 instances (Home, About, Hearing
   Aids, Hearing Testing, Tinnitus, Services, Madisonville, Cleveland):
   16px font, 16px 32px padding. Distinct from .btn-hero despite the same
   padding — this one keeps the base 16px font, not 15px. */
.btn-cta { font-size: 16px; padding: 16px 32px; }
/* Mid-body inline CTA, confirmed 2/2 (Hearing Aids "Schedule a
   Consultation", Tinnitus "Schedule a Tinnitus Evaluation"). */
.btn-md { font-size: 14px; padding: 15px 25px; }
/* Small pill CTA, confirmed 2/2 (Resources sidebar "Subscribe" and
   "Contact Us"). */
.btn-pill { font-size: 14px; padding: 7px 14px; }
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}
.btn-secondary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn-secondary:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
}
/* Hero ghost button — confirmed 4/4 instances (Hearing Aids, Hearing
   Testing, Tinnitus, Services): draft never uses brand purple here, only
   a muted neutral border (rgb(107,114,128), tinted to the hero's own
   background) with dark-gray text. */
.btn-secondary.btn-hero {
  border-color: rgba(107, 114, 128, .35);
  color: #333;
}
.btn-secondary.btn-hero:hover {
  background: rgba(107, 114, 128, .08);
}
/* "Meet the Team" hero button (Home): inset ring instead of a real
   border. Values baked in directly rather than as a variant class —
   single confirmed instance, asymmetric padding, own border-radius
   (8px, not the pill shape every other button uses). */
.btn-tertiary {
  background: transparent;
  border-color: transparent;
  color: var(--text-dark);
  box-shadow: inset 0 0 0 2px var(--accent-light);
  font-size: 15px;
  padding: 15px 15px 15px 17px;
  border-radius: 8px;
}
.btn-tertiary:hover {
  background: var(--accent);
  color: var(--accent-light);
  box-shadow: var(--shadow-panel);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dark);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
/* Transparent bg, accent-colored text, no visible border — confirmed
   1 instance (Services "Verify My Insurance" / build's "See Insurance
   Details"). Pair with .btn-md for that instance's size. */
.btn-link-accent {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}
.btn-link-accent:hover { color: var(--accent-dark); }
/* White bg / accent text, for buttons that sit on a photo or colored
   background — confirmed 1 instance (Home "Explore hearing aids",
   voices-fullbleed section). Self-contained since it's single-use. */
.btn-inverse {
  background: #fff;
  color: var(--accent);
  font-size: 14px;
  padding: 15px 30px;
}
.btn-inverse:hover { background: var(--accent-light); }
/* Sitewide header "Request Appointment" button — confirmed on every
   sourced page (Home, About, Hearing Aids, Contact, Hearing Testing,
   Tinnitus, Services, Resources, Madisonville, Cleveland): 15px font,
   15px 30px padding. Was previously falling through to the base class. */
.btn-nav { font-size: 15px; padding: 15px 30px; }
/* Contact page sidebar "Get Directions" mini-button — measured on the
   draft's Contact page (light-purple pill, 8px radius, not the site's
   usual full pill shape): 14px font, 7px 14px padding. */
.btn-directions {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 8px;
}
.btn-directions:hover { background: var(--primary-iconbk); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Cards ----------
   Standardized on the draft's "transparent" variant everywhere (decision:
   item 8). The bordered-at-rest variant (visible 1px border, hover
   border-width: .1px) is dropped — see build note for where it used to
   render. */
/* Padding measured from the draft's actual per-child margin recipe (icon
   and heading both get margin: 25px 0 0 25px; body text gets 15px 25px
   25px), not a padding property at all — confirmed on 2 independent card
   groups (Home "Why Sidney Sound", Home "What We Offer"). 25px is the
   flattened equivalent; was 32px, never independently measured. */
.card {
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  padding: 25px;
  background: transparent;
  transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease, border-width .25s ease;
}
.card:hover {
  border-width: 2px;
  border-color: var(--accent);
  background: #fff;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--primary-iconbk);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card-icon svg { width: 26px; height: 26px; color: var(--primary); }
/* Icon-chip variant used on cards that sit on a white section (accent tint
   instead of the primary/purple tint — matches the draft's own split). */
.card-icon--accent { background: var(--accent-light); }
.card-icon--accent svg { color: var(--accent); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--text-mid); margin-bottom: 12px; }
.card-cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  transition: transform .2s ease, letter-spacing .2s ease;
}
.card-cta:hover { transform: translateX(4px); letter-spacing: 1px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* ---------- Journey timeline ---------- */
.timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 12%;
  width: 76%;
  height: 2px;
  background: var(--accent);
  opacity: .3;
  z-index: 0;
}
.timeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.timeline-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgb(from var(--accent) r g b / 0.3);
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.timeline-step h4 { font-size: 16px; margin-bottom: 6px; }

/* ---------- Compact checklist row (COMPONENTS.md §2a) ----------
   Small inline icon, no divider, tight stacking — for short benefit lists
   sitting beside other content. NOT the same component as .vlist-row
   (§2b) — different gap, no border, no big badge. */
.icon-row-list { display: flex; flex-direction: column; }
.icon-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.icon-row:last-child { margin-bottom: 0; }
/* Pink circle chip behind the icon — measured from .brxe-tsfdug .icon:
   background rgb(252,235,241) = accent-light, border-radius 20px,
   icon color rgb(229,62,116) = accent. */
.icon-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 25px;
  border-radius: 20px;
  background: var(--accent-light);
  flex-shrink: 0;
  margin-top: 1px;
}
.icon-row svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.icon-row h3, .icon-row h4 { font-size: 16px; margin-bottom: 2px; }
.icon-row p { font-size: 14px; color: var(--text-mid); }

/* ---------- Vertical numbered/divider list (COMPONENTS.md §2b) ----------
   Heavier than .icon-row: 52px circular badge, full-width divider rows.
   Shares its row/divider shape with .faq-row but adds a number badge —
   used for step-by-step process content, not Q&A. */
.vlist { max-width: 860px; margin-inline: auto; }
.vlist-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
}
.vlist-row:last-child { border-bottom: 0; }
.vlist-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vlist-row h3, .vlist-row h4 { font-size: 17px; margin-bottom: 6px; }
.vlist-row p { font-size: 14px; color: var(--text-mid); }
/* Lighter numbered-divider variant (COMPONENTS.md §21) — same row/divider
   recipe as .vlist-row, but a plain numeral instead of a 52px circle
   badge. Measured on Hearing Testing's "Your Visit". */
.vlist-num--plain {
  width: auto; height: auto;
  border-radius: 0;
  background: transparent;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

/* ---------- Blog author byline + bio box (COMPONENTS.md §17) ----------
   Measured on the draft's per-post template. Byline sits between the
   title and featured image; bio box sits at the end of the article. */
.blog-byline { margin-top: 20px; }
.blog-byline .name { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.blog-byline .cred { font-size: 13px; color: var(--text-soft); }

.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 32px;
  padding: 25px 15px;
  background: var(--light-band);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-box .name { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.author-box .cred { font-size: 13px; color: var(--accent); margin-bottom: 8px; }
.author-box p { font-size: 14px; color: var(--text-soft); }

/* ---------- Blog sidebar (COMPONENTS.md §18) ----------
   Two-column layout for individual posts: article + sidebar with Quick
   Links and a Contact widget. No newsletter/Subscribe widget — that's
   the Remark Audiology residue already dropped sitewide. */
.blog-sidebar { display: flex; flex-direction: column; gap: 20px; }
.blog-sidebar .panel h3 { margin-bottom: 12px; }
.blog-sidebar .quick-links li { margin-bottom: 10px; }
.blog-sidebar .quick-links a { font-size: 14px; color: var(--text-dark); font-weight: 500; }
.blog-sidebar .quick-links a:hover { color: var(--accent); }

/* ---------- Image caption block (COMPONENTS.md §6) ---------- */
.img-caption-name { font-size: 22px; margin-top: 16px; margin-bottom: 4px; }
.img-caption-role { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 16px; }

/* ---------- Overlay badge card (COMPONENTS.md §7) ---------- */
.img-overlay-wrap { position: relative; }
.overlay-badge {
  position: absolute;
  bottom: 20px; left: 20px; right: 20px;
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-panel);
}
.overlay-badge .icon-chip {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--accent-light);
  color: var(--accent-medium);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.overlay-badge .icon-chip svg { width: 18px; height: 18px; }
.overlay-badge h3, .overlay-badge h4 { font-size: 14px; font-weight: 700; color: var(--text-soft); margin-bottom: 2px; }
.overlay-badge p { font-size: 12px; color: var(--text-soft); }

/* ---------- Specialists band (full-width purple, decision: rebuilt to match draft) ---------- */
.specialists-band { background: var(--primary); color: #fff; }
.specialists-band h2 { color: var(--primary-light); }
.specialist-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 32px 28px;
  transition: background-color .2s ease;
}
.specialist-card:hover { background: rgba(255,255,255,.11); }
.specialist-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.specialist-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
  flex-shrink: 0;
}
.specialist-card h3 { color: var(--neutral-bg); font-size: 20px; }
.specialist-card .role { font-size: 13px; color: rgba(255,255,255,.7); }
.specialist-card p { color: #fff; font-size: 15px; margin-top: 20px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.pill {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(248,250,255,.85);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(248,250,255,.18);
  border-radius: 20px;
  padding: 4px 12px;
}

/* ---------- Voices — full-bleed background photo (decision: rebuilt to match draft) ---------- */
.voices-fullbleed {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-block: 90px;
}
.voices-fullbleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(270deg, rgba(183, 49, 92, 0.72) 30%, hsla(46, 100%, 65%, 0));
}
.voices-copy {
  position: relative;
  max-width: 420px;
  margin-left: auto;
  text-align: right;
  color: #fff;
}
.voices-copy h2, .voices-copy p { color: #fff; }
.voices-copy h2 { margin-bottom: 15px; }
.voices-copy p { margin-bottom: 24px; }

/* ---------- Brands — compact divider strip, not a full section (decision: rebuilt) ---------- */
.brands-strip {
  border-top: 1px solid var(--primary-light);
  border-bottom: 1px solid var(--primary-light);
}
.brands-strip-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 60px;
}
.brands-strip-text { width: 41%; flex-shrink: 0; }
.brands-strip-text h2 { font-size: 17px; margin-bottom: 6px; }
.brands-strip-text p { font-size: 14px; color: var(--text-mid); }
.brands-strip .logo-ticker { width: 59%; }

/* ---------- FAQ (not an accordion) ---------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
}
.faq-row:last-child { border-bottom: 0; }
.faq-row h3 { font-size: 17px; }
.faq-row p { font-size: 14px; color: var(--text-mid); }
.faq-callout {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 32px;
  max-width: 860px;
  margin-inline: auto;
}

/* ---------- Brand logo ticker (new construction — decision: item 3) ---------- */
.logo-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-ticker-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: logo-scroll 32s linear infinite;
}
.logo-ticker:hover .logo-ticker-track,
.logo-ticker:focus-within .logo-ticker-track { animation-play-state: paused; }
.logo-ticker-track img {
  height: 32px;
  width: auto;
  filter: grayscale(100%);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.logo-ticker-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-ticker-track { animation: none; }
  .logo-ticker { overflow-x: auto; }
}

/* ---------- FIND US ---------- */
.find-us { background: var(--light-band); }
.find-us-head { max-width: 860px; margin-bottom: 32px; }
.find-us-head .accent { color: var(--accent); }
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
/* Measured on Home's Madisonville/Cleveland office panels: 20px 35px,
   not the 28px uniform this had never actually been checked against. */
.office-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 35px;
}
.office-card h3 { margin-bottom: 16px; }
.office-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.office-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primary-iconbk);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.office-ico svg { width: 18px; height: 18px; color: var(--primary); }
.office-row .lbl { display: block; font-size: 12px; color: var(--text-soft); }
.office-row .val { font-size: 15px; font-weight: 600; color: var(--text-dark); }
a.office-row .val:hover { color: var(--accent-dark); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark-bgd); color: #F3F0F3; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-block: 60px 32px;
}
.footer-brand p { font-size: 14px; color: #cbb9cb; margin: 12px 0 18px; }
.footer-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-medium);
  font-weight: 600;
  margin-bottom: 8px;
}
.footer-phone svg { width: 16px; height: 16px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.social-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.social-icon:hover { background: rgba(255,255,255,.12); }
.social-icon svg { width: 14px; height: 14px; }
.fcol h5 {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #cbb9cb;
  margin-bottom: 14px;
}
.fcol li { margin-bottom: 10px; }
.fcol a { font-size: 14px; color: #F3F0F3; font-weight: 400; }
.fcol a:hover { color: var(--accent-medium); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: #b7a8b7;
}
.footer-bottom a { color: #b7a8b7; text-decoration: underline; }

/* ---------- Trust row (plain divider-separated text, not chips) ---------- */
.trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.trust-row span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  padding-inline: 16px;
  border-right: 1px solid rgba(107, 114, 128, .22);
}
.trust-row span:last-child { border-right: 0; }

/* Home-only stat-block trust row (COMPONENTS.md §8b) — bigger, numeric,
   different divider color than the plain-label §8a version above. */
.trust-row--stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-row--stats .stat {
  padding-inline: 32px;
  border-right: .5px solid rgba(74, 94, 122, .29);
  text-align: center;
}
.trust-row--stats .stat:last-child { border-right: 0; }
.trust-row--stats .stat-num { color: var(--primary); font-size: 25px; font-weight: 700; display: block; }
.trust-row--stats .stat-label { font-size: 13px; color: var(--text-soft); margin-top: 3px; display: block; }
.trust-row--stats .stat-rating { display: flex; flex-direction: column; align-items: center; }
.trust-row--stats .stat-stars { display: flex; gap: 2px; color: var(--primary); margin-bottom: 3px; }
.trust-row--stats .stat-stars svg { width: 30px; height: 30px; fill: currentColor; }

/* ---------- Testimonial card (real Google reviews) ---------- */
.testimonial-card { display: flex; flex-direction: column; text-align: left; }
.testimonial-stars { display: flex; gap: 2px; color: var(--review-gold); margin-bottom: 14px; }
.testimonial-stars svg { width: 16px; height: 16px; fill: currentColor; }
.testimonial-quote { font-size: 15px; line-height: 1.6; color: var(--text-dark); flex-grow: 1; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; font-size: 14px; color: var(--text-dark); display: block; }
.testimonial-loc { font-size: 13px; color: var(--text-soft); display: block; }

/* ---------- Panel (bordered card used for forms / call-us blocks) ---------- */
.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
}

/* ---------- Forms (Netlify) ---------- */
.form-card { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  background: #fff;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.consent-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.consent-check input { margin-top: 4px; }
.consent-check label { font-weight: 400; font-size: 13px; color: var(--text-mid); }
.consent-note { font-size: 13px; color: var(--text-mid); }
.consent-note a { color: var(--text-mid); text-decoration: underline; }
.honeypot-field { position: absolute; left: -9999px; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.accent { color: var(--accent); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
/* .center alone (text-align) has no effect on a flex row's children —
   button rows using both classes together need justify-content too. */
.row.center { justify-content: center; }
.icon { width: 24px; height: 24px; }

/* ---------- Tablet: 479–991px (decision: item 14, previously unstyled) ---------- */
@media (max-width: 991px) {
  .nav-links, .nav-dropdown-wrap { display: none; }
  .nav-hamburger { display: block; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    box-shadow: var(--shadow-panel);
    padding: 12px;
    gap: 2px;
  }
  .nav-links.is-open .nav-dropdown {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    display: none;
    padding-left: 16px;
  }
  .nav-links.is-open li.is-expanded .nav-dropdown { display: block; }
}

@media (min-width: 479px) and (max-width: 991px) {
  .container, .container-wide { width: 88%; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding-block: 48px 24px; }
  .h1--home { font-size: 38px; }
  div[style*="grid-template-columns"],
  .two-col { grid-template-columns: 1fr !important; }
  .timeline { flex-direction: column; align-items: stretch; gap: 32px; }
  .timeline::before { display: none; }
  .brands-strip-inner { flex-direction: column; align-items: flex-start; }
  .brands-strip-text, .brands-strip .logo-ticker { width: 100%; }
  .voices-copy { margin-left: 0; max-width: 100%; text-align: left; }
}

/* ---------- Mobile ≤478px (reproduces the draft's only tuned breakpoint) ---------- */
@media (max-width: 478px) {
  .container, .container-wide { width: 100%; padding-inline: 25px; }
  .h1, .h1--home { font-size: 30px; }
  .h2 { font-size: 22px; }
  .nav-logo img { height: 44px; }
  /* Draft hides the header CTA below 478px, leaving just logo + hamburger — confirmed via computed style (display:none exactly at this breakpoint). */
  .nav-actions .btn-nav { display: none; }
  div[style*="grid-template-columns"],
  .two-col { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr; padding-block: 40px 24px; }
  .footer-bottom { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr; }
  .timeline { flex-direction: column; align-items: stretch; gap: 32px; }
  .timeline::before { display: none; }
  .brands-strip-inner { flex-direction: column; align-items: flex-start; }
  .brands-strip-text, .brands-strip .logo-ticker { width: 100%; }
  .voices-copy { margin-left: 0; max-width: 100%; text-align: left; }
  .specialist-head { flex-wrap: wrap; }
  /* 3-item .trust-row wraps to 2 lines at this width; each span keeps its
     own left padding/divider, which leaves the wrapped item visually
     indented. Stack instead so nothing carries a stray inset. */
  .trust-row { flex-direction: column; align-items: center; gap: 8px; }
  .trust-row span { padding-inline: 0; border-right: 0; }
}