:root {
 --blue: #005bbb;
 --dark-blue: #003d58;
 --teal: #007b80;
 --purple: #4b006e;
 --purple-dark: #470a68;
 --text: #05051f;
 --muted: #555;
 --footer-line: linear-gradient(90deg, #4b006e, #005bbb);
}
* {
 box-sizing: border-box;
}
body {
 margin: 0;
 font-family: 'DM Sans', sans-serif;
 font-stretch: normal;
 font-style: normal;
 letter-spacing: normal;
 text-transform: none;
 color: var(--text);
 background: #fff;
}
a {
 color: inherit;
 text-decoration: none;
}
strong {
 color: var(--purple-dark);
 font-weight: 700;
}
.section-inner {
 width: min(100% - 48px, 820px);
 margin: 0 auto;
}
.section-inner.narrow {
 width: min(100% - 48px, 720px);
}
.accent-underline {
 display: inline;
 background-image: linear-gradient(
   90deg,
   #00a8e8 0%,
   #00a8e8 62%,
   rgba(0, 168, 232, 0.18) 100%
 );
 background-repeat: no-repeat;
 background-size: 100% 6px;
 background-position: 0 88%;
}
/* ================================
  HERO
================================ */
.contact-hero {
 position: relative;
 min-height: 386px;
 background: linear-gradient(90deg, #4b006e 0%, #1f3d9d 100%);
 color: #fff;
 overflow: visible;
}
.contact-hero-inner {
 position: relative;
 width: min(100% - 220px, 1280px);
 min-height: 386px;
 margin: 0 auto;
}
.contact-hero-copy {
 position: relative;
 z-index: 2;
 padding-top: 140px;
}
.eyebrow {
 font-size: 17px;
 font-weight: 700;
 margin: 0 0 24px;
}
.contact-hero h1 {
 font-size: 53px;
 line-height: 1.28;
 font-weight: 400;
 margin: 0;
 max-width: 650px;
}
.hero-collage {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
}
.hero-img {
 position: absolute;
 display: block;
 object-fit: cover;
 box-shadow: none;
}
.hero-img-top {
 top: 86px;
 right: 64px;
 width: 370px;
 height: 190px;
}
.hero-img-main {
 top: 330px;
 right: 258px;
 width: 380px;
 height: 238px;
}
.hero-img-small {
 top: 350px;
 right: 0;
 width: 218px;
 height: 112px;
}
.shape {
 position: absolute;
 display: block;
}
.shape-cyan {
 top: 242px;
 right: 365px;
 width: 132px;
 height: 62px;
 background: #00a8e8;
}
.shape-purple {
 top: 132px;
 right: 0;
 width: 80px;
 height: 36px;
 background: var(--purple);
}
.shape-blue {
 top: 454px;
 right: -18px;
 width: 100px;
 height: 46px;
 background: var(--blue);
}
/* ================================
  CONTACT CONTENT
================================ */
.contact-content {
 padding: 270px 24px 96px;
 text-align: center;
 border-bottom: 4px solid transparent;
 border-image: linear-gradient(90deg, #4b006e, #005bbb) 1;
}
.contact-content h2 {
 color: var(--blue);
 font-size: 43px;
 line-height: 1.18;
 font-weight: 400;
 margin: 0 0 32px;
}
.contact-content p {
 font-size: 15px;
 line-height: 1.55;
 margin: 0;
}
.contact-content a {
 color: var(--blue);
}
/* ================================
  IMAGE-ONLY ANIMATIONS
================================ */
.js-enabled [data-animate-images] .hero-img,
.js-enabled [data-animate-images] .shape {
 opacity: 0;
}
[data-animate-images].is-visible .hero-img,
[data-animate-images].is-visible .shape {
 animation: imageSlideInRight 900ms ease-out both;
}
[data-animate-images].is-visible .hero-img-main {
 animation-delay: 120ms;
}
[data-animate-images].is-visible .hero-img-small {
 animation-delay: 220ms;
}
[data-animate-images].is-visible .shape-cyan {
 animation-delay: 80ms;
}
[data-animate-images].is-visible .shape-purple {
 animation-delay: 160ms;
}
[data-animate-images].is-visible .shape-blue {
 animation-delay: 260ms;
}
@keyframes imageSlideInRight {
 from {
   opacity: 0;
   transform: translateX(70px);
 }
 to {
   opacity: 1;
   transform: translateX(0);
 }
}
/* ================================
  RESPONSIVE: TABLET
================================ */
@media (max-width: 1100px) {
 .contact-hero-inner {
   width: min(100% - 80px, 1280px);
 }
 .contact-hero h1 {
   font-size: 46px;
 }
 .hero-img-top {
   right: 20px;
   width: 320px;
 }
 .hero-img-main {
   right: 190px;
   width: 340px;
 }
 .hero-img-small {
   width: 190px;
 }
}
/* ================================
  RESPONSIVE: MOBILE
================================ */
@media (max-width: 900px) {
 .section-inner,
 .section-inner.narrow {
   width: min(100% - 48px, 720px);
 }
 .contact-hero {
   min-height: auto;
   overflow: hidden;
 }
 .contact-hero-inner {
   width: 100%;
   min-height: 620px;
   padding: 0 14px;
 }
 .contact-hero-copy {
   padding-top: 64px;
 }
 .eyebrow {
   font-size: 15px;
   margin-bottom: 16px;
 }
 .contact-hero h1 {
   font-size: 32px;
   line-height: 1.3;
   max-width: 360px;
 }
 .accent-underline {
   background-size: 100% 4px;
   background-position: 0 86%;
 }
 .hero-collage {
   position: relative;
   height: 420px;
   margin-top: 76px;
 }
 .hero-img-top {
   top: 0;
   right: 38px;
   width: 270px;
   height: 138px;
   z-index: 3;
 }
 .hero-img-main {
   top: 178px;
   left: 0;
   right: auto;
   width: 292px;
   height: 176px;
   z-index: 3;
 }
 .hero-img-small {
   top: 196px;
   right: 0;
   width: 130px;
   height: 82px;
   z-index: 4;
 }
 .shape-cyan {
   top: 112px;
   left: 102px;
   right: auto;
   width: 96px;
   height: 46px;
   z-index: 2;
 }
 .shape-purple {
   top: 32px;
   right: 0;
   width: 52px;
   height: 26px;
   z-index: 1;
 }
 .shape-blue {
   top: 274px;
   right: 0;
   width: 64px;
   height: 36px;
   z-index: 2;
 }
 .contact-content {
   padding: 72px 24px 84px;
 }
 .contact-content h2 {
   font-size: 34px;
   margin-bottom: 24px;
 }
}
/* ================================
  RESPONSIVE: SMALL MOBILE
================================ */
@media (max-width: 560px) {
 .section-inner,
 .section-inner.narrow {
   width: min(100% - 40px, 420px);
 }
 .contact-hero-inner {
   min-height: 620px;
 }
 .contact-hero h1 {
   font-size: 30px;
 }
 .hero-collage {
   height: 420px;
 }
 .contact-content {
   padding-inline: 20px;
 }
 .contact-content h2 {
   font-size: 30px;
 }
 .contact-content p {
   font-size: 14px;
 }
}