/* CSEC: thermal-camera palette (iron-bow), heavy condensed type, camera-overlay chrome. */
:root {
  --black: #000;
  --char: #0d0b0c; /* panels */
  --ash: #1b1718; /* raised panels */
  --rule: #2c2627;
  --bone: #efe9e2; /* text */
  --smoke: #a39a95; /* secondary text */
  --heat: #ff5a1f; /* the one accent: thermal orange */
  --white-hot: #fff2d1;
  --violet: #3b0b5c;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--bone); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--heat); outline-offset: 3px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.display { font-family: var(--display); font-weight: 900; line-height: 0.88; letter-spacing: -0.01em; margin: 0; text-transform: uppercase; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--heat); color: #120804; font: 800 15px/1 var(--body); letter-spacing: 0.02em; text-decoration: none; padding: 16px 22px; border: 0; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.btn:hover { background: var(--white-hot); }
.btn.line { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--bone); clip-path: none; }
.btn.line:hover { background: var(--bone); color: var(--black); }

/* header */
header.top { position: fixed; inset: 0 0 auto 0; z-index: 20; transition: background 0.3s; }
header.top.solid { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
header.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 900 26px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.mark small { font: 500 12px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--smoke); }
nav.links { margin-left: auto; display: flex; gap: 26px; font-size: 15px; }
nav.links a { text-decoration: none; color: var(--smoke); }
nav.links a:hover { color: var(--bone); }
header .btn { padding: 12px 18px; font-size: 14px; }
@media (max-width: 820px) { nav.links, .mark small { display: none; } header .btn { margin-left: auto; } }

/* hero: thermal feed */
.feed { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.thermal { position: absolute; inset: -10%; z-index: -2; background: radial-gradient(ellipse at 50% 120%, #2a0640 0%, #000 60%); filter: saturate(1.15); }
.thermal i { position: absolute; border-radius: 50%; filter: blur(40px); mix-blend-mode: screen; animation: drift var(--t, 24s) ease-in-out infinite alternate; }
.thermal i::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, var(--white-hot), #ffb340 35%, transparent 70%); filter: blur(12px); }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(var(--dx, 6vw), var(--dy, -4vh)) scale(var(--s, 1.15)); } }
.scan { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px); }
.vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(transparent 55%, #000 100%); }
.osd { position: absolute; inset: 88px 24px 24px; pointer-events: none; font: 500 12px/1.5 var(--mono); color: rgba(255, 242, 209, 0.82); letter-spacing: 0.04em; }
.osd .tl { position: absolute; top: 0; left: 0; }
.osd .tr { position: absolute; top: 0; right: 0; text-align: right; }
.osd .rec { color: #ff3b30; }
.osd .rec::before { content: "●"; margin-right: 6px; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.osd .br { position: absolute; inset: 0; }
.osd .br::before, .osd .br::after, .osd .bl::before, .osd .bl::after { content: ""; position: absolute; width: 34px; height: 34px; border-color: rgba(255, 242, 209, 0.7); border-style: solid; }
.osd .br::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.osd .br::after { top: -6px; right: -6px; border-width: 2px 2px 0 0; }
.osd .bl { position: absolute; inset: 0; }
.osd .bl::before { bottom: -6px; left: -6px; border-width: 0 0 2px 2px; }
.osd .bl::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; }
.reticle { position: absolute; left: 69%; top: 30%; width: 64px; height: 64px; transform: translate(-50%, -50%); opacity: 0.55; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--white-hot); }
.reticle::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.reticle::after { top: 50%; left: 0; right: 0; height: 1px; }
.hero-copy { padding: 0 0 clamp(56px, 9vh, 110px); }
.hero-copy h1 { font-size: clamp(64px, 13vw, 200px); }
.hero-copy h1 span { color: var(--heat); }
.hero-copy p { font-size: clamp(18px, 2vw, 22px); max-width: 46ch; color: var(--bone); margin: 22px 0 30px; }
.hero-copy .ctas { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 640px) { .osd { inset: 80px 12px 12px; font-size: 10px; } .reticle { display: none; } .thermal i { width: 78vw !important; height: 78vw !important; } .thermal i:nth-child(1) { left: -12% !important; top: 22% !important; } .thermal i:nth-child(2) { left: 38% !important; top: 4% !important; } .thermal i:nth-child(3) { left: 40% !important; top: 48% !important; } }
@media (prefers-reduced-motion: reduce) { .thermal i, .osd .rec::before { animation: none; } html { scroll-behavior: auto; } }

/* sections */
section.band { padding: clamp(72px, 10vw, 130px) 0; border-top: 1px solid var(--rule); }
.kicker { font: 500 13px/1 var(--mono); color: var(--heat); margin: 0 0 18px; }
h2.display { font-size: clamp(48px, 8vw, 112px); }
.intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 64px; align-items: end; margin-bottom: 56px; }
.intro p { color: var(--smoke); font-size: 19px; margin: 0; max-width: 48ch; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }

/* jobs */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--rule); border: 2px solid var(--rule); }
.job { background: var(--char); padding: 30px 28px 34px; position: relative; min-height: 250px; transition: background 0.2s; }
.job:hover { background: var(--ash); }
.job h3 { font: 900 34px/0.95 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.job p { margin: 0; color: var(--smoke); font-size: 16px; }
.job .tag { position: absolute; top: 18px; right: 20px; font: 500 11px/1 var(--mono); color: #5d5452; }
.job.ask { background: var(--heat); color: #120804; }
.job.ask p { color: #3a1606; }
.job.ask a { color: #120804; font-weight: 800; }
.job.ask .tag { color: #6b2a0d; }
@media (max-width: 980px) { .jobs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jobs { grid-template-columns: 1fr; } .job { min-height: 0; } }

/* operator */
.operator { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.operator p { font-size: 19px; color: var(--bone); margin: 0 0 18px; max-width: 54ch; }
.record { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--bone); }
.record li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.record b { font: 500 12px/1.6 var(--mono); color: var(--heat); font-weight: 500; }
.record span { font-size: 18px; }
@media (max-width: 860px) { .operator { grid-template-columns: 1fr; gap: 36px; } .record li { grid-template-columns: 1fr; gap: 4px; } }

/* process */
.ops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--rule); counter-reset: op; }
.ops li { background: var(--black); padding: 28px 24px 32px; counter-increment: op; }
.ops li::before { content: "0" counter(op); display: block; font: 900 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--heat); margin-bottom: 14px; }
.ops h3 { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.ops p { margin: 0; color: var(--smoke); font-size: 16px; }
@media (max-width: 900px) { .ops { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ops { grid-template-columns: 1fr; } }

/* inquiry */
.inquiry { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
.inquiry .note { color: var(--smoke); font-size: 18px; max-width: 40ch; }
form.card { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--char); border: 1px solid var(--rule); padding: 30px; }
form.card .full { grid-column: 1 / -1; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; color: var(--smoke); align-content: start; }
label > span { display: flex; gap: 6px; align-items: baseline; }
label small { font-weight: 400; }
input, select, textarea { font: 400 16px var(--body); color: var(--bone); background: var(--black); border: 1.5px solid var(--rule); border-radius: 0; padding: 13px 14px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--heat); }
textarea { resize: vertical; min-height: 140px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.status { margin: 0; font-weight: 700; }
.status.ok { color: #7bd88f; }
.status.err { color: var(--heat); }
@media (max-width: 900px) { .inquiry { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 520px) { form.card { grid-template-columns: 1fr; padding: 22px; } }

footer { border-top: 1px solid var(--rule); padding: 34px 0 44px; color: var(--smoke); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; }

/* application form extras */
fieldset.interests { border: 1px solid var(--rule); padding: 14px 16px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
fieldset.interests legend { font-size: 13px; font-weight: 700; color: var(--smoke); padding: 0 6px; }
fieldset.interests label, label.consent { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--bone); font-size: 15px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--heat); padding: 0; }
input[type="file"] { padding: 11px; }
input[type="file"]::file-selector-button { font: 700 14px var(--body); background: var(--bone); color: var(--black); border: 0; padding: 8px 12px; margin-right: 12px; cursor: pointer; }

/* Encryption reassurance on the apply form */
.secure { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--ash); border-left: 3px solid #7bd88f; color: #7bd88f; }
.secure svg { flex: none; margin-top: 2px; }
.secure strong { display: block; color: var(--bone); font-size: 17px; }
.secure p { margin: 4px 0 0; color: var(--smoke); font-size: 15px; line-height: 1.5; }
.secure .cipher { font: 500 12px/1.4 var(--mono); color: #7bd88f; margin-top: 8px; }
.fine { margin: -6px 0 0; color: var(--smoke); font-size: 14px; }