/* Pinnacle base styles — layout, chrome, and About-page components.
   Progressive enhancement: everything works without JavaScript
   (nav dropdowns are native <details>). CC-4 replaces the chrome with the
   full accessible nav module; CC-3 brings brand fonts and the full system. */

/* --- reset-lite --- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-canvas);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; color: var(--color-ink); }
a { color: var(--color-primary); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.container { max-width: 1100px; 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 --- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: var(--space-2) var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.header-logo img { width: 160px; height: auto; }
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); 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.5rem 1.1rem;
  border-radius: var(--radius-pill); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ink);
  background: var(--color-surface-warm); border: 1px solid var(--color-border);
  cursor: pointer;
}
.nav-pill:hover { background: var(--color-surface-cream); }
a.nav-pill[aria-current="page"] {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.nav-group { position: relative; }
.nav-group.open > .nav-disclosure {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
/* disclosure arrow flips while its menu is expanded */
.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-border); background: var(--color-surface-warm);
  color: var(--color-ink); cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 0.5rem 1.1rem; 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-1) 0 0; padding: var(--space-1);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  min-width: 12rem;
}
.nav-dropdown-list a {
  display: block; padding: var(--space-2) var(--space-3);
  text-decoration: none; color: var(--color-ink); border-radius: var(--radius-sm);
}
.nav-dropdown-list a:hover { background: var(--color-surface-warm); }
.nav-dropdown-list a[aria-current="page"] { background: var(--color-primary); color: var(--color-text-inverse); }
/* 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: 6rem; } /* 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; }
}

/* --- about hero --- */
.about-hero { position: relative; min-height: 45vh; display: flex; align-items: center; overflow: hidden; }
.about-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-primary-deep) 85%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-deep) 60%, transparent) 60%,
    color-mix(in srgb, var(--color-primary-deep) 80%, transparent) 100%);
}
.about-hero .container { position: relative; }
.about-hero-content { padding: var(--space-6) 0; max-width: 42rem; }
.about-hero-content h1 { color: var(--color-text-inverse); font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.about-hero-content h1 span { color: var(--color-accent); }
.about-hero-subtitle { color: var(--color-text-inverse); font-size: var(--text-lg); margin: 0; }

/* --- mission --- */
.mission { background: var(--color-surface-cream); } /* about-page cream band (markup: class="section mission") */
.mission-content { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
/* note: .mission-text exists in the about-page markup; intentionally unstyled */
@media (min-width: 900px) { .mission-content { grid-template-columns: 3fr 2fr; align-items: start; } }
/* emphasis panel: full gold hairline frame on warm stone
   (deliberately NOT a single-side accent bar) */
.highlight-card {
  background: var(--color-surface-warm); border: 1px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.highlight-card h3 { margin-top: 0; }

/* --- values --- */
.values { background: var(--color-surface-cream); }
.section-header { max-width: 46rem; margin: 0 auto var(--space-5); text-align: center; }
.section-label {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-sm);
  font-weight: 700; color: var(--color-primary); margin: 0 0 var(--space-1);
}
.section-desc { color: var(--color-text-soft); } /* markup uses this on 7 pages; parity with Bristol/ProSource */
.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); } }
.value-card {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.value-badge {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-text-inverse);
  font-family: var(--font-heading); font-weight: 700;
}
.value-content h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.value-content p { margin: 0 0 var(--space-2); }
.value-provider-note { font-size: var(--text-sm); color: var(--color-text-soft); }

/* --- CTA --- */
.about-cta { background: var(--color-primary-deep); }
.cta-content { text-align: center; max-width: 44rem; margin: 0 auto; }
.cta-content h2, .cta-content p { color: var(--color-text-inverse); }
.cta-buttons { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
.btn {
  display: inline-block; padding: 0.85rem 1.75rem; border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 700; min-width: 44px; min-height: 44px;
}
.btn-primary { background: var(--color-accent); color: var(--color-ink); }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline { border: 2px solid var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-text-inverse); }
/* on dark CTA surfaces the outline button inverts */
.about-cta .btn-outline { border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.about-cta .btn-outline:hover { background: var(--color-inverse-veil); color: var(--color-text-inverse); }

/* --- footer --- */
.site-footer { background: var(--color-ink); color: var(--color-surface-warm); padding: var(--space-5) 0 var(--space-4); }
.footer-inner {
  max-width: 1100px; 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-logo-link { display: inline-block; }
.footer-logo { width: 160px; height: auto; background: var(--color-surface); border-radius: var(--radius-sm); padding: var(--space-1); }
.footer-tagline { color: var(--color-accent); font-weight: 600; margin: 0; }
.footer-heading { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin: 0 0 var(--space-2); }
.footer-col p { margin: 0 0 var(--space-1); }
.site-footer a { color: var(--color-surface-warm); }
.footer-legal {
  max-width: 1100px; margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4) 0;
  border-top: 1px solid var(--color-inverse-hairline);
  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-border);
  border-top: 1px solid var(--color-border);
}
.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; } /* keep footer content clear of the fixed bar */
}

/* --- forms --- */
.form-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin: 0; }
.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; }

/* --- 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-primary-deep) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-deep) 62%, transparent) 55%,
    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; margin: 0 auto; text-align: center; }
.home-hero-kicker {
  color: var(--color-accent); font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--text-sm); margin: 0 0 var(--space-2);
}
.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); }
.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; justify-content: center; }
.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); }
.btn-outline-inverse { border: 2px solid var(--color-text-inverse); color: var(--color-text-inverse); }
.btn-outline-inverse:hover { background: var(--color-text-inverse); color: var(--color-ink); }
.btn-cardinal { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-cardinal:hover { background: var(--color-primary-dark); color: var(--color-text-inverse); }

.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 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-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }
/* flat card: hairline border, no shadow (shadows reserved for elevated panels) */
.process-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
  box-shadow: none; text-align: center;
}
.process-card .value-badge { margin: 0 auto var(--space-2); }
.process-card h3 { margin: 0 0 var(--space-2); }
.section-process { background: var(--color-surface-cream); }

.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: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.service-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); color: var(--color-text); }
.service-card h3 { margin: 0 0 var(--space-2); }
.service-link { color: var(--color-primary); font-family: var(--font-heading); font-weight: 600; }

.section-benefits { background: var(--color-surface-gray); } /* warm gray band varies the stone/cream rhythm */
.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); } }
/* unboxed rows: hairline top rule, no card chrome */
.benefit-card {
  background: transparent; border: 0; border-top: 1px solid var(--color-border);
  border-radius: 0; box-shadow: none; 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 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary); color: var(--color-primary);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.tag:hover { background: var(--color-primary); 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-warm); border: 1px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.feature-item strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.feature-item p { margin: var(--space-1) 0 0; }

.home-cta { background: var(--color-primary-deep); }
.home-cta .cta-content { text-align: center; max-width: 44rem; margin: 0 auto; }
.home-cta h2, .home-cta p { color: var(--color-text-inverse); }
.home-cta .btn-outline { border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.home-cta .btn-outline:hover { background: var(--color-inverse-veil); color: var(--color-text-inverse); }

/* --- 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: 1px solid var(--color-accent); background: var(--color-surface-warm); }
.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); }
.qr-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); justify-content: center; }
.qr-row img { width: 320px; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
/* QR codes are desktop-only — you can't scan a code shown on the same phone */
@media (max-width: 699px) { .qr-row { display: none; } }
/* the form card is a plain block panel (value-card's flex row is for badge cards) */
.form-card { display: block; }
/* 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-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .process-grid-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-family: var(--font-heading); font-weight: 600; }
.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-primary); background: var(--color-surface);
  color: var(--color-primary); 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-primary); 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-family: var(--font-heading); font-size: var(--text-sm);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary);
}
.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-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-sm); color: var(--color-accent-dark); 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); }
.location-card .btn-cardinal, .location-card .map-load-btn { margin-top: var(--space-2); }

/* --- faq page --- */
.faq-list { margin-bottom: var(--space-5); }
.faq-group-title { margin: var(--space-5) 0 var(--space-3); }
/* accordions (shared: FAQ items + .prose details) — solid cardinal summary bar,
   inverse text, gold +/− marker; white body panel pops on the stone canvas */
.prose details, details.faq-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 0; overflow: hidden; margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.prose details > summary, details.faq-item > summary {
  background: var(--color-primary); color: var(--color-text-inverse);
  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-accent); 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-dark); color: var(--color-text-inverse); }
.prose details[open] > summary, details.faq-item[open] > summary {
  border-bottom: 2px solid var(--color-accent); 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); }
/* .prose details accordions use the shared accordion block (see faq section) */
.med-disclaimer {
  border: 1px solid var(--color-accent); background: var(--color-surface-warm);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

/* --- specialty page components --- */
.spec-hero {
  background: var(--color-primary-deep);
  padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4);
  border-radius: var(--radius-md); text-align: center;
}
.spec-hero .section-label { color: var(--color-accent); }
.spec-hero h1 { margin: var(--space-2) 0; color: var(--color-text-inverse); }
.spec-lead { font-size: var(--text-lg); color: var(--color-surface-warm); 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-actions .btn-outline { border-color: var(--color-primary); color: var(--color-primary); }
.spec-actions .btn-outline:hover { background: var(--color-primary); color: var(--color-text-inverse); }
/* solid gold chip with ink text */
.spec-fact {
  padding: 0.45rem 1rem; border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
  background: var(--color-accent); color: var(--color-ink);
}
.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;
  box-shadow: var(--shadow-sm);
}
.page-toc a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.spec-page h2 { scroll-margin-top: 6rem; }
.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-md); padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-sm);
}
.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-primary); 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-primary); color: var(--color-primary);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.tag-row a:hover { background: var(--color-primary); color: var(--color-text-inverse); }
/* deep cardinal CTA card with a gold action button */
.spec-cta {
  background: var(--color-primary-deep); border: 0; color: var(--color-text-inverse);
  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-text-inverse); }
.spec-cta a {
  display: inline-block; background: var(--color-accent); color: var(--color-ink);
  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-accent-dark); color: var(--color-ink); }
/* Summit-pattern section chrome: centered headings with a cardinal accent rule */
.spec-page h2 { text-align: center; }
.spec-page h2::after {
  content: ""; display: block; width: 72px; height: 3px;
  background: var(--color-primary); 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: 1px solid var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm);
}
.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; margin: var(--space-3) 0 var(--space-5); }
.privacy-toc a {
  padding: 0.5rem 1.2rem; border: 1px solid var(--color-primary); border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 600;
}
.privacy-page section { scroll-margin-top: 6rem; }

/* --- specimen page --- */
.specimen-note {
  background: var(--color-surface-warm); border: 1px solid var(--color-accent);
  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: 65ch; }
.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; }
.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; no !important) --- */
@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, .about-hero-image, .about-hero-overlay { display: none; }
  .about-hero-content h1, .about-hero-subtitle { color: var(--color-ink); }
  .about-cta { background: none; }
  .cta-content h2, .cta-content p { color: var(--color-ink); }
}

/* --- scroll reveal + hero task stack --- */
.reveal-pending { opacity: 0; transform: translateY(16px); }
.revealed { opacity: 1; transform: none; transition: opacity var(--motion-reveal) ease, transform var(--motion-reveal) ease; }
/* task-first hero: vertical action stack (centered composition) */
.home-hero-cta { flex-direction: column; align-items: stretch; max-width: 300px; margin-left: auto; margin-right: auto; }
.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-md);
  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; }

/* --- delivery stat tiles: gold with ink text --- */
.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-accent); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; color: var(--color-ink); }
.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); } }