/* Revision 10: final polish (shared). Loaded after revision-5.css.

   1. Utility bar: the home page's, on every page
   2. Hero on a desktop: one photograph frame; short laptop screens
   3. Hero on a portrait tablet
   4. Facts strip labels
   5. One star colour
*/


/* --------------------------------------------------------------------------
   1. Utility bar. The inner pages had heavier links, wider gaps and 28px
   social tap boxes (revision-2/3), so the bar shifted between Home and any
   other page. These are the home page's computed values.
   -------------------------------------------------------------------------- */
.premium-inner .util .util__right a,
.premium-inner .util .utility-extra a { font-weight: 400; }
.premium-inner .util .util__social .social {
  width: auto; height: auto; min-height: 0; color: #fff;
}


/* --------------------------------------------------------------------------
   2. Hero on a desktop.
   One photograph frame height for every inner hero at a given screen, with
   or without a facts strip: the space left after the header, the hero's
   padding and a whole strip, at most 34rem (544px at 1440x900).
   Two booking buttons sit a little closer, so a hero with two is no taller
   than the strip allows at 1440x900.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .premium-inner .ihero__visual .ihero__art,
  .premium-inner .ihero__visual .ihero__art--wide,
  .premium-inner .ihero__visual .ihero__art:has(img[src*="-premium"]),
  .premium-inner .ihero:has(+ .wrap > .facts) .ihero__visual .ihero__art {
    height: clamp(20rem, calc(100svh - var(--chrome-h) - 2 * var(--hero-pad) - var(--facts-h) - 0.5rem), 34rem);
  }
  .premium-inner .ihero .hero-book:has(> .btn + .btn) { gap: 0.5rem; }
  .premium-inner .ihero .hero-book:has(> .btn + .btn) .btn--stacked { min-height: 62px; padding-block: 0.65rem; }
}

/* Laptop screens shorter than 900px (1280x720, 1536x730, 1440x900 with the
   browser's own bars): the hero and the whole facts strip fit the first view.
   The padding, the column rhythm and the H1 scale with the screen's height,
   the booking buttons are more compact, and the lede runs wider (as on the
   home page) so it takes two lines rather than three. */
@media (min-width: 64rem) and (max-height: 899px) {
  /* Also on the element, over the older per-page value (the treatments list's 2rem). */
  :root, .premium-inner .ihero.ihero { --hero-pad: 1rem; }
  .premium-inner .ihero__copy { gap: clamp(0.7rem, 2.05vh, 1rem); }
  .premium-inner .ihero__copy h1,
  .premium-inner .ihero--profile .ihero__copy h1,
  .premium-inner .ihero__in--solo h1 { font-size: clamp(2.4rem, min(4.2vw, 6.3vh), 3.8rem); }
  .premium-inner .ihero__copy .lede { max-width: 60ch; font-size: 1.12rem; line-height: 1.6; }
  .premium-inner .ihero__copy > .hero-book { margin-top: 0.2rem; }
  .premium-inner .ihero .hero-book { gap: 0.5rem; }
  .premium-inner .ihero .hero-book .btn--stacked { min-height: 58px; padding-block: 0.55rem; }
  .premium-inner .ihero .breadcrumbs { padding-block: 0.3rem; }
}

/* Very short screens (1366x657): the hero fills the first view and the strip
   starts right at its lower edge, so the fold never cuts through the strip.
   With the whole view for the copy, the H1 can be larger again. */
@media (min-width: 64rem) and (max-height: 700px) {
  .premium-inner .ihero__copy { gap: clamp(0.7rem, 2.3vh, 1rem); }
  .premium-inner .ihero__copy h1,
  .premium-inner .ihero--profile .ihero__copy h1,
  .premium-inner .ihero__in--solo h1 { font-size: clamp(2.4rem, min(4.2vw, 7.2vh), 3.8rem); }
  .premium-inner .ihero:has(+ .wrap > .facts) {
    min-height: calc(100vh - var(--chrome-h) + var(--facts-h) / 2);
    min-height: calc(100svh - var(--chrome-h) + var(--facts-h) / 2);
  }
  .premium-inner .ihero__visual .ihero__art,
  .premium-inner .ihero__visual .ihero__art--wide,
  .premium-inner .ihero__visual .ihero__art:has(img[src*="-premium"]),
  .premium-inner .ihero:has(+ .wrap > .facts) .ihero__visual .ihero__art {
    height: clamp(20rem, calc(100svh - var(--chrome-h) - 2 * var(--hero-pad) - 2rem), 34rem);
  }
}


/* --------------------------------------------------------------------------
   3. Hero on a portrait tablet (48 to 64rem): the home page's proportions.
   Two equal columns, the H1 at the home page's size, a tall arch beside the
   copy (the same frame on every page), less empty band above and below.
   Doctor profiles and the team wall keep their own layout.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) and (max-width: 63.99rem) and (orientation: portrait) {
  /* The copy stays centred in the first screen; a tall one (a four-line H1,
     two booking buttons) still leaves the whole facts strip in view. */
  :root, .premium-inner .ihero.ihero { --hero-pad: 2rem; }
  .premium-inner .ihero__copy { gap: 1rem; }
  body.premium-inner .ihero:not(.ihero--profile, .ihero--team) > .wrap > .ihero__in:not(.ihero__in--solo) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center;
  }
  body.premium-inner .ihero:not(.ihero--profile, .ihero--team) .ihero__visual { width: 100%; max-width: none; margin: 0; justify-self: stretch; }
  body.premium-inner .ihero:not(.ihero--profile, .ihero--team) .ihero__visual .ihero__art,
  body.premium-inner .ihero:not(.ihero--profile, .ihero--team) .ihero__visual .ihero__art--wide {
    width: 100%; max-width: none; height: min(28rem, 46svh); aspect-ratio: auto !important; margin: 0;
    border-radius: 999px 999px 1.5rem 1.5rem;
  }
  body.premium-inner .ihero:not(.ihero--profile, .ihero--team) .ihero__visual .ihero__art img { width: 100%; height: 100%; object-fit: cover; }
  body.premium-inner .ihero .ihero__copy h1,
  body.premium-inner .ihero--profile .ihero__copy h1,
  body.premium-inner .ihero__in--solo h1 { max-width: none; font-size: calc(1.15rem + 3.7vw); line-height: 1.06; letter-spacing: -0.037em; }
}


/* --------------------------------------------------------------------------
   4. Facts strip. Labels are at least 11px below 64rem (they were 9.6px),
   and every cell starts its label at the same height, so labels in one row
   line up even when a value wraps to a second line. The padding centres a
   one-line value exactly as before; a second line simply runs below it.
   -------------------------------------------------------------------------- */
.premium-inner .facts > .fact {
  align-content: start;
  padding-top: calc((var(--facts-h) - 0.8rem) / 4 - 1.05rem);
}
.premium-inner .facts .fact__icon,
.premium-inner .facts .fact--who > .arch { align-self: start; }
@media (max-width: 63.99rem) {
  .premium-inner .facts .fact__k { font-size: 0.6875rem; letter-spacing: 0.06em; }
}
@media (max-width: 23.43rem) {
  .premium-inner .facts .fact__k { letter-spacing: 0.04em; }
}
@media (min-width: 64rem) {
  .premium-inner .facts > .fact { padding-top: calc((var(--facts-h) - 1rem) / 2 - 1.13rem); }
  .premium-inner .facts .fact__icon,
  .premium-inner .facts .fact--who > .arch { margin-block: -0.25rem; }
}


/* --------------------------------------------------------------------------
   5. One star colour: the home page's var(--star) (muted gold on light,
   brighter gold on dark), for the Google badges, the review wall's lead card
   and the doctor-profile quote as well.
   -------------------------------------------------------------------------- */
.gbadge .stars, .gbadge .stars svg,
.pbio__stars .stars, .pbio__stars svg,
.premium-inner .rev.revwall__lead .stars { color: var(--star); }
.premium-inner :is(.section--dark, .reviews-dark) { --star: #e8ad33; }

/* ------------------------------------------------ Final QA (revision 10) */
/* A8: the Google rating links keep the approved look; underline on hover. */
.hero-team__glink, a.rating-lead__meta { color: inherit; text-decoration: none; }
.hero-team__glink:hover, a.rating-lead__meta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A5: the menu drawer marks the page you are on. */
@media (max-width: 63.99rem) {
  body.mh2 .nav-drawer :is(.current-menu-item, .current-menu-ancestor, .current_page_parent, .current-page-ancestor) > a,
  body.mh2 .nav-drawer .menu-item > a[aria-current] { color: var(--cyan, #37c9d6); box-shadow: inset 3px 0 0 var(--cyan, #37c9d6); padding-left: 0.85rem; }
}

/* A6: white focus rings on dark chrome, as on the homepage. */
.premium-inner :is(.util, .site-footer, .section--ink, .card--ink) :where(a, button, summary):focus-visible { outline-color: #fff; outline-offset: 2px; }
.premium-inner .skip-link:focus-visible { outline-color: var(--ortho); outline-offset: 2px; }

/* A7: the black TikTok note on a white disc, like the other round marks. */
:is(.util__social, .footer__social) .social--tiktok .social__img { background: #fff; border-radius: 50%; padding: 14%; box-sizing: border-box; }

/* A9: the footer on small laptops: no wrapped links, the legal row stacked. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  :is(.home, .premium-inner) .footer__grid { grid-template-columns: 1.2fr repeat(4, auto); column-gap: 2rem; }
  :is(.home, .premium-inner) .site-footer li a { white-space: nowrap; }
  :is(.home, .premium-inner) .footer__legal { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  :is(.home, .premium-inner) .footer__legal nav { flex-wrap: nowrap; }
}
.premium-inner .site-footer li { text-wrap: wrap; }

/* AM1: the insurance summary cards one per row on tablets. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .ins-summary__grid { grid-template-columns: 1fr; }
}