/* Bristol base styles — warm Oklahoma community/editorial: Playfair Display
   headings, cream surfaces, soft shapes, red for action and gold for
   reassurance (borders/labels only, never body text). No !important anywhere;
   motion uses --motion-* tokens so reduced-motion zeroes them structurally. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-canvas);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.container { max-width: 1060px; margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: var(--space-6) 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- skip link --- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-ink); color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-3); border-radius: 0 0 var(--radius-sm) 0;
  z-index: calc(var(--z-header) + 1);
}
.skip-link:focus { left: 0; }

/* --- header / nav: cream masthead with serif wordmark, editorial links --- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-surface-warm);
  border-bottom: 3px double var(--color-accent-bright);
}
.header-inner {
  max-width: 1060px; margin: 0 auto; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.header-logo img { width: 240px; height: auto; display: block; }
.header-wordmark {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
  color: var(--color-ink); text-decoration: none;
}
.header-wordmark:hover { color: var(--color-primary); }
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
/* button reset for disclosure triggers — placed BEFORE .nav-pill so brand pill
   styling below wins on any shared property */
.nav-disclosure {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: inherit; line-height: inherit;
}
.nav-pill {
  display: inline-block; padding: 0.4rem 0.2rem;
  text-decoration: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.nav-pill:hover { color: var(--color-primary); border-bottom-color: var(--color-accent-bright); }
a.nav-pill[aria-current="page"] {
  color: var(--color-primary); font-weight: 700;
  border-bottom-color: var(--color-primary);
}
.nav-group { position: relative; }
.nav-group.open > .nav-disclosure { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* disclosure arrow flips when the menu is open */
.nav-arrow { display: inline-block; transition: transform var(--motion-fast); }
.nav-disclosure[aria-expanded="true"] .nav-arrow { transform: rotate(180deg); }
.nav-toggle {
  border: 1px solid var(--color-accent); background: var(--color-surface);
  color: var(--color-ink); cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 0.5rem 1.2rem; border-radius: var(--radius-pill);
  display: none; /* shown only under html.js at mobile widths */
}
.nav-toggle[aria-expanded="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.nav-dropdown-list {
  list-style: none; margin: var(--space-2) 0 0; padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent-bright);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  min-width: 13rem;
}
.nav-dropdown-list a {
  display: block; padding: var(--space-2) var(--space-3);
  text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm);
}
.nav-dropdown-list a:hover { background: var(--color-surface-cream); color: var(--color-primary); }
.nav-dropdown-list a[aria-current="page"] { color: var(--color-primary); font-weight: 700; }
/* JS-gated collapse: without JS the menus render fully expanded */
html.js .nav-dropdown-list { display: none; }
html.js .nav-group.open > .nav-dropdown-list { display: block; }
html { scroll-padding-top: 6.5rem; } /* anchors clear the sticky header */
@media (min-width: 900px) {
  .nav-dropdown-list { position: absolute; right: 0; z-index: var(--z-header); }
}
@media (max-width: 899px) {
  html.js .nav-toggle { display: inline-block; }
  html.js .site-nav { display: none; flex-basis: 100%; }
  html.js .site-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .nav-pill { display: block; width: 100%; text-align: left; }
  .nav-dropdown-list { margin: var(--space-1) 0 var(--space-2) var(--space-3); box-shadow: none; }
}

/* --- section scaffolding --- */
.section-header { max-width: 44rem; margin: 0 auto var(--space-5); text-align: center; }
.section-label {
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-accent); margin: 0 0 var(--space-1);
}
.section-desc { color: var(--color-text-soft); }

/* --- cards: soft cream panels; emphasis uses the full editorial double rule
       (echoes the masthead border — deliberately NOT a single-side accent bar) --- */
.value-card, .highlight-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.highlight-card { border: 3px double var(--color-accent-bright); background: var(--color-surface-cream); }
.highlight-card h3, .value-card h3 { margin-top: 0; }
.values-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- buttons: warm rounded, red action / outlined reassurance --- */
.btn {
  display: inline-block; padding: 0.85rem 1.9rem;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 700;
  min-width: 44px; min-height: 44px;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-dark); color: var(--color-text-inverse); }
.btn-outline { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
.btn-outline:hover { background: var(--color-accent); color: var(--color-text-inverse); }

/* --- forms --- */
.form-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin: 0; background: var(--color-surface); }
.form-fieldset legend { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); padding: 0 var(--space-2); }
.form-field { margin-bottom: var(--space-3); }
.form-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 0.75rem 1rem;
  font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-text-soft);
  border-radius: var(--radius-sm);
}
.form-help { font-size: var(--text-sm); color: var(--color-text-soft); margin: var(--space-1) 0 0; }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border: 2px solid var(--color-primary-dark); }
.form-error { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary-dark); margin: var(--space-1) 0 0; }

/* --- footer: deep warm brown with gold headings --- */
.site-footer { background: var(--color-ink); color: var(--color-surface-warm); padding: var(--space-5) 0 var(--space-4); }
.footer-inner {
  max-width: 1060px; margin: 0 auto; padding: 0 var(--space-4);
  display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 600px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-wordmark {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
  color: var(--color-surface-warm); text-decoration: none;
}
.footer-tagline { color: var(--color-accent-bright); font-weight: 500; margin: 0; }
.footer-heading {
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-accent-bright); margin: 0 0 var(--space-2); font-weight: 700;
}
.footer-col p { margin: 0 0 var(--space-1); }
.site-footer a { color: var(--color-surface-warm); }
.footer-legal {
  max-width: 1060px; margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4) 0;
  border-top: 1px solid var(--color-accent);
  display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-sm);
}
.footer-legal p { margin: 0; }

/* --- mobile action bar --- */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-action-bar);
  display: none; gap: 1px; background: var(--color-ink);
  border-top: 1px solid var(--color-accent-bright);
}
.action-bar-btn {
  flex: 1; text-align: center; padding: 0.9rem var(--space-2); min-height: 44px;
  background: var(--color-primary); color: var(--color-text-inverse);
  text-decoration: none; font-weight: 700;
}
.action-bar-secondary { background: var(--color-ink); }
@media (max-width: 700px) {
  .action-bar { display: flex; }
  body { padding-bottom: 3.5rem; }
}

/* --- homepage --- */
.home-hero { position: relative; display: flex; align-items: center; min-height: 55vh; overflow: hidden; }
.home-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-ink) 82%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-deep) 72%, transparent) 60%,
    color-mix(in srgb, var(--color-ink) 85%, transparent) 100%);
}
.home-hero .container { position: relative; }
.home-hero-content { max-width: 46rem; padding: var(--space-6) 0; }
.home-hero-content h1 { color: var(--color-text-inverse); font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.home-hero-content h1 span { color: var(--color-accent-bright); }
.home-hero-subtitle { color: var(--color-text-inverse); font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.home-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.home-hero-fallback {
  display: grid; gap: 0.25rem; margin-top: var(--space-4); text-align: center;
  color: var(--color-text-inverse); font-size: var(--text-sm);
}
.home-hero-fallback p { margin: 0; }
.hero-contact-address { margin: 0; font-style: normal; }
.hero-contact-address span { display: block; }
.home-hero-fallback a { color: var(--color-accent-bright); }
.btn-outline-inverse { border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.btn-outline-inverse:hover { background: var(--color-text-inverse); color: var(--color-ink); }

.mission-grid { align-items: start; }
.value-provider-note { font-size: var(--text-sm); color: var(--color-text-soft); }

.role-split { padding: var(--space-5) 0; }
.role-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .role-grid { grid-template-columns: 1fr 1fr; } }
.role-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.role-card-office { background: var(--color-surface-cream); border: 3px double var(--color-accent-bright); }
.role-card h3 { margin-top: 0; }
.role-links, .role-facts { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.role-links li, .role-facts li { padding: var(--space-1) 0; }

.process-steps { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .process-steps { grid-template-columns: repeat(3, 1fr); } }
.process-step {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
  text-align: center;
}
.step-number {
  font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700;
  color: var(--color-accent); margin-bottom: var(--space-2);
}
.process-step h3 { margin: 0 0 var(--space-2); }

.services-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card {
  display: block; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--color-text);
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.service-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent-bright); color: var(--color-text); }
.service-card h3 { margin: 0 0 var(--space-2); }
.service-link { color: var(--color-primary); font-weight: 700; }

.section-process { background: var(--color-surface); } /* white band on the cream canvas */
.section-benefits { background: var(--color-surface-cream); }
.benefits-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } }
/* surface hierarchy: benefit grids are unboxed columns; panels are for emphasis */
.benefit-card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--color-border); padding: var(--space-3) 0 0;
}
.benefit-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.benefit-card p { margin: 0; }

.providers-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .providers-layout { grid-template-columns: 3fr 2fr; } }
.section-header-left { text-align: left; margin-left: 0; }
.specialty-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.tag {
  display: inline-block; padding: 0.35rem 0.9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent); color: var(--color-accent);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.tag:hover { background: var(--color-accent); color: var(--color-text-inverse); }
.providers-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.feature-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
}
.feature-item strong { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-accent); }
.feature-item p { margin: var(--space-1) 0 0; }

.philosophy-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .philosophy-grid { grid-template-columns: 1fr 1fr; } }
.philosophy-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.philosophy-header { display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-3); }
.philosophy-header h3 { margin: 0; }
.philosophy-number { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-accent); }
.philosophy-subtitle { margin: 0; color: var(--color-text-soft); font-size: var(--text-sm); }
.philosophy-list { list-style: none; margin: 0; padding: 0; }
.philosophy-list li { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.philosophy-list p { margin: var(--space-1) 0 0; }
.values-formula {
  text-align: center; margin: var(--space-5) 0 0;
  font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-ink);
}

.home-cta { background: var(--color-primary-soft); }
.home-cta .cta-content { text-align: center; max-width: 44rem; margin: 0 auto; }
.home-cta h2, .home-cta p { color: var(--color-ink); }
.home-cta .btn-outline-inverse { border-color: var(--color-ink); color: var(--color-ink); }
.home-cta .btn-outline-inverse:hover { background: var(--color-ink); color: var(--color-text-inverse); }
.cta-buttons { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* --- refill + status journeys --- */
.refill-container { max-width: 820px; }
.hipaa-callout { margin-bottom: var(--space-4); }
.hipaa-title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.form-card { margin-bottom: var(--space-5); }
.form-card h2 { margin-top: 0; }
.form-subtitle { color: var(--color-text-soft); font-size: var(--text-sm); }
.required-mark { color: var(--color-primary-dark); font-weight: 700; }
.form-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.error-summary {
  border: 2px solid var(--color-primary-dark); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.error-summary-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--color-primary-dark); }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: var(--color-primary-dark); font-weight: 600; }
.form-status { border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.form-status p { margin: 0 0 var(--space-1); }
.form-status-ok { border: 3px double var(--color-accent-bright); background: var(--color-surface-cream); }
.form-status-error { border: 2px solid var(--color-primary-dark); background: var(--color-surface); }
.preview-banner {
  border: 1px dashed var(--color-accent); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-soft);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.recaptcha-note { margin-top: var(--space-3); }
.form-noscript { font-weight: 600; color: var(--color-primary-dark); }
.status-action-card h2 { margin-top: 0; }
.external-note { font-size: var(--text-sm); color: var(--color-text-soft); margin: var(--space-1) 0 0; }
.steps-title { margin-top: var(--space-5); }
.app-download { margin: var(--space-5) 0; }
.app-download h2 { margin-bottom: var(--space-1); }
.app-badges { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.need-help .need-help-actions { justify-content: center; margin-top: var(--space-3); }
/* status journey reads centered on the page */
.status-action-card, .app-download, .need-help, .steps-title { text-align: center; }
.app-badges { justify-content: center; }
/* 4-step variant: 2x2 on tablet, 4 across on desktop (no orphaned step) */
@media (min-width: 560px) { .process-steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .process-steps-4 { grid-template-columns: repeat(4, 1fr); } }

/* --- provider routing (send a prescription) --- */
.quickstart h2 { margin-top: 0; }
.quickstart-list { margin: 0; }
.quickstart-row {
  display: grid; gap: var(--space-1) var(--space-4); grid-template-columns: 1fr;
  padding: var(--space-2) 0; border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) { .quickstart-row { grid-template-columns: 230px 1fr; } }
.quickstart-row:first-of-type { border-top: 0; }
.quickstart-row dt { font-weight: 700; }
.quickstart-row dd { margin: 0; display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.quickstart-value { font-size: var(--text-lg); }
.copy-btn { display: none; } /* clipboard needs JS; html.js reveals the buttons */
html.js .copy-btn {
  display: inline-block; border: 1px solid var(--color-accent); background: var(--color-surface);
  color: var(--color-accent); border-radius: var(--radius-pill);
  padding: 0.15rem 0.8rem; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
html.js .copy-btn:hover { background: var(--color-accent); color: var(--color-text-inverse); }
.print-hint { font-size: var(--text-sm); color: var(--color-text-soft); margin: var(--space-3) 0 0; }
.provider-steps { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .provider-steps { grid-template-columns: repeat(2, 1fr); } }
.provider-step h3 { margin: 0 0 var(--space-2); }
.step-label {
  margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent);
}
.med-search { max-width: 620px; margin: 0 auto; }
.med-status { font-weight: 600; margin: var(--space-2) 0 0; }
.med-results { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.med-results li {
  padding: var(--space-2) var(--space-3); background: var(--color-surface);
  border: 1px solid var(--color-border); border-top: 0;
}
.med-results li:first-child { border-top: 1px solid var(--color-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.med-results li:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.med-empty, .med-more { color: var(--color-text-soft); }
@media print {
  html.js .copy-btn, .med-search { display: none; }
  .quickstart { border-color: var(--color-ink); }
}

/* --- contact page --- */
.contact-hero { text-align: center; }
.contact-phone-wrap { text-align: center; margin: var(--space-3) 0; }
.contact-phone-btn { font-size: var(--text-lg); }
.hours-blocks { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.hours-label { font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-sm); color: var(--color-accent); margin-right: var(--space-1); }
.location-card { text-align: center; }
.location-address { font-style: normal; font-size: var(--text-lg); margin: var(--space-3) 0; }
.map-load-btn { display: none; } /* the embed needs JS; address + directions are the fallback */
html.js .map-load-btn { display: inline-block; }
.map-embed iframe { width: 100%; height: 320px; border: 0; border-radius: var(--radius-sm); }

/* --- faq page --- */
.faq-list { margin-bottom: var(--space-5); }
.faq-group-title { margin: var(--space-5) 0 var(--space-3); }
/* accordions (shared by details.faq-item and .prose details): white shell,
   soft-red summary bar with charcoal text, gold double rule when open */
.prose details, details.faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0; overflow: hidden; margin-bottom: var(--space-2);
}
.prose details > summary, details.faq-item > summary {
  background: var(--color-primary-soft); color: var(--color-ink);
  padding: var(--space-3) var(--space-4); cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.prose details > summary::after, details.faq-item > summary::after {
  content: "+"; color: var(--color-primary); font-weight: 700;
  font-size: var(--text-xl); line-height: 1; flex: none;
}
.prose details[open] > summary::after, details.faq-item[open] > summary::after { content: "\2212"; }
.prose details > summary:hover, details.faq-item > summary:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.prose details[open] > summary, details.faq-item[open] > summary {
  border-bottom: 3px double var(--color-accent-bright); color: var(--color-ink);
}
.prose details[open] > summary:hover, details.faq-item[open] > summary:hover { color: var(--color-text-inverse); }
.prose details > *:not(summary) { padding: var(--space-2) var(--space-4); }
.faq-answer { padding: var(--space-3) var(--space-4); }
.faq-answer p:first-child { margin-top: 0; }
.faq-next { font-weight: 700; }
.faq-office-pointer { margin-top: var(--space-4); color: var(--color-text-soft); }
.faq-help { margin-top: var(--space-5); }

/* --- ported specialty content (.prose) --- */
.prose { padding: var(--space-5) 0 var(--space-6); }
.prose h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.prose h2 { margin: var(--space-5) 0 var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); }
.prose ul { padding-left: 1.4rem; }
.prose li { margin-bottom: var(--space-2); }
.med-disclaimer {
  border: 3px double var(--color-accent-bright); background: var(--color-surface-cream);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

/* --- specialty page components --- */
.spec-hero {
  background: var(--color-surface-cream);
  border: 3px double var(--color-accent-bright);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4);
  text-align: center;
}
.spec-hero h1 { margin: var(--space-2) 0; }
.spec-lead { font-size: var(--text-lg); color: var(--color-text-soft); max-width: 44rem; margin: 0 auto; }
.spec-actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.spec-fact {
  padding: 0.45rem 1rem; border: 1px solid var(--color-accent-bright); border-radius: var(--radius-sm);
  font-size: var(--text-sm); background: var(--color-accent-bright);
  color: var(--color-ink); font-weight: 600;
}
.page-toc { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin: 0 0 var(--space-5); }
.page-toc a {
  padding: 0.4rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.page-toc a:hover { border-color: var(--color-accent); }
.spec-page h2 { scroll-margin-top: 6.5rem; }
.med-filter-wrap { max-width: 480px; margin-bottom: var(--space-3); }
.med-grid {
  list-style: none; padding: 0; margin: var(--space-3) 0;
  display: grid; gap: var(--space-2); grid-template-columns: 1fr;
}
@media (min-width: 560px) { .med-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .med-grid { grid-template-columns: repeat(3, 1fr); } }
.med-grid li {
  margin: 0; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}
.med-grid li span { display: block; font-size: var(--text-sm); color: var(--color-text-soft); }
.checklist {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { margin: 0; padding-left: 1.6rem; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.tag-row { list-style: none; padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tag-row li { margin: 0; }
.tag-row a {
  display: inline-block; padding: 0.35rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent); color: var(--color-accent);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.tag-row a:hover { background: var(--color-accent); color: var(--color-text-inverse); }
.spec-cta {
  background: var(--color-primary-soft); border: 0; color: var(--color-ink);
  border-radius: var(--radius-md); padding: var(--space-4); text-align: center;
  margin-top: var(--space-5);
}
.spec-cta h2 { margin-top: 0; color: var(--color-ink); }
.spec-cta p { color: var(--color-ink); }
.spec-cta a {
  display: inline-block; background: var(--color-primary); color: var(--color-text-inverse);
  border-radius: var(--radius-pill); padding: 0.7rem 1.6rem;
  text-decoration: none; font-weight: 700; margin-top: var(--space-2);
}
.spec-cta a:hover { background: var(--color-primary-dark); color: var(--color-text-inverse); }
/* Summit-pattern section chrome: centered headings with a brand accent rule */
.spec-page h2 { text-align: center; }
.spec-page h2::after {
  content: ""; display: block; width: 72px; height: 3px;
  background: var(--color-accent-bright); margin: var(--space-2) auto 0;
}
.spec-page h2 + p { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }
.spec-page section { margin-bottom: var(--space-5); }
.summary-panel {
  background: var(--color-surface); border: 3px double var(--color-accent-bright);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.summary-panel > div > p:first-child, .summary-panel > p:first-child { margin-top: 0; }
.panel-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: var(--space-4) 0; }
@media (min-width: 760px) { .panel-grid { grid-template-columns: repeat(2, 1fr); } }
.panel-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.panel-card h3, .panel-card h4 { margin: 0 0 var(--space-3); font-family: var(--font-heading); text-align: center; }
.panel-card .checklist { grid-template-columns: 1fr; }

.privacy-toc { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin: var(--space-3) 0 var(--space-5); }
.privacy-toc a {
  padding: 0.5rem 1.2rem; border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 600;
}
.privacy-page section { scroll-margin-top: 6.5rem; }

/* --- specimen page --- */
.specimen-note {
  background: var(--color-surface-cream); border: 3px double var(--color-accent-bright);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
}
.type-sample { font-family: var(--font-heading); color: var(--color-ink); margin: 0 0 var(--space-3); }
.type-h1 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; }
.type-h2 { font-size: var(--text-2xl); font-weight: 600; }
.type-h3 { font-size: var(--text-xl); font-weight: 600; }
.type-body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); max-width: 62ch; }
.type-small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-soft); }
.swatch-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.swatch { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.swatch-chip { height: 64px; }
.swatch p { margin: 0; padding: var(--space-2); font-size: var(--text-sm); }
.specimen-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }

/* --- motion + print (structural reduced-motion: zero the tokens) --- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-reveal: 0ms; }
  html { scroll-behavior: auto; }
}
@media print {
  .site-header, .site-footer, .skip-link, .action-bar { display: none; }
  body { background: var(--color-surface); }
}

/* === COLOR BLOCKING (Summit canvas + cards system, Bristol skin) ===
   Tinted spotlight panel — the summary panel warms to cream so white cards pop
   on the canvas. Accordion/CTA/fact blocking now lives with its components. */
.summary-panel { background: var(--color-surface-cream); }

/* === AUDIT PASS: reveal motion, hero task stack, fewer pills === */
.reveal-pending { opacity: 0; transform: translateY(16px); }
.revealed { opacity: 1; transform: none; transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) ease; }
/* fewer pills: informational chips go rectangular; action buttons keep the pill */
.tag, .tag-row a { border-radius: var(--radius-sm); }
/* task-first hero: vertical action stack */
.home-hero-cta { flex-direction: column; align-items: stretch; max-width: 300px; }
.home-hero-cta .btn { text-align: center; }

/* feature cards with strong headings + link cards (cross-specialty sets) */
.panel-card > strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-ink); margin-bottom: var(--space-2); }
.panel-card > strong:first-child + p, .panel-card > p:last-child { margin-bottom: 0; }
a.panel-card.card-link { text-decoration: none; color: var(--color-text); display: block; }
a.panel-card.card-link:hover { border-color: var(--color-primary); }
a.panel-card.card-link strong { color: var(--color-primary); }
.panel-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 759px) { .panel-grid:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* callouts: transparent aside with a full accent frame (never a side bar) */
.callout {
  border: 1.5px solid var(--color-accent); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0;
}
.callout p { margin: 0; }

/* hero facts row + centered section actions */
.spec-facts { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.section-action { text-align: center; }

/* === COLOR VARIETY PASS: less black/tan, more soft red + white + gold === */
/* delivery stat tiles */
.tile-row { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .tile-row { grid-template-columns: repeat(3, 1fr); } }
.tile-row li { margin: 0; background: var(--color-primary-soft); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; }
.tile-row li strong { display: block; font-family: var(--font-heading); color: var(--color-ink); margin-bottom: var(--space-1); }
.panel-card { container-type: inline-size; }
.panel-card .tile-row { grid-template-columns: 1fr; }
@container (min-width: 520px) { .panel-card .tile-row { grid-template-columns: repeat(3, 1fr); } }