/* ==========================================================================
   Service pages — /services/{slug}
   Hero background, 48/48 body split and green CTA all taken from the original
   (.hero-for-service-page, .body-content-wrapper, .service-cta).
   ========================================================================== */

/* .hero-for-service-page: height 60vh (540 at a 900 viewport), centred both
   ways, position relative. Measured 1440x540 starting at y=0, with the fixed
   nav floating over it. The rebuild had min-height 340 plus padding, starting
   at y=133 — 200px short and in the wrong place. */
.service-hero {
  position: relative;
  background-image: url('/images/services/2149206280.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
  padding: 0;
}

/* .hero-overlay: #04451573 — a dark GREEN at ~45%, not neutral black. */
.service-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #04451573;
  pointer-events: none;
}

.service-hero .container { position: relative; z-index: 9; text-align: center; }

.service-hero__title { color: var(--white); margin: 0; }

/* Breadcrumb base rules MOVED to main.css 2026-09-04 — see the note there.
   They lived here, and service.css is loaded by service pages only. */

/* ---------------------------------------------------------------- body --- */
/* AP-051, 2026-09-11. `section > div.section-padding` on the original is
   `flex-flow: column; justify-content: center; align-items: center` (site.css,
   the same `.section-padding` already in main.css). `section.service-body` plays
   that role here and carries the same padding, but it was a plain block, so
   `p.paragraph-36` could not shrink-wrap the way the original's does. The two
   declarations below are the original's; they are scoped to `.service-body` and
   NOT added to `.section-padding` in main.css, because /emergency-dental and
   /about-us use that primitive and re-measuring them is not this ticket. */
.service-body { display: flex; flex-flow: column; justify-content: center; align-items: center; }

/* `.paragraph-36` on the original is `text-align: center; margin-bottom: 36px`
   and NOTHING else — no width, no max-width. The rebuild's `max-width: 62rem`
   (992px) forced the intro onto two lines above 1024:
     1920  original 1129.031 x 22.406 @x395.484   rebuild 992.000 x 44.813 @x464
     1440  original 1129.031 x 22.406 @x155.484   rebuild 992.000 x 44.813 @x224
   and cost +22.407 on the whole section at both. At 1024/768/390 the cap was
   wider than the container, so those widths already measured 0.000 and are
   unaffected by removing it. The `margin-inline: auto` goes with it: the
   paragraph is now a flex item of a centred column, which is what centres it. */
.service-body__intro {
  text-align: center;
  margin: 0 0 36px;
}

/* CORRECTED 2026-09-04. The previous rule applied `row-reverse wrap-reverse` at
   every width, with a comment asserting that was what the original did. It is
   not. In the original that declaration exists ONLY inside
   `@media (max-width: 991px)`; the base rule is a bare `display: flex`.
   Measured at 1440 the original puts the copy at x=32 and the image at x=724 —
   copy LEFT, image RIGHT. The rebuild had them the other way round on all 18
   service pages.

   This is the trap the manual calls out: a claim about the original written
   into a comment and never verified against it. Base rules and media-query
   rules are not interchangeable. */
.service-body__grid {
  display: flex;
  gap: 2rem;
}
.service-body__content {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}
/* `h3`, not `h2` — AP-051. The original's body column heading is an `h3`; the
   rebuild had promoted it. See the note in `[slug].astro`. */
.service-body__content h3 { margin: 0; }
.service-body__content p { margin: 0; }
.service-body__media { width: 48%; }
.service-body__media img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 2px 5px #0003;
  object-fit: cover;
}

/* Declared 991 then 767, descending, matching the original's own source order.
   At <=991 the original flips to row-reverse wrap-reverse with both columns at
   100%, which stacks the IMAGE ABOVE the copy. The previous rebuild used
   `flex-flow: column` at 767, stacking them the other way round. */
@media screen and (max-width: 991px) {
  .service-body__grid { flex-flow: row-reverse wrap-reverse; }
  .service-body__content,
  .service-body__media { width: 100%; }
}
@media screen and (max-width: 767px) {
  .service-body__content { gap: 1rem; }
}

/* .service-supporting-text on the original: plain green text, no pill. The
   rebuild had given it a background, border-radius and padding, which measured
   66.891 -> 107.469 wide and 23.406 -> 48 tall.
   RENAMED from `.service-body__content .eyebrow` with AP-041 (Round G ticket 7).
   It used to be an override that undid the shared `.eyebrow` pill; `.eyebrow` no
   longer exists, so this is now the original's own class carrying the original's
   own four declarations and nothing else (site.css:7352).

   THE FACE WAS WRONG HERE, and this was the only one of the thirteen where it
   was wrong before AP-058 rather than after. `sweet sans bold` is a ONE-FACE
   family, so the original's `font-weight: 500` still resolves to the BOLD face.
   `var(--font-sans)` has a real 500, so this rule was resolving to MEDIUM.
   Measured on "Service" at 18px: original 66.891 (Bold), rebuild 66.906
   (Medium). FIXED 2026-09-11 by naming the bold family and keeping the
   original's declared 500 — the weight stays 500 because that is what the
   original declares and what it computes; the family is what selects the face.
   18 service pages. */
.service-supporting-text {
  color: var(--earls-green);
  font-family: var(--font-sans-bold);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 130%;
}

/* ------------------------------------------------------ other services --- */
.other-services { background: var(--tint-blue); }
.other-services__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.other-services__list a {
  display: block;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-4) var(--space-5);
  color: var(--color-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out);
}
.other-services__list a:hover { border-color: var(--earls-green); color: var(--earls-green); }

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

/* ----------------------------------------------------------------- CTA --- */
/* `.service-cta` itself (the earls-green background) stays in main.css — see the
   note there. Everything below is AP-051, 2026-09-11: the rest of the band,
   transcribed from the original in one pass, in the original's own source order.
   These selectors live HERE and not in main.css deliberately — grepped first,
   `section.service-cta` now appears on the 18 service detail pages and nowhere
   else in the rebuild, and on exactly those 18 pages in the original's capture
   (`_kit-out/ref/services__*.html`). `.service-cta__inner`, which /same-day-
   booking shares, is untouched in main.css.

   Reference boxes at 1440, original -> rebuild before:
     div.section-padding-2       1440.000 x 369.000 @(0, 1198.719), pad 64px 0
                                 -> div.container 1376.000 x 186.406 @x32
     div.main-container-2        1320.000 x 241.000 @(60), max-w 1320, pad-x 20
                                 -> .service-cta__inner 768.000 x 186.406 @x336
     div.service-cta-wrapper     1280.000 x 241.000 @(80)   — ABSENT
     div.wrapper-3               1280.000 x 241.000, flex col, gap 64, z 9  — ABSENT
     div.section-top-holder-2    1280.000 x 241.000, flex col, centre, gap 24 — ABSENT
     h2.white-2                  525.375 x 57.594 @(457.313), text-align START
                                 -> h2 768.000 x 57.594 @x336, centre
     p.contact-subtitle          768.000 x 50.406, 18px/25.2, rgb(214,214,214)
                                 -> p 768.000 x 44.813, 16px/22.4, white, mb 32
     div > a.button-4-copy-...   272.641 x 85.000 / 272.641 x 65.000
                                 -> a.btn.btn--white 229.000 x 52.000
   241.000 = h2 57.594 + 24 + p 50.406 + 24 + button div 85.000 exactly. */

/* site.css 7403. `background-image: none` is the original's own declaration — it
   is undoing a background on the shared `.section-padding-2` elsewhere; kept so
   the rule is a transcription rather than an edit of one. NO inline padding:
   the 60px inset at 1440 comes from `.main-container-2`'s 1320 cap. */
.section-padding-2 {
  background-image: none;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* site.css 7380. 1320 rather than `.main-container`'s 1380, and it has 20px of
   its own inline padding, which is what makes `.service-cta-wrapper` 1280. */
.main-container-2 {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}
/* Webflow's `.w-container` clearfix, which this container also carries on the
   original — same reason as `.main-container` in main.css. */
.main-container-2::before,
.main-container-2::after { content: " "; display: table; grid-area: 1 / 1 / 2 / 2; }
.main-container-2::after { clear: both; }

/* `.service-cta-wrapper` has NO rule anywhere in the original's 212KB — grepped.
   It is a plain block div and is reproduced as one, with no CSS. */

/* site.css 7409. */
.wrapper-3 {
  z-index: 9;
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 4rem;
}

/* site.css 7371. `align-items: center` is what makes the h2 shrink-to-fit at
   525.375 instead of filling its 1280 measure, and what centres the button's
   wrapper div at 272.641. */
.section-top-holder-2 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

/* site.css 7443 and 7436. The subtitle is #d6d6d6, not white, and 60% wide —
   768 of 1280 at 1440, which is why the rebuild's unrelated 48rem cap happened
   to produce the same 768 and hid the difference on `w`. */
.white-2 { color: #fff; }
.contact-subtitle {
  color: #d6d6d6;
  text-align: center;
  width: 60%;
  font-size: 1.125rem;
}

/* Declared 991 -> 767 -> 479, DESCENDING, matching the original's source order.
   site.css 9028 / 9033 / 9038, 10423, 11909. */
@media screen and (max-width: 991px) {
  .section-padding-2 { padding-top: 3rem; padding-bottom: 3rem; }
  .wrapper-3 { gap: 3rem; }
  .contact-subtitle { width: 100%; }
}
@media screen and (max-width: 767px) {
  .section-padding-2 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
@media screen and (max-width: 479px) {
  .wrapper-3 { gap: 2rem; }
}

/* ==========================================================================
   /emergency-dental — the four alternating service rows            (AP-013)
   ==========================================================================
   Transcribed from the original. Every value below is measured, either from
   site.css or from the reference's own boxes; the reference figures at 1440 are
   quoted so a regression is obvious.

   .section-padding        padding 5rem 2rem                (the 32px is what
                                                             puts the container
                                                             at x=32 at 1440)
   .main-container._2      width 100%, max-width 1380, centred
                           -> 1376 at 1440, 960 at 1024, 358 at 390
   .emergency-dental-...   flex column, gap 5rem / 3rem <=991 / 2rem <=479,
     -wrapper              padding-inline 20 (0 at <=479)
   .meet-our-doctor-       flex row, space-between, align centre,
     wrapper               padding-bottom 40
   .emergency-dental-      width 50%, padding 1.5rem (1rem <=767), radius 1.5rem,
     images                shadow 0 2px 5px #0003
   .new-patients-image     width 100%, radius .75rem
   .new-patients-content-  width 45%, flex column, gap 1.5rem
     wrapper
   .text-size-xmedium      Lato 1.2rem / 150% / letter-spacing -.03rem
                           (1.1rem at <=479)
   .button-4               2px solid var(--body-background), earls-green fill,
                           radius 30, margin-top 20, padding 10px 35px,
                           18px/700/lh 33  -> 57px tall

   Reference at 1440, row 1: row 1336 wide at x=52; image box 668 at x=52;
   photo 620x413.3 at (76, 3679.4); copy 601.2 at x=786.8; button 255.6x57.
   -------------------------------------------------------------------------- */
/* .section-padding and .main-container MOVED to main.css — /about-us needs both
   for the AP-014 doctor split and does not load service.css. Fourth time this
   project has been caught putting a shared primitive in a template stylesheet
   (breadcrumb, .service-cta, .for-mobile-view-item, now these). */

/* ==========================================================================
   /emergency-dental — the hero                          Round F, ticket 5
   ==========================================================================
   The rebuild used `section.service-hero`, the SERVICE DETAIL hero (a 60vh
   band with a centred title over `2149206280.jpg`). /emergency-dental has its
   own `section.emmergecny-dental-hero` on the original: 673.438 tall, its own
   photograph, and a LEFT-ALIGNED copy column 62% wide holding four things, two
   of which the rebuild did not have at all.

   What was wrong, measured at 1440:
     - `h5.hero-subtitle` ("We are an emergency dental clinic in Oakville
       providing urgent dental care."), 830.797 x 24.641 at (50, 299.797) —
       ABSENT from the rebuild.
     - the three check badges. The original is a VERTICAL `.hero-list-wrapper`
       at x=50: rows 830.797 x 32 at y 356.438 / 404.438 / 452.438, icon
       32 x 32 at x=50, label 17.6px/500 at x=98. The rebuild was a centred pill
       row — `<li>` at x=408.5 / 601.313 / 809.172 with 20 x 20 icons at
       x=432.5 / 625.313 / 833.172. Internally consistent, so the rig saw
       nothing but an x delta on each.
     - the section was 540 tall against 673.438.

   `hero-image.jpg` was already on disk at /images/office (1,177,437 bytes,
   `68e3a8be141cb1db8349e2c1_Hero image (1).jpg` per _forensics/image_map.json)
   and referenced by ZERO pages — the fifth asset on this project with that
   signature.

   Everything is scoped to `.emmergecny-dental-hero` on purpose:
   `.hero-wrapper`, `.hero-flex`, `.hero-content-wrapper`, `.button-wrapper`,
   `.list-flex` and `.list-text` are generic names and `.hero-wrapper` is
   already in use on /same-day-booking, which also loads this stylesheet.
   -------------------------------------------------------------------------- */
.emmergecny-dental-hero {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 80px;
  background-image: linear-gradient(#b2c2334d, #84b5c366), url('/images/office/hero-image.jpg');
  background-position: 0 0, 50% 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
.emmergecny-dental-hero .hero-wrapper { display: flex; flex-flow: column; gap: 4rem; }
.emmergecny-dental-hero .hero-flex {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  padding-inline: 20px;
}
.emmergecny-dental-hero .hero-content-wrapper {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  width: 62%;
}
/* 1000px wide with a 91px top margin, which is what puts the h1 at y=191
   inside a column that starts at y=100. */
.emmergecny-dental-hero .hero-second-title {
  width: 1000px;
  margin: 91px 0 0;
  padding-bottom: 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 4rem;
  line-height: 120%;
}
.emmergecny-dental-hero .hero-subtitle {
  margin: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 140%;
}
.emmergecny-dental-hero .hero-list-wrapper { display: flex; flex-flow: column; gap: 1rem; }
.emmergecny-dental-hero .list-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
/* `max-width: 2rem` and nothing else. The div shrink-wraps to the image's
   declared width, capped at 32, and the image fills it — 32 x 32 on the
   reference, against the rebuild's 20 x 20. */
.emmergecny-dental-hero .list-icon-wrapper { max-width: 2rem; }
.emmergecny-dental-hero .list-icon-wrapper img { max-width: 100%; height: auto; display: block; }
.emmergecny-dental-hero .list-text {
  margin: 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 140%;
}
.emmergecny-dental-hero .button-wrapper { display: flex; gap: 2rem; }

@media screen and (max-width: 991px) {
  .emmergecny-dental-hero { padding-top: 200px; }
  .emmergecny-dental-hero .hero-flex { flex-flow: wrap; }
  .emmergecny-dental-hero .hero-content-wrapper { width: 100%; }
  .emmergecny-dental-hero .hero-second-title { font-size: 5rem; }
}
@media screen and (max-width: 767px) {
  .emmergecny-dental-hero { padding-top: 80px; }
  .emmergecny-dental-hero .hero-wrapper { gap: 2.5rem; }
  .emmergecny-dental-hero .button-wrapper { gap: 1.5rem; }
  .emmergecny-dental-hero .hero-second-title { width: auto; font-size: 3.8rem; }
}
@media screen and (max-width: 479px) {
  .emmergecny-dental-hero .button-wrapper { gap: 1rem; flex-flow: wrap; }
  .emmergecny-dental-hero .hero-second-title { font-size: 2.5rem; }
  .emmergecny-dental-hero .list-text { line-height: 120%; }
}

/* ==========================================================================
   /emergency-dental — the two closing bands              Round F, ticket 5
   ==========================================================================
   `section.dentist-appoinment` and `section.over-the-phone` were both shipped
   as rebuilt CTA bands (`.cdcp-cta` and `.service-cta`), which cost four copy
   blocks and turned two `Call +1(289) 670-5045` buttons into "Call Now" and a
   pair of generic ones. Both sections are the SAME component on the original,
   differing only in `background-attachment` and their content.

   Reference at 1440:
     section.dentist-appoinment      1440 x 537.703 at (0, 2886.109), pad 5rem 0
       .dentist-appoinment-wrapper   1380 x 377.703 at (30, 2966.109), pad-x 20
       .dentist-appointment-inner-   1005 x 377.703 at x=217.5 (75%, centred),
         wrapper                     flex column, gap 1.5rem
       h3.dentist-appoinment-title   1005 x 172.781, 48px/57.6, white, centre
       h6.dentist-appointment-       1005 x 30.719, 25.6px/30.72, white, centre
         subtitle
       p.dentist-appoinment-text     1005 x 25.203, Lato 18px/25.2, white
       a.button-4._2                 255.641 x 57 at x=592.172
     section.over-the-phone          1440 x 492.344 at (0, 6076.953)
       inner wrapper                 1005 x 332.344 at x=217.5
       h3                            1005 x 115.188
       h6                            1005 x 92.156
       a.button-4._2                 255.641 x 57 at x=592.172
   377.703 = 172.781 + 24 + 30.719 + 24 + 25.203 + 24 + 57 + 20, the last 20
   being `.button-4`'s own margin-top.
   -------------------------------------------------------------------------- */
.dentist-appoinment,
.over-the-phone {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-image: linear-gradient(#899a00bf, #899a00bf),
    url('/images/services/proven-technologies-in-burlington.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
/* The only difference between the two sections in 212KB of stylesheet. */
.over-the-phone { background-attachment: scroll, fixed; }
.dentist-appoinment-wrapper { padding-inline: 20px; }
.dentist-appointment-inner-wrapper {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  width: 75%;
  margin-inline: auto;
}
.dentist-appoinment-title {
  margin: 0;
  color: var(--white);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 3rem;
  line-height: 120%;
}
.dentist-appointment-subtitle {
  margin: 0;
  color: var(--white);
  text-align: center;
  font-size: 1.6rem;
}
.dentist-appoinment-text {
  margin: 0;
  color: var(--white);
  text-align: center;
  font-family: var(--font-lato);
  font-size: 1.125rem;
  font-weight: 400;
}
@media screen and (max-width: 991px) {
  .dentist-appointment-inner-wrapper { width: 100%; }
  .dentist-appointment-subtitle { font-size: 1.3rem; }
}
@media screen and (max-width: 767px) {
  .dentist-appoinment-title { font-size: 2.2rem; }
  .dentist-appointment-subtitle { font-size: 1.2rem; line-height: 121%; }
  .over-the-phone { padding-top: 3rem; padding-bottom: 3rem; }
}
@media screen and (max-width: 479px) {
  .dentist-appoinment { margin-top: 19px; }
}

/* ==========================================================================
   /emergency-dental — "we care about you" + the three technology cards
   ==========================================================================
   The rebuild nested the three cards inside .why__content, a 50%-wide column of
   a .why__grid, so .technology-blocks was a PERMANENT SINGLE COLUMN: 658 x 205
   at 1920 against the original's three-across row of 430.7 x 400.5. The
   original's .technology-inner-wrapper is a top-level GRID —
   `1fr 1fr 1fr` above 991, `1fr` at and below — in its own section, not inside
   the copy column.

   Reference boxes (measured):
     .meet-the-dentist-wrapper   1920 x 699.8 at (0, 689.4), flex, gap 2rem,
                                 padding-inline 20, margin-top 16
     .dentist-image-wrapper      924 wide (50%), radius .75rem, overflow clip
     .dentist-image              margin-top 84 (0 at <=991)
     .technology-inner-wrapper   1340 at 1920, columns 430.656/430.672/430.656
                                 920 at 1024, columns 290.656 x3
                                 358 at 390, one column, gap 2rem
     .technology-block           430.7 x 400.5 at 1920; 290.7 x 481.7 at 1024;
                                 358 x 394.1 at 390
     .technology-first-block     flex COLUMN, centred, width 80%, margin auto
                                 -> 306.1 wide at (352.3) inside a 430.7 card
     .technology-dental-title    1.6rem (25.6px) / 700 / centre
                                 1.2rem (19.2px) at <=767
   The rebuild had .technology-first-block as a flex ROW with the icon beside a
   19.2px/400/left-aligned title.
   -------------------------------------------------------------------------- */
.meet-the-dentist-wrapper {
  display: flex;
  gap: 2rem;
  margin-top: 16px;
  padding-inline: 20px;
}
.dentist-image-wrapper { width: 50%; border-radius: 0.75rem; overflow: clip; }
.dentist-image { width: 100%; height: auto; margin-top: 84px; }
.meet-the-dentist-content-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  gap: 1.5rem;
}
.meet-the-dentist-content-wrapper h3 { margin: 0; }
.dentist-text { font-size: 16px; line-height: 133%; margin: 0; }

.technology-wrapper { padding-inline: 20px; }
.technology-inner-wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 1.5rem;
  margin-inline: auto;
}
.technology-block {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 5px #0003;
}
.technology-first-block {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 80%;
  margin-inline: auto;
}
.technology-dental-icon { width: 100%; max-width: 4rem; height: auto; }
.technology-dental-title {
  color: var(--black);
  text-align: center;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 120%;
}
.technology-paragraph {
  text-align: center;
  margin-bottom: 0;
  font-family: var(--font-lato);
  font-size: 1.125rem;
}
.techlogy-button-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .meet-the-dentist-wrapper { flex-flow: wrap; }
  .meet-the-dentist-content-wrapper,
  .dentist-image-wrapper { width: 100%; }
  .dentist-image { margin-top: 0; }
  .technology-inner-wrapper { grid-template-columns: 1fr; gap: 2rem; }
}
@media screen and (max-width: 767px) {
  .technology-dental-title { font-size: 1.2rem; }
}
@media screen and (max-width: 479px) {
  .meet-the-dentist-wrapper { padding-inline: 0; }
  .meet-the-dentist-content-wrapper { margin-left: 25px; margin-right: 29px; }
  .dentist-image-wrapper { padding-inline: 20px; }
  .technology-wrapper { padding-inline: 0; }
  .technology-block { padding-inline: 1.2rem; }
}

.emergency-dental-service-wrapper {
  display: flex;
  flex-flow: column;
  gap: 5rem;
  padding-inline: 20px;
}

/* `.section-top-holder` MOVED to main.css 2026-09-10. It is a global rule on
   the original (site.css) and /about-us uses it too, but /about-us loads
   home.css + team.css and never service.css — so the block would have rendered
   with no container rules at all. Fourth occurrence on this project of a shared
   component's base rules stranded in a template-specific stylesheet. */

.meet-our-doctor-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
}

.emergency-dental-images {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-left: 0;
  padding: 1.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 2px 5px #0003;
}
.new-patients-image { width: 100%; height: auto; border-radius: 0.75rem; }

.new-patients-content-wrapper {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  width: 45%;
}
.new-patients-content-wrapper h3 { margin: 0; }

.text-size-xmedium {
  margin: 0;
  font-family: var(--font-lato);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.03rem;
}

.button-wrapper-2 { display: flex; gap: 2rem; }

/* .button-4 — NOT the site .btn. Different border colour, radius, padding and
   type: 18px/700 on a 33px line, which is what makes it 57px tall against
   .btn's 52. */
.button-4 {
  display: inline-block;
  border: 2px solid var(--body-background);
  background-color: var(--earls-green);
  color: var(--white);
  border-radius: 30px;
  margin-top: 20px;
  padding: 10px 35px;
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  /* NO text-align here — the original declares `text-align: center` on
     .button-4 only inside its <=767 block. Measured: the reference computes
     `start` at 1920/1440/1024 and `center` at 768/390. */
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
.button-4:hover {
  border-color: var(--limeade);
  background-color: var(--white);
  color: var(--limeade);
  text-decoration: none;
}
/* ADDED Round F, ticket 5. The `._2` variant is the inverted button — white
   fill, white border, limeade label — and it is what the original uses for the
   /emergency-dental hero's "Book A Free Consultation" (293.688 x 57 at
   x=299.625) and for both closing bands' "Call +1(289) 670-5045"
   (255.641 x 57 at x=592.172). The rebuild had none and used `.btn--white`. */
.button-4._2 {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--limeade);
}
.button-4._2:hover { background-color: var(--limeade); color: var(--white); }

/* Declared 991 -> 767 -> 479, DESCENDING, matching the original's source order. */
@media screen and (max-width: 991px) {
  .emergency-dental-service-wrapper { gap: 3rem; }
  /* Both columns go full width and the row wraps. `_2` flips to
     `row-reverse wrap-reverse` so its photo still stacks ABOVE the copy even
     though the copy comes first in the DOM — measured on the reference at 390,
     where all four photos sit on top. */
  .meet-our-doctor-wrapper { flex-flow: row wrap; gap: 2rem; }
  .meet-our-doctor-wrapper._2 { flex-flow: row-reverse wrap-reverse; }
  .emergency-dental-images { width: 100%; }
  .new-patients-content-wrapper { width: 100%; padding: 40px 20px; }
}
@media screen and (max-width: 767px) {
  .emergency-dental-images { padding: 1rem; }
  .button-4 { padding: 12px 32px; text-align: center; }
}
@media screen and (max-width: 479px) {
  .emergency-dental-service-wrapper { gap: 2rem; padding-inline: 0; }
  .new-patients-content-wrapper { padding: 40px 0 0; }
  .text-size-xmedium { font-size: 1.1rem; line-height: 150%; }
  .button-wrapper-2 { gap: 1.5rem; flex-flow: wrap; }
  .emergency-dental-images { margin-left: 0; }
  .button-4 { margin-top: 0; padding-block: 8px; font-size: 16px; }
}

/* ==========================================================================
   /same-day-booking — "Are You Looking For A New Dentist?"          2026-09-10
   ==========================================================================
   Transcribed from site.css 6559-6590 and 7468-7476. The block had been the left
   half of a `.grid grid--2`, which halved its measure: h2 464.0 wide at 1024
   against the original's 841.0. The original is a full-container card, never two
   columns, at any width.

     .new-dentist-section    padding-block 40px
     .new-dentist            flex COLUMN, justify+align centre, gap 1.5rem,
                             padding-block 60px, radius 1rem,
                             linear-gradient(#0006,#0006) over 3429.jpg,
                             background-size auto, cover
     .new-dentist-paragrpah  width 63%, 54% at >=1440, white, centred, 1rem/150%
                             (the original's own spelling of the class)
     .white                  color var(--white)

   `align-items: center` is what makes the h2 shrink-to-fit, and that is where the
   841.0 comes from — it is the max-content width of the heading at 48px, not a
   declared width. It falls to 700.8 at 768 (container-limited) and wraps to two
   lines at 390.

   Height decomposes exactly at 1440: 440.6 = 120 padding + 3 gaps x 24 + pill 40
   + h2 57.6 + p 96 + button 55.

   The two LOCAL PINS this block used to carry — `margin: 0` on the h2 and on the
   paragraph — were REMOVED 2026-09-10 by AP-034, which set the globals to the
   original's explicit 0 on all seven of h1..h6 and p. They existed only to undo
   the rebuild's 1rem locally; with the global correct they are redundant. The
   440.6 they were protecting is now produced by the global rule instead, and is
   re-measured in VISUAL_QA.md.
   -------------------------------------------------------------------------- */
.new-dentist-section { padding-block: 40px; }
.new-dentist {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding-block: 60px;
  border-radius: 1rem;
  background-image: linear-gradient(#0006, #0006), url("/images/services/3429.jpg");
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}
.new-dentist .white { color: var(--white); }
.new-dentist-paragrpah {
  width: 63%;
  color: var(--white);
  text-align: center;
  font-size: 1rem;
  line-height: 150%;
}
@media screen and (min-width: 1440px) {
  .new-dentist-paragrpah { width: 54%; }
}

/* ==========================================================================
   /services — the index page                            Round E, ticket 2
   ==========================================================================
   The rebuild had collapsed the original's TWO hero blocks into one and lost
   four images. Transcribed from site.css; every figure is the reference's own
   box at 1440 with a 900-tall viewport.

   `.services-index-hero` (min-height 420) and `.services-index-hero__lead`
   were DELETED with this change: the lead no longer lives in the hero, and
   `.service-hero`'s own 60vh (=540) already matches the original exactly.
   -------------------------------------------------------------------------- */

/* site.css:4093 — `max-width: 100%; padding-top: 150px`, 0 at <=991.
   Reference: 1440 x 499 at (0, 540). */
.hero-section-services { max-width: 100%; padding-top: 150px; }

/* site.css:4156 — reference 1340 x 349 at (50, 690). The 20px margin inside a
   1380 `.main-container` is what puts it at x=50. */
.hero-wrapper-copy {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: 60px;
  margin-inline: 20px;
  padding-bottom: 60px;
}

/* site.css:4186 — a one-column grid (`2.25fr`) with place-items centre.
   Reference 1340 x 289 at (50, 690). */
.hero-text-copy-servces {
  display: grid;
  grid-template-columns: 2.25fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center;
  gap: 40px;
  height: auto;
  border-radius: 30px;
  position: relative;
}

/* AP-052, 2026-09-11. `.hero-services-left` carries NO class rule in the
   original's 212KB — it is styled by the Webflow node rule
   `#w-node-_1bf8eca9-12d0-15a6-798e-2aeead72ae55-56088f0c { place-self: stretch
   stretch }` (site.css:11997, a BASE rule; the `@media (max-width: 479px)` block
   above it closes at 11920). Reproduced on the class because there is exactly
   one such element on the one page that has it — grepped.

   It is not cosmetic. `.hero-text-copy-servces` sets `place-items: center`,
   which makes every grid item shrink-to-fit its track; `place-self: stretch`
   opts this one out, and that is the whole reason the column measures its track
   width — 436.250 at 768 — instead of shrink-wrapping to 500 and centring at
   x=134. The rebuild had no rule at all here. */
.hero-services-left { place-self: stretch stretch; }

/* site.css:4167 — reference 700 x 289 at (370, 690). */
.heading-copy {
  z-index: 99;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  font-size: 2rem;
  position: static;
}

/* site.css:2326 — 52px/500 on a 100% line, capitalized, margin-bottom 20.
   NOT the site h1 (67.2px/700). Reference 593.375 x 52 at (423.313, 690);
   45px at <=991. */
.homepage-heading {
  color: var(--black);
  text-align: center;
  letter-spacing: normal;
  text-transform: capitalize;
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 500;
  line-height: 100%;
}
/* site.css:4491 and 4500. The paragraph is 18px/26 but every word of it sits
   inside `strong.bold-text-10` at 22px/33, which is what makes the block four
   lines and 132 tall. Reference 700 x 132 at (370, 762). */
.paragraph-17 {
  color: var(--black);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}
.bold-text-10 { text-align: center; font-size: 22px; font-weight: 400; line-height: 33px; }

/* site.css:4586 — NOT the site `.btn` and NOT `.button-4`: 14px/40px padding
   on an 18px/700/33 line makes it 65 tall against .btn's 52 and .button-4's 57.
   Reference 277.969 x 65 at (581.016, 914). */
.button-4-copy-services {
  display: inline-block;
  border: 2px solid var(--body-background);
  background-color: var(--earls-green);
  color: var(--white);
  border-radius: 30px;
  margin-top: 20px;
  padding: 14px 40px;
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
.button-4-copy-services:hover {
  border-color: var(--limeade);
  background-color: #fff;
  color: var(--limeade);
}
/* ==========================================================================
   /services hero — the breakpoint blocks                            AP-052
   ==========================================================================
   The band matches the original at **0.000 on x, w and h at 1024 and above**
   and diverged below 992 only. The rebuild had exactly FOUR breakpoint rules
   for the whole band (the `<=991` block that used to sit above `.paragraph-17`)
   against the original's eighteen declarations across three breakpoints, which
   is why three texts landed at x 134.000 / 151.109 / 244.609 against
   20.000 / 20.766 / 99.141 at 768. Those three x deltas were never three
   defects — they are what a missing `grid-template-columns` two levels up looks
   like from the leaf.

   Declared 991 -> 767 -> 479, DESCENDING, matching the original's own source
   order; at equal specificity the later block wins, so ascending order would
   hand the 479 rules to a 900px viewport.

   Source lines, in order: 8182, 8212, 8221, 8234, 7656, 8368 (<=991);
   9639, 9645, 9651, 9083, 9784, 9801 (<=767);
   11068, 11074, 11080, 10490, 11220, 11266 (<=479).

   Two declarations in those blocks are deliberately NOT copied because they are
   inert on this page and copying them would be noise: `.heading-copy`'s
   `bottom: 25% / 26% / 24%` (the element is `position: static` from the base
   rule at 4167) and `#w-node-f7560e4c…`'s `grid-area: span 1 / span 2` on the
   h1 (its parent `.heading-copy` is `display: flex`, so grid placement does
   nothing). Both verified against the reference's computed styles, not assumed.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .hero-section-services { padding-top: 0; }
  .hero-wrapper-copy { gap: 40px; margin-top: 120px; padding-bottom: 40px; }
  /* `justify-content` flips space-between -> center and a 20px bottom padding
     appears. The rebuild had only the 500px cap. */
  .heading-copy { gap: 0; justify-content: center; align-items: center; max-width: 500px; padding-bottom: 20px; }
  /* The one that moved everything. A one-column `2.25fr` grid becomes a TWO
     column `1.25fr .75fr` row with `justify-content: space-between`. At 768 the
     728px measure less a 30px gap leaves 698, and 1.25/2 of that is the
     436.250 the original's left column measures. */
  .hero-text-copy-servces {
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1.25fr 0.75fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
  .homepage-heading { font-size: 45px; }
  .bold-text-10 { font-size: 18px; }
}
@media screen and (max-width: 767px) {
  .hero-wrapper-copy { gap: 40px; margin-top: 100px; }
  .hero-text-copy-servces {
    gap: 20px;
    text-align: center;
    grid-template-rows: auto auto;
    grid-template-columns: 1.25fr;
  }
  .homepage-heading { text-align: center; max-width: 500px; font-size: 42px; }
  .bold-text-10 { line-height: 28px; }
  /* site.css:9801. This button is the original's own shared component — the
     /services hero CTA here and the service-detail CTA (AP-051) — so this rule
     and the 479 one below land on both. At 390 the original measures
     261.969 x 61; the rebuild measured 278.781 x 65. */
  .button-4-copy-services { text-align: center; padding: 12px 32px; }
}
@media screen and (max-width: 479px) {
  .hero-wrapper-copy { gap: 30px; margin-top: 90px; }
  .heading-copy { max-width: 350px; font-size: 14px; }
  .hero-text-copy-servces { gap: 15px; }
  /* site.css:10490. The h1 becomes a centred FLEX COLUMN with a 70px top
     margin, a 480 cap and a 60px line on 32px type — the rebuild left it a
     block at 32px/60px with no margin, 350 x 90 against the original's
     350 x 120. */
  .homepage-heading {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    max-width: 480px;
    margin-top: 70px;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 32px;
    line-height: 60px;
  }
  .bold-text-10 { font-size: 18px; }
  /* site.css:11266. */
  .button-4-copy-services { margin-top: 15px; }
}

/* --- the grey category panel: site.css:4507-4565 -------------------------- */
/* Reference at 1440: .intro-wrapper 1300 x 473.328 at (70, 1099);
   .image-intro 1280 x 473.328 at (80, 1099); columns 590/590 with a 40 gap, so
   the photo lands at x=110 and the icon column at x=740. */
.intro-wrapper { margin: 60px 40px; }
.image-intro {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 40px;
  /* The original does not declare this on the class — it centres each child
     with a per-node rule, site.css:12005 `place-self: center` on
     .image-intro-services and 12009 `align-self: center` on .services-topics.
     Both columns fill their track horizontally, so centring the whole row is
     equivalent and is what puts .services-topics at y=1176.438 rather than
     1159 (stretched). */
  align-items: center;
  background-color: var(--nav-background);
  border-radius: 25px;
  margin: 60px 10px 0;
  padding: 40px 30px;
}
.image-intro-services { border-radius: 25px; }
.image-56 {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  border-radius: 25px;
  display: block;
}
.services-topics {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-block: 20px;
}
.topic-1 { display: flex; justify-content: flex-start; align-items: center; gap: 15px; }
/* 400x400 files displayed at 72 by max-width/max-height, 60 at <=479. */
.image-55 { display: block; width: auto; height: auto; max-width: 72px; max-height: 72px; }
/* site.css:4561 is only `margin-top: 0`; the black comes from the original's
   global `h3 { color: var(--black) }` (site.css:2168). This rebuild's global h3
   is `--color-heading-alt` (earls-green), so the colour is pinned here rather
   than moved globally — the global h3 colour is not this ticket. Reference:
   503 x 48 at (827, 1176.438 / 1289.25 / 1402.063), 40px/700/48px, rgb(0,0,0). */
.heading-34 { margin-top: 0; color: var(--black); }
/* Reference 503 x 44.813, 16px/400/22.4px, rgb(51,51,51). */
.paragraph-19 { font-size: 16px; }

@media screen and (max-width: 991px) {
  .intro-wrapper { margin: 40px 20px; }
  .image-intro { grid-template-rows: auto auto; grid-template-columns: 1fr; margin-top: 40px; }
}
@media screen and (max-width: 767px) {
  .intro-wrapper { margin-inline: 20px; }
}
@media screen and (max-width: 479px) {
  .image-intro { gap: 20px; padding: 30px 20px; }
  .topic-1 { gap: 10px; }
  .image-55 { max-width: 60px; max-height: 60px; }
  .heading-34 { font-size: 20px; line-height: 28px; }
  .paragraph-19 { font-size: 14px; }
}

/* ------------------------------------------------- services index cards ---
   AP-049, 2026-09-11. The whole component, transcribed from the original in
   one pass. Class-name map, rebuild : original —

     .all-services        : section.main-service-section
     .grid--3             : div.service-grid.w-dyn-items
     .card-item           : div.item.w-dyn-item
     a.card__anchor       : a.service-card-link.w-inline-block
     article.card         : div.service-card
     .card__media         : div.service-card-image-2
     .card__media img     : img.card-image
     .card__body          : div.service-card-content-wrapper
     h4.card__title       : h4.service-card-title
     .card__cta           : div.view-more-box
     .card__cta-text      : div.view-more-text

   The original's own names are not reused verbatim for exactly one reason:
   its wrapper is `.service-card`, and `.service-card` is already
   /same-day-booking's feature card in home.css — a page that loads home.css
   and service.css together. Taking the name would have restyled another page's
   cards. Every declaration below is the original's, in its original order. */

/* The band. The original's `section.main-service-section` carries NO CSS rule
   at all, so it is transparent over the white body; the rebuild had
   `background: var(--tint-blue)` = rgb(246, 248, 251) across 1440 x 2938.656.
   This is not cosmetic trim on the ticket — the original's card paints NO
   background of its own (neither `.service-card-link`, `.service-card` nor
   `.service-card-content-wrapper` sets one, all three measure
   rgba(0, 0, 0, 0)), so the tint was showing THROUGH the card body. The card
   cannot be transcribed and the band left tinted. Declared in VISUAL_QA.md.
   `.all-services` is kept as a selector because every rule below is scoped to
   it; it just no longer paints. The declaration that was here read
   `.all-services { background: var(--tint-blue); }`. */

/* The heading-to-grid gap. The original's `.wrapper-2` is a flex column whose
   row-gap is 4rem, 3rem at <=991 and 2rem at <=479; the rebuild's
   `.section-heading` carries a flat `margin-bottom: var(--space-7)` = 3rem.
   Measured on the grid's own top edge, that was -16.000 at 1920/1440/1280/1024,
   0.000 at 768 and +16.001 at 390. Scoped to this section: `.section-heading`
   is shared with 11 other bands that are not being touched. */
.all-services .section-heading { margin-bottom: 4rem; }

/* Round E ticket 2, the grid. The original's `.service-grid` is a wrapping
   FLEX row with `justify-content: space-between` and `.item { width: 32% }`
   (47% at <=991, 100% at <=767) and a 1.3rem gap — not a 3 x 1fr CSS grid with
   a 2rem gutter. Round G ticket 3 then found the 991 `gap: 2rem` override had
   never been transcribed (css-traps §7), worth -11.2px per row below 992. */
.all-services .grid--3 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  grid-template-columns: none;
  gap: 1.3rem;
}
.all-services .card-item { width: 32%; }

/* `.service-card-link`. The whole card is the link on the original; the
   rebuild had no card anchor at all and only "View More" was clickable. The
   white panel, 1px border and 24px radius the rebuild painted on `.card` are
   gone: the original paints a shadow and a .7rem radius HERE, on the anchor,
   and nothing anywhere else. `max-width: 100%` and `display: inline-block` are
   Webflow's `.w-inline-block`, which the original's anchor also carries and
   which is what keeps the 612px-wide photograph inside the 440.313 column. */
.all-services .card__anchor {
  display: inline-block;
  max-width: 100%;
  border-radius: 0.7rem;
  overflow: clip;
  text-decoration: none;
  box-shadow: 0 2px 5px #0003;
}
.all-services .card { display: flex; flex-flow: column; }

/* Round G ticket 3(a), carried over from main.css unchanged. The photographs
   are INTRINSICALLY sized — `.service-card-image-2` is `width: 100%;
   overflow: clip` and `img.card-image` has no rule but Webflow's normalize
   default — never cropped to a uniform 3/2 box:
     ar 1.5    (612x408)  ->  440.313 x 293.531   13 of the 18
     ar 1.897  (612x323)  ->  440.313 x 232.375    2 cards
     ar 1.5037 (612x407)  ->  440.313 x 292.813    2 cards
     ar 1.5494 (612x395)  ->  440.313 x 284.188    1 card
     ar 1.2487 (1864x1493) -> 440.313 x 352.656   card-image.png */
.all-services .card__media { width: 100%; overflow: clip; }
.all-services .card__media img { width: 100%; height: auto; transition: all 0.4s; }
.all-services .card__media img:hover { transform: scale(1.1); }

/* `.service-card-content-wrapper`. The rebuild's `.card__body` was
   440.313 x 147.188 against the original's 440.313 x 122 — padding 24 against
   20, gap 12 against 18, `justify-content: normal` against center,
   `align-items: normal` against flex-start, and `flex: 1` which the original
   does not set at all (its body does not stretch; a short card in a tall row
   stays short, and the row does not bottom-align). */
.all-services .card__body {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.125rem;
  padding: 20px;
}

/* `h4.service-card-title` — 226.813 x 24 at 18px/24px/700 rgb(0, 0, 0).
   The rebuild had `h3.card__title` 392.313 x 33.594 at 28px/33.6. The size is
   set explicitly because main.css's global `h4` is var(--fs-h4) = 1.75rem;
   the original's global is `h4 { margin: 0; font-weight: 700; font-size: 18px;
   line-height: 24px }` and `.service-card-title { color: var(--black) }`. */
.all-services .card__title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--black);
}

/* `.view-more-box` / `.view-more-text` — a 101.219 x 40 pill, 10rem radius,
   rgb(137, 154, 0), with white 14px/20px text. The rebuild had
   `a.card__link` 392.313 x 20 of plain rgb(103, 132, 40) text with
   `margin-top: auto`. Both `:hover` transforms are the original's own. */
.all-services .card__cta {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  border-radius: 10rem;
  background-color: var(--limeade);
  transition: all 0.4s;
}
.all-services .card__cta:hover { transform: scale(0.9); }
.all-services .card__cta-text { color: var(--white); }

@media screen and (max-width: 991px) {
  .all-services .card-item { width: 47%; }
  .all-services .grid--3 { gap: 2rem; }
  .all-services .section-heading { margin-bottom: 3rem; }
}
@media screen and (max-width: 767px) { .all-services .card-item { width: 100%; } }
/* 479, not 767 — the original's `.wrapper-2` gap drops at the 479 breakpoint
   while `.item` goes full width at 767. Two different breakpoints on two
   different properties; css-traps §7. */
@media screen and (max-width: 479px) { .all-services .section-heading { margin-bottom: 2rem; } }

/* ==========================================================================
   AP-061 — the Canadian Care Dental Plan band on /same-day-booking.
   TRANSCRIBED, not designed. The rebuild had reduced this whole band to a
   single `a.btn.btn--outline` labelled "Canadian Dental Care Plan" tucked
   inside the billing block; the original is its own `section.canadian-section`
   sitting between the billing section and the contact form.

   Measured on _kit-out/ref/same-day-booking.html at every breakpoint:

     width  section-padding  box            box padding   h2            subtitle
     1440   80px 32px        80% of 1376    40px 0        48/57.6       24/28.8
      991   64px 16px        100%           40px 20px     40/48         19.2/23.04
      767   56px 16px        100%           40px 20px     33.6/40.32    19.2/23.04
      479   48px 16px        100%           40px 20px     28.8/34.56    19.2/23.04

   `.section-padding` and `.main-container` are already transcribed globally and
   supply the outer figures, so only the box and its two text elements are
   defined here. `a.button-au._2` is already in main.css and matched the
   original exactly (173.9 x 55, radius 30, padding 10px 36px, earls-green).

   Vertical arithmetic at 1440 checks out against the measured 261.4 box:
     40 + 57.6 + 20 + 28.8 + 20 + 55 + 40 = 261.4

   #f6f8eb occurs only here, so it stays a literal rather than becoming a token.
   ========================================================================== */
.canadian-care-box {
  width: 80%;
  margin: 0 auto;
  padding: 40px 0;
  background-color: #f6f8eb;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.canadian-care-box .heading-43 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 57.6px;
  font-weight: 700;
  color: #000;
}

/* Arial, not the brand face — measured. Consistent with AP-023: the original is
   Arial on 42 of its 52 pages and this band is one of them. */
.canadian-subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 700;
  color: var(--earls-green);
}

@media screen and (max-width: 991px) {
  .canadian-care-box { width: 100%; padding: 40px 20px; }
  .canadian-care-box .heading-43 { font-size: 40px; line-height: 48px; }
  .canadian-subtitle { font-size: 19.2px; line-height: 23.04px; }
}

@media screen and (max-width: 767px) {
  .canadian-care-box .heading-43 { font-size: 33.6px; line-height: 40.32px; }
}

@media screen and (max-width: 479px) {
  .canadian-care-box .heading-43 { font-size: 28.8px; line-height: 34.56px; }
}