@font-face {
  font-family: 'Matangi';
  src: url('../assets/fonts/matangi/matangi-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Absans';
  src: url('../assets/fonts/absans/absans-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: 'Matangi', sans-serif;
  --font-body: 'Absans', sans-serif;
  --navy: #065A82;
  --navy-light: #3D7E9D;
  --navy-hover: #054462;
  --navy-active: #04364E;
  --blush: #DCC7BE;
  --charcoal: #313131;
  --background: #FFFFFF;
  --overlay: rgba(30, 30, 30, 0.72);
  --gray-disabled: #8B8B8B;
  --disabled-text: #1E384B;
  --muted-on-navy: rgba(255, 255, 255, 0.65);
  --error: #7F636E;
}

* {
  box-sizing: border-box;
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--charcoal);
  transition: background 0.2s ease;
}

body.thankyou-active {
  background: var(--navy);
}

body.thankyou-active .hero-image {
  display: none;
}

body.thankyou-active .site-footer {
  color: var(--muted-on-navy);
}

.page {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 96px 48px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero-image {
  position: absolute;
  top: 332px;
  left: 579px;
  width: 765px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  z-index: 1;
}

.logo-wrap {
  margin-top: -27px;
  margin-left: -60px;
  margin-bottom: -16px;
  opacity: 0;
  animation: fade-slide-up 0.7s ease-out 0.05s forwards;
}

.logo {
  width: 478px;
  height: auto;
  display: block;
}

.hero {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.headline {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  opacity: 0;
  animation: fade-slide-up 0.7s ease-out 0.18s forwards;
}

.headline-accent {
  display: block;
  color: var(--navy);
  font-size: 56px;
}

.headline-body {
  display: block;
  color: var(--charcoal);
  font-size: 56px;
  font-weight: 500;
}

.tablet-break {
  display: none;
}

.subtext {
  font-size: 19px;
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 620px;
  margin: 0 0 40px;
  opacity: 0;
  animation: fade-slide-up 0.7s ease-out 0.32s forwards;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blush);
  color: var(--navy);
  border: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 25px;
  padding: 16px 28px;
  margin-left: 0;
  cursor: pointer;
  opacity: 0;
  animation: fade-slide-up 0.7s ease-out 0.46s forwards;
  transition: background 0.15s ease, padding 0.15s ease, margin-left 0.15s ease;
}

.btn-primary:hover {
  background: #cdb8ac;
  padding: 16px 35px;
  margin-left: -7px;
}

.btn-primary:active {
  padding: 16px 28px;
  margin-left: 0;
}

.arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.btn-primary:hover .arrow {
  transform: translateX(4px);
}

.launching {
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  margin: 56px 0 0;
  opacity: 0;
  animation: fade-slide-up 0.7s ease-out 0.6s forwards;
}

.site-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 64px;
  color: var(--charcoal);
  font-size: 14px;
  transition: color 0.2s ease;
}

/* Thank You takeover */

.hero-thankyou {
  max-width: 980px;
  margin-top: 38px;
}

.thankyou-title {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 0.95;
  color: var(--blush);
  font-size: 140px;
  white-space: nowrap;
}

.thankyou-break {
  display: inline;
}

.thankyou-sub {
  color: #ffffff;
  font-size: 26px;
  line-height: 1.35;
  margin: 0 0 24px;
}

.thankyou-muted {
  color: var(--muted-on-navy);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 40px;
  max-width: 480px;
}

.btn-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blush);
  color: var(--navy);
  border: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 25px;
  padding: 16px 28px;
  margin-left: 0;
  cursor: pointer;
  transition: background 0.15s ease, padding 0.15s ease, margin-left 0.15s ease;
}

.btn-close:hover {
  background: #cdb8ac;
  padding: 16px 35px;
  margin-left: -7px;
}

.btn-close:active {
  padding: 16px 28px;
  margin-left: 0;
}

.x-icon {
  display: inline-block;
  position: relative;
  top: 0.13em;
  color: var(--navy);
  font-size: 1.44em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.btn-close:hover .x-icon {
  transform: translateX(4px);
}

/* Modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  position: relative;
  background: var(--navy);
  width: 100%;
  max-width: 480px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.field input,
.field select {
  width: 100%;
  background: var(--navy-light);
  border: none;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  appearance: none;
  -webkit-appearance: none;
}

.field input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: rgba(255, 255, 255, 0.75);
}

.field select:valid {
  color: #ffffff;
}

.field input:focus,
.field select:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.btn-submit {
  position: relative;
  width: 100%;
  background: #ffffff;
  color: var(--navy);
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  padding: 16px;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-submit:hover:not(:disabled) {
  background: var(--navy-hover);
  color: #ffffff;
}

.btn-submit:active:not(:disabled) {
  background: var(--navy-active);
  color: #ffffff;
}

.btn-submit:disabled {
  cursor: not-allowed;
}

.btn-submit:disabled:not(.is-loading) {
  background: var(--gray-disabled);
  color: var(--disabled-text);
}

.btn-submit.is-loading {
  background: var(--navy);
}

.form-error {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--error);
}

.btn-submit.is-loading .btn-submit-label {
  visibility: hidden;
}

.btn-spinner {
  display: none;
}

.btn-submit.is-loading .btn-spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* iPad ~481-1140px: starts at 1140px (not 1024px) specifically to skip past
   a dead zone (~1024-1131px) where the desktop 56px headline still wraps to
   an extra line before this tier's hardcoded breaks take over — this keeps
   the jump into this tier clean and single, with nothing odd in between.
   Headline font-size and the hero-image position both scale fluidly across
   this whole range (42px/1140px down to 29px/481px), continuously tracking
   the bottom-left corner of the "i" in "it" (first word of the last line).
   Requires min-height:501px — below that (e.g. a landscape phone, which is
   wide enough to match this width range but too short for this tier's
   design), the phone tier takes over instead, since its design safely
   degrades regardless of available space. */
@media (max-width: 1140px) and (min-width: 481px) and (min-height: 501px) {
  .page {
    padding: 48px 48px 40px;
  }

  .logo-wrap {
    margin-top: 19px;
    margin-left: -47px;
    margin-bottom: -3px;
  }

  .logo {
    width: 379px;
  }

  .headline-accent,
  .headline-body {
    font-size: clamp(29px, calc(19.511px + 1.9727vw), 42px);
  }

  .tablet-break {
    display: inline;
  }

  /* Hero image continuously tracks the bottom-left corner of the "l" in
     "lead" (last word of the last headline line); right edge matches the
     page's content margin (48px), same principle as desktop. */
  .hero-image {
    top: clamp(389.46px, calc(349.44px + 8.3202vw), 444.29px);
    left: clamp(193.49px, calc(145.92px + 9.8893vw), 258.66px);
    width: clamp(239.51px, calc(90.1107vw - 193.92px), 833.34px);
  }

  .subtext {
    font-size: 17px;
    max-width: 520px;
  }

  .btn-primary {
    font-size: 20px;
  }

  .launching {
    font-size: 22px;
  }

  .hero-thankyou {
    margin-top: 69px;
  }

  .thankyou-title {
    font-size: 96px;
    white-space: normal;
  }

  .thankyou-break {
    display: block;
  }

  .thankyou-sub {
    font-size: 22px;
  }

  .thankyou-muted {
    font-size: 16px;
  }

  .btn-close {
    font-size: 20px;
  }
}

/* Phone ~375px — also takes over from the iPad tier whenever height drops
   to 500px or below within the iPad's width range (e.g. a landscape
   phone), since this tier's design safely degrades regardless of
   available space rather than assuming a tall viewport. */
@media (max-width: 480px), (max-height: 500px) and (max-width: 1140px) {
  .page {
    padding: 32px 24px 32px;
  }

  /* Phone gets the same hardcoded line-break treatment as iPad, so the
     headline consistently ends on "it takes to lead." rather than
     wherever the browser happens to wrap it naturally. */
  .tablet-break {
    display: inline;
  }

  /* Hero image matches the page's left/right margins (not bleeding to
     the edge like desktop/iPad); top edge aligns to the vertical center
     of the "Count me in!" button, per the original phone mockup. Unlike
     desktop/iPad, phone is allowed to scroll (see html/body override
     below), so the portion of the image below the fold is reachable
     rather than permanently clipped.
     Placed in normal flow (not absolute) so it actually pushes the
     footer down below it, and pulled up with a negative margin instead
     of a hardcoded top offset — the margin is derived purely from this
     tier's own fixed (non-vw) button/text sizes, so it keeps tracking
     the button's true center regardless of exact device width, rather
     than baking in a number measured at one specific viewport. */
  .hero-image {
    position: static;
    display: block;
    width: 100%;
    margin-top: -99.5px;
  }

  /* Only the phone tier scrolls — desktop and iPad stay locked to the
     viewport as before. */
  html, body {
    height: auto;
    overflow: visible;
  }

  .logo-wrap {
    margin-top: 31px;
    margin-left: -41px;
    margin-bottom: -9px;
  }

  .logo {
    width: 334px;
  }

  .hero-thankyou {
    margin-top: 75px;
  }

  .headline {
    margin-bottom: 24px;
  }

  /* Font-size is slightly smaller than the iPad tier's formula would
     suggest: at the original size, "Creative leadership advisory" (the
     one-line accent) overflowed its container by ~5-6px at every width
     in this tier, wrapping to 2 lines and turning the headline into 5
     lines instead of the agreed 4. Scaled down ~3% with a small buffer,
     verified to keep the accent on one line at 375px, 428px, and 480px. */
  .headline-accent,
  .headline-body {
    font-size: clamp(24.18px, calc(-4.106px + 7.5429vw), 32.1px);
  }

  .subtext {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .btn-primary {
    font-size: 20px;
    padding: 14px 22px;
  }

  .btn-primary:hover {
    padding: 14px 29px;
    margin-left: -7px;
  }

  .btn-primary:active {
    padding: 14px 22px;
    margin-left: 0;
  }

  .launching {
    font-size: 19px;
    margin-top: 40px;
  }

  .site-footer {
    padding-top: 40px;
    font-size: 12px;
  }

  .modal-card {
    padding: 28px 20px;
  }

  .thankyou-title {
    font-size: 58px;
  }

  .thankyou-sub {
    font-size: 19px;
  }

  .thankyou-muted {
    font-size: 15px;
    margin-bottom: 32px;
  }

  .btn-close {
    font-size: 20px;
    padding: 14px 22px;
  }

  .btn-close:hover {
    padding: 14px 29px;
    margin-left: -7px;
  }

  .btn-close:active {
    padding: 14px 22px;
    margin-left: 0;
  }
}

/* Phone tier, short-height refinement: the phone tier's normal sizing
   assumes a narrow (~375-480px) width, so on a landscape phone (wide but
   short) the same styles alone still don't leave room for the button.
   This compacts things further whenever height is tight, regardless of
   why — same "safely degrade" spirit as the rest of the phone tier. */
@media (max-height: 500px) and (max-width: 1140px) {
  .page {
    padding: 16px 32px 16px;
  }

  .hero-image {
    display: none;
  }

  .logo-wrap {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
  }

  .logo {
    width: 160px;
  }

  .headline {
    margin-bottom: 8px;
  }

  .headline-accent,
  .headline-body {
    font-size: 18px;
  }

  .subtext {
    display: none;
  }

  .btn-primary {
    margin-top: 12px;
    font-size: 16px;
    padding: 10px 16px;
  }

  .launching {
    font-size: 14px;
    margin-top: 12px;
  }

  .site-footer {
    display: none;
  }
}