/* ==========================================================================
   NH Media Web - Design V5, "The Quiet Professional"
   --------------------------------------------------------------------------
   One typeface (Manrope variable, wght 200-800), one accent (green), a lot of
   whitespace, and hairline separators only where the subject actually changes.
   Motion is limited to a single fade on the hero and the caret in the live
   preview; every other state change is instant.

   V5 changes the ground. Instead of one flat off-white the page opens on a
   soft silver and settles into near-white over the first screen, so the
   header has something to sit against and the content reads as lifted off
   the page rather than printed onto it. Cards, fields, and the preview sit
   on white so they separate from that ground. No sheen, no metal, no bands:
   a single long vertical pass and nothing else.

   No images in CSS, no data: URIs, no inline styles anywhere on the site, so
   the Content-Security-Policy keeps img-src 'self' and style-src 'self'.
   Check marks and list markers are drawn with borders, not glyphs or files.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-var-latin.woff2") format("woff2");
}

:root {
  --silver: #E2E3E1;      /* top edge of the page, the darkest ground anywhere */
  --ground: #FBFBF9;      /* what the page settles into below the first screen */
  --paper: #FFFFFF;       /* cards, fields, the preview: sits above the ground */
  --surface: #F1F2EF;     /* plan cards, image wells, and the preview's chrome */
  --charcoal: #1A1C1E;    /* type */
  --stone: #5F646A;       /* muted type, 4.64:1 on silver, 5.76:1 on ground */
  --hairline: #D2D4CF;    /* rules and borders: 1.23:1 on silver, 1.49:1 on white */
  --green: #0E5A43;       /* the accent, 8.0:1 on ground, 8.2:1 under white */
  --green-deep: #0A4634;  /* hover */
  --green-wash: #DDE9E4;  /* icon chips inside the preview */

  --mark: #B7BCB7;        /* preview: heading marks */
  --mark-soft: #D9DBD6;   /* preview: body-line marks */

  --wrap: 1120px;
  --measure: 68ch;
  --band: clamp(4rem, 8vw, 7.5rem);
  --radius: 4px;
}

/* ---------- Reset ---------- */

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

/* The ground lives on the root element, not on body, so its geometry is the
   root box and the canvas extends the final color on short pages. One long
   vertical pass from silver to near-white, plus a single wide, very soft
   light behind the hero. Nothing repeats and nothing shines. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--ground);
  background-image:
    radial-gradient(1180px 460px at 50% 40px, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, var(--silver) 0, var(--ground) 780px);
  background-repeat: no-repeat;
}

body {
  margin: 0;
  background: transparent;
  color: var(--charcoal);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 420;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.3vw, 3.85rem);
  font-weight: 790;
  letter-spacing: -0.038em;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 770;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

p { max-width: var(--measure); }

.lead {
  font-size: 1.1875rem;
  line-height: 1.62;
  font-weight: 430;
  max-width: 56ch;
}

.muted { color: var(--stone); }

.fine {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--stone);
}

.label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

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

/* ---------- Links and focus ---------- */

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.link {
  color: var(--charcoal);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: var(--stone);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.link:hover {
  color: var(--green);
  text-decoration-color: var(--green);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--green);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-weight: 620;
  text-decoration: none;
}

.skip:focus { left: 0; }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.band { padding: var(--band) 0; }
.band--tight { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.band--rule { border-top: 1px solid var(--hairline); }

.col { max-width: var(--measure); }

.mt-s { margin-top: 0.75rem; }
.mt-m { margin-top: 1.5rem; }
.mt-l { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.section-note { margin-top: 0.9rem; color: var(--stone); max-width: 54ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.8rem 1.35rem;
  font-size: 0.9375rem;
  font-weight: 640;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btn--go {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}

.btn--go:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

.btn--quiet {
  background: transparent;
  border-color: var(--hairline);
  color: var(--charcoal);
}

.btn--quiet:hover { border-color: var(--charcoal); }

.btn--sm { padding: 0.5rem 0.95rem; font-size: 0.875rem; }
.btn--block { display: block; width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: default; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

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

.site-header { border-bottom: 1px solid var(--hairline); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 760;
  font-size: 1.0625rem;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--charcoal);
  white-space: nowrap;
}

.brand__mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.9rem);
}

.nav a {
  font-size: 0.9375rem;
  font-weight: 540;
  text-decoration: none;
  color: var(--stone);
}

.nav a:hover { color: var(--charcoal); }
.nav a[aria-current="page"] { color: var(--charcoal); font-weight: 640; }
/* The nav CTA stays white-on-green even when it is the current page:
   a.btn[aria-current] outranks the charcoal current-page rule above. */
.nav .btn, .nav .btn:hover, .nav a.btn[aria-current="page"] { color: var(--paper); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 620;
  cursor: pointer;
}

@media (max-width: 800px) {
  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    /* .site-header__inner is also .wrap, so an absolutely positioned child
       aligns to its padding box. Restate the gutter so the panel lines up
       with the brand above it. */
    padding: 0 clamp(1.25rem, 5vw, 3rem) 1.25rem;
  }

  .nav.is-open { display: flex; }

  .nav a {
    padding: 0.75rem 0;
    font-size: 1rem;
    border-top: 1px solid var(--hairline);
  }

  /* The header already draws a rule under itself. */
  .nav a:first-child { border-top: 0; }

  .nav .btn {
    margin-top: 0.9rem;
    border-top: 0;
    padding: 0.8rem 1.35rem;
  }
}

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

.hero { padding: clamp(3.25rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }

.hero h1 { max-width: 16ch; }

.hero__sub {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: 1.1875rem;
  line-height: 1.62;
  font-weight: 430;
}

.hero .actions { margin-top: 2rem; }

.hero__in { animation: quiet-rise 0.55s cubic-bezier(0.2, 0.65, 0.25, 1) both; }

@keyframes quiet-rise {
  /* Transform only (2026-08-11 audit): opacity:0 on the hero container hid
     the LCP h1 from the paint metric, costing ~210-340ms on the homepage. */
  from { transform: translateY(10px); }
  to { transform: none; }
}

/* ---------- Signature: type your business name ---------- */

.demo {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.demo__label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

.demo__input {
  display: block;
  width: 100%;
  max-width: 24rem;
  background: var(--paper);
  border: 1px solid var(--charcoal);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -0.015em;
}

.demo__input::placeholder { color: var(--stone); font-weight: 420; }
.demo__input:focus { outline: 2px solid var(--green); outline-offset: 2px; }

/* Appears once a name has been typed; carries the name to the contact form. */
.demo__cta { margin-top: 1rem; }

/* Design law: the hidden attribute always wins, whatever else styles the node. */
[hidden] { display: none !important; }

/* The miniature is a whole small site, not a wireframe: a browser chrome, a
   navigation row, a green hero carrying the visitor's own business name, a
   call-to-action, three service cards, and a footer. Everything except the
   name and the address is an abstract mark, so the preview can never make a
   claim on a business's behalf. */

.mock {
  max-width: 33rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(26, 28, 30, 0.05),
    0 18px 36px -24px rgba(26, 28, 30, 0.45);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.mock__dots { display: flex; gap: 0.3rem; flex: none; }

.mock__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #CDCFCA;
}

.mock__url {
  flex: 1;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.6875rem;
  color: var(--stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__page { background: var(--paper); }

/* Navigation row */

.mock__nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--hairline);
}

.mock__logo {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--green);
}

.mock__word {
  flex: none;
  width: 34px;
  height: 6px;
  border-radius: 3px;
  background: var(--charcoal);
}

.mock__links { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.mock__links i {
  height: 5px;
  border-radius: 3px;
  background: var(--mark);
}

.mock__links i:nth-child(1) { width: 20px; }
.mock__links i:nth-child(2) { width: 27px; }
.mock__links i:nth-child(3) { width: 17px; }

.mock__pill {
  flex: none;
  width: 38px;
  height: 15px;
  border-radius: 999px;
  background: var(--green);
}

/* Hero band */

.mock__hero {
  background: var(--green);
  padding: clamp(1.05rem, 4.5vw, 1.65rem) clamp(0.95rem, 4vw, 1.5rem) clamp(1.15rem, 4.5vw, 1.75rem);
}

.mock__id {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  max-width: none;
}

.mock__name {
  font-size: clamp(1.125rem, 0.78rem + 1.55vw, 1.6rem);
  font-weight: 780;
  letter-spacing: -0.036em;
  line-height: 1.18;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__caret {
  flex: none;
  width: 2px;
  height: 1em;
  background: rgba(255, 255, 255, 0.8);
  animation: caret 1.15s steps(1, end) infinite;
}

@keyframes caret {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

.mock__sub {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.42);
}

.mock__sub--a { width: 64%; max-width: 17rem; margin-top: 0.8rem; }
.mock__sub--b { width: 41%; max-width: 11rem; margin-top: 0.4rem; }

.mock__cta {
  display: inline-block;
  margin-top: 1.05rem;
  background: var(--paper);
  color: var(--green);
  border-radius: 4px;
  padding: 0.36rem 0.85rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Service cards */

.mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  padding: clamp(0.85rem, 3.5vw, 1.15rem) clamp(0.95rem, 4vw, 1.5rem) clamp(0.95rem, 3.5vw, 1.25rem);
}

.mock__card {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper);
  padding: 0.55rem 0.5rem 0.65rem;
}

.mock__dot {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--green-wash);
}

.mock__dot::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.mock__t {
  display: block;
  width: 74%;
  height: 6px;
  margin-top: 0.6rem;
  border-radius: 3px;
  background: var(--mark);
}

.mock__l {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0.33rem;
  border-radius: 2px;
  background: var(--mark-soft);
}

.mock__l--short { width: 58%; }

/* Three identical cards read as a placeholder. Vary the mark widths a little
   and they read as three different services. */
.mock__card:nth-child(2) .mock__t { width: 62%; }
.mock__card:nth-child(3) .mock__t { width: 82%; }
.mock__card:nth-child(2) .mock__l--short { width: 70%; }
.mock__card:nth-child(3) .mock__l--short { width: 48%; }

/* Footer strip */

.mock__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem 0.75rem;
  border-top: 1px solid var(--hairline);
}

.mock__foot span {
  height: 4px;
  border-radius: 2px;
  background: var(--mark-soft);
}

.mock__foot span:first-child { width: 26%; }
.mock__foot span:last-child { width: 15%; margin-left: auto; }

/* ---------- Reasons ---------- */

.reasons {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 4rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 680px) { .reasons { grid-template-columns: 1fr 1fr; } }

.reason p {
  margin-top: 0.4rem;
  max-width: 40ch;
  color: var(--stone);
}

/* ---------- Check lists ---------- */

.checks { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.checks li {
  position: relative;
  padding-left: 1.75rem;
  max-width: 52ch;
}

.checks li + li { margin-top: 0.55rem; }

.checks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.42em;
  height: 0.72em;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.checks--two { display: grid; gap: 0.55rem clamp(2rem, 4vw, 4rem); }

@media (min-width: 720px) {
  .checks--two { grid-template-columns: 1fr 1fr; }
  .checks--two li + li { margin-top: 0; }
}

/* ---------- Work strip (home) ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

@media (min-width: 760px) { .strip { grid-template-columns: repeat(3, 1fr); } }

.strip__item { display: block; text-decoration: none; }

.strip__shot {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 10;
}

.strip__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.strip__item:hover .strip__shot { border-color: var(--charcoal); }

.strip__name {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--stone);
}

.strip__item:hover .strip__name { color: var(--charcoal); }

/* ---------- Plan summary cards (home) ---------- */

.plans {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
}

.plan__name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

.plan__price {
  margin-top: 0.5rem;
  font-size: 2rem;
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan__price small {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--stone);
}

.plan__text {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--stone);
}

/* ---------- Pricing page tiers ---------- */

.tiers { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.tier--featured { border-color: var(--charcoal); }

/* Pricing page only (data-movable-outline): the outline moves on click,
   so the cards invite it: pointer cursor, a mid-grey hover between
   hairline and charcoal, and a soft border transition. */
.tiers[data-movable-outline] .tier { cursor: pointer; transition: border-color 120ms ease; }
.tiers[data-movable-outline] .tier:hover { border-color: var(--stone); }
.tiers[data-movable-outline] .tier--featured,
.tiers[data-movable-outline] .tier--featured:hover { border-color: var(--charcoal); }

.tier__name { font-size: 1.125rem; font-weight: 760; letter-spacing: -0.025em; }

.tier__blurb {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--stone);
}

.tier__price {
  margin-top: 1.15rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.tier__amount { font-size: 2.5rem; font-weight: 790; letter-spacing: -0.05em; line-height: 1; }
.tier__per { font-size: 0.875rem; color: var(--stone); }
.tier__tax { margin-top: 0.45rem; font-size: 0.8125rem; color: var(--stone); }
.tier .btn { margin-top: 1.25rem; }

.tier__more {
  margin-top: 1.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

.tier__list { margin-top: 1rem; }

.tier__list li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.tier__list li + li { margin-top: 0.5rem; }

.tier__list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.48em;
  width: 0.4em;
  height: 0.68em;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ---------- Work page rows ---------- */

.works { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.work-row {
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.work-row + .work-row {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 760px) {
  .work-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.work-row__shot {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.work-row__shot img { width: 100%; height: auto; }

.work-row__kind {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stone);
}

.work-row h2 { margin-top: 0.5rem; font-size: 1.5rem; }
.work-row p { margin-top: 0.6rem; max-width: 46ch; color: var(--stone); }
.work-row__link { display: inline-block; margin-top: 0.9rem; }

/* ---------- Steps: words, never digits ---------- */

.steps { display: grid; gap: 1.85rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* The four-step variant (process page): two by two, then four across. */
@media (min-width: 640px) { .steps--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps--four { grid-template-columns: repeat(4, 1fr); } }

.step__when {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
}

.step h3 { margin-top: 0.5rem; }
.step p { margin-top: 0.45rem; max-width: 42ch; color: var(--stone); }

/* ---------- Prose ---------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15rem; }

.prose h2 { margin-top: clamp(2.25rem, 4vw, 3rem); font-size: 1.375rem; font-weight: 760; }
.prose h3 { margin-top: 1.75rem; font-size: 1.0625rem; }

.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li + li { margin-top: 0.6rem; }

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: var(--stone);
}

.prose a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--stone);
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--green); text-decoration-color: var(--green); }

.meta-line {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--stone);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

/* ---------- FAQ ---------- */

.faq { max-width: var(--measure); margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.faq details { border-top: 1px solid var(--hairline); padding: 1.15rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }

.faq summary {
  cursor: pointer;
  font-weight: 640;
  letter-spacing: -0.012em;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }

.faq__a { margin-top: 0.7rem; }
.faq__a p { color: var(--stone); }
.faq__a p + p { margin-top: 0.7rem; }

/* ---------- Contact form ---------- */

.form-grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); margin-top: clamp(1.75rem, 4vw, 2.75rem); }

@media (min-width: 900px) {
  .form-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

.field + .field,
.field-row + .field,
.field + .field-row,
.field-row + .field-row { margin-top: 1.15rem; }

/* Fields side by side inside a row are grid items: the row's gap spaces them,
   so the stacked-sibling margin above must not also apply. */
.field-row > .field + .field { margin-top: 0; }

.field-row { display: grid; gap: 1.15rem; }

@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.field .hint { font-weight: 440; color: var(--stone); }
.req { color: var(--green); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--stone); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

/* ---------- Branching questions ---------- */

/* A short yes/no or pick-one question whose answer opens the fields that
   apply to it. Used by the contact form's online-presence questions and by
   the feedback page's lane 2 follow-ups. The branch wrapper is toggled with
   the hidden attribute, never an inline style. */

.ask { border: 0; padding: 0; margin: 1.15rem 0 0; }

.ask legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.ask__opts { display: flex; flex-wrap: wrap; gap: 0.55rem 1.75rem; }

/* Long options read better one per line than wrapped across a row. */
.ask__opts--stack { flex-direction: column; gap: 0.6rem; }

.ask__opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  cursor: pointer;
  /* The label is the tap target (2026-08-11 audit): it measured 23px tall,
     1px under the WCAG 2.5.8 floor, on the conversion page's radios. */
  min-height: 28px;
  padding-block: 2px;
}

.ask__opt input {
  flex: none;
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--green);
}

.ask__branch { margin-top: 1.15rem; }

/* A fieldset is not a .field, so the stacked-sibling rule above does not see
   it. These mirror that spacing. */
.field + .ask, .ask + .field, .ask + .ask { margin-top: 1.15rem; }

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

#form-submit { margin-top: 1.5rem; }

.form-status {
  margin-top: 1.15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--stone);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.form-status--ok { border-left-color: var(--green); }
.form-status--err { border-left-color: var(--charcoal); }
.form-status a { color: var(--green); }

.form-note { margin-top: 1rem; font-size: 0.8125rem; color: var(--stone); }

.form-success {
  margin-top: 1.5rem;
  padding: 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--green);
  text-align: center;
}

.form-success:focus { outline: none; }

.form-success__mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem; /* the global reset makes svg block-level, so it must center itself */
}

.form-success__mark circle {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
}

.form-success__mark path {
  fill: none;
  stroke: var(--green);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-success h2 { margin-bottom: 0.5rem; }

.form-success p {
  max-width: 42ch;
  margin: 0 auto;
}

.side { max-width: 40ch; }
.side > * + * { margin-top: 1.85rem; }
.side h2 { font-size: 1.0625rem; font-weight: 720; letter-spacing: -0.015em; }
.side p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--stone); }

.email-line { margin-top: 0.5rem; font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.025em; }
.email-line a { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.email-line a:hover { color: var(--green-deep); }

/* ---------- Callout ---------- */

.callout {
  max-width: var(--measure);
  border-left: 2px solid var(--green);
  padding: 0.1rem 0 0.1rem 1.25rem;
}

.callout p { color: var(--stone); }
.callout h3 + p { margin-top: 0.4rem; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.footer__blurb { margin-top: 0.5rem; max-width: 34ch; font-size: 0.9375rem; color: var(--stone); }

.footer__mail { font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.025em; }
.footer__mail a { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.footer__mail a:hover { color: var(--green-deep); }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.footer__links a { font-size: 0.875rem; font-weight: 520; color: var(--stone); text-decoration: none; }
.footer__links a:hover { color: var(--charcoal); }

.footer__base { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--stone); }

/* ---------- Breadcrumb ---------- */

.crumbs { margin-bottom: 1.25rem; font-size: 0.8125rem; color: var(--stone); }
.crumbs a { color: var(--stone); text-decoration: none; }
.crumbs a:hover { color: var(--charcoal); }
.crumbs span { padding: 0 0.4rem; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__in { animation: none; }
  .mock__caret { animation: none; opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Print ---------- */

@media print {
  .site-header, .site-footer, .actions, .nav-toggle, .demo { display: none; }
  html { background: #fff; background-image: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}

/* /review: the stop stance folds the round form away without touching any
   element's own hidden attribute (up-fallback manages its own). */
.stance-hidden { display: none !important; }