/* ============================================================
   NeuraPick Robotics — site stylesheet
   World: the grower's climate-computer screen. Panels on poly-film
   daylight, 1px aluminium rules, tabular numerals, one live colour,
   alarms in red. No shadows, no radius above 2px.
   ============================================================ */

:root {
  --bg:      #eef1ef;
  --panel:   #ffffff;
  --panel-2: #f5f7f6;
  --ink:     #1b262c;
  --ink-2:   #4b5a63;
  --ink-3:   #62707a;
  --rule:    #c5cfcc;
  --rule-2:  #dde3e1;
  --live:    #0b5fd6;
  --live-bg: #e6eefc;
  --alarm:   #c8102e;
  --on-alarm:#ffffff;
  --ok:      #23803a;
  --ok-led:  #2fbf55;
  --warn:    #b8730a;
  --dark:    #1b262c;
  --on-dark: #e6ebe9;

  --f-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --f-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --mod: 8px;
  --pad: clamp(16px, 2.2vw, 28px);
  --max: 1600px;
  --hdr: 44px;
  --rad: 2px;
}

[data-theme="dark"] {
  --bg:      #0f1416;
  --panel:   #161d20;
  --panel-2: #1b2427;
  --ink:     #e6ebe9;
  --ink-2:   #aab6b3;
  --ink-3:   #8a979e;
  --rule:    #2b3639;
  --rule-2:  #222c2f;
  --live:    #5b9bff;
  --live-bg: #14243a;
  --alarm:   #e8354a;
  --ok:      #4ac467;
  --ok-led:  #4ac467;
  --warn:    #e0a030;
  --dark:    #0a0e10;
  --on-dark: #e6ebe9;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--rule) var(--bg); }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  caret-color: var(--live);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--live); color: #fff; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: var(--bg); }

.board {
  max-width: var(--max);
  margin: 0 auto;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--panel);
}
@media (min-width: 1100px) { .board { width: calc(100% - 24px); margin: 0 auto 12px; border: 1px solid var(--rule); border-top: none; } }
@media (max-width: 1099px) { .board { border-left: none; border-right: none; } }

.caps {
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  height: var(--hdr);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.hdr__in {
  max-width: var(--max); margin: 0 auto; height: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 var(--pad);
  border-right: 1px solid var(--rule);
  font-family: var(--f-cond); font-weight: 700; font-size: 17px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.brand__mark {
  width: 22px; height: 22px; display: inline-grid; place-items: center;
  background: var(--ink); color: var(--panel);
  font-size: 14px; border-radius: var(--rad); font-weight: 700;
}
.brand span:last-child { font-weight: 400; color: var(--ink-3); }
.hdr__nav { display: flex; align-items: stretch; }
.hdr__nav a {
  display: inline-flex; align-items: center; padding: 0 18px;
  font-family: var(--f-cond); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  border-right: 1px solid var(--rule-2);
  transition: color 120ms ease, background 120ms ease;
}
.hdr__nav a:hover { color: var(--ink); background: var(--panel-2); }
.hdr__act { display: flex; align-items: stretch; }
.hdr__site { color: var(--ink-2); white-space: nowrap; }
@media (max-width: 1240px) { .hdr__act .hdr__site { display: none; } }
@media (max-width: 1140px) { .hdr__act .hdr__clock { display: none; } .hdr__nav a { padding: 0 12px; } }
.hdr__clock {
  display: inline-flex; align-items: center; padding: 0 16px;
  border-left: 1px solid var(--rule); color: var(--ink-3);
  font-family: var(--f-cond); font-weight: 500; font-size: 14px; letter-spacing: 0.06em;
  min-width: 118px;
}
.icon-btn {
  width: var(--hdr); border: none; border-left: 1px solid var(--rule);
  background: transparent; cursor: pointer; display: grid; place-items: center;
  color: var(--ink-2);
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.icon-btn .ico-moon { display: none; }
[data-theme="dark"] .icon-btn .ico-sun { display: none; }
[data-theme="dark"] .icon-btn .ico-moon { display: block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 20px; height: 40px;
  font-family: var(--f-cond); font-weight: 600; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: var(--rad);
  background: var(--ink); color: var(--panel);
  cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--live); border-color: var(--live); color: #fff; }
.btn--alarm { background: var(--alarm); border-color: var(--alarm); color: var(--on-alarm); }
.btn--alarm:hover { background: #a30c24; border-color: #a30c24; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--ink); }
.btn--onalarm { background: var(--on-alarm); color: var(--alarm); border-color: var(--on-alarm); }
.btn--onalarm:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--full { width: 100%; }
.hdr__act .btn { height: 100%; border-radius: 0; border: none; border-left: 1px solid var(--rule); }
.hdr__burger { display: none; }

/* drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; transition: visibility 0s linear 260ms; }
.drawer.open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.drawer__back { position: absolute; inset: 0; background: rgba(27,38,44,0); transition: background 240ms ease; }
.drawer.open .drawer__back { background: rgba(27,38,44,0.5); }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(360px, 90vw);
  background: var(--panel); border-left: 1px solid var(--rule);
  transform: translateX(100%); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
}
.drawer.open .drawer__panel { transform: none; }
.drawer__head { height: var(--hdr); display: flex; justify-content: space-between; align-items: stretch; border-bottom: 1px solid var(--rule); }
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a {
  padding: 18px var(--pad); border-bottom: 1px solid var(--rule-2);
  font-family: var(--f-cond); font-weight: 600; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase;
}
.drawer__links a:hover { background: var(--panel-2); }
.drawer__cta { margin-top: auto; padding: var(--pad); }
.drawer__foot { padding: 0 var(--pad) var(--pad); display: flex; flex-wrap: wrap; gap: 12px 18px; color: var(--ink-3); }
body.no-scroll { overflow: hidden; }

@media (max-width: 980px) {
  .hdr__nav, .hdr__clock { display: none; }
  .hdr__burger { display: grid; }
}
@media (max-width: 520px) {
  .hdr__act .btn { padding: 0 12px; font-size: 13px; }
  .brand span:last-child { display: none; }
}

/* ---------- courses (sections) ---------- */
.course { border-top: 1px solid var(--rule); scroll-margin-top: var(--hdr); }
.course:first-child { border-top: none; }
.bar {
  height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad); background: var(--panel-2); border-bottom: 1px solid var(--rule);
  font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); margin: 0; white-space: nowrap; overflow: hidden;
}
.bar > * { margin: 0; font: inherit; }
.bar__r { color: var(--ink-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; text-align: right; }
.bar__r b { color: var(--live); font-weight: 600; }
.led {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-led);
  vertical-align: middle; margin-right: 8px;
  animation: blink 2.4s steps(2) infinite;
}
.led--alarm { background: var(--alarm); animation-duration: 1.2s; }
@keyframes blink { 50% { opacity: 0.25; } }

.body { padding: var(--pad); }
.lead {
  font-family: var(--f-cond); font-weight: 500;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.005em;
  margin: 0 0 12px; max-width: 26ch; text-wrap: balance;
}
.lead, .hero h1, .quote p, .band__claim, .pilot__copy h2 { isolation: isolate; }
mark { position: relative; z-index: -1; }
.lead mark { background: var(--live-bg); color: var(--ink); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.p { color: var(--ink-2); max-width: 62ch; margin: 0; font-size: 16.5px; }
.p + .p { margin-top: 10px; }
.p b { color: var(--ink); font-weight: 600; }
.intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--pad); align-items: end; margin-bottom: var(--pad); }
@media (max-width: 800px) { .intro { grid-template-columns: 1fr; } }
.intro--robot { grid-template-columns: 1fr 1.15fr; align-items: stretch; }
.render { margin: 0; border: 1px solid var(--rule); border-radius: var(--rad); overflow: hidden; background: var(--panel-2); display: flex; flex-direction: column; }
.render picture { flex: 1; display: grid; place-items: center; padding: 12px; }
.render img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.render .bar { border-bottom: none; border-top: 1px solid var(--rule); }
.render--photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 1px; background: var(--rule); }
.render--photos picture { display: block; padding: 0; background: var(--panel-2); aspect-ratio: 3 / 2; overflow: hidden; }
.render--photos .render__main { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.render--photos img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.render--photos .bar { grid-column: 1 / -1; background: var(--panel-2); }
@media (max-width: 800px) { .intro--robot { grid-template-columns: 1fr; } }

/* panel grids: 1px aluminium seams */
.cells { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--rad); overflow: hidden; }
.cells > * { background: var(--panel); min-width: 0; }

/* ---------- hero board ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 1px; background: var(--rule);
  min-height: min(calc(100vh - var(--hdr) - 56px), 760px);
}
.hero > * { background: var(--panel); min-width: 0; display: flex; flex-direction: column; }
.hero__copy { padding: var(--pad); }
.hero h1 {
  font-family: var(--f-cond); font-weight: 600;
  font-size: clamp(38px, 3.9vw, 62px); line-height: 0.98; letter-spacing: -0.01em;
  margin: 0 0 18px; text-wrap: balance;
}
.hero h1 mark { background: var(--live-bg); color: var(--ink); padding: 0 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero__lede { color: var(--ink-2); max-width: 44ch; margin: 0 0 24px; font-size: 16.5px; }
.hero__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: auto; padding-bottom: 28px; }

.rate { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 16px; }
.rate__lbl { display: flex; justify-content: space-between; color: var(--ink-3); margin-bottom: 4px; }
.rate__fig { display: flex; align-items: baseline; gap: 8px; }
.rate__num {
  font-family: var(--f-cond); font-weight: 600; font-size: clamp(52px, 5vw, 76px);
  line-height: 1; color: var(--live); letter-spacing: -0.01em;
}
.rate__unit { color: var(--ink-3); font-family: var(--f-cond); font-size: 18px; font-weight: 500; letter-spacing: 0.02em; }
.rate__curve { width: 100%; height: 72px; margin-top: 10px; display: block; }
.rate__curve .grid { stroke: var(--rule-2); stroke-width: 1; }
.rate__curve .area { fill: var(--live); opacity: 0.1; }
.rate__curve .line { fill: none; stroke: var(--live); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rate__curve .dot { fill: var(--live); }
.rate__foot { display: flex; justify-content: space-between; color: var(--ink-3); font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; }

.sensor { background: var(--panel); }
.sensor__stage { position: relative; flex: 1; min-height: 320px; background: #0d1214; overflow: hidden; }
.sensor__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sensor__hud {
  position: absolute; left: 12px; top: 10px; color: #fff; font-family: var(--f-cond);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule);
}
.strip > div { background: var(--panel); padding: 10px var(--pad); min-width: 0; }
.strip small { display: block; color: var(--ink-3); font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.strip b { font-family: var(--f-cond); font-weight: 600; font-size: 20px; line-height: 1.2; white-space: nowrap; }
.strip b.live { color: var(--live); }

.now__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.now__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px var(--pad); border-bottom: 1px solid var(--rule-2);
}
.now__list li:last-child { border-bottom: none; }
.now__list span { color: var(--ink-3); font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.now__list b { font-weight: 600; text-align: right; font-family: var(--f-cond); font-size: 17px; }
.now__list b.live { color: var(--live); }
.now__list b.ok { color: var(--ok); }
.now__note { padding: 12px var(--pad); border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 13px; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; min-height: 0; }
  .hero__copy { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .sensor__stage { min-height: 240px; aspect-ratio: 4 / 3; }
  .strip b { font-size: 17px; }
}

/* alarm strip */
.alarm {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pad);
  padding: 8px var(--pad); min-height: 56px;
  background: var(--alarm); color: var(--on-alarm); border-top: 1px solid var(--rule);
}
.alarm__id { font-family: var(--f-cond); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; }
.alarm__id .led { background: #fff; animation-duration: 1.2s; }
.alarm__msg { margin: 0; font-family: var(--f-cond); font-weight: 500; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.2; }
@media (max-width: 720px) {
  .alarm { grid-template-columns: 1fr; gap: 10px; }
  .alarm .btn { width: 100%; }
}

/* site strip */
.sites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); }
.sites > div { background: var(--panel); padding: 12px var(--pad); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sites b { font-family: var(--f-cond); font-weight: 600; font-size: 16px; }
.sites span { color: var(--ink-3); font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .sites { grid-template-columns: repeat(2, 1fr); } }

/* ---------- spec ledger ---------- */
.ledger { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); font-size: 15px; }
.ledger th, .ledger td { padding: 11px 16px; border-bottom: 1px solid var(--rule-2); vertical-align: top; text-align: left; }
.ledger tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.ledger tbody:last-child tr:last-child td { border-bottom: none; }
.ledger th {
  background: var(--panel-2); border-bottom: 1px solid var(--rule);
  font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.ledger th[scope="rowgroup"] { width: 22%; color: var(--ink); vertical-align: top; }
.ledger th p { font-family: var(--f-body); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin: 6px 0 0; line-height: 1.45; }
.ledger td:nth-child(2) { color: var(--ink-2); width: 38%; }
.ledger td:last-child { font-family: var(--f-cond); font-weight: 600; font-size: 16px; text-align: right; white-space: nowrap; }
.ledger td.live { color: var(--live); }
@media (max-width: 720px) {
  .ledger, .ledger tbody { display: block; }
  .ledger tr { display: flex; flex-wrap: wrap; align-items: baseline; }
  .ledger th[scope="rowgroup"] { display: block; flex: 0 0 100%; width: auto; }
  .ledger td { display: block; border-bottom: none; padding: 9px 14px; }
  .ledger td:nth-last-child(2) { flex: 1 1 40%; width: auto; }
  .ledger td:last-child { flex: 1 1 50%; text-align: right; white-space: normal; }
  .ledger tr + tr td { border-top: 1px solid var(--rule-2); }
}

/* ---------- cycle ---------- */
.cycle { grid-template-columns: repeat(4, 1fr); }
.step { padding: var(--pad); display: flex; flex-direction: column; min-height: 300px; }
.step .step__n { font-family: var(--f-cond); font-weight: 700; font-size: clamp(88px, 9vw, 150px); line-height: 0.8; letter-spacing: -0.03em; margin: 0 0 20px; color: var(--ink); }
.step h3 { font-family: var(--f-cond); font-weight: 600; font-size: 24px; margin: 0 0 6px; }
.step p { color: var(--ink-2); margin: 0 0 20px; font-size: 15px; max-width: 30ch; }
.step__t { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-2); display: flex; justify-content: space-between; align-items: baseline; }
.step__t span { color: var(--ink-3); font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.step__t b { font-family: var(--f-cond); font-weight: 600; font-size: 22px; color: var(--live); }
.step__bar { height: 4px; background: var(--rule-2); margin-top: 8px; position: relative; }
.step__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--live); }
@media (max-width: 900px) { .cycle { grid-template-columns: 1fr 1fr; } .step { min-height: 0; } }
@media (max-width: 480px) { .cycle { grid-template-columns: 1fr; } }

/* ---------- photo band ---------- */
.band { position: relative; height: clamp(420px, 62vh, 760px); background: #1b262c; overflow: hidden; border-top: 1px solid var(--rule); }
.band picture, .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,16,0.35) 0%, rgba(10,14,16,0) 35%, rgba(10,14,16,0) 55%, rgba(10,14,16,0.82) 100%); }
.band__top, .band__foot { position: absolute; z-index: 1; color: #fff; font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.band__top { top: 14px; left: var(--pad); display: flex; gap: 20px; opacity: 0.95; }
.band__foot { right: var(--pad); bottom: 18px; text-align: right; opacity: 0.9; }
.band__foot b { display: block; font-size: 22px; letter-spacing: 0; font-weight: 600; }
.band__claim {
  position: absolute; left: var(--pad); bottom: 20px; z-index: 1; color: #fff; margin: 0;
  font-family: var(--f-cond); font-weight: 600; font-size: clamp(38px, 6vw, 92px); line-height: 0.95; letter-spacing: -0.015em;
  max-width: 14ch; text-wrap: balance;
}
.band__claim mark { background: var(--ink); color: #fff; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (max-width: 720px) { .band__foot { display: none; } .band__claim { bottom: 16px; } }

/* ---------- two-column courses ---------- */
.two { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--pad); align-items: start; }
.two--rev { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 960px) { .two, .two--rev { grid-template-columns: 1fr; } }

.rows { margin: 20px 0 0; border-top: 1px solid var(--rule); }
.rows > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.rows dt { margin: 0; font-family: var(--f-cond); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.rows dd { margin: 0; color: var(--ink-2); }
@media (max-width: 480px) { .rows > div { grid-template-columns: 1fr; gap: 4px; } }
.rows + .btn { margin-top: 20px; }

/* console mock */
.con { display: flex; min-height: 440px; }
.con__side { width: 168px; flex-shrink: 0; border-right: 1px solid var(--rule); background: var(--panel-2); padding: 12px 0; }
.con__side b { display: block; padding: 4px 14px 12px; font-family: var(--f-cond); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--rule-2); margin-bottom: 8px; }
.con__side span { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--ink-2); }
.con__side span::before { content: ''; width: 6px; height: 6px; background: var(--rule); }
.con__side span.on { color: var(--ink); font-weight: 600; background: var(--panel); border-left: 2px solid var(--live); padding-left: 12px; }
.con__side span.on::before { background: var(--live); }
.con__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.con__top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-family: var(--f-cond); font-weight: 600; font-size: 15px; }
.con__top span { color: var(--ok); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.con__feed { position: relative; flex: 1; background: #0d1214; min-height: 200px; }
.con__feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.con__feed small { position: absolute; left: 10px; bottom: 8px; color: #fff; font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
@media (max-width: 560px) { .con { flex-direction: column; } .con__side { width: 100%; display: flex; flex-wrap: wrap; padding: 8px; border-right: none; border-bottom: 1px solid var(--rule); } .con__side b { width: 100%; border: none; margin: 0; } .con__side span { padding: 4px 8px; } }

/* ---------- scouting ---------- */
.scout { grid-template-columns: repeat(5, 1fr); }
.scout figure { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--panel-2); }
.scout img { width: 100%; height: 100%; object-fit: cover; }
.scout figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(13,18,20,0.78); color: #fff; font-family: var(--f-cond); font-size: 14px; font-weight: 600; }
.scout figcaption small { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.bbox { position: absolute; border: 1.5px solid #fff; }
.bbox::before { content: attr(data-label); position: absolute; left: -1.5px; top: -18px; background: #fff; color: var(--ink); font-family: var(--f-cond); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; padding: 1px 5px; white-space: nowrap; }
@media (max-width: 960px) { .scout { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .scout { grid-template-columns: repeat(2, 1fr); }
  .scout figure:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }
}

.readings { grid-template-columns: repeat(4, 1fr); margin-top: var(--pad); }
.readings > div { padding: 14px var(--pad); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.readings span { color: var(--ink-3); font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.readings span small { display: block; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-3); }
.readings b { font-family: var(--f-cond); font-weight: 600; font-size: 28px; white-space: nowrap; }
@media (max-width: 900px) { .readings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .readings { grid-template-columns: 1fr; } }

/* ---------- punnet photos ---------- */
.shots { grid-template-columns: 1fr 1fr; }
.shots figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.shots img { width: 100%; height: 100%; object-fit: cover; }
.shots figcaption { position: absolute; left: 10px; top: 10px; padding: 3px 8px; background: var(--panel); color: var(--ink); font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--rule); }

/* ---------- sites course ---------- */
.trials { grid-template-columns: repeat(3, 1fr); }
.trial { display: flex; flex-direction: column; }
.trial h3.bar { font-size: 13px; padding: 0 var(--pad); border-bottom: 1px solid var(--rule); }
.trial h3 { font-family: var(--f-cond); font-weight: 600; font-size: 26px; margin: 0; padding: 18px var(--pad) 4px; }
.trial > p { margin: 0; padding: 0 var(--pad) 14px; color: var(--ink-2); }
.trial ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.trial li { display: flex; justify-content: space-between; gap: 12px; padding: 9px var(--pad); border-bottom: 1px solid var(--rule-2); font-size: 14.5px; }
.trial li:last-child { border-bottom: none; }
.trial li span { color: var(--ink-3); font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.trial li b { font-weight: 600; text-align: right; }
@media (max-width: 900px) { .trials { grid-template-columns: 1fr; } }

/* ---------- principles ---------- */
.quote { margin: 0 0 var(--pad); max-width: 44ch; }
.quote p { font-family: var(--f-cond); font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; margin: 0 0 16px; text-wrap: balance; }
.quote p mark { background: var(--live-bg); color: var(--ink); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.quote footer { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.quote footer i { font-style: normal; width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--panel); font-family: var(--f-cond); font-weight: 700; }
.quote footer span { color: var(--ink-3); display: block; }
.principles { grid-template-columns: repeat(3, 1fr); }
.principles > div { padding: var(--pad); }
.principles h3 { font-family: var(--f-cond); font-weight: 600; font-size: 24px; margin: 0 0 8px; }
.principles p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 800px) { .principles { grid-template-columns: 1fr; } }

/* ---------- pilot request ---------- */
.pilot { grid-template-columns: 1fr 1fr; }
.pilot__copy { padding: var(--pad); }
.pilot__copy h2 { font-family: var(--f-cond); font-weight: 600; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; margin: 0 0 14px; letter-spacing: -0.01em; }
.pilot__copy h2 mark { background: none; color: var(--alarm); }
.incl { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--rule); }
.incl li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.incl li i { font-style: normal; font-family: var(--f-cond); font-weight: 600; color: var(--ink-3); }
.form { padding: var(--pad); }
.form__grid { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field--row { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field--row { grid-template-columns: 1fr; } }
.field label { font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.field label span { color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; padding: 10px 12px; width: 100%;
  border: 1px solid var(--rule); border-radius: var(--rad); background: var(--panel); color: var(--ink);
  transition: border-color 120ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--live); box-shadow: inset 0 0 0 1px var(--live); }
.field textarea { resize: vertical; }
.notice { padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2); }
.notice i { display: none; }
.notice b { color: var(--ink); }
.form__fine { font-size: 12px; color: var(--ink-3); margin: 0; }
.form__fine a { text-decoration: underline; text-underline-offset: 2px; }
/* Inline disclosure under the form satisfies Google's branding requirement. */
.grecaptcha-badge { visibility: hidden !important; }
.form__sent { text-align: center; padding: 32px 0; }
.form__sent .led { width: 14px; height: 14px; margin: 0 0 14px; }
.form__sent h3 { font-family: var(--f-cond); font-weight: 600; font-size: 30px; margin: 0 0 8px; }
.form__sent p { color: var(--ink-2); margin: 0; }
.form__sent code { font-family: var(--f-cond); font-weight: 600; }
@media (max-width: 900px) { .pilot { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.ftr { background: var(--dark); color: var(--on-dark); border-top: 1px solid var(--rule); }
.ftr__in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.12); }
.ftr__in > div { background: var(--dark); padding: var(--pad); }
.ftr .brand { padding: 0; border: none; color: var(--on-dark); }
.ftr .brand__mark { background: var(--on-dark); color: var(--dark); }
.ftr .brand span:last-child { color: rgba(230,235,233,0.55); }
.ftr p { color: rgba(230,235,233,0.7); max-width: 34ch; margin: 16px 0 20px; font-size: 14.5px; }
.ftr .made { display: flex; align-items: center; gap: 3px; }
.berry-heart { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.ftr__contact { display: grid; gap: 6px; font-size: 14px; }
.ftr__contact div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; }
.ftr__contact span { color: rgba(230,235,233,0.5); font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.ftr__contact a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(230,235,233,0.35); }
.ftr__contact a:hover { text-decoration-color: currentColor; }
.ftr h4 { margin: 0 0 12px; font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(230,235,233,0.5); }
.ftr__links { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.ftr__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr__base { max-width: var(--max); margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.12); padding: 14px var(--pad); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--f-cond); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(230,235,233,0.5); }
@media (max-width: 800px) { .ftr__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr__in { grid-template-columns: 1fr; } }

/* ============================================================
   SECONDARY PAGES (legal, careers)
   ============================================================ */
.legal-hero { padding: 0; border-top: none; }
.legal-hero .container { padding: clamp(32px, 5vw, 64px) var(--pad); border-bottom: 1px solid var(--rule); }
.legal-hero h1 { font-family: var(--f-cond); font-weight: 600; font-size: clamp(38px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.01em; margin: 0 0 16px; max-width: 18ch; text-wrap: balance; }
.legal-hero h1 em { font-style: normal; color: var(--ink-3); }
.legal-hero p { max-width: 62ch; font-size: 17px; color: var(--ink-2); margin: 0 0 22px; }
.legal-hero__meta { display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--f-cond); font-size: 15px; font-weight: 600; }
.legal-hero__meta b { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.eyebrow { display: none; }

.legal-section { padding: 0; }
.legal-grid { display: grid; grid-template-columns: 240px 1fr; gap: 0; }
.legal-toc { position: sticky; top: var(--hdr); align-self: start; padding: var(--pad); border-right: 1px solid var(--rule); font-size: 14px; min-height: calc(100vh - var(--hdr)); }
.legal-toc h6 { margin: 0 0 12px; font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.legal-toc ol { list-style: none; counter-reset: l; padding: 0; margin: 0 0 8px; display: grid; gap: 2px; }
.legal-toc li { counter-increment: l; }
.legal-toc a { display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.legal-toc a::before { content: counter(l, decimal-leading-zero); font-family: var(--f-cond); font-weight: 600; color: var(--ink-3); }
.legal-toc a:hover { color: var(--live); }
.legal-body { padding: var(--pad) var(--pad) clamp(48px, 6vw, 96px); max-width: 76ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal-body h2 { font-family: var(--f-cond); font-weight: 600; font-size: 30px; line-height: 1.05; color: var(--ink); margin: 44px 0 12px; scroll-margin-top: calc(var(--hdr) + 16px); }
.legal-body h2:first-child, .legal-body .careers-role-head + h2 { margin-top: 0; }
.legal-body h2 .num { display: inline-block; font-size: 14px; letter-spacing: 0.08em; color: var(--ink-3); margin-right: 12px; vertical-align: middle; }
.legal-body h3 { font-family: var(--f-cond); font-weight: 600; font-size: 20px; color: var(--ink); margin: 24px 0 6px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { padding-left: 20px; margin: 0 0 14px; }
.legal-body li { margin-bottom: 6px; }
.legal-body li::marker { color: var(--ink-3); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--live); text-decoration: underline; text-underline-offset: 3px; }
.legal-body code { font-family: var(--f-cond); font-weight: 600; font-size: 15px; background: var(--panel-2); padding: 1px 6px; border: 1px solid var(--rule-2); }
.legal-body table { width: 100%; border-collapse: collapse; margin: 12px 0 22px; font-size: 14px; border: 1px solid var(--rule); }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.legal-body th { background: var(--panel-2); font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.legal-body td code { background: none; border: none; padding: 0; }
.legal-address { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 14px; line-height: 1.6; }
.legal-address b { display: block; font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.legal-address a { color: var(--live); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; border-right: none; border-bottom: 1px solid var(--rule); min-height: 0; }
  .legal-address { grid-template-columns: 1fr; }
}

/* careers */
.careers-banner-section { padding: 0; border-bottom: 1px solid var(--rule); }
.rows--offer { margin: 0; padding: 0 var(--pad); border-top: none; }
.rows--offer > div { grid-template-columns: 180px 1fr; }
.careers-banner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.careers-banner__col { background: var(--panel); padding: 22px var(--pad); }
.careers-banner__col { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; }
.careers-banner__num { font-family: var(--f-cond); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); grid-row: 1 / span 2; }
.careers-banner__num .careers-banner__unit { font-size: 20px; color: var(--ink-3); margin-left: 4px; }
.careers-banner__lbl { font-family: var(--f-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; }
.careers-banner__sub { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 32ch; }
@media (max-width: 800px) { .careers-banner { grid-template-columns: 1fr; } }
.careers-role-head { display: flex; flex-direction: column; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--hdr) + 16px); }
.careers-role-head__tags { display: flex; flex-wrap: wrap; gap: 6px; order: 3; margin: 16px 0 0; }
.careers-tag { font-family: var(--f-cond); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: 4px 8px; border: 1px solid var(--rule); background: var(--panel-2); }
.careers-role-title { font-family: var(--f-cond); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1; color: var(--ink); margin: 0 0 10px; }
.careers-role-title span { display: block; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.careers-role-sub { font-size: 16.5px; color: var(--ink-2); max-width: 56ch; margin: 0; }
.careers-apply-list { padding-left: 0; margin: 0 0 14px; counter-reset: step; list-style: none; }
.careers-apply-list li { position: relative; padding-left: 34px; margin-bottom: 8px; counter-increment: step; }
.careers-apply-list li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--f-cond); font-weight: 600; color: var(--live); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}