/* Frontfoot — Quiet palette. Chalk ground, Harbour blue reserved for action and emphasis. */
:root {
  --chalk: #F8FAFA;
  --white: #FFFFFF;
  --cloud: #E6EDF0;
  --line: #D9E2E6;
  --slate: #1C2B33;
  --body: #35424A;
  --meta: #5F6C73;
  --blue: #3D6E8C;
  --blue-ink: #2F5870;

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --radius-pill: 999px;
  --radius-panel: 16px;
  --shell: 1200px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --header-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--body);
  font: 400 17px/27px var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--slate);
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* Hero entrance: hidden only while JS is about to animate it; a timeout in <head> always reveals it. */
.js:not(.intro-done) [data-intro] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js [data-intro] { opacity: 1 !important; } }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--slate);
  color: var(--white);
  font: 600 14px/1 var(--display);
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 40px);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

.label {
  font: 600 13px/1.4 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}

/* ---------- Buttons (rolling label) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: 600 15px/1 var(--display);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-ink); }
.btn--ghost { background: transparent; color: var(--slate); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--slate); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

.roll { position: relative; display: block; overflow: hidden; }
.roll__copy { display: block; white-space: nowrap; }
.roll__copy--in { position: absolute; inset: 0; transform: translateY(-100%); }
.btn__icon { display: inline-flex; width: 1em; height: 1em; }
.btn__icon svg { width: 100%; height: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(248, 250, 250, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--chalk);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 24px; width: auto; }

/* Mega menu */
.mega { position: relative; }

.mega__nav {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 5px;
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.mega__indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--cloud);
  opacity: 0;
  pointer-events: none;
}

.mega__trigger,
.mega__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  font: 600 14px/1 var(--display);
  color: var(--meta);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
}
.mega__trigger[aria-expanded="true"],
.mega__trigger:hover,
.mega__link:hover { color: var(--slate); }

.mega__chev { width: 10px; height: 6px; transition: transform 0.35s var(--ease-out); }
.mega__trigger[aria-expanded="true"] .mega__chev { transform: rotate(180deg); }

.mega__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 680px;
  margin-left: -340px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: 0 18px 48px -18px rgba(28, 43, 51, 0.22);
  overflow: hidden;
  transform-origin: top center;
}
.mega__panel[hidden] { display: none !important; }

.mega__content { padding: 22px; }
.mega__content[hidden] { display: none !important; }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mega__col { display: grid; align-content: start; gap: 2px; }

.mega__heading {
  padding: 0 10px 8px;
  font: 600 12px/1.4 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}

.mega__item {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.mega__item:hover { background: var(--chalk); }
.mega__item strong { font: 600 14px/1.35 var(--display); color: var(--slate); }
.mega__item span { font: 400 13px/1.45 var(--display); color: var(--meta); }

.mega__feature {
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--cloud);
  text-decoration: none;
}
.mega__feature strong { font: 700 15px/1.3 var(--display); color: var(--slate); letter-spacing: -0.01em; }
.mega__feature p { font: 400 13px/1.5 var(--display); color: var(--body); margin-top: 6px; }
.mega__feature em { font: 600 13px/1 var(--display); font-style: normal; color: var(--blue); }

.header-cta { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font: 600 14px/1 var(--display);
  color: var(--slate);
  cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 14px; height: 10px; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}
.menu-toggle__bars::before { top: 1px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid var(--line);
  background: var(--chalk);
  overflow: hidden;
}
.mobile-menu[hidden] { display: none !important; }
.mobile-menu__inner { display: grid; gap: 24px; padding-block: 20px 28px; }
.mobile-menu__group { display: grid; gap: 4px; }
.mobile-menu__group a {
  padding: 8px 0;
  font: 600 17px/1.3 var(--display);
  color: var(--slate);
  text-decoration: none;
}

@media (max-width: 960px) {
  .mega, .header-cta .btn { display: none; }
  .menu-toggle { display: inline-flex; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 10vw, 120px) clamp(120px, 14vw, 180px);
}

.hero__inner { position: relative; z-index: 1; display: grid; gap: 28px; max-width: 880px; }

.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero__title-static { display: block; }
.typewriter {
  display: block;
  min-height: 1.02em;
  color: var(--blue);
}
.typewriter__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.04em;
  vertical-align: -0.04em;
  background: currentColor;
  border-radius: 1px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__lede {
  max-width: 58ch;
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--body);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 760px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.hero__fact { display: grid; gap: 4px; padding: 18px 20px 0 0; min-width: 0; }
.hero__fact + .hero__fact { padding-left: 20px; border-left: 1px solid var(--line); }
.hero__fact strong { font: 700 20px/1.2 var(--display); color: var(--slate); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hero__fact span { font: 400 14px/1.45 var(--display); color: var(--meta); }

.strata {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(90px, 12vw, 150px);
  pointer-events: none;
}
.strata path { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.strata path.strata__accent { stroke: var(--blue); stroke-opacity: 0.35; }
.strata.is-ready path { stroke-dasharray: var(--strata-dash, 1); stroke-dashoffset: var(--strata-dash, 1); transition: stroke-dashoffset 1.8s var(--ease-out); }
.strata.is-drawn path { stroke-dashoffset: 0; }
.strata.is-done path { stroke-dasharray: none; transition: none; }
.strata.is-ready path:nth-child(1) { transition-delay: 0.35s; }
.strata.is-ready path:nth-child(2) { transition-delay: 0.49s; }
.strata.is-ready path:nth-child(3) { transition-delay: 0.63s; }
.strata.is-ready path:nth-child(4) { transition-delay: 0.77s; }

@media (max-width: 640px) {
  /* The longest typed phrase wraps on phones: hold two lines so nothing below jumps. */
  .typewriter { min-height: 2.04em; }
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__fact, .hero__fact + .hero__fact { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter__caret { animation: none; }
}

/* ---------- Scroll word reveal ---------- */

.reveal {
  position: relative;
  background: var(--white);
  border-top: 1px solid var(--line);
  overflow-x: clip;
}

.reveal__stage { padding-block: clamp(96px, 13vw, 176px); }

.reveal__layout {
  display: grid;
  grid-template-columns: 1px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}

.reveal__progress {
  position: relative;
  width: 1px;
  height: 112px;
  overflow: hidden;
  background: var(--line);
}
.reveal__progress span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--slate);
  transform-origin: top;
  transform: scaleY(0);
}

.reveal__content { max-width: 960px; min-width: 0; }
.reveal__kicker { margin-bottom: 36px; }

.reveal__heading {
  max-width: 24ch;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.reveal.is-live .reveal__word { opacity: 0.15; }
.reveal__word--accent { color: var(--blue); }

/* Without the script, or with reduced motion, the statement reads as plain text. */
.reveal:not(.is-live) .reveal__progress span { transform: scaleY(1); }

/* ---------- Section heading (shared) ---------- */

.section-head { display: grid; gap: 18px; max-width: 720px; }
.section-head__title { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }
.section-head__lede { font-size: 18px; line-height: 1.6; max-width: 58ch; }

/* ---------- Pipeline: lead to signed job ---------- */

.pipeline {
  --p: 0;
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) - 40px);
}

.pipeline__board { margin-top: clamp(48px, 6vw, 80px); }

.pipeline__phases,
.pipeline__steps {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.pipeline__phases { margin-bottom: 28px; }
.pipeline__phase {
  position: relative;
  padding: 0 24px 12px 0;
  font: 600 12px/1.4 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}
.pipeline__phase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 24px;
  bottom: 0;
  height: 6px;
  border: 1px solid var(--line);
  border-bottom: 0;
}
.pipeline__phase--2 { grid-column: span 2; }
.pipeline__phase--3 { grid-column: span 3; }

.pipeline__track { position: relative; }

.pipeline__rail {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 87.5%;
  height: 1px;
  background: var(--line);
}
.pipeline__fill {
  position: absolute;
  inset: 0;
  background: var(--slate);
  transform-origin: left center;
  transform: scaleX(var(--p));
}

.pipeline__lead {
  position: absolute;
  top: 3px;
  left: calc(7px + var(--p) * 87.5%);
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(61, 110, 140, 0.14);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.pipeline.is-live.is-moving .pipeline__lead { opacity: 1; }

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

.pipeline__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 24px;
  min-width: 0;
}

.pipeline__node {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.pipeline__num {
  font: 600 12px/1 var(--display);
  letter-spacing: 0.08em;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.pipeline__step h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; }
.pipeline__step p { font: 400 14px/1.55 var(--display); color: var(--meta); }

.pipeline__step h3,
.pipeline__step p,
.pipeline__num { transition: opacity 0.4s var(--ease-out); }

/* Steps the lead has not reached yet sit back until the travelling dot arrives. */
.pipeline.is-live .pipeline__step:not(.is-active) h3,
.pipeline.is-live .pipeline__step:not(.is-active) p,
.pipeline.is-live .pipeline__step:not(.is-active) .pipeline__num { opacity: 0.35; }

.pipeline__step.is-active .pipeline__node,
.pipeline:not(.is-live) .pipeline__node { background: var(--slate); border-color: var(--slate); }
.pipeline__step--key.is-active .pipeline__node,
.pipeline:not(.is-live) .pipeline__step--key .pipeline__node { background: var(--blue); border-color: var(--blue); transform: scale(1.15); }
.pipeline__step--yours .pipeline__node { background: var(--white) !important; border-color: var(--slate) !important; border-style: dashed; }
.pipeline__step--key h3 { color: var(--blue); }

.pipeline:not(.is-live) .pipeline__fill { transform: scaleX(1); }

@media (max-width: 1000px) {
  .pipeline__phases { display: none; }
  .pipeline__rail, .pipeline__lead { display: none; }
  .pipeline__steps { grid-template-columns: minmax(0, 1fr); }
  .pipeline__step {
    grid-template-columns: 15px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 6px;
    padding: 0 0 32px;
  }
  .pipeline__node { grid-row: 1 / span 3; margin: 2px 0 0; }
  /* Each step draws its own segment of the line down to the next one. */
  .pipeline__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 17px;
    bottom: -2px;
    width: 1px;
    background: var(--line);
  }
  .pipeline__step.is-active:not(:last-child)::before,
  .pipeline:not(.is-live) .pipeline__step:not(:last-child)::before { background: var(--slate); }
  .pipeline__num, .pipeline__step h3, .pipeline__step p { grid-column: 2; }
  .pipeline__step p { max-width: 46ch; }
}

/* ---------- Notifications feed ---------- */

.feed {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--white);
  border-top: 1px solid var(--line);
}

.feed__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.feed__copy { display: grid; gap: 20px; min-width: 0; }

.feed__points { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.feed__points li {
  position: relative;
  padding-left: 26px;
  font: 500 15px/1.5 var(--display);
  color: var(--slate);
}
.feed__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}
.feed__actions { margin-top: 8px; }

.feed__device {
  min-width: 0;
  padding: 18px;
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.feed__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 14px;
}
.feed__bar-title { font: 700 15px/1 var(--display); color: var(--slate); letter-spacing: -0.01em; }
.feed__tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--cloud);
  font: 600 11px/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}

.feed__list {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.note {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.note__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cloud);
  color: var(--slate);
}
.note__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note__icon--key { background: var(--blue); color: var(--white); }

.note__body { display: grid; gap: 2px; min-width: 0; }
.note__body strong { font: 600 14px/1.35 var(--display); color: var(--slate); }
/* Every alert holds two lines of detail, so cards stay one height as new ones arrive. */
.note__body span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(13px * 1.45 * 2);
  font: 400 13px/1.45 var(--display);
  color: var(--meta);
}
.note__time { font: 500 12px/1.35 var(--display); color: var(--meta); font-variant-numeric: tabular-nums; white-space: nowrap; }

.feed__footnote { margin-top: 14px; padding: 0 6px; font: 400 12px/1.5 var(--display); color: var(--meta); }

@media (max-width: 900px) {
  .feed__layout { grid-template-columns: minmax(0, 1fr); }
  .feed__device { max-width: 520px; }
}

@media (max-width: 640px) {
  .feed__device { padding: 12px; border-radius: 20px; }
  .note { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .note__icon { width: 32px; height: 32px; }
}

/* ---------- Services overview ---------- */

.services {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(48px, 6vw, 72px);
}

.svc {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.svc:hover {
  border-color: var(--slate);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -26px rgba(28, 43, 51, 0.35);
}

.svc__phase {
  font: 600 12px/1.4 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta);
}
.svc__title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.svc__desc { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 44ch; }

.svc__list {
  display: grid;
  gap: 10px;
  align-content: start;
  margin: 6px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.svc__list li {
  position: relative;
  padding-left: 20px;
  font: 500 14px/1.5 var(--display);
  color: var(--slate);
}
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1.5px;
  background: var(--blue);
}

.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 600 14px/1 var(--display);
  color: var(--blue);
}
.svc__arrow { display: inline-flex; width: 16px; height: 16px; transition: transform 0.35s var(--ease-out); }
.svc__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .svc__arrow { transform: translateX(4px); }

/* The website is the main offer: it takes the full left column, the two add-ons stack beside it. */
.svc--main { grid-row: span 2; }
.svc--main .svc__title { font-size: clamp(30px, 3.2vw, 40px); }

@media (max-width: 800px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .svc--main { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .svc, .svc__arrow { transition: border-color 0.3s; }
  .svc:hover { transform: none; }
  .svc:hover .svc__arrow { transform: none; }
}

/* ---------- Guarantee ---------- */

.guarantee {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--white);
  border-top: 1px solid var(--line);
}

.guarantee__layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.guarantee__seal {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin-inline: auto;
}
.guarantee__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.guarantee__ring-line { fill: none; stroke: var(--line); stroke-width: 1; }
.guarantee__ring text {
  font: 600 11px/1 var(--display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--meta);
}
.guarantee__seal-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
.guarantee__seal-core strong {
  font: 700 clamp(56px, 7vw, 76px)/1 var(--display);
  letter-spacing: -0.05em;
  color: var(--blue);
}
.guarantee__seal-core span {
  font: 600 13px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}

.guarantee__copy { display: grid; gap: 20px; min-width: 0; }
.guarantee__copy .section-head__title { max-width: 18ch; }

.guarantee__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.guarantee__term { display: grid; gap: 8px; align-content: start; }
.guarantee__term h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.guarantee__term p { font: 400 14px/1.6 var(--display); color: var(--meta); }
.guarantee__actions { margin-top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .guarantee__ring text { transform-origin: 100px 100px; animation: seal-turn 40s linear infinite; }
}
@keyframes seal-turn { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .guarantee__layout { grid-template-columns: minmax(0, 1fr); }
  .guarantee__seal { max-width: 220px; margin-inline: 0; }
}
@media (max-width: 560px) {
  .guarantee__terms { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contact call to action and audit form ---------- */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) - 40px);
}

.cta__filings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.cta__copy { display: grid; gap: 20px; min-width: 0; }
.cta__points { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.cta__points li {
  position: relative;
  padding-left: 26px;
  font: 500 15px/1.5 var(--display);
  color: var(--slate);
}
.cta__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}
.cta__try {
  max-width: 46ch;
  padding: 14px 18px;
  font: 500 15px/1.55 var(--display);
  color: var(--blue-ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.cta__direct { font: 400 14px/1.5 var(--display); color: var(--meta); }
.field__optional { font-weight: 400; color: var(--meta); }
.audit-form__note a { color: inherit; text-underline-offset: 2px; }
.cta__email { color: var(--slate); font-weight: 600; user-select: all; }

.audit-form {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 60px -40px rgba(28, 43, 51, 0.35);
}
.audit-form__head { display: grid; gap: 4px; margin-bottom: 4px; }
.audit-form__head h3 { font-size: 22px; letter-spacing: -0.02em; }
.audit-form__head p { font: 400 14px/1.5 var(--display); color: var(--meta); }

.audit-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: 6px; }
.field label { font: 600 13px/1.3 var(--display); color: var(--slate); }
.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--chalk);
  font: 400 16px/1.2 var(--display);
  color: var(--slate);
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  appearance: none;
}
.field input::placeholder { color: #8C979D; }
.field input:hover, .field select:hover { border-color: #C3CFD5; }
.field input:focus, .field select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(61, 110, 140, 0.16);
}
.field.is-invalid input, .field.is-invalid select { border-color: #B4483C; }
.field__error { min-height: 0; font: 500 13px/1.4 var(--display); color: #B4483C; }
.field__error:empty { display: none; }

.field__select { position: relative; }
.field__select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--meta);
  border-bottom: 1.5px solid var(--meta);
  transform: rotate(45deg);
  pointer-events: none;
}
.field select { padding-right: 40px; cursor: pointer; }
.field select:invalid { color: #8C979D; }

.audit-form__submit { justify-content: center; width: 100%; min-height: 52px; margin-top: 4px; }
.audit-form__submit[disabled] { opacity: 0.6; cursor: progress; }
.audit-form__note { font: 400 12px/1.5 var(--display); color: var(--meta); text-align: center; }

.audit-form__done {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 36px;
  text-align: center;
  background: var(--white);
  border-radius: 24px;
}
.audit-form__done[hidden] { display: none; }
.audit-form__done h3 { font-size: 24px; letter-spacing: -0.02em; }
.audit-form__done p { font-size: 17px; line-height: 1.6; max-width: 34ch; margin-inline: auto; }

@media (max-width: 900px) {
  .cta__layout { grid-template-columns: minmax(0, 1fr); }
  .audit-form { max-width: 560px; }
}

/* ---------- Inner page hero (About, Services, Contact) ---------- */

.page-hero { padding-block: clamp(56px, 9vw, 112px) clamp(72px, 10vw, 128px); }

.page-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.page-hero__copy { display: grid; gap: 26px; min-width: 0; }
.page-hero__title {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.page-hero__facts { margin-top: 12px; }

.portrait { margin: 0; display: grid; gap: 16px; min-width: 0; }
.portrait__frame {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--cloud);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portrait__caption { display: grid; gap: 2px; padding-inline: 4px; }
.portrait__caption strong { font: 700 16px/1.3 var(--display); color: var(--slate); }
.portrait__caption span { font: 400 14px/1.4 var(--display); color: var(--meta); }

@media (max-width: 900px) {
  .page-hero__layout { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 420px; }
}

/* ---------- About: reasons ---------- */

.reasons {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
}
.reasons__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
.reason {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 28px 0 0;
  min-width: 0;
}
.reason + .reason { padding-left: 28px; border-left: 1px solid var(--line); }
.reason h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.reason p { font-size: 16px; line-height: 1.65; color: var(--body); }

@media (max-width: 1000px) {
  .reasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason:nth-child(3) { padding-left: 0; border-left: 0; }
  .reason:nth-child(n+3) { padding-top: 36px; }
}
@media (max-width: 600px) {
  .reasons__grid { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .reason, .reason + .reason { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- About: how we work ---------- */

.principles {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--white);
  border-top: 1px solid var(--line);
}
.principles__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.principles__head { position: sticky; top: calc(var(--header-h) + 32px); }

.principles__list { display: grid; margin: 0; padding: 0; list-style: none; }
.principle {
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 8px; }
.principle p { font-size: 16px; line-height: 1.65; max-width: 52ch; }

@media (max-width: 900px) {
  .principles__layout { grid-template-columns: minmax(0, 1fr); }
  .principles__head { position: static; }
}

/* ---------- Call-to-action band (inner pages) ---------- */

.cta-band {
  padding-block: clamp(80px, 10vw, 128px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 64px;
  align-items: end;
}
.cta-band__copy { display: grid; gap: 16px; min-width: 0; }
.cta-band__actions { display: grid; gap: 12px; justify-items: start; }
.cta-band__email { font: 400 14px/1.5 var(--display); color: var(--meta); }

@media (max-width: 800px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* Inner pages alternate chalk and white section by section, whichever sections they use. */
.page-alt > section:nth-of-type(odd) { background: var(--chalk); }
.page-alt > section:nth-of-type(even) { background: var(--white); }
/* Panels and cards switch tone so they stay distinct from whichever background they land on. */
.page-alt > section:nth-of-type(odd) .feed__device { background: var(--white); }

/* ---------- Service pages ---------- */

.svc-hero__inner { display: grid; gap: 26px; max-width: 860px; }

.included {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--white);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) - 40px);
}
.included__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(48px, 6vw, 72px);
}
.inc {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 28px;
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.inc h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }
.inc p { font-size: 16px; line-height: 1.6; color: var(--body); }

@media (max-width: 960px) { .included__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .included__grid { grid-template-columns: minmax(0, 1fr); } }

/* Line graph */
.graph-section {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
}
.graph-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
.graph-section__copy { display: grid; gap: 18px; min-width: 0; }

.graph {
  margin: 0;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.graph:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.graph__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.graph__title { font: 600 13px/1.4 var(--display); color: var(--meta); }
.graph__value {
  margin-top: 4px;
  font: 700 clamp(30px, 3.4vw, 40px)/1.1 var(--display);
  letter-spacing: -0.03em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.graph__unit { font: 500 14px/1 var(--display); letter-spacing: 0; color: var(--meta); }
.graph__canvas { position: relative; }
.graph__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.graph__grid { stroke: var(--cloud); stroke-width: 1; }
.graph__axis { font: 500 11px/1 var(--display); fill: var(--meta); }
.graph__area { fill: var(--cloud); opacity: 0.55; }
.graph__line { fill: none; stroke: var(--blue); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.graph__guide { stroke: var(--slate); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.45; }
.graph__dot { fill: var(--white); stroke: var(--blue); stroke-width: 2.5; }
.graph__note { margin-top: 12px; font: 400 12px/1.5 var(--display); color: var(--meta); }

.graph.is-ready .graph__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); }
.graph.is-ready .graph__area,
.graph.is-ready .graph__cursor { opacity: 0; transition: opacity 0.6s var(--ease-out) 0.9s; }
.graph.is-drawn .graph__line { stroke-dashoffset: 0; }
.graph.is-drawn .graph__area { opacity: 0.55; }
.graph.is-drawn .graph__cursor { opacity: 1; }

@media (max-width: 900px) { .graph-section__layout { grid-template-columns: minmax(0, 1fr); } }
/* The chart scales down on phones, so its labels are drawn larger to stay readable. */
@media (max-width: 600px) { .graph__axis { font-size: 20px; } }

/* Steps (a real sequence, so numbered) */
.steps {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--white);
  border-top: 1px solid var(--line);
}
.steps__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.step { display: grid; align-content: start; gap: 10px; padding: 28px 28px 0 0; min-width: 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
.step__num { font: 600 13px/1 var(--display); letter-spacing: 0.08em; color: var(--blue); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.step p { font-size: 16px; line-height: 1.6; }

@media (max-width: 1000px) {
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .step:nth-child(n+3) { padding-top: 36px; }
}
@media (max-width: 600px) {
  .steps__list { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .step, .step + .step { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* FAQ */
.faq {
  padding-block: clamp(96px, 12vw, 160px);
  background: var(--chalk);
  border-top: 1px solid var(--line);
}
.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 22px 44px 22px 0;
  font: 600 17px/1.4 var(--display);
  color: var(--slate);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--slate);
  transition: transform 0.3s var(--ease-out);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__answer { overflow: hidden; }
.faq__answer p { padding: 0 44px 24px 0; font-size: 16px; line-height: 1.65; max-width: 62ch; }

@media (max-width: 900px) { .faq__layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Blog index ---------- */

.blog-hero { padding-bottom: clamp(48px, 7vw, 80px); }

.blog-list { padding-block: clamp(48px, 7vw, 80px) clamp(96px, 12vw, 160px); border-top: 1px solid var(--line); }
.blog-list__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 32px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  font: 600 14px/1 var(--display);
  color: var(--slate);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.chip:hover { border-color: var(--slate); }
.chip[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: var(--white); }
.blog-list__count { font: 500 14px/1 var(--display); color: var(--meta); font-variant-numeric: tabular-nums; }

.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.post-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 28px;
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.post-card[hidden] { display: none; }
.post-card:hover { border-color: var(--slate); transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(28, 43, 51, 0.35); }
.post-card__topic { font: 600 12px/1.4 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.post-card__title { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
.post-card__excerpt { font-size: 16px; line-height: 1.6; color: var(--body); }
.post-card__meta { font: 500 13px/1 var(--display); color: var(--meta); }
.blog-list__empty { padding: 48px 0; font: 500 16px/1.5 var(--display); color: var(--meta); }

@media (max-width: 960px) { .blog-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .blog-list__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .post-card:hover { transform: none; } }

/* ---------- Blog post ---------- */

.post { padding-block: clamp(48px, 8vw, 96px) clamp(80px, 10vw, 128px); }
.post__shell { max-width: calc(720px + 40px); }
.post__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.post__back {
  width: fit-content;
  font: 600 14px/1 var(--display);
  color: var(--meta);
  text-decoration: none;
}
.post__back::before { content: "\2190\00a0"; }
.post__back:hover { color: var(--slate); }
.post__head .label a { color: var(--blue); text-decoration: none; }
.post__title { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.post__meta { font: 500 14px/1.5 var(--display); color: var(--meta); }

.post__body { font-size: 18px; line-height: 1.75; color: var(--body); }
.post__body > * + * { margin-top: 1.1em; }
.post__body .post__lede { font-size: 21px; line-height: 1.6; color: var(--slate); }
.post__body h2 { margin-top: 2em; font-size: 26px; line-height: 1.25; letter-spacing: -0.025em; }
.post__body h2 + p, .post__body h2 + ul, .post__body h2 + ol { margin-top: 0.6em; }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: 0.5em; }
.post__body li::marker { color: var(--blue); }
.post__body strong { color: var(--slate); font-weight: 600; }
.post__body blockquote {
  margin-inline: 0;
  padding: 20px 24px;
  background: var(--cloud);
  border-radius: 14px;
  font: 500 17px/1.6 var(--display);
  color: var(--slate);
}

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

.contact { padding-block: clamp(56px, 9vw, 112px) clamp(96px, 12vw, 144px); border-top: 0; }
.contact .cta__copy { gap: 24px; }

.next-steps { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.next-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.next-steps__num { font: 600 13px/1.6 var(--display); letter-spacing: 0.08em; color: var(--blue); font-variant-numeric: tabular-nums; }
.next-steps strong { display: block; font: 600 16px/1.4 var(--display); color: var(--slate); }
.next-steps span:not(.next-steps__num) { display: block; margin-top: 2px; font: 400 14px/1.55 var(--display); color: var(--meta); }

/* On narrow screens the form moves up, straight after the intro, so it isn't buried below the steps. */
@media (max-width: 900px) {
  .contact .cta__layout { gap: 24px; }
  .contact .cta__copy { display: contents; }
  .contact .cta__copy > .label { order: 1; }
  .contact .cta__copy > h1 { order: 2; }
  .contact .cta__copy > .hero__lede { order: 3; }
  .contact .audit-form { order: 4; margin-block: 8px 16px; }
  .contact .next-steps { order: 5; }
  .contact .cta__try { order: 6; }
  .contact .cta__direct { order: 7; }
}

/* ---------- Simple message pages (Thanks, 404) ---------- */

.message { padding-block: clamp(80px, 14vw, 176px); }
.message__inner { display: grid; gap: 24px; max-width: 680px; }

/* ---------- Legal text (Privacy) ---------- */

.legal { padding-block: clamp(48px, 8vw, 96px) clamp(80px, 10vw, 128px); }
.legal__shell { max-width: calc(720px + 40px); }
.legal__head { display: grid; gap: 16px; margin-bottom: 40px; }
.legal__body { font-size: 17px; line-height: 1.7; }
.legal__body > * + * { margin-top: 1em; }
.legal__body h2 { margin-top: 2em; font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; }
.legal__body ul { padding-left: 1.3em; }
.legal__body li + li { margin-top: 0.4em; }
.legal__body li::marker { color: var(--blue); }

/* ---------- Footer reveal ----------
   The page lifts off the footer: main has rounded bottom corners, and the footer
   is fixed to the bottom of the screen but clipped to its own slot at the end of
   the page, so it can only ever be seen there. Its content fades in on its own. */

#main {
  position: relative;
  z-index: 1;
  background: var(--chalk);
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  box-shadow: 0 30px 60px -30px rgba(28, 43, 51, 0.28);
  /* clip, not hidden: it rounds the corners without breaking sticky elements inside. */
  overflow: clip;
}
.footer-sentinel { height: 1px; }

.footer-wrap {
  position: relative;
  margin-top: -32px;
  background: var(--white);
}
.site-footer {
  position: relative;
  padding-top: 32px;
  background: var(--white);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Switched on by the script only when the footer fits on screen;
   otherwise (no script, or a footer taller than the screen) it scrolls normally. */
.footer-wrap.is-reveal {
  height: var(--footer-h);
  clip-path: inset(0);
}
.footer-wrap.is-reveal .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.site-footer__inner { display: grid; gap: clamp(48px, 7vw, 96px); padding-block: clamp(72px, 9vw, 120px) 36px; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.site-footer__statement {
  max-width: 16ch;
  font: 700 clamp(30px, 3.8vw, 46px)/1.1 var(--display);
  letter-spacing: -0.035em;
  color: var(--slate);
  text-wrap: balance;
}

.site-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 32px; }
.site-footer__col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.site-footer__col .label { margin-bottom: 4px; }
.site-footer__col a {
  width: fit-content;
  font: 500 15px/1.4 var(--display);
  color: var(--slate);
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease-out);
}
.site-footer__col a:hover { background-size: 100% 1px; }
.site-footer__note { font: 400 14px/1.5 var(--display); color: var(--meta); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.site-footer__bottom .brand img { height: 20px; }
.site-footer__legal { flex: 1 1 320px; font: 400 13px/1.5 var(--display); color: var(--meta); }
.site-footer__link { font: 500 13px/1.5 var(--display); color: var(--slate); }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  #main { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .reveal__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reveal__progress { display: none; }
  .reveal__kicker { margin-bottom: 24px; }
}