/* rc3-editorial.css */
/* ==========================================================================
   RC v3 — Editorial: long-form clinical pages, tables, FAQs, tools, blog
   ========================================================================== */

/* --- Reading rhythm ------------------------------------------------------- */

.reading-section,
.article-body > section,
.proc-section {
  padding-block: clamp(30px, 3.4vw, 50px);
  border-top: 1px solid var(--rule);
}
.reading-section:first-of-type { border-top: 0; }

.reading-section h2,
.article-body h2,
.proc-section h2,
.legal-content h2,
.reading-body h2 {
  max-width: 22ch;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: var(--h2-sm);
  line-height: 1;
  letter-spacing: var(--track-display);
}

.reading-section h3,
.article-body h3,
.proc-section h3,
.legal-content h3,
.reading-body h3 {
  margin-top: 34px;
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 500;
  letter-spacing: var(--track-tight);
}

.article-body p,
.reading-body p,
.reading-section p,
.legal-content p,
.proc-section p { max-width: var(--measure); }

.article-body ul, .article-body ol,
.reading-section ul, .reading-section ol,
.legal-content ul, .legal-content ol,
.condition-list, .reading-body ul, .reading-body ol {
  max-width: var(--measure);
  margin: 0 0 1.2em;
  padding-left: 22px;
}
.article-body li, .reading-section li, .legal-content li,
.condition-list li, .reading-body li { margin-bottom: .55em; }
.article-body li::marker, .reading-section li::marker,
.condition-list li::marker { color: var(--green); }

/* Section numerals used on clinical pages */
.section-number {
  display: block;
  margin-bottom: 10px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  -webkit-text-stroke: .5px var(--navy);
}

/* --- Table of contents ---------------------------------------------------- */

.article-layout,
.page-with-toc {
  display: grid;
  grid-template-columns: minmax(230px, 268px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 66px);
}

.page-toc,
.article-nav {
  position: sticky;
  top: 110px;
  align-self: start;
}
.page-toc__title,
.reading-toc > summary {
  margin-bottom: 14px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
}
.page-toc ul, .page-toc ol,
.reading-toc ol, .reading-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--rule);
}
.page-toc li, .reading-toc li { margin: 0; }
.page-toc a, .reading-toc a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.page-toc a:hover, .reading-toc a:hover,
.page-toc a.is-active {
  color: var(--navy);
  border-left-color: var(--yellow);
}

.reading-links { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 26px; }

/* --- Callouts ------------------------------------------------------------- */

.takeaway,
.tldr,
.practice-note,
.appointment-note,
.audiologist-note,
.insurance-note,
.physician-team-note,
.team-role-note,
.voice-credential-note,
.source-note,
.guide-safety,
.rc-resource-panel,
.practice-note {
  padding: clamp(22px, 2.6vw, 32px);
  border-left: 4px solid var(--yellow);
  background: var(--mint);
}
.takeaway p:last-child, .tldr dd:last-child { margin-bottom: 0; }
.takeaway .eyebrow { margin-bottom: 12px; }

.tldr h2 { margin-bottom: 20px; font-size: var(--h2-sm); }
.tldr__grid { margin: 0; }
.tldr__grid dt {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tldr__grid dd { margin: 0 0 16px; }

.judgment-callout {
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(26px, 3.4vw, 44px);
  border: 0;
  border-left: 5px solid var(--yellow);
  background: var(--navy);
  color: var(--white);
}
.judgment-callout p { max-width: 60ch; color: var(--white); }
.judgment-callout .pullquote {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 500;
  line-height: 1.34;
}
.judgment-callout cite, .judgment-callout footer {
  display: block;
  margin-top: 16px;
  color: var(--aqua);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pullquote {
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: var(--track-tight);
}

.references {
  margin-top: clamp(38px, 4.5vw, 60px);
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
  font-size: 14px;
}
.references h2 { font-size: var(--h4); font-family: var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.references ol { padding-left: 20px; }
.references li { margin-bottom: .7em; line-height: 1.5; }

.legal-updated {
  margin-bottom: 26px;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Lists with markers --------------------------------------------------- */

.plain-list, .principle-list, .condition-list--plain {
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
}
.plain-list li {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  padding-left: 0;
}
.plain-list__icon,
.candidacy__icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: var(--aqua);
  font-size: 13px;
  font-weight: 800;
}
.candidacy__icon { display: inline-grid; margin-right: 10px; vertical-align: -5px; }
.candidacy__col--reconsider .candidacy__icon { background: var(--yellow); }
.candidacy__col--may-help { border-left: 4px solid var(--aqua); }
.candidacy__col--reconsider { border-left: 4px solid var(--yellow); }

.principle-list { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.principle-list > div {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--rule);
  background: var(--white);
}
.principle-list h3 { margin-top: 0; }

.recovery-timeline {
  counter-reset: stage;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--yellow);
}
.recovery-timeline li {
  position: relative;
  counter-increment: stage;
  padding: 0 0 28px 28px;
}
.recovery-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--navy);
}
.recovery-timeline h3 { margin-top: 0; }

/* --- Service line list ---------------------------------------------------- */

.service-lines { border-top: 1px solid var(--rule-strong); }
.service-lines > a {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr) 44px;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-strong);
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) ease, background var(--t-fast) ease, padding var(--t-fast) ease;
}
.service-lines > a:hover { color: var(--white); background: var(--navy); padding-inline: 18px; }
.service-lines h3 { margin: 0; font-size: clamp(20px, 2vw, 28px); }
.service-lines p { margin: 0; font-size: 16px; }
.service-lines span[aria-hidden] {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--navy); background: var(--yellow);
  transition: transform var(--t-fast) var(--ease-out);
}
.service-lines > a:hover span[aria-hidden] { transform: translateX(4px); }

/* --- FAQ ------------------------------------------------------------------ */

.faq, .faq-group { border-top: 1px solid var(--rule-strong); }
.faq__item, .faq-item {
  border-bottom: 1px solid var(--rule-strong);
}
.faq__item > summary, .faq-item > summary {
  position: relative;
  display: block;
  padding: 22px 46px 22px 0;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--track-tight);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) ease;
}
.faq__item > summary::-webkit-details-marker,
.faq-item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after, .faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--yellow);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) ease;
}
.faq__item[open] > summary::after, .faq-item[open] > summary::after {
  content: "–";
  color: var(--navy);
}
.faq__item > summary:hover, .faq-item > summary:hover { color: var(--green); }
.faq__answer, .faq-item__body { padding: 0 46px 26px 0; }
.faq__answer p, .faq-item__body p { max-width: var(--measure); }

/* --- Tables --------------------------------------------------------------- */

.table-scroll, .insurance-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.6em;
  border: 1px solid var(--rule-strong);
}
.clinical-table, .technique-table, .insurance-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.clinical-table caption, .technique-table caption {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--mint);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: left;
}
.clinical-table th, .clinical-table td,
.technique-table th, .technique-table td,
.insurance-table-wrap th, .insurance-table-wrap td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.clinical-table thead th, .technique-table thead th,
.insurance-table-wrap thead th {
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clinical-table tbody th[scope="row"],
.technique-table tbody th[scope="row"] { font-weight: 800; }
.clinical-table tbody tr:nth-child(even),
.technique-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--mint) 45%, transparent); }

/* --- Figures and media ---------------------------------------------------- */

.rc-media, .clinical-figure, .anatomy-figure, .proc-figure,
.pnn-device-figure, .clinical-instrument {
  margin-block: clamp(26px, 3vw, 40px);
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--rule);
  background: var(--white);
}
.rc-media img, .clinical-figure img, .anatomy-figure img,
.proc-figure img, .pnn-device-figure img { margin-inline: auto; }
.rc-product-image { max-width: 320px; }
.rc-brand-logo { max-width: 150px; height: auto; margin-bottom: 16px; }

.differentiator {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.differentiator__photo { width: 100%; border-radius: var(--radius); }
.differentiator__photo-caption {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.anesthesia-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.anesthesia-block__photo { width: 100%; max-width: 250px; border-radius: var(--radius); }
.anesthesia-block__role {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.staff-group, .staff-group__photo, .family-gallery img { width: 100%; border-radius: var(--radius); }

.pnn-video-card { display: flex; flex-direction: column; gap: 12px; }
.pnn-video-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--navy); background: var(--yellow);
  font-size: 19px;
}
.pnn-video-card__note { font-size: 14px; color: var(--ink-soft); }

/* --- Interactive tools (no-JS safe) --------------------------------------- */
/* The NOSE instrument is styled in styles/rc3-tools.css, which the septoplasty
   page loads on its own. Nothing for it may live here: experience.css loads
   after the per-page stylesheet and would override it. */

.guide-tool {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--rule-strong);
  background: var(--white);
}
.guide-tool fieldset {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}
.guide-tool legend {
  padding: 0 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  letter-spacing: var(--track-tight);
}
.guide-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.guide-option:hover { background: var(--mint); border-color: var(--navy); }
.guide-option input { margin: 3px 0 0; accent-color: var(--navy); }

.guide-result {
  margin-top: 22px;
  padding: clamp(20px, 2.4vw, 28px);
  border-left: 4px solid var(--yellow);
  background: var(--mint);
}
.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Disabled (no-JS) state stays legible rather than looking broken. */
.guide-tool fieldset[disabled] { opacity: 1; }
.guide-tool fieldset[disabled] .guide-option { cursor: default; }

/* --- Blog ----------------------------------------------------------------- */

.blog-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.blog-jumpnav a {
  display: inline-flex;
  padding: 10px 16px;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.blog-jumpnav a:hover { color: var(--white); background: var(--navy); }

.blog-featured {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 3.4vw, 48px);
  padding: clamp(26px, 3.4vw, 46px);
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  transition: background var(--t-mid) ease;
}
.blog-featured:hover { background: var(--green); }
.blog-featured__mark {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 104px);
  line-height: 1;
  letter-spacing: var(--track-display);
}
.blog-featured__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  background: var(--aqua);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.blog-featured__category, .blog-featured__date { color: var(--aqua); }
.blog-featured h2 {
  margin: 10px 0 12px;
  max-width: 24ch;
  font-size: var(--h2-sm);
  letter-spacing: var(--track-display);
}
.blog-featured__excerpt { max-width: 58ch; color: var(--mint); }

.blog-category { margin-top: clamp(40px, 5vw, 72px); }
.blog-category__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--h2-sm);
  letter-spacing: var(--track-display);
}
.blog-category__count {
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.blog-card { gap: 10px; }
.blog-card__mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.05em;
}
a.blog-card:hover .blog-card__mark { background: var(--aqua); }
.article-nav__credit { margin-top: 22px; font-size: 13px; color: var(--ink-soft); }
.related-editorial { margin-top: clamp(44px, 5vw, 74px); }

/* --- Sitemap -------------------------------------------------------------- */

.rc-sitemap-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.rc-sitemap-columns h2 {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.rc-sitemap-columns ul { margin: 0; padding: 0; list-style: none; }
.rc-sitemap-columns li { margin-bottom: 8px; font-size: 15px; }

/* --- Misc ----------------------------------------------------------------- */

.appointment-phone {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
}
.appointment-phone h2 { max-width: 20ch; font-size: var(--h2-sm); letter-spacing: var(--track-display); }
.appointment-phone .btn { margin-top: 20px; }
.appointment-phone h3 { margin-top: 0; }

.degree-line { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: normal; color: var(--ink-soft); }
.h2-visual { font-family: var(--font-display); letter-spacing: var(--track-display); }
.h3-visual { font-family: var(--font-serif); font-weight: 500; }

@media (max-width: 980px) {
  .article-layout, .page-with-toc { grid-template-columns: 1fr; }
  .page-toc, .article-nav { position: static; }
  .page-toc ul, .page-toc ol, .reading-toc ol, .reading-toc ul { border-left: 0; }
  .page-toc a, .reading-toc a { border-left: 0; padding-left: 0; }
  .differentiator { grid-template-columns: 1fr; }
  .differentiator__photo { max-width: 260px; }
  .appointment-phone { grid-template-columns: 1fr; }
  .service-lines > a { grid-template-columns: 1fr 40px; }
  .service-lines > a p { display: none; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__mark { max-width: 130px; }
}

/* ==========================================================================
   Pre-final audit fixes (2026-09-28)
   ========================================================================== */

/* Booking pair: Call to Schedule + Request a callback, at the top of service pages */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-actions .btn { margin: 0; }
.editorial-hero__intro .hero-actions { margin-top: 18px; }
#next-step .hero-actions { margin-block: 20px 12px; }

/* Procedure hero: text centred beside a framed 4:3 photo with the gold edge; clear gap before the short version */
.procedure-hero__grid { align-items: center; }
.procedure-hero { padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(28px, 4vw, 48px); }
.procedure-hero__grid > img {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  border-left: clamp(10px, 1.4vw, 20px) solid var(--yellow); border-radius: 0;
}
[data-page="services-pediatric-ent-tonsils-adenoids"] .procedure-hero__grid > img { object-position: 50% 30%; }
[data-page="services-pediatric-ent-ear-tubes"] .procedure-hero__grid > img { object-position: 50% 40%; }
.proc-hero .hero-actions { margin-bottom: clamp(20px, 3vw, 36px); }

/* Phone breadcrumb never runs into the label below it */
@media (max-width: 760px) {
  .breadcrumb, .breadcrumbs { margin-bottom: 18px; }
  .breadcrumb ol { row-gap: 4px; }
  .procedure-hero, .editorial-hero, .hub-hero, .page-hero, .article-hero { padding-top: 12px; }
}

/* Long pages with a table of contents: the article column may not push the page wider than the screen */
.page-with-toc > * { min-width: 0; }
@media (max-width: 900px) { .page-with-toc { grid-template-columns: minmax(0, 1fr); } }

/* Turbinate techniques table: stacked cards on phones */
@media (max-width: 640px) {
  .technique-table table, .technique-table tbody, .technique-table tr, .technique-table td { display: block; width: 100%; }
  .technique-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .technique-table tr { border: 1px solid var(--rule-strong, #c9c2bb); padding: 14px 16px; margin-bottom: 12px; background: var(--white); }
  .technique-table td { border: 0; padding: 4px 0; }
  .technique-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
  .technique-table td:first-child { font-weight: 700; color: var(--navy); }
  .anatomy-figure { overflow-x: auto; }
  .anatomy-figure img { min-width: 620px; }
}

/* Long-form pages (blog, legal): headings get room; the hero no longer leaves a dead gap */
.article-body h2, .legal-content h2 { margin-top: clamp(36px, 4vw, 56px); font-size: clamp(24px, 2.4vw, 32px); }
.article-body > h2:first-child, .legal-content > h2:first-child { margin-top: 0; }
.article-hero + .section, .page-hero + .section, .legal-hero + .section { padding-top: clamp(8px, 2vw, 24px); }
.legal-content address { margin-bottom: 1.4em; font-style: normal; }
.legal-toc { margin: 8px 0 40px; padding: 20px 24px; background: var(--mint); border-left: 4px solid var(--yellow); }
.legal-toc__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2 260px; column-gap: 32px; }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.article-meta { color: var(--muted, #51606b); }

/* Blog index: one grid */
.blog-list { margin-top: clamp(40px, 5vw, 64px); }
.blog-list__title { font-size: var(--h2-sm, 32px); margin-bottom: 20px; }
.blog-featured { grid-template-columns: 1fr !important; }

/* "Connected to your care" links: separate items, internal arrow */
.related-editorial .reading-link { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-strong, #c9c2bb); text-decoration: none; }
.related-editorial .reading-link::after { content: "→"; color: var(--navy); }
.related-editorial .reading-link:hover { color: var(--green); }
.related-editorial > div:last-child { display: flex; flex-direction: column; border-top: 1px solid var(--rule-strong, #c9c2bb); }
.references, details.references, details.source-note:last-child { margin-bottom: clamp(40px, 5vw, 64px); }
.related-editorial .reading-link { width: 100%; max-width: 620px; }

/* Clickable symptom cards look clickable */
a.condition-card { position: relative; padding-bottom: 44px; }
a.condition-card::after { content: "→"; position: absolute; left: 24px; bottom: 16px; font-weight: 700; color: var(--navy); transition: transform .2s ease; }
a.condition-card:hover::after { transform: translateX(4px); }
.service-card-grid a.card, .area-grid a.card { position: relative; }

/* CT example: a sensible size until the clean export arrives */
.clinical-figure img[src*="contact-point-ct"] { max-width: min(420px, 100%); margin-inline: auto; display: block; }

/* Allergy Testing: patient-style skin test photo, kept to a readable column */
.clinical-figure--photo { max-width: 520px; margin-inline: auto; }
.clinical-figure--photo img { width: 100%; height: auto; display: block; }

/* Ears hub: line art in the photo frame until the microscope photo exists */
.hub-hero__art-frame { background: var(--mint); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.hub-hero figure img.hub-hero__art { width: 42%; height: auto; border-radius: 0; }

/* Homepage reviews */
.home-reviews__grid { margin-top: 28px; }
.home-reviews__grid .testimonial-card { margin: 0; }
.home-reviews__note { margin-top: 18px; max-width: 68ch; }
@media (min-width: 901px) { .home-reviews .testimonial-grid--nine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* About: split hero like the rest of the site; badge in the credentials; clinician row */
.about-hero .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.about-hero figure { position: relative; margin: 0; }
.about-hero figure img { width: 100%; height: auto; border-left: clamp(10px, 1.4vw, 20px) solid var(--yellow); }
.about-hero figure::before { display: none; }
@media (max-width: 900px) { .about-hero .container { grid-template-columns: 1fr; } .about-hero figure { max-width: 520px; } }
.credential-badge { display: block; width: clamp(110px, 10vw, 140px); height: auto; margin-top: 10px; }
.team-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-self: center; max-width: 620px; }
@media (max-width: 600px) {
  .team-mini { grid-template-columns: 1fr; gap: 12px; }
  .team-mini__person { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; align-items: center; }
  .team-mini__person img { grid-row: span 2; margin: 0; }
  .team-mini__name { align-self: end; }
  .team-mini__role { align-self: start; }
}
.team-mini__person { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.team-mini__person img { width: 100%; height: auto; border: 1px solid var(--rule-strong, #c9c2bb); background: #fff; margin-bottom: 8px; }
.team-mini__name { font-family: var(--font-display, Georgia, serif); font-size: 16px; line-height: 1.25; color: var(--navy); }
.team-mini__role { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.team-mini__person:hover .team-mini__name { color: var(--green); }

/* ==========================================================================
   One visual system for service pages (2026-09-29)
   ========================================================================== */
/* Photo tops share one proportion; text tops share one layout */
.procedure-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(30px, 5vw, 80px); }
.hub-hero .lead { max-width: 56ch; }
.editorial-hero__intro .lead + p { margin-top: 0; }
@media (max-width: 900px) { .procedure-hero__grid { grid-template-columns: 1fr; } }

/* Section numbers retired: the "On this page" menu does that job */
.section-number { display: none !important; }

/* Related band: one arrow style (the old ↗ spans are hidden; CSS adds →) */
.related-editorial .reading-link span[aria-hidden] { display: none; }
.related-editorial .reading-link > span { flex: 1; }

/* Voice & Throat feature box without its photo */
.voice-feature--text { display: block; max-width: 760px; }
.voice-feature--text > div { max-width: none; }

/* Text tops: headline and intro both start at the top (long intros no longer leave the headline floating) */
.editorial-hero__grid { align-items: start; }

/* Related band: heading left, links right on desktop; compact */
.related-editorial { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 0; }
.related-editorial h2 { margin-bottom: 0; }
.related-editorial .reading-link { max-width: none; }
@media (max-width: 900px) { .related-editorial { grid-template-columns: 1fr; } }
.section--alt:has(> .related-editorial) { padding-block: clamp(40px, 5vw, 72px); }

/* Navy "Your next step" card: same width, tight text stack, buttons centred on the right */
.section:has(> .container > .cta-block) { padding-block: clamp(40px, 5vw, 72px); }
.section > .container > .cta-block { margin: 0; }
.cta-block { row-gap: 10px; }
.cta-block > .eyebrow { grid-column: 1; margin: 0 0 6px; }
.cta-block h2 { margin-bottom: 6px; }
/* the buttons span the whole text stack instead of stretching its first row */
.cta-block > .cta-block__actions { grid-row: 1 / span 3; align-self: center; }
@media (max-width: 900px) { .cta-block > .cta-block__actions { grid-row: auto; } }
.cta-block + .medical-review, .section:has(> .container > .cta-block) + .medical-review { margin-top: 0; }

/* Long procedure pages: every section heading gets the same room above it */
.page-with-toc > div > h2, .page-with-toc > div > section > h2 { margin-top: clamp(36px, 4vw, 56px); }
.page-with-toc > div > h2:first-child, .page-with-toc > div > section:first-child > h2:first-child { margin-top: 0; }
.voice-summary { margin-top: 0; margin-bottom: clamp(32px, 4vw, 56px); }
.voice-summary h2 { margin-bottom: 10px; }
/* Text tops with a second intro paragraph: the second one is body size, so the right column stays compact */
.editorial-hero__intro .lead ~ p:not(.lead) { font-size: 17px; line-height: 1.55; }

/* rc3-motion.css */
/* ==========================================================================
   RC v3 — Motion
   Rules this layer follows:
   1. Nothing is hidden unless JavaScript is running (.js on <html>).
   2. Every effect is disabled under prefers-reduced-motion.
   3. No scroll hijacking, no parallax that moves text, no autoplay.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .75s var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Keep completed entrance motion from overriding the intentional card lift. */
.js .symptom-path[data-reveal].is-visible:hover,
.js .rc-service-card[data-reveal].is-visible:hover,
.js a.card[data-reveal].is-visible:hover,
.js a.condition-card[data-reveal].is-visible:hover,
.js a.procedure-card[data-reveal].is-visible:hover,
.js a.blog-card[data-reveal].is-visible:hover { transform: translateY(-7px); }

/* Figures wipe in from the left edge — the mockup's image transition. */
.js [data-wipe] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .95s var(--ease-out);
}
.js [data-wipe].is-visible { clip-path: inset(0); }

/* Staggered children inside a grid */
.js [data-reveal][data-delay="1"] { transition-delay: 70ms; }
.js [data-reveal][data-delay="2"] { transition-delay: 140ms; }
.js [data-reveal][data-delay="3"] { transition-delay: 210ms; }

/* --- Building photographs: slow drift while the band scrolls -------------- */

.rc3-building {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.rc3-building img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* The drift is applied by motion.js as a CSS variable, so a failure to load
   the script simply leaves the photograph still and correctly framed. */
.rc3-building[data-parallax] img {
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.08);
}

/* Full-width location band */
.rc3-building--band {
  height: clamp(260px, 38vw, 460px);
}

/* Photograph paired with a location card */
.rc3-building--inset {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-strong);
}
.rc3-building--inset img { transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.rc3-building--inset:hover img { transform: scale(1); }

/* Yellow spine, matching the hero treatment */
.rc3-building::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: clamp(9px, 1.4vw, 20px);
  background: var(--yellow);
}

/* Two-up office band */
.rc3-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.rc3-locations .rc3-building { height: clamp(240px, 30vw, 420px); }
.rc3-locations .rc3-building:nth-child(2)::before { background: var(--aqua); }

@media (max-width: 760px) {
  .rc3-locations { grid-template-columns: 1fr; }
  .rc3-locations .rc3-building { height: clamp(210px, 52vw, 300px); }
}

/* --- Editorial photography inside clinical pages -------------------------- */

.rc3-figure {
  margin-block: clamp(28px, 3.4vw, 46px);
  position: relative;
  overflow: hidden;
  background: var(--mint);
}
.rc3-figure img { width: 100%; }

/* Full-container band used where a page needs one strong image near the top. */
.rc3-figure--band {
  position: relative;
  aspect-ratio: 2.4 / 1;
  margin-block: 0 clamp(30px, 4vw, 52px);
  background: var(--navy);
}
.rc3-figure--band img { height: 100%; object-fit: cover; }
.rc3-figure--band::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: clamp(9px, 1.4vw, 20px);
  background: var(--yellow);
}
.rc3-figure--band[data-parallax] img {
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.06);
  will-change: transform;
}
@media (max-width: 620px) { .rc3-figure--band { aspect-ratio: 16 / 10; } }

/* --- In-page video: click-to-play facade --------------------------------- */
/* No third-party request is made until the visitor presses play. */

.rc3-video {
  position: relative;
  margin-block: clamp(28px, 3.4vw, 46px);
  aspect-ratio: 16 / 9;
  background: var(--navy);
  overflow: hidden;
}
.rc3-video img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.rc3-video iframe { width: 100%; height: 100%; border: 0; }
.rc3-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rc3-video__play::after {
  content: "";
  width: clamp(64px, 8vw, 92px);
  height: clamp(64px, 8vw, 92px);
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: scale(.82);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) ease;
}
.rc3-video__play:hover::after { transform: scale(1); background: var(--aqua); }
.rc3-video__play:focus-visible { outline: 3px solid var(--yellow); outline-offset: -6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-wipe] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rc3-building[data-parallax] img,
  .rc3-figure--band[data-parallax] img { transform: none; }
  .home-hero__figure img { transform: none; }
  .btn:hover, .symptom-path:hover, a.card:hover, a.condition-card:hover,
  a.procedure-card:hover, a.blog-card:hover { transform: none; }
}

/* Click-to-play with our own poster artwork: show it at full strength (the photo version is dimmed). */
.rc3-video--poster img { opacity: 1; display: block; }
.rc-resource-panel .rc3-video, .pnn-video-card .rc3-video { margin-block: clamp(18px, 2vw, 26px) 0; }
.rc3-video .rc-video__fallback { position: absolute; inset: auto 16px 14px; color: var(--white); font-weight: 600; }
.pnn-video-card .rc3-video + .pnn-video-card__note, .rc-resource-panel .rc3-video + .source-note { margin-top: 14px; padding-top: 0; }