/* ==========================================================================
   Client revision, September 2026.
   Loaded after site.css and inner-redesign.css. Nothing above this file was
   edited, so the approved design is still readable on its own; every rule
   here answers a numbered item on the client's change list.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1, 13. Contact details, given room and weight
   -------------------------------------------------------------------------- */

/* The header keeps Visit, Call and Menu reachable at every width, with a real
   label under each mark rather than an icon a visitor has to guess at. */
.icon-btn--label {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; min-width: 56px; min-height: 52px; padding: 0.3rem 0.5rem;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  color: var(--ink); background: #fff;
}
.icon-btn--label span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; }
.icon-btn--label:hover { border-color: var(--ortho); color: var(--ortho); }
.nav-toggle { flex-direction: column; gap: 0.15rem; min-width: 56px; min-height: 52px; }
.nav-toggle span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; }

/* The utility bar's phone number is the practice's own number: it reads as a
   number, not as small grey furniture. */
.util { font-size: 0.88rem; }
.util a { color: rgba(255, 255, 255, 0.82); min-height: 40px; }
.util__primary a:last-child { font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.util__primary a:last-child:hover { color: var(--cyan); }

/* Footer contact block: the number is the largest thing in it. */
.footer__phone { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; }
.site-footer a[href^="mailto:"], .site-footer a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.footer__social a { width: 46px; height: 46px; border-color: rgba(255, 255, 255, 0.3); }
.footer__social a:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.footer__social svg { width: 20px; height: 20px; }

/* Contact tiles: one consistent call to action per tile, tappable everywhere. */
.ctile__link, .ctile .tlink { min-height: 44px; display: inline-flex; align-items: center; }
.ctile__v { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   4. The booking button, given space of its own
   -------------------------------------------------------------------------- */
.cta-desktop { min-height: 52px; padding-inline: 1.6rem; font-size: 0.97rem; }
.book-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.book-cta .btn { min-height: 56px; padding-inline: 1.9rem; }
.book-cta__note { font-size: var(--fs-sm); color: var(--body); }

/* --------------------------------------------------------------------------
   8, 9. Nothing scrolls sideways on a phone
   -------------------------------------------------------------------------- */
.rail {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0;
  scroll-snap-type: none;
}
.rail > * { flex: none; scroll-snap-align: none; }
.rail--staff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.rail--staff > * { flex: none; }
.subnav, .premium-inner .subnav { overflow-x: visible; }
.subnav ul, .premium-inner .subnav ul {
  flex-wrap: wrap; justify-content: flex-start; min-width: 0;
  overflow-x: visible; margin-inline: 0; padding-inline: 0; gap: 0.15rem 0.5rem;
}
.subnav a, .premium-inner .subnav a { min-height: 44px; padding: 0 0.7rem; }

@media (min-width: 40rem) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail--staff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .rail--staff { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .subnav ul { flex-wrap: nowrap; }
}

/* A doctor on a phone is a photograph, a name and one link. The biography and
   the credential list belong on the profile page, which is one tap away. */
@media (max-width: 47.99rem) {
  .person.person--compact { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: center; }
  .person.person--compact > a { display: block; }
  .person.person--compact .person__photo { aspect-ratio: 1 / 1.1; margin: 0; width: 92px; }
  .person.person--compact .person__detail { display: none; }
  .person.person--compact h3 { font-size: 1.1rem; margin: 0; }
  .person.person--compact .tag { margin-bottom: 0.35rem; }
  .person.person--compact .tlink { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   7. Shorter on a phone: the detail is behind a control, not removed
   -------------------------------------------------------------------------- */
.readmore { margin-top: 1rem; }
.readmore > summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-size: 0.93rem; font-weight: 700; color: var(--ortho); cursor: pointer; list-style: none;
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::after {
  content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.readmore[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.readmore > summary:focus-visible { outline: 2px solid var(--ortho); outline-offset: 3px; border-radius: 4px; }
.readmore__body { padding-top: 0.85rem; }

@media (min-width: 64rem) {
  /* With room for everything the panel opens itself, and the control it no
     longer needs is hidden. Without JavaScript the control stays and works. */
  .readmore[data-auto="open"] > summary { display: none; }
  .readmore[data-auto="open"] .readmore__body { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   10, 11. The header and the booking bar stay put while the page moves
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__in { min-height: 62px; gap: 0.5rem; }

/* On a narrow phone the practice name stacks under the mark, so the words
   stay full size and the four header controls still fit on one line. */
.brand { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.brand img, .brand .brand__logo { width: 104px; height: auto; }
.brand__sep { display: none; }
.brand__desc { font-size: 0.56rem; line-height: 1.25; letter-spacing: 0.05em; max-width: 8.5rem; }
.header-actions { gap: 0.3rem; flex-shrink: 0; }
.icon-btn--label, .nav-toggle { min-width: 46px; padding-inline: 0.3rem; }
.icon-btn--label span, .nav-toggle span { font-size: 0.6rem; letter-spacing: 0.02em; }
.brand { min-width: 0; }

@media (min-width: 26rem) {
  .brand img, .brand .brand__logo { width: 118px; }
  .brand__desc { max-width: 10rem; }
  .icon-btn--label, .nav-toggle { min-width: 54px; }
  .header-actions { gap: 0.5rem; }
}
@media (min-width: 40rem) {
  .brand { flex-direction: row; align-items: center; gap: 0.7rem; }
  .brand__sep { display: block; }
  .brand img, .brand .brand__logo { width: 132px; }
  .brand__desc { font-size: 0.62rem; max-width: none; }
}
@media (min-width: 64rem) {
  .brand img, .brand .brand__logo { width: 158px; }
}

.actionbar { grid-template-columns: 88px 1fr; gap: 0.75rem; }
.actionbar__call { flex-direction: column; gap: 0.1rem; }
.actionbar__call span { font-size: 0.68rem; font-weight: 700; }
.actionbar__book {
  background: var(--ortho); color: #fff; font-size: 1rem; font-weight: 700;
  box-shadow: 0 10px 24px -14px rgba(70, 45, 136, 0.9);
}
.actionbar__book:hover { background: var(--ortho-dark); color: #fff; }

/* The subnav cannot sit under the header now that the header is sticky. */
.subnav { top: 62px; }
@media (min-width: 64rem) { .subnav { top: 88px; } }

/* --------------------------------------------------------------------------
   6. The rating leads the reviews, not the other way round
   -------------------------------------------------------------------------- */
.rating-lead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
}
.rating-lead__score { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.rating-lead__meta { font-size: var(--fs-sm); color: var(--body); }
.section--ink .rating-lead__meta { color: rgba(255, 255, 255, 0.72); }
.quote__avatar img, .rev__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.quote__avatar, .rev__av { overflow: hidden; }

/* --------------------------------------------------------------------------
   12. Type, spacing and buttons on one scale
   -------------------------------------------------------------------------- */
h1, .ihero h1 { text-wrap: balance; }
h2 { text-wrap: balance; }
.lede { text-wrap: pretty; max-width: 62ch; }
p { text-wrap: pretty; }

/* Three sizes of button, nothing in between. The interior stylesheet scopes
   its own button height under `.premium-inner`, so that selector is matched
   here too rather than left to win on specificity. */
.btn, .premium-inner .btn { min-height: 48px; }
.btn--lg, .premium-inner .btn--lg { min-height: 56px; font-size: 1.01rem; padding-inline: 1.8rem; }
.btn--sm, .premium-inner .btn--sm { min-height: 40px; font-size: 0.88rem; padding-inline: 1.1rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }

/* Small labels have a floor. Below about 12.5px a label stops being readable
   on a phone, and several of these carry real information. */
.eyebrow, .premium-inner .eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; }
.fact__k, .ctile__note, .post__k, .rev__meta, .resource__by { font-size: 0.79rem; }
.chip, .carrier { font-size: 0.84rem; }
@media (min-width: 64rem) {
  .eyebrow, .premium-inner .eyebrow { font-size: 0.78rem; }
}

/* Groups of three or four share a height, so their buttons land on one line.
   Scoped to cards: a person card and a treatment tile lay themselves out. */
.grid--3 > .card, .grid--4 > .card,
.grid--3 > .svc, .grid--4 > .svc { display: flex; flex-direction: column; }
.grid--3 > .card > .card__body, .grid--4 > .card > .card__body { flex: 1; display: flex; flex-direction: column; }
.grid--3 > .card .card__body > :last-child, .grid--4 > .card .card__body > :last-child { margin-top: auto; }

/* --------------------------------------------------------------------------
   5. Insurance and financing
   -------------------------------------------------------------------------- */
.carriers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.carrier {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
}
.carrier small { font-weight: 500; color: var(--body); }

.calc { display: grid; gap: 1.25rem; }
.calc__row { display: grid; gap: 0.4rem; }
.calc__row label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--body); }
.calc select, .calc input[type="range"] { width: 100%; }
.calc select {
  min-height: 48px; padding: 0 0.9rem; border: 1px solid var(--line);
  border-radius: var(--r-ctl); background: #fff; font: inherit; color: var(--ink);
}
.calc input[type="range"] { min-height: 44px; accent-color: var(--ortho); }
.calc__out {
  display: grid; gap: 0.3rem; padding: 1.4rem; border-radius: var(--r-card);
  background: var(--ortho-tint); text-align: center;
}
.calc__figure { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ortho); }
.calc__caption, .calc__note { font-size: var(--fs-sm); color: var(--body); }
.calc__note { margin-top: 0.85rem; }
@media (min-width: 48rem) {
  .calc { grid-template-columns: 1fr 1fr; align-items: end; }
  .calc__out { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   12 (continued). The last of the small type and small targets
   -------------------------------------------------------------------------- */

/* Breadcrumbs and facts labels carry real information, so they read at the
   same floor as everything else, and the breadcrumb links are tappable. */
.breadcrumbs, .premium-inner .breadcrumbs { font-size: 0.82rem; align-items: center; }
.breadcrumbs a, .premium-inner .breadcrumbs a,
.breadcrumbs > span { display: inline-flex; align-items: center; min-height: 40px; }
.fact__k, .premium-inner .fact__k { font-size: 0.79rem; }

/* The smallest labels in the set. Everything else in this family is an
   uppercase tracked label at a size the approved design chose deliberately;
   these two were below the point where the tracking stops being readable. */
.person__chip, .premium-inner .person__chip { font-size: 0.72rem; }
span.eyebrow, .premium-inner span.eyebrow { font-size: 0.74rem; }
.panel__k, .premium-inner .panel__k { font-size: 0.74rem; }

/* Footer legal links sit close together; each one gets its own target. */
.footer__legal nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__legal nav { gap: 0 1.15rem; }