/* ─────────────────────────────────────────────────────────────
   CYBERMARROW — THE PROVING GROUND
   Loaded after site.css and redefines :root. Their own headline
   is "security that holds up when it is tested", so the world is
   a workshop with load on the rig, not an operations centre.

   Deliberately not the world built for DAIC Labs: different
   ground, different type, different device. The only things the
   two share are the motion curves and the deploy gates.

   Every value contrast-measured against the ground, not chosen
   by eye. Body text 17.18:1, steel 7.50:1, every accent above 7.

   Versioned filename (-v1) so it ships immutable through the
   shared site module without extending its rewrite chain.
   ───────────────────────────────────────────────────────────── */

/* ── Type ─────────────────────────────────────────────────
   IBM Plex, drawn for an engineering company. Out goes Space
   Grotesk, which signals "recently funded" and little else, and
   Inter beneath it. One superfamily, so sans and mono are drawn
   by the same hand. 4 faces, 103KB, self-hosted — previously
   three families came from a CDN on the critical path. */

@font-face {
  font-family: "Plex Cond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex-cond-600-v1.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/plex-sans-300-v1.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex-sans-600-v1.woff2") format("woff2");
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex-mono-400-v1.woff2") format("woff2");
}

/* Metric-matched fallbacks, read from each face's own hhea table
   (ascent 102.5%, descent 27.5% across the family) so the swap
   moves nothing and CLS stays at zero. */
@font-face {
  font-family: "Plex Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

@font-face {
  font-family: "Plex Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("Liberation Mono");
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  size-adjust: 97%;
}

:root {
  color-scheme: dark;

  /* Ground. The inherited #070a14 is a blue-black that reads as
     "cyber"; this is a colder graphite, so the violet has something
     neutral to be bright against. */
  --bg: #0a0c12;
  --bg-alt: #10131c;
  --surface: #10131c;
  --surface-2: #161a26;
  --border: #232837;
  --border-2: #333a4f;

  --text: #eef0f8; /* 17.18:1 */
  --muted: #98a0b8; /*  7.50:1 */

  /* The violet is theirs and stays. What changes is the discipline
     around it: raw violet is a fill and a rule, never small text. */
  --accent: #7c4dff; /*  4.06:1 — fills and rules only */
  --accent-2: #a78bfa; /*  7.18:1 — the text-safe tint */
  --accent-ink: #ffffff;

  /* Semantic, never decorative. Amber means at or past limit and
     marks the AI-security work; green means a control passed retest.
     A palette where these are used because a section needed colour
     is a palette nobody can read under pressure. */
  --hazard: #ff9f1c; /*  9.52:1 */
  --danger: #ff6b7a;
  --success: #2fd6a0; /* 10.47:1 */

  --radius: 3px;

  --font: "Plex Sans", "Plex Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plex Cond", "Plex Sans", "Plex Fallback", Helvetica, Arial,
    sans-serif;
  --font-mono: "Plex Mono", "Plex Mono Fallback", ui-monospace, SFMono-Regular,
    Menlo, monospace;

  /* Depth on a dark ground comes from emitted light, not from
     shadows — a drop shadow on near-black is invisible. */
  --shadow: 0 0 0 1px rgba(238, 240, 248, 0.045),
    0 18px 44px -30px rgba(0, 0, 0, 0.9);
  --glow: 0 0 30px -6px var(--accent);

  /* The five curves, shared with the rest of the studio. */
  --e-pull: cubic-bezier(0.16, 0.84, 0.32, 1);
  --e-lift: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-snap: cubic-bezier(0.4, 0, 0.2, 1);

  --d-lift: 950ms;
  --d-gel: 550ms;
  --d-snap: 180ms;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fine fixed grain. A workshop under working light, not a server
   room in a film — so grain, never fog or volumetric haze. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>");
}

/* ── Type treatment ───────────────────────────────────────
   Condensed for display only. It is narrow and engineered and
   looks mannered at interface sizes, so h3 and below stay on the
   text face. */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
}

h3,
h4,
.card h3,
.accordion button {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.004em;
}

.brand {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow,
.mono,
.cell-num {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}

/* ── Surfaces: machined, not glassy ───────────────────────
   A control that looks like frosted glass is the visual
   equivalent of a control that only exists in a diagram. */
.card,
.panel {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
  border-radius: var(--radius);
}

.card--link:hover,
.card--link:focus-within {
  border-color: var(--accent);
  background: var(--surface-2);
}

/* ── Controls ─────────────────────────────────────────────
   The light design used the accent as a button fill with white
   text. On this ground that is 4.06:1 — under the floor. The
   primary action becomes the brightest object on the page
   instead, and the violet moves to the hover glow where it
   signals without carrying legibility. */
.btn {
  border-radius: 2px;
  transition: transform var(--d-snap) var(--e-snap),
    box-shadow var(--d-snap) var(--e-snap),
    background var(--d-snap) var(--e-snap),
    border-color var(--d-snap) var(--e-snap);
}

.btn--primary {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #ffffff;
  color: var(--bg);
  box-shadow: var(--glow);
}

.btn--ghost {
  border-color: var(--border-2);
  color: var(--text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--accent-2);
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn:active {
    transform: translateY(0);
  }
}

/* The skip link inherited the same failing fill. */
.skip-link,
.skip-link:focus,
.skip-link:focus-visible {
  background: var(--text);
  color: var(--bg);
}

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

/* Small text on the raw accent fails at 4.06:1; the tint clears 7. */
.field label .req,
.scheduler-step > h3 .num,
.social a:hover {
  color: var(--accent-2);
}

/* Form controls must be findable: WCAG 1.4.11 wants 3:1 for a
   control's boundary, and the inherited border does not reach it
   on this ground. */
.field input,
.field select,
.field textarea,
.slot-chip,
.date-chip {
  border-color: #5b6478;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* ── Header ───────────────────────────────────────────────
   Transparent over the hero, earning a ground only once scrolled;
   otherwise it draws a seam across the top of the page. */
.header {
  background: transparent;
  backdrop-filter: none;
}

.header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

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

/* ── The rig ──────────────────────────────────────────────
   Replaces the inherited hero gradients. The visitor applies load
   and the structure holds — the claim performed, not asserted. */
.hero::before,
.hero::after {
  display: none;
}

.hero {
  position: relative;
  isolation: isolate;
}

.hero-rig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Stands in below 480px, where the canvas is never created. */
  background: radial-gradient(
      58% 48% at 72% 38%,
      rgba(124, 77, 255, 0.14),
      transparent 70%
    ),
    radial-gradient(
      50% 44% at 30% 66%,
      rgba(124, 77, 255, 0.07),
      transparent 72%
    );
}

.hero .shell {
  position: relative;
  z-index: 1;
}

.hero::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: none;
  background: radial-gradient(
    76% 86% at 40% 46%,
    transparent 34%,
    rgba(10, 12, 18, 0.32) 74%,
    rgba(10, 12, 18, 0.7) 100%
  );
}

/* Hazard chevrons: real workshop marking, used on section rules
   only. Loud enough that twice on one screen would be a mistake. */
.section--alt.rule {
  border-top: 0;
  position: relative;
}

.section--alt.rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hazard) 0 8px,
    transparent 8px 16px
  );
  opacity: 0.34;
}

/* ── Reveals ──────────────────────────────────────────────
   Gated: site.css resets [data-reveal] inside its own reduced-motion
   block and this file loads after it, so an ungated rule here would
   leave every section offset for people who asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transform: translateY(18px);
    transition: opacity var(--d-lift) ease,
      transform var(--d-lift) var(--e-lift);
  }
}

/* ── AI security: the new practice, and Act IV ────────────
   Light drops below every other band and hazard amber arrives
   alone. A security firm that will not describe how systems
   actually break is selling something else. */
#ai-security {
  background: linear-gradient(
      180deg,
      rgba(10, 12, 18, 0) 0%,
      rgba(5, 6, 10, 0.8) 20%,
      rgba(5, 6, 10, 0.8) 80%,
      rgba(10, 12, 18, 0) 100%
    ),
    var(--bg);
  border-top: 1px solid rgba(255, 159, 28, 0.2);
  border-bottom: 1px solid rgba(255, 159, 28, 0.2);
  position: relative;
  overflow: hidden;
}

#ai-security .card-icon {
  color: var(--hazard);
  border-color: rgba(255, 159, 28, 0.3);
  background: rgba(255, 159, 28, 0.08);
}

#ai-security .panel {
  border-color: rgba(255, 159, 28, 0.22);
  background: transparent;
}

#ai-security .tick-list li::before {
  color: var(--hazard);
}

/* The AI-security card in the solutions grid carries the same
   warning colour, so the practice is recognisable before it is read. */
.card--link:has(a[href*="ai-security"]) .card-icon {
  color: var(--hazard);
  border-color: rgba(255, 159, 28, 0.28);
  background: rgba(255, 159, 28, 0.07);
}

.card--link:has(a[href*="ai-security"]):hover {
  border-color: var(--hazard);
}

/* The rig is background: it must never compete with the headline or
   the panel that sits over it. */
.hero-rig {
  opacity: 0.72;
}

/* The eyebrow is small uppercase text in the raw accent: 4.06:1 on this
   ground, under the 4.5 floor. Same root cause as .req and .num -- the
   raw hue is a fill and a rule, the tint is for type. Missed on the first
   pass because eyebrows are set in site.css rather than the form styles. */
.eyebrow {
  color: var(--accent-2);
}