@import url("https://fonts.googleapis.com/css2?family=Shippori+Antique+B1:ital,wght@0,400&display=swap");

:root {
  --purple: #140054;
  --lavender: #d4d2ff;
  --teal: #62e4d3;
  --deep-teal: #246a73;
  --white: #ffffff;
  --black: #000000;
  --max: 1200px;
  --gutter: 120px;
  --mobile-gutter: 24px;
  --heading: "Shippori Antique B1", Arial, sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --button: "Helvetica Neue", Arial, sans-serif;
  --black-hsl: 254, 100%, 16%;
  --white-hsl: 0, 0%, 100%;
  --accent-hsl: 173, 70%, 64%;
  --darkAccent-hsl: 188, 52%, 30%;
  --lightAccent-hsl: 243, 100%, 91%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--purple);
  background: var(--white);
  font-family: var(--body);
  font-size: 17.6px;
  line-height: 1.8;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 500;
  background: var(--purple);
  color: var(--white);
  padding: 12px 16px;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: relative;
  z-index: 300;
  height: 182px;
  background: var(--white);
}

.header-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  text-decoration: none;
}

.logo-long {
  width: 446px;
  max-width: 46vw;
}

.logo-short {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  margin-top: 1px;
  color: var(--purple);
  font-family: var(--body);
  font-size: 17.6px;
  font-weight: 400;
  line-height: 1.5;
}

.site-nav a {
  padding-bottom: 3px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom: 1px solid currentColor;
}

.nav-toggle {
  display: none;
}

.nav-toggle:focus {
  outline: none !important;
  box-shadow: none;
}

.nav-toggle:focus-visible {
  outline: none !important;
  box-shadow: none;
}

.container {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.wide-container {
  width: min(1240px, calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.sq-section {
  position: relative;
  overflow: hidden;
}

.animated-hero {
  isolation: isolate;
}

.animated-hero::before,
.animated-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.animated-hero::before {
  inset: -8%;
  z-index: -2;
  background-size: cover;
  animation: bg-drift 18s ease-in-out infinite alternate;
}

.animated-hero::after {
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 31%, #fff 31% 42%, transparent 42% 58%, #fff 58% 69%, transparent 69%),
    rgba(20, 0, 84, 0.72);
}

.animated-hero > .container {
  position: relative;
  z-index: 1;
}

.section-border,
.section-background,
.section-background-content,
.section-background-canvas,
.background-fx-canvas,
.background-fx-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section-border,
.section-background {
  z-index: -1;
  pointer-events: none;
}

.background-fx-canvas canvas {
  display: block;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
}

.animated-hero.uses-squarespace-bgfx::before,
.animated-hero.uses-squarespace-bgfx::after,
.animated-hero.has-hero-canvas::before,
.animated-hero.has-pause-control::after {
  display: none;
}

.animated-hero.is-paused::before {
  animation-play-state: paused;
}

.hero-pause-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 0, 84, 0.72);
  color: var(--white);
  cursor: pointer;
}

.background-pause-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 0, 84, 0.72);
  color: var(--white);
  cursor: pointer;
}

.background-pause-button.visible {
  display: block;
}

.hero-pause-button::before {
  content: "";
  position: absolute;
  inset: 9px 10px;
  background:
    linear-gradient(90deg, currentColor 0 32%, transparent 32% 68%, currentColor 68%);
}

.background-pause-button::before {
  content: "";
  position: absolute;
  inset: 9px 10px;
  background:
    linear-gradient(90deg, currentColor 0 32%, transparent 32% 68%, currentColor 68%);
}

.animated-hero.is-paused .hero-pause-button::before {
  inset: 9px 11px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: currentColor;
}

.background-pause-button[data-bg-action="play"]::before {
  inset: 9px 11px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: currentColor;
}

.home-animated {
  background: #17074c;
}

.home-animated::before {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.28) 0 3%, transparent 3% 31%, rgba(255, 255, 255, 0.16) 31% 34%, transparent 34%),
    linear-gradient(25deg, rgba(255, 255, 255, 0.16), transparent 44%),
    repeating-linear-gradient(28deg, rgba(255, 255, 255, 0.08) 0 118px, rgba(18, 5, 70, 0.58) 119px 238px),
    repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.07) 0 142px, rgba(11, 2, 54, 0.42) 143px 285px),
    #1a0a54;
  transform: skewY(-8deg) scale(1.18);
}

.about-animated::before {
  background:
    repeating-conic-gradient(from 18deg at 32% 30%, #0d0347 0 7deg, #91efe4 8deg 13deg, #1d0b60 14deg 21deg, #7ee8dc 22deg 28deg),
    radial-gradient(circle at 32% 30%, transparent 0 12%, rgba(20, 0, 84, 0.78) 13% 24%, transparent 25%);
  filter: saturate(0.95);
  animation: tunnel-pulse 12s linear infinite;
}

.tech-animated {
  background: var(--lavender);
}

.tech-animated::before {
  background:
    radial-gradient(ellipse at 5% 30%, #38656e 0 8%, transparent 9%),
    radial-gradient(ellipse at 22% 10%, #4c8490 0 10%, transparent 11%),
    radial-gradient(ellipse at 53% 18%, #35636b 0 12%, transparent 13%),
    radial-gradient(ellipse at 74% 45%, #467a83 0 14%, transparent 15%),
    radial-gradient(ellipse at 91% 18%, #315b64 0 10%, transparent 11%),
    linear-gradient(var(--lavender), var(--lavender));
  animation: blob-float 16s ease-in-out infinite alternate;
}

.ai-animated {
  background: var(--lavender);
}

.ai-animated::before {
  background:
    radial-gradient(ellipse at 50% 37%, rgba(16, 0, 74, 0.85) 0 12%, transparent 34%),
    radial-gradient(ellipse at 76% 76%, rgba(21, 0, 84, 0.7) 0 10%, transparent 31%),
    repeating-linear-gradient(175deg, rgba(98, 228, 211, 0.85) 0 28px, rgba(98, 228, 211, 0.16) 29px 74px, rgba(212, 210, 255, 0.9) 75px 126px);
  filter: blur(1px) saturate(1.08);
  animation: wave-slide 14s ease-in-out infinite alternate;
}

@keyframes bg-drift {
  from { transform: translate3d(-2%, -1%, 0) skewY(-8deg) scale(1.18); }
  to { transform: translate3d(2%, 1%, 0) skewY(-8deg) scale(1.18); }
}

@keyframes tunnel-pulse {
  from { transform: scale(1.02) rotate(0deg); }
  to { transform: scale(1.14) rotate(8deg); }
}

@keyframes blob-float {
  from { transform: translate3d(-3%, -2%, 0) scale(1.06); }
  to { transform: translate3d(4%, 2%, 0) scale(1.1); }
}

@keyframes wave-slide {
  from { transform: translate3d(-3%, -2%, 0) scale(1.08); }
  to { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

.section-purple {
  color: var(--white);
  background: var(--purple);
}

.section-purple h1,
.section-purple h2,
.section-purple h3,
.section-purple h4,
.section-purple p,
.section-teal h1,
.section-teal h2,
.section-teal h3,
.section-teal h4,
.section-teal p {
  color: var(--white);
}

.section-lavender {
  background: var(--lavender);
}

.section-teal {
  color: var(--white);
  background: var(--deep-teal);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--purple);
  font-family: var(--heading);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  font-size: 64px;
  line-height: 1.232;
}

h2 {
  font-size: 41.6px;
  line-height: 1.306;
}

h3 {
  font-size: 28px;
  line-height: 1.28;
}

h4 {
  font-size: 19.2px;
  line-height: 1.389;
}

p {
  margin: 0 0 1.2em;
}

.lead {
  font-size: 19.2px;
  line-height: 1.55;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 61px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 191px;
  min-height: 63px;
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--teal);
  color: var(--black);
  font-family: var(--button);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease;
}

.button:hover,
.button:focus-visible {
  opacity: 0.88;
  transform: translateY(-1px);
}

.button.dark {
  background: var(--black);
  color: var(--white);
}

.button.wide {
  min-width: 292px;
}

.button.service {
  min-width: 241px;
}

.home-hero {
  height: 620px;
  padding-top: 132px;
  display: block;
  text-align: center;
}

.home-hero .container {
  display: grid;
  justify-items: center;
  gap: 65px;
}

.home-hero h1 {
  max-width: 1000px;
}

.home-hero h4 {
  margin-top: 81px;
}

.home-intro {
  height: 811px;
  padding: 103px 0 82px;
}

.home-intro-grid {
  display: grid;
  grid-template-columns: 645px 494px;
  gap: 11px;
  align-items: start;
}

.home-intro h2 {
  margin-bottom: 29px;
}

.home-intro p {
  max-width: 645px;
}

.home-intro .button-row {
  justify-content: flex-start;
  margin-top: 46px;
  margin-left: 151px;
}

.home-team {
  width: 494px;
  margin-top: 0;
  justify-self: end;
}

.home-services {
  min-height: 1218px;
  height: auto;
  padding: 47px 0 126px;
}

.services-top {
  display: grid;
  grid-template-columns: 594px 472px;
  gap: 48px;
  align-items: start;
}

.services-top h1 {
  margin-left: 51px;
}

.services-top p {
  max-width: 594px;
  margin-top: 47px;
}

.services-top .button-row {
  margin-top: 54px;
  margin-left: 51px;
  gap: 11px;
}

.home-services-map {
  width: 472px;
}

.service-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 58px;
  padding-bottom: 24px;
}

.service-column {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.service-column h4 {
  min-height: 0;
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.2;
}

.service-column img {
  height: 247px;
  width: 100%;
  object-fit: contain;
  object-position: center;
  margin-bottom: 22px;
}

.service-column:nth-child(2) img {
  height: 227px;
  margin-top: 20px;
}

.service-column:nth-child(3) img {
  height: 220px;
  margin-top: 27px;
}

.service-column p {
  max-width: 372px;
  margin-inline: auto;
  padding-bottom: 20px;
  text-align: left;
}

.testimonial-band {
  height: 416px;
  padding: 53px 0 42px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 50px;
  align-items: start;
}

.testimonial-grid h2 {
  margin-bottom: 28px;
}

.testimonial-grid h4 {
  max-width: 850px;
  margin-bottom: 22px;
}

.testimonial-grid .button {
  margin-top: 16px;
  margin-left: 250px;
}

.testimonial-blank {
  width: 250px;
  margin-top: 22px;
}

.newsletter-band {
  min-height: 405px;
  padding: 65px 0 58px;
  text-align: center;
}

.newsletter-band h2 {
  max-width: 935px;
  margin: 0 auto 18px;
  font-size: 28.8px;
  line-height: 1.35;
}

.newsletter-band p {
  margin-bottom: 31px;
}

.newsletter-form {
  width: min(935px, 100%);
  margin-inline: auto;
}

.newsletter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1.45fr auto;
  gap: 14px;
  align-items: end;
}

.legal-page {
  padding: 74px 0 92px;
}

.legal-content {
  max-width: 900px;
}

.legal-content h1 {
  margin-bottom: 18px;
}

.legal-content h2 {
  margin: 42px 0 14px;
  font-size: 28px;
}

.legal-content p,
.legal-content li {
  max-width: 820px;
}

.legal-content ul {
  margin: 0 0 1.4em;
  padding-left: 22px;
}

.footer-legal {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  color: var(--teal);
  font-size: 13px;
}

.footer-legal a {
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

label {
  display: grid;
  gap: 7px;
  color: inherit;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

input,
textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(20, 0, 84, 0.55);
  border-radius: 0;
  padding: 10px 12px;
  background: var(--white);
  color: var(--black);
  font: 16px var(--body);
}

textarea {
  min-height: 132px;
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.form-note {
  min-height: 1.5em;
  margin: 13px 0 0;
  color: var(--white);
  font-size: 14px;
  text-align: left;
}

.site-footer {
  height: 210px;
  padding: 31px 0 26px;
  color: var(--white);
  background: var(--purple);
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
}

.footer-logo {
  width: min(318px, 72vw);
  height: auto;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 12px 0 12px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--white);
  text-decoration: none;
}

.social-links svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

.footer-contact {
  color: var(--teal);
  font-size: 17.6px;
  line-height: 1.8;
}

.footer-contact a {
  color: var(--teal);
  text-decoration: none;
}

.footer-links {
  display: none;
}

.about-title {
  height: 531px;
  display: grid;
  place-items: center;
  text-align: center;
}

.about-who {
  min-height: 1235px;
  padding: 80px 0 88px;
}

.giant-heading {
  font-size: 196.9px;
  line-height: 1;
  white-space: nowrap;
}

.about-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 121px;
}

.about-who-copy {
  max-width: 594px;
}

.about-globe {
  width: 594px;
  align-self: start;
  justify-self: end;
}

.about-who .button-row {
  margin-top: 42px;
  margin-left: 51px;
  gap: 11px;
}

.team-section {
  min-height: 1456px;
  padding: 52px 0 89px;
}

.team-section h1 {
  font-size: 75.5px;
  line-height: 1.02;
}

.team-member {
  display: grid;
  grid-template-columns: 342px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-top: 63px;
}

.team-member.reverse {
  grid-template-columns: minmax(0, 1fr) 342px;
  margin-top: 72px;
}

.team-member img {
  width: 342px;
  height: 342px;
  object-fit: cover;
}

.team-member.copy-first .team-copy,
.team-member.reverse .team-copy {
  max-width: 847px;
}

.team-copy {
  padding-top: 1px;
}

.team-copy h3 {
  margin-bottom: 18px;
  font-family: var(--body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.team-copy p {
  margin-bottom: 16px;
}

.team-section .button-row {
  justify-content: center;
  margin-top: 58px;
}

.page-title-small {
  height: 342px;
  display: grid;
  align-items: center;
}

.page-title-small h1 {
  font-size: 70.2px;
  line-height: 1;
  color: var(--purple);
  white-space: nowrap;
}

.tech-intro {
  min-height: 1056px;
  padding: 100px 0 110px;
}

.tech-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 746px) 443px;
  gap: 58px;
  align-items: start;
}

.tech-intro h2 {
  max-width: 645px;
  margin: 0 0 44px 51px;
}

.tech-intro p {
  max-width: 746px;
}

.services-hero-img {
  width: 443px;
  margin-top: 170px;
}

.tech-details {
  padding: 56px 0 74px;
}

.tech-service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: start;
  margin-bottom: 125px;
}

.tech-service-row.reverse .service-art {
  order: 2;
}

.tech-service-row h3 {
  margin-bottom: 25px;
  text-align: center;
}

.tech-service-row .lead {
  text-align: center;
}

.service-art img {
  width: 100%;
  max-height: 650px;
  object-fit: contain;
}

.accordion {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--purple);
}

.accordion-item {
  border-bottom: 1px solid var(--purple);
}

.accordion-button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 14px;
  align-items: center;
  min-height: 51px;
  border: 0;
  padding: 11px 0;
  background: transparent;
  color: var(--purple);
  font: 700 16px/1.35 var(--body);
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  position: relative;
  width: 18px;
  height: 18px;
  justify-self: end;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  inset: 8px 0 auto;
  height: 2px;
  background: currentColor;
}

.accordion-icon::after {
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.accordion-button[aria-expanded="true"] .accordion-icon::after {
  transform: rotate(0deg);
}

.accordion-panel {
  display: none;
  padding: 0 40px 18px 0;
  color: var(--purple);
  font-size: 15px;
  line-height: 1.6;
}

.accordion-panel.is-open {
  display: block;
}

.tech-actions {
  justify-content: center;
  gap: 11px;
  margin-top: -29px;
}

.ai-title {
  height: 531px;
  display: grid;
  place-items: center;
  text-align: center;
}

.ai-title h1 {
  margin-bottom: 20px;
  color: var(--purple);
}

.ai-title h3 {
  color: var(--purple);
}

.ai-overview {
  min-height: 1056px;
  padding: 135px 0 130px;
}

.ai-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 594px) minmax(320px, 467px);
  gap: 100px;
  align-items: start;
}

.ai-overview h1 {
  margin-bottom: 29px;
}

.ai-hero-img {
  width: 467px;
}

.ai-helping {
  min-height: 1966px;
  padding: 99px 0 84px;
}

.ai-helping > .container > h1 {
  max-width: 897px;
  margin: 0 auto 91px;
  text-align: center;
}

.ai-row {
  display: grid;
  grid-template-columns: 393px 393px;
  gap: 112px;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.ai-row.reverse .ai-copy {
  order: 2;
}

.ai-row.reverse .ai-visual {
  order: 1;
}

.ai-copy h3 {
  margin-bottom: 16px;
  font-family: var(--body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.ai-visual img {
  width: 393px;
  max-height: 320px;
  object-fit: contain;
}

.ai-row:nth-of-type(2) .ai-visual img,
.ai-row:nth-of-type(3) .ai-visual img {
  width: 337px;
  justify-self: center;
}

.ai-cta {
  min-height: 528px;
  padding: 78px 0 90px;
  text-align: center;
}

.ai-cta h1 {
  margin-bottom: 34px;
}

.ai-cta p {
  max-width: 695px;
  margin: 0 auto 50px;
}

.contact-page {
  min-height: auto;
  padding: 0 0 15px;
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 695px) 393px;
  gap: 11px;
  align-items: start;
  padding-top: 12px;
  margin-left: 101px;
}

.contact-page h1 {
  max-width: none;
  margin: 0 0 39px 101px;
  font-family: var(--body);
  font-size: 149.9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.contact-copy {
  text-align: center;
}

.contact-copy p {
  max-width: 695px;
}

.contact-envelope {
  width: 393px;
  margin-top: 70px;
}

.contact-form {
  width: min(1099px, 100%);
  margin: 14px 0 0 93px;
}

.contact-form-grid {
  display: grid;
  gap: 19px;
}

.contact-form .two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.contact-form-grid > label {
  margin-top: 14px;
}

.contact-form label {
  font-size: 12px;
  line-height: normal;
}

.contact-form input {
  min-height: 54px;
}

.contact-form textarea {
  min-height: 100px;
}

.form-group-title {
  margin: 0 0 -2px;
  color: var(--purple);
  font-size: 17.6px;
  line-height: 1.8;
}

.required-note {
  color: rgba(20, 0, 84, 0.72);
  font-size: 12px;
  font-weight: 400;
}

.contact-form .button {
  width: 81px;
  min-width: 81px;
  min-height: 51px;
  justify-self: center;
  margin-top: 1px;
  padding: 11px 18px;
}

.contact-form .form-note {
  min-height: 0;
  margin: 0;
  color: var(--purple);
}

.paper-plane {
  width: 604px;
  max-height: 283px;
  object-fit: contain;
  margin: -2px auto 0;
}

@media (max-width: 900px) {
  body {
    font-size: 17px;
    line-height: 1.75;
  }

  .site-header {
    height: 216px;
  }

  .header-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 49px 30px 0;
  }

  .brand {
    position: relative;
    z-index: 350;
    margin: 0;
  }

  .logo-long {
    display: none;
  }

  .logo-short {
    display: block;
    width: 155px;
    max-height: 149px;
    object-fit: contain;
  }

  .nav-toggle {
    position: relative;
    z-index: 350;
    display: block;
    width: 40px;
    height: 40px;
    margin-top: 30px;
    border: 0;
    background: transparent;
    color: var(--purple);
    cursor: pointer;
  }

  .nav-toggle span {
    position: absolute;
    top: 19px;
    left: 4px;
    width: 32px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
    transition: transform 200ms ease, opacity 160ms ease;
  }

  .nav-toggle span:nth-child(1) {
    transform: rotate(90deg);
  }

  .nav-toggle span:nth-child(3) {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 110px 24px 60px;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    color: var(--purple);
    font-size: clamp(46px, 16vw, 66px);
    line-height: 1;
    text-align: center;
    transition: visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .site-nav a {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-bottom: 0;
  }

  .container,
  .wide-container {
    width: calc(100% - (var(--mobile-gutter) * 2));
  }

  h1 {
    font-size: clamp(54px, 16vw, 72px);
    line-height: 1.1;
  }

  h2 {
    font-size: 36px;
  }

  .button-row,
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .button {
    width: min(331px, 100%);
    min-height: 76px;
  }

  .home-hero {
    height: auto;
    min-height: 1280px;
    padding: 218px 0 120px;
  }

  .home-hero .container {
    gap: 69px;
  }

  .home-hero h4 {
    max-width: 320px;
    margin-top: 52px;
    margin-inline: auto;
  }

  .home-intro,
  .home-services,
  .testimonial-band,
  .newsletter-band,
  .about-who,
  .team-section,
  .tech-intro,
  .tech-details,
  .ai-overview,
  .ai-helping,
  .ai-cta,
  .contact-page {
    height: auto;
    min-height: auto;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .home-intro-grid,
  .services-top,
  .service-columns,
  .testimonial-grid,
  .about-who-grid,
  .team-member,
  .team-member.reverse,
  .tech-intro-grid,
  .tech-service-row,
  .tech-service-row.reverse,
  .ai-overview-grid,
  .ai-row,
  .contact-hero-grid,
  .newsletter-fields {
    grid-template-columns: 1fr;
  }

  .home-team,
  .home-services-map,
  .about-globe,
  .services-hero-img,
  .ai-hero-img,
  .contact-envelope {
    justify-self: center;
    margin: 36px auto 0;
  }

  .services-top h1,
  .services-top .button-row,
  .home-intro .button-row,
  .about-who .button-row,
  .tech-intro h2,
  .testimonial-grid .button,
  .contact-page h1,
  .contact-hero-grid {
    margin-left: 0;
  }

  .services-top p {
    margin-top: 24px;
  }

  .service-column img {
    object-position: center;
  }

  .testimonial-blank {
    margin: 20px auto 0;
  }

  .giant-heading,
  .contact-page h1,
  .page-title-small h1,
  .team-section h1 {
    font-size: clamp(54px, 16vw, 84px);
    white-space: normal;
  }

  .about-title,
  .ai-title,
  .page-title-small {
    height: auto;
    min-height: 520px;
    padding: 70px 0;
    text-align: center;
  }

  .about-who-grid {
    margin-top: 46px;
  }

  .team-member.reverse .service-art,
  .team-member.reverse .team-copy,
  .tech-service-row.reverse .service-art,
  .ai-row.reverse .ai-copy,
  .ai-row.reverse .ai-visual {
    order: initial;
  }

  .team-member img,
  .team-member.reverse img {
    width: min(342px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .tech-service-row {
    margin-bottom: 82px;
  }

  .tech-actions {
    margin-top: 0;
  }

  .ai-row {
    gap: 28px;
    margin-bottom: 80px;
  }

  .ai-visual img,
  .ai-row:nth-of-type(2) .ai-visual img,
  .ai-row:nth-of-type(3) .ai-visual img {
    width: min(393px, 100%);
    margin-inline: auto;
  }

  .contact-page h1 {
    margin-bottom: 36px;
  }

  .contact-form {
    width: 100%;
    margin: 46px auto 0;
  }

  .contact-form .two-up {
    grid-template-columns: 1fr;
  }

  .paper-plane {
    width: min(604px, 100%);
    max-height: none;
  }

  .site-footer {
    height: auto;
    min-height: 260px;
    padding-top: 48px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding-inline: 24px;
  }

  .logo-short {
    width: 146px;
  }

  .home-hero {
    min-height: 1275px;
  }

  .home-hero h1 {
    font-size: 69px;
  }

  .site-nav {
    font-size: 58px;
  }
}

@media (max-width: 900px) {
  :root {
    --mobile-gutter: 23px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  body {
    font-size: 17px;
    line-height: 1.8;
  }

  .site-header {
    height: 108px;
  }

  .header-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 23px 0;
  }

  .brand {
    margin: 0;
  }

  .logo-long {
    display: none;
  }

  .logo-short {
    display: block;
    width: 78px;
    max-height: 74px;
    object-fit: contain;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
    margin-top: 23px;
  }

  .site-nav {
    padding: 112px 24px 60px;
    font-size: clamp(44px, 13.7vw, 54px);
    line-height: 1.05;
  }

  .container,
  .wide-container {
    width: calc(100% - (var(--mobile-gutter) * 2));
  }

  h1 {
    font-size: 46.4px;
    line-height: 1.232;
  }

  h2 {
    font-size: 32.2px;
    line-height: 1.31;
  }

  h3 {
    font-size: 24px;
    line-height: 1.25;
  }

  h4 {
    font-size: 19.2px;
    line-height: 1.35;
  }

  p {
    margin-bottom: 1.2em;
  }

  .button-row,
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 11px;
  }

  .button {
    width: 159px;
    min-width: 159px;
    min-height: 59px;
    padding: 13px 22px;
    border-radius: 8px;
  }

  .button.wide {
    min-width: 159px;
  }

  .button.service,
  .about-who .button-row .button,
  .tech-actions .button {
    width: 100%;
    min-width: 0;
  }

  .home-hero {
    height: 621px;
    min-height: 0;
    padding: 91px 0 84px;
  }

  .home-hero .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 19px;
  }

  .home-hero h1 {
    max-width: 328px;
    font-size: 46.4px;
    line-height: 1.232;
  }

  .home-hero h4 {
    max-width: 328px;
    margin: 26px auto 0;
  }

  .home-hero .button-row {
    gap: 11px;
  }

  .hero-pause-button {
    right: 14px;
    bottom: 14px;
  }

  .home-intro,
  .home-services,
  .testimonial-band,
  .newsletter-band,
  .about-who,
  .team-section,
  .tech-intro,
  .tech-details,
  .ai-overview,
  .ai-helping,
  .ai-cta,
  .contact-page {
    height: auto;
    min-height: 0;
  }

  .home-intro {
    padding: 40px 0 50px;
  }

  .home-intro-grid,
  .services-top,
  .service-columns,
  .testimonial-grid,
  .about-who-grid,
  .team-member,
  .team-member.reverse,
  .tech-intro-grid,
  .tech-service-row,
  .tech-service-row.reverse,
  .ai-overview-grid,
  .ai-row,
  .newsletter-fields {
    grid-template-columns: 1fr;
  }

  .home-intro h2 {
    margin-bottom: 28px;
    text-align: center;
  }

  .home-intro .button-row,
  .services-top .button-row,
  .about-who .button-row,
  .tech-intro h2,
  .testimonial-grid .button {
    margin-left: 0;
  }

  .home-intro .button-row {
    margin-top: 28px;
  }

  .home-team {
    width: min(280px, 100%);
    margin: 26px auto 0;
    justify-self: center;
  }

  .home-services {
    padding: 48px 0 56px;
  }

  .services-top {
    gap: 30px;
  }

  .services-top h1 {
    margin-left: 0;
  }

  .services-top p {
    margin-top: 24px;
  }

  .services-top .button-row {
    gap: 11px;
    margin-top: 32px;
  }

  .services-top .button-row .button {
    width: 100%;
  }

  .home-services-map {
    width: 100%;
    margin: 0 auto;
  }

  .service-columns {
    gap: 42px;
    margin-top: 42px;
  }

  .service-column h4 {
    min-height: 0;
    margin-bottom: 12px;
  }

  .service-column img,
  .service-column:nth-child(2) img,
  .service-column:nth-child(3) img {
    width: 100%;
    height: auto;
    max-height: 230px;
    object-position: center;
    margin: 16px auto;
  }

  .testimonial-band {
    padding: 46px 0 52px;
  }

  .testimonial-grid {
    gap: 24px;
  }

  .testimonial-grid h2,
  .testimonial-grid h4 {
    text-align: center;
  }

  .testimonial-grid .button {
    margin: 18px auto 0;
  }

  .testimonial-blank {
    display: none;
  }

  .newsletter-band {
    padding: 48px 0;
  }

  .newsletter-fields {
    gap: 16px;
  }

  .newsletter-form .button {
    justify-self: center;
  }

  .site-footer {
    height: auto;
    min-height: 235px;
    padding: 43px 0 28px;
  }

  .footer-logo {
    width: min(250px, 74vw);
  }

  .social-links {
    gap: 14px;
  }

  .social-links a {
    width: 39px;
    height: 39px;
  }

  .social-links svg {
    width: 31px;
    height: 31px;
  }

  .footer-contact {
    font-size: 17px;
    line-height: 1.5;
  }

  .about-title,
  .ai-title {
    height: 428px;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .about-title h1,
  .ai-title h1 {
    max-width: 328px;
    font-size: 45.232px;
    line-height: 55.7258px;
  }

  .about-title h1 {
    white-space: nowrap;
  }

  .about-title {
    place-items: start center;
    padding-top: 149px;
  }

  .about-who {
    padding: 56px 0;
  }

  .giant-heading {
    font-size: 51.7px;
    line-height: 1;
    white-space: nowrap;
  }

  .about-who-grid {
    gap: 30px;
    margin-top: 38px;
  }

  .about-globe {
    width: min(260px, 80%);
    margin: 0 auto;
    justify-self: center;
  }

  .about-who .button-row {
    gap: 11px;
    margin-top: 30px;
  }

  .team-section {
    padding: 52px 0 64px;
  }

  .team-section h1 {
    font-size: 46.4px;
    line-height: 1.1;
  }

  .team-member,
  .team-member.reverse {
    gap: 20px;
    margin-top: 42px;
  }

  .team-member img,
  .team-member.reverse img {
    width: min(240px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  .team-copy h3 {
    font-size: 24px;
  }

  .page-title-small {
    height: 160px;
    min-height: 0;
    display: block;
    padding: 53px 0 0;
  }

  .page-title-small h1 {
    max-width: 328px;
    font-size: 18.5px;
    line-height: 1;
    white-space: nowrap;
  }

  .tech-intro {
    padding: 55px 0 52px;
  }

  .tech-intro-grid {
    gap: 24px;
  }

  .tech-intro h2 {
    max-width: 328px;
    margin: 0 auto 24px;
    text-align: center;
  }

  .services-hero-img {
    width: min(290px, 100%);
    margin: 24px auto 0;
  }

  .tech-details {
    padding: 42px 0;
  }

  .tech-service-row,
  .tech-service-row.reverse {
    gap: 28px;
    margin-bottom: 56px;
  }

  .tech-service-row.reverse .service-art,
  .tech-service-row.reverse .tech-service-copy,
  .team-member.reverse .service-art,
  .team-member.reverse .team-copy,
  .ai-row.reverse .ai-copy,
  .ai-row.reverse .ai-visual {
    order: initial;
  }

  .tech-service-row h3 {
    font-size: 24px;
  }

  .service-art img {
    max-height: 300px;
  }

  .accordion-button {
    min-height: 52px;
    font-size: 15px;
  }

  .accordion-panel {
    padding: 0 34px 16px 0;
    font-size: 14px;
  }

  .tech-actions {
    gap: 11px;
    margin-top: 0;
  }

  .ai-title h1 {
    margin-bottom: 11px;
  }

  .ai-title h3 {
    max-width: 328px;
    font-size: 23.7952px;
    line-height: 32.2473px;
  }

  .ai-overview {
    padding: 56px 0;
  }

  .ai-overview-grid {
    gap: 30px;
  }

  .ai-overview h1 {
    margin-bottom: 26px;
  }

  .ai-hero-img {
    width: min(328px, 100%);
    margin: 0 auto;
  }

  .ai-helping {
    padding: 56px 0;
  }

  .ai-helping > .container > h1 {
    margin-bottom: 42px;
    font-size: 36px;
  }

  .ai-row {
    gap: 20px;
    margin-bottom: 48px;
  }

  .ai-copy h3 {
    font-size: 24px;
  }

  .ai-visual img,
  .ai-row:nth-of-type(2) .ai-visual img,
  .ai-row:nth-of-type(3) .ai-visual img {
    width: min(260px, 100%);
  }

  .ai-cta {
    padding: 56px 0;
  }

  .contact-page {
    padding: 18px 0 15px;
  }

  .contact-page h1 {
    margin: 0 0 28px;
    font-size: 53px;
    font-weight: 400;
    line-height: 1.05;
    white-space: nowrap;
  }

  .contact-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    margin-left: 0;
  }

  .contact-envelope {
    order: -1;
    width: min(328px, 100%);
    margin: 22px auto 32px;
  }

  .contact-copy {
    text-align: center;
  }

  .contact-form {
    width: 100%;
    margin: 28px auto 0;
  }

  .contact-form .two-up {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }

  .contact-form label {
    min-width: 0;
  }

  .contact-form input {
    min-height: 54px;
  }

  .contact-form textarea {
    min-height: 100px;
  }

  .paper-plane {
    width: 100%;
    height: 187px;
    max-height: none;
    object-fit: fill;
    margin: 37px auto 0;
  }
}