/* ==========================================================================
   Unda — undawaves.com
   Palette, type and spacing follow Unda Brand Guide v1.4.
   Flat colour only. No gradients, no shadows, no ornament.
   ========================================================================== */

:root {
  /* Palette */
  --deep-teal:    #085041;
  --mid-teal:     #1D9E75;
  --pale-teal:    #9FE1CB;
  --near-black:   #2C2C2A;
  --off-white:    #F1EFE8;
  --darkest-teal: #04342C;

  /* Pale Teal resolved into Off White — a flat surface colour, not a wash. */
  --surface-tint: color-mix(in srgb, var(--pale-teal) 16%, var(--off-white));

  /* Type stacks. Cinzel is reserved for the wordmark, which ships as artwork. */
  --voice: Georgia, "Times New Roman", serif;
  --structural: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Rhythm */
  --section-y: clamp(6.5rem, 15vh, 11rem);
  --gutter: clamp(1.5rem, 6vw, 4rem);

  --ease-water: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--near-black);
  font-family: var(--structural);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--pale-teal); color: var(--deep-teal); }

:focus-visible {
  outline: 1px solid var(--mid-teal);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Shared type roles
   -------------------------------------------------------------------------- */

/* Georgia italic carries every emotional statement. Never Arial. */
.voice {
  font-family: var(--voice);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--near-black);
}
.voice--md { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); line-height: 1.5; }
.voice--lg { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem); }
.voice--xl { font-size: clamp(1.75rem, 1.1rem + 3.1vw, 3.25rem); line-height: 1.35; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--near-black);
}

.aside {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--near-black) 62%, var(--off-white));
}

.label {
  font-family: var(--structural);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-teal);
  margin: 0;
}

.label-muted {
  font-family: var(--structural);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--near-black) 50%, var(--off-white));
}

/* --------------------------------------------------------------------------
   Surfaces

   The light half of the page alternates between Off White and one tinted
   surface, so each section arrives on its own ground. Hero and the deep
   section at the end sit outside the alternation.
   -------------------------------------------------------------------------- */

.section--premise,
.section--process,
.section--quote { background: var(--surface-tint); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.section {
  padding: var(--section-y) var(--gutter);
}

/* 60–75 character measure, per the guide. */
.measure {
  max-width: 68ch;
  margin-inline: auto;
}
.measure--center { text-align: center; }

.wide {
  max-width: 62rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1 — Hero
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 12vh, 7rem) var(--gutter) clamp(6rem, 18vh, 10rem);
  text-align: center;
}

.hero__lockup {
  --mark-w: clamp(190px, 27vw, 330px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__mark {
  width: var(--mark-w);
  /* The disc expands from the centre point outward: centre, then rings,
     then the open brushstroke. A reveal, not an effect. */
  -webkit-mask-image: radial-gradient(circle, #000 64%, rgba(0,0,0,0) 73%);
          mask-image: radial-gradient(circle, #000 64%, rgba(0,0,0,0) 73%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  /* Centred on the innermost ring, not on the image box. */
  -webkit-mask-position: 46.8% 46.3%; mask-position: 46.8% 46.3%;
  -webkit-mask-size: 0% 0%; mask-size: 0% 0%;
  opacity: 0;
  animation:
    mark-open 2200ms cubic-bezier(0.2, 0.5, 0.3, 1) 300ms forwards,
    mark-fade  500ms linear 300ms forwards;
}

/* 130% is just past the mark's outer edge — the ripple uses the whole duration. */
@keyframes mark-open {
  from { -webkit-mask-size: 0% 0%;     mask-size: 0% 0%; }
  to   { -webkit-mask-size: 130% 130%; mask-size: 130% 130%; }
}
@keyframes mark-fade { to { opacity: 1; } }

.hero__wordmark {
  width: calc(var(--mark-w) * 1.054);   /* lockup proportion from the source artwork */
  margin-top: calc(var(--mark-w) * 0.108);
  opacity: 0;
  animation: rise 1100ms var(--ease-water) 2150ms forwards;
}

.hero__tagline {
  font-size: clamp(1.25rem, 0.95rem + 1.45vw, 2rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 24ch;
  opacity: 0;
  animation: rise 1100ms var(--ease-water) 2900ms forwards;
}

/* Break at the sentence, not wherever the measure happens to run out. */
.hero__tagline span { display: block; }

.hero__subline {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  opacity: 0;
  animation: rise 1100ms var(--ease-water) 3550ms forwards;
}

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

/* --------------------------------------------------------------------------
   2 — What this is
   -------------------------------------------------------------------------- */

.section--premise .lede + .lede { margin-top: 1.75em; }
.section--premise .voice--lg {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  color: var(--deep-teal);
}

/* --------------------------------------------------------------------------
   3 — The philosophy
   -------------------------------------------------------------------------- */

.section--philosophy {
  padding-block: clamp(8rem, 20vh, 14rem);
}
.section--philosophy .voice + .voice { margin-top: clamp(2.5rem, 6vh, 4rem); }

/* --------------------------------------------------------------------------
   4 — The two phases
   -------------------------------------------------------------------------- */

.phases {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  display: grid;
  gap: clamp(3rem, 7vw, 5.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .phases { grid-template-columns: 1fr 1fr; }
}

.phase__title {
  font-family: var(--structural);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--deep-teal);
  margin: 0 0 1.1em;
}

.phase__body {
  max-width: 44ch;
  line-height: 1.6;
}

.phase__metaphor {
  margin-top: clamp(3.5rem, 9vh, 6rem);
  max-width: 52ch;
  color: var(--deep-teal);
}

/* --------------------------------------------------------------------------
   5 — Who this is for
   -------------------------------------------------------------------------- */

.section--audience .voice + .voice { margin-top: clamp(2.25rem, 5.5vh, 3.5rem); }
.section--audience .aside {
  margin-top: clamp(3.5rem, 8vh, 5rem);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   6 — Quote
   -------------------------------------------------------------------------- */

.section--quote {
  padding-block: clamp(9rem, 24vh, 16rem);
}
.quote { margin-block: 0; }   /* margin-inline: auto comes from .measure */
.quote blockquote {
  margin: 0;
  color: var(--deep-teal);
  max-width: 46ch;
  margin-inline: auto;
}
.quote figcaption { margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   7 — Transition
   -------------------------------------------------------------------------- */

.section--transition {
  padding-block: clamp(9rem, 26vh, 18rem);
  text-align: center;
}
.section--transition .voice {
  color: var(--deep-teal);
  max-width: 20ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   8 — Waitlist, 9 — Footer (dark)
   -------------------------------------------------------------------------- */

.dark {
  background: var(--darkest-teal);
  color: var(--off-white);
}
.dark .voice { color: var(--pale-teal); }

.waitlist {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(6rem, 16vh, 10rem) var(--gutter) clamp(5rem, 12vh, 8rem);
  text-align: center;
}

.waitlist__heading {
  font-family: var(--structural);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--off-white);
  margin: 0;
}

.waitlist__sub { margin-top: 1rem; }

/* Form -------------------------------------------------------------------- */

.form {
  margin-top: clamp(3.5rem, 9vh, 5.5rem);
  text-align: left;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.field {
  border: 0;
  padding: 0;
  margin: 0 0 clamp(2.25rem, 5vh, 3rem);
}

.field__label {
  display: block;
  padding: 0;
  font-family: var(--structural);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Pale Teal, not Mid Teal: functional text on Darkest Teal needs the contrast. */
  color: var(--pale-teal);
  margin-bottom: 0.9rem;
}

.field__optional {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
  font-style: italic;
  font-family: var(--voice);
  color: color-mix(in srgb, var(--pale-teal) 60%, var(--darkest-teal));
}

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pale-teal) 38%, var(--darkest-teal));
  border-radius: 0;
  padding: 0.35rem 0 0.7rem;
  font-family: var(--structural);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--off-white);
  transition: border-color 400ms var(--ease-water);
}
.field__input--area { resize: vertical; min-height: 3.4rem; }

.field__input::placeholder {
  color: color-mix(in srgb, var(--pale-teal) 58%, var(--darkest-teal));
  opacity: 1;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--mid-teal);
}

/* Keep the brand colours through autofill. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--off-white);
  -webkit-box-shadow: 0 0 0 1000px var(--darkest-teal) inset;
  caret-color: var(--off-white);
  transition: background-color 9999s ease-in-out 0s;
}

/* Choice row — real radios, no browser dropdown. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.choice { cursor: pointer; }
.choice input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.choice span {
  display: inline-block;
  padding-bottom: 0.45rem;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--off-white) 68%, var(--darkest-teal));
  border-bottom: 1px solid transparent;
  transition: color 350ms var(--ease-water), border-color 350ms var(--ease-water);
}
.choice:hover span { color: var(--off-white); }
.choice input:checked + span {
  color: var(--off-white);
  border-bottom-color: var(--mid-teal);
}
.choice input:focus-visible + span {
  outline: 1px solid var(--mid-teal);
  outline-offset: 4px;
}

.field__error {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--pale-teal);
}

.submit {
  display: block;
  width: 100%;
  margin-top: clamp(1rem, 3vh, 2rem);
  padding: 1.15rem 2rem;
  background: var(--mid-teal);
  color: var(--off-white);
  border: 0;
  border-radius: 0;
  font-family: var(--structural);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 450ms var(--ease-water);
}
.submit:hover { background: var(--deep-teal); }
.submit[disabled] { cursor: default; opacity: 0.7; }

.form__note,
.form__error {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
  color: color-mix(in srgb, var(--pale-teal) 70%, var(--darkest-teal));
}
.form__error { color: var(--pale-teal); }

.form__success {
  margin-top: clamp(3.5rem, 9vh, 5.5rem);
  color: var(--off-white);
}

/* Footer ------------------------------------------------------------------ */

.footer {
  padding: clamp(4rem, 11vh, 7rem) var(--gutter) clamp(3.5rem, 9vh, 5.5rem);
  text-align: center;
}

.footer__wordmark { width: 104px; margin-inline: auto; }

.footer__links {
  margin-top: 2rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}
.footer__links a {
  color: var(--pale-teal);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pale-teal) 40%, var(--darkest-teal));
  padding-bottom: 2px;
  transition: border-color 350ms var(--ease-water);
}
.footer__links a:hover { border-bottom-color: var(--pale-teal); }
.footer__dot,
.footer__domain { color: color-mix(in srgb, var(--pale-teal) 45%, var(--darkest-teal)); }
.footer__dot { margin-inline: 0.85rem; }

.footer__tagline {
  margin-top: 2.25rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--pale-teal) 55%, var(--darkest-teal));
}

/* --------------------------------------------------------------------------
   Scroll reveal — each section arrives rather than being reached
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1000ms var(--ease-water),
    transform 1000ms var(--ease-water);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Stillness for anyone who asks for it. */
@media (prefers-reduced-motion: reduce) {
  .hero__mark,
  .hero__wordmark,
  .hero__tagline,
  .hero__subline {
    animation: none;
    opacity: 1;
  }
  .hero__mark {
    -webkit-mask-image: none; mask-image: none;
    -webkit-mask-size: auto; mask-size: auto;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 560px) {
  .hero__lockup { --mark-w: min(56vw, 240px); }
  .choices { flex-direction: column; gap: 1rem; }
  .choice span { padding-bottom: 0.35rem; }
}