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

.dis-di-what-v1,
.dis-di-what-v1 *,
.dis-di-what-v1 *::before,
.dis-di-what-v1 *::after {
  box-sizing: border-box;
}

.dis-di-what-v1 {
  --what-dark: #273034;
  --what-gold: #c79645;
  --what-text: #505d60;

  position: relative;
  isolation: isolate;

  display: block;
  width: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #e8ebe9;
  color: #273034;

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


/* ======================================================
   CONTAINER & LAYOUT
====================================================== */

.dis-di-what-v1__container {
  width: calc(100% - 64px);
  max-width: 1400px;

  margin: 0 auto;
  padding: 115px 0 120px;
}

.dis-di-what-v1__layout {
  display: grid;

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

  align-items: center;

  gap: clamp(55px, 6vw, 100px);

  margin: 0 0 65px;
}


/* ======================================================
   IMPLANT IMAGE PANEL
====================================================== */

.dis-di-what-v1__visual {
  min-width: 0;
  width: 100%;
}

.dis-di-what-v1__visual-frame {
  position: relative;

  width: 100%;

  border: 1px solid rgba(43,51,55,.16);
  background: #f5f4f1;

  box-shadow:
    0 23px 52px rgba(35,43,45,.075);
}

.dis-di-what-v1__visual-frame::before {
  content: "";

  position: absolute;
  z-index: 2;

  left: -15px;
  top: -15px;

  width: 80px;
  height: 80px;

  border-top: 2px solid var(--what-gold);
  border-left: 2px solid var(--what-gold);

  pointer-events: none;
}

.dis-di-what-v1__image {
  position: relative;

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

  width: 100%;
  height: 495px;

  padding: 42px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      #ffffff 0%,
      #f1f0eb 67%,
      #e6e7e2 100%
    );
}

.dis-di-what-v1__image img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 470px;
  max-height: 420px;

  margin: 0;
  padding: 0;
  border: 0;

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

  filter:
    drop-shadow(0 15px 17px rgba(47,50,49,.13));

  transition: transform .5s ease;
}

.dis-di-what-v1__visual:hover img {
  transform: scale(1.035);
}


/* ======================================================
   IMAGE FOOTER
====================================================== */

.dis-di-what-v1__image-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  min-height: 66px;

  padding: 15px 23px;

  background: #273034;
  color: #efc476;

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

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

.dis-di-what-v1__image-footer span:last-child {
  flex: 0 0 auto;

  color: rgba(255,255,255,.72);

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

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


/* ======================================================
   TEXT CONTENT
====================================================== */

.dis-di-what-v1__content {
  min-width: 0;
  width: 100%;
}

.dis-di-what-v1__eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;
  margin: 0 0 23px;

  color: #a47736;

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

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

.dis-di-what-v1__eyebrow > span {
  display: block;

  flex: 0 0 51px;

  width: 51px;
  height: 2px;

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


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

.dis-di-what-v1 h2 {
  margin: 0;
  padding: 0;

  color: #273034;

  font-family: "Oswald", Impact, sans-serif;
  font-size: clamp(48px, 4.6vw, 68px);
  font-weight: 600;

  line-height: 1.1;
  letter-spacing: -.5px;

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

.dis-di-what-v1 h2 span {
  display: block;

  color: #a87732;
  font: inherit;
}


/* ======================================================
   GOLD RULE
====================================================== */

.dis-di-what-v1__rule {
  width: 85px;
  height: 2px;

  margin: 29px 0;

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


/* ======================================================
   PARAGRAPHS
====================================================== */

.dis-di-what-v1__content p {
  margin: 0 0 24px;
  padding: 0;

  color: var(--what-text);

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

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

  text-align: left;
}

.dis-di-what-v1__content p:last-child {
  margin-bottom: 0;
}


/* ======================================================
   THREE COMPONENTS — UPDATED STRIP
====================================================== */

.dis-di-what-v1__parts {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0;

  width: 100%;

  background: #f9f8f5;

  border:
    1px solid rgba(43,51,55,.15);
}


/* ======================================================
   COMPONENT ITEM — VERTICAL CENTERING FIX
====================================================== */

/*
  The original version used:

  display: flex;
  align-items: flex-start;

  That aligned the numbers toward the top.

  The new grid centers the number alongside
  the combined heading + description block.
*/

.dis-di-what-v1__part {
  display: grid;

  grid-template-columns:
    58px minmax(0, 1fr);

  align-items: center;

  column-gap: 22px;

  min-width: 0;
  min-height: 137px;

  margin: 0;
  padding: 28px 28px;

  border-right:
    1px solid rgba(43,51,55,.12);
}

.dis-di-what-v1__part:last-child {
  border-right: 0;
}


/* ======================================================
   LARGE CENTERED NUMBERS
====================================================== */

.dis-di-what-v1__part-index {
  display: flex;

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

  width: 100%;
  height: 100%;

  min-width: 0;

  margin: 0;
  padding: 0;

  align-self: center;

  color: #ad7b35;

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

  line-height: 1;
  letter-spacing: .3px;

  white-space: nowrap;
}


/* ======================================================
   COMPONENT TEXT BLOCK
   HEADING + DESCRIPTION CENTER AS ONE GROUP
====================================================== */

.dis-di-what-v1__part-content {
  display: flex;
  flex-direction: column;

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

  min-width: 0;
  width: 100%;

  align-self: center;

  margin: 0;
  padding: 0;
}

.dis-di-what-v1__part h3 {
  display: block;

  width: 100%;

  margin: 0 0 9px;
  padding: 0;

  color: #2a3236;

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

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

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

.dis-di-what-v1__part-content > span {
  display: block;

  margin: 0;
  padding: 0;

  color: #657073;

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

  line-height: 1.65;
  letter-spacing: 0;
}


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

@media (max-width: 1050px) {

  .dis-di-what-v1__container {
    width: calc(100% - 44px);
    padding: 88px 0 96px;
  }

  .dis-di-what-v1__layout {
    grid-template-columns: 1fr;

    gap: 40px;
    margin-bottom: 55px;
  }

  .dis-di-what-v1__visual {
    max-width: 780px;
  }

  .dis-di-what-v1__image {
    height: 440px;
  }

  .dis-di-what-v1__parts {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .dis-di-what-v1__part {
    grid-template-columns:
      48px minmax(0,1fr);

    column-gap: 15px;

    min-height: 125px;

    padding: 24px 18px;
  }

  .dis-di-what-v1__part-index {
    font-size: 34px;
  }

  .dis-di-what-v1__part h3 {
    font-size: 25px;
  }

  .dis-di-what-v1__part-content > span {
    font-size: 15.5px;
  }

}


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

@media (max-width: 767px) {

  .dis-di-what-v1__container {
    width: calc(100% - 36px);
    padding: 70px 0 78px;
  }

  .dis-di-what-v1__layout {
    gap: 37px;
    margin-bottom: 37px;
  }

  .dis-di-what-v1__image {
    height: 350px;
    padding: 26px;
  }

  .dis-di-what-v1__visual-frame::before {
    width: 55px;
    height: 55px;

    left: -9px;
    top: -9px;
  }

  .dis-di-what-v1__image-footer {
    padding: 15px 16px;

    font-size: 12px;
    letter-spacing: .3px;
  }

  .dis-di-what-v1__eyebrow {
    font-size: 12px;
    letter-spacing: .7px;
  }

  .dis-di-what-v1__eyebrow > span {
    flex-basis: 30px;
    width: 30px;
  }

  .dis-di-what-v1 h2 {
    font-size: 42px;
  }

  .dis-di-what-v1__content p {
    font-size: 16px;
    line-height: 1.78;
  }


  /* STACK THE THREE COMPONENTS */
  .dis-di-what-v1__parts {
    grid-template-columns: 1fr;
  }

  .dis-di-what-v1__part {
    grid-template-columns:
      58px minmax(0,1fr);

    align-items: center;

    column-gap: 19px;

    min-height: 115px;

    padding: 23px 25px;

    border-right: 0;

    border-bottom:
      1px solid rgba(43,51,55,.12);
  }

  .dis-di-what-v1__part:last-child {
    border-bottom: 0;
  }

  .dis-di-what-v1__part-index {
    font-size: 37px;
    align-self: center;
  }

  .dis-di-what-v1__part h3 {
    font-size: 27px;
  }

  .dis-di-what-v1__part-content > span {
    font-size: 16px;
    line-height: 1.6;
  }

}


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

@media (max-width: 420px) {

  .dis-di-what-v1__container {
    width: calc(100% - 30px);
  }

  .dis-di-what-v1 h2 {
    font-size: 37px;
  }

  .dis-di-what-v1__image {
    height: 285px;
    padding: 18px;
  }

  .dis-di-what-v1__image-footer {
    font-size: 12px;
    gap: 10px;
  }

  .dis-di-what-v1__part {
    grid-template-columns:
      50px minmax(0,1fr);

    gap: 14px;
    padding: 23px 18px;
  }

  .dis-di-what-v1__part-index {
    font-size: 34px;
  }

  .dis-di-what-v1__part h3 {
    font-size: 25px;
  }

  .dis-di-what-v1__part-content > span {
    font-size: 16px;
  }

}


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

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

  .dis-di-what-v1__image img {
    transition: none;
  }

}