/* Approved hybrid: concept 3 layout and concept 1 hero imagery. */

@media (min-width: 1121px) {
  :root {
    --header: 72px;
    --header-contact-slot: 260px;
    --header-cta-slot: 200px;
    --header-inline-gap: clamp(12px, 2vw, 34px);
  }
  .site-header,
  .site-header.is-scrolled { height: 72px; grid-template-rows: 72px; }
  .site-header__top.shell {
    position: absolute;
    top: 0;
    right: calc(max(24px, calc((100vw - 1348px) / 2)) + var(--header-cta-slot) + var(--header-inline-gap));
    width: var(--header-contact-slot);
    height: 72px;
    border: 0;
    display: flex;
    align-items: center;
  }
  .site-header__top > p { display: none; }
  .header-contacts { width: 100%; gap: 14px; justify-content: flex-start; }
  .header-contacts a,
  .site-header .site-nav a {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.012em;
  }
  .header-contacts a { color: #161c24; white-space: nowrap; }
  .site-header__main.shell {
    width: min(calc(100% - 48px), 1348px);
    grid-template-columns: 178px minmax(0, 1fr) var(--header-contact-slot) var(--header-cta-slot);
    gap: var(--header-inline-gap);
  }
  .site-header__brand,
  .site-header__brand img { width: 166px; }
  .site-header .site-nav { justify-self: center; gap: clamp(13px, 1.65vw, 26px); }
  .header-action { grid-column: 4; width: 100%; min-width: var(--header-cta-slot); justify-content: center; gap: 16px; white-space: nowrap; }
}

@media (min-width: 1121px) and (max-width: 1250px) {
  :root {
    --header-contact-slot: 246px;
    --header-cta-slot: 176px;
    --header-inline-gap: 12px;
  }
  .site-header__main.shell { grid-template-columns: 154px minmax(0, 1fr) var(--header-contact-slot) var(--header-cta-slot); }
  .site-header__brand,
  .site-header__brand img { width: 150px; }
  .site-header .site-nav { gap: 10px; }
  .header-contacts { gap: 10px; }
  .header-contacts a,
  .site-header .site-nav a { font-size: 11px; }
  .header-action { gap: 8px; padding-inline: 8px; }
}

.hero {
  width: min(calc(100% - 108px), 1700px);
  min-height: 466px;
  margin: calc(var(--header) + 22px) auto 0;
  border: 1px solid #dce8f2;
  border-radius: 17px;
  background: #f9fbfe;
}
.hero::before {
  z-index: -1;
  background: linear-gradient(108deg, #fff 0%, #f5f9fe 39%, #e9f2fc 57%, transparent 57%);
}
.hero__visual {
  inset: 0 0 0 42%;
  z-index: -2;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 6% 100%, 0 77%, 14% 35%, 0 34%);
  background: #eaf3fc;
}
.hero__visual img { object-fit: cover; object-position: 63% center; }
.hero__content.shell {
  width: min(calc(100% - 132px), 1400px);
  min-height: 466px;
  align-items: center;
}
.hero__copy { width: min(54%, 680px); padding: 46px 0 50px; }
.hero .eyebrow { display: flex; margin-bottom: 24px; color: #5c6a79; font-size: 11px; }
.hero h1 {
  max-width: 680px;
  color: #061941;
  font-size: clamp(37px, 3.05vw, 56px);
  font-weight: 650;
  line-height: 1.09;
  letter-spacing: -.037em;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero h1 .hero__audience {
  display: block;
  margin-top: 4px;
  font-size: .72em;
  line-height: 1.13;
  letter-spacing: -.034em;
  background: linear-gradient(98deg, #0030a7 4%, #0d55cb 53%, #397ce8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lead { max-width: 595px; margin-top: 20px; color: #66758b; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.48; }
.hero__actions { margin-top: 27px; gap: 16px; }
.hero .button { min-height: 49px; padding-inline: 22px; border-radius: 8px; font-size: 13px; }

.directions { padding-block: 52px 77px; background: #fff; }
.directions .section-heading { margin-bottom: 0; }
.direction-cards { margin-top: 24px; }
.directions .section-heading > div { display: block; }
.directions .section-heading h2 {
  max-width: 650px;
  font-size: clamp(34px, 2.6vw, 39px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -.035em;
}
.direction-cards { gap: 16px; }
.direction-card {
  min-height: 312px;
  border-color: #d8e5f2;
  border-radius: 10px;
  box-shadow: none;
}
.direction-card__media {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 2.42 / 1;
  margin: 0;
  border-bottom: 1px solid #e1eaf4;
  border-radius: 9px 9px 0 0;
  background: #edf4fa;
}
.direction-card__media img { object-fit: cover; object-position: center; filter: none; transform: none; }
.direction-card__head {
  order: 2;
  display: flex;
  min-height: 31px;
  padding: 10px 17px 0;
  color: #0030a7;
  font: 600 10px/1.2 var(--font);
  letter-spacing: .045em;
}
.direction-card__head > span:first-child { color: #6c7a8b; }
.direction-card__copy { order: 3; padding: 8px 17px 0; gap: 6px; }
.direction-card__copy strong { color: #112b55; font-size: clamp(20px, 1.47vw, 23px); font-weight: 650; line-height: 1.1; }
.direction-card__copy small { min-height: 0; color: #68798e; font-size: 11px; line-height: 1.35; }
.direction-card__action {
  order: 4;
  min-height: 33px;
  margin: auto 17px 11px;
  padding-top: 8px;
  border: 0;
  color: #10345e;
  font-size: 11px;
  line-height: 1.25;
}
.solution-card__logo--wide img { max-width: 100%; max-height: 56px; }
@media (hover: hover) and (pointer: fine) {
  .direction-card:hover { border-color: #abc8e1; box-shadow: 0 12px 32px rgb(21 52 89 / 9%); transform: translateY(-2px); }
  .direction-card:hover .direction-card__media img { transform: none; filter: none; }
}

@media (max-width: 1250px) and (min-width: 861px) {
  .hero { width: calc(100% - 48px); }
  .hero__content.shell { width: calc(100% - 84px); }
  .hero__copy { width: 60%; }
  .hero h1 { font-size: clamp(34px, 3.8vw, 47px); }
  .hero__visual { inset-inline-start: 45%; }
}

@media (max-width: 1120px) {
  .site-header__top { display: none; }
  .hero { margin-top: calc(var(--header) + 22px); }
  .direction-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .direction-card { min-height: 350px; }
}

@media (max-width: 860px) {
  .hero {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 18px;
  }
  .hero::before { background: linear-gradient(145deg, #fff, #eef5fc 85%); }
  .hero__content.shell {
    order: 1;
    width: calc(100% - 48px);
    min-height: 0;
    padding-block: 36px 28px;
  }
  .hero__copy { width: 100%; padding: 0; }
  .hero h1 { max-width: 650px; font-size: clamp(32px, 5.6vw, 48px); }
  .hero__visual {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(250px, 48vw, 410px);
    clip-path: none;
    border-top: 1px solid #d9e7f0;
  }
  .hero__visual picture,
  .hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__visual img { object-position: 70% center; transform: none; }
  .directions { padding-block: 42px 64px; }
  .directions .section-heading h2 { font-size: clamp(30px, 4.9vw, 39px); }
  .direction-card__media { aspect-ratio: 2 / 1; }
}

@media (max-width: 700px) {
  .hero__content.shell { width: calc(100% - 40px); }
  .hero .eyebrow { margin-bottom: 18px; font-size: 10px; }
  .hero h1 { font-size: clamp(25px, 7vw, 32px); line-height: 1.13; }
  .hero__lead { font-size: 14px; }
  .hero__visual { height: 280px; }
  .hero__visual img { width: 100%; object-position: 72% center; transform: none; }
  .direction-cards[data-home-carousel] { grid-template-columns: none; }
  .direction-cards[data-home-carousel] > li { flex-basis: min(84vw, 350px); }
  .direction-card { min-height: 365px; }
  .direction-card__media { height: auto; min-height: 0; aspect-ratio: 1.92 / 1; }
}

@media (max-width: 480px) {
  .hero { width: calc(100% - 32px); margin-top: calc(var(--header) + 16px); }
  .hero__content.shell { width: calc(100% - 36px); }
  .hero__visual { height: 240px; }
}

@media (forced-colors: active) {
  .hero h1 .hero__audience { -webkit-text-fill-color: currentColor; background: none; }
}