/* ============================================================
   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(--bg);
  }

  /* ---- 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 ---- */
.hd-btn {
  /* OC compile (preset 1vqp3do): Inter 16px / 400 / 170% / -0.3px, padding 12px 16px, radius 100px */
  position: relative;                  /* anchor for ::before slide-up fill */
  overflow: hidden;                    /* clip the slide-up fill to the pill */
  isolation: isolate;                  /* fresh z-index context */
  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%;
  /* Per-variant override-able hover targets. Each button variant can
     redefine --btn-hover-fill (the color that slides up) and
     --btn-hover-text (the text color while hovered). Defaults below
     work for white-bg primary buttons. */
  --btn-hover-fill: var(--accent);
  --btn-hover-text: var(--accent-ink, #fff);
  transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-decoration: none;
}
/* Slide-up fill — Dentix/Framer-style hover. An absolutely-positioned
   ::before pseudo-element sits below the button at rest (translateY(101%))
   and slides up to translateY(0) on hover, taking 0.45s with a smooth
   ease-out. Text/icon stay above via z-index/isolation and flip color
   to --btn-hover-text in lock-step. */
.hd-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-fill);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.hd-btn:hover::before { transform: translateY(0); }
.hd-btn:hover { color: var(--btn-hover-text); }

/* 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 (lime, teal, anything).
     .hd-btn--primary  — white pill, dark text, 1px border + soft shadow.
                         Works on light page sections AND on dark photo bgs.
                         Used site-wide: nav, hero, about, services, proof,
                         team, contact submit, faq, gallery.
     .hd-btn--light    — same white pill WITHOUT border/shadow.
                         Reserved for use on the closing-CTA dark banner where
                         the surrounding dark bg already gives the pill plenty
                         of definition; the extra border/shadow would muddy it.
   Per-client recoloring stays on accent surfaces only.
   CONTRAST RULE for accent surfaces: any rule with `background: var(--accent)`
   MUST set `color: var(--accent-ink)` (the per-client contrast partner). */
.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);
  /* On hover, olive slides up; text flips to white. */
  --btn-hover-fill: var(--accent);
  --btn-hover-text: var(--accent-ink, #fff);
}
.hd-btn--primary:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(14, 34, 51, 0.10);
}

.hd-btn--light {
  background: var(--surface);
  color: var(--ink);
  --btn-hover-fill: var(--accent);
  --btn-hover-text: var(--accent-ink, #fff);
}

/* OC compile: secondary CTA is a SOLID near-white pill with dark ink text,
   not a transparent outline. Uses the cool-gray surface token. */
.hd-btn--ghost {
  background: var(--bg-warm);
  color: var(--ink);
  border: 0;
  --btn-hover-fill: var(--accent);
  --btn-hover-text: var(--accent-ink, #fff);
}

.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;
  /* Slide-up hover: darker fill slides up over the olive base.
     Inherits the .hd-btn::before machinery — we only customize the
     fill color so it contrasts against the olive at-rest bg. */
  --btn-hover-fill: color-mix(in srgb, var(--accent) 82%, #000);
  --btn-hover-text: var(--accent-ink);
}

@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;            /* Dentix .framer-fc1bia: matches Dentix'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;      /* Dentix 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
   Dentix 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 Dentix'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) {
  .hd-hero { min-height: 0; height: 90vh; 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 Dentix'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 — Dentix 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;                    /* Dentix gap between avatar stack and
                                   text block */
  padding: 12px 24px 12px 16px; /* Dentix .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);     /* Dentix inline: rgba(0,0,0,0.2) */
  -webkit-backdrop-filter: blur(25px);  /* Dentix inline: blur(25px) */
          backdrop-filter: blur(25px);
  border-radius: 100px;               /* Dentix inline: 100px (full pill) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
                                /* Dentix inline: subtle inner top
                                   highlight (20% white). */
  color: var(--on-dark);
  font-family: var(--font-body);
}

/* Avatar stack — absolute positioning matching Dentix'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 — Dentix .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. Dentix'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" — Dentix 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 — Dentix .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" — Dentix preset
   framer-styles-preset-1jasyq8 (verified: 14px / 500 / 120% / 0em).
   Color rgba(255,255,255,0.7) per Dentix'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 Dentix'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 from PIXEL-MEASURED Dentix screenshot, 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/Dentix-style hero needs
   tighter top + near-zero bottom to match the reference. 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 Dentix-style framed hero 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 sticky hero so they
   visually scroll over it (Dentix-style card-stack effect).
   z-index:1 stacks above .hd-hero--framed (z-index:0).
   position: relative is required for z-index to take effect.
   Each section keeps its own background so it cleanly covers the
   pinned hero as the viewport scrolls past. */
.hd-section:not(.hd-hero),
.hd-closing,
.hd-team-dentix,
.hd-cases,
.hd-testimonial-featured {
  position: relative;
  z-index: 1;
}

/* Section bgs: page-bg (gray) for sections whose CARD lives inside
   (Team/Cases/Testimonial use inner __container with rounded white).
   Non-card sections (About-intro is itself the card) keep white. */
.hd-team-dentix,
.hd-cases,
.hd-testimonial-featured,
.hd-closing { background: var(--bg); }

/* Services & FAQ keep their original layout (Dentix doesn't wrap these
   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: var(--bg);
}

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

/* ---- 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);
}

/* ============================================================
   About — Dentix "Restorative" composition
   Gated by .hd-about--intro on the section. Slot-presence in
   the template (about.experience / about.promises / about.twin)
   decides whether this style branch renders.

   Top row (.hd-about__intro):
     LEFT  — avatar stack + big experience number + small label
     RIGHT — big statement headline (2-color, accent + ink)

   Middle row (.hd-about__middle):
     LEFT  — "About Us" pill with arrow
     RIGHT — 3 promise cards in a row, each with icon + title + body

   Bottom row (.hd-about__twin):
     LEFT  — photo (rounded corners)
     RIGHT — gradient panel with icon + CTA pill (white-fill on hover)
   ============================================================ */

/* Section-as-card: white card with rounded corners on a light-gray page
   background. Matches Dentix's per-section card treatment.

   The about-intro section uses MANROPE for typography (override of the
   pack's default Bricolage + Inter) to match Dentix's font choice
   exactly — user explicitly authorized the font swap when "we need to
   get the right stuff correct." Manrope is already loaded by classic's
   pack.yaml for the nav-elongated variant; no extra network fetch. */
.hd-about--intro {
  background: var(--surface);
  margin: 0 24px;
  border-radius: 24px;
  padding: 56px 56px 56px 24px;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
}
.hd-about--intro .hd-about__exp-num,
.hd-about--intro .hd-about__intro-statement,
.hd-about--intro .hd-about__promise-title,
.hd-about--intro .hd-about__intro-cta,
.hd-about--intro .hd-about__twin-panel-cta,
.hd-about--intro .hd-about__exp-label,
.hd-about--intro .hd-about__promise-body {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
}
@media (max-width: 1023.98px) {
  .hd-about--intro { padding: 40px 24px 40px 16px; margin: 0 16px; }
}

.hd-about--intro .hd-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;                        /* gap to the twin cards below */
}
@media (max-width: 1023.98px) { .hd-about--intro .hd-wrap { gap: 32px; } }

/* Two-column row that contains BOTH the intro content and the
   promises/CTA. Each column has its own vertical layout so the
   gap-to-About-Us (left col, small) and the gap-to-icons (right
   col, large) can be different.

   Left column width tuned to 307px via pixel measurement: Dentix's
   statement starts at x=419 from viewport-left at 1440-scale; card
   lateral margin (24) + card padding-left (24) + left-col + gap (64)
   should equal 419, so left-col = 307px. */
.hd-about__row {
  display: grid;
  grid-template-columns: 307px 1fr;
  gap: 64px;
  align-items: stretch;            /* both columns stretch to same height
                                       so About Us in left col can align
                                       with icons row in right col */
}
@media (max-width: 809.98px) {
  .hd-about__row { grid-template-columns: 1fr; gap: 32px; }
}
.hd-about__left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* 20+ block at top, About Us at bottom */
  align-items: flex-start;
}
.hd-about__right-col {
  display: flex;
  flex-direction: column;
  gap: 156px;                       /* pixel-measured: Dentix has 158px
                                       gap statement-bottom to icon-tile-top;
                                       156px CSS gap renders at ~158px
                                       effective (verified). */
}

/* (.hd-about__intro grid removed — replaced by .hd-about__row 2-column
   layout above with per-column flex stacks.) */

.hd-about__exp-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.hd-about__exp-avatars {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.hd-about__exp-avatar {
  /* Dentix CSS: 49×69, 20px radius → aspect 1.41, radius 41% of width.
     Mine scaled to 68 wide: 68×96 (1.41 aspect) with 22px radius (32%). */
  width: 68px;
  height: 96px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 22px;                /* more pronounced rounding gives
                                         the elongated/oval shape the
                                         user identified in the reference */
  border: 2px solid var(--surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  margin-left: -24px;
  background: var(--bg-warm);
}
.hd-about__exp-avatar:first-child { margin-left: 0; }

/* "20+" + "Years of experience" sit INLINE side-by-side per Dentix's
   layout — not stacked. The label wraps to 2 lines naturally next to
   the number. */
.hd-about__exp-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.hd-about__exp-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hd-about__exp-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.25;
  max-width: 88px;                    /* forces "Years of experience" to
                                         wrap to 2 lines next to the 20+ */
}

.hd-about__intro-statement {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 800px;                /* pixel-measured: Dentix's longest
                                       line (line 3) ends 799px from
                                       statement-left */
  text-wrap: balance;              /* distribute lines evenly so the
                                       break-points match Dentix's natural
                                       3-line composition (line 1 shorter,
                                       lines 2-3 longer for balanced look) */
}
.hd-about__intro-accent {
  color: var(--accent);
}

/* (.hd-about__middle removed — its children are now distributed across
   .hd-about__left-col and .hd-about__right-col inside .hd-about__row.) */
.hd-about__intro-cta {
  align-self: start;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(14, 34, 51, 0.05);
  /* Slide-up hover comes from base .hd-btn rules — no extra needed. */
}

.hd-about__promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;                       /* tighter gap so each card is wider
                                       → body wraps to 2 lines like Dentix
                                       instead of 3 */
}
@media (max-width: 809.98px) {
  .hd-about__promises { grid-template-columns: 1fr; gap: 28px; }
}
/* Promise cards — Dentix .framer-KddG0 verbatim treatment.
   The CARD itself has the soft gradient halo (light accent at top
   fading to transparent at bottom, with inset top highlight).
   The ICON TILE inside is solid light-accent with a thick white
   border + subtle drop shadow — sits on top of the card gradient.
   Numeric values from extraction.md:
     Card bg: linear-gradient(180deg, #f0f5e4 0%, rgba(255,255,255,0.1) 100%)
     Card radius: 32px
     Card box-shadow: inset 0 1px 2px rgba(91,122,18,0.1)
     Icon tile bg: #f0f5e4 (solid)
     Icon tile border: 3px solid #fff
     Icon tile radius: 20px
     Icon tile shadow: 0 2px 2px rgba(91,122,18,0.15) */
.hd-about__promise {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* OUTER container: large rounded square with pronounced gradient halo.
   Sized to match Dentix's ~100px wrapper. The gradient flows from
   visible light-accent at top → transparent at bottom, creating the
   soft glow effect that's clearly visible around the inner tile. */
.hd-about__promise-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(180deg,
                color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%,
                rgba(255, 255, 255, 0) 100%);
}
/* INNER tile: ~44px white-bordered, solid-accent-tinted bg. */
.hd-about__promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 2px solid var(--surface);
  box-shadow: 0 2px 2px color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.hd-about__promise-icon svg {
  width: 20px;
  height: 20px;
}
.hd-about__promise-icon svg {
  width: 22px;
  height: 22px;
  /* No forced fill/stroke — each icon SVG defines its own via inline
     attributes (heart uses stroke=currentColor + fill=none for the outline,
     star uses fill=currentColor, smiley uses stroke=currentColor + fill=none).
     The color: var(--accent) on the parent flows through as currentColor. */
}
.hd-about__promise-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);              /* near-black title */
  line-height: 1.3;
}
.hd-about__promise-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #4a4a4a;                 /* pixel-measured Dentix body color
                                     ≈ rgb(74,74,74) — much darker than
                                     mine was previously (rgb(132,132,132)) */
}
.hd-about__promise-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.hd-about__promise-body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ---- Bottom row: twin cards (photo + gradient panel) ----
   Photo on left is wider (1.7fr) than gradient panel (1fr) so they
   read as "one is longer, the other isn't" per user's explicit ask.
   Aspect ratio wider (16:9) to feel like elongated landscape cards. */
.hd-about__twin {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 809.98px) {
  .hd-about__twin { grid-template-columns: 1fr; gap: 16px; }
}
.hd-about__twin-image,
.hd-about__twin-panel {
  border-radius: 24px;
  height: 360px;                     /* fixed equal height for both —
                                         lets photo be wide rectangle and
                                         panel be near-square, both at
                                         the same vertical extent */
  overflow: hidden;
}
@media (max-width: 809.98px) {
  .hd-about__twin-image,
  .hd-about__twin-panel { height: 280px; }
}
.hd-about__twin-image {
  background: var(--bg-warm);
  position: relative;
}
.hd-about__twin-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bottom-left text overlay: title + subtitle stack. Only the title
   inside this overlay is a link (and the corner GPS icon is the other
   link). The container itself is NOT linkable. */
.hd-about__twin-image-overlay {
  position: absolute;
  bottom: 20px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  z-index: 2;
  max-width: 60%;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hd-about__twin-image-title-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.hd-about__twin-image-title {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 32px;                   /* pixel-measured from Dentix:
                                         cap-height ~23px → font-size ~32px */
  font-weight: 600;
  line-height: 1.2;
}
.hd-about__twin-image-sub {
  font-family: var(--font-body);
  font-size: 16px;                   /* pixel-measured from Dentix:
                                         cap-height ~12px → font-size ~16px */
  font-weight: 400;
  opacity: 0.92;
  line-height: 1.4;
}
/* GPS icon at bottom-right of the photo. It IS a link (now scoped —
   the whole-card link was removed; only the icon + the title above
   are interactive). */
.hd-about__twin-image-corner {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;                       /* pixel-measured from Dentix: 52px diameter */
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);              /* olive map-pin tint matches Dentix */
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
  z-index: 2;
}
.hd-about__twin-image-corner:hover {
  background: rgba(255, 255, 255, 1);
}
.hd-about__twin-image-corner svg { width: 22px; height: 22px; }

.hd-about__twin-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  color: var(--accent-ink);
  /* background set via inline style from slot.
     Layout: icon at top, big empty space, then textgroup + CTA
     clustered at the bottom. Achieved by margin-top:auto on the
     textgroup which absorbs all the free vertical space above it. */
}
.hd-about__twin-panel-textgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;                   /* title goes full width so it fits
                                         on one line */
  margin-top: auto;                  /* push to bottom of panel */
  margin-bottom: 0;
}
.hd-about__twin-panel-text {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 28px;                  /* pixel-measured from Dentix live:
                                       title cap height = 21px which
                                       corresponds to ~28px Manrope. Title
                                       wraps to 2 lines at this size in the
                                       1.7fr:1fr panel — same as Dentix. */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
}
.hd-about__twin-panel-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
/* Corner arrow link, top-right of the panel.
   Pixel-measured from Dentix live:
   - Diameter: ~48px
   - Default bg: LIGHTER olive than the panel surface (a white-translucent
     tint produces this lifted-circle effect on top of the olive bg)
   Hover: fills with SOLID WHITE, arrow flips to olive. */
.hd-about__twin-panel-corner {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;                       /* bigger per user request */
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);   /* lightens the olive bg —
                                              matches Dentix's lighter-
                                              olive circle (verified via
                                              pixel sampling rgb 115,142,53) */
  color: var(--accent-ink);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
  z-index: 2;
}
.hd-about__twin-panel-corner:hover {
  background: var(--surface);        /* solid white on hover */
  color: var(--accent);              /* arrow flips to olive */
}
.hd-about__twin-panel-corner svg { width: 20px; height: 20px; }
.hd-about__twin-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--accent-ink);
}
.hd-about__twin-panel-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
  stroke: currentColor;
}
.hd-about__twin-panel-cta {
  align-self: flex-end;
  background: var(--accent-ink);     /* default: white pill */
  color: var(--accent);              /* default: dark accent text */
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  position: relative;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-standard);
}
/* Hover: pill fills with accent (olive) and text turns white.
   Implemented via ::before pseudo that slides up from below. */
.hd-about__twin-panel-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);         /* fills with olive on hover */
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-standard);
  z-index: 0;
  border-radius: inherit;
}
.hd-about__twin-panel-cta:hover::before { transform: translateY(0); }
.hd-about__twin-panel-cta:hover { color: var(--accent-ink); }   /* white text */
.hd-about__twin-panel-cta > *,
.hd-about__twin-panel-cta::after { position: relative; z-index: 1; }

/* ---- 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);
}
.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 (Andre): the small accent number, as on the classic template, not the stat-sized dark one */
  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 (OC compile reference) ----
   Section header: tag pill + animated line stacked above h2 + CTA.
   Grid: 3 columns (repeat(3, minmax(50px, 1fr)), gap 20) for 3+ cards.
   For 2 cards (DTD case): flex centered with each card sized like 1/3 of
   the row so a 2-card row reads as "cards 2 and 3 of an empty 3-col grid"
   rather than two stretched-out cards.

   Card anatomy (OC .framer-38xt0p):
   - flex col, align-items center, gap 16, bg white, radius 16, NO border
   - Image .yavjqo (figure .188l6q7): aspect 0.957958, radius 16
   - Content .16w2q0a: flex col, gap 24, padding 16 12
     - Info Wrap .1u4ci6b: flex col, gap 12
       - Name h4 preset qvvcg: Bricolage 32/500/-2/125% dark
       - Role & Social row .25g3i2: row, space-between, align flex-end, gap 10
         - Role & Number .1hmg287: col flex 1, gap 8
           - Role preset 1vqp3do: Inter 16/400/-0.3px/170% dim
           - Number row: phone svg 16×16 + tel link (same preset)
         - Socials .17xsqxo: row, gap 12 — each = 40×40 round, green bg, SVG icon
     - CTA: full-width green pill
*/
.hd-team__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: var(--sp-4);
}
.hd-team__taggroup {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 0 0;
  min-width: 0;
}
.hd-team__tagstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: 460px;
}
.hd-team__tagstack .hd-divider { margin: 0; }
.hd-team__title { margin: 0; }
.hd-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  gap: 20px;
  margin-top: 80px;
}
.hd-team__grid--two {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.hd-team__grid--two > .hd-team-card {
  flex: 0 1 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
}
@media (max-width: 960px) {
  .hd-team__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
  .hd-team__grid--two > .hd-team-card { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .hd-team__grid { grid-template-columns: 1fr; }
  .hd-team__grid--two { flex-direction: column; align-items: center; }
  .hd-team__grid--two > .hd-team-card { flex-basis: 100%; max-width: 100%; }
}

.hd-team-card {
  background: var(--surface);
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* Portrait backdrop tint — driven by the per-client --portrait-tint token
   (default transparent, set in slots.yaml under branding.team_portrait_tint
   for clients whose portrait photography needs a unifying backdrop wash). */
.hd-team-card__portrait-wrap {
  background: var(--portrait-tint);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}
.hd-team-card__portrait {
  width: 100%;
  aspect-ratio: 0.85;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.hd-team-card__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 28px 28px 32px;
}
.hd-team-card__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hd-team-card__name {
  /* OC preset qvvcg: Bricolage 32/500/-2/125% dark */
  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);
  margin: 0;
}
.hd-team-card__contact-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.hd-team-card__role-num {
  /* OC .1hmg287: col, flex 1, gap 8 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 0 0;
  min-width: 0;
}
.hd-team-card__role {
  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-team-card__phone {
  /* OC .1hohaft: row, gap 8 (icon + tel link), Inter 16 dim */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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-team-card__phone svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--ink);
  display: block;
}
.hd-team-card__socials {
  /* OC .17xsqxo: row, gap 12 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.hd-team-card__socials a {
  /* OC live: no fill — icon sits directly on card bg. (OC compile has a
     green hover bg via .framer-73lmh5 with opacity animated on hover; we
     keep transparent by default and reveal accent bg on hover.) */
  width: 28px;
  height: 28px;
  border-radius: 60px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.hd-team-card__socials a:hover {
  background: var(--accent);
  color: var(--accent-ink);
}
.hd-team-card__socials a:hover svg,
.hd-team-card__socials a:hover img { color: var(--accent-ink); }
.hd-team-card__socials a img,
.hd-team-card__socials a svg {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  color: var(--ink-dim);
}
.hd-team-card__cta {
  width: 100%;
  margin: 0;
}

/* ---- 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;
}

/* ============================================================
   Featured testimonial (Dentix-style: portrait + olive panel)

   Pixel-extracted from dentix.framer.website at 1440 viewport.
   See library/playbooks/dental/visual-research/site-dentix/extraction.md
   "Testimonials Section" for the source rules + measurements.
   ============================================================ */

/* Testimonial featured — Dentix dimensions, light cream bg, white stars.
   Pixel-extracted heights from dentix.framer.website at 1440 viewport:
   container 1010px tall, photo 632×~915 (spans both grid rows). */
.hd-testimonial-featured {
  padding: 0;
}
.hd-testimonial-featured__wrap {
  padding: 0 6px 6px;                   /* Dentix's hairline section padding */
}
.hd-testimonial-featured__container {
  background-color: #FBF6E3;            /* very light cream-mustard (lighter
                                            than the previous #F2E7B8) */
  color: var(--ink);                    /* dark ink, readable on cream */
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px 56px;
  padding: 48px;
  height: 1010px;                       /* Dentix's actual rendered height
                                            at 1440 viewport (extracted) */
  min-height: 720px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  overflow: visible;
}
@media (max-width: 809.98px) {
  .hd-testimonial-featured__container {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px;
    padding: 32px 20px;
  }
}

/* Portrait — spans both grid rows on the left, full container height */
.hd-testimonial-featured__portrait {
  position: relative;
  grid-row: 1 / span 2;
  grid-column: 1;
  border-radius: 16px;
  overflow: visible;
  width: 100%;
  height: 100%;
}
@media (max-width: 809.98px) {
  .hd-testimonial-featured__portrait {
    grid-row: auto;
    grid-column: 1;
    height: 360px;
  }
}
.hd-testimonial-featured__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;          /* anchor face at top of frame
                                            so the natural framing reads
                                            without the side-crop feel */
  display: block;
  border-radius: 16px;
}

/* "2026 Top Implant Clinic" pill on photo bottom edge.
   All values from Dentix's extracted .framer-k572cv rule. */
.hd-testimonial-featured__badge {
  position: absolute;
  left: 51%;
  bottom: -16px;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 1000px;
  background: rgba(0, 0, 0, 0.25);      /* #00000040 from Dentix CSS */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.hd-testimonial-featured__badge-label {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.hd-testimonial-featured__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
/* Left sprig 10x18; right sprig 11x18 (Dentix exact sizes). The selector
   targets siblings of the label so left vs right is determined by order. */
.hd-testimonial-featured__badge-icon:first-child svg { width: 10px; height: 18px; display: block; }
.hd-testimonial-featured__badge-icon:last-child svg { width: 11px; height: 18px; display: block; }

/* Right side now uses native grid placement (no wrapper).
   Quote-block sits in (row 1, col 2); mini-block in (row 2, col 2). */
.hd-testimonial-featured__right {
  display: contents;                    /* let children participate directly
                                            in the parent grid */
}
.hd-testimonial-featured__quote-block {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: start;
}
.hd-testimonial-featured__stars {
  display: inline-flex;
  align-items: center;
  height: 21px;
  gap: 1.7px;
  color: var(--ink);                    /* black/ink — high contrast on cream */
}
.hd-testimonial-featured__star {
  width: 21px;
  height: 21px;
  display: block;
}
.hd-testimonial-featured__big-quote {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 32px;                      /* Dentix extracted */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--ink);                    /* dark text on cream bg */
  margin: 0;
  max-width: 900px;
  text-wrap: balance;
}

.hd-testimonial-featured__mini-block {
  grid-row: 2;
  grid-column: 2;
  align-self: end;                      /* pushed to bottom of its grid cell */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 809.98px) {
  .hd-testimonial-featured__quote-block,
  .hd-testimonial-featured__mini-block {
    grid-row: auto;
    grid-column: 1;
  }
}
.hd-testimonial-featured__mini-quote {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 18px;                      /* Dentix extracted */
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  max-width: 700px;
  text-wrap: balance;
}
.hd-testimonial-featured__author {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.hd-testimonial-featured__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
}
.hd-testimonial-featured__tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.06);      /* subtle dark overlay on cream */
  color: var(--ink);
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

/* ============================================================
   Team — Dentix-style ("Meet Our Dental Experts")

   White card with bordered eyebrow chip + centered title + 3 portrait
   cards + olive "Our promise:" sentence + olive CTA pill.

   Pixel-extracted from dentix.framer.website at 1440 viewport.
   See extraction.md "Team Section — Meet Our Dental Experts".
   ============================================================ */
.hd-team-dentix {
  padding: 0;
}
.hd-team-dentix__wrap {
  padding: 0 12px 12px;                 /* Dentix outer section padding */
}
.hd-team-dentix__container {
  background: #fff;
  border-radius: 20px;
  padding: 80px 48px 64px;
  gap: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1700px;
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
@media (max-width: 809.98px) {
  .hd-team-dentix__container { padding: 48px 20px; gap: 32px; }
}

/* Eyebrow + Title group */
.hd-team-dentix__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Eyebrow chip: bordered pill with olive dot + gray label */
.hd-team-dentix__eyebrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border, #F3F4F6);
  background: transparent;
}
.hd-team-dentix__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--accent);
  flex-shrink: 0;
}
.hd-team-dentix__eyebrow-label {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-dim, #6B7280);
}

.hd-team-dentix__title {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 809.98px) {
  .hd-team-dentix__title { font-size: 28px; }
}

/* Cards row — 3 cards, equal width */
.hd-team-dentix__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}
@media (max-width: 809.98px) {
  .hd-team-dentix__cards { grid-template-columns: 1fr; gap: 24px; }
}

.hd-team-dentix__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Photo wrap: aspect 0.835 (Dentix extracted), border-radius 16 */
.hd-team-dentix__photo-wrap {
  width: 100%;
  aspect-ratio: 0.834783;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-warm);
}
.hd-team-dentix__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Card content row: name+role (flex 1) | arrow button */
.hd-team-dentix__info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 0 12px 0 0;
}
.hd-team-dentix__name-block {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hd-team-dentix__name {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.hd-team-dentix__role {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-dim, #6B7280);
  margin: 0;
}

/* Arrow circle button */
.hd-team-dentix__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  border: 1px solid var(--border, #E5E7EB);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim, #6B7280);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.hd-team-dentix__arrow svg { width: 18px; height: 18px; display: block; }
.hd-team-dentix__card:hover .hd-team-dentix__arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink, #fff);
}

/* Our Story (promise + CTA) */
.hd-team-dentix__story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 0;                        /* container gap already provides space */
}
.hd-team-dentix__promise {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--ink);
  margin: 0;
  max-width: 800px;
  text-wrap: balance;
}
.hd-team-dentix__promise-accent { color: var(--accent); }

.hd-team-dentix__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 24px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-team-dentix__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);              /* dark slide-up against olive */
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-team-dentix__cta:hover::before { transform: translateY(0); }
.hd-team-dentix__cta svg { width: 16px; height: 16px; }

/* ============================================================
   Case Studies — Dentix-style "Your Smile is Worth a 1000 Words"

   White card with bordered eyebrow + centered title + 3 before/after
   cards. Each photo has a static (non-interactive) before/after split
   with vertical divider + circular slider handle + corner labels.

   Pixel-extracted from dentix.framer.website (Founder Section).
   See extraction.md "Case Studies — Your Smile is Worth a 1000 Words".
   ============================================================ */
.hd-cases { padding: 0; }
.hd-cases__wrap { padding: 0 12px 12px; }
.hd-cases__container {
  background: #fff;
  border-radius: 20px;
  padding: 80px 48px 64px;
  gap: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1700px;
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
@media (max-width: 809.98px) {
  .hd-cases__container { padding: 48px 20px; gap: 32px; }
}

/* Eyebrow + Title */
.hd-cases__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hd-cases__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border, #F3F4F6);
  background: transparent;
}
.hd-cases__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: var(--accent);
  flex-shrink: 0;
}
.hd-cases__eyebrow-label {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-dim, #6B7280);
}
.hd-cases__title {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 809.98px) {
  .hd-cases__title { font-size: 28px; }
}

/* Cards row — fills full container inner width at 1440 viewport
   (Dentix renders cards at 419px each, not the 1080 CSS fallback). */
.hd-cases__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}
@media (max-width: 809.98px) {
  .hd-cases__row { grid-template-columns: 1fr; gap: 32px; }
}

.hd-cases__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}

/* Photo container: per-user spec
   - 6% narrower than card width (94%)
   - 15.5% taller than the original square 419×419 → ~394×484 (aspect 0.815) */
.hd-cases__photo {
  position: relative;
  width: 94%;
  aspect-ratio: 394 / 484;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-warm);
}
.hd-cases__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hd-cases__photo-img--after { z-index: 1; }
.hd-cases__photo-before {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* clip-path set inline so user can dial the slider position per item */
}
.hd-cases__photo-before .hd-cases__photo-img { z-index: auto; }

/* Tiny "Before" / "After" labels in top corners */
.hd-cases__label {
  position: absolute;
  top: 14px;
  z-index: 4;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.hd-cases__label--before { left: 14px; }
.hd-cases__label--after  { right: 14px; }

/* Vertical divider line at 50% */
.hd-cases__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

/* Circular slider handle with chevron icons, centered */
.hd-cases__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.hd-cases__handle svg { width: 18px; height: 18px; display: block; }

/* Quote text */
.hd-cases__quote {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  width: 100%;
  text-wrap: balance;
}

/* Info row: vertical gray bar + name/procedure column */
.hd-cases__info {
  display: flex;
  flex-direction: row;
  align-items: stretch;                  /* bar stretches full height */
  gap: 12px;
  width: 100%;
}
.hd-cases__info-bar {
  width: 4px;
  align-self: stretch;
  background: rgb(209, 213, 219);        /* Dentix extracted */
  border-radius: 8px;
  flex-shrink: 0;
}
.hd-cases__info-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}
.hd-cases__name {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.hd-cases__procedure {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(131, 137, 150);             /* Dentix gray token */
  margin: 0;
}

/* ---- 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: var(--bg);
  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 — Dentix-style "We'll give you a reason to smile more"

   Horizontal row: photo (flex 1) + olive panel (flex 2) with 10px gap.
   Photo and panel both 20px radius, matching height.

   Pixel-extracted from dentix.framer.website. Section bar wraps both
   image and panel side-by-side. Panel: title top-left + reviews,
   Book Online button bottom-right.
   ============================================================ */
.hd-closing { padding: 0; }
.hd-closing__wrap {
  padding: 0 12px 12px;                /* Dentix outer section gutter */
  max-width: 1700px;
  margin: 0 auto;
}
.hd-closing__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;                /* photo stretches to match panel height */
  gap: 10px;
  width: 100%;
}
@media (max-width: 809.98px) {
  .hd-closing__row { flex-direction: column; }
}

/* Left: photo card — uses absolute-positioned <img> so the natural
   image aspect ratio doesn't dictate the row height. The panel content
   decides the row height; the photo fills via object-fit cover. */
.hd-closing__image {
  flex: 1 0 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
}
.hd-closing__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 809.98px) {
  .hd-closing__image { flex: none; height: 300px; }
}

/* Right: olive panel */
.hd-closing__panel {
  flex: 2 0 0;
  display: flex;
  flex-flow: row;
  place-content: flex-end space-between;
  align-items: flex-end;
  padding: 64px 48px 48px;
  background: var(--accent);            /* per-client accent (olive for Dentix) */
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
@media (max-width: 809.98px) {
  .hd-closing__panel {
    flex: none;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

/* Left side of panel: title + reviews stack */
.hd-closing__content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  max-width: 800px;
}
.hd-closing__title {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 700px;
}
@media (max-width: 809.98px) {
  .hd-closing__title { font-size: 28px; }
}

/* Reviews row: avatars + google summary */
.hd-closing__reviews {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.hd-closing__faces {
  position: relative;
  width: 112px;
  height: 40px;
  flex-shrink: 0;
}
.hd-closing__face {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 2px solid #fff;
  overflow: hidden;
  background: var(--bg-warm);
}
.hd-closing__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hd-closing__face--1 { left: 0;    z-index: 4; }
.hd-closing__face--2 { left: 24px; z-index: 3; }
.hd-closing__face--3 { left: 48px; z-index: 2; }
.hd-closing__face--4 { left: 71px; z-index: 1; }

/* Google summary stack */
.hd-closing__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hd-closing__stars-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hd-closing__score {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.hd-closing__stars {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  color: #fff;                          /* SOLID white — crisp like Dentix */
}
.hd-closing__stars svg { width: 14px; height: 14px; display: block; }
.hd-closing__source-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hd-closing__count {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.9);      /* nearly solid white for label */
}
.hd-closing__source {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.9);
}
.hd-closing__source-icon {
  display: inline-flex;
  align-items: center;
  color: #fff;                          /* solid white Google logo */
}
.hd-closing__source-icon svg {
  height: 16px;
  width: auto;
  display: block;
}

/* Book Online button — Dentix-style slide-up hover.
   At rest: white pill, dark text.
   On hover: an olive ::before slides up from below, covering the bg.
   Text + icon stay above via z-index and flip to white. */
.hd-closing__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 20px;
  border-radius: 100px;
  background: #fff;
  color: var(--ink);
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;                     /* clips the rolling fill */
  isolation: isolate;                   /* clean stacking context */
  transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.hd-closing__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);            /* olive fills the button */
  transform: translateY(101%);          /* hidden below at rest */
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-closing__cta:hover {
  color: #fff;
  border-color: var(--accent);
}
.hd-closing__cta:hover::before {
  transform: translateY(0);             /* slides up into view */
}
.hd-closing__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-closing__cta:hover svg {
  transform: translate(2px, -2px);      /* matches the arrow micro-interaction */
}

/* ---- Footer (OC compile reference) ----
   Dark ink bg. 3 stacked rows with animated dim dividers between:
     [Top Content]    Let's Connect (h3 40px) + phone + hours   |   "Reach out…" + email (h3 40px)
     [Animated divider — dim #23302a]
     [Nav Container]  4 columns: Menu | Legal Page | Utility Page | Socials
     [Animated divider — dim]
     [Bottom]         Copyright text                            |   GIANT brand wordmark
   Typography: section labels (Menu/Legal/Utility/Socials) + small body in dim #C9CBC5;
   links + body text in white; titles + email use djpaa3 (40px Bricolage 500/-3/120%).  */
.hd-footer {
  background: var(--ink);
  color: var(--surface);
  padding: var(--sp-9) 0 var(--sp-6);
  margin-top: var(--sp-8);
}
.hd-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: end;
}
.hd-footer__title {
  /* OC preset djpaa3: Bricolage 40 / 500 / -3 / 120% white */
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h2);
  margin: 0;
}
.hd-footer__email {
  /* OC preset djpaa3 again — same size as title (40px), matches "Let's Connect" */
  display: inline-block;
  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(--surface);
}
.hd-footer__small {
  /* OC preset 1vqp3do: Inter 16/400/-0.3/170%.
     Brightened from divider gray — readable but not stark, on dark bg. */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: var(--tr-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.85);
}
.hd-footer .hd-divider {
  /* Footer dividers — darker than the site-wide light gray to read on dark bg.
     Generous breathing room above + below to match OC's airy footer rhythm. */
  background: #23302A;
  margin: var(--sp-8) 0;
}
.hd-footer__cols {
  /* OC .framer-1v7u8os: flex row, space-between, items flex-start.
     LEFT cluster (Menu/Legal/Visit) tight together via .hd-footer__cols-left;
     Socials sits ALONE on the far right, pushed by space-between. */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-6);
}
.hd-footer__cols-left {
  /* OC .framer-1ptho5k: tight 100px-spaced cluster, sized to content */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 100px;
}
@media (max-width: 810px) {
  .hd-footer__top { grid-template-columns: 1fr 1fr; }
  .hd-footer__cols { flex-direction: column; gap: var(--sp-6); }
  .hd-footer__cols-left { flex-direction: column; gap: var(--sp-6); }
}
.hd-footer__col h5 {
  /* OC column label: Inter 16/400, slightly dim to differentiate from links */
  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(--on-dark-dim);
  margin: 0 0 var(--sp-5);
}
.hd-footer__col ul { list-style: none; padding: 0; margin: 0; }
.hd-footer__col li { margin-bottom: var(--sp-3); }
.hd-footer__col a {
  /* OC link text: Inter 16/400 white */
  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(--surface);
}
.hd-footer__col a:hover { opacity: 0.7; }
.hd-footer__col a[data-active="1"],
.hd-footer__col a.is-active { color: var(--accent); }
.hd-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-6);
  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(--on-dark-dim);
}
.hd-footer__wordmark {
  /* OC: large but not overwhelming. Sized to leave breathing room above/below
     and not crowd the copyright text on the left. */
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--surface);
  line-height: 0.95;
  white-space: nowrap;
}

}