/* ==========================================================================
   Client revision 3, October 2026: the home page on a phone.
   From the client's "Homepage mobile changes" document and Looms 5 to 7.
   Loaded after revision-2.css. Almost everything here is scoped to the home
   page (`.home`) and to phones (below 48rem); the exceptions are the shared
   header lockup and the H1 size, which the document asked for on every page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   The fold: a round chevron that opens a description on a phone
   (inc/template-tags.php, elite_ortho_fold_button). Folding happens only
   under `.r2-js`, set before first paint, so without JavaScript every panel
   stays open. From 48rem up nothing folds and the control is hidden.
   -------------------------------------------------------------------------- */
.fold-btn, .fold-row { display: none; }
.card__fold { align-self: stretch; }
.card__fold .fold-panel { display: grid; gap: 0.75rem; margin-top: 0.75rem; }

@media (max-width: 47.99rem) {
  .r2-js [data-fold]:not(.is-open) .fold-panel { display: none; }
  .fold-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 40px; cursor: pointer; }
  .fold-head > h2, .fold-head > h3 { margin: 0; }
  .r2-js .fold-btn {
    display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ortho); cursor: pointer;
  }
  .fold-btn::before, .fold-row::after {
    content: ""; width: 0.5rem; height: 0.5rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease;
  }
  [data-fold].is-open .fold-btn::before,
  [data-fold].is-open .fold-row::after { transform: translateY(2px) rotate(-135deg); }
  :is(.section--ink, .card--ink) .fold-btn { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); color: var(--cyan); }
  .section--ped .fold-btn, .card--ped .fold-btn { color: var(--ped); }

  .r2-js .fold-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px;
    padding: 0 1.1rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit; font-size: 0.97rem; font-weight: 700; cursor: pointer;
  }
  .fold-row::after { color: var(--cyan); }
}
@media (prefers-reduced-motion: reduce) {
  .fold-btn::before, .fold-row::after { transition: none; }
}


/* --------------------------------------------------------------------------
   A link to another page, drawn as one (elite_ortho_go_link)
   -------------------------------------------------------------------------- */
.go-link {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  min-height: 48px; padding: 0.3rem 0.35rem 0.3rem 1.1rem;
  border: 1px solid var(--line); border-radius: 0.65rem; background: #fff;
  color: var(--ink); font-size: 0.95rem; font-weight: 700; text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.go-link:hover { border-color: var(--ortho); color: var(--ortho); box-shadow: 0 10px 24px -20px rgba(26, 18, 54, 0.6); }
.go-link__ic {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 0.5rem; background: var(--ortho-tint); color: var(--ortho);
  transition: background 0.15s ease, color 0.15s ease;
}
.go-link:hover .go-link__ic { background: var(--ortho); color: #fff; }
.card--ped .go-link__ic, .section--ped .go-link__ic { background: var(--ped-tint); color: var(--ped); }
.card--ped .go-link:hover, .section--ped .go-link:hover { border-color: var(--ped); color: var(--ped); }
.card--ped .go-link:hover .go-link__ic, .section--ped .go-link:hover .go-link__ic { background: var(--ped); color: #fff; }
:is(.section--ink, .card--ink) .go-link { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); color: #fff; }
:is(.section--ink, .card--ink) .go-link__ic { background: rgba(255, 255, 255, 0.12); color: var(--cyan); }
:is(.section--ink, .card--ink) .go-link:hover { border-color: #fff; color: #fff; }
.card__body > .go-link { align-self: stretch; }
.home .lane-card__book { align-self: flex-start; }


/* --------------------------------------------------------------------------
   Home hero: the two lane buttons, the number and directions, and the team
   card with faces, names and the rating in one place
   -------------------------------------------------------------------------- */
.hero-book { display: flex; flex-direction: column; gap: 0.75rem; max-width: 27rem; margin-top: 2rem; }
.hero-book .btn--stacked { justify-content: flex-start; min-height: 66px; }
.hero-book .btn__wrap svg { flex: none; }
.hero-contact { gap: 0.6rem; margin-top: 1rem; }
.pill--dark { border-color: rgba(255, 255, 255, 0.3); background: transparent; color: #fff; box-shadow: none; }
.pill--dark svg { color: var(--cyan); }
.pill--dark:hover { border-color: #fff; color: #fff; }

.hero-team-col { margin-top: 2.5rem; }
.hero-team { padding: 1rem 1rem 1.25rem; }
.hero-team__faces { gap: 0.65rem; }
.hero-team__person { display: grid; justify-items: center; gap: 0.5rem; color: var(--ink); text-align: center; text-decoration: none; }
.hero-team__person .arch { display: block; width: 100%; }
.hero-team__person:hover .hero-team__name { color: var(--ortho); }
.hero-team__name { font-size: 0.82rem; font-weight: 700; line-height: 1.25; }
.hero-team__proof { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: center; }
.hero-team__rating { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.hero-team__rating .stars { display: inline-flex; align-items: center; }
.hero-team__rating .stars svg { display: block; }
.hero-team__rating .rating__num { font-size: 1.35rem; line-height: 1; }
.hero-team__reviews { margin-top: 0.5rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--body); }
.hero-team__reviews strong { color: var(--ink); }


/* --------------------------------------------------------------------------
   Revision 4. The real logo, which carries "& Pediatric Dentistry" itself, so
   the separate practice-name line beside it is dropped (header and footer).
   -------------------------------------------------------------------------- */
.site-header .brand__sep, .site-header .brand__desc,
.premium-inner .site-header .brand__sep, .premium-inner .site-header .brand__desc,
.site-footer .brand__sep, .site-footer .brand__desc,
.premium-inner .site-footer .brand__sep, .premium-inner .site-footer .brand__desc { display: none; }
.site-header .brand img, .site-header .brand .brand__logo,
.premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 172px; height: auto; }
@media (min-width: 64rem) {
  .site-header .brand img, .site-header .brand .brand__logo,
  .premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 212px; }
}
.site-footer .brand img, .premium-inner .site-footer .brand img { width: 196px; height: auto; }

/* Revision 4. The insurance card's actions: the booking button, then the
   link to the full page drawn as a go-to-page link, as on the service cards. */
.ins-summary .ins-card__acts { display: grid; justify-items: start; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.ins-summary .ins-card__acts .go-link { justify-self: stretch; }

/* --------------------------------------------------------------------------
   Visit card: phone, fax and email, each one line
   -------------------------------------------------------------------------- */
.loc-lines { grid-column: 1 / -1; }
.loc-lines__list { display: grid; gap: 0.1rem; margin: 0.6rem 0 0; }
.loc-lines__list > div { display: flex; align-items: center; gap: 0.75rem; min-height: 40px; }
.loc-lines__list dt { min-width: 3.4rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body); }
.loc-lines__list dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.loc-lines__list a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); }
.loc-lines__list a:hover { color: var(--ortho); }


/* --------------------------------------------------------------------------
   Reviews: on a desktop the listing link sits beside the heading; on a phone
   the reviews fold behind "Read all reviews" and the link sits under them
   -------------------------------------------------------------------------- */
.reviews-more { display: none; }


/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 47.99rem) {

  /* The header shows the logo alone; the practice name under it crowded the
     three buttons. The header is shared, so this is every page. */
  .site-header .brand__desc, .premium-inner .site-header .brand__desc { display: none; }
  .site-header .brand img, .site-header .brand .brand__logo,
  .premium-inner .site-header .brand img, .premium-inner .site-header .brand .brand__logo { width: 158px; }
  .ins-summary .ins-card__acts { justify-items: stretch; }

  /* H1 smaller, every page (the document's first item). */
  h1,
  .premium-inner .ihero__copy h1,
  .premium-inner .ihero--profile .ihero__copy h1 { font-size: clamp(1.7rem, 7.4vw, 2rem); line-height: 1.08; letter-spacing: -0.035em; }

  /* Hero: one sentence, the two lane buttons, number and directions on one row,
     then the faces card. Revision 2 put the rating above the faces; the client
     now wants the faces first. */
  .home .lede__extra { display: none; }
  .home-hero .lede { font-size: 0.97rem; line-height: 1.55; }
  .hero-book { max-width: none; gap: 0.6rem; margin-top: 1.25rem; }
  .hero-book .btn--stacked { min-height: 62px; padding: 0.7rem 1.1rem; font-size: 0.98rem; }
  .hero-book .btn__slot { font-size: 0.78rem; }
  .hero-contact { flex-wrap: nowrap; gap: 0.5rem; margin-top: 0.7rem; }
  .hero-contact .pill { flex: 1 1 0; justify-content: center; min-height: 46px; padding-inline: 0.6rem; font-size: 0.9rem; white-space: nowrap; }
  .home-hero .split--wide-left > div + div { display: block; margin-top: 1.5rem !important; }
  .hero-team { padding: 0.85rem 0.85rem 1.1rem; }
  .hero-team__faces { gap: 0.5rem; }
  .hero-team__name { font-size: 0.72rem; }
  .hero-team__reviews { font-size: 0.85rem; }

  /* The dark proof band: icon, heading and chevron on one line, the sentence
     behind the chevron. */
  .home .proof__item { align-items: flex-start; gap: 0.8rem; padding-block: 0.75rem; }
  .home .proof__item > svg { margin-top: 9px; }
  .home .proof__item > div { flex: 1; min-width: 0; }
  .home .proof__item .fold-panel { margin-top: 0.1rem; padding-right: 3.25rem; }

  /* Service cards: the description and chips fold; the booking button and the
     go-to-page link stay. */
  .home .card--ortho .card__body, .home .card--ped .card__body { gap: 0.85rem; }
  .home .lane-card__book { align-self: stretch; }

  /* Insurance: the detail folds under the heading; each way to pay folds. */
  .ins-summary .fold-head h2 { font-size: 1.5rem; }
  .pay-list__item .fold-head { min-height: 44px; }
  .pay-list__item .fold-head h3 { font-size: 1.02rem; }
  .pay-list__item { padding-block: 0.7rem; }

  /* Team: "Meet the rest of the team" is enough; the extra button goes. */
  .home .team-bios { display: none; }

  /* Treatment tiles: no more one word per line. The "Not sure where you fit?"
     tile goes on a phone and the odd tile left over sits in the middle. */
  .home .grid--svc { gap: 0.6rem; }
  .home .grid--svc > .svc { padding: 0.95rem 0.85rem; }
  .home .grid--svc > .svc h3 { font-size: 0.96rem; line-height: 1.2; letter-spacing: -0.01em; }
  .home .grid--svc > .svc p { font-size: 0.8rem; line-height: 1.45; -webkit-line-clamp: 2; }
  .home .grid--svc > .svc--cta { display: none; }
  .home .grid--svc > .svc:nth-last-child(2):nth-child(odd):has(+ .svc--cta),
  .home .grid--svc > .svc:not(.svc--cta):last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.3rem);
  }
  .home .grid--svc + .book-cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .home .grid--svc + .book-cta .btn { width: 100%; }

  /* Reviews. */
  .home .reviews-link { display: none; }
  .reviews-fold { margin-top: 0.5rem; }
  .reviews-fold .fold-panel .rail { margin-top: 1rem; }
  .reviews-more { display: flex; width: 100%; margin-top: 1rem; }

  /* Visit: the location card stays; the "Reserve a time" panel goes. */
  .home .home-book-col { display: none; }

  /* Patient resources: the title only. */
  .home .resource .eyebrow, .home .resource .resource__by { display: none; }
  .home .resource { padding: 1rem 1.1rem; }
  .home .resource .chip--planned { padding: 0.25rem 0.55rem; font-size: 0.64rem; letter-spacing: 0.05em; white-space: nowrap; }
  .home .sect-head > .go-link { align-self: stretch; }
}


/* ==========================================================================
   Revision 5: the client's final home page notes
   ========================================================================== */

/* The fixed mobile booking bar is gone from every page (footer.php), so the
   space site.css reserved for it at the bottom of the page goes too. */
body { padding-bottom: 0; }

/* Social icons in their own colours, in the top bar and the footer. The
   Facebook, Instagram and TikTok marks sit white on their brand colour;
   YouTube is its red mark on white, as the platform shows it. */
:is(.util__social, .footer__social) .social {
  display: inline-grid; place-items: center; min-height: 0; border: 0; border-radius: 50%;
  color: #fff; transition: transform 0.15s ease, filter 0.15s ease;
}
:is(.util__social, .footer__social) .social:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.util__social .social, .premium-inner .util .util__social .social { width: 28px; height: 28px; }
.util__social .social svg { width: 15px; height: 15px; }
.footer__social .social, .premium-inner .footer__social .social { width: 40px; height: 40px; }
.footer__social .social svg { width: 18px; height: 18px; }
:is(.util__social, .footer__social) .social.social--facebook,
:is(.util__social, .footer__social) .social.social--facebook:hover { background: #1877f2; }
:is(.util__social, .footer__social) .social.social--instagram,
:is(.util__social, .footer__social) .social.social--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
:is(.util__social, .footer__social) .social.social--tiktok,
:is(.util__social, .footer__social) .social.social--tiktok:hover { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
:is(.util__social, .footer__social) .social.social--tiktok svg { filter: drop-shadow(1.2px 1px 0 #fe2c55) drop-shadow(-1.2px -1px 0 #25f4ee); }
:is(.util__social, .footer__social) .social.social--youtube,
:is(.util__social, .footer__social) .social.social--youtube:hover { background: #fff; color: #ff0000; }

/* The menu's booking buttons carry the doctors' names, like the home hero. */
.nav-drawer__cta .btn--stacked { justify-content: flex-start; min-height: 62px; padding: 0.7rem 1.1rem; font-size: 0.98rem; }
.nav-drawer__cta .btn__slot { font-size: 0.78rem; }

/* "Phone:", "Fax:", "Email:" written out, label and value on one line. */
.loc-lines__list dt { min-width: 3.9rem; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.loc-lines__list dd { font-weight: 500; }

@media (max-width: 47.99rem) {
  /* The faces, names and rating come before the booking buttons on a phone.
     The copy column's children join the hero's flex column so the team card
     can sit between the description and the buttons. */
  .home-hero .split--wide-left { display: flex; flex-direction: column; }
  .home-hero .split--wide-left > div:first-child { display: contents; }
  .home-hero .split--wide-left > .hero-team-col { order: 1; margin-top: 1.25rem !important; }
  .home-hero .hero-book { order: 2; }
  .home-hero .hero-contact { order: 3; }
}



/* ==========================================================================
   Mobile header, below 64rem, keyed off `body.mh2` (inc/setup.php).
   Revision 6 brought in the Call / Visit / menu bar of sacksortho.com with the
   logo on a second row. Revision 7: the client wants one line, so the bar is
   one white row: the client's colour logo, then Call, Visit and the menu in the
   brand purple. The menu still opens as a full-screen brand-colour panel.
   ========================================================================== */
@media (max-width: 63.99rem) {
  /* The bar. */
  body.mh2 .site-header { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(70, 45, 136, 0.08); }
  body.mh2 .site-header > .site-header__in { min-height: 60px; gap: 0.5rem; }
  body.mh2 .site-header .brand { display: flex; flex: 0 0 auto; min-width: 0; min-height: 0; margin-right: auto; }
  body.mh2 .site-header .brand__sep, body.mh2 .site-header .brand__desc { display: none; }
  /* Specific enough to win over the inner pages' logo widths (revision-2.css, above). */
  body.mh2 .site-header .brand img,
  body.mh2 .site-header .brand .brand__logo { display: block; width: auto; height: 38px; max-width: none; }
  body.mh2 .site-header .header-actions { flex: 0 0 auto; width: auto; gap: 0; }
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label {
    flex-direction: row; gap: 0.4rem; width: auto; height: auto; min-width: 44px; min-height: 44px; padding: 0 0.45rem;
    border: 0; border-radius: 0.6rem; background: transparent; color: var(--ortho);
  }
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label:active { background: rgba(70, 45, 136, 0.08); }
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label span { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label svg { flex: none; width: 20px; height: 20px; }
  body.mh2 .site-header .nav-toggle {
    margin-left: 0.1rem; width: auto; height: auto; min-width: 44px; min-height: 44px; padding: 0;
    border: 0; background: transparent; color: var(--ortho); box-shadow: none;
  }
  body.mh2 .site-header .nav-toggle svg { width: 28px; height: 28px; }
  body.mh2 .site-header .nav-toggle span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.mh2 .site-header :where(a, button):focus-visible { outline: 2px solid var(--ortho); outline-offset: 2px; }

  /* The menu: full screen, brand colour. */
  body.mh2 .nav-drawer { background: var(--ortho); color: #fff; }
  body.mh2 .nav-drawer__head .eyebrow { color: rgba(255, 255, 255, 0.8); }
  body.mh2 .nav-drawer__head .icon-btn { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #fff; }
  body.mh2 .nav-drawer > ul > li > a,
  body.mh2 .nav-drawer .menu-item > a {
    border-bottom-color: rgba(255, 255, 255, 0.16); color: #fff;
    font-size: 1rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  }
  body.mh2 .nav-drawer__cta .btn--ortho { border-color: #fff; background: #fff; color: var(--ortho); }
  body.mh2 .nav-drawer__cta .btn--ortho .btn__slot { color: rgba(70, 45, 136, 0.78); }
  body.mh2 .nav-drawer__cta .btn--ped { border-color: var(--cyan); background: var(--cyan); color: var(--ink); }
  body.mh2 .nav-drawer__cta .btn--ped .btn__slot { color: rgba(26, 18, 54, 0.72); }
  body.mh2 .nav-drawer__cta .btn--outline { border-color: rgba(255, 255, 255, 0.6); background: transparent; color: #fff; }
  body.mh2 .nav-drawer :where(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}



/* ==========================================================================
   Revision 6
   ========================================================================== */

/* The official social icons as supplied: no badge, no circle, no frame. */
:is(.util__social, .footer__social) .social,
:is(.util__social, .footer__social) .social:hover,
.premium-inner :is(.util__social, .footer__social) .social,
.premium-inner :is(.util__social, .footer__social) .social:hover {
  width: auto; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; filter: none;
}
:is(.util__social, .footer__social) .social.social--facebook, :is(.util__social, .footer__social) .social.social--facebook:hover,
:is(.util__social, .footer__social) .social.social--instagram, :is(.util__social, .footer__social) .social.social--instagram:hover,
:is(.util__social, .footer__social) .social.social--tiktok, :is(.util__social, .footer__social) .social.social--tiktok:hover,
:is(.util__social, .footer__social) .social.social--youtube, :is(.util__social, .footer__social) .social.social--youtube:hover {
  background: none; box-shadow: none;
}
:is(.util__social, .footer__social) .social.social--tiktok svg { filter: none; }
.social__img { display: block; object-fit: contain; }
.util__social .social__img { width: 22px; height: 22px; }
.footer__social .social__img { width: 32px; height: 32px; }
.util__social { gap: 0.9rem; }
.footer__social, .premium-inner .footer__social { gap: 1.1rem; align-items: center; }
:is(.util__social, .footer__social) .social:hover .social__img { transform: translateY(-2px); }
.social__img { transition: transform 0.15s ease; }

@media (max-width: 47.99rem) {
  /* The booking buttons sit directly under the doctors' photos and names, and
     the rating closes the hero. The team card's parts join the hero's column
     so the buttons can come between them. */
  .home-hero .split--wide-left > .hero-team-col,
  .home-hero .hero-team { display: contents; }
  .home-hero .hero-team__faces { order: 1; margin-top: 1.4rem; }
  .home-hero .hero-book { order: 2; margin-top: 1.1rem; }
  .home-hero .hero-contact { order: 3; }
  .home-hero .hero-team__proof { order: 4; margin-top: 1.25rem; padding-top: 1.1rem; }
}

/* 1024 to 1179px: the nav went to its own row under the brand only because one
   row would have clipped the header's booking button (site.css, revision-2.css).
   That button is gone, so the nav returns to the brand's row, as from 1180px. */
@media (min-width: 64rem) and (max-width: 73.6875rem) {
  :root { --header-h: 81px; }
  .site-header__in,
  .premium-inner .site-header > .site-header__in { flex-wrap: nowrap; min-height: 80px; padding-top: 0; }
  .site-header .brand, .site-header .header-actions,
  .premium-inner .site-header .brand,
  .premium-inner .site-header .header-actions { min-height: 44px; }
  .site-header .nav-desktop,
  .premium-inner .site-header .nav-desktop { order: 0; flex-basis: auto; margin-top: 0; border-top: 0; }
  .site-header .nav-desktop ul, .premium-inner .site-header .nav-desktop ul { gap: 1.6rem; }
}

/* Revision 7. Below 375px Call and Visit tighten a little so the logo keeps
   clear of them; from 390px, and again from 600px, the logo uses the spare
   room, so its "& Pediatric Dentistry" line is easier to read. */
@media (max-width: 23.43rem) {
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label { gap: 0.3rem; padding: 0 0.35rem; }
}
@media (min-width: 24.375rem) and (max-width: 63.99rem) {
  body.mh2 .site-header .brand img,
  body.mh2 .site-header .brand .brand__logo { height: 42px; }
}
@media (min-width: 37.5rem) and (max-width: 63.99rem) {
  body.mh2 .site-header .brand img,
  body.mh2 .site-header .brand .brand__logo { height: 44px; }
}

/* Revision 7. Under 360px the words Call and Visit give way to their icons,
   so the logo keeps its size; they stay as the links' accessible names. */
@media (max-width: 22.4375rem) {
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label { justify-content: center; padding: 0; }
  body.mh2 .site-header .header-actions > .icon-btn.icon-btn--label span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}


/* ==========================================================================
   Revision 7: final review of the home page
   ========================================================================== */

/* Keyboard focus, the skip link and in-page links stop below the pinned
   header instead of under it. The targets' own offsets shrink by the same
   amount, so every anchor still lands where it did. */
html { scroll-padding-top: calc(var(--header-h, 61px) + 0.75rem); }
.section > .wrap > [id], main [id] { scroll-margin-top: calc(5.5rem - var(--header-h, 61px) - 0.75rem); }
.premium-inner :is(#quick,#suits,#visit,#alternatives,#questions) { scroll-margin-top: calc(10rem - var(--header-h, 61px) - 0.75rem); }

/* Visit: the heading had no space above the photo and the booking card. */
#book h2 + .split { margin-top: 2.5rem; }
#book .panel.has-photo img { filter: brightness(1.3) saturate(1.05); }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  /* Two columns left the address card and the booking choices too narrow on a
     tablet (the address ran to four lines, "Orthodontics" spilled out of its
     card), so the section stacks until the desktop layout. */
  #book .split { grid-template-columns: 1fr; }
  /* Full width, the building photo would stand 440 to 585px tall; a wider crop
     keeps it in proportion. !important because front-page.php sets 16/10 inline. */
  #book .panel.has-photo { aspect-ratio: 21 / 9 !important; }
}

/* Team: a support-team member without a portrait shows initials. */
.person__photo--initials {
  display: grid; place-items: center;
  font-family: var(--display, inherit); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ortho);
}
h3 + .rail--staff { margin-top: 1.25rem; }

/* The hero's 5.0 in ordinary figures; tabular ones spaced it out as "5 . 0". */
.hero-team__rating .rating__num { font-variant-numeric: normal; }

@media (min-width: 48rem) {
  /* The doctors' "Read full profile" links line up across the cards. */
  .person.person--compact { display: flex; flex-direction: column; }
  .person.person--compact > div { display: flex; flex: 1; flex-direction: column; }
  .person.person--compact > div > .tag { align-self: flex-start; }
  .person.person--compact > div > .tlink { align-self: flex-start; margin-top: auto; }
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  /* Proof band in two columns: the divider under the fourth point was missing. */
  .proof__item:nth-last-child(2):nth-child(even) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  /* Three-card rows fall to two columns on a tablet; the last card of an odd
     count sits centred instead of alone on the left. */
  .rail.grid--3 { column-gap: 1.25rem; }
  .rail.grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 1.25rem) / 2); }
}

@media (min-width: 64rem) {
  /* Footer: the copyright line sat 8px above the legal links. */
  .footer__legal > p { margin-bottom: 0; }
}