/* =====================================================
   BASE / ELEMENTOR RESET
===================================================== */

.dis-te-replace7,
.dis-te-replace7 *,
.dis-te-replace7 *::before,
.dis-te-replace7 *::after {
  box-sizing: border-box;
}

.dis-te-replace7 {
  --rep7-gold: #d1a04a;
  --rep7-gold-light: #e5bb74;
  --rep7-dark: #253035;

  position: relative;
  isolation: isolate;

  display: block;
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;

  scroll-margin-top: 100px;

  background: #f8f6f0;
  color: #293337;

  font-family: "Montserrat", Arial, sans-serif;
}


/* =====================================================
   CONTAINER
===================================================== */

.dis-te-replace7__container {
  width: calc(100% - 64px);
  max-width: 1400px;

  margin: 0 auto;
  padding: 100px 0 110px;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.dis-te-replace7__heading-row {
  display: block;

  width: 100%;

  margin: 0 0 45px;
  padding: 0 0 30px;

  border-bottom: 1px solid #d8d7cf;
}

.dis-te-replace7__eyebrow {
  display: flex;
  align-items: center;

  gap: 13px;
  margin: 0 0 22px;

  color: #99713a;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;
  letter-spacing: 1.2px;
}

.dis-te-replace7__eyebrow > span {
  display: block;

  flex: 0 0 48px;
  width: 48px;
  height: 2px;

  background: var(--rep7-gold);
}


/* =====================================================
   HEADING
===================================================== */

.dis-te-replace7 h2,
.dis-te-replace7 #dis-te-replace7-title {
  max-width: 1050px;

  margin: 0;
  padding: 0;

  color: var(--rep7-dark);

  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(46px, 4.8vw, 69px);
  font-weight: 600;

  line-height: 1.11;
  letter-spacing: -.4px;

  text-align: left;
  text-transform: none;
}

.dis-te-replace7 h2 em {
  display: block;

  color: #a87a38;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  font-style: normal;
}


/* =====================================================
   MAIN GRID
===================================================== */

.dis-te-replace7__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, .95fr);

  align-items: center;

  gap: clamp(45px, 6.2vw, 100px);
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.dis-te-replace7__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* =====================================================
   MAIN DESCRIPTION
===================================================== */

.dis-te-replace7 .dis-te-replace7__description {
  width: 100%;
  max-width: 740px;

  margin: 0;
  padding: 0;

  color: #526066;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;

  line-height: 1.85;
  letter-spacing: 0;

  text-align: left;
}


/* =====================================================
   IMPLANT HIGHLIGHT PANEL

   REPLACES THE TWO-OPTION COMPARISON
===================================================== */

.dis-te-replace7__implant-panel {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  gap: 0;

  margin: 34px 0 0;
  padding: 28px 30px 32px;

  background: #eee8db;

  border-left: 4px solid var(--rep7-gold);
}


/* PANEL TOP */

.dis-te-replace7__panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  width: 100%;

  margin: 0 0 17px;
}


/* SMALL EYEBROW */

.dis-te-replace7__panel-accent {
  color: #976d33;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;
  letter-spacing: .9px;
}


/* SECTION NUMBER */

.dis-te-replace7__panel-number {
  color: #b68a49;

  font-family: "Oswald", Impact, sans-serif;
  font-size: 28px;
  font-weight: 500;

  line-height: 1;
}


/* =====================================================
   DENTAL IMPLANTS HEADING
===================================================== */

.dis-te-replace7 .dis-te-replace7__implant-panel h3 {
  margin: 0 0 11px;
  padding: 0;

  color: #273237;

  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(35px, 3.2vw, 47px);
  font-weight: 500;

  line-height: 1.2;
  letter-spacing: -.2px;

  text-align: left;
  text-transform: none;
}


/* IMPLANT EXPLANATION */

.dis-te-replace7 .dis-te-replace7__implant-panel p {
  margin: 0;
  padding: 0;

  color: #586367;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;

  line-height: 1.78;
  text-align: left;
}


/* DECORATIVE PANEL RULE */

.dis-te-replace7__panel-rule {
  display: block;

  width: 65px;
  height: 2px;

  margin-top: 22px;

  background: var(--rep7-gold);
}


/* =====================================================
   PROMINENT GOLD BUTTON

   BEFORE:
   Dark background
   15px text
   61px height

   AFTER:
   Gold background
   17px bold text
   68px minimum height
   Larger horizontal footprint
===================================================== */

.dis-te-replace7 .dis-te-replace7__cta,
.dis-te-replace7 .dis-te-replace7__cta:visited {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  min-width: 315px;
  min-height: 68px;

  margin: 30px 0 0;
  padding: 18px 25px;

  background: var(--rep7-gold);
  color: #253035;

  border: 1px solid var(--rep7-gold);
  border-radius: 0;

  box-shadow:
    0 12px 27px rgba(120, 85, 32, .16);

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;

  line-height: 1.4;
  letter-spacing: 0;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


/* CTA ARROW */

.dis-te-replace7__cta svg {
  display: block;

  flex: 0 0 22px;

  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform .2s ease;
}


/* HOVER */

.dis-te-replace7 .dis-te-replace7__cta:hover {
  background: #e7bb6f;
  border-color: #e7bb6f;

  color: #253035;

  box-shadow:
    0 18px 32px rgba(120, 85, 32, .23);

  transform: translateY(-3px);
}

.dis-te-replace7__cta:hover svg {
  transform: translateX(4px);
}


/* KEYBOARD ACCESSIBILITY */

.dis-te-replace7 .dis-te-replace7__cta:focus-visible {
  outline: 3px solid #253035;
  outline-offset: 4px;
}


/* =====================================================
   RIGHT: ORIGINAL IMPLANT ILLUSTRATION MODULE
===================================================== */

.dis-te-replace7__visual {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  min-height: 555px;

  margin: 0;
  padding: 27px 30px;

  background: linear-gradient(
    140deg,
    #222d32,
    #354046
  );

  border: 1px solid rgba(205,160,82,.4);
}


/* =====================================================
   IMAGE MODULE HEADER
===================================================== */

.dis-te-replace7__visual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  gap: 10px 20px;

  color: var(--rep7-gold-light);

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;
  letter-spacing: .65px;
}

.dis-te-replace7__visual-number {
  color: rgba(255,255,255,.65);
}


/* =====================================================
   ORIGINAL IMPLANT IMAGE
===================================================== */

.dis-te-replace7__image-area {
  position: relative;

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

  flex: 1 1 auto;

  width: 100%;
  min-width: 0;
  min-height: 390px;

  padding: 26px;
  overflow: hidden;
}


/* SOFT IMAGE GLOW */

.dis-te-replace7__image-glow {
  position: absolute;

  width: 380px;
  max-width: 90%;

  aspect-ratio: 1 / 1;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(224,178,98,.16),
    transparent 68%
  );

  pointer-events: none;
}


/* ILLUSTRATION */

.dis-te-replace7__image-area img {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-width: 100%;

  height: 355px;

  margin: 0;
  padding: 0;

  border: 0;

  object-fit: contain;
  object-position: center;

  filter:
    drop-shadow(0 18px 24px rgba(0,0,0,.2));

  transition: transform .5s ease;
}

.dis-te-replace7__visual:hover img {
  transform: scale(1.04);
}


/* INNER FRAME */

.dis-te-replace7__frame {
  position: absolute;

  inset: 20px;

  border:
    1px solid rgba(226,184,111,.18);

  pointer-events: none;
}


/* =====================================================
   IMAGE CAPTION
===================================================== */

.dis-te-replace7__visual-bottom {
  display: flex;
  align-items: center;

  gap: 18px;

  padding-top: 21px;

  border-top:
    1px solid rgba(255,255,255,.18);
}

.dis-te-replace7__visual-bottom-rule {
  display: block;

  flex: 0 0 3px;

  width: 3px;
  height: 55px;

  background: var(--rep7-gold);
}

.dis-te-replace7__visual-bottom div {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.dis-te-replace7__visual-bottom div > span {
  color: #e3b875;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;
  letter-spacing: .6px;
}

.dis-te-replace7__visual-bottom strong {
  color: #ffffff;

  font-family: "Oswald", Impact, sans-serif;
  font-size: 27px;
  font-weight: 500;

  line-height: 1.22;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1030px) {

  .dis-te-replace7__container {
    width: calc(100% - 44px);

    padding: 85px 0 95px;
  }

  .dis-te-replace7__layout {
    grid-template-columns: 1fr;

    gap: 43px;
  }

  .dis-te-replace7__content {
    max-width: 850px;
  }

  .dis-te-replace7__visual {
    max-width: 760px;
    min-height: 500px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  .dis-te-replace7__container {
    width: calc(100% - 36px);
    padding: 70px 0 78px;
  }

  .dis-te-replace7__heading-row {
    margin-bottom: 31px;
    padding-bottom: 26px;
  }

  .dis-te-replace7__eyebrow {
    margin-bottom: 20px;

    font-size: 13px;
    letter-spacing: .65px;

    gap: 10px;
  }

  .dis-te-replace7__eyebrow > span {
    flex-basis: 30px;
    width: 30px;
  }

  .dis-te-replace7 h2,
  .dis-te-replace7 #dis-te-replace7-title {
    font-size: 41px;
    line-height: 1.13;
  }

  .dis-te-replace7__layout {
    gap: 35px;
  }

  .dis-te-replace7 .dis-te-replace7__description {
    font-size: 16px;
    line-height: 1.8;
  }

  /* SINGLE IMPLANT PANEL */

  .dis-te-replace7__implant-panel {
    margin-top: 27px;
    padding: 24px 22px 27px;
  }

  .dis-te-replace7__panel-accent {
    font-size: 13px;
    letter-spacing: .5px;
  }

  .dis-te-replace7 .dis-te-replace7__implant-panel h3 {
    font-size: 36px;
  }

  .dis-te-replace7 .dis-te-replace7__implant-panel p {
    font-size: 16px;
    line-height: 1.75;
  }


  /* FULL-WIDTH PROMINENT CTA */

  .dis-te-replace7 .dis-te-replace7__cta,
  .dis-te-replace7 .dis-te-replace7__cta:visited {
    display: flex;

    width: 100%;
    min-width: 0;

    min-height: 67px;

    margin-top: 25px;
    padding: 17px 21px;

    font-size: 17px;
    font-weight: 700;
  }


  /* ILLUSTRATION */

  .dis-te-replace7__visual {
    min-height: 440px;
    padding: 22px;
  }

  .dis-te-replace7__visual-top {
    font-size: 13px;
  }

  .dis-te-replace7__image-area {
    min-height: 300px;
    padding: 12px;
  }

  .dis-te-replace7__image-area img {
    height: 280px;
  }

  .dis-te-replace7__visual-bottom strong {
    font-size: 24px;
  }

}


/* =====================================================
   SMALL MOBILE — 320PX+
===================================================== */

@media (max-width: 420px) {

  .dis-te-replace7__container {
    width: calc(100% - 30px);
  }

  .dis-te-replace7 h2,
  .dis-te-replace7 #dis-te-replace7-title {
    font-size: 36px;
  }

  .dis-te-replace7__implant-panel {
    padding: 22px 18px 25px;
  }

  .dis-te-replace7 .dis-te-replace7__implant-panel h3 {
    font-size: 33px;
  }

  .dis-te-replace7 .dis-te-replace7__cta,
  .dis-te-replace7 .dis-te-replace7__cta:visited {
    gap: 13px;
    padding: 17px;

    font-size: 16px;
  }

  .dis-te-replace7__visual {
    min-height: 390px;
    padding: 17px;
  }

  .dis-te-replace7__image-area {
    min-height: 255px;
    padding: 7px;
  }

  .dis-te-replace7__image-area img {
    height: 235px;
  }

  .dis-te-replace7__visual-bottom strong {
    font-size: 23px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .dis-te-replace7__image-area img,
  .dis-te-replace7__cta,
  .dis-te-replace7__cta svg {
    transition: none;
  }

}