/* ============================================================
   WITTENBERGER INDUSTRIES — DESIGN TOKENS
   ------------------------------------------------------------
   Three colors. Two type families. Universal uppercase.
   One button shape. Zero shadows. Zero cards.
   See README.md for the brand rules.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Cormorant+Garamond:wght@500;700&display=swap");

:root {
  /* ----- COLOR ----- */
  --space-black:         #000000;
  --spectral-white:      #f0f0fa;          /* slight blue-violet starlight tint */
  --wittenberger-red:    #e31e24;          /* the strike mark, drawn from the diamond in the W */
  --red-press:           #b51820;

  /* ghost surfaces */
  --ghost-surface:       rgba(240, 240, 250, 0.10);
  --ghost-surface-hover: rgba(240, 240, 250, 0.20);
  --ghost-border:        rgba(240, 240, 250, 0.35);

  /* legibility overlays — legacy photo tokens kept for reference.
     Desktop: --overlay-blueprint is the diagonal lower-left shade from the
     approved direction mockups. It dims linework under the copy block and
     leaves the drawing's right side untouched.
     Below 960px (hamburger chrome) copy is full-width over the sheet center,
     so the wedge cannot keep contrast. --overlay-blueprint-mobile is a
     bottom-weighted full-width scrim: atmosphere at the top, near-black
     under the copy. */
  --overlay-flat: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.65));
  --overlay-bottom: linear-gradient(180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.00) 40%,
    rgba(0,0,0,0.70) 100%);
  --overlay-blueprint: linear-gradient(76deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.25) 38%,
    rgba(0,0,0,0.00) 60%);
  --overlay-blueprint-mobile: linear-gradient(180deg,
    rgba(0,0,0,0.48) 0%,
    rgba(0,0,0,0.76) 36%,
    rgba(0,0,0,0.92) 100%);

  /* semantic */
  --bg:        var(--space-black);
  --fg:        var(--spectral-white);
  --fg-dim:    rgba(240, 240, 250, 0.70);
  --fg-faint:  rgba(240, 240, 250, 0.50);
  --accent:    var(--wittenberger-red);

  /* ----- TYPOGRAPHY ----- */
  --font-display: "Barlow", "D-DIN-Bold", "D-DIN", Arial, Verdana, sans-serif;
  --font-body:    "Barlow", "D-DIN", Arial, Verdana, sans-serif;
  --font-serif:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-mono:    ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --fs-display:      3.00rem;   /* 48px hero baseline (overridden by clamp() in .display) */
  --fs-body:         1.00rem;
  --fs-nav-bold:     0.81rem;
  --fs-nav:          0.75rem;
  --fs-caption-bold: 0.81rem;
  --fs-caption:      0.75rem;
  --fs-micro:        0.625rem;

  --lh-tight:   0.94;
  --lh-display: 1.00;
  --lh-caption: 1.00;
  --lh-nav:     2.00;
  --lh-body:    1.60;

  --tracking-display: 0.96px;
  --tracking-nav:     1.17px;
  --tracking-caption: 1.17px;
  --tracking-micro:   1px;

  --w-regular: 400;
  --w-bold:    700;

  /* ----- SPACING ----- */
  --s-3:  3px;  --s-5:  5px;  --s-8:  8px;  --s-12: 12px;
  --s-15: 15px; --s-18: 18px; --s-20: 20px; --s-24: 24px;
  --s-30: 30px; --s-48: 48px; --s-64: 64px;

  /* ----- RADII ----- */
  --r-sharp:  4px;
  --r-button: 32px;

  /* ----- LAYOUT ----- */
  --nav-h-desktop: 72px;
  --nav-h-mobile:  56px;

  /* ----- MOTION ----- */
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --dur-fade:  500ms;
  --dur-hover: 200ms;
  --dur-press: 80ms;
}

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

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
html:has(body.is-dossier) {
  scroll-snap-type: none;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { overflow-x: hidden; }

::selection { background: var(--wittenberger-red); color: var(--fg); }

/* slim scrollbar to match the dark canvas */
body::-webkit-scrollbar       { width: 6px; }
body::-webkit-scrollbar-track { background: #000; }
body::-webkit-scrollbar-thumb { background: rgba(240,240,250,0.18); }

a { color: inherit; }

/* ============================================================
   TYPE — semantic classes
   ============================================================ */
.display, h1, h2.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.2px;
  color: var(--fg);
  margin: 0;
}

.nav-bold {
  font-family: var(--font-body);
  font-size: var(--fs-nav-bold);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.caption-bold {
  font-family: var(--font-body);
  font-size: var(--fs-caption-bold);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.section__inline-meta {
  margin: 0 0 var(--s-8);
  opacity: 0.92;
}
.section__inline-meta--last {
  margin: 0 0 var(--s-30);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--w-regular);
  line-height: var(--lh-caption);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.serif {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.5px;
  text-transform: none;
}

.strike { color: var(--accent); }

.pip {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: var(--s-8);
}

/* ============================================================
   GHOST BUTTON — the only shape in the system
   ============================================================ */
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ghost-surface);
  color: var(--fg);
  border: 1px solid var(--ghost-border);
  border-radius: var(--r-button);
  padding: 16px 26px;
  font-family: var(--font-body);
  font-size: var(--fs-nav-bold);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-hover) linear, color var(--dur-hover) linear;
}
.ghost:hover {
  background: var(--ghost-surface-hover);
  color: #ffffff;
}
.ghost:active {
  opacity: 0.7;
  transition: opacity var(--dur-press) linear;
}
.ghost:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* ============================================================
   NAV — fixed, transparent, over photography
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-30);
  background: transparent;
  z-index: 100;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--fg);
}
.nav__brand img {
  height: 36px; width: auto;
  display: block;
}

.nav__links {
  display: flex;
  gap: 26px;
  align-items: center;
}

.nav__link {
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity var(--dur-hover) linear;
}
.nav__link:hover { opacity: 1; }
.nav__link.is-active { color: #ffffff; opacity: 1; }
.nav__link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

.nav__hamburger {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 44px; height: 44px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--fg);
  transition: transform 200ms, opacity 150ms;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

/* mobile menu overlay */
.nav-menu {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  z-index: 99;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--s-30);
  gap: var(--s-24);
}
.nav-menu.is-open { display: flex; }
.nav-menu .nav__link { font-size: 22px; }

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}
@media (max-width: 720px) {
  .nav { height: var(--nav-h-mobile); padding: 0 var(--s-18); }
  .nav__brand img { height: 28px; }
}

/* ============================================================
   SECTION — full-viewport photographic frame
   ============================================================ */
.section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  scroll-snap-align: start;
}

.section__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-blueprint);
  pointer-events: none;
  z-index: 1;
}
.section--overlay-bottom .section__overlay { background: var(--overlay-blueprint); }

@media (max-width: 960px) {
  .section__overlay,
  .section--overlay-bottom .section__overlay {
    background: var(--overlay-blueprint-mobile);
  }
}

.section__content {
  position: absolute;
  left: min(8vw, 64px);
  right: min(8vw, 64px);
  bottom: min(12vh, 80px);
  z-index: 2;
  max-width: 720px;
}
.section--has-log .section__content { bottom: calc(min(12vh, 80px) + 110px); }

.section--center .section__content {
  position: absolute;
  inset: 0;
  left: 0; right: 0;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-30);
  text-align: center;
  max-width: none;
}

.section__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--s-15);
  opacity: 0.85;
}

.section__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-transform: uppercase;
  margin: 0;
}
.section--center .section__title { font-size: clamp(40px, 6vw, 88px); }

.section__title .dot {
  display: inline-block;
  width: 0.14em; height: 0.14em;
  background: var(--accent);
  vertical-align: baseline;
  margin-left: 0.06em;
}
.section__title-last { white-space: nowrap; }

.section__title .meta {
  display: block;
  font-size: 0.36em;
  letter-spacing: 1.6px;
  line-height: 1.4;
  opacity: 0.65;
  font-weight: var(--w-regular);
  margin-top: 0.35em;
}

.section__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: var(--fg);
  margin: var(--s-20) 0 var(--s-30);
  max-width: 480px;
  opacity: 0.92;
}

/* ============================================================
   MISSION LOG — bottom-anchored data row inside a section
   ============================================================ */
.mission-log {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-20) min(8vw, 64px);
  display: flex;
  gap: min(6vw, 48px);
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 3;
}
.mission-log__entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mission-log__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--w-regular);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.85;
}
.mission-log__value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--fg);
}

/* ============================================================
   FOOTER — single-line micro copy on black
   ============================================================ */
.footer {
  background: var(--bg);
  padding: var(--s-30) min(8vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-20);
  border-top: 1px solid rgba(240,240,250,0.10);
  scroll-snap-align: end;
}
.footer__copy {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--w-regular);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.55;
}
.footer__links a {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--w-regular);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.55;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer__links {
  display: flex;
  gap: var(--s-24);
}
.footer__links a:hover { opacity: 1; }

/* ============================================================
   MOTION — scroll reveals
   Slow opacity-and-translate-Y fade. 700ms. ease-out.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-fade) var(--ease-standard),
              transform var(--dur-fade) var(--ease-standard);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .bp-dot { display: none; } /* frozen dots read as stray marks; hide them */
  /* the global .001ms trick lacks iteration-count:1, so infinite animations
     keep sampling arbitrary cycle positions (blink classes would flicker).
     Kill them outright; park the sweep off-display (its base position is x=0,
     which would otherwise draw a stray line at the sheet edge). */
  .bp-pulse, .bp-march, .bp-blink { animation: none !important; }
  .bp-sweep { display: none; }
}

/* ============================================================
   CTA ROW — two ghost buttons side-by-side, used on #contact
   ============================================================ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-15);
  align-items: center;
}

@media (max-width: 480px) {
  .cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-12);
  }
  .cta-row .ghost {
    width: 100%;
  }
}

@media (max-width: 720px) {
  /* The taller Cyber strip needs a larger content lift than the
     4-cell Agents log default of 110px. */
  .section--has-log-tall .section__content {
    bottom: calc(min(12vh, 80px) + 200px);
  }
}

@media (max-width: 480px) {
  .section--has-log-tall .section__content {
    bottom: calc(min(12vh, 80px) + 320px);
  }
}

/* ============================================================
   MISSION LOG — three-cell variant for the Cyber engagements
   One row of three on desktop, two columns on tablet, stacked
   on narrow. Values run long (engagement descriptors), so each
   cell needs more horizontal room than the 4-cell Agents log.
   ============================================================ */
.mission-log--three {
  flex-wrap: wrap;
  gap: var(--s-20) min(4vw, 36px);
  align-items: flex-start;
}
.mission-log--three .mission-log__entry {
  flex: 0 0 calc((100% - 2 * min(4vw, 36px)) / 3);
  min-width: 220px;
}

@media (max-width: 900px) {
  .mission-log--three .mission-log__entry {
    flex: 0 0 calc((100% - min(4vw, 36px)) / 2);
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .mission-log--three .mission-log__entry {
    flex: 1 1 100%;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.u-stack-12 > * + * { margin-top: var(--s-12); }
.u-stack-20 > * + * { margin-top: var(--s-20); }
.u-stack-30 > * + * { margin-top: var(--s-30); }
.u-row { display: flex; align-items: center; gap: var(--s-12); }

@media (max-height: 700px) {
  .mission-log {
    padding: var(--s-12) min(8vw, 64px);
  }
  .section--has-log-tall .section__content {
    bottom: calc(min(6vh, 40px) + 240px);
  }
}

/* ============================================================
   BLUEPRINTS — per-section inline-SVG engineering drawings.
   Edges live unstyled in <defs>; a styled <use> draws the line,
   a second <use class="bp-pulse"> animates the same geometry.
   ============================================================ */
.section__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.section__art svg { width: 100%; height: 100%; display: block; }

.section__art text {
  font-family: var(--font-mono);
  letter-spacing: 2px; /* no matching tracking token — SVG px tracking, not relative to type size */
  text-transform: uppercase;
  fill: rgba(240, 240, 250, 0.85);
}
.section__art text.bp-s { font-size: 10.5px; fill: rgba(240, 240, 250, 0.55); }
.section__art text.bp-t { font-size: 12.5px; }
.section__art text.bp-red-t { font-size: 10.5px; fill: var(--accent); }

@media (max-width: 960px) {
  /* Compact: do not slice-cover the sheet. Phone aspect crops a zoomed
     fragment of the 980x551 drawing through the copy. Contain it at native
     ratio, park it under the nav, dim it, and drop labels that do not read.
     Position the box; do not flex the SVG (viewBox intrinsic min-size
     would keep the sheet ~551px tall). */
  .section__art {
    opacity: 0.45;
    inset: calc(var(--nav-h-mobile) + var(--s-20)) 8% auto;
    height: auto;
  }
  .section__art svg {
    width: 100%;
    height: auto;
    aspect-ratio: 980 / 551;
    max-height: 36vh;
  }
  .section__art text { display: none; }
}

.bp-stroke         { stroke: rgba(240,240,250,0.55); stroke-width: 1.3; fill: none; }
.bp-stroke--bright { stroke: rgba(240,240,250,0.80); stroke-width: 1.5; }
.bp-stroke--faint  { stroke: rgba(240,240,250,0.30); stroke-width: 1.1; }
.bp-dash           { stroke-dasharray: 6 7; }
.bp-grid-line      { stroke: rgba(240,240,250,0.07); stroke-width: 1; }
.bp-node           { fill: var(--bg); stroke: var(--fg); stroke-width: 1.6; }
.bp-panel {
  fill: var(--bg);
  stroke: rgba(240, 240, 250, 0.80);
  stroke-width: 1.5;
}
.bp-panel--dash {
  fill: var(--bg);
  stroke: rgba(240, 240, 250, 0.55);
  stroke-width: 1.1;
  stroke-dasharray: 6 7;
}
.bp-red            { fill: var(--accent); stroke: none; }
.bp-red-ring       { fill: none; stroke: rgba(227,30,36,0.75); /* var(--wittenberger-red) @ 75% */ stroke-width: 1.4; }
.bp-red-stroke     { fill: none; stroke: var(--accent); stroke-width: 1.8; }

.bp-pulse {
  stroke: var(--fg); stroke-width: 2; fill: none;
  stroke-dasharray: 10 240;
  animation: bp-dash-travel 4s linear infinite;
}
@keyframes bp-dash-travel { to { stroke-dashoffset: -250; } }

.bp-march {
  stroke-dasharray: 8 8;
  animation: bp-march 0.9s linear infinite;
}
@keyframes bp-march { to { stroke-dashoffset: -16; } }

.bp-blink { animation: bp-blink 1.1s steps(1) infinite; }
@keyframes bp-blink { 50% { opacity: 0; } }

.bp-dot {
  fill: var(--accent);
  offset-rotate: 0deg;
  animation: bp-travel var(--bp-travel-dur, 6.5s) linear infinite;
}
.bp-dot--white { fill: var(--fg); }
@keyframes bp-travel { to { offset-distance: 100%; } }
@supports not (offset-path: path("M0 0H1")) { .bp-dot { display: none; } }

/* postscript line under the contact CTA row */
.section__postscript { margin: var(--s-24) 0 0; opacity: 0.92; }
.section__postscript a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* WI-005 posture-audit sweep — translate across the perimeter (x 470 -> 890) */
@keyframes cyb-sweep {
  from { transform: translateX(470px); }
  to   { transform: translateX(890px); }
}

/* ============================================================
   DOSSIER — long-form company profile (not a snap section)
   ============================================================ */
.dossier {
  padding: calc(var(--nav-h-desktop) + var(--s-48)) min(8vw, 64px) var(--s-64);
  max-width: 920px;
  margin: 0 auto;
}
.dossier [id] { scroll-margin-top: calc(var(--nav-h-desktop) + var(--s-24)); }
.dossier__kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s-12);
}
.dossier__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(32px, 5vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0 0 var(--s-12);
}
.dossier__lede {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg-dim);
  margin: 0 0 var(--s-8);
  max-width: 40rem;
}
.dossier__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 var(--s-48);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.dossier__rule {
  border: 0;
  border-top: 1px solid rgba(240, 240, 250, 0.12);
  margin: var(--s-48) 0;
}
.dossier__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 var(--s-15);
}
.dossier__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-24);
  margin: 0 0 var(--s-30);
}
.dossier__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--w-bold);
  letter-spacing: 0.5px;
  margin: 0 0 var(--s-8);
}
.dossier__stat-value em {
  font-style: normal;
  color: var(--accent);
}
.dossier__stat-copy,
.dossier p {
  margin: 0 0 var(--s-20);
  color: var(--fg-dim);
  max-width: 40rem;
}
.dossier__industries {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  line-height: 1.7;
}
.dossier__caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-20) var(--s-48);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dossier__caps dt {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
}
.dossier__caps dd {
  margin: 0;
  color: var(--fg-dim);
  font-size: 15px;
}
.dossier-case {
  margin: 0 0 var(--s-48);
}
.dossier-case__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  margin: 0 0 var(--s-8);
}
.dossier-case h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--w-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 var(--s-8);
}
.dossier-case__client {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 var(--s-20);
}
.dossier h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  margin: var(--s-20) 0 var(--s-8);
}
.dossier ul {
  margin: 0 0 var(--s-20);
  padding-left: 1.1em;
  color: var(--fg-dim);
  max-width: 40rem;
}
.dossier li + li { margin-top: var(--s-8); }
.dossier a { color: var(--fg); }
.dossier__stack {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--s-20);
  line-height: 1.7;
}
.dossier-people {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-48);
}
.dossier-people h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.dossier-people .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-15);
}
.dossier__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-24);
  margin-top: var(--s-24);
}
.dossier__cta .ghost {
  flex: 0 0 auto;
}

@media (min-width: 720px) {
  .dossier-people { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-30); }
}
@media (max-width: 720px) {
  .dossier { padding-top: calc(var(--nav-h-mobile) + var(--s-30)); }
  .dossier__stats,
  .dossier__caps { grid-template-columns: 1fr; }
}

/* Team index + profile pages. Photos are the one exception to
   "blueprint, not photography" — they are people, not section art.
   Hairline frames, no cards, no radius, no shadow. */
.people-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-48);
  margin-top: var(--s-48);
}
.people-index__person {
  display: block;
  text-decoration: none;
  color: inherit;
}
.people-index__person:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 6px;
}
.people-index__photo {
  margin: 0 0 var(--s-15);
  border: 1px solid rgba(240, 240, 250, 0.18);
}
.people-index__photo img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.people-index__photo img.photo--sergiu { object-position: 50% 10%; }
.people-index__photo img.photo--dragos { object-position: 50% 28%; }
.people-index__photo img.photo--bogdan { object-position: 88% 48%; }
.people-index h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.people-index .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-15);
}
.people-index__more {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.people-index__person:hover h2,
.people-index__person:hover .people-index__more { color: #ffffff; }

.profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-30);
  align-items: start;
  padding-bottom: 12px;
}
.profile__photo {
  margin: 0;
  border: 1px solid rgba(240, 240, 250, 0.18);
  max-width: 420px;
  align-self: start;
}
.profile__photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.profile__photo--portrait img {
  aspect-ratio: 3 / 4;
}
.profile__photo--portrait img.photo--sergiu { object-position: 50% 12%; }
.profile__photo--portrait img.photo--dragos { object-position: 50% 18%; }
.profile__photo--landscape img {
  aspect-ratio: 3 / 2;
  object-position: 82% 48%;
}
.profile__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-20);
}
.profile__also {
  margin-top: var(--s-48);
}
.profile__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-30);
  margin-top: var(--s-24);
}
.profile__contact .dossier__cta { margin-top: 0; }
.profile__contact .profile__social {
  margin-top: 0;
  margin-bottom: 0;
}
.profile__social {
  margin-top: var(--s-24);
  margin-bottom: 0;
}

/* Extractable Agent vs RPA rule on the marketing page (SVG is aria-hidden). */
.rule-table {
  width: min(100%, 26rem);
  border-collapse: collapse;
  margin: var(--s-15) 0 var(--s-20);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg);
}
.rule-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 var(--s-8);
}
.rule-table th,
.rule-table td {
  border-bottom: 1px solid rgba(240, 240, 250, 0.18);
  padding: 8px 12px 8px 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.rule-table th {
  font-weight: 700;
  color: var(--fg-faint);
}

/* FAQ and legal pages: sentence-case questions, not display chrome. */
.dossier > h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: 0.4px;
  line-height: 1.3;
  text-transform: none;
  margin: var(--s-30) 0 var(--s-8);
}

@media (min-width: 720px) {
  .people-index { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-30); }
  .profile {
    grid-template-columns: minmax(220px, 320px) minmax(0, 40rem);
    gap: var(--s-48);
  }
  .profile--landscape {
    grid-template-columns: minmax(280px, 420px) minmax(0, 40rem);
  }
}