/* ==========================================================================
   Homepage sections
   ========================================================================== */

/* --------------------------------------------------------------- 01 Hero -- */
/* REWRITTEN 2026-09-10 (AP-036, Maya ticket 1). The whole block was the
   original's `@media (max-width: 991px)` rules applied as BASE rules, plus one
   `@media (max-width: 479px)` rule applied at every width — the same mistake
   css-traps.md §7 records for the service pages. What the original actually
   declares:

     site.css:6645  .main-hero-section          margin-top: 112px  (clears the
                                                fixed 133px-tall header)
     site.css:5873  .section-padding            padding: 5rem 2rem
     site.css:2383  .main-container             width 100%, max-width 1380px
     site.css:6649  .hero-main-content-wrapper  display flex, space-between
                                                — NO wrap, NO gap
     site.css:6654  .hero-left-wrapper          width 43%, column, gap 1.5rem,
                                                justify center, align flex-start
     site.css:6694  .main-hero-image-wrapper    width 45%, column, justify and
                                                align centre
     site.css:6702  .main-hero-image            width: 100%
     site.css:6706  .div-block-43               radius 1.5rem, overflow clip,
                                                box-shadow 0 2px 5px #0003
     site.css:8890  at <=991                    wrapper gap 4rem + flex-flow
                                                wrap; BOTH columns width 100%
     site.css:11828 at <=479 ONLY               .main-hero-image width 70%,
                                                margin-left 158px

   The rebuild had `width: 130%; margin-left: 158px` on the image at every width
   >=1280 and a comment asserting the original did that unconditionally. It does
   not — that declaration lives inside the 479px block. Measured at 1440 the
   rebuild's photograph ran to x=1754.297 against a container right edge of
   1408: 314.3px past the viewport, with only 61.1% of the picture on screen.
   `.hero { overflow-x: clip }` was added to hide that, which is why the sweep's
   scrollWidth check read clean; it is REMOVED with the cause. The original's
   own only clip is on `.div-block-43`, around the image's border radius. */
.hero {
  margin-top: 112px;
  padding: var(--section-padding-y) var(--section-padding-x);
}

.hero__grid {
  display: flex;
  justify-content: space-between;
}
.hero__content {
  width: 43%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}
.hero__media {
  width: 45%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
/* `.hero-left-wrapper.about` (site.css) — /about-us's hero copy column is 50%
   where the homepage's is 43%. Both go to 100% at <=991 via the rule below. */
.hero__content--about { width: 50%; }

/* `.hero__lead` and `.hero__actions` were shared with /same-day-booking's
   `.sdb-hero`; since Round E ticket 3 that page uses the original's own
   `.hero-paragrpah` / `.hero-button-wrapper` and these are the homepage's only.

   `flex-wrap: nowrap` CORRECTED Round E ticket 11. `.hero-button-wrapper`
   (site.css:6425) is `flex-flow: row` and only becomes `wrap` at ≤767
   (site.css:10337). With `wrap` on at every width the rebuild's two buttons
   dropped onto two lines at 1024 — 137.109 tall against the original's 76.25,
   the +51.750 Round D measured — instead of shrinking in place. The original
   cannot wrap there, so its text wraps inside each button and both come out
   76.25 tall side by side in a 412.797 row. */
.hero__lead { font-size: 1.125rem; max-width: 34rem; margin-bottom: var(--space-6); }
.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-7);
}
@media screen and (max-width: 767px) { .hero__actions { flex-wrap: wrap; } }

/* `.hero-left-wrapper`'s 1.5rem gap does the vertical spacing on the original,
   so the per-child bottom margins that stood in for it are zeroed INSIDE THE
   HERO ONLY. `.hero-peragraph` (site.css:6672) is 18px/150% with no max-width;
   `.hero-button-wrapper` (site.css:6425) is a 1.5rem-gap row. */
.hero .hero__lead,
.hero .hero__actions { margin-bottom: 0; }
.hero .hero__lead { max-width: none; line-height: 150%; }
.hero .hero__actions { gap: 1.5rem; }
/* `.hero-peragraph` drops to 1rem at <=767 (site.css:10362). */
@media screen and (max-width: 767px) { .hero .hero__lead { font-size: 1rem; } }

/* The hero-scoped `.eyebrow { padding: 10px 20px; line-height: 20px }` override
   is GONE with AP-041 (Round G ticket 7). It existed to make one instance of a
   shared pill match `.section-top-title-wrapper`; that class is now transcribed
   properly in main.css and applies at every width and on every page that has it,
   so the scoped patch is no longer needed. Its own comment said the other five
   instances "remain 46.406" — they no longer do. */

/* `.hero-titless` carries its own size ladder, independent of the global h1:
   4.2rem base (inherited), 3.5rem at <=991 (site.css:8981), 3.2rem at <=767
   (10387), 2.2rem at <=479 (11858). The rebuild used --fs-h1, which is 2.9rem
   at <=991 and 2.3rem at <=479 — one line where the original has two. */
.hero__title {
  font-size: var(--fs-h1);
  color: var(--earls-green);
}

/* .experience-wrapper — 40px above the row, 1.5rem between the three boxes,
   .5rem inside each. The rebuild had a 4rem row gap and no top margin. */
.hero__stats {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.hero__stats li { display: flex; flex-direction: column; gap: 0.5rem; }
/* The original's stat is an `h6 > span.coloring-texts` over a `p`, so it takes
   the global h6 (1.8rem / 120% / 700, site.css:2192) and the global p
   (1rem / 140%, site.css:2203). The rebuild had --fs-h3 (2rem) at line-height
   1.1 over --fs-small, which made each box 72 tall against 64.969 and "15+"
   72.766 wide against 52.281. */
.hero__stat-value {
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  color: var(--earls-green);
  line-height: 120%;
}
.hero__stat-label { font-size: 1rem; line-height: 140%; color: var(--color-body); }

/* `.hero__frame` is `.div-block-43` (site.css:6706), added to index.astro as an
   element rather than folded into the <img>. It has to be a real box: at <=479
   the original's image is 70% wide with `margin-left: 158px`, which overflows
   this wrapper, and it is the wrapper's `overflow: clip` that stops the page
   from gaining a horizontal scrollbar. Folding the clip onto `.hero__media`
   instead would also clip the image's own box-shadow, which the original does
   not do — the shadow is on the clipping box, so it paints outside it.
   The photograph is the SAME FILE as the original's:
   `hero-moonstone-dental-team.jpg` and `6848f50d30124d45230d941d_IMG_0155
   Edited.jpg` are both 2400x1600 and share md5
   8152990a9943eb7dcf293f11ea0543a6. The source aspect was never the cause of
   the overflow; `width: 130%` was. */
.hero__frame {
  border-radius: 1.5rem;
  overflow: clip;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.hero__media img { width: 100%; display: block; }

/* Round E ticket 6 — the hero buttons have NO hover state on the original.
   Both of them are `a.hero-call-to-action-wrapper` (site.css:6226, plus the
   `._2._3` variant for "Book Online"), and site.css declares no `:hover` for
   that class at any breakpoint. Measured on the original at 1440: hovering
   either leaves colour, background and border untouched.

   The rebuild inherited the global `.btn` / `.btn-phone` hovers and inverted
   both — `.hero__actions .btn` went rgb(103,132,40) on transparent to
   rgb(255,255,255) on rgb(103,132,40), and `.btn-phone` went the other way,
   with a hue-rotate filter thrown at its icon. Neutralised HERE ONLY: the
   global `.btn:hover` stays, because several buttons elsewhere on the site do
   map to original classes that declare a hover (`.button-au:hover`,
   `.button-4:hover`, `.service-button-copy:hover`).

   `a.hero-call-to-action-wrapper` is also what carries "Meet the Team" in the
   doctor section, and it has no hover there either — reported, not changed,
   because it is outside this ticket.

   Each rule below restates that element's REST value, measured at 1440:
     .hero__actions .btn.btn--outline   transparent / rgb(103,132,40) / green border
     .hero__actions .btn-phone          rgb(103,132,40) / rgb(255,255,255) */
.hero__actions .btn.btn--outline:hover {
  background-color: transparent;
  color: var(--earls-green);
  border-color: var(--earls-green);
}
.hero__actions .btn-phone:hover { background-color: var(--earls-green); color: var(--white); }
.hero__actions .btn-phone:hover .btn-phone__text { color: var(--white); }
.hero__actions .btn-phone:hover .btn-phone__icon img { filter: none; }

/* ==========================================================================
   `.hero-call-to-action-wrapper` metrics                     Round E, ticket 11
   ==========================================================================
   Deferred from Round D and measured there as "52 tall against the original's
   58, +51.750 at 1024". Both hero action rows use the same original component
   (site.css:6226) — the homepage's `.hero__actions` and /same-day-booking's
   `.hero-button-wrapper` — so the fix is scoped to those two rows and NOT to
   the global `.btn` / `.btn-phone`, which stand in for `.button-au` (55),
   `.button-4` (57), `.service-button-copy` (65) and `.cta-button---brix-copy`
   elsewhere.

     .hero-call-to-action-wrapper  gap .5rem, border 2px, radius 10rem,
                                   padding 15px 20px
                                   (padding 14px 20px + centred at <=479)
     .phone-icon-wrapper           padding-RIGHT 15px  (0 at <=767)
     .phone-icon                   max-width 1.5rem    (1.4rem at <=479)
     .phone-text / ._2             1.1rem/400 on an h6's 120% line = 21.125
                                   (1rem at <=767 / <=479)

   `.phone-icon-wrapper { padding: 0 }` was already in this codebase as a
   comment asserting "the original has no circle behind the icon". That is the
   `@media (max-width: 767px)` rule at site.css:10194; the BASE rule at 5714 is
   `padding-right: 15px`, and the reference measures the wrapper at 39 x 24 at
   1440 AND at 768, dropping to 22.391 square only at 390. Third instance of
   the base-vs-media-query trap on this project.

   Reference at 1440: row 424.234 x 58 at x=32; phone pill 250.281 x 58;
   "Book Online" 149.953 x 55.125 at x=306.281. The 55.125 is 34 + 21.125 —
   the h6 line box, not the icon.
   -------------------------------------------------------------------------- */
.hero__actions .btn-phone,
.hero__actions .btn,
.hero-button-wrapper .btn-phone,
.hero-button-wrapper .btn {
  gap: 0.5rem;
  border-width: 2px;
  border-radius: 10rem;
  padding: 15px 20px;
  /* The labels are `h6.phone-text` on the original, and site.css:2194 gives
     every h6 `sweet sans pro`. /same-day-booking's <body> carries no typeface
     class (AP-023), so a <span> here inherits Arial and the pill measured
     231.422 against the original's 250.281 on that page while matching exactly
     on the homepage. Declared, not inherited. */
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
}
/* `a.hero-call-to-action-wrapper._2._3` — /about-us's second hero button.
   WHITE fill, 2px BLACK border, black label, no icon (site.css: `._2` sets the
   white background, `._2._3` the black border; `.phone-text._2` the colour).
   Reference at 1440: 203.281 x 55.125 at (279.781, 598.922), label 159.281 x
   21.125. */
.hero__actions .btn.btn--hero-black {
  background-color: var(--white);
  border-color: #000;
  color: var(--black);
}

.hero__actions .btn-phone__icon,
.hero-button-wrapper .btn-phone__icon { padding-right: 15px; }
.hero__actions .btn-phone__text,
.hero-button-wrapper .btn-phone__text { font-family: var(--font-sans); line-height: 1.2; }

@media screen and (max-width: 767px) {
  /* site.css:10194 and 10304 */
  .hero__actions .btn-phone__icon,
  .hero-button-wrapper .btn-phone__icon { padding-right: 0; }
  .hero__actions .btn-phone,
  .hero__actions .btn,
  .hero-button-wrapper .btn-phone,
  .hero-button-wrapper .btn { font-size: 1rem; }
  /* `.btn-phone__text` declares `var(--fs-h6)` itself, so the row-level 1rem
     above does not reach it. site.css:10304 puts `.phone-text` at 1rem/120%. */
  .hero__actions .btn-phone__text,
  .hero-button-wrapper .btn-phone__text { font-size: 1rem; line-height: 1.2; }
}
@media screen and (max-width: 479px) {
  /* site.css:11762 and 11768 */
  .hero__actions .btn-phone,
  .hero__actions .btn,
  .hero-button-wrapper .btn-phone,
  .hero-button-wrapper .btn { justify-content: center; padding: 14px 20px; }
  .hero__actions .btn-phone__icon img,
  .hero-button-wrapper .btn-phone__icon img { width: 22.4px; height: 22.4px; }
}

@media screen and (max-width: 991px) {
  /* site.css:8890 / 8896 / 8904 */
  .hero__grid { flex-flow: wrap; gap: 4rem; }
  .hero__content,
  .hero__media { width: 100%; }
  .hero__title { font-size: 3.5rem; }
  /* site.css:8900 — the 40px above the stats row is dropped at <=991. */
  .hero__stats { margin-top: 0; }
}
@media screen and (max-width: 767px) {
  .hero__title { font-size: 3.2rem; }
  /* site.css:10352 — `.hero-main-content-wrapper` steps its gap DOWN below 991:
     4rem, then 2.5rem at <=767, then 2rem at <=479. Only the 991 step had been
     transcribed, so the column gap stayed 64 all the way to 390. Found by
     measuring /about-us's hero, where it read 892.219 against 860.25 at 390 —
     exactly the 32px difference between 4rem and 2rem. */
  .hero__grid { gap: 2.5rem; }
}
@media screen and (max-width: 479px) {
  .hero__title { font-size: 2.2rem; }
  /* site.css:11846 */
  .hero__grid { gap: 2rem; }
  /* site.css:11828 — this is where the 70% / 158px offset actually lives, and
     the only width at which the original lets the photograph bleed. The frame
     fills the column and clips what runs past it, so ~200px of a 250.6px-wide
     photograph is visible, exactly as on the original. */
  .hero__frame { width: 100%; }
  .hero__media img { width: 70%; margin-left: 158px; }
  /* `.hero__actions .btn, .hero__actions .btn-phone { width: 100% }` REMOVED
     Round E ticket 11. The original does NOT stretch them at 390: the row is
     358 x 129.594 with the two buttons wrapped and shrink-to-fit at
     219.203 x 54.391 and 140.328 x 51.203. The rebuild had both at 358 wide. */
}

/* --------------------------- 02 the CDCP band, Round G ticket 8 ------------
   TRANSCRIBED from the original. `.trustbar`, `.trustbar__list` and their two
   media rules are DELETED: they described 24px gaps, 28px icons and 14px labels
   flush at x=30, against the original's `padding-inline: 2rem`, 32px icons and a
   17.6px label. Measured original at 1440 — boxes 180.859 / 250.203 / 170.656 /
   224.969 at x 62 / 405.969 / 819.266 / 1153.031, all 32 tall; labels 140.859 /
   210.203 / 130.656 / 184.969 x 20. Section height 72, not 68.

   NOTE the responsive shape: the original does NOT change the label size below
   767 the way the rebuild did. It gives each box a WIDTH (46% at <=991, 100% at
   <=479) and shrinks only the ICON, to 1.7rem. The wrapper wraps with a 1.5rem
   gap and 1rem of side padding at <=991. */
.cdp-accepted-section { background-color: var(--earls-green); padding-block: 20px; }
.accepting-wrapper {
  display: flex;
  justify-content: space-between;
  padding-inline: 2rem;
}
.accepted-boxes { display: flex; gap: .5rem; justify-content: flex-start; align-items: center; }
.accepted-icon { width: 100%; max-width: 2rem; height: auto; flex: 0 0 auto; }
.accepted-text { color: var(--white); font-size: 1.1rem; font-weight: 500; }

@media screen and (max-width: 991px) {
  .accepting-wrapper { gap: 1.5rem; flex-flow: wrap; padding-inline: 1rem; }
  .accepted-boxes { width: 46%; }
  .accepted-icon { max-width: 1.7rem; }
}
@media screen and (max-width: 479px) {
  .accepted-boxes { width: 100%; }
}

/* --------------------------------------------------- 03 Appointment form -- */
.section-heading__lead {
  max-width: 52rem;
  margin-inline: auto;
  color: var(--color-body);
}

/* `.appointment-form-wrap` DELETED 2026-09-11 (Maya review #6, T2) together
   with its markup. It was a rebuild-only panel with `max-width: 46rem`, which
   capped the homepage's top form at 670.000px at every width from 1280 up; the
   original frames that form in `.hero-form-wrapper` at 80% of its container
   (home.css:1089, transcribed from site.css:6132) with no cap at all. Zero
   references remain in src/. */

/* ---------------------------------------------------------- 04 Promo ------
   REWRITTEN 2026-09-10 (AP-036, Maya ticket 4). This block is not a Webflow
   section — the original ships it as a `<style>` + markup embed inside
   `.appoinment-section`, with its own self-contained `.msd-holiday-*`
   stylesheet. Every value below is transcribed from that embed, which is in
   `_kit-out/ref/__home.html` (the `<div class="w-embed">` before `section.cta`).

   Three separate defects, one cause — the embed was reinterpreted as a
   `.section > .container > grid` instead of copied:
     1. the photograph was in the RIGHT column; it is first on the original
     2. `object-fit: cover` in a 1.073-aspect box cropped 16.8% of a 1.290
        source; the original is `contain` in a box of exactly the source
        aspect, i.e. 0% cropped
     3. `.msd-img-wrap`'s `linear-gradient(145deg, #eef5dc, #fff)` backdrop and
        the `.msd-img-frame` mount inside it were both absent

   `--container-max` (1380) and `.section`'s 5rem/2rem padding were also wrong:
   the original's inner is `max-width: 1200px` inside a section padded
   `80px 16px`, which is why the inner measured 1376 against 1200.
   ------------------------------------------------------------------------ */
.promo {
  position: relative;
  padding: 80px 16px;
  background: #f5f9ee;
  overflow: hidden;
}
/* The two rotated dot-grid corners. Decorative, `pointer-events: none`, and
   invisible to the rig — transcribed because they are part of the picture. */
.promo::before,
.promo::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  background:
    radial-gradient(circle at 30% 30%, rgba(170, 205, 53, 0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 40%, rgba(170, 205, 53, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 75%, rgba(170, 205, 53, 0.12) 0 2px, transparent 3px);
  opacity: 0.7;
  pointer-events: none;
  transform: rotate(12deg);
}
.promo::before { top: 18px; right: 22px; }
.promo::after { bottom: 18px; left: 22px; }

.promo__inner {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  border: 2px solid #dbe8a8;
  display: flex;
  gap: 36px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06);
}

.promo__media {
  position: relative;
  flex: 1 1 52%;
  padding: 26px;
  background: linear-gradient(145deg, #eef5dc, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo__frame {
  width: 100%;
  height: auto;
  max-height: 440px;
  border-radius: 20px;
  border: 4px solid #dfeac1;
  overflow: hidden;
  background: #ffffff;
  padding: 8px;
}
.promo__frame img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.promo__body {
  flex: 1 1 48%;
  padding: 32px 32px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #222325;
}
/* `.msd-eyebrow` and `.msd-local`, RESTORED Round E ticket 10 (AP-038).
   Verbatim from the original's own embedded <style>. Reference at 1440:
   the pill 524.531 x 34 at (761.469, 1845.484), the closing line
   524.531 x 60 at (761.469, 2476.953). */
.promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #ecf5cd;
  color: #6f8a15;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.promo__local { font-size: 0.95rem; color: #3b3b3b; margin-top: 10px; }
.promo__heading {
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.25;
}
.promo__heading span { color: #aacd35; }
.promo__subheading { font-size: 1.05rem; color: #2b2b2b; font-weight: 600; margin: 0 0 12px; }
.promo__text { margin-bottom: 14px; font-size: 1rem; color: #444; }
.promo__list { margin: 0 0 18px; padding: 0; list-style: none; }
.promo__list li { display: flex; gap: 10px; margin-bottom: 10px; font-size: 0.96rem; color: #333; }
.promo__bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #aacd35;
  margin-top: 7px;
  flex: 0 0 10px;
}
.promo__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; align-items: center; }
.promo__btn {
  padding: 13px 28px;
  border-radius: 999px;
  background: #aacd35;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #9fbf2f;
  box-shadow: 0 12px 26px rgba(170, 205, 53, 0.45);
  transition: 0.2s;
}
.promo__btn:hover { background: #9dbc2b; transform: translateY(-2px); }
.promo__phone a { color: #4f6613; font-weight: 700; text-decoration: none; font-size: 16px; }
.promo__phone a:hover { text-decoration: underline; }

/* The embed's own breakpoints are 991 and 600 — NOT the site's 991/767/479. */
@media (max-width: 991px) {
  .promo__inner { flex-direction: column; }
  .promo__body { padding: 24px 22px 32px; }
  .promo__media { padding: 20px; }
  .promo__frame img { max-height: 360px; }
}
@media (max-width: 600px) {
  .promo__frame img { max-height: 320px; }
}

/* -------------------------------------------------------- 05 CDCP CTA ----- */
/* REWRITTEN 2026-09-10 (AP-036, Maya ticket 5). The panel lost its decorative
   background and its box.

     site.css:4736  .cta-v1-wrapper---brix   background-color var(--limeade)
                                             PLUS bg-01-cta-webflow-cloneable-
                                             template-brix-templates.svg at
                                             position 100%, no-repeat, contain;
                                             radius 30, align-items centre,
                                             margin 40px 20px 0, padding 64,
                                             display flex, overflow hidden
     site.css:4731  .cta-v1-content---brix   max-width 500px, colour #fff
     site.css:4781  .title---brix.cta-v1-title---brix  #fff, margin-bottom 32,
                                             line-height 1.27778 (h2, so 3rem)
     site.css:4773  .subtitle---brix         #fff, uppercase, letter-spacing
                                             .12em, margin-bottom 13
     site.css:4895  .cta-button---brix-copy  #000 on #f3f1ff, radius 80,
                                             padding 18px 40px, 700, lh 20
     site.css:8424  at <=991                 padding 20px 56px 40px
     site.css:9835  at <=767                 radius 20, padding-inline 45;
                                             title 34px/1.1, margin-bottom 40;
                                             .bold-text-13 32px; button
                                             padding-inline 32
     site.css:11299 at <=479                 bg-position 0%, bg-size COVER,
                                             padding 40px 24px; title 24px,
                                             margin-bottom 20; button 100%
                                             wide, display block, padding-inline 30

   The SVG was already in the repo at public/images/ui/ and referenced by zero
   pages. `section.cta` itself has no padding and no `.section-padding`, so the
   `.section` class is off the markup; the container is `.main-container`
   (1380, no side padding) directly. */
.cdcp-cta .container {
  /* The original's `.w-container` has Webflow's clearfix pseudo-elements, which
     stop `.cta-v1-wrapper---brix`'s 40px top margin collapsing out of the
     section. A plain <div> has no such barrier, so the section would measure
     393.656 instead of 433.656 and the 40px would land above it. */
  display: flow-root;
}
.cdcp-cta__inner {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 40px 20px 0;
  padding: 64px;
  border-radius: 30px;
  background-color: var(--limeade);
  background-image: url("/images/ui/bg-01-cta-webflow-cloneable-template-brix-templates.svg");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.cdcp-cta__content { max-width: 500px; color: var(--white); }
.cdcp-cta__title { color: var(--white); margin-bottom: 32px; line-height: 1.27778; }
.cdcp-cta__subtitle {
  color: var(--white);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 13px;
  padding-top: 0;
}
.cdcp-cta__btn {
  display: inline-block;
  color: var(--black);
  text-align: center;
  background-color: #f3f1ff;
  border: 1px solid transparent;
  border-radius: 80px;
  padding: 18px 40px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.cdcp-cta__btn:hover { color: var(--white); background-color: transparent; border-color: var(--white); }

@media screen and (max-width: 991px) {
  .cdcp-cta__inner { margin-inline: 20px; padding: 20px 56px 40px; }
}
@media screen and (max-width: 767px) {
  .cdcp-cta__inner { border-radius: 20px; padding-inline: 45px; }
  .cdcp-cta__title { margin-bottom: 40px; font-size: 34px; line-height: 1.1; }
  .cdcp-cta__title strong { font-size: 32px; }
  .cdcp-cta__btn { padding-inline: 32px; }
}
@media screen and (max-width: 479px) {
  .cdcp-cta__inner { background-position: 0%; background-size: cover; padding: 40px 24px; }
  .cdcp-cta__title { margin-top: 0; margin-bottom: 20px; font-size: 24px; }
  .cdcp-cta__btn { width: 100%; display: block; padding-inline: 30px; }
}

/* --------------------------------------------------------- 06 Services ----
   `.service-card` is KEPT because /about-us's values grid uses it; only the two
   homepage-only additions to it (`.service-card__name`, `.service-card__sparkle`,
   `.service-card__list`) went with the rewrite below. */
.service-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.service-card__icon { width: 70px; height: 70px; margin: 0 auto var(--space-4); }
.service-card__title { font-size: var(--fs-h4); color: var(--color-heading); margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   REWRITTEN 2026-09-10 (AP-036, Maya ticket 2). The three homepage service
   cards are 400x460 PHOTOGRAPHS on the original, not bordered white boxes, and
   the three check items are a separate centred row below them rather than one
   list item inside each card. Nothing on the rebuilt homepage carried a
   background-image except the footer, which is why the <img> diff could not see
   the loss — the rig never diffs background images.

     site.css:2406  .service-wrapper   text-align centre, margin 0 40px
     site.css:2424  .service-text      flex column, gap 25, justify
                                       space-between, align centre
     site.css:2414  .paragraph-service max-width 685, centred, margin-top 76,
                                       16px/24px, colour var(--black)
     site.css:3582  .cards             grid 1fr 1fr 1fr, gap 48, margin-top 40
     site.css:3594  .card-1            bg cover / 50%, radius 30, flex column
                                       space-between, max-width 400, height 460
     site.css:3630  .card2             ...Screenshot 2025-12-09 174004.jpg
     site.css:3645  .card-3            ...Screenshot 2025-12-09 173947.jpg
     site.css:3559  .bg-overlay        absolute inset 0, transparent, radius 30
     site.css:3609  .card-1-img        white 70x70 disc, radius 100px, margin
                                       30/30, padding 0 10px
     site.css:2392  .image-name        flex, gap 10, white, margin-bottom 30,
                                       margin-inline 40, 18px
     site.css:2436  .text-block-2      25px / 700 / 30px
     site.css:2442  .image-icon        24x24, order -1
     site.css:3700  .instrcation       flex centre, gap 60, margin 40 0
     site.css:3710  .instraction-1     flex, gap 10
     site.css:3718  .image-42          30px
     site.css:3722  .text-block-10     18px/24px   (first item only)
     site.css:3727  .text-block-11/12  16px        (second and third)
     site.css:4825  .service-button-copy  2px border, earls-green, radius 30,
                                          padding 14px 36px, 18px/700/33px
   -------------------------------------------------------------------------- */
.services__wrapper { text-align: center; margin-inline: 40px; }

.services__text {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}
.services__lead {
  max-width: 685px;
  color: var(--black);
  text-align: center;
  margin-top: 76px;
  font-size: 16px;
  line-height: 24px;
}

.services__cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 48px;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
/* The three cards also carry Webflow `#w-node-...` grid-placement rules, which
   are load-bearing and easy to miss because they are keyed by id, not class:
     site.css:11922  all three   place-self: stretch stretch
     site.css:12065  at <=991    card 3 spans BOTH columns, justify-self centre
     site.css:12113  at <=767    cards 1 and 2 justify-self centre;
                                 card 3 back to grid-column: span 1
   Without the first of those the 768 row measured card 1 at x=41 and card 3 at
   x=36, against the original's 36 and 216. */
.services__card {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  place-self: stretch stretch;
  width: auto;
  max-width: 400px;
  height: 460px;
  border-radius: 30px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.services__card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background-color: transparent;
}
.services__card-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  margin: 30px 0 0 30px;
  padding-inline: 10px;
  border-radius: 100px;
  background-color: var(--white);
}
.services__card-icon img { width: 100%; height: 100%; }
.services__card-name {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 0 40px 30px;
  color: var(--white);
  font-size: 18px;
}
.services__card-title { color: inherit; font-size: 25px; font-weight: 700; line-height: 30px; }
.services__card-sparkle { order: -1; position: relative; width: 24px; height: 24px; }

.services__checks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-block: 40px;
}
.services__check { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.services__check img { width: 30px; height: auto; }
/* All three items compute 18px/24px, not 16px. `.text-block-11/12` do declare
   16px (site.css:3727) but the <strong> inside each carries `.bold-text` /
   `.bold-text-2`, which is 18px/24px at site.css:3866 and wins. At <=767 all
   three drop to 16px (9573 / 9780); at <=479 the FIRST goes back up to 18px
   (11220) while the other two stay at 16 — the original's own value, kept.
   Measured before this correction: items 2 and 3 were 229.328 and 220.547 wide
   against 252.766 and 243.156. */
.services__check div { font-size: 18px; line-height: 24px; }

.services__btn {
  display: inline-block;
  border: 2px solid var(--body-background);
  background-color: var(--earls-green);
  border-radius: 30px;
  padding: 14px 36px;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
/* `text-decoration: none` ADDED Round E ticket 6. The colours here already
   matched the original (`.service-button-copy:hover`, site.css:4836 — border
   and text limeade, background white) after Round D's services rewrite; what
   did NOT match was the underline the global `a:hover` was adding on top.
   Measured on the original: hovering "View All Services" changes colour
   rgb(255,255,255) -> rgb(137,154,0), background rgb(103,132,40) ->
   rgb(255,255,255), border -> rgb(137,154,0), and `text-decoration-line` stays
   `none`. The rebuild matched all three colour changes and went
   `none -> underline`. */
.services__btn:hover {
  border-color: var(--limeade);
  background-color: var(--white);
  color: var(--limeade);
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  /* site.css:7675 / 7681 / 7690 / 8053 / 8066 / 8071 / 8077 */
  .services__wrapper { margin: 60px 20px 40px; }
  .services__text { gap: 20px; }
  .services__cards {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    justify-content: stretch;
    place-items: center;
  }
  .services__card { width: 350px; height: 400px; }
  .services__card:nth-child(2) { align-items: stretch; }
  .services__card:nth-child(3) {
    align-items: stretch;
    width: 360px;
    margin-top: 10px;
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }
  .services__card-title { font-size: 20px; }
}
@media screen and (max-width: 767px) {
  /* site.css:9102 / 9106 / 9112 / 9122 / 9447 / 9481 / 9862 + node rules 12113 */
  .services__wrapper { padding-bottom: 20px; }
  .services__cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .services__card:nth-child(1),
  .services__card:nth-child(2) { justify-self: center; }
  .services__card:nth-child(3) { grid-column: span 1 / span 1; }
  .services__lead { margin-bottom: 0; font-size: 16px; line-height: 26px; }
  .services__text { gap: 0; text-align: center; }
  .services__card-title { line-height: 24px; }
  .services__checks { gap: 35px; margin-inline: 20px; }
  .services__check div { font-size: 16px; }
  .services__btn { text-align: center; padding: 12px 32px; }
}
@media screen and (max-width: 479px) {
  /* site.css:10525 / 10532 / 10536 / 10547 / 10855 / 10862 / 10892 / 11330 */
  .services__wrapper { margin: 40px 34px 60px -10px; }
  .services__lead { text-align: center; font-size: 14px; line-height: 24px; }
  .services__text { gap: 15px; }
  .services__cards { grid-template-rows: auto auto auto; gap: 30px; place-items: center; }
  .services__card { width: 300px; max-width: 300px; height: 350px; }
  .services__card:nth-child(3) { gap: 0; }
  .services__card-name { text-align: center; margin: 10px 0 30px; }
  .services__card-title { text-align: center; font-size: 18px; line-height: 28px; }
  .services__checks { flex-flow: column; justify-content: center; align-items: flex-start; gap: 20px; }
  .services__check { gap: 5px; }
  .services__check:first-child div { font-size: 18px; }
  .services__btn { margin-top: 15px; }
}

/* site.css:2451 and 7694 — the empty `section.service-section` spacer between
   the insurance band and the values band. Reference: 1440 × 120 at (0, 7022.109)
   and 1024 × 120; 0 tall at 768 and 390. Round E ticket 8. */
.service-section { padding-block: 60px; }
@media screen and (max-width: 991px) { .service-section { padding-block: 0; } }

/* ------------------------------------------------------- 07 Why choose ---- */
/* `.doctor__grid` and `.values__grid` DROPPED from this group with Round G
   ticket 7/8: the homepage's doctor and values blocks are now the original's own
   `.meet-the-doctor-wrapper` and `.values-wrapper`. `.doctor__grid` is still used
   by /about-us, /emergency-dental and /same-day-booking, so it stays in the
   group; `.values__grid` had the homepage as its only user and is gone. */
.why__grid,
.doctor__grid,
.insurance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
/* `.contact__grid` was deleted with the AP-047 rewrite of /book-an-appointment
   (its last user), and `.contact__form-wrap` with Round G ticket 6, which
   replaced it with the original's `.form-block-au` on all three pages that had
   it. Both deleted rather than left in place, because a dead rule is one of the
   four things the rig structurally cannot see. */

/* The .technology-* rules MOVED to service.css 2026-09-09 and were REPLACED, not
   relocated: they described a single-column list nested in .why__content, which
   is not what the original has. The original is a top-level 3-column grid in its
   own section. See the block comment in service.css. */
.why__list { display: flex; flex-flow: column; gap: 2rem; margin: 1.5rem 0; }

/* ADDED 2026-09-09, the second half of the `.body` background reproduction in
   main.css. The original declares `.why-choose-us-section { background-color:
   #fff }` (site.css:6810) — an EXPLICIT white block, 1440x938 at y=3995, sitting
   on the #f8f9fa body. The rebuild declared nothing, which was invisible while
   the rebuild's body was also white; once the body took the original's #f8f9fa
   this block would have gone grey where the original is white. Measured on the
   captured original at 1440: #f8f9fa covers 47.24% of the homepage and #ffffff
   9.30%. Without this rule the rebuild measured 64.72% / 0.59%. */
.section.why { background-color: #fff; }

/* --------------------------------------------------------------------------
   REWRITTEN 2026-09-10 (AP-036, Maya ticket 3). The section is a green PANEL
   plus a stat column, not a copy-left / photo-right two-up. The panel that
   holds the title, the paragraph, the 2x2 check grid AND the reviews
   photograph was missing entirely, which is why the photograph appeared to
   have moved column: it had not moved, it had been taken out of the panel.

     site.css:6821  .why-choose-us-main-wrapper  flex, gap 2rem
     site.css:6827  .why-choose-left-box   earls-green, radius 1rem, flex
                                           column, gap 2rem, justify centre,
                                           align flex-start, width 60%,
                                           padding 40px
     site.css:6840  .why-choose-us-left-title    28px / 120% / white
     site.css:6846  .why-choose-us-left-paragraph 1.125rem / 140% / white
     site.css:6860  .why-choose-us-image   radius 1rem, width 100%
     site.css:6865  .why-choose-us-right-box  flex column, gap 2rem, width 37%
     site.css:6873  .why-choose-us-block1  black, radius 1rem, flex column
                                           centre, gap .8rem, padding 20px
     site.css:6885  ._0                    background #f3f4f6
     site.css:7169  .service-button-sdsddsdssdcopy  2px border, earls-green,
                                           radius 30, 14px 36px, 18px/700/33px
     site.css:7467  at >=1440              panel 70%, stats 27%, wrapper
                                           space-between, image 70% with auto
                                           side margins, button margin-right 81
     site.css:8934  at <=991               wrapper wraps, panel 100%, stats
                                           become a ROW at 100%
     site.css:10375 at <=767               panel padding 40px 20px, stats wrap
     site.css:11841 at <=479               each stat 100%, button margin-top 15

   The >=1440 block is what produces the numbers in the ticket: 70% of 1376 is
   963.188, its 40px padding puts the checks at x=72, and the image at 70% of
   the 883.188 content box with auto margins lands at x=204.484, 618.219 wide.
   -------------------------------------------------------------------------- */
.why-choose__row { display: flex; gap: 2rem; }
.why-choose__panel {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  width: 60%;
  padding: 40px;
  border-radius: 1rem;
  background-color: var(--earls-green);
}
.why-choose__title { color: var(--white); font-size: 28px; line-height: 120%; }
.why-choose__lead { color: var(--white); font-size: 1.125rem; line-height: 140%; }
.why-choose__image { width: 100%; border-radius: 1rem; }

.why-choose__stats { display: flex; flex-flow: column; gap: 2rem; width: 37%; }
.why-choose__stat {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 20px;
  border-radius: 1rem;
  background-color: var(--black);
}
.why-choose__stat--alt { background-color: #f3f4f6; }
.why-choose__stat h3 { color: var(--black); }
.why-choose__stat h3.accent { color: var(--earls-green); }
.why-choose__stat-label { color: var(--white); font-size: 1.125rem; line-height: 140%; }
.why-choose__stat-label--center { text-align: center; }
.why-choose__stat-label--dark { color: var(--black); }

.why-choose__btn {
  display: inline-block;
  border: 2px solid var(--body-background);
  background-color: var(--earls-green);
  border-radius: 30px;
  padding: 14px 36px;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.why-choose__btn:hover { border-color: var(--limeade); background-color: var(--white); color: var(--limeade); }

@media screen and (min-width: 1440px) {
  .why-choose__row { justify-content: space-between; }
  .why-choose__panel { width: 70%; }
  .why-choose__stats { width: 27%; }
  .why-choose__image { width: 70%; margin-inline: auto; }
  .why-choose__btn { margin-right: 81px; padding-right: 0; }
}
@media screen and (max-width: 991px) {
  .why-choose__row { flex-flow: wrap; }
  .why-choose__panel { width: 100%; }
  .why-choose__stats { flex-flow: row; width: 100%; }
}
@media screen and (max-width: 767px) {
  .why-choose__panel { padding: 40px 20px; }
  .why-choose__stats { flex-flow: wrap; }
  .why-choose__lead,
  .why-choose__stat-label { font-size: 1rem; }
  .why-choose__btn { text-align: center; padding: 12px 32px; }
}
@media screen and (max-width: 479px) {
  .why-choose__stat { width: 100%; }
  .why-choose__btn { margin-top: 15px; }
}

/* Hero badges carry a check icon on the original, not bare text. */
.emergency-badges li img { width: 20px; height: 20px; flex: none; }

/* ==========================================================================
   /same-day-booking — the hero and the request-form section   Round E, ticket 3
   ==========================================================================
   The rebuild had no hero at all: a white `.section.sdb-hero` with the form
   pulled up into a two-column grid on the left, the headline on the right and
   clipped at the top by the fixed header. The original is a full-bleed
   photographic band with centred copy, and the form lives in its own white
   section below it. Transcribed from site.css; reference boxes at 1440:

     section.home-hero          1440 x 684.5 at (0, 0)
     .main-container._2         1380 x 394.5 at (30, 150)
     .hero-wrapper              1380 x 394.5 at (30, 150)
     .hero-content-wrapper2     1324.797 x 394.5 at (57.594, 150)
     .hero-text-wrapper         1284.797 x 394.5 at (77.594, 150)
     h1.hero-titles             873.656 x 184.5 at (283.156, 150)
     p.hero-paragrpah           455.438 x 24 at (492.266, 366.5)
     .hero-button-wrapper       537.813 x 58 at (451.078, 422.5)
     .open-hours-flex           747.188 x 32 at (346.391, 512.5)
     section.appoinment-section 1440 x 738.594 at (0, 684.5)
     .wrapper-center            1376 x 578.594 at (32, 764.5)

   Height decomposes: 684.5 = 150 + 394.5 + 140, and 394.5 = 184.5 + 32 + 24
   + 32 + 58 + 32 + 32.

   `IMG_0230 Edited.jpg` was already on disk at /images/team/img-0230-edited.jpg
   (2400x1600, md5 79bdae17519c46bafd5ffaddc4f4e693) and referenced by zero
   pages — the fourth asset on this project with that signature. It is a CSS
   background, so the page's visible <img> count is unchanged by this ticket.
   -------------------------------------------------------------------------- */
.home-hero {
  background-image: linear-gradient(#0006, #0006), url('/images/team/img-0230-edited.jpg');
  background-position: 0 0, 50% 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  margin-top: 0;
  padding-top: 150px;
  padding-bottom: 140px;
}
.home-hero .hero-wrapper { display: flex; flex-flow: column; gap: 4rem; }
.hero-content-wrapper2 {
  display: flex;
  gap: 2rem;
  width: 96%;
  margin-inline: auto;
  padding-inline: 20px;
}
.hero-text-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
}
/* 3.1rem = 49.6px on a 124% line; 68% of the text wrapper is what gives 873.656. */
.hero-titles {
  width: 68%;
  color: var(--white);
  text-align: center;
  font-size: 3.1rem;
  line-height: 124%;
}
.hero-paragrpah { color: var(--white); margin-bottom: 0; font-size: 16px; line-height: 24px; }
.hero-button-wrapper { display: flex; flex-flow: row; justify-content: flex-start; align-items: center; gap: 1.5rem; }

@media screen and (min-width: 1920px) { .hero-content-wrapper2 { width: 88%; } }
@media screen and (max-width: 991px) {
  .hero-content-wrapper2 { flex-flow: wrap; }
  .hero-text-wrapper, .hero-titles { width: 100%; }
}
@media screen and (max-width: 767px) {
  .home-hero { margin-top: 78px; padding-top: 60px; padding-bottom: 60px; }
  .home-hero .hero-wrapper { gap: 2.5rem; }
  .hero-content-wrapper2 { width: 100%; }
  .hero-text-wrapper { gap: 1.7rem; }
  .hero-titles { font-size: 2.4rem; }
  .hero-button-wrapper { flex-flow: wrap; }
}
@media screen and (max-width: 479px) {
  .home-hero { margin-top: 0; padding-top: 140px; }
  .hero-titles { width: 100%; font-size: 2rem; }
}

.appoinment-section .wrapper { display: flex; flex-flow: column; gap: 4rem; }
.appoinment-section .wrapper-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
/* site.css:6132. 80% wide, 2px earls-green border, 1rem radius, 2rem padding,
   `0 2px 20px #5757575c`. The rebuild had the form in a bare `.contact__form-wrap`
   panel. Field styling inside is the rebuild's own and is unchanged. */
.hero-form-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  width: 80%;
  border: 2px solid var(--earls-green);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 2px 20px #5757575c;
}
@media screen and (max-width: 991px) { .hero-form-wrapper { width: 100%; } }
@media screen and (max-width: 767px) { .hero-form-wrapper { padding-inline: 1.5rem; } }
@media screen and (max-width: 479px) { .hero-form-wrapper { padding: 1.5rem 1rem; } }

/* .open-hours-flex / .not-about-us — the two checklists on /same-day-booking.
   `margin-top` REMOVED Round E ticket 3: the original declares none, and the
   32px above it is `.hero-text-wrapper`'s own 2rem gap. With the row inside a
   `.section` grid it needed a margin; inside the transcribed hero it does not,
   and keeping it put the row at 536.5 instead of the original's 512.5. */
/* CORRECTED Round E ticket 9. site.css:6450/6458/6463 —
   `.open-hours-inner-flex` gap is 1rem, not 0.8rem; `.icon-image` is
   `width: 100%; max-width: 2rem`, i.e. 32 not 24; and `.hourly-paragraph` is
   WHITE at 1rem, which the rebuild had never declared because the row used to
   sit on a white section. It now sits on the restored photographic hero.
   Reference at 1440: rows 207.641 / 227.094 / 264.453, all 32 tall, at
   x=346.391 / 578.031 / 829.125; icons 32 x 32 at those same x. The rebuild
   measured 196.438 / 222.125 / 253.25, all 24 tall, at 360.078 / 580.516 /
   826.641. */
.open-hours-flex { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.open-hours-inner-flex { display: flex; align-items: center; gap: 1rem; }
.open-hours-inner-flex .icon-image { width: 32px; height: 32px; flex: none; }
.hourly-paragraph { margin: 0; color: var(--white); font-size: 1rem; }

/* --- /same-day-booking: the four icons the page was missing (ticket 9) --- */
/* site.css:6536 — the offer pill is `#fff3`, not the `#b2c23333` of the base
   `.section-top-title-wrapper`. The original's parent is a flex column with
   `align-items: center`, which shrink-wraps it; `.service-cta__inner` here is a
   text-align:center BLOCK, so `width: max-content` + `margin-inline: auto`
   produces the same box. Reference: 229.063 x 52 at (605.469, 1483.094), and
   605.469 is exactly (1440 − 229.063) / 2. The 1.5rem below it is
   `.call-to-action-main-wrapper`'s own gap. */
.sdb-offer .section-top-title-wrapper._1 {
  background-color: #fff3;
  width: max-content;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
/* site.css:6489/6495 — the round badge behind each feature icon, 72 x 72
   (32 + 2 x 20 padding) on `#b2c23340`. Reference icons at (242.656,
   2929.234), (703.984, 2917.938) and (1165.328, 2917.938), all 32 x 32. */
.dental-icon-wrapper {
  background-color: #b2c23340;
  border-radius: 50%;
  padding: 20px;
  width: max-content;
  margin-inline: auto;
}
.dental-icon { display: block; width: 32px; height: 32px; }

/* CORRECTED 2026-09-10. `.not-about-us` is a WRAPPING 2-UP grid on the original,
   not a single column, and it declares no margin:

     site.css:6592  .not-about-us            gap 2rem, flex-flow WRAP,
                                             width 100%, display flex
     site.css:6600  .not-about-us-list-flex   gap .8rem, align centre,
                                             justify flex-start, WIDTH 45%
     site.css:11806 at <=479                 .not-about-us gap 1rem;
                                             .not-about-us-list-flex width 100%
     site.css:3965  .icon._2                  25px, not 24px

   Measured on /same-day-booking, the only page that uses these classes, rebuild
   against _kit-out/ref/same-day-booking.html at 1440: the original's list is
   652 x 82 with four 293.4-wide items at x=736 and x=1061.4 on two rows; the
   rebuild's was 656 x 144 with four 656-wide items in one column. The 82
   decomposes as 2 rows x 25 + one 32px gap, and at 390 the 148 as 4 x 25 + three
   16px gaps, which is how the 45%/100% switch was confirmed rather than guessed. */
.not-about-us { display: flex; flex-flow: wrap; gap: 2rem; width: 100%; }
.not-about-us-list-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 45%;
}
.not-about-us-list-flex .icon { width: 25px; height: 25px; flex: none; }
.not-about-us-text { font-weight: 700; }
/* `.not-about-us-text._2` (site.css:6613) — the white variant, used inside the
   homepage's green `.why-choose-left-box`. */
.not-about-us-text--light { color: var(--white); }
@media screen and (max-width: 479px) {
  .not-about-us { gap: 1rem; }
  .not-about-us-list-flex { width: 100%; }
}

/* `.service-card__name` / `.service-card__sparkle` REMOVED 2026-09-10 with the
   homepage card rewrite — see the 06 Services block. /about-us's `.service-card`
   grid never used either. */

/* TRANSCRIBED 2026-09-10, Round F ticket 3 — /about-us "What We Stand For".
   `.stand-for-boxes` / `.service-card-icon` occur on /about-us and nowhere else
   in the 52 captures, so these rules are scoped by the markup, not by a page
   selector.

   The rebuild rendered the four cards as `.service-card` in a `.grid--4`:
   a bare 70 x 70 `<img>` and NO badge, a 28px h3, a 24px radius and a 1px
   border. The original wraps each glyph in `div.service-card-icon` — a
   52.391 x 52.391 earls-green square, 1rem radius, 15px padding, with the glyph
   itself capped at 1.4rem (22.391). Without the wrapper a WHITE glyph is
   invisible on a white card. Card height 208.25 against the rebuild's 280.
   site.css: .stand-for-flex, .stand-for-boxes, .service-card-icon,
   .service-card-icons, .stand-for-title, .stand-for-paragraph. */
.stand-for-flex { display: flex; gap: 2rem; }
.stand-for-boxes {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 24%;
  padding: 20px;
  background-color: var(--white);
  border-radius: 1rem;
  box-shadow: 0 2px 5px #0003;
}
.service-card-icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-color: var(--earls-green);
  border-radius: 1rem;
}
.service-card-icons { width: 100%; max-width: 1.4rem; height: auto; }
/* h6 on the original. The global h6 is 700 (corrected in Round A), and
   1.2rem here overrides the default h6 size. `color: inherit` because the
   original's `.stand-for-title` declares no colour and its h6 therefore
   computes the body's rgb(51,51,51); the rebuild's grouped
   `h1..h6 { color: var(--color-heading) }` was making it rgb(0,0,0). Scoped
   here rather than changed on the group, which 51 other pages depend on. */
.stand-for-title { margin: 0; color: inherit; text-align: center; font-size: 1.2rem; }
.stand-for-paragraph { margin: 0; color: var(--black); text-align: center; }

@media screen and (max-width: 991px) {
  .stand-for-flex { flex-flow: wrap; }
  .stand-for-boxes { width: 48%; }
}
@media screen and (max-width: 767px) {
  .stand-for-boxes { width: 100%; }
}

/* .sparkles-icon _1 */
.doctor__badge { width: 100%; max-width: 1.7rem; height: auto; }

/* .social-link-home-copy — row, 30px gap, 20px top and left padding; the icons
   render at 35px wide. Declared 767 then 479, descending. */
.social-link-home {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  gap: 30px;
  padding-top: 20px;
  padding-left: 20px;
}
.social-link-home__item { display: flex; align-items: center; }
.social-link-home img { width: 35px; height: auto; cursor: pointer; }

@media screen and (max-width: 767px) {
  .social-link-home { gap: 20px; justify-content: center; align-items: center; margin-bottom: 40px; padding-left: 0; }
}
@media screen and (max-width: 479px) {
  .social-link-home { justify-content: flex-start; align-items: center; margin-bottom: 0; }
}

/* .dental-care-flex / .dental-care-boxes on the original. Three 32% columns in
   a flex row with a 2rem gap; the rebuild had a 2-up grid and only two cards.
   Declared 991 then 767, descending, as the original declares them. */
.ages__flex { display: flex; gap: 2rem; }
.age-card {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  border: 2px solid #ddd;
  border-radius: 1rem;
  padding: 25px;
}
.age-card h3 { color: var(--black); font-size: 28px; line-height: 120%; margin: 0; }

/* SCOPED 2026-09-09. The 32%/48%/100% column width belongs to the homepage's
   .dental-care-flex row (.ages__flex here) and only to it. Declared unscoped on
   `.age-card`, it also hit /emergency-dental, where .age-card is a CSS-GRID item
   inside .grid--2 and so took 32% of its own grid column instead of filling it.
   Measured before, at 1024: cards 148.5px wide and 2855.8px tall, h3 text column
   82.5px against the original's 414px, services band 5253px against the
   original's 3108px. At 1920 the cards were 215.7x1586.8. The original does the
   same thing the other way round: its .dental-care-boxes are flex children with
   a percentage width, while /emergency-dental's service rows are full-width.
   The homepage row is unchanged — it still measures 32%/48%/100%. */
.ages__flex > .age-card { width: 32%; }

@media screen and (max-width: 991px) {
  .ages__flex { gap: 1rem; flex-flow: wrap; justify-content: space-between; }
  .ages__flex > .age-card { width: 48%; }
}
@media screen and (max-width: 767px) {
  .ages__flex > .age-card { width: 100%; }
}

.age-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: 100%;
}
/* CORRECTED 2026-09-09. These two lists were sharing one declaration at 22px /
   var(--space-3) (12px). The original sizes them from two DIFFERENT icon
   modifiers and uses .8rem, not .75rem, for both gaps:

     rebuild element      original element              icon rule            size
     .age-card__list      .dental-care-list             .icon.block-3-heading-2   20px (site.css:3970)
     .why__list           .not-about-us                 .icon._2                  25px (site.css:3965)

   Both original row wrappers are `grid-gap: .8rem` = 12.8px
   (.dental-care-list-flex site.css:6971, .not-about-us-list-flex site.css:6600).
   At 22px the age-card rows measured 22.0 tall against the original's 20.0 — 4
   rows, so each card's list was 136.0 against 128.0 — and the icon-to-text gap
   put the label 0.8px left of the original's. */
.why__list li,
.age-card__list li { display: flex; align-items: center; gap: .8rem; }
.age-card__list img { width: 20px; height: 20px; flex: 0 0 auto; }
.why__list img { width: 25px; height: 25px; flex: 0 0 auto; }

/* The old `.why-choose__stats` (a 4-across `<ul>` of strong/span pairs) REMOVED
   2026-09-10 with the markup it styled — the homepage's stats are four stacked
   panels (`.why-choose__stats`, in the 07 block above). `.why__grid`,
   `.why__content` and `.why__media` are KEPT: /about-us's hero and
   /same-day-booking's intro both still use them as an ordinary 1fr/1fr row. */
.why__media img,
.insurance__media img { width: 100%; border-radius: var(--radius-card); }

@media screen and (max-width: 991px) {
  .why__grid,
  .doctor__grid,
  .insurance__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------------------------------------------------------- 08 Doctor -----
   `.values__media img` dropped from this rule with Round G ticket 7/8; the
   homepage's values photo is now the original's `img.image-48`. `.doctor__media`
   is still /emergency-dental's and /same-day-booking's. */
.doctor__media img { width: 100%; border-radius: var(--radius-card); object-fit: cover; }
@media screen and (max-width: 991px) { .doctor__media { order: -1; } }

/* ------------------------------- 08a the homepage doctor block, AP-041 -----
   TRANSCRIBED 2026-09-10, Round G tickets 7 and 8 together — they are the same
   component. The rebuild was a 656/656 `.doctor__grid` with the photo full-width
   at `object-fit: cover`, a separate `img.doctor__badge` above the pill, and the
   pill itself a filled `.eyebrow`.

   Measured original at 1440:
     .meet-the-doctor-wrapper  1376 x 521.375 @ (32, 5167.125)  flex, space-between,
                                                                align centre
       .meet-the-doctor-left   660.469 x 521.375 @ (32, 5167.125)  width 48%,
                               background #e6ebd4, radius 1.5rem, padding-top 20,
                               justify flex-end, align centre
         img.doctor-image      528.375 x 528.375 @ (98.047, 5187.125)  width 80%,
                               radius 1.5rem, margin-bottom -27px,
                               box-shadow 0 2px 20px #0003, object-fit FILL
       .meet-the-doctor-right  660.469 x 328.719 @ (747.531, 5263.453)  width 48%,
                               flex column, gap 1.5rem, align flex-start
         .section-top-title-wrapper  210.031 x 47.188  (medal INSIDE it)
         h3.heading-44               443.641 x 48      40px/48px/700 black
         p.dentist-text              660.469 x 106.406 16px/133% = 21.28px
         a.hero-call-to-action-wrapper 168.938 x 55.125  green pill, radius 10rem
           h6.phone-text             124.938 x 21.125  17.6px/120%, w400, white

   THE PHOTO IS 80% OF A 48% COLUMN AND IT HANGS 27px BELOW ITS PANEL. That is
   why it measures 528.375 against the rebuild's 656 — the rebuild had it filling
   the column and cropping to `cover`. The tinted panel behind it is not a
   decoration either; it is what the -27px overhang is set against.
   -------------------------------------------------------------------------- */
.meet-the-doctor-wrapper { display: flex; justify-content: space-between; align-items: center; }
.meet-the-doctor-left {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 48%;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
  border-radius: 1.5rem;
  background-color: #e6ebd4;
}
.doctor-image {
  width: 80%;
  height: auto;
  margin-bottom: -27px;
  border-radius: 1.5rem;
  box-shadow: 0 2px 20px #0003;
}
.meet-the-doctor-right {
  display: flex;
  flex-flow: column;
  width: 48%;
  gap: 1.5rem;
  justify-content: flex-start;
  align-items: flex-start;
}
/* `.heading-44` has NO base rule on the original — 40px/48px/700 black is the
   global h3 it inherits. Only the 479 size is its own. */
.dentist-text { font-size: 16px; line-height: 133%; }
.hero-call-to-action-wrapper {
  display: flex;
  gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  padding: 15px 20px;
  border: 2px solid var(--earls-green);
  border-radius: 10rem;
  background-color: var(--earls-green);
  text-decoration: none;
}
.hero-call-to-action-wrapper._2 { background-color: var(--white); }
.hero-call-to-action-wrapper._2._3 { border: 2px solid #000; }
.phone-text { color: var(--white); font-size: 1.1rem; font-weight: 400; }
.phone-text._2 { color: var(--black); font-size: 1.1rem; }

@media screen and (max-width: 991px) {
  .meet-the-doctor-wrapper { flex-flow: wrap; }
  .meet-the-doctor-left { width: 100%; }
  .meet-the-doctor-right { width: 100%; margin-top: 60px; }
}
@media screen and (max-width: 767px) {
  .phone-text { font-size: 1rem; line-height: 120%; }
}
@media screen and (max-width: 479px) {
  .heading-44 { font-size: 1.5rem; }
  .hero-call-to-action-wrapper { justify-content: center; align-items: center; padding: 14px 20px; }
  .phone-text._2 { padding-left: 0; font-size: 1rem; }
}

/* -------------------------------------- 11a the homepage values block ------
   TRANSCRIBED 2026-09-10, Round G ticket 7 (AP-041's third component and its
   container). The rebuild was a 656/656 `.values__grid` inside `.container`, so
   the badge sat at x=32; the original's column starts at x=70 because
   `.values-wrapper` carries `margin: 60px 40px` inside a 1380 `.main-container`.

   Measured original at 1440:
     .values-wrapper      1300 x 700 @ (70, 7202.109)  grid 1fr 1fr, gap 0,
                                                       margin 60px 40px, overflow hidden
       .values-left-side  650 x 700 @ (70, 7202.109)   flex column, gap 10,
                                                       height 700, place-self start stretch
         .section-badge   85 x 40   BORDERED
         .values-text     500 x 80    h2.heading-31 40px/40px
         .values-para-text 450 x 156  p.paragraph-14 16px/26px
         .values-instraction 233.094 x 148  flex column, gap 16
           .instraction-1  233.094 x 25   flex row, gap 10
             img.values-icon 25px
             .text-block-10 18px/24px, strong inside
         a.button-about-us 165.734 x 65 @ y7696.109  radius 30, padding 14px 40px,
                                                     margin-top 30, align-self start
       .values-right-side 650 x 668.688 @ (720, 7217.766)  place-self center
         img.image-48     650 x 668.688  radius 30, object-fit FILL
   -------------------------------------------------------------------------- */
.values-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0;
  place-items: stretch stretch;
  margin: 60px 40px;
  overflow: hidden;
}
/* `height: 700px` is the original's, and it is what makes the row 700 tall while
   the column's own content is only ~560 — the button ends at 7761.109 with 40px
   of slack below it. */
.values-left-side {
  display: flex;
  flex-flow: column;
  gap: 10px;
  height: 700px;
  justify-content: flex-start;
  align-items: flex-start;
  place-self: start stretch;
}
.values-text { max-width: 500px; }
.heading-31 { font-size: 40px; line-height: 40px; }
.paragraph-14 { max-width: 450px; font-size: 16px; line-height: 26px; }
.values-instraction { display: flex; flex-flow: column; gap: 16px; margin-left: 0; }
.instraction-1 { display: flex; gap: 10px; justify-content: flex-start; align-items: center; }
.values-icon { width: 25px; height: auto; flex: 0 0 auto; }
.text-block-10 { font-size: 18px; line-height: 24px; }
.button-about-us {
  display: inline-block;
  align-self: flex-start;
  margin-top: 30px;
  padding: 14px 40px;
  border: 2px solid var(--body-background);
  border-radius: 30px;
  background-color: var(--earls-green);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  /* NO `text-align` at base — the original's is an <a> that inherits `start`, and
     `center` only arrives at <=767. Writing it here read as a computed-style
     difference on a box that was otherwise exact. */
  text-decoration: none;
  transition: background-color .3s cubic-bezier(.86, 0, .07, 1);
}
.button-about-us:hover { border: 2px solid var(--limeade); background-color: var(--white); color: var(--limeade); }
.values-right-side { height: auto; place-self: center; }
/* `inline-block`, which is Webflow's normalize default for images and what the
   original computes. Not cosmetic: see css-traps §9 — a block image's bottom
   margin COLLAPSES with its sibling's and an inline-block's does not, and the
   479 rule gives this one `margin-bottom: -100px`. */
.image-48 { display: inline-block; border-radius: 30px; width: 100%; height: auto; }

@media screen and (max-width: 991px) {
  .values-wrapper { gap: 20px; margin-top: 50px; margin-bottom: 50px; }
  .values-left-side { height: 600px; margin-top: 20px; margin-left: 20px; justify-self: start; }
  .heading-31 { margin-top: 10px; font-size: 28px; line-height: 36px; }
  .paragraph-14 { font-size: 15px; line-height: 25px; }
  .bold-text-3 { font-size: 16px; }
  .button-about-us { align-self: flex-start; margin-top: 20px; }
  .values-right-side { object-fit: cover; height: 600px; place-self: center; }
  .image-48 { padding-right: 0; }
}
@media screen and (max-width: 767px) {
  .values-wrapper { gap: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; place-items: center; margin: 0 20px; }
  .values-left-side { height: 550px; text-align: center; justify-content: center; align-items: center; margin-top: 0; margin-left: 0; place-self: center; }
  .values-text { max-width: 400px; }
  .heading-31 { text-align: center; font-size: 36px; }
  .paragraph-14 { text-align: center; }
  /* The four items become a 2 x 2 GRID here, not a column. */
  .values-instraction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    place-items: center;
    align-self: stretch;
    margin-inline: auto;
  }
  .button-about-us { text-align: center; align-self: center; padding: 12px 32px; }
  .values-right-side { object-fit: fill; height: 550px; margin-top: 0; order: 9999; }
  .image-48 { text-align: center; width: 100%; margin-right: 100px; padding-right: 0; }
}
@media screen and (max-width: 479px) {
  .values-wrapper { margin: 0 10px; }
  .values-left-side { gap: 20px; margin-top: 25px; }
  .values-text { max-width: 350px; }
  .heading-31 { font-size: 34px; line-height: 40px; }
  .values-para-text { max-width: 380px; }
  .paragraph-14 { font-size: 14px; line-height: 26px; }
  .values-instraction { gap: 10px; margin-inline: auto; }
  .instraction-1 { gap: 5px; justify-content: flex-start; align-items: center; }
  .text-block-10 { font-size: 13px; }
  .bold-text-3 { font-size: 14px; }
  .button-about-us { padding-left: 28px; padding-right: 28px; }
  .values-right-side { margin-bottom: -100px; }
  .image-48 { margin-top: 40px; margin-right: 0; }
}

/* ------------------------------------------------------------ 09 Ages ----- */
/* REMOVED 2026-09-09. This block used to redeclare .age-card — background,
   border, border-radius, padding — 60 lines BELOW the faithful transcription of
   the original's `.dental-care-boxes` at the .ages__flex block above. Equal
   specificity, later wins, so all four of the original's values were dead:

     property        original (.dental-care-boxes, site.css:6946)  dead rule
     border          2px solid #ddd                                1px rgba(0,0,0,.08)
     border-radius   1rem                                          24px
     padding         25px                                          2rem
     background      NOT DECLARED -> transparent                   #fff

   Measured on the three homepage cards, rebuild against _kit-out/ref/__home.html:
   inner text measure was 12.0px short at EVERY width (371.344 against 383.344 at
   1440) and each card 36.0px too tall, and the cards painted #ffffff over a
   #f8f9fa body where the original lets the body colour through. The whole block
   is deleted rather than merged: nothing here differed from the rule above
   except by being wrong.

   .age-card h3 { color: var(--color-heading) } went with it. --color-heading is
   var(--black), so it computed rgb(0,0,0) on both sides and cost nothing, but it
   was the same shadowing mistake and there is no reason to keep it. */

/* ------------------------------------------------------- 10 Insurance ----- */
.insurance__sub { font-weight: var(--fw-medium); margin-bottom: var(--space-4); }
.insurance .btn { margin-top: var(--space-4); }

/* ----------------------------------------------------- 12 Testimonials ----
   TRANSCRIBED 2026-09-10, Round G ticket 4. `.testimonial`, `.testimonial__stars`
   and the `blockquote`/`figcaption` rules are DELETED, not kept alongside these:
   they described three equal 437.328 x 256 cards in a `.grid--3` with the name at
   14px/700 green, which is a different component from the original's.

   Measured original at 1440, all reproduced below:
     section.testimonials      1440 x 609.969 @ y8048.109, margin-top 86
     .main-container           1380 @ x30
     .testimonials-wrapper     1340 x 509.969 @ x50, margin 0 20 100, pad-bottom 20
     .testimonials-text        1340 x 95.391, pad-bottom 20
       h2.heading-40           1340 x 52     40px / 52px / 700 / rgb(0,0,0)
       p.paragraph-34          1340 x 23.391 18px / 23.4px
     .div-block-36             1300 x 394.578 @ x70, flex row, gap 50,
                               justify/align CENTER, pad 20px 10px, margin-x 20
       card 1                  378.813 x 240.188 @ (80,   8220.688)
       card 2                  422.391 x 354.578 @ (508.813, 8163.500)
       card 3                  378.797 x 260.984 @ (981.203, 8210.297)
       p.paragraph-35          16px / 20.8px, max-width 360, margin-bottom 30
       .slider-image           25 tall, flex row, gap 10, centred
       img.image-61            25 x 25
       h3.heading-41           40px / 52px / 700 / rgb(0,0,0), margin-top 10

   The three tops are the STAGGER and it is `align-items: center` against three
   intrinsic heights. Do not equalise them. -------------------------------- */
.testimonials { margin-top: 86px; }
.testimonials-wrapper { margin: 0 20px 100px; padding-bottom: 20px; }
.testimonials-text { padding-bottom: 20px; }
/* No colour declared: the original's global `h2` and `h3` are both black here
   and `.heading-40` / `.heading-41` add only alignment and line-height.
   `line-height: 1.3` on a 40px h2 is 52px. */
.heading-40 { text-align: center; font-size: 40px; line-height: 1.3; }
.paragraph-34 { text-align: center; font-size: 18px; line-height: 1.3; }
.div-block-36 {
  display: flex;
  gap: 50px;
  justify-content: center;
  align-items: center;
  margin-inline: 20px;
  padding: 20px 10px;
}
/* THREE classes, identical at base, divergent below 992 — see the note in
   index.astro. `height: 100%` is the original's; against an auto-height flex
   line it resolves to auto, which is what leaves the heights intrinsic. */
.slide-1-testimonials,
.slide-1-testimonials-copy,
.slide-1-testimonials-copy-3 {
  width: 33%;
  height: 100%;
  padding: 20px;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: 5px 8px 10px 7px var(--nav-background);
  transition: box-shadow .4s;
}
.paragraph-35 {
  text-align: center;
  max-width: 360px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.3;
}
.slider-image { display: flex; gap: 10px; justify-content: center; align-items: center; }
.image-61 { width: 25px; height: auto; }
/* 40px, from the global h3. This is the declaration the previous build had at
   14px, and it is what sizes the middle card — see index.astro. */
.heading-41 { text-align: center; margin-top: 10px; line-height: 1.3; }

@media screen and (max-width: 991px) {
  .testimonials-wrapper { margin-bottom: 100px; }
  .div-block-36 { gap: 30px; margin-inline: 20px; padding-bottom: 20px; }
  .slide-1-testimonials,
  .slide-1-testimonials-copy,
  .slide-1-testimonials-copy-3 { width: 45%; padding-inline: 10px; }
  /* The box-shadow tightens on the FIRST and SECOND cards only; the third keeps
     the base 5px 8px 10px 7px. That asymmetry is the original's. */
  .slide-1-testimonials,
  .slide-1-testimonials-copy { box-shadow: 4px 6px 14px 2px var(--nav-background); }
  .slide-1-testimonials-copy-3 { display: block; }
  .image-61 { width: 22px; }
  .heading-41 { font-size: 22px; }
  .paragraph-35 { margin: 0 auto 20px; font-size: 15px; }
}

@media screen and (max-width: 767px) {
  .testimonials-text { max-width: 500px; margin-inline: auto; }
  .heading-40 { font-size: 36px; }
  .paragraph-34 { font-size: 16px; }
  .div-block-36 { gap: 30px; flex-flow: column; }
  .slide-1-testimonials,
  .slide-1-testimonials-copy,
  .slide-1-testimonials-copy-3 { width: 80%; padding-inline: 0; }
  .slide-1-testimonials-copy { display: block; }
  .image-61 { width: 22px; }
  .heading-41 { font-size: 22px; }
  .paragraph-35 { margin-inline: auto; padding-inline: 10px; font-size: 15px; }
}

@media screen and (max-width: 479px) {
  .testimonials { margin-top: 40px; }
  .testimonials-text { padding-bottom: 10px; }
  .div-block-36 { margin-inline: 10px; }
  /* 95% on the first card, 90% on the other two. Also the original's. */
  .slide-1-testimonials { width: 95%; }
  .slide-1-testimonials-copy,
  .slide-1-testimonials-copy-3 { width: 90%; }
  .paragraph-35 { max-width: 300px; font-size: 14px; }
}

/* TRANSCRIBED 2026-09-10, Round F ticket 6 — /same-day-booking's three-feature
   section had NO heading. The original puts a `.section-top-holder` above the
   cards holding `h2.why-choose-us-title` ("Emergency <span>Dental</span>") and
   `p.subtitle`; both strings had 0 occurrences in dist.

   Reference at 1440: holder 1376 x 99.594 at (32, 2702.344); h2 474.516 x
   57.594 at (482.734, 2702.344) with padding-inline 20 and the green span
   158.125 x 69 at (779.125, 2696.344); p.subtitle 646.141 x 18 at (396.922,
   2783.938), 18px on a 100% line. The 24 between them is `.section-top-holder`'s
   own 1.5rem gap and the 64 below is `.wrapper`'s 4rem.

   Only the heading is restored. The cards themselves are still
   `.service-card` in a `.grid--3` (437.328 x 329.219) rather than the
   original's `.emergency-dental-card` in a `.why-choose-us-flex`
   (413.328 x 384 at x=52 / 513.328 / 974.656) — that is a separate block and
   was not part of this ticket. */
.why-choose-us-title { padding-inline: 20px; }
@media screen and (max-width: 991px) { .why-choose-us-title { text-align: center; } }
.subtitle { margin: 0; font-size: 1.125rem; line-height: 100%; }

/* --------------------------------------------------------- 13 Contact ----- */

/* TRANSCRIBED 2026-09-10, Round F ticket 2. Two of the rig's four documented
   blind spots were occupied here at once and it reported nothing.

   1. WRONG COLUMN. The original's heading and lead paragraph are NOT in the
      right-hand column. `.form-top` is a full-bleed, centred block ABOVE the two
      columns, and `h2.form-header-au` measures 1326.922 x 62 at x=56.531 at
      1440, 40px/52px, text-align centre. The rebuild had it inside
      `.contact__content` at 656 x 172.781 at x=752, 48px/57.6 left-aligned —
      dx +695.469, dw -670.922, and every child was internally consistent inside
      that wrongly-placed parent, so page height barely moved.

   2. REORDERED LIST. The original's DOM order in `.form-section` is
      email -> phone -> address, but Webflow gives the first two
      `#w-node-…ff12, #w-node-…ff0e { order: 9999 }` (site.css:206770; the same
      pair exists per page: `…ff12/…ff0e` on / and /about-us,
      `…757981/…757985` on /same-day-booking), so the ADDRESS paints FIRST.
      This is the identical mechanism already reproduced in the footer contact
      row in Round D. Text pairs on content, so a reordered list pairs perfectly
      and the rig reports nothing at all.

   Everything below is transcribed from site.css (2607-2710, 3886-3919,
   4438-4715, 4582, 4637-4695) with its own class names, so the geometry is
   produced by the original's declarations rather than fitted to its results.

   NOT changed here, deliberately: the CONTACT pill. The original's
   `.form-heading-logo` is a BORDERED 140 x 45; the rebuild's `.eyebrow` is a
   filled 130.813 x 46.406. That is AP-041, still undecided, and Round G. The
   element MOVES with the block it belongs to (it is `.form-top`'s first child
   on the original) but its box and colours are untouched. */
/* `gap: 1.5rem` is inert (display is block) but it IS one of the 23 computed
   properties the rig diffs, so omitting it read as `normal` against the
   original's `24px` on every page that carries this section. */
.form-au { display: block; gap: 1.5rem; }
/* The clearfix is load-bearing, exactly as it was on `.main-container-doctor`
   in Round E. `.main-container-au` is Webflow's `.w-container` (site.css:699),
   whose ::before/::after tables stop `.form-wraper-2-au`'s `margin: 60px 10px`
   collapsing through its first/last child. Without it the section measured
   939.406 against the original's 1058.969 — both 60px margins gone. */
.main-container-au { width: 100%; max-width: 1380px; margin-inline: auto; }
.main-container-au::before,
.main-container-au::after { content: " "; display: table; grid-area: 1 / 1 / 2 / 2; }
.main-container-au::after { clear: both; }
.form-wraper-2-au {
  display: flex;
  flex-flow: column;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin: 60px 10px;
}
.form-top {
  display: flex;
  flex-flow: column;
  gap: 15px;
  justify-content: center;
  align-self: center;
  align-items: center;
  padding-top: 40px;
}
/* `.form-top > .eyebrow { margin: 0 }` DELETED with AP-041 (Round G ticket 7).
   It existed to cancel the shared `.eyebrow`'s 24px bottom margin, which
   `.form-top`'s own 15px gap was adding to; `.form-heading-logo` has no margin at
   all, so there is nothing left to cancel. (That rule was worth 25.406px: the
   block measured 311.406 against the original's 286.) */
.contact-text {
  display: flex;
  flex-flow: column;
  gap: 20px;
  justify-content: center;
  align-self: center;
  align-items: center;
}
/* site.css:2673 — `font-family: sweet sans bold` at 700/40px/52px.
   This comment used to say that resolves to SweetSansProBold.otf, "the same
   face our Sweet Sans Pro 700 loads, so var(--font-sans) at 700 is
   metric-identical". The file half is still true and still measured at 0.000px.
   The family half was retired by AP-058 on 2026-09-11: --font-sans has no 700
   any more, because the original's `sweet sans pro` has none, so this rule now
   names the bold family. 3 elements — /about-us, /same-day-booking and `/`. */
.form-header-au {
  margin: 0;
  padding-bottom: 10px;
  color: var(--black);
  text-align: center;
  letter-spacing: normal;
  font-family: var(--font-sans-bold);
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
}
.paragraph-form-au {
  width: 900px;
  margin: 0 0 20px;
  color: var(--black);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.form-left-and-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  justify-content: space-between;
  place-items: center;
  width: 100%;
  padding: 40px;
  border-radius: 30px;
}
.form-right { width: 100%; }

/* ---------------------------------------------------- the contact form -----
   TRANSCRIBED 2026-09-10, Round G ticket 6. `.form-2` and its fields are the
   SAME original component on THREE pages — `/`, /about-us and /same-day-booking
   all carry `.form-block-au > form.form-2` with `.text-field-2`, two
   `.text-field-5`, `.textarea` and `.button-form`. The ticket named the homepage;
   fixing one and leaving the other two would put a half-transcribed component on
   two pages, so all three are done here, in the stylesheet all three load.

   What was there: the form wrapped in `.contact__form-wrap`, a white card
   600 x 496 with 32px padding, a 1px rgba(0,0,0,.08) border and a 24px radius,
   which the original does not have — and generic `.form` fields at
   `1px solid #e2e2e2`, radius 10, `1rem 1.25rem` of padding, which belong to no
   element of this page. The card's padding and border are the whole of the form's
   534 x 430 at x=113 against the original's 600 x 542.969 at x=80.

   Measured original at 1440:
     .form-block-au   600 x 542.969 @ (80, 9059.078)   width:100%, mb 15 (.w-form)
     form.form-2      600 x 542.969   flex column, gap 20, jc space-between,
                                      ai stretch, width 100%
       .text-field-2  600 x 64        2px solid rgb(103,132,40), r30, pad 30/20,
                                      mb 10, colour var(--black)
       .text-field-5  600 x 64        as above but colour #333 (x2)
       .textarea      600 x 113.969   pad 30px 20px 40px, r30, mb 10
       .button-form   600 x 77        2px solid + bg rgb(103,132,40), r40,
                                      mt 20, pad 20, 18px/33px/700 white
       turnstile slot 600 x 0         one more 20px gap
   -------------------------------------------------------------------------- */
.form-block-au { width: 100%; margin: 0 0 15px; }
.form-2 {
  display: flex;
  flex-flow: column;
  gap: 20px;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
}
/* `height: 38px` is Webflow's `.w-input`; border-box plus 60px of padding makes
   the box 64. The two classes differ only in colour, and only on the FIRST
   field — that is the original's, not a slip. */
.text-field-2,
.text-field-5,
.textarea {
  display: block;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 30px 20px;
  border: 2px solid var(--earls-green);
  border-radius: 30px;
  background-color: var(--white);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.42857;
  vertical-align: middle;
}
.text-field-2 { color: var(--black); }
.text-field-5 { color: var(--color-body); }
.textarea { height: auto; color: var(--color-body); padding: 30px 20px 40px; }
.text-field-2::placeholder,
.text-field-5::placeholder,
.textarea::placeholder { color: #999; }
.button-form {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  border: 2px solid var(--earls-green);
  border-radius: 40px;
  background-color: var(--earls-green);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.86, 0, .07, 1);
}

@media screen and (max-width: 991px) {
  .text-field-2 { padding-top: 30px; padding-bottom: 30px; }
  .textarea { padding-top: 20px; padding-bottom: 30px; }
  .button-form { padding-top: 15px; padding-bottom: 15px; }
}
@media screen and (max-width: 767px) {
  .text-field-2,
  .text-field-5 { padding-top: 30px; padding-bottom: 30px; }
  .textarea { padding-top: 30px; padding-bottom: 40px; }
  .button-form { text-align: center; padding: 12px 32px; }
}
@media screen and (max-width: 479px) {
  .text-field-2,
  .text-field-5 { padding-top: 25px; padding-bottom: 25px; }
  .textarea { padding-bottom: 30px; }
  .button-form { margin-top: 0; padding-top: 10px; padding-bottom: 10px; }
}

/* `#w-node-…897ec { place-self: center }`, which becomes `stretch stretch` at
   <=479 only — not at 991, which is where it would be easy to assume. */
.form-left-copy { place-self: center; color: var(--white); }

.form-section { display: flex; flex-flow: column; padding-left: 20px; }
.email-cu-copy-copy-copy,
.phone-number-copy-copy-copy,
.address-ba-copy-copy-copy {
  display: flex;
  flex-flow: row;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  background-color: transparent;
  border-radius: 15px;
  padding: 10px 0;
}
/* The order flip. See note 2 above — this is a per-node id rule on the
   original, reproduced here as a class rule because the rebuild has no Webflow
   node ids. Address is last in the DOM and first on the page, on all three
   pages that carry this block. */
.email-cu-copy-copy-copy,
.phone-number-copy-copy-copy { order: 9999; }
.image-36-copy,
.icon-phone-copy,
.image-39-copy { width: 35px; height: auto; flex: 0 0 auto; }
.email-cu-text-copy,
.phone-number-cu-copy,
.text-block-9-copy { color: var(--black); font-size: 18px; line-height: 28px; }
.email-cu-text-copy a,
.phone-number-cu-copy a,
.text-block-9-copy a { color: inherit; text-decoration: none; }

.form-text-blocks-copy {
  color: var(--white);
  border-radius: 25px;
  margin: 10px 0;
  padding: 20px;
}
/* h3 base is 40px/48 in both documents; `.heading-35` only recolours it. The
   rendered box is the inner <strong class="bold-text-8">, 294.406 x 57. */
.heading-35 { margin: 0; color: var(--black); }
.text-block-4 { color: var(--black); padding-top: 5px; font-size: 18px; line-height: 36px; }

@media screen and (max-width: 991px) {
  .form-wraper-2-au { gap: 18px; }
  .form-header-au { width: 400px; max-width: 550px; margin-top: 10px; font-size: 36px; line-height: 100%; }
  .paragraph-form-au { width: 650px; font-size: 18px; line-height: 22px; }
  .form-left-and-right { gap: 20px; padding: 20px; }
  .form-text-blocks-copy { padding: 10px; }
  .bold-text-8 { font-size: 22px; }
  .email-cu-copy-copy-copy,
  .phone-number-copy-copy-copy,
  .address-ba-copy-copy-copy { gap: 10px; }
  .email-cu-text-copy,
  .phone-number-cu-copy,
  .text-block-9-copy { font-size: 14px; }
  .text-block-4 { font-size: 14px; }
}
@media screen and (max-width: 767px) {
  .form-wraper-2-au { margin: 40px 20px; }
  .form-header-au { text-align: center; padding-bottom: 20px; font-size: 36px; }
  .paragraph-form-au { width: 400px; font-size: 16px; line-height: 25px; }
  .contact-text { gap: 0; }
  .form-left-and-right { grid-template-columns: 1fr; }
  .form-section { padding-left: 0; }
  .form-text-blocks-copy { padding-left: 0; }
  .phone-number-copy-copy-copy { gap: 15px; }
}
@media screen and (max-width: 479px) {
  .form-wraper-2-au { gap: 15px; margin: 0 0 40px; }
  .main-container-au { padding: 0 20px; }
  .form-header-au { width: auto; max-width: none; padding-bottom: 10px; font-size: 28px; line-height: 38px; }
  .paragraph-form-au { width: auto; font-size: 14px; line-height: 22px; }
  .form-left-and-right { padding-left: 0; padding-right: 0; }
  .form-left-copy { place-self: stretch stretch; }
  .email-cu-text-copy,
  .phone-number-cu-copy,
  .text-block-9-copy { font-size: 14px; }
  .phone-number-copy-copy-copy { gap: 15px; }
  .text-block-4 { font-size: 16px; }
}

/* `.contact__grid`, `.contact__details` and `.contact__content` were the last
   three rules used ONLY by /book-an-appointment. All three are DELETED with the
   AP-047 rewrite (2026-09-10), which replaced that page's invented two-column
   form/contact row with the original's own `.form-wraper-b-a` block and
   `.form-left-ba > .adress-form` panel. `.contact__hours` and `.contact__social`
   went the same way in Round F.

   `.contact__form-wrap` STAYS: / , /about-us and /same-day-booking still use it
   inside the original's `.form-left-and-right`. */
.contact__form-wrap {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------- 14 FAQ ----- */
.container--narrow { max-width: 56rem; }
/* `.faq-section { background: var(--tint-blue) }` DELETED Round G ticket 5.
   `section.faq` on the original is transparent — measured rgba(0, 0, 0, 0) — and
   the #f6f8fb band belongs only to the SEO embed nested inside it. This rule was
   painting rgb(246, 248, 251) across the whole FAQ band where the original shows
   the body's rgb(248, 249, 250). `.faq-section` had the homepage as its only
   user and the class is gone from the markup with the transcription. */

/* -------------------------------------------------------- 15 SEO copy ----- */
/* The original is a hand-written embed carrying its styling inline:
     section { width:100%; padding:60px 20px; background:#f6f8fb;
               font-size:14px; line-height:1.7 }
     div     { max-width:1100px; margin:auto }
     h2      { font-size:22px; margin-bottom:15px }
     p:last  { margin-top:20px }
   Those declarations are transcribed here rather than left inline.

   Round E ticket 1. The rebuild used .section's own 5rem/2rem padding and let
   the copy run the full 1376 of .container, so the inner block measured
   1376 x 178 at (32, 9250) against the original's 1100 x 375 at (170, 10333).
   .section's 2rem inline padding is KEPT (giving the outer band 1376 at x=32
   against the original's 1380 at x=30 — the band is the same #f6f8fb as the FAQ
   section above it, so the 2px is invisible and the alternative, dropping to a
   full-bleed 1440 at x=0, is a 60px error). With 2rem retained, a 1100 inner
   centres at 32 + (1376-1100)/2 = 170, which is the original's x exactly. */
/* `padding: 60px 20px` and `width: 100%` verbatim from the embed's own inline
   style, replacing the `.section` class's `padding-inline: 2rem` — the block now
   sits inside `section.faq > .main-container` where the original has it, so the
   band is 1380 at x=30 and the inner column centres at 170, both exact. */
.seo-copy {
  width: 100%;
  background: var(--tint-blue);
  padding: 60px 20px;
  font-size: 14px;
  line-height: 1.7;
}
.seo-copy__inner { max-width: 1100px; margin-inline: auto; }
.seo-copy h2 { font-size: 22px; margin-bottom: 15px; }
.seo-copy p { max-width: none; }
.seo-copy__nap { margin-top: 20px; }

/* AP-039, decided: KEEP GREEN, KEEP THE UNDERLINE.
   Measured on the reference at 1440, all eight in-copy anchors compute
   `rgb(0, 0, 238)` with `text-decoration-line: underline` — Webflow rich text
   with no link styling applied at all. The rebuild rendered them
   `rgb(137, 154, 0)` with `none`.

   The CEO's ruling: default blue in body copy is an UNSTYLED artefact, not a
   design choice, and shipping it is the thing that reads as our mistake — so
   brand green stays, which is a DECLARED DEVIATION. But the underline is the
   affordance that marks the text as a link, and dropping it while also changing
   the colour would leave in-copy links with no visual cue at all.

   Geometry is unaffected either way: all eight anchors already measure x/w/h
   delta 0.000 against the original (74.469 x 23 at x=917.5, 220.609 x 23 at
   x=1000.484, 1091.484 x 45.406 at x=170, 69.406 x 23 at x=301.766,
   137.938 x 23 at x=379.688, 213.688 x 23 at x=559.078, 218.734 x 23 at x=170,
   252.797 x 23 at x=412.156). `text-decoration` does not enter layout. */
.seo-copy__inner a { text-decoration: underline; }

/* ==========================================================================
   16  /book-an-appointment — AP-047, transcribed from the original
   ==========================================================================
   Source: site.css. Every declaration below is the original's, with its media
   context lifted with it (css-traps §7). Measured original geometry, reproduced
   exactly by these rules:

                              1440              1024             768              390
     section margin-top       160               160              140              100
     .main-container-ba       1280 @x80         1024 @x0         768              390
     .heading-ba              700 x 146         700 x 146        700 x 146        350 x 204
     h1.homepage-heading-ba   700 x 60, 52/60   52/60            700 x 60, 45/60  300 x 100, 38/50
     .form-block-ba           1240 x 730.969    984 x 730.969    728 x 750.969    350 x 599.969
     form.form-2-ba           1200 x 690.969    944 x 690.969    688 x 710.969    330 x 579.969
       grid columns           550px 550px       422px 422px      304px 284px      304px 29px
     .adress-form             1240 x 253        984 x 281        728 x 460        350 x 662
       card                   370 x 193         284.7 x 193/221  280 x 200        250 x 200

   THE 304px IS LOAD-BEARING. The reCAPTCHA's inner box is a fixed 304px wide
   and sits in the form's FIRST grid column, so it sets that column's min-content
   size. That is the whole reason the original's columns are 304/284 at 768 and
   304/29 at 390 instead of an even split — and at 390 the tracks (304 + 10 + 29
   = 343) OVERFLOW the form's 310px content box, which `justify-content: center`
   then centres, putting the first field at x=23.5 while the card's content edge
   is at x=40. The original overflows its own card by 16.5px each side at 390.
   That is reproduced, not corrected.
   -------------------------------------------------------------------------- */
.book-an-appoint-form-and-map-copy { display: block; margin-top: 160px; }

/* `.w-container`'s ::before/::after tables are NOT decoration here. At 390 the
   h1 carries `margin-top: -69px`; the tables are what stop that margin
   collapsing out of the CONTAINER while still letting it move `.heading-ba`.
   Measured: container y=300, `.heading-ba` y=231. Without them the container
   moves instead and the whole page shifts up 69px. Same pattern as
   `.main-container-copy-copy-cu` in main.css. */
.main-container-ba {
  width: 100%;
  max-width: 1280px;
  margin: -109px auto 60px;
  padding: 0 20px 20px;
}
.main-container-ba::before,
.main-container-ba::after { content: " "; display: table; grid-area: 1 / 1 / 2 / 2; }
.main-container-ba::after { clear: both; }

.heading-ba { max-width: 700px; margin: 0 auto 40px; }
/* site.css:4415 — `font-family: sweet sans bold` at 700/52px/60px. The claim
   that used to stand here, that this is the same FILE as our "Sweet Sans Pro"
   700 so var(--font-sans) at 700 is identical, was true of the file and wrong
   about the family. AP-058, 2026-09-11: the original has no 700 in
   `sweet sans pro` at all, so --font-sans at 700 is a synthesised bold —
   correct for the site's headings, wrong for this one. 1 element, the
   /book-an-appointment hero heading. */
.homepage-heading-ba {
  color: var(--black);
  text-align: center;
  letter-spacing: normal;
  text-transform: capitalize;
  margin-top: 0;
  font-family: var(--font-sans-bold);
  font-size: 52px;
  font-weight: 700;
  line-height: 60px;
}
.paragraph-22 { text-align: center; margin-top: 20px; font-size: 18px; line-height: 33px; }

/* `.form-wraper-b-a` declares grid-template-columns: 1fr 1fr on the original but
   `display: block` — so the template is INERT and the form card is FULL WIDTH
   with the contact panel BELOW it.
   The `gap` IS transcribed even though it is equally inert, because `gap` is one
   of the 23 computed properties the rig diffs: omitting it reads as `normal`
   against the original's `50px` and raises a style finding on a page that is
   geometrically exact. Same reason for the `gap` on `.form-block-ba` and
   `.form-left-ba`, and the `flex-flow` on `.form-2-ba` and `.form-left-ba`. */
.form-wraper-b-a { display: block; gap: 50px; margin-bottom: 30px; }
.form-wrapper-ba { height: auto; }
/* The 15px bottom margin is Webflow's `.w-form`. It COLLAPSES with
   `.form-wraper-b-a`'s 30px, so the gap to the contact panel is 30, not 45.
   Kept anyway because it is the original's declaration and it is what makes the
   collapse arithmetic match. */
.form-block-ba {
  gap: 16px;
  background-color: var(--nav-background);
  border-radius: 30px;
  margin: 0 0 15px;
  padding: 20px;
}
/* Both layers carry the same #e2e2e2 and a 30px radius on the original, so the
   card reads as one panel with 60px of effective padding. Reproduced as two
   layers because the INNER one is the grid and its 40px padding is what the
   column arithmetic is measured from. */
.form-2-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--nav-background);
  border-radius: 30px;
  padding: 40px;
}

/* `.field-label` — 14px/20px at weight 700, 20px tall, 20px of left padding and
   5px below. The 700 and the `display: block` are Webflow's `.w-form label`;
   the padding and margin are the original's own `.field-label`. AP-047
   sub-decision 1 restored these as VISIBLE labels. */
.field-label {
  display: block;
  margin-bottom: 5px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--color-body);
}

/* The three text inputs share their base rule but NOT their overrides — at 768
   only `.text-field-2-ba` goes to 40px of vertical padding, which is why the
   original's first field measures 304 x 84 there against the second's 284 x 64.
   Grouping the overrides would flatten that. `height: 38px` is Webflow's
   `.w-input`; with border-box it is overridden by the padding, giving 64. */
.text-field-2-ba,
.text-field-4-ba,
.text-field-5-ba {
  display: block;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 30px 20px;
  border: 2px solid var(--earls-green);
  border-radius: 25px;
  background-color: var(--white);
  color: var(--color-body);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.42857;
  vertical-align: middle;
}
.text-field-2-ba::placeholder,
.text-field-4-ba::placeholder,
.text-field-5-ba::placeholder,
.textarea-ba::placeholder { color: #999; }

.select-field {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 65px;
  margin-bottom: 10px;
  padding: 10px 20px;
  border: 2px solid var(--earls-green);
  border-radius: 25px;
  background-color: var(--white);
  color: #a9a9a9;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  vertical-align: middle;
}

/* `height: auto` is Webflow's `textarea.w-input` override of the 38px. The box
   is 103.969 tall at every width: 64 of padding and border plus the default two
   rows. `text-transform: capitalize` is the original's, and it is what renders
   the lower-case placeholder "appointment notes" as "Appointment Notes". */
.textarea-ba {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 20px 20px 40px;
  border: 2px solid var(--earls-green);
  border-radius: 25px;
  background-color: var(--white);
  color: var(--color-body);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.42857;
  text-transform: capitalize;
  vertical-align: middle;
}
/* `#w-node-d1cf40fc-…` on the original — the notes label and field span both
   columns. */
.div-block-notes { grid-area: span 1 / span 2 / span 1 / span 2; }

/* reCAPTCHA LAYOUT SPACE ONLY — AP-047 sub-decision 2. No widget, no third-party
   script, no Google origin contacted. The honeypot remains the anti-spam
   mechanism. `.w-form-formrecaptcha` on the original is a block filling the
   first grid column with `margin-bottom: 8px`, containing a box of exactly
   304 x 78. Both numbers are reproduced; the 304 is what sizes the column (see
   the block comment above), and 78 + 8 is the row this element contributes.
   The DIFFERENCE from the original is that the space is empty rather than
   showing Google's badge. Recorded in VISUAL_QA.md. */
.captcha-slot { margin-bottom: 8px; }
.captcha-slot__box { width: 304px; height: 78px; }

/* `grid-area` spans both columns; the auto side margins are what stop the grid
   item stretching to 1120 and centre it at 298.125 instead.
   Family switched to --font-sans-bold 2026-09-11 (AP-058): site.css:3361 is
   `font-family: sweet sans bold` at 700, the original's one-face family, and
   --font-sans no longer carries a 700. 1 element, the /book-an-appointment
   form submit. */
.button-form-ba {
  display: inline-block;
  grid-area: span 1 / span 2 / span 1 / span 2;
  margin: 20px auto 0;
  padding: 20px 36px;
  border: 2px solid var(--body-background);
  border-radius: 30px;
  background-color: var(--earls-green);
  color: var(--white);
  font-family: var(--font-sans-bold);
  font-size: 18px;
  font-weight: 700;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.77, 0, .175, 1);
}
.button-form-ba:hover {
  border-color: var(--earls-green);
  background-color: var(--white);
  color: var(--earls-green);
}

/* `.form-left-ba` declares grid-template-columns on the original but no
   `display`, so it computes to BLOCK and `.adress-form` is full width. */
.form-left-ba { display: block; gap: 80px; flex-flow: column; color: var(--black); padding-top: 20px; }
/* No background-color on the original — the panel is transparent and only the
   three cards are #e2e2e2. `color: var(--white)` is declared on it but every
   child overrides to black, so nothing white is ever painted; transcribed
   because it is the original's declaration. */
.adress-form {
  display: flex;
  flex-flow: row;
  gap: 35px;
  justify-content: space-between;
  align-items: center;
  border-radius: 25px;
  padding: 30px;
  color: var(--white);
}
/* `width: 380px` with the default flex-shrink is load-bearing: 3 x 380 + 70 of
   gap = 1210 against 1180 of content at 1440, so the cards shrink to 370 each.
   A `flex: none` here would overflow instead. */
.phone-number-copy-copy {
  display: flex;
  flex-flow: column;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
  width: 380px;
  padding-block: 40px;
  border-radius: 15px;
  background-color: var(--nav-background);
}
/* DOM order is email, phone, address; `order: 9999` on the first two is what
   makes the ADDRESS card paint first. Measured x at 1440: address 130,
   email 535, phone 940. */
.phone-number-copy-copy--email,
.phone-number-copy-copy--phone { order: 9999; }
.image-36,
.icon-phone,
.image-39 { width: 70px; height: auto; }
.email-cu-text,
.phone-number-cu { color: var(--black); font-size: 18px; line-height: 28px; }
/* 14px, not 18px — the address is the one card whose text the original sets
   smaller, and it is centred. */
.text-block-9 { color: var(--black); text-align: center; font-size: 14px; line-height: 28px; }

@media screen and (max-width: 991px) {
  .book-an-appoint-form-and-map-copy { margin-top: 140px; }
  .main-container-ba { margin-top: 40px; margin-bottom: 40px; padding-bottom: 30px; }
  .homepage-heading-ba { font-size: 45px; line-height: 60px; }
  /* Inert gaps, transcribed for the same reason as the base rules. */
  .form-wraper-b-a { gap: 18px; }
  .form-left-ba { gap: 20px; }
  /* ONLY the first field. See the base-rule comment. */
  .text-field-2-ba { padding-top: 40px; padding-bottom: 40px; }
  /* The panel becomes a two-column GRID here, and the phone card spans both. */
  .adress-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    flex-flow: column;
    padding: 20px 10px;
  }
  .phone-number-copy-copy { gap: 10px; width: 280px; height: 200px; place-self: center; }
  .phone-number-copy-copy--phone { grid-area: span 1 / span 2 / span 1 / span 2; }
  .image-36,
  .icon-phone,
  .image-39 { width: 60px; }
  .email-cu-text { text-align: left; margin-left: 10px; margin-right: 10px; font-size: 14px; }
  .phone-number-cu { max-width: 180px; font-size: 14px; }
  .text-block-9 { max-width: 180px; font-size: 14px; }
}

@media screen and (max-width: 767px) {
  .book-an-appoint-form-and-map-copy { margin-top: 120px; }
  .main-container-ba { margin-top: 30px; margin-bottom: 30px; padding-top: 0; padding-bottom: 40px; }
  .homepage-heading-ba {
    text-align: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    font-size: 38px;
  }
  .paragraph-22 { max-width: 450px; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 28px; }
  .form-wraper-b-a { gap: 60px; }
  .form-block-ba { padding: 10px; }
  .form-2-ba { justify-content: flex-start; align-items: center; padding: 20px; }
  .text-field-2-ba,
  .text-field-4-ba,
  .text-field-5-ba { padding-top: 30px; padding-bottom: 30px; }
  .textarea-ba { padding-top: 20px; }
  .button-form-ba { text-align: center; padding: 12px 32px; }
  .adress-form {
    gap: 16px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  .phone-number-copy-copy { gap: 15px; width: 250px; }
  .image-36,
  .icon-phone,
  .image-39 { width: 50px; }
}

@media screen and (max-width: 479px) {
  .book-an-appoint-form-and-map-copy { margin-top: 100px; }
  .homepage-heading-ba {
    gap: 10px;
    text-align: center;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    margin-top: -69px;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 38px;
    line-height: 50px;
    display: flex;
  }
  .paragraph-22 { max-width: 420px; }
  .form-2-ba { gap: 10px; justify-content: center; align-items: center; padding: 10px; }
  /* Four Webflow hand-offsets that look like mistakes and are not. They are what
     put the original's first field at 194 wide inside a 304 column and pull the
     second back over the gap. Measured: div-block-37 304 x 99 @x23.5 with a
     194-wide input, div-block-40 133 x 99 @x233.5, div-block-38 304 x 99 with a
     197-wide input, div-block-39 137 x 120 @x229.5. */
  .div-block-37 { padding-left: 0; padding-right: 110px; }
  .div-block-40 { margin-left: -104px; }
  .div-block-38 { padding-right: 107px; }
  .div-block-39 { margin-left: -108px; padding-left: 0; padding-right: 0; }
  .text-field-2-ba,
  .text-field-4-ba { padding-top: 20px; padding-bottom: 40px; }
  .text-field-5-ba { padding-top: 20px; padding-bottom: 40px; padding-right: 0; }
  .textarea-ba { padding-top: 20px; }
  .button-form-ba { margin-top: 15px; }
  .adress-form { grid-template-rows: auto auto auto; grid-template-columns: 1fr; }
  .phone-number-copy-copy { gap: 15px; }
  .phone-number-copy-copy--phone { grid-column: span 1 / span 1; }
  .email-cu-text,
  .phone-number-cu,
  .text-block-9 { font-size: 14px; }
}