/* Smart Path Solutions — landing page
   Palette comes from the logo: navy, blue, green.
   Mobile-first. No build step, no frameworks. */

:root {
  --navy: #0B3C6E;
  --navy-deep: #082A4D;
  --blue: #1174B8;
  --green: #00A650;
  --mint: #5FD394;
  --ink: #12222E;
  --body: #42535F;
  --muted: #4A5A66;
  --dim: #7C8A93;
  --dim-2: #8B979E;
  --line: #E3E9ED;
  --line-soft: #E9EEF1;
  --bg: #FFFFFF;
  --bg-band: #F4F7F9;
  --field: #FBFDFE;
  --sans: 'Source Sans 3', Helvetica, Arial, sans-serif;
  --head: 'Montserrat', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --grad: linear-gradient(120deg, #0B3C6E, #1174B8 55%, #00A650);
  --pad-x: clamp(18px, 5vw, 40px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--green); }

h1, h2, h3 { font-family: var(--head); letter-spacing: -0.02em; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-size: 26px;
}
.ms.sm { font-size: 18px; }
.green { color: var(--green); }
.mint { color: var(--mint); }
.icon-blue { color: var(--blue); }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding-top: clamp(52px, 9vw, 96px); padding-bottom: clamp(52px, 9vw, 96px); }
.section-sm { padding-top: clamp(46px, 8vw, 88px); padding-bottom: clamp(46px, 8vw, 88px); }
.band { background: var(--bg-band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

section[id] { scroll-margin-top: 84px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.logo { height: clamp(42px, 10vw, 58px); width: auto; display: block; }
.logo-link:hover { opacity: 0.85; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(14px, 3.6vw, 16px);
  border: none;
  border-radius: 999px;
  padding: 15px 22px;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 150ms ease, border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.btn .ms { font-size: 20px; }
.btn-sm { padding: 11px 16px; min-height: 42px; font-size: clamp(12px, 3.2vw, 14px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--green); color: #fff; }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -12px rgba(11,60,110,0.6); }
.btn-grad:hover { filter: brightness(1.07); color: #fff; }
.btn-ghost { background: #fff; color: var(--navy); border: 1.5px solid #C9D8E1; padding: 14px 22px; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { color: var(--green); }
.btn-block { width: 100%; margin-top: 4px; min-height: 52px; }
.btn[disabled] { opacity: 0.65; cursor: default; }

/* ---------- shared type ---------- */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow-mint { color: var(--mint); }
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section h2, .band h2 {
  font-weight: 800;
  font-size: clamp(26px, 6.2vw, 40px);
  line-height: 1.12;
  color: var(--navy);
  margin: 12px 0 clamp(24px, 4vw, 40px);
  max-width: 22em;
}
.section h2.on-dark { color: #fff; margin-bottom: 0; }
.section .sub, .band .sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: -14px 0 clamp(26px, 5vw, 40px);
  max-width: 34em;
}
.body { font-size: 16.5px; line-height: 1.65; color: var(--body); margin: 0 0 16px; max-width: 32em; }
.body.sm { font-size: 15.5px; color: var(--muted); }
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--navy);
  border-bottom: 2px solid var(--green);
  padding-bottom: 3px;
}

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(14px, 2.5vw, 20px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 3vw, 26px); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 4vw, 28px); }
.card.tight { border-radius: 16px; padding: 22px; }
.card h3 { font-weight: 700; font-size: 17px; color: var(--navy); margin: 12px 0 8px; letter-spacing: -0.01em; }
.card p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.step h3 { font-size: 19px; margin: 10px 0; }
.step p { font-size: 15.5px; line-height: 1.6; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: 0.06em; }

.card-math {
  background: linear-gradient(150deg, #0B3C6E, #0E5C93);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
}
.card-math p { font-size: 15.5px; line-height: 1.6; color: #E7EFF4; margin: 12px 0 0; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;          /* keeps the -z layers inside the section */
  background: var(--navy);     /* holds the colour while the photo decodes */
}
.hero-pic { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;    /* keeps the worker in frame as the crop tightens */
  display: block;
}
/* Brand navy, ~0.6 average: heaviest behind the copy on the left, lightest on
   the right so the photograph still reads. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(11,60,110,0.90) 0%,
    rgba(11,60,110,0.84) 34%,
    rgba(11,60,110,0.78) 50%,
    rgba(11,60,110,0.52) 78%,
    rgba(8,42,77,0.40) 100%);
}
/* Small screens: the copy sits over far more of the photo, so lift the overlay
   and shift the crop to keep the worker visible. */
@media (max-width: 720px) {
  .hero-overlay {
    background: linear-gradient(163deg,
      rgba(11,60,110,0.86) 0%,
      rgba(11,60,110,0.80) 48%,
      rgba(8,42,77,0.70) 100%);
  }
  /* Only the width is cropped at this ratio, so the worker is never cut off
     vertically; 28% centres him inside the visible slice. */
  .hero-pic img { object-position: 28% center; }
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-top: clamp(36px, 8vw, 84px);
  padding-bottom: clamp(40px, 8vw, 92px);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #DCE6EB;
  margin: 0 0 clamp(18px, 4vw, 26px);
}
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); display: block; flex: 0 0 auto; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(33px, 8.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 clamp(16px, 3vw, 22px);
}
.lede {
  font-size: clamp(17px, 4.3vw, 21px);
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 clamp(24px, 5vw, 34px);
  max-width: 30em;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(22px, 4vw, 28px); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.checks .ms { font-size: 17px; }

/* On-dark hero copy. Must sit after the base .hero h1 / .lede / .checks rules
   above: same specificity, so source order is what decides.
   "missed call" uses --mint, not --green: measured against the real composite,
   #00A650 tops out near 1.5:1 here and would need an almost solid overlay to
   reach 3:1. --mint is the same brand green the site already uses on dark. */
.hero h1 { color: #fff; }
.hero h1 .green { color: var(--mint); }
.hero .lede { color: rgba(255,255,255,0.95); }
.hero .checks li { color: #fff; }
.hero .checks .ms.green { color: var(--mint); }

/* ---------- demo player ---------- */
.demo-card { border-radius: 22px; box-shadow: 0 24px 50px -34px rgba(11,60,110,0.45); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.demo-top .mono-label { font-size: 10.5px; letter-spacing: 0.1em; color: var(--dim); }
.tag-ai {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--green);
  border: 1px solid #BCE3CC;
  border-radius: 999px;
  padding: 3px 9px;
}
.demo-title {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(17px, 4.2vw, 20px);
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 20px;
}
.demo-player { display: flex; align-items: center; gap: 16px; }
.play-btn {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #0B3C6E, #00A650);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(11,60,110,0.7);
}
.play-btn .ms { font-size: 28px; }
.wave { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 44px; }
.wave i {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 3px;
  background: #D3DFE7;
  transform-origin: center;
}
.wave.playing i { background: linear-gradient(180deg, #1174B8, #00A650); animation: spl-pulse 900ms ease-in-out infinite; }
@keyframes spl-pulse { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.demo-note { font-size: 13.5px; line-height: 1.5; color: #6B7A83; margin: 16px 0 0; }

/* ---------- industries ---------- */
.industries { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.ind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 3.5vw, 22px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: transform 160ms ease, border-color 160ms ease;
}
.ind:hover { border-color: var(--green); transform: translateY(-2px); }
.ind .ms { font-size: 28px; }
.ind-label { font-family: var(--head); font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--navy); }

/* ---------- trial ---------- */
.trial-card {
  background: linear-gradient(135deg, #0B3C6E 0%, #12628F 48%, #00A650 130%);
  border-radius: 24px;
  padding: clamp(26px, 6vw, 52px);
  color: #fff;
  box-shadow: 0 30px 60px -40px rgba(11,60,110,0.8);
}
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 18px;
}
.trial-card h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  max-width: 20em;
}
.trial-card > p {
  font-size: clamp(16px, 4.2vw, 19px);
  line-height: 1.55;
  color: #DCE9F1;
  margin: 0 0 clamp(24px, 4vw, 32px);
  max-width: 32em;
}
.trial-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trial-note { font-size: 14.5px; color: #C6DCEA; }

/* ---------- dashboard mockup ---------- */
.dash {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 26px 54px -38px rgba(11,60,110,0.5);
  overflow: hidden;
}
.dash-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #FAFCFD;
}
.dash-bar .dot { width: 9px; height: 9px; }
.dash-live { font-family: var(--head); font-weight: 700; font-size: 13.5px; color: var(--navy); }
.dash-mock { margin-left: auto; font-size: 10.5px; color: var(--dim-2); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--line); }
.dash-col { background: #fff; padding: clamp(18px, 4vw, 24px); display: flex; flex-direction: column; gap: 10px; }
.dash-h { font-weight: 700; font-size: 14px; color: var(--navy); margin: 0 0 6px; }
.appt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--bg-band); }
.time { font-family: var(--mono); font-size: 12px; color: var(--blue); padding-top: 2px; }
.appt-t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.appt-s { font-size: 13px; color: #6B7A83; }
.callbox { border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px; }
.callbox.row { display: flex; align-items: center; gap: 8px; }
.callbox-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.callbox-t { font-weight: 600; font-size: 14px; color: var(--ink); }
.mono-time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim-2); }
.transcript { font-family: var(--mono); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.transcript .t-sarah { color: var(--navy); margin-bottom: 6px; }
.stat { padding: 16px; border-radius: 12px; border: 1px solid var(--line-soft); }
.stat-navy { background: linear-gradient(135deg, #0B3C6E, #12628F); color: #fff; border: none; }
.stat-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9FCBE3; }
.stat-k.dim { color: var(--dim-2); }
.stat-v { font-family: var(--head); font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 6px; }
.stat-v.navy { color: var(--navy); }
.stat-note { font-size: 13px; line-height: 1.5; color: var(--dim-2); margin: 0; }

/* ---------- beyond ---------- */
.beyond { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.beyond::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 380px at 88% -8%, rgba(0,166,80,0.34), transparent 70%),
    radial-gradient(560px 340px at 4% 108%, rgba(17,116,184,0.4), transparent 72%);
  pointer-events: none;
}
.beyond > .wrap { position: relative; }
.beyond-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  margin-bottom: clamp(30px, 5vw, 48px);
}
.beyond-head h2 { font-weight: 800; font-size: clamp(26px, 6.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; margin: 12px 0 0; color: #fff; }
.beyond-sub { font-size: 16.5px; line-height: 1.6; color: #B9CEDD; margin: 0; }
.glass {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 26px);
  background: linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  transition: border-color 160ms ease;
}
.glass:hover { border-color: rgba(95,211,148,0.6); }
.glass h3 { font-weight: 700; font-size: 18px; margin: 14px 0 8px; color: #fff; }
.glass p { font-size: 15px; line-height: 1.55; color: #B9CEDD; margin: 0; }

/* ---------- local / founder ---------- */
.local-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.local-grid h2 { margin-bottom: 18px; }
.founder { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.founder img { border-radius: 20px; display: block; width: 100%; height: auto; object-fit: cover; }
.photo-slot {
  border-radius: 20px;
  border: 1px solid var(--line);
  background-color: var(--bg-band);
  background-image: repeating-linear-gradient(135deg, rgba(11,60,110,0.055) 0 10px, rgba(11,60,110,0) 10px 20px);
  min-height: clamp(230px, 50vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.photo-slot .mono-label { font-size: 11.5px; color: var(--dim); text-align: center; }
.founder figcaption { display: flex; align-items: baseline; gap: 8px; }
.founder-name { font-family: var(--head); font-weight: 700; font-size: 15.5px; color: var(--navy); }
.founder figcaption .mono-label { font-size: 11px; color: var(--dim); }

/* ---------- photography ---------- */
/* One treatment shared by every photo so they read as a family: the same 18px
   radius as .card, a light desaturation, and a navy -> blue -> green -> warm
   neutral grade multiplied over the image so it sits inside the brand palette
   instead of on top of it. No copy is ever placed over a photo, so nothing
   here can hurt text contrast. */
.ph {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-band);
  border: 1px solid var(--line);
}
.ph img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.82) contrast(1.04);
}
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(11,60,110,0.34) 0%,
    rgba(17,116,184,0.16) 40%,
    rgba(0,166,80,0.12) 68%,
    rgba(198,170,132,0.20) 100%);
  mix-blend-mode: multiply;
}

/* copy | photo row. Same auto-fit reflow as .local-grid, so it stacks to one
   column on small screens with the copy first and the photo below it. */
.media-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.media-split h2 { margin-bottom: 18px; }
.media-split h2:last-child { margin-bottom: 0; }
.media-split .sub { margin: 0; }
.media-split + .grid,
.media-split + .dash { margin-top: clamp(30px, 5vw, 52px); }

/* hero right column: photo stacked above the demo card */
.hero-side { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 24px); }

/* ---------- faq ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 18px 20px;
  min-height: 56px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(15px, 3.9vw, 17px);
  color: var(--navy);
}
.faq-i { margin-left: auto; font-size: 22px; }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0; padding: 0 20px 20px; }

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.contact h2 { margin-bottom: 16px; }
.form {
  border-radius: 22px;
  box-shadow: 0 24px 50px -34px rgba(11,60,110,0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 5vw, 30px);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field-l { font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--navy); }
.opt { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim-2); }
.form input, .form select {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  padding: 13px 15px;
  border: 1.5px solid #DCE6EB;
  border-radius: 12px;
  background: var(--field);
  outline: none;
  min-height: 48px;
  width: 100%;
}
.form input:focus, .form select:focus { border-color: var(--green); }
.form input[aria-invalid="true"] { border-color: #C2543A; }
.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; }
.select-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--dim); font-size: 22px; }
/* honeypot — off-screen rather than display:none, which naive bots skip */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* `.card p` (0-1-1) outranks a bare `.form-status` (0-1-0) and greys both
   states out, so scope these to .form to win on specificity. */
.form .form-status { margin: 0; font-size: 14.5px; line-height: 1.55; color: #0A7D40; font-weight: 600; }
.form .form-status.error { color: #B4381F; }
.form-fine { font-size: 13.5px; line-height: 1.5; color: #6B7A83; margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #B9CEDD; padding: clamp(36px, 7vw, 60px) 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: start; }
.footer-name { font-family: var(--head); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -0.01em; }
.footer-line { font-size: 15px; margin-top: 8px; }
.footer-mail { display: inline-block; margin-top: 10px; font-size: 15px; color: var(--mint); }
.footer-nav { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-nav a { color: #B9CEDD; }
.footer-nav a:hover, .footer-mail:hover { color: var(--mint); }
.footer-fine { font-size: 13.5px; line-height: 1.6; color: #8CA6B9; }
.footer-bottom {
  margin-top: clamp(26px, 5vw, 40px);
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: #8CA6B9;
}

/* ---------- scroll reveal ----------
   Only opacity and transform ever animate, so nothing here can shift layout.
   Baseline below is the no-JS / reduced-motion state: everything visible. */
.reveal, .reveal-up, .reveal-left, .reveal-right, .stagger > * {
  opacity: 1;
  transform: none;
}
/* The hidden state is gated on .js-motion, which main.js only adds when motion
   is allowed — so if the script never runs, the page still reads normally. */
.js-motion .reveal,
.js-motion .reveal-up,
.js-motion .reveal-left,
.js-motion .reveal-right,
.js-motion .stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(.22,.7,.25,1), transform 600ms cubic-bezier(.22,.7,.25,1);
}
/* Directional variants. Each also names `.stagger > .x` so it outranks the
   `.js-motion .stagger > *` rule above (3 classes beats 2) and a direction
   still applies to a card inside a staggered group. */
.js-motion .reveal-left,
.js-motion .stagger > .reveal-left  { transform: translateX(-40px); }
.js-motion .reveal-right,
.js-motion .stagger > .reveal-right { transform: translateX(40px); }
.js-motion .reveal-up,
.js-motion .stagger > .reveal-up    { transform: translateY(24px); }

.js-motion .is-in { opacity: 1 !important; transform: none !important; }

/* The hero never reacts to scroll — it just fades up once on load. */
.js-motion .hero-fade {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms cubic-bezier(.22,.7,.25,1), transform 700ms cubic-bezier(.22,.7,.25,1);
}
.js-motion .hero-grid > .hero-fade + .hero-fade { transition-delay: 110ms; }
.js-motion.is-loaded .hero-fade { opacity: 1; transform: none; }

/* Small screens: same effects, shorter travel (main.js shortens the delays). */
@media (max-width: 720px) {
  .js-motion .reveal-left,
  .js-motion .stagger > .reveal-left  { transform: translateX(-24px); }
  .js-motion .reveal-right,
  .js-motion .stagger > .reveal-right { transform: translateX(24px); }
  .js-motion .reveal-up,
  .js-motion .stagger > .reveal-up    { transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal,
  .js-motion .reveal-up,
  .js-motion .reveal-left,
  .js-motion .reveal-right,
  .js-motion .stagger > *,
  .js-motion .hero-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .wave.playing i { animation: none; }
}

/* ---------- simple content pages (about, privacy, 404) ----------
   Scoped under .page, which the landing never uses, so none of this can
   reach the existing design. Type scale and colours come from the same
   custom properties as the rest of the site. */
.page { padding-top: clamp(46px, 8vw, 84px); padding-bottom: clamp(56px, 9vw, 96px); }
.page h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 10px 0 clamp(16px, 3vw, 24px);
}
.page h2 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(18.5px, 3.4vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: clamp(28px, 4.5vw, 38px) 0 10px;
}
.page p, .page li { font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 34em; }
.page p { margin: 0 0 15px; }
.page ul { margin: 0 0 15px; padding-left: 20px; }
.page li { margin-bottom: 7px; }
.page a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.page a:not(.btn):hover { color: var(--green); }
.page .lead { font-size: clamp(17px, 2.6vw, 19px); color: var(--muted); max-width: 32em; }
.page .updated { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--dim); margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vw, 34px); }