/* ============================================================
   Get Shielded USA — shared stylesheet
   Source of truth: design/01-tokens.md
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --ink:    #0D1F16;
  --forest: #053621;
  --lime:   #94DF00;
  --sage:   #8AAA96;
  --mint:   #E8F5EE;
  --white:  #FFFFFF;

  --text:        var(--ink);
  /* .74 keeps a readable step below --text (full Ink) and above --text-faint.
     At .64 it sat 3% from faint and the two tiers were indistinguishable. */
  --text-soft:   rgba(13,31,22,.74);
  /* .61 is the lowest alpha that clears WCAG AA 4.5:1 on BOTH light grounds
     (4.69:1 on White, 4.50:1 on Mint). At .46 every quiet label on the site
     measured 2.89-2.96:1 and failed. Still visibly lighter than --text-soft. */
  --text-faint:  rgba(13,31,22,.61);
  --hairline:    rgba(13,31,22,.10);
  --hairline-inv:rgba(255,255,255,.14);
  --lime-hover:  #A6EE18;

  --danger:         #C2341D;
  --danger-on-dark: #FF8A70;
  --success:        var(--forest);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --r-ctl:   12px;
  --r-card:  16px;
  --r-media: 20px;

  --shadow:      0 1px 2px rgba(13,31,22,.04), 0 8px 24px rgba(13,31,22,.06);
  --shadow-lift: 0 2px 4px rgba(13,31,22,.06), 0 18px 40px rgba(13,31,22,.12);
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
}

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

html {
  background: var(--ink); /* overscroll reveals Ink, not white */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }

h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }

:where(a, button) { -webkit-tap-highlight-color: transparent; }
:where(a, button):active { opacity: .85; }

/* ---------- Focus — Ink ring on light, Lime on dark ---------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.band-ink :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline-color: var(--lime);
}
/* Styleguide state demo only — mirrors the rules above */
.is-focus { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.band-ink .is-focus { outline-color: var(--lime); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--white);
  border-block-end: 1px solid var(--hairline);
  padding-block: max(14px, env(safe-area-inset-top));
}
.header-nav { display: none; }
@media (min-width: 1024px) {
  .header-nav { display: block; }
  .header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--s4);
  }
  .header-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .header-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  }
}
/* Current page — the nav never said where you were. Six sibling service pages
   make that a real orientation problem, so the match is marked in both menus. */
.header-nav [aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-overlay [aria-current] { color: var(--lime); }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.site-logo { display: inline-flex; align-items: center; min-block-size: 44px; }
.site-logo img { block-size: 28px; inline-size: auto; }
.header-actions { display: flex; align-items: center; gap: var(--s2); }
@media (min-width: 1024px) { .header-actions { gap: var(--s3); } }
.site-header .header-cta { display: none; }
@media (min-width: 768px) {
  .site-header .header-cta { display: inline-flex; }
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover { border-color: var(--ink); }
}

/* ---------- Menu overlay ---------- */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink);
  color: var(--white);
  overflow-y: auto;
  padding-block: calc(76px + env(safe-area-inset-top)) var(--s6);
}
.nav-open .nav-overlay { display: block; }
.nav-open body { overflow: hidden; }
.nav-open .site-header { position: relative; z-index: 50; background: var(--ink); border-block-end-color: var(--hairline-inv); }
.nav-open .site-header .site-logo img { content: url('../../brand/gs-logo-light.svg'); }
.nav-open .nav-toggle { color: var(--white); border-color: var(--hairline-inv); }
.nav-overlay .menu-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-block-start: var(--s5);
}
.nav-overlay ul { list-style: none; margin: 0; padding: 0; margin-block-start: var(--s1); }
.nav-overlay ul a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
  letter-spacing: -.01em;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav-overlay ul a:hover { color: var(--lime); }
}
.nav-overlay .menu-cta { margin-block-start: var(--s5); }
@media (min-width: 768px) {
  /* two columns here, not three: at 768 a third column is ~210px and every
     service name breaks across two lines */
  .nav-overlay .menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  /* the header CTA stays visible behind the overlay, so the menu's copy of it
     would be the same Lime button twice on one screen */
  .nav-overlay .menu-cta { display: none; }
  /* a full-screen menu should fill the screen: centre the columns instead of
     sitting in the top quarter like a stuck dropdown.
     Only the OPEN state gets a display value — setting it on .nav-overlay here
     would beat the `display: none` default and show the menu on every page. */
  .nav-open .nav-overlay { display: flex; align-items: center; }
  .nav-overlay > .container { inline-size: 100%; }
  .nav-overlay .menu-head { margin-block-start: 0; }
  .nav-overlay .menu-grid > * + * { margin-block-start: 0; }
}
@media (min-width: 1024px) {
  /* three columns and bigger type only once the columns can hold a service
     name on one line */
  .nav-overlay .menu-grid { grid-template-columns: 1fr 1fr 1fr; }
  .nav-overlay ul a { font-size: clamp(1.375rem, .9rem + 1.2vw, 1.875rem); }
  .nav-overlay .menu-head { margin-block-start: var(--s4); }
}

/* ---------- Lime highlight behind Ink text ---------- */
.mark-lime {
  /* marker stroke under the lower half of the glyphs — a solid block clips
     descenders when the phrase wraps at display leading */
  background: linear-gradient(to bottom, transparent 38%, var(--lime) 38%, var(--lime) 96%, transparent 96%);
  color: var(--ink);
  padding-inline: .08em;
  margin-inline: -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  mix-blend-mode: multiply;
}

/* ---------- Hero shared ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px); }
.hero .lead { margin-block-start: var(--s3); }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block-start: var(--s4);
}
/* Homepage hero — the chosen split composition (Stage 3, variant B) */
.hero-split .hero-work { margin-block-start: var(--s5); }
.hero-split .hero-work .shot {
  /* the page's one deliberate grid break: the work bleeds off the right edge */
  margin-inline-end: calc(-1 * max(24px, env(safe-area-inset-right)));
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.hero-split .hero-work .caption { margin-block-start: 10px; }
.hero-split .trust-line { border-block-start: 0; padding-block-start: 0; margin-block-start: var(--s3); }
@media (min-width: 1024px) {
  .hero-split { padding-block: var(--s7); }
  .hero-split .hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s6);
    align-items: center;
  }
  .hero-split .hero-work { margin-block-start: 0; }
  .hero-split .hero-work .shot {
    margin-inline-end: calc((min(100vw, 1280px) - 100vw) / 2 - 24px);
  }
}

/* Live-work chip — shared, survives hero experiments */
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime);
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
}
.live-chip::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--forest);
}

/* Homepage hero — the claim, then a shelf of real client sites rising from the bottom edge */
.hero-shelf { padding-block: clamp(56px, 7vw, 104px) 0; }
.hero-shelf h1 { margin-block-start: var(--s3); max-inline-size: 21ch; text-wrap: pretty; }
.hero-shelf .hero-foot { margin-block-start: clamp(28px, 3.5vw, 48px); }
.hero-shelf .hero-foot .lead { margin-block-start: 0; max-inline-size: 46ch; }
.hero-shelf .hero-ctas { margin-block-start: var(--s3); }
@media (min-width: 1024px) {
  .hero-shelf .hero-foot {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s6);
    align-items: center;
  }
  .hero-shelf .hero-ctas { margin-block-start: 0; justify-self: end; }
}
.hero-shelf .shelf-head {
  margin-block-start: clamp(40px, 5vw, 72px);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  font-size: 15px;
  color: var(--text-faint);
  max-inline-size: none;
}
.hero-shelf .shelf-head .live-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}
.hero-shelf .shelf-head .live-dot::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--lime);
}
/* the shelf itself — full-bleed, tiles cropped by the section edge */
.shelf {
  margin-block-start: clamp(32px, 4vw, 56px);
  padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}
.shelf ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
}
.shelf li { min-inline-size: 0; }
.shelf .tile {
  border: 1px solid var(--hairline);
  border-start-start-radius: var(--r-media);
  border-start-end-radius: var(--r-media);
  border-block-end: 0;
  overflow: hidden;
  background: var(--mint);
}
.shelf .tile img {
  inline-size: 100%;
  block-size: clamp(280px, 42vw, 340px);
  object-fit: cover;
  object-position: top;
  display: block;
}
@media (max-width: 767px) {
  .shelf li + li { display: none; }
  .shelf .tile img { block-size: 300px; }
}
@media (min-width: 768px) {
  .shelf ul { grid-template-columns: repeat(3, 1fr); }
  .shelf li:nth-child(n+4) { display: none; }
}
@media (min-width: 1280px) {
  .shelf ul { grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
  .shelf li:nth-child(n+4) { display: block; }
  .shelf .tile img { block-size: 300px; }
}

/* The differentiator — a two-beat statement, then three columns on vertical rules */
.diff { padding-block: clamp(64px, 9vw, 120px); }
.diff .statement { margin-block-start: var(--s3); max-inline-size: 30ch; }
.diff .statement .setup {
  display: block;
  font-size: clamp(1.875rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--white);
}
.diff .statement .punch {
  display: block;
  margin-block-start: var(--s2);
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--lime);
}
.diff .statement-note {
  margin-block-start: var(--s4);
  max-inline-size: 58ch;
}
@media (min-width: 1024px) {
  .diff .statement-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s6);
    align-items: end;
  }
  .diff .statement-note { margin-block-start: 0; }
}
.diff .pillars {
  margin-block-start: clamp(48px, 6vw, 88px);
  border-block-start: 1px solid var(--hairline-inv);
  display: grid;
  gap: 0;
}
.diff .pillar { padding-block: var(--s4); border-block-end: 1px solid var(--hairline-inv); }
.diff .pillar h3 { color: var(--white); }
.diff .pillar p { margin-block-start: var(--s1); max-inline-size: 42ch; }
@media (min-width: 768px) {
  .diff .pillars { grid-template-columns: repeat(3, 1fr); border-block-end: 1px solid var(--hairline-inv); }
  .diff .pillar { padding-block: var(--s5); padding-inline-end: var(--s4); border-block-end: 0; }
  .diff .pillar + .pillar {
    border-inline-start: 1px solid var(--hairline-inv);
    padding-inline-start: var(--s4);
  }
}

/* What we build — an index of routes, not a grid of cards */
.routes { margin-block-start: clamp(32px, 4vw, 56px); border-block-start: 1px solid var(--hairline); }
.route {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s1) var(--s3);
  padding-block: var(--s4);
  padding-inline: 0;
  border-block-end: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms var(--ease), padding-inline 160ms var(--ease);
}
.route .route-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}
.route .route-desc {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  max-inline-size: 62ch;
}
.route .route-price,
.route .route-to {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.route .route-price::after,
.route .route-to::after {
  content: "\2192";
  font-size: 18px;
  color: var(--text-faint);
  transition: translate 160ms var(--ease), color 120ms var(--ease);
}
/* compact routes — name and destination only. A state page lists the catalogue
   without repeating the hub's descriptions word for word on another URL. */
@media (min-width: 1024px) {
  .routes-compact .route { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 1024px) {
  .route {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
    align-items: baseline;
    gap: var(--s5);
    padding-block: var(--s5);
  }
  .route .route-desc { grid-column: auto; max-inline-size: 48ch; }
  .route .route-price,
  .route .route-to { justify-content: space-between; inline-size: 100%; }
}
@media (hover: hover) and (pointer: fine) {
  .route:hover { background: var(--mint); padding-inline: var(--s3); }
  /* a Mint fill is invisible on a Mint band */
  .band-mint .route:hover { background: var(--white); }
  .route:hover .route-price::after,
  .route:hover .route-to::after { translate: 4px 0; color: var(--ink); }
}

/* Portfolio wall — one featured piece, then a supporting pair. Desktop views only. */
.wall { margin-block-start: clamp(32px, 4vw, 56px); }
.wall > .piece + .piece, .wall > .pair { margin-block-start: clamp(40px, 5vw, 72px); }
.piece .shot { background: var(--mint); }
.piece .shot img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}
.piece.is-featured .shot img { aspect-ratio: 16 / 8; }

@media (max-width: 767px) {
  /* a desktop capture squeezed to phone width is unreadable — crop into it instead.
     Must sit AFTER the base rules above: a media query adds no specificity. */
  .piece .shot,
  .piece.is-featured .shot { aspect-ratio: 5 / 4; overflow: hidden; }
  .piece .shot img,
  .piece.is-featured .shot img {
    inline-size: 190%;
    max-inline-size: none;
    block-size: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: left top;
  }
}
.piece .meta {
  margin-block-start: var(--s2);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
}
.piece .meta .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  letter-spacing: -.012em;
  color: var(--ink);
}
.piece .meta .cat { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.piece .meta .visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.piece .meta .visit::after { content: "\2192"; transition: translate 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .piece .meta .visit:hover::after { translate: 4px 0; }
}
.piece .line { margin-block-start: var(--s1); font-size: 15px; color: var(--text-soft); max-inline-size: 62ch; }
.wall .pair { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .wall .pair { grid-template-columns: 1fr 1fr; align-items: start; } }
.wall-foot { margin-block-start: clamp(40px, 5vw, 64px); }

/* Pricing preview — the numbers are the design */
.tiers {
  margin-block-start: clamp(40px, 5vw, 64px);
  border-block-start: 1px solid var(--hairline);
  display: grid;
}
.tier { padding-block: var(--s4); border-block-end: 1px solid var(--hairline); }
.tier .tier-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tier .tier-from { margin-block-start: var(--s3); font-size: 13px; font-weight: 500; color: var(--text-faint); }
.tier .tier-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-block-start: 2px;
}
.tier .tier-spec {
  margin-block-start: var(--s2);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.tier ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--s3);
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
  max-inline-size: 36ch;
}
.tier .tier-flag {
  display: block;
  margin-block-end: var(--s2);
  padding-block-start: var(--s1);
  border-block-start: 3px solid var(--lime);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  max-inline-size: 22ch;
}
/* the slot is reserved in every column so the three prices share a baseline */
@media (min-width: 768px) { .tier .tier-flag { min-block-size: 45px; } }
.tier .tier-flag.is-empty { border-block-start-color: transparent; color: transparent; }
@media (max-width: 767px) { .tier .tier-flag.is-empty { display: none; } }
@media (min-width: 768px) {
  .tiers { grid-template-columns: repeat(3, 1fr); border-block-end: 1px solid var(--hairline); }
  .tiers.tiers-2 { grid-template-columns: 1fr 1fr; }
  .tiers.tiers-4 { grid-template-columns: 1fr 1fr; }
  .tier { padding-block: var(--s5); padding-inline-end: var(--s4); border-block-end: 0; }
  .tier + .tier { border-inline-start: 1px solid var(--hairline); padding-inline-start: var(--s4); }
}
.tiers-foot {
  margin-block-start: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.tiers-foot p { color: var(--text-soft); max-inline-size: 52ch; }

/* Care plans — a contained Forest panel with an accumulating ladder */
.care-panel {
  background: var(--forest);
  color: var(--sage);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 64px);
}
.care-panel .eyebrow { color: var(--sage); }
.care-panel h2 { color: var(--white); max-inline-size: 22ch; }
.care-panel .lead { color: var(--sage); margin-block-start: var(--s3); }
@media (min-width: 1024px) {
  .care-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s6); align-items: end; }
  .care-head .lead { margin-block-start: 0; }
}
.ladder { margin-block-start: clamp(32px, 4vw, 56px); }
.rung {
  display: grid;
  gap: 4px var(--s4);
  padding-block: var(--s3);
  border-block-start: 1px solid var(--hairline-inv);
}
.rung .rung-name {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}
.rung .rung-name b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--white);
}
.rung .rung-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--lime);
}
.rung .rung-price span { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--sage); }
.rung .rung-gets { font-size: 15px; line-height: 1.55; color: var(--sage); max-inline-size: 62ch; }
.rung .rung-gets .carry { color: var(--white); font-weight: 600; }
@media (min-width: 768px) {
  .rung { grid-template-columns: 220px 1fr; align-items: baseline; }
  /* names left, prices on a shared right edge — a price column, not a ragged line */
  .rung .rung-name { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); padding-inline-end: var(--s4); }
  .rung .rung-price { justify-self: end; }
}
.care-foot {
  margin-block-start: var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline-inv);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 15px;
  color: var(--sage);
  max-inline-size: none;
}
.care-foot .btn-ghost { color: var(--white); border-color: var(--hairline-inv); }
@media (hover: hover) and (pointer: fine) {
  .care-foot .btn-ghost:hover { border-color: var(--white); }
}

/* Video reviews — a wall of client films. Built for four to six. */
.reviews-head { display: grid; gap: var(--s3); }
@media (min-width: 1024px) {
  .reviews-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: end; }
  .reviews-head .reviews-meta { justify-self: end; text-align: end; }
}
.reviews-meta { font-size: 15px; color: var(--text-soft); max-inline-size: none; }
.reviews-meta b { color: var(--ink); font-weight: 600; }

.film-wall {
  margin-block-start: clamp(32px, 4vw, 56px);
  display: grid;
  gap: clamp(24px, 3vw, 40px) var(--s3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .film-wall { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .film-wall { grid-template-columns: repeat(3, 1fr); } }

.film .frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-media);
  display: grid;
  place-content: center;
  overflow: hidden;
}
.film .play {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  display: grid;
  place-content: center;
  transition: scale 160ms var(--ease);
}
.film .play::before {
  content: "";
  display: block;
  border-block: 8px solid transparent;
  border-inline-start: 13px solid var(--lime);
  translate: 2px 0;
}
@media (hover: hover) and (pointer: fine) {
  .film a.frame:hover .play, .film button.frame:hover .play { scale: 1.08; }
}
.film .who { margin-block-start: var(--s2); }
.film .who .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.film .who .where { margin-block-start: 2px; font-size: 15px; color: var(--text-soft); }

/* an empty slot — visibly not a client, never a fake name */
.film.is-empty .frame {
  background: var(--mint);
  border: 1px dashed var(--hairline);
}
.film.is-empty .frame span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  text-align: center;
  padding-inline: var(--s3);
}
.film.is-empty { align-self: start; }

/* How it works — a two-phase track. The rule shows where money enters. */
.track { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .track { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.phase-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: var(--s2);
}
.phase .steps {
  border-block-start: 2px solid var(--hairline);
  padding-block-start: var(--s4);
  display: grid;
  gap: var(--s4);
}
@media (min-width: 768px) { .phase .steps { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.phase-free .steps { border-block-start-color: var(--lime); }
.phase-build .steps { border-block-start-color: var(--ink); }
.phase-free .phase-label { color: var(--ink); }
.step-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--text-faint);
}
.step-item h3 { margin-block-start: var(--s2); }
.step-item p { margin-block-start: var(--s1); font-size: 15px; color: var(--text-soft); max-inline-size: 38ch; }

/* Founder + proof — one continuous block, the portrait spanning both halves */
.founder-block { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1024px) {
  .founder-block { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: start; }
}
.founder-portrait img {
  inline-size: min(220px, 55%);
  aspect-ratio: 1;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .founder-portrait img { inline-size: 100%; max-inline-size: 320px; }
}
.founder-portrait .who { margin-block-start: var(--s3); }
.founder-portrait .who .name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.founder-portrait .who .role { margin-block-start: 4px; font-size: 15px; color: var(--text-soft); max-inline-size: 28ch; }
.band-ink .founder-portrait .who .name { color: var(--white); }
.band-ink .founder-portrait .who .role { color: var(--sage); }
.founder-story > * + * { margin-block-start: var(--s3); }
.founder-story .lead { max-inline-size: 46ch; }
.founder-story p { max-inline-size: 64ch; }
.founder-words .quote { max-inline-size: 30ch; }
.founder-evidence {
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--hairline-inv);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s4);
}
.founder-evidence .figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--lime);
}
.founder-evidence .label { margin-block-start: 8px; font-size: 15px; color: var(--sage); max-inline-size: 24ch; }

/* Free offers — the most repeated band on the site, so: compact, no dead rows.
   Heading anchors the left, the two offers pair tight on the right. */
.band-offers { padding-block: clamp(48px, 6vw, 88px); }
.offers-grid { display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) {
  .offers-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
}
.offers-grid .offers-head h2 { max-inline-size: 16ch; }
.offers-pair { display: grid; gap: clamp(32px, 4vw, 40px); }
@media (min-width: 768px) {
  .offers-pair { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .offers-pair .offer + .offer { border-inline-start: 1px solid var(--hairline); padding-inline-start: var(--s5); }
}
.offer .offer-if {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--hairline);
}
.offer h3 { margin-block-start: var(--s3); max-inline-size: 18ch; }
.offer p { margin-block-start: var(--s2); font-size: 15px; color: var(--text-soft); max-inline-size: 40ch; }
.offer .btn { margin-block-start: var(--s3); }

/* FAQ — answers open, nothing to click. The layout is the transparency claim. */
.qa { display: grid; gap: 0; }
.qa-item {
  padding-block: var(--s4);
  border-block-start: 1px solid var(--hairline);
}
.qa-item:last-child { border-block-end: 1px solid var(--hairline); }
.qa-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  max-inline-size: 34ch;
}
.qa-a { margin-block-start: var(--s2); color: var(--text-soft); max-inline-size: 58ch; }
@media (min-width: 1024px) {
  .qa-2 { grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
  .qa-2 .qa-item:nth-child(2) { border-block-start: 1px solid var(--hairline); }
  .qa-2 .qa-item:last-child,
  .qa-2 .qa-item:nth-last-child(2) { border-block-end: 1px solid var(--hairline); }
}

/* Final CTA — the one centered moment on the page. A statement, not a section. */
/* The one centered moment — a statement, not a section. The 404 is a whole
   page made of that moment, so it takes an h1 and the eyebrow centers too. */
.last-ask { padding-block: clamp(80px, 11vw, 160px); text-align: center; }
.last-ask :is(h1, h2) { max-inline-size: 18ch; margin-inline: auto; }
.last-ask .eyebrow { margin-block-end: var(--s2); }
.last-ask p { margin-block-start: var(--s3); margin-inline: auto; max-inline-size: 44ch; color: var(--text-soft); }
.last-ask .btn { margin-block-start: var(--s5); }
.last-ask .hero-ctas { margin-block-start: var(--s5); justify-content: center; }
.last-ask .hero-ctas .btn { margin-block-start: 0; }

/* Service page hero — type-led, with a product-style spec strip */
.crumb { font-size: 13px; font-weight: 500; color: var(--text-faint); }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* a breadcrumb is navigation, not a sentence, so its links are targets.
   Padding grows the hit area; the negative margin keeps the row height. */
.crumb a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  color: var(--text-faint);
  text-decoration: none;
}
.crumb li + li::before { content: "/"; margin-inline-end: 8px; color: var(--hairline); }
.crumb [aria-current] { color: var(--ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
}

.hero-service { padding-block: clamp(40px, 5vw, 72px) clamp(48px, 7vw, 96px); }
.hero-service h1 { margin-block-start: var(--s3); max-inline-size: 18ch; }
.hero-service .lead { margin-block-start: var(--s3); max-inline-size: 54ch; }

.spec-strip {
  margin-block-start: clamp(40px, 5vw, 64px);
  border-block-start: 1px solid var(--hairline);
  display: grid;
}
.spec {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline);
}
.spec .spec-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.spec .spec-value {
  margin-block-start: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
}
.spec .spec-note { margin-block-start: 4px; font-size: 13px; color: var(--text-faint); max-inline-size: 30ch; }
@media (min-width: 768px) {
  .spec-strip { grid-template-columns: repeat(3, 1fr); border-block-end: 1px solid var(--hairline); }
  .spec { padding-block: var(--s4); padding-inline-end: var(--s4); border-block-end: 0; }
  .spec + .spec { border-inline-start: 1px solid var(--hairline); padding-inline-start: var(--s4); }
}

/* "Right fit if" — three statements you can self-select from in one pass */
.fit-list { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(28px, 3.5vw, 44px); }
.fit-list p {
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-soft);
  max-inline-size: 58ch;
}
.fit-list p b {
  color: var(--ink);
  font-weight: 700;
}
@media (min-width: 1024px) {
  .fit-list { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .fit-list p { max-inline-size: none; }
}

/* What you get — a specification list. Dense, clear, one entry carries weight. */
.spec-list {
  margin-block-start: clamp(32px, 4vw, 56px);
  display: grid;
  gap: 0 var(--s6);
}
@media (min-width: 768px) { .spec-list { grid-template-columns: 1fr 1fr; } }
.spec-row {
  padding-block: var(--s4);
  border-block-start: 2px solid var(--hairline);
}
.spec-row h3 { color: var(--ink); }
.spec-row p {
  margin-block-start: var(--s1);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  max-inline-size: 46ch;
}
/* the one promise the whole page turns on */
.spec-row.is-key { border-block-start-color: var(--lime); }

/* Process — a vertical sequence. The left rule shows where the free part ends. */
.proc { margin-block-start: clamp(32px, 4vw, 56px); }
.proc-step {
  display: grid;
  gap: var(--s1) var(--s5);
  padding-block: var(--s3);
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--hairline);
}
@media (min-width: 768px) {
  .proc-step { grid-template-columns: 300px 1fr; align-items: baseline; padding-block: var(--s4); }
}
.proc-step.is-free { border-inline-start-color: var(--lime); }
.proc-step.is-key { border-inline-start-color: var(--lime); }
.proc-step p b { color: var(--ink); font-weight: 700; }
.proc-step .proc-title { display: flex; align-items: baseline; gap: var(--s2); }
.proc-step .proc-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--text-faint);
}
.proc-step .proc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.proc-step p { font-size: 15px; line-height: 1.55; color: var(--text-soft); max-inline-size: 56ch; }
.proc-note {
  margin-block-start: var(--s3);
  padding-inline-start: var(--s4);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* Service pricing — two prices paired tight, the honest part filling the rest */
.price-block { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1024px) {
  .price-block { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
}
.price-why .why-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--hairline);
}
.price-why .why-body {
  margin-block-start: var(--s3);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.price-why .why-more { margin-block-start: var(--s3); font-size: 15px; color: var(--text-soft); }
.price-why .btn { margin-block-start: var(--s4); }
.price-block .tiers { margin-block-start: 0; }

/* Why us (service) — the four failure modes are the evidence, so they lead */
.causes {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 0;
}
@media (min-width: 768px) { .causes { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
.causes li {
  padding-block: var(--s3);
  border-block-start: 1px solid var(--hairline-inv);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--white);
}
.causes li:last-child { border-block-end: 1px solid var(--hairline-inv); }
@media (min-width: 768px) {
  .causes li:nth-child(2) { border-block-start: 1px solid var(--hairline-inv); }
  .causes li:nth-last-child(2) { border-block-end: 1px solid var(--hairline-inv); }
}
.causes-close {
  margin-block-start: clamp(32px, 4vw, 48px);
  display: grid;
  gap: var(--s3);
}
@media (min-width: 1024px) {
  .causes-close { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
}
.causes-close .lesson { color: var(--sage); max-inline-size: 56ch; }
.causes-close .verdict { color: var(--white); font-weight: 600; max-inline-size: 36ch; }

/* Spec strip on dark — the reassurance line in the malware hero */
.band-ink .spec-strip { border-block-start-color: var(--hairline-inv); }
.band-ink .spec { border-block-end-color: var(--hairline-inv); }
.band-ink .spec .spec-label { color: var(--sage); }
.band-ink .spec .spec-value { color: var(--white); }
.band-ink .spec .spec-note { color: var(--sage); }
@media (min-width: 768px) {
  .band-ink .spec-strip { border-block-end-color: var(--hairline-inv); }
  .band-ink .spec + .spec { border-inline-start-color: var(--hairline-inv); }
}

/* Symptom list — a panicking visitor must find their own line in about two seconds */
.symptoms {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: clamp(32px, 4vw, 56px);
  display: grid;
  gap: 0 var(--s6);
}
@media (min-width: 1024px) { .symptoms { grid-template-columns: 1fr 1fr; } }
.symptoms li {
  padding-block: var(--s3);
  border-block-start: 1px solid var(--hairline);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-soft);
}
.symptoms li:last-child { border-block-end: 1px solid var(--hairline); }
@media (min-width: 1024px) {
  .symptoms li:nth-child(2) { border-block-start: 1px solid var(--hairline); }
  .symptoms li:nth-last-child(2) { border-block-end: 1px solid var(--hairline); }
}
.symptoms b { color: var(--ink); font-weight: 700; }
.symptoms-foot {
  margin-block-start: var(--s4);
  font-size: 15px;
  color: var(--text-soft);
}
.symptoms-foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Reinfection — the argument fills the width; the real case gets real weight */
.reinfect { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) {
  .reinfect { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
}
.reinfect .argument > * + * { margin-block-start: var(--s3); }
.reinfect .argument p { font-size: 17px; line-height: 1.65; color: var(--text-soft); max-inline-size: 56ch; }
.reinfect .argument p b { color: var(--ink); font-weight: 700; }

.case-note {
  border-inline-start: 3px solid var(--lime);
  padding-inline-start: var(--s4);
}
.case-note .case-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.case-note .case-client {
  margin-block-start: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
}
.case-note p { margin-block-start: var(--s2); font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* Quote-based pricing — no menu price, so the reason and the real aftercare figures lead */
.quote-block { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) {
  .quote-block { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
}
.quote-block .reason p { font-size: 17px; line-height: 1.65; color: var(--text-soft); max-inline-size: 54ch; }
.quote-block .reason p + p { margin-block-start: var(--s3); }
.quote-block .reason p b { color: var(--ink); font-weight: 700; }
.quote-block .reason .btn { margin-block-start: var(--s4); }

.after-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--hairline);
}
.after-plan { padding-block: var(--s3); border-block-end: 1px solid var(--hairline); }
.after-plan .ap-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.after-plan .ap-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.after-plan .ap-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
}
.after-plan .ap-price span { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-faint); }
.after-plan p { margin-block-start: 6px; font-size: 15px; color: var(--text-soft); max-inline-size: 40ch; }

/* Malware proof — 10,000+ dominates here; the named roster is the checkable part */
.proof-split { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1024px) {
  .proof-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
}
.hero-figure .figure-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 2.2rem + 4.2vw, 4rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--lime);
}
.hero-figure .figure-label { margin-block-start: var(--s2); font-size: 17px; color: var(--white); max-inline-size: 22ch; }
.sub-figures {
  margin-block-start: var(--s5);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline-inv);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  font-size: 15px;
  color: var(--sage);
}
.sub-figures b { color: var(--white); font-weight: 700; }

.roster-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--hairline-inv);
}
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s5); }
@media (min-width: 768px) { .roster { grid-template-columns: 1fr 1fr; } }
.roster li { padding-block: var(--s3); border-block-end: 1px solid var(--hairline-inv); }
.roster .r-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--white); }
.roster .r-line { margin-block-start: 2px; font-size: 15px; color: var(--sage); }

/* Four-up tiers for the pricing page, plus the self-select line */
@media (min-width: 1280px) { .tiers.tiers-4 { grid-template-columns: repeat(4, 1fr); } }
.tier ul {
  list-style: none;
  padding: 0;
  margin-block-start: var(--s3);
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}
.tier .tier-for {
  margin-block-start: var(--s3);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--text-soft);
}
.tier .tier-for b { color: var(--ink); font-weight: 600; }

/* Price factors — a reference you scan, with the commitment given real weight */
.factors { margin-block-start: clamp(32px, 4vw, 56px); border-block-start: 1px solid var(--hairline); }
.factor {
  display: grid;
  gap: 4px var(--s5);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .factor { grid-template-columns: 240px 1fr; align-items: baseline; padding-block: var(--s4); }
}
.factor .f-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.factor p { font-size: 15px; line-height: 1.55; color: var(--text-soft); max-inline-size: 62ch; }
.commitment {
  margin-block-start: clamp(32px, 4vw, 48px);
  border-inline-start: 3px solid var(--lime);
  padding-inline-start: var(--s4);
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink);
  max-inline-size: 48ch;
}

/* Included-at-every-price — plain list on hairlines; the Lime goes on the thesis, not the bullets */
.included {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 0 var(--s6);
}
@media (min-width: 768px) { .included { grid-template-columns: 1fr 1fr; } }
.included li {
  padding-block: var(--s3);
  border-block-start: 1px solid var(--hairline-inv);
  font-size: 17px;
  line-height: 1.5;
  color: var(--white);
}
.included li:last-child { border-block-end: 1px solid var(--hairline-inv); }
@media (min-width: 768px) {
  .included li:nth-child(2) { border-block-start: 1px solid var(--hairline-inv); }
  .included li:nth-last-child(2) { border-block-end: 1px solid var(--hairline-inv); }
}
.thesis {
  margin-block-start: clamp(32px, 4vw, 48px);
  border-inline-start: 3px solid var(--lime);
  padding-inline-start: var(--s4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  max-inline-size: 34ch;
}
/* must out-rank `.band-ink p { color: var(--sage) }` — this is the page's thesis */
.band-ink p.thesis { color: var(--white); }

/* Route index on dark — same grammar as the light one, contrasting ground */
.band-ink .routes { border-block-start-color: var(--hairline-inv); }
.band-ink .route { border-block-end-color: var(--hairline-inv); }
.band-ink .route .route-name { color: var(--white); }
.band-ink .route .route-desc { color: var(--sage); }
.band-ink .route .route-price,
.band-ink .route .route-to { color: var(--white); }
.band-ink .route .route-price::after,
.band-ink .route .route-to::after { color: var(--sage); }
@media (hover: hover) and (pointer: fine) {
  .band-ink .route:hover { background: var(--forest); }
  .band-ink .route:hover .route-price::after,
  .band-ink .route:hover .route-to::after { color: var(--lime); }
}

/* Scenario router — for the visitor who doesn't know what they need */
.scenarios { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: clamp(32px, 4vw, 40px); }
@media (min-width: 1024px) { .scenarios { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
/* grid with a flexible middle row so the actions align across the set: on a
   router the eye scans the row of links, and a one-line description next to a
   two-line one would stagger them */
.scenario {
  border-block-start: 2px solid var(--hairline);
  padding-block-start: var(--s3);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: start;
}
.scenario.is-urgent { border-block-start-color: var(--lime); }
.scenario .s-if {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.02rem + .4vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  max-inline-size: 26ch;
}
.scenario p { margin-block-start: var(--s2); font-size: 15px; line-height: 1.55; color: var(--text-soft); max-inline-size: 40ch; }
/* standalone action link — unscoped from .scenario so any section can use it.
   A link on its own line is a target, not prose: 44px minimum. */
.s-do {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  margin-block-start: var(--s2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.s-do::after { content: "\2192"; transition: translate 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .s-do:hover::after { translate: 4px 0; }
}

/* Scale line — a standalone strip any hero can use (not scoped to one hero variant) */
.trust-strip {
  max-inline-size: none;
  margin-block-start: clamp(32px, 4vw, 48px);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  font-size: 15px;
  color: var(--text-faint);
}
@media (min-width: 1024px) { .trust-strip { justify-content: space-between; } }
.band-ink .trust-strip { border-block-start-color: var(--hairline-inv); color: var(--sage); }
/* a strip item can lead — the blog byline names the author among credentials */
.trust-strip b { font-weight: 700; color: var(--ink); }
.band-ink .trust-strip b { color: var(--white); }

/* Portfolio page grid — the same piece component, two up */
.folio-grid { display: grid; gap: clamp(40px, 5vw, 64px) var(--s4); }
@media (min-width: 768px) { .folio-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Named people — equal treatment; photos join when both exist (Jun: open item O5) */
.people { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: 0 var(--s6); }
@media (min-width: 768px) { .people { grid-template-columns: 1fr 1fr; } }
.person { padding-block: var(--s4); border-block-start: 1px solid var(--hairline); }
.person .p-photo {
  inline-size: clamp(120px, 18vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  margin-block-end: var(--s3);
}
.person:last-child { border-block-end: 1px solid var(--hairline); }
@media (min-width: 768px) {
  .person:nth-child(2) { border-block-start: 1px solid var(--hairline); }
  .person:nth-last-child(2) { border-block-end: 1px solid var(--hairline); }
}
.person .p-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
}
.person .p-role {
  margin-block-start: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.person p.p-bio { margin-block-start: var(--s3); font-size: 15px; line-height: 1.6; color: var(--text-soft); max-inline-size: 46ch; }

/* What you get — the deliverables carry weight; they are the reason to fill the form */
.gets {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
}
.gets li {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* Grouped form — long forms need structure, or they read as a wall */
.form-group { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
/* the separator lives on the legend, not the fieldset: a fieldset renders its
   legend outside the padding box, so padding there opens a gap UNDER the legend
   and detaches it from the group it names */
.form-group + .form-group { margin-block-start: var(--s5); }
.form-group + .form-group > legend {
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--hairline);
}
.form-group > legend {
  display: block;
  inline-size: 100%;
  padding: 0;
  margin-block-end: var(--s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* direct children only — otherwise the two fields inside a .field-row inherit the gap and misalign */
.form-group > .field + .field,
.form-group > .field-row + .field,
.form-group > .field + .field-row,
.form-group > .field-row + .field-row { margin-block-start: var(--s3); }
.field-row > .field { margin-block-start: 0; align-self: start; }
.field-row { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-submit { margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid var(--hairline); }
.form-submit .small { margin-block-start: var(--s2); }
/* on a phone the end of a fourteen-field form is no place for a half-width target */
.form-submit .btn { inline-size: 100%; }
@media (min-width: 640px) { .form-submit .btn { inline-size: auto; } }

/* the deliverables are the reason to keep typing — keep them in view beside a long form */
@media (min-width: 1024px) {
  .form-aside { position: sticky; inset-block-start: var(--s7); /* clears the 73px sticky header with room to spare */ align-self: start; }
}

/* Free website check hero — the URL field IS the hero object, and at desktop the
   whole form is one bar: URL, email, submit. Keeping the submit on a row of its
   own above a still-empty required field would say "done" before the form is.
   DOM order is URL, email, submit everywhere, so the tab key agrees with the eye.
   Every selector is scoped under .check-bar on purpose — the shared .field rules
   live further down this file, so a single-class rule would lose to them. */
.check-bar { margin-block-start: var(--s5); display: grid; gap: var(--s3); }
.check-bar .check-go { inline-size: 100%; }
@media (min-width: 1024px) {
  /* the wrappers dissolve so every label, input and the button are grid items:
     only then can the button stretch to the INPUT row rather than to the whole
     label-plus-input block, and the seams close to a hairline */
  .check-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32ch) auto;
    grid-template-areas:
      "urllabel emaillabel ."
      "urlinput emailinput go";
    gap: 0;
  }
  .check-bar .check-url,
  .check-bar .check-email { display: contents; }
  .check-bar .check-url label   { grid-area: urllabel;   margin-block-end: var(--s1); }
  .check-bar .check-email label { grid-area: emaillabel; margin-block-end: var(--s1); padding-inline-start: var(--s2); }
  .check-bar .check-url input   { grid-area: urlinput; }
  .check-bar .check-email input { grid-area: emailinput; max-inline-size: none; }
  .check-bar .check-go { grid-area: go; align-self: stretch; inline-size: auto; }
  /* the seams: shared edges, so the three controls read as one bar */
  .check-bar .check-url input,
  .check-bar .check-email input { border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; }
  .check-bar .check-email input { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 1px solid var(--hairline); }
  .check-bar .check-go { border-start-start-radius: 0; border-end-start-radius: 0; }
  /* a focused input must own its whole outline, so lift it over its neighbor */
  .check-bar input:focus-visible { position: relative; z-index: 1; border-inline-end: 1px solid var(--ink); }
}

/* Credibility strip — a rule with content on it, not a section */
.strip {
  padding-block: 20px;
  border-block: 1px solid var(--hairline);
}
.strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  justify-content: space-between;
  align-items: baseline;
}
.strip p { font-size: 15px; line-height: 1.55; color: var(--text-soft); max-inline-size: none; }
/* two upward routes in one strip cell — the service page sits under both the
   city hub and the state page, so both get a link */
.strip-routes { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }

/* a strip is a one-line rule between bands, so .s-do keeps its 44px hit area
   through padding rather than min-height, which would inflate the row by 60% */
.strip .s-do {
  min-block-size: 0;
  padding-block: 12px;
  margin-block: -12px;
}

/* 5/7 asymmetric split for quiet two-part bands */
.cols-5-7 > * + * { margin-block-start: var(--s3); }
@media (min-width: 1024px) {
  .cols-5-7 {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s4) var(--s6);
    align-items: start;
  }
  .cols-5-7 > * + * { margin-block-start: 0; }
}

/* Numbered entries — the differentiator's three columns as editorial rows */
.num-rows { border-block-start: 1px solid var(--hairline); }
.band-ink .num-rows { border-block-start-color: var(--hairline-inv); }
.num-rows .num-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s2) var(--s3);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline);
}
.band-ink .num-rows .num-row { border-block-end-color: var(--hairline-inv); }
.num-row .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  line-height: 1;
}
.band-ink .num-row .num { color: var(--lime); }
.num-row h3 { margin-block-end: var(--s1); }

/* Linked service cards */
.cards-2 { display: grid; gap: var(--s3); }
@media (min-width: 768px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
a.card { display: block; color: inherit; text-decoration: none; }
a.card .card-link {
  display: inline-block;
  margin-block-start: var(--s2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Emergency bar — above everything on the malware page. Loud on purpose. */
.emergency-bar {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline-inv);
}
.emergency-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: baseline;
}
.emergency-bar .eb-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  letter-spacing: -.01em;
  color: var(--white);
}
.emergency-bar a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  letter-spacing: -.01em;
  color: var(--lime);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block: -12px;
}
@media (hover: hover) and (pointer: fine) {
  .emergency-bar a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.emergency-bar .eb-note { font-size: 15px; color: var(--sage); }

/* Lime accent words on dark bands (10.5:1 on Ink, display sizes) */
.band-ink .accent { color: var(--lime); }

/* Qualifier rows — "this is the right fit if…" */

/* Feature grid — six points, dense, roomy */
.features-grid { display: grid; gap: var(--s4) var(--s5); }
@media (min-width: 768px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .features-grid:not(.features-grid-2) { grid-template-columns: 1fr 1fr 1fr; } }
.feature h3 { margin-block-end: var(--s1); }

/* What we check — a register, not a grid of tiles. The run of six IS the
   argument, so hairlines bind them into one object and the terms lead the
   findings instead of sitting a few pixels above them. Two columns at most:
   a third shortens every measure and the specificity stops reading. */
.report-list { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: 0 var(--s6); }
.report-item { padding-block: var(--s4); border-block-start: 1px solid var(--hairline); }
.report-item:last-child { border-block-end: 1px solid var(--hairline); }
.report-item dt { margin-block-end: var(--s1); }
.report-item dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); max-inline-size: 42ch; }
@media (min-width: 768px) {
  .report-list { grid-template-columns: 1fr 1fr; }
  /* the final ROW is two items wide, so the second-to-last must close too */
  .report-item:nth-last-child(2) { border-block-end: 1px solid var(--hairline); }
}

/* Why trust it — the argument IS an opposition (what a scanner reports vs what a
   person concludes), so it is set as one instead of trailing as the quietest line
   in the band. The Lime rule is the division between the two claims, not a
   decoration: large type and rules on Ink are where Lime is allowed to work. */
.trust-band h2 { max-inline-size: 18ch; }
.trust-band .lead { max-inline-size: 54ch; }
/* the global `p { max-inline-size: 72ch }` prose guard would cap this grid at
   772px and starve both columns; the measure belongs on the claims, not the
   container that lays them out */
.versus { max-inline-size: none; margin-block-start: clamp(48px, 6vw, 88px); display: grid; gap: var(--s4); }
.versus-a,
.versus-b { display: block; }
.versus-a {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  line-height: 1.5;
  color: var(--sage);
  max-inline-size: 34ch;
}
.versus-b {
  padding-block-start: var(--s4);
  border-block-start: 2px solid var(--lime);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--white);
  /* em, not ch: ch is measured from the display face's narrow zero and gives a
     measure far shorter than the type actually wants */
  max-inline-size: 15em;
}
@media (min-width: 900px) {
  /* baseline, not start: the quiet claim should sit on the big claim's first line */
  .versus { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--s5); align-items: baseline; }
  /* the rule turns to sit IN the gutter, equally spaced from both claims */
  .versus-b {
    padding-block-start: 0;
    padding-inline-start: var(--s5);
    border-block-start: 0;
    border-inline-start: 2px solid var(--lime);
  }
}

/* What happens after the check — two outcomes. The first (nothing is wrong) is
   the one that earns trust, so it leads and carries equal weight instead of
   sitting as a clause mid-paragraph. The condition sits in the gutter as a term
   and the consequence reads straight on from it, which is how the approved
   sentence is already written. Deliberately quiet: it follows the loud Ink band. */
/* fit-content so the rules end with the text: a full-container rule under a
   measure-capped column leaves the band looking half-empty */
.outcomes {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-start: clamp(32px, 4vw, 56px);
  border-block-start: 1px solid var(--hairline);
}
.outcome {
  padding-block: var(--s4);
  border-block-end: 1px solid var(--hairline);
  display: grid;
  gap: var(--s2);
}
.outcome dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink);
}
.outcome dd { margin: 0; max-inline-size: 54ch; color: var(--text-soft); }
@media (min-width: 768px) {
  .outcome { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); gap: 0 var(--s5); align-items: baseline; }
}

/* Contact hero — a navigational hero with only three approved elements to work
   with, so the composition comes from arrangement: the claim and the promise
   share a baseline across the full width, and the trust strip gives the band a
   base instead of letting it trail off into empty white. The contact details
   stay in their own section, where copy-core puts them. */
.contact-hero .lead { margin-block-start: var(--s3); max-inline-size: 46ch; }
@media (min-width: 1024px) {
  .contact-hero .hero-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s6);
    align-items: baseline;
  }
  .contact-hero .lead { margin-block-start: 0; }
}

/* Direct contact — email is the only channel that works today (phone is O2,
   hours O3), so it is the largest thing in the column rather than a 15px link
   inside a floating card. The urgent path takes the system's Lime rule instead
   of being the smallest type on the page. */
.direct-mail {
  display: inline-block;
  margin-block-start: var(--s3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, .95rem + .7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.direct-note { margin-block-start: var(--s4); font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.direct-urgent {
  margin-block-start: var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 2px solid var(--lime);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}
.direct-urgent b {
  display: block;
  margin-block-end: 4px;
  font-family: var(--font-display);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  letter-spacing: -.01em;
  color: var(--ink);
}

/* "The same two people" — the hub's actual claim, so the two named people are
   shown rather than asserted. Small and factual: a credential strip, not the
   team section, which lives on the About page at full size. */
.who-strip {
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--hairline);
  display: grid;
  gap: var(--s4);
}
/* 768, not 640: at 640 the container leaves ~270px a side and "Business
   development, California" wraps. A two-line job title in a cramped cell reads
   as an accident, not a credential, so they stay stacked until there is room. */
@media (min-width: 768px) {
  .who-strip { grid-template-columns: 1fr 1fr; gap: var(--s5); max-inline-size: 74ch; }
}
.who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; }
.who img { inline-size: 56px; block-size: 56px; border-radius: 50%; }
.who-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
.who-role { margin-block-start: 2px; font-size: 15px; line-height: 1.4; color: var(--text-soft); }

/* What remote actually means — three things that change and two that do not.
   The hero already makes the "remote is not distant" argument, so this section
   carries only the checkable consequences, as two labelled sets. */
.practice { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: var(--s5); }
@media (min-width: 768px) { .practice { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.practice-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.practice ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
  /* the measure sits on the list, not the items: capping the li caps its bottom
     border too, and the rules stop short of the one above them */
  max-inline-size: 38ch;
}
.practice li {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* The California market — the approved copy says "Two things follow. First…
   Second…" and then buries both in a paragraph. The enumeration is the
   structure, so it is set as one, and the closing line gets to be the punch
   instead of a bold footnote. */
.follows { margin-block-start: clamp(32px, 4vw, 56px); display: grid; gap: var(--s5); }
@media (min-width: 768px) { .follows { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.follows > div { padding-block-start: var(--s3); border-block-start: 2px solid var(--hairline); }
.follows-n {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.follows p:not(.follows-n) {
  margin-block-start: var(--s2);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  max-inline-size: 40ch;
}
.follows-close {
  /* the global p { max-inline-size: 72ch } would stop this rule short of the
     pair above it; a closing rule has to span what it closes */
  max-inline-size: none;
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink);
}

/* A note that closes a band — a publishing status line, kept quiet and put on
   a rule so the section ends deliberately instead of trailing off. */
.band-note {
  max-inline-size: none;
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-faint);
}
.band-ink .band-note { border-block-start-color: var(--hairline-inv); color: var(--sage); }

/* The local market close — the shift and what it means for the buyer, after a
   rule so the named industries above read as the list they are. Single column
   on purpose: the band already has a three-up set and does not need a second. */
.market-close {
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--hairline);
  display: grid;
  gap: var(--s3);
}
@media (min-width: 1024px) {
  /* the shift and what it means for the buyer are a pair, and two columns stop
     a 62ch block sitting under a full-width rule with the band half empty */
  .market-close { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}
.market-close p { max-inline-size: 54ch; color: var(--text-soft); }
.market-close b { color: var(--ink); }

/* A quiet band's footing — body and route sharing one rule under the heading.
   Used where a section has to signal something without making a claim of it
   (copy-locations §1.1: "a quiet band and not a hero claim"). */
.band-row {
  margin-block-start: clamp(32px, 4vw, 48px);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
  display: grid;
  gap: var(--s3);
}
.band-row p { max-inline-size: 58ch; color: var(--text-soft); }
@media (min-width: 1024px) {
  .band-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: baseline; }
  .band-row .s-do { justify-self: end; }
}
.band-ink .band-row { border-block-start-color: var(--hairline-inv); }
.band-ink .band-row p { color: var(--sage); }

/* Portfolio page grid + text list */
.folio-grid { display: grid; gap: var(--s6) var(--s4); }
@media (min-width: 768px) { .folio-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.folio-list { border-block-start: 1px solid var(--hairline); }
.folio-row {
  display: grid;
  gap: 4px var(--s4);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--hairline);
}
@media (min-width: 768px) { .folio-row { grid-template-columns: 280px 110px 1fr; align-items: baseline; } }
.folio-row .name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.folio-row .cat { font-size: 13px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.folio-row .note { font-size: 15px; color: var(--text-soft); }
[hidden] { display: none !important; }

/* Portfolio wall */
.work-grid > * + * { margin-block-start: var(--s6); }
.work-row { display: grid; gap: var(--s5) var(--s4); }
@media (min-width: 1024px) {
  .work-row.cols-7-5 { grid-template-columns: 7fr 5fr; align-items: start; }
  .work-row.cols-5-7r { grid-template-columns: 5fr 7fr; align-items: start; }
}

/* Process steps — 2×2 at tablet+ */
.steps-grid { display: grid; gap: var(--s4) var(--s5); }
@media (min-width: 768px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
.step .step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1;
  color: var(--text-faint);
}
.step h3 { margin-block-start: var(--s1); }
.step p { margin-block-start: var(--s1); }

.trust-line {
  margin-block-start: var(--s5);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-faint);
}
/* links in a trust line read as a sentence but work as navigation — the 404
   recovery row is the only one. Grow the hit area without moving the baseline:
   the negative margin cancels the padding so the line box is unchanged. */
.trust-line a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}

.band-ink .trust-line {
  border-block-start-color: var(--hairline-inv);
  color: var(--sage);
}

/* ---------- Type scale ---------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.lead {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-inline-size: 62ch;
}
p, .body { max-inline-size: 72ch; }
.small   { font-size: 15px; line-height: 1.55; }
.caption { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-faint); }
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow + :where(h1, h2, h3, .h1, .h2, .h3, .h4) { margin-block-start: var(--s2); }

/* ---------- Links in prose ---------- */
.prose a, a.link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.band-ink .prose a, .band-ink a.link {
  color: var(--white);
}
/* Arrow link on dark — Lime is allowed on Ink (10.5:1) */
.band-ink a.link-arrow {
  color: var(--lime);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Bands ---------- */
.band      { background: var(--white); padding-block: clamp(48px, 7vw, 96px); }
.band-mint { background: var(--mint); }
.band-ink  { background: var(--ink); color: var(--white); }

.band-ink :where(h1,h2,h3,h4) { color: var(--white); }
.band-ink p        { color: var(--sage); }
.band-ink .lead    { color: var(--sage); }
.band-ink .eyebrow { color: var(--sage); }
.band-ink .caption { color: var(--sage); }

.container {
  max-inline-size: 1280px;
  margin-inline: auto;
  padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease),
              border-color 120ms var(--ease), translate 160ms var(--ease);
}
.btn-sm { padding: 12px 22px; }

.btn-primary { background: var(--lime); color: var(--forest); }
.btn-primary.is-hover { background: var(--lime-hover); translate: 0 -1px; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost.is-hover { border-color: var(--ink); }

.band-ink .btn-ghost { color: var(--white); border-color: var(--hairline-inv); }
.band-ink .btn-ghost.is-hover { border-color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--lime-hover); translate: 0 -1px; }
  .btn-ghost:hover { border-color: var(--ink); }
  .band-ink .btn-ghost:hover { border-color: var(--white); }
}

.btn:disabled, .btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  translate: none;
}

.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid var(--forest);
  border-block-start-color: transparent;
  border-radius: 50%;
}
.btn-ghost.is-loading::after { border-color: var(--ink); border-block-start-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .btn.is-loading::after { animation: btn-spin .7s linear infinite; }
  @keyframes btn-spin { to { rotate: 360deg; } }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow);
  transition: box-shadow 160ms var(--ease), translate 160ms var(--ease);
}
.card-mint { background: var(--mint); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover, .card.is-hover { box-shadow: var(--shadow-lift); translate: 0 -2px; }
}

/* ---------- Chips / filters ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 10px 18px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .chip:not(.is-active):hover { border-color: var(--ink); }
}

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.field .hint { font-size: 13px; color: var(--text-faint); }

input, select, textarea {
  font-family: var(--font-body);
  font-size: max(16px, 1rem); /* below 16px iOS Safari zooms the page */
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  padding: 14px 16px;
  inline-size: 100%;
}
textarea { min-block-size: 120px; resize: vertical; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }
.field .error { font-size: 14px; font-weight: 500; color: var(--danger); }
.band-ink .field .error { color: var(--danger-on-dark); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; inline-size: 100%; font-size: 15px; }
th, td {
  text-align: left;
  padding: 12px 16px;
  border-block-end: 1px solid var(--hairline);
}
th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* a row header is content, not a label: uppercase 13px faint made the feature
   names the least legible thing in the table they are the subject of */
th[scope="row"] {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
td:first-child { font-weight: 600; }

/* ---------- Screenshot frame ---------- */
.shot {
  border: 1px solid var(--hairline);
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--mint);
}
.shot img { inline-size: 100%; }
.band-ink .shot { border-color: var(--hairline-inv); }

/* ---------- Proof figures ---------- */
/* Proof band (G1) — four coordinate facts, so they are peers in a ruled
   register rather than four Lime figures competing in a flat row. Lime lands
   once, on the one number that is about quality rather than volume. */
.figures {
  margin-block-start: clamp(32px, 4vw, 56px);
  border-block-start: 1px solid var(--hairline-inv);
  border-block-end: 1px solid var(--hairline-inv);
  display: grid;
}
.fig { padding-block: var(--s4); }
.fig .figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--white);
}
.fig .label { display: block; margin-block-start: var(--s1); font-size: 15px; color: var(--sage); }
.fig.is-key .figure { color: var(--lime); } /* Lime on Ink only — 10.5:1 */
.fig + .fig { border-block-start: 1px solid var(--hairline-inv); }
@media (min-width: 640px) {
  .figures { grid-template-columns: 1fr 1fr; }
  /* rules turn vertical: the row break is carried by the grid, not a border */
  .fig + .fig { border-block-start: 0; }
  .fig:nth-child(n + 3) { border-block-start: 1px solid var(--hairline-inv); }
  .fig:not(:nth-child(2n + 1)) { padding-inline-start: var(--s5); border-inline-start: 1px solid var(--hairline-inv); }
}
@media (min-width: 1024px) {
  .figures { grid-template-columns: repeat(4, 1fr); }
  .fig:nth-child(n + 3) { border-block-start: 0; }
  .fig:not(:nth-child(4n + 1)) { padding-inline-start: var(--s5); border-inline-start: 1px solid var(--hairline-inv); }
  .fig:nth-child(2n + 1):not(:nth-child(4n + 1)) { padding-inline-start: var(--s5); border-inline-start: 1px solid var(--hairline-inv); }
}

/* Team cards + avatars */
.portrait { inline-size: min(280px, 60%); border-radius: 50%; }

/* Founder quote + proof figures — one continuous dark block */
.quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  max-inline-size: 44ch;
  margin: 0;
}
.band-ink .quote, .band-ink .quote p { color: var(--white); }
.founder-attrib { display: flex; align-items: center; gap: var(--s2); margin-block-start: var(--s4); }
.founder-attrib img { inline-size: 64px; block-size: 64px; border-radius: 50%; }
.founder-attrib .name { font-weight: 600; color: var(--ink); }
.founder-attrib .role { font-size: 15px; color: var(--text-soft); margin-block-start: 2px; }
.band-ink .founder-attrib .name { color: var(--white); }
.band-ink .founder-attrib .role { color: var(--sage); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--sage);
  border-block-start: 1px solid var(--hairline-inv);
  padding-block-start: clamp(64px, 9vw, 128px);
  padding-block-end: max(var(--s5), env(safe-area-inset-bottom));
}
.footer-cta .footer-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage);
}
.footer-cta .footer-mail {
  display: inline-block;
  margin-block-start: var(--s3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, .35rem + 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .footer-cta .footer-mail:hover { color: var(--lime); }
}
.footer-cta .footer-alt {
  margin-block-start: var(--s3);
  font-size: 15px;
  color: var(--sage);
  max-inline-size: none;
}
.footer-cta .footer-alt a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.footer-rule {
  border: 0;
  border-block-start: 1px solid var(--hairline-inv);
  margin-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 64px);
}
.footer-trust {
  font-size: 15px;
  color: var(--sage);
  max-inline-size: none;
}
.footer-grid { display: grid; gap: var(--s5); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s5) var(--s4); } }
.site-footer .footer-logo img { block-size: 26px; inline-size: auto; }
.site-footer .footer-tag { font-size: 15px; margin-block-start: var(--s2); max-inline-size: 36ch; }
.site-footer .footer-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; margin-block-start: var(--s2); }
.site-footer ul a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  color: var(--white);
  font-size: 15px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.footer-bottom {
  margin-block-start: clamp(48px, 6vw, 80px);
  padding-block: var(--s3);
  border-block-start: 1px solid var(--hairline-inv);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  justify-content: space-between;
  font-size: 13px;
}
.footer-bottom a { color: var(--sage); display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover { color: var(--white); }
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Blog cards + article prose */
/* Blog index — an editorial register, not a card grid. A grid of cards looks
   broken at one post and at three; a ruled list reads correctly at any number.
   The meta moves to a left gutter at desktop so the titles keep a reading
   measure instead of stretching across the container. */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--hairline);
}
.post-item {
  padding-block: clamp(28px, 3.5vw, 40px);
  border-block-end: 1px solid var(--hairline);
}
.post-meta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.post-title {
  margin-block-start: var(--s2);
  /* index titles are scanned, not read as headlines: the h1 leads the page, so
     these sit at the route-name scale. Measure in em, not ch — ch is taken from
     the display face's narrow zero and runs far wider than it reads. */
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  max-inline-size: 18em;
}
.post-title a {
  color: var(--ink);
  text-decoration: none;
}
.post-title a::after {
  content: "\00a0\2192";
  color: var(--text-faint);
  display: inline-block;
  transition: translate 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .post-title a:hover::after { translate: 4px 0; color: var(--ink); }
}
.post-excerpt { margin-block-start: var(--s2); color: var(--text-soft); max-inline-size: 62ch; }
@media (min-width: 1024px) {
  .post-item {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    /* column gap only — the excerpt carries its own margin, and a row gap on
       top of it opens a hole between the title and the line it belongs to */
    gap: 0 var(--s5);
    align-items: baseline;
  }
  .post-meta { grid-column: 1; }
  .post-title,
  .post-excerpt { grid-column: 2; }
  .post-title { margin-block-start: 0; }
}
/* Long-form reading — the one place on the site with real body copy, so the
   measure and the leading are set for reading, not for a marketing band.
   36em lands ~68 characters a line; `72ch` resolved to 86, because ch is the
   zero-glyph advance and Inter's average character is wider than its zero. */
.article { max-inline-size: 36em; }
.article > * + * { margin-block-start: var(--s3); }
.article p { line-height: 1.75; }
/* a section heading inside an article answers to the article title, not the
   page scale: 44px under a 64px H1 left the hierarchy almost flat */
.article h2 {
  margin-block-start: var(--s6);
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  max-inline-size: 30ch;
}
.article h2:first-child { margin-block-start: 0; }
.article h3 { margin-block-start: var(--s5); font-size: 18px; }
.article ul,
.article ol { padding-inline-start: 1.2em; display: grid; gap: 10px; color: var(--text-soft); }
.article li { line-height: 1.7; }
.article blockquote {
  margin: 0;
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
}
.article blockquote p { line-height: inherit; }
.article :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--mint);
  padding: 2px 6px;
  border-radius: 6px;
}
.article pre {
  margin: 0;
  overflow-x: auto;
  padding: var(--s3);
  background: var(--ink);
  border-radius: var(--r-ctl);
  color: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.6;
}
.article pre code { background: none; padding: 0; color: inherit; }
.article .article-note {
  border-inline-start: 3px solid var(--lime);
  padding-inline-start: var(--s3);
  color: var(--text-soft);
}

/* ---------- Scroll reveal (progressive) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }
    @keyframes reveal-in {
      from { opacity: 0; translate: 0 24px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* ---------- Utilities ---------- */
.text-soft { color: var(--text-soft); }
.band-ink p.text-white, .care-panel .text-white { color: var(--white); }
ul.prose-list { padding-inline-start: 1.2em; display: grid; gap: 10px; max-inline-size: 62ch; }
.mt-2 { margin-block-start: var(--s2); }
.mt-3 { margin-block-start: var(--s3); }
.mt-4 { margin-block-start: var(--s4); }
.mt-5 { margin-block-start: var(--s5); }
.mt-7 { margin-block-start: var(--s7); }
.cluster-tight { gap: 8px; }
.stack-s  > * + * { margin-block-start: var(--s2); }
.stack    > * + * { margin-block-start: var(--s3); }
.stack-l  > * + * { margin-block-start: var(--s5); }
.cluster  { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.measure-lead { max-inline-size: 62ch; }
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Short landscape phones: keep the hero's ask reachable */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-block: var(--s2) var(--s3); }
  .hero .eyebrow + h1 { margin-block-start: var(--s1); }
  .hero .lead { margin-block-start: var(--s2); }
  .hero-ctas { margin-block-start: var(--s2); }
  .hero-split .trust-line { margin-block-start: var(--s2); }
}