/* ============================================================
   CyberShells homepage.

   Visual system carried over from the supplied theme mockups by the
   owner's direction: white ground, Montserrat, hard edges. The only piece
   of decorative geometry is the wordmark's upright bar, repeated as plain
   rectangles. No triangles anywhere. The crimson is bound to a single custom
   property so the whole palette moves in one edit.

   What this file deliberately does NOT do:
   - no boxed panels, no bordered cards, no framed media. Structure is
     carried by hairline rules, whitespace and type weight instead.
   - no scroll hijacking. The page scrolls at the reader's own speed;
     nothing is pinned, nothing plays inside a frame.

   Type is a fluid rem scale. Every size is anchored on rem so a reader
   who has raised their browser's default font size gets a page that
   grows with them, and clamped at both ends so 320px phones and 2560px
   displays both land inside a sane measure.
   ============================================================ */

:root {
  /* ---- Ink and ground ---- */
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eceef1;
  --ink: #191919;
  --ink-2: #464c55;
  --ink-3: #666c76;         /* 5.29:1 on white, 4.97:1 on --surface */
  --line: #e4e7eb;
  --line-2: #cfd4da;

  /* The crimson clears 4.5:1 on white, so unlike a lighter red it can carry
     small text as well as graphics, and takes white at 6.30:1 when it is the
     fill. Against the dark band it drops to 2.79:1, just under the 3:1 AA
     floor for large text; the closing heading uses it there by the owner's
     decision. Lighten this one usage if that ever needs to pass. */
  --accent: #c30017;        /* 6.30:1 on white, 5.93:1 on --surface */
  --accent-dark: #9c0012;   /* hover */
  --accent-deep: #7d000f;   /* the darker end of the ramp */
  --on-accent: #ffffff;     /* 6.30:1 on --accent */

  --dark: #191919;
  --dark-2: #101010;
  --on-dark: #c3c8ce;       /* 10.44:1 on --dark */
  --on-dark-2: #8f959d;     /* 6.30:1 on --dark-2 */

  --ok: #2e7d32;
  --warn: #8a6100;

  /* ---- Families ---- */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Fluid type scale, rem anchored ----
     min is what a 320px viewport gets, max is the ceiling past ~1600px. */
  --fs-micro:   clamp(0.6875rem, 0.664rem + 0.117vw, 0.75rem);    /* 11 - 12 */
  --fs-label:   clamp(0.75rem,   0.727rem + 0.117vw, 0.8125rem);  /* 12 - 13 */
  --fs-small:   clamp(0.875rem,  0.852rem + 0.117vw, 0.9375rem);  /* 14 - 15 */
  --fs-body:    clamp(1rem,      0.955rem + 0.227vw, 1.125rem);   /* 16 - 18 */
  --fs-body-lg: clamp(1.0625rem, 0.994rem + 0.341vw, 1.25rem);    /* 17 - 20 */
  --fs-lead:    clamp(1.125rem,  1.011rem + 0.568vw, 1.4375rem);  /* 18 - 23 */
  --fs-h3:      clamp(1.1875rem, 1.074rem + 0.568vw, 1.5rem);     /* 19 - 24 */
  --fs-stmt:    clamp(1.5rem,    1.045rem + 2.273vw, 2.75rem);    /* 24 - 44 */
  --fs-display: clamp(2.375rem,  1.489rem + 4.432vw, 4.8125rem);  /* 38 - 77 */
  --fs-fig:     clamp(2rem,      1.432rem + 2.841vw, 3.5rem);     /* 32 - 56 */

  /* ---- Space ---- */
  --gut: clamp(1.25rem, 0.795rem + 2.273vw, 4rem);   /* 20 - 64 */
  --wrap: 84rem;                                      /* 1344 at default root */
  --sec-y: clamp(4rem, 2.636rem + 4.545vw, 7.5rem);   /* 64 - 120 */

  /* ---- Depth order ---- */
  --z-sticky: 50;
  --z-menu: 60;
  --z-skip: 100;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);        /* out-quint */
  --ease-io: cubic-bezier(.16, 1, .3, 1);      /* out-expo */
}

/* ============================================================
   Reset and base
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.nav-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
h3 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.22; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--accent); color: var(--on-accent); }

.skip {
  position: fixed; top: -6rem; left: var(--gut); z-index: var(--z-skip);
  padding: 0.875rem 1.5rem;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.02em;
}
.skip:focus { top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

/* ============================================================
   Shared atoms
   ============================================================ */

/* The brand geometry is the wordmark's upright bar. Everything decorative on
   this page is a rectangle cut from that one shape. */
.bar-mark {
  width: 0.25rem; height: 1.125rem; flex: none;
  background: var(--accent);
}

.kick {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border: 2px solid transparent; border-radius: 2px;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color .25s var(--ease),
    border-color .25s var(--ease),
    color .25s var(--ease),
    transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dark); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--accent); }

.btn-ghost { border-color: var(--ink-3); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-on-dark { background: var(--accent); color: var(--on-accent); }
.btn-on-dark:hover { background: #fff; color: var(--ink); }

.btn-lg {
  padding: 1.0625rem 2rem;
  font-size: var(--fs-body);
}

.fine {
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 62ch;
}

.after { margin-top: clamp(2rem, 1.6rem + 1.4vw, 3rem); }

/* ============================================================
   Header
   ============================================================ */

.hdr {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .hdr { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px) saturate(1.4); }
}
.hdr.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(20, 22, 26, .05);
}

.hdr-in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 0.875rem var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* Wordmark lockup.
   The mark is not an abstract glyph, it is a shell prompt: a chevron and a
   solid cursor bar. So the wordmark is set in the terminal face rather than
   the page face, and the lockup reads as a prompt with the name typed at it.
   This is the one place on the page that departs from Montserrat, deliberately.

   The mark carries the weight (8px stroke) and the type carries the precision,
   which is why 500 against a heavy chevron is the right balance rather than a
   mismatch. JetBrains Mono stops at 500 in any case.

   Sizes are in em off .brand so the whole lockup scales as one unit, and the
   mark stays tied to the cap height instead of a fixed pixel value. */
.brand {
  display: inline-flex; align-items: center;
  gap: 0.5em;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}
.brand svg {
  width: 1.3em; height: 1.3em; flex: none;
}
.brand b {
  font-family: var(--mono);
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -0.035em;   /* mono sets wide by nature; pull the lockup in */
  line-height: 1;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.125rem); }
.nav > a:not(.btn) {
  position: relative;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.005em;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.375rem;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--ink); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.25rem;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-toggle-bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle-bars i {
  display: block; height: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   Section frame
   ============================================================ */

.sec { padding: var(--sec-y) var(--gut); }
.sec--tint { background: var(--surface); }

/* Section masthead: the page reads as a report, so each section opens on a
   ruled line carrying its index and name. This is the page's one repeating
   label system, and it carries real structure rather than decoration. */
.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: clamp(2.25rem, 1.7rem + 1.8vw, 3.5rem);
}
.masthead-idx {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.08em; color: var(--accent);
}
.masthead-name {
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4;
}
.masthead-aside {
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-3);
  text-align: right;
}

/* The statement carries the section's argument, so it is the largest thing
   in it. No eyebrow, no subhead, no card. */
.statement {
  max-width: 22ch;
  font-size: var(--fs-stmt);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: clamp(2.5rem, 1.9rem + 2vw, 4rem);
}
.statement em { font-style: normal; color: var(--accent); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 2.3rem + 4vw, 6.5rem) var(--gut) clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
  overflow: clip;
}

/* Brand geometry at scale: the wordmark's upright bar, repeated as a measured
   rank against the right edge. Rectangles only, so nothing reads as a badge
   or a shard, and no border hacks that would force a horizontal scrollbar. */
.hero-art {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  display: flex; align-items: stretch; justify-content: flex-end;
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
  padding-left: 40%;
}
.hero-art .bar {
  display: block;
  width: clamp(2rem, 4.4vw, 4.5rem);
  background: var(--surface);
}
.bar-a { align-self: flex-start; height: 62%; background: var(--surface-2); }
.bar-b { align-self: flex-start; height: 100%; }
.bar-c { align-self: flex-start; height: 34%; background: var(--accent); width: clamp(0.5rem, 0.9vw, 0.875rem); }
.bar-d { align-self: flex-start; height: 82%; background: var(--surface-2); }

.hero-in {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 1rem + 1vw, 1.875rem);
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero-lead {
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

.hero-cta {
  display: flex; flex-wrap: wrap; gap: 0.875rem;
  margin-top: 0.5rem;
}

/* Ruled meta strip closes the fold, and doubles as the hero's baseline. */
.hero-meta {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.125rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--ink-3);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 0.5625rem; }
.hero-meta i { width: 6px; height: 6px; background: var(--accent); flex: none; }

/* ============================================================
   Attack chain
   The trace is an ordinary block of the page. It scrolls with everything
   else; the only scroll-linked thing here is the spine fill, which is
   paint, not position.
   ============================================================ */

.trace {
  --spine-x: 2.375rem;   /* width of the marker column */
  --idx: 2.375rem;       /* size of the marker itself */
  position: relative;
  isolation: isolate;
}

/* Spine, drawn once behind the rows. --p is written by the page script and
   defaults to fully drawn, so with no JS the line is simply there. */
.trace::before,
.trace::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(var(--spine-x) / 2 - 1px);
  top: 0; bottom: 0;
  width: 2px;
}
.trace::before { background: var(--line); }
.trace::after {
  background: linear-gradient(to bottom, var(--accent), var(--accent-deep));
  transform: scaleY(var(--p, 1));
  transform-origin: top;
}

.step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--spine-x) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  row-gap: 0.75rem;
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem) 0;
  border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step--end { padding-bottom: 0; }

.step-idx {
  grid-column: 1; grid-row: 1 / span 2;
  position: relative;
  align-self: start;
  display: grid; place-items: center;
  width: var(--idx); height: var(--idx);
  margin-left: calc((var(--spine-x) - var(--idx)) / 2);
  background: var(--bg);
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  color: var(--ink-3);
  transition: color .3s var(--ease);
}
.sec--tint .step-idx { background: var(--surface); }

/* The marker itself: a plain square, the same rectangle language as the rest. */
.step-idx::before {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--line-2);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.step-name {
  grid-column: 2; grid-row: 1;
  font-size: clamp(1.375rem, 1.1rem + 1.36vw, 2.125rem);
  font-weight: 800; letter-spacing: -0.03em;
  align-self: center;
}

.step-body {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  align-items: start;
  gap: 0.875rem clamp(1.5rem, 3vw, 3rem);
}
.step-body > p:first-child {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

.step-lvl {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding-top: 0.3125rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.step-lvl span {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Markers light as the reader passes them, which is the same information the
   spine carries. With no observer they simply sit in their resting state. */
.has-reveal .step.is-in .step-idx { color: var(--accent); }
.has-reveal .step.is-in .step-idx::before { border-color: var(--accent); }

.step--end .step-idx,
.has-reveal .step--end.is-in .step-idx { color: #fff; }
.step--end .step-idx::before,
.has-reveal .step--end.is-in .step-idx::before {
  border-color: var(--accent);
  background: var(--accent);
}

/* Hover reads the row, not a card. */
.step:hover .step-idx { color: var(--accent); }
.step:hover .step-idx::before { border-color: var(--accent); }
.step--end:hover .step-idx { color: #fff; }

/* ============================================================
   Engagements
   ============================================================ */

.svcs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0 clamp(1.75rem, 3vw, 3.5rem);
}

.svc {
  position: relative;
  padding: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem) 0 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  border-top: 1px solid var(--line-2);
}
.svc::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.svc:hover::before { transform: scaleX(1); }

.svc h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.625rem;
  max-width: 22ch;
}
.svc p {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

.svcs-more {
  margin-top: clamp(2.5rem, 2rem + 1.8vw, 4rem);
  padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  border-top: 2px solid var(--ink);
}
.svcs-more-h {
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}
.mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.75rem, 3vw, 3.5rem);
}
.mini li { display: flex; flex-direction: column; gap: 0.375rem; }
.mini b { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; }
.mini span { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }

/* ============================================================
   The deliverable
   ============================================================ */

.deliv {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
  align-items: start;
}
.col { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-content: start; }

.block { display: grid; gap: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.block-h {
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

/* ---- Severity ---- */

.sev { display: grid; gap: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem); }
.sev-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem 1rem;
}
.sev-n {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sev-lbl { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.01em; }
.sev-track {
  display: block; height: 0.375rem;
  background: var(--surface-2);
}
.sec--tint .sev-track { background: var(--line); }
.sev-track i {
  display: block; height: 100%;
  transform: scaleX(var(--w, 1)); transform-origin: left;
}

/* Severity is never colour alone: the count, the word and the bar weight all
   carry it. */
.sev-crit .sev-n { color: var(--accent); }
.sev-crit .sev-track i { background: var(--accent); }
.sev-high .sev-track i { background: var(--accent-deep); }
.sev-med  .sev-track i { background: var(--ink-2); }
.sev-low  .sev-n { color: var(--ink-3); }
.sev-low  .sev-track i { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---- Remediation rows ---- */

.rows { display: grid; }
.rows li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--line);
}
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.rows li > span:first-child { font-size: var(--fs-body); font-weight: 600; }
.st {
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.st-ok { color: var(--ok); }
.st-open { color: var(--accent); }
.st-prog { color: var(--warn); }

/* ---- The finding excerpt ---- */

.finding {
  display: grid; gap: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 4px solid var(--accent);
}
.finding-tag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.finding-id { color: var(--ink-3); }
.finding-sev { color: var(--on-accent); background: var(--accent); padding: 0.3125rem 0.625rem; }

.finding h3 {
  font-size: clamp(1.375rem, 1.1rem + 1.36vw, 2.125rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.14;
  max-width: 26ch;
}

.kv {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.875rem clamp(1.25rem, 2vw, 2rem);
}
.kv dt {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.3125rem;
}
.kv dd { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

.retest {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.875rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body); font-weight: 600;
}
.retest span {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ok);
}

/* ---- Engagement rail ---- */

.tl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 2vw, 2rem);
}
.tl li {
  display: grid; gap: 0.5rem; align-content: start;
  padding-top: 0.875rem;
  border-top: 3px solid var(--accent);
  min-width: 0;
}
.tl li:nth-child(n+4) { border-top-color: var(--line-2); }
.tl b { font-size: var(--fs-small); font-weight: 800; letter-spacing: 0.02em; }
.tl p { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }

/* ============================================================
   Credentials
   ============================================================ */

.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 clamp(1.5rem, 2.5vw, 3rem);
}
.creds li {
  display: grid; gap: 0.25rem; align-content: start;
  padding: 1.125rem 0 1.375rem;
  border-top: 1px solid var(--line-2);
}
.creds b {
  font-family: var(--mono);
  font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.02em;
  color: var(--accent);
}
.creds span { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); }

/* ============================================================
   Pricing
   ============================================================ */

.price {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 1.5rem + 1.8vw, 3.5rem);
  align-items: start;
}
.fig { display: grid; gap: 0.5rem; align-content: start; }
.fig b {
  font-size: var(--fs-fig);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.fig span { font-size: var(--fs-body-lg); font-weight: 600; color: var(--ink); }
.fig em { font-style: normal; font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); }

.fig--cta { gap: 1.25rem; justify-items: start; }
.fig--cta p { font-size: var(--fs-small); color: var(--ink-3); max-width: 32ch; }

/* ============================================================
   Closing band
   ============================================================ */

.close {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(4.5rem, 3.3rem + 4vw, 8rem) var(--gut);
  background: var(--dark);
  color: #fff;
}
/* Same bar rank as the hero, inverted onto the dark ground. */
.close-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.close-art span {
  position: absolute; right: clamp(2.5rem, 7vw, 8rem); top: 0; bottom: 0;
  width: clamp(4rem, 9vw, 9rem);
  background: rgba(255, 255, 255, .045);
}
.close-art::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  width: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--accent);
}

.close-in {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2rem, 1.5rem + 2vw, 3.75rem);
}
.close-copy { flex: 1 1 28rem; }
.close h2 {
  font-size: clamp(2rem, 1.42rem + 2.9vw, 3.75rem);
  line-height: 1.04; letter-spacing: -0.035em;
  max-width: 17ch;
}
/* Owner's call: the plain crimson, same as everywhere else on the page.
   Worth knowing that #c30017 on #191919 is 2.79:1, just under the 3:1 AA
   floor for large text. Switch to a lighter red here if that ever matters. */
.close h2 em { font-style: normal; color: var(--accent); }
.close p {
  margin-top: 1.25rem;
  max-width: 50ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--on-dark);
}
.close-act {
  display: grid; justify-items: start; gap: 1rem;
  flex: 0 1 auto;
}
.close .btn-on-dark {
  padding: 1.125rem 2.25rem;
  font-size: var(--fs-body);
}
.close-alt {
  font-size: var(--fs-small);
  color: var(--on-dark);
  max-width: 30ch;
}

/* ============================================================
   Footer
   ============================================================ */

.ftr {
  padding: clamp(2.25rem, 1.9rem + 1.4vw, 3rem) var(--gut) clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  background: var(--dark-2);
  color: var(--on-dark);
}
.ftr-in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
}
.ftr .brand { color: #fff; }
.ftr nav { display: flex; flex-wrap: wrap; gap: 0.625rem clamp(1.25rem, 2.2vw, 1.875rem); }
.ftr nav a {
  font-size: var(--fs-small); font-weight: 500; color: var(--on-dark);
  transition: color .2s var(--ease);
}
.ftr nav a:hover { color: #fff; }
.ftr-note {
  margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  padding-top: 1.375rem;
  border-top: 1px solid #262626;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.625rem clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-label); font-weight: 500;
  color: var(--on-dark-2);
}

/* ============================================================
   Reveal
   Armed by an inline head script only when an observer exists to undo it,
   so the page is fully visible in every other case.
   ============================================================ */

.has-reveal [data-anim] {
  opacity: 0;
  transform: translateY(1.125rem);
  transition:
    opacity .75s var(--ease-io) var(--d, 0ms),
    transform .75s var(--ease-io) var(--d, 0ms);
}
.has-reveal [data-anim].is-in { opacity: 1; transform: none; }

/* Severity bars draw themselves once the block arrives. */
.has-reveal .sev-track i {
  transform: scaleX(0);
  transition: transform .9s var(--ease-io) .15s;
}
.has-reveal [data-anim].is-in .sev-track i { transform: scaleX(var(--w, 1)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .has-reveal [data-anim] { opacity: 1; transform: none; }
  .has-reveal .sev-track i { transform: scaleX(var(--w, 1)); }
  .trace::after { transform: scaleY(1); }
}

/* ============================================================
   Responsive
   Breakpoints only where the content actually breaks. Most grids are
   already breakpoint-free via auto-fit + minmax.
   ============================================================ */

/* Wide desktop: the trace gets a roomier spine column. */
@media (min-width: 75rem) {
  .trace { --spine-x: 4.75rem; --idx: 2.75rem; }
}

/* The two-column deliverable stops working once each column is under ~34rem. */
@media (max-width: 68.75rem) {
  .deliv { grid-template-columns: minmax(0, 1fr); }
  .col--b { order: -1; }
}

/* Step prose and the access level stop sitting side by side. */
@media (max-width: 60rem) {
  .step-body { grid-template-columns: minmax(0, 1fr); }
  .step-lvl {
    flex-direction: row; align-items: baseline; gap: 0.625rem;
    padding-top: 0;
  }
}

/* Menu collapse. Nav becomes a sheet under the header rather than a
   reflowed header row, so the header height never jumps. */
@media (max-width: 56.25rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: var(--z-menu);
    display: none;
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gut) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(20, 22, 26, .08);
  }
  .nav.open { display: flex; }
  .nav > a:not(.btn) {
    padding: 1rem 0;
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--line);
  }
  .nav > a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 1.25rem; padding-block: 1.0625rem; }
}

/* Phones: the rank thins to two quiet bars so nothing sits behind the
   headline. */
@media (max-width: 56.25rem) {
  .bar-a, .bar-d { display: none; }
  .hero-art { gap: 0.5rem; padding-left: 60%; }
  .hero-art .bar { width: clamp(1.25rem, 5vw, 2rem); }
  .bar-b { height: 44%; }
  .bar-c { height: 22%; width: 0.375rem; }
}

@media (max-width: 40rem) {
  .masthead {
    grid-template-columns: auto 1fr;
    row-gap: 0.5rem;
  }
  .masthead-aside {
    grid-column: 1 / -1;
    text-align: left;
  }
  .statement { max-width: 18ch; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .kv dt { padding-top: 0.875rem; }
  .kv dt:first-of-type { padding-top: 0; }
  .hero-cta .btn { flex: 1 1 14rem; }
  .close-act { justify-items: stretch; width: 100%; }
  .close .btn-on-dark { width: 100%; }
}

@media (max-width: 26.25rem) {
  .trace { --spine-x: 2rem; --idx: 2rem; }
  .sev-row { grid-template-columns: 2.75rem minmax(0, 1fr); }
}

/* Very wide displays: hold the measure, let the gutters grow. */
@media (min-width: 100rem) {
  :root { --wrap: 88rem; }
}

/* Safari before 16 has no overflow: clip. Those two sections have nothing
   sticky inside them, so hidden is a safe stand-in there and nowhere else. */
@supports not (overflow: clip) {
  .hero, .close { overflow: hidden; }
  /* Deliberately NOT overflow-x on body: that makes the body a scroll
     container and kills the sticky header. The two art wells above are the
     only things that can overflow, and they clip themselves. */
}

@media print {
  .hdr, .hero-art, .close-art, .nav-toggle, .skip { display: none !important; }
  body { font-size: 11pt; }
  .sec { padding-block: 1.5rem; }
  .has-reveal [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Perimeter scan  (/scan/)
   Same system as the homepage: hairline rules, no boxes, one accent.
   The ticker is the one place terminal type earns its keep, because it
   literally is streamed tool output.
   ============================================================ */

/* Visually hidden, for labels the design carries but the DOM still needs. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* First section on a page with no hero needs to clear the sticky header. */
.sec--top { padding-top: clamp(2.5rem, 2rem + 2vw, 4.5rem); }

.scan-lead {
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: clamp(2rem, 1.6rem + 1.4vw, 3rem);
}

.scan-form {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: stretch;
  max-width: 44rem;
}
.scan-form input {
  flex: 1 1 18rem; min-width: 0;
  padding: 1rem 1.125rem;
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink-3);
  border-radius: 2px;
  transition: border-color .2s var(--ease);
}
.scan-form input::placeholder { color: var(--ink-3); }   /* 5.29:1, not a faint grey */
.scan-form input:hover { border-color: var(--ink-2); }
.scan-form input:focus { border-color: var(--accent); outline: none; }
.scan-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scan-form .btn { flex: 0 0 auto; }

.scan-note {
  margin-top: 1rem;
  max-width: 58ch;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 clamp(1.5rem, 2.5vw, 3rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.checks li {
  display: grid; gap: 0.375rem; align-content: start;
  padding: 1.125rem 0 1.5rem;
  border-top: 1px solid var(--line-2);
}
.checks b { font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.005em; }
.checks span { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }

/* ---- Streamed output ---- */

.ticker { display: grid; gap: 0.375rem; }
.ticker:empty { display: none; }
.tick {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.625rem;
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity .35s var(--ease-io), transform .35s var(--ease-io);
}
.tick.is-in { opacity: 1; transform: none; }
.tick::before { content: "→"; color: var(--accent); }
.tick--err { color: var(--ink); }
.tick--err::before { content: "!"; font-weight: 700; }

/* ---- Result ---- */

.results {
  margin-top: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
  padding-top: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  border-top: 2px solid var(--ink);
  display: grid;
  gap: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);
}

.grade {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 1.2rem + 2vw, 3rem);
}
.gauge { position: relative; flex: none; width: clamp(7rem, 14vw, 9.5rem); aspect-ratio: 1; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 7; }
.gauge-track { stroke: var(--line); }
.gauge-fill {
  stroke: var(--ink-3);
  stroke-linecap: butt;
  transition: stroke-dashoffset 1.1s var(--ease-io), stroke .3s var(--ease);
}
.gauge-fill[data-band="good"] { stroke: var(--ok); }
.gauge-fill[data-band="warn"] { stroke: var(--warn); }
.gauge-fill[data-band="crit"] { stroke: var(--accent); }

.gauge-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.125rem;
}
.gauge-num b {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gauge-num span {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-3);
}

.grade-copy { flex: 1 1 20rem; display: grid; gap: 0.625rem; }
.grade-copy h3 { font-size: var(--fs-h3); }
.grade-copy p { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }

/* Findings: level is a word, never a colour on its own. */
.findings { display: grid; }
.finding-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 1.125rem 0 1.25rem;
  border-top: 1px solid var(--line-2);
}
.finding-row:last-child { border-bottom: 1px solid var(--line-2); }
.finding-lvl {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-top: 0.25rem;
  color: var(--ink-3);
}
.finding-row--crit .finding-lvl { color: var(--accent); }
.finding-row--warn .finding-lvl { color: var(--warn); }
.finding-row--good .finding-lvl { color: var(--ok); }
.finding-row b { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; }
.finding-row p { margin-top: 0.25rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); max-width: 64ch; }

.scan-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  border-top: 1px solid var(--line-2);
}
.scan-cta p { flex: 1 1 26rem; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }

@media (max-width: 40rem) {
  .scan-form .btn { flex: 1 1 100%; }
  .finding-row { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .finding-lvl { padding-top: 0; }
  .scan-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tick { opacity: 1; transform: none; }
  .gauge-fill { transition: none; }
}

/* ============================================================
   Pricing  (/pricing/)
   Two tiers, set as ruled columns rather than the usual bordered
   pricing cards. The figure does the shouting; nothing needs a box
   around it to be read as a tier.
   ============================================================ */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);
}

.tier {
  display: grid; gap: 0.875rem; align-content: start;
  padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 2px solid var(--line-2);
}
/* The busier tier gets the accent rule, which is the whole visual
   difference between them. No badge chrome, no scale-up, no shadow. */
.tier--lead { border-top-color: var(--accent); }

.tier-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.tier-flag {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  padding: 0.25rem 0.5rem;
}

.tier-fig b {
  display: block;
  font-size: var(--fs-fig);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}

.tier-sub {
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
}

.tier-scope {
  display: grid; gap: 0.25rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.tier-scope span {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

.tier-inc { display: grid; gap: 0.625rem; }
.tier-inc li {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}
/* A square, not a tick: same rectangle language as everything else. */
.tier-inc li::before {
  content: ""; width: 0.4375rem; height: 0.4375rem;
  margin-top: 0.5em;
  background: var(--accent);
}

.tier-more a {
  font-size: var(--fs-small); font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  transition: color .2s var(--ease);
}
.tier-more a:hover { color: var(--accent); }

/* ---- Adjacent-scope notes ---- */

.notes { display: grid; }
.note-row {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1.6fr);
  gap: 0.75rem clamp(1.5rem, 3vw, 3.5rem);
  padding: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem) 0;
  border-top: 1px solid var(--line-2);
}
.note-row:last-child { border-bottom: 1px solid var(--line-2); }
.note-row h3 { font-size: var(--fs-h3); }
.note-row p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.note-row a {
  font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--accent);
  transition: color .2s var(--ease);
}
.note-row a:hover { color: var(--accent); }

/* ---- FAQ ----
   Native <details>, so the answers are in the DOM for crawlers and the
   FAQPage markup on this page is backed by visible content. No JS. */

.faq { display: grid; }
.qa { border-top: 1px solid var(--line-2); }
.qa:last-of-type { border-bottom: 1px solid var(--line-2); }

.qa summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.125rem, 1rem + 0.6vw, 1.625rem) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* The marker is a plus that becomes a minus. Built from two rules so it
   stays crisp at any size and needs no icon font. */
.qa summary::after {
  content: "";
  justify-self: end;
  width: 0.875rem; height: 0.875rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.qa[open] summary::after {
  background: linear-gradient(var(--accent), var(--accent)) center/100% 2px no-repeat;
  transform: rotate(180deg);
}

.qa-body { padding-bottom: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); }
.qa-body p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 72ch;
}

@media (max-width: 48rem) {
  .note-row { grid-template-columns: minmax(0, 1fr); }
}

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

/* ---- Homepage engagement links ---- */
/* Three of the engagement cards link to their service page. The heading keeps
   its ink colour and gains the accent only on hover, so the card reads the same
   whether or not it happens to be linked. */
.svc h3 a { color: inherit; transition: color .2s var(--ease); }
.svc h3 a:hover { color: var(--accent); }
.svcs-all {
  margin-top: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.svcs-all a {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: color .2s var(--ease);
}
.svcs-all a:hover { color: var(--accent); }