/* =========================================================================
   Struct IT — site stylesheet
   Permanent dark palette (the cinematic redesign, site-wide as of the "one
   design across all 8 pages" pass) — --ink is always the light foreground/
   text color, --paper is always the near-black page/surface color. There is
   no light-mode variant and no runtime toggle, so the tokens sit directly on
   the bare :root rather than behind a media query or [data-theme] switch.
   ========================================================================= */

:root {
  --ink: #f7f4ef;
  --paper: #100e14;
  --paper-raised: #171319;
  --crimson: #c33547;
  --crimson-dark: #9c2837;
  --indigo: #362b62;
  --line: #332d3a;
  --line-strong: #4a4152;
  --ink-soft: #b4acb9;

  --font-display: 'Antonio', 'Arial Narrow', sans-serif;
  --font-accent: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --container: 1200px;
  --radius: 2px;
  --shadow-card: 0 1px 0 var(--line), 0 12px 24px -18px rgba(0, 0, 0, 0.6);
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
.lede { max-width: 60ch; text-wrap: pretty; }
figcaption, .callout p, li { text-wrap: pretty; }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 72px 0; }
@media (max-width: 720px) {
  section { padding: 48px 0; }
  body { font-size: 16px; }
}

.eyebrow {
  font-family: var(--font-accent);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--crimson);
  display: inline-block;
}

h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: clamp(20px, 2.6vw, 24px); }

.text-soft { color: var(--ink-soft); }
.mono { font-family: var(--font-mono); }
/* Preserves "STRUCT'it" casing inside uppercase-transformed elements (eyebrows, headings, buttons) */
.brand-name { text-transform: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--crimson);
  color: #fff;
}
.btn-primary:hover { background: var(--crimson-dark); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-arrow::after { content: "→"; transition: transform 0.15s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16, 14, 20, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}
.brand-mark img { height: 54px; width: auto; }
.brand-mark { display: flex; align-items: center; }
/* The header is always dark now, so the light-colored (reversed) lockup is
   always the correct logo — no theme-dependent swap needed any more. */
.brand-mark .logo-light { display: none; }
.brand-mark .logo-dark { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.nav-links a {
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { border-bottom-color: var(--crimson); }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.has-dropdown { position: relative; }
.dropdown-toggle {
  background: none; border: none; font: inherit;
  color: inherit; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; padding: 8px 2px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.dropdown-toggle::after { content: "▾"; font-size: 10px; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  min-width: 260px;
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
}
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-bottom: none !important;
  font-size: 13px;
  border-radius: var(--radius);
}
.dropdown-menu a:hover { background: var(--paper); color: var(--crimson); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  padding: 8px 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-row { height: 72px; }
  .brand-mark img { height: 42px; }
  /* backdrop-filter on .site-header makes it the containing block for any
     position:fixed descendant (per spec, in every major browser) — so the
     "fixed, full-screen" mobile menu below would otherwise be fixed
     relative to the 72px header box instead of the viewport, clipping it
     to a narrow strip. Drop the filter for the moment the menu is open so
     .nav-links fixes against the real viewport instead. */
  body.nav-open .site-header {
    /* !important alone still lets the header's own 0.4s transition animate
       the filter down to none, so the containing-block bug would remain
       visible for that whole window every time the menu opens — kill the
       transition too so this snaps instantly. Background is forced fully
       opaque too, since it was previously relying on the blur (now removed)
       to hide anything behind it at its normal 90% opacity. */
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--paper) !important;
  }
  body.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--paper);
    padding: 16px 24px 32px;
    overflow-y: auto;
    z-index: 99;
  }
  body.nav-open .nav-links a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line) !important; }
  body.nav-open .dropdown-menu {
    position: static; transform: none; visibility: visible; opacity: 1;
    display: none; border: none; box-shadow: none; width: 100%; padding: 0 0 0 16px;
    background: transparent;
  }
  body.nav-open .has-dropdown.is-open .dropdown-menu { display: block; }
}

/* ---------- hero ---------- */
.hero {
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero-tag { font-family: var(--font-display); font-size: clamp(15px, 1.6vw, 18px); letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; margin-top: 18px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.hero-figure { margin-top: 48px; border: 1px solid var(--line); overflow: hidden; }
.hero-figure img { width: 100%; height: auto; display: block; }

/* ---------- capability grid ---------- */
.grid-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cap-card {
  background: var(--paper);
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  transition: background 0.15s ease;
}
.cap-card:hover { background: var(--paper-raised); }
.cap-index { font-family: var(--font-mono); font-size: 13px; color: var(--crimson); }
.cap-card h3 { margin-bottom: 4px; }
.cap-card p { font-size: 15px; color: var(--ink-soft); margin-bottom: 0; }
.cap-card .cap-link { margin-top: auto; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 900px) { .grid-caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-caps { grid-template-columns: 1fr; } }

/* ---------- proof strip ---------- */
.proof-strip { padding: 56px 0; background: var(--paper-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.proof-card { position: relative; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 5; }
.proof-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.proof-card:hover img { transform: scale(1.05); }
.proof-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(6,6,9,0.85), transparent);
  color: #f7f4ef;
  padding: 28px 14px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---------- generic content blocks ---------- */
.section-head { max-width: 720px; margin-bottom: 40px; }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

.stack { display: flex; flex-direction: column; gap: 40px; }

.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.feature-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
}
.feature-list li:first-child { border-top: 1px solid var(--line); }
.feature-list .num { font-family: var(--font-mono); color: var(--crimson); font-size: 14px; padding-top: 3px; }
.feature-list h4 { margin: 0 0 6px; text-transform: none; font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: 0; }
.feature-list p { margin: 0; font-size: 15px; color: var(--ink-soft); }

.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-list li {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  padding: 9px 14px;
  border-radius: 999px;
}

.callout {
  border-left: 3px solid var(--crimson);
  background: var(--paper-raised);
  padding: 24px 28px;
  margin: 8px 0 0;
}
.callout p:last-child { margin-bottom: 0; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; align-items: start; }
.photo-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.photo-grid figure { margin: 0; border: 1px solid var(--line); overflow: hidden; background: var(--paper-raised); }
/* No height:100% here on purpose — CSS Grid's default align-items:stretch
   gives each figure a definite (non-auto) height once a row mixes figures
   of different natural heights (e.g. a plain photo next to a slideshow
   tile, or even two equal plain photos in some layouts). Once the figure's
   height is definite, a height:100% on this img would resolve against it
   and override aspect-ratio entirely, filling the whole figure — including
   the space the figcaption below needs — and silently clipping the caption
   via the figure's overflow:hidden. width + aspect-ratio alone size the
   image correctly regardless of row stretch. */
.photo-grid img { width: 100%; object-fit: cover; aspect-ratio: 4/3; }
.photo-grid figcaption { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); padding: 10px 12px; border-top: 1px solid var(--line); text-align: center; line-height: 1.5; }
@media (max-width: 800px) { .photo-grid, .photo-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .photo-grid, .photo-grid.cols-2 { grid-template-columns: 1fr; } }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; }
.stat { background: var(--paper); padding: 24px; }
.stat .num { font-family: var(--font-display); font-size: 34px; }
.stat .label { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }

/* Deliberately the inverse of the page — a light band standing out against
   the otherwise-dark site, the same accent role it played before the dark
   flip. --ink/--paper still swap the same way, so the pairing (light bg,
   dark text) still holds; only the literal accent colors below needed
   updating for the new, permanently-dark meaning of the tokens. */
.section-band { background: var(--ink); color: var(--paper); }
.section-band .eyebrow { color: var(--crimson); }
.section-band .eyebrow::before { background: var(--crimson); }
.section-band a.btn-ghost { border-color: rgba(16,14,20,0.35); color: var(--paper); }
.section-band a.btn-ghost:hover { border-color: var(--paper); }
/* .text-soft is tuned for the dark page (a light muted grey); inside the
   light section-band it needs the opposite muting, off the dark text color. */
.section-band .text-soft { color: rgba(16,14,20,0.65); }
.section-band a { color: var(--paper); }
.section-band a:hover { color: var(--crimson); }

.cta-band { padding: 72px 0; text-align: center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band .lede { margin: 0 auto 32px; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- who-this-is-for / definition list style ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.who-card { border: 1px solid var(--line); padding: 24px; background: var(--paper-raised); }
.who-card .mono { color: var(--crimson); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 10px; }
@media (max-width: 800px) { .who-grid { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 20px; max-width: 560px; }
label { display: block; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; color: var(--ink-soft); }
input, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
}
input:focus, textarea:focus { outline: 2px solid var(--crimson); outline-offset: 1px; }
textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 13.5px; color: var(--ink-soft); margin-top: -6px; }
.form-status { font-family: var(--font-mono); font-size: 14px; margin-top: 8px; }
.form-status.ok { color: #1c7a45; }
.form-status.err { color: var(--crimson); }

.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-info dt { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin: 0 0 4px; }
.contact-info dd { margin: 0; font-size: 18px; }
.contact-info a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-info a:hover { border-color: var(--crimson); color: var(--crimson); }

/* ---------- footer ---------- */
/* Now that the whole page is permanently dark, an "inverted" footer would
   have to invert AGAINST an already-dark page — which is exactly the bug
   that made the footer flip to a pale cream band. The footer is instead a
   slightly deeper shade of the same dark surface (not tied to --ink/--paper
   swapping any more), with ordinary --ink-colored text on it, same as the
   rest of the page. */
.site-footer { background: #0b0a0e; color: var(--ink); padding: 64px 0 28px; border-top: 1px solid var(--line); }
.site-footer a { text-decoration: none; color: var(--ink); opacity: 0.85; }
.site-footer a:hover { opacity: 1; color: var(--crimson); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.footer-brand { position: relative; }
.footer-logo { display: block; height: 96px; width: auto; margin-bottom: 16px; }
/* The footer is dark like the rest of the page now, so it always wants the
   same light-colored (reversed) lockup as the header — no swap needed. */
.footer-logo-on-light { display: none; }
.footer-logo-on-dark { display: block; }
.footer-brand p { color: var(--ink); opacity: 0.72; }
.footer-motto { font-family: var(--font-accent); letter-spacing: 0.08em; font-size: 15px; color: var(--ink); opacity: 0.78; text-transform: uppercase; }
.footer-col h5 { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); opacity: 0.66; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 13px; color: var(--ink); opacity: 0.66; font-family: var(--font-mono); }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--crimson); color: #fff;
  padding: 12px 18px; z-index: 200; font-family: var(--font-mono);
}
.skip-link:focus { left: 12px; top: 12px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}