/* ==========================================================================
   Team bio pages
   ========================================================================== */

/* REGRESSION FIX 2026-09-04.
   The site header is `position: fixed` (as on the original), so it is out of
   flow and overlays whatever begins at y=0. Service pages clear it because
   their hero is 540px tall; bio pages did not, and the breadcrumb rendered at
   y=80 under a 133px header — 22.5 of 22.5px occluded, on 5 pages.

   The original solves this with `.doctor-copy { margin-top: 150px }`, stepping
   down at each breakpoint. Reproduced. Declared 991 -> 767 -> 479, descending. */
/* `.section.bio` renamed to `.doctor-copy` Round E ticket 5 — the section no
   longer carries `.section`, whose 5rem/2rem padding the original's
   `section.doctor-copy` does not have (site.css:4076 declares margin-top and
   nothing else). Reference: 1440 x 820 at (0, 150). */
.doctor-copy { margin-top: 150px; }
@media screen and (max-width: 991px) { .doctor-copy { margin-top: 130px; } }
@media screen and (max-width: 767px) { .doctor-copy { margin-top: 120px; } }
@media screen and (max-width: 479px) { .doctor-copy { margin-top: 100px; } }

/* .team-flex / .team-boxes — the /about-us team grid.
   3-up at 2rem, dropping to 2-up at 991 and 1-up at 767, as the original does. */
.team-flex {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 991px) { .team-flex { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) { .team-flex { grid-template-columns: 1fr; } }

.team-boxes {
  display: flex;
  flex-flow: column;
  width: 100%;
  background-color: #eee;
  border-radius: 1.5rem;
  overflow: clip;
  box-shadow: 0 2px 20px #0003;
}
.team-boxes > a { display: flex; flex-flow: column; text-decoration: none; color: inherit; }
.team-image { width: 100%; height: auto; display: block; }
.team-bio-wrapper { display: flex; flex-flow: column; gap: 1rem; padding: 20px; }
.member-name-2 { color: #000; text-align: left; margin: 10px 0 0; font-size: 24px; line-height: 28px; }
.member-role-2 { color: #000; font-size: 16px; font-weight: 400; line-height: 28px; }
.card-link { display: flex; flex-flow: row; justify-content: flex-start; align-items: center; gap: 10px; padding-top: 0; }
/* .image-64 — 30px, not the 96px the generic card rule was giving it. */
.card-link .image-64 { width: 30px; height: 30px; display: block; }
/* site.css:5533 — the "Learn more" label beside the arrow. RESTORED Round E
   ticket 7; the rebuild shipped the arrow alone. Reference at 1440: 99.5 x 22
   at x=92 (the arrow's 30 plus the row's 10px gap), 18px on a 22px line, #000,
   no underline. It is a <div> with a decorative href on the original, not an
   anchor — the whole card is the anchor — so it is reproduced as a <div>. */
.link-6 { color: #000; font-size: 18px; line-height: 22px; text-decoration: none; }

/* site.css:5470 / 5553 — the "TEAM" pill above "Meet Our Team". Reference at
   1440: 100 x 45 at (670, 2794.344) with .text-block-17 55.125 x 20 inside.
   `align-self: center` on the original comes from its flex `.section-top-holder`
   parent; this rebuild's heading block is `.section-heading`, a text-align:center
   BLOCK, so `margin-inline: auto` produces the same 670. The 1.5rem bottom
   margin stands in for `.section-top-holder`'s own 1.5rem gap — the original's
   pill declares no margin. */
.team-others .faq-heading-logo-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 45px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  border: 2px solid var(--earls-green);
  border-radius: 30px;
  text-align: center;
}
.team-others .text-block-17 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 18px;
  font-weight: 700;
}

@media screen and (max-width: 991px) { .member-name-2 { font-size: 22px; } }
@media screen and (max-width: 767px) { .member-name-2 { font-size: 20px; line-height: 26px; } }

/* ==========================================================================
   /about-us — the TWO doctor sections                              (AP-014)
   ==========================================================================
   The rebuild merged .our-story and .doctor-content-wrapper into one
   .doctor__grid, dropping the team portrait and taking the page to 29 visible
   images against the original's 30, which is why the rig refused to
   geometry-diff /about-us at any width. Split back; values transcribed from
   site.css and verified against the reference's boxes.
   -------------------------------------------------------------------------- */
.our-story { background-color: var(--white); }
.our-story-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 40px;
  place-items: stretch stretch;
  border-radius: 30px;
  margin: 60px 40px;
  padding: 40px;
  box-shadow: 0 2px 20px #0003;
}
/* Webflow emits these as per-node ID rules (#w-node-_63d20fe1…18508 /
   …18501), so they are easy to miss when reading the class stylesheet — and
   they matter: without `place-self: center` the image box stretched to the
   row height and the photo went from 412 x 274.7 to 412 x 405 at 1024. */
.our-story-image { place-self: center; }
.our-story-text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  justify-self: center;
}
/* .about-us-h2 — site.css:2833, `font-family: sweet sans bold` at weight 400.
   This comment used to justify writing 700 here on the grounds that the Bold is
   the same FILE as our "Sweet Sans Pro" 700. The file is the same; the family is
   not, and the 700 was doing two jobs — reaching the right face AND reporting a
   weight the original never declares.
   REWRITTEN 2026-09-11 (AP-058) to the original's own pair. `sweet sans bold` is
   a one-face family, so 400 resolves to the Bold face with no synthesis (the
   face is heavier than the request, so no faux bold is applied), exactly as on
   the original — and the computed font-weight now reads 400 to match, where the
   rebuild used to report 700. 1 element, the /about-us "Our Story" heading.
   Measured at 1440: 190.734 box / 190.720 advance / 1961.5 ink on the original;
   the rebuild's 700-on-Bold read the same glyphs at a different weight. */
.about-us-h2 {
  font-family: var(--font-sans-bold);
  font-weight: 400;
  font-size: 40px;
  line-height: 52px;
  margin: 0;
}
.paragraph-6 { color: var(--black); font-size: 16px; font-weight: 400; line-height: 28px; margin: 0; }
.image-49 { width: 100%; height: auto; object-fit: cover; object-position: 50% 50%; border-radius: 30px; }

/* .button-au MOVED to main.css — /emergency-dental uses `.button-au _2` and
   does not load team.css. */

.doctor-content-wrapper { display: flex; justify-content: space-between; gap: 2rem; }
.dr-ban-image-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 48%;
  padding: 40px;
  background-color: #e6ebd4;
  border-radius: 1.5rem;
}
.dr-ban-image { width: 100%; height: auto; border-radius: 1.5rem; }
.dr-ban-content-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 48%;
  gap: 1.5rem;
}
.dr-ban-content-wrapper h3 { margin: 0; }
.dor-supporting-text { font-size: 1.25rem; line-height: 150%; margin: 0; }

/* .section-top-title-wrapper / .section-top-title / .sparkles-icon MOVED to
   main.css — /emergency-dental carries `.section-top-title-wrapper _2` too. */

/* Declared 991 -> 767 -> 479, descending, as the original declares them. */
@media screen and (max-width: 991px) {
  .our-story-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 50px;
    margin-inline: 20px;
    padding-top: 40px;
  }
  .our-story-text { gap: 24px; }
  .about-us-h2 { font-size: 48px; }
  .doctor-content-wrapper { flex-flow: wrap; }
  .dr-ban-image-wrapper,
  .dr-ban-content-wrapper { width: 100%; }
}
@media screen and (max-width: 767px) {
  .our-story-wrapper { gap: 50px; }
  .about-us-h2 { font-size: 36px; }
  .paragraph-6 { font-size: 16px; line-height: 28px; }
}
@media screen and (max-width: 479px) {
  .our-story-wrapper { gap: 40px; margin: 0; padding: 40px 20px 20px; }
  /* the node rules swap over at <=479: the image stretches, the text centres */
  .our-story-image { place-self: stretch stretch; }
  .our-story-text { gap: 20px; justify-content: flex-start; align-items: center; place-self: center; }
  .about-us-h2 { text-align: center; font-size: 34px; line-height: 45px; }
  .paragraph-6 { text-align: center; font-size: 14px; line-height: 24px; }
}

/* .qualification-wrapper — Dr. Ban's credential rows on /about-us.
   A 25% label column with a green right border, and a 75% text column. */
.qualification-wrapper { display: flex; flex-flow: column; gap: 2rem; width: 100%; }
.qualificaion-flex { display: flex; }
.qualificaion-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 25%;
  height: 65px;
  border-right: 2px solid var(--earls-green);
}
.qualificion-text-wrapper { display: flex; flex-flow: column; gap: 0.5rem; width: 75%; padding-left: 20px; }
.education-text { color: var(--earls-green); font-size: 1.125rem; font-weight: 500; }
.university-name { font-size: 1.2rem; margin: 0; }

@media screen and (max-width: 479px) {
  .qualificaion-flex { flex-flow: wrap; }
  .qualificaion-left { width: 100%; height: 40px; border-right-style: none; border-bottom: 2px solid var(--earls-green); }
  .qualificion-text-wrapper { width: 100%; padding: 20px 0; }
}

/* `.breadcrumb--light` REMOVED 2026-09-09 (AP-017) with the bio-page breadcrumb
   it styled. AP-001 granted the breadcrumb on the 18 service pages only; on the
   5 bio/reception pages it was 100% occluded by the fixed header. */

/* ==========================================================================
   AP-035 — the bio content block                              Round E, ticket 5
   ==========================================================================
   REPLACES `.bio__grid` / `.bio__media` / `.bio__content`, which were a CSS grid
   of 0.9fr / 1.1fr with `align-items: center`, a full-bleed 1/1 photograph and a
   721.6-wide copy column at x=686.4 inside a 1376 `.container`.

   Transcribed from site.css. Reference boxes at 1440 / a 900 viewport:
     section.doctor-copy        1440 x 820 at (0, 150)
     .main-container-doctor     1280 x 820 at (80, 150)
     .doctor-wrapper            1200 x 700 at (120, 190)
     .doctor-pic-copy           521.016 x 640 at (120, 190)
     img.image-27-copy          364.703 x 448 at (223, 353)
     .doctor-info-text-copy     538.984 x 640 at (781.016, 190)
     .doctor-info-text-wrapper  538.984 x 382 at (781.016, 319)
     .team-heading-logo         85 x 40 at (781.016, 319)
     h2.heading-28              325.516 x 50 at (781.016, 369)
     p.paragraph-4              538.984 x 252 at (781.016, 429)
   and at 1024: wrapper 944 x 700 at (40, 190), photo column 443.266, image
   310.281 x 448 at x=143, copy column 360.734 at x=623.266.

   The captured y for `.team-heading-logo`, `img.image-27-copy` and
   `p.paragraph-4` is 8.089 / 28.915 / 48.218 HIGHER than the resting layout
   because the capture froze Webflow IX2 scroll-reveal transforms as inline
   styles the harness cannot neutralise. `h2.heading-28` has no transform and is
   the element to read. See the block comment in [bio].astro.

   Declared 991 -> 767 -> 479, descending, matching the original's source order.
   -------------------------------------------------------------------------- */

/* site.css:3549. The `::before/::after` clearfix is the original's `.w-container`
   (site.css:699-707) and is load-bearing here: without it `.doctor-wrapper`'s
   40px/80px margins collapse through the container and the section measures 700
   instead of 820. Same reason `.main-container` carries it in main.css. */
.main-container-doctor { width: 100%; max-width: 1280px; margin-inline: auto; }
.main-container-doctor::before,
.main-container-doctor::after { content: " "; display: table; grid-area: 1 / 1 / 2 / 2; }
.main-container-doctor::after { clear: both; }

/* site.css:2533. 521.016 and 538.984 are not declared: they are flex-shrink
   applied to a 580px basis and a 50% (600px) basis when 580 + 80 + 600 + 60
   has to fit 1200. */
.doctor-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 80px;
  height: 700px;
  margin: 40px 40px 80px;
  padding-bottom: 60px;
}
/* site.css:2485 */
.doctor-pic-copy { flex: 0 auto; width: 580px; height: auto; position: relative; }
/* site.css:2517. 70% of a 640-tall stretched column is the 448. The image is
   left INLINE, as the original leaves it. */
.image-27-copy {
  width: 70%;
  height: 70%;
  object-fit: cover;
  border-radius: 30px;
  margin-top: 163px;
  margin-left: 103px;
}
/* site.css:2505 */
.doctor-info-text-copy {
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
  gap: 0;
  width: 50%;
  height: 100%;
  margin-left: 60px;
}
/* site.css:2492 */
.doctor-info-text-wrapper {
  z-index: 100;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-self: flex-start;
  align-items: flex-start;
  gap: 10px;
  color: var(--black);
  padding-left: 0;
}
/* site.css:4047 — an 85 x 40 bordered pill. NOT the site `.eyebrow`, which is a
   filled block measuring 90.5 x 46.4. */
.team-heading-logo {
  display: flex;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  width: 85px;
  height: 40px;
  border: 2px solid var(--earls-green);
  border-radius: 30px;
  text-align: center;
}
/* `.text-block-14` MOVED to main.css with Round G ticket 7. It is the label
   inside FOUR different pills now — `.team-heading-logo` on the 5 bio pages and
   `.form-heading-logo` on `/`, /about-us and /same-day-booking — and anything
   rendered by more than one template belongs in the global stylesheet
   (css-traps §10). The declarations are unchanged; this was a byte-identical
   duplicate, and team.css loads after main.css, so the two were shadowing each
   other on the bio pages. */
/* site.css:2526 */
.paragraph-4 { margin-bottom: 20px; font-size: 16px; font-weight: 400; line-height: 28px; }

@media screen and (max-width: 991px) {
  .doctor-wrapper { gap: 40px; height: 620px; }
  .doctor-pic-copy { width: 100%; height: auto; position: relative; inset: 0% auto 30%; }
  .image-27-copy { width: 100%; height: 80%; object-fit: cover; margin-top: 80px; margin-left: 0; }
  .doctor-info-text-copy {
    width: 80%;
    margin-inline: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 0;
    position: static;
  }
  .doctor-info-text-wrapper {
    background-image: none;
    flex-flow: column;
    justify-content: space-around;
    align-self: center;
    align-items: flex-start;
    position: static;
  }
  .paragraph-4 { text-align: left; font-size: 16px; line-height: 20px; }
}
@media screen and (max-width: 767px) {
  .doctor-wrapper {
    gap: 45px;
    flex-flow: column;
    height: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-bottom: 0;
  }
  .doctor-info-text-copy { gap: 10px; justify-content: center; align-items: stretch; width: 90%; }
  .doctor-info-text-wrapper { justify-content: space-around; align-items: center; }
  .paragraph-4 { text-align: center; line-height: 20px; }
}
@media screen and (max-width: 479px) {
  .doctor-wrapper { gap: 0; margin: 0 20px 100px; }
  .doctor-pic-copy { inset: 0% 0% auto; }
  .doctor-info-text-copy { width: 95%; height: 40%; }
  .doctor-info-text-wrapper { padding: 10px 10px 0; }
  .team-heading-logo { align-self: center; }
  .paragraph-4 { font-size: 14px; line-height: 20px; }
}

/* AP-027 — the name/role split, made geometrically free.
   `.bio__heading` reproduces the original's `h2.heading-28` box exactly
   (site.css:2479 base, 7704 at <=991, 9133 at <=767, 10562 at <=479); the h1 and
   the role are INLINE inside it, so they form ONE line box, which is what the
   original's single string is. Weight, family and colour come from the original's
   global h2 rule (site.css:2158): sweet sans pro, 700, var(--black).

   Before: h1 at var(--fs-h2) = 48px on its own line plus a 22px/500 green block,
   two flex items, 57.594 + 16 gap + 30.797 = 104.391 tall against the original's
   50. After: one line, 50 tall, identical to a single-h2 control in this layout.

   `font: inherit` on the two children is doing real work — it is what stops the
   global `h1 { font-size: 4.2rem; color: var(--color-heading-alt) }` and
   `p { font-size: 1rem; line-height: 140% }` from reasserting themselves inside
   the inline run. */
.bio__heading {
  color: var(--black);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 40px;
  padding-bottom: 10px;
  margin: 0;
}
.bio__name,
.bio__role {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
/* The original's string is "Nabs - Treatment Coordinator" — space, hyphen, space.
   Emitted as generated content so the rendered text is identical while the role
   stays a separate element. */
.bio__role::before { content: " - "; }

.bio__content p { margin: 0; }
/* `.bio__content .btn` REMOVED with the "Book An Appointment" anchor it styled —
   `section.doctor-copy` contains ZERO anchors on all five captures (AP-027). */

@media screen and (max-width: 991px) {
  .bio__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* .heading-28 at <=991: text-align left, margin 0, padding-bottom 0, 22px/34px */
  .bio__heading { text-align: left; padding-bottom: 0; font-size: 22px; line-height: 34px; }
}
@media screen and (max-width: 767px) {
  .bio__heading { font-size: 22px; line-height: 32px; }
}
@media screen and (max-width: 479px) {
  .bio__heading { text-align: center; font-size: 20px; line-height: 30px; }
}

/* --------------------------------------------------------- other team --- */
/* `.team-others` is ALSO the section wrapper for the /about-us "Meet Our Team"
   band, so these two rules stay. Verified before deleting: /about-us renders
   `<section class="section team-others">` and takes both the tint background and
   the centred heading from here. (Its list is `.team-flex` / `.team-boxes`, not
   the bio grid below.)
   AP-028 2026-09-09: `.team-others { background: var(--tint-blue) }` REMOVED.
   It painted rgb(246,248,251) across 1440 x 1591.5 at y=2636.1 on /about-us and
   the original paints nothing there. Enumerating every block wider than 900px
   that paints on the captured /about-us at 1440 returns exactly five:
   body.body #f8f9fa (1440 x 6132 at y=112), div.navbar-wrapper-about-us #fff
   (1200 x 93 at y=20), section.our-story #fff (1440 x 593.3 at y=1300.5),
   footer.footer (the testi.png background image, 1440 x 803) and div.divider
   #797979 (1300 x 1). The body colour shows through the team band.
   The centred heading rule stays — that one is real. */
.team-others .section-heading { text-align: center; }

/* The bio-page grid — `.team-others__list`, `__name`, `__role` and their two
   breakpoints — REMOVED 2026-09-09 (AP-019) with the "Meet the rest of the team"
   markup it styled. Nothing in the build references those selectors now, and
   dead CSS is something the rig structurally cannot see. */