/* Procyon — site styles
   Layout concept: the engineering drawing sheet, in the Procyon brand palette
   (Midnight PMS 289 C, Star Gold PMS 7409 C, Signal Blue PMS 2728 C, Steel Cool Gray 10 C). */

:root {
  --paper: #f3f5f8;       /* cool white page */
  --sheet: #ffffff;       /* raised panel */
  --ink: #0c2340;         /* Midnight: headings and body */
  --ink-2: #4f5b6b;       /* secondary text */
  --rule: #d5dce5;        /* hairlines */
  --grid: rgba(12, 35, 64, 0.045);
  --signal: #8a6100;      /* Star Gold, darkened so it is safe as text on white */
  --signal-fill: #f0b323; /* Star Gold for fills and marks */
  --blue: #0047bb;        /* Signal Blue */
  --night: #0c2340;       /* Midnight bands */
  --night-2: #12305a;
  --night-ink: #f3f6fa;
  --night-ink-2: #a9b8cb;
  --night-rule: #2a4670;
  --on-signal: #0c2340;
  --ok: #2f8a5b;
  --warn: #c98a00;
  --bad: #c2412d;
  --logo-icon: #0c2340; --logo-star: #f0b323; --logo-word: #0c2340; --logo-desc: #63666a;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --max: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #071526; --sheet: #0d1f36; --ink: #eef2f7; --ink-2: #a3b1c3;
    --rule: #22395a; --grid: rgba(238, 242, 247, 0.04);
    --signal: #f0b323; --blue: #7da4ff;
    --night: #050f1c; --night-2: #0c2340; --night-rule: #22395a;
    --logo-icon: #eef2f7; --logo-word: #eef2f7; --logo-desc: #a3b1c3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #071526; --sheet: #0d1f36; --ink: #eef2f7; --ink-2: #a3b1c3;
  --rule: #22395a; --grid: rgba(238, 242, 247, 0.04);
  --signal: #f0b323; --blue: #7da4ff;
  --night: #050f1c; --night-2: #0c2340; --night-rule: #22395a;
  --logo-icon: #eef2f7; --logo-word: #eef2f7; --logo-desc: #a3b1c3;
  color-scheme: dark;
}

*, *::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(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal-fill); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 700; font-stretch: 112%; line-height: 0.98; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; font-stretch: 108%; line-height: 1.05; }
h3 { font-size: 1.3rem; font-weight: 650; font-stretch: 104%; line-height: 1.2; }
p { margin: 0; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }

.label {
  font: 500 0.75rem/1.3 var(--f-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.label--signal { color: var(--signal); }
.mono { font-family: var(--f-mono); }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--signal-fill); color: var(--on-signal); padding: var(--s-2) var(--s-4); z-index: 100; }
.skip:focus { left: var(--s-4); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand svg.logo { display: block; height: 2.6rem; width: auto; flex: none; }
.site-foot .brand svg.logo { height: 3rem; }
@media (max-width: 480px) { .brand svg.logo { height: 2.2rem; } }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.nav a { text-decoration: none; font-size: 0.95rem; color: var(--ink-2); padding-block: var(--s-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal-fill); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: 2px; padding: 0.5rem 0.7rem; font: 500 0.8rem var(--f-mono); letter-spacing: 0.08em; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--gutter) var(--s-5); }
  .nav.is-open { display: flex; }
  .nav a { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--signal); }
  .nav .btn { margin-top: var(--s-4); justify-content: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 600 0.95rem/1 var(--f-body); text-decoration: none;
  padding: 0.95rem 1.3rem; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn--signal { background: var(--signal-fill); color: var(--on-signal); }
.btn--signal:hover { background: color-mix(in srgb, var(--signal-fill) 85%, white); }
.btn--line { border-color: currentColor; color: inherit; background: transparent; }
.btn--line:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn--small { padding: 0.65rem 1rem; font-size: 0.875rem; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
.nav .btn { color: var(--on-signal); }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section--sheet {
  background-color: var(--sheet);
  border-block: 1px solid var(--rule);
}
.gridded {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 48rem; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s-7); }
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Night band (hero, CTA) */
.night {
  background: var(--night); color: var(--night-ink);
  --ink: var(--night-ink); --ink-2: var(--night-ink-2); --rule: var(--night-rule);
  --grid: rgba(229, 236, 239, 0.035);
  --signal: #f0b323; --blue: #7da4ff;
  --logo-icon: #ffffff; --logo-word: #ffffff; --logo-desc: var(--night-ink-2);
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-8) var(--s-7); overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; }
.hero-copy { display: grid; gap: var(--s-5); min-width: 0; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hero-figure { min-width: 0; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.titleblock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule); margin-top: var(--s-7);
}
.titleblock > div { padding: var(--s-4); border-right: 1px solid var(--rule); display: grid; gap: var(--s-2); align-content: start; }
.titleblock > div:last-child { border-right: 0; }
.titleblock strong { font: 650 1.6rem/1.05 var(--f-display); font-stretch: 110%; }
@media (max-width: 760px) {
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titleblock > div:nth-child(2) { border-right: 0; }
  .titleblock > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ---------- Frameworks strip ---------- */
.strip { border-bottom: 1px solid var(--rule); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.strip li { font: 500 0.875rem/1.3 var(--f-mono); color: var(--ink); }

/* ---------- Exposure list (problems) ---------- */
.exposures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.exposures article { padding: var(--s-5) var(--s-5) var(--s-5) 0; display: grid; gap: var(--s-3); align-content: start; border-right: 1px solid var(--rule); }
.exposures article + article { padding-left: var(--s-5); }
.exposures article:last-child { border-right: 0; }
.exposures p { color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 980px) {
  .exposures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exposures article:nth-child(2) { border-right: 0; }
  .exposures article:nth-child(3) { padding-left: 0; }
  .exposures article:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .exposures { grid-template-columns: 1fr; }
  .exposures article, .exposures article + article { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
}
.sev { display: inline-flex; align-items: center; gap: var(--s-2); }
.sev::before { content: ""; width: 8px; height: 8px; background: var(--bad); }
.sev--warn::before { background: var(--warn); }

/* ---------- Services ---------- */
.services { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.service {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: var(--s-5); padding-block: var(--s-6); border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit; align-items: start;
}
.service-code { font: 600 0.85rem/1.4 var(--f-mono); color: var(--signal); padding-top: 0.35rem; }
.service h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: var(--s-3); }
.service p { color: var(--ink-2); }
.service ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: 0.95rem; }
.service li { padding-left: 1.1rem; position: relative; }
.service li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 1px; background: var(--ink-2); }
.service .go { font: 500 0.85rem var(--f-mono); color: var(--ink-2); padding-top: 0.35rem; white-space: nowrap; }
a.service:hover h3 { color: var(--blue); }
a.service:hover .go { color: var(--signal); }
@media (max-width: 900px) {
  .service { grid-template-columns: 3rem minmax(0, 1fr); }
  .service > ul, .service .go { grid-column: 2; }
}

/* ---------- Benchmark readout ---------- */
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
@media (max-width: 980px) { .bench { grid-template-columns: 1fr; gap: var(--s-6); } }
.bench-copy { display: grid; gap: var(--s-5); min-width: 0; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.ticks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-2); color: var(--ink-2); }
.ticks li::before { content: "✓"; font: 600 0.9rem/1.6 var(--f-mono); color: var(--signal); }
.readout { background: var(--night-2); border: 1px solid var(--rule); min-width: 0; }
.readout-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.readout-score { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); flex-wrap: wrap; }
.readout-score strong { font: 700 4.5rem/0.9 var(--f-display); font-stretch: 115%; font-variant-numeric: tabular-nums; }
.readout-score span { color: var(--ink-2); }
.bars { list-style: none; margin: 0; padding: var(--s-3) var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }
.bar { display: grid; gap: var(--s-2); }
.bar-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 0.92rem; }
.bar-track { position: relative; height: 8px; background: var(--rule); }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.bar-fill.is-warn { background: var(--signal); }
.bar-fill.is-bad { background: var(--bad); }
.bar-peer { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--blue); }
.readout-foot { display: flex; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--rule); }
.key .k-peer { width: 2px; height: 12px; background: var(--blue); }
.key .k-gap { background: var(--signal); }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.steps li::before { content: "STAGE " counter(step, decimal-leading-zero); font: 500 0.75rem var(--f-mono); letter-spacing: 0.1em; color: var(--signal); }
.steps p { color: var(--ink-2); font-size: 0.98rem; }
.steps .out { font: 500 0.8rem/1.5 var(--f-mono); color: var(--ink); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Experience table ---------- */
.table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
table.ledger { width: 100%; border-collapse: collapse; min-width: 640px; }
.ledger th, .ledger td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger th { font: 500 0.72rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.ledger td:first-child { font-weight: 600; white-space: nowrap; }
.ledger td.mono { font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; }
.ledger td p { color: var(--ink-2); font-size: 0.95rem; max-width: 34rem; }
.footnote { margin-top: var(--s-4); font-size: 0.85rem; color: var(--ink-2); max-width: 48rem; }

/* ---------- Sectors / regions ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: var(--s-7); } }
.taglist { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.taglist li { border: 1px solid var(--rule); padding: 0.45rem 0.75rem; font-size: 0.92rem; background: var(--paper); }
.regions { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.regions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.regions .mono { font-size: 0.8rem; color: var(--ink-2); text-align: right; }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }
.person { display: grid; gap: var(--s-3); align-content: start; }
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; background: var(--night-2); border: 1px solid var(--rule);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.portrait span { font: 700 3.2rem/1 var(--f-display); font-stretch: 120%; color: var(--night-ink-2); letter-spacing: 0.04em; }
.portrait::after { content: "PORTRAIT TO COME"; position: absolute; bottom: var(--s-3); left: var(--s-3); font: 500 0.65rem var(--f-mono); letter-spacing: 0.12em; color: var(--night-ink-2); }
.person .role { font: 500 0.8rem/1.4 var(--f-mono); color: var(--signal); }
.person p { color: var(--ink-2); font-size: 0.98rem; }
.creds { font: 500 0.8rem/1.5 var(--f-mono); color: var(--ink-2); }

/* ---------- CTA ---------- */
.cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
.cta-actions { display: grid; gap: var(--s-3); justify-items: start; }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Page header (inner pages) ---------- */
.page-head { padding-block: var(--s-8) var(--s-7); border-bottom: 1px solid var(--rule); }
.page-head .wrap { display: grid; gap: var(--s-5); }
.page-head h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
.crumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* Service detail blocks */
.detail { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); padding-block: var(--s-8); border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.detail:last-of-type { border-bottom: 0; }
.detail-intro { display: grid; gap: var(--s-4); align-content: start; }
.detail-intro p { color: var(--ink-2); }
.detail-body { display: grid; gap: var(--s-6); min-width: 0; }
.deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.deliverables div { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s-1); }
.deliverables div:nth-child(odd) { border-right: 1px solid var(--rule); }
.deliverables div:nth-child(even) { padding-left: var(--s-4); }
.deliverables strong { font-weight: 600; }
.deliverables span { color: var(--ink-2); font-size: 0.93rem; }
.whofor { font-size: 0.95rem; color: var(--ink-2); padding: var(--s-4); border-left: 2px solid var(--signal-fill); background: var(--sheet); }
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 600px) {
  .deliverables { grid-template-columns: 1fr; }
  .deliverables div:nth-child(odd) { border-right: 0; }
  .deliverables div:nth-child(even) { padding-left: 0; }
}

.toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.toc a { text-decoration: none; border: 1px solid var(--rule); padding: 0.5rem 0.8rem; font: 500 0.85rem var(--f-mono); color: var(--ink-2); }
.toc a:hover { color: var(--ink); border-color: var(--ink); }

/* Prose */
.prose { display: grid; gap: var(--s-4); max-width: 42rem; }
.prose p { color: var(--ink-2); }
.prose p strong { color: var(--ink); }

/* Insights */
.papers { border-top: 2px solid var(--ink); }
.paper { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); align-items: start; }
.paper h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
.paper p { color: var(--ink-2); font-size: 0.97rem; max-width: 40rem; }
.status { font: 500 0.72rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--rule); padding: 0.3rem 0.5rem; white-space: nowrap; }
.status--ready { border-color: var(--signal); color: var(--signal); }
@media (max-width: 760px) {
  .paper { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.contact-lines { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.contact-lines li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); align-items: baseline; }
.contact-lines a { text-decoration: none; overflow-wrap: anywhere; }
.contact-lines a:hover { color: var(--blue); }
form.enquiry { display: grid; gap: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 2.25rem); }
.field { display: grid; gap: var(--s-2); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field label { font: 500 0.75rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--f-body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.8rem 0.9rem; width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--signal-fill); outline-offset: 0; border-color: transparent; }
fieldset.intents { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
fieldset.intents legend { font: 500 0.75rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-2); }
.intent-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 600px) { .intent-opts { grid-template-columns: 1fr; } }
.intent-opts label { display: flex; gap: var(--s-3); align-items: center; border: 1px solid var(--rule); padding: 0.75rem 0.9rem; cursor: pointer; font-size: 0.95rem; background: var(--paper); }
.intent-opts input { accent-color: var(--signal-fill); }
.intent-opts label:has(input:checked) { border-color: var(--signal-fill); box-shadow: inset 3px 0 0 var(--signal-fill); }
.form-note { font-size: 0.85rem; color: var(--ink-2); }
.form-status { font-size: 0.95rem; padding: var(--s-4); border: 1px solid var(--rule); background: var(--paper); }
.form-status.is-ok { border-color: var(--ok); }
.form-status.is-err { border-color: var(--bad); }

/* ---------- Footer ---------- */
.site-foot { padding-block: var(--s-8) var(--s-6); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.foot-grid h4 { font: 500 0.72rem var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.foot-grid a { text-decoration: none; color: var(--ink); font-size: 0.95rem; overflow-wrap: anywhere; }
.foot-grid a:hover { color: var(--signal); }
.foot-about { display: grid; gap: var(--s-4); align-content: start; }
.foot-about p { color: var(--ink-2); font-size: 0.95rem; max-width: 26rem; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* 404 */
.lost { min-height: 60vh; display: grid; align-content: center; gap: var(--s-5); padding-block: var(--s-8); }

.site-foot { border-top: 1px solid var(--night-rule); }
.steps-wrap { min-width: 0; }

/* =========================================================
   Hero film: chaptered animation, autoplay with pause
   ========================================================= */
.film { border: 1px solid var(--night-rule); background: var(--night-2); color: var(--night-ink); position: relative; overflow: hidden; }
.film-stage { position: relative; aspect-ratio: 16 / 11; max-width: 100%; overflow: hidden;
  background:
    radial-gradient(60% 70% at 70% 30%, rgba(242,179,61,.10), transparent 70%),
    linear-gradient(var(--night-2), var(--night));
}
.film-tag { position: absolute; top: .75rem; right: .9rem; z-index: 5; color: var(--night-ink-2); }
.scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.scene.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.scene svg text { font-family: var(--f-mono); }

/* shared entrance helpers: final state is the resting state */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: var(--len, 600); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes kenburns { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.14) translate(-3%, -2%); } }
@keyframes sweep { 0% { left: 8%; top: 20%; } 35% { left: 62%; top: 30%; } 70% { left: 30%; top: 60%; } 100% { left: 70%; top: 55%; } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-8deg) scale(.95); } 100% { transform: rotate(-8deg) scale(1); } }

/* 0 · Start */
.scene-start { align-content: center; gap: .75rem; text-align: center; }
.rise { width: min(70%, 320px); height: auto; }
.rise .horizon { stroke: var(--night-rule); stroke-width: 1.5; }
.rise .star-big path { fill: var(--night-ink); }
.rise .star-small path { fill: var(--signal-fill); }
.scene-start.is-active .star-small { animation: rise-small 2.6s cubic-bezier(.2,.7,.2,1) both, twinkle 2.4s 2.6s ease-in-out infinite; }
.scene-start.is-active .star-big { animation: rise-big 3s .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise-small { from { transform: translateY(130px); opacity: 0; } }
@keyframes rise-big { from { transform: translateY(120px); opacity: 0; } }
.film-title { font: 700 clamp(1.4rem, 3.2vw, 2.4rem)/1.05 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; }
.scene-start.is-active .film-title { animation: rise-in .8s 1s both; }
.scene-start.is-active .label { animation: fade-in .8s 1.6s both; }

/* 1 · Site walk */
.scene-walk { padding: 0; }
.scene-photo, .scene-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-walk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,13,19,.15), rgba(7,13,19,.65)); }
.scene-walk.is-active .scene-photo img { animation: kenburns 7s ease-out both; }
.reticle { position: absolute; z-index: 2; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 1.5px solid var(--signal-fill); border-radius: 50%; left: 8%; top: 20%; box-shadow: 0 0 0 6px rgba(242,179,61,.12); }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--signal-fill); }
.reticle::before { left: 50%; top: -10px; bottom: -10px; width: 1.5px; }
.reticle::after { top: 50%; left: -10px; right: -10px; height: 1.5px; }
.scene-walk.is-active .reticle { animation: sweep 5.5s ease-in-out both; }
.callout { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem; background: rgba(7,13,19,.82); border: 1px solid var(--night-rule); font: 500 clamp(.6rem, 1.2vw, .78rem)/1.2 var(--f-mono); color: var(--night-ink); backdrop-filter: blur(6px); white-space: nowrap; }
.callout .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--night-ink-2); flex: none; }
.callout .dot.warn { background: var(--signal-fill); animation: blink 1.2s infinite; }
.callout .dot.ok { background: #3fb67b; }
.callout.c1 { left: 6%; top: 14%; } .callout.c2 { right: 6%; top: 36%; } .callout.c3 { left: 10%; bottom: 14%; }
.scene-walk.is-active .c1 { animation: pop-in .4s 1.2s both; }
.scene-walk.is-active .c2 { animation: pop-in .4s 2.6s both; }
.scene-walk.is-active .c3 { animation: pop-in .4s 4s both; }

/* 2 · HAZOP */
.scene-hazop { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1rem; align-items: center; }
.pid { width: 100%; height: auto; }
.pid .eq, .pid .eq-line { fill: none; stroke: var(--night-ink-2); stroke-width: 2; }
.pid .pipe { fill: none; stroke: var(--night-ink); stroke-width: 2; stroke-dasharray: 600; }
.pid text { fill: var(--night-ink-2); font-size: 13px; text-anchor: middle; }
.pid .node-box { fill: rgba(242,179,61,.06); stroke: var(--signal-fill); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pid .node-label { fill: var(--signal-fill); text-anchor: start; font-size: 13px; letter-spacing: .1em; }
.scene-hazop.is-active .pipe { animation: draw 1.6s .2s ease-out both; }
.scene-hazop.is-active .node-box, .scene-hazop.is-active .node-label { animation: fade-in .5s 1.6s both; }
.worksheet { border: 1px solid var(--night-rule); background: var(--night); font-size: clamp(.62rem, 1.15vw, .82rem); }
.ws-row { display: grid; gap: .1rem; padding: .5rem .7rem; border-bottom: 1px solid var(--night-rule); }
.ws-row:last-child { border-bottom: 0; }
.ws-row span { font: 500 .68em var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--night-ink-2); }
.ws-row b { font-weight: 600; }
.ws-row.act { background: rgba(242,179,61,.12); } .ws-row.act b { color: var(--signal-fill); }
.scene-hazop.is-active .r1 { animation: rise-in .4s 2s both; }
.scene-hazop.is-active .r2 { animation: rise-in .4s 2.6s both; }
.scene-hazop.is-active .r3 { animation: rise-in .4s 3.2s both; }
.scene-hazop.is-active .r4 { animation: rise-in .4s 3.8s both; }
.scene-hazop.is-active .r5 { animation: rise-in .4s 4.6s both; }

/* 3 · Barriers */
.mini-bowtie { width: 100%; height: auto; }
.mini-bowtie .w { fill: none; stroke: var(--night-rule); stroke-width: 1.5; }
.mini-bowtie .bt-node rect { fill: var(--night); stroke: var(--night-rule); }
.mini-bowtie text { fill: var(--night-ink); font-size: 12px; text-anchor: middle; }
.mini-bowtie .bt-bar rect { fill: var(--signal-fill); }
.mini-bowtie .bt-bar text { fill: var(--on-signal); font-size: 10.5px; font-weight: 600; }
.mini-bowtie .bt-bar.weak rect { fill: transparent; stroke: #e2553f; stroke-width: 2; stroke-dasharray: 4 3; }
.mini-bowtie .bt-bar.weak text { fill: #ff8a75; }
.mini-bowtie .bt-top { fill: var(--signal-fill); }
.mini-bowtie .bt-top-t { fill: var(--on-signal); font-size: 11px; font-weight: 600; }
.mini-bowtie .weak-flag { fill: #ff8a75; font-size: 11px; letter-spacing: .14em; }
.scene-barriers.is-active .bt-top { animation: pop-in .5s .2s both; transform-origin: 320px 150px; }
.scene-barriers.is-active .b1 { animation: pop-in .35s .9s both; transform-origin: 192px 50px; }
.scene-barriers.is-active .b2 { animation: pop-in .35s 1.3s both, blink 1s 2.8s 3; transform-origin: 192px 150px; }
.scene-barriers.is-active .b3 { animation: pop-in .35s 1.7s both; transform-origin: 192px 250px; }
.scene-barriers.is-active .b4 { animation: pop-in .35s 2.1s both; transform-origin: 448px 50px; }
.scene-barriers.is-active .b5 { animation: pop-in .35s 2.5s both; transform-origin: 448px 150px; }
.scene-barriers.is-active .b6 { animation: pop-in .35s 2.9s both; transform-origin: 448px 250px; }
.scene-barriers.is-active .weak-flag { animation: fade-in .4s 3.3s both; }

/* 4 · Score */
.mini-readout { width: min(100%, 440px); border: 1px solid var(--night-rule); background: var(--night); }
.mr-head { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--night-rule); }
.mr-head .label { color: var(--night-ink-2); }
.mr-score { display: flex; align-items: baseline; gap: .5rem; padding: .8rem 1rem .4rem; }
.mr-score strong { font: 700 clamp(2.4rem, 6vw, 3.8rem)/1 var(--f-display); font-stretch: 115%; font-variant-numeric: tabular-nums; }
.mr-score span { color: var(--night-ink-2); font-family: var(--f-mono); }
.mr-bars { display: grid; gap: .55rem; padding: .4rem 1rem 1rem; font-size: clamp(.62rem, 1.1vw, .8rem); }
.mr-bars div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: .6rem; align-items: center; }
.mr-bars i { display: block; height: 7px; background: linear-gradient(90deg, var(--night-ink) var(--w), var(--night-rule) var(--w)); transform-origin: left; }
.mr-bars i.warn { background: linear-gradient(90deg, var(--signal-fill) var(--w), var(--night-rule) var(--w)); }
.mr-bars i.bad { background: linear-gradient(90deg, #e2553f var(--w), var(--night-rule) var(--w)); }
.scene-score.is-active .mr-bars div:nth-child(1) i { animation: grow-x .8s .4s both; }
.scene-score.is-active .mr-bars div:nth-child(2) i { animation: grow-x .8s .6s both; }
.scene-score.is-active .mr-bars div:nth-child(3) i { animation: grow-x .8s .8s both; }
.scene-score.is-active .mr-bars div:nth-child(4) i { animation: grow-x .8s 1s both; }
.scene-score.is-active .mr-bars div:nth-child(5) i { animation: grow-x .8s 1.2s both; }

/* 5 · Roadmap */
.roadmap { list-style: none; margin: 0; padding: 0; width: min(100%, 520px); display: grid; gap: .5rem; counter-reset: none; font-size: clamp(.68rem, 1.25vw, .9rem); }
.roadmap li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--night-rule); background: var(--night); position: relative; }
.roadmap .pri { font: 600 .75em var(--f-mono); padding: .2rem .4rem; border: 1px solid currentColor; }
.roadmap .p1 { color: #ff8a75; } .roadmap .p2 { color: var(--signal-fill); }
.roadmap .due { font: 500 .8em var(--f-mono); color: var(--night-ink-2); }
.roadmap li::after { content: "✓"; position: absolute; right: -.5rem; top: -.5rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; background: #3fb67b; color: var(--night); font: 700 .75rem/1 var(--f-body); }
.scene-roadmap.is-active li { animation: rise-in .45s both; }
.scene-roadmap.is-active li:nth-child(1) { animation-delay: .2s; } .scene-roadmap.is-active li:nth-child(2) { animation-delay: .5s; }
.scene-roadmap.is-active li:nth-child(3) { animation-delay: .8s; } .scene-roadmap.is-active li:nth-child(4) { animation-delay: 1.1s; }
.scene-roadmap.is-active li::after { animation: pop-in .3s both; }
.scene-roadmap.is-active li:nth-child(1)::after { animation-delay: 2.2s; } .scene-roadmap.is-active li:nth-child(2)::after { animation-delay: 3s; }
.scene-roadmap.is-active li:nth-child(3)::after { animation-delay: 3.8s; } .scene-roadmap.is-active li:nth-child(4)::after { animation-delay: 4.6s; }

/* 6 · Verified */
.scene-verified { align-content: center; gap: 1.25rem; }
.verify { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.v-col { display: grid; gap: .3rem; text-align: center; }
.v-col .label { color: var(--night-ink-2); }
.v-col strong { font: 700 clamp(2.6rem, 7vw, 4.6rem)/1 var(--f-display); font-stretch: 115%; font-variant-numeric: tabular-nums; color: var(--night-ink-2); }
.v-col.now strong { color: var(--signal-fill); }
.v-arrow { font: 400 2rem var(--f-mono); color: var(--night-ink-2); }
.stamp { font: 600 clamp(.7rem, 1.4vw, .95rem) var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #3fb67b; border: 2px solid #3fb67b; padding: .45rem .8rem; transform: rotate(-8deg); }
.scene-verified.is-active .v-arrow { animation: fade-in .5s .3s both; }
.scene-verified.is-active .now { animation: rise-in .6s .5s both; }
.scene-verified.is-active .stamp { animation: stamp .6s 2.2s both; }

/* Film controls */
.film-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; padding: .9rem 1rem 1rem; border-top: 1px solid var(--night-rule); background: var(--night); }
.film-play { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--night-rule); background: var(--night-2); color: var(--night-ink); display: grid; place-items: center; cursor: pointer; }
.film-play:hover { border-color: var(--signal-fill); }
.film-play svg { width: 1rem; height: 1rem; fill: currentColor; }
.film-play .i-play { display: none; }
.film-play[aria-pressed="true"] .i-play { display: block; }
.film-play[aria-pressed="true"] .i-pause { display: none; }
.film-caption { display: grid; gap: .2rem; min-height: 3.2rem; align-content: center; }
.film-caption p { font-size: .95rem; line-height: 1.4; color: var(--night-ink); }
.film-steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.film-steps button { width: 100%; background: none; border: 0; padding: .3rem 0 0; color: var(--night-ink-2); cursor: pointer; display: grid; gap: .35rem; text-align: left; font: 500 .7rem/1.2 var(--f-body); }
.film-steps i { display: block; height: 3px; background: var(--night-rule); position: relative; overflow: hidden; }
.film-steps i::after { content: ""; position: absolute; inset: 0; background: var(--signal-fill); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film-steps button[aria-current="step"] { color: var(--night-ink); }
.film-steps button:hover { color: var(--night-ink); }
@media (max-width: 560px) {
  .film-steps span { display: none; }
  .film-stage { aspect-ratio: 4 / 3.6; }
  .scene { padding: 1rem; }
  .scene-hazop { grid-template-columns: 1fr; align-content: center; gap: .5rem; }
  .scene-hazop .pid { max-height: 38%; }
  .callout.c2 { right: 4%; top: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { animation: none !important; }
  .scene { transition: none; }
}

/* =========================================================
   Scroll reveal (only when JS runs and motion is allowed)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Legend keys */
.key { display: inline-flex; align-items: center; gap: var(--s-2); }
.key i { width: 10px; height: 10px; display: inline-block; background: var(--signal); }

/* =========================================================
   Regional map: click a country to zoom
   ========================================================= */
.regionmap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--s-6); align-items: stretch; }
@media (max-width: 900px) { .regionmap { grid-template-columns: 1fr; } .rm-map { order: -1; } }
.rm-side { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.rm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rm-btn { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-2) var(--s-3) 0; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: 500 1.05rem var(--f-body); cursor: pointer; text-align: left; transition: padding .2s, color .2s; }
.rm-btn:hover { padding-left: var(--s-2); }
.rm-btn[aria-pressed="true"] { color: var(--signal); padding-left: var(--s-3); box-shadow: inset 3px 0 0 var(--signal-fill); }
.rm-panel { display: grid; gap: var(--s-4); }
.rm-detail { display: grid; gap: var(--s-2); }
.rm-detail p:last-child { color: var(--ink-2); }
.rm-cities { font-size: .85rem; color: var(--ink); }
.rm-panel .rm-detail:not([hidden]) { animation: rise-in .4s both; }
.rm-back { justify-self: start; }
.rm-map { position: relative; border: 1px solid var(--rule); background: var(--sheet); overflow: hidden; min-width: 0; }
.rm-map svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; max-width: 100%; }
.rm-sea { fill: var(--sheet); }
.rm-land { fill: color-mix(in srgb, var(--ink) 9%, var(--sheet)); stroke: var(--sheet); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.rm-country path { fill: color-mix(in srgb, var(--signal-fill) 38%, var(--sheet)); stroke: var(--sheet); stroke-width: 0.8; vector-effect: non-scaling-stroke; transition: fill .25s; cursor: pointer; }
.rm-country:hover path { fill: color-mix(in srgb, var(--signal-fill) 65%, var(--sheet)); }
.rm-country.is-on path { fill: var(--signal-fill); }
.regionmap.is-zoomed .rm-country:not(.is-on) path { fill: color-mix(in srgb, var(--signal-fill) 22%, var(--sheet)); }
.rm-city circle { fill: var(--ink); stroke: var(--sheet); vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.rm-city text { fill: var(--ink); font-family: var(--f-mono); font-weight: 500; paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; opacity: 0; transition: opacity .3s; pointer-events: none; }
.rm-city.is-on text { opacity: 1; }
.rm-city.is-on circle { fill: var(--blue); }
.rm-hint { position: absolute; left: var(--s-3); bottom: var(--s-3); background: var(--sheet); padding: .2rem .4rem; }

[hidden] { display: none !important; }
.rm-sea { fill: color-mix(in srgb, var(--blue) 5%, var(--sheet)); }

/* =========================================================
   Photo page heads, sticky sub-navigation
   ========================================================= */
.page-head--photo { position: relative; overflow: hidden; border-bottom: 0; padding-block: var(--s-9) var(--s-8); }
.page-head--photo::before { content: ""; position: absolute; inset: 0; background: var(--bg-img) center / cover no-repeat; transform: scale(1.04); }
.page-head--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,35,64,.94) 0%, rgba(12,35,64,.78) 45%, rgba(12,35,64,.35) 100%); }
.page-head--photo .wrap { position: relative; z-index: 1; }
.page-head--photo .crumbs a, .page-head--photo .crumbs { color: var(--night-ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .page-head--photo::before { animation: kenburns 18s ease-out both; }
}
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4.25rem); z-index: 40; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.subnav .toc { padding-block: var(--s-3); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.subnav .toc a { white-space: nowrap; transition: color .2s, border-color .2s, background-color .2s; }
.subnav .toc a.is-active { color: var(--on-signal); background: var(--signal-fill); border-color: var(--signal-fill); }
.detail { scroll-margin-top: 9rem; }

/* =========================================================
   Photo panels with animated overlays (services)
   ========================================================= */
.photo-panel { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--rule); background: var(--night); aspect-ratio: 16 / 10; max-width: 100%; }
.photo-panel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.photo-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,35,64,0) 35%, rgba(12,35,64,.78)); pointer-events: none; }
.photo-panel:hover img { transform: scale(1.04); }
.credit { position: absolute; right: .5rem; bottom: .4rem; z-index: 3; font: 400 .62rem/1.3 var(--f-mono); color: rgba(255,255,255,.72); max-width: 70%; text-align: right; }
.credit a { color: inherit; }
.vg { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; background: rgba(12,35,64,.86); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; padding: .8rem .9rem; display: grid; gap: .6rem; max-width: calc(100% - 2rem); }
.vg-title { font: 500 .68rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #a9b8cb; }
.vg-ps { width: min(20rem, calc(100% - 2rem)); }
.vg-ps svg { width: 100%; height: auto; }
.vg-ps .vg-line { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 0; }
.vg-ps .vg-eq { fill: none; stroke: #a9b8cb; stroke-width: 2; }
.vg-ps .vg-node { fill: rgba(240,179,35,.1); stroke: #f0b323; stroke-width: 1.5; stroke-dasharray: 5 4; }
.vg-chip { font: 500 .72rem var(--f-mono); color: #fff; }
.vg-chip b { color: #f0b323; font-weight: 600; margin-right: .4rem; }
.vg-ps8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); gap: .35rem; }
.vg-ps8 li { font: 600 .72rem var(--f-mono); padding: .3rem .45rem; border: 1px solid rgba(255,255,255,.25); display: flex; gap: .35rem; align-items: center; }
.vg-ps8 li::before { content: "✓"; color: #f0b323; }
.vg-bars { display: flex; align-items: flex-end; gap: .5rem; height: 4.5rem; }
.vg-bars i { width: 1.6rem; height: var(--h); background: #fff; transform-origin: bottom; }
.vg-bars i.lo { background: #f0b323; }
.vg-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.vg-steps li { font: 500 .7rem var(--f-mono); padding: 1.1rem .7rem 0 0; position: relative; min-width: 4.8rem; }
.vg-steps li::before { content: ""; position: absolute; top: .3rem; left: 0; width: .7rem; height: .7rem; border-radius: 50%; background: #f0b323; }
.vg-steps li::after { content: ""; position: absolute; top: .6rem; left: .8rem; right: .2rem; height: 1px; background: rgba(255,255,255,.35); }
.vg-steps li:last-child::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .photo-panel.reveal img { transform: scale(1.12); }
  .js .photo-panel.reveal.in img { transform: scale(1); }
  .js .photo-panel.in .vg-line { animation: draw 1.6s .4s ease-out both; --len: 400; }
  .js .photo-panel.in .vg-node, .js .photo-panel.in .vg-chip { animation: fade-in .5s 1.8s both; }
  .js .photo-panel.in .vg-ps8 li { animation: pop-in .35s both; }
  .js .photo-panel.in .vg-ps8 li:nth-child(1) { animation-delay: .5s; } .js .photo-panel.in .vg-ps8 li:nth-child(2) { animation-delay: .65s; }
  .js .photo-panel.in .vg-ps8 li:nth-child(3) { animation-delay: .8s; } .js .photo-panel.in .vg-ps8 li:nth-child(4) { animation-delay: .95s; }
  .js .photo-panel.in .vg-ps8 li:nth-child(5) { animation-delay: 1.1s; } .js .photo-panel.in .vg-ps8 li:nth-child(6) { animation-delay: 1.25s; }
  .js .photo-panel.in .vg-ps8 li:nth-child(7) { animation-delay: 1.4s; } .js .photo-panel.in .vg-ps8 li:nth-child(8) { animation-delay: 1.55s; }
  .js .photo-panel.in .vg-bars i { animation: grow-y .9s cubic-bezier(.2,.7,.2,1) both; }
  .js .photo-panel.in .vg-bars i:nth-child(2) { animation-delay: .15s; } .js .photo-panel.in .vg-bars i:nth-child(3) { animation-delay: .3s; } .js .photo-panel.in .vg-bars i:nth-child(4) { animation-delay: .45s; }
  .js .photo-panel.in .vg-steps li { animation: rise-in .45s both; }
  .js .photo-panel.in .vg-steps li:nth-child(2) { animation-delay: .3s; } .js .photo-panel.in .vg-steps li:nth-child(3) { animation-delay: .6s; } .js .photo-panel.in .vg-steps li:nth-child(4) { animation-delay: .9s; }
  .js .deliverables.reveal > div { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
  .js .deliverables.reveal.in > div { opacity: 1; transform: none; }
  .js .deliverables.reveal.in > div:nth-child(2) { transition-delay: .07s; } .js .deliverables.reveal.in > div:nth-child(3) { transition-delay: .14s; }
  .js .deliverables.reveal.in > div:nth-child(4) { transition-delay: .21s; } .js .deliverables.reveal.in > div:nth-child(5) { transition-delay: .28s; }
  .js .deliverables.reveal.in > div:nth-child(6) { transition-delay: .35s; }
  .js .deliverables.reveal { opacity: 1; transform: none; }
}
@keyframes grow-y { from { transform: scaleY(0); } }

/* =========================================================
   Sector photo tiles (home)
   ========================================================= */
.sectors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 15rem; gap: var(--s-3); }
.sector { position: relative; overflow: hidden; margin: 0; background: var(--night); grid-column: span 2; }
.sector.wide { grid-column: span 3; }
.sector img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sector:hover img { transform: scale(1.06); }
.sector::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,35,64,0) 30%, rgba(12,35,64,.88)); }
.sector figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2; color: #fff; display: grid; gap: .2rem; }
.sector figcaption b { font: 650 1.2rem/1.15 var(--f-display); font-stretch: 105%; }
.sector figcaption span { font: 400 .85rem/1.35 var(--f-body); color: #d5deea; }
.sector .credit { bottom: auto; top: .4rem; }
@media (max-width: 900px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 12rem; } .sector, .sector.wide { grid-column: span 1; } .sector.full-sm { grid-column: span 2; } }
@media (max-width: 520px) { .sectors { grid-template-columns: 1fr; } .sector, .sector.wide, .sector.full-sm { grid-column: span 1; } }

/* Principal portraits (photos from the current site, set on one consistent ground) */
.portrait img { position: absolute; inset: auto 0 0 0; width: 100%; height: 92%; object-fit: contain; object-position: bottom; }
.portrait.has-photo::after { content: none; }
.portrait.has-photo { background: radial-gradient(120% 80% at 50% 100%, #1d3a63, var(--night)); }

/* Hero photo backdrop. Note: --bg-img urls are resolved from this stylesheet, so pages pass ../img/... */
.hero--photo { position: relative; isolation: isolate; }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg-img) center 60% / cover no-repeat; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,35,64,.97) 0%, rgba(12,35,64,.9) 38%, rgba(12,35,64,.72) 70%, rgba(12,35,64,.85) 100%),
              linear-gradient(0deg, rgba(12,35,64,1) 0%, rgba(12,35,64,0) 35%); }
.hero-credit { position: absolute; right: var(--gutter); bottom: .5rem; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .hero--photo::before { animation: kenburns 24s ease-out both; } }
.photo-panel .credit { top: .4rem; bottom: auto; }
@media (max-width: 600px) {
  .vg { left: .6rem; bottom: .6rem; padding: .5rem .6rem; gap: .4rem; }
  .vg-ps { width: auto; }
  .vg-ps svg { display: none; }
  .vg-bars { height: 3rem; } .vg-bars i { width: 1.1rem; }
  .vg-steps li { min-width: 3.9rem; font-size: .62rem; }
  .vg-ps8 li { font-size: .62rem; padding: .2rem .35rem; }
}

/* =========================================================
   Stat band (under the hero): big figure, two-line caps label, hairline dividers
   ========================================================= */
.stats { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--night-rule); }
.stat-band { margin: 0; display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between; }
.stat-band > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .45rem; padding: .35rem 0 .35rem clamp(1rem, 2.6vw, 2.5rem); border-left: 1px solid var(--night-rule); min-width: 0; }
.stat-band > div:first-child { border-left: 0; padding-left: 0; }
.stat-band dd { margin: 0; font: 700 clamp(1.4rem, 2.2vw, 1.8rem)/1.05 var(--f-display); font-stretch: 100%; letter-spacing: -.01em; color: var(--stat); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-band dt { font: 600 .74rem/1.35 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--night-ink-2); max-width: 10.5rem; }
.stats { --stat: #6e9bff; }
@media (max-width: 1080px) and (min-width: 861px) { .stat-band dd { font-size: 1.25rem; } .stat-band dt { font-size: .66rem; max-width: 9rem; } }
@media (max-width: 860px) {
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; row-gap: 1.4rem; }
  .stat-band > div { border-left: 0; padding: 0; }
  .stat-band > div:nth-child(even) { border-left: 1px solid var(--night-rule); padding-left: 1.25rem; }
  .stat-band > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--night-rule); border-left: 0; padding: 1.25rem 0 0; }
}

/* =========================================================
   Agency credit (footer): Inetro mark with hover animation
   ========================================================= */
.site-credit { display: inline-flex; align-items: center; gap: 10px; line-height: 1; color: var(--night-ink); text-decoration: none; }
.site-credit span { font: 500 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--night-ink-2); transition: color .2s ease; }
.site-credit:hover span, .site-credit:focus-visible span { color: var(--night-ink); }
.inetro-logo { display: block; overflow: visible; }
.inetro-logo .ib-dot { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .site-credit:hover > .inetro-logo .ib-left, .site-credit:focus-visible > .inetro-logo .ib-left { animation: ib-left .75s cubic-bezier(.3,1.4,.4,1); }
  .site-credit:hover > .inetro-logo .ib-right, .site-credit:focus-visible > .inetro-logo .ib-right { animation: ib-right .75s .06s cubic-bezier(.3,1.4,.4,1); }
  .site-credit:hover > .inetro-logo .ib-dot, .site-credit:focus-visible > .inetro-logo .ib-dot { animation: ib-jump .8s .1s cubic-bezier(.3,.9,.4,1); }
  .site-credit:hover > .inetro-logo .ib-stem, .site-credit:focus-visible > .inetro-logo .ib-stem { animation: ib-squash .8s .1s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
}
@keyframes ib-left { 0%, 100% { transform: none; } 35% { transform: translate(-12px, 40px); opacity: .4; } 55% { transform: translate(2px, -6px); opacity: 1; } }
@keyframes ib-right { 0%, 100% { transform: none; } 35% { transform: translate(12px, -40px); opacity: .4; } 55% { transform: translate(-2px, 6px); opacity: 1; } }
@keyframes ib-jump { 0%, 100% { transform: none; } 10% { transform: translateY(4px) scale(1.12, .82); } 40% { transform: translateY(-46px); } 65% { transform: translateY(3px) scale(1.14, .84); } 80% { transform: translateY(-12px); } }
@keyframes ib-squash { 0%, 100% { transform: none; } 62% { transform: scaleY(.9); } }
.foot-base { align-items: center; }

.hero h1.h1-long { font-size: clamp(2.2rem, 3.9vw, 3.5rem); line-height: 1.03; font-stretch: 106%; }
@media (min-width: 981px) { .hero-grid:has(.h1-long) { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }

/* About: facts row, principles grid, principal bios */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.facts article { display: grid; gap: .55rem; align-content: start; padding: 0 clamp(1rem, 2.5vw, 2.25rem); border-left: 1px solid var(--rule); }
.facts article:first-child { padding-left: 0; border-left: 0; }
.facts strong { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--f-display); color: var(--blue); }
.facts p { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; gap: 1.75rem; } .facts article { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--rule); } .facts article:first-child { padding-top: 0; border-top: 0; } }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.principles article { display: grid; gap: .6rem; align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.principles p { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); } }
@media (max-width: 540px) { .principles { grid-template-columns: 1fr; } }
.person .label { margin-top: .4rem; }
.person .ticks { gap: .4rem; }
.person .ticks li { font-size: .92rem; }
.portrait.has-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* Partner with us (MDB bids) panel under the services list */
.partner { margin-top: var(--s-6); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; padding: clamp(1.5rem, 3.5vw, 2.5rem); border-left: 4px solid var(--signal-fill); }
.partner-copy { display: grid; gap: .6rem; }
.partner h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-stretch: 106%; }
.partner-copy p:last-child { color: var(--night-ink-2); }
.partner-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; color: var(--night-ink); }
.partner-points li { padding-left: 1.4rem; position: relative; }
.partner-points li::before { content: "✓"; position: absolute; left: 0; color: var(--signal-fill); font-weight: 600; }
@media (max-width: 1000px) { .partner { grid-template-columns: 1fr; gap: var(--s-5); } .partner .btn { justify-self: start; } }