/* =========================================================================
   DOCTOR TEMPLATE (template-doctor.php)

   Generic across every doctor bio page. The live pattern is the three
   bands under "THE DOCTOR PAGE — the current pattern" below: profile,
   bio, peer link. Everything else in this file is an earlier pattern kept
   for markup that hasn't been moved over — see the note on each.

   Classes are prefixed docpg- (not doc-) on purpose — folds.css already
   owns .doc-* for the homepage's doctor-preview cards, and this page loads
   folds.css too, so reusing that prefix would collide. Every rule here is
   presentation only — the words it styles are copied verbatim from each
   doctor's live bio page, not invented by this stylesheet.
   ========================================================================= */

/* -------------------------------------------------------------------------
   PLAIN CONTENT — superseded, see "the current pattern" below

   A photo, a heading, the doctor's name, "Doctor", and the paragraphs from
   their own bio in a single 72ch column. It replaced a build that had split
   that same bio across a hero lead, a row of credential pills, a facts list
   and an "about" panel — repeating the opening sentence, the credentials
   and the service areas on the one page, and dissolving the first paragraph
   into the facts list so its actual wording no longer appeared anywhere.
   Reducing to one column fixed the repetition and lost nothing, but it also
   left the page with no hierarchy, no call to action above the fold and no
   way onward.

   The current pattern keeps this version's discipline — every sentence
   appearing exactly once, in its own words — and puts the structure back
   around it rather than inside it.

   These rules, and the .docpg-hero / -trail / -specialties / -philosophy /
   -about rules further down, are left in place rather than deleted: they
   are what a doctor page still carrying either older markup would need, and
   removing them would break such a page silently rather than loudly.
   ------------------------------------------------------------------------- */
.docpg-simple {
  /* --fold alone bottoms out at 5rem (80px) on a phone while the fixed
     header measures 73px and the h1's line box starts above its own box
     top — the title rendered into the header. Same fix, same reason, as
     .page-fold in base.css. */
  padding-top: calc(var(--fold) + 72px);
  padding-bottom: var(--fold);
}
@media (min-width: 1025px) {
  .docpg-simple { padding-top: var(--fold); }
}

.docpg-simple-wrap { max-width: 72ch; }

.docpg-simple-photo {
  margin: 0 0 var(--sp-4);
  width: min(260px, 60%);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-10);
}
.docpg-simple-photo img { display: block; width: 100%; height: auto; }

.docpg-simple-name {
  margin-top: var(--sp-3);
  font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}
.docpg-simple-role {
  margin-top: 0.2rem;
  font-size: var(--fs-sm); color: var(--ink-quiet);
}

/* The name, once, on a narrow screen.
   -------------------------------------------------------------------------
   The h1 and the h2 under it say the same thing — "Meet Dr. Shaker"
   directly above "Dr. Nadeen Shaker" — and stacked full-width with the
   role beneath both, that reads as the name printed twice. On the wide
   build the two sit in a composition that carries the repetition; here
   they are simply two lines in a column.

   The h2 is the one that goes, not the h1: the h1 is the page's heading
   and what it is ranked on.

   Hidden the .sr-only way rather than with display:none, for two reasons.
   This <h2> is the only place the doctor's FULL name is marked up as a
   heading — "Meet Dr. Shaker" gives the surname only — so it has to stay
   in the document for search engines and for anyone navigating by
   headings. And nothing is lost on screen either way, because every bio
   below opens with the full name in its first sentence ("Dr. Nadeen
   Shaker is a dedicated..." / "Dr. Rana Lotfi earned her dental
   degree..."), so the reader still meets it immediately.

   One rule covers both doctors: the pages share this template and these
   class names, and neither hard-codes a name in CSS.

   1024px, not 640px, is this file's own desktop boundary — see the
   @media (min-width: 1025px) blocks above and below. The layout is the
   same single column at every width under it, so the repetition reads the
   same way on a tablet as on a phone. */
@media (max-width: 1024px) {
  .docpg-simple-name {
    position: absolute; width: 1px; height: 1px;
    margin: 0; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  /* the role sat 0.2rem under the name; with the name out of the flow it
     now follows the h1 directly and needs the space the name was giving it */
  .docpg-simple-role { margin-top: var(--sp-2); }
}

.docpg-simple-bio { margin-top: var(--sp-4); }
.docpg-simple-bio p {
  font-size: var(--fs-body); line-height: 1.7; color: var(--ink-mid);
}
.docpg-simple-bio p + p { margin-top: var(--sp-3); }

/* -------------------------------------------------------------------------
   THE DOCTOR PAGE — the current pattern

   Three bands, in this order: a profile band (breadcrumb, portrait, the
   name and the role, and the two things a reader on a bio page actually
   wants next — book, or phone), the bio set as one readable column, and a
   single card across to the other dentist.

   Not one word is added to, cut from or moved between the two bios. This
   is layout around the exact sentences the plain version set in a 72ch
   column; what it adds is hierarchy (a portrait that reads as a portrait
   rather than a 260px thumbnail, a first paragraph that reads as a
   standfirst), a way onward that isn't the browser's back button, and a
   call to action that is visible without scrolling past the whole bio.

   The two pages deliberately do NOT render the same. Dr. Shaker's profile
   band runs portrait-left; Dr. Lotfi's carries --mirror and runs
   portrait-right; each page's peer card points at the other doctor, so
   the one block that could have been boilerplate is the block that
   differs most. Same system, neither page a copy of the other.
   ------------------------------------------------------------------------- */

/* --- band 1: profile ---------------------------------------------------- */

/* Same header-clearance arithmetic as .docpg-simple above and .page-fold in
   base.css: --fold bottoms out at 80px on a phone against a 73px fixed
   header, which is not enough for a line box that starts above its own box
   top. */
.docpg-profile {
  padding-top: calc(var(--fold) + 72px);
  padding-bottom: calc(var(--fold) * 0.7);
}
@media (min-width: 1025px) {
  .docpg-profile { padding-top: var(--fold); }
}

/* Narrower than --page on purpose, and the same trick .hdr .shell uses in
   folds.css for the opposite reason. This band is a portrait beside four
   short lines; given the full 1360px the copy column ran to 800px to hold
   400px of content, and the composition read as a photo with a caption
   stranded somewhere off to its right. Capped, the two columns are a pair.
   The bio panel and the peer card below set their own measures, so the band
   widths step down the page rather than snapping between two extremes. */
.docpg-profile .shell { max-width: calc(1040px + var(--gutter) * 2); }

.docpg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.45rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}
.docpg-crumbs a { color: var(--ink-mid); transition: color var(--t-1) var(--ease); }
.docpg-crumbs a:hover { color: var(--accent-text); }
.docpg-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
/* graphic weight only — the separator is not read out and must not compete
   with the two links it sits between */
.docpg-crumbs-sep { color: var(--n-40); }

.docpg-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.4vw, 4.5rem);
  align-items: center;
}
/* Dr. Lotfi's page. Grid order rather than direction:rtl — the copy column
   keeps its own left-to-right flow, only the two tracks swap. */
.docpg-profile--mirror .docpg-profile-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
}
.docpg-profile--mirror .docpg-profile-photo { order: 2; }

.docpg-profile-photo {
  position: relative;
  margin: 0;
  /* the tint panel below is z-index:0 against the frame's 1, so this has to
     be its own stacking context or it would land behind the section */
  isolation: isolate;
}
/* The offset tint panel behind the portrait. Sage tinted, so the brand green
   is doing what it is allowed to do here — a shape, never a surface under
   type. Mirrored with the grid so it always falls away from the copy. */
.docpg-profile-photo::before {
  content: '';
  position: absolute; z-index: 0;
  left: -1.25rem; right: 1.25rem; top: 1.75rem; bottom: -1.75rem;
  border-radius: var(--r-md);
  background: var(--tint-open);
}
.docpg-profile--mirror .docpg-profile-photo::before { left: 1.25rem; right: -1.25rem; }

.docpg-profile-frame {
  position: relative; z-index: 1;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n-10);          /* the plate the portraits were keyed onto */
  box-shadow: inset 0 0 0 var(--hair) var(--rule),
              0 34px 70px -44px rgba(var(--deep-rgb), 0.5);
}
/* 4:5 out of a square source crops 12.5% off each side and nothing off the
   top or bottom, so no crop of this frame can cut a head and no focal point
   needs declaring — the same reasoning as .doc-frame in folds.css. */
.docpg-profile-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .docpg-profile-photo:hover .docpg-profile-frame img { transform: scale(1.04); }
}
/* Dr. Lotfi was photographed further back than Dr. Shaker — same 900x900
   plate, head about a quarter smaller in frame — so at matched frame sizes
   the pair reads as unmatched. Her image box is grown past the frame
   instead, mostly downward so the head stays put. Identical treatment, and
   identical numbers, to .doc--lotfi on the homepage; kept a modifier rather
   than a per-page rule so a future portrait shot the same way can opt in. */
.docpg-profile--zoom .docpg-profile-frame img {
  inset: -3% auto auto -11%;
  width: 122%; height: 122%; max-width: none;
}

/* The sage tick sits ON the frame's lower edge, not under it — same device,
   same reason, as .doc-rule inside the homepage cards. */
.docpg-profile-rule {
  position: absolute; z-index: 2;
  left: 0; bottom: 0;
  height: 4px; width: 58%;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: linear-gradient(to right, var(--graphic), rgba(var(--sage-rgb), 0));
}

.docpg-profile-name {
  margin-top: var(--sp-3);
  font-size: var(--fs-xl); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}
/* --leaf on --tint-open measures 5.71:1 — the one green pairing small
   uppercase text is allowed to use (see tokens.css). */
.docpg-profile-role {
  display: inline-flex; align-items: center;
  margin-top: var(--sp-2);
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--tint-open);
  color: var(--accent-text);
  font-size: var(--fs-nano); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
}

/* The standfirst, moved up from the bio band. The first fold used to run a
   name, a badge and two buttons against a full-height portrait, which left
   most of the copy column empty while the paragraph that actually
   introduces the dentist sat a fold below it. Set a step under .lead —
   this is a column beside a picture, not a page-width standfirst — and
   capped short of the column's own width so the rag stays even against the
   portrait's straight edge. */
.docpg-profile-lead {
  margin-top: var(--sp-3);
  max-width: 54ch;
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink-mid);
}

.docpg-profile-act {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.7rem, 1.5vw, 1.1rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* --- band 2: the bio ---------------------------------------------------- */

.docpg-bio.fold { padding-block: calc(var(--fold) * 0.72); }

.docpg-bio-wrap {
  max-width: 72ch;
  margin-inline: auto;
  padding: clamp(1.75rem, 3.6vw, 3.25rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 26px 60px -44px rgba(var(--deep-rgb), 0.42),
              inset 0 0 0 var(--hair) var(--rule-quiet);
}

/* The standfirst. Sized and inked up from the paragraphs under it, with the
   same sage tick .eyebrow carries, so the page's two label devices are one
   device. Text stays flush left — an indented pull-quote rule here would
   have put a ragged edge down the one column the page exists to set. */
.docpg-bio-lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  font-weight: 400;
  color: var(--ink);
}
.docpg-bio-lead::before {
  content: '';
  display: block;
  width: 44px; height: 3px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--graphic);
}

/* .docpg-bio-lead carried the card's sage tick and has moved to the fold
   above, so the tick moves to whatever leads the card now. Scoped to
   :first-child, which keeps it correct on a page that still opens with a
   standfirst. */
.docpg-bio-wrap > .docpg-bio-rest:first-child::before {
  content: '';
  display: block;
  width: 44px; height: 3px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--graphic);
}

.docpg-bio-rest { margin-top: var(--sp-4); }
.docpg-bio-wrap > .docpg-bio-rest:first-child { margin-top: 0; }
.docpg-bio-rest p {
  font-size: var(--fs-body); line-height: 1.78; color: var(--ink-mid);
}
.docpg-bio-rest p + p { margin-top: var(--sp-3); }

/* --- band 3: the other dentist ------------------------------------------ */

/* Bottom spacing is left to .docpg-cta below, which already owns the gap
   between this page's content and the shared closing folds. */
.docpg-peer { padding-top: calc(var(--fold) * 0.6); }

.docpg-peer-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 72ch;
  margin-inline: auto;
  padding: clamp(0.8rem, 1.5vw, 1.1rem);
  padding-right: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 var(--hair) var(--rule),
              0 22px 48px -40px rgba(var(--deep-rgb), 0.5);
  transition: box-shadow var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
@media (hover: hover) {
  .docpg-peer-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 var(--hair) var(--deep),
                0 28px 54px -34px rgba(var(--deep-rgb), 0.55);
  }
  .docpg-peer-card:hover .docpg-peer-go { transform: translateX(3px); }
}

.docpg-peer-photo {
  position: relative;
  display: block;
  width: 84px; height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--n-10);
  flex: none;
}
.docpg-peer-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
/* the same framing correction as .docpg-profile--zoom, at thumbnail size */
.docpg-peer-photo--zoom img {
  inset: -4% auto auto -11%;
  width: 122%; height: 122%; max-width: none;
}

.docpg-peer-name {
  font-size: var(--fs-md); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}

.docpg-peer-go {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sage); color: var(--deep);   /* 8.03:1 — a glyph, not type */
  flex: none;
  transition: transform var(--t-1) var(--ease);
}
.docpg-peer-go svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   HERO — older markup only; see the note above
   ------------------------------------------------------------------------- */
.docpg-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-6); }

.docpg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}

.docpg-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 500px;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.docpg-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .docpg-hero-shot:hover img { transform: scale(1.05); }
}

/* The count-up experience badge, floated over the photo's corner. */
.docpg-hero-stat {
  position: absolute; left: -1.1rem; bottom: 1.6rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--deep); color: var(--on-deep);
  box-shadow: 0 22px 44px -22px rgba(var(--deep-rgb), 0.6);
  text-align: center;
}
.docpg-hero-stat b {
  font-size: var(--fs-d1); font-weight: 800; line-height: 1;
  letter-spacing: var(--track-tight);
}
.docpg-hero-stat span {
  margin-top: 0.2rem;
  font-size: var(--fs-nano); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-deep-mid);
}

.docpg-hero-copy .lead { margin-top: var(--sp-3); }

.docpg-hero-creds {
  display: flex; flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: var(--sp-4);
}
.docpg-cred {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  background: var(--surface-quiet);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.docpg-cred svg { width: 16px; height: 16px; flex: none; color: var(--leaf); }

.docpg-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}

/* -------------------------------------------------------------------------
   ABOUT — the compact replacement for the credential trail + specialties
   grid + philosophy panel below. Those three were each their own
   full-width .fold section (padding-block: calc(var(--fold) / 2) apiece),
   which meant three large scroll stretches to restate what is, for one
   dentist, a handful of facts and four short paragraphs. This is all of
   it in one panel: a scannable facts row, then the full bio prose (every
   original sentence, none of it repeated), then the service-area chips.
   Still used by any doctor page whose content hasn't been switched over
   to this pattern yet — .docpg-trail/-specialties/-philosophy below stay
   in the stylesheet for that reason, not because both patterns are
   meant to coexist on the same page.
   ------------------------------------------------------------------------- */
.docpg-about.fold { padding-block: calc(var(--fold) / 2); }

.docpg-about-panel {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(1.75rem, 3.2vw, 2.6rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
}

.docpg-facts {
  display: grid;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: var(--hair) solid var(--rule-quiet);
}
.docpg-fact dt {
  font-size: var(--fs-nano); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-quiet);
}
.docpg-fact dd {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}

.docpg-about-bio p {
  font-size: var(--fs-body); line-height: 1.7; color: var(--ink-mid);
}
.docpg-about-bio p + p { margin-top: var(--sp-3); }

.docpg-about-areas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule-quiet);
}
.docpg-area-label {
  font-size: var(--fs-nano); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: 0.2rem;
}

/* -------------------------------------------------------------------------
   CREDENTIAL TRAIL — the degree/board-exam/memberships sentence broken
   into four connected steps, revealed left-to-right as it scrolls in.
   ------------------------------------------------------------------------- */
.docpg-trail.fold { padding-block: calc(var(--fold) / 2); }

.docpg-trail-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: var(--sp-5);
}
/* The connecting line sits behind the nodes, drawn from 0 width up to
   full as the rail scrolls into view (see doctor.js) — a plain CSS
   transition, no animation library needed. */
.docpg-trail-line {
  position: absolute; top: 20px; left: calc(12.5% - 1px); right: calc(12.5% - 1px);
  height: 2px;
  background: var(--rule);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--t-4) var(--ease);
}
.docpg-trail.is-inview .docpg-trail-line { transform: scaleX(1); }

/* Not every doctor's bio yields four real milestones — this variant
   keeps a 2-step trail (e.g. two degrees, no board-exam/membership
   sentence to draw from) centred and proportioned instead of stretching
   two nodes across a 4-column grid built for four. */
.docpg-trail-rail--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 520px;
  margin-inline: auto;
}
.docpg-trail-rail--2 .docpg-trail-line { left: 25%; right: 25%; }

.docpg-trail-step { position: relative; text-align: center; }
.docpg-trail-node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px; margin: 0 auto;
  border-radius: 50%;
  background: var(--white); color: var(--leaf);
  box-shadow: 0 0 0 3px var(--white), inset 0 0 0 var(--hair) var(--rule);
}
.docpg-trail-node svg { width: 18px; height: 18px; }
.docpg-trail-step h3 {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: var(--track-tight); color: var(--ink);
}
.docpg-trail-step p { margin-top: 0.3rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-mid); }

/* -------------------------------------------------------------------------
   SPECIALTIES
   ------------------------------------------------------------------------- */
.docpg-specialties.fold { padding-block: calc(var(--fold) / 2); }
.docpg-specialties-lead { margin-top: 0; max-width: 62ch; }

.docpg-specialties-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: var(--sp-5);
}
.docpg-specialty {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: 0 22px 44px -34px rgba(var(--deep-rgb), 0.3),
              inset 0 0 0 var(--hair) var(--rule-quiet);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.docpg-specialty-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tint-open); color: var(--leaf);
  transition: transform var(--t-2) var(--ease);
}
.docpg-specialty-icon svg { width: 22px; height: 22px; }
.docpg-specialty h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-md); font-weight: 700;
  letter-spacing: var(--track-tight);
}
@media (hover: hover) {
  .docpg-specialty:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 54px -30px rgba(var(--deep-rgb), 0.38),
                inset 0 0 0 var(--hair) var(--rule-quiet);
  }
  .docpg-specialty:hover .docpg-specialty-icon { transform: scale(1.1) rotate(-4deg); }
}

/* -------------------------------------------------------------------------
   PHILOSOPHY / CLOSING PANEL
   ------------------------------------------------------------------------- */
.docpg-philosophy.fold { padding-block: calc(var(--fold) / 2); }

.docpg-philosophy-panel {
  padding: clamp(1.75rem, 3.2vw, 2.6rem);
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.45);
}
.docpg-philosophy-panel p {
  font-size: var(--fs-lead); line-height: 1.7; color: var(--on-deep-mid);
  max-width: 68ch;
}

.docpg-areas {
  display: flex; flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: var(--sp-4);
}
.docpg-area {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(var(--white-rgb), 0.1);
  font-size: var(--fs-sm); font-weight: 600; color: var(--on-deep);
}
.docpg-area svg { width: 15px; height: 15px; flex: none; color: var(--on-deep-key); }

/* -------------------------------------------------------------------------
   CLOSING CTA — this page's content above is pasted the_content(), not a
   folds.css section, so it carries no bottom spacing of its own; give the
   CTA its own top space instead of butting straight up against it.
   ------------------------------------------------------------------------- */
.docpg-cta { padding-top: 80px; }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* One column, portrait first on BOTH pages — the mirror is a wide-screen
     device only; stacked, an order swap would just push Dr. Lotfi's name
     above her photo and her page would read differently from Dr. Shaker's
     for no reason a reader could see. */
  /* the --mirror selector below is one class more specific than
     .docpg-profile-grid, so it has to be named here too or Dr. Lotfi's page
     keeps its two columns all the way down to a phone */
  .docpg-profile-grid,
  .docpg-profile--mirror .docpg-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .docpg-profile--mirror .docpg-profile-photo { order: 0; }
  .docpg-profile-photo { max-width: 420px; }
  .docpg-profile-photo::before,
  .docpg-profile--mirror .docpg-profile-photo::before {
    left: -0.85rem; right: 0.85rem; top: 1.15rem; bottom: -1.15rem;
  }

  .docpg-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .docpg-hero-shot { order: -1; height: auto; aspect-ratio: 16 / 9; }
  .docpg-hero-stat { left: 1rem; bottom: -1.5rem; }
  .docpg-trail-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .docpg-trail-line { display: none; }
  .docpg-specialties-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Mobile-only unification: every reference page's CTA lands on the same
     top space here, though each keeps its own desktop value above. */
  .docpg-cta { padding-top: var(--sp-5); }

  .docpg-profile-photo { max-width: 320px; }
  /* the pill's disc is 44px and the name wants the rest of a 320px screen;
     the portrait gives up the difference */
  .docpg-peer-photo { width: 64px; height: 64px; }
  .docpg-peer-card { gap: 0.85rem; }
  .docpg-peer-name { font-size: var(--fs-sm); }
  .docpg-profile-act .btn i { display: none; }
  /* The portrait already fills a phone screen before the copy starts, so the
     standfirst is reading matter here rather than something filling a gap —
     no reason to hold it to the desktop column's measure. */
  .docpg-profile-lead { max-width: none; }
  .docpg-hero.fold { padding-bottom: var(--sp-5); }
  .docpg-hero-shot { height: auto; aspect-ratio: 4 / 3; }
  .docpg-hero-stat { width: 88px; height: 88px; }
  .docpg-hero-actions .btn i { display: none; }
  .docpg-trail-rail { grid-template-columns: minmax(0, 1fr); }
}