:root {
  color-scheme: light;
  --navy: #190482;
  --ink: #18157c;
  --blue: #4d82ef;
  --heading-font: 'dinneuzeitgroteskltw01-_812426', 'Arial Narrow', sans-serif;
  --body-font: 'proxima-n-w01-reg', Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 var(--body-font); color: var(--ink); background: #fff; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, p { margin: 0; }
h1, h2 { font-weight: 400; }
:focus-visible { outline: 3px solid #eade71; outline-offset: 5px; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 12px; background: #fff; color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 5; min-height: 84px; background: var(--navy); color: #fff; box-shadow: 0 0 5px #0008; }
.header-inner { display: flex; align-items: center; min-height: 84px; padding: 16px max(24px, calc((100vw - 1280px) / 2)); }
.brand { min-width: 176px; font: 30px/1.2 var(--body-font); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; }
nav a { padding: 13px 16px; text-decoration: none; border-right: 1px solid #fff; }
nav a:last-child { border-right: 0; }
nav a:hover, nav a[aria-current='page'] { background: #ffffff0a; }
.hero { height: 542px; position: relative; overflow: hidden; background: #bbc8cf; }
.hero-video { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.hero-inner { position: relative; max-width: 980px; margin: auto; padding-top: 33px; }
.hero-copy { width: 610px; max-width: 100%; padding: 22px 26px 29px; border-radius: 10px; background: #32323280; color: #fff; text-shadow: 1px 1px 2px #000b; }
.hero h1 { font: 50px/1.2 var(--heading-font); margin-bottom: 11px; }
.hero-copy p { font: 26px/1.2 var(--body-font); }
.video-toggle { position: absolute; bottom: 12px; right: 16px; border: 1px solid #ffffff80; border-radius: 4px; padding: 7px 12px; background: #190482cc; color: #fff; cursor: pointer; font: 14px var(--body-font); }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { position: relative; min-height: 281px; color: #fff; text-decoration: none; overflow: hidden; }
.service-0 { background: #7752fe; }
.service-1 { background: var(--navy); }
.service-2 { background: #8e8ffa; }
.card-image { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .15; }
.card-copy { position: relative; width: 306px; max-width: calc(100% - 40px); margin: auto; padding: 44px 0 30px; }
.card-copy h2 { font: 25px/1.4 var(--heading-font); letter-spacing: 1.5px; margin-bottom: 20px; }
.card-copy p { font: 16px/1.4 'avenir-lt-w01_35-light1475496', sans-serif; margin-bottom: 22px; }
.arrow { width: 50px; height: 30px; object-fit: contain; transition: transform .2s; }
.service-card:hover .arrow { transform: translateX(6px); }
.about-inner { max-width: 932px; margin: auto; padding: 16px 0 32px; display: grid; grid-template-columns: 403px 396px; gap: 117px; }
.about-copy h1, .about-copy h2 { color: var(--blue); font: 25px/1.4 var(--body-font); margin: 0 0 4px; }
.simple-page {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(24px, 1fr) auto minmax(48px, 2fr);
  background:
    linear-gradient(90deg, var(--navy), #7752fe, #8e8ffa) top / 100% 6px no-repeat,
    radial-gradient(ellipse at top right, #8e8ffa55, transparent 75%),
    #f7f5ff;
}
.simple-page .about-inner { grid-row: 2; width: min(932px, calc(100% - 48px)); margin: 0 auto; padding: 0; row-gap: 24px; }
.simple-page .about-intro { grid-column: 1; grid-row: 1; }
.simple-page .about-intro > p { margin-bottom: 0; }
.simple-page .about-details { grid-column: 1; grid-row: 2; }
.simple-page .about-copy h1, .simple-page .about-copy h2 { color: #6842d5; }
.simple-page .portrait { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 0; box-shadow: 12px 12px 0 #8e8ffa55; }
.about-copy > p { margin-bottom: 24px; }
.about-copy > ul { padding-left: 29px; margin: 0 0 24px; }
.portrait { margin-top: 55px; width: 396px; height: 365px; object-fit: cover; }
.contact ul { list-style: none; padding: 0; margin: 0; }
.contact li { margin-bottom: 9px; }
.contact a { display: inline-flex; align-items: center; gap: 10px; }
.contact img { width: 28px; height: 28px; object-fit: cover; }
.service-page { background-image: linear-gradient(#190482c4, #190482c4), var(--service-image); background-size: cover; background-position: center; }
.service-inner { max-width: 980px; margin: auto; padding: 80px 23px 54px; }
.service-heading { color: #fff; }
.eyebrow { font: 25px/1.4 var(--heading-font); margin-bottom: 30px; color: #eade71; }
.service-heading h1 { font: 110px/.9 var(--heading-font); overflow-wrap: break-word; margin-bottom: 47px; }
.service-body { max-width: 904px; color: #fff; font: 16px/1.7 'avenir-lt-w01_35-light1475496', sans-serif; }
.service-body p, .service-body ul, .service-body ol { margin: 0 0 27px; }
.service-body ul, .service-body ol { padding-left: 24px; }
.service-body > :last-child { margin-bottom: 0; }
.not-found { max-width: 980px; margin: auto; padding: 80px 24px; }
@media (max-width: 1020px) {
  .hero-inner { padding: 33px 24px 0; }
  .about-inner { margin: 0 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .portrait { height: auto; aspect-ratio: 396 / 365; }
  .brand { min-width: 110px; }
  .header-inner { padding-left: 24px; padding-right: 24px; }
  nav a { padding-left: 12px; padding-right: 12px; }
  .service-heading h1 { font-size: 80px; }
}
@media (max-width: 720px) {
  .site-header { position: relative; }
  .header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand { min-width: 0; }
  nav { gap: 2px 16px; }
  nav a { border: 0; padding: 5px 0; font-size: 15px; }
  .hero { height: 420px; }
  .hero-inner { padding-top: 24px; }
  .hero-copy { padding: 22px; }
  .hero h1 { font-size: clamp(32px, 8vw, 50px); }
  .hero-copy p { font-size: 21px; }
  .services { grid-template-columns: 1fr; }
  .service-card { min-height: 240px; }
  .card-copy { width: auto; max-width: 100%; padding: 32px 24px; }
  .card-copy p { max-width: 350px; }
  .about-inner { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
  .portrait { margin-top: 0; width: 100%; max-width: 396px; }
  .service-inner { padding: 40px 24px; }
  .eyebrow { margin-bottom: 36px; }
  .service-heading h1 { font-size: clamp(64px, 15vw, 90px); max-width: 500px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}