/* ---------------------------------------------------------------------------
   Homepage sections.

   Rebuilt from the mirror. The source used Bootstrap's grid plus three Slick
   carousels; both are replaced — grid/flex for layout, scroll-snap for the
   tracks. Scroll-snap needs no library, works with JS disabled, and is
   swipeable on touch by default.
   --------------------------------------------------------------------------- */

.home-hero,
.home-cards,
.home-doctor,
.home-split,
.home-testimonials,
.home-logos { padding-block: clamp(40px, 6vw, 90px); }

/* --- Shared section furniture --------------------------------------------- */
.home-section__eyebrow,
.home-hero__eyebrow,
.home-cta__eyebrow,
.home-doctor__name {
  font-family: var(--font-family-2);
  font-size: var(--font4);
  color: var(--color-1);
  line-height: 1.1;
  margin-bottom: 6px;
}

.home-section__lead,
.home-hero__lead,
.home-cta__lead,
.home-doctor__credentials {
  font-family: var(--font-family-1);
  font-size: var(--font1-1);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-2);
  margin-bottom: 20px;
}

.home-section__intro { max-width: 50rem; }

/* --- Hero ------------------------------------------------------------------
   Full-bleed background video, 50% black overlay, centred white type. All
   measured from the source. The dark background colour is ours, not the
   source's: without it the white type is invisible until the video paints.   */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-5);
  padding-block: clamp(60px, 10vw, 140px);
  text-align: center;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* measured: .featured-section::after — var(--color-2) at .5 */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-2);
  opacity: .5;
  z-index: 1;
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  color: var(--color-3);
}

/* NO gold bar in the homepage hero. Production ships the RULE
     .featured-section .featured-section-content__info .line{background:var(--color-1);height:16px;width:147px}
   but ships NO ELEMENT for it to match — searched the hero section, zero hits.
   It is live on other templates (#experience, .gallery-banner) which do have a
   .line. I built a <span> to satisfy the rule, which put a gold block under the
   logo that the real site does not have. Do not re-add it: a rule existing is
   not evidence the element does. Check the markup. */

/* --- Ghosted "me." brush mark behind the heading ---------------------------
   Live's `.featured-descr-bg`: an inline SVG path, absolutely centred on the
   title block, fill var(--color-3) at opacity .1, capped 710px wide (360 on
   phones). Spotted missing by Juan Carlos 14 Sep 2026. pointer-events none so
   it can never intercept a click; the headings stack above it.              */
.home-hero__titles { position: relative; }

.home-hero__titles > .main-name,
.home-hero__titles > .home-hero__sub {
  position: relative;
  z-index: 1;
}

.home-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.home-hero__watermark svg {
  display: block;
  width: 710px;
  max-width: 90vw;
  height: auto;
}

.home-hero__watermark svg .a {
  fill: var(--color-3);
  opacity: .1;
}

@media (max-width: 767px) {
  .home-hero__watermark svg { width: 360px; }
}

/* measured: .main-name
   The token --font0 (140px) is the CAP, not the rendered size: production
   scales this fluidly so "ME PLASTIC SURGERY" stays on ONE line. Measured at a
   1440px viewport it renders 97.3px, which is 6.76vw — hence the clamp. Fixing
   it at 140px wrapped the title onto two lines, which is the most visible thing
   on the site. Cap preserved for very wide screens.                          */
.home-hero .main-name {
  font-family: var(--font-family-2);
  font-size: clamp(2rem, 6.76vw, 140px);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 13px;
  line-height: 1.1;                     /* measured: 107px / 97.3px */
  margin-bottom: 5px;
  color: var(--color-3);
  white-space: nowrap;
}

/* measured: .featured-section-content__info h3 */
.home-hero__sub {
  font-family: var(--font-family-1);
  font-size: var(--font2-2);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  margin-bottom: 28px;
  color: var(--color-3);
}

/* Tracking tightens as the type shrinks; the clamp handles the size itself. */
@media (max-width: 1200px) { .home-hero .main-name { letter-spacing: 9px; } }
@media (max-width: 767px)  { .home-hero .main-name { letter-spacing: 4px; }
                             .home-hero__sub { font-size: var(--font1-1); } }

.home-hero__bna { display: block; }

/*
 * Users who ask for reduced motion get the still first frame instead of a
 * looping video. The source does not do this; an autoplaying full-bleed video
 * is exactly the case the setting exists for.
 */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
}

/* --- Logo strips -----------------------------------------------------------
   MEASURED ON THE LIVE SITE 20 Aug 2026 at 1440. Do NOT measure these from
   mirror/index.html.orig — its images 404, so every size taken from it is a
   broken-image placeholder. That mirror is why this was built wrong twice.

   One template renders THREE strips and they size DIFFERENTLY:
     #accolade-section     equal share per item, image fitted in ~144x57
     #logos-section        exact attribute size (199x61 ...), content-width
     #testimonials-section exact attribute size (127x56 ...), content-width

   NOTE ON width/height ATTRIBUTES: an HTML width attribute is a presentational
   hint at specificity 0, so ANY CSS width beats it. The previous rule said
   `width:auto`, which made the browser use the intrinsic FILE size — the @3x
   review logos are 380px wide on disk and rendered that way. It also killed the
   attribute-derived aspect-ratio, so lazy images reserved no height and
   #testimonials-section measured 0px tall. Do not reintroduce width/height here.

   The spacing margin goes on the SECTION, not the <ul>. With no padding on the
   section a child margin collapses straight through it and the section measures
   40px instead of 163px.                                                      */
.home-logos__label,
.home-eyebrow__text {
  font-family: var(--font-family-1);
  font-size: var(--font2-1);
  letter-spacing: .188em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-2);
}

.home-logos__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  max-width: 1743px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.home-logos__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  flex: 0 1 auto;
  min-width: 0;
}

/* No width/height here on purpose — see the note above. */
.home-logos__list img { max-width: 100%; }

/* Spacing lives on the section so it cannot collapse through. */
#accolade-section.home-logos    { margin: 0 0 123px; }
#logos-section.home-logos       { margin: 60px 0 0; }
#testimonials-section.home-logos{ margin: 60px 0 200px; min-height: 60px; }  /* 200 = production's strip mb 130 + its section pad-bottom 70; ours is a sibling section */

#accolade-section.home-logos .home-logos__list { max-width: 1448px; }

/* The press strip is the one that shares the row equally and fits each logo
   inside the resulting box. 9 of its 10 logos land within a pixel of
   production this way; cosmopolitan is the one production draws wider. */
#accolade-section.home-logos .home-logos__list li { flex: 1 1 0; }
#accolade-section.home-logos .home-logos__list img {
  width: auto;
  height: auto;
  max-height: 57px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .home-logos__list { flex-wrap: wrap; justify-content: center; gap: 20px 24px; }
  .home-logos__list img { max-width: 120px; height: auto; }
  #accolade-section.home-logos     { margin-bottom: 50px; }
  #testimonials-section.home-logos { margin: 30px 0 50px; }
  #logos-section.home-logos        { margin-top: 30px; }
  .home-eyebrow__text,
  .home-logos__label { font-size: var(--font1-1); }
}

/* MEASURED on the live site at 1440. These are FLEX ROWS, not a 2-column grid.
   #highlighted-procedures-two is a THREE-column row — image | copy | image
   (560 | 563 | 317). A 2-column grid pushed its copy onto a second row and the
   section measured 2006px against production's 842px.

   gap is 0: production's columns abut and carry their own 15px padding. */
.home-doctor__inner,
.home-split__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

.home-doctor__body,
.home-split__body {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 15px;
}

.home-doctor__portrait,
.home-split__media { flex: 0 0 auto; }

.home-doctor__portrait { flex: 0 0 50%; padding: 0 15px; }
.home-doctor__portrait img { width: 100%; height: auto; }

/* Split images are HEIGHT-driven on production, which is what reproduces its
   column widths exactly: 664x852 at 718 tall renders 560 wide, 376x852 renders
   317 wide — both match to the pixel. Sizing them by width instead let one
   image render 1507px tall. */
/* DEFAULT is width-driven. Only the two sections whose production heights were
   actually measured opt into a fixed height via --split-media-h. A 720px
   default applied to #airplane blew that section from 751px to 2064px — its
   images are 960x443 and 848x361, so a forced height made them 1560 and 1691
   wide and crushed the copy column to 30px. Do not give this a global height. */
.home-split__media img {
  height: var(--split-media-h, auto);
  width: var(--split-media-w, 100%);
  max-width: 100%;
  display: block;
}

#highlighted-procedures,
#highlighted-procedures-two { --split-media-w: auto; }

#highlighted-procedures            { --split-media-h: 728px; }
#highlighted-procedures-two        { --split-media-h: 718px; }

@media (max-width: 991px) {
  .home-doctor__inner,
  .home-split__inner { flex-wrap: wrap; }
  .home-doctor__body,
  .home-split__body,
  .home-doctor__portrait { flex: 1 1 100%; }
  .home-split__media { flex: 1 1 100%; }
  .home-split__media img { height: auto; width: 100%; }
}

/* The mobile portrait is display:none on production above 991px — verified,
   it renders 0x0 there. Showing it made the doctor column 2129px tall. This is
   the third section with this same mobile/desktop asset split. */
.home-doctor__portrait--mobile { display: none; }

@media (max-width: 991px) {
  .home-doctor__portrait--mobile  { display: block; }
  .home-doctor__portrait--desktop { display: none; }
}

.home-doctor__role {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--font7);
  color: var(--color-8);
  margin-bottom: 16px;
}

.home-doctor__body .button,
.home-split__body .button { margin-top: 22px; }

/* --- Split blocks ---------------------------------------------------------- */
.home-split--flipped .home-split__media { order: 2; }

@media (max-width: 991px) {
  .home-split--flipped .home-split__media { order: 0; }
}

.home-split__subhead {
  font-family: var(--font-family-2);
  font-size: var(--font2-2);
  color: var(--color-2);
  margin-bottom: 12px;
}

.home-split__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.home-split__links a {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--font7);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* --- Testimonials ---------------------------------------------------------- */
.home-testimonials { background: var(--color-13); text-align: center; }

/* REGRESSION FIX 20 Aug: this rule shared a selector with .home-hero__track,
   and rewriting the hero block dropped the flex declarations — testimonials
   stacked vertically and the section grew to ~6,000px against production's
   1,158px. Declared standalone now so it cannot be lost the same way again. */
.home-testimonials__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  padding: 0;
  margin-block: 0;
}

/* Production is a centre-slider: one quote at a time, its paragraph 800px wide
   at 18px/30px. Ours was 460px, so the same text ran 240px tall instead of 190
   and the section came up short. */
.home-testimonial {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: min(800px, 90vw);
  background: transparent;
  padding: 0;
  text-align: center;
}

/* Production, measured 1 Sep 2026 on the live slide: 18px/30px Montserrat,
   rgb(127,127,127), centred, 800 wide, transparent — the paragraph runs 190px
   and the whole slide 209 including the author line. No card, no border. */
.home-testimonial blockquote p {
  /* 35px vertical padding is production's, verified on the live slide box
     model 1 Sep: p spans 0..190 with 120px of text — the padding IS the
     rhythm. (It was briefly removed on a mis-probe; the old comment here
     had it right.) */
  padding: 35px 0;
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  color: rgb(127, 127, 127);
}

.home-testimonial blockquote {
  border: 0;
  padding: 0;
  margin: 0;
}

.home-testimonial__author {
  margin: 0;
  font-size: 16px;
  line-height: 19px;
  color: rgb(127, 127, 127);
}

/* --- Full-width CTA -------------------------------------------------------- */
/* Measured: production gives these sections NO padding and a min-height
   instead — #text-over-video-section 680px, #get-in-touch 581px. Using padding
   made them 370px, a visibly shallower band. */
.home-cta {
  background: var(--color-5) center/cover no-repeat;
  padding-block: 0;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
}

#text-over-video-section.home-cta { min-height: 680px; }
#get-in-touch.home-cta { min-height: 581px; }

@media (max-width: 767px) {
  #text-over-video-section.home-cta,
  #get-in-touch.home-cta { min-height: 340px; }
}

.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background-color-2);
}

.home-cta__inner { position: relative; }

.home-cta__eyebrow { color: var(--color-3); }

.home-cta__lead { color: var(--color-3); }

.home-cta .button { margin-inline: auto; }

/* --- CTA video background --------------------------------------------------
   #text-over-video-section is backed by a looping video on the source;
   #get-in-touch by a still image. Same dark-background safeguard as the hero:
   the white type must stay legible before the video paints.                  */
.home-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-cta__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .home-cta__video { display: none; }
}

/* --- Homepage header -------------------------------------------------------
   Measured on production: the homepage header is TRANSPARENT and overlays the
   hero video, with white nav links and NO gold block behind the logo — the gold
   block is an interior-page treatment (.not-front-page #top::before) that the
   front page only gains once scrolled.

   Painting it white, as the interior rule does, rendered the WHITE logo on a
   WHITE bar: invisible. Corrected 20 Aug 2026.                               */
/* FIXED, not absolute (corrected 14 Sep 2026, Juan Carlos: "the home page
   also uses a pinned nav") — live's #top is fixed on the front page too:
   transparent over the video at the top, and once scrolled it gains the
   FULL interior treatment (marble, 2px gold border, gold logo box at 250px,
   the same logo shrink), measured on live's homepage in the nav-up state.
   Fixed keeps the overlay-the-hero layout the old absolute gave (the hero's
   padding-top compensation below is unchanged) while also pinning.         */
body.home .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom: 0;
  z-index: 9999;
  transition: background .5s ease-out;
}

body.home .site-header--scrolled {
  background: var(--color-3) url("../images/nav-background.jpg") no-repeat center top / cover;
  border-bottom: 2px solid var(--color-1);
}

body.home .site-header::before { content: none; }

body.home .site-header--scrolled::before { content: ""; max-width: 250px; }

/* Header over the hero video: nav links, social icons and phone all GOLD.
   Client direction 20 Aug. My mirror render measured the nav links white, but
   the mirror cannot reproduce the runtime `front-page` body class (added by JS,
   27 references) so it is not authoritative for this state. Icons are inline
   SVG on currentColor, so the one `color` covers all three. */
body.home .site-nav .nav-menu > .menu-item > a,
body.home .site-nav .social a,
body.home .nav-phone a {
  color: var(--color-1);
}

body.home .site-nav .nav-menu > .menu-item > a:hover,
body.home .site-nav .social a:hover,
body.home .nav-phone a:hover {
  color: var(--color-hover-10);
}

/* GOLD, not white — live's phone hamburger is gold even over the hero video
   (Juan Carlos's iPhone screenshots, 15 Sep 2026). The open-state ✕ stays
   white via the aria-expanded rules in navigation.css. */
body.home .site-header__toggle-bar,
body.home .site-header__toggle-bar::before,
body.home .site-header__toggle-bar::after {
  background: var(--color-1);
}

body.home #nav-toggle[aria-expanded="true"] .site-header__toggle-bar { background: transparent; }
body.home #nav-toggle[aria-expanded="true"] .site-header__toggle-bar::before,
body.home #nav-toggle[aria-expanded="true"] .site-header__toggle-bar::after { background: var(--color-3); }

/* The hero sits under the overlaid header, so it needs the height back. */
body.home .home-hero { padding-top: clamp(110px, 12vw, 170px); }

/* --- Homepage before/after strip -------------------------------------------
   Production shows ONE pair at a time in a 305px window (2 x 152 + gap) with
   the captions visible beneath. Ours is a scroll-snap track rather than a Slick
   carousel, so the window is set here and the rest swipes.                    */
/* THE CLIP LIVES HERE, not on the track.
   The track is width:max-content — 2128px for seven slides — so an overflow
   rule on the track itself clips nothing: the box really is that wide. The
   305px window is this element, so this is what has to hide the rest.
   Without it all seven pairs were on screen at once. */
/* The 305px window that clips the strip to ONE pair. Applies to the interior
   #header-box too — production runs the identical strip in both places. */
.home-hero__bna,
.page-hero__bna {
  display: block;
  max-width: 305px;
  margin-inline: auto;
  overflow: hidden;
}

/* The before/after strip CHANGES PAIR IN PLACE — it does not scroll.
   Production runs slick autoplay inside a 305px window with 305px slides, so
   each pair holds, then steps quickly to the next. An earlier build used a slow
   continuous marquee, which reads as sliding rather than changing.

   Seven slides: the six pairs plus a repeat of the first parked at the end. The
   animation walks to that seventh, and the loop back to 0% is invisible because
   the seventh IS the first. Without it the reset would rewind on screen.

   Each step holds ~11% of the cycle and moves over ~3%, which is the "fast
   change" the client described. 14s / 7 steps = 2s per pair. */
@keyframes meps-bna-rotate {
  0%,      11% { transform: translateX(0); }
  14.286%, 25.3% { transform: translateX(-14.286%); }
  28.571%, 39.6% { transform: translateX(-28.571%); }
  42.857%, 53.9% { transform: translateX(-42.857%); }
  57.143%, 68.2% { transform: translateX(-57.143%); }
  71.429%, 82.5% { transform: translateX(-71.429%); }
  85.714%, 100%  { transform: translateX(-85.714%); }
}

.bna-slider {
  scroll-snap-type: none;
  max-height: none;
  width: max-content;
  animation: meps-bna-rotate 14s ease-in-out infinite;
  will-change: transform;
}

.bna-slider:hover,
.bna-slider:focus-within { animation-play-state: paused; }

.bna-slider-item { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .bna-slider {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .bna-slider-item { scroll-snap-align: center; }
  .bna-slider-item--clone { display: none; }
}

.home-hero .bna-slider-item__side figcaption {
  color: var(--color-3);              /* measured: white on production */
  font-size: var(--font8);
  letter-spacing: .2em;
  margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Section spacing — measured per section from the live page, 20 Aug 2026.

   Two wrong assumptions preceded this. First, one clamp() for every section,
   which compressed the page. Then a guess that the padding followed the class
   names — it does not. Measured computed values instead:

     #featured-section              0 / 0        #honored            0 / 0
     #accolade-section             84 / 59       #procedures         0 / 0
     #doctor-section(-2)           17 / 0        #text-over-video    0 / 0
     #highlighted-procedures      154 / 25       …-two               0 / 25
     …column2                       0 / 130      #airplane           0 / 0
     #testimonials                193 / 70       #our-practice      68 / 50
     #get-in-touch                  0 / 0        logo strips         0 / 0

   MOST SECTIONS HAVE NO PADDING AT ALL. Their height comes from content and
   image size, not rhythm — so adding padding to close a height gap is the wrong
   lever and was actively making this worse.
   --------------------------------------------------------------------------- */

.home-hero,
.home-cards,
.home-doctor,
.home-split,
.home-testimonials,
.home-logos { padding-block: 0; }

#accolade-section.home-eyebrow { padding-block: 84px 59px; }

#doctor-section.home-doctor,
#doctor-section-2.home-doctor { padding-block: 17px 0; }

#highlighted-procedures.home-split { padding-block: 154px 25px; }
#highlighted-procedures-two.home-split { padding-block: 0 25px; }
#airplane.home-split { padding-block: 0; }
#our-practice.home-split { padding-block: 68px 50px; }

/* The third highlighted block reuses the #highlighted-procedures id with the
   `2` class variant, so it must be selected by class, not id. */
.home-split--flipped { padding-block: 0 130px; }

#testimonials.home-testimonials { padding-block: 193px 40px; }  /* 40, not 70: the button-to-logos gap is pad 40 + strip mt 60 = production's 100 */

/* measured: .doctor-section .doctor-descr { margin-bottom: 70px } */
.home-doctor__body p:last-of-type { margin-bottom: 70px; }

/* 35px, not 100. The 100px was measured from `.title-left-right-column
   .main-title`, which is the SECTION TITLE block — that margin now lives on
   .home-split__header where it belongs. The column's own sub-line is 35px on
   production (`.column-descr h3 { margin-bottom: 35px }`). Carrying 100px here
   pushed #airplane 83px past production on its own. */
.home-split__body .home-section__lead { margin-bottom: 35px; }

@media (max-width: 1200px) {
  #highlighted-procedures.home-split { padding-block: 90px 20px; }
  #testimonials.home-testimonials { padding-block: 110px 50px; }
  .home-split__body .home-section__lead { margin-bottom: 50px; }
  .home-doctor__body p:last-of-type { margin-bottom: 40px; }
}

@media (max-width: 767px) {
  #accolade-section.home-eyebrow { padding-block: 40px 30px; }
  #highlighted-procedures.home-split { padding-block: 50px 16px; }
  #highlighted-procedures-two.home-split { padding-block: 0 16px; }
  .home-split--flipped { padding-block: 0 44px; }
  #testimonials.home-testimonials { padding-block: 56px 36px; }
  #our-practice.home-split { padding-block: 40px 30px; }
  .home-split__body .home-section__lead { margin-bottom: 28px; }
}

body.home .home-hero { padding-top: clamp(96px, 9vw, 130px); }

/* --- #our-practice ---------------------------------------------------------
   Measured: the desktop image is a section BACKGROUND
   (everett-our-practice-img-new-082025.jpg, cover, position top / 70% x). The
   only <img> in the markup sits in .doctor-mobile-img and is mobile-only —
   rendering it on desktop showed the mobile crop.                            */
#our-practice.home-split {
  background-image: url("../images/home/everett-our-practice-img-new-082025.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 70% top;
}

/* --- Logo strips -----------------------------------------------------------
   ONE template renders THREE strips, so everything here lands on all three:
     #accolade-section     10 press logos   max-width 1448, margin-bottom 123
     #logos-section         6 accreditations max-width 1743, margin-bottom 0
     #testimonials-section  5 review logos   max-width 1743, margin-bottom 130

   Items are `flex: 0 1 auto` — they size to their CONTENT and may shrink, but
   they never grow. 0.25.0 used `flex: 1 1 0`, which divides the row equally:
   fine-ish across ten logos, but across five it stretched each to ~290px and
   the review strip rendered enormous. Production is 0 1 auto on all three.

   Sizing comes from the width/height attributes (inc/logo-dimensions.php), NOT
   from CSS. Several of these are @3x files. Do not add `width: 100%` here —
   production has it, but only because slick set the slide width first.        */
.home-logos__label {
  font-family: var(--font-family-1);
  font-size: var(--font2-1);
  letter-spacing: .188em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-2);
}

.home-eyebrow__text {
  font-family: var(--font-family-1);
  font-size: var(--font2-1);
  letter-spacing: .188em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-2);
}

.home-logos__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  max-width: 1743px;
  margin: 60px auto 130px;
  padding: 0;
  list-style: none;
}

.home-logos__list li {
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.home-logos__list img {
  width: auto;
  height: auto;
  max-width: 100%;
  opacity: 1;
}

#accolade-section .home-logos__list { max-width: 1448px; margin: 0 auto 123px; }
#logos-section .home-logos__list    { margin-bottom: 0; }

@media (max-width: 991px) {
  /* Ten logos in one row is unreadable on a phone; wrap rather than shrink to
     nothing. Attribute sizes still cap each logo, so they cannot balloon. */
  .home-logos__list,
  #accolade-section .home-logos__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 24px;
    margin: 30px auto 50px;
  }
  .home-logos__list img { max-width: 120px; }
  .home-eyebrow__text,
  .home-logos__label { font-size: var(--font1-1); }
}

/* --- Split sections whose desktop image is a BACKGROUND ---------------------
   #our-practice only, today. Measured on production at a 1440 viewport:
     section            padding 68px 0 50px, background contain, centred
     .doctor-mobile-img display:none above 991px
     .doctor-wrapper    max-width 600px, margin-left 768px, margin-right 72px
   768px is not a magic number — it is 1440 − 72 − 600, i.e. the column is
   pinned to the right edge with a 72px gutter. Expressed as margin-left:auto
   so it holds at any width instead of only at 1440.                          */
.home-split--bg {
  position: relative;
  padding: 68px 0 50px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

.home-split--bg .home-split__inner { display: block; }

.home-split--bg .home-split__body {
  max-width: 600px;
  margin-left: auto;
  margin-right: 72px;
}

.home-split--bg .home-split__body > p:first-of-type { padding-top: 40px; }

.home-split--bg .home-section__lead { font-size: var(--font2-1); }

/* The inline image is the MOBILE crop. It must not appear on desktop. */
.home-split--bg .home-split__media--mobile { display: none; }

@media (max-width: 991px) {
  .home-split--bg {
    background-image: none !important;   /* the inline <img> takes over */
    padding: 40px 0 30px;
  }
  .home-split--bg .home-split__media--mobile { display: block; }
  .home-split--bg .home-split__body { max-width: none; margin-right: 0; }
}

/* --- Section box metrics, measured on the LIVE site at 1440 -----------------
   Production heights these produce, for reference:
     hero 820 | accolade 171 | procedures 969 | doctor 1010 / 1168
     highlighted 1276 / 842 / 987 | airplane 695 | testimonials 1029
     our-practice 709 | get-in-touch 581
   See docs/homepage-geometry-diff.md for the full staging-vs-production table. */

/* The hero is min-height driven. Ours measured 595 against production's 820 —
   the single largest fixable gap above the fold. */
.home-hero { min-height: 820px; }

#accolade-section.home-eyebrow { padding: 84px 0 59px; }

/* Production spaces #procedures with a 155px TOP MARGIN, not padding. */
#procedures { margin-top: 155px; }

.home-doctor { padding: 17px 0 0; }

#testimonials { padding: 193px 0 70px; }

/* Three sections share two ids here, so they are separated by their modifier:
     #highlighted-procedures            154 / 25
     #highlighted-procedures-two          0 / 25
     #highlighted-procedures (flipped)    0 / 130   <- the -two/2 distinction
   Getting these merged is what gave two sections the wrong rhythm before. */
#highlighted-procedures            { padding: 154px 0 25px; }
#highlighted-procedures-two        { padding: 0 0 25px; }
#highlighted-procedures.home-split--flipped { padding: 0 0 130px; }

@media (max-width: 991px) {
  .home-hero { min-height: 0; }
  #accolade-section.home-eyebrow { padding: 40px 0 30px; }
  #procedures { margin-top: 60px; }
  #testimonials { padding: 60px 0 40px; }
  #highlighted-procedures,
  #highlighted-procedures-two,
  #highlighted-procedures.home-split--flipped { padding: 0 0 40px; }
}

/* --- Procedure cards -------------------------------------------------------
   MEASURED on the live site at 1440. Production runs these as a slick carousel:
     .slick-list  padding 0 50px, width 1440
     each card    500 wide, 567 tall, padding 0 20px
     the image    460x567
     .item-title  absolute, 53px off the bottom, 44px Montserrat, uppercase,
                  white, centred over the image
   Four real cards; the 12 in production's DOM are slick's loop clones.

   Built as a scroll-snapping row rather than a JS carousel — at 1440 roughly
   2.7 cards show, which is production's resting state, and it stays usable with
   no JavaScript. Ours had NO layout rule at all, so the four cards stacked and
   the section measured 2625px against production's 969px.                     */
.home-cards__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0 50px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-cards__list::-webkit-scrollbar { display: none; }

.home-card {
  flex: 0 0 500px;
  max-width: 500px;
  padding: 0 20px;
  scroll-snap-align: start;
}

.home-card > a { display: block; position: relative; }

.home-card img {
  display: block;
  width: 100%;
  height: 567px;
  object-fit: cover;
}

.home-card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 53px;
  font-family: var(--font-family-1);
  font-size: 44px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-3);
}

/* Section heading block — production: Poiret One 101.7px / 10px tracking. */
.home-cards .home-section__eyebrow {
  font-family: var(--font-family-2);
  font-size: clamp(46px, 7.06vw, 101.7px);
  letter-spacing: 10px;
  text-transform: uppercase;
  margin: 0 0 14px;
  max-width: 670px;
}

.home-cards .home-section__lead {
  font-size: var(--font2-1);
  letter-spacing: 4.5px;
  text-transform: uppercase;
}

.home-cards .home-section__intro {
  font-size: 18px;
  color: #7f7f7f;
  max-width: 690px;
}

@media (max-width: 991px) {
  .home-cards__list { padding: 0 20px; }
  .home-card { flex: 0 0 78%; max-width: 78%; padding: 0 10px; }
  .home-card img { height: 420px; }
  .home-card__title { font-size: 30px; bottom: 32px; }
  .home-cards .home-section__eyebrow { letter-spacing: 5px; }
}

/* --- Doctor section internals ----------------------------------------------
   MEASURED on the live site at 1440:
     laurel leaves   30x56   (ours rendered at natural 188x348 — the laurel
                              block alone was 716px tall against production's
                              whole left column at 993)
     signature       400x121 (ours 670x203)
     desktop portrait 690x943 inside a 720 column                              */
.doctor-exp-achieve img {
  height: 56px;
  width: auto;
}

.doctor-descr img,
.doctor-descr .signature img {
  width: 400px;
  height: auto;
  max-width: 100%;
}

/* --- Out-of-town / airplane -------------------------------------------------
   Production: copy column 620, image column 820, section 695. The plane sits
   ABSOLUTELY over the background photo rather than below it — rendered as two
   separate blocks it stacked and doubled the section height.                  */
/* Copy on the LEFT, skyline on the RIGHT with the plane flying across it.
   The split template emits every image before the copy, so without an explicit
   order the city landed left and the text was pushed right — the mirror image
   of production. */
#airplane .home-split__inner { position: relative; align-items: stretch; }

#airplane .home-split__body     { order: 1; }
#airplane .home-split__media--1 { order: 2; }
#airplane .home-split__media--2 { order: 3; }

#airplane .home-split__body {
  flex: 0 0 43%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#airplane .home-split__media--1 { flex: 0 0 57%; }

#airplane .home-split__media--1 img { width: 100%; height: auto; }

/* THE PLANE FLIES IN. Production, verified in its stylesheet:
     .jet        position:absolute; top:200px; left:-500px; opacity:0;
                 transition: 2s ease-out
     .flew .jet  top:-3px; left:4px; opacity:1
   It starts off to the lower left and settles onto the skyline over two
   seconds. Reproduced with a transform rather than top/left so it animates on
   the compositor, and keyed to the section's own reveal class so it fires at
   the same moment production's `.flew` is added — no extra JS. */
#airplane .home-split__media--2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 57%;
  height: 100%;
  flex: none;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
}

#airplane .home-split__media--2 img {
  width: 100%;
  height: auto;
  max-width: 850px;
  opacity: 0;
  transform: translate(-500px, 200px);
  transition: transform 2s ease-out, opacity 2s ease-out;
}

#airplane.is-revealed .home-split__media--2 img {
  opacity: 1;
  transform: translate(4px, -3px);
}

/* The heading rule here is a ::after, not the <span class="line"> the
   highlighted-procedure headings use — 2px gold, 39% wide, pinned right, with
   the text sitting on a white background in front of it. That is why a search
   for span.line found only three rules and missed this one. */
#airplane .home-section__eyebrow {
  display: block;
  position: relative;
}

#airplane .home-section__eyebrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: .55em;
  width: 39%;
  border-top: 2px solid var(--color-1);
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  #airplane .home-split__media--2 img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 991px) {
  #airplane .home-split__body,
  #airplane .home-split__media--1 { flex: 1 1 100%; }
  #airplane .home-split__media--2 { position: static; width: 100%; height: auto; }
  #airplane .home-split__media--2 img { opacity: 1; transform: none; }
  #airplane .home-section__eyebrow::after { display: none; }
}

/* --- Section typography ----------------------------------------------------
   MEASURED on the live site at 1440. Ours was running at roughly HALF these
   sizes and was not uppercase, which is most of the remaining height deficit.

     section h2 (display)   Poiret One 80px / 88px line / 7px tracking / UPPER
     #highlighted-procedures    100px / 110px / 9.7px   (its main title only)
     #procedures                101.7px                  (set with the cards)
     #testimonials              80px, 8px tracking
     section h3 (lead)      Montserrat 25.008px / 27.5px / 4.5px / UPPER
     body copy              18px / 30px line / 30px bottom margin

   Sizes are clamped against the viewport (80/1440 = 5.56vw) so they scale down
   rather than overflowing on a phone. The cap is production's measured value. */
.home-section__eyebrow {
  font-family: var(--font-family-2);
  font-size: clamp(38px, 5.56vw, 80px);
  line-height: 1.1;
  letter-spacing: 7px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* 100px belongs to the SECTION TITLE only. A column sub-heading — FACE, BODY —
   is 80px on production, same as every other split sub-head. Ours applied the
   100px to both, so FACE rendered 100px and its column ran 22px tall per line
   more than it should. */
#highlighted-procedures .home-split__header .home-section__eyebrow {
  font-size: min(100px, 12vw);   /* flat 100px on production */
  letter-spacing: 9.7px;
  margin-bottom: 13px;
}

#testimonials .home-section__eyebrow { letter-spacing: 8px; }

.home-section__lead {
  font-family: var(--font-family-1);
  font-size: var(--font2-1);
  line-height: 1.1;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  margin: 0 0 35px;
}

#testimonials .home-section__lead { margin: 11px 0 0; }  /* head = 88 + 11 + 28 = production's 127; track starts right after */

/* The split template gives every heading the same class, but production splits
   them by LEVEL: the h2 is the big Poiret display, the h3 is the Montserrat
   sub-line. Ours rendered both as 30px Poiret. */
h2.home-split__subhead {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family-2);
  font-size: clamp(38px, 5.56vw, 80px);
  line-height: 1.1;
  letter-spacing: 7px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* The gold rule production ships inside the h2 — measured 2px, rgb(176,146,89),
   sitting 7px below the text baseline and running out to the column edge
   (263px beside "Breast", 324px beside "Face"). Flexed rather than given a
   fixed width so it fills whatever the heading leaves. */
h2.home-split__subhead .line {
  flex: 1 1 auto;
  min-width: 40px;
  height: 2px;
  background: var(--color-1);
  position: relative;
  top: 7px;
}

/* The ≤600 hide that lived here was OURS, not live's — live keeps the gold
   line beside FACE/BODY/BREAST on phones (measured 210x2 at 375; Juan
   Carlos's iPhone captures, 15 Sep 2026). Removed. */

h3.home-split__subhead {
  font-family: var(--font-family-1);
  font-size: var(--font2-1);
  line-height: 1.1;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 35px;
}

.home-split__body p,
.home-doctor__body p { margin-bottom: 30px; }

/* #honored is NOT a plain split. Production is an OVERLAPPING composition:
   inside an 877px-tall flex row whose content is only ~240px, the 683px title
   sits at left:379 ACROSS badges at left:585 and left:641.

   Two things are fixed here and one is not:
     - the badges are sized to production (271x238 and 159x239). Leaving them
       width-driven resolved `width:100%` against `flex:0 0 auto`, which is
       circular and fell back to the intrinsic 816px — that alone pushed the
       PAGE into 101px of horizontal scroll.
     - the 877px band is reproduced with min-height rather than invented
       padding, so the section occupies its real space.
   The overlap itself is not built. Until it is, the badges and title sit side
   by side inside the right-sized band. */
#honored { --split-media-h: 238px; --split-media-w: auto; }
#honored .home-split__inner { min-height: 877px; align-items: center; }

/* Left at the default until the overlap is built; that measured closest. */

@media (max-width: 991px) {
  /* The #highlighted-procedures override below carries higher specificity than
     a bare .home-section__eyebrow, so it has to be named again here or its
     9.7px tracking survives into mobile — measured 355px of text in a 305px
     column at 375. */
  #highlighted-procedures > .container > .home-section__eyebrow,
  #highlighted-procedures .home-split__inner > .home-split__body > .home-section__eyebrow {
    font-size: clamp(28px, 8vw, 44px);
    letter-spacing: 3px;
  }

  .home-section__eyebrow,
  h2.home-split__subhead { letter-spacing: 3px; }
  .home-section__lead,
  h3.home-split__subhead { letter-spacing: 2.5px; margin-bottom: 20px; }
  #honored { --split-media-h: auto; --split-media-w: 100%; }
  #honored .home-split__inner { min-height: 0; }
}

/* --- Doctor section typography ---------------------------------------------
   MEASURED on the live site at 1440:
     .doctor name  h2   Poiret One 89.4px / 98.4px line      (ours: 40px)
     credentials   h3   Poiret One 54.3px / 59.8px line      (ours: Montserrat 20px)
     laurel block       56px tall — leaves and caption sit on ONE line,
                        margin-bottom 53px                    (ours: 132px, stacked)
     description        18px / 30px line, margin-bottom 70px
     button             264x60, padding 18.5px 70px

   89.4/1440 = 6.21vw and 54.3/1440 = 3.77vw, so both clamp cleanly.

   The two doctor sections differ on production only because "Dr. Ruya Zhao"
   wraps to two lines at 89px and her bio is 60px longer — 1168 vs 1010. Ours
   measured identical at 932, which was the tell that the type was too small. */
.home-doctor__name {
  font-family: var(--font-family-2);
  font-size: clamp(42px, 6.21vw, 89.4px);
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

.home-doctor__credentials {
  font-family: var(--font-family-2);
  font-size: clamp(26px, 3.77vw, 54.3px);
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}

/* Leaves flank the caption on one line rather than stacking above and below. */
.doctor-exp-achieve {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 53px;
}

.doctor-exp-achieve img { height: 56px; width: auto; flex: 0 0 auto; }

.doctor-exp-achieve span {
  font-family: var(--font-family-1);
  font-size: var(--font2);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.doctor-descr { margin-bottom: 70px; }
.doctor-descr p { font-size: 18px; line-height: 30px; margin-bottom: 30px; }

@media (max-width: 991px) {
  .doctor-exp-achieve { margin-bottom: 28px; gap: 8px; }
  .doctor-exp-achieve img { height: 40px; }
  .doctor-descr { margin-bottom: 36px; }
}

/* --- Full-bleed rows -------------------------------------------------------
   MEASURED AT 2560, WHICH IS WHERE THIS MATTERS. Verifying only at 1440 hid
   this completely: production's split rows and procedure carousel ignore the
   container and span the whole viewport.

     element              1440              2560
     split row            620 + 820 = 1440  960 + 960, spans 0..2560
     .slick-list (cards)  1440              2560, padding 0 50px
     hero inner           1440              1600 (max-width 1600, not 1743)

   At 1440 our container-constrained version measured 1400 against production's
   1440 — a 40px gap, invisible. At 2560 the same markup is 1743 against 2560:
   over 800px narrower, which is why the page looked wrong on a large display
   and right in my measurements. Always check a wide viewport.

   The `calc(50% - 50vw)` margins are the standard way to break out of a centred
   container without restructuring the markup. */
/* Split rows are capped at 1920 and CENTRED — they are not full-bleed.
   Measured on production at 2560: each split section is 1920 wide sitting at
   left 320, so 320px of margin either side. At 1440 they fill the viewport,
   because 1440 is under the cap — which is what made an earlier round read them
   as full-bleed and set `width: 100vw`. That pushed the images and copy hard
   against the browser edges on a large display.

   1920, not 75%: a percentage would give 1080 at 1440, and production measures
   the full 1440 there.

   The cap has to beat .container's 1743, which these elements also carry. */
.home-split__inner {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  /* These elements also carry .container, whose 20px side padding would inset
     the content to 340 against production's 320. The columns supply their own
     15px gutter, exactly as production's do, so the wrapper adds none. */
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 991px) {
  /* The gutter comes back once the columns stack. */
  .home-split__inner { padding-left: 20px; padding-right: 20px; }
}

/* The copy column is capped, not proportional. Production's wrapper measures
   531 at 1440 and 704 at 2560 — that is one max-width of 704px, filling the
   column when the column is narrower and capping it when it is wider. */
.home-split__body > * {
  max-width: 704px;
}

.home-split--bg .home-split__body > * { max-width: none; }

/* The hero is capped narrower than the page container. */
.home-hero__inner { max-width: 1600px; }

@media (max-width: 991px) {
  .home-split__inner { max-width: none; }
  .home-split__body > * { max-width: none; }
}

/* ===========================================================================
   CLIENT REVIEW FIXES — measured on the live site, 20 Aug 2026
   =========================================================================== */

/* 1. SECTION TITLES ARE BLACK, NOT GOLD.
      Production: rgba(0,0,0,0.996) on every section h2/h3. Ours were rendering
      gold because nothing set a colour and they inherited one. The gold on this
      page belongs to the ACCENT RULE beside the title, not the title itself. */
.home-section__eyebrow,
.home-section__lead,
h2.home-split__subhead,
h3.home-split__subhead,
.home-logos__label,
.home-eyebrow__text {
  color: var(--color-2);
}

/* 2. PROCEDURE LINKS ARE OUTLINE BUTTONS.
      Production: white fill, 2px gold stroke, gold text, 50px radius,
      padding 18.5px 25px, centred. Hover inverts to gold fill / white text.
      Ours rendered as bare gold text links with no button at all.
      NOTE the existing .button is the FILLED variant (gold fill, white text) and
      is correct for "Request a consultation" / "Contact us" — do not merge them. */
.home-split__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.home-split__links li:first-child { flex: 1 1 100%; }
.home-split__links li { flex: 1 1 calc(50% - 8px); }

.home-split__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 18.5px 25px;
  background: var(--color-3);
  border: 2px solid var(--color-1);
  border-radius: 50px;
  color: var(--color-1);
  font-size: var(--font1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: color var(--transition-base),
              background-color var(--transition-base);
}

.home-split__links a:hover,
.home-split__links a:focus-visible {
  background: var(--color-1);
  color: var(--color-3);
}

/* 3. REVIEW AND ACCREDITATION LOGOS ARE SMALL.
      Production renders them at their attribute size — 127x56, 199x61 — but the
      reset carries `img { height: auto }`, under which the width attribute does
      not survive: the browser falls back to the intrinsic 380px and max-width
      clamps it to the column, giving 295x130. Sizing by HEIGHT reproduces
      production exactly because the aspect ratios already match. */
#testimonials-section.home-logos .home-logos__list img { height: 55px; width: auto; }
#logos-section.home-logos .home-logos__list img       { height: 61px; width: auto; }

/* 4. #honored — the title sits BETWEEN the two awards.
      Production order is plaque, title, badge. Our template emits every image
      before the copy, so both awards landed on the left with the title stranded
      on the right. Reordered with flex rather than restructuring the template,
      which every other split section shares. */
#honored .home-split__media--1 { order: 1; }
#honored .home-split__body     { order: 2; }
#honored .home-split__media--2 { order: 3; }
#honored .home-split__body     { text-align: center; }
#honored .home-split__body > * { max-width: none; }

/* 5. The procedure carousel sits on a marble ground. */
#procedures {
  background-image: url("../images/home/marbled-paint-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Thin white rule under each card title. */
.home-card__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  background: var(--color-3);
  opacity: .85;
}

/* 6. Procedures heading block is TWO COLUMNS — title left, intro right. */
.home-cards__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

/* Even halves, no gap — production's two col-lg-6 columns are 720 each at 1440
   and the intro inside is 690. Subtracting a 40px gap left our intro column at
   660, which capped the paragraph 30px short and changed its wrapping. */
.home-cards__head-title { flex: 0 0 50%; max-width: 50%; min-width: 0; }
.home-cards__head-intro { flex: 0 0 50%; max-width: 50%; min-width: 0; }
.home-cards .home-section__intro { margin: 0; max-width: 690px; }

@media (max-width: 991px) {
  .home-cards__head { display: block; }
  .home-split__links li,
  .home-split__links li:first-child { flex: 1 1 100%; }
  #honored .home-split__media--1,
  #honored .home-split__body,
  #honored .home-split__media--2 { order: 0; }
}

/* 7. THE PROCEDURE CAROUSEL SCROLLS ITSELF, RIGHT TO LEFT.
      Production autoplays a slick loop. Reproduced as a marquee: the card set
      is rendered twice and the track translates by exactly -50%, so the moment
      it completes it is visually identical to where it started.

      Duration is set from the card count so the speed stays constant whether
      there are four procedures or eight. Pauses on hover and on keyboard focus
      so nobody has to chase a moving link, and stops entirely under
      prefers-reduced-motion — an endless sideways scroll is exactly the kind of
      motion that setting exists for. */
@keyframes meps-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

#procedures .home-cards__list {
  overflow-x: hidden;            /* the marquee drives it, not the user */
  scroll-snap-type: none;
  animation: meps-marquee 40s linear infinite;
  width: max-content;
  will-change: transform;
}

#procedures .home-cards__list:hover,
#procedures .home-cards__list:focus-within {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #procedures .home-cards__list {
    animation: none;
    width: 100vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  #procedures .home-card--clone { display: none; }
}

/* 8. TESTIMONIALS — decorative quote marks and prev/next arrows.
      Production draws the marks as two large mirrored glyphs filled #b09259 at
      0.104 opacity, sitting behind the quote. Ours had neither. */
.home-testimonials__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-testimonials__viewport::before,
.home-testimonials__viewport::after {
  content: "\201C";
  position: absolute;
  top: 50%;
  font-family: var(--font-family-1);
  font-size: 260px;
  line-height: 0;
  color: var(--color-1);
  opacity: .104;
  pointer-events: none;
  z-index: 0;
}

.home-testimonials__viewport::before { left: 8%;  transform: translateY(-30%); }
.home-testimonials__viewport::after  { right: 8%; transform: translateY(10%) rotate(180deg); }

.home-testimonials__track { position: relative; z-index: 1; flex: 1 1 auto; }

.home-testimonials__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-1);
  cursor: pointer;
  z-index: 2;
  transition: color var(--transition-base);
}

.home-testimonials__arrow:hover { color: var(--color-hover-10); }

.home-testimonials__arrow:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .home-testimonials__viewport::before,
  .home-testimonials__viewport::after { font-size: 140px; }
  .home-testimonials__arrow { width: 28px; }
}

/* ===========================================================================
   BREAKPOINT PARITY — rules production has that we were missing entirely.
   Extracted from its stylesheet, not inferred. Two whole breakpoints were
   absent from this theme: max-width 1600 (7 rules) and the large-screen half
   of max-width 1200.
   =========================================================================== */

/* --- ≤1600 ---------------------------------------------------------------- */
@media (max-width: 1600px) {

  /* Production sizes these with `calc(14px + 95 * (100vw - 300px) / 1300)`,
     which is exactly `calc(7.3077vw - 7.923px)`. Ours approximated it as
     clamp(2rem, 6.76vw, 140px) — right at 1440 (97.3px, where it was measured)
     and drifting elsewhere: at 375 it gave 25.4px against production's 19.5.
     Using the real formula removes the guesswork at every width. */
  .home-hero .main-name { font-size: calc(7.3077vw - 7.923px); }

  /* Same shape, 100 instead of 95: calc(7.6923vw - 9.077px). */
  .home-cards .home-section__eyebrow { font-size: calc(7.6923vw - 9.077px); }

  /* #honored STACKS below 1600 — this is the one that matters most.
     `flex-direction: column; align-items: center; gap: 80px`, and the maths
     confirms it: 238 + 80 + 240 + 80 + 239 = 877, which is exactly production's
     measured height at 1440. Ours sat side-by-side and reached 877 through a
     min-height, so it matched the NUMBER while being structurally wrong. */
  #honored .home-split__inner {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    min-height: 0;
  }

  #honored .home-split__media--1,
  #honored .home-split__media--2 { padding: 0; }
  #honored .home-split__body { text-align: center; }
}

/* --- ≤1200 ---------------------------------------------------------------- */
@media (max-width: 1200px) {

  .home-hero { min-height: 760px; }      /* production drops it from 820 */

  /* #honored and #procedures centre their copy. */
  #honored .home-split__body,
  #procedures .home-cards__head-title,
  #procedures .home-cards__head-intro { text-align: center; max-width: 100%; }

  #procedures .home-cards__head { display: block; }
  #procedures .home-cards__head-title { padding: 0; margin-bottom: 30px; }
  #procedures .home-section__intro { margin-left: auto; margin-right: auto; }

  .home-card { flex-basis: 500px; max-width: 500px; padding: 0 30px; }

  /* Doctor sections: the signature comes out of its absolute position and the
     copy block gains a large top pad. */
  .home-doctor .doctor-descr { margin-bottom: 0; }
  #doctor-section-2 .doctor-descr { margin-bottom: 40px; }
  .home-doctor .doctor-descr .signature,
  .home-doctor .doctor-descr img { position: static; margin: 40px 0; }
  .home-doctor__body { padding-top: 100px; }
  #doctor-section-2 .home-doctor__body { margin-bottom: 60px; }

  .home-split__body { padding-top: 50px; }

  /* Testimonial slide narrows: 700 wide with 30px padding = 640 of copy. */
  .home-testimonial { width: min(640px, 90vw); }

  #our-practice .home-split__body { margin-right: 0; }
}

/* Section header for split sections that carry their own sub-headings —
   #highlighted-procedures only, today. Centred, full width, above the split. */
/* Measured on production at 1280: .main-title is 261 tall with a 100px bottom
   margin, and its h2 is a FLAT 100px — not fluid. Ours used 40px and a vw-based
   clamp that gave 88.8px at 1280, which is most of why the section came up
   411px short. */
.home-split__header {
  max-width: 1743px;
  margin: 0 auto 100px;
  text-align: center;
}

.home-split__header .home-section__eyebrow,
.home-split__header .home-section__lead { max-width: none; }

/* --- Below 1600 the media column is PROPORTIONAL, not a fixed height --------
   Production sizes these columns as percentages of the viewport: at 1440 the
   image column is 820 (57%), at 1280 it is 764 (60%). Our fixed --split-media-h
   kept the image 820 wide at every width, so at 1280 the row needed 820 + 704
   = 1524 in a 1280 viewport and the PAGE scrolled sideways by 61px.

   Above 1600 the fixed height stays — that is where it was measured and where
   it matches exactly. */
@media (max-width: 1600px) {
  /* :not(--two) — that variant has THREE columns, so 57% each put two images
     at 114% of the row, wrapped the copy, and blew the section from 872 to
     2767. Its own proportions are set below. */
  .home-split:not(#highlighted-procedures-two) .home-split__media { flex: 0 0 57%; max-width: 57%; }
  .home-split__media img {
    height: auto;
    width: 100%;
    max-width: 100%;
  }
  .home-split__body { flex: 1 1 0; }
  .home-split__body > * { max-width: none; }

  /* #honored stacks here, so its badges must not take 57%. */
  #honored .home-split__media { flex: 0 0 auto; max-width: 100%; }
  #honored .home-split__media img { width: auto; height: 238px; }

  /* The airplane keeps its overlay geometry. */
  #airplane .home-split__media--2 { flex: none; max-width: 57%; }

  /* image | copy | image. Measured on production at 1280: 519 / 467 / the
     remainder, i.e. roughly 40.5% / flexible / 23%. */
  #highlighted-procedures-two .home-split__media--1 { flex: 0 0 40.5%; max-width: 40.5%; }
  #highlighted-procedures-two .home-split__media--2 { flex: 0 0 23%;   max-width: 23%; }
  #highlighted-procedures-two .home-split__body     { flex: 1 1 0; min-width: 0; }
  #highlighted-procedures-two .home-split__media img { width: 100%; height: auto; }
}

/* #highlighted-procedures: COPY LEFT, IMAGE RIGHT — both instances.
   Production at 1280 puts .column-descr at left 0 and .column-img at 516. The
   split template emits media first, so without an order the photo took the left
   and the copy was pushed right — the mirror image of production. The `--two`
   variant keeps its own three-column arrangement and is untouched. */
#highlighted-procedures .home-split__body  { order: 1; }
#highlighted-procedures .home-split__media { order: 2; }

/* #highlighted-procedures-two is image | COPY | image.
   The template emits both images before the copy, so without an order the two
   photos sat together on the left with the text stranded on the right.
   Production: .column-img 519, .column-descr 467, .column-img 294. */
#highlighted-procedures-two .home-split__media--1 { order: 1; }
#highlighted-procedures-two .home-split__body     { order: 2; }
#highlighted-procedures-two .home-split__media--2 { order: 3; }

/* The copy column sits 150px down from the top of the split row on production
   (.column-descr-wrapper padding-top:150px), dropping to 50px at ≤1200. Ours
   had none, which is a large part of why every split section measured short. */
.home-split__body { padding-top: 150px; }
.home-split--bg .home-split__body { padding-top: 0; }
#honored .home-split__body { padding-top: 0; }

/* Production zeroes it for the airplane specifically:
     .left-right-column-airplane .column-descr .column-descr-wrapper { padding-top: 0 }
   Inheriting the 150px pushed that section 173px past production. */
#airplane .home-split__body { padding-top: 0; }

/* ===========================================================================
   TABLET / PHONE PARITY — extracted from production's own ≤991 and ≤767 rules.
   =========================================================================== */

@media (max-width: 991px) {

  /* Splits stack, and production reverses them: `.title-left-right-column
     .main-wrapper { flex-direction: column-reverse }` puts the COPY above the
     image. The `column2` variant (our --flipped) stacks the normal way round. */
  .home-split__inner { flex-direction: column-reverse; }
  .home-split--flipped .home-split__inner { flex-direction: column; }

  /* Columns stop being proportional once stacked. */
  .home-split__media,
  #highlighted-procedures-two .home-split__media--1,
  #highlighted-procedures-two .home-split__media--2 {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  /* `.column-img img { max-height:400px; object-fit:contain }` — this is why
     production's split images are modest on a tablet and ours were not. */
  .home-split__media img {
    max-height: 400px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .home-split__body {
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0;
    padding-top: 0;
  }

  #highlighted-procedures-two { margin-bottom: 0; }
  #highlighted-procedures-two .home-split__body { margin-bottom: 50px; padding-top: 50px; }
  #airplane .home-split__media--1 { margin-bottom: 30px; }

  /* Doctor sections lose their background and stop being a grid. */
  .home-doctor { background-image: none !important; }
  .home-doctor__inner { display: block; }
  .home-doctor__body { padding-top: 0; }
  .home-doctor__portrait--mobile { margin-bottom: 30px; }
  .doctor-exp-achieve span { font-size: var(--font1); }

  .home-testimonial { padding-left: 20px; padding-right: 20px; }

  #our-practice { padding-top: 0; }
  #our-practice .home-split__body {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
  #our-practice .home-split__media--mobile { margin-bottom: 40px; }
  #our-practice .home-split__media--mobile img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    object-position: top;
  }
}

/* --- Tablet values, measured on production at 768 --------------------------
     #featured-section        min-height 627   (ours inherited 760 from ≤1200)
     #text-over-video-section min-height 600   (ours 680)
     #testimonials            padding 100/50   (ours 193/70)
     #procedures .main-title  margin-bottom 30
     #procedures slide        400 wide, padding 0 10
     #testimonials slide      668 wide, padding 0 10
     #our-practice            padding 0 0 50
     #accolade-section title  25px, two lines (h 55)                            */
@media (max-width: 991px) {
  .home-hero { min-height: 627px; }
  #text-over-video-section.home-cta { min-height: 600px; }
  #testimonials.home-testimonials { padding-block: 100px 50px; }
  #our-practice { padding: 0 0 50px; }

  .home-cards__head-title { margin-bottom: 30px; }
  .home-card { flex: 0 0 400px; max-width: 400px; padding: 0 10px; }
  .home-card img { height: 468px; }

  .home-testimonial { width: min(668px, 92vw); padding-left: 10px; padding-right: 10px; }

  .home-logos__label,
  .home-eyebrow__text { font-size: var(--font2-1); }
}

/* --- Split copy column: indent and measure ---------------------------------
   MEASURED on production at 1440 (the FACE block):
     .column-descr           620 wide, padding 0 15px
     .column-descr-wrapper   531 wide, margin-left 58.96 → content starts 74
                             from the column edge, padding-top 150
     buttons                 531 / 260 / 260
     image                   820x728, vertically centred in the row

   Ours ran the copy across the full 589, so the paragraphs wrapped to fewer
   lines, the column measured 808 against production's 857, and the section came
   up 49px short. The indent is what sets the measure. */
/* The indent is NOT the same for every split. Measured at 1440:
     Breast / Face   column 620, indent 74, copy 531, top padding 150
     Body (-two)     column 563, indent 26, copy 523, top padding 140
     Out-of-town     column 620, indent 74, copy 531, top padding 0
   Applying 74 to all three left BODY's copy 48px too narrow and pushed right. */
#highlighted-procedures .home-split__body,
#airplane .home-split__body {
  padding-left: 74px;
  padding-right: 15px;
}

#highlighted-procedures-two .home-split__body {
  padding-left: 26px;
  padding-right: 15px;
  padding-top: 140px;
}

@media (max-width: 1200px) {
  #highlighted-procedures .home-split__body,
  #highlighted-procedures-two .home-split__body,
  #airplane .home-split__body { padding-left: 15px; }
  #highlighted-procedures-two .home-split__body { padding-top: 50px; }
}

/* `.left-right-column-airplane .column-descr .descr { margin-bottom: 50px }` */
#airplane .home-split__body p:last-of-type { margin-bottom: 50px; }

/* BODY (-two) column proportions, measured at 1440: 560 / 563 / 317 of 1440,
   i.e. 38.9% / flexible / 22%. Ours were 40.5% / 23%, which took 38px off the
   copy measure and made both images ~25px too wide. */
@media (max-width: 1600px) {
  #highlighted-procedures-two .home-split__media--1 { flex: 0 0 38.9%; max-width: 38.9%; }
  #highlighted-procedures-two .home-split__media--2 { flex: 0 0 22%;   max-width: 22%; }
}

/* `.column-descr .descr { margin-bottom: 73px }` on the highlighted sections —
   the gap between the copy block and the button stack. Measured 73 at 1280 and
   1440; ours inherited the generic 30. */
#highlighted-procedures .home-split__body p:last-of-type,
#highlighted-procedures-two .home-split__body p:last-of-type {
  margin-bottom: 73px;
}

/* `.left-right-column-airplane .column-descr h2 { line-height: 83px }` — the
   airplane title wraps to three lines, so a 5px line-height difference is 15px
   of section height. */
#airplane .home-split__body h2 { line-height: 83px; }

/* ===========================================================================
   FULL-SECTION AUDIT AGAINST PRODUCTION AT 1440 — remaining differences.
   Every value below was read off the live site, not inferred.
   =========================================================================== */

/* 1. THE TWO CTA HEADINGS WERE 40px AGAINST PRODUCTION'S 102px.
      "Get in touch" and the mid-page call-to-action both render at 102/112 with
      17px beneath — the same fluid formula as #procedures, `calc(14px + 100 *
      (100vw - 300px) / 1300)` = calc(7.6923vw - 9.077px). Their section heights
      matched all along because both are min-height driven, which is exactly why
      a height-only comparison never caught it. */
/* NOTE the class: the CTA template uses .home-cta__eyebrow, not
   .home-section__eyebrow. A first attempt at this fix targeted the wrong one
   and silently did nothing. */
.home-cta__eyebrow {
  font-size: calc(7.6923vw - 9.077px);
  line-height: 1.1;
  margin-bottom: 17px;
}

@media (min-width: 1601px) {
  .home-cta__eyebrow { font-size: 102px; }
}

/* 2. #honored — the title is 683 wide and centred, not full width, and its
      line-height is 80 (equal to the font size), which is what makes it set as
      three tight lines. */
#honored .home-split__body .home-section__eyebrow {
  max-width: 683px;
  margin-left: auto;
  margin-right: auto;
  line-height: 80px;
}

/* 3. Testimonial quotes are 800 wide and CENTRED. Ours ran 723 and left. */
.home-testimonial blockquote,
.home-testimonial blockquote p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* 4. #our-practice column is 600 wide, heading margin-bottom 10. */
/* 600 is the COLUMN, not a cap inside padding: production's .doctor-wrapper is
   600 wide with no side padding. Ours had 15px each side, so the content
   measured 570. */
#our-practice .home-split__body {
  padding-left: 0;
  padding-right: 0;
  max-width: 600px;
}
#our-practice .home-split__body > * { max-width: 600px; }
#our-practice .home-section__eyebrow { margin-bottom: 10px; }

/* 5. #procedures intro is 690 wide; #doctor-section copy column is 690. */
.home-cards .home-section__intro { max-width: 690px; }
.home-doctor__body > * { max-width: 690px; }


/* ------------------------------------------------------------------ */
/* Insurance landing (template-special-landing-insurance-breast-       */
/* reduction.php). The page is built from home sections; only its two  */
/* bespoke pieces need rules of their own. Live gives the verification */
/* band no background rule — plain ground, centred copy.               */

.landing-verification { padding: 60px 20px; text-align: center; }

.landing-verification__title {
  font-size: 35px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.landing-verification__note {
  max-width: 660px;
  margin: 0 auto 20px;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  .landing-verification__title { font-size: 30px; }
}


/* --- Round 14 (1 Sep 2026): carousel geometry, measured live at 1440 -------
   #testimonials: slider-bottom to button-top is 80 on production (slick mb 40
   + the button container's 40 top pad); the button is 60 tall.
   #procedures: the strip has margin-top 75; below it production shows a
   37px gap, a 7px dots row and another 37px before the 60px "View all"
   button — ours has no dots, so the button carries the full 81.            */
#testimonials .button { margin-top: 80px; }

.home-cards__list { margin-top: 75px; }

/* a.button.…, not the lone class: base.css's `a.button { display:inline-flex }`
   is (0,1,1) and silently beat this rule's display:block, which turned the
   margin:auto into 0 — the button sat hard LEFT at every width from the day
   it was written (found 15 Sep via Juan Carlos's phone pass; live centres it
   on desktop too). */
a.button.home-cards__view-all {
  display: flex;
  width: max-content;
  margin: 81px auto 0;
}

/* --- #our-practice, round 14b (1 Sep): the last homepage spacing delta ------
   Production's container: text ends 443, button 516..576, container end 591.
   Ours had the button at 471 and no tail. Scoped to this section — the other
   five split sections measure within ~20px of production and share these
   rules, so nothing here may leak to them.
   margin-top 73 (not 43): it collapses with the paragraph's 30px bottom
   margin, and collapsed margins take the larger value, not the sum.          */
#our-practice .home-split__links { margin-top: 73px; }

#our-practice .home-split__body { padding-bottom: 15px; }

/* Production's button is content-width (264px), not stretched to the column. */
#our-practice .home-split__links a { width: max-content; padding-inline: 70px; }  /* production: 70px sides -> 264 wide */

/* ===========================================================================
   PHONE PARITY, round 15 (15 Sep 2026) — homepage at 375 against live,
   from Juan Carlos's iPhone screenshots + live at an emulated 375.
   =========================================================================== */

/* 1. Scrolled home header ≤767: the gold logo box sits flush LEFT with the
      (new standalone) logo inside it, exactly like the interior pages — the
      centred 250px box was a desktop-only geometry, and on the phone it
      rendered as an empty centred gold rectangle with no logo at all. */
@media (max-width: 767px) {
  body.home .site-header--scrolled::before {
    left: 0;
    transform: none;
    max-width: 140px;
  }
}

/* 2. The press strip (#accolade-section) is a MARQUEE on live's phone layout —
      slick with cloned slides, ~178px per slide. Our static wrap put ten
      squeezed logos on top of each other (li flex:1 1 0 shrank the boxes while
      the ≤991 img max-width:120px kept the images full size — overlap).
      The row is rendered twice (template) and translates by exactly -50%, so
      the loop point is invisible. ~60px/s matches live's stepping pace. */
/* li.home-logos__dupe, not bare .home-logos__dupe: the strip's own
   `.home-logos__list li { display:flex }` (0,1,1) beats a lone class (0,1,0),
   which put all TWENTY press logos in the desktop row on the first try. */
.home-logos__list li.home-logos__dupe { display: none; }

@keyframes meps-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tablet keeps the wrapped grid but must not overlap: content-sized boxes. */
@media (max-width: 991px) {
  #accolade-section.home-logos .home-logos__list li { flex: 0 1 auto; }
}

/* ALL THREE strips are slick marquees on live's phone layout (measured on
   live at 375, 15 Sep 2026): press slides 178px (img ~158x42), accreditation
   slides 249px (img ~229x61), review slides 170px (img ~110x57). Duration is
   set per strip so they all travel at roughly live's ~30px/s. */
@media (max-width: 767px) {
  #accolade-section .container,
  #logos-section .container,
  #testimonials-section .container { overflow: hidden; }

  #accolade-section.home-logos .home-logos__list,
  #logos-section.home-logos .home-logos__list,
  #testimonials-section.home-logos .home-logos__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    max-width: none;
    gap: 0;
    margin: 20px 0 40px;
    animation: meps-logos-marquee 60s linear infinite;
    will-change: transform;
  }

  #logos-section.home-logos .home-logos__list        { animation-duration: 50s; }
  #testimonials-section.home-logos .home-logos__list { animation-duration: 28s; }

  #accolade-section.home-logos .home-logos__list li,
  #accolade-section.home-logos .home-logos__list li.home-logos__dupe,
  #logos-section.home-logos .home-logos__list li,
  #logos-section.home-logos .home-logos__list li.home-logos__dupe,
  #testimonials-section.home-logos .home-logos__list li,
  #testimonials-section.home-logos .home-logos__list li.home-logos__dupe {
    display: flex;
    flex: 0 0 auto;
    width: 178px;
    justify-content: center;
    padding: 0 10px;
  }

  #logos-section.home-logos .home-logos__list li,
  #logos-section.home-logos .home-logos__list li.home-logos__dupe { width: 249px; }
  #testimonials-section.home-logos .home-logos__list li,
  #testimonials-section.home-logos .home-logos__list li.home-logos__dupe { width: 170px; }

  #accolade-section.home-logos .home-logos__list img {
    max-width: 158px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  #logos-section.home-logos .home-logos__list img {
    max-width: 229px;
    height: auto;
    max-height: 61px;
    width: auto;
    object-fit: contain;
  }

  #testimonials-section.home-logos .home-logos__list img {
    max-width: 110px;
    height: auto;
    max-height: 57px;
    width: auto;
    object-fit: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  #accolade-section.home-logos .home-logos__list,
  #logos-section.home-logos .home-logos__list,
  #testimonials-section.home-logos .home-logos__list { animation: none; }
  #accolade-section .container,
  #logos-section .container,
  #testimonials-section .container { overflow-x: auto; }
}

/* 3. #honored badges at 375, measured on live: the plaque renders 270 CSS px
      wide (its natural desktop size), the Castle Connolly badge 159 — both
      CENTRED. Our fixed height:238px shrank the plaque to 190, and the ≤991
      width:100% column left both images hanging at the left edge. */
@media (max-width: 767px) {
  #honored .home-split__media img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
  }
  #honored .home-split__media--1 img { width: min(270px, 88%); height: auto; }
  #honored .home-split__media--2 img { width: 159px; height: auto; }
}

/* ===========================================================================
   PHONE PARITY, round 16 (15 Sep 2026) — the 57% column bug + testimonials
   cutoff + airplane, from Juan Carlos's live-site iPhone captures.
   =========================================================================== */

/* 1. THE BIG ONE: every split section's photo rendered at 57% width on
      phones (38.9%/22% in the BODY section). The ≤1600 desktop rule
      `.home-split:not(#highlighted-procedures-two) .home-split__media`
      carries an ID inside :not(), so its specificity beats the ≤991
      stack-at-100% rules no matter where they sit in the file. Every phone
      photo — breast/face/body highlights, the airplane pair, the Our
      Practice team photo, the #honored plaque column — was squeezed into a
      191px column at 375. Re-declared here, at equal-or-higher specificity,
      LAST in the file, scoped ≤991. Live at 375: all of these are
      full-width (the 400px max-height contain cap then sizes the paint). */
@media (max-width: 991px) {
  .home-split .home-split__media,
  .home-split:not(#highlighted-procedures-two) .home-split__media,
  #highlighted-procedures-two .home-split__media--1,
  #highlighted-procedures-two .home-split__media--2,
  #airplane .home-split__media--1,
  #airplane .home-split__media--2 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

/* 2. The airplane FLIES IN on live's phone layout too — the old ≤991 rule
      here pinned it static (opacity 1, no transform), which read as "the
      animation is missing" next to live. Same reveal mechanic as desktop,
      with a viewport-relative start so it enters from the lower left on a
      phone. The gold rule beside OUT-OF-TOWN PATIENTS also exists on live's
      phone layout and was hidden here — restored. */
@media (max-width: 991px) {
  #airplane .home-split__media--2 img {
    opacity: 0;
    transform: translate(-60vw, 120px);
    transition: transform 2s ease-out, opacity 2s ease-out;
  }
  #airplane.is-revealed .home-split__media--2 img {
    opacity: 1;
    transform: none;
  }
  #airplane .home-section__eyebrow::after { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  #airplane .home-split__media--2 img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 3. TESTIMONIALS were cut off on phones: the 345px slide sat in a track the
      arrows had squeezed to ~247px, clipping every quote mid-sentence. Live
      at 375: 275px slides, no arrows, centre-snap with the neighbouring
      quotes peeking at the edges — swipe is the control. The track's inline
      padding lets the first and last quote centre. */
/* One FULL-WIDTH quote per view — Juan Carlos's direction 15 Sep 2026,
   deliberately DEVIATING from live here: live's centre-mode shows the
   neighbouring quotes' edges peeking in, and he wants the reviews clean
   with no cropped neighbour visible. Each slide fills the track, so a
   swipe snaps quote-to-quote with nothing else on screen. */
@media (max-width: 767px) {
  .home-testimonials__arrow { display: none; }
  .home-testimonials__viewport { gap: 0; }
  .home-testimonial {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 10px;
  }
  .home-testimonials__track { padding-inline: 0; }
}

/* The phone media boxes are FULL-BLEED on live (375 wide at a 375 viewport —
   the copy keeps the gutter, the photos do not). Break the media out of the
   inner's 20px padding. Centred paints (contain) are unaffected except for
   using the full width, which is exactly live's construction. */
@media (max-width: 991px) {
  .home-split .home-split__media,
  .home-split:not(#highlighted-procedures-two) .home-split__media,
  #highlighted-procedures-two .home-split__media--1,
  #highlighted-procedures-two .home-split__media--2,
  #airplane .home-split__media--1,
  #airplane .home-split__media--2 {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-inline: -20px;
  }

  /* #honored's badges are centred content-width images, not photography —
     they stay inside the gutter. */
  #honored .home-split__media {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* The testimonial track is swipe-driven; its scrollbar never shows on live
   (slick). Same treatment the procedure cards already have. */
.home-testimonials__track { scrollbar-width: none; }
.home-testimonials__track::-webkit-scrollbar { display: none; }

/* Round 17 (15 Sep 2026, Juan Carlos): ALL buttons centre on phones. Four sat
   left — the procedures "View all", both doctor "Learn More"s, and Our
   Practice's "Learn More". Cause: .button is inline-flex, and AUTO MARGINS DO
   NOT CENTRE AN INLINE-LEVEL BOX — the view-all even carried margin:auto that
   silently resolved to 0. Block-level flex + max-content + auto margins. */
@media (max-width: 767px) {
  .home-doctor__body .button,
  .home-split__body .button,
  /* a.button.…: base.css's `a.button` (0,1,1) beats a lone class — it is why
     the view-all's own margin:auto never worked at any width. */
  a.button.home-cards__view-all,
  #testimonials .button {
    display: flex;
    width: max-content;
    margin-inline: auto;
  }

  #our-practice .home-split__links a { margin-inline: auto; }
}

/* ===========================================================================
   Round 18 (15 Sep 2026) — the two cosmetic deltas from Juan Carlos's
   live captures: doctor-credentials gold line + the links→photo gap.
   =========================================================================== */

/* 1. "MD, FACS ——" / "MD ——" — live draws a 2px gold flex-filler span inside
      the credentials heading, BOTH doctors, ALL widths (verified on live at
      375 AND desktop — this was missing from our build everywhere and no QC
      pass caught it; the subhead .line above uses the same construction).
      Ours has no span in that markup, so the line is a ::after flex-filler —
      same rendered result, no template change. */
.home-doctor__credentials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-doctor__credentials::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: var(--color-1);
}

/* 2. The highlighted-procedures photos sit flush against the button stacks
      on phones — live gives the section image a 65px breathing space
      (measured FACELIFT→face-img at 375). Applies whichever side of the copy
      the image stacks on, which is also live's rhythm. */
@media (max-width: 767px) {
  #highlighted-procedures .home-split__media,
  #highlighted-procedures-two .home-split__media--1,
  #highlighted-procedures-two .home-split__media--2 {
    margin-top: 65px;
  }
}

/* ===========================================================================
   Round 19 (15 Sep 2026) — the CTA bands' type, measured on live at 375 AND
   desktop (Juan Carlos: "bigger fonts" on the Photo Gallery band).
   =========================================================================== */

/* Live's CTA headings are UPPERCASE with 8-9px tracking at every width —
   ours had neither (the size formula already matched at desktop). */
.home-cta__eyebrow {
  text-transform: uppercase;
  letter-spacing: 9px;
}

/* The sub-line ("Before & After Results" / "Request a Consultation") —
   the ELEMENT was restored in inc/homepage-data.php this round; live sets it
   Montserrat 25px, 5px tracking, uppercase, at both widths. */
.home-cta__lead {
  font-family: var(--font-family-1);
  font-size: 25px;
  line-height: 30px;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* Phones: live abandons the fluid formula for a flat 32px — ours computed
   19.8px at 375, the "small fonts" Juan Carlos flagged. */
@media (max-width: 767px) {
  .home-cta__eyebrow {
    font-size: 32px;
    margin-bottom: 17px;
  }
  .home-cta__lead { font-size: 25px; }
}

/* Live's CTA band runs 15px gutters on phones (345px of measure at 375) —
   our 20px container left "PHOTO GALLERY" 1px short of one line. */
@media (max-width: 767px) {
  .home-cta__inner { padding-inline: 15px; }
}