/* Balanced sections below the approved hero. Use natural document height:
   no cropping, scaling, scroll snapping or internal content scroll areas. */
main > .section {
  --section-space: clamp(40px, 6vh, 64px);
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 1600px) / 2));
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
main > .section h2 {
  font-size: clamp(36px, 3.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
main > .section h3 {font-size: clamp(27px, 2.5vw, 38px);line-height: 1.15}
main > .section .section-heading {gap: 40px;margin-bottom: 28px;align-items: end}
main > .section .section-heading .eyebrow,
main > .section .section-aside .eyebrow {margin-bottom: 14px}
main > .section .section-heading > p {font-size: 16px;line-height: 1.55;max-width: 440px}
main > .section .button {min-height: 48px;padding: 12px 24px;font-size: 15px;gap: 24px}
main > .section .text-link {min-height: 46px;font-size: 15px;padding: 11px 20px}

/* The questions, their introduction and the selected answer form one spread,
   instead of a large heading stacked above a second full-height panel. */
main > .conversation-section {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr);
  gap: 18px 48px;
  align-items: start;
  --section-space:clamp(32px,4.5vh,42px);
}
.conversation-section .conversation-heading {grid-column: 1;display: block;margin: 0}
.conversation-section .conversation-heading > .eyebrow {padding: 0;margin-bottom: 12px}
.conversation-section .conversation-heading > p:last-child {
  padding: 0;margin: 18px 0 0;max-width: 380px;font-size: 16px;line-height: 1.55;justify-self: start;
}
.conversation-section .conversation-workspace {display: contents}
.conversation-section .concern-tabs {grid-column: 1;grid-row: 2;margin: 0}
.conversation-section .concern-tabs button {
  min-height: 56px;padding: 11px 0;font-size: 16px;line-height: 1.35;
  grid-template-columns: 34px minmax(0, 1fr) 20px;gap: 12px;
}
.conversation-section .concern-tabs button > span:first-child {
  display:grid;place-items:center;width:32px;height:32px;padding:0;align-self:center;border:1px solid var(--line);border-radius:50%;
  color:var(--accent);font-size:11px;font-weight:600;transition:background-color .2s,border-color .2s,color .2s;
}
.conversation-section .concern-tabs button[aria-selected=true] > span:first-child {background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.accordion-chevron {display:grid;place-items:center;width:24px;height:24px;color:var(--accent);transition:transform .22s var(--ease)}
.accordion-chevron svg {display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.conversation-section .concern-tabs button .accordion-chevron,
.patient-section .journey-tabs button .accordion-chevron {transform:rotate(-90deg)}
.conversation-section .concern-panel {
  grid-column: 2;grid-row: 1 / span 2;align-self: stretch;
  min-height: 0;overflow: hidden;border-radius: 2px 2px 32px 2px;
}
.conversation-section .concern-panel[hidden],
.patient-section .journey-panel[hidden] {display:none!important}
.conversation-section .concern-answer {min-height: 0;padding: 26px 30px 27px}
.conversation-section .answer-meta {gap: 18px;margin-bottom: 18px;font-size: 11px}
.conversation-section .answer-number {width: 44px;font-size: 38px}
.conversation-section .concern-answer h3 {font-size: clamp(28px, 2.45vw, 38px);line-height: 1.15}
.conversation-section .concern-answer > p {font-size: 16px;line-height: 1.6;max-width: none;margin-top: 18px}
.conversation-section .concern-answer > .concern-checklist-label {margin-top:24px;font-size:10px;line-height:1.5;color:var(--muted)}
.conversation-section .concern-steps {margin: 18px 0 18px}
.conversation-section .concern-steps li {font-size: 14px;line-height: 1.45;padding-top: 14px;padding-right: 14px}
.conversation-section .concern-answer > .concern-first-step {
  margin:0;padding:15px 0 0;border-top:1px dashed var(--line);color:var(--text);font-size:14px;line-height:1.5;
}
/* The two columns are independent: opening an item never stretches its
   neighbour. On mobile they return to one continuous, numbered sequence. */
.procedures-section .procedure-list {
  display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));column-gap: 48px;
  border-top: 0;align-items: start;
}
.procedures-section .procedure-column {min-width:0}
.procedures-section .procedure-row {
  position:relative;border-top:1px dashed var(--line);border-bottom:0;min-width:0;
  transition:background-color .24s var(--ease),border-color .24s var(--ease),padding .24s var(--ease),margin .24s var(--ease);
}
.procedures-section .procedure-column .procedure-row:last-child {border-bottom:1px dashed var(--line)}
.procedures-section .procedure-row summary {
  grid-template-columns: 42px minmax(0, 1fr) 32px;gap: 4px 16px;
  padding: 12px 0;min-height: 84px;
}
.procedures-section .procedure-num {
  grid-column:1;grid-row:1 / span 2;align-self:center;display:grid;place-items:center;
  width:40px;height:40px;border:1px solid color-mix(in srgb,var(--accent) 72%,var(--line));border-radius:50%;
  background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font-size:12px;font-weight:600;
  transition:border-color .24s var(--ease),background-color .24s var(--ease),color .24s var(--ease);
}
.procedures-section .procedure-name {grid-column: 2;grid-row: 1;font-size: clamp(22px, 1.9vw, 29px);line-height: 1.25}
.procedures-section .procedure-hint {grid-column: 2;grid-row: 2;max-width: none;font-size: 15px;line-height: 1.45}
.procedures-section .procedure-sign {
  grid-column:3;grid-row:1 / span 2;width:32px;height:32px;border:0;border-radius:0;
  display:grid;place-items:center;color:var(--accent);transition:transform .3s var(--ease);transform:rotate(0);
}
.procedures-section .procedure-sign svg {width:28px;height:28px;stroke:currentColor;stroke-width:1.8}
.procedures-section .procedure-detail {display:block;padding:4px 20px 25px 36px}
.procedures-section .procedure-detail p {font-size:15px;line-height:1.65;max-width:680px}
.procedures-section .procedure-detail a {margin:18px 0 0;white-space:normal;border:1px solid var(--line);border-radius:999px;padding:10px 18px}
/* Detail pages remain intact, but their homepage entry points stay hidden until
   the separate page-filling phase is ready for publication. */
.procedures-section .procedure-more {display:none!important}
.procedures-section .procedure-row[open] {
  margin-inline:-18px;padding-inline:18px;background:color-mix(in srgb,var(--wash) 72%,transparent);
  border-top-color:var(--accent);border-radius:0 0 24px 0;
}
.procedures-section .procedure-row[open] .procedure-num,
.procedures-section .procedure-row[open] .procedure-name {color:var(--accent)}
.procedures-section .procedure-row[open] .procedure-num {border-color:var(--accent);background:var(--accent);color:var(--accent-text)}
.procedures-section .procedure-row[open] .procedure-sign {transform:rotate(180deg)}
.procedures-section .procedure-row[open] .procedure-detail {animation:procedure-reveal .34s var(--ease) both}
.procedures-section .procedure-row[open] .procedure-detail a:hover {background:var(--text);border-color:var(--text);color:var(--bg)}
@keyframes procedure-reveal {from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.procedures-section .price-note {grid-template-columns: 220px minmax(0, 1fr);gap: 36px;margin-top: 26px;padding-top: 22px;border-top: 1px dashed var(--line);align-items: start}
.procedures-section .price-note > span {font-size: 24px;line-height: 1.3}
.procedures-section .price-note p {font-size: 16px;line-height: 1.5;max-width: none}

main > .patient-section {--section-space:clamp(24px,3.4vh,32px)}
main > .patient-section .section-heading {margin-bottom:14px}
main > .patient-section .section-heading h2 {font-size:clamp(34px,2.8vw,40px);line-height:1}
.patient-section .journey {margin-top: 0;display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,1.8fr);gap:40px;align-items:start}
.patient-section .journey-tabs {display:grid;grid-template-columns:1fr;border-bottom:0;gap:8px}
.patient-section .journey-tabs button {display:grid;grid-template-columns:24px minmax(0,1fr) 22px;font-size:17px;padding:17px 18px;min-height:64px;gap:14px;border:1px solid var(--line);border-radius:3px;text-align:left;transition:background-color .18s,border-color .18s}
.patient-section .journey-tabs .journey-tab-label {font-size:inherit}
.patient-section .journey-tabs .journey-tab-arrow {font-size:22px;transition:transform .18s}
.patient-section .journey-tabs button:hover,.patient-section .journey-tabs button[aria-selected=true] {background:var(--wash);border-color:var(--accent);color:var(--text)}
.patient-section .journey-tabs button:hover .journey-tab-arrow {transform:translateX(3px)}
.patient-section .journey-panel {grid-template-columns:42px minmax(220px,.88fr) minmax(285px,1.12fr);gap:22px;min-height:304px;padding:20px;background:var(--wash);border:1px solid var(--line);border-radius:3px 3px 28px 3px;align-items:stretch;overflow:hidden}
.patient-section .journey-number {font-size:42px;line-height:1;align-self:start;opacity:.85;padding-top:6px}
.patient-section .journey-content {min-width:0;padding:6px 0;align-self:center}
.patient-section .journey-panel .eyebrow {margin-bottom: 9px}
.patient-section .journey-panel h3 {font-size:clamp(25px,2vw,32px);line-height:1.15}
.patient-section .journey-panel > .journey-content > p:not(.eyebrow) {max-width:530px;font-size:14px;line-height:1.55;margin-top:13px}
.patient-section .journey-note {max-width:530px;margin-top:16px;padding-top:13px;gap:12px}
.patient-section .journey-note p {font-size:13px;line-height:1.5}
.patient-section .journey-note[hidden] {display:none}
.patient-section .journey-visual {min-width:0;align-self:stretch}
.patient-section .journey-photo {height:300px;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;margin:0;background:var(--surface);border-radius:2px 2px 22px 2px;overflow:hidden}
.patient-section .journey-photo-frame {min-height:0;overflow:hidden;background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.patient-section .journey-photo img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.98);transition:transform .55s var(--ease),filter .35s var(--ease)}
.patient-section .journey-photo[data-media="dsc00032"] img {object-position:center 52%}
.patient-section .journey-photo[data-media="diagnostic-jaw"] img {object-position:center}
.patient-section .journey-photo[data-media="treatment-plan-handoff"] img {object-position:center 48%}
.patient-section .journey-photo[data-media="dsc00154"] img {object-position:center 58%}
.patient-section .journey-photo:hover img {transform:scale(1.025);filter:saturate(.98) contrast(1)}
.patient-section .journey-photo figcaption {display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;font-size:11px;line-height:1.38;color:var(--muted)}
.patient-section .journey-media-label {color:var(--accent);font-size:9px;font-weight:650;letter-spacing:.11em;white-space:nowrap;padding-top:2px}

@media(min-width:761px) and (max-width:1100px) {
  main > .conversation-section {grid-template-columns: minmax(220px, .85fr) minmax(0, 1.7fr);column-gap: 24px}
  .conversation-section .concern-answer {padding: 22px}
  .procedures-section .procedure-list {column-gap: 24px}
  .procedures-section .price-note {grid-template-columns: 180px minmax(0, 1fr);gap: 24px}
  .patient-section .journey {grid-template-columns:minmax(200px,1fr) minmax(0,1.6fr);gap:24px}
  .patient-section .journey-panel {grid-template-columns:42px minmax(0,1fr);gap:12px 18px;padding:20px}
  .patient-section .journey-number {font-size:34px}
  .patient-section .journey-content,.patient-section .journey-visual {grid-column:2}
  .patient-section .journey-visual {margin-top:2px}
  .patient-section .journey-photo {min-height:220px;height:220px}
}
@media(max-width:760px) {
  main > .section {padding-top: 34px;padding-bottom: 34px}
  main > .section h2 {font-size: clamp(28px, 7.5vw, 36px)}
  main > .section .section-heading {display: block;margin-bottom: 22px}
  main > .section .section-heading > p {margin-top: 14px;max-width: none}
  main > .conversation-section {display: block}
  .conversation-section .conversation-heading {margin-bottom: 22px}
  .conversation-section .conversation-workspace {display:flex;flex-direction:column;gap:8px}
  .conversation-section .concern-tabs {display:contents}
  .conversation-section .concern-tabs button {
    order:var(--accordion-order);width:100%;min-height:58px;padding:12px 14px;font-size:15px;
    border:1px solid var(--line);border-radius:3px;background:transparent;
  }
  .conversation-section .concern-tabs button[aria-selected=true] {
    border-color:var(--accent);border-radius:3px 3px 0 0;background:var(--wash);
  }
  .conversation-section .concern-tabs button .accordion-chevron,
  .patient-section .journey-tabs button .accordion-chevron {transform:none}
  .conversation-section .concern-tabs button[aria-selected=true] .accordion-chevron,
  .patient-section .journey-tabs button[aria-selected=true] .accordion-chevron {transform:rotate(180deg)}
  .conversation-section .concern-panel {
    order:var(--accordion-order);margin-top:-8px;border:1px solid var(--accent);border-top:0;
    border-radius:0 0 30px 3px;overflow:hidden;
  }
  .conversation-section .concern-panel,.conversation-section .concern-answer {min-height: 0}
  .conversation-section .concern-answer {padding: 22px 20px}
  .conversation-section .concern-answer h3 {font-size: 25px}
  .conversation-section .concern-steps {gap: 5px;margin-top: 20px}
  .conversation-section .concern-steps li {font-size: 12px;padding-right: 6px}
  .procedures-section .procedure-list {grid-template-columns: 1fr}
  .procedures-section .procedure-column + .procedure-column .procedure-row:first-child {border-top:0}
  .procedures-section .procedure-name {font-size: 21px}
  .procedures-section .procedure-row summary {padding: 15px 0;min-height: 78px}
  .procedures-section .procedure-detail {padding-left: 36px;padding-right: 0}
  .procedures-section .price-note {display: block;margin-top: 18px;padding-top: 18px}
  .procedures-section .price-note p {margin: 12px 0 16px}
  .patient-section .journey {margin-top:0;display:flex;flex-direction:column;gap:8px}
  .patient-section .journey-tabs {display:contents}
  .patient-section .journey-tabs button {
    order:var(--accordion-order);width:100%;min-height:58px;padding:12px 16px;font-size:16px;
  }
  .patient-section .journey-tabs button[aria-selected=true] {border-radius:3px 3px 0 0}
  .patient-section .journey-panel {
    order:var(--accordion-order);grid-template-columns:1fr;gap:14px;min-height:0;padding:22px 20px;
    margin-top:-8px;border-top:0;border-radius:0 0 28px 3px;overflow:hidden;
  }
  .patient-section .journey-number {font-size:34px;align-self:start;padding-top:0}
  .patient-section .journey-content,.patient-section .journey-visual {grid-column:1}
  .patient-section .journey-panel h3 {font-size: 25px}
  .patient-section .journey-photo {min-height:250px;height:min(76vw,380px)}
}
@media(prefers-reduced-motion:reduce){
  .patient-section .journey-tabs button,.patient-section .journey-tab-arrow,.accordion-chevron,
  .procedures-section .procedure-row {transition:none}
  .procedures-section .procedure-row[open] .procedure-detail {animation:none}
  .patient-section .journey-photo img {transition:none}
}