/* ==========================================================================
   Copy-pass design fixes — layered AFTER the design CSS (styles/global/home),
   kept separate so copywriting tweaks stay distinct from the coder's CSS and
   are reversible.
   ========================================================================== */

/* ---- Desktop CTA dropdown (Book a Consultation → virtual) --------------- */
/* The panel was a fixed 260px box holding a single button, which read as
   oversized/clunky. Snug it to the pill width and centre the option. */
.cta-panel {
  width: max-content;
  min-width: 100%;
  padding: 8px;
}
.cta-panel__virtual {
  margin-top: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* ---- Mobile floating "Book Now" CTA ------------------------------------- */
/* Centre-bottom, revealed on scroll, mobile only. Opens the Bonded modal via
   the /book-a-free-consultation/ href (BookingLinks). */
.floating-book {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(160%);
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: var(--r-btn, 999px);
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 28px rgba(17, 25, 33, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease, ease), opacity 0.3s var(--ease, ease);
}
@media (max-width: 1024px) {
  .floating-book { display: inline-flex; }
}
.floating-book.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* When the burger menu is open it would sit over the menu's own booking CTAs -
   stand the floating pill down while the menu is open. */
body:has(.mobile-menu.open) .floating-book {
  display: none;
}

/* ---- Mobile "Call us" dropdown ------------------------------------------ */
/* The mobile CALL US control was a bare tel link; give it the same clinic
   chooser the desktop utility phone menu has, on tap. */
.mobile-call-wrap { position: relative; }
.mobile-call .chev { transition: transform var(--dur, 300ms) var(--ease, ease); }
.mobile-call-wrap.is-open .mobile-call .chev { transform: rotate(180deg); }
.mobile-call__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: var(--r-card, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: none;
}
.mobile-call-wrap.is-open .mobile-call__menu { display: block; }
.mobile-call__menu a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink-mid);
  transition: background var(--dur, 300ms) var(--ease, ease);
}
.mobile-call__menu a span:last-child { color: var(--ink); font-weight: 600; }
.mobile-call__menu a:hover { background: var(--grad-hover); }
.mobile-call__menu a:hover span { color: #fff; }

/* ---- Mobile menu booking section --------------------------------------- */
.mobile-menu .mm-book {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-menu .mm-book .btn { width: 100%; }

/* Prevent orphaned single words on two-line headings, site-wide. Balances the
   wrapped lines of each heading so a stray word never sits alone. */
.home-hero__title,
.inset-hero__title,
.inset-consult__heading,
.home-why__heading,
.home-costs__heading,
.home-ba__heading,
.inset-reviews__heading,
.inset-doctors__heading,
.inset-ctas__heading,
.treat-card__title,
.findus__heading {
  text-wrap: balance;
}

/* Reviews carousel: the row was styled to scroll (hidden scrollbar) but never
   given an overflow, so the ‹ › arrows had nothing to scroll. */
.inset-reviews__row {
  overflow-x: auto;
}

/* Review cards: clamp the quote to a preview; READ MORE opens the full text in
   the review modal below. */
.review-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
/* READ MORE is a <button> (was an <a> to a now-removed page) — reset it so it
   inherits the existing .review-more link styling. */
.review-more {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* Home reviews footer no longer has a left-hand CTA — keep the arrows right. */
.home-reviews .inset-reviews__footer {
  justify-content: flex-end;
}

/* ---- Review popup (opened by READ MORE) ---------------------------------- */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.review-modal.is-open {
  display: flex;
}
.review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 25, 33, 0.55);
}
.review-modal__dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  box-shadow: 0 24px 64px rgba(17, 25, 33, 0.28);
}
.review-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 179, 240, 0.1);
  color: var(--brand, #00b3f0);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur, 300ms) var(--ease, ease);
}
.review-modal__close:hover {
  background: rgba(0, 179, 240, 0.2);
}
.review-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 40px;
}
.review-modal__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink, #333);
}
.review-modal__stars {
  display: flex;
  gap: 4px;
  color: #fbbc05;
}
.review-modal__quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink, #333);
  white-space: pre-line;
}

/* ---- Inner-page hero "Book a consultation" CTA -------------------------- */
.inset-hero__content .btn {
  margin-top: calc(32 * var(--u));
}

/* ---- Plain side-by-side alignment --------------------------------------- */
/* The non-gradient SBS kept a 264u gap while the text column (--col-407) is
   clamped at 407px and can't shrink, so below ~1920 the grid overflowed and
   `space-between` pushed the image to the far left and the text to the right
   edge. Let the media column shrink and tighten the gap so the pair sits
   balanced, matching the gradient band.
   Scoped below the 1920 canvas (QA-031): at 1920 the base rule's 264u gap +
   space-between fits exactly and is the Figma layout (2965:94, image x196 /
   text x1316); unscoped, this pulled both columns ~73px inward there too. */
@media (max-width: 1919.98px) {
  .inset-sbs:not(.sbs-gradient) .inset-sbs__inner {
    grid-template-columns: minmax(0, calc(856 * var(--u))) var(--col-407);
    gap: calc(120 * var(--u));
    justify-content: center;
  }
  .inset-sbs:not(.sbs-gradient) .inset-sbs__media {
    width: 100%;
  }
}

/* ---- Section rhythm ----------------------------------------------------- */
/* The benefits grid had no space beneath it, so it bunched against the next
   section. Give it room to breathe. */
.inset-benefits {
  margin-bottom: calc(96 * var(--u));
}

/* ---- Content bullet lists ----------------------------------------------- */
/* The global reset sets `ul { list-style: none }`, so re-enable proper bullets
   for prose lists inside SBS / text sections (styled by wrapper, RTE-safe). */
.inset-sbs__copy ul,
.inset-text__intro ul,
.inset-text__outro ul {
  list-style: disc;
  padding-left: 22px;
  margin-top: 16px;
  margin-bottom: 22.4px;
}
.inset-sbs__copy ul li,
.inset-text__intro ul li,
.inset-text__outro ul li {
  font-size: 16px;
  line-height: 22.4px;
  letter-spacing: -0.48px;
  color: var(--ink);
}
.inset-sbs__copy ul li + li,
.inset-text__intro ul li + li,
.inset-text__outro ul li + li {
  margin-top: 8px;
}

/* ---- Visible in-content links ------------------------------------------- */
/* Body copy links were inheriting the text colour, so they read as plain text.
   Make them clearly clickable (brand colour + underline). */
.inset-hero__copy a,
.inset-sbs__copy a,
.inset-text a,
.faq-a a,
.benefit__copy a,
.appt-item__copy a,
.inset-consult__copy a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.inset-hero__copy a:hover,
.inset-sbs__copy a:hover,
.inset-text a:hover,
.faq-a a:hover,
.benefit__copy a:hover,
.appt-item__copy a:hover,
.inset-consult__copy a:hover {
  text-decoration: none;
}

/* ---- Clinic parking (car-park plans) ------------------------------------- */
/* A plan has to show whole, so the media takes the plan's own shape and
   contains it rather than cropping to the 856/778 photo frame. */
.inset-sbs--plan .inset-sbs__media {
  aspect-ratio: 626 / 394;
  background: #fff;
  border: 1px solid var(--surface);
}
.inset-sbs--plan .inset-sbs__media img {
  object-fit: contain;
}
/* Side-by-sides carry no desktop spacing of their own, and this one is
   shorter than the photo SBS after it, so give it the sections' 160u gap.
   Below 1025px the shared 65px section rhythm already applies. */
@media (min-width: 1025px) {
  .inset-sbs--plan {
    margin-block: calc(160 * var(--u));
  }
}
/* Highbrook: Priti asked for the parking text in bold (patients are fined in
   the wrong spaces). */
.inset-sbs__copy--bold p {
  font-weight: 600;
}

/* ---- Booking form: Free Initial Assessment terms ------------------------ */
/* The required acceptance checkbox, the terms behind a disclosure, and the
   $250 fee line under the button (BondedEnquiryForm, consult bookings only). */
.consult-form__terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.consult-form__terms input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--brand);
}
.consult-form__terms + .field-error {
  margin-top: -4px;
}
.consult-form__terms-text {
  margin-top: -8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
}
/* ink, not --brand: the brand blue is ~2.6:1 on white, too faint for text */
.consult-form__terms-text summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consult-form__terms-text p {
  margin-top: 8px;
}
.consult-form__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
}

/* ---- Costs calculator --------------------------------------------------- */
/* The same-day-start line runs full width under the two option cards. */
.bc-options-note {
  grid-column: 1 / -1;
  margin: -16px 0 0;
}
/* Side by side (above 1024px) the two cards share their four rows, so the
   prices and buttons line up whatever the length of each card's heading. */
@media (min-width: 1025px) {
  .bc-options-view {
    row-gap: 0;
  }
  .bc-option {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
  .bc-options-note {
    margin-top: 24px;
  }
}

/* ---- Contact Us clinic cards -------------------------------------------- */
/* Parent-page treat-card style, but a 4-up grid (four clinics). */
.contact-clinics__row {
  max-width: calc(1920 * var(--u));
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.contact-clinics .treat-card {
  height: auto;
  aspect-ratio: 4 / 5;
}
@media (max-width: 1024px) {
  .contact-clinics__row { grid-template-columns: repeat(2, 1fr); padding-inline: 24px; }
}
@media (max-width: 560px) {
  .contact-clinics__row { grid-template-columns: 1fr; }
}

/* Doctor SBS headshots are ~square (715×687) in a wider 856×778 cover box, so
   the default centre crop shaves the top of the head. Top-align to keep it. */
.doctor-img--top {
  object-fit: cover;
  object-position: center top;
}

/* ---- About-section rhythm before the consult band ----------------------- */
/* The base .inset-consult margin-top (30u) sits too tight under a preceding bio
   SBS (meet-the-doctors), the bk-appt benefits grid (our-technology) or the
   location rich-content SBS (contact pages). Give the consult band more room. */
.page-about .inset-consult,
.page-contact .inset-consult,
.page-virtual-consultation .inset-consult {
  margin-top: calc(130 * var(--u));
}
/* On the phone stack 130u is ~26px, so /virtual-consultation/'s "Already a patient of
   ours?" photo sat right under the last how-it-works step and read as part of it. */
@media (max-width: 1024px) {
  .page-virtual-consultation .inset-consult { margin-top: 72px; }
}

/* ---- Icon-step titles (bk-appt / appt-item) ----------------------------- */
/* The design's appt-item is icon + copy only. For step-by-step sections we add
   a short heading per step; mirror the home why-item__title styling so it sits
   consistently between the icon and the copy. */
.appt-item__title {
  margin-top: calc(24 * var(--u));
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.54px;
  color: var(--ink);
}
.appt-item__title + .appt-item__copy {
  margin-top: 8px;
}

/* ---- Consultation band fine print --------------------------------------- */
/* The design's inset-consult has no note element, so the T&Cs small print was
   being inline-styled on every page. Style it once here (mirrors the muted
   cost-table-sec__note) and drop the inline styles. */
.inset-consult__note {
  margin-top: calc(28 * var(--u));
  max-width: calc(560 * var(--u));
  color: var(--ink-mid);
}
/* On mobile --u is 100vw/1920, so the 560u max-width collapses to ~110px and
   the note wraps into a tall narrow column that shoves the page down. Drop the
   clamp and centre it under the full-width button. */
@media (max-width: 1024px) {
  .inset-consult__note {
    max-width: none;
    margin-top: 16px;
    text-align: center;
  }
}

/* ---- Video poster play button (inset-doctors media) --------------------- */
/* Let the poster image itself be a play target - a circular play button
   centred over the media, alongside the text "Play Video" button. */
.inset-doctors__media .media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  min-width: 64px;
  min-height: 64px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand, #00b3f0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(17, 25, 33, 0.28);
  transition: transform var(--dur, 300ms) var(--ease, ease),
    background var(--dur, 300ms) var(--ease, ease);
}
.inset-doctors__media .media-play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}
.inset-doctors__media .media-play svg {
  width: 26px;
  height: 30px;
  margin-left: 4px; /* optically centre the triangle */
}

/* ---- Video lightbox sizing fix ----------------------------------------- */
/* main.js injects the <iframe> into .video-lightbox__player, but that inner
   div had no dimensions, so the iframe collapsed to almost nothing. Make the
   player fill its 16:9 frame. */
.video-lightbox__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-lightbox__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #000;
}

/* ---- Cost table --------------------------------------------------------- */
/* Figma Pricing Page (3008:7421): striped rows 1304 wide from the 196 line,
   Cost column starting ~x869 - i.e. a 673u Treatment column. (Was capped at
   760, which left the table at ~58% of the designed width - QA-037.) */
.cost-table {
  max-width: calc(1304 * var(--u));
}
@media (min-width: 1025px) {
  .cost-table th:first-child,
  .cost-table td:first-child { width: calc(673 * var(--u)); }
}

/* ---- inset-text detail headings ----------------------------------------- */
/* Match the brand-blue card headings used elsewhere (benefit__title) so the
   "types" / "what to expect" columns read as headings, not body text. */
.page-treatments .inset-text__detail h3 {
  color: var(--brand);
}

/* ==========================================================================
   Mobile-only homepage refinements (<=1024). Desktop is untouched.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Treatment cards: stronger white fade so the dark card text stays legible
     over the photo. */
  .treat-card__scrim {
    height: 92%;
    background: linear-gradient(180deg, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.72) 42%, #f7f7f7 72%);
  }

  /* Meet the Doctors: Ross's photo ABOVE the text on mobile. */
  .home-doctors .inset-doctors__inner { display: flex; flex-direction: column; }
  .home-doctors .inset-doctors__media { order: -1; }

  /* Costs: photo BELOW the text on mobile. */
  .home-costs__band { display: flex; flex-direction: column; }
  .home-costs__band > img { order: 2; margin-top: 24px; }
  .home-costs__content { order: 1; }

  /* Before/after + reviews carousels: make them swipeable on touch. The wipe
     slider had touch-action:none, which swallowed the horizontal swipe so the
     carousel could never scroll - relax it (tap still moves the reveal via the
     click handler) and give both tracks momentum scrolling. */
  .ba-compare { touch-action: pan-x pan-y; }
  .home-ba__row,
  .inset-reviews__row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 404: sit the two hero CTAs in a row. */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* ── Cookie consent: blocking top gate (TIO standard) ───────────────────── */
:root.cookie-locked body { overflow: hidden; }

.cookie-scrim {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 22, 43, 0.55);
}
.cookie-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  background: var(--white, #fff);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.cookie-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cookie-text {
  margin: 0;
  flex: 1 1 420px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--navy, #0d2440);
}
.cookie-text a { text-decoration: underline; }
.cookie-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}
.cookie-actions .btn { margin: 0; }

@media (max-width: 1024px) {
  .cookie-inner { padding: 16px 18px; gap: 14px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---- Mobile tap targets (QA-052, WCAG 2.2 SC 2.5.8) ----------------------
   Small text links/buttons get an invisible ::after that grows the hit area
   to >=24px tall without moving anything. None of these use ::after. */
@media (max-width: 1024px) {
  .mobile-utility a,
  .play-video,
  .review-more,
  .findus__row a,
  .findus__maplink,
  .footer-social a,
  .footer-legal > * { position: relative; }

  .mobile-utility a::after,
  .play-video::after,
  .review-more::after,
  .findus__row a::after,
  .findus__maplink::after,
  .footer-social a::after,
  .footer-legal > *::after { content: ""; position: absolute; }

  .mobile-utility a::after { inset: -6px -4px; }
  .play-video::after, .review-more::after, .findus__maplink::after, .findus__row a::after { inset: -3px 0; }
  .footer-social a::after { inset: -12px; }
  .footer-legal > *::after { inset: -5px 0; }
}

/* ---- Meet the Team details modal - desktop geometry (QA-047) ------------
   Figma 3010:9247: panel 1872 wide at x24 sized to its content (~867 tall),
   photo 408 at x308, text column at x755 (39 gap), close at x1778. The modal
   was stretched to the viewport height and centred its content on a 1200 box
   (photo x359, text x816, close x1808). */
@media (min-width: 1025px) {
  .team-modal { inset: 24px 24px auto; max-height: calc(100vh - 48px); }
  .team-modal__panel {
    max-width: none;
    padding-left: calc(244 * var(--u));   /* 24 inset + 40 modal padding + 244 = x308 */
    padding-right: calc(244 * var(--u));
    gap: calc(39 * var(--u));
  }
  .team-modal__close { right: calc(90 * var(--u)); }
}

/* Homepage Meet the Doctors heading, desktop: plain wrapping gives Figma's
   'The local orthodontics / expert' (2914:1409); the site-wide text-wrap:
   balance above re-flowed it to 'The local / orthodontics expert' (QA-029). */
@media (min-width: 1025px) {
  .home-doctors .inset-doctors__heading { text-wrap: wrap; }
}

/* ---- Homepage treatment cards, mobile (QA-050) --------------------------
   The real card copy runs 4-6 lines (the board's 2-3), and with the text
   bottom-anchored over a landscape photo the title rose onto the faces.
   Stack instead: photo on top fading into the card grey, text beneath it,
   so every face stays clear whatever the copy length. */
@media (max-width: 1024px) {
  .home-treat .treat-card { aspect-ratio: auto; height: auto; display: flex; flex-direction: column; }
  .home-treat .treat-card__img { position: relative; inset: auto; height: auto; aspect-ratio: 342 / 330; }
  .home-treat .treat-card__scrim {
    top: 0; bottom: auto; height: auto; aspect-ratio: 342 / 330; border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, transparent 62%, var(--surface) 100%);
  }
  .home-treat .treat-card__body { position: relative; left: auto; right: auto; bottom: auto; margin-top: -28px; padding: 0 30px 36px; }
}

/* ---- Long URLs in article / legal copy (QA-066) --------------------------
   Raw URLs used as link text (cookies policy: Google, Facebook, TikTok policy
   links) can't wrap, so /cookies-policy/ scrolled 45px sideways at 390. */
.bd-article a { overflow-wrap: anywhere; }

/* ==========================================================================
   Tablet tier, 768-1024 (QA-062). The <=1024 block is the phone stack; on a
   tablet it stretched phone proportions to 720-976px (940px-tall cards,
   full-width buttons, a 14,650px homepage). Figma has no tablet board, so this
   sits between the two: side-by-sides back to two columns, cards 2-up or
   horizontal, images capped to landscape, buttons at their own width.
   Phones (<768) are untouched. Keep this block last in the file.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Hero: shorter landscape image under the copy; copy at a readable measure */
  .inset-hero__media { aspect-ratio: 2 / 1 !important; }
  .inset-hero__content { max-width: 720px; }

  /* Side-by-sides, consult bands and Meet the Doctors: 50/50 in DOM (desktop) order */
  .inset-sbs__inner,
  .inset-consult__inner,
  .inset-doctors__inner,
  .home-doctors .inset-doctors__inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px; align-items: center; }
  .inset-sbs__media, .inset-consult__media, .inset-doctors__media { aspect-ratio: 856 / 778; order: 0 !important; }
  .inset-sbs__content, .inset-consult__content, .inset-doctors__content { order: 0 !important; margin: 0 !important; }
  .inset-consult--flip .inset-consult__media { order: 1 !important; }

  /* Homepage costs band: landscape photo under the copy (the phone crop is portrait) */
  .home-costs__band > img { aspect-ratio: 16 / 9; object-position: center; }

  /* Treatment / explore cards: one per row, photo left, text right */
  .home-treat .treat-card { display: grid; grid-template-columns: 45% 1fr; align-items: center; }
  .home-treat .treat-card__img { grid-column: 1; grid-row: 1; aspect-ratio: auto; height: 100%; min-height: 320px; align-self: stretch; }
  .home-treat .treat-card__scrim { display: none; }
  .home-treat .treat-card__body { grid-column: 2; grid-row: 1; margin: 0; padding: 36px 40px; }

  /* Homepage team band: the phone composition pins a 390px photo inside a
     viewport-wide box, so the brand A ballooned. Use the desktop layout, which
     is already in --u units and scales down cleanly. */
  .home-team__inner { height: calc(670 * var(--u)); aspect-ratio: auto; max-width: calc(1572 * var(--u)); }
  .home-team__logo { left: calc(526 * var(--u)); top: 0; width: calc(520 * var(--u)); height: calc(449 * var(--u)); }
  .home-team__photo { left: 0; top: calc(160 * var(--u)); bottom: auto; width: calc(1572 * var(--u)); height: calc(510 * var(--u)); }
  .home-team__photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

  /* Card grids 2-up */
  .blog-page__grid,
  .team-page__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

  /* Buttons at their own width, not the phone's full-width bars */
  .inset-consult__content .btn,
  .consult-form__submit,
  .home-hero__content .btn,
  .bk-appt__cta { width: auto; align-self: flex-start; }
}

/* C14: Find Us parking row - author display:flex would otherwise beat the hidden attribute */
.findus__row[hidden], .findus__row a[hidden] { display: none; }
#parking { scroll-margin-top: 120px; }

/* C75: Contact-us location pages - the H1/intro sat in the shared 520px Find Us
   column (minus its 165px inset), leaving a ~260px text column next to a wide
   gap. On these pages the text column takes the free space instead. */
@media (min-width: 1025px) {
  .page-location .findus__inner {
    grid-template-columns: minmax(0, 1fr) calc(856 * var(--u));
    column-gap: calc(80 * var(--u));
  }
  .page-location .findus__heading,
  .page-location .findus__copy { max-width: 620px; }
}

/* C75 follow-up: more space between the location H1 and its intro paragraph
   (shared Find Us default is 24u desktop / 15px mobile). */
.page-location .findus__copy { margin-top: calc(48 * var(--u)); }
@media (max-width: 1024px) {
  .page-location .findus__copy { margin-top: 24px; }
}