/* ==========================================================================
   Tokens
   The original is drawn on a 1920px desktop / 375px mobile canvas and scales
   the root font-size, so every value below is in "design px" written as rem.
   ========================================================================== */
:root {
  --navy: #1f1f61;
  --navy-line: #353571;
  --light: #f4f4f7;
  --white: #fff;
  --dark: #141414;

  --display: "Bebas Neue", "Bebas Neue Pro", Impact, sans-serif;
  --text: "Inter", system-ui, sans-serif;

  --ease-btn: cubic-bezier(.215, .61, .355, 1);
}

html { font-size: calc(1px + 1.5 * (100vw - 375px) / 584); }                  /* ≤1024 */
@media (min-width: 1025px) { html { font-size: calc(.5px + .5 * (100vw - 960px) / 960); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-width: 320px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 400;          /* Bebas Neue ships one (bold-looking) weight */
  font-size: 20rem;
  line-height: 1.2;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
h1, h2, h3, p { font-weight: inherit; font-size: inherit; }

.container { width: 100%; padding: 0 40rem; }
@media (max-width: 1024px) { .container { padding: 0 20rem; } }

/* ==========================================================================
   Buttons: fill rises from below as a circle and flattens into a rectangle
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 120rem; padding: 0 60rem;
  font-family: var(--display); font-size: 30rem; line-height: 1.1; text-transform: uppercase;
  background: var(--light); color: var(--navy);
  border: 1rem solid var(--light); border-radius: 5rem;
  transition: color .65s var(--ease-btn);
}
.btn__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 5rem; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: var(--navy);
  border-radius: 100%; opacity: 0; transform: translateY(100%);
  transition: opacity .65s var(--ease-btn), border-radius 0s .65s, transform 0s .65s;
}
.btn--accent { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--accent::after { background: var(--light); }
@media (hover: hover) {
  .btn:hover { color: var(--white); }
  .btn--accent:hover { color: var(--navy); }
  .btn:hover::after {
    opacity: 1; border-radius: 0; transform: none;
    transition: border-radius .65s var(--ease-btn), transform .65s var(--ease-btn);
  }
}
@media (max-width: 1024px) {
  .btn { width: 100%; height: 80rem; font-size: 20rem; }
}

/* Rolling text on hover: copy A slides up and out, copy B follows from below */
a.roll:not(.btn) { display: inline-block; position: relative; clip-path: inset(0 -6em); vertical-align: top; }
.btn .btn__inner:has(.roll__a) { display: block; position: relative; clip-path: inset(0 -6em); }
.roll__a, .roll__b { display: block; white-space: nowrap; }
.roll__b { position: absolute; left: 0; top: 100%; }
.roll .char { display: inline-block; }
@media (max-width: 1024px) { .roll__b { display: none; } }

/* ==========================================================================
   Page curtain
   ========================================================================== */
.plug { position: fixed; inset: 0; z-index: 50; background: var(--light); transform: translateY(0); pointer-events: none; }
.plug__inner { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--navy); }
.no-js .plug { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transform: translateY(-105%); }
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20rem; padding-bottom: 20rem;
  transition: transform .8s ease-in-out;
}
.header.is-hidden .header__bar { transform: translateY(calc(-105% - 120rem)); }
.header__logo, .header__menu, .lang__btn {
  height: 80rem; background: var(--light); border-radius: 5rem;
  display: flex; align-items: center; justify-content: center;
}
.header__logo { padding: 0 30rem; }
.header__logo svg { width: 120rem; height: 40rem; }
.header__menu { gap: 45rem; padding: 0 40rem; font-size: 16rem; text-transform: uppercase; }
.header__actions { display: flex; gap: 10rem; }
.header__btn { height: 80rem; font-size: 16rem; padding: 0 40rem; }

.lang { position: relative; font-size: 16rem; text-transform: uppercase; }
.lang__btn { width: 85rem; padding: 0; font-size: 16rem; }
.lang__btn svg { width: 13rem; height: 12rem; transition: transform .3s; }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__list {
  position: absolute; top: 100%; left: 0; width: 100%; margin-top: 10rem;
  display: flex; flex-direction: column; align-items: center; gap: 12rem; padding: 20rem 0;
  background: var(--light); border-radius: 5rem;
  transform: translateX(200%); visibility: hidden;
}
.lang__btn[aria-expanded="true"] + .lang__list { visibility: visible; }

.burger, .mobile-menu { display: none; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

@media (max-width: 1024px) {
  .header.is-hidden .header__bar { transform: none; }
  .header__logo { height: 60rem; padding: 0 8rem; }
  .header__logo svg { width: 66rem; height: 22rem; }
  .header__menu, .header__btn { display: none; }
  .lang__btn { width: 60rem; height: 60rem; }
  .burger { display: inline-flex; width: auto; height: 60rem; padding: 0 20rem; min-width: 80rem; font-size: 14rem; }
  .mobile-menu {
    position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: -1;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 30vh 20rem 20rem;
    background: var(--navy); color: var(--white);
    transform: translateX(100%);
  }
  .mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 30rem; font-size: 30rem; text-transform: uppercase; }
  .mobile-menu .btn { background: var(--white); border-color: var(--white); }
}

/* ==========================================================================
   Split text (headings "grow" down from their top edge)
   ========================================================================== */
.split-main .char, .split-scroll .char { display: inline-block; transform-origin: 50% 0; will-change: transform; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; padding-top: 160rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white); overflow: hidden;
}
/* Placeholder for the photo: set --hero-image to url(...) to use your own */
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,20,60,.15) 0%, rgba(20,20,60,.55) 55%, rgba(15,15,45,.92) 100%),
    var(--hero-image, none),
    radial-gradient(120% 80% at 70% 30%, #5b5fa8 0%, #2a2c73 45%, #15163f 100%);
  background-size: cover; background-position: center;
}
.hero__bg::after {                        /* perspective "road" lines */
  content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 55%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 120px);
  transform: perspective(500px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask: linear-gradient(to top, #000, transparent);
          mask: linear-gradient(to top, #000, transparent);
}
.hero__container { position: relative; z-index: 2; padding-bottom: 110rem; }
.hero__head {
  position: relative; display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 190rem; padding-bottom: 10rem;
}
.hero__title { font-size: 200rem; line-height: .8; text-transform: uppercase; }
.hero__abb { display: flex; align-items: center; justify-content: space-between; width: 1100rem; font-size: 40rem; line-height: .9; text-transform: uppercase; }
.hero__abb-letters { display: flex; gap: 160rem; }
.arrow { display: inline-flex; align-items: center; }
.arrow svg { width: 1.6em; height: .8em; }
.hero__line { position: absolute; left: 0; bottom: 0; width: 0; height: 1rem; background: rgba(255,255,255,.2); }
.hero__inner { display: flex; flex-direction: column; gap: 20rem; margin-left: 740rem; max-width: 555rem; }
.hero__caption { font-size: 30rem; line-height: .9; text-transform: uppercase; }
.hero__text { font-family: var(--text); font-weight: 600; font-size: 20rem; line-height: 1.2; }
@media (max-width: 1024px) {
  .hero__container { padding-bottom: 40rem; }
  .hero__head { flex-direction: column; align-items: stretch; margin-bottom: 40rem; }
  .hero__title { font-size: 80rem; margin-bottom: 90rem; }
  .hero__abb { width: 100%; font-size: 20rem; }
  .hero__abb-letters { gap: 20rem; }
  .hero__inner { margin-left: 0; gap: 10rem; }
  .hero__caption { font-size: 20rem; margin-bottom: 10rem; }
  .hero__text { font-size: 14rem; }
}

/* ==========================================================================
   Info / reading blocks (words light up as you scroll)
   ========================================================================== */
.info { min-height: 100vh; padding: 200rem 0; display: flex; align-items: center; }
.info .container { width: 100%; }
.info__row { display: flex; align-items: center; justify-content: space-between; }
.info__title { width: 660rem; font-size: 200rem; line-height: .8; text-transform: uppercase; }
.info__text { margin-left: auto; width: 1080rem; display: flex; flex-direction: column; gap: 60rem; font-size: 80rem; line-height: .9; text-transform: uppercase; }
.info__text--center { margin: 0 auto; width: 1200rem; text-align: center; }
.reading__text .word { opacity: .1; }
.no-motion .reading__text .word { opacity: 1; }
@media (max-width: 1024px) {
  .info { min-height: 0; padding: 80rem 0 40rem; }
  .info__row { flex-direction: column; align-items: stretch; }
  .info__title { width: auto; margin-bottom: 40rem; font-size: 80rem; }
  .info__text, .info__text--center { width: 100%; font-size: 40rem; gap: 20rem; }
}

/* ==========================================================================
   Our story
   ========================================================================== */
.story { padding: 90rem 0; }
.story__card { padding: 45rem 40rem 20rem; border-radius: 20rem; background: var(--navy); color: var(--white); overflow: hidden; }
.story__top, .contact__top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10rem; border-bottom: 1rem solid var(--navy-line); text-transform: uppercase;
}
.story__body { display: flex; padding: 0 190rem 0 95rem; border-bottom: 1rem solid var(--navy-line); }
.story__col { padding: 90rem; }
.story__col:first-child { flex: 0 0 auto; width: 650rem; border-right: 1px solid var(--navy-line); }
.story__title { font-size: 70rem; text-transform: uppercase; margin-bottom: 40rem; }
.story__caption { max-width: 600rem; font-size: 30rem; line-height: .9; margin-bottom: 40rem; }
.story__text { font-family: var(--text); font-size: 18rem; margin-bottom: 20rem; }
.story__text:last-child { margin-bottom: 0; }
.story__texts { margin-bottom: 80rem; }
.story__bottom {
  padding-top: 15rem; overflow: hidden; white-space: nowrap;
  color: rgba(255,255,255,.05); font-size: 250rem; letter-spacing: -.03em; line-height: 1; text-transform: uppercase;
}
.ticker { display: inline-block; padding-left: 100%; animation: ticker 20s linear infinite; }
.ticker span { margin-right: 150rem; }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (max-width: 1024px) {
  .story { padding: 50rem 0 40rem; }
  .story__card { padding: 30rem 20rem 20rem; border-radius: 10rem; }
  .story__top { font-size: 15rem; padding-bottom: 5rem; margin-bottom: 40rem; }
  .story__body { flex-direction: column; padding: 0; border: 0; }
  .story__col { padding: 0; }
  .story__col:first-child { width: 100%; border-right: 0; border-bottom: 1rem solid var(--navy-line); padding-bottom: 25rem; margin-bottom: 25rem; }
  .story__title { font-size: 40rem; margin-bottom: 20rem; }
  .story__caption { font-size: 20rem; margin-bottom: 20rem; }
  .story__text { font-size: 14rem; margin-bottom: 15rem; }
  .story__texts { margin-bottom: 30rem; }
  .story__bottom { display: none; }
}

/* ==========================================================================
   Goals + Facts (three cards)
   ========================================================================== */
.goals, .facts { padding: 90rem 0; }
.section-title { margin-bottom: 60rem; font-size: 200rem; line-height: 1; text-align: center; text-transform: uppercase; }
.cards { display: flex; justify-content: space-between; }
.goal, .fact { width: 605rem; border-radius: 10rem; display: flex; flex-direction: column; align-items: flex-start; }
.goal { min-height: 555rem; padding: 25rem 70rem 60rem; gap: 75rem; background: var(--light); }
.goal__num { color: rgba(31,31,97,.05); font-size: 200rem; line-height: 1.1; }
.goal__inner { max-width: 320rem; }
.goal__heading { font-size: 60rem; margin-bottom: 20rem; text-transform: uppercase; }
.goal__text { font-family: var(--text); line-height: 1; }
.fact { min-height: 550rem; padding: 30rem 60rem 50rem; gap: 40rem; justify-content: space-between; background: var(--navy); color: var(--white); }
.fact__num { font-size: 200rem; line-height: 1; }
.fact__text { font-size: 30rem; line-height: .9; max-width: 320rem; }
@media (max-width: 1024px) {
  .goals, .facts { padding: 40rem 0; }
  .section-title { margin-bottom: 40rem; font-size: 80rem; line-height: .8; text-align: left; }
  .cards { flex-direction: column; gap: 10rem; }
  .goal, .fact { width: 100%; min-height: 0; }
  .goal { padding: 40rem; gap: 20rem; }
  .goal__num { color: rgba(31,31,97,.1); font-size: 60rem; line-height: 1; }
  .goal__inner { max-width: 245rem; }
  .goal__heading { font-size: 40rem; margin-bottom: 10rem; }
  .goal__text { font-size: 16rem; }
  .fact { padding: 50rem; gap: 30rem; }
  .fact__num { font-size: 100rem; letter-spacing: -.03em; }
  .fact__text { font-size: 20rem; }
}

/* ==========================================================================
   Advantages (pinned; the list scrolls up past a fixed title)
   ========================================================================== */
.adv { padding: 140rem 0 50rem; height: 100vh; overflow: hidden; background: var(--white); }
.adv__container { display: flex; justify-content: space-between; align-items: flex-start; }
.adv__side { display: flex; flex-direction: column; justify-content: space-between; height: 760rem; }
.adv__title { max-width: 730rem; font-size: 200rem; letter-spacing: -.03em; line-height: .8; text-transform: uppercase; }
.adv__list { display: flex; flex-direction: column; gap: 10rem; }
.adv__item {
  width: 915rem; min-height: 320rem; padding: 55rem 75rem;
  display: flex; align-items: center; gap: 150rem;
  background: var(--navy); color: var(--white); border-radius: 10rem;
}
.adv__num { min-width: 150rem; opacity: .05; font-size: 188rem; letter-spacing: -.03em; }
.adv__text { max-width: 425rem; font-size: 40rem; line-height: .9; }

.progress { position: relative; width: 730rem; height: 2rem; background: rgba(31,31,97,.15); }
.progress--light { width: 100%; background: rgba(244,244,247,.12); }
.progress__fill { position: absolute; left: 0; top: 0; height: 100%; width: 10%; background: var(--navy); }
.progress--light .progress__fill { background: var(--white); }

@media (max-width: 1024px) {
  .adv { height: auto; overflow: visible; padding: 40rem 0; }
  .adv__container { flex-direction: column; align-items: stretch; }
  .adv__side { height: auto; }
  .adv__title { max-width: 100%; font-size: 80rem; letter-spacing: 0; margin-bottom: 40rem; }
  .adv__item { width: 100%; min-height: 0; padding: 40rem; flex-direction: column; align-items: flex-start; gap: 25rem; }
  .adv__num { min-width: 0; font-size: 60rem; line-height: .8; opacity: .1; }
  .adv__text { max-width: 210rem; font-size: 20rem; }
  .progress { display: none; }
}

/* ==========================================================================
   Note (letters slide together)
   ========================================================================== */
.note { padding: 90rem 0; }
.note__card { padding: 280rem 40rem 225rem; background: var(--light); border-radius: 20rem; display: flex; flex-direction: column; align-items: center; }
.note__head { display: flex; justify-content: space-between; width: 100%; margin-bottom: 135rem; font-size: 100rem; line-height: .9; text-transform: uppercase; }
.note__title { text-align: center; font-size: 150rem; letter-spacing: -.03em; line-height: .9; text-transform: uppercase; }
@media (max-width: 1024px) {
  .note { padding: 40rem 0; }
  .note__card { padding: 50rem 20rem; border-radius: 10rem; }
  .note__head { width: auto; gap: 10rem; font-size: 40rem; margin-bottom: 40rem; }
  .note__title { font-size: 50rem; }
}

/* ==========================================================================
   Services (pinned stack: each card slides over the previous one)
   ========================================================================== */
.services { padding: 180rem 0; background: var(--white); }
.services__container { display: flex; gap: 10rem; height: 920rem; }
.services__panel {
  width: 915rem; padding: 120rem 60rem 55rem; border-radius: 20rem;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--white);
  background:
    linear-gradient(160deg, rgba(31,31,97,.2), rgba(20,20,60,.85)),
    var(--services-image, none),
    radial-gradient(90% 70% at 20% 10%, #6468b5, #1f1f61 60%, #121235);
  background-size: cover; background-position: center;
}
.services__title { max-width: 730rem; font-size: 200rem; letter-spacing: -.03em; line-height: .8; text-transform: uppercase; }
.services__btn { display: none; }
.services__stack { position: relative; width: 915rem; }
.svc {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--light); border-radius: 20rem;
  transform: translate(-50%, 100%);
}
.svc:first-child { transform: translate(-50%, -50%); }
.svc--accent { background: var(--navy); color: var(--light); }
.svc__inner { display: flex; align-items: center; gap: 100rem; }
.svc__num { font-size: 260rem; letter-spacing: -.02em; }
.svc__body { width: 460rem; }
.svc__heading { margin-bottom: 26rem; font-size: 60rem; line-height: .9; text-transform: uppercase; }
.svc__text { max-width: 250rem; font-family: var(--text); line-height: 1; }
.svc__plus { position: absolute; left: 50%; bottom: 55rem; transform: translateX(-50%); width: 85rem; height: 85rem; padding: 0; }
.svc__plus .btn__inner::before, .svc__plus .btn__inner::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 15rem; height: 1.6rem; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .3s;
}
.svc__plus .btn__inner::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc__plus:hover .btn__inner::before { transform: translate(-50%, -50%) rotate(180deg); }
.svc__plus:hover .btn__inner::after { transform: translate(-50%, -50%) rotate(270deg); }
@media (max-width: 1024px) {
  .services { padding: 40rem 0 80rem; }
  .services__container { height: auto; gap: 0; }
  .services__panel { width: 100%; padding: 50rem 20rem 20rem; border-radius: 10rem; }
  .services__title { max-width: 100%; font-size: 80rem; margin-bottom: 60rem; }
  .services__btn { display: flex; }
  .services__stack, .services .progress { display: none; }
}

/* ==========================================================================
   Contact + forms
   ========================================================================== */
.contact { padding: 90rem 0; }
.contact__card { padding: 45rem 40rem 115rem; background: var(--light); border-radius: 20rem; }
.contact__top { border-color: rgba(31,31,97,.2); margin-bottom: 105rem; }
.contact__title { width: 1400rem; font-size: 200rem; line-height: .9; text-transform: uppercase; }
.contact__inner { margin: 75rem 0 0 700rem; }
.contact__text { max-width: 250rem; margin-bottom: 40rem; font-size: 30rem; line-height: .9; }

.form { display: flex; flex-wrap: wrap; gap: 10rem; }
.field { position: relative; display: flex; width: 525rem; font-family: var(--text); }
.field__label {
  position: absolute; left: 40rem; top: 50%; transform: translateY(-50%); z-index: 2;
  color: rgba(31,31,97,.4); font-size: 16rem; font-weight: 500; pointer-events: none; transition: .3s;
}
.field__label b { color: var(--navy); font-weight: 500; }
.field.is-filled .field__label { top: calc(50% - 23rem); font-size: 12rem; }
.field__input {
  width: 100%; padding: 33rem 40rem; border: 0; outline: 0; border-radius: 5rem;
  background: var(--white); color: var(--dark);
  font: 500 16rem var(--text);
}
.field__input:focus-visible { box-shadow: 0 0 0 2rem var(--navy); }
.field.is-invalid .field__input { box-shadow: 0 0 0 2rem #d33; }
.form__submit { width: 100%; }
.form__submit[disabled] { opacity: .6; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact__direct { display: flex; flex-direction: column; gap: 8rem; margin-bottom: 40rem; font-size: 30rem; line-height: 1; }
.contact__direct a { text-decoration: underline; text-decoration-thickness: 1rem; text-underline-offset: 4rem; }
.modal__text a { text-decoration: underline; }
.form--modal .field { width: 100%; }
.form--modal .field__input { background: var(--light); }
@media (max-width: 1024px) {
  .contact { padding: 40rem 0; }
  .contact__card { padding: 30rem 20rem 20rem; border-radius: 10rem; }
  .contact__top { justify-content: center; padding-bottom: 5rem; margin-bottom: 80rem; font-size: 18rem; text-align: center; }
  .contact__top span:first-child { display: none; }
  .contact__title { width: 100%; font-size: 80rem; }
  .contact__inner { margin: 20rem 0 0; }
  .contact__text { max-width: 100%; font-size: 20rem; }
  .contact__direct { font-size: 22rem; margin-bottom: 20rem; }
  .form { flex-direction: column; }
  .field { width: 100%; }
  .field__label { left: 30rem; }
  .field__input { padding: 30rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding-top: 120rem; background: var(--dark); color: var(--white); }
.footer__container { display: flex; flex-direction: column; gap: 275rem; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; }
.footer__logo svg { width: 156rem; height: 52rem; }
.footer__menu { display: flex; justify-content: space-between; gap: 170rem; width: 1100rem; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10rem; }
.footer__col a { font-family: var(--text); font-size: 18rem; }
.footer__col a.footer__heading { font-family: var(--display); font-size: 30rem; text-transform: uppercase; margin-bottom: 50rem; }
.footer__title {
  display: block; padding-top: 30rem; margin-bottom: 30rem;
  border-top: 1rem solid rgba(255,255,255,.2);
  font-size: 257rem; line-height: .9; text-transform: uppercase; white-space: nowrap;
}
.footer__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20rem 0; border-top: 1rem solid rgba(255,255,255,.2);
  font-size: 12rem; text-transform: uppercase;
}
.footer__legal { display: flex; align-items: center; gap: 10rem; }
.footer__copy { width: 360rem; }
.footer__up { display: flex; align-items: center; gap: 15rem; }
.footer__up-btn { width: 30rem; height: 30rem; border-radius: 2rem; background: rgba(244,244,247,.05); color: var(--white); transition: .3s; }
.footer__up-btn svg { width: 100%; height: 100%; }
.footer__up-btn:hover { background: var(--white); color: var(--dark); }
@media (max-width: 1024px) {
  .footer { padding-top: 80rem; }
  .footer__container { gap: 60rem; }
  .footer__top { flex-direction: column; align-items: stretch; }
  .footer__logo { display: none; }
  .footer__menu { flex-direction: column; gap: 40rem; width: 100%; }
  .footer__col a { font-size: 16rem; line-height: 1.1; }
  .footer__col a.footer__heading { font-size: 20rem; margin-bottom: 10rem; }
  .footer__title { font-size: 47rem; padding-top: 15rem; margin-bottom: 15rem; }
  .footer__row { padding: 15rem 0 20rem; font-size: 10rem; color: rgba(255,255,255,.5); }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 5rem; }
  .footer__copy { width: auto; }
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal {
  margin: auto; width: 740rem; max-width: calc(100% - 40rem);
  padding: 65rem; border: 0; border-radius: 10rem;
  background: var(--white); color: var(--navy);
}
.modal::backdrop { background: rgba(20,20,20,.6); }
.modal[open] { animation: modal-in .5s cubic-bezier(.22,1,.36,1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(30rem) scale(.97); } }
.modal__close { position: absolute; top: 20rem; right: 25rem; font-family: var(--text); font-size: 32rem; line-height: 1; }
.modal__title { font-size: 50rem; line-height: .9; text-transform: uppercase; margin-bottom: 15rem; }
.modal__text { font-family: var(--text); font-size: 16rem; margin-bottom: 30rem; }
@media (max-width: 1024px) { .modal { padding: 40rem 20rem 20rem; } .modal__title { font-size: 34rem; } }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; padding-left: 0; }
  .modal[open] { animation: none; }
}