/* ============================================================================
   SaraPath — RESPONSIVE
   Loaded last, so it settles every earlier breakpoint in one place.

   Three sizes:
     ≤1180  tablet landscape — the frame stops being wider than the screen
     ≤1100  tablet portrait  — the mega nav becomes an accordion behind a button
     ≤620   phone            — everything is one column

   The rule that governs all of it: nothing may exceed the viewport. Where a
   row cannot fit, it wraps or it scrolls — it never compresses into itself.
   ============================================================================ */

/* Nothing anywhere is allowed to push the page sideways.
   `clip`, not `hidden`: overflow-x:hidden turns html/body into scroll
   containers, and position:sticky then anchors to that box instead of the
   viewport — which silently kills the sticky masthead. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, picture, svg, table { max-width: 100%; }

/* ========================================================= ≤1180 : tablet L */
@media (max-width: 1180px) {
  :root { --layout-gutter: clamp(18px, 3.2vw, 32px); }

  /* The plaque used to drop out of the frame here and become a navy block
     under the film — a leftover from when it WAS a glazed slab. It has had no
     box since; static just left white type on a pale ground and the headline
     appeared to vanish on a tablet. It stays on the film, and the wash rising
     from the foot is what carries it, exactly as on a desktop. */
  .hero__plaque {
    left: 0; right: auto; transform: none; margin-left: 0;
    width: min(640px, calc(100% - var(--layout-gutter) * 2));
    margin-inline: var(--layout-gutter);
    padding: 0;
  }

  .foot__cols  { grid-template-columns: repeat(3, 1fr); }
  .fbadges     { grid-template-columns: repeat(2, 1fr); }
  .trust__in   { grid-template-columns: repeat(3, 1fr); }
  .stories     { grid-template-columns: repeat(2, 1fr); }
  .silo__list  { grid-template-columns: 1fr; }
  .silo__list .doc-row:nth-child(odd) { border-right: 0; }
}

/* The address is shown only at the full frame width. Below 1200 it would start
   to crowd the six rail bays and truncate to an ellipsis; rather than clip it,
   it is removed and the phone number keeps the label (client 2026-09-04). */
@media (max-width: 1199px) {
  .util__addr { display: none; }
}

/* ====================================================== ≤1100 : tablet P */
@media (max-width: 1100px) {

  /* --- masthead ---------------------------------------------------------
     The utility rail scrolls sideways rather than shrinking its bays; the
     main nav collapses behind a button. */
  .masthead { position: static; }

  .util .wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--layout-gutter);
  }
  .util .wrap::-webkit-scrollbar { display: none; }
  /* The rail scrolls sideways on a phone, so the address is dropped and the
     number goes with it — the sticky handset button below carries the call. */
  .util__label { display: none; }
  .util__link { min-width: 0; flex: 1 0 auto; padding-inline: var(--sp-5); }

  /* The masthead keeps its gutter on both sides — the wordmark and the Menu
     button were sitting hard against the screen edges. */
  .hdr__in {
    min-height: 96px; align-items: center; position: relative;
    padding-inline: var(--layout-gutter);
  }
  .wordmark { padding-inline: 0; border-right: 0; }
  .wordmark img { height: 60px; width: 173px; }
  .wordmark--current::after { content: none; }

  .nav-toggle {
    display: inline-flex; margin-left: auto; margin-right: 0;
    padding: 10px var(--sp-5);
  }

  /* the panels become an accordion inside the drawer */
  .nav { display: none; }
  .nav.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 96px); overflow-y: auto;
    background: var(--c-white);
    border-top: var(--line-hair) solid var(--c-cement-3);
    box-shadow: var(--cast-4);
  }
  .nav.is-open .nav__item { display: block; }
  .nav.is-open .nav__link {
    width: 100%; justify-content: space-between; text-align: left;
    border-left: 0; border-bottom: var(--line-hair) solid var(--c-cement-3);
    padding: var(--sp-5) var(--layout-gutter);
    font-size: var(--fs-sm);
  }
  /* The label carries the caret now, so the row's `space-between` has to move
     onto the label itself — otherwise the caret sits against the word instead
     of at the far edge of the row. */
  .nav.is-open .nav__label { width: 100%; justify-content: space-between; }
  .nav.is-open .nav__end { flex-direction: column; align-items: stretch; }

  /* `.nav__cta` used to be grouped into the selector below and was picking up
     `width: .3em` from it — the gold bay came out as a 5px strip with the
     label spilling out of it. It is its own rule now. */
  /* `.nav__dl` left the selector 2026-09-11 — Downloads is a bay now and wants
     the ordinary drawer row, not a centred slab. */
  .nav.is-open .nav__cta { width: 100%; justify-content: center; }
  .nav.is-open .nav__cta .nav__label { width: auto; justify-content: center; }

  /* One line in the drawer: the break element becomes the word-space. */
  .nav.is-open .lb { flex: 0 0 auto; width: .3em; height: auto; }

  /* Quick links at the top of the drawer — the same six as the top rail, as a
     grid of tappable navy chips (client 2026-09-04). Pay Bill keeps its green. */
  .nav.is-open .nav__quick {
    display: block;
    padding: var(--sp-5) var(--layout-gutter);
    background: var(--c-cement-1);
    border-bottom: var(--line-hair) solid var(--c-cement-3);
  }
  .nav__quick-h {
    display: block; margin-bottom: var(--sp-3);
    font-size: var(--fs-2xs); font-weight: var(--fw-black);
    letter-spacing: .16em; text-transform: uppercase; color: var(--c-gold-4);
  }
  .nav__quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .nav__quick-link {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: var(--sp-3);
    background: var(--c-brand-navy); color: var(--c-white);
    font-size: var(--fs-2xs); font-weight: var(--fw-semi);
    letter-spacing: .04em; text-transform: uppercase; text-align: center;
    box-shadow: var(--cast-1);
  }
  .nav__quick-link--pay { background: var(--c-green-1); }

  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; border-bottom: 0;
    background: var(--c-cement-1);
  }
  .mega.is-open { display: block; }
  .mega__in { padding: var(--sp-4) var(--layout-gutter) var(--sp-6); }
  .mega__grid { grid-template-columns: 1fr; }
  .mega__col {
    border-left: 0; padding: var(--sp-4) 0;
    border-bottom: var(--line-hair) solid var(--c-cement-3);
  }
  .mega__col:last-child { border-bottom: 0; }
  .mega__roster { grid-template-columns: 1fr 1fr; }

  /* --- hero -------------------------------------------------------------- */
  .hero__frame { min-height: 62vw; }
  .hero__plaque { padding: var(--sp-6) var(--layout-gutter) var(--sp-7); }
  /* The film runs at every width. It used to be `display: none` through this
     whole band, so a tablet only ever saw the still — the building never faded
     to anything. The real guard is js/surfaces.js, which does not fetch the
     clip at all under reduced-motion, on a slow link or with data-saver on;
     that is a decision about bandwidth, not about screen width. */
  .factband__facts { grid-template-columns: repeat(2, 1fr); }
  .factband__facts > div { padding: var(--sp-5) var(--sp-4); }
  .factband__facts > div:nth-child(odd) { border-left: 0; }
  .factband__facts > div:nth-child(n+3) { border-top: var(--line-hair) solid var(--c-cement-3); }

  /* --- carousel ---------------------------------------------------------- */
  .carousel__stage { padding: var(--sp-5); }
  .slide { grid-template-columns: minmax(0, 240px) 1fr; gap: var(--sp-6); }
  .slide__head { grid-column: 1 / -1; }
  .slide__id { flex-direction: column; gap: var(--sp-1); }
  .headshot { max-width: 220px; border-width: 6px; }
  .creds { grid-template-columns: repeat(2, 1fr); }
  .carousel__ctrls { gap: var(--sp-2); }
  .carousel__meta { margin-left: 0; width: 100%; justify-content: space-between; }

  /* 11 dots will not fit — they wrap instead of running off the edge */
  .dots { flex-wrap: wrap; margin-left: 0; row-gap: 6px; }
  .dot { width: 22px; }

  /* --- sections ---------------------------------------------------------- */
  /* A tablet still has room for pairs — only the phone goes to one column. */
  .bays--2 { grid-template-columns: 1fr; }
  .bays--3, .bays--4 { grid-template-columns: repeat(2, 1fr); }
  .door__plate { margin: var(--sp-4); padding: var(--sp-5); }
  .band__in { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-7); }
  .sec-head { align-items: flex-start; flex-direction: column; gap: var(--sp-4); }

  :root { --section-y: clamp(40px, 5.5vw, 64px); }
  .card, .tile__body, .story__body { padding: var(--sp-5); }
  .card--job, .card--news, .story { min-height: 0; }
  .slide__r { gap: var(--sp-4); }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__brandrow { grid-template-columns: 1fr; }
  .foot__promise { border-left: 0; padding-left: 0; }
  .foot__marks { margin-left: 0; }
  .trust__in { grid-template-columns: repeat(2, 1fr); }
  .stories { grid-template-columns: repeat(2, 1fr); }
  .roster { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ======================================================== ≤820 : narrow tab
   The dossier starts to wrap badly here, well before the phone breakpoint —
   so the trimming and the tightening start here too. */
@media (max-width: 820px) {
  .carousel__stage { padding: var(--sp-5); }
  .slide { grid-template-columns: minmax(0, 200px) 1fr; gap: var(--sp-5); }
  .slide__r { gap: var(--sp-4); }
  .creds { grid-template-columns: 1fr; }
  .cred { padding: var(--sp-3) 0; }
  .headshot { max-width: 200px; border-width: 6px; }

  /* the person and the headline facts; the rest lives on the bio page */
  .slide .cred:nth-child(n+3) { display: none; }
  .slide .chips .chip:nth-child(n+3) { display: none; }
  .slide .quote p {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .slide__r .btn { padding-block: var(--sp-3); }

  /* Controls stay on one centred row — they were wrapping and leaving the
     counter orphaned under the arrows. */
  .carousel__ctrls {
    display: grid; grid-template-columns: auto auto 1fr auto auto;
    align-items: center; justify-items: center;
    gap: var(--sp-3); margin-top: var(--sp-4);
  }
  .dots { justify-self: center; flex-wrap: nowrap; margin: 0; }
  .dot { width: 14px; }
  .carousel__meta { display: contents; }
  .carousel__meta span { justify-self: end; }
}

/* ============================================================ ≤620 : phone */
@media (max-width: 620px) {
  :root { --layout-gutter: 18px; }

  .hero__cta { grid-template-columns: 1fr; }
  .factband__facts { grid-template-columns: 1fr; }
  .factband__facts > div { border-left: 0; border-top: var(--line-hair) solid var(--c-cement-3); text-align: left; align-items: flex-start; }
  .factband__facts > div:first-child { border-top: 0; }

  .bays--2, .bays--3, .bays--4 { grid-template-columns: 1fr; }
  .stories { grid-template-columns: 1fr; }
  .silo__list { grid-template-columns: 1fr; }
  .slide { grid-template-columns: 1fr; }
  .slide__head { grid-column: 1; }
  .creds { grid-template-columns: 1fr; }
  .headshot { max-width: 180px; }
  .slide__l { align-items: center; }

  .mega__roster { grid-template-columns: 1fr; }

  .trust__in { grid-template-columns: 1fr; }
  .trust__pill { border-left: 0; border-top: var(--line-hair) solid var(--c-cement-3); min-height: 96px; }
  .trust__pill:first-child { border-top: 0; }

  .foot__cols { grid-template-columns: 1fr; }
  .fbadges { grid-template-columns: 1fr; }
  .fmark { --mark-w: 104px; --mark-h: 62px; --mark-pad: 10px; }

  .doc-row { flex-wrap: wrap; gap: var(--sp-3); }
  .doc-row__go { margin-left: 0; width: 100%; }
  .silo__head { flex-wrap: wrap; gap: var(--sp-2); justify-content: center; text-align: center; }
  .silo__count { margin-left: 0; }

  .btn--lg { font-size: var(--fs-2xs); padding: var(--sp-4) var(--sp-5); min-height: 54px; }
  .btn--xl { font-size: var(--fs-xs); padding: var(--sp-5) var(--sp-6); min-height: 62px; }
  .carousel__meta { flex-wrap: wrap; gap: var(--sp-3); }

  /* --- shorter dossiers -------------------------------------------------
     A phone gets the person and the headline facts: portrait, name, boards,
     quote and the two most senior credentials. The rest is on the bio page. */
  .slide .cred:nth-child(n+3) { display: none; }
  .slide .quote p {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .slide .chips .chip:nth-child(n+3) { display: none; }

  /* --- less depth --------------------------------------------------------
     The page ran very long on a phone; every band tightens and the longer
     lists are capped. */
  :root { --section-y: 44px; }
  .carousel__stage { padding: var(--sp-4); }
  .slide { gap: var(--sp-4); }
  .card, .tile__body, .story__body { padding: var(--sp-4); }
  .card--job, .card--news, .story { min-height: 0; }
  .silo__list .doc-row:nth-child(n+5) { display: none; }
  .foot__top, .foot__lic, .foot__map { padding-block: var(--sp-6); }
  .foot__pt { display: none; }
  .fbadge__lines { display: none; }
  .band__in { padding-block: var(--sp-6); }
}

/* ========================================================= ≤430 : handset
   Everything on one column, one thumb, and nothing wider than the screen. */
@media (max-width: 430px) {
  :root { --layout-gutter: 16px; --section-y: 36px; }

  .hdr__in { min-height: 80px; }
  .wordmark img { height: 48px; width: 139px; }

  .util__link { font-size: 10px; padding-inline: var(--sp-4); }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  .lead { font-size: var(--fs-sm); }

  .hero__plaque { padding: var(--sp-5) var(--layout-gutter) var(--sp-6); }
  .hero__headline { font-size: 2rem; }
  .hero__sub { font-size: var(--fs-sm); }
  .hero__rule { margin-block: var(--sp-4); }
  .factband__facts > div { padding: var(--sp-4) var(--layout-gutter); }
  .factband__facts dd { font-size: 1.625rem; }

  /* the dossier is a portrait, a name, a line and one action */
  .carousel__stage { padding: var(--sp-4); }
  .slide { gap: var(--sp-4); }
  .slide__head { padding-bottom: var(--sp-3); }
  .doc-name { font-size: 1.375rem; }
  .slide .quote p { -webkit-line-clamp: 3; font-size: var(--fs-sm); }
  .slide .creds, .slide .chips { display: none; }
  .slide__r .btn { width: 100%; }

  .tile__body { padding: var(--sp-4); }
  .tile__blurb { display: none; }
  .door__plate { margin: var(--sp-3); padding: var(--sp-4); }
  .door p { font-size: var(--fs-sm); }

  .card { padding: var(--sp-5) var(--sp-4); }
  .story__blurb { display: none; }

  .band__call b { font-size: 1.5rem; }
  .trust__pill { min-height: 84px; padding: var(--sp-4); }
  .fmark { --mark-w: 100px; --mark-h: 60px; --mark-pad: 10px; }
  .foot__logo { height: 38px; }
  .faddr__tel { font-size: 1.25rem; }
  .foot__bar-in { flex-direction: column; gap: var(--sp-3); }
  .foot__bar .lk { gap: var(--sp-4); }

  /* every tap target clears 44px */
  .btn, .util__link, .nav.is-open .nav__link, .doc-row, .filter { min-height: 44px; }
}

/* Touch pointers get no hover sweep — it fires on tap and reads as a glitch. */
@media (hover: none) {
  .btn::before, .tile::before, .card::before,
  .story::before, .door::before, .doc-row::before { display: none; }
  .tile:hover, .card:hover, .story:hover { transform: none; }
}

/* ============================================================================
   NARROW CHROME
   Stacked on a phone, sections lose the column rules that separated them on
   desktop and start to read as one continuous scroll. These give each band a
   visible edge and a shadow so the eye can find the seams.
   ============================================================================ */
@media (max-width: 1100px) {

  /* Every band lands on the one below it rather than blending into it. */
  .section,
  .band,
  .trust,
  .factband {
    position: relative;
  }
  .section + .section::before,
  .section + .band::before,
  .band + .section::before,
  .trust + .foot::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: rgba(16, 25, 42, .10);
  }

  .factband__facts > div { background: var(--c-white); }

  /* Cards get their own edge and lift so a stack of them still reads as
     separate objects. */
  .card, .story, .tile, .roster-card, .silo {
    border: var(--line-hair) solid var(--c-cement-3);
    box-shadow: var(--sheen-edge), var(--cast-2);
  }
  .bays, .stories, .roster, .silos { gap: var(--sp-4); background: none; }
  .bays--3, .bays--4 { gap: var(--sp-4); }

  /* The carousel plate sits proud of its section. */
  .carousel__stage { box-shadow: var(--sheen-edge), var(--cast-4); }

  /* Section heads get a rule under them so the title owns what follows. */
  .sec-head {
    padding-bottom: var(--sp-4);
    border-bottom: 3px solid var(--c-cement-3);
  }

  /* Dark bands carry an inner top highlight, the way the glazing does. */
  .band, .foot { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
}

@media (max-width: 620px) {

  .card, .story, .tile, .silo { box-shadow: var(--sheen-edge), var(--cast-3); }
  /* a hairline between stacked facts, so four numbers do not become one block */
  .factband__facts > div + div { border-top: var(--line-hair) solid var(--c-cement-3); }
}

/* ============================================================================
   ONE SCREEN
   On a handset the masthead plus a single pathologist card has to sit inside
   one viewport — you should be able to see a whole doctor without scrolling.
   ============================================================================ */
@media (max-width: 620px) {
  .carousel__stage {
    min-height: 0;
    padding: var(--sp-4);
    overflow: hidden;
  }
  /* One clean column on a phone: photo on top, then the info block —
     label, name, specialty, quote, one action (client 2026-09-04). */
  .slide {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    align-items: start;
  }
  .slide__l { justify-self: start; }
  .headshot { max-width: 132px; border-width: 4px; }
  .doc-name { font-size: 1.25rem; }
  .doc-boards { font-size: var(--fs-2xs); }
  .slide__r { gap: var(--sp-3); }
  .slide .quote { border-left-width: 3px; padding-left: var(--sp-4); }
  .slide .quote p { -webkit-line-clamp: 4; font-size: var(--fs-xs); line-height: 1.45; }
  .slide__r .btn { width: 100%; padding-block: var(--sp-3); }

  /* controls stay on one row */
  .carousel__ctrls {
    display: grid; grid-template-columns: auto auto 1fr auto;
    align-items: center; gap: var(--sp-3); margin-top: var(--sp-4);
  }
  .btn--icon { width: 44px; height: 44px; font-size: 1rem; }
  .dots { display: none; }
  .carousel__meta { margin: 0; width: auto; gap: var(--sp-3); justify-content: flex-end; }
  .carousel__meta span { font-size: var(--fs-2xs); }
  #pause { padding: 10px var(--sp-4); }

  /* the section head above it stays compact */
  #doctors .sec-head { margin-bottom: var(--sp-4); gap: var(--sp-3); }
  #doctors .sec-head .btn { padding-block: 10px; }
}

@media (max-width: 430px) {
  .carousel__stage { max-height: calc(100svh - 236px); }
  .slide { grid-template-columns: 104px 1fr; }
  .headshot { max-width: 104px; }
  .slide .quote p { -webkit-line-clamp: 3; }
}

/* ============================================================================
   NARROW LEGIBILITY + PRESS
   ============================================================================ */
@media (max-width: 1100px) {
  /* The curtain wall behind the referring band is fine at full width, but on a
     stacked layout the copy sits right on the mullions. Push it back. */
  .surface--refer .surface__video,
  .surface--refer::before { opacity: .12; }
  .band__in { position: relative; }

  /* Apply / All jobs and friends read as real controls: bigger target, a
     visible lip, and a press that actually moves. */
  .btn--md, .btn--sm {
    font-size: var(--fs-xs);
    padding: var(--sp-4) var(--sp-6);
    min-height: 48px;
  }
  .btn--gold {
    box-shadow: 0 3px 0 var(--c-gold-5), var(--cast-2);
  }
  .btn--gold:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--c-gold-5), var(--cast-1);
  }
  .btn--cement {
    box-shadow: 0 3px 0 var(--c-cement-4), var(--cast-2);
  }
  .btn--cement:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--c-cement-4), var(--cast-1);
  }
  .btn--glass { box-shadow: 0 3px 0 var(--c-glass-5), var(--cast-glass-2); }
  .btn--glass:active { transform: translateY(3px); box-shadow: 0 0 0 var(--c-glass-5), var(--cast-glass-2); }

  .card__cta { min-height: 52px; font-size: var(--fs-sm); letter-spacing: .1em; }

  /* an empty grid cell was showing as a grey block — cards fill their track */
  .bays > *, .stories > * { height: 100%; }
}

/* ============================================================================
   TALL HERO + BREATHING ROOM ON NARROW SCREENS
   ============================================================================ */
@media (max-width: 1100px) {
  /* The masthead was sitting hard against both edges. */
  .masthead .hdr__in { padding-inline: var(--layout-gutter); gap: 10px; }
  .masthead .util .wrap { padding-inline: var(--layout-gutter); }

  /* The plaque and the parapet were butting into each other. */
  .hero__plaque { margin-bottom: 0; }
}

@media (max-width: 760px) {
  /* A standing frame, not a letterboxed strip.

     The ratio goes on the media, NOT on .hero__frame — the plaque is a child
     of the frame, so a fixed-ratio frame with overflow:hidden clips the copy
     and leaves the buttons floating on the photograph. */
  .hero__frame { aspect-ratio: auto; overflow: visible; min-height: 0; }

  .hero__frame > picture {
    display: block; position: relative;
    aspect-ratio: 9 / 13; width: 100%;
  }
  .hero__frame > picture > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 50%;
  }

  /* No width gate here either — `js/surfaces.js` decides whether the clip is
     worth fetching (reduced-motion, effective connection type, data-saver) and
     that is the only question worth asking. A phone on wifi gets the film. */
  .hero__film {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    aspect-ratio: 9 / 13; height: auto;
  }
  .hero__film video { object-position: center; }

  .hero__plaque {
    position: static; z-index: 2;
    left: auto; right: auto; top: auto;
    transform: none; margin: 0; width: auto;
  }
}

/* ============================================================================
   DOCTOR CARD — NARROW
   The portrait sits BESIDE the name, not under it, so the top of the card is
   one compact block instead of a full-width headline with a small photo and a
   column of white beside it. Everything below it runs the full width and the
   rows are tight: quotation, focus, credentials two-up, one action.
   ============================================================================ */
@media (max-width: 620px) {
  .carousel__stage { max-height: none; overflow: visible; padding: var(--sp-5) var(--sp-4); }

  .slide {
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas:
      "photo head"
      "quote quote"
      "focus focus"
      "creds creds"
      "cta   cta";
    gap: var(--sp-4) var(--sp-4);
    align-items: start;
  }
  .slide__head  { grid-area: head; align-self: center; }
  .slide__l     { grid-area: photo; }
  .slide__r     { display: contents; }
  .slide .quote { grid-area: quote; }
  /* Targeted by class, not by position (2026-09-10). These rules place the
     areas-of-focus block, which lives on the internal bio page and not in the
     home slide. `nth-of-type(2)` counted children of `.slide__r`, so adding
     the new `.slide__top` row shifted every one of them by one and the rules
     landed on the name instead. The bio page's focus block carries `.focus`. */
  .slide__r > .focus { grid-area: focus; }
  .slide .creds { grid-area: creds; }
  .slide__r .btn { grid-area: cta; width: 100%; }

  .headshot { max-width: 108px; border-width: 4px; }

  /* the lintel belongs to the whole card, not to the name cell */
  .slide__head {
    padding-bottom: 0; border-bottom: 0; box-shadow: none; margin-bottom: 0;
    gap: 2px;
  }
  .slide__id { flex-direction: column; gap: 2px; }
  .doc-name { font-size: 1.1875rem; line-height: 1.15; }
  .doc-boards { font-size: var(--fs-label); white-space: normal; }
  .slide .label-sm { font-size: 11px; letter-spacing: .16em; }

  .slide .quote {
    border-left-width: 3px; padding-left: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--line-hair) solid var(--c-cement-3);
  }
  .slide .quote p { -webkit-line-clamp: 5; font-size: var(--fs-xs); line-height: 1.5; }

  /* focus reads as one line of label and a row of chips, not a stack */
  .slide__r > .focus { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
  .slide__r > .focus .chips { margin-top: 0 !important; }
  .slide .chips { gap: 5px; }
  .slide .chips .chip { font-size: 10px; padding: 3px 7px; letter-spacing: .06em; }

  /* credentials stay two-up and tight — one per row is what made the card
     twice as tall as it needed to be */
  .slide .creds {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--sp-4);
    border-top: var(--line-hair) solid var(--c-cement-3);
  }
  .slide .cred {
    padding: var(--sp-3) 0;
    border-bottom: var(--line-hair) solid var(--c-cement-2);
  }
  .slide .cred b { font-size: 10px; letter-spacing: .14em; margin-bottom: 1px; }
  .slide .cred span { font-size: var(--fs-2xs); line-height: 1.35; }
  .slide__r .btn { margin-top: var(--sp-2); padding-block: var(--sp-4); }
}

@media (max-width: 430px) {
  .slide { grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
  .headshot { max-width: 96px; }
  .slide .quote p { -webkit-line-clamp: 4; }
  .slide .creds { grid-template-columns: 1fr; }
  .slide .cred { padding: 10px 0; }
}

/* ============================================================================
   ONE COLUMN — from 820 down.
   Everything that is a card goes single-column here, not at 620. Two-up was
   still leaving orphaned cells and cramped copy well above the phone width.
   ============================================================================ */
@media (max-width: 820px) {
  .bays,
  .bays--2,
  .bays--3,
  .bays--4,
  .stories,
  .roster,
  .silos,
  .silo__list,
  .foot__cols,
  .fbadges,
  .trust__in,
  #jobs,
  #newsgrid,
  #tiles {
    grid-template-columns: 1fr !important;
  }

  .trust__pill {
    border-left: 0;
    border-top: var(--line-hair) solid var(--c-cement-3);
    min-height: 92px;
  }
  .trust__pill:first-child { border-top: 0; }

  .silo__list .doc-row { border-right: 0 !important; }
}

/* ============================================================================
   DOCTOR CARD — 620 to 820
   The photo column was ending well above the credentials, leaving a tall dead
   space beneath it. Same grid-areas treatment as the phone: the quote and the
   credentials run the full width once the portrait has had its say.
   ============================================================================ */
@media (min-width: 621px) and (max-width: 820px) {
  .slide {
    grid-template-columns: 180px 1fr;
    grid-template-areas:
      "head  head"
      "photo quote"
      "photo focus"
      "creds creds"
      "cta   cta";
    gap: var(--sp-4) var(--sp-6);
    align-content: start;
  }
  .slide__head { grid-area: head; }
  .slide__l    { grid-area: photo; align-self: start; }
  .slide__r    { display: contents; }
  .slide .quote { grid-area: quote; align-self: start; }
  .slide__r > .focus { grid-area: focus; align-self: start; }
  .slide .creds { grid-area: creds; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-6); }
  .slide__r .btn { grid-area: cta; justify-self: start; }

  .headshot { max-width: 180px; }
  .slide .cred {
    padding: var(--sp-3) 0;
    border-bottom: var(--line-hair) solid var(--c-cement-3);
  }
  .slide .creds { border-top: var(--line-hair) solid var(--c-cement-3); }
  /* both credentials show again — there is room for them here */
  .slide .cred:nth-child(n+3) { display: block; }
  .slide .chips .chip:nth-child(n+3) { display: inline-block; }
}

/* ============================================================================
   MOBILE HERO — headline on the film, building as its own band
   ============================================================================ */
.hero__strip-photo { display: none; }

@media (max-width: 760px) {
  /* The film is the hero and the headline sits on it. 4:5 rather than a tall
     punch-in, so the frame reads as a room and not a close-up. */
  .hero__frame > picture,
  .hero__film { aspect-ratio: 4 / 5; }

  /* The wash raked in from the left is a wide-screen device — on a phone it
     covers the whole picture. The plaque carries its own bottom scrim here,
     so the frame does not need a second one. */
  .hero__frame::after { content: none; }

  .hero__frame { position: relative; }

  .hero__plaque {
    position: absolute; z-index: 3;
    left: 0; right: 0; bottom: 0; top: auto;
    transform: none; margin: 0; width: auto;
    padding: var(--sp-8) var(--layout-gutter) var(--sp-6);
    background: linear-gradient(180deg,
      rgba(0, 26, 66, 0) 0%,
      rgba(0, 26, 66, .72) 34%,
      rgba(2, 16, 38, .92) 100%);
    border: 0;
    backdrop-filter: none;
  }
  .hero__eyebrow { font-size: 10px; letter-spacing: .18em; }
  .hero__headline { font-size: clamp(1.75rem, 8.4vw, 2.375rem); }
  .hero__rule { display: none; }
  .hero__sub { font-size: var(--fs-xs); max-width: 34ch; }
  .hero__cta { grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-5); }
  .hero__cta .btn { padding-inline: var(--sp-3); font-size: 11px; }



  /* the building, on its own, below the numbers */
  .hero__strip-photo {
    display: block; position: relative; margin: 0;
    border-top: var(--line-parapet) solid var(--c-brand-navy);
    box-shadow: var(--cast-3);
  }
  .hero__strip-photo img { width: 100%; height: auto; display: block; }
  .hero__strip-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--sp-4) var(--layout-gutter);
    background: linear-gradient(180deg, rgba(2,16,38,0), rgba(2,16,38,.78));
    color: var(--c-white);
    font-size: 10px; font-weight: var(--fw-black);
    letter-spacing: var(--ls-label); text-transform: uppercase;
  }
}

/* the bio button centres under a stacked card */
@media (max-width: 820px) {
  .slide__r .btn { justify-self: center; }
}
@media (max-width: 620px) {
  .slide__r .btn { justify-self: stretch; }
}

/* Stacked full-width cards centre their action, so it does not sit alone in
   the bottom-left corner of a wide plate. */
@media (max-width: 820px) {
  .door__plate { text-align: center; }
  .door__plate .eyebrow { display: block; }
  .door p { margin-inline: auto; }
  .door .inchip { display: inline-block; }

  .card { align-items: center; text-align: center; }
  .card .pill-dept, .card__tag { align-self: center; }
  .card__cta { align-self: stretch; }

  .story__body { text-align: center; align-items: center; }
  .story__foot { width: 100%; justify-content: center; gap: var(--sp-4); }

  .sec-head { align-items: center; text-align: center; }
  .sec-head > div { width: 100%; }
  .lead { margin-inline: auto; }
}

/* Bands, the parapet and the footer centre once they are a single column —
   left-aligned copy in a stacked layout leaves a ragged right edge and an
   action stranded in the corner. */
@media (max-width: 820px) {
  .band__in { text-align: center; justify-items: center; }
  .band p { margin-inline: auto; }
  .band__r { align-items: center; width: 100%; }
  .band__r .btn { width: 100%; max-width: 420px; }
  .band__call { text-align: center; }

  .factband__facts > div { text-align: center; align-items: center; }

  .intro__in { text-align: center; }

  .foot__brandrow { justify-items: center; text-align: center; }
  .foot__logo { margin-inline: auto; }
  .foot__promise { margin-inline: auto; text-align: center; }
  .foot__act { justify-content: center; width: 100%; }
  .foot__act .btn { flex: 1 1 200px; }
  .foot__lic h3 { justify-content: center; text-align: center; flex-wrap: wrap; }
  .foot__lic h3 i { display: none; }
  .foot__comm > .frame { justify-content: center; text-align: center; }
  .foot__marks { justify-content: center; }
  .fcol { align-items: center; text-align: center; }
  .fcol li a { padding-left: 0; }
  .fcol li a::before { display: none; }
  .faddr { border-left: 0; padding-left: 0; text-align: center; align-items: center; }
  .fcol--contact { align-items: center; }
  .foot__bar-in { justify-content: center; text-align: center; }
  .foot__bar .lk { justify-content: center; }

  .trust__pill { justify-content: center; }
  .fbadge { align-items: center; text-align: center; }
  .fbadge__head { flex-direction: column; align-items: center; gap: var(--sp-3); }
  .fbadge__id { align-items: center; }
  .fbadge__lines { text-align: center; }
}

/* ============================================================================
   MOBILE HERO
   The phone gets the whole hero, not a trimmed one: the eyebrow on its gold
   rule, the headline at size, and BOTH actions. It used to shed the eyebrow
   and the second button onto a white block under the film, which left the
   film carrying one small line and one button low in the frame — thin, and it
   read as an afterthought rather than as the top of the site.

   Everything sits on the plaque's own wash, which rises from the foot exactly
   as the desktop one does. What remains below the film is the single line of
   supporting copy, and nothing that is already above it.
   ============================================================================ */
.hero__below { display: none; }

@media (max-width: 760px) {
  .hero__plaque .hero__rule { display: none; }
  .hero__plaque .hero__sub { display: none; }

  .hero__plaque {
    padding: var(--sp-11) var(--layout-gutter) var(--sp-7);
    background: linear-gradient(180deg,
      rgba(0, 26, 66, 0) 0%,
      rgba(0, 26, 66, .34) 22%,
      rgba(0, 26, 66, .72) 46%,
      rgba(1, 18, 44, .92) 72%,
      rgba(1, 15, 38, .96) 100%);
  }

  .hero__plaque .hero__eyebrow {
    display: block;
    margin: 0 0 var(--sp-4); padding-left: var(--sp-3);
    border-left: var(--line-fin) solid var(--c-brand-gold);
    font-size: 11px; letter-spacing: .16em;
  }
  .hero__headline {
    font-size: clamp(2.125rem, 9.6vw, 2.875rem);
    line-height: 1.06; margin-bottom: var(--sp-6);
    max-width: 16ch;
  }

  /* both actions, stacked, full width — a thumb target each */
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: 0; }
  .hero__cta .btn {
    width: 100%; padding-block: var(--sp-4); padding-inline: var(--sp-4);
    font-size: var(--fs-2xs); min-height: 56px;
  }

  /* one line of copy under the film, and nothing that is already on it */
  .hero__below {
    display: block;
    padding: var(--sp-7) var(--layout-gutter);
    text-align: center;
    background: var(--c-white);
    border-bottom: var(--line-hair) solid var(--c-cement-3);
  }
  .hero__below-eyebrow,
  .hero__below-cta { display: none; }
  .hero__below-sub {
    margin: 0 auto; max-width: 34ch;
    font-size: var(--fs-sm); line-height: 1.55; color: var(--c-ink-soft);
  }
}

/* The Menu button had picked up the enlarged tap-target padding meant for
   in-page controls. It is a compact toolbar control, not a call to action. */
@media (max-width: 1100px) {
  .nav-toggle.btn.btn--sm {
    padding: 0 var(--sp-4);
    height: 40px;
    min-height: 0;
    font-size: var(--fs-2xs);
    letter-spacing: .08em;
    box-shadow: 0 2px 0 var(--c-cement-4), var(--cast-1);
  }
  .nav-toggle.btn.btn--sm:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--c-cement-4), var(--cast-1);
  }
}
@media (max-width: 430px) {
  .nav-toggle.btn.btn--sm { height: 36px; padding-inline: var(--sp-3); font-size: 10px; }
}

/* All eleven slides stack in one grid cell, so the plate is as tall as the
   tallest of them — which leaves a long gap under the shorter dossiers once
   the layout is single-column. On narrow screens only the active slide takes
   part in layout, so the plate fits whoever is showing. */
@media (max-width: 820px) {
  .carousel__stage { min-height: 0; }
}

/* ============================================================================
   PATHOLOGIST CARD — mobile, rebuilt for the 2-column (photo | info) structure
   (client 2026-09-04). The card is now the photo and ONE info column — label,
   name, specialty, quote, one action. The grid-template-areas phone layouts
   earlier in this file were built around a full-width name header and the
   focus / credentials blocks the home card no longer carries; this resets them
   to a clean single-column stack. Late + !important so it wins the cascade.
   ============================================================================ */
@media (max-width: 820px) {
  .slide {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    gap: var(--sp-5) !important;
    align-items: start;
  }
  /* THE PORTRAIT NEEDS ITS OWN WIDTH HERE, NOT A PERCENTAGE.
     `justify-self: start` makes the cell size to its contents, and `.headshot`
     is `width: 100%` — 100% of a box that is sizing to it. The two resolved to
     nothing: the mount came out 8 x 10px, the `<img>` inside it never entered
     the viewport, so `loading="lazy"` never fetched it and it could never
     recover. Every phone was showing a doctor card with no doctor on it.
     Fixed 2026-09-10; verified against the deployed build first, so it is a
     standing bug and not something this pass introduced. */
  .slide__l  { grid-area: auto !important; justify-self: start; width: 150px; }
  .slide__r  {
    grid-area: auto !important;
    display: flex !important; flex-direction: column; gap: var(--sp-3);
  }
  .slide .label-sm { grid-area: auto !important; }
  .slide__id { grid-area: auto !important; flex-direction: column; gap: 3px; }
  .slide .quote    { grid-area: auto !important; }
  .slide__r .btn   { grid-area: auto !important; width: 100%; justify-self: stretch; }
  .doc-name  { font-size: 1.375rem; line-height: 1.15; }
  .doc-boards { font-size: var(--fs-sm); white-space: normal; }
  .headshot  { max-width: 150px; }
}
@media (max-width: 430px) {
  .slide__l { width: 128px; }
  .headshot { max-width: 128px; }
  .slide .quote p { -webkit-line-clamp: 4; }
}

/* ============================================================================
   PATHOLOGISTS PANEL — NARROW
   The eleven are dealt into four columns for the desktop panel. Stacked, that
   became four separate blocks, each with its own blank heading and a 2-up grid
   leaving odd empty cells. Narrow reads them as one continuous list.
   ============================================================================ */
@media (max-width: 1100px) {
  #mega-path .mega__col {
    padding-block: 0;
    border-bottom: 0;
  }
  #mega-path .mega__col:first-child { padding-top: var(--sp-4); }

  /* one heading for the whole list */
  #mega-path .mega__h { display: none; }
  #mega-path .mega__col:first-child .mega__h { display: block; }

  #mega-path .mega__roster { grid-template-columns: 1fr; gap: 0; }
  #mega-path .mega__doc-card {
    padding: var(--sp-3) var(--sp-2);
    border-bottom: var(--line-hair) solid var(--c-cement-3);
    min-height: 0;
  }

  #mega-path .mega__col--feature {
    padding-block: var(--sp-5) var(--sp-4);
    border-top: var(--line-hair) solid var(--c-cement-3);
  }
}

/* ============================================================================
   MOBILE DROPDOWNS — usability
   The desktop panel is a five-column directory. Stacked it became a very long
   scroll with blank continuation headings and one link per row. On a phone it
   behaves like a menu instead: two columns of short links, compact rows, no
   marketing card, and the section headings carry the structure.
   ============================================================================ */
@media (max-width: 1100px) {

  /* Continuation columns lose their empty heading and join the list above. */
  .mega__h--blank { display: none; }

  /* Links run two-up — they are short, and one per row doubled the height. */
  .mega__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
    gap: 0 var(--sp-4);
  }
  .mega__list a {
    padding: 11px 0 11px var(--sp-3);
    font-size: var(--fs-2xs);
    border-bottom: var(--line-hair) solid var(--c-cement-2);
  }
  .mega__list a::before { top: 17px; width: 3px; height: 3px; }

  /* Documents: name only, no filename or weight — those are desktop detail. */
  .mega__doc { padding: 9px 0; }
  .mega__doc .pdf-ico { width: 18px; height: 22px; }
  .mega__doc-meta { display: none; }
  .mega__doc-name { font-size: var(--fs-2xs); }

  /* The glazed feature card is promotion, not navigation. */
  .mega__col--feature { display: none; }

  /* Jobs and news read as two compact rows rather than full cards. */
  .mega__jobs, .mega__newslist { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .mega__job, .mega__news { padding: var(--sp-3); }
  .mega__news-tag { font-size: 9px; }

  /* Tighter column rhythm overall. */
  .mega__col { padding: var(--sp-4) 0; gap: var(--sp-2); }
  .mega__h { margin-bottom: var(--sp-2); }
  .mega__in { padding-block: var(--sp-2) var(--sp-4); }

  /* An open section is unmistakable. */
  .nav.is-open .nav__link[aria-expanded="true"] {
    background: var(--c-brand-navy); color: var(--c-white);
  }
}

/* Two columns of pathologists rather than eleven single rows. */
@media (max-width: 1100px) {
  #mega-path .mega__roster { grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); }
  #mega-path .mega__doc-card { padding: var(--sp-2) 0; gap: var(--sp-2); }
  #mega-path .mega__portrait { flex-basis: 34px; width: 34px; }
  #mega-path .mega__doc-nm { font-size: var(--fs-2xs); }
  #mega-path .mega__doc-fx { display: none; }
}

@media (max-width: 430px) {
  .mega__list, .mega__jobs, .mega__newslist { grid-template-columns: 1fr; }
  #mega-path .mega__roster { grid-template-columns: 1fr; }
}

/* The hero overlay centres on a phone, like everything else in the stack. */
@media (max-width: 760px) {
  .hero__plaque { text-align: center; }
  .hero__headline { max-width: 20ch; margin-inline: auto; }
  .hero__cta { justify-items: center; }
  .hero__cta .btn { width: 100%; max-width: 420px; }
}

/* ============================================================================
   MOBILE DROPDOWNS — length
   A panel that runs to 1250px is a scroll, not a menu. Each column shows its
   first few items; the section's own page carries the rest.
   ============================================================================ */
@media (max-width: 1100px) {
  .mega__list li:nth-child(n+7) { display: none; }
  .mega__doc:nth-child(n+4)     { display: none; }
  .mega__job:nth-child(n+4),
  .mega__news:nth-child(n+3)    { display: none; }
  #mega-path .mega__doc-card:nth-child(n+4) { display: none; }

  /* one honest way out of each section */
  .mega__col { position: relative; }
  .mega__more {
    display: block; margin-top: var(--sp-2);
    font-size: 10px; font-weight: var(--fw-black);
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--c-gold-4);
  }
}
/* the list-overflow link only — above 1100px the whole list is already on
   screen, so "all 8 specialties" is a link to what you are looking at. The
   Careers and News bays use `.mega__more` for real actions; those stay. */
@media (min-width: 1101px) { .mega__more--list { display: none; } }

/* No rule between the film and the headline — the scrim already separates
   them, and a hairline across the glass reads as a seam. */
@media (max-width: 760px) {
  .hero__plaque { border-top: 0; box-shadow: none; }
  .hero__frame  { border-bottom: 0; }
  .hero__rule   { display: none; }
}

/* ============================================================================
   DOSSIER — AIR
   Everything in the card was sitting on the line above it. Padding, gaps and
   leading all open up so the blocks read as separate pieces of information.
   ============================================================================ */
@media (min-width: 621px) and (max-width: 820px) {
  .carousel__stage { padding: var(--sp-7); }

  .slide { gap: var(--sp-6) var(--sp-7); }
  .slide__head { padding-bottom: var(--sp-5); margin-bottom: var(--sp-2); }
  .slide__id { gap: var(--sp-2); }

  .headshot { max-width: 190px; }

  .slide .quote { padding-left: var(--sp-5); margin-bottom: var(--sp-2); }
  .slide .quote p { line-height: 1.6; }

  .slide .label-sm { margin-bottom: var(--sp-3); display: block; }
  .slide .chips { gap: var(--sp-2); }
  .slide .chips .chip { padding: 6px var(--sp-3); }

  .slide .creds { gap: 0 var(--sp-7); margin-top: var(--sp-3); }
  .slide .cred { padding: var(--sp-4) 0; }
  .slide .cred b { margin-bottom: var(--sp-2); }
  .slide .cred span { line-height: 1.5; }

  .slide__r .btn { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-7); }

  .carousel__ctrls { margin-top: var(--sp-6); }
}

@media (max-width: 620px) {
  .carousel__stage { padding: var(--sp-6); }
  .slide { gap: var(--sp-6) var(--sp-5); }
  .slide__head { padding-bottom: var(--sp-5); }
  .slide .quote { padding-left: var(--sp-4); }
  .slide .quote p { line-height: 1.6; }
  .slide .label-sm { margin-bottom: var(--sp-2); display: block; }
  .slide .cred { padding: var(--sp-4) 0; }
  .slide .cred b { margin-bottom: var(--sp-2); }
  .slide__r .btn { margin-top: var(--sp-4); padding-block: var(--sp-4); }
  .carousel__ctrls { margin-top: var(--sp-5); }
}

/* The gold sill marks the current page only. It was also appearing under an
   open section, so two different things were wearing the same signal. */
@media (max-width: 1100px) {
  .nav.is-open .nav__link::after { content: none; }
  .nav.is-open .nav__link[aria-expanded="true"] {
    background: var(--c-brand-navy); color: var(--c-white);
    box-shadow: inset 0 -3px 0 var(--c-gold-3);
  }
  /* nothing keeps a pressed look after the finger leaves */
  .nav.is-open .nav__link:focus:not(:focus-visible) { background: transparent; color: var(--c-ink-soft); }
  .nav.is-open .nav__cta:focus:not(:focus-visible) { background: var(--c-gold-3); color: var(--c-white); }
  .nav.is-open .nav__link[aria-expanded="true"]:focus:not(:focus-visible) {
    background: var(--c-brand-navy); color: var(--c-white);
  }
}

/* ============================================================================
   DROPDOWN LEGIBILITY ON A PHONE
   The panel type was sized for a dense desktop directory. On a handset it has
   to be read at arm's length, so everything comes up a step and the rows get
   real height.
   ============================================================================ */
@media (max-width: 1100px) {
  .nav.is-open .nav__link { font-size: var(--fs-sm); letter-spacing: .08em; }

  .mega__h { font-size: var(--fs-2xs); letter-spacing: .16em; }

  .mega__list a {
    font-size: var(--fs-sm);
    padding: 14px 0 14px var(--sp-4);
    line-height: 1.35;
  }
  .mega__list a::before { top: 21px; width: 5px; height: 5px; }

  .mega__doc { padding: 12px 0; gap: var(--sp-4); }
  .mega__doc .pdf-ico { width: 24px; height: 30px; }
  .mega__doc-name { font-size: var(--fs-sm); line-height: 1.35; }

  .mega__job-title, .mega__news-title { font-size: var(--fs-sm); }
  .mega__job-meta, .mega__news-date { font-size: var(--fs-2xs); }
  .mega__news-tag { font-size: var(--fs-2xs); }
  .mega__job, .mega__news { padding: var(--sp-4); }

  .mega__more { font-size: var(--fs-2xs); padding-block: var(--sp-3); }

  #mega-path .mega__doc-card { padding: 10px 0; gap: var(--sp-3); }
  #mega-path .mega__portrait { flex-basis: 44px; width: 44px; }
  #mega-path .mega__doc-nm { font-size: var(--fs-sm); }
}

@media (max-width: 430px) {
  .nav.is-open .nav__link { font-size: var(--fs-body); }
  .mega__list a, .mega__doc-name, .mega__job-title,
  .mega__news-title, #mega-path .mega__doc-nm { font-size: var(--fs-body); }
  .mega__h { font-size: var(--fs-xs); }
}

/* The stage takes horizontal drags itself, so a swipe does not also scroll. */
@media (pointer: coarse) {
  .carousel__stage { touch-action: pan-y; cursor: grab; }
  .carousel__stage.is-dragging { cursor: grabbing; }
}

/* ============================================================================
   STICKY MASTHEAD ON MOBILE
   The white band follows you down the page. The dark utility rail is allowed
   to scroll away — sticking both would cost ~115px of a phone screen, and the
   rail is a set of secondary links, not navigation.
   ============================================================================ */
@media (max-width: 1100px) {
  /* Sticky is bounded by its parent, so sticking .hdr alone only holds for the
     height of .masthead and then leaves with it. The masthead sticks instead,
     offset upward by the rail's height — the dark rail scrolls out of view and
     the white band comes to rest at the top of the screen. */
  .masthead {
    position: sticky;
    top: calc(-1 * var(--rail-h, 42px));
    z-index: var(--z-header);
    box-shadow: var(--soffit-shadow);
  }
  .masthead .hdr { position: relative; box-shadow: none; }

  /* the drawer hangs off the stuck band and scrolls within the screen */
  .nav.is-open { max-height: calc(100svh - 72px); }
}

@media (max-width: 430px) {
  .nav.is-open { max-height: calc(100svh - 64px); }
}

/* ------------------------------------------------ call button on a phone --
   The rail scrolls away, so the number has to live in the sticky band — but a
   solid green slab carrying the digits sat far heavier than the Menu control
   beside it. On a phone it is the handset alone in a box the same size and
   weight as Menu; the number goes to the accessible name. */
@media (max-width: 1100px) {
  .hdr__call {
    display: flex; align-items: center;
    margin-left: auto;
    width: 40px; height: 40px;
    padding: 0; gap: 0;
    justify-content: center;
    background: var(--c-white);
    border: var(--line-hair) solid var(--c-cement-3);
    box-shadow: 0 2px 0 var(--c-cement-4), var(--cast-1);
  }
  .hdr__call-ico { width: 17px; height: 17px; fill: var(--c-green-1); }
  .hdr__call-num { display: none; }
  .hdr__call:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--c-cement-4), var(--cast-1);
  }
  @media (hover: hover) {
    .hdr__call:hover { background: var(--c-green-1); border-color: var(--c-green-3); }
    .hdr__call:hover .hdr__call-ico { fill: var(--c-white); }
  }

  .nav-toggle { margin-left: 0; }
}

@media (max-width: 430px) {
  .hdr__call { width: 36px; height: 36px; }
  .hdr__call-ico { width: 16px; height: 16px; }
}


/* The specialty grid runs wider apart than the other bays — eight specimens
   need the buffer, and the section needs room around the whole run. */
@media (min-width: 1101px) {
  #tiles { gap: var(--sp-7); }
  .tiles-wrap { margin-top: var(--sp-4); }
}


/* ============================================================================
   TOUCH
   Everything below is about the two things a finger cannot do: hover, and hit
   a 30px target. Gated on the input, not on the width — a touch laptop at
   1440px has the same problem a phone does.
   ============================================================================ */
@media (hover: none) {
  /* A specimen is veiled and desaturated at rest and comes up to full colour
     on approach. There is no approach on a touch screen, so every picture in
     the specialty grid would sit muted forever. They show as shot. */
  .tile .media::after { opacity: 0; }
  .tile .media > picture > img,
  .tile .media > img { filter: none; }

  /* Nothing lifts, travels or sweeps under a finger — a tap would leave the
     hover state stuck on until you tapped something else. */
  .tile:hover, .trust__pill:hover, .doc-card:hover { transform: none; }
  .btn:hover, .trust__pill:hover { background-position: -34% 0, center, center; }
  .wordmark:hover img { transform: none; filter: none; }
}

/* ------------------------------------------------------------ tap targets */
@media (max-width: 1100px) {
  /* The footer sitemap was 178 x 30 — a thumb is about 44. */
  .fcol li a {
    display: block;
    min-height: 44px;
    padding-block: 11px;
    line-height: 1.4;
  }
  .fcol li a::before { top: 19px; }
  .foot__bar .lk a { display: inline-block; min-height: 44px; padding-block: 12px; }
  .faddr__tel { display: inline-block; min-height: 48px; padding-block: 12px; }
  .fmark { min-height: 44px; display: flex; align-items: center; }

  /* the handset and the Menu button in the sticky band */
  .hdr__call { min-width: 44px; min-height: 44px; }
  .nav-toggle.btn.btn--sm { height: 44px; min-height: 44px; padding-inline: var(--sp-5); }

  /* the utility rail bays */
  .util__link { min-height: 44px; }
}

/* ============================================================================
   SPECIALTY BAYS — NARROW
   A histology section is a very busy picture. Run full-bleed across a phone
   card it is 500px of speckle and the name underneath is an afterthought.
   Below 820px the bay turns on its side: a small square mount on the left,
   the name and the line about it on the right, and real air around all of it.
   The picture is a marker, not the subject.
   ============================================================================ */
@media (max-width: 820px) {
  #tiles { gap: var(--sp-5); }

  .tile {
    flex-direction: row; align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5);
  }
  .tile .media {
    flex: 0 0 84px; width: 84px; margin: 0;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
  }
  .tile__body { padding: 0; gap: var(--sp-2); }
  .tile__name { font-size: var(--fs-lead); }
  .tile__blurb { font-size: var(--fs-2xs); line-height: 1.5; }
  .tile__go { margin-top: var(--sp-2); padding-top: 0; font-size: 11px; }

  /* the gold reveal runs the foot of the bay, not under the picture */
  .tile .media { border-bottom-width: var(--line-hair); }
}

@media (max-width: 430px) {
  .tile { padding: var(--sp-4); gap: var(--sp-4); }
  .tile .media { flex-basis: 72px; width: 72px; }
  .tile__blurb { display: none; }
}

/* The dot strip is a row of 3px indicator bars — right visually, and far too
   small for a finger. On a touch screen each one keeps its 3px bar and grows
   an invisible 44px hit area around it: padding for the target, a negative
   margin so the groove does not get taller, and `background-clip: content-box`
   so only the bar is painted. */
@media (hover: none) {
  .dot {
    padding-block: 20px; margin-block: -20px;
    background-clip: content-box;
  }
}

/* Jobs: three across, then two, then one — and the card keeps its air the
   whole way down. It is a target before it is a layout. */
@media (max-width: 1100px) {
  .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}
@media (max-width: 820px) {
  .jobs { grid-template-columns: 1fr; }
  .job { min-height: 0; padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

/* ============================================================================
   THE ROSTER, STACKED
   `panelPathologists()` deals eleven doctors into four column groups (3/3/3/2)
   so the desktop panel has four equal bays. Stack those groups on a narrow
   screen and each one becomes its own little 2-up grid — group of three fills
   a row and leaves a hole, four times over, which is the ragged gap pattern.

   `display: contents` dissolves the groups: the eleven cards become direct
   children of ONE two-column grid and simply flow. The head spans it; the
   three blank continuation heads are already hidden.
   ============================================================================ */
@media (max-width: 1100px) {
  #mega-path .mega__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4); row-gap: 0;
  }
  #mega-path .mega__col,
  #mega-path .mega__roster { display: contents; }
  #mega-path .mega__h { grid-column: 1 / -1; }
  #mega-path .mega__doc-card { min-height: 0; }
}
/* Same flatten for the DESKTOP dropdown once the mega goes two-column (≤1240).
   Without it the four roster columns — one real heading plus three blank
   continuation heads — wrap to a 2×2 block and the blank heads show as gold
   rules cutting across the middle of the panel (client 2026-09-04). Here the
   eleven faces dissolve into one flowing two-column grid under a single
   "Pathologists" heading, and the blank heads are removed. */
@media (min-width: 1101px) and (max-width: 1240px) {
  #mega-path .mega__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8); row-gap: 0;
  }
  #mega-path .mega__col,
  #mega-path .mega__roster { display: contents; }
  #mega-path .mega__h { grid-column: 1 / -1; }
  #mega-path .mega__h--blank { display: none; }
  #mega-path .mega__doc-card { min-height: 0; }
}
@media (max-width: 480px) {
  /* one column of faces — two 150px cards with a name each is too tight */
  #mega-path .mega__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   MOBILE PASS — 2026-08-26
   Four things a real device showed that a resized desktop window did not.
   ============================================================================ */
@media (max-width: 760px) {
  /* The masthead settles at 148px through this band (48px rail + 100px band)
     and at 116px on a phone, where both are pinned smaller. The hero subtracts
     whichever applies, so it is the rest of the screen exactly. */
  :root { --masthead-h: 148px; }

  /* 1. THE FILM IS THE SCREEN.
     The hero is exactly the viewport minus the masthead, so the phone opens on
     the film with the navigation above it and the headline and both actions
     sitting on the bottom edge of the screen. Everything else is below the
     fold and is reached by scrolling — which is the point.

     `svh`, not `vh`: vh is the tallest the viewport ever gets, so a vh-sized
     hero is always taller than the screen while the address bar is showing.
     The masthead is pinned to a known height just below so this subtraction
     is exact rather than a guess. */
  .hero__frame > picture,
  .hero__film {
    aspect-ratio: auto;
    height: calc(100svh - var(--masthead-h));
    min-height: 420px;
  }
  /* Hung from the TOP. Whatever the frame has to lose it loses off the
     bottom, so a head near the top of the shot is never the thing that gets
     cut. (At this frame ratio cover is already cropping the sides rather than
     the top and bottom, but the clip is replaceable and the next one may not
     be as forgiving.) */
  .hero__frame > picture > img,
  .hero__film video { height: 100%; object-fit: cover; object-position: center top; }

  /* the block sits closer to the foot now that the frame is shorter */
  .hero__plaque { padding-block: var(--sp-9) var(--sp-6); }

  /* 2. THE EYEBROW WRAPPED onto two lines and dragged the gold rule with it. */
  /* inline-block so the gold rule hugs the words. As a block it stayed pinned
     to the left edge while the centred text walked away from it. */
  .hero__plaque .hero__eyebrow {
    display: inline-block;
    font-size: 10px; letter-spacing: .1em;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  /* 44px, not 40 — the rail is thin but its bays are still tap targets, and
     44 is the floor. --masthead-h is the sum of the two pinned heights and
     has to move with them or the hero overshoots the screen. */
  :root { --rail-h-phone: 44px; --hdr-h-phone: 72px; --masthead-h: 120px; }

  /* 3. THE UTILITY RAIL IS ONE SHORT ROW.
     It ran off the edge as four 132px bays, then two-by-two made it 230px of
     screen before the site had started. All six bays across in ONE row, small
     type, labels allowed to take two lines inside their own cell — the rail is
     a toolbar, not a section, and it gets a toolbar's height. Six columns, not
     four: adding Order Supplies + Clinician Portal wrapped a 4-col grid onto a
     second row and doubled the masthead (client 2026-09-04). */
  .util .wrap {
    display: grid; grid-template-columns: repeat(5, 1fr);
    overflow: visible; padding-inline: 0;
    min-height: var(--rail-h-phone);
  }
  .util__link {
    min-width: 0; flex: none; text-align: center;
    font-size: 9px; letter-spacing: .04em; line-height: 1.25;
    padding: var(--sp-2) 2px; min-height: var(--rail-h-phone);
    border-left: 0; box-shadow: none;   /* no chunky dividers — labels float */
  }
  .util__link:first-child { box-shadow: none; }
  .util__link:last-child { border-right: 0; }

  /* the masthead is a known height so the hero can subtract it exactly */
  .hdr__in { min-height: var(--hdr-h-phone); }
}


/* ============================================================================
   PHONE — LESS OF EVERYTHING
   The page was 12,500px on a 430px screen and the footer was 38% of it. A
   phone is not where anyone reads a sitemap or a list of CLIA numbers; it is
   where they find one thing and act on it. Everything below is still on the
   site, one layer in — the phone just stops trying to be the whole map.
   ============================================================================ */
@media (max-width: 620px) {
  /* sections sit closer together */
  :root { --section-y: clamp(32px, 5vw, 48px); }

  /* --- the four numbers go two-up rather than a column of four ---------- */
  .factband__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factband__facts > div {
    padding: var(--sp-5) var(--sp-3);
    border-top: var(--line-hair) solid var(--c-cement-3);
  }
  .factband__facts > div:nth-child(-n+2) { border-top: 0; }
  .factband__facts > div:nth-child(odd) { border-left: 0; }
  .factband__facts > div + div { border-top-width: var(--line-hair); }
  .factband__facts dd { font-size: 2rem; }

  /* --- four specialties, then a way to the rest ------------------------- */
  #tiles .tile:nth-child(n+5) { display: none; }
  .tiles__all { display: block; }

  /* --- three trust marks, not five. The other two are numbers that are
         already in the fact band directly above. ------------------------- */
  .trust__pill:nth-child(n+4) { display: none; }
  .trust__pill { min-height: 108px; padding: var(--sp-5) var(--sp-4); }

  /* --- the footer stops being a sitemap -------------------------------- */
  /* Licensing: five accreditation cards and eight certificate numbers. It is
     the single deepest thing on the page and none of it is what a phone came
     for — the trust bar above already carries CAP, CLIA and the rest. */
  .foot__lic { display: none; }

  /* Four links a column, not eight. */
  .fcol li:nth-child(n+5) { display: none; }
  .fcol__h { margin-bottom: var(--sp-3); }
  .fcol li a { min-height: 44px; padding-block: 10px; }

  /* one lab address, the phone number, and nothing else. The licence numbers
     and their certificate downloads keep their own page under About. */
  .faddr:nth-of-type(n+2) { display: none; }
  .faddr__clia, .faddr__cert, .faddr--cap { display: none; }

  .foot__top { padding-block: var(--sp-6); }
  .foot__promise { font-size: var(--fs-xs); }
  .foot__comm { display: none; }
}

/* ============================================================================
   PHONE QC — 2026-09-25 (client review)
   Headings centre; body copy, lists, forms and tables stay left. Side margins
   open from 16px to 22-24px.
   ============================================================================ */
@media (max-width: 620px) {
  :root { --layout-gutter: 24px; }
  .prose__h, .adv__h, .dl__h, .lic-sec__h, .side__h, .schools__h, .org__t,
  .sec-head, .sec-head h2 { text-align: center; }
  .sec-head .lead { margin-inline: auto; }
  .prose__h { margin-inline: auto; }
}
@media (max-width: 430px) {
  :root { --layout-gutter: 22px; }
}
@media (max-width: 760px) {
  /* A long URL or email address set the page column's width (445px on a
     390px screen) and pushed the text past the edge. */
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .prose, .side { overflow-wrap: anywhere; }

  /* tap targets 44px tall */
  .more-link, .doc-more, .lic-row__get, .prose a.golink { min-height: 44px; display: inline-flex; align-items: center; }

  /* news header: longer headline, one step smaller so it clears the first screen */
  .phero--article .phero__title { font-size: clamp(1.625rem, 7vw, 2rem); }
}

/* ============================================================================
   PHONE MASTHEAD — 2026-09-25 (client review: "the mobile top nav feels busy")
   The blue quick-link bar is gone on phones. Its five links are all in
   Menu › Quick links. Pay Bill, the one patients come for, stays one tap:
   a compact green button in the header, between the handset and Menu.
   ============================================================================ */
.hdr__pay { display: none; }
@media (max-width: 620px) {
  .util { display: none; }
  :root { --masthead-h: 76px; }
  .hdr__pay {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 10px; margin-left: 0; flex: none;
    background: var(--c-green-1); color: #fff; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--c-green-3); box-shadow: 0 2px 0 var(--c-green-3), var(--cast-1);
    font-size: 11px; font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase;
  }
  .hdr__pay:active { transform: translateY(2px); box-shadow: none; }
  .hdr__pay:focus-visible { outline: 3px solid var(--c-brand-navy); outline-offset: 2px; }
  .hdr__in { gap: 6px; }
  .nav-toggle, .nav-toggle.btn.btn--sm { margin-left: 0; padding-inline: 12px; flex: none; }
  .hdr__call { flex: none; margin-left: auto; }
  .wordmark { flex: none; }
  .wordmark img { height: 40px; width: auto; }

  /* Quick links in the drawer: two across, Pay Bill first and full width */
  .nav__quick-grid { grid-template-columns: repeat(2, 1fr); }
  .nav__quick-link--pay { order: -1; grid-column: 1 / -1; }
}
/* 320-350px screens (iPhone SE 1st gen): four controls do not fit; the
   handset goes (the number is in the footer and on Contact). */
@media (max-width: 350px) {
  .hdr__call { display: none; }
  .hdr__pay { margin-left: auto; }
}