/* =========================================================
   XContent RED — Design tokens + global styles
   ========================================================= */

/* Cobe Heavy Italic — display headline face, mirrored from hax.xcontent.red
   so the marketing surface and the product surface share a brand voice.
   Self-hosted (62KB woff2). Italic-only file: any rule using
   var(--font-display) MUST also declare font-style: italic to match it,
   otherwise the browser will ignore Cobe and fall through to the sans
   fallback. */
@font-face {
  font-family: 'Cobe Heavy';
  font-style: italic;
  font-weight: 700 900;
  font-display: swap;
  src: url('/assets/fonts/cobe-heavy-italic.woff2') format('woff2');
}

:root {
  /* Core palette — near-black + off-white + signal red */
  --bg-0: #07070a;           /* deepest */
  --bg-1: #0a0a0d;           /* page */
  --bg-2: #101014;           /* surface */
  --bg-3: #16161c;           /* raised */
  --bg-4: #1c1c24;           /* hover */
  --line: #23232c;           /* dividers */
  --line-soft: #1a1a22;

  --fg-0: #f2efe9;           /* primary text */
  --fg-1: #c9c5bb;           /* secondary */
  --fg-2: #8b8779;           /* muted */
  --fg-3: #5a5749;           /* faint */
  --fg-4: #3a3a44;           /* very faint */

  /* Signal accents */
  --red: #d7263d;
  --red-bright: #ff2e4d;
  --red-glow: #ff3d5e;
  --red-deep: #8b0a1c;
  --red-soft: rgba(215, 38, 61, 0.12);
  --red-line: rgba(215, 38, 61, 0.32);

  --amber: #f0a020;
  --green: #22c55e;
  --green-term: #7dd87d;

  /* Brand blue — sampled from the X glyph in the XContent RED logo.
     --blue is the dominant fill, --blue-bright is the highlight tone.
     Used as the secondary accent (e.g. service-tile headline on hover)
     to lean on parent-brand colour where red would over-dominate. */
  --blue: #1870b8;
  --blue-bright: #28a8e0;

  /* Type */
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  /* Display face is Cobe Heavy (italic-only). Sans listed as fallback so
     numerals / non-headline display usage (.hero__stat .num, .graph__stats .v)
     keep rendering normally — those rules don't request italic, so the browser
     skips the italic-only Cobe and uses the sans fallback. */
  --font-display: 'Cobe Heavy', 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
  --maxw-tight: 1200px;

  --radius: 2px;
  --radius-lg: 4px;

  /* Fixed-nav offset — measured from the rendered nav height including the
     primary "Book a call" button (the tallest item in .nav__inner). 60px
     was clipping the ticker behind the nav border. */
  --nav-h: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(1200px 700px at 85% -5%, rgba(215,38,61,0.08), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(215,38,61,0.04), transparent 70%),
    var(--bg-1);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--red); color: #fff; }

/* Subtle grid background on sections */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
}

/* =========================================================
   Typography
   ========================================================= */

.mono { font-family: var(--font-mono); letter-spacing: 0; }
.sans { font-family: var(--font-sans); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}

.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* italic is required to match the @font-face declaration for Cobe Heavy
     (italic-only). Without it, the browser would skip Cobe and render in
     the IBM Plex Sans fallback. */
  font-style: italic;
  font-weight: 800;
  /* Mirrors hax.xcontent.red — Cobe Heavy is a display face designed to be
     set in caps, so all titles using it are uppercased. The few headings
     that override font-family (.dash__head h4, .foot__col h4 — both mono)
     have their own uppercase declarations, so they're unaffected. */
  text-transform: uppercase;
  letter-spacing: -0.022em;
  /* Inter-word spacing progression: 0.4em (doubled, too sprawling) →
     0.2em (~+1 space, still too open at headline weight) → normal
     (default proportional space, no extra). The user wanted "1 space
     removed" again from the 0.2em pass, which puts us back at the
     default browser word-spacing. */
  word-spacing: normal;
  line-height: 1.04;
  margin: 0;
  color: var(--fg-0);
  text-wrap: balance;
}

h1 {
  font-size: clamp(44px, 6.2vw, 96px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

h2 {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.025em;
}

h3 {
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  font-weight: 600;
}

p {
  margin: 0;
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead {
  font-size: clamp(16px, 1.15vw, 18px);
  color: var(--fg-1);
  max-width: 62ch;
  line-height: 1.55;
}

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* =========================================================
   Layout
   ========================================================= */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.container--tight {
  max-width: var(--maxw-tight);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
}

section.pad-sm { padding: clamp(60px, 7vw, 100px) 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 88px);
  max-width: 960px;
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
  }
  .section-head .eyebrow {
    padding-top: 10px;
  }
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-0);
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--red);
  color: var(--fg-0);
  background: var(--red-soft);
}

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn--primary:hover {
  background: var(--red-bright);
  border-color: var(--red-bright);
  box-shadow: 0 0 32px rgba(215,38,61,0.4);
}

.btn--ghost {
  border-color: var(--fg-4);
  color: var(--fg-1);
}
.btn--ghost:hover { color: var(--fg-0); }

/* Text link with terminal arrow */
.tlink {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-0);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: all 0.18s ease;
}
.tlink:hover { color: var(--red-bright); border-color: var(--red); }
.tlink::before { content: '→'; color: var(--red); }

/* =========================================================
   Navigation
   ========================================================= */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10, 10, 13, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: all 0.2s ease;
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fg-0);
  font-weight: 500;
}
.nav__logo img {
  /* Match the footer (.foot__brand img) exactly: same height, same
     natural aspect ratio. The previous scaleY(0.82) "vertical squash"
     compensation is dropped — the user wants both lockups to render
     identically so the brand reads consistently top-and-bottom.
     (HAX overrides this rule in hax-styles.css for its own logo.) */
  height: 24px;
  width: auto;
}
.nav__logo .sep { color: var(--fg-4); }
.nav__logo .tag {
  color: var(--red);
  font-weight: 600;
}

.nav__links {
  display: none;
  gap: 2px;
  align-items: center;
}
@media (min-width: 900px) {
  .nav__links { display: flex; }
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-transform: uppercase;
}
.nav__links a:hover { color: var(--fg-0); border-color: var(--line); }

.nav__cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav__status {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  padding: 6px 12px;
  border: 1px solid var(--line);
  letter-spacing: 0.06em;
}
@media (min-width: 1100px) { .nav__status { display: inline-flex; } }
.nav__status .dot {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* =========================================================
   Ticker (CVE feed)
   ========================================================= */

.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--bg-0);
  padding: 10px 0;
  overflow: hidden;
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.ticker__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: ticker 150s linear infinite;
  width: max-content;
}
/* Pause when the visitor's pointer is over the strip so they can read and
   click an entry that's catching their eye, and respect prefers-reduced-motion. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; transform: translateX(0); }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease, opacity 120ms ease;
}
a.ticker__item:hover,
a.ticker__item:focus-visible {
  color: var(--fg-0);
  outline: none;
}
a.ticker__item:hover .cve,
a.ticker__item:focus-visible .cve {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--red-bright);
}
.ticker__item .sev {
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.ticker__item .sev--crit { background: var(--red); color: #fff; }
.ticker__item .sev--high { background: rgba(215,38,61,0.2); color: var(--red-bright); border: 1px solid var(--red-line); }
.ticker__item .sev--med  { background: rgba(240, 160, 32, 0.15); color: var(--amber); border: 1px solid rgba(240,160,32,0.3); }
.ticker__item .dim { color: var(--fg-3); }
.ticker__item .cve { color: var(--fg-1); }

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

.hero {
  padding-top: calc(var(--nav-h, 64px) + 80px);
  padding-bottom: 80px;
  position: relative;
  border-top: none;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}

@media (min-width: 1100px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.hero__eyebrow .bar {
  width: 1px; height: 10px; background: var(--fg-4);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; background: var(--red); box-shadow: 0 0 10px var(--red-glow);
}

.hero__headline {
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.hero__headline .accent { color: var(--red); }
.hero__headline .cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  background: var(--red);
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
  margin-left: 4px;
}
@keyframes blink {
  50% { opacity: 0; }
}

.hero__sub {
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--fg-1);
  max-width: 54ch;
  line-height: 1.55;
  margin-bottom: 36px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 520px;
}
.hero__stat .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  line-height: 1;
}
.hero__stat .num .plus { color: var(--red); }
.hero__stat .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 10px;
}

/* Terminal window */
.term {
  background: var(--bg-0);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg-1);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 60px -20px rgba(215,38,61,0.2);
  position: relative;
  overflow: hidden;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.term__bar .dots { display: flex; gap: 6px; }
.term__bar .dots span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--line);
}
.term__bar .dots span:nth-child(1) { background: #ff5f57; }
.term__bar .dots span:nth-child(2) { background: #febc2e; }
.term__bar .dots span:nth-child(3) { background: #28c840; }
.term__bar .title {
  flex: 1;
  text-align: center;
  color: var(--fg-2);
  font-size: 11px;
}
.term__bar .live {
  color: var(--red-bright);
  display: inline-flex; align-items: center; gap: 6px;
}
.term__bar .live::before {
  content: ''; width: 6px; height: 6px; background: var(--red-bright);
  border-radius: 50%; box-shadow: 0 0 8px var(--red-bright);
  animation: pulse 1.2s infinite;
}

.term__body {
  padding: 20px 22px;
  min-height: 440px;
  max-height: 480px;
  overflow: hidden;
  position: relative;
}
.term__body::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(transparent 70%, var(--bg-0));
  pointer-events: none;
}

.term__line { margin: 0; white-space: pre-wrap; word-break: break-word; }
.term__line .prompt { color: var(--red); }
.term__line .cmd { color: var(--fg-0); }
.term__line .arrow { color: var(--fg-2); }
.term__line .ok { color: var(--green-term); }
.term__line .warn { color: var(--amber); }
.term__line .err { color: var(--red-bright); }
.term__line .dim { color: var(--fg-3); }
.term__line .hl { color: var(--fg-0); }
.term__line.blank { height: 8px; }

.term__caret {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--red);
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}

/* =========================================================
   Services grid
   ========================================================= */

.services {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 700px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  padding: 40px 36px 48px;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 180ms ease, border-color 180ms ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: transparent;
  font: inherit;
  isolation: isolate;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
/* Top accent bar — slides in from the left on hover/focus, signals the
   tile is interactive and aligns with the red signal palette. */
.service::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}
.service:hover,
.service:focus-visible {
  background: var(--red-soft);
  border-right-color: var(--red-line);
  border-bottom-color: var(--red-line);
  outline: none;
}
.service:hover::before,
.service:focus-visible::before { width: 100%; }
/* Headline shifts to the brand blue (sampled from the X in the
   XContent RED logo) on hover/focus — gives the active tile a clear
   secondary-accent pop without doubling up on the red signal already
   carried by the top accent bar, arrow and border tints. */
.service:hover h3,
.service:focus-visible h3 { color: var(--blue-bright); }
.service:hover .service__arrow,
.service:focus-visible .service__arrow {
  color: var(--red);
  transform: translate(4px, -4px);
}
.service:hover .service__meta,
.service:focus-visible .service__meta { border-top-color: var(--red-line); color: var(--fg-2); }
.service h3 { transition: color 180ms ease; }
.service__meta { transition: color 180ms ease, border-top-color 180ms ease; }

.service__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service__num .tag {
  color: var(--red);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
}

.service h3 {
  font-size: 22px;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
  font-weight: 600;
  /* Reserve 2 lines of headline height so the body paragraph always
     begins at the same Y across every tile — single-line titles
     (Custom Red Team, GRC Consulting) align with two-line ones
     (Personal Reconnaissance, Forensic Investigations) instead of
     each tile's body starting at a different vertical position. */
  line-height: 1.2;
  min-height: calc(1.2em * 2);
}
.service p {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 24px;
  flex: 1;
}
.service__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  text-transform: uppercase;
  display: flex;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  /* Reserve 2 lines of footer space so tiles whose meta items wrap
     (e.g. Forensic Investigations: "CHAIN OF CUSTODY · CYBERCRIME ·
     EXPERT WITNESS") sit at exactly the same top-edge Y as tiles
     whose meta fits on a single line (e.g. Supply Chain Risk:
     "TPRM · SBOM · CONCENTRATION"). Content is top-anchored inside
     the reserved area via align-items: flex-start, so single-line
     metas align with the first line of any wrapping ones rather
     than floating in the middle of the footer block. */
  min-height: calc(1.5em * 2 + 17px);
  align-items: flex-start;
}
.service__meta span::before { content: '·'; color: var(--red); margin-right: 8px; }
.service__meta span:first-child::before { display: none; }

.service__arrow {
  position: absolute;
  top: 36px;
  right: 36px;
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-size: 18px;
  transition: all 0.2s ease;
}

/* =========================================================
   Hax tabbed module
   ========================================================= */

.hax {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
}

.hax__head {
  display: grid;
  gap: 24px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .hax__head { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
}

.hax__tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  margin-bottom: 32px;
  overflow-x: auto;
  background: var(--bg-2);
}
.hax__tab {
  flex: 1;
  min-width: 140px;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hax__tab:last-child { border-right: 0; }
.hax__tab:hover { color: var(--fg-0); background: var(--bg-3); }
.hax__tab.active {
  color: var(--fg-0);
  background: var(--bg-3);
}
.hax__tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
}
.hax__tab .tnum { color: var(--fg-4); font-size: 10px; }
.hax__tab.active .tnum { color: var(--red); }

.hax__panel {
  border: 1px solid var(--line);
  background: var(--bg-0);
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.hax__view { display: none; }
.hax__view.active { display: block; }

/* --- Dashboard view --- */
.dash {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 520px;
}
@media (max-width: 800px) { .dash { grid-template-columns: 1fr; } }

.dash__side {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 20px 0;
  font-family: var(--font-mono);
  font-size: 12px;
}
.dash__brand {
  padding: 0 20px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-0);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.dash__brand .sq {
  width: 18px; height: 18px; background: var(--red);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 10px;
}
.dash__nav { display: flex; flex-direction: column; gap: 2px; }
.dash__nav a {
  padding: 8px 20px;
  color: var(--fg-2);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: 0.06em;
}
.dash__nav a:hover { color: var(--fg-0); background: var(--bg-2); }
.dash__nav a.on { color: var(--fg-0); background: var(--bg-3); border-left: 2px solid var(--red); padding-left: 18px; }
.dash__nav a .k { color: var(--fg-4); font-size: 10px; margin-left: auto; }

.dash__main { padding: 24px; }
.dash__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.dash__head h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--fg-1);
  text-transform: uppercase;
  font-weight: 500;
}
.dash__head .search {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  padding: 6px 12px; border: 1px solid var(--line); background: var(--bg-2);
}

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 700px) { .dash__kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  position: relative;
}
.kpi .kpi__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 10px;
  display: flex; justify-content: space-between;
}
.kpi .kpi__num {
  font-family: var(--font-display); font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--fg-0); line-height: 1;
}
.kpi .kpi__trend {
  font-family: var(--font-mono); font-size: 10px; margin-top: 8px;
}
.kpi.kpi--crit .kpi__num { color: var(--red-bright); }
.kpi.kpi--crit .kpi__label { color: var(--red-bright); }
.kpi.kpi--warn .kpi__num { color: var(--amber); }
.kpi--up { color: var(--green-term); }
.kpi--down { color: var(--red-bright); }

.dash__findings {
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.finding {
  display: grid;
  grid-template-columns: 80px 1fr 100px 140px 80px;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  align-items: center;
  color: var(--fg-1);
}
.finding:last-child { border-bottom: 0; }
.finding:hover { background: var(--bg-2); }
.finding.head {
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.finding .sev {
  padding: 3px 8px; font-size: 10px; letter-spacing: 0.1em; display: inline-block;
  text-align: center;
}
.sev--critical { background: var(--red); color: #fff; }
.sev--highsv  { background: rgba(215,38,61,0.18); color: var(--red-bright); border: 1px solid var(--red-line); }
.sev--mediumsv{ background: rgba(240,160,32,0.15); color: var(--amber); border: 1px solid rgba(240,160,32,0.3); }
.sev--lowsv   { background: var(--bg-3); color: var(--fg-1); border: 1px solid var(--line); }

.finding .asset { color: var(--fg-0); }
.finding .path { color: var(--fg-3); }
.finding .action { text-align: right; color: var(--red-bright); }

@media (max-width: 700px) {
  .finding { grid-template-columns: 70px 1fr; }
  .finding .path, .finding .when, .finding .action { display: none; }
  .finding.head { display: none; }
}

/* --- Threat graph view --- */
.graph {
  position: relative;
  height: 520px;
  overflow: hidden;
}
.graph__overlay {
  position: absolute;
  top: 20px; left: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  z-index: 3;
  letter-spacing: 0.06em;
}
.graph__overlay .title { color: var(--fg-0); font-size: 13px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.12em; }
.graph__overlay .list { display: flex; flex-direction: column; gap: 2px; color: var(--fg-3); }
.graph__overlay .list span b { color: var(--fg-1); font-weight: 500; }

.graph__legend {
  position: absolute;
  bottom: 20px; right: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 3;
  display: flex;
  gap: 18px;
  background: var(--bg-0);
  padding: 10px 14px;
  border: 1px solid var(--line);
}
.graph__legend span { display: inline-flex; align-items: center; gap: 6px; }
.graph__legend .d { width: 8px; height: 8px; border-radius: 50%; }
.graph__legend .d.crit { background: var(--red-bright); box-shadow: 0 0 8px var(--red-bright); }
.graph__legend .d.asset { background: var(--fg-1); }
.graph__legend .d.ext { background: var(--amber); }

.graph__stats {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.graph__stats .v { color: var(--red-bright); font-size: 22px; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; display: block; }

/* =========================================================
   Methodology (scroll-scrubbed)
   ========================================================= */

.method {
  background: var(--bg-0);
  position: relative;
  overflow: hidden;
}
.method__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1000px) {
  .method__track { grid-template-columns: 0.9fr 1.1fr; gap: 80px; }
}

.method__sticky {
  position: sticky;
  top: 100px;
  align-self: start;
  padding: 40px 0;
}

.method__phases { display: flex; flex-direction: column; gap: 8px; }
.method__phase {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: opacity 0.3s;
  opacity: 0.35;
  cursor: pointer;
}
.method__phase:last-child { border-bottom: 1px solid var(--line); }
.method__phase.active { opacity: 1; }
/* Hover lifts the dimmed phases to ~85% so users get instant feedback
   that the row is interactive even before they click/move on. */
.method__phase:not(.active):hover,
.method__phase:not(.active):focus-visible { opacity: 0.85; }
.method__phase:focus-visible { outline: none; }
.method__phase:focus-visible .method__phase-num .line { flex-basis: 80px; }

.method__phase-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.method__phase-num .line {
  height: 1px;
  background: var(--red);
  flex: 0 0 40px;
  transition: flex-basis 0.4s ease;
}
.method__phase.active .method__phase-num .line { flex-basis: 80px; }

.method__phase h3 {
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.method__phase p {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 54ch;
}

.method__viz {
  height: 80vh;
  min-height: 500px;
  max-height: 700px;
  position: sticky;
  top: 10vh;
  border: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
}
.method__viz-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.method__viz-stage.active { opacity: 1; }

/* Phase 4 — quarterly cadence chart (SVG)
   ----------------------------------------
   The chart is rendered as inline SVG inside .cad__plot (see site.js).
   ViewBox-driven coordinates mean geometry is deterministic — the
   chart is always visible at its full size on first paint, so the
   worst case is a static-but-readable graph rather than the previous
   blank box. The .play class added on hover/activation simply replays
   a grow-and-pop animation pass on top of the already-visible chart. */
.cad {
  padding: 24px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  box-sizing: border-box;
}
.cad__title {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.cad__plot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.cad__svg {
  width: 100%;
  height: 100%;
  display: block;
  font-family: var(--font-mono);
}

/* Static styling — chart reads correctly with zero JS animation state. */
.cad__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.cad__trend,
.cad__dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.cad__svg-now {
  fill: var(--red-bright);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.cad__svg-q {
  fill: var(--fg-2);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cad__svg-sub {
  fill: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.cad__svg-sub--now {
  fill: var(--red-bright);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cad__svg-axis {
  fill: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cad__svg-axis--stat { fill: var(--fg-1); }

/* Animation state — added by site.js as .cad__plot.play. We use
   animation (not transition) so we can stagger via animation-delay
   and replay by removing/re-adding the class. */
.cad__plot.play .cad__bar {
  animation: cad-bar-grow 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.cad__plot.play .cad__trend {
  animation: cad-fade-in 500ms ease 600ms both;
}
.cad__plot.play .cad__dot {
  animation: cad-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(700ms + var(--i, 0) * 80ms);
}
@keyframes cad-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes cad-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}
@keyframes cad-pop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cad__plot.play .cad__bar,
  .cad__plot.play .cad__trend,
  .cad__plot.play .cad__dot { animation: none; }
}

.cad__foot {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}
.cad__foot b { color: var(--fg-0); font-weight: 500; }

/* =========================================================
   Sectors + threat map
   ========================================================= */

.sectors {
  border-top: 1px solid var(--line);
}

.sectors__wrap {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .sectors__wrap { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

.sectors__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sectors__item {
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}
.sectors__item:hover { background: var(--bg-2); color: var(--fg-0); }
.sectors__item .num {
  color: var(--fg-4);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.map {
  border: 1px solid var(--line);
  background: var(--bg-0);
  height: 520px;
  position: relative;
  overflow: hidden;
}
.map__head {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: center;
}
.map__head .live {
  color: var(--red-bright);
  display: inline-flex; align-items: center; gap: 6px;
}
.map__head .live::before {
  content: ''; width: 6px; height: 6px; background: var(--red-bright);
  border-radius: 50%; box-shadow: 0 0 8px var(--red-bright);
  animation: pulse 1.2s infinite;
}

.map__stats {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 3;
}
.map__stats b { color: var(--fg-0); font-weight: 500; }

/* =========================================================
   Proof (logos + certs)
   ========================================================= */

.proof {
  background: var(--bg-0);
}

.proof__logos {
  display: grid;
  /* Mobile and tablet: stack 1-up so each tile has a clean rectangular
     border (left from container, right+bottom from tile). Switch to a
     single 5-up row at desktop so we never end up with a half-row of
     missing right-borders given the odd 5-logo count. */
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: 80px;
}
@media (min-width: 1000px) { .proof__logos { grid-template-columns: repeat(5, 1fr); } }

.proof__logo {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  min-height: 110px;
  position: relative;
  overflow: hidden;
  transition: background 180ms ease;
}
.proof__logo:hover { background: var(--bg-2); }

/* Standard dark-theme "client wall" treatment: every supplied logo
   was designed for a light background, so we render them as uniform
   white silhouettes for visual consistency across the row. On hover
   the filter drops away to reveal the natural brand colour, giving
   the wall a small interactive payoff without breaking the muted
   default aesthetic. */
.proof__logo img {
  max-width: 75%;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
}
.proof__logo:hover img,
.proof__logo:focus-visible img {
  filter: none;
  opacity: 1;
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .proof__logo img { transition: none; }
  .proof__logo:hover img,
  .proof__logo:focus-visible img { transform: none; }
}

.certs {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .certs { grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
}

.certs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px) { .certs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .certs__grid { grid-template-columns: repeat(4, 1fr); } }

.cert {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s;
}
.cert:hover { border-color: var(--red-line); background: var(--bg-3); }
.cert .abbr {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  /* Reserve 2 lines of abbreviation height so the descriptive .full
     line always begins at the same Y across the credential grid —
     single-token abbreviations (CHFI, SC-200, ISC2 CC) align with
     wrapping ones (CEH MASTER, UCT BSA, UCT DPP) instead of each
     tile's body label starting at a different vertical position. */
  line-height: 1.2;
  min-height: calc(1.2em * 2);
}
.cert .full {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.cert .held {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  margin-top: auto;
  padding-top: 10px;
  letter-spacing: 0.08em;
}

/* =========================================================
   CTA
   ========================================================= */

.cta {
  background:
    radial-gradient(800px 400px at 80% 50%, rgba(215,38,61,0.1), transparent 70%),
    var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
}
@media (min-width: 900px) {
  .cta__inner { grid-template-columns: 2fr 1fr; gap: 64px; }
}

.cta h2 {
  font-size: clamp(36px, 5vw, 68px);
  letter-spacing: -0.028em;
  margin-bottom: 20px;
}
.cta p { color: var(--fg-1); max-width: 58ch; }
.cta__actions {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.cta__actions .row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta__email {
  color: var(--red-bright);
  border-bottom: 1px solid var(--red-line);
  padding-bottom: 4px;
  display: inline-block;
  width: fit-content;
}

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

footer {
  background: var(--bg-0);
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
@media (min-width: 700px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

.foot__brand { max-width: 360px; }
.foot__brand img { height: 24px; margin-bottom: 20px; }
.foot__brand p { color: var(--fg-2); font-size: 13px; line-height: 1.55; }
/* Brand slogan — set in the display face (Cobe Heavy italic, uppercased)
   to match the headline voice used elsewhere on the page. The two
   highlighted spans ("if", "when") pick up the signal red so the rhetorical
   beat lands on the inevitability. */
.foot__brand .foot__slogan {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  /* Match the inter-word rhythm used by h1–h4 — see the matching note
     in the h1–h4 rule for the spacing-decay history. */
  word-spacing: normal;
  color: var(--fg-0);
  margin-bottom: 0;
}
.foot__brand .foot__slogan span { color: var(--red-bright); }
.foot__brand .parent {
  margin-top: 18px; font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em;
}

.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 16px;
  font-weight: 500;
}
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot__col a { color: var(--fg-1); font-size: 14px; }
.foot__col a:hover { color: var(--red-bright); }

.foot__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.foot__bottom .links { display: flex; gap: 18px; }

/* =========================================================
   Tweaks panel
   ========================================================= */

#tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 12px;
  width: 280px;
  display: none;
}
#tweaks-panel.on { display: block; }
#tweaks-panel .tw__bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  background: var(--bg-3);
}
#tweaks-panel .tw__bar .close {
  background: transparent; border: 0; color: var(--fg-3); cursor: pointer; padding: 2px 6px;
}
#tweaks-panel .tw__body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
#tweaks-panel .tw__row { display: flex; flex-direction: column; gap: 8px; }
#tweaks-panel .tw__label {
  font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase;
}
#tweaks-panel .tw__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
#tweaks-panel .tw__swatch {
  width: 28px; height: 28px; border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: transform 0.1s;
}
#tweaks-panel .tw__swatch:hover { transform: scale(1.08); }
#tweaks-panel .tw__swatch.on { border-color: var(--fg-0); outline: 1px solid var(--fg-4); outline-offset: 2px; }
#tweaks-panel .tw__options { display: flex; flex-direction: column; gap: 4px; }
#tweaks-panel .tw__opt {
  padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--line);
  color: var(--fg-1); text-align: left; cursor: pointer; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
}
#tweaks-panel .tw__opt.on { border-color: var(--red); color: var(--fg-0); background: var(--red-soft); }

/* =========================================================
   Reveal on scroll
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   Service modal
   - Single shared dialog populated from JS based on the tile's
     data-service slug. ESC and click-outside close it; focus is
     trapped inside while open and returned to the trigger on close.
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 6vh, 80px) 20px;
  overflow-y: auto;
}
.modal[aria-hidden="false"] { display: flex; }
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-backdrop-in 200ms ease-out;
}
.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  padding: 36px 40px 32px;
  margin: auto 0;
  animation: modal-panel-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 46, 77, 0.08);
}
@media (max-width: 600px) {
  .modal__panel { padding: 28px 24px 24px; }
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.modal__close:hover,
.modal__close:focus-visible {
  color: var(--fg-0);
  border-color: var(--red);
  background: var(--red-soft);
  outline: none;
}
.modal__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.modal__num .tag {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
  color: var(--red);
  letter-spacing: 0.12em;
}
.modal__title {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 18px;
}
.modal__lead {
  color: var(--fg-1);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.modal__section + .modal__section { margin-top: 24px; }
.modal__section h4 {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
}
.modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) { .modal__list { grid-template-columns: 1fr 1fr; } }
.modal__list li {
  position: relative;
  padding-left: 20px;
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.5;
}
.modal__list li::before {
  content: '›';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red);
  font-family: var(--font-mono);
}
.modal__engage {
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.6;
}
.modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Booking modal — wider panel sized for an embedded Microsoft
   Bookings iframe. Inherits all base .modal / .modal__panel styles
   (backdrop, animation, border accent, close button) and only
   overrides what's needed to host a 600px+ iframe comfortably. */
.modal__panel--booking {
  max-width: 1080px;
  padding: 28px 32px 24px;
}
.modal__title--compact {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 8px;
}
.modal__lead--compact {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
  color: var(--fg-2);
}
.modal__iframe-wrap {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 560px;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.modal__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg-3);
}

/* Loader overlay shown while the Microsoft Bookings iframe boots.
   Sits above the iframe and is faded out by the controller once the
   iframe fires its load event (or after the 12s failsafe). The
   visual is deliberately on-brand for the rest of the site —
   monospace prompt + scanning-line bar + blinking block cursor —
   rather than a generic spinner, so it reads as part of the page
   instead of a Microsoft loading state. */
.modal__iframe-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--bg-3);
  pointer-events: none;
  opacity: 1;
  transition: opacity 280ms ease;
  text-align: center;
}
.modal__iframe-loader.is-hidden {
  opacity: 0;
}
.modal__iframe-loader-bar {
  width: clamp(180px, 40%, 280px);
  height: 2px;
  background-color: var(--line);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--red-bright) 50%,
    transparent 100%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: -50% 0;
  animation: booking-loader-scan 1.6s ease-in-out infinite;
}
.modal__iframe-loader-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-1);
  text-transform: lowercase;
}
.modal__iframe-loader-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--red-bright);
  animation: booking-loader-blink 1s steps(2, start) infinite;
}
.modal__iframe-loader-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}
@keyframes booking-loader-scan {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
@keyframes booking-loader-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal__iframe-loader-bar,
  .modal__iframe-loader-cursor { animation: none; }
}

@media (max-width: 600px) {
  .modal__panel--booking { padding: 22px 16px 20px; }
  .modal__iframe-wrap { height: 80vh; min-height: 480px; }
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__panel { animation: none; }
}
/* Lock scroll on the body when the modal is open. */
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}