/* =====================================================================
   BurkGxP – styles.css
   One stylesheet, mobile-first, plain CSS. Breakpoints: 37.5em (600 px)
   and 60em (960 px). Blocks follow the page order and carry the same
   SECTION names as the HTML comments. Colours and type come from the
   brand tokens (tokens.css) through the bridge below.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Brand bridge
   The only place that reads brand token names; they are the brand
   guide's. Values after a comma are fallbacks for tokens the guide
   doesn't document (tracking, line widths, radius) until
   brand/web/tokens.css is in.
   --------------------------------------------------------------------- */
:root {
  --site-bg: var(--color-page);
  --site-surface: var(--color-surface);
  --site-raised: var(--color-white);
  --site-line: var(--color-line);
  --site-text: var(--color-text);
  --site-muted: var(--color-text-2);
  --site-brand: var(--color-brand);
  --site-accent: var(--color-accent);
  --site-ground: var(--color-text-2);
  --site-on-ground: var(--color-page);
  --site-on-ground-2: var(--color-line);
  --site-link: var(--color-brand-text);
  --site-on-link: var(--color-page);
  --site-focus: var(--color-focus, var(--color-brand-text));
  --site-font: var(--font-sans);
  --site-tracking-tight: var(--tracking-tight, -0.011em);
  --site-tracking-label: var(--tracking-label, 0.1em);
  --site-hairline: var(--line-hairline, 1px);
  --site-rule: var(--line-rule, 2px);
  --site-radius: var(--radius-md, 0.375rem);
  --site-radius-lg: var(--radius-lg, 0.75rem);
}


/* ---------------------------------------------------------------------
   2. Layout values (site, not brand)
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --wrap-max: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-space: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  --header-h: 4.5rem;
  --measure: 65ch;
}


/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-text);
  font: 400 var(--text-base) / var(--leading-base) var(--site-font);
  font-optical-sizing: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--site-tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p,
ul,
ol,
figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--site-link);
  text-decoration-thickness: var(--site-hairline);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: var(--site-rule);
}

:focus-visible {
  outline: var(--site-rule) solid var(--site-focus);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.plain-list {
  list-style: none;
  padding: 0;
}

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

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--site-link);
  color: var(--site-on-link);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Brand label style: 500, uppercase, 0.1em tracking */
.lifecycle-phase h3 {
  color: var(--site-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 500;
  letter-spacing: var(--site-tracking-label);
  text-transform: uppercase;
}

.todo {
  padding: 0.5rem 0.75rem;
  border: 1px dashed currentColor;
  color: var(--site-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--site-radius);
  background: var(--site-link);
  color: var(--site-on-link);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: var(--site-text);
}

@media (max-width: 37.49em) {
  .button {
    width: 100%;
  }
}


/* ---------------------------------------------------------------------
   SECTION: header
   Sticky from 600 px. Below 600 px the menu button only appears when
   JavaScript runs (html.js); without it the links wrap under the logo.
   Logo: horizontal colour lockup, 32 px tall (brand minimum 24 px).
   --------------------------------------------------------------------- */
.site-header {
  z-index: 10;
  background: var(--site-bg);
  border-bottom: var(--site-hairline) solid var(--site-line);
}

.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

.logo {
  display: block;
  margin-right: auto;
}

.logo svg {
  display: block;
  width: auto;
  height: 2rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.site-nav a,
.lang-switch {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--site-text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover,
.lang-switch:hover {
  color: var(--site-link);
  text-decoration: underline;
}

.menu-button {
  display: none;
}

/* Below 360 px "Deutsch" needs the room; 28 px stays above the brand minimum. */
@media (max-width: 22.49em) {
  .logo svg {
    height: 1.75rem;
  }
}

@media (max-width: 37.49em) {
  /* Logo, menu button and language link fit on one line down to 320 px. */
  .header-inner {
    column-gap: 0.75rem;
  }

  .site-nav {
    order: 3;
    flex-basis: 100%;
  }

  .js .site-header {
    position: sticky;
    top: 0;
  }

  html.js {
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  .js .menu-button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: var(--site-hairline) solid var(--site-muted);
    border-radius: var(--site-radius);
    background: transparent;
    color: var(--site-text);
    font: inherit;
    cursor: pointer;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    order: 0;
    padding: 0.25rem var(--gutter) 1rem;
    border-bottom: var(--site-hairline) solid var(--site-line);
    background: var(--site-bg);
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .site-nav ul {
    flex-direction: column;
  }

  .js .site-nav a {
    display: block;
    padding-block: 0.625rem;
  }
}

@media (min-width: 37.5em) {
  html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  .site-header {
    position: sticky;
    top: 0;
  }
}


/* ---------------------------------------------------------------------
   SECTION: hero
   The brand's web hero: the #4C566A ground. The validation path motif
   was dropped from the brand (October 2026), so the hero has none.
   Text on the ground: #ECEFF4 (6.40:1), small text #D8DEE9 (5.46:1).
   --------------------------------------------------------------------- */
.hero {
  --node-d: 2.25rem;
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--site-ground);
  color: var(--site-on-ground);
}

.hero h1 {
  max-width: 22ch;
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  hyphens: manual; /* no "Validie-rung" on phones; every word fits at 320 px */
}

.lead {
  max-width: 54ch;
  margin-top: 1.25rem;
  color: var(--site-on-ground-2);
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}

.cta-note {
  max-width: 44ch;
  color: var(--site-on-ground-2);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.hero .button {
  background: var(--site-on-ground);
  color: var(--site-text);
}

.hero .button:hover {
  background: var(--site-line);
}

.hero :focus-visible {
  outline-color: var(--site-on-ground);
}

@media (min-width: 37.5em) {
  .hero h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
  }
}

@media (min-width: 60em) {
  .hero {
    --node-d: 3rem;
  }

  .hero h1 {
    font-size: var(--text-4xl);
    line-height: var(--leading-4xl);
  }
}


/* The path: full-bleed bar through the node centres, three nodes inside
   the content width, each with a short label. Ratios from the guide
   (D = check diameter): bar 0.5 D, start circle 0.7 D, square 0.8 D,
   strokes 0.1 D. Order fixed: ! identify, shield mitigate, check prove. */
.hero-path {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.hero-path::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--node-d) / 2);
  height: calc(var(--node-d) * 0.5);
  transform: translateY(-50%);
  background: var(--site-brand);
}

.hero-path-nodes {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--gutter);
}

.hero-path-nodes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.hero-path-nodes li:first-child {
  align-items: flex-start;
  text-align: left;
}

.hero-path-nodes li:last-child {
  align-items: flex-end;
  text-align: right;
}

.node-box {
  display: flex;
  align-items: center;
  height: var(--node-d);
}

.node-label {
  color: var(--site-on-ground-2);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: 500;
}

.node {
  display: block;
  flex: none;
}

.node-start {
  width: calc(var(--node-d) * 0.7);
  height: calc(var(--node-d) * 0.7);
}

.node-control {
  width: calc(var(--node-d) * 0.8);
  height: calc(var(--node-d) * 0.8);
}

.node-check {
  width: var(--node-d);
  height: var(--node-d);
}

.node-shape {
  fill: var(--site-ground);
  stroke: var(--site-on-ground);
  stroke-width: 10;
}

.node-mark {
  fill: none;
  stroke: var(--site-on-ground);
  stroke-width: 10;
  stroke-linecap: round;
}

.node-dot,
.node-shield {
  fill: var(--site-on-ground);
}

.node-check-circle {
  fill: var(--site-accent);
  stroke: var(--site-ground);
  stroke-width: 10;
}

.node-tick {
  fill: none;
  stroke: var(--site-text);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 60em) {
  .node-label {
    font-size: var(--text-base);
    line-height: var(--leading-base);
  }
}

/* ---------------------------------------------------------------------
   Sections in general
   Heading on top, content below. Grids: one column on phones, two from
   600 px, three or four from 960 px.
   --------------------------------------------------------------------- */
.section {
  padding-block: var(--section-space);
}

.band {
  background: var(--site-surface);
}

.section h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}

.section-intro {
  max-width: var(--measure);
  margin-top: 0.75rem;
  color: var(--site-muted);
}

.grid-3,
.grid-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}

.split {
  display: grid;
  gap: 1.5rem 3rem;
}

.dash-list li {
  position: relative;
  padding-left: 1.5rem;
}

.dash-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--site-muted);
}

.stack {
  display: grid;
  gap: 0.75rem;
  max-width: var(--measure);
}

@media (min-width: 37.5em) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60em) {
  .section h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-2xl);
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}


/* ---------------------------------------------------------------------
   SECTION: situations
   Short tiles: a rule on top, a short heading, one line of text.
   --------------------------------------------------------------------- */
.tile {
  padding-top: 1rem;
  border-top: var(--site-rule) solid var(--site-line);
}

.tile h3,
.principles h3 {
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

.tile p,
.principles p {
  margin-top: 0.375rem;
  color: var(--site-muted);
}


/* ---------------------------------------------------------------------
   SECTION: services
   Flat white panels on the tint band: no shadow, no gradient. The tags
   name typical deliverables so the card text can stay to one sentence.
   --------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: var(--site-hairline) solid var(--site-line);
  border-radius: var(--site-radius-lg);
  background: var(--site-raised);
}

.card h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.card > p {
  color: var(--site-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.tags li {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--site-bg);
  color: var(--site-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* ---------------------------------------------------------------------
   SECTION: services, part 1: CSV overview diagram (csv-map)
   CSV in the centre, the disciplines it involves around it. Sits under
   the services h2, above the cards.
   No JS, no images: one decorative SVG (spokes + orbit) and an HTML
   list that carries the content, so screen readers and the no-JS view
   get a plain list in reading order.

   Phones/tablets (< 960 px): hub on top, items hang off a vertical rail.
   Desktop (>= 960 px): radial layout on an ellipse.

   Item order = clockwise from 12 o'clock on desktop = reading order.
   The --x/--y percentages (nth-child rules, no inline styles, so a
   strict CSP stays happy) must match the spoke ends in the SVG (viewBox 1000 x 625, centre 500/312.5, rx 360, ry 235).
   --------------------------------------------------------------------- */
.csv-map {
  --hub-d: 5.5rem;
  margin-top: 2.5rem;
}

.csv-map-stage {
  position: relative;
}

.csv-map-lines {
  display: none;
}

/* Hub */
.csv-map-hub {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  width: var(--hub-d);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--site-link);
  color: var(--site-raised);
  box-shadow:
    0 0 0 0.375rem var(--site-bg),
    0 0 0 0.5rem var(--site-accent);
  text-align: center;
}

.csv-map-hub-title {
  font-size: var(--text-lg);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.csv-map-hub-sub {
  display: none;
  margin-top: 0.5rem;
  color: var(--site-line);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Items: rail layout */
.csv-map-items {
  position: relative;
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
  margin-left: calc(var(--hub-d) / 2);
  padding: 0.5rem 0 0 1.5rem;
}

.csv-map-items::before {
  content: "";
  position: absolute;
  top: -1rem;
  bottom: 1.4rem;
  left: 0;
  border-left: var(--site-rule) solid var(--color-support-1);
}

.csv-map-items li {
  position: relative;
  justify-self: start;
  padding: 0.5rem 0.875rem;
  border: var(--site-hairline) solid var(--site-line);
  border-radius: var(--site-radius-lg);
  background: var(--site-raised);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  hyphens: auto;
}

.csv-map-items li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1.5rem - 1px);
  width: 1.5rem;
  border-top: var(--site-rule) solid var(--color-support-1);
}

.csv-map-items li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1.5rem - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--site-accent);
  transform: translateY(-50%);
}

.csv-map-caption {
  max-width: var(--measure);
  margin-top: 1.5rem;
  color: var(--site-muted);
}

@media (min-width: 37.5em) {
  .csv-map-items li {
    font-size: var(--text-base);
    line-height: var(--leading-base);
  }
}

/* Desktop: radial */
@media (min-width: 60em) {
  .csv-map {
    --hub-d: 12.5rem;
    margin-top: 0.5rem;
  }

  .csv-map-stage {
    aspect-ratio: 1000 / 625;
  }

  .csv-map-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .csv-map-orbit {
    fill: none;
    stroke: var(--site-line);
    stroke-width: 2;
  }

  .csv-map-ring {
    fill: var(--site-surface);
  }

  /* On a tinted band the surface disc would vanish: use the page colour */
  .band .csv-map-ring {
    fill: var(--site-bg);
  }

  .csv-map-spoke {
    stroke: var(--color-support-1);
    stroke-width: 2;
    stroke-linecap: round;
  }

  .csv-map-tick {
    fill: var(--site-accent);
  }

  .csv-map-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
      0 0 0 0.625rem var(--site-bg),
      0 0 0 0.875rem var(--site-accent);
  }

  .csv-map-hub-title {
    font-size: var(--text-2xl);
  }

  .csv-map-hub-sub {
    display: block;
  }

  .csv-map-caption {
    margin: 0 auto;
    text-align: center;
  }

  .csv-map-items {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    padding: 0;
  }

  .csv-map-items::before,
  .csv-map-items li::before,
  .csv-map-items li::after {
    display: none;
  }

  .csv-map-items li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: max-content;
    padding: 0.75rem 1.125rem;
    white-space: nowrap;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  /* Spoke ends, clockwise from 12 o'clock (must match the SVG) */
  .csv-map-items li:nth-child(1) { --x: 50.0%; --y: 12.4%; }
  .csv-map-items li:nth-child(2) { --x: 75.5%; --y: 23.4%; }
  .csv-map-items li:nth-child(3) { --x: 86.0%; --y: 50.0%; }
  .csv-map-items li:nth-child(4) { --x: 75.5%; --y: 76.6%; }
  .csv-map-items li:nth-child(5) { --x: 50.0%; --y: 87.6%; }
  .csv-map-items li:nth-child(6) { --x: 24.5%; --y: 76.6%; }
  .csv-map-items li:nth-child(7) { --x: 14.0%; --y: 50.0%; }
  .csv-map-items li:nth-child(8) { --x: 24.5%; --y: 23.4%; }
}


/* ---------------------------------------------------------------------
   SECTION: how-i-work
   Four principles, then the lifecycle as two numbered lists. The path
   motif stays in the hero: one path per page (brand rule).
   --------------------------------------------------------------------- */
.lifecycle {
  display: grid;
  gap: 2rem 3rem;
  margin-top: 3rem;
  padding: 1.5rem;
  border-radius: var(--site-radius-lg);
  background: var(--site-surface);
}

.lifecycle-phase h3 {
  margin-bottom: 0.5rem;
}

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: flex;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-top: var(--site-hairline) solid var(--site-line);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  min-width: 1.75rem;
  color: var(--site-muted);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 37.5em) {
  .lifecycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2rem;
  }
}


/* ---------------------------------------------------------------------
   SECTION: credentials
   Portrait beside the text from 960 px; a small portrait with name above
   the text on phones. The portrait is a photo, not an illustration.
   Facts sit in one flat white panel, two by two.
   --------------------------------------------------------------------- */
.about {
  display: grid;
  gap: 2rem 4rem;
  margin-top: 2rem;
}

.about-portrait {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.about-portrait img {
  flex: none;
  width: 7rem;
  height: 7rem;
  border-radius: var(--site-radius-lg);
  object-fit: cover;
  background: var(--site-line);
}

.about-portrait figcaption {
  display: grid;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.portrait-name {
  font-weight: 500;
}

.portrait-role {
  color: var(--site-muted);
}

.about-body {
  display: grid;
  gap: 1.75rem;
  max-width: 44rem;
}

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: var(--site-hairline) solid var(--site-line);
  border-radius: var(--site-radius-lg);
  background: var(--site-raised);
}

.facts li {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border-top: var(--site-hairline) solid var(--site-line);
}

.facts li:first-child {
  border-top: 0;
}

.fact-big {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  font-weight: 500;
}

.fact-small {
  color: var(--site-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.about-label {
  margin-bottom: -0.75rem;
  color: var(--site-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 500;
  letter-spacing: var(--site-tracking-label);
  text-transform: uppercase;
}

@media (min-width: 37.5em) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts li:nth-child(2) {
    border-top: 0;
  }

  .facts li:nth-child(even) {
    border-left: var(--site-hairline) solid var(--site-line);
  }
}

@media (min-width: 60em) {
  .about {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: start;
  }

  .about-portrait {
    display: block;
  }

  .about-portrait img {
    width: 17rem;
    height: 17rem;
  }

  .about-portrait figcaption {
    margin-top: 0.875rem;
  }
}


/* ---------------------------------------------------------------------
   SECTION: contact
   One column, top to bottom: heading and one line; the first call in
   three numbered steps (side by side from 960 px, a brand-blue rule on
   top of each); the free line, button and note; then the ways to reach
   me as one quiet row under a rule, so they read as a footer to the
   section rather than a second column competing with the steps.
   --------------------------------------------------------------------- */
.contact-process {
  margin-top: 2.5rem;
}

/* The link row closes the page above the footer: keep the gap to the
   footer short so the row reads as part of the contact section. */
#contact {
  padding-bottom: 2.5rem;
}

.contact-process h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.process-steps {
  counter-reset: step;
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: 1.25rem;
}

.process-steps li {
  counter-increment: step;
  max-width: 34ch;
  padding-top: 1rem;
  border-top: var(--site-rule) solid var(--site-brand);
}

.process-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.375rem;
  color: var(--site-link);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
}

.contact-free {
  flex-basis: 100%;
  font-weight: 500;
}

.contact-cta .small-note {
  max-width: 40ch;
}

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(4rem, 3rem + 3vw, 5.5rem);
  padding-top: 2rem;
  border-top: var(--site-hairline) solid var(--color-support-1);
}

.contact-meta .todo {
  flex-basis: 100%;
}

.small-note,
.place {
  color: var(--site-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
}

.contact-links svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 60em) {
  .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-steps li {
    max-width: none;
  }
}


/* ---------------------------------------------------------------------
   SECTION: footer
   --------------------------------------------------------------------- */
.site-footer {
  padding-block: 2.5rem;
  border-top: var(--site-hairline) solid var(--site-line);
  color: var(--site-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.footer-inner {
  display: grid;
  gap: 1rem;
}

.motto {
  color: var(--site-text);
  font-weight: 500;
}

.footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.footer-links a {
  display: inline-block;
  padding-block: 0.25rem;
}

@media (min-width: 37.5em) {
  .footer-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .motto {
    grid-column: 1 / -1;
  }
}


/* ---------------------------------------------------------------------
   Legal pages and 404
   --------------------------------------------------------------------- */
.page {
  padding-block: var(--section-space);
}

.page h1 {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
}

.page h2 {
  margin-top: 2.5rem;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.page-body {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  margin-top: 1.5rem;
}

.page-body h2 {
  margin-top: 1.5rem;
}

.page-body ul {
  display: grid;
  gap: 0.25rem;
  padding-left: 1.25rem;
}

.page-body strong {
  font-weight: 500;
}

@media (min-width: 37.5em) {
  .page h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
  }
}