/* =========================================================
   Concierge Dental — Light Spa Palette
   Spa / lounge medspa redesign over the existing Webflow CSS.
   Keeps the green CTA. Loaded last so it wins the cascade.
   ========================================================= */

:root {
  /* Surfaces — warm, lit, breathable. */
  --spa-bg-base:      #fbf9f4;   /* warm ivory body */
  --spa-bg-soft:      #f5f1e8;   /* deeper cream */
  --spa-bg-sand:      #f1ece1;   /* warm sand */
  --spa-bg-sage:      #ebefe8;   /* whisper sage */
  --spa-bg-mist:      #eef2ec;   /* sage mist */
  --spa-bg-card:      #ffffff;   /* clean card */
  --spa-bg-card-warm: #fdfaf3;   /* warm card */
  --spa-bg-footer:    #e9ece5;   /* dusty sage footer */

  /* Ink — never pure black. */
  --spa-ink-strong:   #1f2a25;
  --spa-ink:          #2a3631;
  --spa-ink-soft:     #51605a;
  --spa-ink-muted:    #7d8881;
  --spa-ink-faint:    #b6bdb8;

  /* Lines & strokes */
  --spa-line:         rgba(31, 42, 37, .08);
  --spa-line-strong:  rgba(31, 42, 37, .14);
  --spa-line-warm:    rgba(96, 80, 56, .12);

  /* Accent — the spa green that survives on cream. */
  --spa-green:        #5b7a6a;
  --spa-green-deep:   #3f5a4e;
  --spa-green-soft:   #dde6d8;
  --spa-green-haze:   #eef3eb;
  --spa-green-glow:   rgba(91, 122, 106, .22);

  /* Optional warm gold accent (subtle) */
  --spa-gold:         #b59470;
  --spa-gold-soft:    #ead9bd;

  /* Shadows — diffuse, never harsh. */
  --spa-shadow-xs: 0 1px 2px rgba(31,42,37,.04);
  --spa-shadow-sm: 0 1px 2px rgba(31,42,37,.04), 0 2px 8px rgba(31,42,37,.05);
  --spa-shadow-md: 0 6px 24px -8px rgba(31,42,37,.12), 0 2px 6px rgba(31,42,37,.04);
  --spa-shadow-lg: 0 24px 60px -20px rgba(31,42,37,.18), 0 4px 14px rgba(31,42,37,.04);

  /* Radii */
  --spa-r-sm: 10px;
  --spa-r-md: 16px;
  --spa-r-lg: 24px;
}

/* -------------------------------------------------
   Body — warm ivory base with subtle ambient light.
   ------------------------------------------------- */
html, body {
  background: var(--spa-bg-base);
  color: var(--spa-ink);
}

body {
  background-color: var(--spa-bg-base);
  background-image:
    /* whisper of warm grain — almost imperceptible, makes cream feel less digital */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(1100px 760px at 88% -8%,  rgba(238,243,235,.85) 0%, rgba(238,243,235,0) 60%),
    radial-gradient(900px  680px at -10% 35%, rgba(245,241,232,.85) 0%, rgba(245,241,232,0) 60%),
    radial-gradient(700px  560px at 50% 110%, rgba(241,236,225,.70) 0%, rgba(241,236,225,0) 65%);
  background-size: 240px 240px, auto, auto, auto;
  background-attachment: fixed;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--spa-ink-strong);
  letter-spacing: -0.005em;
}

p { color: inherit; }

::selection { background: var(--spa-green-soft); color: var(--spa-ink-strong); }


/* =========================================================
   NAVBAR — soft glass over cream.
   ========================================================= */
.navbar {
  background-color: var(--spa-bg-base);
  border-bottom: 1px solid var(--spa-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.navbar3_menu-link { color: var(--spa-ink); }
.navbar3_menu-link:hover { color: var(--spa-green-deep); }

/* Navlink dropdown toggles — flat, no pill background. */
.navbar .dropdown_toggle {
  background-color: transparent;
  border-radius: 0;
  padding-left: .25em;
  padding-right: .25em;
}
.navbar .dropdown_toggle:hover {
  background-color: transparent;
  color: var(--spa-green-deep);
}

/* Dropdown panels — white background, dark text, soft rounded corners. */
.navbar .dropdown_list {
  background-color: #ffffff;
  border: 1px solid var(--spa-line);
  border-radius: var(--spa-r-md);
  padding: .375rem;
}
.navbar .dropdown_link {
  color: var(--spa-ink-strong);
  border-radius: var(--spa-r-sm);
}
.navbar .dropdown_link:hover {
  background-color: var(--spa-green-haze);
  color: var(--spa-green-deep);
}
.navbar .dropdown_link p { color: inherit; }


/* =========================================================
   HERO — keep the cream half + video, refine the overlay.
   ========================================================= */
.c-hero {
  background-color: var(--spa-bg-soft);
  background-image:
    radial-gradient(800px 540px at 0% 100%, rgba(221,230,216,.55) 0%, rgba(221,230,216,0) 65%),
    radial-gradient(640px 480px at 6% 0%,   rgba(245,241,232,.85) 0%, rgba(245,241,232,0) 60%);
}
.c-hero__content { color: var(--spa-ink-strong); }
.c-hero__heading { color: var(--spa-ink-strong); letter-spacing: -0.018em; }
.c-hero__text { color: var(--spa-ink-soft); }
.c-hero__overlay {
  background-color: rgba(38, 46, 31, 0.18);
  -webkit-backdrop-filter: saturate(180%) blur(140px);
  backdrop-filter: saturate(180%) blur(140px);
}

/* === TEST — hero gradient/mask overlay disabled to compare clean video.
       Remove this rule (or set display: block) to restore the dissolve effect. === */
.c-hero__overlay {
  display: none;
}


/* =========================================================
   HERO TRUST signal — small social proof under the buttons.
   ========================================================= */
.c-hero__trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .8em;
  margin-top: 2em;
}
.c-hero__trust-avatars {
  display: flex;
  align-items: center;
}
.c-hero__trust-avatar {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  object-fit: cover;
  /* Borda na mesma cor do fundo da hero — efeito de recorte. */
  border: 3px solid var(--spa-bg-soft);
  background-color: var(--spa-bg-soft);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.c-hero__trust-avatar + .c-hero__trust-avatar {
  margin-left: -.7em;
}
.c-hero__trust-avatars:hover .c-hero__trust-avatar {
  transform: translateX(-.18em);
}
.c-hero__trust-avatars:hover .c-hero__trust-avatar:nth-child(2) { transform: translateX(-.06em); }
.c-hero__trust-avatars:hover .c-hero__trust-avatar:nth-child(3) { transform: translateX(.06em); }
.c-hero__trust-avatars:hover .c-hero__trust-avatar:nth-child(4) { transform: translateX(.18em); }

.c-hero__trust-text {
  margin: 0;
  font-size: .9375em;
  line-height: 1.45;
  color: var(--spa-ink);
  letter-spacing: 0;
}
.c-hero__trust-text strong {
  font-weight: 600;
  color: var(--spa-ink-strong);
}
.c-hero__trust-rating {
  color: var(--spa-ink-soft);
  margin-left: .15em;
}


/* =========================================================
   EYEBROW chip — delicate spa tag.
   ========================================================= */
.eyebrown {
  border: 1px solid rgba(91,122,106,.22);
  background-color: var(--spa-green-haze);
  color: var(--spa-green-deep);
  border-radius: 999px;
  padding: .4375em .875em;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .75em;
}
.eyebrown.light {
  background-color: rgba(255,255,255,.55);
  color: var(--spa-green-deep);
  border-color: rgba(91,122,106,.18);
}


/* =========================================================
   BUTTONS — refined green, gentle lift on hover.
   Keep the green per the brief.
   ========================================================= */
.c-btn {
  border-radius: 999px;
  letter-spacing: .005em;
  font-weight: 500;
}
.c-btn.c-btn--primary {
  border: 1px solid var(--spa-green);
  background-color: var(--spa-green);
  color: #fbfdf9;
  padding: .9em 1.6em;
  transition: background-color .25s ease, border-color .25s ease;
}
.c-btn.c-btn--primary:hover {
  border-color: var(--spa-green-deep);
  background-color: var(--spa-green-deep);
}
.c-btn.c-btn--secondary {
  border: 1px solid var(--spa-line-strong);
  background-color: rgba(255,255,255,.55);
  color: var(--spa-ink-strong);
  padding: .9em 1.6em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.c-btn.c-btn--secondary:hover {
  border-color: rgba(91, 122, 106, .35);
  background-color: var(--spa-green-haze);
  color: var(--spa-green-deep);
}
.c-btn.c-btn--tertiary { color: var(--spa-ink-strong); }
.c-btn.c-btn--tertiary:hover { color: var(--spa-green-deep); opacity: 1; }

/* When secondary lives on a dark/video panel, lighten it back. */
.cta-2_content .c-btn.c-btn--secondary {
  border-color: rgba(255,255,255,.55);
  background-color: rgba(255,255,255,.10);
  color: #fff;
}
.cta-2_content .c-btn.c-btn--secondary:hover {
  background-color: #fff;
  color: var(--spa-green-deep);
}

/* The legacy .button_md (used in some pages) — bring it in line. */
.button_md {
  border: 1px solid var(--spa-green);
  background-color: var(--spa-green);
  color: #fbfdf9;
  border-radius: 999px;
}
.button_md:hover {
  border-color: var(--spa-green-deep);
  background-color: var(--spa-green-deep);
  color: #fbfdf9;
}


/* =========================================================
   INTRO section — keep light, soften imagery panels.
   ========================================================= */
.section_intro {
  background-color: var(--spa-bg-base);
  border-top: 1px solid var(--spa-line);
}
.intro_heading,
.intro_heading.cdd-fade-blur { color: var(--spa-ink-strong); }
.intro_paragraph { color: var(--spa-ink-soft); }

.about_image-container {
  background-color: var(--spa-bg-card-warm);
  border: 1px solid var(--spa-line);
  border-radius: var(--spa-r-lg);
}
.about_image-container.is-offset { background-color: var(--spa-bg-sage); }

.c-intro_content,
.c-intro_content-wrapper2 { color: #ffffff; }
.c-intro_text { color: #ffffff; font-weight: 500; }
.c-intro_heading { color: #ffffff; }

/* The big floral watermark in intro — centered behind the cards, low set. */
.section_intro .intro_icon {
  z-index: 0;
  position: absolute;
  height: 67em;
  width: auto;
  left: 50%;
  bottom: -40%;
  top: auto;
  right: auto;
  transform: translateX(-50%);
  color: rgb(235 239 232);
  pointer-events: none;
}
.section_intro .intro_container { z-index: 1; }


/* =========================================================
   STATS section — was sage-breeze-950 dark. Flip to light.
   ========================================================= */
.section_h-stats {
  background-color: var(--spa-bg-sage);
  color: var(--spa-ink-strong);
  background-image: radial-gradient(900px 600px at 50% 0%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%);
}
.section_h-stats .h-stats_section-heading { color: var(--spa-ink-strong); }
.section_h-stats .h-stats_section-text { color: var(--spa-ink-soft); opacity: 1; }
.section_h-stats .h-stats_circle {
  background-color: #ffffff;
  color: var(--spa-green-deep);
  border: 1px solid rgba(91,122,106,.10);
}
.section_h-stats .h-stats_item {
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.section_h-stats .h-stats_item:hover {
  transform: translateY(-.5em);
}

/* Stat icons — strokes draw themselves in when the counter fires (.h-stats-go).
   --cdd-len is set per-element by JS using getTotalLength() so the dasharray
   matches each path's real length — otherwise the visible draw-in finishes
   in the first ~13% of the transition and the rest is dead time. */
.section_h-stats .h-stats_icon svg { overflow: visible; }
.section_h-stats .h-stats_icon path,
.section_h-stats .h-stats_icon circle {
  /* +2 evita que paths fechados deixem um sub-pixel de gap no ponto de junção. */
  stroke-dasharray: calc(var(--cdd-len, 240) + 2);
  stroke-dashoffset: calc(var(--cdd-len, 240) + 2);
  transition-property: stroke-dashoffset;
  transition-duration: 2.6s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  will-change: stroke-dashoffset;
}
.section_h-stats.h-stats-go .h-stats_icon path,
.section_h-stats.h-stats-go .h-stats_icon circle {
  stroke-dashoffset: 0;
}
/* Each item starts a touch later than the one before it. */
.section_h-stats .h-stats_list .h-stats_item:nth-child(1) .h-stats_icon path,
.section_h-stats .h-stats_list .h-stats_item:nth-child(1) .h-stats_icon circle { transition-delay: .15s; }
.section_h-stats .h-stats_list .h-stats_item:nth-child(2) .h-stats_icon path,
.section_h-stats .h-stats_list .h-stats_item:nth-child(2) .h-stats_icon circle { transition-delay: .40s; }
.section_h-stats .h-stats_list .h-stats_item:nth-child(3) .h-stats_icon path,
.section_h-stats .h-stats_list .h-stats_item:nth-child(3) .h-stats_icon circle { transition-delay: .65s; }
.section_h-stats .h-stats_list .h-stats_item:nth-child(4) .h-stats_icon path,
.section_h-stats .h-stats_list .h-stats_item:nth-child(4) .h-stats_icon circle { transition-delay: .90s; }

@media (prefers-reduced-motion: reduce) {
  .section_h-stats .h-stats_icon path,
  .section_h-stats .h-stats_icon circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}
.section_h-stats .h-stats_heading { color: var(--spa-ink-strong); font-weight: 500; }
.section_h-stats .h-stats_label { color: var(--spa-ink-soft); }
.section_h-stats .h-stats_value { color: var(--spa-ink-strong); }


/* =========================================================
   SERVICES section — already cream-ish. Refine cards.
   ========================================================= */
.section_services {
  background-color: var(--spa-bg-base);
  border-top: 1px solid var(--spa-line);
  background-image: radial-gradient(800px 600px at 100% 0%, rgba(235,239,232,.6) 0%, rgba(235,239,232,0) 65%);
}
.services_card {
  background-color: var(--spa-bg-card);
  border: 1px solid var(--spa-line);
  border-radius: var(--spa-r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .35s ease;
}
.services_card:hover {
  border-color: rgba(91,122,106,.20);
}
.services_card-image {
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.services_card:hover .services_card-image {
  transform: scale(1.06);
}
/* Two buttons side-by-side at the bottom of each card. */
.services_card-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5em;
  width: 100%;
  margin-top: 1.25em;
}
.services_card-buttons .c-btn {
  width: 100%;
  justify-content: center;
  padding-left: .5em;
  padding-right: .5em;
}
.services_card-image-wrapper { border-radius: var(--spa-r-md); }
.services_card-name { color: var(--spa-ink-strong); }
.services_card-description { color: var(--spa-ink-soft); opacity: 1; }


/* =========================================================
   WHY-US section — was dark. Flip to soft sand+sage layered light.
   ========================================================= */
.section_why-us {
  background-color: var(--spa-bg-soft);
  color: var(--spa-ink-strong);
  border-top: 1px solid var(--spa-line);
  background-image:
    radial-gradient(900px 700px at 100% 100%, rgba(235,239,232,.7) 0%, rgba(235,239,232,0) 60%),
    radial-gradient(800px 600px at 0% 0%,    rgba(241,236,225,.7) 0%, rgba(241,236,225,0) 65%);
}
.section_why-us .why-us_heading {
  color: var(--spa-ink-strong);
  font-size: 2.5em;
  line-height: 1.15;
  letter-spacing: -.012em;
}
.section_why-us .why-us_text { color: var(--spa-ink-soft); }
.why-us_image-wrapper {
  border-radius: var(--spa-r-lg);
}

/* Why-us features — small icon + title + text grid below the paragraph. */
.why-us_features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5em 1.75em;
  margin-top: 3em;
  width: 100%;
}
.why-us_feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-us_feature-icon {
  width: 3em;
  height: 3em;
  border-radius: .75em;
  background-color: var(--spa-bg-card-warm);
  border: 1px solid var(--spa-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--spa-green-deep);
  margin-bottom: 1.75em;
}
.why-us_feature-icon svg {
  width: 1.5em;
  height: 1.5em;
}
.why-us_feature-title {
  font-family: var(--font-family--font-heading);
  font-weight: 400;
  font-size: 1.375em;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--spa-ink-strong);
  margin-bottom: .4em;
}
.why-us_feature-text {
  margin: 0;
  font-size: .9375em;
  line-height: 1.5;
  color: var(--spa-ink-soft);
  opacity: 1;
}

@media (max-width: 600px) {
  .why-us_features { grid-template-columns: 1fr; }
}


/* Doctor credentials list — used inside the second why-us_item to introduce
   Dr. Violet Jang. Tracinho sage à esquerda no lugar de bullet. */
.doctor_credentials {
  margin: .5em 0 1em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .65em;
  width: 100%;
}
.doctor_credentials li {
  position: relative;
  padding-left: 1.5em;
  color: inherit;
  font-size: 1em;
  line-height: 1.5;
}
.doctor_credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .75em;
  height: 3px;
  border-radius: 1px;
  background-color: var(--spa-green);
}


/* =========================================================
   TESTIMONIALS — light cards on cream, gold stars stay.
   ========================================================= */
.section_h-testimonials {
  background-color: var(--spa-bg-base);
  background-image: radial-gradient(900px 720px at 50% 0%, rgba(241,236,225,.6) 0%, rgba(241,236,225,0) 65%);
}
.h-testimonials_card {
  background-color: var(--spa-bg-card);
  border: 1px solid var(--spa-line);
  border-radius: var(--spa-r-md);
}
.h-testimonials_card-name { color: var(--spa-ink-strong); }
.h-testimonials_card-text { color: var(--spa-ink-soft); }
.h-testimonials_image-wrap {
  border-radius: var(--spa-r-md);
}
.testimonials_rating,
.testimonials_rating-icon,
.h-testimonials_card-stars { color: #c89b3a; }


/* =========================================================
   FAQ — was dark. Flip.
   ========================================================= */
.section_faq {
  background-color: var(--spa-bg-soft);
  color: var(--spa-ink-strong);
  border-top: 1px solid var(--spa-line);
}
.section_faq .faq_question { color: var(--spa-ink-strong); }
.section_faq .faq_item { border-bottom-color: var(--spa-line-strong); }
.section_faq .faq_item:hover { border-top-color: var(--spa-line-strong); }


/* =========================================================
   ABOUT (sage-breeze-950 dark) — flip.
   ========================================================= */
.section_about {
  background-color: var(--spa-bg-sage);
  color: var(--spa-ink-strong);
  background-image: radial-gradient(800px 600px at 100% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%);
}
.section_about .about_heading { color: var(--spa-ink-strong); }
.section_about .about_paragraph { color: var(--spa-ink-soft); }


/* =========================================================
   FINANCE / TREATMENT / TEAM-MEMBER hero strips that
   were sage-breeze-950 — bring to light cream.
   ========================================================= */
.section-hero-finance {
  background-color: var(--spa-bg-sage);
  color: var(--spa-ink-strong);
  background-image: radial-gradient(900px 600px at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
}
.section-hero-finance h1,
.section-hero-finance h2,
.section-hero-finance h3,
.section-hero-finance p { color: inherit; }

.section_treatment { background-color: var(--spa-bg-soft); }
.section_team { background-color: var(--spa-bg-base); }
.section_team-member { background-color: var(--spa-bg-soft); }


/* =========================================================
   CTA-2 — full-bleed video band, edge to edge.
   ========================================================= */
.section_cta-2 {
  background-color: var(--spa-bg-base);
  padding-top: 0;
  padding-bottom: 0;
}
.section_cta-2 .container-large {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.section_cta-2 .padding-global {
  padding-left: 0;
  padding-right: 0;
}
.cta-2_component {
  border-radius: 0;
  overflow: hidden;
}
.cta-2_background-overlay {
  background-image: linear-gradient(180deg, rgba(31,42,37,.32) 0%, rgba(63,90,78,.55) 100%);
  background-color: rgba(0, 0, 0, .2);
}
.cta-2_content { color: #ffffff; }
.cta-2_content .cta-2_heading { color: inherit; }
.cta-2_paragraph { color: #ffffff; }


/* =========================================================
   CTA-3 — was dark. Flip.
   ========================================================= */
.section_cta3 {
  background-color: var(--spa-bg-sage);
  color: var(--spa-ink-strong);
  border-top: 1px solid var(--spa-line);
}
.section_cta3 .cta3_heading,
.section_cta3 .cta3_card-heading { color: var(--spa-ink-strong); }
.section_cta3 .cta3_card-text { color: var(--spa-ink-soft); }
.section_cta3 .cta3_card-divider { background-color: rgba(91,122,106,.30); }
.section_cta3 .cta3_card { border-color: var(--spa-line); }


/* =========================================================
   FOOTER — dusty sage with dark ink. Calm closing note.
   ========================================================= */
.footer {
  background-color: var(--spa-bg-footer);
  color: var(--spa-ink);
  border-top: 1px solid var(--spa-line);
  background-image:
    radial-gradient(900px 600px at 100% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(241,236,225,.45) 0%, rgba(241,236,225,0) 65%);
}
.footer .footer_link { color: var(--spa-ink-soft); transition: color .25s ease; }
.footer .footer_link:hover { color: var(--spa-green-deep); }
.footer .footer_column_title {
  color: var(--spa-ink-strong);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .75em;
  font-family: var(--font-family--font-sans);
  font-weight: 600;
}
.footer .footer_icon { color: var(--spa-ink-strong); }
.footer .footer_bottom { border-top: 1px solid var(--spa-line); }
.footer .footer_bottom:hover { background-color: rgba(31,42,37,.03); }
.footer .footer-nav_social-item {
  border: 1px solid var(--spa-line-strong);
  color: var(--spa-ink-strong);
  background-color: rgba(255,255,255,.45);
}
.footer .footer-nav_social-item:hover {
  background-color: var(--spa-green);
  color: #fff;
  border-color: var(--spa-green);
}

/* Location block — practice name + address + phone. */
.footer .footer_location {
  display: flex;
  flex-direction: column;
  gap: .9em;
}
.footer .footer_location-name {
  margin: 0;
  font-weight: 600;
  color: var(--spa-ink-strong);
  font-size: .9375em;
}
.footer .footer_location-address {
  margin: 0;
  color: var(--spa-ink-soft);
  line-height: 1.55;
  font-size: .9375em;
}
.footer .footer_location-phone {
  color: var(--spa-ink-strong);
  font-weight: 500;
  font-size: .9375em;
  text-decoration: none;
  transition: color .25s ease;
}
.footer .footer_location-phone:hover {
  color: var(--spa-green-deep);
}


/* =========================================================
   MEMBERSHIP / CONTACT / OTHER LIGHT-LIKE SECTIONS — soften.
   ========================================================= */
.membership_section { background-color: var(--spa-bg-soft); }
.section_contact-us,
.section_contact-us-1 { background-color: var(--spa-bg-base); }


/* =========================================================
   BEFORE-AFTER — the overlay used a dark tint; soften it.
   ========================================================= */
.section_before-after { background-color: var(--spa-bg-base); }
.before-after_overlay {
  background-color: rgba(31, 42, 37, .35);
}
.before-after_card-label { color: #fff; }


/* =========================================================
   TEAM controls — refine to spa green pill.
   ========================================================= */
.team_control {
  background-color: var(--spa-bg-card);
  color: var(--spa-ink-strong);
  border: 1px solid var(--spa-line-strong);
}
.team_control:hover {
  background-color: var(--spa-green);
  color: #fff;
  border-color: var(--spa-green);
}


/* =========================================================
   CARDS in light variants — soften corners.
   ========================================================= */
.team_card {
  background-color: var(--spa-bg-card);
  border: 1px solid var(--spa-line);
  border-radius: var(--spa-r-md);
}


/* =========================================================
   Minor: text alpha tokens used inside dark sections — they
   were "alpha-light" (white-on-dark). Inside flipped light
   sections we want them dark. We rebind them locally.
   ========================================================= */
.section_h-stats .text-alpha-light-64,
.section_h-stats .text-alpha-light-88,
.section_why-us  .text-alpha-light-64,
.section_why-us  .text-alpha-light-88,
.section_faq     .text-alpha-light-64,
.section_faq     .text-alpha-light-88,
.section_cta3    .text-alpha-light-64,
.section_cta3    .text-alpha-light-88,
.section_about   .text-alpha-light-64,
.section_about   .text-alpha-light-88,
.footer          .text-alpha-light-64,
.footer          .text-alpha-light-88 {
  color: var(--spa-ink-soft);
}


/* =========================================================
   Background-color utility used by some Webflow blocks.
   ========================================================= */
.background-color-black {
  background-color: var(--spa-ink-strong);
}


/* =========================================================
   Image & media polish — gentle rounded corners across.
   ========================================================= */
.about_image-wrapper,
.thank-you_image-wrapper,
.dental-insurance_image-wrapper,
.team-member_image-wrapper,
.service_image-wrapper,
.before-after_card,
.before-after_card-image-wrapper,
.post-hero_image-wrapper {
  border-radius: var(--spa-r-lg);
}


/* =========================================================
   PAGE PRELOADER — logo breathing over cream.
   Markup is the first child of <body>. js/cdd-preloader.js
   handles minimum display time + cross-page overlay handoff.
   ========================================================= */
.cdd-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f1e8;
  background-image:
    radial-gradient(900px 700px at 50% 40%, rgba(255,253,247,.55) 0%, rgba(255,253,247,0) 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(235,239,232,.45) 0%, rgba(235,239,232,0) 65%);
  opacity: 1;
  visibility: visible;
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1),
              visibility .9s linear;
}
.cdd-preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.cdd-preloader.is-leaving {
  /* Loader is being shown again to bridge a same-site navigation. */
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity .35s ease;
}
.cdd-preloader__logo {
  width: clamp(3.5rem, 6vw, 5rem);
  height: auto;
  animation: cdd-loader-spin 2s cubic-bezier(0.45, 0.5, 0.3, 1) forwards;
  filter: drop-shadow(0 6px 18px rgba(80, 175, 182, .22));
  will-change: transform;
}
@keyframes cdd-loader-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(270deg); }
}


/* =========================================================
   Reduced motion — already covered in cdd-animations.css.
   Just ensure nothing in this file animates if prefers reduce.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .c-btn.c-btn--primary,
  .services_card { transition: none !important; }
  .cdd-preloader__logo { animation: none; }
}