/* ============================================================================
   INNER PAGES — about-us, our-office, services, contact-us, CDCP, blog,
   thank-you, 404
   ========================================================================== */

/* ---------------------------------------------------------- PAGE HEROES -- */
/* Inner-page hero. The original does NOT use one generic hero — each page has
   its own class with its own explicit `height` in vh, and those heights change
   at 1280 / 1440 / 1920 / 991 / 767 / 479. (Webflow does emit min-width
   breakpoints here, contrary to the note that used to be in pages.css.)
   A single `min-height: 46vh` rendered every inner hero at a flat 414px against
   originals ranging 450-540px. Content is bottom-aligned, not centred. */
.page-hero {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 9;
  background-color: var(--primary-color);
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
}
/* `.page-hero-title` removed — no markup references it any more. Every inner
   hero now uses the original's `h1.hero-title`, which is what carries the dark
   #222533f2 band. That band is the whole reason the original needs no overlay
   on the photograph. */

/* ⚠️ EVERY ONE OF THESE WAS WRONG. The rebuild picked a plausible-looking
   clinic photo for each inner hero and darkened it with an invented
   `linear-gradient(rgba(34,37,51,.82), rgba(34,37,51,.72))` overlay. The
   original uses SPECIFIC images and, with one exception, NO overlay at all —
   the heading is made legible by the dark band on `.hero-title`, not by
   dimming the whole photograph. Caught by eye: /about-us was showing a
   reception desk where the live site shows the six-person team photo.

   Only `.dental-cdp-hero` has an overlay, and it is a flat #22253399 on both
   stops rather than a gradient. `background-position: 50% -20%` on the about
   and services heroes is theirs too — it crops from higher up the image. */
.dental-about-hero      { background-image: url("/images/dental-cover.avif");              background-position: 50% -20%; }
.dental-service-hero    { background-image: url("/images/blog-2025-08-12-193051.webp");    background-position: 50% -20%; }
/* DELIBERATE DEVIATION, requested. The original anchors this at `50% 0`, which
   at hero proportions crops to the ceiling light-arm and the top of the window
   — no chair in frame. 75% pulls the crop down so the dental chair is the
   subject. This is the one hero whose framing intentionally differs from the
   original; every other value on this page is transcribed. */
.dental-our-office-hero { background-image: url("/images/clinic-bed.avif");                background-position: 50% 65%; }
.dental-contact-hero    { background-image: url("/images/img-8426.webp");                  background-position: 50% 0; }
.dental-cdp-hero {
  background-image: linear-gradient(#22253399, #22253399), url("/images/img-8426.webp");
  background-position: 0 0, 50% 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
/* The blog hero TILES a screenshot at natural size — `repeat`, `auto`, fixed —
   rather than covering with a photo. */
.blog-main-hero {
  background-image: url("/images/blog-2025-08-12-193547.webp");
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
}

/* Per-hero heights, transcribed from the original. Order matters: min-width
   blocks ascend, then max-width blocks descend, so the narrowest rule wins at
   small sizes — the same order Webflow emits. */
.dental-about-hero      { height: 80vh; margin-top: 46px; }
.dental-our-office-hero { height: 70vh; }
.dental-contact-hero    { height: 70vh; }
.dental-cdp-hero        { height: 67vh; }
.dental-service-hero    { height: 72vh; }
.blog-main-hero         { height: 50vh; padding-top: 142px; justify-content: center; }

@media screen and (min-width: 1280px) {
  .dental-about-hero { height: 70vh; margin-top: 0; padding-top: 0; }
}
@media screen and (min-width: 1440px) {
  .dental-about-hero      { height: 80vh; margin-top: 1px; }
  .dental-our-office-hero { height: 60vh; }
  .dental-contact-hero    { height: 50vh; }
  .dental-cdp-hero        { height: 55vh; }
  .dental-service-hero    { height: 57vh; }
  /* ⚠️ THE POSITION CHANGES HERE, and only the heights had been transcribed.
     The original writes `background-position: 0 0, 50% 0` — two-layer syntax
     left over from when these carried a gradient. With a SINGLE background
     layer the browser applies the first value and ignores the rest, so the
     effective position is `0 0`: top-left, not the base `50% -20%`.

     That is what most desktops actually see, and it is why /services looked
     differently framed from the live site. Verified against the live page,
     which computes `background-position: 0px 0px` at 1920. */
  .dental-about-hero,
  .dental-service-hero,
  .dental-contact-hero,
  .blog-main-hero { background-position: 0 0; }
}
@media screen and (min-width: 1920px) {
  .dental-about-hero   { height: 80vh; margin-top: -5px; padding-top: 0; }
  .dental-contact-hero { height: 82vh; }
  /* At 1920+ the blog hero swaps the tiled screenshot for a real photo,
     bottom-anchored and covering. */
  .blog-main-hero {
    background-image: url("/images/fletcher-dental-4.jpg");
    background-position: 50% 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 991px) {
  .dental-about-hero      { height: 78vh; }
  .dental-our-office-hero { height: 60vh; }
  .dental-contact-hero    { height: 78vh; }
  .dental-cdp-hero        { height: 78vh; }
  .dental-service-hero    { height: 78vh; }
  .blog-main-hero         { height: 65vh; }
  /* Same top-left reset as 1440+ (see the note there). */
  .dental-about-hero,
  .dental-service-hero,
  .dental-contact-hero,
  .blog-main-hero { background-position: 0 0; }
}
@media screen and (max-width: 767px) {
  .dental-about-hero,
  .dental-our-office-hero { height: 60vh; padding-top: 42px; }
  .dental-contact-hero    { height: 60vh; padding-top: 42px; }
  .dental-cdp-hero        { height: 60vh; padding-top: 42px; }
  .dental-service-hero    { height: 60vh; padding-top: 42px; }
  .blog-main-hero         { height: 60vh; padding-top: 0; }
}
@media screen and (max-width: 479px) {
  .dental-about-hero   { height: 25vh; margin-top: 67px; }
  .dental-our-office-hero,
  .dental-contact-hero { height: 49vh; }
  .dental-service-hero { height: 25vh; margin-top: 67px; }
  .blog-main-hero      { height: 49vh; }
  .dental-cdp-hero     { height: 49vh; }
  .dental-about-hero,
  .dental-service-hero,
  .dental-contact-hero,
  .blog-main-hero { background-position: 0 0; }
}

/* ------------------------------------------------------------- ABOUT US -- */
/* REMOVED — `.quality-dental-content` was an invented single-column container
   used only on about-us, where the original has the same two-column
   `.quality-main-wrapper` (copy + photo) that every service page uses. No
   markup references it any more. */

/* REMOVED — both were inventions propping up wrong markup, and both are dead
   now that about-us uses `.staff-and-dentists` / `.team-wrapper` like the
   original and the service template:
     .staff-and-dentists-section h2 { max-width: 58rem; margin-inline: auto }
       The original constrains this text with the banner's 5rem side padding,
       not a max-width. The 58rem cap is where the diff's 176px side margins
       came from.
     .team-heading { margin-top: 2rem }
       `.team-wrapper` carries no rule at all on the original; the spacing comes
       from `.wrapper`'s gap. */

/* Matched to the original. Two grid variants exist there: `.dentist-grid` is a
   3-column grid (the staff list) and `.dentist-grid._2` is a centred flex row
   (the two doctors, used on /about-us and on every service page). The rebuild
   had 2 columns for doctors and 4 for staff.
   Card chrome follows the original too: .75rem radius, `0 2px 5px #0003`,
   a -10px hover lift, and an image that scales to 1.1 on hover. The original
   sets no object-fit on the photo — the previous `cover` + `object-position`
   cropped faces differently from the original's `fill`. */
.dentist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  place-items: center;
}
.dentist-grid--doctors { display: flex; justify-content: center; align-items: center; gap: 2rem; }
/* The original wraps each doctor card in `.dental-item { width: 35% }` — 448px
   at 1280. Without it the bio paragraph blows out the card's max-content width
   and flex-shrink spreads the two cards to fill the row (623px each). */
.dentist-grid--doctors > .dentist-card { width: 35%; }

.dentist-card {
  display: flex;
  flex-direction: column;
  border-radius: .75rem;
  background: var(--white);
  box-shadow: 0 2px 5px #0003;
  overflow: clip;
  transition: all .4s;
}
.dentist-card:hover { transform: translate(0, -10px); }
.dentist-image-wrapper { overflow: clip; }
.dentist-image { width: 100%; transition: all .4s; }
.dentist-image:hover { transform: scale(1.1); }
/* Staff card — a different component from the doctor card. Square photo with
   the name and role in a pill overlaid on its lower edge, matching the
   original's `.team-box` / `.team-overlay`. Stacking the text underneath (as
   the doctor cards do) made every staff card 135px taller. */
.team-box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  border-radius: .75rem;
  overflow: clip;
}
.team-images { width: 100%; }
.team-overlay {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  position: absolute;
  bottom: 10px;
  width: 90%;
  padding: 16px 20px;
  background-color: var(--primary-color);
  border-radius: .75rem;
}
.team-overlay .white { color: var(--white); }
.designation-text { color: var(--white); font-family: var(--font-heading); font-size: 1rem; }

.dentist-card-content { display: flex; flex-direction: column; padding: 1.2rem 1.2rem 2rem; }
/* The original marks the card name up as <h4> (line-height 2.75rem). The
   rebuild uses <h3> for heading order under the section's h2, so the
   line-height has to be set explicitly — inheriting h3's 3.75rem made every
   doctor card 16px taller. */
.dentist-name { font-size: 1.7rem; line-height: 2.75rem; }
.dentist-role { color: var(--primary-color); font-size: 1.2rem; line-height: 1.9rem; }
.dentist-bio  { color: #645c5c; padding-top: 1rem; }

/* Original responsive:
     <=991  .dentist-grid { gap:1.5rem; grid-template-columns:1fr 1fr }
            .dental-item  { width:50% }        <- doctor cards stay side by side
     <=767  .dentist-grid { grid-template-columns:1fr }
            .dentist-grid._2 { flex-flow:wrap }
            .dental-item  { width:100% }
   The rebuild stacked the doctors into a column at 991 and held the staff grid
   at two columns until 479, which made the About team block 807px long at 768. */
@media screen and (max-width: 991px) {
  .dentist-grid { gap: 1.5rem; grid-template-columns: 1fr 1fr; }
  .dentist-grid--doctors > .dentist-card { width: 50%; }
}
@media screen and (max-width: 767px) {
  .dentist-grid { grid-template-columns: 1fr; }
  .dentist-grid--doctors { flex-flow: wrap; }
  .dentist-grid--doctors > .dentist-card { width: 100%; }
}

/* ------------------------------------------------------------ OUR OFFICE -- */
/* Two-column intro, matching the original's .gallery-wrapper. The copy column
   is 50% and the photo fills the rest; the rebuild had the copy centred at
   62rem with no photo. Paragraph type follows the site default (16px/24px) —
   the 1.0625rem/1.75 override here was part of the invented reading style. */
.gallery-wrapper { display: flex; gap: 3rem; }
.gallery-content-wrapper { width: 50%; }
/* The original's copy is one block of Lato 1.125rem/1.5rem with <br><br>
   between paragraphs. Real <p> elements are kept here — a double <br> is a
   markup defect — with the gap set to one blank line so the rhythm matches. */
.office-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-align: left;
}
.office-copy p { font-family: inherit; font-size: inherit; line-height: inherit; }
/* `.our-office-text` drops to 1rem at 479 on the original. Holding 1.125rem
   there added roughly 96px of extra wrapping on a phone. */
@media screen and (max-width: 479px) { .office-copy { font-size: 1rem; } }
/* Base is 100%, exactly as the original; `_2` is what caps the photo column at
   50% in the office intro row. This previously hardcoded 50% on the BASE class
   and left `_2` off the markup, which worked only because nothing else used the
   class — until the gallery mosaic did, and the two uses collided (the office
   intro row jumped 839 -> 1076 because a later 100% rule won). Without `_2`
   there, the image column takes a 100% basis and flex-shrink splits the row
   411/821 instead of 616/616. */
.gallery-image-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  overflow: clip;
}
.gallery-image-wrapper._2 { width: 50%; }
.gallery-image-wrapper img { width: 100%; height: auto; }
@media screen and (max-width: 991px) {
  .gallery-image-wrapper, .gallery-image-wrapper._2 { width: 100%; }
}
/* The original wraps at 991 (`flex-flow: wrap`, not `column`) and steps the gap
   down 3rem -> 2rem -> 1.5rem. This had a single `column` at 767 and no gap
   steps, so the row kept a 48px gap where the original uses 24px at 390. */
@media screen and (max-width: 991px) {
  .gallery-wrapper { flex-flow: wrap; }
  .gallery-content-wrapper { width: 100%; }
}
@media screen and (max-width: 767px) { .gallery-wrapper { gap: 2rem; } }
@media screen and (max-width: 479px) { .gallery-wrapper { gap: 1.5rem; } }

/* Gallery mosaic, transcribed from the original. Two flush rows with NO gap;
   the second is `1fr 1.5fr 1fr` so its centre image is wider. Row heights fall
   out of the images' own aspect ratios — 297px and 365px at 1440 — because the
   images are `width: 100%; height: auto` and each row takes its tallest.
   The rebuild had `repeat(3, 1fr)`, a 1.5rem gap and `aspect-ratio: 4/3` with
   `object-fit: cover`, which cropped every photo to a uniform tile. */
.div-block-5 { display: flex; flex-flow: column; }
.lifestyle-gallery-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.lifestyle-gallery-wrapper.middle { grid-template-columns: 1fr 1.5fr 1fr; }
.gallery-image-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: clip;
}
/* Mosaic images FILL their cell on the original — measured 427x297, 366x365 and
   549x365, image size exactly equal to cell size at y-offset 0. With
   `height: auto` they rendered at natural aspect and got centred, leaving white
   bands above and below (the bottom row was 331 / 365 / 244 in a 365px row,
   which is the ragged look in the screenshot).

   ONE-LINE DEVIATION, same call as `.about-fletcher-image`: the original has no
   object-fit, so it stretches — and one of these cells forces a 1.5 source into
   a 1.0 box, which visibly distorts. Geometry here is identical to the
   original; `cover` crops instead of squashing. */
.lifestyle-gallery-wrapper .gallery-image-wrapper img { height: 100%; object-fit: cover; }

@media screen and (max-width: 991px) { .div-block-5 { gap: 2rem; } }
@media screen and (max-width: 767px) {
  .lifestyle-gallery-wrapper,
  .lifestyle-gallery-wrapper.middle { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- SERVICES -- */
/* The original is a full-width dark band, not body copy on the page ground:
     .heading-4         { text-align: center; margin-top: 30px }   <- outside the band
     .text-block-2-copy { background: var(--primary-color); color: #fff;
                          text-align: center; margin-top: 2px;
                          padding: 18px 0 13px; font-size: 18px }
   The rebuild had it as left-aligned paragraphs plus a bulleted list on the
   page background, running 467px against the original's 213.
   The <ul> is kept — the original separates these items with bare <br> tags,
   which is a markup defect — but styled to read as the same centred run. */
/* The original's `.heading-4` drops to 3rem at 1280+. Without this it inherited
   the global h2 size (60px), which wrapped "With Our Expertise, Your Oral Health
   is in a Good Hand" onto a second line — 144px tall against the original's 72. */
.expertise-heading { text-align: center; margin-top: 30px; }
@media screen and (min-width: 1280px) {
  .expertise-heading { font-size: 3rem; }
}
.expertise-block {
  margin-top: 2px;
  padding: 18px 0 13px;
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
  font-size: 18px;
}
.expertise-block p { color: var(--white); font-size: 18px; }
.expertise-list { list-style: none; padding: 0; margin: 0; }
.expertise-list li { color: var(--white); font-size: 18px; }

/* --------------------------------------------------------------- CONTACT -- */
.contact-lede { max-width: 46rem; margin-inline: auto; color: var(--muted-text); }
.contact-direct { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.5rem; }
.contact-address { font-style: normal; font-family: var(--font-body); color: var(--muted-text); }

/* ------------------------------------------------------------------ CDCP -- */
.cdcp-content { max-width: 62rem; margin-inline: auto; }

/* ------------------------------------------------------------ BLOG INDEX -- */
/* Matched to the original. Its card is NOT a white panel with a shadow — the
   card itself is transparent, the image carries a 3px black border and 12px
   radius, and the text sits in a dark teal panel below it with white type.
   The original also shows no summary on these cards, and prints the date as
   "June 25, 2026" rather than an ISO stamp. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-card { background-color: transparent; width: 100%; }
.blog-card-link { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.blog-card-image {
  width: 100%;
  border: 3px solid #000;
  border-radius: 12px;
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 20px;
  background-color: var(--primary-color);
  border-radius: .4rem;
  box-shadow: 0 2px 5px #0003;
  transition: all .4s;
}
.blog-card-title {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  line-height: 1.5rem;
}
/* The original's date is a <p> inside `.author-flex`, so it picks up the site's
   paragraph size — 16px/24px, not the 14px/20px body default this was
   inheriting. Four pixels a card, but the listing is nine rows deep, so /blog
   came up 35px short. */
.blog-card-meta { display: flex; justify-content: space-between; font-size: 16px; line-height: 24px; }
/* Both children are <p> on the original (`.author-name` and `.date`), so they
   share the paragraph size. An empty author collapses to zero width and the
   date sits alone, exactly as it did before. */
.blog-card-author { margin: 0; font-size: inherit; line-height: inherit; }
/* The original's date is a <p>, so it takes Montserrat from the global rule.
   As a <time> element it inherited the body's Arial instead and measured 115px
   against 122 — just narrow enough that the author/date row fit on one line
   where the original wraps to two, costing 24px on each of those cards. */
.blog-card-date { font-family: var(--font-body); }

/* Same as `.top-holder` plus a 33px top margin — the original's own class. */
.top-holder-cop44545y {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 33px;
}
.blog-card-date { color: var(--white); }

@media screen and (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .blog-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ SERVICE DETAIL ---- */
/* `.padding.hero` is 50vh tall with 12rem of top padding — a dark band, not a
   plain page title. The two hero lines sit in a 1rem-gap flex row: a white
   "Service >>" label and the service name in the accent colour. */
.blog-hero {
  background-image: linear-gradient(#222533e6, #222533e6), url("/images/clinic-bed.avif");
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
.padding.hero { height: 50vh; padding-top: 12rem; }
.blog-hero-title-wrapper { display: flex; gap: 1rem; }
.blog-hero-title-wrapper .hero-label,
.blog-hero-title-wrapper .service-name {
  font-family: var(--font-heading);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--fw-bold);
}
.blog-hero-title-wrapper .hero-label { color: var(--white); }
.service-name { color: var(--button-color); }

.quality-title { text-align: center; }

/* Blog post detail. The hero background is the post's own image, set inline
   per page; `.blog-hero` supplies the dark overlay above it. */
.blog-single-hero { display: flex; flex-flow: column; justify-content: center; align-items: center; }
/* This section is the only flex one on a post page, so its `.padding` child is
   a flex item and inherits `min-width: auto`. That is the top of the chain that
   let an unbreakable URL inflate the container to 478px inside a 375px
   viewport; with it pinned to 0, the 80% text column resolves to the original's
   268px instead of 350. */
.blog-single-hero > .padding { min-width: 0; }
/* 3.5rem, not 2rem: on the original the image wrapper and the article body are
   siblings under `.wrapper` and inherit its 56px gap. Nesting them in
   `.hero-single-wrapper` is fine, but the gap has to match or the page comes up
   24px short. */
/* `min-width: 0` for the same reason as `.post-detail-body`: this is itself a
   flex item of `.wrapper`, so without it the unbreakable-URL width propagates
   one level further up and the 80% column is computed off an inflated parent. */
.hero-single-wrapper { display: flex; flex-flow: column; gap: 3.5rem; width: 100%; min-width: 0; }
.blog-single-hero-image-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin-inline: auto;
}
/* The original renders this image at its INTRINSIC size, centred — the class
   carries only `text-align: center; margin-inline: auto`. `width: 100%` was
   blowing a 553x400 source up to 896x648: a 62% upscale of a bitmap, so the
   post images rendered visibly soft, and each post ran 248px long. */
.single-page-blog-image {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
/* See HERO_FULL_WIDTH in build.mjs. On 19 of the 26 posts the original's hero
   carries a srcset whose w-descriptor is smaller than its sizes hint, so the
   browser's density maths inflates the intrinsic display size and the image
   fills the 896px column. The other 7 have no srcset and stay at true
   intrinsic. Same file, opposite rendering — it depends only on whether
   Webflow generated responsive variants for that upload. */
.single-page-blog-image.is-full { width: 100%; }
/* The post title is an <h1> here — correct for an article, where the original
   used an h2 — but it renders at the original's h2 size. Same convention as
   `.card.form h2`. As an h1 it was 72px/88px and wrapped to three lines, 264px
   against the original's 144. */
.blog-single-hero .quality-title { font-size: var(--h2-size); line-height: var(--h2-lh); }
/* REMOVED — `@max-767 { .blog-single-hero-image-wrapper { width: 100% } }` was
   an invention. The original carries a single unqualified `width: 70%` with no
   media overrides at all, so the post hero stays 70% of the column on a phone
   too: 235px wide at 390, not 335. Worth ~70px per post page. */
/* Copy beside the photo, not stacked under it. */
/* Uses the SAME `.quality-image-wrapper` as the CDCP page (50% wide, .75rem
   radius, clipped, shadowed) — not a bespoke wrapper. */
/* Lato 1.125rem/1.5rem, dropping to 1rem at 479. Omitting the font properties
   left this copy at the body default (14px/20px) instead of 18px/24px. */
.quality-text {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.5rem;
}
.quality-text p { font-family: inherit; font-size: inherit; line-height: inherit; }
/* The original separates these paragraphs with bare <br> tags — a blank 24px
   line between each. Marked-up as <p> with no margin they ran together with no
   separation at all, which is both 48px short and worse to read. Service pages
   are unaffected: their `.quality-text` holds plain text, no <p> children. */
.quality-text p + p { margin-top: 1.5rem; }
/* `.service-detail-body` exists only to scope the approved rich-text deviation,
   but it also carries `margin-bottom: 3rem`. On the service pages that class
   lands on `.quality-text`, adding 48px the original does not have — the whole
   of the +56 those five pages were carrying. */
.quality-text.service-detail-body { margin-bottom: 0; }
@media screen and (max-width: 479px) { .quality-text { font-size: 1rem; } }
.about-fletcher-image { width: 100%; height: 100%; object-fit: cover; }

/* Full-width dark banner with a centred white h5. */
.staff-and-dentists {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 250px;
  padding: 2.5rem 5rem;
  background-color: var(--primary-color);
  border-radius: .75rem;
}
.staff-and-dentists-title { color: var(--white); text-align: center; }

/* The banner keeps an explicit height at every breakpoint and GROWS at 479 —
   250 -> 200 -> 400 — because the heading wraps to many lines on a phone.
   Setting `height: auto` here left it 208px short at 390.
   `.quality-main-wrapper` wraps below 992px; it does not become a column. */
@media screen and (max-width: 991px) {
  .quality-main-wrapper { flex-flow: wrap; }
  .staff-and-dentists { padding-inline: 2rem; }
}
@media screen and (max-width: 767px) {
  .staff-and-dentists { height: 200px; }
}
@media screen and (max-width: 479px) {
  .staff-and-dentists { height: 400px; }
}

/* ------------------------------------------------------------ CDCP PAGE --- */
/* Check-icon rows, matching the original. */
/* Three parts on the original: six check rows beside a photo, then five more
   rows in their own outlined panel, then a button. The rebuild had all eleven
   rows in a single column with no photo and no button. */
.cdcp-wrapper { display: flex; flex-flow: column; gap: 4rem; }
.quality-main-wrapper { display: flex; gap: 2rem; }
.quality-content-wrapper { display: flex; flex-flow: column; gap: 1.2rem; width: 50%; }
.quality-image-wrapper {
  width: 50%;
  border-radius: .75rem;
  overflow: clip;
  box-shadow: 0 2px 5px #0003;
}
/* `height: auto` here (specificity 0,1,1) was silently beating
   `.about-fletcher-image { height: 100% }` (0,1,0), so the photo rendered at its
   natural 624x416 and left an 88px hole below it in a 504px column.

   ONE-LINE DEVIATION, flagged: the original resolves this with `object-fit:
   fill` on a 612x408 source forced into a 624x504 box — a 21% vertical stretch
   of a photograph of real people. Geometry here is now identical to the
   original (624x504); only the fit differs, so the image is cropped rather than
   squashed. Say the word and it becomes `fill` to match exactly. */
.quality-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cdcp-bottom-wrapper {
  display: flex;
  flex-flow: column;
  gap: 1.2rem;
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding: 2rem;
  border: 1px solid var(--button-color);
  border-radius: 1.5rem;
  box-shadow: 0 2px 5px #0003;
}
.button-wrapper { display: flex; flex-flow: column; justify-content: center; align-items: center; }
.cdcp-flex { display: flex; justify-content: flex-start; align-items: flex-start; gap: 1rem; }
.check-wrapper { max-width: 2rem; flex: none; }
.check-wrapper img { width: 100%; height: auto; }
@media screen and (max-width: 991px) {
  /* Both columns go full width below 992px — the image wrapper too, which was
     left at 50% and rendered half-size on every service page at mobile. */
  .quality-image-wrapper,
  .quality-content-wrapper { width: 100%; }
}

/* -------------------------------------------------------- CONTACT PAGE ---- */
/* The original's contact band: `.section` gives 176px of padding-block (not
   `.padding`'s 4rem — different classes), a 1218px `.container-default`, a
   two-column grid with the form in the left column, and a photo panel pinned
   to the right 65% behind the content. */
.contact-page-section { position: relative; overflow: clip; padding-block: 176px; }
.contact-page-section .container-default {
  width: 100%; max-width: 1218px; margin-inline: auto; padding-inline: 24px;
}
.grid-2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
/* The contact grid is NOT an even split — the form column is 1.8fr. */
.grid-2-columns.contact-v4 { column-gap: 0; grid-template-columns: 1.8fr 1fr; }
.contact-form-column { display: flex; flex-flow: column; gap: 1.5rem; }
.half-bg-image-right {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  height: 100%;
  z-index: -1;
  background-image: url("/images/clinic-bed.avif");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.half-bg-image-right.width-65 { width: 65%; }

@media screen and (min-width: 1440px) {
  .contact-page-section { margin-top: 34px; }
}
@media screen and (max-width: 991px) {
  /* Below 992px the panel stops being an overlay: it goes `position: static`
     with a 600px min-height and a 60px top margin, so it STACKS BELOW the form
     and contributes its own height. Leaving it absolute here is what made the
     page 809px short at 768. The band's padding also changes to 100px / 0. */
  .contact-page-section { padding-top: 100px; padding-bottom: 0; }
  .grid-2-columns.contact-v4 { grid-template-columns: 1fr; }
  .half-bg-image-right,
  .half-bg-image-right.width-65 {
    position: static;
    inset: auto 0 0;
    width: 100%;
    height: 100%;
    min-height: 600px;
    margin-top: 60px;
  }
}
@media screen and (max-width: 767px) {
  .grid-2-columns { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- CTA BAND ------ */
/* `.newletter-section` carries NO rule in the original — a third inert class,
   like `.padding0` and `.pd-sides-78px`. The background here was invented.
   The wrapper is a centred COLUMN at 50% width, not a space-between row; built
   as a row it came out 66px short on every page that carries this band. */
.newsletter-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 50%;
  margin-inline: auto;
  padding: 2rem;
  background-color: var(--primary-color);
  border-radius: 1.5rem;
}
.newsletter-content-wrapper { display: flex; flex-flow: column; gap: 1.5rem; }
.newsletter-wrapper .div-block {
  display: flex; flex-flow: column; justify-content: center; align-items: center;
  width: 100%; max-width: 500px;
}
.newsletter-title {
  color: var(--white);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  line-height: 130%;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: var(--transition);
}
.newsletter-title:hover { color: var(--button-color); }
/* The band narrows in steps and the title shrinks hard on phones:
     <=991  width 80%,  title 2.2rem
     <=767              title 2rem
     <=479  width 100%, title 1.4rem / 2.1rem
   Holding it at 50% with a 2.8rem title left the band 167px tall at 390. */
@media screen and (max-width: 991px) {
  .newsletter-wrapper { width: 80%; }
  .newsletter-title { font-size: 2.2rem; }
}
@media screen and (max-width: 767px) {
  .newsletter-title { font-size: 2rem; }
}
@media screen and (max-width: 479px) {
  .newsletter-wrapper { width: 100%; }
  .newsletter-title { font-size: 1.4rem; line-height: 2.1rem; }
}

/* ------------------------------------------------------ THANK YOU / 404 --- */
.thank-you-section { min-height: 52vh; display: flex; align-items: center; }
.thank-you-wrapper {
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  max-width: 46rem; margin-inline: auto; text-align: center;
}
.thank-you-title { font-size: var(--h3-size); line-height: var(--h3-lh); }
.thank-you-text { color: var(--muted-text); font-size: 1.1rem; }
.thank-you-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; }