:root {
  --blue: #008dd2;
  --light-grey: #afacaa;
  --dark-grey: #665c58;
  --white: #ffffff;
--black: #000000;
  --text: #5e5653;
  --shadow: 0 12px 30px rgba(0, 0, 0, .12);
  --radius: 5px;
  --max-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: min(calc(100% - 2rem), var(--max-width)); margin-inline: auto; }
.section-pad { padding: clamp(4rem, 7vw, 7rem) 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: .60rem;
  line-height: 1;
  min-height: 2.25rem;
  padding: .75rem 1rem;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-fill { background: var(--blue); color: var(--white); border: 2px solid var(--blue); }
.button-outline { color: var(--white); border: 3px solid var(--blue); background: transparent; }

.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.header-inner {
  min-height: 138px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.logo-area {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .35rem;
  flex-shrink: 0;
  max-width: 280px;
}
.site-logo {
  width: min(260px, 42vw);
  height: auto;
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
}
.logo-area small {
  display: block;
  padding-left: .2rem;
  font-size: .56rem;
  color: var(--dark-grey);
  letter-spacing: .01em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 3vw, 3.3rem);
  text-transform: uppercase;
}
.main-nav > a:not(.button), .dropdown-button, .header-location strong {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.dropdown { position: relative; }
.dropdown-button {
  border: 0;
  background: transparent;
  color: var(--text);
  text-transform: uppercase;
  cursor: pointer;
  padding: .75rem 0;
}
.dropdown-button span { color: var(--blue); font-weight: 900; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 8px;
  min-width: 190px;
  display: grid;
  gap: .1rem;
  padding: .65rem;
  background: var(--white);
  border-top: 4px solid var(--blue);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, translate .2s ease, visibility .2s ease;
  text-transform: none;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.15;
  z-index: 25;
}
.dropdown-menu a { padding: .45rem .55rem; border-radius: 3px; }
.dropdown-menu a:hover, .dropdown-menu a:focus { background: rgba(0, 141, 210, .12); }
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: -50% 0;
}
.header-location { max-width: 160px; line-height: 1.25; }
.header-location strong { display: block; }
.header-location span { display: block; text-transform: none; font-size: .64rem; font-weight: 500; margin-top: .2rem; }
.nav-toggle { display: none; border: 0; background: transparent; width: 44px; height: 38px; padding: 0; }
.nav-toggle span { display: block; height: 3px; background: var(--dark-grey); margin: 7px 0; border-radius: 999px; }

.hero { background: var(--light-grey); min-height: clamp(440px, 60vw, 680px); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-inner { display: grid; grid-template-columns: .72fr 1fr; align-items: center; gap: 3rem; }
.hero h1 { color: var(--black); font-size: clamp(2.8rem, 7vw, 5rem); line-height: .92; margin: 0 0 1.8rem; letter-spacing: -.05em; font-weight: 900; }
.image-placeholder { background: var(--light-grey); color: #1f1b19; display: grid; place-items: center; text-transform: uppercase; min-height: 150px; }
.hero-image { background: transparent; min-height: 260px; }

.doctor-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(260px, 340px); justify-content: center; align-items: start; gap: clamp(3rem, 9vw, 7rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.25rem); line-height: .95; margin: 0 0 1rem; text-transform: uppercase; font-weight: 900; color: var(--dark-grey); }
.doctor-copy p { margin: 0 0 .6rem; line-height: 1.2; font-size: .95rem; }
.doctor-image { min-height: 365px; }

.services { background: var(--blue); color: var(--white); padding: clamp(3rem, 6vw, 4.5rem) 0 3.6rem; }
.section-heading { text-align: center; margin-bottom: 2rem; }
.section-heading h2 { margin-bottom: 1rem; }
.section-heading-light h2, .section-heading-light p { color: var(--white); }
.section-heading p { font-size: clamp(1rem, 2vw, 1.28rem); margin: 0; }
.service-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(.8rem, 1.7vw, 1.55rem); }
.service-card { border-radius: var(--radius); overflow: hidden; background: var(--white); color: var(--dark-grey); min-width: 0; text-align: center; box-shadow: var(--shadow); position: relative; }
.service-card .image-placeholder { min-height: 125px; }
.service-card h3 { min-height: 74px; display: grid; place-items: center; margin: 0; padding: .7rem .35rem; text-transform: uppercase; font-size: clamp(.72rem, 1.1vw, .95rem); line-height: .95; font-weight: 900; }
.service-card a { display: block; background: var(--light-grey); color: var(--white); font-size: .45rem; text-transform: uppercase; padding: .35rem; }

.disease-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; max-width: 760px; margin: 0 auto 4.2rem; text-align: center; }
.icon-circle { width: 68px; aspect-ratio: 1; border: 2px solid #111; border-radius: 50%; margin: 0 auto .8rem; display: grid; place-items: center; font-size: .45rem; text-transform: uppercase; color: #111; }
.disease-grid h3 { margin: 0; color: var(--dark-grey); text-transform: uppercase; font-size: clamp(.86rem, 1.7vw, 1.2rem); line-height: .9; font-weight: 900; }
.testimonial { max-width: 650px; margin: auto; display: grid; grid-template-columns: 45px 1fr 45px; align-items: center; gap: 1rem; }
.testimonial-arrow { border: 0; background: transparent; color: var(--light-grey); font-size: 4rem; line-height: 1; cursor: pointer; }
blockquote { margin: 0; position: relative; font-size: .88rem; line-height: 1.25; }
blockquote p { margin: 0 2rem .35rem; }
blockquote cite { display: block; margin-left: 2rem; text-transform: uppercase; font-weight: 900; font-style: normal; font-size: .78rem; }
.quote { position: absolute; left: 0; top: -.25rem; font-size: 2.3rem; color: var(--dark-grey); font-weight: 900; }
.quote.end { left: auto; right: 0; top: auto; bottom: -.6rem; }

.contact-band { background: var(--dark-grey); color: var(--white); position: relative; padding: clamp(3.4rem, 6vw, 5.5rem) 0; }
.background-note { position: absolute; top: 1rem; left: 1rem; text-transform: uppercase; font-size: .72rem; color: rgba(255,255,255,.75); }
.contact-grid { display: grid; grid-template-columns: minmax(280px, 420px) minmax(250px, 360px); justify-content: center; gap: clamp(3rem, 9vw, 6rem); align-items: center; }
.contact-form h2 { color: var(--white); font-size: .9rem; line-height: 1; margin-bottom: 1rem; }
.contact-form label span { position: absolute; clip: rect(0 0 0 0); }
.contact-form input, .contact-form textarea { width: 100%; border: 0; border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .8rem; color: var(--dark-grey); }
.contact-form textarea { min-height: 138px; resize: vertical; }
.contact-form .button { min-width: 190px; }
.form-message { min-height: 1.2rem; margin: .75rem 0 0; font-size: .85rem; }
dl { margin: 0; display: grid; gap: 1.05rem; }
dl div { display: grid; grid-template-columns: 95px 1fr; gap: 1rem; }
dt { text-transform: uppercase; font-weight: 700; font-size: .8rem; line-height: 1.05; }
dd { margin: 0; font-size: .86rem; line-height: 1.2; }

.site-footer { padding: 3.2rem 0 2.5rem; background: var(--white); }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.footer-nav { display: flex; gap: 3rem; margin-bottom: 1.7rem; text-transform: uppercase; color: var(--dark-grey); font-weight: 800; font-size: .7rem; }
.footer-social { text-align: right; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
.footer-social div { margin: .75rem 0 2.4rem; display: flex; justify-content: flex-end; gap: .5rem; }
.footer-social div a { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dark-grey); color: var(--white); font-size: .75rem; }
.footer-social .email { text-transform: lowercase; color: var(--light-grey); font-weight: 500; }
.footer-logo .site-logo { width: min(310px, 70vw); }

@media (max-width: 980px) {
  .header-inner { min-height: 96px; }
  .nav-toggle { display: block; z-index: 30; }
  .main-nav {
    position: fixed;
    inset: 96px 0 auto 0;
    background: var(--white);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    transition: transform .25s ease;
  }
  body.nav-open .main-nav { transform: translateY(0); }
  .dropdown-menu {
    position: static;
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-top: 0;
    padding: .25rem 0 0 .75rem;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .dropdown-button { padding: 0; }
  .header-location { max-width: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 1rem; padding: 5rem 0; }
  .hero-image { min-height: 180px; }
  .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 1.4rem), var(--max-width)); }
  .doctor-grid, .contact-grid { grid-template-columns: 1fr; }
  .doctor-image { min-height: 280px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disease-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial { grid-template-columns: 30px 1fr 30px; gap: .2rem; }
  .testimonial-arrow { font-size: 3rem; }
  blockquote p, blockquote cite { margin-left: 1.4rem; margin-right: 1.4rem; }
  .footer-grid { display: grid; }
  .footer-social { text-align: left; }
  .footer-social div { justify-content: flex-start; margin-bottom: 1rem; }
}

@media (max-width: 460px) {
  .site-logo { width: min(220px, 62vw); }
  .logo-area small { font-size: .45rem; }
  .hero { min-height: auto; }
  .hero h1 { font-size: 2.75rem; }
  .service-grid, .disease-grid { grid-template-columns: 1fr; }
  .footer-nav { gap: 1.3rem; flex-wrap: wrap; }
  dl div { grid-template-columns: 1fr; gap: .25rem; }
}

/* --- Requested navigation updates --- */
#services,
#contact-us {
  scroll-margin-top: 138px;
}

.header-inner {
  align-items: flex-start;
}

.logo-area {
  padding-top: 1.2rem;
}

.main-nav {
  align-items: flex-start;
  padding-top: 2rem;
}

.main-nav > a,
.dropdown,
.header-location,
.main-nav > .button {
  margin-top: 0;
}

.dropdown {
  position: relative;
}

.dropdown-button {
  display: inline-flex;
  align-items: flex-start;
  gap: .25rem;
  cursor: pointer;
}

.dropdown-menu {
  top: calc(100% + .45rem);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dropdown-menu a[href="dentures.html"]:hover,
.dropdown-menu a[href="dentures.html"]:focus,
.dropdown-menu a[href="dentures.html"]:active,
.dropdown-menu a.is-active {
  color: var(--blue);
  font-weight: 800;
}

@media (max-width: 980px) {
  #services,
  #contact-us {
    scroll-margin-top: 96px;
  }

  .header-inner {
    align-items: center;
  }

  .logo-area {
    padding-top: 0;
  }

  .main-nav {
    align-items: start;
    padding-top: 1.25rem;
  }

  .dropdown-button {
    width: fit-content;
  }
}


/* --- Final nav/contact refinements requested --- */
.main-nav {
  gap: clamp(2.6rem, 6vw, 6.6rem);
}

.dropdown-button {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

.main-nav > a:not(.button),
.dropdown-button,
.header-location strong {
  line-height: 1;
}

.dropdown {
  line-height: 1;
}

.background-note {
  display: none;
}

@media (max-width: 980px) {
  .main-nav {
    gap: 1.25rem;
  }

  .dropdown-button {
    line-height: 1.2;
  }
}

/* --- Corrected top alignment for main navigation --- */
@media (min-width: 981px) {
  .main-nav {
    align-items: flex-start !important;
  }

  .main-nav > a:not(.button),
  .main-nav > .dropdown,
  .main-nav > .header-location,
  .main-nav > .button {
    align-self: flex-start !important;
    margin-top: 0 !important;
  }

  .main-nav > a:not(.button),
  .dropdown-button,
  .header-location strong {
    display: inline-flex !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    line-height: 1 !important;
  }

  .dropdown,
  .dropdown-button {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
  }

  .dropdown-button span {
    display: inline-block;
    line-height: 1 !important;
    transform: translateY(-1px);
  }

  .main-nav > .button {
    min-height: 0 !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
  }
}


/* --- Desktop nav final top-alignment fix --- */
@media (min-width: 981px) {
  .header-inner {
    align-items: flex-start !important;
  }

  .main-nav {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end;
    gap: clamp(3.2rem, 7vw, 7.4rem) !important;
    padding-top: 2rem !important;
  }

  .main-nav > a:not(.button),
  .main-nav > .dropdown,
  .main-nav > .header-location,
  .main-nav > .button {
    align-self: flex-start !important;
    margin: 0 !important;
  }

  .main-nav > a:not(.button),
  .dropdown-button,
  .header-location strong {
    display: flex !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .dropdown {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .dropdown-button {
    gap: .25rem;
  }

  .dropdown-button span {
    line-height: 1 !important;
    display: inline-block;
    transform: translateY(-1px);
  }

  .header-location {
    padding: 0 !important;
    margin: 0 !important;
  }

  .header-location span {
    margin-top: .35rem !important;
  }

  .main-nav > .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: .28rem 1.45rem !important;
    line-height: 1 !important;
    margin-top: -1px !important;
  }
}

/* --- Page-wide desktop/tablet padding adjustment requested --- */
@media (min-width: 761px) {
  :root {
    --page-gutter: clamp(4rem, 13vw, 13rem);
  }

  .container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--max-width));
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Section updates requested 2026-06-05 --- */
.site-header::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: var(--blue);
}

.hero {
  position: relative;
  isolation: isolate;
  background: var(--light-grey);
  /* Replace with your final hero image, for example: background-image: url('../images/hero-dental.jpg'); */
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(175, 172, 170, .78);
  z-index: -1;
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.6vw, 4rem) !important;
  line-height: .94 !important;
  font-weight: 700 !important;
  letter-spacing: -.045em;
}
.hero-image {
  min-height: 260px;
}
.button-appointment {
  background: var(--blue);
  color: var(--white);
  border: 3px solid var(--blue);
}

.image-placeholder { color: transparent !important; }
.image-placeholder::before { content: ""; }
.doctor-image,
.service-image,
.disease-image {
  background: var(--light-grey);
  border: 0;
}

.service-grid { display: none !important; }
.service-carousel {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: .25rem 0 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.7) rgba(255,255,255,.2);
}
.service-carousel .service-card {
  flex: 0 0 calc((100% - (clamp(1rem, 1.6vw, 1.6rem) * 4)) / 5);
  scroll-snap-align: start;
}
.service-carousel .service-card .image-placeholder,
.service-card .service-image {
  min-height: clamp(130px, 14vw, 165px);
}

.service-card img.service-image {
  width: 100%;
  height: clamp(130px, 14vw, 165px);
  min-height: clamp(130px, 14vw, 165px);
  display: block;
  object-fit: cover;
  object-position: center;
  background: var(--light-grey);
}

.service-card a:hover,
.dropdown-menu a[href="dentures.html"]:hover,
.dropdown-menu a[href="dentures.html"].is-active {
  color: var(--blue);
}

.icon-circle { display: none !important; }
.disease-grid { margin-bottom: 5.5rem !important; }
.disease-image {
  width: 72px;
  height: 72px;
  min-height: 72px;
  margin: 0 auto .9rem;
  border-radius: 0;
}

.testimonial { display: none !important; }
.testimonial-carousel {
  max-width: 650px;
  margin: auto;
  min-height: 112px;
  position: relative;
}
.testimonial-slide {
  display: none;
  position: relative;
  margin: 0;
  font-size: .88rem;
  line-height: 1.25;
  opacity: 0;
  transition: opacity .35s ease;
}
.testimonial-slide.active {
  display: block;
  opacity: 1;
}
.testimonial-slide p { margin: 0 2rem .35rem; }
.testimonial-slide cite {
  display: block;
  margin-left: 2rem;
  text-transform: uppercase;
  font-weight: 900;
  font-style: normal;
  font-size: .78rem;
}

.contact-band {
  position: relative;
  isolation: isolate;
  background: var(--dark-grey);
  /* Replace with your final contact image, for example: background-image: url('../images/contact-bg.jpg'); */
  background-image: var(--contact-image, none);
  background-size: cover;
  background-position: center;
}
.contact-overlay {
  position: absolute;
  inset: 0;
  background: rgba(102, 92, 88, .88);
  z-index: -1;
  pointer-events: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #cfcaca;
  font-style: italic;
  font-size: .82rem;
}
.contact-form input,
.contact-form textarea {
  font-size: .9rem;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .service-carousel .service-card {
    flex-basis: calc((100% - (clamp(1rem, 1.6vw, 1.6rem) * 4)) / 5);
  }
}

@media (max-width: 760px) {
  .service-carousel .service-card {
    flex-basis: 100%;
  }
  .service-carousel .service-card .image-placeholder,
  .service-card .service-image {
    min-height: 180px;
  }
  .service-card img.service-image {
    height: 180px;
    min-height: 180px;
  }
  .disease-grid { margin-bottom: 4.5rem !important; }
  .testimonial-carousel { min-height: 145px; }
}

.hero::before{
content:"";
position:absolute; inset:0;
background:url('../images/hero5.png') center center/cover no-repeat;
z-index:0;
}
.hero-overlay{
position:absolute; inset:0;
background:rgba(102,92,88,.0);
z-index:1;
}
.hero-inner{position:relative; z-index:2;}
.hero-image{display:none;}

/* --- Hero mobile image + headline overlay fixes --- */
.hero-copy h1 {
  display: inline-block;
  color: var(--dark-grey) !important;
  background: rgba(255, 255, 255, .95);
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.1rem, 3vw, 2rem);
  margin-bottom: 1rem !important;
}

@media (max-width: 760px) {
  .hero::before {
    background-size: auto 100%;
    background-position: 64% center;
  }

  .hero-inner {
    min-height: 440px;
    align-items: center;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: .96 !important;
    padding: 1.55rem .85rem;
    max-width: 14rem;
  }
}

@media (max-width: 460px) {
  .hero::before {
    background-position: 66% center;
  }

  .hero-inner {
    min-height: 440px;
  }

  .hero-copy h1 {
    font-size: 2.1rem !important;
    max-width: 11.5rem;
  }
}


/* Hero text panel and button */
.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-copy h1{
  background: rgba(255,255,255,0.75);
  padding: 14px 14px 18px;
  display:inline-block;
  color: var(--dark-grey);
}
.button-appointment{
  margin-top: 14px;
}

/* --- Final service/doctor/nav refinements --- */
.button-appointment {
  padding: .85rem 1.9rem !important;
  font-size: clamp(.85rem, 1vw, 1rem) !important;
  min-height: 48px;
}

@media (min-width: 761px) {
  .service-card h3 {
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
    line-height: 1.02 !important;
    min-height: 92px !important;
    padding: .9rem .45rem .75rem !important;
    white-space: normal;
  }
}

.service-card a {
  background: var(--dark-grey) !important;
  color: var(--white) !important;
}
.service-card a:hover,
.service-card a:focus {
  background: #4f4744 !important;
  color: var(--white) !important;
}

.doctor-image {
  width: 100%;
  min-height: 365px;
  height: 365px;
  object-fit: cover;
  object-position: center;
  background: var(--light-grey);
}

@media (max-width: 760px) {
  .doctor-image {
    min-height: 280px;
    height: 280px;
  }
}

/* Keep responsive hamburger menu directly under the hamburger button */
@media (max-width: 980px) {
  .header-inner {
    position: relative;
  }

  .main-nav {
    position: absolute !important;
    top: calc(100% + 3px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(285px, calc(100vw - 1.4rem)) !important;
    inset: auto 0 auto auto !important;
    z-index: 40;
    background: var(--white);
    padding: 1rem 1.1rem 1.15rem !important;
    display: grid !important;
    gap: .85rem !important;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--blue);
    transform: translateY(-1rem) scale(.98) !important;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }

  body.nav-open .main-nav {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav > a:not(.button),
  .dropdown-button,
  .header-location strong {
    font-size: .85rem !important;
  }

  .main-nav .button {
    width: fit-content;
    justify-self: start;
  }

  .dropdown-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: .45rem 0 0 .9rem !important;
    margin-top: .25rem;
    gap: .15rem;
  }

  .dropdown-menu a {
    padding: .32rem 0 !important;
  }

  .header-location span {
    font-size: .72rem;
  }
}

.doctor-image{transform:scale(.85); transform-origin:center top;}

@media (max-width:980px){
  .main-nav{
    right:0;
    left:auto;
    width:320px;
    inset:96px 0 auto auto;
  }
  .dropdown-menu{
    display:grid;
    grid-template-columns:1fr;
    padding-left:0;
  }
}

@media (max-width:760px){
  .disease-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .disease-grid > *:nth-child(4){
    grid-column:1;
  }
  .disease-grid > *:nth-child(5){
    grid-column:2;
  }
  .contact-form .button{
    display:flex;
    margin:0 auto;
  }
}


/* =========================================================
   FULL REMAINING REVISIONS - Dentx
   ========================================================= */

/* 1) Make the Dr. Silpa image about 15% smaller without leaving awkward transform space */
.doctor-grid {
  align-items: center;
}
.doctor-image {
  transform: none !important;
  width: 85% !important;
  justify-self: center;
  height: 330px !important;
  min-height: 330px !important;
  border-radius: 0;
}

/* 2) Services carousel: smaller white rounded arrows OUTSIDE cards */
.carousel-frame {
  position: relative;
}
.service-frame {
  padding-inline: 2.25rem;
}
.service-carousel {
  scrollbar-width: none;
}
.service-carousel::-webkit-scrollbar {
  display: none;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  border: 0;
  background: transparent;
  color: var(--white);
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.carousel-arrow:hover {
  transform: scale(1.12);
}
.service-prev { left: 0; }
.service-next { right: 0; }

/* Services text: larger on desktop and naturally two-line */
@media (min-width: 761px) {
  .service-card h3 {
    font-size: clamp(1.18rem, 1.55vw, 1.48rem) !important;
    line-height: 1.02 !important;
    min-height: 96px !important;
  }
}

/* Dentures Learn More dark grey */
.service-card a {
  background: var(--dark-grey) !important;
  color: var(--white) !important;
}

/* 3) Dental Diseases: hover animation + mobile balanced layout */
.disease-frame {
  max-width: 830px;
  margin: 0 auto 5.5rem;
  padding-inline: 0;
}
.disease-frame .carousel-arrow {
  color: var(--light-grey);
  background: transparent !important;
}
.disease-prev { left: -2.2rem; }
.disease-next { right: -2.2rem; }

.disease-grid {
  max-width: none !important;
  margin-bottom: 0 !important;
}
.disease-grid article {
  transition: transform .25s ease, filter .25s ease;
  cursor: default;
}
.disease-grid article:hover {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.16));
}
.disease-grid article:hover .disease-image {
  background: rgba(0,141,210,.16);
  box-shadow: inset 0 0 0 2px rgba(0,141,210,.35);
}

/* 4) Testimonial blue 20% rectangle with breathing room + vertical centering */
.testimonial-carousel {
  background: rgba(0, 141, 210, .20);
  max-width: 780px !important;
  min-height: 190px !important;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(2.2rem, 6vw, 4.5rem);
  display: grid;
  place-items: center;
}
.testimonial-slide {
  width: 100%;
  text-align: center;
}
.testimonial-slide.active {
  display: grid !important;
  align-content: center;
}
.testimonial-slide p {
  margin: 0 auto .75rem !important;
  max-width: 620px;
}
.testimonial-slide cite {
  margin: 0 auto !important;
}
.testimonial-slide .quote {
  position: static !important;
  display: inline-block;
  font-size: 2.15rem;
  line-height: .6;
  margin-right: .25rem;
}
.testimonial-slide .quote.end {
  margin-left: .25rem;
}

/* 5) Contact background image with darker 80% grey overlay */
.contact-band {
  background-image: url('../images/contact-bg.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}
.contact-overlay {
  background: rgba(102, 92, 88, .96) !important;
}

/* 6 & 7) Office info layout: office hours and address top aligned, email under address */
.office-info dl {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.3fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 1rem;
  align-items: start;
}
.office-info dl div {
  grid-template-columns: 90px 1fr;
  gap: .8rem;
}
.office-info dl div:nth-child(1) { grid-column: 1; grid-row: 1; }
.office-info dl div:nth-child(2) { grid-column: 1; grid-row: 2; }
.office-info dl div:nth-child(3) { grid-column: 1; grid-row: 3; }
.office-info dl div:nth-child(4) { grid-column: 2; grid-row: 1; }
.office-info dl div:nth-child(5) { grid-column: 2; grid-row: 2; }
.office-info a {
  color: var(--white);
}

/* 8) Footer centered and tightened */
.site-footer {
  padding: 1.8rem 0 2rem !important;
}
.footer-grid {
  display: grid !important;
  justify-items: center;
  text-align: center;
  gap: .65rem !important;
}
.footer-nav {
  justify-content: center;
  margin-bottom: .25rem !important;
}
.footer-logo {
  justify-items: center !important;
  align-content: center !important;
  gap: .15rem !important;
}
.footer-logo .site-logo {
  width: min(255px, 72vw) !important;
  object-position: center;
}
.footer-logo small {
  padding-left: 0 !important;
  text-align: center;
}
.footer-social {
  text-align: center !important;
  margin-top: .45rem;
}
.footer-social div {
  justify-content: center !important;
  margin: .55rem 0 0 !important;
}

/* 9) Mobile hamburger: one clean dropdown under hamburger, no flyout left */
@media (max-width: 980px) {
  .site-header {
    overflow: visible;
  }
  .header-inner {
    position: relative;
  }
  .main-nav {
    position: absolute !important;
    top: calc(100% + 3px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(320px, calc(100vw - 1.4rem)) !important;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--white);
    border-top: 3px solid var(--blue);
    padding: 1.1rem 1.25rem !important;
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: .85rem !important;
    box-shadow: var(--shadow);
    transform: translateY(-.75rem) scale(.98) !important;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
  }

  body.nav-open .main-nav {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav > a:not(.button),
  .main-nav .dropdown,
  .main-nav .header-location,
  .main-nav > .button {
    width: 100%;
    justify-self: stretch;
    text-align: left;
  }

  .dropdown-button {
    width: 100% !important;
    justify-content: flex-start;
    text-align: left;
  }

  .dropdown-menu {
    position: static !important;
    translate: none !important;
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: .45rem 0 0 0 !important;
    padding: .55rem 0 0 .85rem !important;
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .dropdown-menu a {
    display: block;
    padding: .28rem 0 !important;
    text-align: left;
  }

  .main-nav > .button {
    width: fit-content !important;
    justify-self: start !important;
    padding: .75rem 1.4rem !important;
  }
}

/* Mobile refinements */
@media (max-width: 760px) {
  .doctor-grid {
    padding-left: .9rem;
    padding-right: .9rem;
  }
  .doctor-image {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
  }

  .service-frame {
    padding-inline: 1.7rem;
  }
  .service-card h3 {
    font-size: 1.25rem !important;
    min-height: 56px !important;
    white-space: nowrap;
    line-height: 1 !important;
    padding: .5rem .25rem .35rem !important;
  }
  .service-prev { left: -.1rem; }
  .service-next { right: -.1rem; }

  .disease-frame {
    padding-inline: 1.55rem;
  }
  .disease-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 1.35rem .45rem !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .disease-grid article { grid-column: span 2; }
  .disease-grid article:nth-child(4) { grid-column: 2 / span 2 !important; }
  .disease-grid article:nth-child(5) { grid-column: 4 / span 2 !important; }
  .disease-prev { left: -.35rem; }
  .disease-next { right: -.35rem; }

  .testimonial-carousel {
    min-height: 230px !important;
    padding: 2rem 1.45rem;
  }

  .contact-form .button {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .office-info {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
  }
  .office-info dl {
    grid-template-columns: 1fr !important;
  }
  .office-info dl div {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: 95px 1fr;
  }
  .office-info dd {
    text-align: left;
  }

  .footer-nav {
    width: 100%;
    justify-content: center;
    gap: 2rem;
  }
}

@media (max-width: 460px) {
  .main-nav {
    width: min(300px, calc(100vw - 1rem)) !important;
  }
  .footer-nav {
    gap: 1.5rem;
  }
}

/* --- 2026-06-09 polishing updates --- */

/* 1 & 2) Services typography: keep mobile single-card titles on one line; center and prevent cut-off on multi-card screens */
.service-card h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: visible !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (min-width: 761px) {
  .service-card h3 {
    font-size: clamp(.9rem, 1.08vw, 1.08rem) !important;
    line-height: 1.04 !important;
    padding-left: .2rem !important;
    padding-right: .2rem !important;
    letter-spacing: -.02em;
  }
}

@media (max-width: 760px) {
  .service-card h3 br {
    display: none !important;
  }

  .service-card h3 {
    white-space: nowrap !important;
    font-size: clamp(1.08rem, 5vw, 1.45rem) !important;
    line-height: 1 !important;
    min-height: 50px !important;
    padding: .45rem .35rem .3rem !important;
  }
}

/* 3) Remove Dental Diseases arrows completely */
.disease-arrow {
  display: none !important;
}

.disease-frame {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Testimonial text left-aligned, with opening quote top-left and closing quote bottom-right */
.testimonial-carousel {
  text-align: left !important;
  display: grid;
  align-items: center;
}

.testimonial-slide {
  text-align: left !important;
  width: 100%;
  min-height: 100%;
}

.testimonial-slide p {
  text-align: left !important;
  margin: 0 2.2rem .6rem 2.2rem !important;
}

.testimonial-slide cite {
  text-align: left !important;
  margin-left: 2.2rem !important;
  margin-right: 0 !important;
}

.testimonial-slide .quote {
  position: absolute !important;
  left: .65rem !important;
  top: .55rem !important;
  right: auto !important;
  bottom: auto !important;
}

.testimonial-slide .quote.end {
  left: auto !important;
  right: .65rem !important;
  top: auto !important;
  bottom: .35rem !important;
}

/* 5) Office Hours through Email: compact stacked two-column rows like the reference image */
.office-info {
  width: min(100%, 420px);
  justify-self: center;
}

.office-info dl {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.office-info dl div {
  display: grid !important;
  grid-template-columns: 105px minmax(0, 1fr) !important;
  gap: .75rem !important;
  align-items: start !important;
  padding: .38rem 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.office-info dt {
  font-size: .8rem !important;
  line-height: .92 !important;
  font-weight: 800 !important;
  color: var(--white) !important;
}

.office-info dd {
  font-size: .86rem !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  color: var(--white) !important;
  text-align: left !important;
}

.office-info a {
  color: var(--white) !important;
  text-decoration: none;
}

.contact-grid {
  align-items: start !important;
}

@media (max-width: 760px) {
  .contact-grid {
    gap: 1.8rem !important;
  }

  .office-info {
    margin: 0 auto !important;
    width: min(100%, 330px) !important;
  }

  .office-info dl div {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: .65rem !important;
  }

  .office-info dt {
    font-size: .8rem !important;
  }

  .office-info dd {
    font-size: .86rem !important;
  }
}

/* 6) Footer: desktop/tablet left/right layout; mobile fully centered */
@media (min-width: 761px) {
  .site-footer {
    padding: 2.15rem 0 2.2rem !important;
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "nav social"
      "logo social" !important;
    align-items: start !important;
    justify-items: stretch !important;
    text-align: left !important;
    gap: .45rem 2rem !important;
  }

  .footer-nav {
    grid-area: nav !important;
    justify-content: flex-start !important;
    margin: 0 0 .35rem 0 !important;
  }

  .footer-logo {
    grid-area: logo !important;
    justify-items: start !important;
    align-content: start !important;
    margin-top: 0 !important;
  }

  .footer-logo .site-logo {
    object-position: left center !important;
    width: min(285px, 42vw) !important;
  }

  .footer-logo small {
    text-align: left !important;
    padding-left: .2rem !important;
  }

  .footer-social {
    grid-area: social !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .footer-social div {
    justify-content: flex-end !important;
    margin: .55rem 0 0 !important;
  }
}

@media (max-width: 760px) {
  .footer-grid,
  .footer-nav,
  .footer-logo,
  .footer-social,
  .footer-social div,
  .footer-logo small {
    text-align: center !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-grid {
    display: grid !important;
    gap: .55rem !important;
  }

  .footer-nav {
    width: 100%;
    margin-bottom: .1rem !important;
  }

  .footer-logo .site-logo {
    object-position: center !important;
    width: min(255px, 75vw) !important;
  }

  .footer-logo small {
    padding-left: 0 !important;
  }

  .footer-social {
    margin-top: .35rem !important;
  }
}

/* --- 2026-06-09 final polish pass --- */

/* 1) Make the DENTURES Learn More link noticeably larger */
.service-card a {
  font-size: .78rem !important;
  line-height: 1 !important;
  padding: .55rem .35rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

/* 2 & 7) Contact info vertical alignment and mobile centering shift */
@media (min-width: 761px) {
  .contact-grid {
    align-items: center !important;
  }

  .office-info {
    align-self: center !important;
  }
}

@media (max-width: 760px) {
  .office-info {
    width: fit-content !important;
    max-width: calc(100% - 1rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(.45rem);
  }
}

/* 3) Reduce footer top whitespace */
.site-footer {
  padding-top: .95rem !important;
}

/* 4 & 8) Tighten logo/copyright spacing */
.footer-logo {
  gap: 0 !important;
}

.footer-logo .site-logo {
  margin-bottom: 0 !important;
}

.footer-logo small {
  margin-top: -.35rem !important;
  line-height: 1 !important;
  display: block !important;
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: .85rem !important;
  }

  .footer-grid {
    gap: .28rem !important;
  }

  .footer-logo {
    gap: 0 !important;
  }

  .footer-logo small {
    margin-top: -.55rem !important;
  }
}

/* 5) Service titles: use real spaces on one-card mobile, but keep controlled two-line layout on wider screens */
.service-card h3 span {
  display: inline;
}

@media (min-width: 761px) {
  .service-card h3 {
    flex-wrap: wrap !important;
    gap: .15em .25em !important;
    white-space: normal !important;
  }

  .service-card h3 span {
    display: inline-block;
  }
}

@media (max-width: 760px) {
  .service-card h3 {
    flex-wrap: nowrap !important;
    gap: .22em !important;
    white-space: nowrap !important;
  }

  .service-card h3 span {
    display: inline !important;
  }
}

/* 6) Soften the testimonial blue rectangle corners */
.testimonial-carousel {
  border-radius: 12px !important;
  overflow: hidden;
}

/* --- 2026-06-09 service/footer/contact tightening pass --- */

/* 1 & 4) OUR SERVICES carousel arrows + service-title leading fixes */
.service-frame {
  padding-inline: 3.1rem !important;
  overflow: visible !important;
}

.service-carousel {
  gap: clamp(.95rem, 1.6vw, 1.35rem) !important;
  align-items: stretch !important;
  padding-bottom: .65rem !important;
}

.carousel-arrow,
.service-arrow {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-shadow: none !important;
  color: var(--white) !important;
  width: 1.8rem !important;
  height: 1.8rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 2.45rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  translate: 0 -50% !important;
}

.carousel-arrow:hover,
.service-arrow:hover {
  transform: none !important;
  opacity: .85;
}

.service-prev { left: .25rem !important; }
.service-next { right: .25rem !important; }

.service-card h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: .92 !important;
  gap: .16em .24em !important;
  overflow: visible !important;
}

.service-card h3 span {
  line-height: .92 !important;
}

@media (min-width: 761px) {
  .service-carousel .service-card {
    flex-basis: calc((100% - (clamp(.95rem, 1.6vw, 1.35rem) * 4)) / 5) !important;
  }

  .service-card h3 {
    font-size: clamp(.95rem, 1.25vw, 1.18rem) !important;
    min-height: 82px !important;
    padding: .62rem .4rem .55rem !important;
  }
}

@media (max-width: 760px) {
  .service-frame {
    padding-inline: 2.15rem !important;
  }

  .service-card h3 {
    font-size: clamp(1.05rem, 4.8vw, 1.35rem) !important;
    line-height: .88 !important;
    min-height: 58px !important;
    padding: .35rem .35rem .25rem !important;
    gap: .2em !important;
  }
}

/* 2) HOME should always return the user to the top of this index page */
.main-nav > a[href="#top"],
.footer-nav a[href="#top"] {
  cursor: pointer;
}

/* 3) Footer: remove most of the space between nav and logo */
@media (min-width: 761px) {
  .site-footer {
    padding-top: .55rem !important;
  }

  .footer-grid {
    row-gap: 0 !important;
  }

  .footer-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
  }

  .footer-logo {
    margin-top: -1.05rem !important;
  }

  .footer-logo .site-logo {
    margin-top: 0 !important;
  }

  .footer-logo small {
    margin-top: -.45rem !important;
  }
}

/* 5) Tighten Meet Dr. Silpa stacking space when the image drops below text */
@media (max-width: 760px) {
  .doctor.section-pad {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .doctor-grid {
    gap: 1.35rem !important;
  }

  .doctor-copy p:last-child {
    margin-bottom: 0 !important;
  }

  .doctor-image {
    margin-top: 0 !important;
  }
}

/* 6) Contact background image and darker overlay */
.contact-band {
  background-image: url('../images/contact-bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
}

.contact-overlay {
  background: rgba(102, 92, 88, .96) !important;
}

.service-card h3{line-height:1.05!important;}
@media (max-width:1024px){.service-card h3{line-height:1!important;}}
.site-logo{max-width:260px!important;height:auto;}
.footer-logo .site-logo{max-width:220px!important;}

/* --- Final requested fixes: services leading, testimonial spacing, footer alignment --- */

/* 1) OUR SERVICES: very tight leading on names that wrap to two lines */
.service-card h3,
.service-carousel .service-card h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: visible !important;
  min-height: 72px !important;
}

@media (min-width: 761px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    line-height: .68 !important;
    font-size: clamp(.9rem, 1.12vw, 1.08rem) !important;
    padding: .55rem .35rem .5rem !important;
    white-space: normal !important;
  }

  .service-card h3 span,
  .service-carousel .service-card h3 span {
    display: block !important;
    line-height: .68 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* One-service mobile view: keep the words on one line with real spaces */
@media (max-width: 760px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .28em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    min-height: 52px !important;
    padding: .35rem .45rem .25rem !important;
  }

  .service-card h3 span,
  .service-carousel .service-card h3 span {
    display: inline !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 2) TESTIMONIAL: give the text breathing room from the quote marks */
.testimonial-carousel {
  border-radius: 12px !important;
}

.testimonial-slide {
  text-align: left !important;
  padding: clamp(2.3rem, 4vw, 3.2rem) clamp(3.4rem, 7vw, 5rem) !important;
}

.testimonial-slide p {
  margin: 0 0 .65rem 0 !important;
  padding-left: .65rem !important;
  padding-right: .65rem !important;
}

.testimonial-slide cite {
  margin-left: .65rem !important;
}

.testimonial-slide .quote {
  left: clamp(1.45rem, 3vw, 2.5rem) !important;
  top: clamp(1.25rem, 2.4vw, 2rem) !important;
}

.testimonial-slide .quote.end {
  right: clamp(1.45rem, 3vw, 2.5rem) !important;
  bottom: clamp(1.25rem, 2.4vw, 2rem) !important;
  left: auto !important;
  top: auto !important;
}

/* 3 & 4) FOOTER: desktop/tablet alignment and more controlled spacing */
@media (min-width: 761px) {
  .site-footer {
    padding-top: 1.45rem !important;
    padding-bottom: 1.8rem !important;
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    column-gap: 2rem !important;
  }

  .footer-grid > div:first-child {
    justify-self: start !important;
    text-align: left !important;
  }

  .footer-nav {
    margin-top: .55rem !important;
    margin-bottom: .75rem !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .footer-logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: .15rem !important;
    display: inline-grid !important;
    justify-items: start !important;
  }

  .footer-logo .site-logo {
    max-width: 220px !important;
    width: 220px !important;
    margin: 0 0 .28rem 0 !important;
  }

  .footer-logo small {
    margin-top: 0 !important;
    line-height: 1.15 !important;
    position: static !important;
  }

  .footer-social {
    justify-self: end !important;
    text-align: right !important;
    margin-top: .55rem !important;
  }

  .footer-social div {
    justify-content: flex-end !important;
  }
}

/* Mobile footer stays fully centered */
@media (max-width: 760px) {
  .site-footer {
    padding-top: 1rem !important;
    padding-bottom: 1.4rem !important;
  }

  .footer-grid,
  .footer-grid > div,
  .footer-logo,
  .footer-social {
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
  }

  .footer-nav {
    justify-content: center !important;
    margin-bottom: .65rem !important;
  }

  .footer-logo .site-logo {
    margin-bottom: .22rem !important;
  }

  .footer-logo small {
    margin-top: 0 !important;
    line-height: 1.15 !important;
  }

  .footer-social div {
    justify-content: center !important;
  }
}

.service-card h3{
 line-height:1.15 !important;
 flex:1;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding:0 8px;
}
.service-card{display:flex;flex-direction:column;}
.testimonial-carousel,.testimonial-slide{
 padding:24px 30px !important;
}


/* --- 2026-06-09 service card final refinements --- */
/* Add back a comfortable amount of leading between two-line service titles */
.service-carousel .service-card h3,
.service-card h3 {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: .96 !important;
  gap: .09rem !important;
  padding: .35rem .55rem !important;
  min-height: 96px !important;
}

.service-carousel .service-card h3 span,
.service-card h3 span {
  display: block !important;
  line-height: .96 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep single-word Dentures perfectly centered in the white title area */
.service-card-dentures h3 {
  min-height: 96px !important;
  line-height: 1 !important;
}

/* On multi-card screens only, overlay the Learn More bar at the bottom of the Dentures image */
@media (min-width: 761px) {
  .service-card-dentures {
    position: relative !important;
  }

  .service-card-dentures a {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(clamp(130px, 14vw, 165px) - 34px) !important;
    z-index: 3 !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    padding: .55rem .35rem !important;
  }
}

/* On one-card mobile screens, keep service names on one line and put Learn More back below */
@media (max-width: 760px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .32em !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
    min-height: 64px !important;
    padding: .35rem .6rem !important;
  }

  .service-carousel .service-card h3 span,
  .service-card h3 span {
    display: inline !important;
    line-height: 1.05 !important;
  }

  .service-card-dentures a {
    position: static !important;
    min-height: 38px !important;
    font-size: .78rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* --- 2026-06-09 requested tweaks: Learn More, testimonial spacing, contact bg --- */

/* 1) Dentures Learn More overlay smaller and shorter on multi-card screens */
@media (min-width: 761px) {
  .service-card-dentures a {
    top: calc(clamp(130px, 14vw, 165px) - 24px) !important;
    min-height: 24px !important;
    height: 24px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    padding: .25rem .3rem !important;
  }
}

/* 2) Prevent quote/text collisions and add more white page space around the blue testimonial card */
.diseases .testimonial-carousel {
  width: min(calc(100% - clamp(2.4rem, 8vw, 7rem)), 860px) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

.testimonial-carousel .testimonial-slide {
  box-sizing: border-box !important;
  padding: clamp(2.4rem, 4.5vw, 3.6rem) clamp(3rem, 7vw, 5.6rem) !important;
  min-height: clamp(150px, 17vw, 205px) !important;
}

.testimonial-slide p {
  margin: 0 0 .65rem 0 !important;
  padding-left: 1.15rem !important;
  padding-right: 1.15rem !important;
  text-align: left !important;
}

.testimonial-slide cite {
  margin-left: 1.15rem !important;
  text-align: left !important;
}

.testimonial-slide .quote {
  left: clamp(1.3rem, 3.4vw, 2.6rem) !important;
  top: clamp(1.15rem, 3vw, 2.3rem) !important;
}

.testimonial-slide .quote.end {
  right: clamp(1.3rem, 3.4vw, 2.6rem) !important;
  bottom: clamp(1.15rem, 3vw, 2.3rem) !important;
}

@media (max-width: 760px) {
  .diseases .testimonial-carousel {
    width: min(calc(100% - 2.4rem), 100%) !important;
  }

  .testimonial-carousel .testimonial-slide {
    padding: 2.25rem 2.6rem !important;
    min-height: 185px !important;
  }

  .testimonial-slide p {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .testimonial-slide cite {
    margin-left: .75rem !important;
  }
}

/* 3) Contact background image with darker branded overlay */
.contact-band {
  background-image: url('../images/contact-bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
}

.contact-overlay {
  background: rgba(102, 92, 88, .96) !important;
}


/* --- Dentures detail page --- */
.dentures-page .site-header,
.dentures-page .site-footer {
  flex-shrink: 0;
}
.dentures-hero {
  background: var(--blue);
  color: var(--white);
  padding: clamp(3.8rem, 7vw, 6rem) 0;
  text-align: center;
}
.dentures-hero h1 {
  margin: 0 0 1rem;
  color: var(--white);
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: .95;
  text-transform: uppercase;
  font-weight: 900;
}
.dentures-hero p {
  margin: 0 auto 1.5rem;
  max-width: 760px;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.45;
}
.dentures-content {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}
.dentures-content .content-wrap {
  max-width: 930px;
  margin-inline: auto;
}
.dentures-content h2 {
  margin-top: 2.8rem;
  margin-bottom: 1rem;
  color: var(--dark-grey);
  line-height: 1.05;
}
.dentures-content h3 {
  margin-top: 2rem;
  margin-bottom: .7rem;
  color: var(--dark-grey);
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.1;
  font-weight: 900;
}
.dentures-content p,
.dentures-content li {
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height: 1.55;
}
.dentures-content ul {
  padding-left: 1.25rem;
}
.dentures-callout {
  margin: 2.5rem 0;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-left: 6px solid var(--blue);
  background: rgba(0,141,210,.08);
  border-radius: var(--radius);
}
.dentures-cta {
  margin-top: 3rem;
  text-align: center;
}
.dentures-page .footer-nav a[href="dentures.html"] {
  color: var(--blue);
}
@media (max-width: 980px) {
  .dentures-page .main-nav a[href="#top"],
  .dentures-page .dropdown-button,
  .dentures-page .main-nav a[href="#contact-us"] {
    /* Preserve existing responsive menu styling; links are rewritten in HTML. */
  }
}


/* --- Dentures page organization refresh --- */
.dentures-hero-modern {
  text-align: left;
  background: linear-gradient(135deg, var(--blue), #0079b4);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.dentures-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.dentures-hero-copy h1 {
  margin-bottom: .75rem;
}
.hero-subhead {
  max-width: 640px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.eyebrow {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .78rem !important;
  margin: 0 0 .75rem !important;
}
.eyebrow.blue { color: var(--blue); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.4rem;
}
.button-light {
  background: var(--white);
  color: var(--blue);
  border: 2px solid var(--white);
}
.dentures-hero-card {
  background: rgba(255,255,255,.18);
  padding: .65rem;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.dentures-hero-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 14px;
}
.dentures-intro {
  padding-top: clamp(3rem, 6vw, 5rem);
}
.dentures-feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.dentures-feature-row article,
.process-grid article,
.type-cards article,
.tips-card,
.replacement-box,
.dentures-note {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.dentures-feature-row article {
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  border-top: 5px solid var(--blue);
}
.dentures-feature-row strong {
  display: block;
  text-transform: uppercase;
  color: var(--dark-grey);
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: .5rem;
}
.dentures-feature-row p {
  margin: 0;
  line-height: 1.45;
}
.dentures-two-col {
  display: grid;
  grid-template-columns: minmax(230px, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.dentures-two-col.align-start {
  align-items: start;
}
.dentures-two-col h2,
.dentures-section h2 {
  margin-top: 0;
}
.dentures-two-col p,
.dentures-section p,
.dentures-section li {
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  line-height: 1.6;
}
.dentures-section {
  padding: clamp(3.4rem, 6vw, 5.4rem) 0;
}
.dentures-section.muted {
  background: rgba(175, 172, 170, .12);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.35rem);
}
.process-grid article {
  padding: clamp(1.2rem, 2vw, 1.6rem);
}
.process-grid span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 900;
  margin-bottom: 1rem;
}
.process-grid h3,
.type-cards h3,
.tips-card h3,
.replacement-box h3,
.dentures-note h3 {
  margin: 0 0 .7rem;
  text-transform: uppercase;
  color: var(--dark-grey);
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 900;
}
.dentures-note {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 6px solid var(--dark-grey);
}
.type-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem);
}
.type-cards article,
.tips-card,
.replacement-box {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.dentures-warning {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow);
  border-left: 7px solid var(--blue);
}
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.checklist-grid article {
  position: relative;
  padding: 1.2rem 1.2rem 1.2rem 3rem;
  background: rgba(0,141,210,.08);
  border-radius: 14px;
  line-height: 1.45;
}
.checklist-grid article::before {
  content: "✓";
  position: absolute;
  left: 1.15rem;
  top: 1rem;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--white);
  border-radius: 50%;
  font-weight: 900;
}
.dentures-callout {
  text-align: center;
  border-left: 0 !important;
  border-top: 6px solid var(--blue);
  border-radius: 18px !important;
  max-width: 850px;
  margin: clamp(3rem, 6vw, 5rem) auto 0 !important;
}
.dentures-callout .button {
  margin-top: 1rem;
}
@media (max-width: 980px) {
  .dentures-hero-grid,
  .dentures-two-col,
  .dentures-warning {
    grid-template-columns: 1fr;
  }
  .process-grid,
  .checklist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dentures-hero-modern {
    text-align: center;
  }
  .hero-subhead {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-actions {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .dentures-feature-row,
  .type-cards,
  .process-grid,
  .checklist-grid {
    grid-template-columns: 1fr;
  }
  .dentures-hero-card {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* --- Dentures page refresh: full-bleed hero, stronger contrast, tighter sections --- */
.dentures-hero-fullbleed {
  position: relative;
  min-height: clamp(360px, 42vw, 560px);
  overflow: hidden;
  background: var(--blue);
  display: grid;
  align-items: end;
  padding: 0;
}
.dentures-hero-fullbleed .dentures-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.dentures-hero-fullbleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,141,210,.16), rgba(0,141,210,.04) 48%, rgba(255,255,255,0));
}
.dentures-hero-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: linear-gradient(0deg, rgba(102,92,88,.72), rgba(102,92,88,0));
  color: var(--white);
}
.dentures-hero-panel h1,
.dentures-hero-panel .eyebrow,
.dentures-hero-panel .hero-subhead { color: var(--white) !important; }
.dentures-hero-panel h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .9;
  margin: 0 0 .8rem;
}
.dentures-hero-panel .hero-subhead {
  max-width: 560px !important;
  font-weight: 600;
  text-shadow: 0 2px 16px rgba(0,0,0,.2);
}
.dentures-intro {
  padding-top: clamp(2rem, 3vw, 3rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}
.dentures-two-col.intro-tight {
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.2rem);
}
.feature-row-compact {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 0 !important;
}
.dentures-feature-row article {
  background: rgba(175,172,170,.12) !important;
  border-top: 0 !important;
  border-left: 5px solid var(--blue);
}
.dentures-section.muted,
.faq-zone {
  background: var(--dark-grey) !important;
  color: var(--white);
}
.dentures-section.muted h2,
.dentures-section.muted h3,
.dentures-section.muted p,
.dentures-section.muted li,
.faq-zone h2,
.faq-zone h3,
.faq-zone p,
.faq-zone li { color: var(--white); }
.dentures-section.muted .section-heading h2,
.dentures-section.muted .section-heading p { color: var(--white); }
.process-grid article,
.type-cards article,
.tips-card,
.replacement-box,
.dentures-warning,
.checklist-grid article {
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.process-grid article {
  background: rgba(255,255,255,.95) !important;
  color: var(--dark-grey);
}
.process-grid article h3,
.process-grid article p { color: var(--dark-grey) !important; }
.dentures-note {
  background: rgba(0,141,210,.20) !important;
  border-left: 0 !important;
  border-radius: 16px;
  color: var(--white);
}
.dentures-note h3,
.dentures-note li { color: var(--white) !important; }
.dentures-section:not(.muted):not(.faq-zone):not(.eating-section) {
  background: var(--white);
}
.type-cards article:nth-child(1) { border-top: 6px solid var(--blue); }
.type-cards article:nth-child(2) { border-top: 6px solid var(--dark-grey); }
.faq-zone .eyebrow.center {
  text-align: center;
  color: var(--white) !important;
  margin-bottom: 1.1rem !important;
}
.faq-zone .dentures-warning,
.faq-zone-secondary .replacement-box {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22);
  border-left: 7px solid var(--blue);
  color: var(--white);
}
.faq-zone .dentures-warning h2,
.faq-zone .dentures-warning p,
.faq-zone-secondary .replacement-box h3,
.faq-zone-secondary .replacement-box li { color: var(--white) !important; }
.eating-section {
  background: linear-gradient(135deg, rgba(175,172,170,.14), rgba(0,141,210,.08));
}
.eating-section .tips-card {
  border-left: 6px solid var(--blue);
}
.dentures-callout {
  background: var(--dark-grey) !important;
  color: var(--white);
  padding: clamp(1.8rem, 4vw, 3rem);
}
.dentures-callout h2,
.dentures-callout p { color: var(--white) !important; }
.checklist-grid article {
  background: rgba(0,141,210,.10) !important;
}
@media (max-width: 760px) {
  .dentures-hero-fullbleed { min-height: 420px; }
  .dentures-hero-fullbleed .dentures-hero-image { object-position: 36% center; }
  .dentures-hero-panel { padding: 2rem 0; }
}


/* --- Dentures page requested refinements --- */
/* 1) Move hero text to right half, left-aligned, with safe padding */
.dentures-hero-panel {
  display: flex;
  justify-content: flex-end;
}
.dentures-hero-panel .container {
  width: min(50%, 620px) !important;
  margin-left: auto !important;
  margin-right: max(2rem, calc((100vw - var(--max-width)) / 2)) !important;
  padding-left: clamp(1.25rem, 3vw, 3rem) !important;
  padding-right: clamp(1.25rem, 3vw, 3rem) !important;
  text-align: left !important;
}
.dentures-hero-panel .hero-subhead {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) Tighten the white space around the intro/What Are Dentures area */
.dentures-intro {
  padding-top: clamp(1.2rem, 2vw, 1.8rem) !important;
  padding-bottom: clamp(1.6rem, 2.6vw, 2.4rem) !important;
}
.dentures-two-col.intro-tight {
  gap: clamp(.8rem, 2vw, 1.6rem) !important;
  margin-bottom: 0 !important;
}
.dentures-two-col.intro-tight h2 {
  margin-bottom: .15rem !important;
}
.dentures-two-col.intro-tight p {
  margin-top: 0 !important;
  margin-bottom: .45rem !important;
}
.feature-row-compact {
  margin-top: clamp(.45rem, 1.1vw, .85rem) !important;
}

/* 3) Make Things To Keep In Mind full brand blue */
.dentures-note {
  background: var(--blue) !important;
  color: var(--white) !important;
}

/* 4-7) FAQ sections: cleaner white cards/dark text and much tighter vertical spacing */
.faq-zone,
.faq-zone-secondary {
  background: var(--white) !important;
  color: var(--dark-grey) !important;
  padding-top: clamp(2rem, 3.2vw, 3rem) !important;
  padding-bottom: clamp(1.5rem, 2.6vw, 2.2rem) !important;
}
.faq-zone .eyebrow.center {
  color: var(--blue) !important;
}
.faq-zone h2,
.faq-zone h3,
.faq-zone p,
.faq-zone li,
.faq-zone-secondary h2,
.faq-zone-secondary h3,
.faq-zone-secondary p,
.faq-zone-secondary li {
  color: var(--dark-grey) !important;
}
.faq-zone .dentures-warning,
.faq-zone-secondary .replacement-box {
  background: var(--white) !important;
  border: 1px solid rgba(102,92,88,.12) !important;
  border-left: 7px solid var(--blue) !important;
  color: var(--dark-grey) !important;
}
.dentures-warning {
  gap: clamp(1rem, 3vw, 2rem) !important;
  padding: clamp(1.2rem, 2.2vw, 1.8rem) !important;
}
.dentures-warning p,
.faq-zone-secondary p,
.faq-zone-secondary li {
  margin-top: 0 !important;
  margin-bottom: .55rem !important;
}
.faq-zone-secondary .dentures-two-col,
.eating-section .dentures-two-col {
  gap: clamp(1rem, 3vw, 2.2rem) !important;
}

/* 8) Tighten Eating With Dentures section */
.eating-section {
  padding-top: clamp(2rem, 3.2vw, 3rem) !important;
  padding-bottom: clamp(2rem, 3.2vw, 3rem) !important;
}
.eating-section .dentures-two-col p {
  margin-bottom: .4rem !important;
}
.dentures-callout {
  margin-top: clamp(1.1rem, 2.2vw, 1.7rem) !important;
}

/* 9-10) Final CTA headline three lines and bigger button copy */
.dentures-callout h2 {
  line-height: .96 !important;
}
.dentures-callout .button {
  font-size: 1rem !important;
  padding: .9rem 1.8rem !important;
}

@media (max-width: 980px) {
  .dentures-hero-panel .container {
    width: min(90%, var(--max-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}
@media (max-width: 760px) {
  .dentures-hero-panel .container {
    width: min(calc(100% - 1.4rem), var(--max-width)) !important;
  }
  .dentures-callout h2 {
    font-size: clamp(1.8rem, 7vw, 2.35rem) !important;
  }
}


/* --- 2026-06-10 fixes: disease icons, dentures hero placement, FAQ text visibility, contact background --- */
.disease-grid img.disease-image {
  width: clamp(74px, 8vw, 104px) !important;
  height: clamp(74px, 8vw, 104px) !important;
  min-height: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  margin: 0 auto .85rem !important;
  display: block !important;
  border-radius: 0 !important;
}

.contact-band {
  background-image: url('../images/contact-bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.contact-overlay {
  background: rgba(102, 92, 88, .85) !important;
}

/* Keep the dentures hero copy safely to the right of the patient's face */
.dentures-hero-panel {
  justify-content: flex-end !important;
  align-items: flex-end !important;
  background: linear-gradient(0deg, rgba(102,92,88,.64), rgba(102,92,88,.08)) !important;
}
.dentures-hero-panel .container {
  width: min(44%, 620px) !important;
  margin-left: auto !important;
  margin-right: clamp(1.25rem, 7vw, 9rem) !important;
  padding-left: clamp(1rem, 2vw, 2.2rem) !important;
  padding-right: clamp(1rem, 2vw, 2.2rem) !important;
  text-align: left !important;
}
.dentures-hero-panel .eyebrow,
.dentures-hero-panel h1,
.dentures-hero-panel .hero-subhead {
  text-align: left !important;
  max-width: 100% !important;
}

/* Make FAQ/card copy visible and remove accidental oversized empty-looking boxes */
.faq-zone,
.faq-zone-secondary {
  background: var(--white) !important;
  color: var(--dark-grey) !important;
}
.faq-zone .dentures-warning,
.faq-zone-secondary .replacement-box {
  background: var(--white) !important;
  color: var(--dark-grey) !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.faq-zone .dentures-warning *,
.faq-zone-secondary .replacement-box *,
.faq-zone .dentures-warning h2,
.faq-zone .dentures-warning p,
.faq-zone-secondary .replacement-box h3,
.faq-zone-secondary .replacement-box p,
.faq-zone-secondary .replacement-box li {
  color: var(--dark-grey) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.faq-zone .dentures-warning p,
.faq-zone-secondary .replacement-box li {
  line-height: 1.45 !important;
}

@media (max-width: 980px) {
  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 30% center !important;
  }
  .dentures-hero-panel .container {
    width: min(54%, 560px) !important;
    margin-left: auto !important;
    margin-right: clamp(.9rem, 4vw, 2.5rem) !important;
  }
  .dentures-hero-panel h1 {
    font-size: clamp(2.55rem, 9vw, 4.6rem) !important;
  }
  .dentures-hero-panel .hero-subhead {
    font-size: clamp(.95rem, 2.7vw, 1.25rem) !important;
  }
}
@media (max-width: 640px) {
  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 24% center !important;
  }
  .dentures-hero-panel .container {
    width: min(58%, 360px) !important;
    margin-right: .75rem !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .dentures-hero-panel h1 {
    font-size: clamp(2.2rem, 13vw, 3.2rem) !important;
  }
  .dentures-hero-panel .eyebrow {
    font-size: .68rem !important;
    line-height: 1.1 !important;
  }
  .dentures-hero-panel .hero-subhead {
    font-size: .9rem !important;
    line-height: 1.3 !important;
  }
}


/* --- 2026-06-10 Jennifer requested refinements --- */

/* 1) Remove the blue hover/focus square/line from Dental Diseases images */
.disease-grid article,
.disease-grid article:hover,
.disease-grid article:focus,
.disease-grid article:focus-within {
  outline: none !important;
}
.disease-grid article:hover .disease-image,
.disease-grid article:focus .disease-image,
.disease-grid article:focus-within .disease-image,
.disease-grid img.disease-image:hover,
.disease-grid img.disease-image:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
}

/* 2) Darken the Contact Us image overlay */
.contact-overlay {
  background: rgba(102, 92, 88, .97) !important;
}

/* 3) Keep the soft grey background only behind the "How long do dentures last?"
   and "Eating with dentures" sections on dentures.html */
.dentures-section.faq-zone,
.dentures-section:not(.faq-zone-secondary):not(.eating-section) {
  background: var(--white) !important;
}
.dentures-section.faq-zone-secondary,
.dentures-section.eating-section {
  background: rgba(175, 172, 170, .14) !important;
}
.dentures-section.faq-zone-secondary .container,
.dentures-section.eating-section .container {
  position: relative;
  z-index: 1;
}

/* Keep all card text readable in those two sections */
.faq-zone-secondary .replacement-box,
.eating-section .tips-card {
  background: var(--white) !important;
  color: var(--dark-grey) !important;
}
.faq-zone-secondary .replacement-box *,
.eating-section .tips-card * {
  color: var(--dark-grey) !important;
}


/* --- 2026-06-10 final requested fixes --- */
/* Contact area: keep image visible, but still dark enough for white text */
.contact-band {
  background-image: url('../images/contact-bg.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.contact-overlay {
  background: rgba(102, 92, 88, .82) !important;
}

/* Same-Day Dentures: restore a strong headline block with white text */
.dentures-section.muted {
  background: var(--white) !important;
  color: var(--dark-grey) !important;
}
.dentures-section.muted .section-heading {
  background: var(--blue) !important;
  color: var(--white) !important;
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem) !important;
}
.dentures-section.muted .section-heading h2,
.dentures-section.muted .section-heading p {
  color: var(--white) !important;
}
.dentures-section.muted .section-heading h2 {
  margin-bottom: .45rem !important;
}

/* Remove the pale grey field behind the final CTA only */
.dentures-callout-section {
  background: var(--white) !important;
  padding-top: clamp(1.6rem, 3vw, 2.6rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
.dentures-callout-section .dentures-callout {
  margin-top: 0 !important;
}

/* Keep the grey only behind the body portions of the requested sections */
.dentures-section.faq-zone-secondary,
.dentures-section.eating-section {
  background: rgba(175, 172, 170, .14) !important;
}


/* --- Final responsive text safety fixes: services + dentures hero --- */
/* Keep OUR SERVICES labels from clipping on narrow/awkward carousel widths */
.service-card h3 {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: .18rem !important;
  padding-right: .18rem !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em !important;
  font-size: clamp(.70rem, 1.08vw, .98rem) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
@media (min-width: 761px) and (max-width: 1180px) {
  .service-card h3 {
    font-size: clamp(.62rem, .95vw, .82rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.075em !important;
  }
}
@media (max-width: 760px) {
  .service-card h3 {
    font-size: clamp(.82rem, 4.5vw, 1.1rem) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }
}

/* Dentures page hero: keep text in the blue/right-side safe area and scale down before it hits the edge */
.dentures-hero-fullbleed .dentures-hero-image {
  object-position: 22% center !important;
}
.dentures-hero-panel {
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
.dentures-hero-panel .container {
  width: min(42vw, 610px) !important;
  max-width: 610px !important;
  margin-left: auto !important;
  margin-right: clamp(1rem, 5vw, 7rem) !important;
  padding-left: clamp(.9rem, 1.8vw, 1.75rem) !important;
  padding-right: clamp(.9rem, 1.8vw, 1.75rem) !important;
}
.dentures-hero-panel h1 {
  font-size: clamp(2.5rem, 6.2vw, 5.6rem) !important;
  line-height: .88 !important;
  max-width: 100% !important;
}
.dentures-hero-panel .eyebrow {
  font-size: clamp(.58rem, 1.35vw, .86rem) !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
}
.dentures-hero-panel .hero-subhead {
  font-size: clamp(.82rem, 1.85vw, 1.25rem) !important;
  line-height: 1.28 !important;
  max-width: 100% !important;
}

@media (max-width: 980px) {
  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 22% center !important;
  }
  .dentures-hero-panel .container {
    width: min(50vw, 440px) !important;
    margin-left: auto !important;
    margin-right: clamp(.45rem, 2.5vw, 1.5rem) !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .dentures-hero-panel h1 {
    font-size: clamp(2rem, 8.5vw, 3.7rem) !important;
    line-height: .86 !important;
  }
  .dentures-hero-panel .hero-subhead {
    font-size: clamp(.76rem, 2.2vw, 1rem) !important;
    line-height: 1.22 !important;
  }
  .dentures-hero-panel .eyebrow {
    font-size: clamp(.52rem, 1.7vw, .72rem) !important;
  }
}

@media (max-width: 640px) {
  .dentures-hero-fullbleed {
    min-height: 420px !important;
  }
  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 20% center !important;
  }
  .dentures-hero-panel .container {
    width: min(56vw, 300px) !important;
    margin-right: .35rem !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
  .dentures-hero-panel h1 {
    font-size: clamp(1.75rem, 10.5vw, 2.85rem) !important;
    line-height: .86 !important;
    letter-spacing: -.055em !important;
  }
  .dentures-hero-panel .hero-subhead {
    font-size: clamp(.68rem, 3.1vw, .88rem) !important;
    line-height: 1.2 !important;
  }
  .dentures-hero-panel .eyebrow {
    font-size: clamp(.46rem, 2.2vw, .62rem) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 430px) {
  .dentures-hero-panel .container {
    width: min(58vw, 260px) !important;
    margin-right: .25rem !important;
  }
  .dentures-hero-panel h1 {
    font-size: clamp(1.55rem, 10vw, 2.35rem) !important;
  }
  .dentures-hero-panel .hero-subhead {
    font-size: .66rem !important;
  }
  .dentures-hero-panel .eyebrow {
    font-size: .43rem !important;
  }
}


/* --- Final mobile dentures hero text positioning fix --- */
/* Small phone screens only: move the white text up into the open blue area on the right */
@media (max-width: 520px) {
  .dentures-hero-fullbleed {
    min-height: 390px !important;
    height: 390px !important;
    overflow: hidden !important;
  }

  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 18% center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .dentures-hero-panel {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 4.1rem !important;
    padding-bottom: 0 !important;
  }

  .dentures-hero-panel .container {
    width: 48vw !important;
    max-width: 210px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: .35rem !important;
    padding-left: .35rem !important;
    padding-right: .35rem !important;
    text-align: left !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: clamp(.40rem, 1.95vw, .53rem) !important;
    line-height: 1.05 !important;
    margin-bottom: .28rem !important;
    letter-spacing: .02em !important;
  }

  .dentures-hero-panel h1 {
    font-size: clamp(1.65rem, 9.4vw, 2.25rem) !important;
    line-height: .86 !important;
    margin-bottom: .42rem !important;
    letter-spacing: -.055em !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: clamp(.58rem, 2.95vw, .72rem) !important;
    line-height: 1.17 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  .dentures-hero-panel {
    padding-top: 3.6rem !important;
  }

  .dentures-hero-panel .container {
    width: 49vw !important;
    max-width: 190px !important;
    margin-right: .2rem !important;
  }

  .dentures-hero-panel h1 {
    font-size: clamp(1.5rem, 9vw, 2rem) !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: .56rem !important;
    line-height: 1.15 !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: .38rem !important;
  }
}


/* --- Final requested Dentures mobile hero placement --- */
/* Smallest phones only: keep the Dentures hero text up in the blue open area,
   to the right of the face, with wrapping allowed so it does not run off-screen. */
@media (max-width: 520px) {
  .dentures-hero-fullbleed {
    min-height: 400px !important;
    height: 400px !important;
    overflow: hidden !important;
  }

  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 16% center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .dentures-hero-panel {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 4.35rem !important;
    padding-bottom: 0 !important;
  }

  .dentures-hero-panel .container {
    width: 48vw !important;
    max-width: 205px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: .45rem !important;
    padding-left: .45rem !important;
    padding-right: .45rem !important;
    text-align: left !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: clamp(.40rem, 1.9vw, .52rem) !important;
    line-height: 1.06 !important;
    margin: 0 0 .25rem !important;
    letter-spacing: .02em !important;
    white-space: normal !important;
  }

  .dentures-hero-panel h1 {
    font-size: clamp(1.58rem, 8.9vw, 2.18rem) !important;
    line-height: .86 !important;
    margin: 0 0 .38rem !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: clamp(.56rem, 2.75vw, .70rem) !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  .dentures-hero-fullbleed {
    min-height: 375px !important;
    height: 375px !important;
  }

  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 14% center !important;
  }

  .dentures-hero-panel {
    padding-top: 3.85rem !important;
  }

  .dentures-hero-panel .container {
    width: 49vw !important;
    max-width: 188px !important;
    margin-right: .18rem !important;
    padding-left: .3rem !important;
    padding-right: .3rem !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: .36rem !important;
    line-height: 1.05 !important;
  }

  .dentures-hero-panel h1 {
    font-size: clamp(1.42rem, 8.6vw, 1.96rem) !important;
    line-height: .85 !important;
    margin-bottom: .32rem !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: .54rem !important;
    line-height: 1.13 !important;
  }
}

@media (max-width: 360px) {
  .dentures-hero-panel {
    padding-top: 3.55rem !important;
  }

  .dentures-hero-panel .container {
    width: 50vw !important;
    max-width: 170px !important;
    margin-right: .1rem !important;
  }

  .dentures-hero-panel h1 {
    font-size: 1.55rem !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: .50rem !important;
    line-height: 1.12 !important;
  }
}


/* --- Final tiny-mobile Dentures hero adjustment requested 2026-06-10 --- */
/* Move the entire white text block higher next to the man's head and enlarge it on the smallest screens. */
@media (max-width: 520px) {
  .dentures-hero-fullbleed {
    min-height: 390px !important;
    height: 390px !important;
    overflow: hidden !important;
  }

  .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 15% center !important;
  }

  .dentures-hero-panel {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 11.2rem !important;
    padding-bottom: 0 !important;
  }

  .dentures-hero-panel .container {
    width: 92vw !important;
    max-width: 92vw !important;
    margin-left: 1.2rem !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: .75rem !important;
    text-align: left !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: .62rem !important;
    line-height: 1.05 !important;
    margin: 0 0 .22rem !important;
    letter-spacing: .02em !important;
    white-space: normal !important;
  }

  .dentures-hero-panel h1 {
    font-size: 2.45rem !important;
    line-height: .86 !important;
    margin: 0 0 .38rem !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: .78rem !important;
    line-height: 1.13 !important;
    max-width: 12.75rem !important;
    margin: 0 !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  .dentures-hero-fullbleed {
    min-height: 370px !important;
    height: 370px !important;
  }

  .dentures-hero-panel {
    padding-top: 10.35rem !important;
  }

  .dentures-hero-panel .container {
    width: 92vw !important;
    max-width: 92vw !important;
    margin-left: .95rem !important;
    padding-right: .55rem !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: .58rem !important;
  }

  .dentures-hero-panel h1 {
    font-size: 2.2rem !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: .72rem !important;
    max-width: 12rem !important;
  }
}

@media (max-width: 360px) {
  .dentures-hero-panel {
    padding-top: 9.85rem !important;
  }

  .dentures-hero-panel .container {
    margin-left: .85rem !important;
  }

  .dentures-hero-panel .eyebrow {
    font-size: .52rem !important;
  }

  .dentures-hero-panel h1 {
    font-size: 2rem !important;
  }

  .dentures-hero-panel .hero-subhead {
    font-size: .66rem !important;
    max-width: 11rem !important;
  }
}

/* --- FINAL OVERRIDE: Dentures hero on small screens exactly like approved screenshot --- */
@media (max-width: 640px) {
  body.dentures-page .dentures-hero-fullbleed {
    position: relative !important;
    height: 430px !important;
    min-height: 430px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--blue) !important;
  }

  body.dentures-page .dentures-hero-fullbleed .dentures-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 28% center !important;
    display: block !important;
  }

  body.dentures-page .dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: linear-gradient(90deg, rgba(102,92,88,.30) 0%, rgba(102,92,88,.18) 42%, rgba(102,92,88,.14) 100%) !important;
  }

  body.dentures-page .dentures-hero-fullbleed .dentures-hero-panel > .container {
    position: absolute !important;
    left: 42.5% !important;
    top: 29% !important;
    width: 56% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 .7rem 0 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  body.dentures-page .dentures-hero-panel .eyebrow {
    display: block !important;
    color: #fff !important;
    font-size: clamp(.56rem, 2.4vw, .78rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 .32rem !important;
    letter-spacing: .02em !important;
    white-space: normal !important;
  }

  body.dentures-page .dentures-hero-panel h1 {
    display: block !important;
    color: #fff !important;
    font-size: clamp(2.25rem, 11.5vw, 4rem) !important;
    line-height: .86 !important;
    margin: 0 0 .55rem !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
  }

  body.dentures-page .dentures-hero-panel .hero-subhead {
    display: block !important;
    color: #fff !important;
    font-size: clamp(.78rem, 3.4vw, 1.08rem) !important;
    line-height: 1.12 !important;
    max-width: 19rem !important;
    margin: 0 !important;
    white-space: normal !important;
  }
}

@media (max-width: 480px) {
  body.dentures-page .dentures-hero-fullbleed {
    height: 390px !important;
    min-height: 390px !important;
  }
  body.dentures-page .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 27% center !important;
  }
  body.dentures-page .dentures-hero-fullbleed .dentures-hero-panel > .container {
    left: 41.5% !important;
    top: 30% !important;
    width: 58% !important;
    padding-right: .45rem !important;
  }
  body.dentures-page .dentures-hero-panel .eyebrow {
    font-size: .52rem !important;
    margin-bottom: .28rem !important;
  }
  body.dentures-page .dentures-hero-panel h1 {
    font-size: clamp(2.05rem, 11vw, 3.05rem) !important;
    margin-bottom: .42rem !important;
  }
  body.dentures-page .dentures-hero-panel .hero-subhead {
    font-size: clamp(.70rem, 3.25vw, .9rem) !important;
    max-width: 13rem !important;
  }
}

@media (max-width: 390px) {
  body.dentures-page .dentures-hero-fullbleed {
    height: 365px !important;
    min-height: 365px !important;
  }
  body.dentures-page .dentures-hero-fullbleed .dentures-hero-image {
    object-position: 25% center !important;
  }
  body.dentures-page .dentures-hero-fullbleed .dentures-hero-panel > .container {
    left: 40.5% !important;
    top: 30% !important;
    width: 59% !important;
    padding-right: .25rem !important;
  }
  body.dentures-page .dentures-hero-panel .eyebrow {
    font-size: .45rem !important;
  }
  body.dentures-page .dentures-hero-panel h1 {
    font-size: 1.9rem !important;
    margin-bottom: .32rem !important;
  }
  body.dentures-page .dentures-hero-panel .hero-subhead {
    font-size: .62rem !important;
    line-height: 1.1 !important;
    max-width: 11.2rem !important;
  }
}


/* Jennifer final mobile hero adjustment */
@media (max-width: 520px){
  .dentures-hero-panel .container{
    left: 48% !important;
    top: 31% !important;
    width: 46% !important;
    padding-right: .75rem !important;
  }
  .dentures-hero-panel h1{
    font-size: 1.65rem !important;
  }
  .dentures-hero-panel .hero-subhead{
    font-size: .58rem !important;
    max-width: 9rem !important;
  }
  .dentures-hero-panel .eyebrow{
    font-size: .40rem !important;
  }
}

@media (max-width: 390px){
  .dentures-hero-panel .container{
    left: 49% !important;
    width: 44% !important;
  }
  .dentures-hero-panel h1{
    font-size: 1.45rem !important;
  }
  .dentures-hero-panel .hero-subhead{
    font-size: .52rem !important;
    max-width: 8rem !important;
  }
}


/* EXTRA mobile hero correction */
@media (max-width: 520px){
  .dentures-hero-panel .container,
  .dentures-hero-content,
  .hero-content.dentures-hero-content{
      left: 58% !important;
      width: 36% !important;
      max-width: 36% !important;
      transform: none !important;
  }

  .dentures-hero-panel h1,
  .dentures-hero-content h1{
      font-size: 1.25rem !important;
      line-height: .95 !important;
  }

  .dentures-hero-panel .hero-subhead,
  .dentures-hero-content .hero-subhead{
      font-size: .42rem !important;
      line-height: 1.15 !important;
  }

  .dentures-hero-panel .eyebrow,
  .dentures-hero-content .eyebrow{
      font-size: .34rem !important;
      line-height: 1.1 !important;
  }
}


/* ==========================================================
   FINAL MATCH: Dentures mobile hero positioning
   This override is intentionally last and only affects small screens.
   ========================================================== */
@media (max-width: 640px) {
  .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    height: 430px !important;
    min-height: 430px !important;
    overflow: hidden !important;
    background: #008dd2 !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 28% center !important;
    z-index: 0 !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, rgba(102,92,88,.20) 0%, rgba(102,92,88,.16) 42%, rgba(102,92,88,.14) 100%) !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    position: absolute !important;
    left: 43% !important;
    top: 29% !important;
    width: 53% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 1rem 0 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    display: block !important;
    margin: 0 0 .36rem !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(.55rem, 2vw, .78rem) !important;
    line-height: 1.05 !important;
    letter-spacing: .035em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    display: block !important;
    margin: 0 0 .65rem !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(2.35rem, 11.5vw, 4.2rem) !important;
    line-height: .84 !important;
    letter-spacing: -.06em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(.78rem, 3.25vw, 1.02rem) !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    max-width: 19rem !important;
    white-space: normal !important;
  }
}

@media (max-width: 520px) {
  .dentures-hero.dentures-hero-fullbleed {
    height: 390px !important;
    min-height: 390px !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    object-position: 30% center !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    left: 45% !important;
    top: 30% !important;
    width: 52% !important;
    padding-right: .65rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: clamp(.44rem, 2.05vw, .58rem) !important;
    margin-bottom: .28rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(1.9rem, 9.8vw, 2.85rem) !important;
    line-height: .86 !important;
    margin-bottom: .44rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(.62rem, 3vw, .78rem) !important;
    line-height: 1.13 !important;
    max-width: 13rem !important;
  }
}

@media (max-width: 430px) {
  .dentures-hero.dentures-hero-fullbleed {
    height: 365px !important;
    min-height: 365px !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    object-position: 31% center !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    left: 47% !important;
    top: 30% !important;
    width: 50% !important;
    padding-right: .45rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .39rem !important;
    line-height: 1.05 !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 1.82rem !important;
    line-height: .86 !important;
    margin-bottom: .34rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .56rem !important;
    line-height: 1.12 !important;
    max-width: 9.5rem !important;
  }
}

@media (max-width: 360px) {
  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    left: 48% !important;
    width: 49% !important;
    padding-right: .25rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .34rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 1.55rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .49rem !important;
    max-width: 8.5rem !important;
  }
}


/* ==========================================================
   FINAL MOBILE DENTURES HERO SHIFT - move text off face
   ========================================================== */
@media (max-width: 640px) {
  .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    height: 430px !important;
    min-height: 430px !important;
    overflow: hidden !important;
    background: #008dd2 !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 28% center !important;
    z-index: 0 !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    position: absolute !important;
    left: 54% !important;
    top: 29% !important;
    width: 43% !important;
    max-width: 43% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 .8rem 0 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: clamp(.63rem, 2.35vw, .90rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 .35rem !important;
    color: #fff !important;
    white-space: normal !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(2.7rem, 13.2vw, 4.8rem) !important;
    line-height: .84 !important;
    margin: 0 0 .6rem !important;
    letter-spacing: -.06em !important;
    color: #fff !important;
    white-space: normal !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(.90rem, 3.75vw, 1.18rem) !important;
    line-height: 1.13 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #fff !important;
    white-space: normal !important;
  }
}

@media (max-width: 520px) {
  .dentures-hero.dentures-hero-fullbleed {
    height: 390px !important;
    min-height: 390px !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    object-position: 30% center !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    left: 56% !important;
    top: 29% !important;
    width: 40% !important;
    max-width: 40% !important;
    padding-right: .45rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .45rem !important;
    line-height: 1.04 !important;
    margin-bottom: .25rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 2.1rem !important;
    line-height: .86 !important;
    margin-bottom: .36rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .64rem !important;
    line-height: 1.11 !important;
  }
}

@media (max-width: 430px) {
  .dentures-hero.dentures-hero-fullbleed {
    height: 365px !important;
    min-height: 365px !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    object-position: 31% center !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    left: 58% !important;
    top: 30% !important;
    width: 38% !important;
    max-width: 38% !important;
    padding-right: .25rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .34rem !important;
    line-height: 1.04 !important;
    margin-bottom: .22rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 1.45rem !important;
    line-height: .86 !important;
    margin-bottom: .28rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .45rem !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 360px) {
  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
    left: 59% !important;
    width: 37% !important;
    max-width: 37% !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .30rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 1.28rem !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .40rem !important;
  }
}


/* SIMPLE TEST: move hero text 50px right on small screens only */
@media (max-width: 430px) {
  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
      left: calc(58% + 50px) !important;
  }
}


/* TEST ONLY: shove text much farther right */
@media (max-width: 430px) {
  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .container {
      left: 78% !important;
      width: 18% !important;
      max-width: 18% !important;
  }
}


/* FINAL OVERRIDE - Dentures mobile hero text position.
   Uses right positioning instead of left percentage so the text is forced off the face. */
@media screen and (max-width: 767px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 31% center !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    position: absolute !important;
    top: 29% !important;
    right: 10px !important;
    left: auto !important;
    width: 46vw !important;
    max-width: 46vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .48rem !important;
    line-height: 1.05 !important;
    margin: 0 0 .25rem !important;
    white-space: normal !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 2.1rem !important;
    line-height: .86 !important;
    margin: 0 0 .38rem !important;
    white-space: normal !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .66rem !important;
    line-height: 1.13 !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

@media screen and (max-width: 430px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    height: 365px !important;
    min-height: 365px !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    right: 8px !important;
    width: 43vw !important;
    max-width: 43vw !important;
    top: 30% !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .36rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 1.55rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .49rem !important;
    line-height: 1.11 !important;
  }
}



/* Increase mobile hero text sizes only - keep exact position */
@media screen and (max-width: 430px) {
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .52rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 2.05rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .62rem !important;
    line-height: 1.12 !important;
  }
}


/* ==========================================================
   FINAL DENTURES MOBILE HERO TYPE MATCH
   Matches approved reference sizing while keeping the same
   Montserrat font family and existing font weights.
   ========================================================== */
@media screen and (max-width: 767px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 31% center !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    position: absolute !important;
    top: 26% !important;
    right: 10px !important;
    left: auto !important;
    width: 49vw !important;
    max-width: 49vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .72rem !important;
    line-height: 1.05 !important;
    margin: 0 0 .35rem !important;
    letter-spacing: .035em !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: normal !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 3.55rem !important;
    line-height: .84 !important;
    margin: 0 0 .58rem !important;
    letter-spacing: -.06em !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: normal !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: 1rem !important;
    line-height: 1.14 !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: normal !important;
  }
}

@media screen and (max-width: 430px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    height: 365px !important;
    min-height: 365px !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    top: 27.5% !important;
    right: 8px !important;
    left: auto !important;
    width: 47vw !important;
    max-width: 47vw !important;
    padding: 0 7px 0 0 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .56rem !important;
    line-height: 1.05 !important;
    margin-bottom: .27rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 2.55rem !important;
    line-height: .85 !important;
    margin-bottom: .42rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .72rem !important;
    line-height: 1.12 !important;
  }
}

@media screen and (max-width: 360px) {
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    width: 46vw !important;
    max-width: 46vw !important;
    right: 6px !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .46rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 2.05rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .60rem !important;
  }
}


/* ChatGPT update: remove hero text overlay and enlarge mobile hero text on <=430px */
@media screen and (max-width: 430px){
  .dentures-hero-overlay,
  .dentures-hero-panel::before,
  .dentures-hero-panel::after{
    display:none !important;
    content:none !important;
    background:none !important;
  }

  .dentures-hero-panel > .container{
    background: transparent !important;
    box-shadow:none !important;
  }

  .dentures-hero-panel .eyebrow{
    font-size: 0.73rem !important;
  }

  .dentures-hero-panel h1{
    font-size: 3.3rem !important;
  }

  .dentures-hero-panel .hero-subhead{
    font-size: 0.94rem !important;
    line-height:1.18 !important;
  }
}


/* FINAL MOBILE DENTURES HERO REQUEST */
@media screen and (max-width:430px){
  .dentures-hero-overlay,
  .dentures-hero .overlay,
  .dentures-hero-panel::before,
  .dentures-hero-panel::after{
      background:none !important;
      opacity:0 !important;
      display:none !important;
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow{
      font-size:0.73rem !important; /* +30% */
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1{
      font-size:3.3rem !important; /* +30% */
  }

  .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead{
      font-size:0.94rem !important; /* +30% */
      line-height:1.15 !important;
  }
}


/* ==========================================================
   FINAL FIX: Dentures hero overlay removed on ALL screen sizes
   and mobile hero fonts enlarged by 30% at 430px and below.
   Placement is preserved.
   ========================================================== */

/* 1) Remove ALL grey/gradient overlays from the DENTURES hero on every screen size */
html body.dentures-page .dentures-hero.dentures-hero-fullbleed,
html body .dentures-hero.dentures-hero-fullbleed {
  background-color: var(--blue) !important;
}

html body.dentures-page .dentures-hero.dentures-hero-fullbleed::before,
html body.dentures-page .dentures-hero.dentures-hero-fullbleed::after,
html body.dentures-page .dentures-hero-panel::before,
html body.dentures-page .dentures-hero-panel::after,
html body .dentures-hero.dentures-hero-fullbleed::before,
html body .dentures-hero.dentures-hero-fullbleed::after,
html body .dentures-hero-panel::before,
html body .dentures-hero-panel::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

html body.dentures-page .dentures-hero-panel,
html body .dentures-hero-panel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body.dentures-page .dentures-hero-panel > .container,
html body .dentures-hero-panel > .container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) Small screens only: increase Dentures hero fonts by about 30%.
      Do not change the current placement. */
@media screen and (max-width: 430px) {
  html body.dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .95rem !important;
    line-height: 1.05 !important;
    margin-bottom: .28rem !important;
  }

  html body.dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 4.3rem !important;
    line-height: .84 !important;
    margin-bottom: .42rem !important;
  }

  html body.dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: 1.22rem !important;
    line-height: 1.14 !important;
  }
}

/* Keep very tiny phones from breaking while still larger than before */
@media screen and (max-width: 360px) {
  html body.dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .72rem !important;
  }

  html body.dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 3.3rem !important;
  }

  html body.dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .94rem !important;
  }
}


/* ==========================================================
   FINAL APPROVED DENTURES HERO MATCH
   Matches approved reference screenshot: no overlay, large white
   headline/text on the right, same existing Montserrat weights.
   ========================================================== */

/* Remove hero overlay/tint on Dentures hero for ALL screens */
.dentures-hero-fullbleed .dentures-hero-panel,
.dentures-hero-fullbleed .dentures-hero-panel::before,
.dentures-hero-fullbleed .dentures-hero-panel::after,
.dentures-hero-fullbleed::before,
.dentures-hero-fullbleed::after {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Desktop/tablet hero type proportions */
@media screen and (min-width: 768px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    overflow: hidden !important;
    background: #008dd2 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    max-width: 560px !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: clamp(1rem, 1.6vw, 1.7rem) !important;
    line-height: 1.1 !important;
    margin-bottom: .65rem !important;
    color: #fff !important;
    font-weight: 900 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(4.8rem, 8.5vw, 8.8rem) !important;
    line-height: .84 !important;
    margin-bottom: 1.35rem !important;
    color: #fff !important;
    font-weight: 900 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(1.4rem, 2.8vw, 2.4rem) !important;
    line-height: 1.22 !important;
    max-width: 680px !important;
    color: #fff !important;
    font-weight: 800 !important;
  }
}

/* Small screens: match approved screenshot layout and make text fill blue area */
@media screen and (max-width: 767px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    height: 390px !important;
    min-height: 390px !important;
    overflow: hidden !important;
    background: #008dd2 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 31% center !important;
    z-index: 0 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    position: absolute !important;
    top: 25% !important;
    right: 10px !important;
    left: auto !important;
    width: 49vw !important;
    max-width: 49vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    display: block !important;
    font-size: .72rem !important;
    line-height: 1.08 !important;
    margin: 0 0 .34rem !important;
    letter-spacing: .035em !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: normal !important;
    text-transform: uppercase !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    display: block !important;
    font-size: 3.15rem !important;
    line-height: .84 !important;
    margin: 0 0 .55rem !important;
    letter-spacing: -.06em !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: normal !important;
    text-transform: uppercase !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    display: block !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: normal !important;
  }
}

/* iPhone-size screens: keep Dentures on-screen and match approved type size */
@media screen and (max-width: 430px) {
  html body .dentures-hero.dentures-hero-fullbleed {
    height: 365px !important;
    min-height: 365px !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-image {
    object-position: 31% center !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    top: 26% !important;
    right: 8px !important;
    left: auto !important;
    width: 47vw !important;
    max-width: 47vw !important;
    padding: 0 6px 0 0 !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .52rem !important;
    line-height: 1.05 !important;
    margin-bottom: .25rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 2.25rem !important;
    line-height: .85 !important;
    margin-bottom: .38rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .66rem !important;
    line-height: 1.15 !important;
  }
}

@media screen and (max-width: 360px) {
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    width: 46vw !important;
    max-width: 46vw !important;
    right: 6px !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: .44rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: 1.9rem !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: .56rem !important;
  }
}


/* ==========================================================
   FINAL FIX: Dentures hero headline fits on larger screens
   Keeps mobile placement rules intact, but reduces desktop/tablet
   DENTURES headline so it never runs off the right side.
   ========================================================== */
@media screen and (min-width: 768px) {
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    width: min(44vw, 560px) !important;
    max-width: min(44vw, 560px) !important;
    right: clamp(2rem, 5vw, 5rem) !important;
    left: auto !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(3.2rem, 6vw, 5.6rem) !important;
    line-height: .86 !important;
    letter-spacing: -.055em !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: clamp(.85rem, 1.25vw, 1.2rem) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(1.05rem, 2vw, 1.8rem) !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
  }
}

/* Extra protection for smaller desktop / tablet widths */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    width: 45vw !important;
    max-width: 45vw !important;
    right: clamp(1rem, 3vw, 2.5rem) !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(2.8rem, 5.5vw, 4.5rem) !important;
  }

  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(.95rem, 1.9vw, 1.35rem) !important;
  }
}


/* ==========================================================
   FINAL FORCE-FIT FIX FOR DENTURES MOBILE HERO
   Prevents hero text from running off-screen at 344, 375, 412, and 430px.
   Dentures hero only. Small screens only.
   ========================================================== */
@media screen and (max-width: 480px) {
  html body .dentures-page .dentures-hero.dentures-hero-fullbleed,
  html body .dentures-hero.dentures-hero-fullbleed {
    position: relative !important;
    height: 365px !important;
    min-height: 365px !important;
    overflow: hidden !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    position: absolute !important;
    top: 26% !important;
    right: 8px !important;
    left: auto !important;
    width: 44vw !important;
    max-width: 44vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 5px 0 0 !important;
    transform: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: clamp(.34rem, 1.75vw, .46rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 .18rem !important;
    letter-spacing: .02em !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(1.25rem, 5.75vw, 1.65rem) !important;
    line-height: .88 !important;
    margin: 0 0 .22rem !important;
    letter-spacing: -.055em !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(.38rem, 2.15vw, .56rem) !important;
    line-height: 1.13 !important;
    margin: 0 !important;
    max-width: 100% !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}

@media screen and (max-width: 375px) {
  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel > .container {
    right: 6px !important;
    width: 43vw !important;
    max-width: 43vw !important;
    padding-right: 3px !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel h1 {
    font-size: clamp(1.12rem, 5.45vw, 1.42rem) !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .hero-subhead {
    font-size: clamp(.34rem, 2vw, .48rem) !important;
  }

  html body .dentures-page .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow,
  html body .dentures-hero.dentures-hero-fullbleed .dentures-hero-panel .eyebrow {
    font-size: clamp(.30rem, 1.65vw, .38rem) !important;
  }
}


/* --- Final fix: use actual social SVG logo icons --- */
.footer-social div a.social-icon {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--dark-grey) !important;
  color: var(--white) !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.footer-social div a.social-icon img {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
}
.footer-social div a.social-icon:hover,
.footer-social div a.social-icon:focus {
  background: var(--blue) !important;
}


/* ChatGPT update: hero button full width */
.hero-copy .button-appointment{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
}

/* --- 2026-06-11 hero appointment button width fix --- */
.hero-copy .button-appointment {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}


/* 2026-06-11 FINAL HERO WIDTH LOCK */
.hero-copy{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

.hero-copy h1{
  display:block !important;
}

.hero-copy .button-appointment{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}


/* 2026-06-11 FINAL: keep hero headline box and appointment button identical width */
html body .hero .hero-inner .hero-copy{
  width: fit-content !important;
  max-width: calc(100vw - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

html body .hero .hero-inner .hero-copy h1{
  display: block !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .hero .hero-inner .hero-copy .button-appointment{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-self: stretch !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* Mobile hero box width adjustment */
@media (max-width: 768px){
  .hero-copy,
  .hero-content,
  .hero-text{
    max-width: 235px !important;
  }

  .hero-copy h1,
  .hero-content h1,
  .hero-text h1{
    max-width: 235px !important;
  }

  .button-appointment,
  .hero-copy .button-appointment{
    width: 235px !important;
    max-width: 235px !important;
  }
}



/* =========================================================
   FINAL HERO FIX - same box widths + no face overlap
   Both the white headline box and blue appointment button
   are locked to the exact same .hero-copy width.
   ========================================================= */
html body .hero .hero-inner .hero-copy{
  --hero-box-width: clamp(330px, 34vw, 430px);
  width: var(--hero-box-width) !important;
  max-width: var(--hero-box-width) !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

html body .hero .hero-inner .hero-copy h1,
html body .hero .hero-inner .hero-copy .button-appointment{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

html body .hero .hero-inner .hero-copy h1{
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .hero .hero-inner .hero-copy .button-appointment{
  justify-content: center !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  white-space: nowrap !important;
}

/* Medium/tablet screens: keep both boxes away from model's face */
@media (max-width: 980px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(275px, 42vw, 360px);
  }
}

/* Phone screens: narrower fixed-feeling box that stays over hair/left side */
@media (max-width: 760px){
  html body .hero .hero-inner{
    justify-content: flex-start !important;
  }

  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(220px, 58vw, 270px);
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: clamp(1.8rem, 7.2vw, 2.35rem) !important;
    line-height: .96 !important;
    padding: 1.2rem .85rem !important;
  }

  html body .hero .hero-inner .hero-copy .button-appointment{
    font-size: clamp(.78rem, 3.4vw, .95rem) !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }
}

/* Very small phones */
@media (max-width: 390px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(210px, 58vw, 235px);
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
    padding: 1.05rem .75rem !important;
  }

  html body .hero .hero-inner .hero-copy .button-appointment{
    font-size: .78rem !important;
  }
}

/* =========================================================
   2026-06-11 TRUE FINAL HERO MOCKUP FIX
   Goal: white headline box and blue CTA are ALWAYS identical width,
   stay compact like approved mockup, and do not cover model's face.
   ========================================================= */
html body .hero{
  overflow: hidden !important;
}

html body .hero .hero-inner{
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body .hero .hero-inner .hero-copy{
  --hero-box-width: clamp(245px, 20vw, 275px) !important;
  width: var(--hero-box-width) !important;
  max-width: var(--hero-box-width) !important;
  min-width: 0 !important;
  flex: 0 0 var(--hero-box-width) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

html body .hero .hero-inner .hero-copy h1,
html body .hero .hero-inner .hero-copy .button-appointment{
  width: var(--hero-box-width) !important;
  max-width: var(--hero-box-width) !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .hero .hero-inner .hero-copy h1{
  display: block !important;
  font-size: clamp(2.35rem, 3.8vw, 3.25rem) !important;
  line-height: .94 !important;
  padding: clamp(1rem, 1.8vw, 1.45rem) clamp(.9rem, 1.5vw, 1.25rem) !important;
  margin-bottom: .65rem !important;
  background: rgba(255,255,255,.78) !important;
}

html body .hero .hero-inner .hero-copy .button-appointment{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: stretch !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  font-size: clamp(.76rem, 1vw, .95rem) !important;
}

@media (max-width: 980px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(210px, 30vw, 255px) !important;
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: clamp(2rem, 4.8vw, 2.75rem) !important;
    padding: 1rem .85rem !important;
  }
}

@media (max-width: 760px){
  html body .hero::before{
    background-position: 66% center !important;
    background-size: auto 100% !important;
  }

  html body .hero .hero-inner{
    min-height: 440px !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    align-items: center !important;
  }

  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(185px, 46vw, 225px) !important;
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: clamp(1.75rem, 6.8vw, 2.2rem) !important;
    line-height: .96 !important;
    padding: .95rem .75rem !important;
    margin-bottom: .65rem !important;
  }

  html body .hero .hero-inner .hero-copy .button-appointment{
    min-height: 44px !important;
    font-size: clamp(.62rem, 2.7vw, .82rem) !important;
    letter-spacing: .01em !important;
  }
}

@media (max-width: 430px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(165px, 45vw, 198px) !important;
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: clamp(1.45rem, 6.5vw, 1.85rem) !important;
    padding: .85rem .65rem !important;
  }

  html body .hero .hero-inner .hero-copy .button-appointment{
    min-height: 40px !important;
    font-size: clamp(.55rem, 2.6vw, .72rem) !important;
  }
}

@media (max-width: 360px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: 160px !important;
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: 1.4rem !important;
  }

  html body .hero .hero-inner .hero-copy .button-appointment{
    font-size: .54rem !important;
  }
}


/* iPhone/mobile hero narrowing fix */
@media (max-width: 430px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: 145px !important;
  }
}

@media (max-width: 390px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: 135px !important;
  }
}

@media (max-width: 344px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: 125px !important;
  }
}


/* Keep hero button text fitting inside fixed-width button */
.button-appointment{
  white-space: nowrap !important;
}

@media (max-width: 430px){
  .button-appointment{
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 390px){
  .button-appointment{
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 344px){
  .button-appointment{
    font-size: 0.66rem !important;
    letter-spacing: 0 !important;
  }
}


/* FINAL FIX: shrink MAKE AN APPOINTMENT text only, do not change box widths */
.hero-copy .button-appointment,
.hero .button-appointment,
.button-appointment{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: -0.03em !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

@media (max-width: 430px){
  .hero-copy .button-appointment,
  .hero .button-appointment,
  .button-appointment{
    font-size: clamp(6px, 2.15vw, 9px) !important;
  }
}

@media (max-width: 390px){
  .hero-copy .button-appointment,
  .hero .button-appointment,
  .button-appointment{
    font-size: clamp(5.5px, 2vw, 8px) !important;
  }
}

@media (max-width: 344px){
  .hero-copy .button-appointment,
  .hero .button-appointment,
  .button-appointment{
    font-size: 6px !important;
  }
}


/* REAL FINAL FIX: hero appointment button text fit only — widths untouched */
.hero-appointment-btn,
.hero-copy .button-appointment,
.hero .button-appointment{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  letter-spacing: -0.08em !important;
  line-height: 1 !important;
}

/* Desktop/tablet can stay normal */
@media (min-width: 769px){
  .hero-appointment-btn,
  .hero-copy .button-appointment,
  .hero .button-appointment{
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }
}

/* The box widths were approved. These rules only shrink the words inside. */
@media (max-width: 768px){
  .hero-appointment-btn,
  .hero-copy .button-appointment,
  .hero .button-appointment{
    font-size: 8px !important;
  }
}

@media (max-width: 430px){
  .hero-appointment-btn,
  .hero-copy .button-appointment,
  .hero .button-appointment{
    font-size: 6.4px !important;
    letter-spacing: -0.09em !important;
  }
}

@media (max-width: 390px){
  .hero-appointment-btn,
  .hero-copy .button-appointment,
  .hero .button-appointment{
    font-size: 5.8px !important;
    letter-spacing: -0.1em !important;
  }
}

@media (max-width: 344px){
  .hero-appointment-btn,
  .hero-copy .button-appointment,
  .hero .button-appointment{
    font-size: 5.2px !important;
    letter-spacing: -0.11em !important;
  }
}


/* Dynamic fit system for MAKE AN APPOINTMENT text.
   Widths are intentionally NOT changed here. */
.hero .button-appointment,
.hero-copy .button-appointment,
.hero-appointment-btn{
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1 !important;
}

.hero .button-appointment .appointment-text-fit,
.hero-copy .button-appointment .appointment-text-fit,
.hero-appointment-btn .appointment-text-fit{
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  max-width: none !important;
  font-weight: 800 !important;
}

/* Fallback sizes before JS measures the button */
@media (max-width: 768px){
  .hero .button-appointment .appointment-text-fit,
  .hero-copy .button-appointment .appointment-text-fit,
  .hero-appointment-btn .appointment-text-fit{
    font-size: 9px !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 390px){
  .hero .button-appointment .appointment-text-fit,
  .hero-copy .button-appointment .appointment-text-fit,
  .hero-appointment-btn .appointment-text-fit{
    font-size: 7px !important;
    letter-spacing: -0.05em !important;
  }
}

@media (max-width: 344px){
  .hero .button-appointment .appointment-text-fit,
  .hero-copy .button-appointment .appointment-text-fit,
  .hero-appointment-btn .appointment-text-fit{
    font-size: 6px !important;
    letter-spacing: -0.06em !important;
  }
}


/* =========================================================
   Client revisions - final pass
   ========================================================= */

/* 1) OUR SERVICES background changed from blue to dark grey */
.services {
  background: var(--dark-grey) !important;
  color: var(--white) !important;
}

/* Keep OUR SERVICES arrows visible on the dark grey background */
.services .carousel-arrow,
.services .service-arrow {
  color: var(--white) !important;
}

/* 4) Dentures page: remove hero picture entirely and center the text in dark grey */
body.dentures-page .dentures-hero,
body.dentures-page .dentures-hero.dentures-hero-fullbleed {
  background: var(--white) !important;
  background-image: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(3rem, 7vw, 5rem) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

body.dentures-page .dentures-hero::before,
body.dentures-page .dentures-hero::after,
body.dentures-page .dentures-hero-panel::before,
body.dentures-page .dentures-hero-panel::after,
body.dentures-page .dentures-hero-image {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.dentures-page .dentures-hero-panel {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  color: var(--dark-grey) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  padding: 0 !important;
}

body.dentures-page .dentures-hero-panel > .container {
  position: static !important;
  inset: auto !important;
  width: min(calc(100% - 2rem), 900px) !important;
  max-width: 900px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  transform: none !important;
  text-align: center !important;
  background: transparent !important;
  color: var(--dark-grey) !important;
}

body.dentures-page .dentures-hero-panel .eyebrow,
body.dentures-page .dentures-hero-panel h1,
body.dentures-page .dentures-hero-panel .hero-subhead {
  color: var(--dark-grey) !important;
  text-align: center !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.dentures-page .dentures-hero-panel h1 {
  font-size: clamp(2.8rem, 8vw, 5.5rem) !important;
  line-height: .9 !important;
  margin-bottom: .75rem !important;
}

body.dentures-page .dentures-hero-panel .hero-subhead {
  max-width: 760px !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  line-height: 1.35 !important;
}

/* 6) Service titles: scale to fit, including iPhone landscape.
   The cards keep their layout, but the text gets smaller before it can clip. */
.service-card h3 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  white-space: normal !important;
  line-height: .92 !important;
  padding-left: .2rem !important;
  padding-right: .2rem !important;
  font-size: clamp(.52rem, 1.05vw, 1.02rem) !important;
  min-height: clamp(48px, 6vw, 82px) !important;
}

@media (orientation: landscape) and (max-height: 500px) {
  .service-card h3 {
    font-size: clamp(.45rem, 1.55vw, .72rem) !important;
    line-height: .88 !important;
    min-height: 46px !important;
    padding: .28rem .12rem !important;
  }

  .service-carousel .service-card {
    flex-basis: clamp(118px, 22vw, 170px) !important;
  }

  .service-card img.service-image {
    height: clamp(105px, 30vh, 135px) !important;
    min-height: clamp(105px, 30vh, 135px) !important;
  }
}

@media (max-width: 760px) {
  .service-card h3 {
    font-size: clamp(.68rem, 3.25vw, 1rem) !important;
    line-height: .9 !important;
    min-height: 52px !important;
  }
}

/* 7) Services carousel: allow swipe and arrows in iPhone landscape */
.service-frame,
.carousel-frame.service-frame {
  overflow: visible !important;
}

.service-carousel {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
}

.service-carousel::-webkit-scrollbar {
  display: none !important;
}

.service-carousel .service-card {
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
}

.service-prev,
.service-next {
  pointer-events: auto !important;
  z-index: 20 !important;
}

/* Landscape phones show multiple cards, but still scroll/swipe smoothly */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .service-frame {
    padding-inline: 2rem !important;
  }

  .service-carousel {
    gap: .75rem !important;
    padding-bottom: .35rem !important;
  }

  .service-carousel .service-card {
    flex: 0 0 clamp(118px, 22vw, 165px) !important;
  }

  .service-prev { left: .1rem !important; }
  .service-next { right: .1rem !important; }
}



/* =========================================================
   Dentx revisions - 2026-06-11 PM
   ========================================================= */

/* 1) Dentures former HERO: white background, dark grey centered text */
body.dentures-page .dentures-hero,
body.dentures-page .dentures-hero.dentures-hero-fullbleed,
html body.dentures-page .dentures-hero.dentures-hero-fullbleed {
  background: var(--white) !important;
  background-color: var(--white) !important;
  background-image: none !important;
  color: var(--dark-grey) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(2.75rem, 6vw, 4.75rem) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

body.dentures-page .dentures-hero-image,
body.dentures-page .dentures-hero::before,
body.dentures-page .dentures-hero::after,
body.dentures-page .dentures-hero-panel::before,
body.dentures-page .dentures-hero-panel::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.dentures-page .dentures-hero-panel,
html body.dentures-page .dentures-hero-panel {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--dark-grey) !important;
  width: 100% !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.dentures-page .dentures-hero-panel > .container,
html body.dentures-page .dentures-hero-panel > .container {
  position: static !important;
  inset: auto !important;
  width: min(calc(100% - 2rem), 900px) !important;
  max-width: 900px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  transform: none !important;
  text-align: center !important;
  background: transparent !important;
}

body.dentures-page .dentures-hero-panel .eyebrow,
body.dentures-page .dentures-hero-panel h1,
body.dentures-page .dentures-hero-panel .hero-subhead {
  color: var(--dark-grey) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Remove extra visual gap between the two denture-sleep paragraphs */
body.dentures-page .dentures-warning p {
  margin-top: 0 !important;
  margin-bottom: .85rem !important;
}

body.dentures-page .dentures-warning p + p {
  margin-top: 0 !important;
}

/* 3) Alternating light grey backgrounds on requested denture sections only */
body.dentures-page .dentures-section.dentures-alt-bg {
  background: #f2f2f2 !important;
}

/* Keep other denture sections white unless already styled otherwise */
body.dentures-page .dentures-section:not(.dentures-alt-bg):not(.faq-zone):not(.faq-zone-secondary) {
  background: var(--white);
}

/* 5) OUR SERVICES text: prevent side clipping on all screen sizes */
.service-card {
  overflow: hidden !important;
}

.service-card h3 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
  padding-left: .55rem !important;
  padding-right: .55rem !important;
  font-size: clamp(.56rem, .95vw, .94rem) !important;
  line-height: .96 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .service-card h3 {
    font-size: clamp(.5rem, 1.15vw, .76rem) !important;
    padding-left: .42rem !important;
    padding-right: .42rem !important;
    line-height: .94 !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .service-card h3 {
    font-size: clamp(.42rem, 1.35vw, .62rem) !important;
    padding-left: .28rem !important;
    padding-right: .28rem !important;
    line-height: .9 !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 760px) {
  .service-card h3 {
    font-size: clamp(.62rem, 2.75vw, .94rem) !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
    line-height: .94 !important;
  }
}

/* 6) DENTURES Learn More button background should be brand blue */
.service-card:has(img[src*="dentures"]) a,
.service-card:has(img[alt*="Denture"]) a,
.service-card:has(h3 span:first-child:nth-last-child(1)) a {
  background: var(--blue) !important;
  color: var(--white) !important;
}

/* Fallback for browsers without :has(): all service CTAs remain dark grey except the
   Dentures card gets corrected by JS adding .dentures-service-card. */
.service-card.dentures-service-card a {
  background: var(--blue) !important;
  color: var(--white) !important;
}


/* =========================================================
   FINAL requested corrections after client review
   ========================================================= */

/* 1) Force split service label from old tooth/caps wording to Tooth Crowns if old cached HTML exists */
.service-card h3 span:last-child {
  text-transform: uppercase;
}

/* 2) OUR SERVICES: never let service names clip on sides.
   Adds inner padding and uses fluid text sizing down to 320px. */
.service-card h3,
.service-carousel .service-card h3 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .08em .22em !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  padding: .55rem .55rem .48rem !important;
  font-size: clamp(.48rem, .82vw, .86rem) !important;
  line-height: .96 !important;
  letter-spacing: -0.045em !important;
  min-height: 68px !important;
}

.service-card h3 span {
  display: inline-block !important;
  max-width: 100% !important;
  line-height: .96 !important;
}

@media (max-width: 1100px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.42rem, .95vw, .68rem) !important;
    padding-left: .45rem !important;
    padding-right: .45rem !important;
    letter-spacing: -0.06em !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.36rem, 1.18vw, .55rem) !important;
    padding-left: .34rem !important;
    padding-right: .34rem !important;
    line-height: .92 !important;
    letter-spacing: -0.075em !important;
    min-height: 52px !important;
  }
}

@media (max-width: 760px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.58rem, 2.45vw, .88rem) !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    letter-spacing: -0.04em !important;
    min-height: 58px !important;
  }
}

@media (max-width: 360px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.52rem, 2.35vw, .76rem) !important;
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }
}

@media (max-width: 320px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: .5rem !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
}

/* 3) Dentures HERO: light grey background, dark grey text, wider DENTURES letter spacing */
body.dentures-page .dentures-hero,
body.dentures-page .dentures-hero.dentures-hero-fullbleed,
html body.dentures-page .dentures-hero.dentures-hero-fullbleed {
  background: #f2f2f2 !important;
  background-color: #f2f2f2 !important;
  background-image: none !important;
  color: var(--dark-grey) !important;
}

body.dentures-page .dentures-hero-panel .eyebrow,
body.dentures-page .dentures-hero-panel h1,
body.dentures-page .dentures-hero-panel .hero-subhead {
  color: var(--dark-grey) !important;
}

body.dentures-page .dentures-hero-panel h1 {
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

/* 4) Remove grey behind How long do dentures last section */
body.dentures-page .dentures-section.faq-zone-secondary,
body.dentures-page .dentures-section.no-alt-bg {
  background: var(--white) !important;
  background-color: var(--white) !important;
}

/* Keep requested alternating sections grey only when explicitly marked */
body.dentures-page .dentures-section.dentures-alt-bg:not(.no-alt-bg) {
  background: #f2f2f2 !important;
}

/* 6) Dentures Learn More CTA remains brand blue */
.service-card.service-card-dentures a,
.service-card.dentures-service-card a {
  background: var(--blue) !important;
  color: var(--white) !important;
}


/* =========================================================
   Final two requested edits
   ========================================================= */

/* 1) OUR SERVICES text: bigger, with enough side padding so it does not clip */
.service-card h3,
.service-carousel .service-card h3 {
  font-size: clamp(.72rem, 1.12vw, 1.08rem) !important;
  line-height: .94 !important;
  letter-spacing: -0.055em !important;
  padding-left: .62rem !important;
  padding-right: .62rem !important;
  padding-top: .55rem !important;
  padding-bottom: .48rem !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.service-card h3 span,
.service-carousel .service-card h3 span {
  display: inline-block !important;
  max-width: 100% !important;
  line-height: .94 !important;
}

@media (max-width: 1100px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.62rem, 1.28vw, .88rem) !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    letter-spacing: -0.065em !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.58rem, 1.5vw, .78rem) !important;
    padding-left: .48rem !important;
    padding-right: .48rem !important;
    line-height: .9 !important;
    letter-spacing: -0.075em !important;
  }
}

@media (max-width: 760px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.78rem, 3vw, 1.08rem) !important;
    padding-left: .8rem !important;
    padding-right: .8rem !important;
    letter-spacing: -0.05em !important;
  }
}

@media (max-width: 360px) {
  .service-card h3,
  .service-carousel .service-card h3 {
    font-size: clamp(.68rem, 2.7vw, .9rem) !important;
    padding-left: .7rem !important;
    padding-right: .7rem !important;
  }
}

/* 2) Dentures page hero: dark grey background, white text, more DENTURES letter spacing */
body.dentures-page .dentures-hero,
body.dentures-page .dentures-hero.dentures-hero-fullbleed,
html body.dentures-page .dentures-hero.dentures-hero-fullbleed {
  background: var(--dark-grey) !important;
  background-color: var(--dark-grey) !important;
  color: var(--white) !important;
}

body.dentures-page .dentures-hero-panel .eyebrow,
body.dentures-page .dentures-hero-panel h1,
body.dentures-page .dentures-hero-panel .hero-subhead {
  color: var(--white) !important;
}

body.dentures-page .dentures-hero-panel h1 {
  letter-spacing: .16em !important;
}


/* =========================================================
   ABSOLUTE FINAL SERVICE TEXT FIT OVERRIDE
   Fixes TOOTH EXTRACTIONS clipping at every screen size.
   ========================================================= */
.service-carousel .service-card,
.service-card {
  overflow: hidden !important;
}

.service-carousel .service-card h3,
.service-card h3 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .02rem !important;
  padding: .46rem .18rem .42rem !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(.42rem, .82vw, .78rem) !important;
  line-height: .88 !important;
  letter-spacing: -0.085em !important;
  min-height: 74px !important;
}

.service-carousel .service-card h3 span,
.service-card h3 span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  line-height: .88 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  letter-spacing: inherit !important;
}

/* Screen shown in the screenshot: short landscape/tablet-ish viewport */
@media (orientation: landscape) and (max-height: 620px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    font-size: clamp(.36rem, 1.02vw, .6rem) !important;
    line-height: .84 !important;
    letter-spacing: -0.105em !important;
    padding-left: .08rem !important;
    padding-right: .08rem !important;
    min-height: 74px !important;
  }

  .service-carousel .service-card h3 span,
  .service-card h3 span {
    line-height: .84 !important;
  }
}

@media (max-width: 760px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    font-size: clamp(.5rem, 2.25vw, .82rem) !important;
    line-height: .88 !important;
    letter-spacing: -0.08em !important;
    padding-left: .22rem !important;
    padding-right: .22rem !important;
    min-height: 62px !important;
  }
}

@media (max-width: 360px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    font-size: clamp(.44rem, 2.1vw, .7rem) !important;
    letter-spacing: -0.095em !important;
    padding-left: .12rem !important;
    padding-right: .12rem !important;
  }
}

/* Extra insurance for the Tooth Extractions card */
.service-carousel .service-card:last-child h3 {
  font-size: clamp(.34rem, .78vw, .68rem) !important;
  letter-spacing: -0.11em !important;
}
@media (orientation: landscape) and (max-height: 620px) {
  .service-carousel .service-card:last-child h3 {
    font-size: clamp(.31rem, .92vw, .52rem) !important;
    letter-spacing: -0.13em !important;
  }
}

/* Force Dentures hero from stylesheet too */
html body.dentures-page section.dentures-hero,
html body.dentures-page section.dentures-hero.dentures-hero-fullbleed {
  background: #665c58 !important;
  background-color: #665c58 !important;
  background-image: none !important;
  color: #ffffff !important;
}
html body.dentures-page section.dentures-hero *,
html body.dentures-page section.dentures-hero .eyebrow,
html body.dentures-page section.dentures-hero h1,
html body.dentures-page section.dentures-hero .hero-subhead {
  color: #ffffff !important;
}
html body.dentures-page section.dentures-hero h1 {
  letter-spacing: .22em !important;
}
html body.dentures-page section.dentures-hero .hero-subhead {
  font-size: clamp(.72rem, 1.45vw, .95rem) !important;
  line-height: 1.2 !important;
  max-width: 560px !important;
}


/* =========================================================
   FINAL: uniform OUR SERVICES title sizes + no clipping
   ========================================================= */
.service-carousel .service-card h3,
.service-card h3 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: .5rem .42rem !important;
  margin: 0 !important;
  min-height: 76px !important;
  overflow: visible !important;
  white-space: normal !important;
  font-size: clamp(.58rem, 1vw, .95rem) !important;
  line-height: .9 !important;
  letter-spacing: -0.06em !important;
}

.service-carousel .service-card h3 span,
.service-card h3 span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: .9 !important;
  overflow: visible !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    font-size: clamp(.48rem, 1.02vw, .72rem) !important;
    padding-left: .22rem !important;
    padding-right: .22rem !important;
    min-height: 74px !important;
  }
}

@media (max-width: 760px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    font-size: clamp(.65rem, 3vw, .95rem) !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    min-height: 62px !important;
  }
}

/* CSS fallback for final Dentures hero */
html body.dentures-page section.dentures-hero,
html body.dentures-page section.dentures-hero.dentures-hero-fullbleed {
  background: #665c58 !important;
  background-color: #665c58 !important;
  background-image: none !important;
  color: #ffffff !important;
}
html body.dentures-page section.dentures-hero .dentures-hero-panel > .container {
  position: static !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  transform: none !important;
}
html body.dentures-page section.dentures-hero h1 {
  letter-spacing: .28em !important;
  padding-left: .28em !important;
}


/* FINAL mobile hero padding + DENTURES spacing */
html body.dentures-page section.dentures-hero .dentures-hero-panel > .container{
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

html body.dentures-page section.dentures-hero h1{
  letter-spacing:.42em !important;
  padding-left:.42em !important;
}

@media (max-width:480px){
  html body.dentures-page section.dentures-hero .dentures-hero-panel > .container{
    padding-left:32px !important;
    padding-right:32px !important;
  }
}

@media (max-width:375px){
  html body.dentures-page section.dentures-hero .dentures-hero-panel > .container{
    padding-left:36px !important;
    padding-right:36px !important;
  }

  html body.dentures-page section.dentures-hero h1{
    letter-spacing:.34em !important;
    padding-left:.34em !important;
  }
}


/* =========================================================
   FIXED FOR GOOD: Dentures hero + uniform service text
   ========================================================= */
html body.dentures-page .dentures-hero-final {
  background: #665c58 !important;
  color: #ffffff !important;
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.5rem, 5vw, 5rem) !important;
  overflow: hidden !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html body.dentures-page .dentures-hero-final-inner {
  width: min(100%, 720px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html body.dentures-page .dentures-hero-final h1 {
  color: #fff !important;
  font-size: clamp(2rem, 6.4vw, 4.7rem) !important;
  letter-spacing: .22em !important;
  padding-left: .22em !important;
  line-height: .9 !important;
  text-transform: uppercase !important;
}

html body.dentures-page .dentures-hero-final .eyebrow,
html body.dentures-page .dentures-hero-final .hero-subhead {
  color: #fff !important;
  text-align: center !important;
}

@media (max-width: 480px) {
  html body.dentures-page .dentures-hero-final {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  html body.dentures-page .dentures-hero-final h1 {
    font-size: clamp(1.45rem, 7vw, 2.05rem) !important;
    letter-spacing: normal !important;
    padding-left: .18em !important;
  }
}

/* Uniform OUR SERVICES text from card to card. No special tiny last card. */
.service-carousel .service-card h3,
.service-card h3,
.service-carousel .service-card:last-child h3 {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .04rem !important;
  padding: .5rem .5rem !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  font-size: clamp(.62rem, 1.05vw, .95rem) !important;
  line-height: .9 !important;
  letter-spacing: -0.055em !important;
}

.service-carousel .service-card h3 span,
.service-card h3 span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: .9 !important;
  overflow: visible !important;
}

@media (orientation: landscape) and (max-height: 620px) {
  .service-carousel .service-card h3,
  .service-card h3,
  .service-carousel .service-card:last-child h3 {
    font-size: clamp(.48rem, 1vw, .72rem) !important;
    padding-left: .35rem !important;
    padding-right: .35rem !important;
    letter-spacing: -0.065em !important;
  }
}

@media (max-width: 760px) {
  .service-carousel .service-card h3,
  .service-card h3,
  .service-carousel .service-card:last-child h3 {
    font-size: clamp(.65rem, 2.75vw, .95rem) !important;
    min-height: 62px !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
}


/* Final tweak: use the font's normal letter spacing for DENTURES */
html body.dentures-page .dentures-hero-final h1,
html body.dentures-page section.dentures-hero h1 {
  letter-spacing: normal !important;
  padding-left: 0 !important;
}
@media (max-width: 760px) {
  .service-carousel .service-card h3,
  .service-card h3 {
    font-size: clamp(1.15rem, 5vw, 1.65rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.06em !important;
    padding: 0.75rem 1rem !important;
    min-height: 130px !important;
  }

  .service-carousel .service-card h3 span,
  .service-card h3 span {
    line-height: 0.9 !important;
  }
}
@media (max-width: 760px) {
  .service-card.tooth-extractions h3 {
    font-size: clamp(1.15rem, 5vw, 1.65rem) !important;
  }

  .service-card.tooth-extractions h3 span {
    font-size: inherit !important;
  }
}
.service-card.tooth-extractions h3,
.service-card.tooth-extractions h3 span {
    font-size: 1.35rem !important;
}



/* --- Meet the Doctors updates 2026-06-17 --- */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--blue);
  z-index: 4;
}

.nav-meet {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: .08rem;
  line-height: .92 !important;
  white-space: nowrap;
}

.nav-meet span {
  display: block;
  line-height: .92;
}

.footer-meet {
  white-space: nowrap !important;
}

@media (min-width: 981px) {
  .main-nav {
    gap: clamp(1.1rem, 3.5vw, 4rem) !important;
  }

  .nav-meet {
    font-size: .72rem !important;
  }
}

@media (max-width: 980px) {
  .nav-meet {
    flex-direction: row;
    gap: .28em;
  }
}

@media (max-width: 760px) {
  .footer-nav {
    gap: clamp(.9rem, 4vw, 1.5rem) !important;
    flex-wrap: wrap;
  }

  .footer-meet {
    flex: 0 0 auto;
  }
}

.meet-logo-section {
  background: var(--white);
  padding: clamp(2.4rem, 5vw, 4.2rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
}

.meet-logo-wrap {
  display: grid;
  place-items: center;
}

.meet-page-logo {
  width: min(920px, 92vw);
  height: auto;
}

.meet-brand-line {
  width: min(calc(100% - clamp(3rem, 14vw, 16rem)), 1040px);
  height: 7px;
  margin: clamp(2.3rem, 5vw, 4.2rem) auto;
  background: var(--blue);
}

.meet-brand-line-top {
  margin-top: 0;
  margin-bottom: clamp(2.6rem, 5vw, 4.6rem);
}

.meet-doctors-content {
  background: var(--white);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.meet-content-container {
  width: min(calc(100% - clamp(4rem, 18vw, 22rem)), 900px) !important;
}

.meet-doctors-content h1 {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  color: var(--dark-grey);
  text-transform: uppercase;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.055em;
  font-size: clamp(2.15rem, 5.6vw, 4.9rem);
}

.doctor-profile h2 {
  margin: 0 0 1.15rem;
  color: var(--dark-grey);
  text-transform: uppercase;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.055em;
  font-size: clamp(1.8rem, 4.2vw, 3.9rem);
}

.doctor-profile-copy {
  max-width: 720px;
}

.doctor-profile-copy p {
  margin: 0 0 1.15rem;
  color: var(--dark-grey);
  font-size: clamp(1.08rem, 2.2vw, 2.05rem);
  line-height: 1.16;
  letter-spacing: -.035em;
  font-weight: 500;
}

@media (max-width: 760px) {
  .meet-logo-section {
    padding-top: 2rem;
  }

  .meet-page-logo {
    width: min(92vw, 620px);
  }

  .meet-brand-line {
    width: min(calc(100% - 3rem), 1040px);
    height: 6px;
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
  }

  .meet-content-container {
    width: min(calc(100% - 3.2rem), 900px) !important;
  }

  .meet-doctors-content h1 {
    font-size: clamp(2.25rem, 11vw, 3.6rem);
  }

  .doctor-profile h2 {
    font-size: clamp(1.75rem, 8.8vw, 2.9rem);
  }

  .doctor-profile-copy p {
    font-size: clamp(1.08rem, 5.6vw, 1.65rem);
    line-height: 1.14;
  }
}


/* --- Client requested refinements 2026-06-17 round 2 --- */
.hero-copy h1 {
  background: #ffffff !important;
  color: var(--blue) !important;
  box-shadow: 14px 16px 28px rgba(0, 0, 0, .28) !important;
}

.hero-copy .button-appointment,
.hero .button-appointment {
  box-shadow: 14px 16px 28px rgba(0, 0, 0, .28) !important;
}

.meet-logo-section,
.meet-page-logo {
  display: none !important;
}

.meet-doctors-content {
  padding-top: clamp(2.2rem, 4vw, 3.5rem);
}

.meet-doctors-content h1 {
  text-align: center !important;
  font-size: clamp(1.35rem, 2.8vw, 2.45rem) !important;
  margin: 0 auto clamp(1.5rem, 3vw, 2.2rem) !important;
}

.meet-brand-line {
  width: min(calc(100% - clamp(3rem, 14vw, 16rem)), 1040px);
  height: 7px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto;
}

.meet-brand-line-top {
  margin-top: 0 !important;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem) !important;
}

.doctor-profile h2 {
  font-size: clamp(1.05rem, 2.1vw, 1.95rem) !important;
  margin-bottom: .8rem !important;
}

.doctor-profile-copy {
  max-width: 640px !important;
}

.doctor-profile-copy p {
  font-size: clamp(.82rem, 1.15vw, 1.03rem) !important;
  line-height: 1.22 !important;
  margin-bottom: .8rem !important;
}

@media (max-width: 760px) {
  .hero-copy h1,
  .hero-copy .button-appointment,
  .hero .button-appointment {
    box-shadow: 9px 11px 20px rgba(0, 0, 0, .26) !important;
  }

  .meet-doctors-content {
    padding-top: 2rem;
  }

  .meet-brand-line {
    width: min(calc(100% - 3rem), 1040px);
    height: 6px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .meet-doctors-content h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .doctor-profile h2 {
    font-size: clamp(1.1rem, 4.7vw, 1.55rem) !important;
  }

  .doctor-profile-copy p {
    font-size: clamp(.86rem, 3.8vw, 1.05rem) !important;
    line-height: 1.22 !important;
  }
}

/* --- Client requested refinements 2026-06-17 round 3 --- */
.hero-copy h1 {
  color: var(--dark-grey) !important;
  background: #ffffff !important;
  box-shadow: 18px 20px 34px rgba(0, 0, 0, .48) !important;
}

.hero-copy .button-appointment,
.hero .button-appointment {
  box-shadow: 18px 20px 34px rgba(0, 0, 0, .50) !important;
}

.meet-doctors-page .doctor-profile {
  text-align: center !important;
}

.meet-doctors-page .doctor-profile h2 {
  text-align: center !important;
  font-size: clamp(.86rem, 1.55vw, 1.35rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.meet-doctors-page .doctor-profile-copy {
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.meet-doctors-page .doctor-profile-copy p {
  text-align: center !important;
  font-size: clamp(.72rem, .95vw, .88rem) !important;
  line-height: 1.24 !important;
}

.meet-doctors-page .doctor-profile img,
.meet-doctors-page .doctor-image,
.meet-doctors-page .doctor-profile-image,
.meet-doctors-page .doctor-photo {
  display: none !important;
}

@media (max-width: 760px) {
  .hero-copy h1,
  .hero-copy .button-appointment,
  .hero .button-appointment {
    box-shadow: 12px 14px 24px rgba(0, 0, 0, .46) !important;
  }

  .meet-doctors-page .doctor-profile h2 {
    font-size: clamp(.9rem, 3.7vw, 1.2rem) !important;
  }

  .meet-doctors-page .doctor-profile-copy {
    max-width: 92% !important;
  }

  .meet-doctors-page .doctor-profile-copy p {
    font-size: clamp(.75rem, 3.2vw, .92rem) !important;
    line-height: 1.25 !important;
  }
}


/* --- Meet the Doctors final text refinement: centered stack with left-justified copy --- */
.meet-doctors-page .doctor-profile {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.meet-doctors-page .doctor-profile h2 {
  text-align: left !important;
  font-size: clamp(1.05rem, 2.1vw, 1.95rem) !important;
  line-height: .96 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: .8rem !important;
}

.meet-doctors-page .doctor-profile-copy {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.meet-doctors-page .doctor-profile-copy p {
  text-align: left !important;
  font-size: clamp(.82rem, 1.15vw, 1.03rem) !important;
  line-height: 1.24 !important;
  margin-bottom: .8rem !important;
}

.meet-doctors-page .doctor-profile img,
.meet-doctors-page .doctor-image,
.meet-doctors-page .doctor-profile-image,
.meet-doctors-page .doctor-photo {
  display: none !important;
}

@media (max-width: 760px) {
  .meet-doctors-page .doctor-profile {
    max-width: min(92%, 640px) !important;
  }

  .meet-doctors-page .doctor-profile h2 {
    text-align: left !important;
    font-size: clamp(1.1rem, 4.7vw, 1.55rem) !important;
  }

  .meet-doctors-page .doctor-profile-copy {
    max-width: 100% !important;
    text-align: left !important;
  }

  .meet-doctors-page .doctor-profile-copy p {
    text-align: left !important;
    font-size: clamp(.86rem, 3.8vw, 1.05rem) !important;
    line-height: 1.25 !important;
  }
}

/* --- Final requested updates: hero image + Meet Doctors letter spacing only --- */
.hero::before {
  background-image: url('../images/hero6.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.meet-doctors-page .meet-doctors-content h1 {
  letter-spacing: 0.08em !important;
}

.meet-doctors-page .doctor-profile h2 {
  letter-spacing: 0.14em !important;
}


/* Final Meet the Doctors cards */
.meet-doctors-content h1,
.doctor-profile h2 {
  letter-spacing: 0.12em !important;
}

.doctor-profile {
  background: rgba(0,141,210,0.07);
  border-radius: 22px;
  padding: clamp(2rem,4vw,3rem) clamp(2rem,6vw,4rem);
  margin: clamp(1.5rem,3vw,2rem) auto;
}

.doctor-profile-copy {
  max-width: 100%;
}

/* --- Final requested hero image overlay ONLY --- */
.hero .hero-overlay,
.hero-overlay {
  background: rgba(255, 255, 255, .62) !important;
  z-index: 1 !important;
}

.hero::before {
  z-index: 0 !important;
}

.hero-inner {
  position: relative !important;
  z-index: 2 !important;
}



/* 2026-06-19 HERO white card match */
html body .hero .hero-inner .hero-copy h1{
  position: relative !important;
  background: #ffffff !important;
  color: var(--dark-grey) !important;
  padding: 22px 26px 22px 34px !important;
  border-radius: 0 !important;
  box-shadow: 18px 22px 34px rgba(0,0,0,.28) !important;
  overflow: visible !important;
}

html body .hero .hero-inner .hero-copy h1::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 12px !important;
  background: #008dd2 !important;
}



/* 2026-06-19 FIX: actual gray bar beside the blue HERO card bar */
html body .hero .hero-inner .hero-copy h1::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 12px !important;
  width: 4px !important;
  background: #665c58 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

html body .hero .hero-inner .hero-copy h1::before{
  z-index: 2 !important;
}

html body .hero .hero-inner .hero-copy h1{
  padding-left: 38px !important;
}


/* 2026-06-19 Large-screen HERO fix:
   Only on larger screens, give the white headline card enough width
   so the headline stays fully inside the white box. Mobile/tablet unchanged. */
@media (min-width: 981px){
  html body .hero .hero-inner .hero-copy{
    --hero-box-width: clamp(320px, 24vw, 360px) !important;
  }

  html body .hero .hero-inner .hero-copy h1{
    font-size: clamp(2.55rem, 3.2vw, 3.05rem) !important;
    line-height: .94 !important;
    overflow: visible !important;
  }
}


/* --- Service page/navigation updates 2026-06-22 --- */
.services-blue-line {
  height: 3px;
  background: var(--blue);
  width: 100%;
}
.footer-nav {
  row-gap: .85rem;
}
.footer-nav a {
  white-space: nowrap;
}
.service-detail-page .dentures-callout h2 {
  max-width: 640px;
}
@media (max-width: 760px) {
  .footer-nav {
    gap: .85rem 1.25rem;
  }
}


/* --- Footer navigation restored with Services dropdown --- */
.footer-nav {
  align-items: flex-start;
  overflow: visible;
}
.footer-nav .footer-dropdown {
  position: relative;
  line-height: 1;
}
.footer-nav .dropdown-button {
  color: var(--dark-grey);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  padding: 0;
  line-height: inherit;
}
.footer-nav .dropdown-button span {
  color: var(--blue);
  font-weight: 900;
}
.footer-nav .dropdown-menu {
  top: calc(100% + .55rem);
  min-width: 190px;
  text-align: left;
  text-transform: none;
  z-index: 40;
}
.footer-nav .dropdown-menu a {
  white-space: normal;
}
@media (max-width: 760px) {
  .footer-nav .dropdown-menu {
    position: static;
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-top: 0;
    padding: .4rem 0 0 .75rem;
  }
}

/* --- Hero blue divider thickness fix 2026-06-22 ---
   The hero already has the same 3px blue divider as the sticky header.
   Hide the extra services divider so the line does not double to 6px. */
.services-blue-line {
  display: none !important;
}
.hero::after {
  height: 3px !important;
  background: var(--blue) !important;
}

/* --- 2026-06-22 footer space + services dropdown hover fix --- */
@media (min-width: 761px) {
  .site-footer {
    padding-bottom: .9rem !important;
  }
}
@media (max-width: 760px) {
  .site-footer {
    padding-bottom: .7rem !important;
  }
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active,
.dropdown-menu a.is-active,
.footer-nav .dropdown-menu a:hover,
.footer-nav .dropdown-menu a:focus,
.footer-nav .dropdown-menu a:active,
.footer-nav .dropdown-menu a.is-active {
  background: rgba(0, 141, 210, .12) !important;
  color: var(--dark-grey) !important;
  font-weight: 800 !important;
}

/* --- 2026-06-22 footer Services dropdown alignment fix --- */
.footer-nav {
  align-items: center !important;
  overflow: visible !important;
}
.footer-nav .footer-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.footer-nav .dropdown-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: .2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.footer-nav .dropdown-menu {
  position: absolute !important;
  top: calc(100% + .55rem) !important;
  left: 50% !important;
  translate: -50% 8px !important;
  min-width: 190px !important;
  display: grid !important;
  gap: .1rem !important;
  padding: .65rem !important;
  background: var(--white) !important;
  border-top: 4px solid var(--blue) !important;
  box-shadow: var(--shadow) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  text-align: left !important;
  z-index: 40 !important;
}
.footer-nav .footer-dropdown:hover .dropdown-menu,
.footer-nav .footer-dropdown:focus-within .dropdown-menu,
.footer-nav .footer-dropdown.open .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  translate: -50% 0 !important;
}
@media (max-width: 760px) {
  .footer-nav {
    align-items: center !important;
  }
  .footer-nav .dropdown-menu {
    position: absolute !important;
    top: calc(100% + .55rem) !important;
    left: 50% !important;
    translate: -50% 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: var(--shadow) !important;
    border-top: 4px solid var(--blue) !important;
    padding: .65rem !important;
  }
  .footer-nav .footer-dropdown:hover .dropdown-menu,
  .footer-nav .footer-dropdown:focus-within .dropdown-menu,
  .footer-nav .footer-dropdown.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    translate: -50% 0 !important;
  }
}


/* --- 2026-06-22 Services dropdown behavior fix ---
   SERVICES is only a dropdown trigger now; it does not link to Dental Implants. */
.dropdown {
  position: relative !important;
}
.dropdown-button {
  cursor: default !important;
}
.dropdown-menu,
.main-nav .dropdown-menu,
.footer-nav .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  translate: -50% 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: grid !important;
  z-index: 1000 !important;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.main-nav .dropdown:hover > .dropdown-menu,
.main-nav .dropdown:focus-within > .dropdown-menu,
.main-nav .dropdown.open > .dropdown-menu,
.footer-nav .footer-dropdown:hover > .dropdown-menu,
.footer-nav .footer-dropdown:focus-within > .dropdown-menu,
.footer-nav .footer-dropdown.open > .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  translate: -50% 0 !important;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active,
.dropdown-menu a.is-active {
  background: rgba(0, 141, 210, .12) !important;
  color: var(--dark-grey) !important;
  font-weight: 800 !important;
}

@media (max-width: 980px) {
  .main-nav .dropdown-menu,
  .footer-nav .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    translate: -50% 0 !important;
    min-width: 190px !important;
    padding: .65rem !important;
    background: var(--white) !important;
    border-top: 4px solid var(--blue) !important;
    box-shadow: var(--shadow) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    grid-template-columns: 1fr !important;
  }
  .main-nav .dropdown:hover > .dropdown-menu,
  .main-nav .dropdown:focus-within > .dropdown-menu,
  .main-nav .dropdown.open > .dropdown-menu,
  .footer-nav .footer-dropdown:hover > .dropdown-menu,
  .footer-nav .footer-dropdown:focus-within > .dropdown-menu,
  .footer-nav .footer-dropdown.open > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* Dentures is the only clickable Services dropdown item. Other services display as non-linked offerings. */
.dropdown-menu .dropdown-item,
.footer-nav .dropdown-menu .dropdown-item {
  display: block !important;
  padding: .45rem .55rem !important;
  border-radius: 3px !important;
  color: var(--dark-grey) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: default !important;
  text-decoration: none !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.footer-nav .dropdown-menu .dropdown-item:hover,
.footer-nav .dropdown-menu .dropdown-item:focus {
  background: transparent !important;
  color: var(--dark-grey) !important;
  font-weight: 600 !important;
}

.dropdown-menu a[href="dentures.html"] {
  display: block !important;
}

/* --- 2026-06-23 final Services dropdown visual match ---
   Header and footer Services dropdowns use the same menu styling.
   Non-linked service names stay visible; Dentures is the only clickable item. */
.main-nav .dropdown-menu,
.footer-nav .dropdown-menu {
  min-width: 190px !important;
  padding: .65rem !important;
  background: var(--white) !important;
  border-top: 4px solid var(--blue) !important;
  box-shadow: var(--shadow) !important;
  text-align: left !important;
  text-transform: none !important;
  gap: .1rem !important;
}

.main-nav .dropdown-menu a,
.main-nav .dropdown-menu .dropdown-item,
.footer-nav .dropdown-menu a,
.footer-nav .dropdown-menu .dropdown-item {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: .45rem .55rem !important;
  border-radius: 3px !important;
  text-align: left !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  background: transparent !important;
  color: var(--dark-grey) !important;
  font-weight: 600 !important;
}

.main-nav .dropdown-menu a[href="dentures.html"],
.footer-nav .dropdown-menu a[href="dentures.html"] {
  color: var(--blue) !important;
  background: transparent !important;
  font-weight: 600 !important;
}

.main-nav .dropdown-menu a[href="dentures.html"]:hover,
.main-nav .dropdown-menu a[href="dentures.html"]:focus,
.main-nav .dropdown-menu a[href="dentures.html"]:active,
.main-nav .dropdown-menu a[href="dentures.html"].is-active,
.footer-nav .dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .dropdown-menu a[href="dentures.html"]:active,
.footer-nav .dropdown-menu a[href="dentures.html"].is-active {
  color: var(--blue) !important;
  background: transparent !important;
  font-weight: 600 !important;
  text-align: left !important;
}

.main-nav .dropdown-menu .dropdown-item:hover,
.main-nav .dropdown-menu .dropdown-item:focus,
.footer-nav .dropdown-menu .dropdown-item:hover,
.footer-nav .dropdown-menu .dropdown-item:focus {
  background: transparent !important;
  color: var(--dark-grey) !important;
  font-weight: 600 !important;
}

@media (max-width: 980px) {
  .main-nav .dropdown-menu,
  .footer-nav .dropdown-menu {
    min-width: 190px !important;
    width: auto !important;
    text-align: left !important;
  }

  .main-nav .dropdown-menu a,
  .main-nav .dropdown-menu .dropdown-item,
  .footer-nav .dropdown-menu a,
  .footer-nav .dropdown-menu .dropdown-item {
    padding: .45rem .55rem !important;
    text-align: left !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}


/* --- 2026-06-23 corrected Services dropdown match ---
   Make BOTH the header and footer Services dropdowns match the requested screenshot.
   All service names stay left-aligned; Dentures is the only linked service and keeps the light-blue highlight. */
.main-nav .dropdown-menu,
.footer-nav .dropdown-menu,
.footer-nav .footer-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  translate: -50% 0 !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  padding: .65rem !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .1rem !important;
  background: var(--white) !important;
  border-top: 4px solid var(--blue) !important;
  box-shadow: var(--shadow) !important;
  text-align: left !important;
  text-transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 3000 !important;
}

.main-nav .dropdown:hover > .dropdown-menu,
.main-nav .dropdown:focus-within > .dropdown-menu,
.main-nav .dropdown.open > .dropdown-menu,
.footer-nav .footer-dropdown:hover > .dropdown-menu,
.footer-nav .footer-dropdown:focus-within > .dropdown-menu,
.footer-nav .footer-dropdown.open > .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  translate: -50% 0 !important;
}

.main-nav .dropdown-menu a,
.main-nav .dropdown-menu .dropdown-item,
.footer-nav .dropdown-menu a,
.footer-nav .dropdown-menu .dropdown-item,
.footer-nav .footer-dropdown-menu a,
.footer-nav .footer-dropdown-menu .dropdown-item {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: .45rem .55rem !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--dark-grey) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transform: none !important;
}

.main-nav .dropdown-menu a[href="dentures.html"],
.main-nav .dropdown-menu a[href="dentures.html"]:hover,
.main-nav .dropdown-menu a[href="dentures.html"]:focus,
.main-nav .dropdown-menu a[href="dentures.html"]:active,
.main-nav .dropdown-menu a[href="dentures.html"].is-active,
.footer-nav .dropdown-menu a[href="dentures.html"],
.footer-nav .dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .dropdown-menu a[href="dentures.html"]:active,
.footer-nav .dropdown-menu a[href="dentures.html"].is-active,
.footer-nav .footer-dropdown-menu a[href="dentures.html"],
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:active,
.footer-nav .footer-dropdown-menu a[href="dentures.html"].is-active {
  background: rgba(0, 141, 210, .12) !important;
  color: var(--dark-grey) !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.main-nav .dropdown-menu .dropdown-item:hover,
.main-nav .dropdown-menu .dropdown-item:focus,
.footer-nav .dropdown-menu .dropdown-item:hover,
.footer-nav .dropdown-menu .dropdown-item:focus,
.footer-nav .footer-dropdown-menu .dropdown-item:hover,
.footer-nav .footer-dropdown-menu .dropdown-item:focus {
  background: transparent !important;
  color: var(--dark-grey) !important;
}

@media (max-width: 980px) {
  .main-nav .dropdown,
  .footer-nav .footer-dropdown {
    position: relative !important;
    width: auto !important;
  }

  .main-nav .dropdown-menu,
  .footer-nav .dropdown-menu,
  .footer-nav .footer-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    translate: -50% 0 !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    padding: .65rem !important;
    margin: 0 !important;
    background: var(--white) !important;
    border-top: 4px solid var(--blue) !important;
    box-shadow: var(--shadow) !important;
    text-align: left !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .main-nav .dropdown:hover > .dropdown-menu,
  .main-nav .dropdown:focus-within > .dropdown-menu,
  .main-nav .dropdown.open > .dropdown-menu,
  .footer-nav .footer-dropdown:hover > .dropdown-menu,
  .footer-nav .footer-dropdown:focus-within > .dropdown-menu,
  .footer-nav .footer-dropdown.open > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    translate: -50% 0 !important;
  }

  .main-nav .dropdown-menu a,
  .main-nav .dropdown-menu .dropdown-item,
  .footer-nav .dropdown-menu a,
  .footer-nav .dropdown-menu .dropdown-item,
  .footer-nav .footer-dropdown-menu a,
  .footer-nav .footer-dropdown-menu .dropdown-item {
    width: 100% !important;
    padding: .45rem .55rem !important;
    margin: 0 !important;
    text-align: left !important;
    transform: none !important;
  }
}


/* Dropdown consistency update */
.dropdown-menu a{
  color: var(--dark-grey) !important;
  font-weight: 400 !important;
  text-align:left !important;
  display:block;
  padding:.55rem .75rem !important;
}
.dropdown-menu a[href="dentures.html"]:hover,
.dropdown-menu a[href="dentures.html"]:focus{
  background: rgba(0,141,210,.18) !important;
  color: var(--dark-grey) !important;
  font-weight:400 !important;
}
.dropdown-menu a:not([href="dentures.html"]){
  pointer-events:none;
  cursor:default;
}
@media (max-width:980px){
  .dropdown-menu{
    grid-template-columns:1fr !important;
    padding-left:0 !important;
  }
  .dropdown-menu a{
    margin-left:0 !important;
    text-indent:0 !important;
  }
}

/* --- 2026-06-23 FINAL regular-weight Services dropdown correction ---
   Header and footer service names must be regular weight dark grey.
   Dentures is the only clickable service and only gets the blue background on hover/focus. */
.main-nav .dropdown-menu a,
.main-nav .dropdown-menu span,
.main-nav .dropdown-menu .dropdown-item,
.footer-nav .dropdown-menu a,
.footer-nav .dropdown-menu span,
.footer-nav .dropdown-menu .dropdown-item,
.footer-nav .footer-dropdown-menu a,
.footer-nav .footer-dropdown-menu span,
.footer-nav .footer-dropdown-menu .dropdown-item {
  font-family: inherit !important;
  font-weight: 400 !important;
  color: var(--dark-grey) !important;
  background: transparent !important;
  text-align: left !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: .45rem .55rem !important;
  margin: 0 !important;
  border-radius: 3px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.main-nav .dropdown-menu a[href="dentures.html"],
.main-nav .dropdown-menu a[href="dentures.html"].is-active,
.footer-nav .dropdown-menu a[href="dentures.html"],
.footer-nav .dropdown-menu a[href="dentures.html"].is-active,
.footer-nav .footer-dropdown-menu a[href="dentures.html"],
.footer-nav .footer-dropdown-menu a[href="dentures.html"].is-active {
  font-weight: 400 !important;
  color: var(--dark-grey) !important;
  background: transparent !important;
}

.main-nav .dropdown-menu a[href="dentures.html"]:hover,
.main-nav .dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:focus {
  font-weight: 400 !important;
  color: var(--dark-grey) !important;
  background: rgba(0, 141, 210, .18) !important;
}

.main-nav .dropdown-menu .dropdown-item:hover,
.main-nav .dropdown-menu .dropdown-item:focus,
.footer-nav .dropdown-menu .dropdown-item:hover,
.footer-nav .dropdown-menu .dropdown-item:focus,
.footer-nav .footer-dropdown-menu .dropdown-item:hover,
.footer-nav .footer-dropdown-menu .dropdown-item:focus {
  font-weight: 400 !important;
  color: var(--dark-grey) !important;
  background: transparent !important;
}

/* --- 2026-06-23 Dentures-only hover emphasis ---
   Keep every Services dropdown item regular by default.
   On hover/focus, Dentures only becomes bold dark grey with the soft blue background. */
.main-nav .dropdown-menu a[href="dentures.html"]:hover,
.main-nav .dropdown-menu a[href="dentures.html"]:focus,
.main-nav .dropdown-menu a[href="dentures.html"]:focus-visible,
.footer-nav .dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus-visible,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:focus-visible {
  font-weight: 800 !important;
  color: var(--dark-grey) !important;
  background: rgba(0, 141, 210, .18) !important;
}


/* --- 2026-06-23 footer Services trigger size fix ---
   Keep the FOOTER "Services" trigger the same size/weight as HOME, MEET THE DOCTORS, and CONTACT
   on smaller screens and desktop. This only affects the footer trigger, not the dropdown items. */
.footer-nav .footer-dropdown > .dropdown-button,
.footer-nav .footer-dropdown > .dropdown-button:link,
.footer-nav .footer-dropdown > .dropdown-button:visited,
.footer-nav .footer-dropdown > .dropdown-button:hover,
.footer-nav .footer-dropdown > .dropdown-button:focus,
.footer-nav .footer-dropdown > .dropdown-button:active {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: var(--dark-grey) !important;
  text-transform: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.footer-nav .footer-dropdown > .dropdown-button span {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--blue) !important;
  font-weight: 900 !important;
}

/* Preserve current Services dropdown requirement:
   menu items are regular by default, and Dentures only becomes bold on hover/focus. */
.main-nav .dropdown-menu a,
.main-nav .dropdown-menu span,
.main-nav .dropdown-menu .dropdown-item,
.footer-nav .dropdown-menu a,
.footer-nav .dropdown-menu span,
.footer-nav .dropdown-menu .dropdown-item,
.footer-nav .footer-dropdown-menu a,
.footer-nav .footer-dropdown-menu span,
.footer-nav .footer-dropdown-menu .dropdown-item {
  font-weight: 400 !important;
  color: var(--dark-grey) !important;
}

.main-nav .dropdown-menu a[href="dentures.html"]:hover,
.main-nav .dropdown-menu a[href="dentures.html"]:focus,
.main-nav .dropdown-menu a[href="dentures.html"]:focus-visible,
.footer-nav .dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .dropdown-menu a[href="dentures.html"]:focus-visible,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:hover,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:focus,
.footer-nav .footer-dropdown-menu a[href="dentures.html"]:focus-visible {
  font-weight: 800 !important;
  color: var(--dark-grey) !important;
  background: rgba(0, 141, 210, .18) !important;
}

/* --- 2026-06-23 footer Services vertical alignment FINAL ---
   The footer Services trigger was sitting slightly higher than the other footer nav links.
   This keeps the size the same and lowers only the Services trigger so the text baseline lines up. */
.footer-nav {
  align-items: baseline !important;
}

.footer-nav .footer-dropdown {
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-nav .footer-dropdown > .dropdown-button {
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: inherit !important;
  position: relative !important;
  top: 1px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-nav .footer-dropdown > .dropdown-button span {
  display: inline-block !important;
  line-height: 1 !important;
  margin-left: 3px !important;
  position: relative !important;
  top: 0 !important;
}


/* FINAL FIX: footer SERVICES label size + baseline alignment */
.footer-nav .footer-dropdown > a,
.footer-nav .footer-dropdown > button,
.footer-nav .footer-dropdown .dropbtn,
.footer-nav .footer-dropdown .dropdown-toggle,
.footer-nav .footer-services-link,
.footer-nav .footer-services-toggle,
.footer-nav .services-toggle,
.footer-nav .services-link {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  vertical-align: baseline !important;
  transform: translateY(-1px) !important;
  display: inline-flex !important;
  align-items: baseline !important;
}

.footer-nav .footer-dropdown {
  line-height: inherit !important;
  vertical-align: baseline !important;
  display: inline-flex !important;
  align-items: baseline !important;
  transform: none !important;
}

.footer-nav .footer-dropdown .dropdown-arrow,
.footer-nav .footer-dropdown .arrow,
.footer-nav .footer-dropdown i,
.footer-nav .footer-dropdown svg {
  vertical-align: baseline !important;
  transform: translateY(0px) !important;
}


/* 2026-06-23 RESTORE MOBILE HERO LAYOUT
   Keeps the General Dentistry box and Make Appointment button stacked
   like the approved smaller-screen version. */
@media (max-width: 760px) {
  html body .hero .hero-inner {
    min-height: 440px !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  html body .hero .hero-inner .hero-copy {
    --hero-box-width: clamp(220px, 58vw, 235px) !important;
    width: var(--hero-box-width) !important;
    max-width: var(--hero-box-width) !important;
    align-items: stretch !important;
  }

  html body .hero .hero-inner .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 7.4vw, 2.32rem) !important;
    line-height: .94 !important;
    padding: 1.1rem 1.05rem 1.15rem 1.55rem !important;
    margin: 0 0 .75rem 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  html body .hero .hero-inner .hero-copy h1::before {
    left: 0 !important;
  }

  html body .hero .hero-inner .hero-copy h1::after {
    left: 12px !important;
  }

  html body .hero .hero-inner .hero-copy .button-appointment {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  html body .hero .hero-inner .hero-copy {
    --hero-box-width: 225px !important;
  }

  html body .hero .hero-inner .hero-copy h1 {
    font-size: 2rem !important;
    padding: 1rem 1rem 1.05rem 1.5rem !important;
  }
}

@media (max-width: 344px) {
  html body .hero .hero-inner .hero-copy {
    --hero-box-width: 220px !important;
  }

  html body .hero .hero-inner .hero-copy h1 {
    font-size: 1.92rem !important;
  }
}


/* 2026-06-23 MOBILE HERO BUTTON READABILITY FIX
   Keeps the appointment button readable on small screens. */
@media (max-width: 760px) {
  html body .hero .hero-inner .hero-copy .button-appointment,
  html body .hero .hero-inner .hero-copy a.button-appointment,
  html body .hero .hero-inner .hero-copy .btn,
  html body .hero .hero-inner .hero-copy a.btn {
    font-size: clamp(0.82rem, 3vw, 0.95rem) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    padding: 0.85rem 0.65rem !important;
    min-height: 46px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  html body .hero .hero-inner .hero-copy .button-appointment,
  html body .hero .hero-inner .hero-copy a.button-appointment,
  html body .hero .hero-inner .hero-copy .btn,
  html body .hero .hero-inner .hero-copy a.btn {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 344px) {
  html body .hero .hero-inner .hero-copy .button-appointment,
  html body .hero .hero-inner .hero-copy a.button-appointment,
  html body .hero .hero-inner .hero-copy .btn,
  html body .hero .hero-inner .hero-copy a.btn {
    font-size: 0.78rem !important;
  }
}


/* 2026-06-23 HERO BUTTON TEXT ENLARGED FOR MOBILE */
@media (max-width: 760px) {
  html body .hero .hero-inner .hero-copy .button-appointment,
  html body .hero .hero-inner .hero-copy a.button-appointment,
  html body .hero .hero-inner .hero-copy .btn,
  html body .hero .hero-inner .hero-copy a.btn {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 430px) {
  html body .hero .hero-inner .hero-copy .button-appointment,
  html body .hero .hero-inner .hero-copy a.button-appointment,
  html body .hero .hero-inner .hero-copy .btn,
  html body .hero .hero-inner .hero-copy a.btn {
    font-size: 1rem !important;
  }
}

@media (max-width: 344px) {
  html body .hero .hero-inner .hero-copy .button-appointment,
  html body .hero .hero-inner .hero-copy a.button-appointment,
  html body .hero .hero-inner .hero-copy .btn,
  html body .hero .hero-inner .hero-copy a.btn {
    font-size: 0.95rem !important;
  }
}


/* FINAL MOBILE CTA SIZE FIX */
@media (max-width: 430px) {
  .button-appointment,
  a.button-appointment,
  .hero .button-appointment,
  .hero a.button-appointment {
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 344px) {
  .button-appointment,
  a.button-appointment,
  .hero .button-appointment,
  .hero a.button-appointment {
    font-size: 1.35rem !important;
  }
}


/* MAKE AN APPOINTMENT button text enlargement */
@media (max-width: 760px) {
  .hero .cta-button,
  .hero .appointment-btn,
  .hero a[href*="contact"],
  .hero .hero-copy a,
  .hero .hero-copy .btn-primary {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero .cta-button,
  .hero .appointment-btn,
  .hero a[href*="contact"],
  .hero .hero-copy a,
  .hero .hero-copy .btn-primary {
    font-size: 1.5rem !important;
  }
}


/* FORCE MAKE AN APPOINTMENT MOBILE TEXT SIZE */
@media (max-width: 768px){
  .hero-cta,
  .hero-btn,
  .appointment-button,
  .button-appointment,
  .hero a,
  .hero .btn,
  .hero .cta-button{
      font-size: 28px !important;
      font-weight: 700 !important;
      line-height: 1.1 !important;
      text-transform: uppercase !important;
  }
}


/* FINAL EXACT HERO MAKE AN APPOINTMENT MOBILE FIX
   This uses the exact HTML selector so it overrides the older shrink rules. */
@media (max-width: 760px) {
  html body .hero .container.hero-inner .hero-copy a.button.button-appointment,
  html body section.hero .container.hero-inner .hero-copy a.button.button-appointment,
  html body .hero .hero-inner .hero-copy a.button.button-appointment {
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media (max-width: 390px) {
  html body .hero .container.hero-inner .hero-copy a.button.button-appointment,
  html body section.hero .container.hero-inner .hero-copy a.button.button-appointment,
  html body .hero .hero-inner .hero-copy a.button.button-appointment {
    font-size: 1.42rem !important;
  }
}

@media (max-width: 344px) {
  html body .hero .container.hero-inner .hero-copy a.button.button-appointment,
  html body section.hero .container.hero-inner .hero-copy a.button.button-appointment,
  html body .hero .hero-inner .hero-copy a.button.button-appointment {
    font-size: 1.3rem !important;
  }
}


/* FINAL REAL FIX: mobile MAKE AN APPOINTMENT text span created by JS */
@media (max-width: 760px) {
  .hero .button-appointment .appointment-text-fit {
    font-size: 14px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
  }
}
@media (max-width: 390px) {
  .hero .button-appointment .appointment-text-fit {
    font-size: 13px !important;
  }
}
@media (max-width: 344px) {
  .hero .button-appointment .appointment-text-fit {
    font-size: 12px !important;
  }
}


/* 2026-06-23 FOOTER DROPDOWN HOVER BEHAVIOR FINAL
   Makes the footer SERVICES dropdown behave like the top navigation. */
.site-footer,
.site-footer .container,
.site-footer .footer-grid,
.site-footer .footer-nav {
  overflow: visible !important;
}

.site-footer .footer-nav {
  position: relative !important;
  z-index: 100 !important;
}

.site-footer .footer-nav .footer-dropdown.dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: auto !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  z-index: 1000 !important;
}

/* SERVICES footer trigger: match other footer nav links and do not navigate */
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default !important;
  color: #665c58 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

/* Footer dropdown is hidden by default on every screen size */
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important; /* no gap, so hover does not break */
  left: 0 !important;
  z-index: 99999 !important;
  min-width: 190px !important;
  width: 190px !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  background: #f7f7f7 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
  text-align: left !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

/* Keep dropdown open while hovering/focusing either SERVICES or the dropdown itself */
.site-footer .footer-nav .footer-dropdown.dropdown:hover > .dropdown-menu.footer-dropdown-menu,
.site-footer .footer-nav .footer-dropdown.dropdown:focus-within > .dropdown-menu.footer-dropdown-menu,
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu:hover {
  display: block !important;
}

/* Footer dropdown items */
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > span,
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > a,
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > a:link,
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > a:visited {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 18px !important;
  margin: 0 !important;
  text-align: left !important;
  text-indent: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: #665c58 !important;
  background: transparent !important;
}

/* Dentures is the only active footer dropdown link */
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > a[href*="dentures"] {
  padding-left: 18px !important;
  margin-left: 0 !important;
  color: #665c58 !important;
  font-weight: 400 !important;
}

.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > a[href*="dentures"]:hover,
.site-footer .footer-nav .footer-dropdown.dropdown > .dropdown-menu.footer-dropdown-menu > a[href*="dentures"]:focus {
  background: rgba(0, 141, 210, .16) !important;
  color: #665c58 !important;
  font-weight: 700 !important;
}