/* ============================================================
   AI Coaching intake — wolfstrategyllc.com brand
   Palette and type are the live site's own values, not lookalikes.
   ============================================================ */

:root {
  /* Brand */
  --navy:       #000B29;   /* the site's dominant colour — the page itself */
  --coral:      #F95954;   /* the accent. Rationed. See the note below. */
  --white:      #FFFFFF;
  --light-grey: #BFC2CA;   /* rules, dividers, input borders */
  --grey:       #808594;   /* de-emphasised copy. 5.3:1 on navy — passes AA. */

  /* Surfaces derived from the navy, so everything stays in the same family */
  --surface:    #0A1435;   /* input backgrounds — a lift off the page, not a new colour */
  --surface-hi: #101B3F;   /* hover */
  --hairline:   #222E52;   /* borders at rest: visible, not loud */

  --radius: 4px;
  --measure: 660px;        /* one comfortable column. Longer lines hurt a long form. */
}

/* Coral discipline, in one place so it can't drift:
   the site rations coral, which is exactly why it reads as an accent. It is
   allowed on precisely three things here — the focus ring, the selected state
   of a control, and the submit button. Nothing else. */

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

/* The UA sheet's [hidden] rule is display:none at specificity (0,1,0) — which
   `input[type="text"]` (0,1,1) quietly beats. Without this, every "Other" text
   box sits on the page permanently. Restate it so it can't be outranked. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;         /* never smaller: 16px is what stops iOS zooming on focus */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ---------- Masthead ---------- */

/* Sits OUTSIDE .page, and deliberately wider than the form column. The banner's
   navy field is the same navy as the page, so its top and left edges are
   already invisible — but the particle wave runs bright to the right edge of
   the image, and a hard cut there makes the whole thing read as a card sitting
   ON the page rather than part of it. The mask dissolves that edge, so the wave
   fades out into the page the way it does on the site's own hero. */
.masthead {
  max-width: 1100px;
  margin: 0 auto 8px;
}

/* Two fades, intersected. The right one starts at 86% — past the end of the
   wordmark, or it would eat the Y in STRATEGY. The bottom one starts at 62%,
   below the type, and only ever touches wave.
   Sampled from the PNG: its field is exactly #000B29 on the left and centre
   (so those edges are already invisible) and lifts to ~#1A2648 under the wave.
   That lift is the only thing that needs hiding. */
.masthead__banner {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, #000 86%, transparent 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, #000 86%, transparent 100%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-composite: intersect;
}

/* On a phone the image already spans the full viewport, so there is no edge to
   hide — and masking there would only eat the texture. */
@media (max-width: 700px) {
  .masthead__banner {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---------- Intro ---------- */

.intro { padding: 8px 0 40px; }

h1 {
  font-family: Roboto, Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.intro__lede {
  margin: 0;
  color: var(--light-grey);
  font-size: 17px;
  max-width: 34em;
}

/* ---------- Sections ---------- */

.section { margin: 0 0 48px; }

.section__title {
  font-family: Roboto, Montserrat, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);   /* the site's own divider treatment */
}

.section__note {
  margin: 16px 0 0;
  color: var(--grey);
  font-size: 15px;
}

/* ---------- Fields ---------- */

.field {
  margin: 32px 0 0;
  border: 0;          /* fieldset reset */
  padding: 0;
  min-width: 0;       /* stops fieldset from blowing out flex/grid on Chrome */
}

label, legend {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  padding: 0;
  margin: 0 0 8px;
}

.optional {
  font-weight: 400;
  font-size: 13px;
  color: var(--grey);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}

.help {
  margin: -4px 0 12px;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  transition: border-color .12s ease, background .12s ease;
}

input::placeholder, textarea::placeholder { color: #5A6076; }

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover { background: var(--surface-hi); }

/* Coral #1 of 3 — the focus ring. The field you're in is never ambiguous. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(249, 89, 84, 0.18);
}

textarea { resize: vertical; min-height: 96px; }

/* ---------- Choices (radio + checkbox) ---------- */

.choices {
  list-style: none;
  margin: 0;
  padding: 0;
}

.choices li + li { margin-top: 8px; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  transition: background .12s ease, border-color .12s ease;
}

.choice:hover { background: var(--surface-hi); border-color: #2E3C66; }

.choice span { flex: 1; line-height: 1.45; }

/* The native control, drawn by hand. appearance:none then rebuild, so the
   selected state can be coral in every browser rather than the OS blue. */
.choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  background: transparent;
  border: 1.5px solid var(--light-grey);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color .12s ease, background .12s ease;
}

.choice input[type="radio"]    { border-radius: 50%; }
.choice input[type="checkbox"] { border-radius: 3px; }

.choice input::after {
  content: "";
  transform: scale(0);
  transition: transform .12s ease;
}

.choice input[type="radio"]::after {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--navy);
}

.choice input[type="checkbox"]::after {
  width: 11px; height: 11px;
  /* a tick, drawn with a clip-path so there's no icon font and no SVG request */
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 0%, 37% 62%);
  background: var(--navy);
}

/* Coral #2 of 3 — the selected state. A small amount of coral, on a chosen
   item. This is the site's own logic for the colour. */
.choice input:checked {
  background: var(--coral);
  border-color: var(--coral);
}
.choice input:checked::after { transform: scale(1); }

.choice input:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Whole row reads as selected, not just the dot. */
.choice:has(input:checked) {
  border-color: var(--coral);
  background: var(--surface-hi);
}

.other-input { margin-top: 8px; }

/* ---------- The 1–5 scale ---------- */

.scale__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.scale__end {
  color: var(--grey);
  font-size: 13px;
  line-height: 1.3;
  flex: 1;
}
.scale__end:last-child { text-align: right; }

.scale__ticks {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  flex: none;
}

.tick { margin: 0; cursor: pointer; }

.tick input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;   /* stays focusable and reachable by screen readers */
}

.tick span {
  display: grid;
  place-content: center;
  width: 44px;               /* 44px — the minimum comfortable touch target */
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-weight: 600;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.tick:hover span { background: var(--surface-hi); }

.tick input:checked + span {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--navy);        /* navy on coral = 6:1. White would be 3.2:1 and fail AA. */
}

.tick input:focus-visible + span {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .scale__row { flex-wrap: wrap; }
  .scale__ticks { order: 3; width: 100%; justify-content: space-between; }
  .scale__end { flex: 0 0 auto; font-size: 12px; }
  .scale__end:last-child { margin-left: auto; }
  .tick span { width: 100%; min-width: 48px; }
  .tick { flex: 1; }
}

/* ---------- Errors ---------- */

.error {
  margin: 8px 0 0;
  color: var(--coral);
  font-size: 14px;
  font-weight: 500;
  min-height: 0;
}
.error:empty { display: none; }

.error--form {
  margin: 24px 0 0;
  padding: 14px 16px;
  background: rgba(249, 89, 84, 0.1);
  border: 1px solid var(--coral);
  border-radius: var(--radius);
}

.field--invalid input[type="text"],
.field--invalid input[type="email"],
.field--invalid textarea { border-color: var(--coral); }

/* ---------- Honeypot ---------- */

/* Off-screen rather than display:none — some bots skip hidden fields, and the
   ones that don't are exactly the ones worth catching. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Privacy + submit ---------- */

.privacy {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--grey);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
}

/* Coral #3 of 3 — the submit button. The loudest thing on the page, and the
   only large field of coral. Navy text on it, not white: 6:1 vs 3.2:1. */
.submit {
  display: block;
  width: 100%;
  margin: 24px 0 0;
  padding: 18px 24px;
  background: var(--coral);
  color: var(--navy);
  border: 0;
  border-radius: var(--radius);
  font-family: Roboto, Montserrat, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: filter .12s ease, transform .06s ease;
}

.submit:hover { filter: brightness(1.08); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.foot {
  margin: 32px 0 0;
  text-align: center;
  color: #4A5170;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Confirmation ---------- */

.confirmation {
  padding: 64px 0 40px;
  text-align: center;
}

.confirmation__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--coral);
  color: var(--navy);
  font-size: 30px;
  font-weight: 700;
}

.confirmation h2 {
  font-family: Roboto, Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 32px);
  margin: 0 0 16px;
}

.confirmation p {
  margin: 0 auto;
  max-width: 32em;
  color: var(--light-grey);
  font-size: 17px;
}

.confirmation__sig {
  margin-top: 28px !important;
  color: var(--grey) !important;
  font-size: 15px !important;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}