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

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

.hd-nav--elongated .hd-btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
  color: var(--accent-ink);
  transform: translateY(-1px);
}

@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;
  min-height: 640px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.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 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. Frosted translucent dark pill with an
   overlapping avatar stack, an inline star row, a numeric rating, and a
   count/source line. Anchored bottom-left of the hero (positioned absolute
   inside .hd-hero which is `position: relative`). The static visual lives
   here; the per-avatar hover bounce lives in motion.css. */
.hd-hero__review {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.50);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  color: var(--on-dark);
  font-family: var(--font-body);
  max-width: calc(100% - 48px);
}
.hd-hero__review-avatars { display: inline-flex; align-items: center; }
.hd-hero__review-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
  margin-left: -8px;
  background: var(--bg-warm);
}
.hd-hero__review-avatar:first-child { margin-left: 0; }
.hd-hero__review-meta   { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.hd-hero__review-row    { display: inline-flex; align-items: center; gap: 6px; }
.hd-hero__review-rating {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-dark);
}
.hd-hero__review-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--accent);
}
.hd-hero__review-stars svg { width: 12px; height: 12px; display: block; }
.hd-hero__review-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.80);
}
.hd-hero__review-source { opacity: 0.85; }

@media (max-width: 809.98px) {
  .hd-hero__review { left: 20px; bottom: 20px; gap: 10px; padding: 8px 14px 8px 10px; }
  .hd-hero__review-avatar { width: 24px; height: 24px; margin-left: -7px; }
}

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

/* ---- 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);
  border-bottom: 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 {
  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-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;
}

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

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