/* Built for defence (built-for/defence/). Inner Ten on an olive night: the radar scope carries the page.
   Route tokens only; the global system (Teko, Open Sans, pills, lime as light) stays as it is.
   Motion lives in defence-page.js. Without JS, with reduced motion or Save-Data every element here is visible and still. */

.df-page {
  --df-ground: #0B130C;      /* green-black night */
  --df-raise: #121D12;       /* raised surface on night */
  --df-od: #24321C;          /* olive drab field */
  --df-od-deep: #1A2615;
  --df-line: #2A3A22;        /* hairlines on night (decorative) */
  --df-sage: #EEF1EA;        /* the one paper section: cool sage, never cream */
  --df-muted: #A9B4A0;       /* muted text on night, 8.74:1 on ground */
  --df-subtle: #8E9A86;      /* subtle text on night, 6.40:1 on ground */
  --df-phos: var(--color-lime);
  --df-phos-dim: rgba(160, 224, 32, 0.28);
  --df-phos-faint: rgba(160, 224, 32, 0.1);
  background: var(--df-ground);
}
.df [data-theme="dark"], .df[data-theme="dark"], .df-page .site-footer {
  --bg: var(--df-ground); --bg-alt: var(--df-raise); --text-muted: var(--df-muted); --text-subtle: var(--df-subtle); --line: var(--df-line);
}
.df [data-theme="light"] { --bg: var(--df-sage); }
.df > [data-theme], .df > figure { background: var(--bg); }
.df-page .site-footer { background: var(--df-ground); }

.df-h2 { max-width: 21ch; }
.df-h2 em, .df-h1 em { padding-bottom: 0.06em; }
.df-prose { display: grid; gap: var(--space-5); max-width: var(--measure-body); color: var(--text-muted); }
.df-prose .lede { color: var(--text); }
.df .lede { text-wrap: pretty; }

/* ───────────── Hero ───────────── */
.df-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; align-items: center;
  padding-block: clamp(7rem, 12svh, 9rem) clamp(3rem, 8svh, 5rem);
}
.df-hero-media { position: absolute; inset: 0; z-index: -2; transform-origin: 62% 46%; }
.df-hero-media img, .df-hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 52%; }
.df-hero-film { opacity: 0; transition: opacity 900ms var(--ease-out); }
.df-hero-film.is-playing { opacity: 1; }
.df-hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 19, 12, 0.94) 0%, rgba(11, 19, 12, 0.78) 30%, rgba(11, 19, 12, 0.12) 60%, rgba(11, 19, 12, 0.24) 100%),
    linear-gradient(180deg, rgba(11, 19, 12, 0.5) 0%, transparent 22%, transparent 70%, var(--df-ground) 100%);
}
.df-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.df-hero-copy { display: grid; justify-items: start; gap: var(--space-5); }
.df-h1 { font-size: clamp(3.2rem, 0.9rem + 4.9vw, 6.75rem); line-height: 0.88; }
.df-line { display: block; white-space: nowrap; }
.df-hero-lede { color: var(--text); max-width: 34ch; }
.df-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }

/* ───────────── The scope ───────────── */
.df-scope {
  position: relative; aspect-ratio: 1; width: 100%; max-width: min(42rem, 74svh); justify-self: end;
  border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle at 50% 50%, rgba(11, 19, 12, 0.62) 0%, rgba(11, 19, 12, 0.8) 62%, rgba(11, 19, 12, 0.9) 100%);
  box-shadow: 0 0 0 1px rgba(160, 224, 32, 0.22), 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.df-scope-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.df-scope-grid circle, .df-scope-grid path { fill: none; stroke: var(--df-phos-dim); stroke-width: 0.35; vector-effect: non-scaling-stroke; }
.df-scope-grid .df-ring--edge { stroke: rgba(160, 224, 32, 0.6); stroke-width: 1.5; }
.df-scope-grid .df-cross--thin { stroke: var(--df-phos-faint); }
.df-scope-grid .df-ticks { stroke: rgba(160, 224, 32, 0.45); stroke-width: 6; stroke-dasharray: 0.35 4.65; vector-effect: none; }
.df-scope-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.df-contacts { position: absolute; inset: 0; }
.df-contact {
  position: absolute; width: 0; height: 0;
  left: calc(50% + cos(calc(var(--a) * 1deg)) * var(--r) * 50%);
  top: calc(50% + sin(calc(var(--a) * 1deg)) * var(--r) * 50%);
}
.df-contact-dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--df-phos); box-shadow: 0 0 0 4px rgba(160, 224, 32, 0.16), 0 0 18px 2px rgba(160, 224, 32, 0.55);
  transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
}
.df-contact-dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--df-phos); opacity: 0; pointer-events: none;
}
.df-contact-label {
  position: absolute; left: 14px; top: -0.8em; white-space: nowrap;
  font: 700 0.75rem/1.6 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  padding: 0 0.5em; border-radius: var(--radius-xs); background: rgba(11, 19, 12, 0.72);
  transition: opacity 400ms var(--ease-out), color 400ms var(--ease-out);
}
.df-contact[data-flip] .df-contact-label { left: auto; right: 14px; }
/* Live scope: contacts rest dim and catch the sweep */
.df-scope.is-live .df-contact-dot { opacity: 0.3; transform: scale(0.7); transition-duration: 1400ms; }
.df-scope.is-live .df-contact.is-hit .df-contact-dot { opacity: 1; transform: scale(1); transition-duration: 90ms; }
.df-scope.is-live .df-contact.is-hit .df-contact-dot::after { animation: df-ping 900ms var(--ease-out) both; }
.df-scope.is-live .df-contact:not(.is-seen) .df-contact-label { opacity: 0; }
.df-scope.is-live .df-contact .df-contact-label { color: var(--df-muted); }
.df-scope.is-live .df-contact.is-hit .df-contact-label { color: var(--text); transition-duration: 80ms; }
@keyframes df-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }

/* ───────────── Into the scope: the statement ───────────── */
.df-brief { position: relative; overflow: hidden; padding-block: clamp(6rem, 14vw, 12rem) var(--section); }
.df-brief-rings {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 74% -20%, transparent 0 calc(9rem - 1px), rgba(160, 224, 32, 0.07) calc(9rem - 1px) 9rem);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 74% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 74% 0%, #000 20%, transparent 75%);
}
.df-brief-inner { position: relative; display: grid; gap: var(--space-7); }
.df-statement {
  font: 500 clamp(1.5rem, 0.95rem + 1.75vw, 2.75rem)/1.28 var(--font-text); letter-spacing: -0.02em;
  color: var(--text); max-width: 34ch; text-wrap: pretty;
}
.df-statement .df-w { transition: opacity 120ms linear; }
.df-goal {
  font: 500 var(--type-display-m-size)/0.95 var(--font-display); letter-spacing: 0.01em; color: var(--text);
  max-width: 22ch; justify-self: end; text-align: right;
}
.df-goal em { font-style: italic; color: var(--df-phos); }

/* ───────────── 1. Fragmented ───────────── */
.df-frag { padding-block: var(--section) calc(var(--section) * 1.1); }
.df-frag-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); margin-top: var(--gap-head, 2.5rem); align-items: start; }
.df-islands { position: relative; min-height: clamp(24rem, 34vw, 30rem); }
.df-island {
  position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--rot));
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center;
  padding: 0.85rem 1.15rem 0.9rem; border-radius: var(--radius-field);
  background: var(--df-raise); box-shadow: inset 0 0 0 1px var(--df-line), 0 24px 40px -24px rgba(0, 0, 0, 0.8);
  min-width: 13.5rem;
}
.df-island .ic { grid-row: span 2; width: 2rem; height: 2rem; color: var(--df-phos); }
.df-island-name { font: 700 var(--type-label-size)/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-muted); }
.df-island-val { font-size: 1.85rem; line-height: 1; padding-top: 0.12em; color: var(--text); }
.df-island-gaps { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.df-island-gaps path { fill: none; stroke: rgba(160, 224, 32, 0.32); stroke-width: 1.5; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; stroke-linecap: round; }

.df-cost {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--df-line);
}
.df-cost-figure { font-size: clamp(5rem, 2rem + 10vw, 12rem); line-height: 0.8; color: var(--df-phos); white-space: nowrap; }
.df-cost-unit { font-size: 0.36em; color: var(--text); letter-spacing: 0.02em; }
.df-cost-text { color: var(--text-muted); max-width: 58ch; padding-bottom: 0.4rem; }

/* ───────────── 2. One record ───────────── */
.df-record { padding-block: var(--section); position: relative; }
.df-record-head { display: grid; gap: var(--space-5); }
.df-record-head .lede { max-width: 56ch; }
.df-merge {
  position: relative; display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(4rem, 1fr) minmax(0, 27rem);
  align-items: center; margin-top: clamp(3rem, 6vw, 5rem); min-height: 34rem;
}
.df-sources { grid-column: 1; display: grid; gap: 0.85rem; position: relative; z-index: 1; }
.df-source {
  display: flex; align-items: center; gap: 0.75rem; min-height: 48px;
  font: 600 0.95rem/1.2 var(--font-text); color: var(--df-muted);
  transition: color 300ms var(--ease-out);
}
.df-source-ic {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--df-raise); box-shadow: inset 0 0 0 1px var(--df-line); color: var(--df-phos);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.df-source-ic .ic { width: 1.6rem; height: 1.6rem; }
.df-source.is-firing, .df-source.is-done { color: var(--text); }
@media (min-width: 900px) {
  .df-source { transform: translateX(var(--arc, 0)); }
  .df-source:nth-child(2), .df-source:nth-child(5) { --arc: 2.4rem; }
  .df-source:nth-child(3), .df-source:nth-child(4) { --arc: 3.4rem; }
}
.df-beams .df-beam-arc { stroke: var(--df-phos-dim); stroke-width: 1; stroke-dasharray: 2 6; }
.df-source.is-firing .df-source-ic { background: var(--df-phos); color: var(--color-moss); box-shadow: 0 0 0 6px rgba(160, 224, 32, 0.16); }
.df-source.is-done .df-source-ic { box-shadow: inset 0 0 0 1.5px var(--df-phos); }
.df-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.df-beams path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.df-beams .df-beam-base { stroke: var(--df-line); }
.df-beams .df-beam-pulse { stroke: var(--df-phos); stroke-width: 2; stroke-dasharray: 0.16 1.2; stroke-dashoffset: 1.16; opacity: 0; filter: drop-shadow(0 0 4px rgba(160, 224, 32, 0.8)); }
.df-beams .df-beam-done { stroke: rgba(160, 224, 32, 0.35); }

.df-file {
  grid-column: 3; position: relative; z-index: 1;
  border-radius: var(--radius-panel); background: var(--df-raise);
  box-shadow: inset 0 0 0 1px var(--df-line), 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
/* Magic UI Border Beam: a short run of light round the record while it is on screen */
@property --df-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.df-file::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--df-beam), transparent 0deg 300deg, rgba(160, 224, 32, 0.9) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
.df-file.is-live::after { opacity: 1; animation: df-beam 6s linear infinite; }
@keyframes df-beam { to { --df-beam: 360deg; } }
.df-file-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--df-line); }
.df-file-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--df-phos); color: var(--color-moss); flex: none; }
.df-file-mark svg { width: 30px; height: 30px; }
.df-file-title { font: 500 1.9rem/1 var(--font-display); letter-spacing: 0.01em; padding-top: 0.12em; }
.df-file-sub { font-size: var(--type-small-size); color: var(--df-muted); display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; }
.df-file-tag { font: 700 0.6875rem/1.6 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-phos); padding: 0 0.5em; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px rgba(160, 224, 32, 0.4); }
.df-entries { display: grid; }
.df-entry {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline;
  padding: 0.8rem 0; font-size: 0.95rem;
}
.df-entry + .df-entry { border-top: 1px solid var(--df-line); }
.df-entry time { font: 500 1.15rem/1 var(--font-numeric); text-transform: uppercase; color: var(--df-subtle); font-variant-numeric: tabular-nums; }
.df-entry-src { color: var(--text); }
.df-entry-val { font-size: 1.35rem; line-height: 1; color: var(--df-phos); }
.df-file-foot { display: flex; justify-content: space-between; padding-top: 0.9rem; border-top: 1px solid var(--df-line); font: 700 var(--type-label-size)/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-muted); }
.df-file-foot .num { font-family: var(--font-text); }
/* Waiting entries (only while the merge is driven by scroll) */
.df-merge.is-armed .df-entry { opacity: 0.14; filter: blur(3px); transform: translateY(8px); transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out), transform 300ms var(--ease-out); }
.df-merge.is-armed .df-entry.is-in { opacity: 1; filter: none; transform: none; transition: opacity 420ms var(--ease-out), filter 420ms var(--ease-out), transform 620ms var(--ease-out); }

.df-values { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); margin-top: clamp(4rem, 7vw, 6rem); }
.df-value {
  grid-column: span 2; position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--radius-panel);
  background: var(--df-raise); box-shadow: inset 0 0 0 1px var(--df-line);
  display: grid; gap: var(--space-3); align-content: start; color: var(--text-muted);
}
.df-value--wide { grid-column: span 4; }
.df-value:nth-child(1) { background: linear-gradient(140deg, var(--df-od) 0%, var(--df-raise) 70%); }
.df-value:nth-child(4) { background: linear-gradient(320deg, var(--df-od) 0%, var(--df-raise) 70%); }
/* React Bits Spotlight Card: a soft light follows a fine pointer */
.df-value::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(160, 224, 32, 0.12), transparent 60%);
  transition: opacity 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .df-value:hover::before { opacity: 1; } }
.df-value-title { font: 500 clamp(1.75rem, 1.4rem + 1vw, 2.5rem)/0.95 var(--font-display); color: var(--text); }
.df-value p { max-width: 46ch; }
.df-note { margin-top: var(--space-5); font-size: var(--type-small-size); color: var(--df-subtle); max-width: 62ch; }

/* ───────────── Marquee ───────────── */
.df-marquee { overflow: hidden; background: var(--df-od-deep) !important; border-block: 1px solid var(--df-line); padding-block: 1.1rem 0.85rem; }
.df-marquee-track { display: flex; align-items: center; gap: 2.25rem; width: max-content; padding-left: 2.25rem; }
.df-marquee span { font: 500 clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem)/1 var(--font-display); letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }
.df-marquee i { width: 0.8rem; height: 0.8rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--df-phos), 0 0 0 4px var(--df-od-deep), 0 0 0 5px rgba(160, 224, 32, 0.35); flex: none; margin-top: -0.2rem; }

/* ───────────── 3. Built to connect ───────────── */
.df-connect { --bg: var(--df-od); background: var(--df-od) !important; padding-block: var(--section); position: relative; overflow: hidden; isolation: isolate; }
.df-connect > .container { position: relative; }
.df-topo {
  position: absolute; inset: -12% 0; z-index: -1; pointer-events: none; opacity: 0.16;
  background: url("defence-topo.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.df-connect-head { display: grid; gap: var(--space-5); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.df-connect-head .lede { color: var(--text); max-width: 54ch; }
.df-stack { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.df-card {
  position: sticky; top: calc(clamp(5.5rem, 12svh, 7.5rem) + var(--i, 0) * 1.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  min-height: min(36rem, 72svh); padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--radius-panel); background: var(--df-ground);
  box-shadow: inset 0 0 0 1px var(--df-line), 0 -24px 60px -30px rgba(0, 0, 0, 0.7);
  transform-origin: 50% 0;
}
.df-card[data-card="1"] { --i: 1; }
.df-card[data-card="2"] { --i: 2; }
.df-card-copy { display: grid; gap: var(--space-4); align-content: center; color: var(--text-muted); }
.df-card-copy p { max-width: 40ch; font-size: var(--type-lede-size); line-height: var(--type-lede-leading); }
.df-card-num { font-size: clamp(3.5rem, 2rem + 3.6vw, 6rem); line-height: 0.8; color: var(--df-phos); }
.df-card-title { color: var(--text); }
.df-card-media { position: relative; height: 100%; min-height: 22rem; border-radius: var(--radius-media); overflow: hidden; }
.df-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-card-shade { position: absolute; inset: 0; border-radius: inherit; background: #050905; opacity: 0; pointer-events: none; }

/* ───────────── The simulator plate ───────────── */
.df-plate { background: linear-gradient(180deg, var(--df-od) 0 50%, var(--df-sage) 50% 100%) !important; padding: 0 var(--gutter); }
.df-plate-frame { position: relative; overflow: hidden; border-radius: var(--radius-panel); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; aspect-ratio: 16 / 8; }
.df-plate-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ───────────── 4. A working product (paper) ───────────── */
.df-product { padding-block: var(--section) calc(var(--section) * 1.1); color: var(--color-ink); }
.df-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.df-product-lead { display: grid; gap: var(--space-5); justify-items: start; }
.df-founders { display: flex; align-items: flex-end; gap: 1rem; }
.df-founders-num { font-size: var(--type-numeric-xl-size); line-height: 0.8; color: var(--color-moss); }
.df-founders-txt { font: 500 2rem/1 var(--font-display); padding-bottom: 0.35rem; color: var(--color-ink); }
.df-product .lede { color: var(--color-ink-2); }
.df-link {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font: 600 1rem/1 var(--font-text); color: var(--color-fern); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
}
.df-link .icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--duration-hover) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .df-link:hover .icon { transform: translateX(5px); } }
.df-validate { position: relative; padding-top: 0.4rem; }
.df-validate-intro { font-size: var(--type-lede-size); line-height: var(--type-lede-leading); color: var(--color-ink); max-width: 36ch; margin-bottom: var(--space-6); }
.df-steps { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); position: relative; z-index: 1; }
.df-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.df-step-ring {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--df-sage); box-shadow: inset 0 0 0 2px var(--color-fern); color: transparent;
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.df-step-ring .ic { width: 1.7rem; height: 1.7rem; }
.df-step.is-on .df-step-ring, .df-validate:not(.is-armed) .df-step-ring { background: var(--color-lime); color: var(--color-moss); box-shadow: inset 0 0 0 2px var(--color-moss); }
.df-step-title { font: 500 2rem/1 var(--font-display); padding-top: 0.2em; color: var(--color-ink); }
.df-step p { color: var(--color-ink-2); max-width: 44ch; margin-top: 0.35rem; }
.df-steps-line { position: absolute; left: 23px; top: 7rem; bottom: 1.6rem; width: 2px; background: var(--color-line-light); }
.df-steps-line span { position: absolute; inset: 0; background: var(--color-fern); transform-origin: 50% 0; }
.df-validate.is-armed .df-steps-line span { transform: scaleY(0); }

/* ───────────── 5. Relationships ───────────── */
.df-doors { padding-block: var(--section); overflow: hidden; }
.df-doors-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.df-scope--small { justify-self: start; max-width: min(34rem, 80svh); }
.df-doors-copy { display: grid; gap: var(--space-5); color: var(--text-muted); }
.df-doors-copy .df-h2 { color: var(--text); }
.df-doors-copy p { max-width: 56ch; }
.df-doors-copy .lede { color: var(--text); }
.df-findings { display: grid; gap: 0.15rem; }
.df-findings li {
  display: flex; align-items: center; gap: 0.9rem; min-height: 2.75rem;
  font: 500 clamp(1.5rem, 1.15rem + 0.9vw, 2.1rem)/1 var(--font-display); letter-spacing: 0.01em; color: var(--text);
  padding-top: 0.15em; transition: color 500ms var(--ease-out);
}
.df-findings li::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: -0.2em;
  background: var(--df-phos); box-shadow: 0 0 0 4px rgba(160, 224, 32, 0.14);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), opacity 500ms var(--ease-out);
}
.df-findings.is-live li { color: var(--df-muted); }
.df-findings.is-live li::before { opacity: 0.35; transform: scale(0.7); }
.df-findings.is-live li.is-seen { color: var(--text); }
.df-findings.is-live li.is-seen::before { opacity: 0.8; transform: scale(0.85); }
.df-findings.is-live li.is-hit { color: var(--df-phos); transition-duration: 80ms; }
.df-findings.is-live li.is-hit::before { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(160, 224, 32, 0.22); transition-duration: 80ms; }
.df-next {
  font: 500 clamp(1.6rem, 1.15rem + 1.25vw, 2.5rem)/1 var(--font-display) !important; letter-spacing: 0.01em;
  color: var(--text); max-width: 28ch !important; padding-left: 1.1rem; border-left: 2px solid var(--df-phos); margin-top: var(--space-3);
}

/* ───────────── 6. Evidence ───────────── */
.df-evidence { padding-block: var(--section) calc(var(--section) * 0.8); position: relative; }
.df-evidence-lede { margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--text) !important; max-width: 60ch; }
.df-path { position: relative; height: 15rem; margin-top: clamp(3rem, 6vw, 5rem); }
.df-path-line { position: absolute; left: 0; right: 0; top: 3.5rem; width: 100%; height: 6rem; overflow: visible; }
.df-path-line path { fill: none; vector-effect: non-scaling-stroke; }
.df-path-base { stroke: var(--df-line); stroke-width: 2; stroke-dasharray: 6 8; }
.df-path-draw { stroke: var(--df-phos); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.df-path.is-armed .df-path-draw { stroke-dashoffset: 1; }
.df-path-stop { position: absolute; top: 6.5rem; display: grid; justify-items: center; gap: 0.6rem; transform: translate(-50%, -50%); padding-top: 0; }
.df-path-fig { position: absolute; bottom: calc(100% + 1.1rem); white-space: nowrap; font-size: clamp(3.25rem, 2rem + 3.4vw, 5.5rem); line-height: 0.82; color: var(--df-phos); }
.df-path-stop--start .df-path-fig { left: 0; }
.df-path-stop--mid .df-path-fig { left: 50%; transform: translateX(-50%); }
.df-path-unit { font-size: 0.4em; color: var(--text); margin-inline: 0.12em; }
.df-path-sub { font-size: var(--type-small-size); line-height: 1.4; color: var(--df-muted); max-width: 22ch; }
.df-path-stop--mid .df-path-sub { text-align: center; }
.df-path-stop--end .df-path-sub { text-align: right; }
.df-path-stop--start { left: 1%; justify-items: start; transform: translate(0, -9px); }
.df-path-stop--mid { left: 50%; transform: translate(-50%, -9px); }
.df-path-stop--end { left: 99%; justify-items: end; transform: translate(-100%, -9px); }
.df-path-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--df-ground); box-shadow: inset 0 0 0 2.5px var(--df-phos); position: relative; z-index: 1; }
.df-path-stop--end .df-path-dot { background: var(--df-phos); box-shadow: 0 0 0 6px rgba(160, 224, 32, 0.18); }
.df-path-label { font: 500 clamp(1.25rem, 1rem + 0.6vw, 1.75rem)/1 var(--font-display); color: var(--text); white-space: nowrap; margin-top: 0.5rem; }
.df-path-stop--start .df-path-label, .df-path-stop--mid .df-path-label { color: var(--df-muted); }
/* Magic UI Ripple: rings open from the reference installation */
.df-path-ripple { position: absolute; top: 9px; right: 9px; width: 0; height: 0; }
.df-path-ripple i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--df-phos); opacity: 0; transform: scale(0.15); }
.df-path.is-live .df-path-ripple i { animation: df-ripple 3.6s var(--ease-out) infinite; }
.df-path.is-live .df-path-ripple i:nth-child(2) { animation-delay: 1.2s; }
.df-path.is-live .df-path-ripple i:nth-child(3) { animation-delay: 2.4s; }
@keyframes df-ripple { 0% { opacity: 0.7; transform: scale(0.15); } 100% { opacity: 0; transform: scale(1.6); } }
.df-measures { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-6); }
.df-measures-intro { font: 700 var(--type-label-size)/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--df-muted); margin-right: var(--space-2); }
.df-measures ul { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.df-measures li {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.15rem 1.25rem 0 0.9rem; border-radius: var(--radius-pill);
  font: 500 1.4rem/1 var(--font-display); letter-spacing: 0.02em; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(160, 224, 32, 0.4); background: var(--df-raise);
}
.df-measures li .ic { width: 1.5rem; height: 1.5rem; color: var(--df-phos); margin-top: -0.15rem; }
.df-fineprint { margin-top: clamp(3rem, 6vw, 5rem); font-size: 0.8125rem; line-height: 1.55; color: var(--df-subtle); max-width: 78ch; }

/* ───────────── Lock brackets (React Bits Target Cursor) ───────────── */
.df-lock { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 220ms var(--ease-out); }
.df-lock.is-on { opacity: 1; }
.df-lock i { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border: 2px solid var(--df-phos); will-change: transform; }
.df-lock i:nth-child(1) { border-right: 0; border-bottom: 0; }
.df-lock i:nth-child(2) { border-left: 0; border-bottom: 0; }
.df-lock i:nth-child(3) { border-left: 0; border-top: 0; }
.df-lock i:nth-child(4) { border-right: 0; border-top: 0; }

/* ───────────── Arrival (only while the script holds it) ───────────── */
.df-pre .df-hero-copy > *, .df-pre .df-scope { opacity: 0; }
.df-w { display: inline; }
.df-blur-w { display: inline-block; }
/* Heading lock-on (defence-page.js): four bracket corners close on the heading's text box. They only exist once the
   script runs and stay invisible without motion. Fern on the paper section, where lime may not be a line. */
[data-df-blur] { position: relative; }
.df-hl-text { display: block; }
.df-hl { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 2px solid var(--df-phos); opacity: 0; pointer-events: none; }
.df-hl--tl { border-right: 0; border-bottom: 0; }
.df-hl--tr { border-left: 0; border-bottom: 0; }
.df-hl--br { border-left: 0; border-top: 0; }
.df-hl--bl { border-right: 0; border-top: 0; }
[data-theme="light"] .df-hl { border-color: var(--color-fern); }

/* ───────────── Footer close ───────────── */
.df-page .footer-cta .store-row { justify-content: center; }

/* ───────────── Tablet and phone ───────────── */
@media (max-width: 1099.98px) {
  .df-merge { grid-template-columns: minmax(11rem, 14rem) minmax(2.5rem, 1fr) minmax(0, 24rem); }
  .df-island { min-width: 12rem; }
}
@media (max-width: 899.98px) {
  .df-hero { align-items: end; min-height: auto; padding-top: min(54svh, 30rem); padding-bottom: var(--section); }
  .df-hero-media { bottom: auto; height: min(68svh, 40rem); }
  .df-hero-media img { object-position: 50% 45%; }
  .df-hero-film { display: none; }
  .df-hero-scrim { bottom: auto; height: min(68svh, 40rem); background: linear-gradient(180deg, rgba(11, 19, 12, 0.35) 0%, rgba(11, 19, 12, 0) 22%, rgba(11, 19, 12, 0.1) 52%, rgba(11, 19, 12, 0.85) 82%, var(--df-ground) 100%); }
  .df-contact[data-flip] .df-contact-label { left: 14px; right: auto; }
  .df-contact[data-flip-m] .df-contact-label { left: auto; right: 14px; }
  .df-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .df-scope { justify-self: center; max-width: 26rem; }
  .df-contact-label { font-size: 0.6875rem; }
  .df-brief { padding-top: var(--section); }
  .df-goal { justify-self: start; text-align: left; }
  .df-frag-grid, .df-product-grid, .df-doors-grid { grid-template-columns: minmax(0, 1fr); }
  .df-islands { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .df-island { position: static; transform: none; min-width: 0; grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
  .df-island .ic { grid-row: auto; }
  .df-island-gaps { display: none; }
  .df-cost { grid-template-columns: minmax(0, 1fr); }
  .df-merge { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-6); }
  .df-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
  .df-source { font-size: 0.875rem; }
  .df-beams { display: none; }
  .df-file { grid-column: 1; }
  .df-values { grid-template-columns: minmax(0, 1fr); }
  .df-value, .df-value--wide { grid-column: auto; }
  .df-card { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .df-card-media { order: -1; min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .df-plate-frame { aspect-ratio: 4 / 3; }
  .df-scope--small { justify-self: center; max-width: 22rem; }
  .df-path { height: auto; display: grid; gap: var(--space-7); padding-left: 2.25rem; }
  .df-path-line { display: none; }
  .df-path::before { content: ""; position: absolute; left: 8px; top: 9px; bottom: 9px; width: 2px; background: var(--df-phos); }
  .df-path-stop { position: relative; left: auto !important; top: auto; transform: none !important; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.4rem; align-items: center; justify-items: start; margin-left: -2.25rem; }
  .df-path-fig { position: static; transform: none !important; grid-column: 2; order: -1; font-size: 3.5rem; }
  .df-path-dot { grid-column: 1; grid-row: 2; }
  .df-path-label { grid-column: 2; grid-row: 2; margin-top: 0; }
  .df-path-sub { grid-column: 2; grid-row: 3; text-align: left !important; }
  .df-path-stop--end .df-path-dot, .df-path-stop--end .df-path-label { grid-row: 1; }
  .df-path-stop--end .df-path-sub { grid-row: 2; }
  .df-path-ripple { right: auto; left: 9px; }
  .df-path-label { white-space: normal; }
  .df-lock { display: none; }
}
@media (max-width: 599.98px) {
  .df-h1 { font-size: clamp(3rem, 1rem + 10vw, 4.5rem); }
  .df-line { white-space: normal; }
  .df-actions .btn { width: 100%; }
  .df-islands { grid-template-columns: minmax(0, 1fr); }
  .df-island-val { font-size: 1.6rem; }
  .df-sources { grid-template-columns: minmax(0, 1fr); }
  .df-entry { grid-template-columns: 3.5rem minmax(0, 1fr) auto; font-size: 0.875rem; }
  .df-statement { font-size: 1.4rem; }
}

/* Reduced motion and Save-Data: everything still, nothing waiting */
@media (prefers-reduced-motion: reduce) {
  .df-file.is-live::after, .df-path.is-live .df-path-ripple i { animation: none; }
  .df-hero-film { display: none; }
}
.motion-static .df-brief { padding-top: var(--section); }
.motion-static .df-brief-rings { display: none; }
.motion-static .df-merge .df-entry, .motion-static .df-entry { opacity: 1 !important; transform: none !important; }
.motion-static .df-steps-line span, .motion-static .df-path-draw { transform: none !important; stroke-dashoffset: 0 !important; }

/* The chrome sprite's 24 px glyphs (box, wifi, pulse, trophy, cal) are drawn with a stroke; the app glyphs carry their own */
.df .ic { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── Section photographs (images/defence/build_defence_images.py, BACKGROUNDS) ─────────────
   Four sections get a dark, people-free photograph under the olive: the mist range under the statement, the ammunition depot
   under the cost, the range tower under the relationships, the armoury under the evidence. Each fades into the night at top and
   bottom so the neighbouring green sections meet it without a seam. Text sits on the dark side of the frame. */
.df-brief, .df-frag, .df-doors, .df-evidence { position: relative; isolation: isolate; }
.df-brief::before, .df-frag::before, .df-doors::before, .df-evidence::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--df-photo-s); background-size: cover; background-position: var(--df-photo-pos, 50% 50%); background-repeat: no-repeat;
  opacity: var(--df-photo-o, 0.5);
}
.df-brief::after, .df-frag::after, .df-doors::after, .df-evidence::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--df-ground) 0%, rgba(11, 19, 12, 0) 24%, rgba(11, 19, 12, 0) 70%, var(--df-ground) 100%),
    var(--df-photo-side, linear-gradient(90deg, rgba(11, 19, 12, 0.5), rgba(11, 19, 12, 0.5)));
}
.df-brief   { --df-photo-s: url("../images/defence/bg-mist-960.webp");    --df-photo-pos: 50% 62%; --df-photo-o: 0.95;
              --df-photo-side: linear-gradient(90deg, rgba(11, 19, 12, 0.6) 0%, rgba(11, 19, 12, 0.12) 65%, rgba(11, 19, 12, 0.3) 100%); }
.df-frag    { --df-photo-s: url("../images/defence/bg-depot-960.webp");   --df-photo-pos: 50% 55%; --df-photo-o: 0.85;
              --df-photo-side: linear-gradient(90deg, rgba(11, 19, 12, 0.7) 0%, rgba(11, 19, 12, 0.3) 55%, rgba(11, 19, 12, 0.12) 100%); }
.df-doors   { --df-photo-s: url("../images/defence/bg-tower-960.webp");   --df-photo-pos: 50% 40%; --df-photo-o: 0.95;
              --df-photo-side: linear-gradient(90deg, rgba(11, 19, 12, 0.12) 0%, rgba(11, 19, 12, 0.35) 45%, rgba(11, 19, 12, 0.7) 100%); }
.df-evidence { --df-photo-s: url("../images/defence/bg-armoury-960.webp"); --df-photo-pos: 50% 50%; --df-photo-o: 0.85;
              --df-photo-side: linear-gradient(90deg, rgba(11, 19, 12, 0.72) 0%, rgba(11, 19, 12, 0.4) 50%, rgba(11, 19, 12, 0.38) 100%); }
@media (min-width: 900px) {
  .df-brief    { --df-photo-s: url("../images/defence/bg-mist-1600.webp"); }
  .df-frag     { --df-photo-s: url("../images/defence/bg-depot-1600.webp"); }
  .df-doors    { --df-photo-s: url("../images/defence/bg-tower-1600.webp"); }
  .df-evidence { --df-photo-s: url("../images/defence/bg-armoury-1600.webp"); }
}
@media (max-width: 899.98px) {
  /* one column on phones: the text covers the whole frame, so the photograph is quieter and the side fade turns even */
  .df-brief, .df-frag, .df-doors, .df-evidence { --df-photo-o: 0.6; --df-photo-side: linear-gradient(90deg, rgba(11, 19, 12, 0.5), rgba(11, 19, 12, 0.5)); }
}