/* ==========================================================================
   Phalanx Overwatch
   --------------------------------------------------------------------------
   Theme is locked dark for the whole page. This is a security operations
   brand; the dark register is the native one, and a light section dropped in
   the middle would read as a different site. No section inverts.

   One accent: bronze. It carries the phalanx metaphor - the hoplite shield
   wall - and it is deliberately not the cyan every security vendor uses.
   Threats in the motion graphics render in cold near-white, which is a text
   tier rather than a second accent hue, so the accent lock holds.

   One shape system: square. Radius 0 everywhere, including buttons. The brand
   is architectural and defensive; soft corners undercut it.
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/archivo-800.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/jbmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/jbmono-500.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --obsidian:      #0A0B0D;
  --surface:       #101216;
  --surface-high:  #171A20;
  --hairline:      rgba(201, 135, 63, 0.16);
  --hairline-soft: rgba(236, 234, 230, 0.08);

  --bronze:        #C9873F;
  --bronze-bright: #E8A455;
  --bronze-deep:   #8A5A24;

  --ink:           #ECEAE6;
  --ink-dim:       #9BA0A8;
  /* 5.8:1 on the obsidian base. The obvious choice here is a dimmer grey, and
     it measured 3.95:1 - under AA for the small mono labels this is used on
     (panel footers, stat keys, the footer note). Small and low-contrast is the
     combination that actually fails people, so this tier is lighter than it
     looks like it wants to be. */
  --ink-faint:     #868C95;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: min(1320px, 92vw);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-canvas: 0;
  --z-content: 10;
  --z-nav: 40;
  --z-grain: 60;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Grain sits on a fixed, non-interactive layer. On a scrolling container it
   would repaint every frame and cost the whole mobile frame budget. */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.d-xl { font-size: clamp(2.9rem, 8.2vw, 7rem); }
.d-lg { font-size: clamp(2.3rem, 5.6vw, 4.4rem); }
.d-md { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -0.025em; }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--ink-dim);
  line-height: 1.65;
  max-width: 46ch;
  margin: 0;
}
.body { color: var(--ink-dim); max-width: 60ch; margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1.4rem;
}

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

/* ---------- layout ---------- */
.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding-block: clamp(6rem, 13vh, 10rem); }
.rule { height: 1px; background: var(--hairline-soft); border: 0; margin: 0; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: 68px;
  display: flex; align-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 11, 13, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.nav[data-stuck="true"] { border-bottom-color: var(--hairline); }
.nav__inner {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; gap: 2rem;
}
.nav__links { display: flex; gap: 2rem; margin-left: auto; }
.nav__links a {
  font-size: 0.86rem; color: var(--ink-dim);
  transition: color 0.25s var(--ease);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--ink); }

.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 24px; height: 26px; flex: none; }
.brand__name {
  font-weight: 800; letter-spacing: -0.02em; font-size: 0.98rem;
}
.brand__name span { color: var(--bronze); font-weight: 700; }

@media (max-width: 900px) {
  .nav__links { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--display); font-weight: 700; font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;            /* a wrapped CTA is a broken CTA */
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease);
}
/* Bronze at full strength against near-black text: 8.4:1, well past AA. */
.btn--primary { background: var(--bronze); color: #14100A; }
.btn--primary:hover { background: var(--bronze-bright); }
.btn--ghost {
  border-color: var(--hairline); color: var(--ink); background: transparent;
}
.btn--ghost:hover { border-color: var(--bronze); color: var(--bronze); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 3px; }
.nav .btn { padding: 0.6rem 1.15rem; font-size: 0.83rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;                 /* never h-screen: iOS collapses it */
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__canvas {
  position: absolute; inset: 0; z-index: var(--z-canvas);
  width: 100%; height: 100%;
}
.hero::after {
  /* Keeps headline contrast off the brightest part of the wall. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.72) 42%, rgba(10,11,13,0.15) 78%),
    linear-gradient(to top, rgba(10,11,13,0.9), transparent 38%);
}
.hero__inner {
  position: relative; z-index: var(--z-content);
  width: var(--shell); margin-inline: auto;
  padding-top: 68px;
  max-width: var(--shell);
}
.hero__copy { max-width: 62ch; }
.hero .lede { margin-top: 1.7rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }

/* ---------- breach scene (pinned) ---------- */
.breach { position: relative; height: 100dvh; overflow: hidden; }
.breach__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.breach__copy {
  position: absolute; inset: 0; z-index: var(--z-content);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-inline: 6vw;
  pointer-events: none;
}
.breach__copy .display { max-width: 18ch; }
.breach__copy .body { margin-top: 1.5rem; max-width: 48ch; text-align: center; }

/* ---------- formation (horizontal pan) ---------- */
.pan { position: relative; overflow: hidden; }
.pan__track { display: flex; height: 100dvh; align-items: center; will-change: transform; }
.pan__intro {
  flex: none; width: min(46vw, 620px);
  padding-inline: clamp(1.5rem, 4vw, 5rem);
}
.panel {
  flex: none;
  width: min(78vw, 480px);
  margin-right: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.8rem, 2.6vw, 2.6rem);
  border: 1px solid var(--hairline-soft);
  border-top: 2px solid var(--bronze);
  background: linear-gradient(170deg, var(--surface-high), var(--surface) 62%);
  min-height: 26rem;
  display: flex; flex-direction: column;
}
.panel__idx {
  font-family: var(--mono); font-size: 0.74rem; color: var(--bronze);
  letter-spacing: 0.16em;
}
.panel h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 1.6rem 0 0; }
.panel p { color: var(--ink-dim); font-size: 0.96rem; margin: 0.9rem 0 0; }
.panel__foot {
  margin-top: auto; padding-top: 1.6rem; border-top: 1px solid var(--hairline-soft);
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint);
  letter-spacing: 0.06em;
}
@media (max-width: 860px) {
  .pan__track { height: auto; flex-direction: column; align-items: stretch; }
  .pan__intro { width: 100%; padding: 0 0 3rem; }
  .panel { width: 100%; margin: 0 0 1.2rem; min-height: 0; }
}

/* ---------- overwatch split ---------- */
.split {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } }
.watch__canvas {
  width: 100%; aspect-ratio: 1 / 1; max-height: 62vh;
  border: 1px solid var(--hairline-soft);
  background: radial-gradient(circle at 50% 50%, #0E1014, var(--obsidian) 72%);
}
.stat-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-top: 2.6rem;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}
.stat { background: var(--obsidian); padding: 1.3rem 1.4rem; }
.stat__k {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.stat__v {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; margin-top: 0.5rem;
  color: var(--ink);
}

/* ---------- escalation (grouped chunks, not a bulleted list) ---------- */
.chain { display: grid; gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft); }
@media (min-width: 940px) { .chain { grid-template-columns: repeat(3, 1fr); } }
.chain__cell { background: var(--obsidian); padding: clamp(1.6rem, 2.4vw, 2.4rem); }
.chain__verb {
  font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 0.8rem;
}
.chain__verb svg { width: 20px; height: 20px; flex: none; color: var(--bronze); }
.chain__cell p { color: var(--ink-dim); margin: 0.9rem 0 0; font-size: 0.95rem; }

/* ---------- coverage bento (5 items, 5 cells) ---------- */
.bento { display: grid; gap: 1px; background: var(--hairline-soft);
         border: 1px solid var(--hairline-soft); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(11rem, auto); }
  .b1 { grid-column: span 4; grid-row: span 2; }
  .b2 { grid-column: span 2; }
  .b3 { grid-column: span 2; }
  .b4 { grid-column: span 3; }
  .b5 { grid-column: span 3; }
}
.cell {
  background: var(--obsidian);
  padding: clamp(1.5rem, 2.2vw, 2.2rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}
.cell h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; position: relative; z-index: 2; }
.cell p { color: var(--ink-dim); font-size: 0.92rem; margin: 0.7rem 0 0; max-width: 42ch; position: relative; z-index: 2; }
/* Visual variation so the grid is not six identical text tiles. */
.b1 { background:
        radial-gradient(120% 90% at 88% 8%, rgba(201,135,63,0.20), transparent 58%),
        linear-gradient(160deg, var(--surface-high), var(--obsidian) 70%); }
.b1 canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.b1 > * { position: relative; z-index: 2; }
.b3 { background: linear-gradient(200deg, rgba(201,135,63,0.10), transparent 62%), var(--obsidian); }
.b4 { background: linear-gradient(15deg, var(--surface), var(--obsidian) 60%); }

/* ---------- armour imagery ----------
   The shields in the motion graphics are drawn; the surface they are made of is
   photographed. Real material under drawn geometry is what stops the page
   reading as an illustration. Every plate image is decorative, so it carries an
   empty alt and aria-hidden, except the shield, which is the section's subject
   and is described. */
.hero__plate, .close__plate {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: block; overflow: hidden;
}
.hero__plate img, .close__plate img {
  width: 100%; height: 100%; object-fit: cover;
  /* Sits under the drawn wall: present as material, never competing with it. */
  opacity: 0.30; filter: saturate(0.55) contrast(1.08);
}
.close__plate img { opacity: 0.22; }

.armour { position: relative; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
@media (max-width: 899px) { .split--reverse { direction: ltr; } }

.plateshot { margin: 0; position: relative; }
.plateshot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hairline);
  /* The shield is lit from the upper left; the shadow agrees with it. */
  box-shadow: 26px 30px 70px rgba(0, 0, 0, 0.62);
}
.plateshot::after {
  /* Sinks the plate into the page rather than pasting it on top. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 70% at 32% 28%, transparent 40%, rgba(10, 11, 13, 0.55) 100%);
}

/* The creed: three absolutes, set as a ledger rather than a bulleted list. */
.creed { margin-top: 2.4rem; border-top: 1px solid var(--hairline-soft); }
.creed__row {
  display: grid; gap: 0.15rem 1.2rem; padding: 1rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--ink-dim); font-size: 0.95rem;
}
@media (min-width: 620px) { .creed__row { grid-template-columns: 9.5rem 1fr; align-items: baseline; } }
.creed__row span {
  color: var(--ink); font-weight: 800; letter-spacing: -0.02em; font-size: 1.02rem;
}

.cell__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; }
.cell__bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.34; filter: saturate(0.5) contrast(1.06);
}
.cell__bg--right img { object-position: 78% 50%; opacity: 0.26; }
.cell__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 13, 0.94) 12%, rgba(10, 11, 13, 0.42) 62%, transparent);
}

/* ---------- closing ---------- */
.close { position: relative; overflow: hidden; text-align: center; }
.close__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.close__inner { position: relative; z-index: var(--z-content); padding-block: clamp(7rem, 16vh, 12rem); }
.close .display { margin-inline: auto; max-width: 16ch; }
.close .lede { margin: 1.7rem auto 0; text-align: center; }
.close .btn { margin-top: 2.6rem; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--hairline-soft); padding-block: 3rem; }
.foot__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; }
.foot__note { color: var(--ink-faint); font-size: 0.84rem; margin-left: auto; }

/* ---------- reveal (JS adds .is-in) ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .grain { display: none; }
  .pan__track { transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}