:root {
  --navy: #072b67;
  --navy-dark: #001d4d;
  --orange: #ff4d09;
  --text: #193d73;
  --line: #c8d8ec;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 48% 10%, rgba(223, 241, 255, .78), transparent 31%), radial-gradient(circle at 92% 72%, rgba(255, 224, 209, .68), transparent 37%), radial-gradient(circle at 0% 100%, rgba(225, 240, 253, .72), transparent 35%), linear-gradient(120deg, #fff 0%, #fff 52%, #f8fbff 70%, #fff5ef 100%);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 10%, rgba(223,241,255,.78), transparent 31%),
    radial-gradient(circle at 92% 72%, rgba(255,224,209,.68), transparent 37%),
    radial-gradient(circle at 0% 100%, rgba(225,240,253,.72), transparent 35%),
    linear-gradient(120deg, #fff 0%, #fff 52%, #f8fbff 70%, #fff5ef 100%);
}

.ambient { position: absolute; pointer-events: none; filter: blur(38px); opacity: .75; }
.ambient-blue { width: 32vw; height: 25vw; left: -12vw; bottom: -8vw; background: #dbeeff; border-radius: 50%; }
.ambient-peach { width: 27vw; height: 28vw; right: -8vw; bottom: -7vw; background: #ffe1d1; border-radius: 50%; }

.ear-art {
    position: absolute;
    z-index: 1;
    right: -1.5vw;
    top: 0;
    width: 53%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: .66;
    filter: saturate(.82) contrast(.9) brightness(1.06) blur(.5px);
    mix-blend-mode: multiply;
}
.ear-fade {
  position: absolute;
  z-index: 2;
  inset: 0 31vw 0 48vw;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.56) 67%, transparent 100%);
  pointer-events: none;
}
.wave {
  position: absolute;
  z-index: 3;
  left: 41vw;
  top: 17vh;
  width: 43vw;
  height: 34vh;
  opacity: .9;
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 5;
  width: min(890px, 61vw);
  min-height: 100vh;
  padding: clamp(34px, 4.5vh, 52px) 0 120px clamp(54px, 6vw, 102px);
}

.brand img {
  display: block;
  width: clamp(275px, 29vw, 465px);
  height: auto;
}

.intro { margin-top: clamp(28px, 3.5vh, 42px); }
.intro h1 {
  margin: 0;
  color: var(--navy-dark);
  font-size: clamp(58px, 5.45vw, 94px);
  line-height: .91;
  letter-spacing: -.055em;
  font-weight: 800;
}
.intro h1 span { color: var(--orange); }
.lead {
  margin: clamp(24px, 3vh, 34px) 0 0;
  font-size: clamp(18px, 1.38vw, 25px);
  line-height: 1.18;
  color: #315486;
  font-weight: 400;
}
.pillars {
  margin: 8px 0 0;
  color: var(--orange);
  font-weight: 700;
  font-size: clamp(20px, 1.52vw, 28px);
}

.register { margin-top: clamp(56px, 7.4vh, 78px); width: min(900px, 100%); }
.register h2 {
  margin: 0;
  color: var(--navy-dark);
  font-size: clamp(38px, 3.05vw, 54px);
  line-height: 1;
  letter-spacing: -.035em;
}
.register > p {
  margin: 8px 0 20px;
  font-size: clamp(19px, 1.45vw, 26px);
  color: #315486;
}

.form-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.18fr;
  gap: 14px 16px;
  padding: 20px 22px 16px;
  border: 1px solid rgba(11,56,112,.06);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 38px rgba(36,66,103,.12);
  backdrop-filter: blur(8px);
}
.field { display: flex; flex-direction: column; gap: 7px; }
label { color: var(--navy); font-weight: 600; font-size: 15px; }
input, select {
  width: 100%;
  height: 46px;
  border: 1px solid #b9cae0;
  border-radius: 7px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: #24446f;
  background: rgba(255,255,255,.75);
  outline: none;
}
input:focus, select:focus { border-color: #6a8ab6; box-shadow: 0 0 0 3px rgba(7,43,103,.08); }
button {
    grid-column: 1 / -1;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: white;
    padding: 0 28px;
    font: inherit;
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    max-width: 273px;
    margin: auto;
}
button:hover { filter: brightness(.96); transform: translateY(-1px); }
button span { margin-left: 16px; font-size: 22px; }
.form-note {
  grid-column: 2 / -1;
  align-self: center;
  margin: 0;
  font-size: 14px;
  color: #5f7393;
}

.coming {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4.7vh;
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--navy);
  white-space: nowrap;
}
.coming > span { width: 108px; height: 1px; background: #9ab0cf; }
.coming strong { font-size: clamp(20px, 1.65vw, 27px); letter-spacing: .22em; font-weight: 500; }
.coming .dot { color: var(--orange); }

.form-note.is-success {
    color: #ff4d09 !important;
}

@media (max-width: 1050px) {
  .content { width: 68vw; padding-left: 6vw; }
  .ear-art { width: 45vw; opacity: .54; }
  .wave { left: 43vw; width: 47vw; }
  .desktop-only { display: none; }
  .form-card { grid-template-columns: 1fr 1fr; }
  .field:nth-child(3) { grid-column: 1 / -1; }
  button { grid-column: 1 / -1; }
  .form-note { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 767px) {
  .hero { min-height: auto; padding-bottom: 92px; }
  .content { width: 100%; min-height: auto; padding: 28px 24px 0; }
  .brand img { width: min(310px, 78vw); }
  .intro { margin-top: 30px; }
  .intro h1 { font-size: clamp(46px, 14vw, 68px); }
  .lead { font-size: 18px; max-width: 92%; }
  .pillars { font-size: 21px; }
.register {
    margin-top: 31px;
}
  .register h2 { font-size: 42px; }
  .register > p { font-size: 19px; }
  .ear-art {
/*
    top: 330px;
    right: -8%;
    width: 82%;
    height: 300px;
    opacity: .52;
    object-position: center 8%;
*/
  }
.ear-art {
    /* top: 330px; */
    /* right: -8%; */
    /* width: 82%; */
    height: 300px;
    /* opacity: .52; */
    /* object-position: center 8%; */
}	
	
  .ear-fade { display: none; }
  .wave { left: 10%; top: 330px; width: 82%; height: 245px; opacity: .62; }
  .form-card { grid-template-columns: 1fr; padding: 18px; }
  .field:nth-child(3), button, .form-note { grid-column: 1; }
  .coming { bottom: 25px; gap: 14px; }
  .coming > span { width: 52px; }
  .coming strong { font-size: 17px; letter-spacing: .15em; }
	
	
.intro h1 {
    font-size: 38px;
    line-height: 1.3;
    text-align: center;
}

.lead {
    text-align: center;
    max-width: 100%;
}

.pillars {
    text-align: center;
    margin-top: 13px;
    margin-bottom: 14px;
}

.register h2 {
    text-align: center;
}

.register > p {
    text-align: center;
}

.register {
    margin-top: 12px;
    /* font-size: 20px; */
}	
.brand img {
    margin: auto;
}	
	
}

@media (max-height: 760px) and (min-width: 761px) {
  .content { padding-top: 28px; padding-bottom: 88px; }
  .brand img { width: 330px; }
  .intro { margin-top: 20px; }
  .intro h1 { font-size: 62px; }
  .lead { margin-top: 18px; font-size: 18px; }
  .pillars { font-size: 20px; }
  .register { margin-top: 38px; }
  .register h2 { font-size: 40px; }
  .register > p { font-size: 18px; margin-bottom: 12px; }
  .coming { bottom: 20px; }
}
.site-footer { text-align: center; }
.site-footer {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: #6b7280;
}
.site-footer p { margin: 0; }
