/* IdealZones About page. Load after site.css. All classes are isolated in .iz-about. */
.iz-about {
  --iza-deep: #073c43;
  --iza-ink: #102e34;
  --iza-coral: #ff8959;
  --iza-mist: #eef5f4;
  --iza-muted: #52676c;
  --iza-border: #d8e4e4;
  color: var(--iza-ink);
  font-family: Arial,Helvetica,sans-serif;
  background: #fff
}

  .iz-about, .iz-about *, .iz-about *::before, .iz-about *::after {
    box-sizing: border-box
  }

    .iz-about h1, .iz-about h2, .iz-about h3, .iz-about p {
      margin: 0
    }

    .iz-about a {
      text-decoration: none;
      color: inherit
    }

      .iz-about a:focus-visible {
        outline: 3px solid var(--iza-coral);
        outline-offset: 4px
      }

.iza-container {
  max-width: 1180px;
  width: calc(100% - 80px);
  margin-inline: auto
}

.iza-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .17em;
  font-weight: 700;
  color: #397b80;
  margin: 0 0 18px !important
}

  .iza-eyebrow span {
    width: 28px;
    height: 2px;
    background: var(--iza-coral)
  }

.iza-hero {
  background: var(--iza-deep);
  color: #fff;
  position: relative;
  overflow: hidden
}

.iza-hero-inner {
  padding-block: 85px 95px;
  min-height: 435px;
  display: flex;
  align-items: center;
  position: relative
}

  .iza-hero-inner > div:first-child {
    position: relative;
    z-index: 1;
    max-width: 760px
  }

.iza-hero .iza-eyebrow, .iza-cta .iza-eyebrow {
  color: #a4d0cf
}

.iza-hero h1 {
  font-size: clamp(48px,6.2vw,81px);
  line-height: 1.035;
  font-weight: 400;
  letter-spacing: -.065em
}

  .iza-hero h1 em, .iza-story h2 em, .iza-people h2 em, .iza-cta h2 em {
    font-style: normal;
    color: var(--iza-coral)
  }

.iza-hero p:not(.iza-eyebrow) {
  font-size: 16px;
  line-height: 1.8;
  color: #d5e6e3;
  max-width: 590px;
  margin: 23px 0 22px
}

.iza-text-link {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid var(--iza-coral);
  padding-bottom: 9px;
  font-size: 13px;
  font-weight: 700
}

  .iza-text-link span {
    color: var(--iza-coral);
    font-size: 20px
  }

.iza-hero-rings {
  position: absolute;
  right: -30px;
  top: 48px;
  width: 350px;
  height: 350px;
  border: 1px solid #ffffff38;
  border-radius: 50%;
  box-shadow: 0 0 0 50px #ffffff08,0 0 0 105px #ffffff05;
  opacity: .7
}

.iza-story {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 65px;
  padding-block: 88px
}

.iza-story-media, .iza-team-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg,#174f52,#709590);
  border-radius: 7px
}

.iza-story-media {
  min-height: 315px;
  aspect-ratio: 1.35
}

  .iza-story-media img, .iza-team-media img {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover
  }

.iza-media-label {
  position: absolute;
  bottom: 15px;
  left: 17px;
  color: #fff;
  background: #073c43d9;
  border-radius: 3px;
  padding: 8px 11px;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 700
}

.iza-story h2, .iza-people h2, .iza-reviews h2 {
  font-size: clamp(32px,3.5vw,49px);
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: 1.1
}

  .iza-story h2 em, .iza-people h2 em {
    color: #237984
  }

.iza-story-copy > p:not(.iza-eyebrow) {
  margin-top: 22px;
  color: var(--iza-muted);
  font-size: 14px;
  line-height: 1.9
}

.iza-dark-link {
  margin-top: 25px;
  color: var(--iza-deep) !important
}

.iza-benefits {
  background: #f6f9f8;
  border-block: 1px solid var(--iza-border)
}

.iza-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 25px;
  padding-block: 36px
}

.iza-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px
}

.iza-benefit-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #d2e1dd;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--iza-deep)
}

  .iza-benefit-icon svg {
    height: 23px;
    width: 23px
  }

.iza-benefit h3 {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.02em
}

.iza-benefit p {
  color: var(--iza-muted);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 7px
}

.iza-people {
  padding-block: 82px 38px
}

.iza-section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 31px
}

  .iza-section-heading .iza-eyebrow {
    justify-content: center
  }

  .iza-section-heading > p:not(.iza-eyebrow) {
    font-size: 14px;
    color: var(--iza-muted);
    line-height: 1.8;
    margin-top: 17px
  }

.iza-team-media {
  height: 375px;
  max-width: 100%;
  background: linear-gradient(120deg,#103d44,#547f7f)
}

.iza-image-note {
  color: #6f8686;
  font-size: 11px;
  margin-top: 13px !important
}

.iza-reviews {
  padding-block: 55px 90px
}

.iza-review-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
  margin-top: 36px
}

.iza-review {
  border: 1px solid var(--iza-border);
  border-radius: 8px;
  padding: 27px 25px 23px;
  display: flex;
  flex-direction: column;
  min-height: 265px;
  background: white
}

.iza-quote {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--iza-deep);
  color: var(--iza-coral);
  font: 32px Georgia,serif;
  line-height: 1;
  padding-top: 8px
}

.iza-review h3 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 17px;
  line-height: 1.3
}

.iza-review > p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--iza-muted);
  margin-top: 12px;
  flex: 1
}

.iza-review-bottom {
  margin-top: 27px;
  border-top: 1px solid var(--iza-border);
  padding-top: 17px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  font-size: 11px;
  color: #345c61
}

  .iza-review-bottom span:last-child {
    letter-spacing: .08em;
    font-size: 9px;
    color: #ac6e54
  }

.iza-cta {
  background: var(--iza-deep);
  color: #fff;
  position: relative;
  overflow: hidden
}

.iza-cta-inner {
  padding-block: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px
}

.iza-cta h2 {
  font-size: clamp(35px,4vw,54px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.05em
}

.iza-button {
  background: var(--iza-coral);
  color: #123b40 !important;
  padding: 16px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap
}

  .iza-button span {
    margin-left: 20px
  }

@media(max-width:1000px) {
  .iza-benefits-grid {
    grid-template-columns: repeat(2,1fr)
  }

  .iza-story {
    gap: 36px
  }

  .iza-story-media {
    min-height: 280px
  }
}

@media(max-width:720px) {
  .iza-container {
    width: calc(100% - 40px)
  }

  .iza-hero-inner {
    padding-block: 70px 75px;
    min-height: auto
  }

  .iza-hero-rings {
    right: -220px;
    opacity: .35
  }

  .iza-story {
    grid-template-columns: 1fr;
    padding-block: 60px;
    gap: 32px
  }

  .iza-story-media {
    min-height: 245px
  }

  .iza-people {
    padding-top: 60px
  }

  .iza-team-media {
    height: 270px
  }

  .iza-review-grid {
    grid-template-columns: 1fr
  }

  .iza-reviews {
    padding-block: 45px 65px
  }

  .iza-cta-inner {
    align-items: flex-start;
    flex-direction: column
  }

  .iza-review {
    min-height: 210px
  }
}

@media(max-width:470px) {
  .iza-hero h1 {
    font-size: 45px
  }

  .iza-benefits-grid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .iza-team-media {
    height: 220px
  }

  .iza-section-heading h2 {
    font-size: 36px
  }
}

@media(prefers-reduced-motion:reduce) {
  .iz-about * {
    scroll-behavior: auto
  }
}

@media(max-width:750px){
  .iza-story{grid-template-columns:minmax(0,1fr)}
  .iza-story>*{min-width:0}
  .iza-story-media{width:100%;aspect-ratio:auto}
  .iza-media-label{right:15px;overflow-wrap:anywhere}
}
