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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Hero responsive — match OC compile breakpoints */
@media (max-width: 1439.98px) {
  .hd-hero__wrap { padding: 110px 40px 54px; }
  .hd-h1 { font-size: 64px; }
  .hd-hero__sub { font-size: 18px; }
  .hd-hero__ctas { gap: 10px 16px; }
}
@media (max-width: 809.98px) {
  .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 the reference's
   `.framer-B36Qk.framer-bix2kb` pill WRAPPER (which lives as INLINE
   STYLE on the HTML element, not in the external CSS bundle — that's
   why the prior pass missed it):

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

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

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

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

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

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

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

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

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

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

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

/* Services & FAQ keep their original layout — not wrapped in a single
   big card; services is a sidebar + list of individual small cards,
   FAQ is a 2-column with the questions on the right. */
#services.hd-section,
#faq.hd-section {
  background: 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);
}

}