/* ==========================================================================
   Thousand Steps Advisory
   All brand colors and font names live in :root. Change them there only.
   Tints and shadows are mixed from these tokens with color-mix().
   ========================================================================== */

/* ---------- Fonts ----------
   Self-hosted (Latin only) and preloaded in both HTML heads.
   The "Fallback" faces are local fonts resized to the web fonts' width and line metrics,
   so if a web font arrives after the first paint the text doesn't jump when it swaps in.
   The size-adjust values were measured on the site's own copy (Inter 400 vs Arial, and so on).
   Text widths use em, not ch: ch is the width of the font's 0, so it changes when the font swaps. */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("../assets/fonts/carlito-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 400;
  size-adjust: 106.86%; ascent-override: 90.66%; descent-override: 22.57%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 600;
  size-adjust: 100.92%; ascent-override: 95.99%; descent-override: 23.90%; line-gap-override: 0%;
}
/* Calibri has Carlito's widths, so only the line metrics need matching. Arial is the stand-in where Calibri isn't installed. */
@font-face {
  font-family: "Carlito Fallback Calibri";
  src: local("Calibri Bold"), local("Calibri-Bold");
  font-weight: 700;
  size-adjust: 100%; ascent-override: 95.21%; descent-override: 26.86%; line-gap-override: 0%;
}
@font-face {
  font-family: "Carlito Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 700;
  size-adjust: 86.42%; ascent-override: 110.17%; descent-override: 31.08%; line-gap-override: 0%;
}

:root {
  /* Colors ("Sand & Sea", first pass) */
  --navy: #0B1F3A;         /* deep ocean, primary dark band, main text color on light bands */
  --navy-deep: #081629;    /* footer band */
  --sand: #F5EFE4;         /* warm light band */
  --turquoise: #28CFED;    /* CORE ocean color: primary buttons, wave strokes, highlights on dark bands */
  --aquamarine: #28EDCA;   /* secondary ocean color: accent band (section 5.3), highlights */
  --teal-ink: #0A6E78;     /* small labels/numbers on sand (passes AA) */
  --white: #FFFFFF;
  --surf: color-mix(in srgb, var(--sand) 68%, var(--turquoise));   /* light wave blue: wave back layers */
  --brick: #A8321F;        /* form error text on sand (added for validation, 5.8 to 1 on sand) */

  /* Type */
  --font-display: "Carlito", "Carlito Fallback Calibri", "Carlito Fallback Arial", sans-serif;  /* headings, matches the logo's Calibri */
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;                                /* body copy */

  /* Layout */
  --max: 1120px;
  --gutter: 16px;
  --nav-h: 80px;
  --radius: 20px;
  --radius-sm: 12px;
  --band-pad: clamp(64px, 9vw, 128px);
  --wave-h: clamp(48px, 7vw, 112px);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --nav-h: 92px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --nav-h: 104px; }
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus, var(--navy));
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--turquoise);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Bands ---------- */

.band {
  position: relative;
  padding-block: var(--band-pad);
}

.band--navy,
.band--navy-deep {
  --focus: var(--turquoise);
  color: var(--sand);
}
.band--navy { background: var(--navy); }
.band--navy-deep { background: var(--navy-deep); }
.band--navy h1, .band--navy h2, .band--navy h3,
.band--navy-deep h2, .band--navy-deep h3 { color: var(--white); }

.band--sand { background: var(--sand); color: var(--navy); --focus: var(--navy); }
.band--aqua { background: var(--aquamarine); color: var(--navy); --focus: var(--navy); }

/* ---------- Wave dividers ---------- */

.wave {
  position: relative;
  height: var(--wave-h);
  overflow: hidden;
  margin-bottom: -1px;   /* hide sub-pixel seams against the next band */
}

.wave__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: calc(100% + 2px);   /* pushes the anti-aliased bottom edge out of view */
  max-width: none;
  will-change: transform;   /* keeps the drift on the GPU so it doesn't stutter */
}
.from-navy { background: var(--navy); }
.from-sand { background: var(--sand); }
.from-aqua { background: var(--aquamarine); }

.to-navy .wave__fill { fill: var(--navy); }
.to-sand .wave__fill { fill: var(--sand); }
.to-aqua .wave__fill { fill: var(--aquamarine); }
.to-navy-deep .wave__fill { fill: var(--navy-deep); }

/* Back layer: the next band's color tinted with turquoise, like surf or deeper water */
.to-navy .wave__layer--back .wave__fill { fill: color-mix(in srgb, var(--navy) 72%, var(--turquoise)); }
.to-sand .wave__layer--back .wave__fill { fill: var(--surf); }
.to-aqua .wave__layer--back .wave__fill { fill: color-mix(in srgb, var(--aquamarine) 45%, var(--sand)); }
.to-navy-deep .wave__layer--back .wave__fill { fill: var(--surf); }

.wave__stroke {
  fill: none;
  stroke: var(--turquoise);
  stroke-width: 3px;
  stroke-linecap: round;
}

/* ---------- Type helpers ---------- */

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}

.section-title {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* On dark bands: turquoise fill, navy text */
.btn--on-dark { background: var(--turquoise); color: var(--navy); }
.btn--on-dark:hover { background: var(--aquamarine); }

/* On light bands: navy fill, white text */
.btn--on-light { background: var(--navy); color: var(--white); }
.btn--on-light:hover { background: var(--navy-deep); }

.btn[disabled] { cursor: progress; opacity: 0.75; }

.btn-row { margin-top: clamp(40px, 6vw, 64px); text-align: center; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  --focus: var(--turquoise);
  transition: box-shadow 0.3s ease;
}
.nav.is-scrolled {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--navy-deep) 45%, transparent);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
}

.nav__logo { flex: none; padding: 4px 0; }
.nav__logo img { height: 44px; width: auto; }

.nav__cta {
  margin-left: auto;
  min-height: 44px;
  padding: 0.6em 1.1em;
  font-size: 0.875rem;
}

@media (min-width: 400px) {
  .nav__logo img { height: 48px; }
  .nav__cta { padding: 0.7em 1.3em; font-size: 0.9375rem; }
}

@media (min-width: 768px) {
  .nav__logo img { height: 56px; }
}

@media (min-width: 1024px) {
  .nav__logo img { height: 64px; }
}

/* ---------- Hero ---------- */

.hero {
  /* space between the button and the staircase, and between the staircase and the wave below */
  --stairs-above: 16px;
  --stairs-below: clamp(48px, 6vw, 96px);
  overflow: hidden;
  /* bottom padding leaves room for the staircase strip (240/1440 of the width) under the button */
  padding-block: clamp(72px, 9vw, 128px) calc(16.7vw + var(--stairs-above) + var(--stairs-below));
  text-align: center;
}

.hero__stairs {
  position: absolute;
  left: 0;
  bottom: var(--stairs-below);
  width: 100%;
  height: auto;
  pointer-events: none;
}
.hero__stairs path {
  fill: none;
  stroke: color-mix(in srgb, var(--turquoise) 70%, var(--navy));
  stroke-width: 8;   /* user units; the strip scales with width, so this is about 2px on phones */
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 768px) { .hero__stairs path { stroke-width: 5; } }
@media (min-width: 1200px) { .hero__stairs path { stroke-width: 3.5; } }

.hero__content { position: relative; z-index: 1; }

.hero__title {
  max-width: 7.6em;
  margin-inline: auto;
  font-size: clamp(2.5rem, 1.55rem + 4.6vw, 5rem);
  line-height: 1.04;
}

.hero__sub {
  max-width: 24em;   /* one line would be 25.2em, so this always gives two balanced lines, in any font */
  margin: clamp(20px, 3vw, 32px) auto clamp(32px, 4vw, 44px);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  color: var(--sand);
  text-wrap: balance;
}

/* ---------- Contact ---------- */

.section-sub {
  max-width: 27.76em;
  margin: 20px auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  text-wrap: balance;
}

.form {
  max-width: 720px;
  margin-inline: auto;
}

.form__grid {
  display: grid;
  gap: 22px;
}
@media (min-width: 768px) {
  .form__grid { grid-template-columns: 1fr 1fr; gap: 24px 24px; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.field__label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
}

.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 2px solid color-mix(in srgb, var(--navy) 45%, var(--sand));
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
}
.input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
textarea.input { min-height: 160px; resize: vertical; }

.field__error {
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brick);
}
.field__error:empty { display: none; }
.input[aria-invalid="true"] { border-color: var(--brick); }

/* Honeypot: off-screen, not display none, so naive bots still fill it */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  text-align: center;
}

.form__status { max-width: 34.3em; font-weight: 600; }
.form__status:empty { display: none; }
.form__status--error { color: var(--brick); }
.form__status a { color: var(--navy); }

.form-success {
  max-width: 560px;
  margin-inline: auto;
  padding: 40px 28px;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
}
.form-success__title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); color: var(--navy); }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

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

.footer { padding-block: clamp(48px, 6vw, 72px) 40px; font-size: 0.9375rem; }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.footer__logo img { height: 48px; width: auto; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sand);
  text-decoration-color: color-mix(in srgb, var(--turquoise) 70%, transparent);
  text-underline-offset: 4px;
}
.footer__links a:hover { color: var(--turquoise); }
.footer__icon { width: 22px; height: 22px; fill: currentColor; }

.footer__bottom {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--sand) 14%, transparent);
  display: grid;
  gap: 10px;
  font-size: 0.8125rem;
}
.footer__disclosure { max-width: 50.47em; }

/* ---------- privacy.html ---------- */

.page-head { padding-block: clamp(64px, 9vw, 112px) clamp(48px, 7vw, 88px); text-align: center; }
.page-head__sub { max-width: 32.81em; margin: 20px auto 0; }

.prose { max-width: 42.9em; margin-inline: auto; }
.prose h2 { margin: 48px 0 14px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.prose h2:first-child { margin-top: 0; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose ul { margin: 0; padding-left: 1.25em; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--teal-ink); font-weight: 600; }
.prose__updated { margin-top: 48px; font-size: 0.875rem; color: var(--teal-ink); }

/* ==========================================================================
   Motion (v1 cap: scroll reveals, wave drift, one hero moment)
   Only runs when the visitor has not asked for reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* 1. Scroll reveals. Hidden only when JS is running, so content never disappears without it. */
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: var(--delay, 0ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* 2. Waves drift slowly, like a gentle swell */
  .wave__layer--front { animation: wave-drift 48s linear infinite; }
  .wave__layer--back { animation: wave-drift 72s linear infinite reverse; }
  .wave:nth-of-type(2n) .wave__layer--front { animation-duration: 56s; }
  .wave:nth-of-type(3n) .wave__layer--front { animation-duration: 40s; }

  /* 3. Hero moment: a soft-edged mask sweeps left to right, so the staircase draws in with a
     feathered tip. The mask is 220% wide: solid to 1x the strip, fading out over the next 0.2x.
     Without this block (no-JS is fine, reduced motion) there is no mask and the line shows fully drawn. */
  .hero__stairs {
    -webkit-mask-image: linear-gradient(to right, #000 45.45%, transparent 54.55%);
            mask-image: linear-gradient(to right, #000 45.45%, transparent 54.55%);
    -webkit-mask-size: 220% 100%;
            mask-size: 220% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: stairs-reveal 3.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s both;
  }
}

@keyframes wave-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 100% puts the fade just left of the strip (all hidden); 0% leaves the whole strip solid */
@keyframes stairs-reveal {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}