/* ═══════════════════════════════════════════════════════════════════════════
   Aerial Insights: Modernist design system
   Tokens and component classes carried over from the design system bundle,
   plus the theme, hover and responsive rules the design expressed through
   the prototype's style-hover attributes.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps, generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation, derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Page shell */
  --page-max: 1360px;
  --page-pad: clamp(20px, 4vw, 56px);
}

/* Dark ground. Applied by the theme switch in the header. */
:root[data-theme="dark"] {
  --color-bg: #131010;
  --color-surface: #1c1817;
  --color-text: #f3f2f2;
  --color-accent: #ff563c;
  --color-accent-600: #ff7a66;
  --color-divider: rgba(243, 242, 242, 0.32);
}

/* ══ base ══════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600, #dd2b0f); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
summary::-webkit-details-marker { display: none; }

.grayscale { filter: grayscale(1) contrast(1.08); }

.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;
}

.skip-link {
  position: absolute; left: var(--page-pad); top: -60px; z-index: 200;
  background: var(--color-accent); color: #fff; padding: 10px 16px;
  font: 600 13px/1 var(--font-heading); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* rules */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600, #dd2b0f); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }
.btn-invert { background: #fff; color: var(--color-accent); }
.btn-invert:hover { background: var(--color-accent-100); color: var(--color-accent); }

/* forms */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* tags */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ══ page shell ════════════════════════════════════════════════════════ */

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

.page[hidden] { display: none; }

/* ══ header ════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.header-bar {
  height: 74px; display: flex; align-items: center;
  gap: clamp(16px, 4vw, 48px);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 26px; width: auto; }
.site-footer .brand img { height: 24px; margin-bottom: 20px; }

/* Theme-aware logo: both marks ship, CSS picks one. No flash on toggle. */
.logo-white { display: none; }
:root[data-theme="dark"] .logo-ink { display: none; }
:root[data-theme="dark"] .logo-white { display: block; }

.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-link {
  font: 600 13px/1 var(--font-heading); letter-spacing: .02em;
  text-decoration: none; color: var(--color-text);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--color-text); border-bottom-color: var(--color-accent); }
.nav-link[aria-current="page"] { border-bottom-color: var(--color-accent); }

.theme-btn {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text);
  font: 600 11px/1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; flex: none;
}
.theme-btn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.theme-btn .swatch { width: 9px; height: 9px; background: var(--color-accent); display: block; }

.header-cta { flex: none; }

.menu-btn {
  display: none; flex: none;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; content: '';
}
.menu-btn .bars { position: relative; }
.menu-btn .bars::before { position: absolute; top: -6px; }
.menu-btn .bars::after { position: absolute; top: 6px; }

/* ══ hero / band field canvas ══════════════════════════════════════════ */

.field-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.field-scrim { position: absolute; inset: 0; pointer-events: none; }

/* ══ hover states the prototype declared with style-hover ══════════════ */

/* ══ service cards ═════════════════════════════════════════════════════
   Media fills the card, copy sits over a scrim at the foot; the treatment
   from the previous site, rebuilt in the modernist hard-edged language. */

/* Explicit steps rather than auto-fit: four cards want 4 / 2 / 1 across, and
   auto-fit lands on three at tablet width, orphaning the last card. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--color-divider);
  border: 2px solid var(--color-divider);
}
@media (max-width: 1000px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .service-grid { grid-template-columns: 1fr; }
}

.service-card {
  position: relative;
  aspect-ratio: 3 / 4;
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  isolation: isolate;
}

.service-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}
.service-card:not(.is-drawn):hover .service-media { transform: scale(1.04); }

/* Instrument marks drawn over the photographs: above the image, below the
   scrim, so the copy still wins at the foot of the card. */
.service-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.service-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 8, 8, 0.88) 0%,
    rgba(10, 8, 8, 0.62) 32%,
    rgba(10, 8, 8, 0.12) 62%,
    rgba(10, 8, 8, 0) 82%);
}
/* The generated diagrams are line work on the page ground, so they need the
   scrim only where the type sits, not washed over the whole panel. */
.service-card.is-drawn .service-scrim {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 88%, transparent) 30%,
    color-mix(in srgb, var(--color-bg) 30%, transparent) 55%,
    transparent 72%);
}

.service-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 22px 26px;
  color: #fff;
}
.service-card.is-drawn .service-body { color: var(--color-text); }

.service-num {
  display: block;
  font: 600 12px/1 var(--font-heading);
  letter-spacing: .12em;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.service-card.is-drawn .service-num { color: var(--color-accent); }

.service-body h3 {
  font: 800 21px/1.15 var(--font-heading);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: inherit;
}
.service-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
  opacity: .85;
}

.link-ink { color: var(--color-text); text-decoration: none; }
.link-ink:hover { color: var(--color-accent); }

.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--color-accent); }

/* ══ stage viewer ══════════════════════════════════════════════════════
   Three pixel-registered captures of one site (satellite, orthomosaic,
   elevation model) stacked and revealed by a wipe. Because the frames line
   up exactly, wiping reads as peeling a layer off the same place rather than
   cutting between pictures. */

.stages {
  border: 2px solid var(--color-divider);
  background: var(--color-surface);
}

.stage-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3507 / 2480;   /* native, so the layers stay registered */
  overflow: hidden;
}

.stage-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Revealed left to right. The base layer is never clipped. */
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms cubic-bezier(.65, .02, .28, 1);
}
.stage-layer[data-hidden="true"] { clip-path: inset(0 100% 0 0); }

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

/* The leading edge of the wipe, matched to the hero's survey sweep. */
.stage-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--color-accent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  left: 0;
}
.stages.is-wiping .stage-edge {
  opacity: .9;
  transition: left 900ms cubic-bezier(.65, .02, .28, 1), opacity 200ms ease;
}

/* Controls */
.stage-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--color-divider);
  border-top: 2px solid var(--color-divider);
}
.stage-step {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 12px 14px 14px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  display: block;
  min-width: 0;
  transition: background-color .18s ease;
}
.stage-step:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.stage-step .n {
  display: block;
  font: 600 11px/1 var(--font-heading);
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  margin-bottom: 7px;
}
.stage-step .t {
  display: block;
  font: 600 12.5px/1.3 var(--font-heading);
  letter-spacing: -0.01em;
}
.stage-step[aria-current="true"] { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.stage-step[aria-current="true"] .n { color: var(--color-accent); }
.stage-step:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

@media (max-width: 460px) {
  .stage-steps { grid-template-columns: 1fr; }
  .stage-step { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .stage-step .n { margin-bottom: 0; }
}

/* ══ legal pages ═══════════════════════════════════════════════════════
   Long-form prose, so it is styled here rather than inline per element like
   the marketing sections. Measure capped for readability. */

/* .legal sits on a .wrap. Capping the wrap itself would either centre the
   column (margin:0 auto) or pin it to the viewport edge, and either way the
   prose stops lining up with the page heading above it. Leave the wrap alone
   and cap the measure on the children instead, so the left edge matches every
   other section on the site. */
.legal > * { max-width: 74ch; }
.legal > p:first-of-type { font-size: 17px; }
.legal h2 {
  font: 800 clamp(19px, 2.1vw, 26px)/1.15 var(--font-heading);
  letter-spacing: -0.02em;
  margin: 46px 0 12px;
  padding-top: 22px;
  border-top: 2px solid var(--color-divider);
}
.legal h2:first-of-type { margin-top: 34px; }
.legal h3 {
  font: 800 15.5px/1.35 var(--font-heading);
  margin: 26px 0 6px;
}
.legal p, .legal li {
  font-size: 15.5px;
  line-height: 1.68;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.legal p { margin: 0 0 14px; }
.legal ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal li { display: flex; gap: 11px; margin-bottom: 9px; }
.legal li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  background: var(--color-accent);
}
.legal strong { color: var(--color-text); font-weight: 600; }
/* The eyebrow sits in the page header, outside .legal, so this cannot be
   scoped to .legal the way the note below is. */
.legal-updated {
  font: 600 11px/1 var(--font-heading);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.legal .legal-note {
  border-left: 2px solid var(--color-accent);
  padding: 2px 0 2px 16px;
  margin: 0 0 18px;
  font-size: 14.5px;
}

/* ══ video embed ═══════════════════════════════════════════════════════ */

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  overflow: hidden;
}
/* A plain video element: no player UI, nothing to hide. The poster is the
   clip's own first frame, so there is no visible swap when playback starts. */
.about-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--color-surface);
}
/* Only shown if autoplay is refused or motion is reduced, where the viewer
   needs a way to start it themselves. */
.about-video[controls] { object-fit: contain; background: #000; }

/* ══ FAQ ═══════════════════════════════════════════════════════════════ */

.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; font: 600 16px/1.4 var(--font-heading);
}
.faq-item > summary .mark { color: var(--color-accent); flex: none; }
.faq-item > summary:hover { color: var(--color-accent); }
.faq-item > p {
  margin: 0 0 22px; padding-left: 32px;
  font-size: 14.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* ══ embed modal ═══════════════════════════════════════════════════════ */

.embed-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, #000 72%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.embed-backdrop[hidden] { display: none; }
.embed-frame {
  position: relative; width: 100%; max-width: 1280px;
  height: min(80vh, 820px);
  border: 2px solid var(--color-accent); background: var(--color-bg);
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-close {
  position: absolute; top: -2px; right: -2px; width: 44px; height: 44px;
  background: var(--color-accent); color: #fff; border: 0;
  font: 800 18px/1 var(--font-heading); cursor: pointer;
}

/* ══ form status ═══════════════════════════════════════════════════════ */

.form-status { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; }
.form-status[hidden] { display: none; }
.form-status.is-ok { color: var(--color-accent); }
.form-status.is-error { color: var(--color-accent); }

/* ══ responsive ════════════════════════════════════════════════════════ */

@media (max-width: 940px) {
  .header-bar { gap: 16px; }
  .main-nav {
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
    padding: 8px var(--page-pad) 20px;
  }
  .main-nav[hidden] { display: none; }
  .nav-link {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: 15px;
  }
  .nav-link:hover, .nav-link[aria-current="page"] { border-bottom-color: var(--color-accent); }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .header-cta { display: none; }
}

@media (max-width: 560px) {
  .theme-btn { padding: 0 9px; }
  .theme-btn .label { display: none; }
}

/* The wordmark is ~7.8:1, so it is the widest thing in the bar on small
   phones. Step it down rather than letting the header scroll. */
@media (max-width: 400px) {
  .header-bar { gap: 10px; }
  .brand img { height: 20px; }
}

/* ══ mobile structure ══════════════════════════════════════════════════
   Two things that only read correctly as desktop columns. Both are inline
   styles in the markup (matching the design file), so overriding them here
   needs !important. */

/* The three hero steps carry padding and dividers for a three-across layout.
   They only fit three-across above ~845px; below that the grid wraps to two
   columns or one, and the asymmetric padding leaves the text on staggered
   edges with border-rights dangling. Force a single column and line them up.
   Note this breakpoint is deliberately wider than the services one below. */
@media (max-width: 860px) {
  .hero-steps { grid-template-columns: 1fr !important; }
  .hero-steps > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: 0 !important;
  }
  .hero-steps > div + div {
    border-top: 1px solid var(--color-divider);
    padding-top: 20px !important;
  }
}

@media (max-width: 640px) {
  /* Four 3:4 tiles stacked came to 1775px, a quarter of the whole page, and
     the reason the section read as clumped. On a narrow screen they work far
     better as a scannable list: thumbnail left, copy right, at roughly a
     quarter of the height. The copy moves out from over the image, so the
     scrim is not needed and the text takes the normal ink colour. */
  /* Equal rows, or the differing copy lengths leave the thumbnails ragged. */
  .service-grid { grid-auto-rows: 1fr; }
  .service-card {
    aspect-ratio: auto !important;
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: stretch;
    background: var(--color-bg);
  }
  .service-media {
    position: relative !important;
    inset: auto !important;
    height: 100%;
    min-height: 112px;
  }
  .service-card:not(.is-drawn):hover .service-media { transform: none; }
  .service-scrim { display: none; }
  /* The viewfinder overlay is positioned against the card, which in this
     layout is the whole row, so its crop marks would rule lines straight
     across the copy. It is decoration, and unreadable at 112px anyway. */
  .service-overlay { display: none; }
  .service-body {
    position: relative !important;
    padding: 14px 16px 16px;
    color: var(--color-text) !important;
    align-self: center;
  }
  .service-body h3 { font-size: 17px; margin-bottom: 6px; }
  .service-body p { font-size: 13px; line-height: 1.45; opacity: .75; }
  .service-num { margin-bottom: 6px; }

  /* The phone and email are the two things a visitor on a phone most wants to
     tap, and the type's own line box left them 20-24px high. Pad them out to a
     comfortable target without changing how they look. */
  #page-contact a[href^="tel:"],
  #page-contact a[href^="mailto:"] {
    display: inline-block;
    padding-block: 11px;
  }

  /* Stage labels sat at 36px; 44 is the usual minimum for a reliable tap. */
  .stage-step { min-height: 44px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .site-header, .embed-backdrop, .field-canvas { display: none !important; }
}