@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans Condensed";
  src: url("../fonts/OpenSansCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: #1a1a1a;
  font-family: "Montserrat", sans-serif;
  overflow-x: clip;
}

img { max-width: 100%; }

a { color: inherit; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4vw;
}

.brand img {
  display: block;
  height: clamp(108px, 9vw, 140px);
  width: auto;
}

@media (min-width: 861px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
  }

  .site-header .nav,
  .site-footer .nav {
    margin-top: calc(clamp(108px, 9vw, 140px) * 0.2);
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  font-size: clamp(12px, 1.25vw, 20px);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.nav a { text-decoration: none; }

.nav a:hover { color: #0c47a6; }

.nav span { color: #9aa1ab; font-weight: 400; }

.hero { position: relative; }

.hero-art {
  display: block;
  width: 100%;
  height: auto;
}

.apply {
  position: absolute;
  top: 3%;
  right: 2.4%;
  width: 31%;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 1.4em 1.15em 1.1em;
  background: #02102b;
  color: #fff;
  border-radius: clamp(16px, 1.8vw, 32px);
  box-shadow: 0 16px 36px rgba(2, 16, 43, 0.18);
}

.apply h2,
.apply .kicker { margin: 0; text-align: center; }

.apply h2 {
  font-family: "Anton", "Montserrat", sans-serif;
  font-size: clamp(22px, 2vw, 40px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.apply .kicker {
  margin: 0.15em 0 0.9em;
  color: #edaf3c;
  font-family: "Open Sans Condensed", "Montserrat", sans-serif;
  font-size: clamp(13px, 1.25vw, 22px);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

.apply input,
.apply select {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: #edaf3c;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 16px);
  letter-spacing: 0.04em;
  padding: 0.72em 1em;
}

.apply input::placeholder { color: #fff; opacity: 1; }

.apply select {
  appearance: none;
  cursor: pointer;
}

.apply select option { color: #1a1a1a; background: #fff; }

.apply input:focus,
.apply select:focus,
.apply button:focus-visible,
.pin:focus-visible,
.nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.agree {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  color: #d5dbe6;
  font-size: clamp(9px, 0.68vw, 12px);
  line-height: 1.35;
}

.agree label {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.agree input {
  width: 12px;
  height: 12px;
  margin-top: 1px;
  padding: 0;
  accent-color: #edaf3c;
  flex: none;
}

.agree a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.apply button {
  align-self: center;
  margin-top: 0.35em;
  border: 0;
  border-radius: 999px;
  background: #edaf3c;
  color: #fff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 0.85vw, 15px);
  letter-spacing: 0.06em;
  padding: 0.75em 1.3em;
}

.apply button:hover,
.pin:hover { background: #f2be55; }

.apply button:active,
.pin:active { transform: scale(0.98); }

.apply button:disabled {
  opacity: 0.65;
  cursor: progress;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.recaptcha-slot:empty { display: none; }

.recaptcha-slot {
  display: flex;
  justify-content: center;
  height: 68px;
  overflow: hidden;
}

.recaptcha-slot .g-recaptcha {
  transform: scale(0.84);
  transform-origin: top center;
}

.form-note {
  margin: 0;
  text-align: center;
  color: #edaf3c;
  font-size: clamp(12px, 0.9vw, 15px);
}

.form-note.is-error { color: #ffb4b4; }

.goals { position: relative; }

.goals img,
.banner img {
  display: block;
  width: 100%;
  height: auto;
}

.goals-copy {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 44%;
}

.goals-copy h2 {
  margin: 0 0 0.45em;
  color: #02102b;
  font-size: clamp(22px, 2.7vw, 52px);
  font-weight: 600;
  line-height: 1.02;
}

.goals-copy h2 span {
  display: block;
  color: #e3a52a;
}

.goals-copy p {
  margin: 0;
  max-width: 34em;
  font-size: clamp(14px, 1.35vw, 24px);
  line-height: 1.45;
}

.points {
  margin-top: 1.1em;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: clamp(13px, 1.25vw, 22px);
}

.banner { position: relative; }

.banner-copy {
  position: absolute;
  left: 4%;
  top: 11%;
  max-width: 48%;
  color: #02102b;
}

.banner-copy h2,
.banner-copy p {
  margin: 0;
  font-size: clamp(18px, 2.5vw, 44px);
  font-weight: 600;
  line-height: 1.15;
}

.branches {
  padding: clamp(36px, 4vw, 72px) 6vw clamp(28px, 3vw, 48px);
  text-align: center;
}

.branches h2 {
  margin: 0;
  color: #02102b;
  font-size: clamp(24px, 2.4vw, 42px);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.branch-list {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 7vw, 110px);
  margin-top: 32px;
}

.pin {
  display: block;
  min-width: min(100%, 280px);
  padding: 16px 22px 14px;
  border-radius: 16px;
  background: #edaf3c;
  color: #fff;
  text-decoration: none;
}

.pin strong,
.pin span { display: block; letter-spacing: 0.05em; }

.pin strong { font-size: clamp(14px, 1.1vw, 18px); }

.pin span {
  margin-top: 4px;
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 500;
}

.branch p {
  margin: 12px 0 0;
  color: #5c6570;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.45;
}

.branch p a { text-decoration: none; }

.branch p a:hover { text-decoration: underline; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}

.apply button,
.pin {
  transition: background-color 0.15s ease, transform 0.1s ease-out;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .apply {
    animation: card-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  @supports (animation-timeline: view()) {
    .apply {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }

    .branch-list .rise:nth-child(2) {
      animation-range: entry 10% cover 36%;
    }

    .goals,
    .banner { overflow: clip; }

    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 80%;
    }
  }
}

html.motion-js .rise {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-js .rise.in {
  opacity: 1;
  transform: none;
}

html.motion-js .branch-list .rise:nth-child(2) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 860px) {
  .site-header,
  .site-footer {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 4vw 12px;
  }

  .brand img {
    height: clamp(92px, 28vw, 124px);
  }

  .site-header .nav,
  .site-footer .nav {
    margin-top: 0;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.45em;
    font-size: clamp(13px, 3.7vw, 17px);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .apply {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 16px;
  }

  .goals-copy {
    position: static;
    width: auto;
    margin: 0;
    padding: 48px 20px 64px;
    text-align: right;
  }

  .goals-copy p {
    margin-left: auto;
  }

  .banner-copy { max-width: 78%; }

  .branch-list {
    flex-direction: column;
    align-items: center;
  }
}