/* Agentium — agentium.nl
   Brand tokens from 02-agentium-brand-guide.md (Drive, June 2026).
   No external resources of any kind. System fonts only, so there is no
   request to Google and no AVG question. Do not add @import or a webfont
   CDN link here without revisiting the Content-Security-Policy in _headers. */

:root {
  --charcoal: #1E293B;
  --charcoal-deep: #16202F;
  --teal: #0D9488;
  --teal-deep: #0B7A70;
  --teal-light: #2BB5A6;
  --amber: #D97706;
  --slate: #F1F5F9;
  --ink: #0F172A;
  --ink-mid: #334155;
  --ink-muted: #64748B;
  --line: #E2E8F0;
  --line-soft: #EDF1F5;
  --paper: #FFFFFF;
  --paper-alt: #F7F9FB;
  --field: #FFFFFF;
  --focus-ring: rgba(13, 148, 136, 0.18);

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  --gutter: clamp(24px, 5vw, 68px);
  --band: clamp(52px, 7vw, 86px);
  --measure: 64ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --charcoal: #16202F;
    --charcoal-deep: #101827;
    --slate: #16202F;
    --ink: #E7EDF4;
    --ink-mid: #B6C4D3;
    --ink-muted: #8497AA;
    --line: #2A3849;
    --line-soft: #223044;
    --paper: #0F1725;
    --paper-alt: #131C2B;
    --field: #16202F;
    --teal: #2BB5A6;
    --teal-deep: #2BB5A6;
    --amber: #F0A03C;
    --focus-ring: rgba(43, 181, 166, 0.22);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--teal); color: #fff; }

a { color: var(--teal-deep); text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: #fff;
  padding: 12px 18px;
  z-index: 10;
}
.skip:focus { left: 0; }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ================================================ header band */

.band {
  background: var(--charcoal);
  color: #fff;
  border-bottom: 3px solid var(--amber);
}

.band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
}

.brandline {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.mark {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--charcoal-deep);
  flex: none;
}
.mark svg { display: block; width: 100%; height: 100%; }

.wordmark {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.005em;
  color: #fff;
}

.band-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94A9BD;
  line-height: 1.5;
  max-width: 26ch;
  margin: 0;
}

.lang {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #94A9BD;
  text-decoration: none;
  border: 1px solid #35485F;
  border-radius: 3px;
  padding: 5px 10px;
  flex: none;
}
.lang:hover { color: #fff; border-color: #6A85A0; }

/* ================================================ hero */

/* The hero carries a background banner built entirely from CSS gradients plus
   one inline SVG. No image file, so it costs no request, stays sharp at any
   zoom, follows dark mode, and does not touch the img-src side of the CSP.

   The artwork says what the business does: loose, tilted shapes on the left
   (work arriving in no particular shape) flowing into one aligned block on the
   right (structured, checked, with one item flagged amber). It is deliberately
   held at low opacity. The headline is the most important thing on the page
   and the banner is texture behind it, not competition for it. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(48px, 7vw, 76px);
}

/* Colour wash: teal from the top right, a hint of amber bottom right. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(115% 85% at 86% 6%, rgba(13, 148, 136, 0.15) 0%, rgba(13, 148, 136, 0.05) 40%, transparent 70%),
    radial-gradient(65% 55% at 99% 96%, rgba(217, 119, 6, 0.08) 0%, transparent 62%);
}

/* Blueprint grid, masked so it fades out before it reaches the text. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(100% 80% at 80% 8%, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 80%);
  mask-image: radial-gradient(100% 80% at 80% 8%, #000 0%, rgba(0, 0, 0, 0.5) 46%, transparent 80%);
}

@media (prefers-color-scheme: dark) {
  .hero::before {
    background:
      radial-gradient(115% 85% at 86% 6%, rgba(43, 181, 166, 0.16) 0%, rgba(43, 181, 166, 0.06) 40%, transparent 70%),
      radial-gradient(65% 55% at 99% 96%, rgba(240, 160, 60, 0.09) 0%, transparent 62%);
  }
  .hero::after {
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  }
}

.hero-art {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(-40px, calc((100% - 1180px) / 2));
  transform: translateY(-50%);
  width: 430px;
  height: auto;
  opacity: 0.55;
  pointer-events: none;
}

.hero-art .art-in { stroke: var(--ink-muted); stroke-width: 1.5; fill: none; opacity: 0.5; }
.hero-art .art-flow { stroke: var(--teal); stroke-width: 1.5; fill: none; stroke-dasharray: 3 5; opacity: 0.75; }
.hero-art .art-box { stroke: var(--teal); stroke-width: 1.75; fill: none; }
.hero-art .art-row { stroke: var(--ink-muted); stroke-width: 3; stroke-linecap: round; opacity: 0.65; }
.hero-art .art-bar { fill: var(--teal); }
.hero-art .art-flagrow { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.hero-art .art-flag { fill: var(--amber); }

/* Below this width the artwork would sit under the headline, so it goes. */
@media (max-width: 1000px) {
  .hero-art { display: none; }
  .hero::after {
    -webkit-mask-image: radial-gradient(120% 90% at 88% 4%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 88% 4%, #000 0%, transparent 72%);
  }
}

h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 6.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--ink);
  text-wrap: balance;
  max-width: 16ch;
}

.lede {
  font-size: clamp(18.5px, 2.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 56ch;
  margin: 0 0 36px;
}

/* ================================================ cta */

.cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  background: var(--teal-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 4px;
  border: 1px solid var(--teal-deep);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--charcoal); border-color: var(--charcoal); }

@media (prefers-color-scheme: dark) {
  .btn { color: #06231F; }
  .btn:hover { background: #fff; border-color: #fff; color: var(--charcoal); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.cta-note {
  font-size: 14.5px;
  color: var(--ink-muted);
  margin: 0;
  max-width: 34ch;
}

/* ================================================ sections */

section {
  padding-top: var(--band);
  padding-bottom: var(--band);
  border-top: 1px solid var(--line-soft);
}

section.tinted {
  background: var(--paper-alt);
  border-top-color: var(--line);
}

/* ---- the section marker: 01 — LABEL ————————— */

/* Readability note: the label sits in full-strength ink rather than teal.
   Teal-on-white at small sizes was the reason these read as faint. The colour
   accent moved into the number chip, where it has a solid background behind
   it and carries the brand without costing contrast. */

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 26px;
}

.kicker .idx {
  flex: none;
  background: var(--teal-deep);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: 3px;
}

@media (prefers-color-scheme: dark) {
  .kicker .idx { color: #08221E; }
}

.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

h2 {
  font-family: var(--serif);
  font-size: clamp(27px, 4vw, 37px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 24ch;
  text-wrap: balance;
}

h3 {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 7px;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 17px;
  max-width: var(--measure);
}
p:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }

/* ================================================ numbered card grid */

ol.steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 30px;
}

@media (min-width: 760px) {
  ol.steps { grid-template-columns: repeat(3, 1fr); gap: 36px 34px; }
}

ol.steps li { margin: 0; }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  border: 1.5px solid var(--amber);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

ol.steps p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: none;
}

/* ================================================ proof-of-concept visual

   Built from real HTML and CSS rather than an exported image: it stays sharp
   at any zoom, reflows on a phone, follows dark mode, is readable by a screen
   reader, and Google can index the words in it. An image would fail all five.
   ------------------------------------------------------------------------ */

.demo {
  display: grid;
  gap: 18px;
  margin: 34px 0 0;
}

@media (min-width: 940px) {
  .demo { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
}

.demo-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px -4px rgba(15, 23, 42, 0.14);
}

.demo-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}

.demo-step {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--teal-deep);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
}

@media (prefers-color-scheme: dark) {
  .demo-step { color: #08221E; }
}

.demo-head h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.demo-body {
  padding: 17px;
  font-size: 13.5px;
  line-height: 1.6;
  flex: 1;
}

.demo-body p { max-width: none; margin: 0 0 10px; }
.demo-body p:last-child { margin-bottom: 0; }

/* ---- panel 1: the incoming email ---- */

.mail-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  margin: 0 0 3px !important;
  word-break: break-word;
}

.mail-rule {
  height: 1px;
  background: var(--line);
  margin: 13px 0;
}

.demo-body mark {
  background: rgba(217, 119, 6, 0.16);
  color: inherit;
  border-bottom: 1.5px solid var(--amber);
  padding: 0 1px;
}

/* ---- panel 2: the checks ---- */

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

.checklist li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 13px;
  font-size: 13px;
  line-height: 1.45;
}
.checklist li:last-child { margin-bottom: 0; }

.checklist li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
}

.checklist .ok::before { content: "\2713"; color: var(--teal-deep); }
.checklist .flag::before { content: "!"; color: var(--amber); }

.checklist b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.checklist span {
  display: block;
  color: var(--ink-muted);
  font-size: 12.5px;
}

/* ---- panel 3: the staged order ---- */

.order-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.order-line:first-child {
  border-bottom: 1px solid var(--line);
  padding-top: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.order-line b { font-weight: 600; color: var(--ink); }
.order-line.total {
  border-bottom: none;
  font-weight: 700;
  color: var(--ink);
  padding-top: 11px;
}

.order-flagline {
  margin-top: 13px;
  padding: 9px 12px;
  background: rgba(217, 119, 6, 0.1);
  border-left: 2px solid var(--amber);
  border-radius: 2px;
  font-size: 12.5px;
  color: var(--ink);
}

.reply {
  margin-top: 13px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.5;
}

.reply b {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

/* ---- the before/after strip under the three panels ---- */

.demo-result {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 22px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  align-items: center;
}

@media (min-width: 720px) {
  .demo-result { grid-template-columns: auto auto 1fr; gap: 30px; }
}

.ba { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ba .lbl {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 5px;
}
.ba .val { font-size: 25px; font-weight: 700; line-height: 1; }
.ba.before .val { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.ba.after .val { color: var(--teal-deep); }

.demo-result p { margin: 0; font-size: 14.5px; max-width: 46ch; }

.demo-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ================================================ mid-page call to action */

.cta-strip {
  background: var(--slate);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-strip .wrap {
  padding-top: 30px;
  padding-bottom: 30px;
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 780px) {
  .cta-strip .wrap { grid-template-columns: 1fr auto; gap: 40px; }
}

.cta-strip p {
  margin: 0;
  max-width: 58ch;
  font-size: 16.5px;
  color: var(--ink-mid);
}

.cta-strip strong { color: var(--ink); }

.cta-strip .btn { white-space: nowrap; }

@media (max-width: 520px) {
  .cta-strip .btn { display: block; text-align: center; }
}

/* ================================================ compact fit strip */

.fit-compact {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

@media (min-width: 720px) {
  .fit-compact { grid-template-columns: repeat(2, 1fr); gap: 14px 30px; }
}

.fit-compact div {
  position: relative;
  padding-left: 27px;
  font-size: 16px;
}

.fit-compact div::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--teal-deep);
}

.fit-out {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-muted);
  max-width: 68ch;
}
.fit-out strong { color: var(--ink); }

/* ================================================ dark statement band */

.boundary {
  background: var(--charcoal);
  border-top: none;
}

.boundary .kicker { color: #FFFFFF; }
.boundary .kicker .idx { background: var(--teal-light); color: #08221E; }
.boundary .kicker::after { background: #35485F; }

.boundary h2 {
  color: #fff;
  font-size: clamp(28px, 4.4vw, 42px);
  max-width: 21ch;
  margin-bottom: 24px;
}

.boundary h2 .under {
  border-bottom: 3px solid var(--amber);
  padding-bottom: 4px;
}

.boundary p {
  color: #C6D3E0;
  font-size: 17.5px;
  max-width: 60ch;
}

/* ================================================ stat callout */

.stat-row {
  display: grid;
  gap: 20px;
  margin: 40px 0 30px;
  padding: 30px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
}

/* Desktop: a hairline divider between the figure and the sentence, with equal
   optical space either side, and both vertically centred against each other.
   This is what was making it read as misaligned before. */
@media (min-width: 720px) {
  .stat-row {
    grid-template-columns: auto 1fr;
    gap: 0;
    align-items: center;
    padding: 34px 36px;
  }
  .stat {
    border-right: 1px solid var(--line);
    padding-right: 38px;
  }
  .stat-row p { padding-left: 38px; }
}

.stat {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 6.4vw, 56px);
  font-weight: 700;
  color: var(--teal-deep);
  line-height: 1;
  white-space: nowrap;
}

.stat span {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 11px;
  white-space: normal;
}

.stat-row p {
  margin: 0;
  max-width: 48ch;
  font-size: 16.5px;
}

/* ================================================ honesty block */

.honest {
  border-left: 3px solid var(--amber);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 32px;
  margin-top: 6px;
}
.honest ul { margin: 0 0 18px; padding-left: 20px; }
.honest li { margin-bottom: 11px; }
.honest li:last-child { margin-bottom: 0; }
.honest p { margin-bottom: 0; font-size: 15.5px; }

/* ================================================ arrow list */

ul.checks {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  max-width: var(--measure);
}
ul.checks li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 11px;
  font-size: 16.5px;
}
ul.checks li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-deep);
  font-family: var(--mono);
  font-weight: 700;
}

/* ================================================ two-up prose */

.pair {
  display: grid;
  gap: 30px;
  margin-top: 28px;
}

@media (min-width: 760px) {
  .pair { grid-template-columns: 1fr 1fr; gap: 46px; }
}

.pair p { max-width: none; font-size: 15.5px; }

/* ================================================ fit / not-fit */

.fit {
  display: grid;
  gap: 32px;
  margin-top: 10px;
  margin-bottom: 28px;
}

@media (min-width: 760px) {
  .fit { grid-template-columns: 1fr 1fr; gap: 46px; }
}

.fit ul { margin: 0; padding: 0; list-style: none; }
.fit li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 16px;
}
.fit li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 700;
}
.fit .yes li::before { content: "+"; color: var(--teal-deep); }
.fit .no li::before { content: "\2212"; color: var(--ink-muted); }

/* ================================================ bio */

.bio {
  display: grid;
  gap: 30px;
  align-items: start;
}

@media (min-width: 760px) {
  .bio { grid-template-columns: 200px 1fr; gap: 44px; }
}

.bio-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 4px;
  padding: 22px;
  background: var(--paper);
}

.bio-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin-bottom: 16px;
}

.bio-card .name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 3px;
}

.bio-card .role {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* ================================================ process timeline */

ol.process {
  counter-reset: step;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}

ol.process li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  padding-bottom: 26px;
  border-left: 1px solid var(--line);
  margin-left: 14px;
}
ol.process li:last-child { border-left-color: transparent; padding-bottom: 0; }

ol.process li::before {
  content: counter(step);
  position: absolute;
  left: -15px;
  top: 0;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--teal);
  color: var(--teal-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.tinted ol.process li::before { background: var(--paper-alt); }

ol.process p { max-width: 58ch; }

/* ================================================ contact section + form */

.contact {
  background: var(--charcoal);
  border-top: none;
}

.contact .kicker { color: var(--teal-light); }
.contact .kicker .idx { color: #7E93A8; }
.contact .kicker::after { background: #33465C; }

.contact h2 { color: #fff; max-width: 22ch; }

.contact .intro {
  color: #C6D3E0;
  font-size: 17.5px;
  max-width: 56ch;
  margin-bottom: 34px;
}

.form-card {
  background: var(--paper);
  border-radius: 6px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.5);
}

.form-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 22px 26px; }
  .form-grid .full { grid-column: 1 / -1; }
}

.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: 0.005em;
}

.field label .opt {
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
  display: block;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .field input, .field select, .field textarea { transition: none; }
}

.form-actions {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .form-actions .btn { width: 100%; text-align: center; }
  .form-note { max-width: none; }
}

button.btn {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.form-note {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 0;
  max-width: 40ch;
}

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

.contact .alt {
  margin-top: 26px;
  font-size: 15px;
  color: #94A9BD;
  max-width: none;
}
.contact .alt a {
  color: #fff;
  font-family: var(--mono);
  font-size: 14.5px;
}

/* ================================================ footer */

footer {
  background: var(--paper);
  padding-top: 38px;
  padding-bottom: 48px;
  font-size: 14px;
  color: var(--ink-muted);
}

footer .cols {
  display: grid;
  gap: 20px;
  justify-content: space-between;
}

@media (min-width: 680px) {
  footer .cols { grid-template-columns: auto auto; }
}

footer p { margin: 0 0 6px; max-width: none; }
footer .legalname { color: var(--ink); font-weight: 600; }
footer .fine { margin-top: 18px; font-size: 13px; }

/* ================================================ inner pages */

.doc {
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: clamp(44px, 6vw, 72px);
  border-top: none;
}

.doc h1 {
  font-size: clamp(30px, 4.8vw, 42px);
  max-width: 24ch;
  margin-bottom: 10px;
}

.doc .updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 38px;
}

.doc h2 {
  font-size: clamp(21px, 2.9vw, 25px);
  margin-top: 38px;
  margin-bottom: 14px;
  max-width: 32ch;
}

.doc ul { max-width: var(--measure); padding-left: 20px; }
.doc li { margin-bottom: 9px; }

.back {
  font-family: var(--mono);
  font-size: 13px;
  display: inline-block;
  margin-top: 38px;
}

/* ================================================ thank-you page */

.thanks {
  padding-top: clamp(70px, 12vw, 130px);
  padding-bottom: clamp(70px, 12vw, 130px);
  border-top: none;
  text-align: center;
}

.thanks .tick {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  color: var(--teal-deep);
  font-size: 26px;
  line-height: 50px;
  margin: 0 auto 26px;
  font-family: var(--mono);
}

.thanks h1 {
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.thanks p {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 17.5px;
}