/* ============================================================
   Pack — classic / style.css

   Body typography, heading scale, eyebrow + divider statics,
   and every component finish (buttons, hero, services rows,
   proof band, team cards, reviews, contact, FAQ, gallery,
   closing CTA, footer).

   Cascade discipline: wrapped in @layer pack so structure rules
   from core.css never collide. Per-client palette overlays are
   unlayered and always win.

   Motion rules live in motion.css. The divider's static visual
   properties (height, width, background, border-radius, margin)
   stay here so the divider remains a visible line if a future
   client opts out of motion entirely.
   ============================================================ */

@layer pack {

  /* ---- Body typography defaults ---------------------------- */
  body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);   /* preserves pre-existing undefined-fallback */
    color: var(--ink);
    background: var(--surface);   /* 2026-11-12 Andre: one page colour everywhere; colour changes are feathered page breaks, never a line */
  }

  /* ---- Eyebrow line (used above section titles) ------------ */
  .hd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .hd-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
    box-shadow: 0 0 0 4px rgba(20, 120, 162, 0.15);
  }

  /* ---- Divider — static visual props (motion in motion.css) - */
  .hd-divider {
    height: 1px;
    width: 100%;
    background: var(--divider);
    border-radius: 100px;
    margin: 12px 0 24px;
  }

  /* ---- Heading scale --------------------------------------- */
  .hd-h1 {
    font-family: var(--font-display);
    font-size: var(--text-display-1);
    line-height: var(--lh-hero);
    letter-spacing: var(--tr-display-1);
    font-weight: 500;
  }
  .hd-h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-h2);
    font-weight: 500;
  }
  .hd-h2--lg {
    font-size: var(--text-h2-lg);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-h2-lg);
  }
  .hd-h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    line-height: var(--lh-body-tight);
    letter-spacing: var(--tr-body-tight);
    font-weight: 500;
  }
  .hd-h4 {
    font-size: var(--text-body);
    font-weight: 600;
  }

  .hd-body  { color: var(--ink-dim); }
  .hd-muted { color: var(--ink-dim); }

  /* ============================================================
     Component finish — buttons, sections, etc.
     Originally extracted from heydesign/styles/components.css.
     ============================================================ */
/* ============================================================
   HeyDesign Components — buttons, pills, cards, form, marquee.
   Visual reference: OralCare layout; code is ours.
   ============================================================ */

/* ---- Buttons / Pills ---- */
/* Pristine button shape — restored 2026-06-10 from
   library/_archive/heydesign-superseded-2026-06-07/styles/components.css.
   The slide-up hover variant and per-variant hover-fill tokens are
   carried in extracted themes under library/themes/<name>/style.css. */
.hd-btn {
  /* OC compile (preset 1vqp3do): Inter 16px / 400 / 170% / -0.3px, padding 12px 16px, radius 100px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 170%;
  transition: transform var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  text-decoration: none;
}
.hd-btn:hover { transform: translateY(-1px); }

/* BUTTON CONTRACT
   Buttons are DECOUPLED from --accent. The accent is for tag pills,
   badge icons, eyebrow dots, hover states, nav-active marker — decorative
   surfaces only. Buttons get their own readable LIGHT pill treatment so they
   stay legible against ANY client palette.
     .hd-btn--primary  — white pill, dark text, 1px border + soft shadow.
                         Works on light page sections AND on dark photo bgs.
     .hd-btn--light    — same white pill WITHOUT border/shadow.
                         Reserved for use on dark banners where the bg
                         gives the pill plenty of definition.
   Per-client recoloring stays on accent surfaces only. */
.hd-btn--primary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05);
}
.hd-btn--primary:hover {
  background: #FBFCFD;
  box-shadow: 0 2px 8px rgba(14, 34, 51, 0.10);
}

.hd-btn--light {
  background: var(--surface);
  color: var(--ink);
}
.hd-btn--light:hover { opacity: 0.92; }

/* Secondary CTA is a SOLID near-white pill with dark ink text. */
.hd-btn--ghost {
  background: var(--bg-warm);
  color: var(--ink);
  border: 0;
}
.hd-btn--ghost:hover { background: var(--border); }

.hd-btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.hd-btn--dark {
  background: var(--ink);
  color: var(--surface);
}

.hd-btn--sm  { padding: 8px 14px; font-size: var(--text-small); }
/* Up-right diagonal arrow modifier — pairs with any button. Opt-in per CTA
   via slot flag `cta.arrow: true`. Rendered as a CSS mask of a 24-viewBox
   SVG (diagonal line + L-shape, drawn from scratch) so it tracks
   currentColor and scales with the button's font-size. Static visual
   lives here; the hover translate lives in motion.css so a no-motion pack
   still ships the arrow without animation. */
.hd-btn--arrow::after {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.4em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>") center/contain no-repeat;
  vertical-align: -0.08em;
}

/* Dot prefix used on some pills (matches OC visual) */
.hd-btn .hd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ---- Nav ----
   OC compile reference:
   - Outer header (.framer-3Wi9S.framer-try5fq): position fixed top:0, padding 16px 0, z-index 10
   - Nav pill (.framer-f6y3xy): max-width 1300, padding 12px 40px, radius 8px, shadow 0 2px 4px rgba(13,27,21,0.2)
   - Link group (.framer-ecjt7v): gap 20px
   - Link (.framer-9gszi): padding 0 12px, gap 6px (dot↔text)
   - Link text (preset ozjlp5): Inter 16px / 500 / 170% / -0.3px, color rgb(89,94,92)
   - Active link bg #D1FC71, text stays dim #595E5C (not white)
   - Nav CTA shares hero CTA geometry — uses plain .hd-btn.hd-btn--primary
*/
.hd-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px 0;
  pointer-events: none;
}
.hd-nav {
  pointer-events: auto;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 2px 4px var(--overlay-20);
  padding: 12px 40px;
}
.hd-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hd-nav__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.hd-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hd-nav__links a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 170%;
  color: var(--ink-dim);
  padding: 0 12px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.hd-nav__links a:hover { background: var(--bg-warm); }
.hd-nav__links a.is-active,
.hd-nav__links a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}
@media (max-width: 810px) {
  .hd-nav__links { display: none; }
}

/* ---- Nav variant: elongated ----
   Selectable via `variants.nav: nav-elongated` (pack.yaml whole-pack
   default or slots.yaml per-client override). Shares the default nav
   DOM; the `.hd-nav--elongated` modifier scopes every override below
   so the default `.hd-nav` rules above remain active for clients who
   don't pick this variant.

   STRUCTURAL DIFFERENCE FROM DEFAULT:
   The default classic nav is a CENTERED FLOATING PILL (max-width 1200,
   border-radius 8, padding 12 40, shadow). This variant is a
   FULL-WIDTH EDGE-TO-EDGE BAR — the entire viewport width is the nav,
   logo flushed near the left edge, links + CTA clustered near the right
   edge, big empty space between. No rounded container, no max-width
   constraint.

   Typography is a full swap to single-font Manrope (loaded via
   classic's pack.yaml fonts block — sits unrendered for any client
   that doesn't pick this variant). */

/* Wrap: relative position (overrides default's fixed) so the nav sits in
   document flow at the top of the page and the hero starts BELOW it with
   visible breathing room. Lateral padding (24px) gives the nav small
   margins from the viewport edges; bottom padding (32px) creates the
   visible gap between the nav and the hero photo. */
.hd-nav-wrap--elongated {
  position: relative;
  top: auto; left: auto; right: auto;
  z-index: auto;
  padding: 16px 24px 12px;
  pointer-events: auto;
}

.hd-nav.hd-nav--elongated {
  max-width: none;
  width: 100%;
  margin: 0;
  background: var(--surface);
  border-radius: 20px;
  padding: 14px 20px 14px 24px;
  box-shadow: 0 6px 24px rgba(14, 34, 51, 0.08);
  font-family: "Manrope", "Inter", system-ui, sans-serif;
}

.hd-nav--elongated .hd-nav__row {
  gap: 24px;
  align-items: center;
}

/* Wordmark — compact (vs the default 22px Bricolage) so the CTA
   reads as the dominant element on the right side. */
.hd-nav--elongated .hd-nav__wordmark {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}

/* Push the links cluster (and the CTA after it) to the right side;
   leaves the big empty space in the middle that defines this nav's
   horizontal rhythm. */
.hd-nav--elongated .hd-nav__links {
  gap: 32px;
  margin-left: auto;
}

/* Links — Manrope weight 500, full-ink high contrast, no pill padding
   (the default's `0 12px` + 50px radius reads as floating chips;
   removed here so links read as inline text labels). */
.hd-nav--elongated .hd-nav__links a {
  font-family: inherit;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px 0;
  border-radius: 0;
  line-height: 1.5;
}

.hd-nav--elongated .hd-nav__links a:hover {
  background: transparent;
  opacity: 0.7;
}

/* Active link: no accent-filled pill (that's the default nav's
   treatment). The variant uses a slight weight increase only. */
.hd-nav--elongated .hd-nav__links a.is-active,
.hd-nav--elongated .hd-nav__links a[aria-current="page"] {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

/* CTA: filled accent pill — the dominant element on the right.
   Taller, heavier than classic's default white-with-border primary. */
.hd-nav--elongated .hd-btn--primary {
  font-family: inherit;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  box-shadow: none;
  padding: 12px 20px;
  min-height: 48px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.1px;
  line-height: 1;
}

@media (max-width: 810px) {
  .hd-nav.hd-nav--elongated { padding: 12px 16px; }
  .hd-nav--elongated .hd-nav__row { gap: 14px; }
  .hd-nav--elongated .hd-nav__wordmark { font-size: 15px; }
  .hd-nav--elongated .hd-btn--primary { min-height: 40px; padding: 10px 16px; font-size: 13px; }
}

/* ---- Hero ----
   OC compile reference (.framer-udt52m / vazg2j / rm936n / tdn00w / 1vyvxto):
   - Section: height 100vh, padding 0, BG image absolute inset:0 with scale(1.2)
   - Wrapper: max-width 1440, padding 110/70/54 desktop, flex column, place-content center flex-start
   - Content column: max-width 720, padding-top 40, justify-content space-between
       → top content (title/sub/CTAs) at top; bottom content (badge) at bottom
   - Top content gap: 32px (title group ↔ buttons)
   - Title+Subtitle gap: 24px
   - Buttons gap: 10px 24px (row × col), flex-wrap
   - Badge: row, gap 16px, icon 32×32 rounded-square + 2-line text
*/
.hd-hero {
  position: relative;
  height: 100vh;
  max-height: 900px;            /* .framer-fc1bia: matches the reference's
                                   max-height: 900px so badge stays in
                                   viewport on tall screens. min-height
                                   removed — was forcing overflow. */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* the reference uses place-content: center —
                                   title + CTAs + badge cluster vertically
                                   in the middle of the hero, not the top. */
  align-items: center;
}

/* Hero title — size/weight/line-height/letter-spacing adopted from
   preset framer-styles-preset-52a24e (72px / 600 / 110% / -0.04em
   desktop, parsed from styles-block-03.css). FONT FAMILY stays the pack's
   own Bricolage Grotesque — we match the reference's compositional proportions,
   not their brand identity (per [[feedback-match-layout-not-brand]]). */
.hd-hero .hd-h1 {
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.04em;
}
.hd-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2);
  transform-origin: center;
  z-index: -2;
}
.hd-hero__scrim {
  /* OC has no scrim — the photo's own brown wall provides contrast.
     For client photos with brighter regions we keep a soft directional
     scrim biased to the upper-left where the title sits. */
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
                              color-mix(in srgb, var(--ink) 55%, transparent) 0%,
                              color-mix(in srgb, var(--ink) 30%, transparent) 45%,
                              color-mix(in srgb, var(--ink) 10%, transparent) 100%);
  z-index: -1;
}
.hd-hero__wrap {
  /* Content Wrapper — .framer-vazg2j */
  width: 100%;
  max-width: 1440px;
  flex: 1 0 0;
  padding: 110px 70px 54px;
  display: flex;
  flex-direction: column;
}
.hd-hero__content {
  /* Content column — .framer-rm936n */
  max-width: 720px;
  flex: 1 0 0;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--surface);
}
.hd-hero__top {
  /* Top Content — .framer-tdn00w. Holds title group + buttons. */
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hd-hero__titlegroup {
  /* Title & Subtitle — .framer-1vyvxto */
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hd-hero__sub {
  /* OC preset 1ex8cxa: Inter 20px / 400 / 170% / -0.03px, color rgb(245,244,247) */
  max-width: 540px;
  margin: 0;
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: -0.03px;
}
.hd-hero__ctas {
  /* Buttons — .framer-1vcihha: flex-wrap with 10px row gap / 24px col gap */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 0;
}

/* Hero badge — anchored to bottom-right of the hero (sibling of .hd-hero__wrap).
   Generous breathing room: 54px from bottom + 70px from right matches the
   .hd-hero__wrap padding rhythm. max-width keeps the label from sprawling. */
.hd-hero__badge {
  position: absolute;
  bottom: 54px;
  right: 70px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  max-width: 360px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  color: var(--surface);
}
.hd-hero__badge-icon {
  /* OC SVG icon container — 32×32 rounded-square (radius ~27%), pad-top 6px to align with title baseline */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 6px;
  border-radius: 8.5px;
  background: var(--accent);
  color: var(--accent-ink);
  flex: none;
}
.hd-hero__badge-icon svg { width: 22px; height: 22px; display: block; }
.hd-hero__badge-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.hd-hero__badge-text strong {
  /* OC preset jwr5lx: Inter 20px / 500 / 170% / -0.03px */
  display: block;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03px;
  line-height: 170%;
  color: var(--surface);
}
.hd-hero__badge-text small {
  /* OC preset 1vqp3do: Inter 16px / 400 / 170% / -0.3px */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 170%;
  color: var(--surface);
}

/* ---- Hero: framed modifier (slot-driven option) ----
   Slot-gated by `hero.framed: true`. Default hero is full-bleed
   edge-to-edge; when framed, the section sits with lateral margins
   and rounded corners, matching the nav-elongated variant's framed-
   page layout. The hero's existing `overflow: hidden` (set on
   .hd-hero above) clips the bg_image to the rounded corners. */
.hd-hero--framed {
  margin: 0 24px;
  border-radius: 24px;
  overflow: hidden;          /* defensive — the default .hd-hero already
                                sets it but the modifier reaffirms so
                                the bg_image clips to the rounded shape */
  /* When paired with nav-elongated (which sits in document flow above
     the hero, ~104px tall), the default .hd-hero height: 100vh causes
     nav + hero to exceed viewport — pushing the badge below the fold.
     Constrain the framed hero to (viewport - nav clearance) so the
     badge is always visible without scrolling. */
  height: calc(100vh - 112px);
  max-height: 788px;
  /* (Sticky removed — was pinning the hero for the ENTIRE page length, so
     after scrolling past the testimonial the pinned hero would re-emerge
     behind the contact/footer cards wherever a card's bg wasn't fully
     opaque or had margin. The "card-slides-up-over-hero" effect is now
     achieved purely by section z-order + section bg-cards, no sticky.) */
}
@media (max-width: 810px) {
  .hd-hero--framed { margin: 0 16px; border-radius: 16px; }
}

/* Hero responsive — match OC compile breakpoints */
@media (max-width: 1439.98px) {
  .hd-hero__wrap { padding: 110px 40px 54px; }
  .hd-h1 { font-size: 64px; }
  .hd-hero__sub { font-size: 18px; }
  .hd-hero__ctas { gap: 10px 16px; }
}
@media (max-width: 809.98px) {
  /* height:auto + min-height: a long title, two CTAs and the review badge
     exceeded 90vh on a 390 px phone and overflow:hidden clipped the first
     title line under the fixed nav (2026-10-30, first real builds). */
  .hd-hero { min-height: 90vh; height: auto; justify-content: flex-end; }
  .hd-hero__wrap { padding: 110px 20px 24px; }
  .hd-hero__content { max-width: 410px; padding-top: 32px; gap: 32px; }
  .hd-hero__top { gap: 36px; }
  .hd-hero__titlegroup { gap: 20px; }
  .hd-h1 { font-size: 50px; }
  .hd-hero__badge {
    /* On small viewports drop the badge to bottom-left of the wrap so it
       can't get hidden under thumbs or overflow narrow screens. */
    right: auto;
    left: 20px;
    bottom: 24px;
    gap: 12px;
    max-width: calc(100% - 40px);
  }
  .hd-hero__badge-icon { width: 24px; height: 24px; }
  .hd-hero__badge-icon svg { width: 18px; height: 18px; }
}

/* ---- Hero review badge — optional trust element ----
   Slot-gated via hero.review_badge. Composition matching the reference's
   `.framer-B36Qk.framer-bix2kb` pill WRAPPER (which lives as INLINE
   STYLE on the HTML element, not in the external CSS bundle — that's
   why the prior pass missed it):

     - .hd-hero__review            outer pill: flex ROW, avatars on the
                                   LEFT, text block on the RIGHT, 16px
                                   gap between them. Dark translucent
                                   background, heavy backdrop blur,
                                   full pill radius, subtle inner white
                                   top highlight.
       - .hd-hero__review-avatars    .framer-vukcb3 — 98px×36px relative
                                     container holding 4 avatars
                                     absolute-positioned at
                                     left 0 / 21 / right 20 / right 0
       - .hd-hero__review-meta       .framer-1qi979h "Review Info Block" —
                                     flex column, gap 5px, NO inner
                                     background. Two stacked rows.
         - .hd-hero__review-row        rating number + stars
         - .hd-hero__review-count      "168 Reviews on Google"

   FONT FAMILY stays the pack's own Inter — the reference uses Manrope; we
   match composition (sizes/weights/line-heights/colors), not brand
   (per [[feedback-match-layout-not-brand]]). The per-avatar hover
   bounce lives in motion.css. */
.hd-hero__review {
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;                    /* Gap between avatar stack and
                                   text block */
  padding: 12px 24px 12px 16px; /* .framer-B36Qk.framer-bix2kb
                                   exact padding (T12 R24 B12 L16) */
  margin-top: 0;                /* badge sits at the bottom via
                                   justify-content: space-between on
                                   the content column — no manual gap
                                   needed */
  background: rgba(0, 0, 0, 0.2);     /* inline source: rgba(0,0,0,0.2) */
  -webkit-backdrop-filter: blur(25px);  /* inline source: blur(25px) */
          backdrop-filter: blur(25px);
  border-radius: 100px;               /* inline source: 100px (full pill) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
                                /* inline source: subtle inner top
                                   highlight (20% white). */
  color: var(--on-dark);
  font-family: var(--font-body);
}

/* Avatar stack — absolute positioning matching the reference's .framer-vukcb3:
   container 98px wide × 36px tall, 4 avatars at 36px each positioned
   at left 0 / 21 / 42 / 62 (evenly spaced ~21px apart). */
.hd-hero__review-avatars {
  position: relative;
  width: 98px;
  height: 36px;
  flex: none;
}
.hd-hero__review-avatar {
  position: absolute;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  object-fit: cover;
  background: var(--bg-warm);
}
.hd-hero__review-avatar:nth-child(1) { left: 0; }
.hd-hero__review-avatar:nth-child(2) { left: 21px; }
.hd-hero__review-avatar:nth-child(3) { left: 42px; }
.hd-hero__review-avatar:nth-child(4) { left: 62px; }
.hd-hero__review-avatar:nth-child(5) { left: 83px; }

/* Meta block — .framer-1qi979h: flex column, gap 5, NO background.
   The whole thing sits directly on the hero photo; contrast comes from
   the photo + scrim, not from a pill background. */
.hd-hero__review-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Row 1: rating number + stars. the reference's .framer-1d9ieqv — flex row,
   align center. Rating comes first, stars second. */
.hd-hero__review-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Rating "4.8" — preset framer-styles-preset-1t1jemo
   (verified: 16px / 600 / 120% / 0em letter-spacing, color #fff). */
.hd-hero__review-rating {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  color: var(--on-dark);
}

/* Stars row — .framer-1sa5cp: gap 2px, star size 16x16, white. */
.hd-hero__review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--on-dark);
}
.hd-hero__review-stars svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Row 2: "168 Reviews on Google" — preset
   framer-styles-preset-1jasyq8 (verified: 14px / 500 / 120% / 0em).
   Color rgba(255,255,255,0.7) per the reference's --extracted-r6o4lv token. */
.hd-hero__review-count {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.7);
}
.hd-hero__review-source {
  color: inherit;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.hd-hero__review-source svg {
  height: 16px;
  width: auto;
  display: block;
  fill: currentColor;
}

/* When the hero is framed, the content column anchors to the LOWER
   THIRD of the framed area (title → CTA → badge stack sits near the
   bottom edge with breathing room below). Matches the reference's visual
   composition where the content cluster occupies the bottom ~35% of
   the hero, with negative space above. Extra padding-bottom keeps
   the badge clear of the framed edge (.hd-hero__wrap's 54px alone
   was clipping the bottom row of the badge text). */
/* Framed hero uses the BASE .hd-hero__content rule (justify-content:
   space-between) — title cluster at TOP, review badge at BOTTOM.
   Targets pixel-measured from the framed-hero reference, normalized
   to 1440 viewport:
     Gap2 (photo-top → title-top):       63 px
     Gap3 (badge-bottom → photo-bottom):  1 px
   The default .hd-hero__wrap padding (110/70/54) is calibrated for
   OralCare's full-bleed hero; the framed-hero variant needs tighter
   top + near-zero bottom. Override the wrap padding directly so all
   the offset math lives in one place, and zero out .hd-hero__content
   padding so it doesn't add on top. */
.hd-hero--framed .hd-hero__wrap {
  padding: 63px 70px 36px 24px;
  max-width: none;
}
.hd-hero--framed {
  align-items: stretch;            /* Override .hd-hero's align-items:
                                       center so the wrap doesn't get
                                       horizontally centered. */
}
.hd-hero--framed .hd-hero__content {
  padding: 0;
}
/* De-crop the framed hero photo. The base .hd-hero__bg has
   transform: scale(1.2) — an OralCare-derived zoom that crops 20%
   off the photo. For the framed-hero variant the photo should
   render at its natural framing (object-fit: cover, no extra zoom). */
.hd-hero--framed .hd-hero__bg {
  transform: none;
}

@media (max-width: 809.98px) {
  .hd-hero__review { margin-top: 20px; gap: 10px; }
  .hd-hero__review-avatars { width: 84px; height: 32px; }
  .hd-hero__review-avatar { width: 32px; height: 32px; }
  .hd-hero__review-avatar:nth-child(2) { left: 18px; }
  .hd-hero__review-avatar:nth-child(3) { left: 36px; }
  .hd-hero__review-avatar:nth-child(4) { left: 52px; }
  .hd-hero__review-avatar:nth-child(5) { left: 70px; }
  .hd-hero__review-rating { font-size: 15px; }
  .hd-hero__review-count { font-size: 13px; }
  .hd-hero__review-stars svg { width: 14px; height: 14px; }
}

/* All non-hero sections layer above the hero in the stacking order so
   they paint cleanly over it when scrolling. z-index:1 stacks above
   .hd-hero--framed (z-index:0). position:relative is required for the
   z-index to take effect. */
.hd-section:not(.hd-hero) {
  position: relative;
  z-index: 1;
}

/* Services & FAQ keep their original layout — not wrapped in a single
   big card; services is a sidebar + list of individual small cards,
   FAQ is a 2-column with the questions on the right. */
#services.hd-section,
#faq.hd-section {
  background: transparent;   /* one page colour; the fixed backdrop paints it */
}
/* Rhythm (DEMO-DESIGN-BRIEF.md §3, 2026-10-30): team on a pale accent tint, reviews and gallery on white,
   the three dark moments are contact, closing and footer. Section weights vary on purpose. */
#team.hd-section { --backdrop: #EDF2F7; background: transparent; padding: calc(var(--sp-9) + 40px) 0; }   /* page break: the fixed backdrop tweens to light blue while the team is on screen */
#reviews.hd-section, #gallery.hd-section { background: transparent; }
#services.hd-section { padding: var(--sp-9) 0 var(--sp-10); }
#faq.hd-section, #contact.hd-section { padding: var(--sp-9) 0; }

/* ---- About section background (OC .framer-qaezjm: bg #FFF) ---- */
#about.hd-section,
.hd-section--surface { background: transparent; }

/* ---- About / Manifesto statement (per-word scroll fill) ----
   OC compile: Bricolage 48px / 500 / -3px / 120%, text-align LEFT,
   container max-width 1100px centered. Words begin at opacity 0.1
   (NOT color-shift), animate to opacity 1 via runtime IntersectionObserver. */
.hd-statement {
  font-family: var(--font-display);
  font-size: var(--text-statement);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-statement);
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.hd-statement--centered {
  /* OC: .framer-1twbqgt-container — width 66%, max 1100px, centered.
     Text inside stays left-aligned. Narrower column → text wraps to more
     lines → reads as visually centered even though text-align is left. */
  width: 66%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
/* Motion rules for .hd-statement .hd-word and [data-reveal-fade] live in motion.css. */

/* ---- About body layout (OC: 2-col, portrait + text, max 1000px row, gap 32) ---- */
.hd-about__grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  max-width: 1000px;
  margin: 80px auto 0;
}
@media (max-width: 810px) {
  .hd-about__grid { flex-direction: column; gap: 24px; max-width: none; }
}
.hd-about__portrait {
  /* OC .framer-119kip3: flex 1 0 0, max-width 450, radius 16.
     Let aspect-ratio drive the height; no align-self:stretch (that would
     fight the aspect-ratio and clip the photo). */
  flex: 1 0 0;
  max-width: 450px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 0.9;
}
.hd-about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* OC .framer-1stlfyh inline: transform: scale(1.2) */
  transform: scale(1.2);
  transform-origin: center;
  border-radius: inherit;
}
.hd-about__copy {
  /* OC .framer-klqt03: flex column, flex 1 0 0, justify-content space-between */
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  /* OC preset 1qkrbgm: Bricolage 20px / 500 / -1px / 140%, dim ink */
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: var(--tr-body-tight);
  line-height: var(--lh-body-tight);
  color: var(--ink-dim);
  max-width: none;
}
.hd-about__copy p {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: var(--tr-body-tight);
  line-height: var(--lh-body-tight);
  color: var(--ink-dim);
}
.hd-about__copy p + p { margin-top: var(--sp-4); }
.hd-about__cta { margin-top: var(--sp-5); align-self: flex-start; }

/* ---- Stats row (OC: flex row, space-between, gap 96px above) ---- */
.hd-about__stats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 96px;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 810px) {
  .hd-about__stats {
    flex-wrap: wrap;
    gap: 32px;
    justify-content: flex-start;
  }
  .hd-about__stats > * { flex: 1 1 calc(50% - 16px); }
}
.hd-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hd-stat__num   {
  /* OC preset qvvcg: Bricolage 32px / 500 / -2px / 125% */
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 500;
  letter-spacing: var(--tr-stat);
  line-height: var(--lh-stat);
  color: var(--ink);
}
.hd-stat__label {
  /* OC preset 1vqp3do: Inter 16px / 400 / -0.3px / 170%, dim */
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
}

}

/* ============================================================
   Sections 4–12 (services, proof band, team, reviews, contact,
   FAQ, gallery, closing CTA, footer) + the tag pill.

   Added 2026-10-30 (first live batch, the first classic build on a real lead):
   the pack only styled nav / hero / about, so every later
   section rendered unstyled (bare SVG icons at full width, no
   grid). The rules below cover every class the signature
   partials emit for those sections, in the classic register:
   light surfaces, white cards, 16 px radius, Bricolage 500 for
   titles, Inter for body, one accent. Layout mirrors the
   luxury pack's section rules (same structure, same classes)
   with classic's tokens and weights. Motion stays in motion.css.
   ============================================================ */
@layer pack {
  :root {
    /* The footer partial uses --hd-sp-3 inline; alias the scale. */
    --hd-sp-1: var(--sp-1); --hd-sp-2: var(--sp-2); --hd-sp-3: var(--sp-3);
    --hd-sp-4: var(--sp-4); --hd-sp-5: var(--sp-5); --hd-sp-6: var(--sp-6);
  }
  .hd-about__copy-body { display: flex; flex-direction: column; }

/* ============================================================
   Sections from Services to the footer: the June 8 HeyDesign build
   (Drive > 4 Test runs > downtown-dental > build-hd, style.css lines 766-2171),
   restored 2026-11-04. Andre: the June build is the design; the October
   rewrite (archive/2026-11-04-classic-pack-compact-sections/) lost the
   service buttons, the testimonial cards, the team cards, the contact
   panel, the FAQ head and the footer socials.
   ============================================================ */
/* ---- Services ----
   OC compile anatomy (one row):
   - Row .framer-odsh44: flex row, justify-content space-between, align-items center, gap 60
   - Image .framer-1thaxpr: fixed 320x295, border-radius 6
   - Text Content .framer-o1w64t: flex row, flex 1 0 0, max-width 900,
       padding 40 0, border-top 1px + border-bottom 1px (the row dividers),
       inner gap 60 between Left and Right
   - Left .framer-nzim95: flex col, gap 20, max-width 282
       - Serial preset qvvcg: Bricolage 32/500/-2/125% dark
       - Point list: flex col, gap 12. Each bullet: row, gap 6, 5x5 dim dot + Inter 16/400/-0.3px/170% dim
   - Right .framer-3u34cj: flex col, gap 20
       - Title preset djpaa3: Bricolage 40/500/-3px/120% dark
       - Subtext preset 1vqp3do: Inter 16/400/-0.3px/170% dim, width 70%
       - CTA: shared button geometry */
.hd-services__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--sp-4);
}
.hd-services__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 80px;
}
.hd-service-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  padding: 0;
  border: 0;
  width: 100%;
}
.hd-service-row__img {
  flex: none;
  width: 320px;
  height: 295px;
  object-fit: cover;
  border-radius: 6px;
}
.hd-service-row__content {
  flex: 1 0 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 60px;
  max-width: 900px;
  padding: 40px 0;
  border-top: 1px solid var(--divider);
  /* bottom divider removed 2026-11-04 (Andre: one line between services is enough) */
}
.hd-service-row__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 0 0;
  max-width: 282px;
}
.hd-service-row__num {
  /* 2026-11-04: the October size and the accent blue (Andre: the number looks good like before) */
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--accent);
  margin: 0;
}
.hd-service-row__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hd-service-row__points li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  position: static;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}
.hd-service-row__points li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-dim);
  flex: none;
  position: static;
  left: auto;
}
.hd-service-row__body {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: none;
}
.hd-service-row__title {
  /* OC preset djpaa3: Bricolage 40/500/-3px/120% */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
  margin: 0;
}
.hd-service-row__desc {
  /* OC preset 1vqp3do: Inter 16/400/-0.3px/170% dim, width 70% */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  max-width: 70%;
  margin: 0;
}
.hd-service-row__cta {
  align-self: flex-start;
  margin: 0;
}
@media (max-width: 960px) {
  .hd-service-row { flex-direction: column; gap: 20px; align-items: flex-start; }
  .hd-service-row__img { width: 100%; height: auto; aspect-ratio: 1.085; }
  .hd-service-row__content { flex-direction: column; gap: 24px; padding: 20px 0; }
  .hd-service-row__meta { max-width: none; }
  .hd-service-row__desc { max-width: none; }
}

/* ---- Before & After (OC's #proof slot) ----
   OC compile anatomy (.framer-tkjflz section → .framer-lro8e1 content):
   - Section wrapper: max-w 1440, padding 112px 70px, flex col
   - Content .lro8e1: flex row, gap 64, align center → 2-col
   - Left .13repyd: flex col, flex 1 0 0, gap 48 (text-content + CTA)
     - Text .jckdm3: flex col, gap 32 (top-content + features)
       - Top .1tfdwpu: flex col, gap 24 (tag&heading + subheading)
         - TagHead .1f861s4: flex col, gap 20 (tag pill + h3)
           - Tag pill: 4×4 dark dot + "Why us?" label (Inter 16/400)
           - h3 preset djpaa3: Bricolage 40/500/-3px/120% dark
         - Subhead preset 59o7e3: Inter 18/400/-0.3px/170% dim
       - Features .qmoyas: flex col, gap 24
         - Feature .1hvsm6: flex row, gap 16
           - Icon wrap: 48×48 SVG, pad-top 6
           - Title+sub .q7496p: flex col, gap 8
             - Title preset wfwezm: Inter 20/500/-0.3px/170% dark
             - Sub preset 1vqp3do: Inter 16/400/-0.3px/170% dim
     - CTA: shared green pill
   - Right .j27mov-container: aspect 1 (SQUARE), flex 1 0 0
     - Holds the before/after slider component (we render a single image
       vision-placeholder until real DTD assets arrive) */
.hd-proof {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 960px) {
  .hd-proof { flex-direction: column; gap: 44px; align-items: stretch; }
}
.hd-proof__left {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.hd-proof__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.hd-proof__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hd-proof__taghead {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* OC compile (.framer-117fw58): tag pill stacks ABOVE an animated line —
   flex column, gap 16. Line is the standard .hd-divider, full width below tag. */
.hd-proof__tagstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}
.hd-proof__tagstack .hd-divider {
  margin: 0;
}

/* Right slider widget — static OC composition.
   Vertical white divider line down the middle + circular two-arrow handle. */
.hd-proof__right { position: relative; }
.hd-proof__right::after {
  /* vertical white divider line */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #FFFFFF;
  box-shadow: 0 0 12px rgba(0,0,0,0.18);
  transform: translateX(-50%);
  pointer-events: none;
}
.hd-proof__slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.hd-proof__slider-handle svg {
  width: 22px;
  height: 22px;
  color: var(--ink);
  display: block;
}
.hd-proof__title {
  /* OC preset djpaa3: Bricolage 40/500/-3px/120% */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
  margin: 0;
}
.hd-proof__body {
  /* OC preset 59o7e3: Inter 18/400/-0.3px/170% dim */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  letter-spacing: var(--tr-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-dim);
  margin: 0;
  max-width: 56ch;
}
.hd-proof__points {
  /* OC .qmoyas: flex col, gap 24 */
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hd-proof__point {
  /* OC .1hvsm6: flex row, gap 16, align-items flex-start */
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}
.hd-proof__icon {
  /* OC .1vkwec + .1o7xsys: 48×48 SVG, padding-top 6 to align with text */
  width: 48px; height: 48px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  padding-top: 6px;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.hd-proof__icon svg { width: 28px; height: 28px; display: block; }
.hd-proof__point-body {
  /* OC .q7496p: flex col, flex 1 0 0, gap 8 */
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hd-proof__point h4 {
  /* OC preset wfwezm: Inter 20/500/-0.3px/170% dark */
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 170%;
  color: var(--ink);
  margin: 0;
}
.hd-proof__point p {
  /* OC preset 1vqp3do: Inter 16/400/-0.3px/170% dim */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  margin: 0;
}
.hd-proof__cta { margin: 0; align-self: flex-start; }

/* Right slider — OC .j27mov-container: aspect 1, flex 1 0 0, border-radius 8 */
.hd-proof__right {
  flex: 1 0 0;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
}
.hd-proof__right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}
/* BEFORE image (yellowed teeth) overlays the AFTER image, clipped to left half.
   OC reference: clip-path inset(0 50% 0 0) reveals 0..50% horizontally. */
.hd-proof__right img.hd-proof__img--before {
  clip-path: inset(0 50% 0 0);
}

/* Tag pill — small categorical label (OC .1eextk1 + dot .bu6a27) */
.hd-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hd-tag-pill::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 30px;
  background: var(--ink);
  flex: none;
}
.hd-tag-pill__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  color: var(--ink);
}

  /* ---- Team ------------------------------------------------ */
  .hd-team__header {
    display: flex; flex-direction: row; justify-content: space-between;
    align-items: flex-end; gap: var(--sp-5);
  }
  .hd-team__taggroup { display: flex; flex-direction: column; gap: var(--sp-5); flex: 1 0 0; }
  .hd-team__tagstack { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 460px; }
  .hd-team__tagstack .hd-divider { margin: 0; }
  .hd-team__title { font-weight: 500; }
  .hd-team__grid, .hd-team__grid--two {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5); margin-top: var(--sp-7);
  }
  .hd-team__grid--two { grid-template-columns: repeat(2, 1fr); }
  .hd-team__grid > :only-child { max-width: 600px; grid-column: 1 / -1; justify-self: center; width: 100%; }  /* one dentist: bigger, in the middle */
  @media (max-width: 810px) { .hd-team__grid, .hd-team__grid--two { grid-template-columns: 1fr; } }
  .hd-team-card {
    background: transparent; border: 0;
    display: flex; flex-direction: column;
  }
  .hd-team-card__portrait-wrap { background: var(--portrait-tint); overflow: hidden; border-radius: 32px; }   /* OralCare: team image radius 32 */
  .hd-team-card__portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
  .hd-team-card__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-2) 0; }
  .hd-team-card__info { display: flex; flex-direction: column; gap: var(--sp-3); }
  .hd-team-card__name {
    font-family: var(--font-display); font-size: var(--text-stat); font-weight: 500;
    letter-spacing: var(--tr-stat); line-height: var(--lh-stat); color: var(--ink);
  }
  .hd-team-card__contact-row {
    display: flex; flex-direction: row; justify-content: space-between;
    align-items: flex-end; gap: var(--sp-3);
  }
  .hd-team-card__role-num { display: flex; flex-direction: column; gap: var(--sp-2); }
  .hd-team-card__role { font-size: var(--text-body); color: var(--ink-dim); }
  .hd-team-card__phone { display: inline-flex; align-items: center; font-size: var(--text-body); color: var(--ink-dim); }
  .hd-team-card__phone svg { width: 16px; height: 16px; fill: var(--ink); margin-right: 0.4em; }
  .hd-team-card__socials { display: flex; flex-direction: row; gap: var(--sp-2); }
  .hd-team-card__socials a {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-dim); background: var(--bg-warm);
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .hd-team-card__socials a:hover { background: var(--accent); color: var(--accent-ink); }
  .hd-team-card__socials a svg, .hd-team-card__socials a img { width: 16px; height: 16px; }
  .hd-team-card__cta { width: 100%; justify-content: center; }

/* ---- Reviews / Testimonials section ----
   Reference: hey12312.png — two-block layout:
   (1) Outer header: tag pill + animated line, then LEFT h2 + RIGHT body copy
   (2) Inner cream card: centered TESTIMONIALS eyebrow + subtitle + 3 review cards.
   Middle card variant has the attribution floating above the card top edge. */

/* --- Outer header (left h2 + right body) --- */
.hd-reviews__outer-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
.hd-reviews__tagstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}
.hd-reviews__tagstack .hd-divider { margin: 0; }
.hd-reviews__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
@media (max-width: 810px) {
  .hd-reviews__split { grid-template-columns: 1fr; gap: 24px; }
}
.hd-reviews__display-title {
  font-family: var(--font-display);
  font-size: var(--text-h2-lg);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h2-lg);
  color: var(--ink);
  margin: 0;
}
.hd-reviews__display-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 170%;
  color: var(--ink-dim);
  margin: 0;
  max-width: 48ch;
}

/* --- Inner cream card (centered eyebrow + subtitle + 3 cards) --- */
.hd-reviews__card-container {
  background: var(--bg-warm);
  border-radius: 24px;
  padding: 64px 48px;
}
@media (max-width: 810px) {
  .hd-reviews__card-container { padding: 48px 24px; }
}
.hd-reviews__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}
.hd-reviews__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hd-reviews__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -2px;
  color: var(--ink);
  margin: 0;
}
.hd-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .hd-reviews__grid { grid-template-columns: 1fr; }
}
.hd-review-card {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hd-review-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 130%;
  color: var(--ink);
  margin: 0;
}
.hd-review-card__body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 170%;
  color: var(--ink-dim);
  margin: 0;
  flex: 1 0 auto;
}
.hd-review-card__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.hd-review-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-warm);
  color: var(--ink);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.hd-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-review-card__attr-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hd-review-card__attr-text strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.hd-review-card__attr-text small {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-dim);
}

/* Middle card variant — attribution floats above the card top edge */
.hd-review-card--top-attr { margin-top: 32px; }
.hd-review-card--top-attr .hd-review-card__attr {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  padding: 8px 24px 8px 8px;
  border-radius: 100px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent);
  white-space: nowrap;
  margin-top: 0;
  z-index: 2;
}
.hd-review-card--top-attr .hd-review-card__avatar {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

/* ---- Contact (OC compile reference) ----
   Dark forest card with white form (left) + display heading + promises (right).
   - Card .s0lr4o: bg dark ink, radius 32, padding 70, flex row
   - Content .18x58sy: flex row, space-between, items center (both cols stretch)
   - Left form .xsf9ch: white bg, radius 16, padding 40 20, max-w 500,
       flex col items center gap 32
   - Form .55pq47: flex col gap 20 (between each field)
   - Each label .1x6k0qf: flex col gap 10 (label text → input)
     - Label preset 11no81s: Inter 16/600/-0.3/170% dark
     - Input/select: bg light gray, padding 12 16, radius 8, no border, 16/400
   - Date & Time row .709140: flex row gap 16, each field flex 1
   - Submit: full-width green pill (shared button), no dot prefix
   - Right .ab0bk1: max-w 581, flex col space-between, align-self stretch
   - Right Top .akq7ni: flex col items flex-start gap 20
     - Tag pill "Reserve Now" + animated dim line
     - Title/Subtitle .135fdjc: gap 24
       - h2 preset 1jfrnpf: Bricolage 52/500/-4.5/115% WHITE
       - p preset 1qkrbgm: Bricolage 20/500/-1/140% cream #F2F2EF
   - Right Bottom .1qhs0kr: flex col items center gap 80, width 100%
     - Animated divider line (dim gray on dark bg)
     - Promises .1ef2ra7: flex row gap 32, each flex 1 0 0
       - Each promise .eed09r: flex col gap 16
         - Icon+Title .1hws84h: flex col gap 12 (24×24 leaf SVG + Title)
         - Title preset ppj0im: Bricolage 28/500/-0.5/140% white (Gilda → Bricolage brand swap)
         - Subtitle preset 1aqboz4: Inter 16/400/170% white (Jost → Inter brand swap) */
.hd-contact {
  /* Background-image is slot-driven via sections.contact.bg_image — emitted
     inline on the element by contact.html.j2 when the client provides it.
     Default: solid ink fill. */
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--surface);
  border-radius: 32px;
  padding: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 810px) {
  .hd-contact { flex-direction: column; padding: 40px; align-items: stretch; }
}
.hd-contact__form {
  background: var(--surface);
  color: var(--ink);
  border-radius: 16px;
  /* Thinner and longer per design feedback — was 40 20, max-w 500 */
  padding: 56px 28px;
  max-width: 440px;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.hd-contact__form h3 {
  /* OC preset djpaa3: Bricolage 40/500/-3/120% dark */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
  margin: 0;
  text-align: left;
  width: 100%;
}
.hd-contact__fields {
  /* OC .55pq47: flex col, gap 20 between fields. Slightly bigger for the
     longer-form proportion the design needs. */
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.hd-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.hd-field label {
  /* OC preset 11no81s: Inter 16/600/-0.3/170% dark */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 170%;
  color: var(--ink);
}
.hd-field input, .hd-field select, .hd-field textarea {
  font: inherit;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 170%;
  width: 100%;
}
.hd-field input::placeholder { color: color-mix(in srgb, var(--ink) 50%, transparent); }
.hd-field select { appearance: none; -webkit-appearance: none; }
.hd-field--row {
  /* OC .709140: flex row, gap 16 */
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}
.hd-field--row > .hd-field { flex: 1 0 0; min-width: 0; }
.hd-contact__submit { width: 100%; }

/* Right column */
.hd-contact__right {
  flex: 1 0 0;
  max-width: 581px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.hd-contact__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.hd-contact__tagstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 460px;
}
.hd-contact__tagstack .hd-tag-pill__label { color: rgba(245, 244, 247, 0.85); }
.hd-contact__tagstack .hd-tag-pill::before { background: rgba(245, 244, 247, 0.85); }
.hd-contact__tagstack .hd-divider { margin: 0; background: var(--divider-on-dark); }
.hd-contact__titlegroup {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.hd-contact__title {
  /* OC preset 1jfrnpf: Bricolage 52/500/-4.5/115% white */
  font-family: var(--font-display);
  font-size: var(--text-h2-lg);
  font-weight: 500;
  letter-spacing: var(--tr-h2-lg);
  line-height: var(--lh-tight);
  color: var(--surface);
  margin: 0;
}
.hd-contact__lede {
  /* OC preset 1qkrbgm: Bricolage 20/500/-1/140% cream */
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: var(--tr-body-tight);
  line-height: var(--lh-body-tight);
  color: #F2F2EF;
  margin: 0;
}
.hd-contact__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.hd-contact__bottom .hd-divider { margin: 0; background: var(--divider-on-dark); }
.hd-contact__promises {
  /* OC .1ef2ra7: flex row, gap 32 */
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.hd-contact__promise {
  /* OC .eed09r: flex col, flex 1 0 0, gap 16 */
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.hd-contact__promise-head {
  /* OC .1hws84h: flex col, gap 12 */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hd-contact__promise-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  display: block;
}
.hd-contact__promise-icon svg,
.hd-contact__promise-icon img { width: 100%; height: 100%; display: block; }
.hd-contact__promise h4 {
  /* OC preset ppj0im: Gilda Display 28/400/-0.5/140% → swap to Bricolage */
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 140%;
  color: var(--surface);
  margin: 0;
}
.hd-contact__promise p {
  /* OC preset 1aqboz4: Jost 16/400/0/170% white → swap to Inter */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  color: var(--surface);
  margin: 0;
}

/* ---- FAQ (OC compile reference) ----
   Two-column section:
   - Section .framer-4uizx1: flex row, gap 80, items flex-start
   - LEFT .framer-126khyz: flex col, flex 1 0 0, max-w 480, gap 20
       - Tag pill "Faq" + animated line (.hd-divider)
       - Title & Subtitle .wa7wdb: flex col gap 20
         - h3 preset djpaa3: Bricolage 40/500/-3/120% — "Frequently Asked Question" (singular)
         - p preset 59o7e3: Inter 18/400/-0.3/170% dim, width 75%
   - RIGHT .framer-1rjajr0-container: flex 1, accordion list
     - List .12ot5yh: flex col, gap 16
     - Each item .zeyvgt: white bg, radius 8, padding 24 16, flex col gap 16
       - Question row .19k6hv: flex row, space-between, items center
         - Question preset 1qkrbgm: Bricolage 20/500/-1/140% dark
         - Icon 24×24: lime circle with chevron, rotates on open
       - Answer preset 1vqp3do: Inter 16/400/-0.3/170% dim */
.hd-faq__layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 80px;
}
@media (max-width: 810px) {
  .hd-faq__layout { flex-direction: column; gap: 40px; }
}
.hd-faq__head {
  flex: 1 0 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.hd-faq__tagstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.hd-faq__tagstack .hd-divider { margin: 0; }
.hd-faq__titlegroup {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hd-faq__title {
  /* OC preset djpaa3: Bricolage 40/500/-3/120% */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
  margin: 0;
}
.hd-faq__lede {
  /* OC preset 59o7e3: Inter 18/400/-0.3/170% dim, width 75% */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  letter-spacing: var(--tr-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-dim);
  margin: 0;
  width: 75%;
}

.hd-faq {
  /* OC .12ot5yh: flex col, gap 16 */
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hd-faq__item {
  /* OC .zeyvgt: white bg, radius 8, padding 24 16, flex col gap 16, cursor pointer */
  background: var(--surface);
  border: 0;
  border-radius: 8px;
  padding: 24px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.hd-faq__item:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 6%, transparent); }
.hd-faq__q {
  /* OC .19k6hv: flex row, space-between, items center */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.hd-faq__q-text {
  /* OC preset 1qkrbgm: Bricolage 20/500/-1/140% dark */
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: var(--tr-body-tight);
  line-height: var(--lh-body-tight);
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.hd-faq__arrow {
  /* 24×24 accent circle with contrast chevron — uses accent-ink so a dark
     accent (teal) gets a light chevron and a light accent (lime) gets a dark
     chevron. Reading --ink here breaks the contract on dark accents. */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform var(--dur-medium) var(--ease-standard);
}
.hd-faq__arrow svg { width: 12px; height: 12px; display: block; }
.hd-faq__item[data-open="1"] .hd-faq__arrow { transform: rotate(180deg); }
.hd-faq__a {
  /* OC preset 1vqp3do: Inter 16/400/-0.3/170% dim. Closed: max-height 0. */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height var(--dur-medium) var(--ease-standard);
}
.hd-faq__item[data-open="1"] .hd-faq__a { max-height: 400px; }

/* ---- Smile Gallery (OC compile reference) ----
   Two horizontal marquees sandwiching a centered tag + title + subtitle + CTA.
   - Section: flex col, align center, gap 20
   - Top/Bottom Ticker: marquee strip of 115×270 portrait cards (radius 12, gap 16)
       Tracks animate horizontally (swivel motion). Top scrolls left, bottom
       scrolls right so the two strips counter-move for visual interest.
   - Center: tag pill "Our Smile Gallery" + h3 + p + green CTA */
.hd-gallery {
  /* Gallery sits naturally BELOW the FAQ — no negative margin overlap.
     The top marquee strip appears as the first visible element under FAQ,
     matching OC's pattern (FAQ accordion above, marquee strip below). */
  background: transparent;
  padding: 40px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}
.hd-gallery__ticker {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.hd-gallery__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
@keyframes hd-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes hd-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.hd-gallery__ticker--top    .hd-gallery__track { animation: hd-marquee-left  60s linear infinite; }
.hd-gallery__ticker--bottom .hd-gallery__track { animation: hd-marquee-right 60s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .hd-gallery__track { animation: none !important; transform: none !important; }
}
.hd-gallery__track { align-items: flex-start; }
/* OC model — verified live on oralcare.framer.media:
   Each card is a uniform 115×270 invisible LANE.
   Inside, a single 115×110 figure is positioned at one of 5 vertical stops:
     w0 (top:0), w1 (top:40), w2 (top:80), w3 (top:120), w4 (top:160).
   Across consecutive cards, the position follows a SINE WAVE pattern:
     0, 1, 2, 3, 4, 3, 2, 1, repeat …
   That smooth wave is what produces the "flowy" marquee motion you see
   on OC — not scattered top/middle/bottom but a continuous sine curve. */
.hd-gallery__card {
  flex: none;
  width: 115px;
  height: 270px;
  position: relative;
  overflow: visible;
  background: transparent;
}
.hd-gallery__card img {
  width: 115px;
  height: 110px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  position: absolute;
  left: 0;
}
.hd-gallery__card--w0 img { top:   0px; }
.hd-gallery__card--w1 img { top:  40px; }
.hd-gallery__card--w2 img { top:  80px; }
.hd-gallery__card--w3 img { top: 120px; }
.hd-gallery__card--w4 img { top: 160px; }
.hd-gallery__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 620px;
  padding: 32px var(--page-gutter);
  text-align: center;
}
.hd-gallery__titlegroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hd-gallery__title {
  /* OC preset djpaa3: Bricolage 40/500/-3/120% */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.hd-gallery__sub {
  /* OC preset 59o7e3: Inter 18/400/-0.3/170% dim */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  letter-spacing: var(--tr-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-dim);
  margin: 0;
  max-width: 82%;
  text-align: center;
}

/* ---- Closing CTA ---- */
.hd-close {
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
    var(--ink);
  color: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(64px, 10vw, 128px) var(--sp-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hd-close__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto;
}
.hd-close__body  { color: rgba(255,255,255,0.78); margin: var(--sp-5) auto 0; max-width: 56ch; font-size: 17px; }
.hd-close__cta   { margin-top: var(--sp-6); }

  /* ---- Footer ---------------------------------------------- */
  .hd-footer { --backdrop: var(--ink); background: transparent; color: var(--on-dark); padding: calc(var(--sp-9) + 80px) 0 var(--sp-6); }   /* dark footer closes the page: the backdrop tweens to ink as it comes up */
  .hd-footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: end; }
  .hd-footer__title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; letter-spacing: var(--tr-h2); line-height: var(--lh-snug); }
  .hd-footer__email { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; letter-spacing: var(--tr-h2); line-height: var(--lh-snug); color: var(--on-dark); overflow-wrap: anywhere; }
  .hd-footer__small { font-size: var(--text-body); color: var(--on-dark-dim); }
  .hd-footer .hd-divider { margin: var(--sp-7) 0; background: var(--divider-on-dark); }
  .hd-footer__top > div { min-width: 0; }
  .hd-footer__cols { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); }   /* the address column on the right, as the footer we had */
  .hd-footer__cols-left { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-9); }
  @media (max-width: 810px) {
    .hd-footer__top { grid-template-columns: 1fr; }
    .hd-footer__cols { flex-direction: column; gap: var(--sp-6); }
    .hd-footer__cols-left { flex-direction: column; gap: var(--sp-5); }
  }
  .hd-footer__col h5 { font-size: var(--text-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: var(--sp-4); }
  .hd-footer__col li { margin-bottom: var(--sp-3); font-size: var(--text-body); }
  .hd-footer__col a { color: var(--on-dark); }
  .hd-footer__col a:hover { color: var(--accent); }
  .hd-footer__col a[data-active="1"] { color: var(--accent); }
  .hd-footer__line { color: var(--on-dark-dim); }
  .hd-footer__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); font-size: var(--text-small); color: var(--on-dark-dim); }
  .hd-footer__wordmark { font-family: var(--font-display); font-size: clamp(40px, 6vw, 96px); font-weight: 500; letter-spacing: var(--tr-h2); color: var(--on-dark); line-height: 0.95; white-space: nowrap; }
  @media (max-width: 810px) { .hd-footer__bottom { flex-direction: column; align-items: flex-start; } .hd-footer__wordmark { white-space: normal; } }
  /* social icons under the email, 2026-11-04 (Andre: the footer we had, plus the social icons) */
  .hd-footer__socials { display: flex; flex-direction: row; gap: var(--sp-2); margin-top: var(--sp-4); }
  .hd-footer__socials a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--on-dark); border: 1px solid var(--divider-on-dark); transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
  .hd-footer__socials a:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .hd-footer__socials a svg { width: 16px; height: 16px; }

/* ---- Classic only: service tags on the number row (Andre 2026-11-04: after the blue number, same size as before,
   light pastels mixed per row: grey+beige, grey+green+orange, orange+grey, green+beige; a soft top-to-bottom gradient) ---- */
.hd-service-row__numrow { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.hd-service-row__tags { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.hd-service-row__tags li { font-family: var(--font-body); font-size: var(--text-small); line-height: 1.3; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  --tag: #F2F3F5; --tag-ink: #5B6470; background: linear-gradient(180deg, color-mix(in srgb, var(--tag) 45%, #fff) 0%, var(--tag) 100%); color: var(--tag-ink); }
.hd-service-row__tags li.tag-grey   { --tag: #F2F3F5; --tag-ink: #5B6470; }
.hd-service-row__tags li.tag-beige  { --tag: #F6F1E7; --tag-ink: #6E6250; }
.hd-service-row__tags li.tag-green  { --tag: #EAF5EA; --tag-ink: #3B6B45; }
.hd-service-row__tags li.tag-orange { --tag: #FBEEE3; --tag-ink: #8A5A2B; }
/* the mix per row, so no two rows read the same: 1 grey · 2 green, orange · 2 orange, grey · 1 beige */
.hd-service-row:nth-child(1) .hd-service-row__tags li:nth-child(1) { --tag: #F2F3F5; --tag-ink: #5B6470; }
.hd-service-row:nth-child(2) .hd-service-row__tags li:nth-child(1) { --tag: #EAF5EA; --tag-ink: #3B6B45; }
.hd-service-row:nth-child(2) .hd-service-row__tags li:nth-child(2) { --tag: #FBEEE3; --tag-ink: #8A5A2B; }
.hd-service-row:nth-child(3) .hd-service-row__tags li:nth-child(1) { --tag: #FBEEE3; --tag-ink: #8A5A2B; }
.hd-service-row:nth-child(3) .hd-service-row__tags li:nth-child(2) { --tag: #F2F3F5; --tag-ink: #5B6470; }
.hd-service-row:nth-child(4) .hd-service-row__tags li:nth-child(1) { --tag: #F6F1E7; --tag-ink: #6E6250; }
/* ---- Classic only: gallery spacing (Andre 2026-11-04: the June rhythm, one card width of air between photos) ---- */
.hd-gallery__track { gap: 24px; }
/* the centre block keeps the June height whatever the subtitle length (June: 348px with a three-line subtitle), so both strips sit exactly where they sit on the June page */
.hd-gallery__center { min-height: 348px; justify-content: center; }
/* a blank slot in the strip: the empty bordered card of the June page (an image entry with blank: true) */
.hd-gallery__card--blank::before { content: ""; position: absolute; left: 0; width: 115px; height: 110px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hd-gallery__card--w0.hd-gallery__card--blank::before { top: 0; } .hd-gallery__card--w1.hd-gallery__card--blank::before { top: 40px; } .hd-gallery__card--w2.hd-gallery__card--blank::before { top: 80px; } .hd-gallery__card--w3.hd-gallery__card--blank::before { top: 120px; } .hd-gallery__card--w4.hd-gallery__card--blank::before { top: 160px; }
/* ---- Hero variant: split (2026-11-12, Andre's reference: two media cards, headline under them) ----
   Andre's red lines (2026-11-12): the card row is centred and a little wider than the nav (page-max + 120px),
   about twice as wide as tall; left card narrow, right card wide, 16px between. Under it two columns: title and
   buttons on the left, the small text on the right.
   Colour: the clinical demo's fixed-backdrop mechanism, reversed. A position:fixed .hd-backdrop behind the page
   starts charcoal and motion.js tweens it to the page colour as the visitor scrolls out of the hero; the hero and
   the sections paint no background of their own, so there is no seam anywhere. At the swap point motion.js adds
   .is-light to the hero and its text flips from white to ink. */
.hd-backdrop { position: fixed; inset: 0; z-index: -1; background-color: #1A1D20; pointer-events: none; will-change: background-color; }
.hd-hero--split { --backdrop-start: #1A1D20; }
.hd-hero--split { position: relative; min-height: 0; height: auto; max-height: none; display: block; overflow: visible; padding: 104px 0 96px; background: transparent; }
.hd-hero-split__wrap { display: flex; flex-direction: column; gap: 28px; max-width: calc(var(--page-max) + 120px); margin: 0 auto; padding: 0 var(--page-gutter); }
.hd-hero-split__cards { display: grid; grid-template-columns: 61fr 116fr; gap: 16px; aspect-ratio: 1.95; width: 100%; }
.hd-hero-split__card { position: relative; overflow: hidden; border-radius: 24px; background: #2A2E32; min-width: 0; min-height: 0; }
.hd-hero-split__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-hero-split__tags { position: absolute; right: 20px; top: 20px; display: flex; gap: 8px; }
.hd-hero-split__tag { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; background: #EAF5EA; color: #3B6B45; }   /* same pastels as the service tags */
.hd-hero-split__tag:nth-child(2) { background: #FBEEE3; color: #8A5A2B; }
.hd-hero-split__card .hd-hero__review, .hd-hero-split__review { position: absolute; left: 20px; bottom: 20px; z-index: 2; margin: 0; }
.hd-hero-split__below { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hd-hero-split__titlegroup { display: flex; flex-direction: column; gap: 20px; }
.hd-hero--split .hd-hero-split__title { margin: 0; max-width: none; font-size: clamp(24px, 2vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--on-dark); }
.hd-hero--split .hd-hero__ctas .hd-btn--primary { background: var(--accent); color: var(--accent-ink); }
.hd-hero--split .hd-hero__ctas .hd-btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.hd-hero--split .hd-hero__ctas .hd-btn--ghost { background: rgba(255,255,255,.12); color: var(--on-dark); }
.hd-hero--split .hd-hero__ctas .hd-btn--ghost:hover { background: rgba(255,255,255,.2); }
.hd-hero-split__aside { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.hd-hero-split__sub { margin: 0; color: rgba(255,255,255,.72); max-width: 44ch; }
/* after the swap point: ink on the light backdrop */
.hd-hero--split.is-light .hd-hero-split__title { color: var(--ink); }
.hd-hero--split.is-light .hd-hero-split__sub { color: var(--ink-dim); }
.hd-hero--split.is-light .hd-hero__ctas .hd-btn--ghost { background: var(--bg-warm); color: var(--ink); }
@media (max-width: 960px) {
  .hd-hero--split { padding: 96px 0 72px; }
  .hd-hero-split__cards { grid-template-columns: 1fr; aspect-ratio: auto; }
  .hd-hero-split__card--left { aspect-ratio: 4 / 5; }
  .hd-hero-split__card--right { aspect-ratio: 116 / 100; }
  .hd-hero-split__below { grid-template-columns: 1fr; gap: 24px; }
  .hd-hero--split .hd-hero-split__title { font-size: clamp(26px, 6vw, 40px); }
}
/* video in the about and service media slots (2026-11-12) */
.hd-about__portrait video { width: 100%; height: 100%; object-fit: cover; display: block; }
video.hd-service-row__img { display: block; }
}