/* ============================================================================
   SaraPath — COMPONENT LAYER  (architectural)
   Every component is a piece of the building:
     .btn--cement  a cast panel        .glass-panel  a glazed bay
     .btn--glass   a glazed door       .parapet      a cantilevered cap
     .fin          a brise-soleil      .mullion grid bays butted on 2px lines
   Square corners, hard shadows, reveal lines. No blur except a soffit.
   ============================================================================ */

/* ================================================================ 1. Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  border: var(--line-hair) solid transparent;
  border-radius: var(--radius);
  cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  /* The specular band is a background layer sized past the button and slid
     across it on approach — the light travels over the face rather than the
     whole face simply getting brighter. */
  background-repeat: no-repeat;
  transition: transform var(--dur-press) var(--ease),
              box-shadow var(--dur-press) var(--ease),
              background-color var(--dur-hover) var(--ease),
              background-position .55s var(--ease),
              color var(--dur-hover) var(--ease);
}
/* One step larger across the board. This is a practice whose patients are
   older and whose clinicians are reading on a workstation between cases —
   nothing here is a 13px control. Every size clears a 44px tap target. */
.btn--sm { font-size: var(--fs-2xs); padding: 12px var(--sp-5); min-height: 44px; }
.btn--md { font-size: var(--fs-xs);  padding: var(--sp-4) var(--sp-6); min-height: 54px; }
.btn--lg { font-size: var(--fs-sm);  padding: var(--sp-5) var(--sp-8); min-height: 64px; letter-spacing: .12em; }
.btn--xl { font-size: var(--fs-sm);  padding: var(--sp-5) var(--sp-7); min-height: 72px; letter-spacing: .1em; }
.btn--icon { width: 56px; height: 56px; padding: 0; font-size: 1.25rem; letter-spacing: 0; }

/* A cast cement panel: flat, edged, throwing a hard shadow down-right. */
.btn--cement {
  background-color: var(--c-white);
  background-image: var(--specular-band), var(--stucco);
  background-size: 220% 100%, auto, auto;
  background-position: -34% 0, center, center;
  color: var(--c-glass-3);
  border: 0;
  box-shadow: var(--edge-fine), var(--cast-fine);
}
.btn--cement:hover  { background-position: 134% 0, center, center; box-shadow: var(--edge-fine), var(--cast-fine-lift); }
.btn--cement:active { transform: translateY(1px); box-shadow: var(--edge-fine), var(--cast-1); }

/* A glazed door: blue glass, thin aluminium frame, sky streak. */
.btn--glass {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--c-glass-2), var(--c-glass-4));
  color: var(--c-white);
  border-color: var(--c-mullion);
  box-shadow: var(--cast-glass-2);
}
.btn--glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 160% at 22% -30%, rgba(226,240,255,.34), rgba(226,240,255,0) 62%);
}
.btn--glass:hover  { background: linear-gradient(168deg, var(--c-glass-1), var(--c-glass-3)); color: var(--c-white); }
.btn--glass:active { transform: translateY(1px); box-shadow: var(--cast-glass-2); }

/* Brand gold — the signage colour, used once per view. */
.btn--gold {
  background-color: var(--c-gold-3);
  background-image:
    var(--specular-warm),
    radial-gradient(130% 100% at 20% -18%, rgba(255,250,238,.42), rgba(255,250,238,0) 58%),
    linear-gradient(178deg, rgba(255,250,240,.24) 0%, rgba(120,90,48,.20) 100%);
  background-size: 220% 100%, auto, auto;
  background-position: -34% 0, center, center;
  color: var(--c-white);
  border-color: var(--c-gold-5);
  box-shadow: var(--bevel-gold), var(--cast-2);
}
.btn--gold:hover  { background-color: var(--c-gold-2); color: var(--c-white); background-position: 134% 0, center, center; }
.btn--gold:active { transform: translateY(1px); box-shadow: var(--bevel-gold), var(--cast-1); }

/* Brand navy, flat. The gold is the signage colour and the navy is the
   structural one — between them they are the whole identity, and the page
   should not need a third. */
.btn--navy {
  background-color: var(--c-brand-navy);
  background-image:
    var(--specular-cool),
    radial-gradient(130% 100% at 20% -18%, rgba(150,195,255,.28), rgba(150,195,255,0) 58%),
    linear-gradient(178deg, rgba(120,160,220,.20) 0%, rgba(0,8,26,.34) 100%);
  background-size: 220% 100%, auto, auto;
  background-position: -34% 0, center, center;
  color: var(--c-white);
  border-color: #00133A;
  box-shadow: var(--bevel-navy), var(--cast-2);
}
.btn--navy:hover  { background-color: var(--c-glass-2); color: var(--c-white); background-position: 134% 0, center, center; }
.btn--navy:active { transform: translateY(1px); box-shadow: var(--bevel-navy), var(--cast-1); }
.btn--lg.btn--navy, .btn--xl.btn--navy { box-shadow: var(--bevel-navy), var(--cast-3); }

/* Ghost: a scribed outline on a dark plane. */
.btn--scribe {
  background: transparent; color: var(--c-white);
  border-color: rgba(255,255,255,.5); box-shadow: none;
}
.btn--scribe:hover { background: rgba(255,255,255,.1); color: var(--c-white); }

.btn--lg.btn--cement, .btn--xl.btn--cement { box-shadow: var(--bevel-cement), var(--cast-3); }
.btn--lg.btn--cement:active, .btn--xl.btn--cement:active { transform: translateY(2px); box-shadow: var(--bevel-cement), var(--cast-2); }
.btn--lg.btn--gold, .btn--xl.btn--gold { box-shadow: var(--bevel-gold), var(--cast-3); }
.btn--lg.btn--gold:active, .btn--xl.btn--gold:active { transform: translateY(2px); box-shadow: var(--bevel-gold), var(--cast-2); }

/* ======================================================== 2. Chips / tags */
.chip {
  display: inline-block;
  background: var(--c-gold-wash);
  border: var(--line-hair) solid var(--c-gold-2);
  color: var(--c-gold-4);
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px var(--sp-3); line-height: 1.4;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.pill-dept {
  align-self: flex-start;
  background: var(--c-glass-3); color: var(--c-white);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 6px var(--sp-3);
}

/* ============================================================ 3. Utility bar */
/* Brand navy, flat — the top eyebrow of the masthead is the practice's blue
   and nothing else. It used to be near-black (#0C1526), which read as a
   generic dark bar. */
.util {
  background-color: var(--c-brand-navy);
  background-image: linear-gradient(180deg, rgba(120,165,225,.14) 0%, rgba(0,10,32,.32) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              inset 0 -1px 0 rgba(0,8,26,.55);
}
.util .wrap { display: flex; align-items: stretch; min-height: var(--rail-h); }
/* The number lives here and nowhere else: the rail is the practice's contact
   line, so the white band below can spend its full width on navigation. The
   handset does the labelling — no "call the practice" caption. */
.util__label {
  margin-right: auto; display: flex; align-items: center; gap: var(--sp-5);
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  padding-inline: 0 var(--sp-6);
  color: var(--c-cement-3);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  letter-spacing: .06em; text-transform: uppercase;
}
.util__tel {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-white); font-weight: var(--fw-semi);
  font-size: 1rem; letter-spacing: .02em;
  transition: color var(--dur-hover) var(--ease);
}
.util__tel-ico { width: 15px; height: 15px; flex: none; fill: var(--c-gold-2);
  transition: fill var(--dur-hover) var(--ease); }
.util__tel:hover { color: var(--c-gold-1); }
.util__tel:hover .util__tel-ico { fill: var(--c-gold-1); }
.util__addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Each rail item is a bay, matched to the nav bays directly beneath it. */
/* Lighter (client 2026-09-04: the rail read chunky and heavy). Medium weight,
   and the chunky double-line dividers between bays are gone — the labels float
   on the navy rail instead of sitting in a gridded set of boxes. */
.util__link {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 104px;
  color: var(--c-cement-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-med);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  padding-inline: var(--sp-5);
  border-left: 0;
  transition: background-color var(--dur-glaze) var(--ease-glaze),
              color var(--dur-glaze) var(--ease-glaze);
}
.util__link:last-child { border-right: var(--line-hair) solid rgba(255,255,255,.16); }
.util__link:hover { background-color: var(--c-glass-2); color: var(--c-white); }
.util__link--gold { background: var(--c-gold-3); color: var(--c-white); border-color: var(--c-gold-4); }
.util__link--gold:hover { background: var(--c-gold-2); color: var(--c-white); }
/* Pay a Bill closes the rail — a transaction, not navigation, so it sits with
   Test Directory and Results rather than taking a bay in the nav band.

   It stays GREEN, and it is the one colour on the page from outside the brand.
   It was tried in gold once the rail went navy; gold put it in the same column
   as Become a Client and the two read as one block. Green separates the thing
   that takes a payment from the thing that starts a relationship. */
.util__link--green { background: var(--c-green-1); color: var(--c-white); border-color: var(--c-green-3); }
.util__link--green:hover { background: var(--c-green-2); color: var(--c-white); }

/* ============================================================ 4. Header/nav
   The header is the parapet: a white cement band with a hard cap line above
   and a deep reveal below, cantilevered over whatever it sits on. */
.hdr {
  position: relative; z-index: var(--z-header);
  background-color: var(--c-white);
  background-image: var(--sheen-light);
  border-top: 3px solid var(--c-brand-gold);
  border-bottom: var(--line-hair) solid var(--c-cement-4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95),
              inset 0 -2px 0 rgba(16,25,42,.08),
              var(--soffit-shadow);
}
/* Client note 2026-09-04: the band was too tall. 136 → 100px, and the wordmark
   drops with it (88 → 64px), so the parapet keeps its proportions instead of
   just cropping padding around an oversized mark. Tablet/phone already run their
   own shorter `.hdr__in` (css/responsive.css, ≤1100), so this is desktop only. */
.hdr__in {
  max-width: var(--frame-max); margin-inline: auto;
  /* Narrower top/bottom buffer on the nav band (client 2026-09-04: 100 → 84). */
  display: flex; align-items: stretch; min-height: 84px;
}
/* The mark stands alone at its true 2.881:1 — no strapline crowding the
   "DIAGNOSTICS" that is already drawn into it, and never compressed.
   The client's own logo is the largest thing in the band, by a distance. */
/* The mark is the home link, so it has to answer to the pointer — but it is
   the client's logo and nothing may be done TO it. The response happens around
   it: the mark lifts slightly off the band on a soft navy cast and a gold rule
   draws in along the foot of the bay. The artwork is never recoloured, tinted
   or filtered. */
.wordmark {
  position: relative;
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center;
  padding-inline: 0 var(--sp-6);
  border-right: var(--line-hair) solid var(--c-cement-3);
  overflow: hidden;
}
.wordmark img {
  position: relative; z-index: 1;
  flex: none; height: 64px; width: 185px; max-width: none; object-fit: contain;
  transition: transform var(--dur-slide) var(--ease),
              filter var(--dur-slide) var(--ease);
}

/* the rule, drawn in from the left along the foot of the bay */
.wordmark::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: var(--sp-6); bottom: 0; height: var(--line-fin);
  background: linear-gradient(90deg, var(--c-brand-gold), var(--c-gold-2));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slide) var(--ease);
}

@media (hover: hover) {
  .wordmark:hover::after  { transform: scaleX(1); }
  .wordmark:hover img {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 10px rgba(0, 24, 62, .22));
  }
}
.wordmark:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .wordmark::after, .wordmark img { transition: none; }
  .wordmark:hover img { transform: none; }
}
/* nav lives in css/nav.css */
.nav-toggle { display: none; }

/* ================================================================= 5. Hero
   The photograph is presented as shot — no scrim, no gradient, no crop
   beyond the frame. Type sits on structure instead: a white cement band
   cantilevered over the lower left of the image, exactly the way the parapet
   is cantilevered over the glass. */
.hero { position: relative; background: var(--c-cement-1); }
.hero__frame { position: relative; display: block; }

/* The photograph keeps its 2.70:1 but the frame carries a floor, because the
   plaque sits inside it: at 1200px a 2.70:1 picture is only 439px tall and the
   plaque needs ~540px, which is what used to push it out of the frame and into
   the parapet. Below the floor the picture crops rather than the plaque
   escaping — the frame is never shorter than what it contains. */
.hero__frame > picture {
  display: block; position: relative; width: 100%;
  aspect-ratio: 7084 / 2626;
  min-height: clamp(560px, 42vw, 720px);
}
.hero__frame > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  display: block;
}

/* Hero film — over the photograph, under the plaque. */
/* NO STILL ON THIS LAYER (client 2026-09-11: "go back to the SaraPath building
   for the hero image, not the screengrab of city"). The layer is transparent,
   so whenever the video is not covering it — while it loads, on a slow or
   metered link where the clip is never fetched, or if autoplay is refused —
   the photograph underneath shows through: 2001 Webber Street, which is the
   `<picture>` in index.html. This reverses the 2026-09-08 change that put a
   frame of the film (the bayfront at dusk) on the layer. */
.hero__film {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
.hero__film video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0;
  transition: opacity 2.5s linear;
}
.hero__film video.is-in { opacity: 1; }

/* The parapet: a white band cantilevered over the bottom edge of the photo,
   capped in brand navy and throwing a soffit shadow — the same move the
   building makes where the cap projects over the glass. */
/* ------------------------------------------------------------- hero plaque
   Blue glass with a white bevelled edge and hairline rules — the headline sits
   on a real surface, not on the sky. */
/* Anchored to the FOOT of the photograph, not the top. The frame's height is
   fluid (the image keeps its 2.70:1), so a top-anchored plaque grows downward
   into whatever follows — which is exactly how it used to collide with the
   parapet. Bottom-anchored, it can only ever sit inside the picture. */
/* No box. The plaque used to be a glazed slab covering a third of the film;
   what carries the type now is a wash in brand navy, rising from the FOOT of
   the frame — which is where the type is. A rake from the left only darkened
   the half of the picture the headline happens to start in and left the rest
   of the line sitting on whatever the clip was doing; the film is replaceable,
   so the wash has to follow the words, not the composition.

   Second layer: a light cap at the head, so the white nav band never meets a
   bright frame edge. */
.hero__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(0deg,
      rgba(0, 26, 66, .92) 0%,
      rgba(0, 26, 66, .80) 16%,
      rgba(0, 26, 66, .62) 36%,
      rgba(0, 26, 66, .30) 58%,
      rgba(0, 26, 66, .04) 76%,
      rgba(0, 26, 66, 0) 100%),
    linear-gradient(180deg, rgba(0, 20, 52, .30) 0%, rgba(0, 20, 52, 0) 26%);
}
.hero__plaque {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(40px, 6vw, 96px); top: auto;
  width: min(640px, calc(100% - var(--layout-gutter) * 2));
  margin-left: calc(var(--frame-max) / -2 + min(320px, 50%));
  padding: 0;
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
}

/* The eyebrow is set on a gold rule rather than floating — the one piece of
   structure left in the hero, and it is brand gold. */
.hero__eyebrow {
  margin: 0 0 var(--sp-5); padding-left: var(--sp-4);
  border-left: var(--line-fin) solid var(--c-brand-gold);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-1);
  text-shadow:
    0 1px 2px rgba(0, 8, 24, .85),
    0 2px 10px rgba(0, 8, 24, .70),
    0 0 34px rgba(0, 8, 24, .60);
}
/* Larger than it was, because it is now carrying the frame on its own. */
.hero__headline {
  margin: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2.5rem, 1.5rem + 3.1vw, 4rem);
  line-height: 1.04; letter-spacing: var(--ls-hero);
  color: var(--c-white);
  /* The film is replaceable, so the type cannot depend on what is behind it:
     a tight contact shadow, a mid body, and a wide dark glow that sits the
     headline off any frame the clip happens to be on. */
  text-shadow:
    0 1px 2px rgba(0, 8, 24, .80),
    0 3px 10px rgba(0, 8, 24, .62),
    0 10px 36px rgba(0, 8, 24, .68),
    0 0 70px rgba(0, 8, 24, .55);
}
/* The second line takes the gold, the way DIAGNOSTICS does under the wordmark. */
.hero__headline .b8 { font-weight: var(--fw-bold); color: var(--c-gold-1); }
.hero__rule {
  border: 0; height: 1px; margin: var(--sp-5) 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.55), rgba(255,255,255,.22) 62%, rgba(255,255,255,0));
}
.hero__sub {
  margin: 0; max-width: 42ch;
  font-size: var(--fs-body); line-height: 1.5; color: #E8EFF8;
  text-shadow: 0 1px 2px rgba(0, 8, 24, .80), 0 2px 14px rgba(0, 8, 24, .60);
}
.hero__cta {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-4); margin-top: var(--sp-7);
}
/* Sized to their labels now, not stretched across a box that is no longer
   there. Gold leads, navy follows. */
.hero__cta .btn { flex: 0 0 auto; }

/* The plaque stays ON the film at every width down to 760px, where
   css/responsive.css takes over and pins it to the foot of a standing 4:5
   frame. It used to go static at 900 and drop below the film — correct when
   the plaque was a glazed slab, wrong the moment it lost its box: white type
   on a pale ground reads as a headline that vanished.

   The two actions stay side by side as long as they fit; a tablet has room
   for both and stacking them made two very wide slabs of nothing. */
@media (max-width: 620px) {
  .hero__cta { display: grid; grid-template-columns: 1fr; }
}

/* ============================================================== THE FACTS
   Was the hero's parapet; it now stands on its own between the pathologists
   and the audience doors, because the doctors go directly under the film.
   Navy cap above, gold reveal below — the two brand colours holding a white
   slab between them. */
/* Full-bleed, like every other band on the page. It used to be a 1200px slab
   centred between two full-width grounds, which left a step at each end where
   its navy cap met the navy section above it — it read as a broken corner,
   not as a slab. The facts inside it hold the frame instead. */
.factband {
  position: relative; z-index: 2;
  background-color: var(--c-white);
  border-top: var(--line-parapet) solid var(--c-brand-navy);
  border-bottom: var(--line-fin) solid var(--c-brand-gold);
  box-shadow: var(--bevel-cement), var(--cast-4);
}
.factband__facts {
  max-width: var(--frame-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.factband__facts > div {
  display: flex; flex-direction: column-reverse; justify-content: center; gap: var(--sp-2);
  /* Client 2026-09-04: a slimmer strip, butted under the pathologist rotator. */
  padding: var(--sp-5) var(--sp-5);
  border-left: var(--line-hair) solid var(--c-cement-3);
  text-align: center;
}
.factband__facts > div:first-child { border-left: 0; }
.factband__facts dt {
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-gold-4);
  line-height: 1.25; text-wrap: balance;
}
.factband__facts dd {
  margin: 0;
  font-family: var(--font-display); font-size: 3rem; font-weight: var(--fw-bold);
  color: var(--c-brand-navy); line-height: 1;
}

@media (max-width: 900px) {
  .factband__facts { grid-template-columns: repeat(2, 1fr); }
  .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); }
}

/* Interior page header — same parapet, no photograph. */
.intro { background: var(--c-glass-4); position: relative; overflow: hidden; padding-block: var(--sp-10); }
.intro.surface { background: var(--c-glass-5); }
.intro__in { max-width: var(--layout-max); margin-inline: auto; padding-inline: var(--layout-gutter); max-width: 900px; }
.intro h1 { color: var(--c-white); font-style: italic; margin-block: var(--sp-4); }
.intro p { color: #C6D2E2; font-size: var(--fs-lead); max-width: 60ch; }

/* ================================================================ 6. Media */
.media {
  position: relative; overflow: hidden;
  background-color: var(--c-cement-3);
  background-image: var(--lqip);
  background-size: cover; background-position: center;
}
.media > picture > img, .media > img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s var(--ease);
}
.media img.is-loaded, .no-js .media img { opacity: 1; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x1  { aspect-ratio: 3 / 1; }

/* ============================================== 7. Plate + doctor carousel */

/* THE PLATE — the one surface type is allowed to sit on. Cast white cement:
   a lit top arris, a shaded bottom one, an edge you can read the thickness
   of, and a deep cast under it. Nothing busy ever goes behind it. */
.plate {
  position: relative;
  background-color: var(--c-white);
  border: var(--line-hair) solid var(--c-cement-4);
  box-shadow: var(--bevel-cement), var(--cast-4);
}
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% -8%, rgba(255,255,255,.9), rgba(255,255,255,0) 58%),
    linear-gradient(178deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(178deg, rgba(16,25,42,0) 74%, rgba(16,25,42,.05) 100%);
}
.plate > * { position: relative; z-index: 1; }
.plate--tight { box-shadow: var(--bevel-cement), var(--cast-2); }

/* --plated: the full treatment, for a panel standing on glass. A navy cap
   above and a gold reveal below — the two brand colours holding the white
   between them, the same move the fact band makes — and a double line ruled
   around the whole thing a reveal's width out from the edge. */
.plate--plated {
  border: 0;
  border-top: var(--line-parapet) solid var(--c-brand-navy);
  border-bottom: var(--line-fin) solid var(--c-brand-gold);
  box-shadow: var(--bevel-cement), var(--frame-on-glass), var(--cast-4);
}

/* The featured pathologist. White ground, glass only behind and around it. */
.carousel { position: relative; }
/* (the glazed backdrop behind the carousel is retired — it read as a big
   window graphic with nothing to do) */
/* All eleven slides stack in one grid cell, so the plate is exactly as tall as
   the tallest of them — nothing overflows onto the controls, and the height
   never jumps between doctors. */
.carousel__stage {
  position: relative; z-index: 1;
  display: grid; grid-template-areas: "slide";
  padding: var(--sp-5);          /* client 2026-09-04: understated, smaller plate */
  overflow: hidden;              /* slides travel off the edges */
}
/* Only the slides in play are laid out, so the plate never reserves height for
   the other ten. A change is a transform, so it reads as travel rather than a
   cross-fade in place. Every responsive override sets grid-template-* only —
   `display` is owned by .is-live. */
.slide {
  grid-area: slide;
  display: none;
  /* Two columns, one row: photo | info (name, specialty, quote, link). Dead
     simple — no full-width name header spanning both (client 2026-09-04).
     Kept small and understated: a compact portrait, not a full dossier. */
  grid-template-columns: minmax(120px, 148px) 1fr;
  grid-template-rows: auto;
  gap: var(--sp-4) var(--sp-6);
  align-items: start;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--dur-slide) cubic-bezier(.22, .61, .36, 1);
}
.slide.is-live   { display: grid; }
.slide.is-active { pointer-events: auto; }
.carousel__stage.is-dragging .slide { transition: none; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* The header spans both bays and carries a lintel: a navy rule with a cement
   line under it — a double line, not a single bar. */
.slide__head {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: 3px solid var(--c-brand-navy);
  box-shadow: 0 4px 0 var(--c-cement-2);
  margin-bottom: 4px;
}
.slide__id {
  display: flex; flex-direction: column; gap: 4px;
}
.slide__l { align-self: stretch; }
.slide__r { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); align-self: stretch; }
.slide__r .btn { align-self: flex-start; margin-top: auto; }

/* One row, two ends: "Featured pathologist" on the left, "Full bio &
   credentials" right-justified across from it (client 2026-09-10). It used to
   sit alone at the foot of the plate, which put an action a whole card away
   from the name it belongs to. The rule under the row ties the two together. */
.slide__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: var(--line-hair) solid var(--c-cement-3);
}
/* In the row it is neither pushed to the bottom nor to the left, and the
   label drops the bottom margin the narrow breakpoints give it. */
.slide__top .doc-more { align-self: baseline; margin-top: 0; }
.slide__top .label-sm { margin-bottom: 0 !important; }

/* The doctors are the point of the section — give them the room, and mat them
   the way a photograph in this building's lobby would be: a white mount, a
   hairline ruled around the mount, and a cast under the whole thing. */
.headshot {
  width: 100%;
  border: 6px solid var(--c-white);
  box-shadow:
    0 0 0 1px var(--c-cement-4),
    var(--cast-2);
}
.doc-name {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: var(--fw-bold); color: var(--c-brand-navy);
  line-height: 1.12; letter-spacing: var(--ls-head);
}
.doc-boards { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-glass-2); }
.label-sm {
  display: block; font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4);
}

/* The rule beside a quotation is gold, doubled with a cement line — a fin and
   its shadow, not a stripe. */
.quote {
  border-left: 5px solid var(--c-brand-gold);
  box-shadow: -8px 0 0 -7px var(--c-cement-3);
  padding-left: var(--sp-5);
}
.quote p {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.45;
  color: var(--c-ink-soft);
}

/* The bio link is understated — text, not a filled button (client 2026-09-04:
   the big navy button read as clunky). Navy label, gold arrow, hover underline. */
.doc-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-black);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--c-brand-navy);
}
.doc-more span { color: var(--c-gold-3); transition: transform var(--dur-hover) var(--ease); }
.doc-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc-more:hover span { transform: translateX(3px); }

/* Credentials: plain rows on white, hairline separated. Nothing behind them. */
/* A double line opening the credentials, matching the lintel above. */
.creds {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: var(--line-hair) solid var(--c-cement-4);
  box-shadow: 0 3px 0 var(--c-cement-1);
  padding-top: 3px;
}
.cred {
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  border-bottom: var(--line-hair) solid var(--c-cement-3);
}
.cred b {
  display: block; font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-4); margin-bottom: 3px;
}
.cred span { font-size: var(--fs-sm); line-height: 1.4; color: var(--c-ink-soft); }

.carousel__ctrls {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); flex-wrap: wrap;
}
.dots { display: flex; gap: 6px; margin-left: var(--sp-4); }
.dot {
  width: 34px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: var(--c-cement-4);
  transition: background var(--dur-hover) var(--ease), height var(--dur-hover) var(--ease);
}
.dot:hover { background: var(--c-glass-2); }
.dot[aria-selected="true"] { background: var(--c-gold-3); height: 5px; }
.carousel__meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.carousel__meta span {
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-nav); color: var(--c-muted);
}

/* ======================================================= 8. Doors + tiles */
/* The two doors are a matched pair. Both bays are the same height because the
   grid stretches them; the plate inside each one is made to fill its bay and
   its action is pinned to the foot, so the two cards are identical whatever
   the copy does. */
.door {
  position: relative; overflow: hidden; display: flex;
  padding: 0;
  color: var(--c-white);
  border: var(--line-mullion) solid var(--c-mullion);
  transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease);
}
.door--clinician { box-shadow: var(--cast-3); }
.door--patient   { box-shadow: var(--cast-3); }

.door:hover  { color: var(--c-white); }
.door:active { transform: translateY(2px); box-shadow: var(--cast-glass-2); }
.door > * { position: relative; z-index: 1; }
.door h3 { color: var(--c-brand-navy); font-style: italic; margin-block: 0 var(--sp-3); }
.door p  { color: var(--c-ink-soft); font-size: var(--fs-body); margin-bottom: var(--sp-5); max-width: 44ch; }
/* The reading surface: a white plate floating on the glazed bay. Copy never
   sits directly on glass. */
.door__plate {
  display: flex; flex-direction: column; flex: 1; margin: var(--sp-5);
  background-color: rgba(255,255,255,.96);
  background-image:
    radial-gradient(120% 70% at 12% -8%, rgba(255,255,255,.9), rgba(255,255,255,0) 58%),
    var(--sheen-light);
  backdrop-filter: blur(2px);
  padding: var(--sp-6);
  border: 0;
  border-top: var(--line-fin) solid var(--c-brand-navy);
  box-shadow: var(--bevel-cement), 0 0 0 1px rgba(0,20,54,.30), var(--cast-4);
}
.door .inchip {
  display: inline-block; background: var(--c-glass-3); color: var(--c-white);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
  text-transform: uppercase; letter-spacing: var(--ls-nav);
  box-shadow: var(--cast-1);
}
.door:hover .inchip { background: var(--c-brand-navy); }

/* Specialty bay — a built card: a specimen at the head, a cement body, and a
   gold reveal that lights on approach.

   Eight histology sections are eight of the loudest pictures on the internet,
   and butted together on a hairline they fight each other and everything
   around them. Three things hold them down: real space between the bays
   (`.bays--gap`), a veil and a desaturation over every specimen at rest, and
   an edge on each card so it reads as its own object rather than as one more
   tile in a quilt. Approaching a bay clears its veil — the specimen comes up
   to full colour, one at a time, which is the only time you actually need to
   see it. */
.tile {
  position: relative;
  display: flex; flex-direction: column;
  background-color: var(--c-white);
  background-image: var(--stucco);
  border: 0;
  box-shadow: var(--edge-fine), var(--cast-fine);
  transition: background var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.tile:hover { box-shadow: var(--edge-fine), var(--cast-fine-lift); }
/* Every specimen is mounted, not bled to the card edge: white margin on
   three sides, a hairline ruled around the picture, the way a section sits
   on a slide. It is the single biggest thing holding the grid down. */
.tile .media {
  margin: var(--sp-4) var(--sp-4) 0;
  border: var(--line-hair) solid var(--c-cement-4);
  box-shadow: 0 1px 2px rgba(16,25,42,.10);
}

/* the veil — light at the head, settling into brand navy at the sill */
.tile .media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(0,36,93,.20) 100%);
  transition: opacity var(--dur-hover) var(--ease);
}
.tile .media > picture > img,
.tile .media > img { filter: saturate(.58) contrast(.97); }
.tile:hover .media::after { opacity: 0; }
.tile:hover .media > picture > img,
.tile:hover .media > img { filter: none; }

.tile__body {
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-3); flex: 1;
}
.tile__name {
  font-family: var(--font-display); font-size: 1.375rem;
  font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.2;
}
.tile__blurb { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.55; }
.tile__go {
  margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4);
}
/* the reveal at the foot of the bay */
.tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--c-cement-3);
  transition: background var(--dur-hover) var(--ease);
}
.tile:hover { background-color: var(--c-cement-1); }
.tile:hover::after { background: var(--c-gold-3); }
.tile:hover .tile__go { color: var(--c-brand-navy); }

/* ============================================================= 9/10. Cards */
/* Job and news cards are targets, not paragraphs: they carry a real edge, a
   resting shadow, and a gold sill that lights on approach. */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-4);
  background-color: var(--c-white);
  background-image: var(--sheen-light);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border: var(--line-hair) solid var(--c-cement-3);
  box-shadow: var(--sheen-edge), var(--cast-2);
  transition: transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.card::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 4px;
  background: var(--c-cement-3);
  transition: background var(--dur-hover) var(--ease), height var(--dur-hover) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--c-cement-4);
  box-shadow: var(--sheen-edge), var(--cast-4);
}
.card:hover::after { background: var(--c-gold-3); height: 5px; }
.card:active { transform: translateY(-1px); box-shadow: var(--sheen-edge), var(--cast-2); }
.card:hover { background: var(--c-cement-1); }
.card--job  { min-height: 236px; }
.card--news { min-height: 180px; }
.card__title {
  font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: var(--lh-head);
}
.card__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.card__meta--push { margin-top: auto; }
.card__cta { align-self: stretch; margin-top: auto; padding-block: var(--sp-4); font-size: var(--fs-xs); }
.card__tag {
  align-self: flex-start; font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4);
}

/* Document row — the flat /files/ pattern, scribed rather than boxed. */
.doc-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border-left: var(--line-fin) solid var(--c-cement-4);
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.doc-row:hover { border-left-color: var(--c-gold-3); background: var(--c-cement-1); }
.doc-row__icon {
  flex: 0 0 38px; height: 46px; display: grid; place-items: center;
  background: var(--c-glass-4); color: var(--c-white);
  font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: .08em;
}
.doc-row__name { display: block; font-weight: var(--fw-bold); color: var(--c-brand-navy); line-height: 1.3; }
.doc-row__meta { display: block; font-size: var(--fs-2xs); color: var(--c-muted); }
.doc-row__go {
  margin-left: auto; font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4); white-space: nowrap;
}

/* ============================================================ 11. CTA band */
/* The band is a cast plane, not a coloured area: a white parapet blade capping
   it, a gold reveal closing it, and a lit arris inside the top edge. */
.band {
  position: relative; overflow: hidden;
  background: var(--c-brand-navy);
  border-top: var(--line-parapet) solid var(--c-cement-0);
  border-bottom: var(--line-fin) solid var(--c-brand-gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 -1px 0 rgba(0,10,30,.55),
              var(--cast-4);
}
.band.surface { background-color: var(--c-brand-navy); }
.band:not(.surface)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at 16% -20%, rgba(160,196,240,.16), rgba(160,196,240,0) 58%);
}
.band__in {
  position: relative; z-index: 3;
  max-width: var(--frame-max); margin-inline: auto;
  /* It was set as tight as a card. It is a full-width plane read at arm's
     length, so it gets the room a plane gets. */
  padding: var(--sp-11) var(--layout-gutter);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-10); align-items: center;
}
.band h2 { color: var(--c-white); font-style: italic; margin-block: var(--sp-3) var(--sp-4); }
.band p  { color: #B9C8DD; font-size: var(--fs-lead); max-width: 52ch; }
.band__r { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.band__call {
  color: #9DB0C9; font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.band__call b {
  display: block; margin-top: var(--sp-2);
  font-family: var(--font-display); color: var(--c-white);
  font-weight: var(--fw-bold); font-size: 2rem; letter-spacing: 0;
}
@media (max-width: 900px) { .band__in { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* Careers sits on light concrete — dark heads, cement cards. */
.concrete .sec-head h2 { color: var(--c-brand-navy); }
.concrete .sec-head .lead { color: var(--c-muted); }

/* ============================================================= 12. Trust bar */
/* A cement curb under the band. The bar itself is the recess — a graded
   stucco ground with the band's shadow falling into its head — and each mark
   stands on it as its own cast panel. Flat white with hairlines read as a
   spreadsheet; this reads as five blocks set into a wall. */
.trust__pill {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-left: var(--line-hair) solid var(--c-cement-3);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-navy);
}

.trust__pill img { height: 40px; width: auto; }
.trust__pill--mark { flex: 0 1 auto; }

/* ================================================================ 13. Footer */
.foot { background: var(--c-glass-5); color: #B6C3D5; padding-top: var(--sp-9); }
.foot__lic {
  max-width: var(--frame-max); margin-inline: auto;
  padding: 0 var(--layout-gutter) var(--sp-8);
}
.foot__lic h3 {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--c-white); font-size: 1.25rem; font-style: italic; margin-bottom: var(--sp-5);
}
.foot__lic h3 i { height: var(--line-hair); flex: 1; background: rgba(255,255,255,.18); }
.badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.badge {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--c-white); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--cast-glass-2);
}
.badge__mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--c-cement-2); color: var(--c-glass-3);
  font-weight: var(--fw-black); font-size: var(--fs-2xs);
}
.badge__mark img { max-height: 36px; width: auto; object-fit: contain; }
.badge b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--c-brand-navy); line-height: 1.2; }
.badge s { display: block; font-size: var(--fs-label); font-weight: var(--fw-semi); color: var(--c-muted); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; }

.licgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
.licgrid .h {
  display: block; color: var(--c-gold-2); font-size: var(--fs-label);
  font-weight: var(--fw-black); letter-spacing: var(--ls-label);
  text-transform: uppercase; margin-bottom: var(--sp-2);
}
.licgrid p { font-size: var(--fs-2xs); line-height: 1.65; color: #9DACC1; margin-bottom: var(--sp-2); }
.licgrid .num { color: #7C8CA3; }

.foot__main {
  max-width: var(--frame-max); margin-inline: auto;
  padding: var(--sp-8) var(--layout-gutter);
  border-top: var(--line-hair) solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-7);
}
.foot__logo { height: 46px; width: auto; }
.foot__brand p { font-size: var(--fs-xs); line-height: 1.7; margin: var(--sp-4) 0; max-width: 34ch; }
.foot__addr { font-size: var(--fs-xs); line-height: 1.8; font-style: normal; }
.fcol { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-xs); }
.fcol .h {
  color: var(--c-gold-2); font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: var(--sp-1);
}
.fcol a { color: #B6C3D5; }
.fcol a:hover { color: var(--c-white); }
.foot__bar {
  max-width: var(--frame-max); margin-inline: auto;
  padding: var(--sp-5) var(--layout-gutter);
  border-top: var(--line-hair) solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-2xs); color: #7C8CA3;
}
.foot__bar a { color: #7C8CA3; }
.foot__bar a:hover { color: var(--c-white); }
.foot__bar .lk { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* ============================================================ 14. Roster */
.roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--line-hair); background: var(--c-cement-3); }
.roster-card { display: flex; flex-direction: column; gap: var(--sp-4); background: var(--c-white); padding: var(--sp-6); }
.roster-card__top { display: flex; gap: var(--sp-5); align-items: flex-start; }
.roster-card__photo { flex: 0 0 132px; width: 132px; border: 5px solid var(--c-white); box-shadow: var(--cast-2); }
.roster-card__id { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.roster-card .doc-name { color: var(--c-brand-navy); }
.roster-card .doc-boards { color: var(--c-glass-2); }
.roster-card__quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink-soft); margin: 0; }
.roster-card__detail { border-top: var(--line-hair) solid var(--c-cement-3); padding-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.roster-card__detail[hidden] { display: none; }
.detail-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-4); align-items: baseline; }
.detail-row dt { font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-4); }
.detail-row dd { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.roster-card > .btn { align-self: flex-start; margin-top: auto; }
.roster-card[hidden] { display: none; }

/* Roster filter (2026-09-24): six specialty areas, one row, sentence case.
   A segmented bar on a hairline, not a cloud of uppercase chips. */
.filterbar {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0;
  margin-bottom: var(--sp-7); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--c-cement-3);
}
.filterbar__label {
  align-self: center; margin-right: var(--sp-3);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted);
}
.filter {
  background: none; border: 0; cursor: pointer;
  padding: var(--sp-3) var(--sp-3); margin-bottom: -1px;
  border-bottom: 3px solid transparent; white-space: nowrap;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--c-brand-navy);
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.filter__n { font-weight: var(--fw-regular, 400); color: var(--c-muted); margin-left: 2px; }
.filter:hover { border-bottom-color: var(--c-cement-4); }
.filter[aria-pressed="true"] { border-bottom-color: var(--c-brand-gold); }
.filter[aria-pressed="true"] .filter__n { color: var(--c-gold-4); }

/* ============================================================= responsive */
@media (max-width: 1080px) { .roster { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .slide { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .slide__head { grid-column: 1; }
  .headshot { max-width: 260px; }
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--c-white); box-shadow: var(--soffit-shadow);
  }
  .nav.is-open a { border-left: 0; border-top: var(--line-hair) solid var(--c-cement-3); padding: var(--sp-4) var(--layout-gutter); }
  .nav-toggle { display: inline-flex; margin-left: auto; align-self: center; margin-right: var(--layout-gutter); }
  .hdr__in { position: relative; }
  .carousel__stage { min-height: 0; padding: var(--sp-5); }
  .slide { position: static; inset: auto; display: none; grid-template-columns: 1fr; }
  .slide.is-active { display: grid; }
  .headshot { max-width: 180px; }
  .creds { grid-template-columns: 1fr; }
  .foot__main { grid-template-columns: 1fr 1fr; }
  .licgrid { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: 2px; }
  .util__label { width: 100%; }
}
@media (max-width: 620px) {
  .foot__main { grid-template-columns: 1fr; }
  .roster-card__top { flex-direction: column; }
  .carousel__meta { margin-left: 0; width: 100%; }
}

/* ============================================================================
   HOVER — one consistent behaviour across every interactive surface.
   A control lifts a little, its shadow deepens, a highlight sweeps across the
   face, and gold arrives on the accent. Nothing jumps; everything eases.
   ============================================================================ */

/* the sweep: a soft band of light that crosses a face on hover */
.btn, .tile, .card, .story, .door, .doc-row, .mega__doc-card {
  position: relative;
  overflow: hidden;
}
.fmark { position: relative; }
.btn::before,
.tile::before,
.card::before,
.story::before,
.door::before,
.doc-row::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .2s var(--ease);
}
.btn::before { content: none; }
.btn:hover::before,
.tile:hover::before,
.card:hover::before,
.story:hover::before,
.door:hover::before,
.doc-row:hover::before {
  opacity: 1;
  transform: translateX(380%);
}
.btn > *, .tile > *, .card > *, .story > *, .door > *, .doc-row > * { position: relative; z-index: 2; }

/* buttons lift; the gold and glass faces also warm slightly */
.btn { transition: transform var(--dur-hover) var(--ease),
                   box-shadow var(--dur-hover) var(--ease),
                   background-color var(--dur-hover) var(--ease),
                   color var(--dur-hover) var(--ease); }
.btn--cement:hover { transform: translateY(-2px); box-shadow: var(--cast-3); }
.btn--gold:hover   { transform: translateY(-2px); box-shadow: var(--cast-3); background: var(--c-gold-2); }
.btn--glass:hover  { transform: translateY(-2px); box-shadow: var(--cast-glass-3); }
.btn--lg:hover     { transform: translateY(-3px); box-shadow: var(--cast-4); }

/* specialty tiles: the specimen eases in, the sill lights gold */
.tile .media > picture > img,
.tile .media > img { transition: transform .6s var(--ease),
                                 filter var(--dur-hover) var(--ease); }
.tile:hover .media > picture > img,
.tile:hover .media > img { transform: scale(1.045); }
.tile:hover { transform: translateY(-3px); }
.tile { transition: transform var(--dur-hover) var(--ease),
                    background-color var(--dur-hover) var(--ease),
                    box-shadow var(--dur-hover) var(--ease); }
.tile::after { transition: background var(--dur-hover) var(--ease), height var(--dur-hover) var(--ease); }
.tile:hover::after { height: 5px; }

/* job and news cards */
.card:hover { transform: translateY(-3px); }
.card__title, .story__title { transition: color var(--dur-hover) var(--ease); }
.card:hover .card__title, .story:hover .story__title { color: var(--c-glass-2); }

/* audience doors: the plate rises off the glass, the glass brightens */
.door { transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.door__plate { transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.door:hover { box-shadow: var(--cast-4); }
.door:hover .door__plate { transform: translateY(-3px); box-shadow: var(--sheen-edge), var(--cast-4); }
.door:hover::after { opacity: .55; }
.door .inchip { transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.door:hover .inchip { transform: translateX(3px); }

/* document rows: the gold reveal grows from the left edge */
.doc-row { transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.doc-row__go { transition: color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.doc-row:hover .doc-row__go { transform: translateX(3px); }
.doc-row__icon { transition: transform var(--dur-hover) var(--ease); }
.doc-row:hover .doc-row__icon { transform: translateY(-1px) scale(1.04); }

/* arrows in links nudge along */
.tile__go, .story__go, .card__tag { transition: color var(--dur-hover) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .tile::before, .card::before,
  .story::before, .door::before, .doc-row::before { display: none; }
  .btn:hover, .tile:hover, .card:hover, .story:hover,
  .door:hover .door__plate { transform: none; }
  .tile:hover .media > picture > img,
  .tile:hover .media > img { transform: none; }
}


/* ============================================================================
   13. SECTION HEADS
   Two forms only. The default puts a title on the left and an action on the
   right; --stack sets the mark, the title and one line of lead in a column.
   ============================================================================ */
.sec-head--stack {
  position: relative;
  display: block;
  margin-bottom: var(--sp-8);
}
.sec-head--stack .lead { margin-top: var(--sp-4); }

.sec-head--center { text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--on-dark h2 { color: var(--c-white); }

/* The bold half of a heading takes the gold, the way DIAGNOSTICS does under
   the wordmark. Navy word, gold word — the mark's own split. */
.sec-head h2 .b8 { color: var(--c-gold-4); }
.sec-head--on-dark h2 .b8 { color: var(--c-gold-2); }

/* ============================================================================
   14. THE PATHOLOGISTS
   The carousel plate stands on a glazed navy ground, directly under the hero.
   Controls sit on the navy, so they are set for a dark surface.
   ============================================================================ */
#doctors .carousel { position: relative; }

/* The controls are not loose objects on the glass — they stand on their own
   rail: a glazed strip with a lit top arris, a hairline over it and the gold
   reveal under it, so the whole assembly reads as one instrument. */
#doctors .carousel__ctrls {
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 38%, rgba(0,12,34,.26) 100%);
  border-top: var(--line-hair) solid rgba(255,255,255,.26);
  border-bottom: var(--line-fin) solid var(--c-brand-gold);
  box-shadow: var(--bevel-glass), var(--cast-glass-2);
}

/* The dot strip sits in a groove milled into the rail — an inset shadow at
   the top edge, a lit line at the bottom. The opposite of a raised surface,
   drawn the same way. */
#doctors .dots {
  margin-left: var(--sp-5);
  padding: 9px var(--sp-4);
  background: rgba(0, 12, 34, .34);
  box-shadow: inset 0 2px 3px rgba(0, 8, 24, .55),
              inset 0 -1px 0 rgba(255,255,255,.12);
}
#doctors .dot { background: rgba(255,255,255,.30); box-shadow: 0 1px 0 rgba(0,8,24,.5); }
#doctors .dot:hover { background: var(--c-gold-2); }
#doctors .dot[aria-selected="true"] {
  background: var(--c-brand-gold);
  box-shadow: 0 0 0 1px rgba(88,64,30,.7), 0 0 10px rgba(186,151,101,.55);
}

#doctors .carousel__meta span { color: var(--c-cement-2); }

/* Play/Pause is a scribed control on glass — give it the same double edge. */
#doctors #pause {
  border-color: rgba(255,255,255,.5);
  box-shadow: var(--bevel-glass), 0 0 0 1px rgba(0,10,30,.35);
}

/* "See all 11 pathologists" was removed from the home page 2026-09-10 (it is
   the Pathologists bay in the main navigation). The rule stays for the roster
   page, which still carries the same control. */
.doctors__all { margin-top: var(--sp-8); text-align: center; }

/* ------------------------------------------------------- tighter, and up
   Client 2026-09-10: "move the pathologist image rotator up closer to the
   video and tighten it up." Four things, in the order you notice them:
   the block starts sooner under the film, the heading takes less depth, the
   plate carries less padding, and the control rail sits nearer the plate. */
.section--tight { padding-block: calc(var(--section-y) * .32) var(--section-y); }
.section--tight .sec-head--stack { margin-bottom: var(--sp-6); }
.section--tight .sec-head--stack .lead { margin-top: var(--sp-2); }
#doctors.section--tight .carousel__stage { padding: var(--sp-4) var(--sp-5); }
#doctors.section--tight .carousel__ctrls { margin-top: var(--sp-5); }

/* ============================================================================
   16. GROUNDS
   Two more, both drawn from the mark: a gold wash and the navy the doors and
   the band already stand on.
   ============================================================================ */
.wash-gold {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, #FFFDF9 0%, rgba(255,253,249,0) 62%),
    linear-gradient(180deg, #FBF7F0 0%, #F3EADB 52%, #F7F1E6 100%);
}
.wash-gold > *, .wash-gold > .wrap { position: relative; z-index: 2; }

/* The doors carry a real button now rather than a chip — they are the two
   biggest choices on the page and they should look like it. */
/* Same width, same baseline, whatever the label says. */
.door__cta { margin-top: auto; width: 100%; }
.door p { flex: 0 0 auto; }

/* Sections stay positioned — `.seam-rule` pins to their bottom edge. */
.hero, .section, .trust { position: relative; }


/* ============================================================================
   17. AVAILABLE JOBS
   Three cards, and they are targets — big, plainly labelled, one action each,
   with real air between them and inside them. Same cast cement the specialty
   bays and the trust panels are made of: stucco face, an edge read as a change
   in light, a fine three-stop cast, and a gold reveal along the sill that
   arrives on approach.
   ============================================================================ */
.jobs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}

.job {
  position: relative; display: flex; flex-direction: column;
  gap: var(--sp-4);
  min-height: 300px;
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  background-color: var(--c-white);
  background-image: var(--specular-band), var(--stucco);
  background-size: 200% 100%, auto, auto;
  background-position: -26% 0, center, center;
  background-repeat: no-repeat;
  box-shadow: var(--edge-fine), var(--cast-fine);
  transition: transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              background-position .7s var(--ease);
}
@media (hover: hover) {
  .job:hover {
    transform: translateY(-3px);
    background-position: 126% 0, center, center;
    box-shadow: var(--edge-fine), var(--cast-fine-lift);
  }
}
.job:active { transform: translateY(-1px); box-shadow: var(--edge-fine), var(--cast-fine); }

/* the gold reveal along the sill */
.job::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--c-cement-3);
  transition: background var(--dur-hover) var(--ease), height var(--dur-hover) var(--ease);
}
@media (hover: hover) {
  .job:hover::after { background: var(--c-brand-gold); height: 5px; }
}

.job__dept {
  align-self: flex-start;
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-4);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--c-gold-2);
  box-shadow: 0 3px 0 var(--c-cement-2);
}
.job__title {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-bold); color: var(--c-brand-navy);
  line-height: var(--lh-head); letter-spacing: var(--ls-head);
}
.job__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
/* a reveal between the two facts rather than a comma */
.job__loc { position: relative; padding-left: var(--sp-4); }
.job__loc::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 1em; transform: translateY(-50%);
  background: var(--c-cement-4);
}
.job__cta { align-self: stretch; margin-top: auto; }

.jobs__all { margin-top: var(--sp-8); text-align: center; }
.tiles__all { display: none; margin-top: var(--sp-6); text-align: center; }

/* ============================================================================
   15. Licensing register  (licensing.html)
   ---------------------------------------------------------------------------
   One row per licence: what it covers, its number, and the certificate. The
   number column is tabular and right-aligned so eight-digit CLIA numbers stack
   into a readable column instead of ragging against the labels.

   A row that carries a certificate takes the gold blade on hover, the same
   affordance .doc-row uses for the document library. A row with nothing to
   download carries no blade and no hover: there is nothing to click.
   ========================================================================= */
.lic-tally {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: var(--line-hair) solid rgba(255,255,255,.18);
}
.lic-tally span {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .04em; color: #C6D2E2;
}
.lic-tally b {
  font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-bold); color: var(--c-gold-1); line-height: 1;
}

.lic-sec + .lic-sec { margin-top: var(--sp-10); }
.lic-sec__h {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-bold); font-style: italic; color: var(--c-brand-navy);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
  margin-bottom: var(--sp-6);
}

.lic-grp + .lic-grp { margin-top: var(--sp-7); }
.lic-grp__head {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: var(--line-fin) solid var(--c-brand-navy);
}
.lic-grp__mark {
  flex: 0 0 120px; height: 48px; display: grid; place-items: center;
  background: var(--c-white); box-shadow: var(--edge-fine);
}
.lic-grp__mark img { max-height: 40px; max-width: 108px; width: auto; object-fit: contain; }
/* CMS publishes no CLIA mark, so the abbreviation is set as type. */
.lic-grp__mark--type {
  background: var(--c-glass-4); color: var(--c-white);
  font-weight: var(--fw-black); font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
}
.lic-grp__id h3 {
  font-family: var(--font-display); font-size: var(--fs-h4);
  font-weight: var(--fw-bold); color: var(--c-brand-navy);
  letter-spacing: var(--ls-head); line-height: var(--lh-head);
  margin-top: var(--sp-1);
}
.lic-grp__abbr { font-weight: var(--fw-reg); color: var(--c-muted); }
.lic-grp__note {
  margin-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--c-muted);
}

.lic-rows { display: grid; gap: var(--line-hair); background: var(--c-cement-3); }

.lic-row {
  display: grid; grid-template-columns: 1fr 190px 230px;
  align-items: center; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-white);
  border-left: var(--line-fin) solid var(--c-cement-3);
  transition: border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.lic-row--has-cert:hover { border-left-color: var(--c-gold-3); background: var(--c-cement-1); }
.lic-row__what {
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--c-ink); line-height: 1.35;
}
.lic-row__num {
  text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--c-glass-2); letter-spacing: .02em;
}
.lic-row__num--none { text-align: right; }

.lic-row__get {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--c-glass-3);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--c-cement-4);
}
.lic-row__get:hover { color: var(--c-gold-4); text-decoration-color: var(--c-gold-3); }
.lic-row__get-ico { flex: none; display: grid; place-items: center; }
.lic-row__note {
  text-align: right; font-size: var(--fs-2xs); color: var(--c-muted);
  line-height: 1.4;
}
.lic-row__note--wait { font-style: italic; }

@media (max-width: 900px) {
  .lic-row { grid-template-columns: 1fr 150px; gap: var(--sp-3) var(--sp-4); }
  .lic-row__get, .lic-row__note { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  .lic-row { grid-template-columns: 1fr; }
  .lic-row__num, .lic-row__num--none { text-align: left; }
  .lic-row__num--none { display: none; }
  .lic-grp__head { flex-wrap: wrap; gap: var(--sp-4); }
}

/* Roster filter at narrower widths: the label goes first, then on a phone the
   six areas wrap rather than scroll out of sight. */
@media (max-width: 1240px) { .filterbar__label { display: none; } }
@media (max-width: 1000px) { .filterbar { flex-wrap: wrap; overflow: visible; } }

/* ---------------------------------------------------------- motion control
   WCAG 2.2.2: the one control that stops every background film. Top right of
   the film's own hero, so it scrolls away with the film and covers nothing
   else. 44px target. */
.motion-toggle {
  position: absolute; right: 16px; top: 16px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  background: rgba(0, 36, 93, .88); color: var(--c-white);
  border: 1px solid rgba(255,255,255,.45); border-radius: 0;
  font: 600 14px/1 var(--font-body, inherit); letter-spacing: .02em;
  box-shadow: 0 6px 18px -6px rgba(16,25,42,.55); cursor: pointer;
}
.motion-toggle--float { position: fixed; top: auto; bottom: 16px; }
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.motion-toggle:hover { background: var(--c-brand-navy); }
.motion-toggle:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px var(--c-brand-navy); }
@media (max-width: 620px) {
  .motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .motion-toggle { padding: 0 14px; right: 12px; top: 12px; }
}