/* Page: Home */
/* Keep your global colors in your main stylesheet; these are safe defaults */
:root{
	
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

  
  --container: 1100px;
  --pad: 22px;

  --radius: 16px;
  --radius-lg: 16px;                 /* used by cards */
  --border: rgba(0,0,0,.08);         /* used by cards */
  --shadow: 0 10px 30px rgba(0,0,0,.12);

  --brand: #1fa2c1;
  --brand-rgb: 31,162,193;           /* used by rgba(var(--brand-rgb), ...) */
  --brandDeep: #0f6f86;

  --dark: #2b2b2b;
  --light: #ffffff;
  --muted: rgba(255,255,255,.85);
}

html{
  scroll-behavior: smooth;
}

section[id]{
  scroll-margin-top: 90px; /* match header height */
}


body{
  font-family: var(--font-body);
}

/* Headings & UI = sans-serif */
h1, h2, h3, h4,
.hero__title,
.hero__tagline,
.section__title,
.serviceCard__title,
.btn,
.nav-link{
  font-family: var(--font-ui);
}

/* Body text stays serif automatically */
p,
li,
.testimonial__quote{
  font-family: var(--font-body);
}

.home .container{
  width: min(var(--container), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

.section{ padding: 64px 0; }

.sectionDivider{
  height: 10px;
  background: var(--brand);
}

/* HERO */
.hero{
  position: relative;
  min-height: calc(100vh - 70px);
  overflow: hidden;
}

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.35),
    rgba(0,0,0,.65)
  );
  display: grid;
  place-items: center;
}

.hero__content{
  text-align: center;
  color: #fff;
  padding: 40px 0;
}

.hero__title{
  font-size: clamp(28px, 4vw, 46px);
  margin: 0 0 18px;
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
  color:#FFF;
}

.hero__actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__tagline{
  margin: 6px 0 22px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: rgba(255,255,255,.92);
  letter-spacing: .25px;
  font-style: italic;
}

/* BUTTONS (lightly modern; keep your existing .btn too if you want) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btnPrimary{
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow);
}

.btnOutline{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.65);
}

.btnPrimary:hover,
.btnOutline:hover{
  transform: translateY(-1px);
}

/* SECTION THEMES */
.section--light{ background: #fff; color: #111; }

.section--brand{
  background-image: url("../media/backDental.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.section--dark{ 
	background: #2f2f2f; color: #fff; 
	padding: 64px 0;
    height: auto !important;
	min-height:450px !important;
	max-height:none !important;
    overflow: visible !important;
}
.section--brandDeep{ background: var(--brandDeep); color: #fff; }

.section--dark .section__title,
.section--brandDeep .section__title{
  color: #fff;
}

/* TESTIMONIALS */
.testimonialSlider{
  max-width: 860px;
  margin: 0 auto;
}

.testimonial{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  display: none;
}

.testimonial__quote{
  font-size: 18px;
  line-height: 1.6;
  color: #222;
}

.testimonial__author{
  margin-top: 14px;
  font-weight: 700;
  color: #111;
}

.testimonialDots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.2);
}

.dot.is-active{
  background: var(--brand);
}

/* SERVICES GRID */
.cardGrid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

/* Clickable wrapper */
.serviceCardLink{
  display: block;
  text-decoration: none;
  color: inherit; /* prevent global a{} gray from affecting card text */
}

/* Service Card (merged into one block) */
.serviceCard{
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.serviceCard__icon{
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
}

.serviceCard__title{
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

.serviceCard__text{
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.55;
  flex: 1; /* keeps cards uniform */
}

.serviceCard__cta{
  margin-top: 6px;
  font-weight: 800;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hover / focus states */
.serviceCardLink:hover .serviceCard,
.serviceCardLink:focus-visible .serviceCard{
  transform: translateY(-3px);
  border-color: rgba(var(--brand-rgb), .35);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* You said you don't like underline hover; keep it off */
.serviceCardLink:hover .serviceCard__cta{
  text-decoration: none;
  opacity: .9;
}

/* Accessibility: keyboard focus ring */
.serviceCardLink:focus-visible{
  outline: 3px solid rgba(var(--brand-rgb), .35);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}

.btnDental {
  white-space: normal;           /* allow wrapping */
  word-break: break-word;        /* break long words if needed */
  overflow-wrap: break-word;     /* modern equivalent */
  line-height: 1.25;
  text-align: center;
  height: auto;                  /* allow multi-line */
  padding: 12px 16px;            /* a little breathing room */
  width:200px !important;
}

/* CTA CARD */
.ctaCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 28px 18px 28px 18px;
  text-align: center;
}

.ctaCard__title{
  margin: 0 0 10px;
  font-size: 30px;
}

.ctaCard__text {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 2rem !important;
}

/* Subtle supporting line under primary CTA copy */
.ctaCard__text--subtle {
  margin-top: -6px;          /* pulls it closer to the main paragraph */
  margin-bottom: 18px;
  font-size: 1.5rem !important;        /* slightly smaller than main CTA text */
  line-height: 1.45;
  color: var(--muted);       /* keeps it understated */
  opacity: 0.9;              /* softens without killing contrast */
}



.ctaCard__actions{
  margin-top:10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.ctaCard__actions .btnDental {
  width: 100%;
}

/* Checklist container */
/* Checklist container */
.ctaChecklist {
  max-width: 720px;            /* 👈 wider than before */
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 👈 two per row */
  gap: 12px;
}

/* Each row */
.ctaCheck {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;                /* 👈 white text */
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover / focus state */
.ctaCheck:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
}

/* Checkbox itself */
.ctaCheck input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #ffffff;      /* modern browsers */
}

/* Label text */
.ctaCheck span,
.ctaCheck label {
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Checked state */
.ctaCheck input[type="checkbox"]:checked + span {
  font-weight: 600;
}



/* FOUNDATION */
.featureStack{
  display: grid;
  gap: 22px;
}

.featureRow{
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 18px;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px;
}

.featureRow--reverse{
  grid-template-columns: 1.5fr 1fr;
}

.featureRow--reverse .featureRow__media{ order: 2; }
.featureRow--reverse .featureRow__body{ order: 1; }

.featureRow__media img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.featureRow__body p{
  margin: 0;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

/* DIFFERENT SECTION (merged: includes all “hard force” results without duplicates) */
#different.different{
  position: relative;
  background: #fff;
  padding: 70px 0 0;
  margin-top: -90px;   /* overlap the hero */
  z-index: 5;

  /* keep layout clean and prevent small overlaps */
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 100% WIDTH CURVE */
#different .different__curve{
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 70px;
  z-index: 1;
  pointer-events: none;
}

#different .different__curve svg{
  width: 100vw;
  height: 100%;
  display: block;
  margin-left: calc(50% - 50vw);
}

/* Layout: single row + no purple gap */
#different .different__inner{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);

  /* IMPORTANT: avoid purple “row gap” space */
  column-gap: 44px;
  row-gap: 0;

  align-items: stretch;

  padding-bottom: 0;
  margin-bottom: 0;
  max-height:420px;
  overflow:hidden;
}

/* Force placement */
#different .different__content{
  grid-column: 1;
  grid-row: 1;
}

#different .different__media{
  grid-column: 2;
  grid-row: 1;

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  align-self: stretch;
}

/* Text */
#different .different__title{
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  color: var(--brand);
}

#different .different__lead{
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.7;
}

#different .different__bullets{
  margin: 0;
  padding-left: 18px;
  color: #4b5563;
}

#different .different__bullets li{
  margin: 10px 0;
  line-height: 1.6;
}

#different .different__actions{
  margin-top: 18px;
}

/* Image */
#different .different__image{
  width: min(560px, 100%); /* larger (fixes the accidental 140px) */
  max-height: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transform: translateY(0);
}

/* TESTIMONIALS (Home) */
.testimonialSlider{
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}

.testimonial{
  display: none;                /* your JS toggles this */
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 28px 22px;
}

/* The visible slide */
.testimonial.is-active{
  display: block;
}

/* Make it feel like a “quote card” */
.testimonial__quote{
  font-size: 18px;
  line-height: 1.75;
  color: #334155;

  /* prevents the card from getting crazy tall */
  height: 260px;
  overflow: auto;
  padding-right: 10px;
}

/* nicer scrollbar without being weird */
.testimonial__quote::-webkit-scrollbar{ width: 10px; }
.testimonial__quote::-webkit-scrollbar-thumb{
  background: rgba(31,162,193,.25);
  border-radius: 999px;
}
.testimonial__quote::-webkit-scrollbar-track{
  background: rgba(0,0,0,.04);
  border-radius: 999px;
}

.testimonial__author{
  margin-top: 14px;
  font-weight: 700;
  color: #0f172a;
}

/* Dots */
.testimonialDots{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(15,23,42,.20);
  cursor: pointer;
}

.dot.is-active{
  background: var(--brand);
}

/* ORBIT SECTION (no cards/grid look) */
.orbitSection{
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* soft background */
.orbitSection::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(700px 500px at 20% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 500px at 80% 70%, rgba(0,0,0,.20), transparent 60%);
  pointer-events:none;
}

/* BASE = DESKTOP SHOWCASE (fixes full-screen weirdness) */
.orbitSection__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  gap: 34px;
}

/* keep text from stretching too wide */
.orbitSection__copy{
  max-width: 720px;
}

.orbitSection__title{
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color:#fff;
}

.orbitSection__lead{
  margin: 0 0 18px;
  color: rgba(255,255,255,.86);
  max-width: 58ch;
  font-size: 16px;
  margin-inline: auto;
}

.orbitSection__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  justify-content: center;
}

.orbitBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.22);
}

.orbitBtn--primary{
  background: rgba(255,255,255,.18);
  color:#fff;
}

.orbitBtn--ghost{
  background: transparent;
  color: rgba(255,255,255,.92);
}

/* Links/Social (keep if still used) */
.orbitSection__links{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 16px;
  max-width: 720px;
  width: 100%;
}

.orbitLink{
  display:block;
  text-decoration:none;
  color:#fff;
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
}

.orbitLink__kicker{
  display:block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}

.orbitLink__title{
  display:block;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
}

.orbitLink__cta{
  display:block;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

.orbitSection__social{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.socialPill{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 800;
}

/* Graphic */
.orbitSection__graphic{
  position: relative;
  display:grid;
  place-items:center;
  width: 100%;
  max-width: 780px;
  min-height: 560px;
}

.orbitCore{
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.orbitCore__label{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}

.orbitCore__sub{
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

.orbitRing{
  position:absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
}

.orbitRing--1{ width: 340px; height: 340px; }
.orbitRing--2{ width: 450px; height: 450px; opacity: .75; }
.orbitRing--3{ width: 580px; height: 580px; opacity: .55; }

.orbitBubble{
  position:absolute;
  width: 170px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
}

.orbitBubble__num{
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 4px;
}

.orbitBubble__txt{
  font-size: 13px;
  color: rgba(255,255,255,.86);
  line-height: 1.25;
}

/* Bubble positions */
.orbitBubble--a{ top: 52px;  right: 10px; }
.orbitBubble--b{ top: 160px; left: 10px; }
.orbitBubble--c{ bottom: 130px; right: 20px; }
.orbitBubble--d{ bottom: 40px; left: 60px; }

.orbitFootnote{
  position:absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align:center;
  font-size: 12px;
  color: rgba(255,255,255,.68);
}

/* ONLY breakpoint: <=980px (your “good” mode) */
@media (max-width: 980px){
  .orbitSection__wrap{
    text-align: left;
    justify-items: stretch;
    gap: 28px;
  }

  .orbitSection__copy{
    max-width: 100%;
  }

  .orbitSection__actions{
    justify-content: flex-start;
  }

  .orbitSection__graphic{
    min-height: 480px;
    max-width: 100%;
  }

  .orbitSection__title{
    font-size: 34px;
  }

  .orbitSection__links{
    grid-template-columns: 1fr;
  }

  .orbitSection__social{
    justify-content: flex-start;
  }

  .orbitBubble{
    width: 180px;
  }
}

@media (max-width: 520px){
  .orbitSection__graphic{ min-height: 430px; }
  .orbitRing--3{ width: 470px; height: 470px; }
  .orbitBubble--a{ top: 30px; right: 0; }
  .orbitBubble--b{ top: 140px; left: 0; }
  .orbitBubble--c{ bottom: 120px; right: 0; }
  .orbitBubble--d{ bottom: 40px; left: 0; }
}

/* LINK HUB (dark section + modern circular links) */
.linkHub .section__title{ color:#fff; }
.linkHub .section__lead{ color: rgba(255,255,255,.82); max-width: 820px; }

/* modern, flexible grid */
.linkHub__grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  align-items: start;
}

/* true circles */
.linkCircle{
  --cda-blue: rgba(31,162,193,1);

  position: relative;
  display: grid;
  place-items: center;
  text-align: center;

  width: 100%;
  aspect-ratio: 1 / 1;          /* keeps it a circle */
  border-radius: 999px;

  background: #fff;
  color: #102a43;
  text-decoration: none;

  border: 2px solid rgba(31,162,193,.75);
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.75);

  padding: 18px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}

/* subtle glossy highlight */
.linkCircle::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(60% 60% at 30% 25%, rgba(31,162,193,.18), transparent 55%),
    radial-gradient(70% 70% at 70% 80%, rgba(0,0,0,.08), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* content sits above highlight */
.linkCircle > *{ position: relative; z-index: 1; }

.linkCircle__icon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(31,162,193,.10);
  border: 1px solid rgba(31,162,193,.28);
  color: rgba(31,162,193,1);

  font-size: 22px;
  margin-bottom: 10px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.linkCircle__title{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.linkCircle__meta{
  margin-top: 6px;
  font-size: 12px;
  opacity: .78;
  max-width: 18ch;
}

/* hover + focus */
.linkCircle:hover{
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(31,162,193,1);
  box-shadow:
    0 18px 44px rgba(0,0,0,.32),
    0 0 0 6px rgba(31,162,193,.14),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.linkCircle:hover .linkCircle__icon{
  transform: scale(1.06);
  background: rgba(31,162,193,.14);
  border-color: rgba(31,162,193,.38);
}

.linkCircle:focus-visible{
  outline: none;
  box-shadow:
    0 18px 44px rgba(0,0,0,.32),
    0 0 0 4px rgba(255,255,255,.20),
    0 0 0 8px rgba(31,162,193,.35);
  border-color: rgba(31,162,193,1);
}

/* spacing for tiny screens */
@media (max-width: 520px){
  .linkHub__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .linkCircle{
    padding: 14px;
  }
  .linkCircle__icon{
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* Responsive */
@media (max-width: 700px){
  .testimonial{
    padding: 22px 18px 18px;
  }
  .testimonial__quote{
    font-size: 16px;
    max-height: 320px; /* allow more room on mobile */
  }
}

/* RESPONSIVE */
@media (max-width: 980px){
  .cardGrid{ grid-template-columns: repeat(2, 1fr); }

  .featureRow,
  .featureRow--reverse{
    grid-template-columns: 1fr;
  }

  .featureRow--reverse .featureRow__media,
  .featureRow--reverse .featureRow__body{
    order: initial;
  }

  .featureRow__media img{ height: 220px; }
}

/* Keep “Different” two-column until smaller screens */
@media (max-width: 760px){
  #different.different{
    margin-top: -60px;
    padding: 80px 0 55px;
    max-height: none; /* allow it to grow when stacked */
  }

  #different .different__inner{
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: 22px;
	max-height:600px;
  }

  #different .different__media{
    grid-column: 1;
    grid-row: 2;
    justify-content: center;
  }

  #different .different__image{
    width: min(420px, 100%);
    transform: none;
  }
}

@media (max-width: 560px){
  .cardGrid{ grid-template-columns: 1fr; }
  .section{ padding: 48px 0; }
  .ctaChecklist {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* CONTACT section + card must always expand (no internal scrolling) */
#contact,
#contact .container,
#contact #indexInteraction{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* remove the width conflict that can create overflow/scrollbars */
#contact .ctaCard__actions .btnDental{
  flex: 0 1 200px;      /* wraps nicely */
  width: auto !important;
  max-width: 300px;     /* keeps your 200px look */
}