/* ============================================================
   Self-hosted variable fonts.
   Replaces the Google Fonts request: no third-party connection,
   no render-blocking cross-origin CSS, and the full weight axis so
   the intermediate weights used here (550, 620, 650, 750) render exactly.
   ============================================================ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   CALIBER: REDESIGNED VISUAL SYSTEM
   Concept: Calibrated Momentum
   ============================================================ */

:root {
  --navy: #0d1b2e;
  --navy-deep: #081321;
  --navy-mid: #142943;
  --cobalt: #2563a8;
  --cobalt-bright: #4f86c6;
  --terracotta: #e05c3a;
  --terracotta-dark: #c94c2c;
  --terracotta-soft: #f4c9bd;
  --ink: #122033;
  --slate: #526174;
  --muted: #7d8998;
  --paper: #f6f8fb;
  --paper-warm: #f2f0eb;
  --white: #ffffff;
  --line: rgba(13, 27, 46, 0.13);
  --line-strong: rgba(13, 27, 46, 0.24);
  --line-dark: rgba(255, 255, 255, 0.16);
  --display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 18px 44px rgba(13, 27, 46, 0.08);
  --shadow-lg: 0 36px 90px rgba(4, 13, 25, 0.22);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy-deep); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

::selection { background: var(--terracotta); color: var(--white); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
p { margin: 0 0 1.1rem; }
ul, ol { margin-top: 0; }
strong { font-weight: 700; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
h1 { font-size: clamp(3.4rem, 8vw, 7.25rem); font-weight: 650; }
h2 { font-size: clamp(2.35rem, 5vw, 4.75rem); font-weight: 620; }
h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.12; }
h4 { font-size: 1.03rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin-inline: auto;
}

.muted { color: var(--muted); }
.lead {
  max-width: 760px;
  color: var(--slate);
  font-size: clamp(1.04rem, 1.4vw, 1.27rem);
  line-height: 1.66;
}
.eyebrow, .kicker, .label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: var(--cobalt);
  font-family: var(--body);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-transform: none;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.spine {
  color: var(--cobalt);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.mt-2 { margin-top: 28px; }
.mt-3 { margin-top: 48px; }

/* ============================================================
   Header + navigation
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  color: var(--white);
  background: linear-gradient(to bottom, rgba(8, 19, 33, 0.72), rgba(8, 19, 33, 0));
  transition: background 280ms ease, border-color 280ms ease, transform 280ms ease;
}
.site-header.scrolled {
  background: rgba(8, 19, 33, 0.92);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  transition: min-height 280ms ease;
}
.site-header.scrolled .nav-wrap { min-height: 68px; }
.brand { position: relative; z-index: 3; display: inline-flex; align-items: center; }
.brand img { width: 142px; height: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 180ms ease;
}
.nav-links > li > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--white); }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  gap: 10px;
  min-height: 44px !important;
  padding: 0 18px;
  color: var(--white) !important;
  background: var(--terracotta);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(224, 92, 58, 0.2);
  transition: background 180ms ease, transform 180ms ease !important;
}
.nav-cta::after { display: none !important; }
.nav-cta::before { content: "↗"; order: 2; font-size: 0.9rem; transition: transform 180ms ease; }
.nav-cta:hover { background: #f06b47; transform: translateY(-1px); }
.nav-cta:hover::before { transform: translate(2px, -2px); }

.nav-item { position: relative; }
.nav-drop {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  width: 360px;
  padding: 18px;
  color: var(--ink);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(13,27,46,.08);
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(4, 13, 25, .22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 240ms var(--ease), visibility 180ms ease;
}
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px; }
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.nav-drop a:hover { color: var(--cobalt); background: #f1f5f9; transform: translateX(3px); }
.nav-drop a small { display: block; margin-top: 2px; color: var(--muted); font-family: var(--body); font-size: .72rem; font-weight: 400; }
.nav-drop .drop-label {
  margin: 9px 12px 5px;
  color: #9aa3af;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: none;
}
.nav-toggle { display: none; position: relative; z-index: 3; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 6px auto; background: var(--white); transition: transform 220ms ease, opacity 180ms ease; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Buttons + universal controls
   ============================================================ */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn::after { content: "↗"; font-size: 1rem; transition: transform 200ms var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translate(2px, -2px); }
.btn-primary { color: var(--white); background: var(--terracotta); box-shadow: 0 16px 34px rgba(224, 92, 58, .18); }
.btn-primary:hover { background: var(--terracotta-dark); box-shadow: 0 20px 40px rgba(224, 92, 58, .24); }
.btn-outline { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.btn-outline:hover { color: var(--white); background: var(--navy); border-color: var(--navy); }
.dark .btn-outline, .hero .btn-outline, .offer .btn-outline, .cta-band .btn-outline { color: var(--white); border-color: rgba(255,255,255,.34); }
.dark .btn-outline:hover, .hero .btn-outline:hover, .offer .btn-outline:hover, .cta-band .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

/* ============================================================
   Hero: home
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-deep);
}
.home-hero {
  min-height: min(920px, 100svh);
  padding: clamp(150px, 18vh, 210px) 0 46px;
  background:
    radial-gradient(circle at 79% 25%, rgba(37, 99, 168, .34), transparent 34%),
    radial-gradient(circle at 80% 76%, rgba(224, 92, 58, .12), transparent 28%),
    linear-gradient(130deg, #081321 0%, #0d1b2e 53%, #122943 100%);
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black 10%, transparent 92%);
}
.home-hero::after {
  content: "";
  position: absolute;
  right: -13vw;
  top: 8vh;
  z-index: -1;
  width: min(62vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 80px rgba(255,255,255,.018),
    0 0 0 160px rgba(255,255,255,.012);
}
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(410px, .87fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.home-hero__copy { position: relative; z-index: 2; }
.home-hero .eyebrow { color: #89b2df; }
.home-hero h1 { max-width: 820px; color: var(--white); }
.home-hero h1 span { display: block; }
.home-hero h1 .hero-accent { position: relative; width: fit-content; }
.home-hero h1 .hero-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: -8px;
  bottom: .05em;
  z-index: -1;
  height: .11em;
  background: var(--terracotta);
  transform: rotate(-1.4deg) scaleX(.96);
  transform-origin: left;
}
.home-hero .lead { max-width: 700px; margin-top: 28px; color: rgba(255,255,255,.7); }
.home-hero .spine { margin-top: 24px; color: var(--terracotta-soft); }

.home-hero__visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, rgba(37,99,168,.22), transparent 52%);
  box-shadow: inset 0 0 100px rgba(37,99,168,.08), 0 48px 90px rgba(0,0,0,.18);
  transition: transform 600ms var(--ease);
}
.hero-system { width: 100%; height: 100%; overflow: visible; }
.hero-system .orbit { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1; }
.hero-system .orbit.faint { stroke: rgba(255,255,255,.07); }
.hero-system .cross { stroke: rgba(255,255,255,.09); stroke-width: 1; stroke-dasharray: 4 8; }
.hero-system .trajectory { fill: none; stroke: var(--terracotta); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(224,92,58,.38)); }
.hero-system .trajectory-shadow { fill: none; stroke: rgba(224,92,58,.18); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.hero-system .node { fill: var(--navy-deep); stroke: rgba(255,255,255,.78); stroke-width: 2; }
.hero-system .node.active { fill: var(--terracotta); stroke: var(--terracotta-soft); }
.hero-system .orbit-dashed {
  stroke-dasharray: 2 12;
  transform-box: fill-box;
  transform-origin: center;
  animation: caliber-orbit-forward 32s linear infinite;
}
.hero-system .orbit-reverse {
  stroke-dasharray: 3 16;
  transform-box: fill-box;
  transform-origin: center;
  animation: caliber-orbit-reverse 40s linear infinite;
}
.hero-system .cross { animation: caliber-grid-flow 14s linear infinite; }
.hero-system .trajectory-flow {
  fill: none;
  stroke: rgba(255, 221, 207, .92);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(224, 92, 58, .62));
  transition: opacity 700ms var(--ease);
  animation: caliber-trajectory-flow 2.8s linear infinite;
}
.hero-system .trajectory-runner,
.hero-system .trajectory-runner-halo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
.hero-system .trajectory-runner {
  fill: #fff4ef;
  stroke: var(--terracotta);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(224, 92, 58, .95));
}
.hero-system .trajectory-runner-halo { fill: rgba(224, 92, 58, .16); }
.hero-system .node {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 260ms ease, stroke 260ms ease, opacity 260ms ease;
}
.hero-system .node.is-current:not(.active) {
  fill: rgba(224, 92, 58, .34);
  stroke: var(--terracotta-soft);
}
.hero-system .node-halo {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.home-hero.is-ambient .trajectory-flow { opacity: .72; }
.home-hero.is-ambient .trajectory-runner { opacity: 1; }
.home-hero.is-ambient .trajectory-runner-halo { opacity: .78; }
.home-hero.is-ambient .hero-system .node { animation: caliber-node-breathe 5.8s ease-in-out infinite; animation-delay: var(--node-delay, 0s); }
.home-hero.is-ambient .hero-system .node-halo { animation: caliber-node-halo 3.4s ease-out infinite; }

.home-hero__visual::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 168, .18), transparent 66%);
  opacity: .45;
  transform: scale(.94);
  animation: caliber-hero-glow 9s ease-in-out infinite;
  pointer-events: none;
}
.home-hero.is-ambient .hero-readout__status::before { animation: caliber-status-pulse 2.6s ease-out infinite; }

@keyframes caliber-orbit-forward {
  to { transform: rotate(360deg); }
}
@keyframes caliber-orbit-reverse {
  to { transform: rotate(-360deg); }
}
@keyframes caliber-grid-flow {
  to { stroke-dashoffset: -48; }
}
@keyframes caliber-trajectory-flow {
  to { stroke-dashoffset: -36; }
}
@keyframes caliber-node-breathe {
  0%, 100% { transform: scale(1); opacity: .84; }
  50% { transform: scale(1.14); opacity: 1; }
}
@keyframes caliber-node-halo {
  0% { opacity: .46; transform: scale(.66); }
  76%, 100% { opacity: 0; transform: scale(1.34); }
}
@keyframes caliber-hero-glow {
  0%, 100% { opacity: .34; transform: scale(.92); }
  50% { opacity: .62; transform: scale(1.04); }
}
@keyframes caliber-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 92, 58, .34); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(224, 92, 58, 0); }
}
.hero-system text { fill: rgba(255,255,255,.78); font-family: var(--body); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.hero-system .system-index { fill: rgba(255,255,255,.28); font-size: 9px; letter-spacing: .12em; }
.hero-readout {
  position: absolute;
  right: -12px;
  bottom: 9%;
  width: min(78%, 340px);
  padding: 18px 20px;
  background: rgba(8,19,33,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}
.hero-readout__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; color: #83afd9; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-readout__status { display: inline-flex; align-items: center; gap: 7px; color: var(--terracotta-soft); }
.hero-readout__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 6px rgba(224,92,58,.12); }
.hero-readout strong { display: block; color: var(--white); font-family: var(--display); font-size: 1.12rem; letter-spacing: -.02em; }
.hero-readout p { margin: 5px 0 0; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.5; }

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(56px, 8vh, 90px);
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.hero-proof > div { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 20px 24px 20px 0; }
.hero-proof > div + div { padding-left: 26px; border-left: 1px solid rgba(255,255,255,.15); }
.hero-proof .num { color: var(--terracotta); font-family: var(--display); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.hero-proof strong { display: block; color: var(--white); font-family: var(--display); font-size: .9rem; line-height: 1.3; }
.hero-proof span:last-child { display: block; margin-top: 3px; color: rgba(255,255,255,.5); font-size: .76rem; line-height: 1.45; }

/* Fallback styling for original homepage markup */
.hero:not(.home-hero):not(.page-hero) { padding: 170px 0 100px; }
.hero:not(.home-hero):not(.page-hero) .hero-inner { max-width: none; }
.hero h1, .hero h2, .hero h3 { color: var(--white); }
.hero .lead { color: rgba(255,255,255,.7); }
.hero-meta { margin-top: 28px; color: rgba(255,255,255,.48); font-size: .84rem; }
.triad { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.triad > div { padding: 22px 24px 22px 0; }
.triad > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.triad strong { display: block; margin-bottom: 4px; color: var(--white); font-family: var(--display); font-size: .9rem; }
.triad span { display: block; color: rgba(255,255,255,.55); font-size: .78rem; line-height: 1.5; }

/* ============================================================
   Page heroes
   ============================================================ */
.page-hero {
  min-height: 620px;
  padding: 182px 0 110px;
  background:
    radial-gradient(circle at 84% 30%, rgba(37,99,168,.33), transparent 30%),
    linear-gradient(135deg, #081321 0%, #0d1b2e 58%, #17314f 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, transparent, black 40%, black 100%);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: clamp(30px, 8vw, 140px);
  bottom: -160px;
  width: 420px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012);
}
.page-hero .hero-inner { position: relative; z-index: 1; max-width: none; }
.page-hero h1 { max-width: 1040px; font-size: clamp(3.4rem, 6.4vw, 6.35rem); }
.page-hero .lead { max-width: 800px; margin-top: 28px; }
.page-hero .eyebrow { color: #8cb5df; }

/* ============================================================
   Logo / credibility rail
   ============================================================ */
.logo-banner {
  overflow: hidden;
  padding: 25px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.logo-banner .container { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: clamp(26px,3.5vw,52px); }
.logo-banner .label { margin: 0; color: var(--muted); white-space: nowrap; line-height: 1.45; }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.marquee-track { display: flex; align-items: center; min-width: max-content; gap: 0; will-change: transform; }
.logo-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(166px,13vw,212px);
  height: 62px;
  padding: 9px 30px;
  flex: 0 0 auto;
}
.logo-item + .logo-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 26px;
  background: rgba(13,27,46,.12);
  transform: translateY(-50%);
}
.logo-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 34px;
  object-fit: contain;
  filter: grayscale(1) saturate(0) contrast(1.14);
  opacity: .62;
  transition: filter 260ms var(--ease), opacity 260ms var(--ease), transform 260ms var(--ease);
}
.logo-item:hover img { filter: none; opacity: 1; transform: translateY(-1px); }
.logo-item--patlytics img { max-height: 35px; }
.logo-item--innodata img { max-height: 34px; }
.logo-item--smart-home img { max-height: 31px; }
.logo-item--magnolia img { max-height: 48px; filter: grayscale(1) saturate(0) contrast(1.55); opacity: .72; }
.logo-item--madsen img { max-height: 42px; }
.logo-item--envirotek img { max-height: 45px; }
.logo-item--izel { width: clamp(150px,12vw,196px); }
.logo-item--izel img { max-height: 40px; }
.logo-item--united { width: clamp(190px,15vw,246px); }
.logo-item--united img { max-height: 46px; }
.logo-item--kane-pugh { width: clamp(230px,18vw,310px); }
.logo-item--kane-pugh img { max-height: 38px; }

/* ============================================================
   Sections and layout systems
   ============================================================ */
.section { position: relative; padding: clamp(90px, 10vw, 145px) 0; overflow: clip; }
.section.alt { background: #edf2f7; }
.section.dark { color: var(--white); background: var(--navy); }
.section.dark h2, .section.dark h3, .section.dark h4 { color: var(--white); }
.section.dark .lead, .section.dark p { color: rgba(255,255,255,.64); }
.section-head { max-width: 920px; margin-bottom: 60px; }
.section-head h2 { max-width: 900px; }
.section-head .lead { margin-top: 24px; }
.section-head--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .55fr); gap: 80px; align-items: end; max-width: none; }
.section-head--split .lead { margin: 0; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Editorial problem list */
.problem-section { background: var(--paper-warm); }
.problem-layout { display: grid; grid-template-columns: 80px minmax(0,.85fr) minmax(420px,1.05fr); gap: clamp(32px,5vw,82px); align-items: start; }
.section-index { color: rgba(13,27,46,.28); font-family: var(--display); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.problem-copy h2 { max-width: 620px; }
.problem-copy .lead { margin-top: 26px; }
.problem-list { border-top: 1px solid var(--line-strong); }
.problem-item { display: grid; grid-template-columns: 46px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.problem-item span { padding-top: 3px; color: var(--terracotta); font-family: var(--display); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.problem-item p { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1rem,1.4vw,1.2rem); font-weight: 550; line-height: 1.45; letter-spacing: -.02em; }

/* Connected system: signature visual */
.system-section {
  background:
    radial-gradient(circle at 82% 28%, rgba(37,99,168,.22), transparent 34%),
    linear-gradient(145deg, #081321 0%, #0d1b2e 100%) !important;
}
.system-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
}
.system-layout { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(520px,1.15fr); gap: clamp(60px,8vw,120px); align-items: start; }
.system-copy { position: sticky; top: 130px; }
.system-copy h2 { max-width: 560px; }
.system-copy .lead { margin-top: 28px; }
.system-copy .system-summary { display: grid; gap: 12px; margin-top: 38px; }
.system-copy .system-summary div { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.58); font-size: .83rem; }
.system-copy .system-summary div::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--terracotta); border-radius: 50%; }
.system-board {
  position: relative;
  padding: 42px 38px 38px 84px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
  box-shadow: 0 40px 100px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}
.system-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
}
.system-progress { position: absolute; top: 64px; bottom: 64px; left: 41px; width: 1px; background: rgba(255,255,255,.16); }
.system-progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--terracotta), #80aedd); transform: scaleY(var(--system-progress, .1)); transform-origin: top; transition: transform 700ms var(--ease); }
.system-stage { position: relative; z-index: 1; padding: 28px 0 32px; border-bottom: 1px solid rgba(255,255,255,.11); opacity: .46; transform: translateX(0); transition: opacity 450ms ease, transform 450ms var(--ease); }
.system-stage:last-child { border-bottom: 0; }
.system-stage::before { content: ""; position: absolute; left: -47px; top: 34px; width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; background: var(--navy); transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.system-stage.is-active { opacity: 1; transform: translateX(8px); }
.system-stage.is-active::before { border-color: var(--terracotta-soft); background: var(--terracotta); box-shadow: 0 0 0 7px rgba(224,92,58,.12); }
.system-stage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.system-stage__head span { color: rgba(255,255,255,.28); font-family: var(--display); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.system-stage h3 { color: var(--white); font-size: clamp(1.4rem,2.3vw,2.15rem); }
.system-stage p { max-width: 560px; margin: 10px 0 0; color: rgba(255,255,255,.56); font-size: .91rem; }
.system-stage__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.system-stage__tags span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.6); font-size: .64rem; font-weight: 650; letter-spacing: .04em; }

/* Generic cards */
.card {
  position: relative;
  display: block;
  min-width: 0;
  padding: 30px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 300ms var(--ease), border-color 220ms ease, box-shadow 300ms var(--ease), background 220ms ease;
}
.card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms var(--ease);
}
a.card:hover { transform: translateY(-5px); border-color: rgba(37,99,168,.3); background: var(--white); box-shadow: var(--shadow-sm); }
a.card:hover::after { transform: scaleX(1); transform-origin: left; }
.card h3 { margin-bottom: 14px; }
.card h4 { margin-bottom: 8px; }
.card p { color: var(--slate); font-size: .92rem; line-height: 1.65; }
.card .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--cobalt);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 750;
}
.card .more::after { content: "↗"; transition: transform 180ms ease; }
.card:hover .more::after { transform: translate(2px,-2px); }
.card.mini { min-height: 180px; padding-top: 56px; }
.card.mini::before { content: attr(data-number); position: absolute; top: 22px; left: 30px; color: var(--terracotta); font-family: var(--display); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }

/* Engagement modes */
.engagement-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.engagement-panel {
  position: relative;
  min-height: 420px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}
.engagement-panel:nth-child(2) { color: var(--white); background: var(--navy); border-color: var(--navy); }
.engagement-panel:nth-child(3) { background: #e6edf5; }
.engagement-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.engagement-panel__num { display: block; color: var(--terracotta); font-family: var(--display); font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.engagement-panel__mode { display: block; margin-top: 76px; color: var(--cobalt); font-size: .7rem; font-weight: 800; letter-spacing: .035em; text-transform: none; }
.engagement-panel:nth-child(2) .engagement-panel__mode { color: #8db5df; }
.engagement-panel h3 { margin-top: 14px; font-size: clamp(1.8rem,3vw,2.65rem); }
.engagement-panel:nth-child(2) h3 { color: var(--white); }
.engagement-panel p { margin-top: 18px; color: var(--slate); font-size: .9rem; }
.engagement-panel:nth-child(2) p { color: rgba(255,255,255,.6); }
.engagement-panel__arrow { position: absolute; right: 28px; bottom: 25px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 1.05rem; transition: transform 220ms ease, background 220ms ease, color 220ms ease; }
.engagement-panel:nth-child(2) .engagement-panel__arrow { border-color: rgba(255,255,255,.25); }
.engagement-panel:hover .engagement-panel__arrow { transform: translate(3px,-3px); color: var(--white); background: var(--terracotta); border-color: var(--terracotta); }

.capability-list { margin-top: 70px; border-top: 1px solid var(--line-strong); }
.capability-row {
  display: grid;
  grid-template-columns: 70px minmax(230px,.7fr) minmax(320px,1fr) 44px;
  gap: 30px;
  align-items: center;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 260ms var(--ease), color 180ms ease;
}
.capability-row:hover { padding-left: 10px; }
.capability-row__num { color: var(--terracotta); font-family: var(--display); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.capability-row h3 { font-size: clamp(1.18rem,1.8vw,1.55rem); }
.capability-row p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.capability-row__arrow { font-size: 1.05rem; transition: transform 180ms ease; }
.capability-row:hover .capability-row__arrow { transform: translate(3px,-3px); color: var(--terracotta); }

/* Existing ladder / rungs */
.ladder { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.rung { position: relative; min-height: 260px; padding: 30px; background: var(--white); border: 1px solid var(--line); }
.rung:nth-child(2) { color: var(--white); background: var(--navy); border-color: var(--navy); }
.rung em { display: block; margin-bottom: 45px; color: var(--cobalt); font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rung:nth-child(2) em { color: #8db5df; }
.rung:nth-child(2) h3 { color: var(--white); }
.rung p { color: var(--slate); font-size: .9rem; }
.rung:nth-child(2) p { color: rgba(255,255,255,.58); }

/* Moat / differences */
.moat { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.moat > div { min-height: 240px; padding: 28px 26px; }
.moat > div + div { border-left: 1px solid var(--line); }
.moat .num { color: var(--terracotta); font-family: var(--display); font-size: .67rem; font-weight: 800; letter-spacing: .14em; }
.moat h4 { margin-top: 62px; font-size: 1.12rem; }
.moat p { color: var(--slate); font-size: .83rem; line-height: 1.55; }
.compare { width: 100%; border-collapse: collapse; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.compare th, .compare td { width: 50%; padding: 21px 25px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare th { color: var(--white); background: var(--navy); font-family: var(--display); font-size: .82rem; letter-spacing: .01em; }
.compare th + th { background: var(--terracotta); }
.compare td { color: var(--slate); font-size: .86rem; line-height: 1.55; }
.compare td + td { color: var(--ink); font-weight: 600; border-left: 1px solid var(--line); }

/* Process */
.process-wrap { position: relative; margin-top: 66px; }
.process-line { position: absolute; top: 22px; left: 10%; right: 10%; height: 1px; background: var(--line-strong); }
.process-line::after { content: ""; position: absolute; inset: 0; background: var(--terracotta); transform: scaleX(var(--process-progress,.15)); transform-origin: left; transition: transform 900ms var(--ease); }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 22px; }
.process-step { padding-right: 10px; }
.process-step__node { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 42px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 50%; font-family: var(--display); font-size: .66rem; font-weight: 800; transition: color 220ms ease, background 220ms ease, border-color 220ms ease; }
.process-step.is-active .process-step__node { color: var(--white); background: var(--terracotta); border-color: var(--terracotta); }
.process-step h3 { font-size: 1.16rem; }
.process-step p { color: var(--muted); font-size: .81rem; line-height: 1.55; }
.card.step .num { display: block; margin-bottom: 55px; color: var(--terracotta); font-family: var(--display); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }

.cadence { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); background: var(--white); }
.cadence > div { padding: 24px; }
.cadence > div + div { border-left: 1px solid var(--line); }
.cadence strong { display: block; color: var(--terracotta); font-family: var(--display); font-size: .72rem; letter-spacing: .08em; }
.cadence span { display: block; margin-top: 8px; color: var(--slate); font-size: .8rem; line-height: 1.55; }

/* Audit / offer */
.audit-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr);
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
}
.audit-feature__content { padding: clamp(40px,6vw,78px); }
.audit-feature__content .kicker { color: #8db5df; }
.audit-feature h2 { max-width: 720px; color: var(--white); }
.audit-feature .lead { margin-top: 24px; color: rgba(255,255,255,.65); }
.audit-feature__metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 42px; color: var(--navy); background: var(--terracotta); }
.audit-feature__metric strong { font-family: var(--display); font-size: clamp(5.5rem,10vw,9rem); font-weight: 650; line-height: .8; letter-spacing: -.08em; }
.audit-feature__metric span { max-width: 260px; font-family: var(--display); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.audit-feature__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 24px; margin: 34px 0 0; padding: 0; list-style: none; }
.audit-feature__list li { position: relative; padding-left: 18px; color: rgba(255,255,255,.61); font-size: .78rem; }
.audit-feature__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.offer { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.7fr); gap: 60px; padding: clamp(36px,5vw,64px); color: var(--white); background: var(--navy); }
.offer h2 { color: var(--white); }
.offer .lead, .offer p { color: rgba(255,255,255,.65); }
.offer ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.offer li { padding: 13px 0; color: rgba(255,255,255,.67); border-bottom: 1px solid var(--line-dark); font-size: .86rem; }

/* Selected work */
.work-showcase { background: var(--paper-warm); }
.project-list { display: grid; gap: 22px; }
.project-feature {
  display: grid;
  grid-template-columns: minmax(360px,.95fr) minmax(0,1.05fr);
  min-height: 520px;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
}
.project-feature:nth-child(even) .project-art { order: 2; }
.project-feature:nth-child(even) .project-copy { order: 1; }
.project-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px,5vw,68px); }
.project-copy .tag, .work-card .tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 28px;
  padding: 7px 11px;
  color: var(--cobalt);
  background: rgba(37,99,168,.08);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.project-copy h3 { max-width: 570px; font-size: clamp(2rem,3.5vw,3.25rem); }
.project-copy > p { margin-top: 20px; color: var(--slate); font-size: .93rem; }
.project-client { color: var(--ink) !important; font-family: var(--display); font-size: .77rem !important; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.project-client--logo {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 42px;
  margin-top: 20px;
}
.project-client--logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 250px;
  max-height: 38px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) saturate(0) contrast(1.2);
  opacity: .78;
}
.project-client--smart-home img { max-width: 245px; max-height: 38px; }
.project-client--magnolia img { max-width: 58px; max-height: 58px; filter: grayscale(1) saturate(0) contrast(1.55); opacity: .84; }
.project-client--madsen img { max-width: 240px; max-height: 54px; }
.work-client-logo { display: flex; align-items: center; min-height: 56px; margin: 18px 0 4px; }
.work-client-logo img { display: block; width: auto; height: auto; max-width: 190px; max-height: 52px; object-fit: contain; object-position: left center; filter: grayscale(1) saturate(0) contrast(1.15); opacity: .78; }
.experience-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.experience-logos > span { color: var(--muted); font-family: var(--display); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.experience-logos > i { width: 1px; height: 25px; background: var(--line-strong); }
.experience-logos img { display: block; width: auto; height: auto; max-width: 142px; max-height: 29px; object-fit: contain; filter: grayscale(1) saturate(0) contrast(1.2); opacity: .72; }
.experience-logos img:first-of-type { max-height: 27px; }
.project-link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 28px; color: var(--ink); font-family: var(--display); font-size: .78rem; font-weight: 750; }
.project-link::after { content: "↗"; transition: transform 180ms ease; }
.project-feature:hover .project-link::after { transform: translate(3px,-3px); color: var(--terracotta); }
.project-art { position: relative; min-height: 520px; overflow: hidden; isolation: isolate; background: var(--navy); }
.project-art::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 46px 46px; }
.project-art::after { content: ""; position: absolute; width: 340px; height: 340px; right: -90px; top: -100px; z-index: -1; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.018); }
.project-art__label { position: absolute; left: 28px; bottom: 24px; z-index: 4; color: rgba(255,255,255,.55); font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

/* Mortgage/growth art */
.art-dashboard { position: absolute; left: 11%; right: 11%; top: 16%; bottom: 16%; padding: 24px; background: rgba(255,255,255,.96); border-radius: 10px; box-shadow: 0 32px 80px rgba(0,0,0,.3); transform: rotate(-2deg); transition: transform 700ms var(--ease); }
.project-feature:hover .art-dashboard { transform: rotate(0deg) translateY(-6px); }
.art-dashboard__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid #dfe5ec; }
.art-dashboard__bar span { width: 7px; height: 7px; border-radius: 50%; background: #d7dde5; }
.art-dashboard__bar span:first-child { background: var(--terracotta); }
.art-dashboard__grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 16px; height: calc(100% - 34px); padding-top: 18px; }
.art-dashboard__side { border-radius: 5px; background: linear-gradient(#edf2f7 18%, transparent 18% 25%, #edf2f7 25% 34%, transparent 34% 41%, #edf2f7 41% 50%, transparent 50% 57%, #edf2f7 57% 66%, transparent 66%); }
.art-dashboard__main { position: relative; border-radius: 5px; background: #f5f7fa; overflow: hidden; }
.art-dashboard__main::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 18%; height: 42%; border-left: 1px solid #ccd6e1; border-bottom: 1px solid #ccd6e1; }
.art-chart { position: absolute; left: 13%; right: 8%; bottom: 21%; height: 38%; }
.art-chart svg { width: 100%; height: 100%; }
.art-chart path { fill: none; stroke: var(--terracotta); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-chart circle { fill: var(--terracotta); }
.art-metric { position: absolute; top: 12%; left: 10%; }
.art-metric strong { display: block; color: var(--navy); font-family: var(--display); font-size: 2.1rem; letter-spacing: -.05em; }
.art-metric span { color: #798698; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Content art */
.project-art--content { background: linear-gradient(145deg, #1b3658, #0d1b2e); }
.art-social { position: absolute; inset: 12% 8%; }
.art-social__phone { position: absolute; width: 34%; aspect-ratio: .55; padding: 10px; background: #0b1524; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.35); transition: transform 600ms var(--ease); }
.art-social__phone:nth-child(1) { left: 4%; top: 13%; transform: rotate(-9deg); }
.art-social__phone:nth-child(2) { left: 33%; top: 2%; z-index: 2; transform: rotate(1deg); }
.art-social__phone:nth-child(3) { right: 3%; top: 18%; transform: rotate(10deg); }
.project-feature:hover .art-social__phone:nth-child(1) { transform: rotate(-5deg) translateY(-5px); }
.project-feature:hover .art-social__phone:nth-child(2) { transform: rotate(0) translateY(-11px); }
.project-feature:hover .art-social__phone:nth-child(3) { transform: rotate(6deg) translateY(-5px); }
.art-social__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, #e4c7a8, #f4eee6 55%, #8295a7); }
.art-social__screen::before { content: ""; position: absolute; left: 13%; right: 13%; bottom: 13%; height: 31%; background: rgba(255,255,255,.86); border-radius: 6px; box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.art-social__screen::after { content: "Local insight\A built to move"; white-space: pre; position: absolute; left: 20%; right: 20%; bottom: 20%; color: var(--navy); font-family: var(--display); font-size: clamp(.42rem,.65vw,.7rem); font-weight: 750; line-height: 1.35; }
.art-social__phone:nth-child(2) .art-social__screen { background: linear-gradient(150deg, #c5d5dd, #f5f1eb 52%, #d0a67e); }
.art-social__phone:nth-child(3) .art-social__screen { background: linear-gradient(150deg, #e4d0c1, #f7f1eb 50%, #91a3b3); }

/* Editorial / brand art */
.project-art--brand { background: #e8ded2; }
.project-art--brand::before { opacity: .32; background-image: linear-gradient(rgba(13,27,46,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,46,.08) 1px, transparent 1px); }
.art-editorial { position: absolute; inset: 11%; display: grid; grid-template-columns: 1fr 1fr; background: #fbfaf7; box-shadow: 0 30px 80px rgba(13,27,46,.2); transform: rotate(1.5deg); transition: transform 700ms var(--ease); }
.project-feature:hover .art-editorial { transform: rotate(0) translateY(-6px); }
.art-editorial__left { display: flex; flex-direction: column; justify-content: space-between; padding: 10%; border-right: 1px solid #ddd7cf; }
.art-editorial__left small { color: var(--terracotta); font-size: .57rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.art-editorial__left strong { color: var(--navy); font-family: var(--display); font-size: clamp(2rem,4vw,4.6rem); font-weight: 600; line-height: .88; letter-spacing: -.07em; }
.art-editorial__left span { color: #77736d; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.art-editorial__right { position: relative; overflow: hidden; background: linear-gradient(150deg, #243b52, #917a63); }
.art-editorial__right::before { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(255,255,255,.36); }
.art-editorial__right::after { content: "Retail,\A by design."; white-space: pre; position: absolute; left: 17%; bottom: 17%; color: #fff; font-family: var(--display); font-size: clamp(1.1rem,2.2vw,2.4rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }

/* Existing work cards / work page */
.work-card { padding: 36px; }
.work-card h3 { font-size: clamp(1.45rem,2.2vw,2.15rem); }
.work-card .caps { margin-top: 24px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.work-card .caps strong { color: var(--ink); }
/* These three light backgrounds are left over from a light-theme layout. On the
   dark site they put near-white text (#f5f8fd) on near-white cards, measuring
   1.06:1. Removed so the cards inherit the shared dark card surface. */
.coming { display: inline-flex; margin-top: 22px; color: var(--terracotta); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Founder */
.founder-section { background: #e7edf4; }
.founder-layout, .founder { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); gap: clamp(60px,9vw,130px); align-items: center; }
.founder-visual, .headshot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 540px;
  padding: 38px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 72% 23%, rgba(79,134,198,.48), transparent 28%),
    linear-gradient(145deg, #081321, #173555);
  border: 1px solid rgba(13,27,46,.12);
  box-shadow: var(--shadow-lg);
}
.founder-visual::before, .headshot::before { content: "GR"; position: absolute; left: 8%; top: 5%; color: rgba(255,255,255,.07); font-family: var(--display); font-size: clamp(9rem,18vw,17rem); font-weight: 700; line-height: 1; letter-spacing: -.1em; }
.founder-visual::after, .headshot::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 30%; height: 5px; background: var(--terracotta); transform: rotate(-13deg); box-shadow: 0 0 35px rgba(224,92,58,.42); }
.headshot { font-size: 0; }
.headshot > * { font-size: initial; }
.founder-visual__label { position: relative; z-index: 2; color: #91b9e1; font-size: .68rem; font-weight: 800; letter-spacing: .035em; text-transform: none; }
.founder-visual strong { position: relative; z-index: 2; max-width: 340px; margin-top: 10px; color: var(--white); font-family: var(--display); font-size: clamp(2rem,3.4vw,3.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.05em; }
.founder-copy h2 { max-width: 730px; }
.founder-copy .lead { margin-top: 25px; }
.badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 11px; color: var(--cobalt); background: rgba(37,99,168,.08); border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

/* Original systems and utility blocks */
.system-arrow { width: 100%; height: 140px; margin-top: -50px; overflow: visible; }
.system-arrow path { fill: none; stroke: var(--terracotta); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.system-arrow .arrow-head { fill: var(--terracotta); stroke: none; }
.engine { padding: 30px; color: var(--white); background: var(--navy); border: 1px solid rgba(255,255,255,.08); }
.engine .kicker { color: #8db5df; }
.engine-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.engine-node { position: relative; flex: 1; text-align: center; }
.engine-node .dot { width: 11px; height: 11px; margin: 0 auto 10px; border: 2px solid #91b9e1; border-radius: 50%; }
.engine-node span { color: rgba(255,255,255,.65); font-size: .67rem; font-weight: 700; }
.engine-node::after { content: ""; position: absolute; left: calc(50% + 11px); top: 5px; width: calc(100% - 22px); height: 1px; background: rgba(255,255,255,.2); }
.engine-node:last-child::after { display: none; }
.engine-ticker { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.engine-ticker div { color: rgba(255,255,255,.58); font-size: .77rem; }
.engine-ticker div + div { display: none; }
.engine-ticker strong { color: #91b9e1; }

.situations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.situation { position: relative; display: block; min-height: 160px; padding: 24px; background: var(--white); border: 1px solid var(--line); transition: transform 260ms var(--ease), border-color 180ms ease; }
.situation::after { content: "↗"; position: absolute; right: 20px; top: 20px; color: var(--terracotta); }
.situation:hover { transform: translateY(-4px); border-color: rgba(37,99,168,.28); }
.situation h4 { max-width: 80%; margin-top: 45px; }
.situation p { margin-top: 8px; color: var(--muted); font-size: .79rem; line-height: 1.5; }

.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.detail { padding: 28px; background: var(--white); border: 1px solid var(--line); }
.detail h3 { margin-bottom: 14px; }
.detail p, .detail li { color: var(--slate); font-size: .88rem; }
.detail ul { padding-left: 18px; }
.check-list, .plain-list { padding: 0; list-style: none; }
.plain-list li, .check-list li { position: relative; padding: 10px 0 10px 23px; color: var(--slate); border-bottom: 1px solid var(--line); }
.plain-list li::before, .check-list li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.check-list { columns: 2; column-gap: 44px; }
.check-list li { break-inside: avoid; }

.ai-card { position: relative; padding: 34px; background: var(--navy); color: var(--white); overflow: hidden; }
.ai-card::after { content: "AI"; position: absolute; right: 20px; bottom: -30px; color: rgba(255,255,255,.05); font-family: var(--display); font-size: 9rem; font-weight: 800; }
.ai-card h3 { color: var(--white); }
.ai-card p { color: rgba(255,255,255,.6); }

/* Scroll statement */
.scroll-band { overflow: hidden; padding: 34px 0; background: var(--navy-deep); }
.band-row { display: flex; width: max-content; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.25); font-family: var(--display); font-size: clamp(3.6rem,8vw,8rem); font-weight: 650; line-height: .9; letter-spacing: -.06em; }
.band-row span { padding-right: .45em; }
.band-row.fill { color: var(--terracotta); -webkit-text-stroke: 0; transform: translateX(-7%); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; color: var(--ink); font-size: .82rem; font-weight: 750; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 15px 16px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: none;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { background: var(--white); border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(37,99,168,.1); }
.checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.checks label { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 14px; background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 5px; color: var(--slate); font-size: .8rem; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.checks label:hover { border-color: var(--cobalt); }
.checks input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--cobalt); cursor: pointer; }
.checks label:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(37,99,168,.16); }
.form-note { color: var(--muted); font-size: .82rem; }

/* CTA + footer */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(80px,10vw,140px) 0;
  color: var(--navy);
  background: var(--terracotta);
}
.cta-band.dark { background: var(--terracotta); }
.cta-band::before { content: ""; position: absolute; right: -160px; top: -240px; width: 620px; aspect-ratio: 1; border: 1px solid rgba(13,27,46,.18); border-radius: 50%; box-shadow: 0 0 0 90px rgba(13,27,46,.035), 0 0 0 180px rgba(13,27,46,.025); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { max-width: 960px; color: var(--navy); font-size: clamp(3rem,6.4vw,6.5rem); }
.cta-band .lead { max-width: 700px; margin-top: 24px; color: rgba(13,27,46,.7); }
.cta-band .btn-primary { color: var(--white); background: var(--navy); box-shadow: none; }
.cta-band .btn-primary:hover { background: var(--navy-deep); }

.site-footer { padding: 78px 0 28px; color: rgba(255,255,255,.58); background: var(--navy-deep); }
.footer-grid { display: grid; grid-template-columns: 1.65fr 1fr .65fr .8fr; gap: clamp(32px,5vw,78px); margin-bottom: 64px; }
.footer-logo img { width: 150px; height: auto; margin-bottom: 26px; }
.footer-logo p { max-width: 420px; color: rgba(255,255,255,.62); font-size: .82rem; }
.site-footer h4 { margin-bottom: 20px; color: rgba(255,255,255,.88); font-size: .78rem; letter-spacing: .02em; text-transform: none; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: 0 0 2px; }
.site-footer a { display: inline-block; padding: 6px 0; color: rgba(255,255,255,.68); font-size: .78rem; transition: color 160ms ease; }
.site-footer a:hover { color: var(--white); }
.newsletter { display: flex; max-width: 390px; margin-top: 24px; border-bottom: 1px solid rgba(255,255,255,.25); }
.newsletter input { flex: 1; min-width: 0; padding: 12px 0; color: var(--white); background: transparent; border: 0; outline: none; font-size: .78rem; }
.newsletter input::placeholder { color: rgba(255,255,255,.36); }
.newsletter button { padding: 0; color: var(--terracotta-soft); background: transparent; border: 0; cursor: pointer; font-size: .72rem; font-weight: 750; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.64); font-size: .72rem; }

/* ============================================================
   Motion states
   ============================================================ */
.js .reveal, .js .section-head { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible, .js .section-head.is-visible { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal[data-delay="1"].is-visible { transition-delay: 90ms; }
.js .reveal[data-delay="2"].is-visible { transition-delay: 180ms; }
.js .reveal[data-delay="3"].is-visible { transition-delay: 270ms; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .home-hero__grid { grid-template-columns: minmax(0,1.1fr) minmax(360px,.8fr); gap: 40px; }
  .home-hero__visual { max-width: 470px; }
  .system-layout { grid-template-columns: minmax(280px,.7fr) minmax(440px,1fr); gap: 50px; }
  .engagement-panel { min-height: 390px; padding: 28px; }
  .capability-row { grid-template-columns: 55px minmax(220px,.8fr) 1fr 30px; gap: 20px; }
  .project-feature { grid-template-columns: .9fr 1.1fr; }
}

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 110px var(--gutter) 50px;
    background: rgba(8,19,33,.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 300ms var(--ease), visibility 220ms ease;
  }
  .nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a { width: 100%; min-height: 56px; color: var(--white); font-family: var(--display); font-size: clamp(1.65rem,6vw,2.5rem); font-weight: 600; letter-spacing: -.04em; }
  .nav-links > li > a:not(.nav-cta)::after { bottom: 3px; }
  .nav-cta { display: inline-flex !important; width: auto !important; min-height: 50px !important; margin-top: 20px; padding: 0 20px !important; font-size: .86rem !important; letter-spacing: 0 !important; }
  .nav-drop { display: none; }

  .home-hero { min-height: auto; padding-top: 150px; }
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__copy { max-width: 800px; }
  .home-hero__visual { justify-self: center; width: min(92%,570px); margin-top: 32px; }
  .home-hero::after { right: -50%; top: 38%; width: 100vw; }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof > div, .hero-proof > div + div { padding: 17px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .hero-proof > div:last-child { border-bottom: 0; }

  .logo-banner { padding: 18px 0; }
  .logo-banner .container { grid-template-columns: 1fr; gap: 8px; }
  .logo-banner .label { display: none; }
  .logo-item { width: 170px; height: 55px; padding: 8px 24px; }
  .logo-item--kane-pugh { width: 250px; }
  .project-client--logo img { max-width: 220px; }
  .experience-logos { gap: 12px 14px; }
  .experience-logos > span { width: 100%; }
  .problem-layout { grid-template-columns: 54px 1fr; }
  .problem-list { grid-column: 2; }
  .system-layout { grid-template-columns: 1fr; }
  .system-copy { position: relative; top: auto; }
  .system-board { padding-left: 74px; }
  .engagement-grid { grid-template-columns: 1fr; }
  .engagement-panel { min-height: 310px; }
  .engagement-panel__mode { margin-top: 54px; }
  .capability-row { grid-template-columns: 46px 1fr 30px; }
  .capability-row p { grid-column: 2; }
  .capability-row__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .moat { grid-template-columns: repeat(2,1fr); }
  .moat > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .moat > div:nth-child(4) { border-top: 1px solid var(--line); }
  .process-grid { grid-template-columns: repeat(3,1fr); gap: 36px 24px; }
  .process-line { display: none; }
  .process-step__node { margin-bottom: 18px; }
  .cadence { grid-template-columns: repeat(2,1fr); }
  .cadence > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .cadence > div:nth-child(4) { border-top: 1px solid var(--line); }
  .project-feature, .project-feature:nth-child(even) { grid-template-columns: 1fr; }
  .project-feature .project-art, .project-feature:nth-child(even) .project-art { order: 1; }
  .project-feature .project-copy, .project-feature:nth-child(even) .project-copy { order: 2; }
  .project-art { min-height: 470px; }
  .founder-layout, .founder { grid-template-columns: 1fr; }
  .founder-visual, .headshot { max-width: 650px; min-height: 500px; }
  .section-head--split { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-logo { grid-column: 1 / -1; }
  .grid.cols-4 { grid-template-columns: repeat(2,1fr); }
  .ladder { grid-template-columns: 1fr; }
  .rung { min-height: 230px; }
  .situations { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }
  body { font-size: 15px; }
  h1 { font-size: clamp(3.05rem,15vw,4.8rem); }
  h2 { font-size: clamp(2.2rem,11vw,3.45rem); }
  .nav-wrap { min-height: 72px; }
  .brand img { width: 126px; }
  .home-hero { padding: 128px 0 32px; }
  .home-hero .lead { font-size: 1rem; }
  .home-hero__visual { width: 108%; margin-left: -4%; }
  .hero-readout { right: 1%; bottom: 4%; width: 72%; padding: 14px; }
  .hero-readout strong { font-size: .94rem; }
  .hero-readout p { font-size: .68rem; }
  .hero-proof { margin-top: 45px; }
  .page-hero { min-height: 570px; padding: 145px 0 90px; }
  .page-hero h1 { font-size: clamp(3rem,14vw,4.7rem); }
  .page-hero::after { right: -240px; }
  .section { padding: 84px 0; }
  .section-head { margin-bottom: 42px; }
  .problem-layout { grid-template-columns: 1fr; gap: 18px; }
  .problem-list { grid-column: 1; margin-top: 24px; }
  .section-index { display: none; }
  .system-board { padding: 24px 22px 24px 52px; }
  .system-progress { left: 25px; top: 46px; bottom: 46px; }
  .system-stage::before { left: -33px; }
  .system-stage__head { display: block; }
  .system-stage__head span { display: block; margin-bottom: 8px; }
  .engagement-panel { min-height: 330px; padding: 26px; }
  .capability-row { grid-template-columns: 36px 1fr 24px; gap: 14px; }
  .capability-row p { font-size: .78rem; }
  .moat { grid-template-columns: 1fr; }
  .moat > div, .moat > div + div { min-height: auto; padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .moat > div:first-child { border-top: 0; }
  .moat h4 { margin-top: 28px; }
  .compare th, .compare td { padding: 16px 14px; font-size: .72rem; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
  .process-step__node { grid-row: 1 / span 2; margin: 0; }
  .process-step p { grid-column: 2; }
  .cadence { grid-template-columns: 1fr; }
  .cadence > div, .cadence > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .cadence > div:first-child { border-top: 0; }
  .audit-feature { grid-template-columns: 1fr; }
  .audit-feature__metric { min-height: 280px; }
  .audit-feature__list { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; gap: 30px; }
  .project-art { min-height: 360px; }
  .project-copy { padding: 30px 24px 36px; }
  .art-dashboard { inset: 14% 7%; }
  .art-social { inset: 10% 3%; }
  .art-editorial { inset: 12% 5%; }
  .founder-visual, .headshot { min-height: 430px; padding: 28px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .detail-grid { grid-template-columns: 1fr; }
  .situations { grid-template-columns: 1fr; }
  .check-list { columns: 1; }
  .form-grid, .checks { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-logo { grid-column: 1 / -1; }
  .cta-band h2 { font-size: clamp(3rem,14vw,4.8rem); }
  .scroll-band { padding: 26px 0; }
}

@media (max-width: 460px) {
  .home-hero__visual { width: 116%; margin-left: -8%; }
  .hero-readout { width: 78%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo { grid-column: auto; }
  .compare { min-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .section-head { opacity: 1 !important; transform: none !important; }
  .home-hero__visual { transform: none !important; }
  .trajectory-flow, .trajectory-runner, .trajectory-runner-halo, .node-halo { display: none !important; }
  .logo-banner { overflow: visible; }
  .marquee { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .marquee-track { min-width: 0; flex-wrap: wrap; transform: none !important; will-change: auto; }
}

/* Final optical refinements */
@media (min-width: 921px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr); }
  .home-hero h1 { font-size: clamp(3.4rem, 6.7vw, 6.25rem); }
  .home-hero h1 > span { white-space: nowrap; }
  .home-hero__visual { max-width: 525px; }
}
.system-stage { opacity: 1; }
.js .system-stage { opacity: .46; }
.js .system-stage.is-active { opacity: 1; }
.engagement-grid.engagement-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .engagement-grid.engagement-grid--two { grid-template-columns: 1fr; } }

/* ============================================================
   CALIBER: LUMINOUS SYSTEMS REFINEMENT
   Inspired by modern workflow-product interfaces, rebuilt in
   Caliber's cobalt and terracotta visual language.
   ============================================================ */
:root {
  --navy-deep: #050812;
  --navy: #090f1d;
  --navy-mid: #10192b;
  --navy-soft: #151f34;
  --cobalt: #3c7fbd;
  --cobalt-bright: #70a8dc;
  --terracotta: #ef6848;
  --terracotta-dark: #d95235;
  --terracotta-soft: #ffb49e;
  --ink: #f5f7fb;
  --slate: #a7b1c3;
  --muted: #748196;
  --paper: #070b14;
  --paper-warm: #0a101c;
  --white: #ffffff;
  --line: rgba(219, 229, 245, 0.10);
  --line-strong: rgba(219, 229, 245, 0.18);
  --line-dark: rgba(255, 255, 255, 0.12);
  --display: "Inter Tight", "Manrope", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 18px 52px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 42px 120px rgba(0, 0, 0, 0.44);
  --surface: rgba(16, 24, 40, 0.74);
  --surface-strong: rgba(20, 30, 50, 0.92);
  --surface-soft: rgba(255, 255, 255, 0.035);
  --radius: 16px;
}

html { background: var(--navy-deep); }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 4%, rgba(60, 127, 189, 0.11), transparent 27rem),
    var(--paper);
}
body::after {
  opacity: 0.045;
  mix-blend-mode: soft-light;
}
h1, h2, h3, h4 { color: var(--ink); }
.lead { color: var(--slate); }
.eyebrow, .kicker, .label { color: var(--cobalt-bright); }
.spine { color: var(--terracotta-soft); }

/* Floating product-style navigation */
.site-header {
  top: 14px;
  bottom: auto;
  padding: 0 var(--gutter);
  background: transparent;
  pointer-events: none;
}
.site-header.scrolled {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-wrap {
  width: min(100%, var(--container));
  min-height: 66px;
  padding: 0 10px 0 20px;
  color: var(--white);
  background: rgba(5, 8, 18, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  pointer-events: auto;
}
.site-header.scrolled .nav-wrap {
  min-height: 60px;
  background: rgba(5, 8, 18, 0.91);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38);
}
.brand img { width: 132px; }
.nav-links { gap: clamp(18px, 2vw, 31px); }
.nav-links > li > a { color: rgba(241, 245, 252, 0.68); font-size: 0.82rem; }
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--white); }
.nav-links > li > a:not(.nav-cta)::after {
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta));
}
.nav-cta {
  min-height: 43px !important;
  padding-inline: 18px;
  background: linear-gradient(110deg, #f07848 0%, var(--terracotta) 58%, #e9563d 100%);
  border: 1px solid rgba(255, 191, 163, 0.34);
  box-shadow:
    0 10px 28px rgba(239, 104, 72, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.nav-cta:hover {
  background: linear-gradient(110deg, #ff8a58, #f26646 58%, #e95b42);
  box-shadow: 0 13px 34px rgba(239, 104, 72, 0.34);
}
.nav-drop {
  top: calc(100% + 14px);
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 6%, rgba(60, 127, 189, 0.15), transparent 42%),
    rgba(10, 15, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(22px);
}
.nav-drop a { color: rgba(245, 247, 251, 0.86); }
.nav-drop a:hover { color: var(--white); background: rgba(255, 255, 255, 0.055); }
.nav-drop a small { color: var(--muted); }
.nav-drop .drop-label { color: rgba(112, 168, 220, 0.62); }

/* Buttons */
.btn {
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.btn-primary {
  color: var(--white);
  background: linear-gradient(110deg, #f17847 0%, var(--terracotta) 58%, #e6533b 100%);
  border-color: rgba(255, 183, 154, 0.28);
  box-shadow:
    0 16px 40px rgba(239, 104, 72, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.23);
}
.btn-primary:hover {
  background: linear-gradient(110deg, #ff8c5c 0%, #f36f4c 58%, #e95b42 100%);
  box-shadow: 0 20px 48px rgba(239, 104, 72, 0.30);
}
.btn-outline {
  color: rgba(247, 250, 255, 0.86);
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
}
.btn-outline:hover,
.dark .btn-outline:hover,
.hero .btn-outline:hover,
.offer .btn-outline:hover,
.cta-band .btn-outline:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Homepage hero */
.home-hero {
  min-height: auto;
  padding: clamp(146px, 15vh, 182px) 0 48px;
  background:
    radial-gradient(circle at 50% 18%, rgba(58, 103, 165, 0.23), transparent 31rem),
    radial-gradient(circle at 16% 39%, rgba(239, 104, 72, 0.09), transparent 27rem),
    linear-gradient(180deg, #05070e 0%, #080b16 60%, #090f1c 100%);
}
.home-hero::before {
  opacity: 0.24;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.15px);
  background-size: 25px 25px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 75%, transparent 100%);
}
.home-hero::after {
  right: 50%;
  top: 28%;
  width: min(94vw, 1260px);
  border: 0;
  border-radius: 50%;
  transform: translateX(50%);
  background: radial-gradient(ellipse at center, rgba(71, 125, 184, 0.10), transparent 62%);
  box-shadow: none;
  filter: blur(24px);
}
.hero-aurora {
  position: absolute;
  z-index: -1;
  width: min(48vw, 690px);
  aspect-ratio: 1.5;
  border-radius: 50%;
  filter: blur(62px);
  opacity: 0.22;
  pointer-events: none;
  animation: caliber-aurora-drift 16s ease-in-out infinite alternate;
}
.hero-aurora--cobalt {
  top: 19%;
  left: 10%;
  background: radial-gradient(circle, rgba(56, 126, 194, 0.86), rgba(30, 67, 125, 0.26) 48%, transparent 73%);
}
.hero-aurora--coral {
  top: 31%;
  right: 5%;
  background: radial-gradient(circle, rgba(239, 104, 72, 0.78), rgba(179, 67, 50, 0.18) 48%, transparent 74%);
  animation-delay: -7s;
}
.hero-signal {
  position: absolute;
  top: 112px;
  left: 50%;
  z-index: -1;
  width: min(77vw, 980px);
  opacity: 0.55;
  transform: translateX(-50%);
  filter: blur(0.2px) drop-shadow(0 0 24px rgba(239, 104, 72, 0.28));
  pointer-events: none;
}
.hero-signal path {
  fill: none;
  stroke: url(#signalGradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 18;
  animation: caliber-signal-flow 8s linear infinite;
}
.home-hero__intro {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-hero__intro .eyebrow { margin-bottom: 26px; color: #8ab5df; }
.home-hero__intro .eyebrow::before { display: none; }
.home-hero h1 {
  max-width: 1040px;
  color: #f7f9fe;
  font-size: clamp(3.7rem, 7.4vw, 7.25rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.062em;
}
.home-hero h1 > span { display: block; white-space: normal; }
.home-hero .hero-gradient {
  padding-bottom: 0.06em;
  color: transparent;
  background: linear-gradient(102deg, #f8faff 5%, #dbe9f7 34%, #91b9df 59%, #ff9d78 87%);
  -webkit-background-clip: text;
  background-clip: text;
}
.home-hero .hero-gradient::after { display: none; }
.home-hero .lead {
  max-width: 760px;
  margin-top: 30px;
  color: rgba(229, 235, 245, 0.70);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}
.home-hero .spine { margin-top: 18px; color: rgba(255, 183, 158, 0.88); }
.home-hero .btn-row { justify-content: center; margin-top: 28px; }
.home-hero__visual {
  position: relative;
  z-index: 4;
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  max-width: none;
  margin: clamp(64px, 8vw, 100px) auto 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  justify-self: auto;
  transition: transform 600ms var(--ease);
}
.home-hero__visual::before { display: none; }
.hero-console {
  position: relative;
  overflow: hidden;
  padding: 7px;
  border: 1px solid rgba(158, 182, 219, 0.20);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(101, 143, 199, 0.18), rgba(239, 104, 72, 0.08) 42%, rgba(255, 255, 255, 0.025) 74%),
    rgba(11, 15, 27, 0.92);
  box-shadow:
    0 56px 120px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(87, 131, 194, 0.10),
    0 0 72px rgba(60, 127, 189, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
}
.hero-console::before {
  content: "";
  position: absolute;
  inset: -32% 18% auto;
  height: 160px;
  background: radial-gradient(ellipse, rgba(239, 104, 72, 0.18), transparent 66%);
  filter: blur(28px);
  pointer-events: none;
}
.hero-console__tabs {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 0 0 7px;
}
.console-tab {
  min-width: 0;
  padding: 16px 17px 15px;
  color: rgba(230, 236, 246, 0.62);
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 10px;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms var(--ease);
}
.console-tab.is-active {
  color: var(--white);
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 135, 197, 0.23), transparent 64%),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(112, 168, 220, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.console-tab span { display: block; font-family: var(--display); font-size: 0.78rem; font-weight: 650; }
.console-tab small { display: block; overflow: hidden; margin-top: 5px; color: rgba(210, 220, 235, 0.42); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-console__canvas {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 43%, rgba(52, 91, 148, 0.10), transparent 36%),
    #070a13;
}
.console-grid {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image: radial-gradient(circle, rgba(192, 210, 236, 0.33) 0 1px, transparent 1.2px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, transparent, black 13%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 13%, black 92%, transparent);
}
.workflow-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.workflow-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workflow-line--main {
  stroke: url(#workflowGradient);
  stroke-width: 2.3;
  stroke-dasharray: 7 9;
  opacity: 0.82;
  animation: caliber-workflow-dash 2.4s linear infinite;
}
.workflow-line--branch {
  stroke: rgba(151, 174, 207, 0.36);
  stroke-width: 1.35;
  stroke-dasharray: 4 8;
  animation: caliber-workflow-dash 3.8s linear infinite reverse;
}
.flow-particle { fill: #fff1ea; opacity: 0.96; }
.flow-particle--two { fill: #83b4e2; }
.flow-particle--branch { fill: var(--terracotta); opacity: 0.72; }
.flow-node {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 164px;
  min-height: 72px;
  padding: 12px 15px 12px 12px;
  color: var(--white);
  background:
    radial-gradient(circle at 0 0, rgba(76, 136, 199, 0.16), transparent 60%),
    rgba(17, 23, 38, 0.96);
  border: 1px solid rgba(196, 211, 233, 0.22);
  border-radius: 11px;
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform: translate(-50%, -50%);
  animation: caliber-node-float 7s ease-in-out infinite;
}
.flow-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(120deg, rgba(76, 136, 199, 0.40), rgba(239, 104, 72, 0.28));
  filter: blur(12px);
  transition: opacity 300ms ease;
}
.home-hero.is-ambient .flow-node::after { animation: caliber-node-glow 7s ease-in-out infinite; }
.flow-node__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #dceafd;
  background: linear-gradient(145deg, rgba(62, 130, 192, 0.28), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(112, 168, 220, 0.24);
  border-radius: 9px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
}
.flow-node__copy { display: block; min-width: 0; }
.flow-node__copy strong { display: block; color: #f8faff; font-family: var(--display); font-size: 0.82rem; line-height: 1.15; }
.flow-node__copy small { display: block; margin-top: 4px; overflow: hidden; color: rgba(213, 222, 235, 0.46); font-size: 0.60rem; text-overflow: ellipsis; white-space: nowrap; }
.flow-node__port {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #8f9aae;
  border-radius: 50%;
  background: #0d1321;
  transform: translateY(-50%);
}
.flow-node--position { left: 13.5%; top: 50%; animation-delay: -0.4s; }
.flow-node--build { left: 32.5%; top: 50%; animation-delay: -1.8s; }
.flow-node--generate { left: 52%; top: 37%; animation-delay: -3.1s; }
.flow-node--convert { left: 73.5%; top: 50%; animation-delay: -4.4s; }
.flow-node--measure {
  left: 91%;
  top: 50%;
  width: 160px;
  border-color: rgba(255, 164, 132, 0.40);
  background:
    radial-gradient(circle at 0 0, rgba(239, 104, 72, 0.18), transparent 60%),
    rgba(20, 22, 35, 0.97);
  animation-delay: -5.7s;
}
.flow-node--measure .flow-node__icon {
  color: #ffe6de;
  background: linear-gradient(145deg, rgba(239, 104, 72, 0.32), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 172, 142, 0.30);
}
.flow-satellite {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 1;
  color: rgba(238, 243, 251, 0.72);
  background: rgba(14, 20, 34, 0.88);
  border: 1px solid rgba(197, 211, 233, 0.16);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  animation: caliber-satellite-breathe 6s ease-in-out infinite;
}
.flow-satellite span { display: block; font-family: var(--display); font-size: 0.69rem; font-weight: 650; line-height: 1; }
.flow-satellite small { display: block; margin-top: -21px; color: rgba(203, 215, 232, 0.37); font-size: 0.53rem; }
.flow-satellite--content { left: 47.6%; top: 76%; animation-delay: -1.2s; }
.flow-satellite--crm { left: 70.2%; top: 76%; animation-delay: -3.2s; }
.flow-satellite--analytics { left: 88%; top: 76%; animation-delay: -4.8s; }
.hero-console__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 12px 6px;
  color: rgba(205, 216, 233, 0.46);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.console-status { display: inline-flex; align-items: center; gap: 9px; color: rgba(240, 245, 252, 0.72); }
.console-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 6px rgba(239, 104, 72, 0.10), 0 0 18px rgba(239, 104, 72, 0.62);
  animation: caliber-console-status 2.8s ease-out infinite;
}
.hero-proof {
  gap: 10px;
  margin-top: clamp(44px, 6vw, 74px);
  border: 0;
}
.hero-proof > div,
.hero-proof > div + div {
  padding: 19px 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 11px;
}
.hero-proof .num { color: #ff9170; }
.hero-proof span:last-child { color: rgba(216, 225, 238, 0.46); }

/* Credibility rail */
.logo-banner {
  padding: 24px 0;
  background: #080c15;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.logo-banner .label { color: rgba(210, 220, 235, 0.44); }
.logo-item + .logo-item::before { background: rgba(255, 255, 255, 0.09); }
.logo-item img {
  filter: grayscale(1) saturate(0) brightness(0) invert(1) contrast(0.85);
  opacity: 0.50;
}
.logo-item--magnolia img { filter: grayscale(1) saturate(0) brightness(0) invert(1) contrast(1.1); }
.logo-item:hover img { filter: none; opacity: 1; }

/* Sitewide section atmosphere */
.section {
  color: var(--ink);
  background: #080c15;
}
.section.alt { background: #0b111d; }
.section.dark {
  background:
    radial-gradient(circle at 80% 20%, rgba(60, 127, 189, 0.13), transparent 28rem),
    #080c15;
}
.section h2, .section h3, .section h4 { color: var(--ink); }
.section .lead, .section p { color: var(--slate); }
.section.dark .lead, .section.dark p { color: var(--slate); }
.section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(92%, 1260px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.section-head h2 { color: #f6f8fc; }
.section-index { color: rgba(193, 207, 228, 0.28); }

/* Product-style page heroes */
.page-hero,
.hero:not(.home-hero):not(.page-hero) {
  min-height: 620px;
  padding-top: 184px;
  background:
    radial-gradient(circle at 72% 24%, rgba(60, 127, 189, 0.23), transparent 28rem),
    radial-gradient(circle at 20% 65%, rgba(239, 104, 72, 0.08), transparent 25rem),
    linear-gradient(180deg, #050812, #090e1a);
}
.page-hero::before {
  opacity: 0.22;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.15px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 84%, transparent);
}
.page-hero::after {
  right: -90px;
  bottom: -240px;
  width: 620px;
  border-color: rgba(112, 168, 220, 0.12);
  box-shadow:
    0 0 0 80px rgba(60, 127, 189, 0.020),
    0 0 0 160px rgba(60, 127, 189, 0.012),
    0 0 120px rgba(60, 127, 189, 0.12);
}
.page-hero h1 {
  max-width: 1000px;
  color: #f6f8fd;
  font-weight: 600;
  letter-spacing: -0.058em;
}
.page-hero .lead { color: rgba(222, 230, 242, 0.68); }
.page-hero .eyebrow { color: #88b4df; }

/* Problem block */
.problem-section { background: #0a101b; }
.problem-list { display: grid; gap: 10px; border: 0; }
.problem-item {
  position: relative;
  padding: 19px 20px;
  background:
    radial-gradient(circle at var(--mx, 75%) var(--my, 10%), rgba(60, 127, 189, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 12px;
  transition: transform 260ms var(--ease), border-color 240ms ease, background 240ms ease;
}
.problem-item:hover { transform: translateX(5px); border-color: rgba(112, 168, 220, 0.25); }
.problem-item span { color: #ff8e6b; }
.problem-item p { color: rgba(241, 245, 251, 0.88); }

/* Connected system canvas */
.system-section {
  background:
    radial-gradient(circle at 82% 28%, rgba(60, 127, 189, 0.17), transparent 30rem),
    radial-gradient(circle at 18% 78%, rgba(239, 104, 72, 0.07), transparent 26rem),
    #070b14 !important;
}
.system-section::before {
  opacity: 0.24;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.15px);
  background-size: 23px 23px;
}
.system-board {
  padding: 42px 38px 38px 84px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(60, 127, 189, 0.13), transparent 38%),
    rgba(13, 19, 32, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 16px;
  box-shadow:
    0 42px 100px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.system-board::before {
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.20) 0 1px, transparent 1.15px);
  background-size: 22px 22px;
}
.system-stage { border-bottom-color: rgba(255, 255, 255, 0.085); }
.system-stage::before { background: #0b111d; }
.system-stage__tags span {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Shared luminous surface system */
.card,
.engagement-panel,
.rung,
.situation,
.detail,
.cadence,
.compare,
.offer,
.audit-feature,
.ai-card,
.engine,
.founder-visual,
.headshot {
  --card-glow: rgba(60, 127, 189, 0.12);
  color: var(--ink);
  background:
    radial-gradient(circle at var(--mx, 78%) var(--my, 8%), var(--card-glow), transparent 38%),
    rgba(15, 22, 37, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 15px;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(12px);
}
.card::after {
  left: 22px;
  right: 22px;
  bottom: 0;
  width: auto;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta));
}
.card h3, .card h4, .detail h3, .detail h4 { color: #f5f8fd; }
.card p, .detail p, .detail li { color: var(--slate); }
a.card:hover,
.situation:hover,
.engagement-panel:hover {
  transform: translateY(-5px);
  background:
    radial-gradient(circle at var(--mx, 70%) var(--my, 10%), rgba(60, 127, 189, 0.19), transparent 40%),
    rgba(19, 28, 46, 0.92);
  border-color: rgba(112, 168, 220, 0.24);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(60, 127, 189, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card .more { color: #90bce5; }

/* Engagement cards */
.engagement-grid { gap: 14px; }
.engagement-panel,
.engagement-panel:nth-child(2),
.engagement-panel:nth-child(3) {
  min-height: 400px;
  color: var(--ink);
  background:
    radial-gradient(circle at var(--mx, 76%) var(--my, 4%), rgba(60, 127, 189, 0.15), transparent 42%),
    rgba(15, 22, 37, 0.82);
  border-color: rgba(255, 255, 255, 0.095);
}
.engagement-panel:nth-child(2) {
  --card-glow: rgba(239, 104, 72, 0.12);
  background:
    radial-gradient(circle at var(--mx, 76%) var(--my, 4%), rgba(239, 104, 72, 0.12), transparent 42%),
    rgba(17, 22, 37, 0.86);
}
.engagement-panel__mode,
.engagement-panel:nth-child(2) .engagement-panel__mode { color: #87b3dd; }
.engagement-panel h3,
.engagement-panel:nth-child(2) h3 { color: #f7f9fd; }
.engagement-panel p,
.engagement-panel:nth-child(2) p { color: var(--slate); }
.engagement-panel__arrow,
.engagement-panel:nth-child(2) .engagement-panel__arrow {
  color: rgba(245, 248, 253, 0.82);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Capability rows as workflow cards */
.capability-list { display: grid; gap: 9px; margin-top: 60px; border: 0; }
.capability-row {
  grid-template-columns: 56px minmax(230px, 0.78fr) minmax(300px, 1fr) 44px;
  padding: 20px 21px;
  background:
    radial-gradient(circle at var(--mx, 80%) var(--my, 8%), rgba(60, 127, 189, 0.10), transparent 38%),
    rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  transition: transform 260ms var(--ease), border-color 220ms ease, background 220ms ease;
}
.capability-row:hover {
  padding-left: 25px;
  transform: translateX(5px);
  background:
    radial-gradient(circle at var(--mx, 80%) var(--my, 8%), rgba(60, 127, 189, 0.16), transparent 40%),
    rgba(255, 255, 255, 0.035);
  border-color: rgba(112, 168, 220, 0.22);
}
.capability-row h3 { color: #f1f5fb; }
.capability-row p { color: var(--muted); }

/* Situations and details */
.situations { gap: 12px; }
.situation {
  min-height: 190px;
  background:
    radial-gradient(circle at var(--mx, 80%) var(--my, 8%), rgba(60, 127, 189, 0.10), transparent 42%),
    rgba(15, 22, 37, 0.78);
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 14px;
}
.situation h4 { color: #f5f7fc; }
.situation p { color: var(--slate); }
.detail { background: rgba(15, 22, 37, 0.76); border-color: rgba(255, 255, 255, 0.09); }
.plain-list li, .check-list li { color: var(--slate); border-bottom-color: rgba(255, 255, 255, 0.075); }

/* Audit and offer panels */
.audit-feature {
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 0%, rgba(60, 127, 189, 0.15), transparent 45%),
    #0c1322;
  border-color: rgba(255, 255, 255, 0.11);
}
.audit-feature__content .kicker { color: #8ab7e1; }
.audit-feature h2 { color: #f6f8fd; }
.audit-feature .lead { color: var(--slate); }
.audit-feature__list li { color: rgba(214, 224, 239, 0.62); }
.audit-feature__metric {
  color: #180d0a;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.30), transparent 45%),
    linear-gradient(145deg, #ff9a6f, #ef6848 58%, #d95036);
}
.offer { background: rgba(13, 19, 32, 0.88); }
.offer h2 { color: #f6f8fd; }
.offer .lead, .offer p, .offer li { color: var(--slate); }
.offer ul, .offer li { border-color: rgba(255, 255, 255, 0.085); }

/* Process and operating cadence */
.process-line { background: rgba(255, 255, 255, 0.13); }
.process-line::after { background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta)); }
.process-step__node {
  color: rgba(244, 247, 252, 0.80);
  background: #0d1423;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}
.process-step.is-active .process-step__node {
  color: var(--white);
  background: linear-gradient(145deg, #ff8a62, var(--terracotta));
  border-color: rgba(255, 184, 158, 0.44);
  box-shadow: 0 0 0 6px rgba(239, 104, 72, 0.09), 0 12px 30px rgba(239, 104, 72, 0.20);
}
.process-step h3 { color: #f3f6fb; }
.process-step p { color: var(--muted); }
.cadence { overflow: hidden; background: rgba(14, 21, 35, 0.82); border-color: rgba(255, 255, 255, 0.09); }
.cadence > div + div { border-color: rgba(255, 255, 255, 0.08); }
.cadence span { color: var(--slate); }

/* Comparison and moat */
.moat { gap: 10px; border: 0; }
.moat > div,
.moat > div + div {
  min-height: 240px;
  padding: 27px;
  background: rgba(15, 22, 37, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 13px;
}
.moat h4 { color: #f5f7fc; }
.moat p { color: var(--slate); }
.compare { overflow: hidden; background: rgba(13, 20, 34, 0.86); }
.compare th { color: #f4f7fc; background: rgba(60, 127, 189, 0.18); }
.compare th + th { background: rgba(239, 104, 72, 0.20); }
.compare th, .compare td { border-color: rgba(255, 255, 255, 0.08); }
.compare td { color: var(--slate); }
.compare td + td { color: rgba(245, 248, 252, 0.86); border-left-color: rgba(255, 255, 255, 0.08); }

/* Founder */
.founder-visual, .headshot {
  background:
    radial-gradient(circle at 74% 18%, rgba(84, 145, 207, 0.33), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(239, 104, 72, 0.10), transparent 34%),
    #0d1525;
}
.founder-copy h2 { color: #f6f8fd; }
.badge { color: #9bc4e8; background: rgba(60, 127, 189, 0.10); border: 1px solid rgba(112, 168, 220, 0.13); }
.experience-logos { border-color: rgba(255, 255, 255, 0.09); }
.experience-logos > span { color: rgba(211, 221, 236, 0.45); }
.experience-logos > i { background: rgba(255, 255, 255, 0.10); }
.experience-logos img { filter: grayscale(1) saturate(0) brightness(0) invert(1) contrast(0.88); opacity: 0.52; }

/* Forms */
.field label { color: rgba(239, 244, 251, 0.78); }
.field input, .field textarea, .field select {
  color: #f5f7fb;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(201, 212, 229, 0.32); }
.field input:focus, .field textarea:focus, .field select:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(112, 168, 220, 0.58);
  box-shadow: 0 0 0 4px rgba(60, 127, 189, 0.11), 0 0 32px rgba(60, 127, 189, 0.08);
}
.field select option { color: #111827; background: #fff; }
.checks label { color: var(--slate); background: rgba(255, 255, 255, 0.028); border-color: rgba(255, 255, 255, 0.085); }
.form-note { color: var(--muted); }

/* Scrolling statement */
.scroll-band { background: #050812; border-block: 1px solid rgba(255, 255, 255, 0.06); }
.band-row { -webkit-text-stroke-color: rgba(186, 207, 234, 0.20); }
.band-row.fill { color: #f27a57; }

/* CTA and footer */
.cta-band,
.cta-band.dark {
  color: var(--white);
  background:
    radial-gradient(circle at 72% 28%, rgba(239, 104, 72, 0.25), transparent 30rem),
    radial-gradient(circle at 20% 85%, rgba(60, 127, 189, 0.16), transparent 28rem),
    linear-gradient(145deg, #070a13, #101425 72%, #15111a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cta-band::before {
  right: -90px;
  top: -290px;
  border-color: rgba(255, 150, 115, 0.16);
  box-shadow:
    0 0 0 90px rgba(239, 104, 72, 0.025),
    0 0 0 180px rgba(60, 127, 189, 0.018),
    0 0 110px rgba(239, 104, 72, 0.12);
}
.cta-band h2 { color: #f8f9fd; }
.cta-band .lead { color: rgba(222, 230, 242, 0.66); }
.cta-band .btn-primary {
  color: var(--white);
  background: linear-gradient(110deg, #f17847, var(--terracotta) 60%, #e6533b);
}
.cta-band .btn-primary:hover { background: linear-gradient(110deg, #ff8b5a, #f36d4a 60%, #e95c42); }
.site-footer {
  background: #04070d;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.site-footer h4 { color: rgba(244, 247, 252, 0.82); }
.site-footer a { color: rgba(216, 225, 239, 0.62); }
.footer-bottom, .newsletter { border-color: rgba(255, 255, 255, 0.08); }

/* Pointer-lit surfaces */
.card,
.engagement-panel,
.capability-row,
.situation,
.problem-item,
.detail,
.audit-feature,
.offer {
  isolation: isolate;
}

/* Motion */
@keyframes caliber-aurora-drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(0.94); opacity: 0.15; }
  100% { transform: translate3d(4%, 3%, 0) scale(1.08); opacity: 0.29; }
}
@keyframes caliber-signal-flow { to { stroke-dashoffset: -112; } }
@keyframes caliber-workflow-dash { to { stroke-dashoffset: -32; } }
@keyframes caliber-node-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -5px; }
}
@keyframes caliber-node-glow {
  0%, 72%, 100% { opacity: 0; }
  82%, 90% { opacity: 0.58; }
}
@keyframes caliber-satellite-breathe {
  0%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); border-color: rgba(197, 211, 233, 0.14); }
  50% { box-shadow: 0 15px 36px rgba(0, 0, 0, 0.34), 0 0 26px rgba(60, 127, 189, 0.08); border-color: rgba(112, 168, 220, 0.25); }
}
@keyframes caliber-console-status {
  0% { box-shadow: 0 0 0 0 rgba(239, 104, 72, 0.30), 0 0 18px rgba(239, 104, 72, 0.62); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(239, 104, 72, 0), 0 0 18px rgba(239, 104, 72, 0.46); }
}

/* Responsive refinements */
@media (max-width: 1080px) {
  .home-hero__visual { width: min(calc(100% - (var(--gutter) * 2)), 1040px); }
  .flow-node { width: 150px; }
  .flow-node--measure { width: 148px; }
  .flow-node--position { left: 13%; }
  .flow-node--measure { left: 90.5%; }
}

@media (max-width: 920px) {
  .site-header { top: 10px; padding-inline: 14px; }
  .nav-wrap { width: 100%; min-height: 62px; border-radius: 13px; }
  .nav-links {
    inset: 0;
    padding: 110px 24px 48px;
    background:
      radial-gradient(circle at 78% 14%, rgba(60, 127, 189, 0.18), transparent 26rem),
      rgba(5, 8, 18, 0.985);
  }
  .home-hero { padding-top: 138px; }
  .home-hero__visual { width: min(calc(100% - 28px), 850px); margin-top: 60px; }
  .hero-console__tabs { grid-template-columns: repeat(5, minmax(118px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .hero-console__tabs::-webkit-scrollbar { display: none; }
  .hero-console__canvas { min-height: 440px; }
  .flow-node { width: 138px; min-height: 66px; grid-template-columns: 34px 1fr; padding: 10px; }
  .flow-node__icon { width: 34px; height: 34px; }
  .flow-node__copy small { display: none; }
  .flow-node--position { left: 12%; }
  .flow-node--build { left: 31.5%; }
  .flow-node--generate { left: 51%; }
  .flow-node--convert { left: 71.5%; }
  .flow-node--measure { left: 90%; width: 136px; }
  .flow-satellite { width: 72px; }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof > div, .hero-proof > div + div { border: 1px solid rgba(255, 255, 255, 0.08); }
  .capability-row { grid-template-columns: 44px 1fr 32px; }
  .capability-row p { grid-column: 2; }
}

@media (max-width: 680px) {
  h2 { letter-spacing: -0.052em; }
  .home-hero { padding-top: 126px; }
  /* Sized for the two-sentence hero: the old 14.8vw was tuned for a 2-line headline. */
  .home-hero h1 { font-size: clamp(2.35rem, 9.6vw, 3.6rem); line-height: 0.97; }
  .home-hero .lead { max-width: 590px; }
  .home-hero__visual { width: calc(100% - 18px); margin-top: 48px; }
  .hero-console { padding: 5px; border-radius: 14px; }
  .hero-console__tabs { grid-template-columns: repeat(5, 122px); gap: 4px; }
  .console-tab { padding: 12px; }
  .console-tab small { display: none; }
  .hero-console__canvas {
    min-height: 620px;
    background:
      radial-gradient(circle at 50% 45%, rgba(52, 91, 148, 0.10), transparent 38%),
      #070a13;
  }
  .workflow-connections { display: none; }
  .flow-node {
    left: 50% !important;
    top: auto;
    width: min(78%, 320px);
    min-height: 68px;
    grid-template-columns: 38px 1fr;
    animation-duration: 8s;
  }
  .flow-node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--cobalt-bright), rgba(239, 104, 72, 0.45));
  }
  .flow-node--position { top: 14%; }
  .flow-node--build { top: 31%; }
  .flow-node--generate { top: 48%; }
  .flow-node--convert { top: 65%; }
  .flow-node--measure { top: 82%; }
  .flow-node--measure::before { display: none; }
  .flow-node__copy small { display: block; }
  .flow-satellite { display: none; }
  .hero-console__footer { align-items: flex-start; flex-direction: column; gap: 5px; padding: 12px 10px 7px; }
  .hero-proof { margin-top: 34px; }
  .page-hero { padding-top: 150px; }
  .section { padding-block: 82px; }
  .problem-item { grid-template-columns: 38px 1fr; }
  .system-board { border-radius: 13px; }
  .engagement-panel { min-height: 330px; border-radius: 13px; }
  .capability-row { padding: 17px 16px; border-radius: 10px; }
  .audit-feature { border-radius: 14px; }
  .footer-grid { gap: 36px 24px; }
}

@media (max-width: 460px) {
  .site-header { padding-inline: 10px; }
  .nav-wrap { padding-left: 15px; }
  .brand img { width: 118px; }
  .home-hero__visual { width: calc(100% - 10px); }
  .hero-console__tabs { grid-template-columns: repeat(5, 112px); }
  .flow-node { width: 84%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora, .hero-signal path, .workflow-line, .flow-node, .flow-satellite, .console-status i { animation: none !important; }
  .flow-particle { display: none !important; }
}
.hero-console {
  transform: perspective(1600px) rotateX(var(--console-rx, 0deg)) rotateY(var(--console-ry, 0deg));
  transform-origin: 50% 52%;
  transform-style: preserve-3d;
  transition: transform 260ms var(--ease), border-color 260ms ease, box-shadow 260ms ease;
}
.hero-console:hover {
  border-color: rgba(164, 190, 226, 0.26);
  box-shadow:
    0 60px 130px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(87, 131, 194, 0.12),
    0 0 84px rgba(60, 127, 189, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
@media (prefers-reduced-motion: reduce) {
  .hero-console { transform: none !important; }
}


/* Final workflow-stage choreography */
.console-tab {
  position: relative;
  overflow: hidden;
}
.console-tab::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 440ms var(--ease);
}
.console-tab.is-active::after { transform: scaleX(1); }
.flow-node {
  transition: border-color 360ms ease, box-shadow 360ms ease, background 360ms ease, filter 360ms ease;
}
.flow-node.is-active {
  z-index: 5;
  border-color: rgba(148, 193, 233, 0.58);
  background:
    radial-gradient(circle at 0 0, rgba(76, 136, 199, 0.30), transparent 62%),
    rgba(20, 29, 48, 0.985);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(112, 168, 220, 0.12),
    0 0 34px rgba(60, 127, 189, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.flow-node.is-active::after { opacity: 0.68; }
.flow-node.is-active .flow-node__icon {
  border-color: rgba(161, 203, 239, 0.42);
  box-shadow: 0 0 22px rgba(60, 127, 189, 0.16);
}
.flow-node--measure.is-active {
  border-color: rgba(255, 178, 151, 0.62);
  background:
    radial-gradient(circle at 0 0, rgba(239, 104, 72, 0.30), transparent 62%),
    rgba(24, 24, 39, 0.985);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(239, 104, 72, 0.12),
    0 0 36px rgba(239, 104, 72, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
@media (prefers-reduced-motion: reduce) {
  .console-tab::after { transition: none; }
  .flow-node { transition: none; }
}

/* ============================================================
   FINAL SPATIAL, PORTRAIT, AND NAVIGATION-MOTION AUDIT
   ============================================================ */

:root {
  --section-space: clamp(92px, 8.4vw, 124px);
  --section-space-compact: clamp(72px, 6.5vw, 98px);
  --content-measure: 72ch;
}

/* A steadier vertical rhythm across long-form and service pages. */
main { position: relative; }
main > .section { padding-block: var(--section-space); }
main > .section.alt { padding-block: var(--section-space); }
.section-head {
  max-width: 940px;
  margin-bottom: clamp(42px, 4.8vw, 62px);
}
.section-head--split {
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.55fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: end;
}
.section-head--split > div { max-width: 760px; }
.section-head--split > .lead { max-width: 570px; }
.section-head .lead { margin-top: 22px; }
.section > .container > p,
.section > .container > .section-head + p,
.section > .container > .grid > div > p { max-width: var(--content-measure); }
.grid { gap: clamp(16px, 1.8vw, 23px); }
.grid.cols-2 { column-gap: clamp(34px, 5vw, 76px); row-gap: 34px; }
.card { padding: clamp(27px, 2.5vw, 35px); }
.card p:last-child,
.detail p:last-child,
.situation p:last-child,
.engagement-panel p:last-child { margin-bottom: 0; }
.capability-list { gap: 11px; margin-top: clamp(48px, 5vw, 68px); }
.capability-row { min-height: 92px; padding: 22px 24px; }
.engagement-grid { gap: clamp(14px, 1.7vw, 21px); }
.engagement-panel { padding: clamp(30px, 3vw, 38px); }
.situations { gap: clamp(12px, 1.5vw, 18px); }
.situation { padding: clamp(25px, 2.3vw, 32px); }
.ladder { gap: clamp(14px, 1.7vw, 20px); }
.rung { padding: clamp(28px, 3vw, 40px); }
.detail-grid { gap: clamp(18px, 2.2vw, 28px); }
.detail { padding: clamp(28px, 3vw, 40px); }
.audit-feature { border-radius: 18px; }
.audit-feature__content { padding: clamp(34px, 5.5vw, 72px); }
.offer { padding: clamp(34px, 5vw, 68px); }
.cta-band { padding-block: clamp(90px, 10vw, 132px); }
.site-footer { padding-top: clamp(76px, 8vw, 106px); }
.footer-grid { gap: clamp(34px, 5vw, 72px); }

/* Page heroes now feel composed rather than simply tall. */
.page-hero,
.hero:not(.home-hero):not(.page-hero) {
  display: flex;
  align-items: center;
  min-height: clamp(550px, 68vh, 690px);
  padding: clamp(164px, 17vh, 196px) 0 clamp(88px, 10vh, 118px);
}
.page-hero .hero-inner { max-width: none; }
.page-hero h1 { max-width: 990px; }
.page-hero .lead { max-width: 780px; margin-top: 30px; }
.page-hero .btn-row { margin-top: 30px; }
.page-hero .hero-inner::after {
  content: "";
  display: block;
  width: min(430px, 48vw);
  height: 1px;
  margin-top: clamp(38px, 5vw, 56px);
  background: linear-gradient(90deg, rgba(112, 168, 220, 0.72), rgba(239, 104, 72, 0.62), transparent);
  transform-origin: left;
  animation: caliber-hero-rule 6.5s ease-in-out infinite;
}
.page-hero::after {
  animation: caliber-page-orbit 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes caliber-page-orbit {
  0% { transform: translate3d(0, 0, 0) scale(0.94); opacity: 0.58; }
  100% { transform: translate3d(-34px, -24px, 0) scale(1.04); opacity: 0.92; }
}
@keyframes caliber-hero-rule {
  0%, 100% { transform: scaleX(0.72); opacity: 0.42; }
  50% { transform: scaleX(1); opacity: 0.95; }
}

/* Page-to-page transition veil. It is brief, branded, and never blocks reduced-motion users. */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 72% 25%, rgba(60, 127, 189, 0.28), transparent 32rem),
    radial-gradient(circle at 22% 78%, rgba(239, 104, 72, 0.18), transparent 28rem),
    linear-gradient(135deg, #050812, #0a1120 62%, #15111a);
  transform: translateY(0);
  transition: transform 300ms var(--ease);
  pointer-events: all;
}
.page-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 1px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: linear-gradient(135deg, transparent, black 22%, black 78%, transparent);
  -webkit-mask-image: linear-gradient(135deg, transparent, black 22%, black 78%, transparent);
}
.page-transition__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 15px;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 420ms var(--ease);
}
.page-transition__mark {
  color: rgba(248, 250, 255, 0.94);
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.page-transition__line {
  position: relative;
  width: min(260px, 52vw);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
.page-transition__line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta), var(--cobalt-bright));
  background-size: 200% 100%;
  animation: caliber-transition-line 1.15s linear infinite;
}
.page-transition__label {
  color: rgba(218, 228, 243, 0.48);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body.page-ready .page-transition {
  transform: translateY(-102%);
  pointer-events: none;
}
body.page-ready .page-transition__inner { opacity: 0; transform: translateY(-14px); }
body.page-leaving { overflow: hidden; }
body.page-leaving .page-transition {
  transform: translateY(0);
  pointer-events: all;
}
body.page-leaving .page-transition__inner { opacity: 1; transform: translateY(0); }
@keyframes caliber-transition-line { to { background-position: -200% 0; } }

/* A subtle reading-progress signal lives inside the floating navigation. */
.site-progress {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
}
.site-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta));
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  transition: transform 80ms linear;
}

/* The user-provided headshot replaces the abstract founder placeholder. */
.founder-layout,
.founder {
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(54px, 8vw, 116px);
}
.founder-photo {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 19px;
  background:
    radial-gradient(circle at 78% 16%, rgba(60, 127, 189, 0.26), transparent 36%),
    #0c1322;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(60, 127, 189, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  isolation: isolate;
}
.founder-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 8, 18, 0.72) 0%, rgba(5, 8, 18, 0.06) 38%, transparent 62%),
    radial-gradient(circle at 78% 18%, rgba(112, 168, 220, 0.12), transparent 32%);
}
.founder-photo::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: 22%;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--terracotta), rgba(112, 168, 220, 0.78), transparent);
  transform: rotate(-7deg);
  box-shadow: 0 0 26px rgba(239, 104, 72, 0.30);
  pointer-events: none;
}
.founder-photo__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.founder-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.92) contrast(1.035) brightness(0.98);
  transform: scale(1.015);
  transition: transform 900ms var(--ease), filter 500ms ease;
  will-change: transform;
}
.founder-photo:hover .founder-photo__frame img {
  filter: saturate(0.98) contrast(1.045) brightness(1.01);
  transform: scale(1.045);
}
.founder-photo figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 4;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 17px;
  color: var(--white);
  background: rgba(5, 8, 18, 0.67);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.founder-photo figcaption span {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.founder-photo figcaption small {
  color: rgba(215, 226, 241, 0.54);
  font-size: 0.68rem;
  line-height: 1.3;
  text-align: right;
}
.founder-photo--home { max-width: 560px; }
.founder-photo--about { max-width: 560px; }
.founder > div:first-child { min-width: 0; }
.founder > div:first-child > .badge { margin-top: 18px; }

/* Official user-supplied logo lockups get enough optical width to read. */
.logo-item--magnolia { width: clamp(290px, 23vw, 370px); padding-inline: 35px; }
.logo-item--magnolia img {
  max-height: 46px;
  filter: brightness(0) invert(1) contrast(0.92);
  opacity: 0.55;
}
.logo-item--magnolia:hover img {
  filter: brightness(0) invert(1) contrast(1);
  opacity: 0.92;
}
.logo-item--envirotek { width: clamp(255px, 20vw, 335px); padding-inline: 34px; }
.logo-item--envirotek img { max-height: 43px; }

/* A slightly more dimensional reveal without making content feel delayed.
   No blur filter: blur on scroll reveals goes paint-bound on Retina displays
   and causes ghosting/crawling. See the v8 production audit. Do not reintroduce. */
.js .reveal,
.js .section-head {
  opacity: 0;
  transform: translateY(26px) scale(0.995);
}
.js .reveal.is-visible,
.js .section-head.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
}
/* Hard safety net: once the document is marked settled, nothing stays hidden. */
.js.reveals-settled .reveal,
.js.reveals-settled .section-head,
.js .reveal.is-visible,
.js .section-head.is-visible { opacity: 1; }

@media (max-width: 920px) {
  :root { --section-space: clamp(78px, 10vw, 100px); }
  .section-head--split { grid-template-columns: 1fr; gap: 24px; }
  .founder-layout,
  .founder { grid-template-columns: 1fr; gap: 46px; }
  .founder-photo--home,
  .founder-photo--about { width: min(100%, 620px); max-width: 620px; }
  .logo-item--magnolia { width: 320px; }
  .logo-item--envirotek { width: 285px; }
}

@media (max-width: 680px) {
  :root { --section-space: 78px; }
  main > .section,
  main > .section.alt { padding-block: var(--section-space); }
  .page-hero,
  .hero:not(.home-hero):not(.page-hero) {
    min-height: 545px;
    padding: 142px 0 82px;
  }
  .page-hero .hero-inner::after { width: 74vw; margin-top: 38px; }
  .section-head { margin-bottom: 38px; }
  .grid.cols-2 { column-gap: 0; row-gap: 46px; }
  .card { padding: 25px; }
  .capability-row { min-height: 0; padding: 18px 16px; }
  .engagement-panel { padding: 28px 25px; }
  .founder-photo figcaption { left: 14px; right: 14px; bottom: 14px; padding: 13px 14px; }
  .founder-photo figcaption small { max-width: 110px; }
  .logo-item--magnolia { width: 292px; padding-inline: 27px; }
  .logo-item--magnolia img { max-height: 40px; }
  .logo-item--envirotek { width: 260px; padding-inline: 28px; }
  .logo-item--envirotek img { max-height: 39px; }
  .cta-band { padding-block: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none !important; }
  .page-hero::after,
  .page-hero .hero-inner::after { animation: none !important; }
  .founder-photo__frame img { transform: none !important; }
  .js .reveal,
  .js .section-head { filter: none !important; transform: none !important; opacity: 1 !important; }
  .site-progress::after { transition: none !important; }
}

/* The prepaint transition is inert when JavaScript is unavailable. */
html:not(.transition-enabled) .page-transition { display: none; }

/* ============================================================
   CALIBER: AMBIENT SIGNAL FIELDS
   Slow, branded gradient motion that gives each page depth while
   preserving the site's restrained, connected-system language.
   ============================================================ */
:root {
  --ambient-cobalt-rgb: 60, 127, 189;
  --ambient-cobalt-bright-rgb: 112, 168, 220;
  --ambient-coral-rgb: 239, 104, 72;
  --ambient-coral-soft-rgb: 255, 180, 158;
}

/* Section-level auroras are injected by main.js so the same system
   automatically reaches every page without duplicating markup. */
.has-ambient-field {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.has-ambient-field > :not(.ambient-field) {
  position: relative;
  z-index: 2;
}
.ambient-field {
  position: absolute;
  inset: -26% -18%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  opacity: 0.78;
  transform: translate3d(0, var(--ambient-parallax, 0px), 0);
  will-change: transform;
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 58%, rgba(0, 0, 0, 0.84) 72%, transparent 93%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 58%, rgba(0, 0, 0, 0.84) 72%, transparent 93%);
}
.ambient-field::before,
.ambient-field::after {
  content: "";
  position: absolute;
  width: clamp(430px, 54vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(clamp(62px, 7vw, 104px));
  mix-blend-mode: screen;
  opacity: 0.18;
  transform: translate3d(0, 0, 0) scale(0.94);
  transform-origin: center;
  will-change: transform, opacity;
  animation-play-state: paused;
}
.is-ambient-visible .ambient-field::before {
  animation: caliber-ambient-drift-a var(--ambient-speed-a, 20s) ease-in-out infinite alternate;
  animation-delay: var(--ambient-delay, 0s);
  animation-play-state: running;
}
.is-ambient-visible .ambient-field::after {
  animation: caliber-ambient-drift-b var(--ambient-speed-b, 25s) ease-in-out infinite alternate;
  animation-delay: calc(var(--ambient-delay, 0s) - 6s);
  animation-play-state: running;
}

.ambient-field--cobalt::before {
  top: -8%;
  right: -4%;
  background: radial-gradient(circle, rgba(var(--ambient-cobalt-bright-rgb), 0.50) 0%, rgba(var(--ambient-cobalt-rgb), 0.20) 44%, transparent 72%);
}
.ambient-field--cobalt::after {
  left: 3%;
  bottom: -18%;
  width: clamp(360px, 43vw, 680px);
  background: radial-gradient(circle, rgba(var(--ambient-coral-rgb), 0.24) 0%, rgba(var(--ambient-coral-rgb), 0.08) 46%, transparent 72%);
}

.ambient-field--coral::before {
  top: -16%;
  left: -2%;
  background: radial-gradient(circle, rgba(var(--ambient-coral-rgb), 0.38) 0%, rgba(var(--ambient-coral-rgb), 0.12) 47%, transparent 73%);
}
.ambient-field--coral::after {
  right: -4%;
  bottom: -20%;
  width: clamp(390px, 47vw, 730px);
  background: radial-gradient(circle, rgba(var(--ambient-cobalt-bright-rgb), 0.42) 0%, rgba(var(--ambient-cobalt-rgb), 0.13) 46%, transparent 74%);
}

.ambient-field--signal::before {
  top: 7%;
  left: 17%;
  width: min(84vw, 1080px);
  height: min(34vw, 430px);
  aspect-ratio: auto;
  border-radius: 50%;
  background: linear-gradient(108deg, transparent 4%, rgba(var(--ambient-cobalt-rgb), 0.30) 30%, rgba(var(--ambient-cobalt-bright-rgb), 0.22) 50%, rgba(var(--ambient-coral-rgb), 0.24) 69%, transparent 94%);
  filter: blur(clamp(68px, 8vw, 112px));
  transform: rotate(-8deg) scale(0.94);
}
.ambient-field--signal::after {
  right: 4%;
  bottom: -18%;
  width: clamp(390px, 48vw, 760px);
  background: radial-gradient(circle, rgba(var(--ambient-coral-soft-rgb), 0.20), rgba(var(--ambient-coral-rgb), 0.08) 45%, transparent 72%);
}

.page-hero.has-ambient-field .ambient-field {
  inset: -30% -16%;
  opacity: 0.92;
}
.page-hero .ambient-field--hero::before {
  top: -10%;
  right: 4%;
  width: clamp(520px, 63vw, 980px);
  background: radial-gradient(circle, rgba(var(--ambient-cobalt-bright-rgb), 0.52) 0%, rgba(var(--ambient-cobalt-rgb), 0.18) 45%, transparent 72%);
}
.page-hero .ambient-field--hero::after {
  left: 2%;
  bottom: -22%;
  width: clamp(430px, 53vw, 820px);
  background: radial-gradient(circle, rgba(var(--ambient-coral-rgb), 0.30) 0%, rgba(var(--ambient-coral-rgb), 0.08) 45%, transparent 72%);
}

.cta-band.has-ambient-field .ambient-field {
  inset: -42% -14%;
  opacity: 1;
}
.cta-band .ambient-field--cta::before {
  top: -4%;
  right: -2%;
  width: clamp(560px, 68vw, 1040px);
  background: radial-gradient(circle, rgba(var(--ambient-coral-rgb), 0.48) 0%, rgba(var(--ambient-coral-rgb), 0.16) 46%, transparent 74%);
}
.cta-band .ambient-field--cta::after {
  left: -3%;
  bottom: -22%;
  width: clamp(500px, 60vw, 920px);
  background: radial-gradient(circle, rgba(var(--ambient-cobalt-bright-rgb), 0.38) 0%, rgba(var(--ambient-cobalt-rgb), 0.13) 48%, transparent 75%);
}

.site-footer.has-ambient-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-footer.has-ambient-field .ambient-field {
  inset: -110% -12% -20%;
  opacity: 0.52;
}
.site-footer .ambient-field--footer::before {
  top: 5%;
  right: 8%;
  background: radial-gradient(circle, rgba(var(--ambient-cobalt-rgb), 0.34), rgba(var(--ambient-cobalt-rgb), 0.08) 50%, transparent 75%);
}
.site-footer .ambient-field--footer::after {
  left: 8%;
  bottom: -12%;
  width: clamp(360px, 42vw, 650px);
  background: radial-gradient(circle, rgba(var(--ambient-coral-rgb), 0.18), transparent 70%);
}

/* The original dotted canvases now drift almost imperceptibly. */
.home-hero::before,
.page-hero::before,
.system-section::before {
  animation: caliber-dot-field-drift 34s linear infinite;
  will-change: background-position;
}

/* Selected interface surfaces receive a slow internal light orbit. */
.engagement-panel,
.audit-feature,
.offer,
.ai-card {
  isolation: isolate;
}
.engagement-panel::before,
.audit-feature::before,
.offer::before,
.ai-card::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 42deg, transparent 0 31%, rgba(var(--ambient-cobalt-bright-rgb), 0.16) 40%, rgba(var(--ambient-coral-rgb), 0.11) 49%, transparent 59% 100%);
  filter: blur(46px);
  opacity: 0.42;
  transform-origin: 50% 50%;
  animation: caliber-surface-orbit 26s linear infinite;
}
.engagement-panel:nth-child(2)::before {
  background: conic-gradient(from 210deg, transparent 0 29%, rgba(var(--ambient-coral-rgb), 0.19) 40%, rgba(var(--ambient-cobalt-bright-rgb), 0.13) 52%, transparent 63% 100%);
  opacity: 0.54;
  animation-duration: 22s;
  animation-direction: reverse;
}
.engagement-panel > span,
.engagement-panel > h3,
.engagement-panel > p,
.engagement-panel > .engagement-panel__arrow,
.audit-feature__content,
.audit-feature__metric,
.offer > *,
.ai-card > * {
  position: relative;
  z-index: 1;
}
.engagement-panel > .engagement-panel__arrow { position: absolute; }

/* A soft signal glides through the credibility rail. */
.logo-banner {
  position: relative;
  isolation: isolate;
}
.logo-banner::after {
  content: "";
  position: absolute;
  top: -95%;
  left: -34%;
  z-index: 0;
  width: 34%;
  height: 290%;
  pointer-events: none;
  opacity: 0.22;
  background: linear-gradient(90deg, transparent, rgba(var(--ambient-cobalt-bright-rgb), 0.30), rgba(var(--ambient-coral-rgb), 0.17), transparent);
  filter: blur(28px);
  transform: skewX(-18deg);
  animation: caliber-logo-light-sweep 15s ease-in-out infinite;
}
.logo-banner .container { position: relative; z-index: 1; }

/* Small repeating accents make the motion language feel intentional. */
.home-hero .hero-gradient {
  background-size: 220% 100%;
  animation: caliber-text-gradient-shift 10s ease-in-out infinite alternate;
}
.eyebrow::before {
  background: linear-gradient(90deg, var(--cobalt-bright), var(--terracotta), var(--cobalt-bright));
  background-size: 210% 100%;
  animation: caliber-inline-gradient 9s linear infinite;
}
.has-ambient-field.section::after {
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--ambient-cobalt-bright-rgb), 0.12) 28%, rgba(var(--ambient-coral-rgb), 0.34) 50%, rgba(var(--ambient-cobalt-bright-rgb), 0.12) 72%, transparent 100%);
  background-size: 220% 100%;
  animation: caliber-section-signal 15s linear infinite;
}
.page-hero .hero-inner::after {
  background-size: 220% 100%;
}

@keyframes caliber-ambient-drift-a {
  0% { transform: translate3d(-7%, -4%, 0) scale(0.88) rotate(-4deg); opacity: 0.12; }
  48% { transform: translate3d(4%, 3%, 0) scale(1.05) rotate(3deg); opacity: 0.28; }
  100% { transform: translate3d(10%, -2%, 0) scale(0.96) rotate(7deg); opacity: 0.18; }
}
@keyframes caliber-ambient-drift-b {
  0% { transform: translate3d(7%, 5%, 0) scale(0.90) rotate(4deg); opacity: 0.10; }
  50% { transform: translate3d(-6%, -4%, 0) scale(1.08) rotate(-4deg); opacity: 0.24; }
  100% { transform: translate3d(3%, -8%, 0) scale(0.98) rotate(-7deg); opacity: 0.15; }
}
@keyframes caliber-dot-field-drift {
  to { background-position: 54px 34px; }
}
@keyframes caliber-surface-orbit {
  to { transform: rotate(360deg) scale(1.04); }
}
@keyframes caliber-logo-light-sweep {
  0%, 12% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  24% { opacity: 0.23; }
  62% { opacity: 0.18; }
  78%, 100% { transform: translateX(430%) skewX(-18deg); opacity: 0; }
}
@keyframes caliber-text-gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes caliber-inline-gradient {
  to { background-position: -210% 0; }
}
@keyframes caliber-section-signal {
  to { background-position: -220% 0; }
}

@media (max-width: 920px) {
  .ambient-field { inset: -18% -34%; opacity: 0.64; }
  .page-hero.has-ambient-field .ambient-field { inset: -22% -32%; }
  .ambient-field::before,
  .ambient-field::after {
    width: min(720px, 104vw);
    filter: blur(72px);
  }
  .engagement-panel::before,
  .audit-feature::before,
  .offer::before,
  .ai-card::before { opacity: 0.32; filter: blur(38px); }
}

@media (max-width: 680px) {
  .ambient-field { inset: -12% -58%; opacity: 0.52; }
  .page-hero.has-ambient-field .ambient-field { inset: -12% -52%; }
  .cta-band.has-ambient-field .ambient-field { inset: -30% -55%; }
  .ambient-field::before,
  .ambient-field::after { width: 640px; filter: blur(66px); }
  .logo-banner::after { width: 58%; opacity: 0.13; }
  .engagement-panel::before,
  .audit-feature::before,
  .offer::before,
  .ai-card::before { opacity: 0.24; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-field { transform: none !important; }
  .ambient-field::before,
  .ambient-field::after {
    animation: none !important;
    opacity: 0.14 !important;
    transform: none !important;
  }
  .home-hero::before,
  .page-hero::before,
  .system-section::before,
  .engagement-panel::before,
  .audit-feature::before,
  .offer::before,
  .ai-card::before,
  .logo-banner::after,
  .home-hero .hero-gradient,
  .eyebrow::before,
  .has-ambient-field.section::after {
    animation: none !important;
  }
}

/* ============================================================
   TYPOGRAPHY BREATHING ROOM AND ABSTRACT SIGNAL CARDS
   Code-rendered gradients support the existing motion system.
   ============================================================ */

/* The display typography keeps its confidence, but no longer feels compressed. */
h1 {
  line-height: 1.04;
  letter-spacing: -0.04em;
}
h2 {
  line-height: 1.08;
  letter-spacing: -0.034em;
}
h3 {
  line-height: 1.16;
  letter-spacing: -0.024em;
}
h4 {
  line-height: 1.32;
  letter-spacing: -0.012em;
}
.home-hero h1 {
  line-height: 1.01;
  letter-spacing: -0.045em;
}
.home-hero h1 > span + span { margin-top: 0.045em; }
.page-hero h1 {
  line-height: 1.05;
  letter-spacing: -0.042em;
}

/* Shared cinematic visual frame. */
.editorial-shot {
  --photo-shift: 0px;
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--white);
  background: #0a111e;
  border: 1px solid rgba(148, 177, 216, 0.16);
  border-radius: 17px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.editorial-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 9, 17, 0.02) 34%, rgba(4, 9, 17, 0.76) 100%),
    radial-gradient(circle at 82% 18%, rgba(224, 92, 58, 0.12), transparent 42%);
}
.editorial-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: inherit;
}
.editorial-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--photo-shift), 0) scale(1.055);
  transform-origin: center;
  transition: transform 760ms var(--ease), filter 420ms ease;
  will-change: transform;
}
.editorial-shot:hover img {
  transform: translate3d(0, var(--photo-shift), 0) scale(1.085);
  filter: saturate(1.04) contrast(1.02);
}
.editorial-shot figcaption {
  position: absolute;
  right: clamp(18px, 2.2vw, 28px);
  bottom: clamp(17px, 2vw, 25px);
  left: clamp(18px, 2.2vw, 28px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 520px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
}
.editorial-shot figcaption strong {
  color: rgba(250, 252, 255, 0.96);
  font-family: var(--display);
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.editorial-shot figcaption small {
  color: rgba(224, 232, 244, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* Homepage AI imagery extends the connected-system language. */
.problem-visuals {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.72fr);
  gap: 14px;
  min-height: clamp(290px, 28vw, 370px);
  margin-top: clamp(44px, 5vw, 72px);
}
.problem-visuals .editorial-shot { min-height: 100%; }
.problem-visuals .editorial-shot--compact figcaption strong { max-width: 300px; }

/* A single abstract system visual anchors the Services hero. */
.page-hero .hero-inner--with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.58fr);
  gap: clamp(54px, 7vw, 108px);
  align-items: center;
  max-width: var(--container);
}
.page-hero__copy { position: relative; z-index: 2; min-width: 0; }
.page-hero__photo {
  min-height: clamp(390px, 38vw, 510px);
  aspect-ratio: 0.86;
  transform: rotate(1.25deg);
}
.page-hero__photo::after {
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.012);
}
.page-hero__photo figcaption strong { max-width: 320px; }

/* Only the first three insights receive abstract signal art, keeping the page visually focused. */
.work-card--media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 4%, rgba(60, 127, 189, 0.12), transparent 42%),
    rgba(15, 22, 37, 0.86) !important;
}
.work-card__media {
  height: clamp(190px, 18vw, 235px);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: none;
}
.work-card__media::after { border: 0; }
.work-card__media figcaption {
  right: 22px;
  bottom: 18px;
  left: 22px;
}
.work-card__media figcaption strong {
  max-width: 300px;
  font-size: 0.94rem;
}
.work-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 30px 32px;
}
.work-card__body .coming { margin-top: auto; padding-top: 24px; }

@media (max-width: 1040px) {
  .page-hero .hero-inner--with-photo {
    grid-template-columns: minmax(0, 1fr) minmax(285px, 0.52fr);
    gap: 48px;
  }
  .page-hero__photo { min-height: 390px; }
}

@media (max-width: 920px) {
  .problem-visuals { grid-column: 2 / -1; }
  .page-hero .hero-inner--with-photo {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .page-hero__photo {
    width: min(100%, 680px);
    min-height: 0;
    aspect-ratio: 16 / 9;
    transform: none;
  }
}

@media (max-width: 680px) {
  h1 { letter-spacing: -0.034em; line-height: 1.06; }
  h2 { letter-spacing: -0.029em; line-height: 1.1; }
  h3 { letter-spacing: -0.02em; line-height: 1.17; }
  .home-hero h1 {
    line-height: 1.035;
    letter-spacing: -0.038em;
  }
  .home-hero h1 > span + span { margin-top: 0.06em; }
  .page-hero h1 { line-height: 1.07; letter-spacing: -0.035em; }
  .problem-visuals {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 34px;
  }
  .problem-visuals .editorial-shot { min-height: 250px; }
  .problem-visuals .editorial-shot--compact { min-height: 220px; }
  .page-hero__photo { aspect-ratio: 4 / 3; }
  .work-card__media { height: 215px; }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-shot img,
  .editorial-shot:hover img {
    transform: scale(1.035) !important;
    transition: none !important;
  }
}

/* Keep the animated hero rule attached to the copy column when a visual panel is present. */
.page-hero .hero-inner--with-photo::after { display: none; }
.page-hero__copy::after {
  content: "";
  display: block;
  width: min(430px, 48vw);
  height: 1px;
  margin-top: clamp(38px, 5vw, 56px);
  background: linear-gradient(90deg, rgba(112, 168, 220, 0.72), rgba(239, 104, 72, 0.62), transparent);
  background-size: 220% 100%;
  transform-origin: left;
  animation: caliber-hero-rule 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__copy::after { animation: none !important; }
}

/* ============================================================
   AI-ORIENTED VISUAL SYSTEM
   Abstract signal fields replace faux real-world photography.
   ============================================================ */

.ai-visual {
  background:
    radial-gradient(circle at 18% 18%, rgba(79, 134, 198, 0.22), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(224, 92, 58, 0.14), transparent 38%),
    #07111f;
}
.ai-visual::before {
  background:
    linear-gradient(180deg, rgba(3, 8, 16, 0.02) 30%, rgba(3, 8, 16, 0.78) 100%),
    radial-gradient(circle at 78% 16%, rgba(224, 92, 58, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(37, 99, 168, 0.08), transparent 52%);
}
.ai-visual img {
  filter: saturate(0.96) contrast(1.04);
}
.ai-visual:hover img {
  filter: saturate(1.04) contrast(1.06);
}
.ai-visual--horizon img { object-position: center 57%; }
.ai-visual--network img { object-position: center 48%; }
.problem-visuals .ai-visual--wide { min-height: clamp(300px, 29vw, 382px); }
.problem-visuals .ai-visual--network img { transform-origin: 58% 48%; }
.page-hero__photo.ai-visual--network {
  transform: rotate(0.7deg);
}
.page-hero__photo.ai-visual--network img {
  object-position: 54% 50%;
}

/* Abstract, CSS-rendered insight visuals. */
.signal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 18% 22%, rgba(79, 134, 198, 0.34), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(224, 92, 58, 0.18), transparent 38%),
    linear-gradient(145deg, #081321, #0d1d33 58%, #07101e);
}
.signal-card::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  opacity: 0.7;
  background:
    radial-gradient(circle at 30% 34%, rgba(64, 130, 202, 0.3), transparent 24%),
    radial-gradient(circle at 72% 62%, rgba(224, 92, 58, 0.2), transparent 22%);
  animation: signal-card-drift 13s ease-in-out infinite alternate;
}
.signal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, rgba(4, 10, 19, 0.8) 100%);
}
.signal-card__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.signal-card figcaption {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  z-index: 4;
  margin: 0;
}
.signal-card figcaption strong {
  color: rgba(250, 252, 255, 0.96);
  font-family: var(--display);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.signal-node,
.signal-core,
.signal-beacon,
.audit-point {
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 8%, #8cc7ff 12%, #3c82d2 42%, #1a3f77 72%, rgba(6, 19, 39, 0.2) 100%);
  box-shadow: 0 0 0 7px rgba(74, 143, 214, 0.07), 0 0 30px rgba(72, 145, 220, 0.48);
}
.signal-card--system .signal-node--one { width: 22px; height: 22px; left: 19%; top: 32%; }
.signal-card--system .signal-node--two { width: 34px; height: 34px; left: 48%; top: 22%; background: radial-gradient(circle at 34% 30%, #fff 0 7%, #ffb294 12%, #e05c3a 48%, #78301f 78%, rgba(30, 10, 8, 0.2) 100%); box-shadow: 0 0 0 8px rgba(224, 92, 58, 0.08), 0 0 34px rgba(224, 92, 58, 0.42); }
.signal-card--system .signal-node--three { width: 19px; height: 19px; right: 18%; top: 48%; }
.signal-link {
  position: absolute;
  z-index: 2;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(79, 134, 198, 0.12), rgba(113, 174, 229, 0.96), rgba(224, 92, 58, 0.72));
  box-shadow: 0 0 15px rgba(79, 134, 198, 0.26);
}
.signal-link--one { width: 36%; left: 22%; top: 37%; transform: rotate(-8deg); }
.signal-link--two { width: 34%; left: 52%; top: 36%; transform: rotate(15deg); }
.signal-orbit {
  position: absolute;
  width: 54%;
  aspect-ratio: 1.85;
  left: 24%;
  top: 16%;
  border: 1px solid rgba(113, 174, 229, 0.35);
  border-right-color: rgba(224, 92, 58, 0.58);
  border-radius: 50%;
  transform: rotate(-8deg);
  animation: signal-orbit 10s linear infinite;
}

.signal-card--leadership .signal-core {
  width: 62px;
  height: 62px;
  left: calc(50% - 31px);
  top: 27%;
  background: radial-gradient(circle at 38% 32%, #fff 0 6%, #ffb493 11%, #e05c3a 38%, #245b9f 68%, rgba(5, 17, 36, 0.18) 100%);
  box-shadow: 0 0 0 11px rgba(74, 143, 214, 0.08), 0 0 44px rgba(224, 92, 58, 0.3), 0 0 68px rgba(70, 139, 210, 0.34);
}
.signal-ring {
  position: absolute;
  left: 50%;
  top: 39%;
  border: 1px solid rgba(102, 166, 226, 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.signal-ring--one { width: 122px; height: 122px; animation: signal-pulse 5.4s ease-in-out infinite; }
.signal-ring--two { width: 184px; height: 184px; border-color: rgba(224, 92, 58, 0.22); animation: signal-pulse 5.4s 1.1s ease-in-out infinite; }
.signal-sweep {
  position: absolute;
  width: 214px;
  height: 214px;
  left: calc(50% - 107px);
  top: calc(39% - 107px);
  border-radius: 50%;
  background: conic-gradient(from 215deg, transparent 0 68%, rgba(81, 155, 224, 0.16) 76%, rgba(224, 92, 58, 0.25) 82%, transparent 90%);
  animation: signal-spin 11s linear infinite;
}
.signal-beacon { width: 11px; height: 11px; box-shadow: 0 0 18px rgba(91, 166, 235, 0.7); }
.signal-beacon--one { left: 24%; top: 30%; }
.signal-beacon--two { right: 22%; top: 48%; background: #e05c3a; box-shadow: 0 0 18px rgba(224, 92, 58, 0.7); }

.signal-card--audit .audit-grid {
  position: absolute;
  inset: 13% 9% 18%;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(103, 166, 224, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 166, 224, 0.14) 1px, transparent 1px);
  background-size: 27px 27px;
  mask-image: linear-gradient(to bottom, #000, transparent 94%);
}
.signal-card--audit .audit-path {
  position: absolute;
  left: 13%;
  right: 12%;
  top: 47%;
  height: 68px;
  border-top: 2px solid rgba(97, 170, 236, 0.82);
  border-radius: 50%;
  transform: rotate(-6deg);
  box-shadow: 0 -8px 28px rgba(77, 148, 219, 0.14);
}
.signal-card--audit .audit-path::after {
  content: "";
  position: absolute;
  right: 11%;
  top: -3px;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, rgba(81, 158, 229, 0), rgba(224, 92, 58, 0.9));
  transform: rotate(-12deg);
  transform-origin: right;
  box-shadow: 0 0 18px rgba(224, 92, 58, 0.42);
}
.audit-point { width: 12px; height: 12px; }
.audit-point--one { left: 18%; top: 46%; }
.audit-point--two { left: 48%; top: 38%; background: #e05c3a; box-shadow: 0 0 20px rgba(224, 92, 58, 0.62); }
.audit-point--three { right: 17%; top: 30%; }
.audit-scan {
  position: absolute;
  top: 12%;
  bottom: 14%;
  width: 1px;
  left: 12%;
  background: linear-gradient(to bottom, transparent, rgba(124, 191, 250, 0.86), transparent);
  box-shadow: 0 0 20px rgba(93, 169, 235, 0.54);
  animation: audit-scan 7.5s var(--ease) infinite;
}

/* A transparent, clearly illustrative team image adds human warmth without
   presenting generated people as actual Caliber employees. */
.specialist-network-section {
  padding-top: clamp(44px, 6vw, 82px);
  padding-bottom: clamp(68px, 8vw, 118px);
}
.specialist-network {
  --photo-shift: 0px;
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 48vw, 660px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 177, 216, 0.16);
  border-radius: 20px;
  background: #07101e;
  box-shadow: 0 36px 90px rgba(4, 13, 25, 0.28);
}
.specialist-network::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 10, 19, 0.96) 0%, rgba(4, 10, 19, 0.82) 35%, rgba(4, 10, 19, 0.32) 67%, rgba(4, 10, 19, 0.18) 100%),
    linear-gradient(180deg, rgba(37, 99, 168, 0.1), rgba(4, 10, 19, 0.22));
}
.specialist-network::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.045);
  background: radial-gradient(circle at 82% 22%, rgba(224, 92, 58, 0.09), transparent 32%);
}
.specialist-network > img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 61% 43%;
  transform: translate3d(0, var(--photo-shift), 0) scale(1.045);
  filter: saturate(0.72) contrast(1.07) brightness(0.78);
  transition: transform 780ms var(--ease), filter 420ms ease;
}
.specialist-network:hover > img {
  transform: translate3d(0, var(--photo-shift), 0) scale(1.065);
  filter: saturate(0.8) contrast(1.08) brightness(0.82);
}
.specialist-network__content {
  position: absolute;
  left: clamp(28px, 6vw, 78px);
  top: 50%;
  z-index: 2;
  width: min(520px, calc(100% - 56px));
  transform: translateY(-50%);
  color: rgba(235, 242, 250, 0.78);
}
.specialist-network__content .eyebrow { color: #f08a69; }
.specialist-network__content h2 {
  color: var(--white);
  font-size: clamp(2.3rem, 4.5vw, 4.45rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.specialist-network__content p {
  max-width: 480px;
  margin-top: 24px;
  color: rgba(225, 234, 245, 0.77);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.72;
}
.specialist-network__content small {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: rgba(211, 223, 239, 0.53);
  font-size: 0.71rem;
  letter-spacing: 0.04em;
}
.specialist-network__content small::before {
  content: "";
  width: 20px;
  height: 1px;
  background: rgba(224, 92, 58, 0.72);
}

@keyframes signal-card-drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes signal-orbit {
  from { transform: rotate(-8deg); }
  to { transform: rotate(352deg); }
}
@keyframes signal-spin {
  to { transform: rotate(360deg); }
}
@keyframes signal-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.34; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.76; }
}
@keyframes audit-scan {
  0%, 12% { left: 12%; opacity: 0; }
  22% { opacity: 0.9; }
  78% { opacity: 0.9; }
  88%, 100% { left: 88%; opacity: 0; }
}

@media (max-width: 920px) {
  .page-hero__photo.ai-visual--network { transform: none; }
  .specialist-network {
    min-height: 600px;
  }
  .specialist-network::before {
    background:
      linear-gradient(180deg, rgba(4, 10, 19, 0.16) 0%, rgba(4, 10, 19, 0.42) 42%, rgba(4, 10, 19, 0.96) 76%, rgba(4, 10, 19, 0.98) 100%),
      linear-gradient(90deg, rgba(37, 99, 168, 0.1), transparent 54%);
  }
  .specialist-network > img {
    object-position: 54% 24%;
  }
  .specialist-network__content {
    right: 28px;
    bottom: 34px;
    left: 28px;
    top: auto;
    width: auto;
    transform: none;
  }
}

@media (max-width: 680px) {
  .problem-visuals .ai-visual--horizon { min-height: 270px; }
  .problem-visuals .ai-visual--network { min-height: 240px; }
  .signal-card__art { transform: scale(0.92); }
  .specialist-network { min-height: 620px; border-radius: 16px; }
  .specialist-network > img { object-position: 50% 20%; }
  .specialist-network__content { right: 22px; bottom: 26px; left: 22px; }
  .specialist-network__content h2 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-card::before,
  .signal-orbit,
  .signal-ring,
  .signal-sweep,
  .audit-scan {
    animation: none !important;
  }
  .specialist-network > img,
  .specialist-network:hover > img {
    transform: scale(1.035) !important;
    transition: none !important;
  }
}


/* ============================================================
   Keyboard focus.
   Every interactive element gets a designed, visible focus ring that
   works on both the light and dark surfaces. WCAG 2.4.7.
   ============================================================ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
.site-footer :where(a, button, input):focus-visible,
.site-header :where(a, button):focus-visible {
  outline-color: #f6a184;
}
.btn:focus-visible,
.btn-primary:focus-visible { outline-offset: 4px; }
/* The newsletter input clears the default outline for its inline style,
   so it needs its own indicator rather than none at all. */
.newsletter input:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 var(--terracotta);
}
.newsletter:focus-within { border-bottom-color: var(--terracotta); }
/* Skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1400;
  padding: 10px 16px; border-radius: 8px;
  background: var(--terracotta); color: #fff;
  font-family: var(--display); font-size: .8rem; font-weight: 700;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 12px; }

/* ============================================================
   Audit fixes, 2026-09-02
   ============================================================ */

/* Horizontally scrolling regions must be keyboard reachable (WCAG 2.1.1). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* The logo marquee is a GSAP tween; it is paused off-screen in main.js. */

/* Footer bottom links need a real hit area too. */
.footer-bottom a { display: inline-block; padding: 6px 0; }

/* The contact hero should not consume a whole phone screen before the first
   field. This is the primary conversion page. */
@media (max-width: 680px) {
  .contact-page .page-hero { min-height: 0; padding: 128px 0 44px; }
  .contact-page .page-hero h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .contact-page .page-hero .lead { font-size: .95rem; }
  .checks { grid-template-columns: 1fr; }
}

/* Submit button feedback state. */
.btn[aria-busy="true"] { opacity: .72; cursor: progress; }

/* A heading that exists for document structure, not for the page's visual design. */
.sr-only-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The "Experience from" label on the About page sat at 3.61:1 against the dark
   ground at 10.6px. --muted is tuned for larger text; this label needs its own. */
.experience-logos > span { color: rgba(226, 233, 243, 0.74); font-size: .72rem; }

/* Disclosure under the credibility rail. Sits outside .label deliberately, because
   .label is display:none below 920px and this line has to be visible everywhere.
   row-gap is zeroed because the container's `gap` shorthand also applies between
   grid rows, which left a large dead band under the marquee. */
.logo-banner .container { row-gap: 0; }
.logo-banner__note {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  color: rgba(226, 233, 243, 0.62);
  font-size: .78rem;
  line-height: 1.5;
  text-wrap: pretty;
}
@media (max-width: 920px) {
  .logo-banner__note { margin-top: 12px; font-size: .74rem; }
}

/* ============================================================
   Legal pages: container-aligned prose at a readable measure.
   The body used to sit in an 820px centred column, which put its
   left edge 210px inside every other section on the page.
   ============================================================ */
.legal-body > h2 {
  max-width: var(--content-measure);
  margin-top: clamp(46px, 4.4vw, 62px);
  font-size: clamp(1.45rem, 1.9vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.18;
}
.legal-body > h2:first-child { margin-top: 0; }
.legal-body > p,
.legal-body > ul,
.legal-body > ol { max-width: var(--content-measure); margin-top: 16px; }