:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --border: rgba(30, 31, 80, 0.1);
  --border-teal: rgba(80, 227, 194, 0.45);

  --text-head: #1e1f50;
  --text-body: #7e8a9a;
  --text-muted: #9da2ab;

  --navy: #1e1f50;
  --navy-deep: #2b3457;
  --slate: #4b5566;
  --teal: #50e3c2;
  --teal-glow: rgba(80, 227, 194, 0.35);
  --purple: #8a7093;
  --purple-dark: #531368;
  --white: #ededed;
}

h3 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.3em;
}

.waves {
  position: absolute;
  width: 100%;
  top: 525px;
}

.teal {
  color: var(--teal);
}

.section-watermark {
  position: absolute;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(7rem, 14vw, 16rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(80, 227, 194, 0.055);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.section-watermark.right {
  right: -10%;
}
.section-watermark.left {
  left: -2%;
  top: -3rem;
}

/* Monospace eyebrow label used on dark sections */
.section-eyebrow {
  font-family: "Cascadia Mono", monospace;
  font-size: 1.4rem;
  color: var(--teal);
  letter-spacing: 0.16em;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.section-eyebrow::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, #50e3c2, transparent);
}

/* Teal glow border top — applied to process section */
.teal-border-top {
  border-top: 1px solid rgba(80, 227, 194, 0.18);
  padding-top: 2em;
}
.slash-divider {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(30, 31, 80, 0.055);
  text-align: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  width: 60%;
  padding-inline: 0.75em 2.5em;
  padding-block: 0.75em;
  margin-block: 2em;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: 2px 2px 4px 0px #8a7093;
  overflow: hidden;
  cursor: pointer;
  transition:
    color 0.3s ease,
    var(--light-text-color) 0.3s ease;
  .button-text {
    text-wrap: nowrap;
    color: var(--dark-green);
    margin-inline-end: 1.5em;
    z-index: 10;
  }
}
.ellipse-overlay {
  position: absolute;
  right: 0px;
  top: 0;
  height: 100%;
  width: 40px;
  padding-inline-end: 10px;
  background-color: var(--teal);
  color: var(--dark-green);
  font-size: 2.4rem;
  font-weight: 400;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: all 0.2s ease;
  z-index: 1;
}

@media (hover: hover) {
  .cta-btn:hover .ellipse-overlay {
    width: 100%;
  }
  .cta-btn:hover .button-text {
    color: var(--navy);
  }
}

.process {
  margin-block: 4em 1em;
  .headline {
    display: flex;
    position: relative;
    width: 100%;
    height: 200px;
    left: -40px;
    font-family: Raleway, sans-serif;
    font-size: 115px;
    font-weight: 700;
    line-height: 84px;
    letter-spacing: -2px;
    color: rgb(217 217 217 / 10%);
  }
  .section-watermark {
    top: -70px;
  }
  .process-desc {
    margin-block: 1em 3em;
    img {
      position: relative;
      width: 75px;
      height: 75px;
      bottom: 20px;
    }
    .numbers {
      top: -0.5em;
    }
    .text {
      margin-inline-start: 0.5em;
      h3 {
        margin-block-start: 0;
        padding-inline-start: 0.5em;
        min-width: 225px;
      }
    }
    .title {
      position: relative;
      display: flex;
      flex-direction: row;
      .numbers {
        position: relative;
        font-size: 4rem;
        color: rgba(211, 211, 211, 0.24);
        right: -0.4em;
      }
      h2 {
        margin-block-end: 0.2em;
      }
    }
    p {
      width: 85%;
      margin-inline: auto;
      margin-block: -0.8em 0;
      font-weight: 200;
    }
  }

  .process-desc:nth-of-type(odd) .numbers {
    left: -0.3em;
  }
  .process-desc:nth-of-type(even) {
    .title,
    .row {
      /* direction: rtl; */
      flex-direction: row-reverse;
      justify-content: flex-end;
      margin-inline-start: -5px;
    }
    h3 {
      margin-inline-start: 60px;
    }
  }
} /*process close */

.regional {
  h2 {
    font-size: var(--fs-xxxl);
    line-height: 42px;
    margin-block: 0 0.6em;
  }
  .pills {
    position: relative;
    width: 100%;
    background: linear-gradient(150deg, #102556 0%, #786a7c 55%, #4b5566 100%);
    padding-block: 5em;
    margin-block: 2em;
    overflow: hidden;
    display: none;
  }
  .cta-btn {
    display: none;
  }
  /* .regional-strip::before {
  content: "ATL";
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: clamp(10rem, 22vw, 28rem);
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
} */
  .regional-inner {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1400px;
    margin-inline: auto;
  }

  .regional-teaser {
    position: relative;
    width: 90%;
    max-width: 1400px;
    margin-inline: auto;
    padding-block: 3em 1em;
    border-top: 1px solid rgba(80, 227, 194, 0.14);
    .section-watermark.left {
      top: 10px;
      color: rgba(80, 227, 194, 0.055);
    }
  }

  .regional-teaser h2 {
    font-family: "Raleway", sans-serif;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    /* color: rgba(80, 227, 194, 0.6); */
    margin-bottom: 2rem;
  }

  .outline-txt {
    -webkit-text-stroke: 0.8px #ededed;
    color: transparent;
  }

  p {
    font-family: "Nunito", sans-serif;
    font-size: 1.65rem;
    line-height: 1.7;
    color: var(--lightest-gray);
    max-width: 580px;
    margin-bottom: 2.5rem;
    font-weight: 400;
  }
  .city-strip {
    display: none;
    flex-wrap: wrap;
    gap: 0;
  }
  .city-strip-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "Poppins", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #ededed;
    padding: 0.4em 0.2em;
  }
  .city-strip-item .city-num-sm {
    font-family: "Cascadia Mono", monospace;
    font-size: 1.4rem;
    color: rgba(80, 227, 194, 0.5);
  }
  .city-strip-item .city-slash {
    color: rgba(80, 227, 194, 0.35);
    font-weight: 300;
    padding-left: 1.2rem;
  }
  .city-strip-item.home-city {
    color: var(--teal);
    font-weight: 600;
  }
}
.regional-mobile {
  .city-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin-bottom: 1em;
    min-width: 40%;
  }
  .city-pill {
    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 0.4em 1.2em;
  }
  .city-pill--hq {
    border-color: var(--teal);
    color: var(--teal);
  }

  .city-pill:hover {
    border-color: var(--teal);
  }
  .pill-tag {
    font-family: "Cascadia Mono", monospace;
    font-size: 0.9rem;
    margin-left: 0.5em;
    opacity: 0.7;
  }
  .cta-btn {
    display: flex;
    width: 25%;
  }
  .cta-btn--ghost {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    width: 60%;
    margin-inline: 2em;
  }
  .cta-btn--ghost .button-text {
    color: var(--white);
  }
  .cta-btn--ghost .ellipse-overlay {
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
  }
  @media (hover: hover) {
    .cta-btn--ghost:hover .ellipse-overlay {
      background: var(--teal);
      color: var(--navy);
    }
    .cta-btn--ghost:hover .button-text {
      color: var(--navy);
    }
  }
} /*regional close */

.pricing-waves {
  position: absolute;
  transform: rotateY(180deg);
  overflow-x: visible;
  width: 100vw;
  top: 400px;
}

/*.pricing {
  display: flex;
  position: relative;
  width: 80%;
  h2 {
    font-size: 4.8rem;
    line-height: 32px;
  } */
.light-section {
  position: relative;
  p,
  h2,
  h4,
  span {
    color: var(--dark-text-color);
  }
}
.pricing {
  padding-block: 2.5em;
  .section-watermark {
    opacity: 0.4;
    right: -10%;
    color: rgba(80, 227, 194, 0.4);
  }
  .caveat-accent {
    position: relative;
    right: 10%;
    font-family: "Caveat", cursive;
    font-size: 2.6rem;
    font-weight: 500;
    margin-inline: 0.5em 0;
    color: var(--teal);
    opacity: 0.2;
    margin-bottom: 0.5em;
  }
  h2 {
    margin-bottom: 0.5em;
    margin-inline: 0.5em 0;
    line-height: 30px;
  }
  h3 {
    color: var(--text-head);
    font-weight: 500;
  }

  .pricing-lead {
    max-width: 55ch;
    margin-bottom: 2em;
  }

  .pricing-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 1.5em;
    margin-bottom: 1em;
  }

  .pricing-card {
    position: relative;
    width: 90%;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1em 2em;
    box-shadow: 0 2px 14px rgba(30, 31, 80, 0.06);
    overflow: hidden;
    transition:
      border-color 0.25s,
      box-shadow 0.25s;
  }
  .pricing-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: var(--teal);
    transition: height 0.3s ease;
  }
  .pricing-card:hover {
    border-color: var(--border-teal);
    box-shadow: 0 6px 24px rgba(80, 227, 194, 0.1);
  }
  .pricing-card:hover::before {
    height: 100%;
  }

  .pricing-num {
    font-family: "Cascadia Mono", monospace;
    font-size: 1.6rem;
    color: rgba(80, 227, 194, 0.55);
    margin-bottom: 0.75em;
  }
  .pricing-card p {
    font-size: 1.5rem;
  }
  .cta-btn {
    margin-inline: 2em 0;
  }
} /* pricing close */

.feature-container {
  display: none;
  max-width: 340px;
  width: 92%;
  height: 260px;
  position: relative;
  border-radius: 12px;
  border: 1px solid #959396;
  background: radial-gradient(80% 80% at 50% 50%, #d8d8d8d8 0%, #9d9c9c 100%);
  box-shadow: 1px 1px 25px 5px rgba(83, 19, 104, 0.2) inset;
  padding-block: 20px;
  padding-inline: 40px 15px;
  margin-inline: auto;
  margin-block: 3em;
}

.vertical-line-wrapper {
  position: absolute;
  left: 20px;
  top: 25px;
}

.vertical-line {
  width: 8px;
  height: 200px;
}

.features-content {
  position: relative;
  left: 8px;
  top: 15px;
  width: 100%;
  height: 166px;
}

.feature-item {
  font:
    400 18px/16px Raleway,
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  letter-spacing: -0.3px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2em;
}
.feature-item:first-child {
  color: #fff;
  text-shadow: 0 4px 4px #8a7093;
}
.feature-item:last-child {
  margin-bottom: 0;
}

ul.custom-benefits {
  list-style: none;
  padding-left: 1.2rem;
}

ul.custom-benefits li::before {
  content: "/";
  margin-right: 0.5rem;
  color: #ededed;
}

/* .cta-btn {
    background-color: var(--lightest-gray);
    .button-text {
      color: #50e3c2;
    }
  }
  .cta-btn:hover .button-text {
    color: var(--white);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    margin-bottom: 2em;
  }
  .pricing-card {
    min-width: 300px;
  }
  .pricing-options {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em;
    span {
      text-align: left;
      margin: 0.2em;
      font-weight: 500;
    }
  } 
  h4 {
    margin-block: 1.2em 0;
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 300;
    font-style: italic;
    line-height: 22px;
    letter-spacing: -0.36px;
  }
}
*/
/* .SEO {
  display: flex;
  position: relative;
  width: 100%;
  margin-inline: auto;
  .section-watermark {
  color: rgba(80, 227, 194, 0.5);
  }
  }
  h2 {
    font-family: Raleway;
    font-size: var(--fs-xxl);
    font-weight: 300;
    line-height: 36px;
    letter-spacing: -1.44px;
  }
  p {
    width: 80%;
    margin-inline: auto;
  }
  .headline {
    position: relative;
    margin-block: 0.8em;
    text-align: center;
  }
  .bullet-list-content {
    position: relative;
    width: 100%;
  }
  .bullet-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-inline: 10% 0;
    margin-block: 0.5em;
  }
  .bullet-text {
    font-family: "Poppins", sans-serif;
    font-size: var(--fs-lg);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: #616161;
    white-space: nowrap;
  }
  .bullet-point {
    width: 18px;
    height: 10px;
    background-color: #1e1f50;
    border-radius: 50%;
    margin-right: 0.8em;
    flex-shrink: 0;
  }
} */

.custom-sites {
  display: flex;
  position: relative;
  width: 100dvw;
  margin-inline: auto;
  margin-block: 2em;
  .row {
    position: relative;
    width: auto;
  }
  span {
    font-size: var(--fs-md);
    color: var(--lightest-gray);
    font-weight: 400;
    margin-inline: auto;
  }
  h2 {
    margin-block-end: 0.5em;
    margin-inline: auto;
    text-align: center;
    font-size: var(--fs-xxl);
    font-weight: 600;
    line-height: 32px;
    color: var(--white);
    text-wrap: nowrap;
  }
  h3 {
    margin-block: 1em 0.5em;
    margin-inline: auto;
    width: 90%;
    color: var(--light-gray);
  }
  p {
    margin-inline: auto 2%;
    margin-block: 0em 1em;
    width: 90%;
    color: var(--lightest-gray);
  }
  .color-block {
    width: 100dvw;
    height: 100%;
    background-color: var(--dark-green);
    padding-block: 2em 3em;
  }
  .watermark {
    position: absolute;
    width: 275px;
    left: -10%;
    right: 0;
    margin-inline: auto;
    opacity: 50%;
    top: -100px;
    color: var(--light-gray);
  }
  .cta-btn {
    margin-inline: auto;
    margin-block: 0;
    background-color: var(--lightest-gray);
    .button-text,
    span {
      color: #50e3c2;
      color: var(--dark-green);
    }
  }
  .cta-btn:hover .button-text {
    color: var(--navy);
  }
  span {
    color: var(--white);
  }
}
/* ─── 05 CUSTOM SITES (dark block) ──────────────────────────────── */
.sites-block {
  position: relative;
  width: 100%;
  background: var(--navy);
  padding-block: 3em 2em;
  overflow: hidden;
  h2 {
    color: var(--text-color);
  }

  .sites-block::before {
    content: "CUSTOM";
    position: absolute;
    right: -2%;
    top: 38%;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    font-size: clamp(6rem, 14vw, 18rem);
    letter-spacing: -0.05em;
    color: rgba(80, 227, 194, 0.1);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .sites-inner {
    position: relative;
    z-index: 1;
    width: 86vw;
    max-width: 1400px;
    margin-inline: auto;
  }
  .sites-block .section-eyebrow {
    color: var(--teal);
  }
  .sites-headline {
    font-size: var(--fs-h1);
    line-height: 4.6rem;
    color: var(--white);
    margin-bottom: 0.8em;
  }
  .sites-headline .outline-text {
    -webkit-text-stroke: 2px var(--teal);
    color: transparent;
  }

  .sites-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8em;
    margin-bottom: 2em;
  }
  .site-point h3 {
    color: var(--white);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 500;
    margin-bottom: 0.5em;
    .slash-teal {
      color: var(--teal);
    }
  }
  .site-point p {
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1.8rem;
  }

  .sites-features {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5em 2em;
    border: 1px solid rgba(80, 227, 194, 0.15);
    border-radius: 8px;
    background: rgba(80, 227, 194, 0.04);
    margin-bottom: 2.5em;
  }
  .sites-features .feature-item {
    font-family: "Poppins", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-muted);
  }
  .sites-features .feature-item::before {
    content: "→ ";
    color: var(--teal);
    font-size: 1.2rem;
  }
}

.seo {
  h2 {
    font-weight: 600;
  }
  .slash-teal {
    color: var(--teal);
  }
  .outline-txt {
    -webkit-text-stroke: 1.5px #ededed;
  }
  .section-watermark {
    color: rgba(80, 227, 194, 0.1);
  }
  .cta-btn {
    margin-block-start: 0em;
  }
}
.seo-lead {
  margin-block: 1em 2em;
}

.seo-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  margin-bottom: 2em;
  position: relative;
  z-index: 1;
}
.seo-item {
  display: flex;
  align-items: center;
  padding-block: 1em;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
  span {
    color: var(--text-head);
  }
}
.seo-item:hover {
  background: rgba(80, 227, 194, 0.04);
}
.seo-num {
  color: rgba(80, 227, 194, 0.5);
  font-family: "Cascadia Mono", monospace;
  font-size: 1.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.seo-text {
  padding-inline: 0.5em 0;
  font-family: "Raleway", sans-serif;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.slash-teal {
  font-family: Poppins;
  margin-inline: 0.3em;
}

/* ─── 06 PLATFORMS ───────────────────────────────────────────────── */
.platforms {
  h2 {
    line-height: 28px;
    font-weight: 500;
    margin-inline-start: 5%;
    margin-bottom: 0.75em;
    .outline-text {
      -webkit-text-stroke: 1px var(--dark-text-color);
      color: transparent;
    }
  }
  .platform-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    margin: 0.3em auto;
    align-items: center;
    gap: 0.5em;
    img {
      height: 60px;
      width: auto;
      margin: 0.5em;
      padding: 0.2em;
      object-fit: contain;
      filter: grayscale(20%);
      opacity: 0.8;
      transition:
        opacity 0.2s,
        filter 0.2s;
    }
  }
}
p {
  width: 92%;
  margin-inline: auto;
}

.platforms {
  padding-block: 3em 2em;
}

.platforms-lead {
  font-size: 1.8rem;
  max-width: 58ch;
  margin-bottom: 1.5em;
}

.platform-icons img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.contact {
  position: relative;
  /* background: linear-gradient(
    to bottom,
    #e8eef1 0%,
    #6b6f82 15%,
    var(--navy) 25%
  ); */
  background: linear-gradient(
    to bottom,
    #e8eef1 0%,
    #6b6f82 12%,
    var(--navy) 24%,
    var(--navy) 85%,
    #6b6f82 95%,
    #b1b3b3 100% /* explicit hold — uniform navy at the bottom edge */
  );
}
.contact-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;

  pointer-events: none;
  z-index: 0;
}

.contact h2,
.contact h3 {
  color: var(--white);
}
.contact p {
  color: var(--text-muted);
}
.contact .section-eyebrow {
  color: var(--teal);
}
.contact .outline-text {
  -webkit-text-stroke: 2px var(--teal);
  color: transparent;
}

.closing {
  position: relative;
  z-index: 1;
  padding-top: 4em;
  padding-bottom: 2em;
  margin-block-end: 0em;
}
.closing-headline {
  font-size: clamp(4rem, 8vw, 9.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 0.75em;
}
.closing-sub {
  font-size: 1.9rem;
  max-width: 52ch;
  margin-bottom: 0;
}

.svg-footer {
  display: none;
}
/**** Close Mobile Res ****/

@media screen and (min-width: 900px) {
  /* base values */
  :root {
    --body-padding: 1rem;
  }
  section {
    margin-block-end: 12vw;
  }
  main {
    background: linear-gradient(
      180deg,
      #2b3457 0%,
      #1e1f50 7%,
      #4b5566 30%,
      #9da2ab 35%,
      #f7f7f7 40%
    );
  }
  p {
    font-size: var(--fs-base);
    line-height: 30px;
    font-weight: 400;
    margin-inline: auto;
  }
  .section-eyebrow {
    font-size: 1.8rem;
    margin-block: 0 1.5em;
  }
  .cta-btn {
    width: 40%;
  }

  .headline {
    position: relative;
    width: 100%;
    margin-block: 4em 8em;
    padding-inline: 8%;
    .outline {
      font-size: var(--fs-h1);
      line-height: 60px;
    }
    .subheading {
      font-size: var(--fs-xxxl);
      line-height: 60px;
    }
    .row.subheading {
      display: flex;
      width: 95%;
      margin-block: 0;
      margin-inline: auto 0;
      text-wrap: nowrap;
      inset: 0;
    }
    p {
      font-size: var(--fs-md);
      font-weight: 300;
      width: 80%;
    }
    .cta-btn {
      width: 40%;
    }
    .section-watermark.right {
      right: -2%;
      top: -2%;
    }
  } /* close base values */

  .process {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin-inline-start: 5%;
    margin-block: 3em 8em;
    .headline {
      font-size: 196px;
      font-weight: 800;
      background: linear-gradient(
        180deg,
        #1c1c1c 0%,
        #363636 77.15%,
        rgba(77, 77, 77, 0) 100%
      );
      background-clip: text;
      /* -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1.5px rgba(0, 79, 125, 0.445); */
      line-height: 160px;
      letter-spacing: -10px;
      height: 325px;
      margin-block: 0;
      margin-inline: 20%;
      -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 75%,
        rgba(255, 255, 255, 0.2) 95.67%
      );
      mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 75%,
        rgba(255, 255, 255, 0.2) 95.67%
      );
    }
    .process-desc {
      width: 40%;
      height: 400px;
      min-width: 375px;
      margin-block: 1em;
      margin-inline-start: 5%;
      /* border-radius: 12px; */
      /* background: rgba(76, 76, 107, 0.8); */
      /* background: var(--white);
      box-shadow: 2px 2px 4px 2px #494564; */
      z-index: 10;
      img {
        width: 125px;
        height: 125px;
      }
      h2 {
        font-size: var(--fs-xxl);
        font-weight: 500;
      }
      .title,
      .row {
        flex-direction: row;
        justify-content: flex-start;
        margin-block-end: 0em;
      }
      .title {
        margin-inline: 0;
        flex-direction: column;
        .numbers {
          position: absolute;
          left: 0;
          top: 0;
          margin-top: -0.2em;
          color: rgba(157, 162, 171, 0.5);
          font-family: "Cascadia Mono";
          font-size: 172px;
          font-style: normal;
          font-weight: 600;
          line-height: 150px; /* 76.531% */
          letter-spacing: -9.8px;
          background: var(
            --Number-gradient,
            linear-gradient(
              180deg,
              rgba(157, 162, 171, 0.35) 0%,
              rgba(215, 215, 215, 0.2) 27.4%,
              rgba(255, 255, 255, 0) 100%
            )
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      /* h3 {
        margin-inline-start: 20px;
        font-size: var(--fs-sm);
        line-height: 18px;
        width: 70%;
      } */
      p {
        /* width: 90%; */
        margin-block: 0;
        font-size: var(--fs-base);
        line-height: 28px;
      }
    }
    .desc-content {
      margin-block: 10% auto;
    }
    .process-desc:first-of-type {
      margin-block-start: 0em;
      padding-block-start: 0em;
    }
    .process-desc:nth-of-type(even) {
      top: 6em;
      .row {
        flex-direction: row;
        justify-content: flex-start;
      }
      .title {
        flex-direction: column;
      }
    }
  } /* close process description */

  .waves {
    top: 300px;
    opacity: 50%;
    transform: scaleY(60%);
  }

  .regional-mobile {
    display: none;
  }

  .regional {
    .section-watermark.left {
      top: -85px;
    }
    .regional-headline {
      line-height: 6rem;
    }
    p {
      font-size: 2rem;
      margin-inline: 10%;
    }
    .city-strip {
      display: flex;
      margin-inline: 6%;
    }
    .cta-btn {
      display: block;
      margin-inline: 6%;
    }

    @media (hover: hover) {
      .cta-btn:hover .ellipse-overlay {
        background: var(--teal);
        color: var(--navy);
      }
      .cta-btn:hover .button-text {
        color: var(--navy);
      }
    }
  } /* regional close */

  .pricing {
    .section-watermark.right {
      top: 350px;
    }
    h2 {
      width: 80%;
      max-width: 800px;
      margin-inline: auto;
      /* font-size: var(--fs-h1); */
      font-size: 96px;
      line-height: 68px;
      font-weight: 500;
      word-wrap: normal;
    }
    .cta-btn {
      margin-inline-start: 10%;
    }
    p {
      width: 60%;
      margin-block-end: 0.2em;
    }
    .pricing-card {
      padding: 1em;
      .content {
        margin-inline: 10%;
      }
      .pricing-num {
        font-size: 2rem;
        margin-inline: 5%;
        margin-block: 0 0.2em;
      }
      h3 {
        font-size: var(--fs-lg);
      }
      p {
        margin-inline: 5%;
        width: 80%;
        font-size: var(--fs-base);
      }
    }
    .pricing-waves {
      top: 550px;
    }
  } /* pricing close */

  .seo {
    h2 {
      font-size: 84px;
      margin-block: 0.2em 0.4em;
    }
    .slash-teal {
      font-size: var(--fs-h1);
    }
    .outline-txt {
      margin-block: 1em;
      font-size: var(--fs-xxl);
      font-weight: 400;
    }

    p {
      margin-inline: 5%;
      margin-block: 0em 1.5em;
      width: 80%;
      font-size: var(--fs-base);
    }
    .seo-item {
      padding-block: 2em;
      margin-inline: 3em;
    }
    .seo-num {
      font-size: var(--fs-base);
    }
    .seo-text {
      font-size: var(--fs-lg);
      color: var(--dark-text-color);
      .slash-teal {
        margin-inline: 0.3em;
        font-family: Poppins;
        font-size: var(--fs-lg);
      }
    }
    .cta-btn {
      top: -15px;
      margin-inline: 4em;
      margin-block: 2em 0;
    }
  } /* close SEO */

  .sites-block {
    .sites-headline {
      line-height: 64px;
    }
    .sites-features {
      flex-direction: column;
      width: 80%;
      margin-inline: 5em;
      margin-block: 4em;
    }
    .cta-btn {
      margin-inline: 5em;
    }
  } /* custom close */

  .platforms {
    h2 {
      margin-block-end: 0.5em;
      font-size: var(--fs-xxxl);
      line-height: 42px;
    }
    p {
      margin-block: 0.5em 0;
      padding-inline: 2em;
      width: 90%;
      max-width: 90%;
    }
    .platform-icons {
      width: 50%;
      img {
        height: 80px;
        margin: 1.5em;
      }
    }
    .platforms-lead {
      margin-block: 0 2em;
    }
  }
  .full-footer {
    .waves {
      top: auto;
    }
  }
}