/* ============================================================
   4NMx — design system
   Palette derived from the logo:
     #045084  deep blue   (structure, headings, dark slabs)
     #F26522  orange      (accent only — never a background wash)
     #808D9E  slate       (support text, hairlines)
   ============================================================ */

:root {
  /* --- brand --- */
  --blue-950: #041F35;
  --blue-900: #052C48;
  --blue-800: #033C64;
  --blue:     #045084;
  --blue-600: #0A6296;
  --blue-200: #C6D8E6;
  --blue-100: #DEE9F1;
  --blue-50:  #F0F5F9;

  --orange:     #F26522;
  --orange-600: #D9520F;
  --orange-100: #FBDDCC;
  --orange-50:  #FEF3EC;

  --slate:      #808D9E;
  --slate-700:  #5B6875;
  --slate-800:  #414D59;

  /* --- surfaces --- */
  --ink:        #0E1F2D;
  --paper:      #FFFFFF;
  --paper-2:    #F7F9FB;
  --line:       #E2E8EE;
  --line-2:     #CBD5E0;
  --line-dark:  rgba(255, 255, 255, .14);

  /* --- type --- */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- metrics --- */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --nav-h: 72px;
  --band: clamp(72px, 9vw, 132px);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Two-part shadows — a tight contact shadow plus a wide soft one. A single large
     blur reads as haze; the pair reads as an object sitting above the page. */
  --shadow-sm: 0 1px 2px rgba(14, 31, 45, .06), 0 2px 6px -2px rgba(14, 31, 45, .06);
  --shadow-md: 0 2px 4px rgba(14, 31, 45, .04), 0 12px 28px -10px rgba(14, 31, 45, .14);
  --shadow-lg: 0 2px 6px rgba(14, 31, 45, .05), 0 26px 50px -20px rgba(5, 44, 72, .26);
  --shadow-xl: 0 4px 10px rgba(14, 31, 45, .06), 0 44px 80px -28px rgba(5, 44, 72, .34);

  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* Fine film grain over the whole page. Kills the flatness of large plain fills
   without reading as a texture in its own right. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-800);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }

::selection { background: var(--orange); color: #fff; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--blue-900);
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Capped at 3.6rem: the hero column is ~530px, and anything larger gives a measure
   of five or six words per line and drives the headline to four lines. */
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -.032em; line-height: 1.04; }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.9rem); letter-spacing: -.03em; }
h3 { font-size: 1.16rem; letter-spacing: -.015em; line-height: 1.3; }
h4 { font-size: .95rem; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--slate-700);
}

.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Eyebrow: mono label preceded by a short orange rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blue-600);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--orange);
  flex: none;
}
.eyebrow.is-center { justify-content: center; }
.on-dark .eyebrow, .band-dark .eyebrow { color: #8FB4D0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band-tint { background: var(--paper-2); }
.band-rule { border-top: 1px solid var(--line); }

.band-dark {
  background: var(--blue-900);
  color: #B9CBD9;
}
.band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }

/* Section header — headline left, supporting text right */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-head .lead { padding-bottom: 4px; }
.sec-head.is-narrow { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

@media (max-width: 860px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease),
    transform .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  box-shadow: 0 1px 2px rgba(4, 80, 132, .2), 0 8px 18px -8px rgba(4, 80, 132, .5);
}
.btn-primary:hover {
  --btn-bg: var(--blue-800);
  --btn-bd: var(--blue-800);
  box-shadow: 0 2px 4px rgba(4, 80, 132, .22), 0 16px 30px -10px rgba(4, 80, 132, .6);
}

.btn-accent {
  --btn-bg: var(--orange);
  --btn-bd: var(--orange);
  box-shadow: 0 1px 2px rgba(217, 82, 15, .22), 0 8px 18px -8px rgba(217, 82, 15, .55);
}
.btn-accent:hover {
  --btn-bg: var(--orange-600);
  --btn-bd: var(--orange-600);
  box-shadow: 0 2px 4px rgba(217, 82, 15, .24), 0 16px 30px -10px rgba(217, 82, 15, .62);
}

.btn-line {
  --btn-bg: transparent;
  --btn-fg: var(--blue-900);
  --btn-bd: var(--line-2);
}
.btn-line:hover { --btn-bd: var(--blue); --btn-fg: var(--blue); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--blue-900);
  --btn-bd: transparent;
  padding-inline: 4px;
}
.btn-ghost:hover { --btn-fg: var(--orange-600); }

.btn-sm { padding: 9px 18px; font-size: .87rem; }
.btn-lg { padding: 16px 30px; font-size: .98rem; }
.btn-block { width: 100%; }

.btn .ar { transition: transform .2s ease; }
.btn:hover .ar { transform: translateX(3px); }

/* Text link with animated underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--blue);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--blue-200);
  transition: border-color .18s ease, color .18s ease;
}
.tlink:hover { color: var(--orange-600); border-color: var(--orange); }
.tlink .ar { transition: transform .2s ease; }
.tlink:hover .ar { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
/* Reading-progress bar, pinned above the nav. */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 101;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  will-change: transform;
}

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(14, 31, 45, .04);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--slate-800);
  padding-block: 6px;
  transition: color .18s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width .22s ease;
}
.nav-links a:hover { color: var(--blue-900); }
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }
.nav-links a.is-active { color: var(--blue-900); }

.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1.5px;
  background: var(--blue-900);
  transition: transform .24s ease, opacity .18s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 20.5px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 28px;
  display: none;
  z-index: 99;
  box-shadow: var(--shadow-md);
}
.nav-drawer.is-open { display: block; animation: drawer .24s ease; }
@keyframes drawer { from { opacity: 0; transform: translateY(-8px); } }
.nav-drawer a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--blue-900);
}
.nav-drawer .btn { margin-top: 22px; width: 100%; }

@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
}

/* engineering-paper hairline grid, faded out toward the bottom */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(4, 80, 132, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4, 80, 132, .055) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 88% at 72% 8%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 88% at 72% 8%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* Ambient colour wash. Two very low-opacity radial fields — warm behind the
   schematic, cool at the left — so the white ground has some depth to it. */
.hero::after {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 76% 26%, rgba(242, 101, 34, .13), transparent 68%),
    radial-gradient(44% 46% at 12% 8%, rgba(4, 80, 132, .11), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
/* Very slow, very small — enough that the light never looks painted on. */
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.8%, 0) scale(1.07); }
}
.hero > .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

/* Status pill — replaces the plain rule-and-caps eyebrow in the hero only. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 17px 8px 14px;
  margin-bottom: 26px;
  border: 1px solid var(--blue-100);
  border-radius: 100px;
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blue-800);
}
.hero-badge .sep { color: var(--blue-200); }

.pulse {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orange);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

.hero h1 { margin-bottom: 26px; }
.hero h1 .u {
  position: relative;
  white-space: nowrap;
}
.hero h1 .u::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .1em;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--orange), #FF9A5C);
  transform-origin: left;
  animation: swipe .8s .35s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes swipe { from { transform: scaleX(0); } }

.hero .lead { max-width: 54ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Full width beneath both hero columns, not inside the copy. Keeping it in the
   column made the text side tall enough to set the row height, which left the
   schematic floating in dead space. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(44px, 5vw, 66px);
  border-top: 1px solid var(--line-2);
}
.hero-stats div {
  padding: 24px 28px 0 0;
}
.hero-stats div + div {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}
.hero-stats b {
  display: block;
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.038em;
  color: var(--blue);
  line-height: 1.1;
}
.hero-stats span {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-700);
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Copy first. A dense technical figure as the opening screen of a phone gives
     the reader a diagram before any context for it. */
  .hero-visual { margin-top: 40px; }
}

/* The framed image is padded generously at desktop widths; on a phone that padding
   eats into an already narrow drawing, so it tightens up. */
@media (max-width: 620px) {
  .schematic { padding: 11px; }
}

@media (max-width: 420px) {
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 520px) {
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats div { padding-right: 0; }
  .hero-stats div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    margin-top: 18px;
  }
}

/* --- schematic frame --- */
/* The panel stretches to the height of the copy column so the two sides of the hero
   share a top and bottom edge; the drawing centres inside whatever height it gets. */
.hero-visual {
  align-self: stretch;
  display: flex;
  position: relative;
  perspective: 1400px;
}

.schematic {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, #FBFCFD 0%, var(--blue-50) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xl);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  will-change: transform;
}
/* main.js writes --tx / --ty from pointer position; absent JS they stay at zero. */
.hero-visual:hover .schematic {
  transition: transform .12s linear;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
}
.schematic-body {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}
/* The illustration carries its own pale desert ground, which sits very close to the
   panel gradient behind it — so it needs a hairline and a little lift to read as a
   mounted plate rather than as a stain on the panel. */
.schematic-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-lg) - 12px);
  border: 1px solid var(--blue-100);
  box-shadow: 0 1px 2px rgba(16, 42, 67, .05), 0 10px 24px -14px rgba(16, 42, 67, .22);
}

/* corner registration ticks */
.schematic i {
  position: absolute;
  width: 11px; height: 11px;
  border: 1.5px solid var(--orange);
  opacity: .75;
}
.schematic i:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.schematic i:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.schematic i:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.schematic i:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.schematic-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.schematic-cap-t { min-width: 0; }

/* The headline number of the whole page, sat in the caption where a figure would
   normally carry its measured result. */
.schematic-cap-m {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex: none;
  letter-spacing: .06em;
}
.schematic-cap-m s { color: var(--slate); text-decoration-thickness: 1px; }
.schematic-cap-m i { color: var(--orange); font-style: normal; }
.schematic-cap-m b { color: var(--blue-900); font-size: .74rem; letter-spacing: .04em; }

/* Stacked before the caption runs out of room and wraps mid-phrase. */
@media (max-width: 1180px) and (min-width: 941px) {
  .schematic-cap { flex-direction: column; align-items: flex-start; gap: 9px; }
}

/* ============================================================
   APPLICATION STRIP
   ============================================================ */
.strip {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: 22px;
}
.strip-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.strip-label {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-700);
  flex: none;
}
/* Continuous marquee. The track holds two identical runs and translates by exactly
   -50%, so the loop is seamless. The second run is aria-hidden — a screen reader
   should not hear the list twice. */
.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee-run {
  display: flex;
  align-items: center;
  gap: 38px;
  padding-right: 38px;
}
.marquee-run li {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: .93rem;
  font-weight: 500;
  color: var(--blue-800);
}
.marquee-run .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
  opacity: .65;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Credibility row, sharing the trust bar with the marquee above it. */
.creds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.creds li { padding-right: 26px; }
.creds li + li {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}
.creds-k {
  display: block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-700);
  margin-bottom: 7px;
}
.creds-v {
  display: block;
  font-size: .94rem;
  font-weight: 500;
  color: var(--blue-900);
  line-height: 1.4;
}
@media (max-width: 780px) {
  .creds { grid-template-columns: 1fr; gap: 16px; }
  .creds li, .creds li + li { padding: 0; border-left: 0; }
  .creds li + li { border-top: 1px solid var(--line); padding-top: 16px; }
}

/* ============================================================
   MID-PAGE CTA
   ============================================================ */
.band-cta { padding-block: clamp(40px, 5vw, 64px); }

.cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 160% at 100% 0%, rgba(242, 101, 34, .09), transparent 62%),
    linear-gradient(180deg, #FFFFFF, var(--blue-50));
  box-shadow: var(--shadow-md);
}
.cta-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 12px; }
.cta-card p { color: var(--slate-700); max-width: 58ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 880px) {
  .cta-card { grid-template-columns: 1fr; }
}

/* ============================================================
   SPLIT — problem / approach
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.split > div { padding: clamp(28px, 3.4vw, 46px); }
.split > div + div { border-left: 1px solid var(--line); }
.split-b { background: var(--blue-50); }

.split h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: 14px 0 16px;
}
.split p + p { margin-top: 14px; }
.split p { color: var(--slate-700); font-size: 1rem; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 100px;
}
.tag-neutral { background: #EDF0F3; color: var(--slate-700); }
.tag-accent  {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(242, 101, 34, .6);
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.step {
  padding: 34px 30px 4px 0;
  position: relative;
}
.step + .step { border-left: 1px solid var(--line); padding-left: 30px; }
.step::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 46px; height: 2px;
  background: var(--orange);
}
.step + .step::before { left: 30px; }
.step-n {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-600);
  background: var(--orange-50);
  border: 1px solid var(--orange-100);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: .96rem; color: var(--slate-700); }

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    margin-top: 8px;
  }
  .step + .step::before { left: 0; }
}

/* White, not paper-2 — it sits on a tinted band, so matching it would flatten the
   panel into the background and leave only a floating outline. */
.loop-diagram {
  margin-top: clamp(44px, 5vw, 64px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.loop-diagram svg { width: 100%; height: auto; }

/* 900 units wide, so on a phone it renders at ~0.35 scale and its labels drop to
   about 3px. The three steps above state the same thing in text, so drop it rather
   than ship an unreadable graphic. */
@media (max-width: 760px) { .loop-diagram { display: none; } }

/* ============================================================
   FEATURE CARDS
   ============================================================ */
/* Separated, elevated cards rather than cells in a 1px-gap grid — the grid version
   reads as a table, which is what made the page feel dated. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1020px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 2.6vw, 34px);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
}
.card h3 { margin-bottom: 9px; }
.card p { font-size: .95rem; color: var(--slate-700); }

/* Icon sits in a tinted chip that warms to orange on hover, rather than floating
   as a bare stroke. */
.ico-chip {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  margin-bottom: 22px;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover .ico-chip,
.app:hover .ico-chip {
  background: var(--orange-50);
  border-color: var(--orange-100);
  transform: scale(1.06) rotate(-3deg);
}

.ico {
  width: 23px; height: 23px;
  color: var(--blue);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color .3s var(--ease);
}
.card:hover .ico, .app:hover .ico { color: var(--orange); }

/* ============================================================
   SPEC TABLE
   ============================================================ */
.spec-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--paper);
}

/* The table has a 660px floor, so on a phone it scrolls. Say so — a silently
   clipped table reads as a broken one. */
.spec-hint {
  display: none;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-700);
}
@media (max-width: 760px) { .spec-hint { display: block; } }
.spec {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  background: var(--paper);
}
.spec th, .spec td {
  padding: 20px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.spec thead th {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--slate-700);
  padding-block: 16px;
  background: var(--paper-2);
}
.spec tbody th {
  font-weight: 500;
  font-size: .95rem;
  color: var(--blue-900);
  width: 25%;
}
.spec td { font-size: .95rem; color: var(--slate-700); width: 37.5%; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.spec .col-ours { background: var(--blue-50); }
.spec thead .col-ours {
  background: var(--blue);
  color: #fff;
}
.spec .col-ours strong {
  display: block;
  color: var(--blue-900);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.spec .col-them strong {
  display: block;
  color: var(--slate-800);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}

/* ============================================================
   APPLICATIONS
   ============================================================ */
/* Six equal cells on a three-column field — five sectors and a closing enquiry tile.
   Every card carries the same short paragraph, so they are sized alike and stretched
   to a common height per row rather than each shrinking to its own copy. */
.apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apps { grid-template-columns: 1fr; } }

.app {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.1vw, 30px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.app:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
}
.app::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--orange), #FF9A5C);
  transition: width .45s var(--ease);
}
.app:hover::after { width: 100%; }

/* Icon and index share a line, which pulls the heading up into the space the stacked
   chip used to leave empty. The index also ties the row back to the Fig. 01 plate. */
.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.app .ico-chip { margin-bottom: 0; }
.app-n {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--slate);
  transition: color .3s var(--ease);
}
.app:hover .app-n { color: var(--orange); }

.app h3 { font-size: 1.05rem; margin-bottom: 8px; }
.app p { font-size: .9rem; color: var(--slate-700); }

/* The enquiry tile completes the grid and gives the section somewhere to go. It is
   tinted rather than papered so it reads as a prompt, not a sixth sector. */
.app-ask {
  background: linear-gradient(168deg, #FBFCFD 0%, var(--blue-50) 100%);
  border-style: dashed;
  border-color: var(--blue-200);
  box-shadow: none;
}
.app-ask:hover { box-shadow: var(--shadow-lg); border-style: solid; }
.app-link {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.app-link span { display: inline-block; transition: transform .3s var(--ease); }
.app-link:hover { color: var(--orange); }
.app-link:hover span { transform: translateX(4px); }

/* ============================================================
   CAPABILITY FIGURES
   Detailed diagrams with fine internal labelling, so they get a wide column and
   alternate sides rather than being shrunk into a three-up card row.
   ============================================================ */
.figstack {
  display: grid;
  gap: clamp(30px, 4.4vw, 64px);
}

.figrow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
}
.figrow:nth-child(even) .figrow-img { order: 2; }

.figrow-img {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.figrow-img img { width: 100%; height: auto; }
.figrow-img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
}

.figrow-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(5, 44, 72, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.figrow-img:hover .figrow-zoom,
.figrow-img:focus-visible .figrow-zoom { opacity: 1; transform: none; }

.figrow-n {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-600);
  background: var(--orange-50);
  border: 1px solid var(--orange-100);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.figrow-body h3 {
  font-size: clamp(1.22rem, 1.9vw, 1.5rem);
  margin-bottom: 14px;
}
.figrow-body p { color: var(--slate-700); font-size: 1rem; }

/* Attribution line. The dot colour separates partner technology from our own at a
   glance, so nobody has to read the label to know which is which. */
.figrow-credit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.figrow-credit .c-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--slate);
}
.figrow-credit.is-own { color: var(--blue); }
.figrow-credit.is-own .c-dot {
  background: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-100);
}

@media (max-width: 900px) {
  .figrow { grid-template-columns: 1fr; gap: 22px; }
  .figrow:nth-child(even) .figrow-img { order: 0; }
}

/* ============================================================
   IMPACT (dark slab)
   ============================================================ */
.band-dark { position: relative; overflow: hidden; }
.band-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(90% 100% at 88% 0%, #000, transparent 70%);
  mask-image: radial-gradient(90% 100% at 88% 0%, #000, transparent 70%);
  pointer-events: none;
}

/* Warm glow bleeding in from the top right, cool from the bottom left. Gives the
   dark slabs a light source instead of a flat fill. */
.band-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 88% -8%, rgba(242, 101, 34, .2), transparent 62%),
    radial-gradient(58% 68% at 4% 108%, rgba(10, 98, 150, .34), transparent 66%);
}
.band-dark > .container { position: relative; z-index: 1; }

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 900px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .figures { grid-template-columns: 1fr; } }

/* Translucent rather than solid blue-900, so the band's glow reads through the
   panel instead of being masked by it. */
.figure {
  background: rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: clamp(28px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  transition: background .3s var(--ease);
}
.figure:hover { background: rgba(255, 255, 255, .07); }
.figure b {
  display: block;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.figure b em { font-style: normal; color: var(--orange); }
.figure span {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7E9DB6;
}
.figure small {
  display: block;
  margin-top: 10px;
  font-size: .86rem;
  color: #9FB6C7;
  line-height: 1.5;
}

/* ============================================================
   TRL ROADMAP
   ============================================================ */
.trl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 58px);
}
.trl-step {
  padding: 30px 26px 0 0;
  border-top: 3px solid var(--line-2);
  position: relative;
}
.trl-step + .trl-step { padding-left: 26px; }
.trl-step::before {
  content: '';
  position: absolute;
  top: -8px; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--line-2);
}
.trl-step + .trl-step::before { left: 26px; }

.trl-step.is-done { border-top-color: var(--blue); }
.trl-step.is-done::before { border-color: var(--blue); background: var(--blue); }
.trl-step.is-now { border-top-color: var(--orange); }
.trl-step.is-now::before {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 5px var(--orange-100);
}

.trl-step .mono { color: var(--slate-700); margin-bottom: 10px; display: block; }
.trl-step.is-now .mono { color: var(--orange-600); }
.trl-step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.trl-step p { font-size: .9rem; color: var(--slate-700); }

@media (max-width: 860px) {
  .trl { grid-template-columns: 1fr; gap: 26px; }
  .trl-step, .trl-step + .trl-step { padding-left: 0; padding-right: 0; }
  .trl-step + .trl-step::before { left: 0; }
}

/* ============================================================
   TEAM
   ============================================================ */
/* 160px floor so phones get two portraits per row — at a 214px floor a single
   column gives each headshot a 4:5 crop the full width of the screen. */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.person figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blue-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.person:hover figure { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.person img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.02);
  transition: filter .4s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}
.person:hover img { filter: grayscale(0); transform: scale(1.03); }
.person h3 { font-size: 1.02rem; margin-bottom: 6px; }
.person .role {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 10px;
}
.person p { font-size: .89rem; color: var(--slate-700); }

/* ============================================================
   FEATURE PHOTO
   ============================================================ */
.photo-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.photo-feature figure {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--blue-900);
}
.photo-feature img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.photo-feature figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 26px 18px;
  background: linear-gradient(to top, rgba(5,44,72,.92), transparent);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #CFE0EC;
}
.photo-feature .body {
  padding: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.photo-feature h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 16px; }
.photo-feature p { color: var(--slate-700); font-size: 1rem; }
.photo-feature p + p { margin-top: 14px; }

@media (max-width: 860px) {
  .photo-feature { grid-template-columns: 1fr; }
  .photo-feature figure { min-height: 280px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--blue-900);
  transition: color .18s ease;
}
.faq-q:hover { color: var(--blue); }
.faq-sign {
  flex: none;
  position: relative;
  width: 16px; height: 16px;
  margin-top: 5px;
}
.faq-sign::before, .faq-sign::after {
  content: '';
  position: absolute;
  background: var(--orange);
  transition: transform .28s cubic-bezier(.22,.8,.3,1);
}
.faq-sign::before { top: 7.25px; left: 0; width: 16px; height: 1.5px; }
.faq-sign::after  { left: 7.25px; top: 0; width: 1.5px; height: 16px; }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: rotate(90deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.22,.8,.3,1);
}
.faq-a > div { overflow: hidden; }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  max-width: 68ch;
  padding-bottom: 28px;
  color: var(--slate-700);
  font-size: .98rem;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(36px, 5vw, 80px);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { margin-top: 34px; border-top: 1px solid var(--line-dark); }
.contact-list a, .contact-list div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: .97rem;
  color: #CFE0EC;
  transition: color .18s ease;
}
.contact-list a:hover { color: #fff; }
.contact-list .ico { width: 20px; height: 20px; margin: 0; color: var(--orange); flex: none; }

.form-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--shadow-lg);
}
.field { margin-bottom: 18px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-700);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .97rem;
  color: var(--ink);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(4, 80, 132, .1);
}
.field input::placeholder, .field textarea::placeholder { color: #A6B2BE; }

.form-note {
  margin-top: 16px;
  font-size: .8rem;
  color: var(--slate-700);
  text-align: center;
}
.form-msg {
  display: none;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  margin-bottom: 20px;
}
.form-msg.ok  { display: block; background: #E9F5EE; color: #1D6B3E; border: 1px solid #BFE2CE; }
.form-msg.err { display: block; background: var(--orange-50); color: var(--orange-600); border: 1px solid var(--orange-100); }

/* ============================================================
   FOOTER
   ============================================================ */
/* One tone darker than the contact band above it, plus a hairline seam — otherwise
   the two dark sections read as a single undifferentiated slab. */
.footer {
  background: var(--blue-950);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #9DB4C6;
  padding-top: clamp(56px, 6vw, 82px);
  font-size: .92rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(44px, 5vw, 62px);
}
@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
.footer img.f-logo { height: 40px; width: auto; margin-bottom: 20px; }
.footer-brand-col p { max-width: 34ch; line-height: 1.6; }
/* A mono micro-label can sit above larger text, but only if contrast carries the
   hierarchy that size is giving up. At #8AA8C0 these headings were both smaller and
   dimmer than their own links, which inverted the relationship. */
.footer h4 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
  color: #EAF2F8;
  margin-bottom: 20px;
}
.footer li + li { margin-top: 11px; }
.footer li a { transition: color .18s ease; }
.footer li a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-block: 26px;
  border-top: 1px solid var(--line-dark);
  font-size: .82rem;
  color: #85A2BA;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Staggered variant for grids. The container stays visible and its children arrive
   in sequence — a whole row fading in at once reads as a page load, one after
   another reads as composition. */
.stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.stagger.is-in > * { opacity: 1; transform: none; }

.stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 280ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 350ms; }
.stagger.is-in > *:nth-child(7) { transition-delay: 420ms; }
.stagger.is-in > *:nth-child(8) { transition-delay: 490ms; }

/* ============================================================
   SKIP LINK & UTILITIES
   ============================================================ */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
}
.skip:focus { left: var(--gutter); }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::after, .pulse::after { animation: none; }
  .hero-visual:hover .schematic { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .stagger > * { opacity: 1; transform: none; }
}