/* Page-specific layout. Components shared across pages live in
   components.css; this file is for sections that exist on one page. */

/* =========================================================================
   Bands: full-bleed page sections. Add .theme-light for the light variant
   and .band--alt for the slightly darker alternate tone.
   ========================================================================= */

.band {
  padding-block: var(--section-gap);
  background-color: var(--c-bg);
  color: var(--c-text-muted);
}

/* A band that holds only a heading block needs no trailing gap. */
.band .section-head:last-child {
  margin-bottom: 0;
}

.band--mid {
  border-block: 1px solid var(--c-border-soft);
}

.band--alt {
  background-color: var(--c-bg-deep);
  border-block: 1px solid var(--c-border-soft);
}

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

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--c-bg-deep);
  border-bottom: 1px solid var(--c-border-soft);
}

/* Soft accent glow behind the hero, purely decorative. */
.hero__glow {
  position: absolute;
  top: -10%;
  right: -6%;
  width: 35rem;
  height: 35rem;
  background: radial-gradient(circle, var(--c-accent-glow), transparent 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-9) var(--space-8);
  align-items: center;
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}

/* On phones the home hero fills the first screen on its own (heading, lead,
   buttons) and the track record starts below the fold. On wider screens the
   hero and the track record share the first screen: the text takes the
   space left above the tiles. The header is sticky, so it is subtracted
   from the viewport height. A window too short for both just scrolls. */
.hero--first-screen .hero__inner {
  min-height: calc(100vh - var(--header-height-m));
  min-height: calc(100svh - var(--header-height-m));
}

@media (min-width: 61.25em) {
  .hero--first-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .hero--first-screen .hero__inner {
    flex: 1;
    min-height: 0;
  }

  /* The numbers are already in view, so the arrow has nothing to point at. */
  .hero--first-screen .hero__scroll { display: none; }
}

/* A quiet arrow at the foot of the first screen: the numbers are below. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  display: grid;
  place-items: center;
  width: var(--hero-scroll-size);
  height: var(--hero-scroll-size);
  margin-left: calc(var(--hero-scroll-size) / -2);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-text-muted);
  animation: hero-scroll-nudge 2.4s var(--ease) infinite;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hero__scroll:hover {
  color: var(--c-accent-text);
  border-color: var(--c-accent-line);
}

@keyframes hero-scroll-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(0.375rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* On a short window (a phone on its side) the arrow would sit on the buttons. */
@media (max-height: 34rem) {
  .hero__scroll { display: none; }
}

.hero__record {
  position: relative;
  padding-bottom: var(--hero-pad-bottom);
}
.hero__title-accent {
  color: var(--c-accent-soft);
}

.hero__title {
  font-size: var(--fs-hero);
  max-width: 17ch;
  margin-bottom: var(--space-5);
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-width: 54ch;
  margin-bottom: var(--space-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

/* =========================================================================
   Section heads shared by services / methodology / track record / FAQ
   ========================================================================= */

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-8);
}

.section-head__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
}

@media (min-width: 56.25em) {
  .section-head__lead { margin-top: var(--space-4); }
}

/* =========================================================================
   How we work: a four-step journey (home page)
   The default state is fully lit. journey.js adds .is-armed (unlit) and then
   .is-lit when the block scrolls into view, so visitors without JavaScript or
   with reduced motion simply see the finished state.
   ========================================================================= */

.journey {
  position: relative;
  /* Colour of the band behind the path, used to cut the path around nodes. */
  --journey-bg: var(--c-bg-deep);
}

.journey__track {
  position: absolute;
  top: calc(var(--journey-node) / 2 - var(--journey-track) / 2);
  left: calc(var(--journey-node) / 2);
  right: 0;
  height: var(--journey-track);
  background: repeating-linear-gradient(90deg, var(--c-border) 0 6px, transparent 6px 12px);
  overflow: hidden;
}

.journey__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-accent) 0 84%, transparent 100%);
  transform-origin: left center;
}

.journey__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--journey-gap);
  list-style: none;
  padding: 0;
}

.journey__step {
  --i: 0;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid; /* keeps names, text and "You get" aligned across steps */
  row-gap: var(--space-3);
  min-width: 0;
  margin: 0;
}

.journey__marker {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--journey-node);
  height: var(--journey-node);
  border: 1.5px solid var(--c-accent);
  border-radius: var(--radius-node);
  background: linear-gradient(var(--c-accent-wash), var(--c-accent-wash)), var(--journey-bg);
  color: var(--c-accent-text);
  box-shadow: 0 0 0 8px var(--journey-bg); /* cuts the path around each node */
}

.journey__marker svg {
  width: var(--journey-icon);
  height: var(--journey-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey__name {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-journey-name);
  line-height: 1;
}

.journey__what {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.journey__get {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
}

/* The result line: a small accent arrow instead of a "You get" label. */
.journey__get-text {
  position: relative;
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--c-text);
}

.journey__get-text::before {
  content: "→" / "";
  position: absolute;
  left: 0;
  color: var(--c-accent-text);
  font-family: var(--font-mono);
}

/* ---- mini artifacts: scope list, port scan, report sheet ----------------- */

.journey-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--journey-sheet-w);
  min-height: var(--journey-sheet-h);
  margin-top: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sheet);
  background-color: var(--c-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-sheet);
  line-height: 1.35;
  color: var(--c-text-muted);
}

.journey-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-chip);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-sheet__bar {
  display: block;
  width: var(--w, 100%);
  height: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--c-border);
}

.journey-sheet__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.journey-sheet__row .journey-sheet__bar {
  flex: 1 1 auto;
}

.journey-sheet__line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.journey-sheet__note {
  color: var(--c-text-muted);
}

.journey-scope {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.journey-tag {
  flex: none;
  width: 30px;
  padding: 3px 0;
  border-radius: var(--radius-sm);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.journey-tag--in {
  color: var(--c-ok);
  box-shadow: inset 0 0 0 1px var(--c-ok-line);
}

.journey-tag--out {
  color: var(--c-text-dim);
  box-shadow: inset 0 0 0 1px var(--c-border);
}

.journey-scope__out {
  color: var(--c-text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--c-border);
}

.journey-nda {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--c-ok);
}

.journey-cmd {
  color: var(--c-text);
}

.journey-prompt {
  color: var(--c-accent-text);
}

.journey-code {
  display: flex;
  flex-direction: column;
}

.journey-code__line {
  display: block;
  margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
  white-space: pre;
}

.journey-code__line--hit {
  background-color: var(--c-accent-wash);
  box-shadow: inset 2px 0 var(--c-accent-text);
  color: var(--c-text);
}

.journey-chip {
  flex: none;
  display: inline-grid;
  font-size: var(--fs-chip);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.journey-chip > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) 7px;
  border-radius: var(--radius-lg);
}

.journey-chip__high {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}

.journey-chip__fixed {
  background-color: var(--c-ok-wash);
  box-shadow: inset 0 0 0 1px var(--c-ok);
  color: var(--c-ok);
}

.journey-check {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-chip--retest .journey-chip__high {
  opacity: 0;
}

/* ---- unlit state (only while JavaScript waits for the scroll) ----------- */

.journey.is-armed:not(.is-lit) .journey__fill { transform: scaleX(0); }

.journey.is-armed:not(.is-lit) .journey__marker {
  border-color: var(--c-border);
  background: var(--journey-bg);
  color: var(--c-text-dim);
}

.journey.is-armed:not(.is-lit) .journey-reveal {
  opacity: 0.35;
  transform: translateY(6px);
}

.journey.is-armed:not(.is-lit) .journey-nda { opacity: 0; }

.journey.is-armed:not(.is-lit) .journey-code__line--hit {
  background: transparent;
  box-shadow: none;
  color: var(--c-text-muted);
}

.journey.is-armed:not(.is-lit) .journey-chip--alert { opacity: 0; }
.journey.is-armed:not(.is-lit) .journey-chip--retest .journey-chip__high { opacity: 1; }
.journey.is-armed:not(.is-lit) .journey-chip--retest .journey-chip__fixed { opacity: 0; }

/* ---- lighting up --------------------------------------------------------- */

.journey.is-armed.is-lit .journey__fill {
  transition: transform var(--journey-dur) var(--ease-journey);
}

.journey.is-armed.is-lit .journey__marker {
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  transition-delay: calc(var(--i) * var(--journey-step) + 80ms);
}

.journey.is-armed.is-lit .journey__marker::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--c-accent-text);
  border-radius: inherit;
  pointer-events: none;
  animation: journey-ping 0.9s var(--ease-journey) calc(var(--i) * var(--journey-step) + 80ms) 1 both;
}

.journey.is-armed.is-lit .journey-reveal {
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--i) * var(--journey-step) + 140ms);
}

.journey.is-armed.is-lit .journey-nda,
.journey.is-armed.is-lit .journey-code__line--hit,
.journey.is-armed.is-lit .journey-chip--alert,
.journey.is-armed.is-lit .journey-chip--retest > span {
  transition: opacity 0.45s ease, color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
  transition-delay: calc(var(--i) * var(--journey-step) + 700ms);
}

.journey.is-armed.is-lit .journey-chip--alert {
  transition-delay: calc(var(--i) * var(--journey-step) + 1000ms);
}

.journey.is-armed.is-lit .journey-chip--retest > span {
  transition-delay: calc(var(--i) * var(--journey-step) + 900ms);
}

@keyframes journey-ping {
  0% { opacity: 0; transform: scale(1); }
  15% { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.45); }
}

/* ---- phones and narrow tablets: a vertical path -------------------------- */

@media (max-width: 55.99em) {
  .journey__track {
    top: calc(var(--journey-node) / 2);
    right: auto;
    bottom: 0;
    left: calc(var(--journey-node) / 2 - var(--journey-track) / 2);
    width: var(--journey-track);
    height: auto;
    background: repeating-linear-gradient(180deg, var(--c-border) 0 6px, transparent 6px 12px);
  }

  .journey__fill {
    background: linear-gradient(180deg, var(--c-accent) 0 88%, transparent 100%);
    transform-origin: center top;
  }

  .journey.is-armed:not(.is-lit) .journey__fill { transform: scaleY(0); }

  .journey__steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }

  .journey__step {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: var(--journey-node) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: var(--space-2);
  }

  .journey__marker {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .journey__step > :not(.journey__marker) {
    grid-column: 2;
  }

  .journey__name {
    margin-top: var(--space-3);
  }
}

/* =========================================================================
   Track record: stat band
   ========================================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--c-border-soft);
  background-color: var(--c-border-soft);
  overflow: hidden;
  list-style: none;
  padding: 0;
}

@media (min-width: 56em) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats li + li {
  margin-top: 0;
}

.stats__item {
  height: 100%;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem) clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
  background-color: var(--c-bg);
}

.stats__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-stat);
  color: var(--c-text);
}

.stats__label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* The fourth tile: a short list of achievements instead of one number */
.stats__awards {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.stats__awards li {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.stats__award {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-accent-text);
}

.stats__awards .stats__label {
  margin-top: var(--space-1);
}

/* =========================================================================
   Founder
   ========================================================================= */

.founder {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 56em) {
  .founder {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-9);
  }
}

.founder__figure {
  position: relative;
  max-width: 20rem;
}

.founder__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
}

/* Home About block: a plain section heading, then the founder's name. */
.founder__heading {
  margin-bottom: var(--space-5);
}

.founder__person {
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-text);
}

.founder-teaser__link {
  display: inline-flex;
  margin-top: var(--space-2);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--c-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
}

.founder-teaser__link:hover {
  color: var(--c-accent-text);
}

.founder__role {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--space-5);
}

.founder__bio p {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

/* Links get a 44px tap height without changing the layout. */
.founder__links a {
  display: inline-block;
  padding-block: var(--space-3);
  margin-block: calc(-1 * var(--space-3));
}

.founder__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}

.founder__links li + li {
  margin-top: 0;
}

/* =========================================================================
   Badge row -- real earned-credential artwork (OffSec/Synack badge images),
   as opposed to .badge-hex, which is our own text-only hexagon for numbers.
   ========================================================================= */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-7);
}

/* Sits inside the founder bio column rather than as its own centered
   section, with a bit less vertical weight since it's no longer a section
   of its own. On phones the 2×2 grid is centred (left-aligned it left an
   empty column on the right); once all four fit on one row it lines up
   with the text on the left. */
.badge-row--inline {
  display: grid;
  grid-template-columns: repeat(2, var(--badge-col, 6.5rem));
  gap: var(--space-5) var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* All four on one row as soon as there's room for it. */
@media (min-width: 40em) {
  .badge-row--inline {
    grid-template-columns: repeat(4, var(--badge-col, 6.5rem));
    justify-content: start;
  }
}

.badge-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 120px;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

a.badge-row__item:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.badge-row__item img {
  display: block;
  width: 100%;
  height: auto;
}

.badge-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: center;
}

/* About page: every column is the same width (wide enough for the longest
   two-line label), so the badges sit at equal distances from each other. The
   art is a fixed size and centred above its label. These come after the base
   rules above so they win. */
.badge-row--inline .badge-row__item {
  width: auto;
  gap: var(--space-2);
}

.badge-row--inline .badge-row__item img {
  width: var(--badge-size, 3.225rem);
}

.badge-row--inline .badge-row__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  line-height: 1.35;
  white-space: nowrap;
}

/* =========================================================================
   Contact page: the "what to include" checklist
   ========================================================================= */

.checklist {
  list-style: none;
  padding: 0;
  max-width: 40rem;
}

.checklist li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-sm);
}

.checklist li + li {
  margin-top: var(--space-4);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--c-accent);
}

/* =========================================================================
   FAQ: split view. Wide blocks show the questions on the left and the
   selected answer in a panel on the right, first question open. Narrower:
   a plain accordion. Native <details name="faq"> (one open at a time), so
   it works without JavaScript and with the keyboard; faq.js only keeps one
   answer showing in split view and sizes the list to the panel. Height
   animates through ::details-content where supported.
   ========================================================================= */

.faq {
  container-type: inline-size;
  interpolate-size: allow-keywords;
}

.faq li + li {
  margin-top: 0;
}

.faq__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--space-5);
}

.faq__q {
  font-family: var(--font-display);
  font-size: var(--fs-faq-q);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-text);
  transition: color var(--faq-dur) var(--ease-faq);
}

.faq__a {
  max-width: 40em;
  font-size: var(--fs-faq-a);
  line-height: 1.6;
  color: var(--c-text);
}

.faq__a + .faq__a {
  margin-top: var(--space-3);
}

/* details mechanics */
.faq summary {
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:focus-visible {
  outline: var(--focus-width) solid var(--c-accent);
  outline-offset: 2px;
}

.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--faq-dur) var(--ease-faq),
              content-visibility var(--faq-dur) allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

.faq__body {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--faq-dur) var(--ease-faq),
              transform var(--faq-dur) var(--ease-faq);
}

.faq details[open] .faq__body {
  opacity: 1;
  transform: none;
}

/* + / x marker (accordion) */
.faq__mk {
  position: relative;
  flex: none;
  width: var(--faq-marker);
  height: var(--faq-marker);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: background-color var(--faq-dur) var(--ease-faq),
              border-color var(--faq-dur) var(--ease-faq);
}

.faq__mk::before,
.faq__mk::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  margin: -0.75px 0 0 -5px;
  background-color: var(--c-text);
  transition: background-color var(--faq-dur) var(--ease-faq),
              transform var(--faq-dur) var(--ease-faq);
}

.faq__mk::after { transform: rotate(90deg); }

.faq summary:hover .faq__mk { border-color: var(--c-accent); }
.faq summary:hover .faq__q { color: var(--c-accent-text); }

.faq details[open] > summary .faq__mk {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

.faq details[open] > summary .faq__mk::before { transform: rotate(45deg); }
.faq details[open] > summary .faq__mk::after { transform: rotate(135deg); }

.faq details[open] > summary .faq__mk::before,
.faq details[open] > summary .faq__mk::after {
  background-color: var(--c-on-accent);
}

/* ---- accordion (narrow) ---- */
.faq__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-border);
}

.faq__it {
  border-bottom: 1px solid var(--c-border-soft);
}

.faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--faq-row);
  padding: 10px 0;
}

.faq__body {
  padding: 0 0 22px;
}

.faq__pq,
.faq__empty {
  display: none;
}

/* ---- split view (wide) ---- */
@container (min-width: 900px) {
  .faq__list {
    position: relative;
    min-height: var(--faq-split-min);
    padding-right: var(--faq-panel-w);
  }

  .faq summary {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 12px;
    min-height: var(--faq-row);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  }

  .faq summary::after {             /* chevron pointing at the panel */
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--c-text-muted);
    border-right: 1.5px solid var(--c-text-muted);
    transform: rotate(45deg);
    transition: transform var(--faq-dur) var(--ease-faq),
                border-color var(--faq-dur) var(--ease-faq);
  }

  .faq__mk { display: none; }

  .faq__it[open] > summary {
    background-color: var(--c-surface);
    box-shadow: inset 3px 0 0 var(--c-accent);
  }

  .faq__it[open] > summary .faq__q { color: var(--c-accent-text); }

  .faq__it[open] > summary::after {
    border-color: var(--c-accent);
    transform: translateX(4px) rotate(45deg);
  }

  .faq details::details-content {
    block-size: auto;
    overflow: visible;
  }

  .faq__body {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--faq-panel-w) - var(--space-7));
    padding: var(--space-6) 36px 36px;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: inset 0 var(--tested-marker) 0 var(--c-accent);
  }

  .faq__pq {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: var(--fs-faq-panel-q);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    color: var(--c-text);
  }

  .faq__a { font-size: var(--fs-faq-a-lg); }

  .faq__list:not(:has(details[open])) .faq__empty {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: calc(var(--faq-panel-w) - var(--space-7));
    height: 100%;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    border: 1px dashed var(--c-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq *,
  .faq *::before,
  .faq *::after,
  .faq details::details-content {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   Service pages: scope grid and report outline
   ========================================================================= */

@media (min-width: 48em) {

}

/* ---- hero: text on the left, the service's illustration on the right ----
   Sized by its own width (container query units), so the type scales with
   the hero rather than the window. A page without an illustration yet adds
   .service-hero--text-only and the text takes the wider column. The section
   also carries .intro-grid, like the first band of every other page. */

.service-hero {
  background-color: var(--c-bg-deep);   /* as .page-intro, so the grid reads the same */
  border-bottom: 1px solid var(--c-border-soft);
  container-type: inline-size;
}

/* The site's intro grid (.intro-grid in components.css), faded under the
   illustration so its lines don't compete with the map's own boxes. */
.service-hero:not(.service-hero--text-only)::before {
  -webkit-mask-image:
    linear-gradient(180deg, #000, transparent 90%),
    radial-gradient(ellipse 34% 52% at 74% 50%, rgba(0, 0, 0, 0.15) 55%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, #000, transparent 90%),
    radial-gradient(ellipse 34% 52% at 74% 50%, rgba(0, 0, 0, 0.15) 55%, #000 100%);
          mask-composite: intersect;
}

.service-hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-7);
}

.service-hero__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-decoration: none;
}

.service-hero__back:hover {
  color: var(--c-text);
}

.service-hero__title {
  margin-top: var(--space-3);
  font-size: var(--fs-svc-title);
  line-height: 1;
  letter-spacing: -0.005em;
}

/* The benefit line under the service name: same family as the h1, set
   apart by colour. */
.service-hero__tagline {
  max-width: 24em;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-svc-tagline);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-text-muted);
}

.service-hero__lede {
  max-width: 30em;
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.service-hero__cta {
  margin-top: 1.75rem;
}

.service-hero__art { display: none; }      /* full illustration: wide heroes */
.service-hero__art-m { display: block; }   /* compact version: phones and tablets */

/* On a tablet the compact version would stretch to the full column and its
   mono labels would grow to twice the body size. */
.service-hero__art-m { max-width: var(--service-art-m-max); }

.service-hero__art svg,
.service-hero__art-m svg {
  display: block;
  width: 100%;
  height: auto;
}

@container (min-width: 900px) {
  .service-hero__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: center;
    padding-top: var(--space-5);
    padding-bottom: var(--space-9);
  }

  .service-hero__txt { grid-column: 1 / span 5; }
  .service-hero--text-only .service-hero__txt { grid-column: 1 / span 7; }
  .service-hero__art { display: block; grid-column: 6 / span 7; padding-left: var(--space-8); }
  .service-hero__art-m { display: none; }
}

/* Where the page has room beyond the content edge, the illustration grows
   into it, so it keeps its gap from the text without shrinking. */
@container (min-width: 1280px) {
  .service-hero__art { margin-right: calc(-1 * var(--hero-art-bleed)); }
}

@container (min-width: 1440px) {
  .service-hero__art { margin-right: calc(-1 * var(--hero-art-bleed-lg)); }
}

/* ---- network map: the attack path from the internet to Domain Admin ----
   .onN on the hero lights everything tagged .sN; service-hero.js removes
   the classes on load and adds them back one by one. */

.net-map text { font-family: var(--font-mono); }
.net-map .zone { fill: none; stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 4 4; }
.net-map .zl { fill: var(--c-text-faint); font-size: 9.5px; letter-spacing: 0.14em; }

.net-map .box {
  fill: var(--c-surface);
  stroke: var(--c-border);
  stroke-width: 1.25;
  transition: fill var(--hero-light-dur) ease var(--hero-light-delay),
              stroke var(--hero-light-dur) ease var(--hero-light-delay);
}

.net-map .h { fill: var(--c-text-muted); font-size: 11.5px; transition: fill var(--hero-light-dur) ease var(--hero-light-delay); }
.net-map .ip { fill: var(--c-text-faint); font-size: 9.5px; }
.net-map .ip-hot { fill: var(--c-accent-text); }

.net-map .wire {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  stroke-dasharray: 1 1;          /* with pathLength="1": hidden at offset 1, drawn at 0 */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--hero-wire-dur) ease;
}

.net-map .ring {
  fill: none;
  stroke: var(--c-accent-text);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0;
  transition: opacity var(--hero-light-dur) ease var(--hero-light-delay);
}

.net-map .chip { opacity: 0; transition: opacity var(--hero-light-dur) ease var(--hero-chip-delay); }
.net-map .chip rect { fill: var(--c-bg); stroke: var(--c-accent); stroke-width: 1; }
.net-map .chip .ct { font-size: 9.5px; letter-spacing: 0.1em; fill: var(--c-accent-text); }
.net-map .chip .cd { font-size: 10px; fill: var(--c-chip-text); }
.net-map .chip--hot rect { fill: var(--c-accent); }
.net-map .chip--hot .ct { fill: var(--c-on-accent); font-weight: var(--fw-semibold); font-size: 11px; letter-spacing: 0; }

.on1 .s1.wire, .on2 .s2.wire, .on3 .s3.wire, .on4 .s4.wire, .on5 .s5.wire, .on6 .s6.wire { stroke-dashoffset: 0; }
.on1 .s1 .box, .on2 .s2 .box, .on3 .s3 .box, .on4 .s4 .box, .on5 .s5 .box, .on6 .s6 .box { fill: var(--c-surface-hot); stroke: var(--c-accent); }
.on1 .s1 .h, .on2 .s2 .h, .on3 .s3 .h, .on4 .s4 .h, .on5 .s5 .h, .on6 .s6 .h { fill: var(--c-text); }
.on1 .s1.chip, .on2 .s2.chip, .on3 .s3.chip, .on4 .s4.chip, .on5 .s5.chip, .on6 .s6.chip,
.on1 .s1.ring, .on2 .s2.ring, .on3 .s3.ring, .on4 .s4.ring, .on5 .s5.ring, .on6 .s6.ring { opacity: 1; }

/* compact chain for phones and tablets: static */
.net-chain text { font-family: var(--font-mono); }
.net-chain .ln { stroke: var(--c-accent); stroke-width: 2; }
.net-chain .dot { fill: var(--c-accent); }
.net-chain .t { fill: var(--c-accent-text); font-size: 9.5px; letter-spacing: 0.1em; }
.net-chain .d { fill: var(--c-text); font-size: 12px; }
.net-chain .hot { fill: var(--c-accent); }
.net-chain .hot-t { fill: var(--c-on-accent); font-size: 11px; font-weight: var(--fw-semibold); }

@media (prefers-reduced-motion: reduce) {
  .service-hero *,
  .service-hero *::before,
  .service-hero *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- what's tested: two columns compared, on every service page ----------
   Network compares two tests the client orders separately: a table with
   matched rows, External | Internal, and on phones two zones split by the
   internet edge (separate markup, only one shown at a time, so screen
   readers get one copy). The other services are one engagement each and use
   the one-column table further down. */

.tested {
  container-type: inline-size;
}

.tested ul,
.tested ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tested li + li {
  margin-top: 0;
}

.tested__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--space-5);
}

.tested__sub,
.tested__get-h {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* shared pieces */
.tested__ico {
  flex: none;
  width: var(--tested-icon);
  height: var(--tested-icon);
  margin-top: 1px;
  fill: none;
  stroke: var(--c-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tested__ico--acc {
  width: var(--tested-icon-get);
  height: var(--tested-icon-get);
  margin-top: 0;
  stroke: var(--c-accent);
}

.tested__item-t,
.tested__get-t {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-tested-item);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--c-text);
}

.tested__terms {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-tested-terms);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.tested__get-l {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-muted);
}

.tested__tag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-tested-tag);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
  border-radius: var(--radius-sm);
}

.tested__tag--start { background-color: var(--c-accent); color: var(--c-on-accent); }
.tested__tag--goal { padding: 2px 5px; border: 1px solid var(--c-accent); color: var(--c-accent-text); }

.tested__desk { display: none; }

/* a small note under the block: languages, safety, scope */
.tested__note {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-tested-terms);
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ---- narrow: two zones split by the internet edge ---- */
.tested__panel {
  margin-top: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tested__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--space-5) 20px;
}

.tested__zone--ext { background-color: var(--c-bg); }

.tested__zone--int {
  padding-top: 34px;
  background-color: var(--c-surface);
  border-top: var(--tested-edge) solid var(--c-text);
}

.tested__edge {
  position: absolute;
  top: -11px;
  left: 20px;
  padding: 4px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-tested-edge);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-surface);
  background-color: var(--c-text);
  border-radius: var(--radius-sm);
}

.tested__zone-h { font-size: var(--fs-tested-col); line-height: 1; }
.tested__row { font-size: var(--fs-body); line-height: 1.4; color: var(--c-text); }
.tested__chips { display: grid; gap: var(--space-2); }

.tested__chip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.tested__zone--int .tested__chip {
  background-color: var(--c-bg);
  border-color: var(--c-border-soft);
}

.tested__get {
  margin-top: var(--space-7);
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}

.tested__get ol { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.tested__based { margin-top: var(--space-3); }
.tested__get li { display: flex; align-items: flex-start; gap: 14px; }

/* ---- wide: matched comparison table ---- */
.tested__tbl {
  width: 100%;
  margin-top: var(--space-7);
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
}

.tested__tbl th,
.tested__tbl td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--c-border-soft);
}

.tested__tbl .tested__k { width: var(--tested-label-col); }

.tested__tbl thead th,
.tested__tbl thead td {
  padding-top: 22px;
  padding-bottom: 18px;
  border-top: 0;
  border-bottom: 1px solid var(--c-border);
}

.tested__colh {
  font-family: var(--font-display);
  font-size: var(--fs-tested-col);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--c-text);
  box-shadow: inset 0 var(--tested-marker) 0 var(--c-accent);   /* accent rule on top of each column */
}

.tested__colh small {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-tested-tag);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.tested__tbl tbody th,
.tested__tbl tfoot th {
  padding-top: 19px;
  font-family: var(--font-mono);
  font-size: var(--fs-tested-terms);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.tested__tbl tbody td {
  font-size: var(--fs-tested-cell);
  line-height: 1.4;
  color: var(--c-text);
}

.tested__tbl .tested__ext { border-right: 1px solid var(--c-border-soft); }
.tested__tests li { display: flex; align-items: flex-start; gap: 10px; }
.tested__tests li + li { margin-top: var(--space-3); }
.tested__goal { font-weight: var(--fw-semibold); }

.tested__tbl tfoot th,
.tested__tbl tfoot td {
  background-color: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

.tested__gets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.tested__gets li { display: flex; align-items: flex-start; gap: var(--space-3); }

/* ---- one column: a single engagement (Web, code review, cloud, AI) ----
   The same table with one value column. "We test" items sit in a grid; on
   narrow blocks every row stacks, label above its content. */
.tested__tbl--single {
  display: table;
  border-top: var(--tested-marker) solid var(--c-accent);
}

/* The label column's width, set on <col>: without a header row the cell
   width alone doesn't hold in a fixed-layout table. */
.tested__kcol { width: var(--tested-label-col); }

.tested__tests--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4) var(--space-6);
}

.tested__tests--grid li + li { margin-top: 0; }

@container (max-width: 759px) {
  .tested__tbl--single,
  .tested__tbl--single tbody,
  .tested__tbl--single tfoot,
  .tested__tbl--single tr,
  .tested__tbl--single th,
  .tested__tbl--single td {
    display: block;
    width: auto;
  }

  .tested__tbl--single .tested__k { width: auto; padding-bottom: var(--space-1); }
  .tested__tbl--single td { padding-top: 0; border-top: 0; }
  .tested__tbl--single .tested__gets { grid-template-columns: minmax(0, 1fr); }
}

@container (min-width: 760px) {
  .tested__desk { display: table; }
  .tested__mob { display: none; }
}

@container (min-width: 760px) and (max-width: 999px) {
  .tested__tbl .tested__k,
  .tested__kcol { width: var(--tested-label-col-sm); }

  .tested__tbl th,
  .tested__tbl td { padding: 14px 18px; }
}

/* ---- what you get: deliverables beside a sample finding ------------------ */

.deliverables {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 60em) {
  .deliverables {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--finding-max));
  }
}

.finding {
  margin: 0;
  padding: var(--space-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  font-size: var(--fs-sm);
}

.finding__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.finding__sev {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.finding__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-text);
}

.finding__where {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}

.finding__body {
  margin: var(--space-4) 0 0;
}

.finding__body dt {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.finding__body dd {
  margin: var(--space-1) 0 0;
}

/* =========================================================================
   Services overview (/services/): a page for choosing, not a second copy of
   the home page's list. "Which one fits you" matrix (light), "Often
   combined" beside "Every engagement includes" (dark), and the report
   outline as a document (light, alternate). The matrix follows its own
   width; the two side-by-side bands follow the window. No JavaScript.
   ========================================================================= */

.fit {
  container-type: inline-size;
}

.fit ul,
.fit-mid ul,
.report-doc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit li + li,
.fit-mid li + li,
.report-doc li + li {
  margin-top: 0;
}

.fit-ico {
  flex: none;
  width: var(--fit-icon);
  height: var(--fit-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.fit-tags li {
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-fit-tag);
  line-height: 1.3;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.fit-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--c-accent-text);
}

/* ---- which one fits you: matrix ---- */
.fit__mx {
  width: 100%;
  margin-top: var(--space-5);
  border-collapse: collapse;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
}

.fit__mx thead th {
  padding: var(--space-3) 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-fit-tag);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
}

.fit__mx tbody th,
.fit__mx tbody td {
  padding: var(--space-4) 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--c-border-soft);
}

.fit__mx tbody tr {
  position: relative;
  transition: background-color var(--dur) var(--ease);
}

.fit__svc a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-fit-svc);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--c-text);
  text-decoration: none;
}

.fit__svc a::after {                 /* the whole row is the link */
  content: "";
  position: absolute;
  inset: 0;
}

.fit__svc .fit-ico {
  margin-top: 1px;
  transition: color var(--dur) var(--ease);
}

.fit__ar {
  display: inline-block;
  margin-left: 6px;
  color: var(--c-accent-text);
  transition: transform var(--dur) var(--ease);
}

.fit__nw { white-space: nowrap; }

.fit__best {
  font-size: var(--fs-fit-cell);
  line-height: 1.45;
  color: var(--c-text);
}

.fit__line {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-muted);
}

.fit__what .fit-tags { margin-top: var(--space-2); }

.fit__mx tbody tr:hover,
.fit__mx tbody tr:focus-within {
  background-color: var(--c-bg);
}

.fit__mx tbody tr:hover .fit__svc,
.fit__mx tbody tr:focus-within .fit__svc {
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.fit__mx tbody tr:hover .fit-ico,
.fit__mx tbody tr:focus-within .fit-ico { color: var(--c-accent); }

.fit__mx tbody tr:hover .fit__ar,
.fit__mx tbody tr:focus-within .fit__ar { transform: translateX(5px); }

.fit__svc a:focus-visible { outline: none; }

.fit__mx tbody tr:focus-within {
  outline: var(--focus-width) solid var(--c-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

.fit__lab { display: none; }

@container (min-width: 900px) {
  .fit__mx { table-layout: fixed; }
  .fit__c1 { width: var(--fit-col-svc); }
  .fit__c2 { width: var(--fit-col-best); }
}

@container (max-width: 899px) {
  .fit__mx,
  .fit__mx tbody,
  .fit__mx tr,
  .fit__mx th,
  .fit__mx td {
    display: block;
    width: auto;
  }

  .fit__mx {
    background: none;
    border: 0;
  }

  .fit__mx thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .fit__mx tbody tr {
    margin-bottom: 10px;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
  }

  .fit__mx tbody th,
  .fit__mx tbody td {
    padding: 6px var(--space-4);
    border: 0;
  }

  .fit__mx tbody th { padding-top: var(--space-4); }
  .fit__mx tbody td:last-child { padding-bottom: var(--space-4); }

  .fit__lab {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: var(--fs-tested-edge);
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }
}

/* ---- dark band: every engagement includes (left column, the right one is free) ---- */
.fit-mid {
  display: grid;
  gap: var(--space-7);
}

.includes .fit-ico {
  width: var(--fit-icon-sm);
  height: var(--fit-icon-sm);
  color: var(--c-accent-text);
}

.includes ul { margin-top: 18px; }

.includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px 0;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}

.includes li .fit-ico { margin-top: 1px; }

.includes__foot {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--c-text-muted);
}

@media (min-width: 60em) {
  .fit-mid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .includes { grid-column: 1 / span 6; }
}

/* ---- what every report contains: the outline as a document ---- */
.report-doc__lead {
  max-width: 40em;
  margin-top: var(--space-3);
  font-size: var(--fs-tested-cell);
  line-height: 1.6;
  color: var(--c-text-muted);
}

.report-doc__sheet {
  margin-top: 28px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 var(--tested-marker) 0 var(--c-accent);
}

.report-doc__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-fit-tag);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
}

.report-doc li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: var(--space-4) 20px;
  border-top: 1px solid var(--c-border-soft);
}

.report-doc li:first-child { border-top: 0; }
.report-doc .fit-num { padding-top: var(--space-1); }

.report-doc__t {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-fit-item);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--c-text);
}

.report-doc__d {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.report-doc__sev {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.report-doc__sev span {
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-tested-edge);
  line-height: 1.3;
  color: var(--c-accent-text);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
}

.report-doc__sev span:first-child {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}

@media (min-width: 60em) {
  .report-doc {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--space-6);
  }

  .report-doc__hd {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    grid-column: 1 / span 4;
  }

  .report-doc__sheet {
    grid-column: 6 / span 7;
    margin-top: 0;
  }

  .report-doc li {
    grid-template-columns: var(--fit-report-num) minmax(0, 1fr);
    padding: 18px 28px;
  }

  .report-doc__bar { padding: 14px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .fit *,
  .fit-mid * {
    transition: none !important;
  }
}

/* =========================================================================
   Prose -- long-form legal/policy content. base.css zeroes all margins, so
   plain headings and paragraphs need this to read as text rather than a
   wall of jammed-together lines.
   ========================================================================= */

.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.prose p,
.prose ul {
  max-width: var(--measure);
  margin-bottom: var(--space-5);
}

.prose li {
  font-size: var(--fs-sm);
}

/* =========================================================================
   Glow behind the contact band
   ========================================================================= */

.final-cta__glow {
  position: absolute;
  bottom: -30%;
  left: 50%;
  width: 40rem;
  height: 29rem;
  margin-left: -20rem;
  background: radial-gradient(circle, var(--c-accent-glow), transparent 62%);
  pointer-events: none;
}

/* =========================================================================
   Scroll reveal. effects.js adds .reveal to elements below the fold and
   .reveal--in as they scroll into view. Without JS nothing is hidden.
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal--in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Home: About block link and the contact section
   ========================================================================= */

.founder__more {
  margin-top: var(--space-6);
}

.contact-band {
  position: relative;
  overflow: hidden;
}

.contact-layout {
  position: relative;
  display: grid;
  gap: var(--space-8) var(--space-9);
  align-items: start;
}

@media (min-width: 56em) {
  .contact-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.contact-layout__intro h2 {
  margin-bottom: var(--space-4);
}

/* "What happens next" under the contact intro: three numbered steps. */
.next {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border);
}

.next__list {
  counter-reset: next;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.next__list li {
  counter-increment: next;
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.next__list li::before {
  content: counter(next);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--next-dot);
  height: var(--next-dot);
  border: 1px solid var(--c-accent-line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-accent-text);
}

.next__t {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-card);
  line-height: var(--lh-heading);
  color: var(--c-text);
}

.next__list p {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* "Prefer email?" line under the steps (contact band and /contact/). */
.contact-mail {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.contact-mail a { color: var(--c-accent-text); }

/* =========================================================================
   About page
   ========================================================================= */

/* Small mono label above a heading or a group: "About us", "Founder". */
.label-mono {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ---- page intro: the first band of every inner page -------------------- */

.page-intro {
  position: relative;
  padding-block: var(--page-intro-pad);
  overflow: hidden;
  background-color: var(--c-bg-deep);
  border-bottom: 1px solid var(--c-border-soft);
}

.page-intro__glow {
  position: absolute;
  top: -40%;
  right: -15%;
  width: 45rem;
  height: 45rem;
  background: radial-gradient(circle, var(--c-accent-glow), transparent 65%);
  pointer-events: none;
}

.page-intro__inner {
  position: relative;
}

.page-intro__title {
  max-width: 16em;
  font-size: var(--fs-page-title);
}

.page-intro__lead {
  max-width: 36em;
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  color: var(--c-text-muted);
}

/* Contact page: in the intro band, the form beside "what happens next" and
   "what to include"; on phones the tips come first. */
.contact-page {
  display: grid;
  grid-template-areas: "aside" "form";
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.contact-page__form { grid-area: form; }
.contact-page__aside { grid-area: aside; }

.contact-page__h {
  margin-bottom: var(--space-3);
  font-size: var(--fs-card);
}

.contact-page__h + * { margin-top: 0; }
.contact-page__steps + .contact-page__h { margin-top: var(--space-6); }

.contact-page__steps {
  counter-reset: step;
  padding: 0;
  list-style: none;
}

.contact-page__steps li {
  counter-increment: step;
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--fs-body);
  color: var(--c-text);
}

.contact-page__steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-accent-text);
}

.contact-page__steps li + li { margin-top: var(--space-2); }

.contact-page__tips li { color: var(--c-text-muted); }

@media (min-width: 56.25em) {
  .contact-page {
    grid-template-columns: minmax(0, 35rem) minmax(0, 20rem);
    grid-template-areas: "form aside";
    justify-content: space-between;
    column-gap: var(--space-9);
  }

  .contact-page__aside { padding-top: var(--space-1); }
}

.page-intro__action {
  margin-top: var(--space-6);
}

.about-facts__label {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 34rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-border);
}

.about-facts li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-4) var(--space-4) 0;
  border-left: 1px solid var(--c-border-soft);
}

.about-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}

.about-facts__num {
  font-family: var(--font-display);
  font-size: var(--fs-fact);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
}

.about-facts__num::before {      /* small accent tick above each number */
  content: "";
  display: block;
  width: 1.125rem;
  height: 2px;
  margin-bottom: var(--space-3);
  background-color: var(--c-accent);
}

.about-facts__txt {
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--c-text-muted);
}

/* ---- founder: big name, accent-ruled quote -------------------------------- */

.founder--full .founder__figure {
  max-width: 22rem;
}

@media (min-width: 56em) {
  .founder--full {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}

.founder-full__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-founder-name);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  color: var(--c-text);
}

.founder-full__role {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}

.founder-full__quote {
  max-width: 26em;
  margin: var(--space-7) 0;
  padding-top: var(--space-5);
  border-top: 2px solid var(--c-accent);
  font-family: var(--font-display);
  font-size: var(--fs-founder-quote);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--c-text);
}

.founder--full .founder__bio p {
  max-width: 38em;
  color: var(--c-text-muted);
}

/* ---- credential strip: badge art with its name, in one bordered row ------- */

.cred-strip {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.cred-strip__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background-color: var(--c-surface);
}

.cred-strip__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.cred-strip__item:nth-child(2n) { border-right: 0; }
.cred-strip__item:nth-child(n + 3) { border-bottom: 0; }

.cred-strip__item:hover {
  background-color: var(--c-bg);
}

.cred-strip__item img {
  flex: none;
  width: auto;
  height: var(--cred-badge-h);
}

.cred-strip__text {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--c-text-muted);
}

.cred-strip__text b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: var(--c-text);
}

@media (min-width: 54em) {
  .cred-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .cred-strip__item {
    flex-direction: row;
    align-items: center;
    border-bottom: 0;
  }

  .cred-strip__item:nth-child(2n) { border-right: 1px solid var(--c-border); }
  .cred-strip__item:last-child { border-right: 0; }
}

/* ---- our team: intro with certification tags, four principle tiles ------- */

.team {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 60em) {
  .team {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: start;
  }
}

.team__lead {
  max-width: 30em;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
}

.team__certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background-color: var(--c-surface);
}

.team__certs-label {
  width: 100%;
}

.team__cert {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text);
}

.team__cert--tbc {
  border-style: dashed;
  border-color: var(--c-border);
  color: var(--c-text-muted);
}

.team__tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  background-color: var(--c-border-soft);   /* shows through the gaps as dividers */
  overflow: hidden;
}

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

.team__tiles li {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5);
  background-color: var(--c-bg);
  color: var(--c-text-muted);
}

.team__tiles svg {
  width: var(--team-icon);
  height: var(--team-icon);
  fill: none;
  stroke: var(--c-accent-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team__tile-text {
  display: grid;
  gap: var(--space-2);
}

.team__tile-title {
  font-size: var(--fs-card);
  color: var(--c-text);
}

/* =========================================================================
   Home: the five services as a ledger. Heavy rule, one row per service.
   Phones and tablets stack the name and line beside the icon; from 56em
   each row is a table row and "Not sure" moves up beside the heading.
   ========================================================================= */

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "list"
    "more";
}
.svc .section-head { grid-area: head; margin-bottom: var(--space-6); }

.svc__list {
  grid-area: list;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--svc-rule) solid var(--c-text);
}
.svc__item + .svc__item { margin-top: 0; }

/* phone and tablet: icon | name, line | arrow */
.svc__card {
  display: grid;
  grid-template-columns: var(--svc-icon) minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name go"
    "icon line go";
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
  padding: var(--space-5) var(--space-2);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.svc__icon { grid-area: icon; display: block; color: var(--c-accent); }
.svc__icon svg {
  display: block;
  width: var(--svc-icon);
  height: var(--svc-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--svc-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc__icon svg * { vector-effect: non-scaling-stroke; }

.svc__name {
  grid-area: name;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-card);
  line-height: var(--lh-heading);
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--svc-underline);
  text-underline-offset: var(--space-1);
  transition: text-decoration-color var(--dur) var(--ease);
}
.svc__line {
  grid-area: line;
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--svc-lh);
  color: var(--c-text-muted);
}
.svc__go {
  grid-area: go;
  align-self: center;
  font-size: var(--fs-card);
  line-height: 1;
  color: var(--c-accent);
  transition: transform var(--dur) var(--ease);
}

/* hover and focus */
.svc__card:hover,
.svc__card:focus-visible { background: var(--c-surface); }
.svc__card:hover .svc__name,
.svc__card:focus-visible .svc__name { text-decoration-color: var(--c-accent); }
.svc__card:hover .svc__go,
.svc__card:focus-visible .svc__go { transform: translateX(var(--space-1)); }
.svc__card:focus-visible {
  outline: var(--focus-width) solid var(--c-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

/* desktop: one table-like row per service */
@media (min-width: 56em) {
  .svc {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head more"
      "list list";
    align-items: end;
    column-gap: var(--space-6);
  }

  .svc__card {
    grid-template-columns:
      var(--svc-col-icon)
      minmax(0, var(--svc-col-name)) minmax(0, var(--svc-col-line))
      var(--svc-col-go);
    grid-template-areas: "icon name line go";
    column-gap: var(--space-5);
    align-items: center;
    padding: var(--space-5) var(--space-4);
  }

  .svc__name { font-size: var(--svc-name-lg); }
  .svc__line { margin: 0; }
  .svc__go { justify-self: end; }
}

/* =========================================================================
   Short pages (/contact/thanks/): the intro band fills the window, so no
   bare background shows under the footer.
   ========================================================================= */

.page-fill {
  display: flex;
  flex-direction: column;
}

.page-fill main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.page-fill main > .page-intro { flex: 1 0 auto; }

/* =========================================================================
   404 and the Worker's "message not sent" page (no header or footer)
   ========================================================================= */

.notfound {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: var(--space-9);
}

.notfound__mark {
  align-self: flex-start;
  margin-bottom: var(--space-8);
}

.notfound__code {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: var(--space-4);
}

.notfound__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-5);
}

.notfound__text {
  max-width: 48ch;
  margin-bottom: var(--space-7);
}

/* .btn.btn--primary (components.css) supplies the look; this just stops it
   stretching to the container's full width. */
.notfound__link {
  align-self: flex-start;
}