/* ============================================================
   ProxGrid — Shared stylesheet
   Used by every page. Edit here, not in page files.
   ============================================================ */

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

:root {
  --bg:        #f9f9f7;
  --bg-off:    #f2f2ef;
  --bg-dark:   #0b1422;
  --bg-mid:    #0f1c2e;
  --ink:       #111110;
  --ink-mid:   #444440;
  --ink-faint: #99998f;
  --rule:      #ddddd8;
  --rule-dark: rgba(255,255,255,0.07);
  --blue:      #1976b2;
  --blue-d:    #1565a0;
  --blue-light:#4ab8e0;
  --font:      'Manrope', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --dots:      radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
  --dots-dark: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  --dots-size: 24px 24px;
  --r: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 64px; width: 100%; }

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
nav.nav-dark  { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); }
nav.nav-light { background: rgba(249,249,247,0.97); border-bottom: 1px solid var(--rule); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
nav .logo img { height: 28px; transition: filter 0.4s ease; display: block; }
nav.nav-dark  .logo img { filter: brightness(0) invert(1); }
nav.nav-light .logo img { filter: none; }

.nav-links { display: flex; list-style: none; gap: 28px; margin: 0 auto 0 40px; }
.nav-links a {
  text-decoration: none; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s;
  white-space: nowrap; position: relative; padding: 4px 0;
}
nav.nav-dark  .nav-links a { color: rgba(255,255,255,0.5); }
nav.nav-dark  .nav-links a:hover { color: #fff; }
nav.nav-light .nav-links a { color: var(--ink-mid); }
nav.nav-light .nav-links a:hover { color: var(--ink); }

/* Active page indicator */
.nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
}
nav.nav-dark  .nav-links a[aria-current="page"] { color: #fff; }
nav.nav-dark  .nav-links a[aria-current="page"]::after { background: var(--blue-light); }
nav.nav-light .nav-links a[aria-current="page"] { color: var(--ink); }
nav.nav-light .nav-links a[aria-current="page"]::after { background: var(--blue); }

.nav-cta {
  padding: 9px 22px; border-radius: var(--r); text-decoration: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s; white-space: nowrap;
}
nav.nav-dark  .nav-cta { background: var(--blue); color: #fff; border: 1.5px solid var(--blue); }
nav.nav-dark  .nav-cta:hover { background: var(--blue-d); border-color: var(--blue-d); }
nav.nav-light .nav-cta { background: var(--ink); color: var(--bg); border: 1.5px solid var(--ink); }
nav.nav-light .nav-cta:hover { opacity: 0.75; }

/* Hamburger */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-burger span {
  display: block; height: 1.5px; background: currentColor;
  border-radius: 1px; transition: transform 0.3s var(--ease), opacity 0.2s;
}
nav.nav-dark  .nav-burger { color: rgba(255,255,255,0.7); }
nav.nav-light .nav-burger { color: var(--ink); }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(9,16,28,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 80px 40px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.mobile-nav.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a {
  display: block; text-decoration: none; color: rgba(255,255,255,0.55);
  font-size: 2rem; font-weight: 200; letter-spacing: -0.02em;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); width: 100%;
  transition: color 0.2s;
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: #fff; }
.mobile-nav a.mobile-cta {
  margin-top: 32px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-light); border: none; padding: 0;
}

/* ============================================================
   SHARED TYPE / ELEMENTS
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue);
}
.eyebrow::before { content: ''; width: 16px; height: 1.5px; background: currentColor; flex-shrink: 0; }
.eyebrow.light { color: var(--blue-light); }
.eyebrow.faint { color: var(--ink-faint); }
/* Centred eyebrows drop the leading rule */
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

.h2 {
  font-size: clamp(1.85rem, 3vw, 2.7rem); font-weight: 200;
  line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 28px; color: var(--ink);
}
.h2 strong { font-weight: 800; }
.h2.light { color: #fff; }

.lead { font-size: 0.975rem; line-height: 1.86; color: var(--ink-mid); margin-bottom: 18px; }
.lead:last-child { margin-bottom: 0; }
.lead strong { color: var(--ink); font-weight: 600; }
.lead.light { color: rgba(240,244,248,0.55); }
.lead.light strong { color: #fff; }

.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  border-radius: var(--r); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em;
  transition: background 0.2s, opacity 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap; padding: 13px 26px; border: 1.5px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-d); border-color: var(--blue-d); }
.btn-primary::after { content: '→'; transition: transform 0.2s; }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-ghost { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.7); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.65); color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }

/* ============================================================
   HERO (home only)
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--bg-dark);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.4; filter: saturate(0.65) contrast(1.12);
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,20,34,0.65) 0%, rgba(11,20,34,0.05) 35%, rgba(11,20,34,0.96) 100%),
    linear-gradient(105deg, rgba(11,20,34,0.75) 0%, transparent 58%);
}
.hero-grid, .ph-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 55%, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 55%, black 15%, transparent 75%);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.hero-body { position: relative; z-index: 2; padding: 140px 64px 100px; max-width: 1240px; margin: 0 auto; width: 100%; }

.hero-tag {
  display: inline-flex; align-items: stretch; margin-bottom: 36px;
  border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
}
/* Badge and text differ in font size; stretch the badge to the full tag height */
.hero-tag-badge, .hero-tag-text { display: flex; align-items: center; }
.hero-tag-badge {
  padding: 5px 12px; background: var(--blue);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.hero-tag-text {
  padding: 5px 14px; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.55);
}
.hero-h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 300;
  line-height: 1.04; letter-spacing: -0.03em; color: #fff;
  margin-bottom: 30px; max-width: 900px;
}
.hero-h1 em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(105deg, #fff 0%, var(--blue-light) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 300; line-height: 1.82;
  color: rgba(240,244,248,0.58); max-width: 540px; margin-bottom: 52px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hero-foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding-bottom: 28px; }
.hero-foot-inner { display: flex; justify-content: space-between; align-items: flex-end; }
.hero-loc {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240,244,248,0.25); line-height: 1.9;
}
.hero-loc strong { color: var(--blue-light); font-weight: 400; }

.scroll-cue {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,0.22); animation: scrollBob 2.8s ease-in-out infinite;
}
.scroll-wheel { animation: wheelDrop 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes scrollBob {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.25; }
  50%     { transform: translateX(-50%) translateY(6px); opacity: 0.65; }
}
@keyframes wheelDrop {
  0%       { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(5px); opacity: 0; }
  56%,100% { transform: translateY(0); opacity: 0; }
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header {
  position: relative; background: var(--bg-dark); overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 172px 0 88px;
}
.page-header-inner { position: relative; z-index: 2; }
.ph-crumb {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 24px;
}
.ph-crumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s; }
.ph-crumb a:hover { color: var(--blue-light); }
.ph-crumb span { margin: 0 8px; color: rgba(255,255,255,0.18); }
.ph-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300;
  line-height: 1.08; letter-spacing: -0.03em; color: #fff; margin-bottom: 24px; max-width: 800px;
}
.ph-title strong { font-weight: 700; }
.ph-title em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(105deg, #fff 0%, var(--blue-light) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ph-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.08rem); font-weight: 300; line-height: 1.8;
  color: rgba(240,244,248,0.55); max-width: 620px;
}

/* ============================================================
   SPECS BAR
   ============================================================ */
.specs-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
  background-color: var(--bg); background-image: var(--dots); background-size: var(--dots-size);
}
.spec-cell { padding: 36px 48px; border-right: 1px solid var(--rule); }
.spec-cell:last-child { border-right: none; }
.spec-n {
  font-family: var(--mono); font-size: 2.1rem; font-weight: 600;
  letter-spacing: -0.04em; color: var(--ink); margin-bottom: 6px; line-height: 1;
}
.spec-n .unit { font-size: 0.95rem; font-weight: 400; color: var(--ink-faint); margin-left: 2px; }
.spec-l {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.55;
}

/* ============================================================
   SPLIT SECTION (text + image)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.split-text { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.split-media { position: relative; overflow: hidden; min-height: 480px; border-left: 1px solid var(--rule); }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8) contrast(1.05); }
.split.flip .split-text { border-left: 1px solid var(--rule); }
.split.flip .split-media { border-left: none; order: -1; }
.split-media-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,20,34,0.2) 0%, transparent 55%); }
.split-media-caption {
  position: absolute; bottom: 24px; left: 24px;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 1px;
  background: rgba(11,20,34,0.6);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}

/* Bulleted capability list */
/* Three numbered value points (home page application teasers) */
.values { list-style: none; margin-top: 28px; border-top: 1px solid var(--rule); }
.values li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.value-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--blue); padding-top: 4px; }
.values b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.values li span:not(.value-n) { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--ink-mid); }

.caps { margin-top: 36px; }
.cap { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: start; }
.cap:last-child { border-bottom: 1px solid var(--rule); }
.cap-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex-shrink: 0; }
.cap-text { font-size: 0.9rem; line-height: 1.7; color: var(--ink-mid); }
.cap-text strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   CARD GRID
   ============================================================ */
.section-pad { padding: 88px 0; }
.section-off { background: var(--bg-off); border-bottom: 1px solid var(--rule); }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head .h2 { margin-bottom: 16px; }
.section-head .lead { max-width: 640px; margin-left: auto; margin-right: auto; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); }
.card {
  padding: 48px 40px; border-right: 1px solid var(--rule); background: var(--bg);
  display: flex; flex-direction: column; transition: background 0.25s;
}
.card:last-child { border-right: none; }
.card:hover { background: #f5f5f2; }
.card-icon { width: 46px; height: 46px; margin-bottom: 24px; color: var(--blue); }
.card-icon svg { width: 100%; height: 100%; }
.card-type {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.card-desc { font-size: 0.9rem; line-height: 1.78; color: var(--ink-mid); flex: 1; }
.card-link {
  margin-top: 24px; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s;
}
.card-link::after { content: '→'; }
.card-link:hover { gap: 10px; }

/* ============================================================
   PROCESS
   ============================================================ */
.process-section { background: var(--bg-dark); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 96px 0; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-dark); }
.process-step { padding: 52px 44px; border-right: 1px solid var(--rule-dark); position: relative; }
.process-step:last-child { border-right: none; }
.process-step-num {
  font-family: var(--mono); font-size: 4rem; font-weight: 600; letter-spacing: -0.05em;
  color: rgba(255,255,255,0.04); line-height: 1; margin-bottom: 28px; user-select: none;
}
.process-step-eyebrow {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.process-step-eyebrow::before { content: ''; display: block; width: 16px; height: 1px; background: currentColor; }
.process-step-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.process-step-desc { font-size: 0.9rem; line-height: 1.78; color: rgba(240,244,248,0.5); }
.process-connector {
  position: absolute; top: 52px; right: -12px; z-index: 1;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-dark); color: rgba(255,255,255,0.15);
  font-family: var(--mono); font-size: 1rem;
}

/* ============================================================
   PRODUCT / SPECS PANEL
   ============================================================ */
.product-section { background: var(--bg-dark); border-bottom: 1px solid rgba(255,255,255,0.05); }
.product-inner { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 640px; }
.product-visual {
  position: relative; overflow: hidden; background: var(--bg-mid);
  border-right: 1px solid var(--rule-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 48px; gap: 24px;
}
.product-visual-dots {
  position: absolute; inset: 0; background-image: var(--dots-dark);
  background-size: var(--dots-size); pointer-events: none; opacity: 0.6;
}
.drone-blueprint { position: relative; z-index: 1; width: 100%; max-width: 380px; }
.drone-blueprint svg { width: 100%; height: auto; display: block; }
.product-visual-label { position: relative; z-index: 1; text-align: center; }
.product-model-name {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 4px;
}
.product-render-note {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.14); font-style: italic;
}
.product-specs-panel { padding: 72px 60px; display: flex; flex-direction: column; justify-content: center; }

.specs-table { margin-top: 36px; border-top: 1px solid var(--rule-dark); }
.spec-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border-bottom: 1px solid var(--rule-dark); padding: 13px 0; align-items: baseline;
}
.spec-key {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
}
.spec-val { font-family: var(--mono); font-size: 0.82rem; color: rgba(255,255,255,0.82); font-weight: 500; }
.spec-val.soft { color: rgba(255,255,255,0.5); }
/* Placeholder value: dimmed unit + TBC chip */
.spec-val.ph { color: rgba(255,255,255,0.18); display: flex; align-items: center; gap: 8px; }
.spec-val.ph::after {
  content: 'TBC'; font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 5px; border-radius: 1px; flex-shrink: 0;
}
.specs-note {
  margin-top: 24px; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.18); text-transform: uppercase;
}
.specs-note a { color: var(--blue-light); text-decoration: none; }
.specs-note a:hover { text-decoration: underline; }

/* Full-width spec table (product page) */
.spec-block { border-bottom: 1px solid var(--rule); padding: 72px 0; }
.spec-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 64px; margin-top: 40px; }
.spec-group { }
.spec-group-title {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 4px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.spec-line {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.spec-line-key { font-size: 0.88rem; color: var(--ink-mid); }
.spec-line-val { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); font-weight: 500; text-align: right; }
.spec-line-val.ph { color: var(--ink-faint); display: inline-flex; align-items: center; gap: 8px; }
.spec-line-val.ph::after {
  content: 'TBC'; font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--rule); padding: 2px 5px; border-radius: 1px;
}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); margin-top: 48px; }
.principle { padding: 44px 40px 52px; border-right: 1px solid var(--rule); background: var(--bg); }
.principle:last-child { border-right: none; }
.principle-num { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--blue); display: block; margin-bottom: 20px; }
.principle-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.principle-desc { font-size: 0.9rem; line-height: 1.78; color: var(--ink-mid); }

/* ============================================================
   STATIC BAND (was video)
   ============================================================ */
.band { position: relative; min-height: 380px; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--bg-dark); }
.band-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) saturate(0.7) contrast(1.12); }
.band-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,34,0.35) 0%, rgba(11,20,34,0.75) 100%); }
.band-body {
  position: relative; z-index: 2; min-height: 380px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 64px;
}
.band-quote {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem); font-weight: 300;
  color: #fff; line-height: 1.5; letter-spacing: -0.015em; max-width: 720px;
}
.band-quote strong { font-weight: 700; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { background: var(--bg-dark); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 72px 0; position: relative; overflow: hidden; }
.cta-strip-dots { position: absolute; inset: 0; background-image: var(--dots-dark); background-size: var(--dots-size); pointer-events: none; opacity: 0.5; }
.cta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cta-text { flex: 1; min-width: 280px; }
.cta-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; color: #fff; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 12px; }
.cta-title strong { font-weight: 700; }
.cta-sub { font-size: 0.95rem; line-height: 1.7; color: rgba(240,244,248,0.5); max-width: 520px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section {
  display: grid; grid-template-columns: 1fr 1.5fr; border-bottom: 1px solid var(--rule);
  background-color: var(--bg); background-image: var(--dots); background-size: var(--dots-size);
}
.contact-left { padding: 80px 64px; border-right: 1px solid var(--rule); }
.contact-right { padding: 80px 64px; }
.contact-meta { margin-top: 36px; }
.contact-meta-row {
  padding: 18px 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: start;
}
.contact-meta-row:last-child { border-bottom: 1px solid var(--rule); }
.cm-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.cm-val { font-size: 0.92rem; color: var(--ink); line-height: 1.6; }
.cm-val a { color: var(--blue); text-decoration: none; }
.cm-val a:hover { text-decoration: underline; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.form-field input, .form-field select, .form-field textarea {
  padding: 11px 14px; background: #edf0f5; border: none; border-bottom: 2px solid #cdd2dd;
  border-radius: 4px 4px 0 0; color: var(--ink); font-family: var(--font); font-size: 0.93rem;
  outline: none; transition: background 0.2s, border-color 0.2s;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); font-size: 0.88rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: #e4e9f0; border-bottom-color: var(--blue); }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field select {
  cursor: pointer; appearance: none; background-color: #edf0f5;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%231976b2' d='M6 7L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.submit-btn {
  align-self: flex-start; margin-top: 4px; padding: 13px 30px;
  background: var(--ink); color: var(--bg); border: none; border-radius: var(--r);
  font-family: var(--font); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s;
}
.submit-btn::after { content: '→'; transition: transform 0.2s; }
.submit-btn:hover { opacity: 0.72; }
.submit-btn:hover::after { transform: translateX(4px); }
.submit-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.form-field label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.8; }

/* ---- Brief card (front: brief, back: call me) ---- */
.brief { perspective: 1800px; max-width: 640px; }
.brief-inner {
  display: grid; transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}
.brief.flipped .brief-inner { transform: rotateY(180deg); }
.brief-face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px; padding: 32px 36px 36px; min-height: 560px;
  display: flex; flex-direction: column;
}
.brief-front {
  background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -30px rgba(11,20,34,0.25), 0 2px 6px rgba(11,20,34,0.04);
}
.brief-back-face {
  transform: rotateY(180deg); color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, #16304d 0%, var(--bg-dark) 60%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px -30px rgba(11,20,34,0.55);
}
.brief-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.brief-kicker { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.brief-back-face .brief-kicker { color: var(--blue-light); }
.brief-count { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }
.brief-back-face .brief-count { color: rgba(255,255,255,0.4); }

.brief-call {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--blue); color: #fff; font-family: var(--font); font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 0 0 0 rgba(25,118,178,0.45); animation: call-pulse 2.6s ease-out 1.5s 3;
  transition: background 0.2s, transform 0.2s;
}
.brief-call:hover { background: var(--blue-d); transform: translateY(-1px); }
.brief-top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
a.brief-call { text-decoration: none; }
.brief-call.outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); animation: none; }
.brief-call.outline:hover { background: #eaf3fa; }
.call-alt { display: block; margin-top: 14px; text-align: center; font-size: 0.82rem; color: rgba(240,244,248,0.65); text-decoration: none; }
.call-alt:hover { color: #fff; text-decoration: underline; }
.brief-call.ghost { background: transparent; color: rgba(255,255,255,0.6); box-shadow: none; animation: none; padding: 10px 0; }
.brief-call.ghost:hover { color: #fff; background: transparent; }
@keyframes call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(25,118,178,0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(25,118,178,0); }
  100% { box-shadow: 0 0 0 0 rgba(25,118,178,0); }
}

.brief-bar { height: 3px; background: var(--bg-off); border-radius: 2px; overflow: hidden; margin-bottom: 30px; }
.brief-bar span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transition: width 0.5s var(--ease); }

#briefForm, #callForm { display: flex; flex-direction: column; flex: 1; }
.brief-step { border: none; display: none; flex-direction: column; flex: 1; }
.brief-step.is-active { display: flex; animation: step-in 0.45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.brief-q { font-size: 1.45rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin-bottom: 6px; padding: 0; }
.brief-back-face .brief-q { color: #fff; }
.brief-hint { font-size: 0.88rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: 20px; }
.brief-back-face .brief-hint { color: rgba(240,244,248,0.6); }
.brief-sub { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 26px 0 12px; }
.brief-step legend + .chips, .brief-step legend + .brief-summary { margin-top: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: block; padding: 9px 15px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg); font-size: 0.85rem; color: var(--ink-mid);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}
.chips-lg .chip span { border-radius: 6px; padding: 14px 16px; height: 100%; }
.chip span b { display: block; font-weight: 700; color: var(--ink); font-size: 0.9rem; margin-bottom: 3px; }
.chip span i { display: block; font-style: normal; font-size: 0.78rem; color: var(--ink-faint); }
.chip:hover span { border-color: #b9c3cf; transform: translateY(-1px); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.chip input:checked + span { border-color: var(--blue); background: #eaf3fa; color: var(--blue-d); }
.chip input:checked + span b { color: var(--blue-d); }

.height-row { display: flex; align-items: center; gap: 18px; }
.height-row input[type=range] {
  flex: 1; height: 4px; appearance: none; -webkit-appearance: none; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, var(--blue) var(--fill, 30%), var(--rule) var(--fill, 30%));
}
.height-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.height-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--blue);
}
.height-row output { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--blue-d); min-width: 72px; text-align: right; }

.brief-summary { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.brief-summary li {
  font-size: 0.78rem; padding: 6px 11px; border-radius: 4px; background: var(--bg-off); color: var(--ink);
}
.brief-summary li span { color: var(--ink-faint); margin-right: 6px; }
.brief-back-face .brief-summary li { background: rgba(255,255,255,0.07); color: #fff; }
.brief-back-face .brief-summary li span { color: rgba(255,255,255,0.45); }
.brief-step[data-step="you"] .form-row, .brief-step[data-step="you"] > .form-field,
#callForm .form-row, #callForm > .form-field { margin-bottom: 14px; }
.brief-step .form-field textarea { min-height: 80px; }

.brief-back-face .form-field label { color: rgba(255,255,255,0.45); }
.brief-back-face .form-field input, .brief-back-face .form-field select {
  background-color: rgba(255,255,255,0.06); border-bottom-color: rgba(255,255,255,0.18); color: #fff;
}
.brief-back-face .form-field input:focus, .brief-back-face .form-field select:focus {
  background-color: rgba(255,255,255,0.1); border-bottom-color: var(--blue-light);
}
.brief-back-face .form-field select option { color: var(--ink); }

.brief-error { font-size: 0.82rem; color: #9b1c1c; margin: 14px 0 0; }
.brief-back-face .brief-error { color: #ff9b9b; }
.brief-nav { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 28px; }
.brief-nav .submit-btn { margin: 0 0 0 auto; align-self: auto; }
.brief-back {
  background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); padding: 8px 0;
}
.brief-back:hover { color: var(--ink); }

.call-btn {
  margin-top: auto; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(105deg, var(--blue) 0%, var(--blue-light) 100%); color: #fff;
  font-family: var(--font); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.call-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(74,184,224,0.6); }
.call-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#callForm > .form-field { margin-bottom: 28px; }

.brief-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.brief-done[hidden] { display: none; }
.brief-tick {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #e5f4ec; color: #1a7a4a; margin-bottom: 20px; animation: tick-pop 0.5s var(--ease);
}
.brief-back-face .brief-tick { background: rgba(74,184,224,0.14); color: var(--blue-light); }
@keyframes tick-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.brief-ref { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); }

@media (prefers-reduced-motion: reduce) {
  .brief-inner { transition: none; }
  .brief.flipped .brief-inner { transform: none; }
  .brief-back-face { transform: none; }
  .brief.flipped .brief-front, .brief:not(.flipped) .brief-back-face { visibility: hidden; }
}
@media (max-width: 600px) {
  .brief-face { padding: 24px 20px 28px; min-height: 0; }
  .chips-lg { grid-template-columns: 1fr; }
  .brief-q { font-size: 1.25rem; }
}

.form-status { font-size: 0.85rem; line-height: 1.5; font-family: var(--mono); }
.form-status.success { color: #1a7a4a; padding: 10px 0; }
.form-status.error   { color: #9b1c1c; padding: 10px 0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--bg-dark); border-top: 1px solid rgba(255,255,255,0.05); }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
  padding: 64px 0 48px; border-bottom: 1px solid var(--rule-dark);
}
.footer-brand img { height: 26px; filter: brightness(0) invert(1); opacity: 0.55; display: block; margin-bottom: 20px; }
.footer-tagline { font-size: 0.88rem; line-height: 1.75; color: rgba(240,244,248,0.35); max-width: 320px; }
.footer-col-title {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(240,244,248,0.28); margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: rgba(240,244,248,0.5); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0 32px; gap: 20px; flex-wrap: wrap;
}
.footer-legal { font-family: var(--mono); font-size: 0.66rem; color: rgba(240,244,248,0.22); letter-spacing: 0.04em; }
.footer-social { display: flex; gap: 20px; align-items: center; }
.footer-social a { color: rgba(240,244,248,0.28); transition: color 0.2s; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.footer-social a:hover { color: rgba(240,244,248,0.75); }
.footer-social .fi-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* Accessibility: honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .scroll-cue { display: none; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue-light); outline-offset: 3px;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 300;
  background: var(--blue); color: #fff; padding: 10px 18px; border-radius: var(--r);
  font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   PRODUCT RENDERS (SPD25 page)
   ============================================================ */
.ph-render { margin: 64px auto 0; max-width: 1100px; }
.ph-render img { width: 100%; height: auto; display: block; filter: drop-shadow(0 32px 40px rgba(0,0,0,0.5)); }
/* Split hero: render bleeds off the left edge, text on the right */
.ph-split { min-height: 640px; display: flex; align-items: center; }
.ph-split .page-header-inner { width: 100%; }
/* Render's right edge stays at 44vw; the text column never starts left of ~48vw */
.ph-split-text { margin-left: auto; max-width: min(560px, 48vw); }
.ph-split .ph-title { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.ph-split-render {
  position: absolute; z-index: 1; left: -16vw; top: 54%; transform: translateY(-50%);
  width: 60vw; pointer-events: none;
}
.ph-split-render img { width: 100%; height: auto; display: block; filter: drop-shadow(0 32px 40px rgba(0,0,0,0.5)); }
/* Light studio hero: background is the render's own backdrop colour, and
   the image edges are masked out so it blends at any width. */
.ph-light {
  background: radial-gradient(ellipse 70% 80% at 30% 50%, #e4e4e4 0%, #d4d4d4 70%);
  border-bottom: none;
}
.ph-light .ph-split-render {
  left: -15vw; width: 68vw;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to right, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to right, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ph-light .ph-split-render img { filter: none; }
.ph-light { min-height: max(700px, 78vh); }
.ph-light .ph-split-text { max-width: min(540px, 44vw); }
/* Same grid as the dark headers, in grey, behind the render. The render's
   backdrop is opaque, so the grid fades out before it reaches the drone
   instead of stopping in a hard box. The second mask layer keeps it out
   of the transparent menu bar (64px) and fades it in just below. */
.ph-light .ph-grid {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 62%), linear-gradient(to bottom, transparent 64px, #000 150px);
          mask-image: linear-gradient(to right, transparent 38%, #000 62%), linear-gradient(to bottom, transparent 64px, #000 150px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  background-image:
    linear-gradient(rgba(0,0,0,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.055) 1px, transparent 1px);
}
.ph-light .ph-crumb { color: rgba(17,17,16,0.4); }
.ph-light .ph-crumb a { color: rgba(17,17,16,0.55); }
.ph-light .ph-crumb a:hover { color: var(--blue); }
.ph-light .ph-crumb span { color: rgba(17,17,16,0.25); }
.ph-light .ph-title { color: var(--ink); }
.ph-light .ph-title em { background: linear-gradient(105deg, var(--ink) 0%, var(--blue) 75%); -webkit-background-clip: text; background-clip: text; }
.ph-light .ph-sub { color: var(--ink-mid); }
/* The small line above a hero headline doubles as the page's h1, so it
   carries the search phrase while the big line stays punchy */
h1.hero-tag-text { font-weight: 400; }
.ph-kicker {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 18px;
}
.ph-light .ph-kicker { color: var(--blue); }
.hero-tag.light { border-color: rgba(17,17,16,0.14); margin-bottom: 28px; background: rgba(249,249,247,0.85); }
.hero-tag.light .hero-tag-text { color: var(--ink-mid); }
a.hero-tag { text-decoration: none; transition: border-color 0.2s; }
a.hero-tag:hover { border-color: var(--blue); }
a.hero-tag:hover .hero-tag-text { color: var(--blue); }
.ph-light .hero-ctas { margin-top: 36px; }

/* Interior-page variant of the home video hero (powerline) */
.hero.hero-page { min-height: 0; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.hero.hero-page .hero-body { padding: 172px 64px 96px; }
.hero.hero-page .hero-overlay {
  background:
    linear-gradient(180deg, rgba(11,20,34,0.7) 0%, rgba(11,20,34,0.25) 45%, rgba(11,20,34,0.92) 100%),
    linear-gradient(105deg, rgba(11,20,34,0.8) 0%, transparent 62%);
}

/* Mirror of the light hero (SPD25 page): text left, render bleeding off
   the right edge, everything else flipped to match */
.ph-light.ph-right { background: radial-gradient(ellipse 70% 80% at 70% 50%, #e4e4e4 0%, #d4d4d4 70%); }
.ph-light.ph-right .ph-split-text { margin-left: 0; margin-right: auto; }
.ph-light.ph-right .ph-split-render {
  left: auto; right: -10vw; width: 64vw;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to left, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to left, #000 88%, transparent 100%);
}
.ph-light.ph-right .ph-grid {
  -webkit-mask-image: linear-gradient(to left, transparent 38%, #000 62%), linear-gradient(to bottom, transparent 64px, #000 150px);
          mask-image: linear-gradient(to left, transparent 38%, #000 62%), linear-gradient(to bottom, transparent 64px, #000 150px);
}
/* SPD25 hero: the spraying render fills the header; the drone sits right,
   the spray runs behind the text. A soft wash on the left keeps the copy
   readable without hiding the water. */
.ph-water { background: #d0d0d0; min-height: max(700px, 82vh); }
.ph-water-bg { position: absolute; inset: 0; z-index: 0; }
/* Sized by width, not height, so the drone keeps its scale and the nozzle
   stays clear of the text at every width. Spare height above and below is
   the same studio grey, with the image edges faded into it. */
.ph-water-bg { overflow: hidden; }
.ph-water-bg img {
  position: absolute; right: -6%; top: 50%; transform: translateY(-46%);
  width: 108%; max-width: none; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0%, #000 10%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0%, #000 10%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ph-water .ph-split-text { max-width: min(540px, 40vw); }
/* Grid sits over the backdrop (the render is opaque) but fades out well
   before the drone, so it frames the text and spray without crossing it */
.ph-light.ph-right.ph-water .ph-grid {
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 55%), linear-gradient(to bottom, transparent 64px, #000 150px);
          mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 55%), linear-gradient(to bottom, transparent 64px, #000 150px);
}
.ph-water .page-header-inner { z-index: 2; }
.ph-water-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(214,214,214,0.3) 0%, rgba(214,214,214,0.15) 34%, rgba(214,214,214,0) 50%);
}
@media (max-width: 768px) {
  .ph-water { padding-bottom: 0; }
  .ph-water .ph-split-text { max-width: none; }
  .ph-light.ph-right.ph-water .ph-grid {
    -webkit-mask-image: linear-gradient(to bottom, transparent 64px, #000 130px, #000 45%, transparent 62%);
            mask-image: linear-gradient(to bottom, transparent 64px, #000 130px, #000 45%, transparent 62%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .ph-water-bg { position: relative; inset: auto; height: 260px; margin-top: 32px; }
  .ph-water-bg img { position: static; transform: none; width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; -webkit-mask-image: none; mask-image: none; }
  .ph-water-bg::after { display: none; }
}

.ph-tasks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ph-tasks li {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mid); padding: 7px 12px; border: 1px solid rgba(17,17,16,0.12); border-radius: 999px;
  background: rgba(249,249,247,0.85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ph-tasks li:first-child { border-color: var(--blue); color: #fff; background: var(--blue); }
.ph-light .hero-ctas .btn-outline { background: rgba(249,249,247,0.85); }
@media (max-width: 768px) {
  .ph-light.ph-right .ph-split-render { right: auto; left: -14vw; width: 128vw; }
}

/* Close-up render filling a split panel edge to edge, no overlay or fade */
.split-media.fill-render { background: #d4d4d4; }
.split-media.fill-render img { width: 100%; height: 100%; object-fit: cover; object-position: 88% 62%; filter: none; }
/* Caption up top so it never covers the lowest mounting point */
.split-media.fill-render .split-media-caption { top: 24px; bottom: auto; }

/* Wide studio render in a split panel: the whole frame (drone and spray)
   stays visible; spare height is the render's own grey, edges faded in */
.split-media.spray-render { background: #d4d4d4; display: flex; align-items: center; }
.split-media.spray-render img {
  width: 100%; height: auto; object-fit: contain; filter: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* SPD25 payload interface: mounting + PCP spec groups */
.iface { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 32px; border: 1px solid var(--rule); background: var(--bg); }
.iface-group { padding: 18px 20px; border-right: 1px solid var(--rule); }
.iface-group:last-child { border-right: none; }
.iface-title { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.iface-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 0.82rem; }
.iface-row span:first-child { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.iface-row span:last-child { color: var(--ink-mid); text-align: right; }
.iface-note { margin-top: 12px; font-size: 0.78rem; color: var(--ink-faint); }
@media (max-width: 1240px) {
  .iface { grid-template-columns: 1fr; }
  .iface-group { border-right: none; border-bottom: 1px solid var(--rule); }
  .iface-group:last-child { border-bottom: none; }
}

/* SPD25 ground setup: key supply limits under the three steps */
.supply-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule-dark); border-top: none;
}
.supply-specs > div { padding: 24px 28px; border-right: 1px solid var(--rule-dark); }
.supply-specs > div:last-child { border-right: none; }
.supply-specs dt {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 8px;
}
.supply-specs dd { font-family: var(--mono); font-size: 1rem; color: #fff; }
.supply-specs dd span { color: rgba(255,255,255,0.4); font-size: 0.82rem; }
@media (max-width: 960px) {
  .supply-specs { grid-template-columns: 1fr 1fr; }
  .supply-specs > div:nth-child(2n) { border-right: none; }
  .supply-specs > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dark); }
}

/* ---- Home page: credibility and comparison sections ---- */

/* Light logo strip under the hero; the white logos are inked dark */
.partners.light { background: var(--bg); border-top: none; border-bottom: 1px solid var(--rule); padding: 40px 0 44px; }
.partners.light .eyebrow { margin-bottom: 28px; }
.partners.light .partners-list img { filter: brightness(0); opacity: 0.45; height: 36px; }
.partners.light .partners-list img.tall { height: 54px; }
.partners.light .partners-list img:hover { opacity: 0.8; }

/* Today vs SPD25 */
.compare { border: 1px solid var(--rule); background: var(--bg); }
.compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; border-top: 1px solid var(--rule); }
.compare-row:first-child { border-top: none; }
.compare-row > div { padding: 18px 22px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-mid); }
.compare-row > div:first-child { font-weight: 600; color: var(--ink); }
.compare-head > div { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); padding-top: 16px; padding-bottom: 16px; }
.compare-row .is-us { background: #eaf3fa; color: var(--ink); font-weight: 600; }
.compare-head .is-us { color: var(--blue); }
@media (max-width: 860px) {
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; padding: 6px 0; }
  .compare-row > div { padding: 6px 18px; }
  .compare-row > div:first-child { padding-top: 14px; }
  .compare-row > div:nth-child(2)::before { content: 'Rope access: '; color: var(--ink-faint); }
  .compare-row > div:nth-child(3)::before { content: 'Scaffold or lift: '; color: var(--ink-faint); }
  .compare-row > div:nth-child(4) { margin: 6px 12px 12px; border-radius: 4px; }
  .compare-row > div:nth-child(4)::before { content: 'SPD25: '; color: var(--blue); }
}

/* Team strip */
.team-strip { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.team-badge {
  display: inline-block; margin-top: 20px; padding: 6px 12px; border: 1px solid var(--blue); border-radius: 999px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
}
.team-people { display: grid; gap: 16px; }
.person { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start; padding: 24px; background: var(--bg); border: 1px solid var(--rule); }
.person-photo {
  width: 76px; height: 76px; border-radius: 50%; background: var(--bg-dark) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1rem; letter-spacing: 0.08em; color: var(--blue-light);
}
img.person-photo { object-fit: cover; display: block; }
.person-role a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.person-role a:hover { color: var(--ink); }
.person-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.person-role { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 4px 0 10px; }
.person-bio { font-size: 0.9rem; line-height: 1.65; color: var(--ink-mid); }
@media (max-width: 960px) { .team-strip { grid-template-columns: 1fr; gap: 36px; } }
/* About page: larger founder cards side by side */
.about-people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.person-lg { grid-template-columns: 112px 1fr; padding: 32px; gap: 28px; }
.person-lg .person-photo { width: 112px; height: 112px; font-size: 1.3rem; }
.person-lg .person-bio + .person-bio { margin-top: 10px; }
@media (max-width: 960px) { .about-people { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .person, .person-lg { grid-template-columns: 1fr; } }

/* About: where we're based */
.base-block { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: center; max-width: 1000px; margin: 0 auto; }
.base-logo {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: var(--bg-dark); border-radius: 6px; padding: 56px; transition: transform 0.2s;
}
.base-logo:hover { transform: translateY(-2px); }
.base-logo img { width: 100%; height: auto; display: block; }
.base-block .lead + .lead { margin-top: 14px; }
.base-address { margin-top: 20px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.base-address a { color: var(--blue); }
@media (max-width: 860px) {
  .base-block { grid-template-columns: 1fr; gap: 32px; }
  .base-logo { max-width: 200px; padding: 40px; }
}

/* Long-form text pages (privacy) */
.prose { max-width: 760px; }
.prose-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 32px; }
.prose h2 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 40px 0 12px; }
.prose p, .prose li { font-size: 0.98rem; line-height: 1.75; color: var(--ink-mid); }
.prose p + p { margin-top: 12px; }
.prose ul { margin: 12px 0 0 20px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--blue); }
.prose code { font-family: var(--mono); font-size: 0.88em; }
.footer-legal a { color: inherit; }

/* "In development" marker on cards */
.card-chip {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 0.56rem; letter-spacing: 0.12em; color: var(--ink-mid); vertical-align: 1px;
}

/* News cards are whole-card links */
.news-card { text-decoration: none; }
.news-card .card-title { font-size: 1.05rem; line-height: 1.4; }
.news-card .card-link { margin-top: auto; padding-top: 24px; }
.news-card:hover .card-title { color: var(--blue); }

.process-cta { text-align: center; margin-top: 40px; }

/* Partners: logos scroll in a continuous loop */
.partners { background: var(--bg-dark); padding: 64px 0 72px; border-top: 1px solid rgba(255,255,255,0.06); }
.partners .container { text-align: center; }
.partners .eyebrow { margin-bottom: 40px; }
.partners-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.partners-track { display: flex; width: max-content; animation: partners-scroll 32s linear infinite; }
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partners-list { display: flex; align-items: center; list-style: none; gap: 96px; padding-right: 96px; }
.partners-list img { height: 44px; width: auto; display: block; opacity: 0.55; transition: opacity 0.3s; }
.partners-list img.tall { height: 64px; }
.partners-list img:hover { opacity: 1; }
@keyframes partners-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .partners-list[aria-hidden="true"] { display: none; }
  .partners-list { flex-wrap: wrap; justify-content: center; row-gap: 32px; padding: 0 24px; }
}

/* Home: the light hero fills the first screen, like the old video hero */
.ph-light.ph-full { min-height: 100vh; min-height: 100svh; }

/* Solid black logo over the light hero, for contrast against the render */
nav.nav-clear .logo img { filter: brightness(0); }
nav.nav-light.nav-clear { background: transparent; border-bottom-color: rgba(17,17,16,0.08); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* "At a glance" tile filled edge to edge by a render with its own studio
   backdrop; the edge colour matches the backdrop so any letterboxing blends */
.product-visual.photo { padding: 0; background: #0c1524; }
/* Whole image always visible (drone and controller); spare height above and
   below is the backdrop's own navy, with the image edges faded into it */
.product-visual.photo img {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
}
@media (max-width: 1100px) {
  .product-visual.photo { min-height: 0; aspect-ratio: 4 / 3; }
  .product-visual.photo img { -webkit-mask-image: none; mask-image: none; }
}

/* "At a glance" tile: render fills most of the tile, no caption */
.product-visual.fill { padding: 40px 0; }
.product-visual.fill .product-render { max-width: none; padding: 0 24px; margin: 0; }
.product-render { position: relative; z-index: 1; width: 100%; max-width: 600px; padding: 0 28px; margin-bottom: 28px; }
.product-render img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 32px rgba(0,0,0,0.5)); }

.card-media {
  margin: -48px -40px 32px; aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--rule); background: var(--bg);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.card:hover .card-media img { transform: scale(1.03); }

.fold-compare {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); background: var(--bg);
  /* Breaks out of the 1240px container so the top views can be shown large */
  --fold-w: min(1440px, calc(100vw - 48px));
  width: var(--fold-w); margin-left: calc((100% - var(--fold-w)) / 2);
}
.fold-pane { position: relative; border-right: 1px solid var(--rule); }
.fold-pane:last-child { border-right: none; }
.fold-pane img { width: 100%; height: auto; display: block; }
/* Image sits inset in the pane so the drone and its dimensions have room */
.fold-stage { position: relative; margin: 64px 9% 64px; }
.dim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dim-line { fill: none; stroke: var(--ink-faint); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.5; }
.dim-plus { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.dim-text { font-family: var(--mono); font-size: 24px; letter-spacing: 0.06em; fill: var(--ink-faint); }
@media (max-width: 640px) {
  .fold-compare { grid-template-columns: 1fr; }
  .fold-pane { border-right: none; border-bottom: 1px solid var(--rule); }
  .fold-pane:last-child { border-bottom: none; }
  .fold-stage { margin: 56px 12% 52px; }
}
.fold-note {
  position: absolute; bottom: 20px; left: 24px; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.fold-label {
  position: absolute; top: 24px; left: 24px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}

.ph-photo { position: relative; margin-top: 64px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.ph-photo img { width: 100%; height: auto; display: block; filter: saturate(0.85) contrast(1.03); }
.ph-photo .split-media-caption { bottom: 20px; left: 20px; }

.split-media.plain { background: var(--bg-off); display: flex; align-items: center; justify-content: center; }
.split-media.plain img { height: auto; object-fit: contain; filter: none; }
/* Matches the edge falloff of the grey studio renders so the image has no visible box */
.split-media.studio { background: linear-gradient(90deg, #d4d4d4 0%, #e2e2e2 50%, #d4d4d4 100%); }
.split-media.studio img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

@media (max-width: 1100px) {
  .product-inner { grid-template-columns: 1fr; }
  .product-visual { min-height: 380px; border-right: none; border-bottom: 1px solid var(--rule-dark); padding: 56px 32px; }
  .product-specs-panel { padding: 56px 48px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle { border-right: none; border-bottom: 1px solid var(--rule); }
  .principle:last-child { border-bottom: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split-media { border-left: none; border-top: 1px solid var(--rule); min-height: 300px; }
  .split.flip .split-text { border-left: none; }
  /* Stack text above image on every split, flipped or not */
  .split.flip .split-media { order: 1; }
  .card-grid { grid-template-columns: 1fr; }
  .card { border-right: none; border-bottom: 1px solid var(--rule); }
  .card:last-child { border-bottom: none; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--rule-dark); }
  .process-step:last-child { border-bottom: none; }
  .process-connector { display: none; }
  .spec-columns { grid-template-columns: 1fr; gap: 0; }
  .spec-group + .spec-group { margin-top: 40px; }
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-nav { display: flex; }

  .hero-body { padding: 100px 24px 88px; }
  .hero-foot { padding-bottom: 20px; }
  .page-header { padding: 130px 0 64px; }

  .specs-bar { grid-template-columns: 1fr 1fr; }
  .spec-cell { padding: 28px 24px; }
  .spec-cell:nth-child(2) { border-right: none; }
  .spec-cell:nth-child(3) { border-right: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  .spec-cell:nth-child(4) { border-right: none; border-top: 1px solid var(--rule); }

  .split-text { padding: 48px 24px; }
  .section-pad { padding: 56px 0; }
  .section-head { margin-bottom: 40px; }
  .card { padding: 36px 24px; }
  .card-media { margin: -36px -24px 28px; }
  .ph-render { margin-top: 40px; }
  .ph-split { display: flex; flex-direction: column-reverse; min-height: 0; }
  .ph-split-render { position: relative; left: -18vw; top: auto; transform: none; width: 118vw; margin-top: 24px; }
  .ph-split-text { max-width: none; }
  .ph-light { min-height: 0; }
  .hero.hero-page .hero-body { padding: 130px 24px 64px; }
  .partners-list { gap: 56px; padding-right: 56px; }
  .partners-list img { height: 32px; }
  .partners-list img.tall { height: 48px; }
  .ph-light .ph-split-text { max-width: none; }
  .ph-light .ph-split-render { left: -14vw; width: 128vw; }
  .fold-label { top: 14px; left: 14px; }
  .process-section { padding: 64px 0; }
  .process-step { padding: 36px 24px; }
  .principle { padding: 36px 24px 40px; }
  .product-specs-panel { padding: 48px 24px; }
  .spec-block { padding: 48px 0; }
  .band-body { padding: 56px 24px; }
  .cta-strip { padding: 56px 0; }
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 28px; }

  .contact-section { grid-template-columns: 1fr; }
  .contact-left { border-right: none; border-bottom: 1px solid var(--rule); padding: 48px 24px; }
  .contact-right { padding: 48px 24px; }
  .form-row { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; gap: 36px; padding: 48px 0 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}