/* styles.css — lubab.app v2.1 "Watermark"
   Structure (per build-contract §4 reuse rule):
     PART 1 — core.css verbatim (direction-agnostic foundation)
     PART 2 — aqua token overrides (§3)
     PART 3 — Current skin, recolored aqua (flow-field / services / waveform / log / aurora)
     PART 4 — Ledger stamp/rule/type choreography, recolored warm → aqua
     PART 5 — Watermark hero fusion + lead form (net-new)
     PART 6 — landing-page-imagery section visuals (C7/C9/C11/C12/C16/C20 + backdrops)
   Self-contained: zero @import, zero external fonts, zero network requests. */

/* ============================================================================
   PART 1 — core.css (shared direction-agnostic foundation, copied verbatim)
   ============================================================================ */

/* core.css — shared direction-agnostic foundation (lubab.app v2 previews)
   Motion rules baked in here (do not weaken in skins):
   - Hidden/pre-animation states exist ONLY under html.js.motion-ok AND inside
     @media (prefers-reduced-motion: no-preference). No-JS and reduced-motion users
     always get the complete page in final states.
   - Animation is transform/opacity only. Never `transition: all`.
   - Aurora bands are elongated diagonal blurred bands — NEVER radial. */

/* ---------- tokens (defaults = Direction A "Kernel" — overridden in PART 2) ---------- */
:root {
  --bg: #0A0A0C;
  --surface: #14141A;
  --ink: #F0EEE9;
  --muted: #A3A099;
  --accent: #E8A64A;
  --accent-glow: rgba(232, 166, 74, 0.25);
  --aurora-1: #33220F;
  --aurora-2: #26180C;
  --aurora-3: #10121A;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* ~3% overshoot spring — shared by every transition. */
  --spring: linear(0, 0.02 2.1%, 0.08 4.6%, 0.30 10.4%, 0.54 16%, 0.72 21.2%,
                   0.86 26.7%, 0.94 32.6%, 1.00 39.4%, 1.03 47.8%, 1.03 56.8%, 1.00 79.3%, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-cta, var(--accent)); color: var(--on-accent, var(--bg)); }
section[id] { scroll-margin-top: 2rem; }

/* ---------- layout ---------- */
.container { max-width: 1140px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); }
.section { padding-block: clamp(4.5rem, 12vh, 8rem); }

/* Centered body sections — headings + column centered; readable blocks stay
   left-aligned inside their max-width wrappers (forms, service rows, steps). */
.services .container,
.how .container,
.pricing .container,
.contact .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.services .service-list,
.how .how-layout,
.how .proc,
.pricing .pricing-body,
.pricing .strata,
.contact .contact-head,
.contact .lead-form {
  text-align: left;
  width: 100%;
}
.services .service-list { max-width: 920px; margin-inline: auto; }
.how .how-layout { max-width: 920px; margin-inline: auto; }
.how .proc { max-width: 36rem; margin-inline: auto; }
.pricing .pricing-body,
.pricing .strata,
.contact .contact-head,
.contact .lead-form { margin-inline: auto; }
.contact .contact-head { max-width: 660px; text-align: center; }
.contact-head .form-sub { margin-inline: auto; }
.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 12vh, 7rem);
}
.signature-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero .container { position: relative; z-index: 1; }

/* Hero split: copy left, owned illustration right (stacked on narrow viewports). */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "visual"
    "body";
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
  width: 100%;
}
.hero-layout .hero-h1 { grid-area: title; margin-top: 0; }
.hero-layout .hero-body { grid-area: body; margin-top: 0; }
.hero-visual { grid-area: visual; }
.hero-visual,
.how-visual {
  margin: 0;
  width: min(100%, 420px);
  margin-inline: auto;
  aspect-ratio: 1;
  position: relative;
  isolation: isolate;
}
.hero-visual::before,
.how-visual::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(88, 230, 217, 0.14), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero-visual img,
.how-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 48px rgba(88, 230, 217, 0.12));
  border-radius: 12px; /* button-like corners */
}

/* ---------- Live illustration overlays (hero + how) ----------
   Raster pixels can't be rewritten — a canvas (main.js) re-lights ONLY the
   cyan paths already in the artwork (Plan→Deliver timeline, poles, beams).
   Soft float + glow remain CSS. Motion-gated. */
.visual-alive {
  border-radius: 12px;
}
.visual-alive > .visual-live-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  border-radius: 12px;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok .visual-alive > img {
    animation: visual-float 6.5s ease-in-out infinite;
  }
  html.js.motion-ok .visual-alive::before {
    animation: visual-glow 4.5s ease-in-out infinite;
  }
}
@keyframes visual-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes visual-glow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@media (min-width: 960px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    grid-template-areas:
      "title visual"
      "body visual";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 1.4rem;
    align-items: start;
  }
  .hero-visual {
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    max-width: 480px;
    margin-inline: 0;
    justify-self: end;
  }
}
@media (max-width: 959px) {
  .hero { min-height: auto; padding-bottom: clamp(3rem, 8vh, 5rem); }
  .hero-layout {
    text-align: center;
    justify-items: center;
  }
  .hero-layout .hero-h1 {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .hero-layout .hero-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
    text-align: center;
  }
  .hero-layout .subhead {
    margin-inline: auto;
    text-align: center;
  }
  .hero-layout .cta-row { justify-content: center; }
}

/* How split: process steps left, owned illustration right (stacked on narrow). */
.how-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  margin-top: 2rem;
  align-items: center;
  width: 100%;
}
.how-layout .proc { margin-inline: 0; max-width: none; }
@media (max-width: 959px) {
  .how-layout {
    justify-items: center;
  }
  .how-layout .proc {
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
  }
}
@media (min-width: 960px) {
  .how-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .how-layout .how-visual {
    justify-self: end;
    max-width: 400px;
    width: 100%;
    margin-inline: 0;
  }
}

/* ---------- header ---------- */
.site-header { padding-block: 1.25rem; }
.site-header .container {
  container-type: inline-size;
  container-name: header-cq;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  flex-wrap: nowrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-decoration: none;
  color: inherit;
}
.wordmark-mark {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  object-fit: contain;
}
.wordmark-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38em;
  min-width: 0;
}
.wordmark-name { display: block; }
.wordmark-suffix {
  font-weight: 600;
  font-size: 0.72em;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0.9;
}
.site-nav { flex-shrink: 1; min-width: 0; }
.site-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(0.45rem, 1.2vw, 0.7rem);
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
}
.site-nav a { color: var(--muted); transition: color 0.15s ease; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav li + li::before { content: "·"; color: var(--muted); margin-right: 0.45rem; }
/* First compression: stack "Technologies" under Lubab when the header
   container hits ~875px (owner-measured). Hide nav when tighter. */
@container header-cq (max-width: 875px) {
  .wordmark {
    align-items: center;
    gap: 0.35rem;
  }
  .wordmark-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    line-height: 1;
  }
  .wordmark-name { font-size: 1.3125rem; }
  .wordmark-suffix {
    font: 500 0.625rem/1.2 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 1;
  }
  .wordmark-mark {
    width: 2.1rem;
    height: 2.1rem;
  }
}
@container header-cq (max-width: 39.5rem) {
  .site-nav { display: none; }
  .nav-cta { padding: 0.55rem 1rem; font-size: 0.9375rem; }
}

/* Theme toggle — quiet mono control; sits between nav and Start CTA.
   Hidden without JS (boot + controller both require script). */
html:not(.js) .theme-toggle { display: none; }
.theme-toggle {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle .theme-icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}
/* Dark mode → sun (switch to light). Light mode → moon (switch to dark). */
.theme-toggle .theme-icon--moon { display: none; }
[data-theme="light"] .theme-toggle .theme-icon--sun { display: none; }
[data-theme="light"] .theme-toggle .theme-icon--moon { display: block; }
.theme-toggle:hover {
  color: var(--ink);
  border-color: rgba(233, 241, 247, 0.22);
}
[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(7, 12, 20, 0.18);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- typography ---------- */
h1 {
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 1.25rem;
}
.kicker {
  font: 600 1.25rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.subhead { margin-top: 1.5rem; max-width: 54ch; color: var(--ink); font-size: 1.125rem; }
.lead {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 28ch;
  margin-top: 2rem;
}
.email {
  font-family: var(--mono);
  font-size: 0.9375em;
  -webkit-user-select: all;
  user-select: all;
}

/* ---------- CTAs ---------- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.cta {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  transition: border-color 0.15s ease, filter 0.15s ease;
}
.cta-primary { background: var(--accent-cta, var(--accent)); color: var(--on-accent, var(--bg)); }
.cta-primary:hover { filter: brightness(1.07); }
.hero-email { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }

/* ---------- services (baseline skin — restyled in PART 3) ---------- */
.service-list { margin-top: 2.5rem; display: grid; gap: 2.25rem; }
.service { position: relative; border-radius: 14px; }
.service h3 { margin-top: 0.4rem; font-size: 1.25rem; font-weight: 650; }
.service p { margin-top: 0.35rem; max-width: 52ch; color: var(--muted); }

/* Pointer-spotlight plumbing: core.js writes --mx/--my (%). Diffuse circular glow only —
   a smooth radial falloff is on the safe list; rayed/conic gradients are banned. */
@media (hover: hover) and (pointer: fine) {
  .service::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                var(--accent-glow), transparent 70%);
  }
  html.motion-ok .service:hover::after { opacity: 0.32; }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 2rem; }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.footer-legal,
.site-footer p.footer-legal { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); margin: 0; }
.footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font: 400 0.8125rem/1.6 var(--mono);
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--ink); }
.footer-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layer 0: aurora bands + grain ----------
   Elongated diagonal blurred bands, NEVER radial. */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; left: -20%; width: 140%; height: min(34vh, 340px); filter: blur(100px); }
.aurora i:nth-child(1) {
  top: 4%;
  transform: rotate(-18deg);
  opacity: 0.35;
  background: linear-gradient(90deg, transparent 5%, var(--aurora-1) 45%, transparent 95%);
}
.aurora i:nth-child(2) {
  top: 38%;
  transform: rotate(12deg);
  opacity: 0.3;
  background: linear-gradient(90deg, transparent 5%, var(--aurora-2) 50%, transparent 95%);
}
.aurora i:nth-child(3) {
  top: 72%;
  transform: rotate(-30deg);
  opacity: 0.3;
  background: linear-gradient(90deg, transparent 5%, var(--aurora-3) 55%, transparent 95%);
}
@media (prefers-reduced-motion: no-preference) {
  .aurora i:nth-child(1) { animation: drift-1 26s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation: drift-2 34s ease-in-out infinite alternate; }
  .aurora i:nth-child(3) { animation: drift-3 42s ease-in-out infinite alternate; }
}
@keyframes drift-1 {
  from { transform: rotate(-18deg) translateX(-7%); }
  to   { transform: rotate(-18deg) translateX(7%); }
}
@keyframes drift-2 {
  from { transform: rotate(12deg) translateX(7%); }
  to   { transform: rotate(12deg) translateX(-7%); }
}
@keyframes drift-3 {
  from { transform: rotate(-30deg) translateX(-7%); }
  to   { transform: rotate(-30deg) translateX(7%); }
}

/* Grain: base64 SVG feTurbulence tile (~0.5KB), fixed layer on top. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.04;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48ZmlsdGVyIGlkPSJnIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBmaWx0ZXI9InVybCgjZykiLz48L3N2Zz4=") repeat;
  background-size: 128px 128px;
}

/* ---------- Layer 1: reveal system ----------
   ONE IntersectionObserver (core.js) adds .in-view once per section, then unobserves.
   Children carry data-reveal + --i; stagger = --i * 70ms; groups ≤ 8 elements.
   Hidden states ONLY under html.js.motion-ok inside no-preference. */
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--spring), transform 0.7s var(--spring);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js.motion-ok .in-view [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   PART 2 — aqua token overrides (build-contract §3: single cold-aqua accent)
   ============================================================================ */
:root {
  --bg:          #070C14;   /* deep-ocean black base */
  --surface:     #0D1622;   /* cards / device frame / form fields */
  --ink:         #E9F1F7;   /* foreground text (17.2:1 — AAA) */
  --muted:       #B9C6D2;   /* secondary text — brightened for readability (~12:1 — AAA) */
  --accent:      #58E6D9;   /* the ONLY accent, cold aqua (12.8:1 — AAA) */
  --accent-glow: rgba(88, 230, 217, 0.18);  /* diffuse circular glow only */
  --ruled-line:  #1B2C3A;   /* stamp/record hairlines — cooler than flow-field lines */
  --field-border:#586E82;   /* form-field resting border — 3.4:1 vs #0D1622 fill (WCAG 1.4.11) */
  --aurora-1:    #0A2E33;   /* deep teal   (≤0.4α decorative) */
  --aurora-2:    #101B3A;   /* indigo-navy (≤0.4α decorative) */
  --aurora-3:    #06333B;   /* abyssal cyan(≤0.4α decorative) */
  --error:       #F4A9A0;   /* functional form-error tone (not a brand accent) — 10.6:1 AAA */
  --on-accent:   #070C14;   /* text on bright aqua CTAs */
  --accent-cta:  var(--accent);
  --kwh:         1.82em;    /* rotating-keyword window/reel line height (local em) */
}

/* ---------- theme bands — dark brand + light islands ----------
   Dark: hero, how, pricing, footer. Light: services, #start.
   Seams: hero→services, services→how, pricing→contact. Footer is a hard
   straight edge (no gradient seam, no wave divider). */
.theme-seam {
  position: relative;
  z-index: 2;
  height: clamp(48px, 8vh, 72px);
  pointer-events: none;
}
.theme-seam--to-light {
  background: linear-gradient(180deg,
    #070C14 0%,
    #0A1520 24%,
    #152433 48%,
    #7FA0B0 76%,
    #EEF4F7 100%);
}
.theme-seam--to-dark {
  background: linear-gradient(180deg,
    #EEF4F7 0%,
    #B8CCD8 30%,
    #243848 66%,
    #070C14 100%);
}

.theme-light-band {
  position: relative;
  z-index: 1;
  --bg:          #F4F8FA;
  --surface:     #FFFFFF;
  --ink:         #070C14;
  --muted:       #4A6270;
  --accent:      #0A5C56;   /* kickers/links on pale bg — darker for contrast */
  --accent-cta:  #58E6D9;   /* buttons — same bright aqua as dark theme */
  --on-accent:   #070C14;
  --ruled-line:  #B8CCD8;
  --field-border:#6B8496;
  --accent-glow: rgba(10, 92, 86, 0.12);
  --error:       #9B2C1F;
  background: var(--bg);
  color: var(--ink);
}
.theme-light-band .contact-head .field { opacity: 0.28; }
.theme-light-band .contact-head .form-title,
.theme-light-band .contact-head .form-sub {
  position: relative;
  z-index: 1;
}
/* Primary CTAs on pale bg: dark teal + light type (bright aqua + navy reads muddy). */
.theme-light-band .cta-primary {
  --accent-cta: #0A5C56;
  --on-accent: #F4F8FA;
}
.theme-light-band .cta-primary:hover {
  filter: brightness(1.08);
}
/* Services on light: hairlines + thumbs readable against pale bg */
.theme-light-band.services .service-list {
  border-bottom-color: rgba(7, 12, 20, 0.1);
}
.theme-light-band.services .service::before {
  background: rgba(7, 12, 20, 0.1);
}
.theme-light-band.services .service .service-thumb {
  border-color: rgba(7, 12, 20, 0.12);
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(7, 12, 20, 0.04);
}

.site-footer {
  position: relative;
  z-index: 1;
  background: #070C14;
  color: #E9F1F7;
  padding-block: 2rem;
  border-top: none;
}
/* Footer stays dark (matches brand sections). Brighter type than --muted so legal
   + Privacy/Careers stay readable on #070C14. */
.site-footer .footer-legal,
.site-footer p.footer-legal {
  color: #D5E0EA;
}
.site-footer .footer-links a {
  color: #D5E0EA;
}
.site-footer .footer-links a:hover {
  color: #FFFFFF;
}

/* ---------- Full-page light theme (html[data-theme="light"]) ----------
   Owner toggle: whole page pale. Band seams flatten; footer follows page tokens.
   Default (no attr / data-theme="dark") keeps the mixed dark + light-band layout. */
[data-theme="light"] {
  color-scheme: light;
  --bg:          #F4F8FA;
  --surface:     #FFFFFF;
  --ink:         #070C14;
  --muted:       #4A6270;
  --accent:      #0A5C56;
  --accent-cta:  #0A5C56;
  --on-accent:   #F4F8FA;
  --ruled-line:  #C5D4DE;
  --field-border:#6B8496;
  --accent-glow: rgba(10, 92, 86, 0.14);
  --error:       #9B2C1F;
  --aurora-1:    #C8E8E4;
  --aurora-2:    #D0D8E8;
  --aurora-3:    #B8DCE0;
}
[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink);
}
[data-theme="light"] .theme-seam {
  display: none;
}
[data-theme="light"] .theme-light-band {
  /* Same tokens as the page — keep band rules for CTAs/thumbs, no visual island */
  background: transparent;
}
[data-theme="light"] .site-footer {
  background: var(--bg);
  color: var(--ink);
}
[data-theme="light"] .site-footer .footer-legal,
[data-theme="light"] .site-footer p.footer-legal,
[data-theme="light"] .site-footer .footer-links a {
  color: var(--muted);
}
[data-theme="light"] .site-footer .footer-links a:hover {
  color: var(--ink);
}
[data-theme="light"] .aurora i {
  opacity: 0.22;
}
[data-theme="light"] .grain {
  opacity: 0.03;
}
[data-theme="light"] .section-backdrop {
  opacity: 0.12;
}
[data-theme="light"] .hero-visual::before,
[data-theme="light"] .how-visual::before {
  background: radial-gradient(ellipse at center, rgba(10, 92, 86, 0.1), transparent 68%);
}
[data-theme="light"] .hero-visual img,
[data-theme="light"] .how-visual img {
  filter: drop-shadow(0 14px 36px rgba(10, 92, 86, 0.1));
}
[data-theme="light"] .cta-primary {
  --accent-cta: #0A5C56;
  --on-accent: #F4F8FA;
}
[data-theme="light"] a.nav-cta.cta-primary {
  --nav-cta-ink: var(--accent);
  --nav-cta-fill: var(--accent);
}
[data-theme="light"] a.nav-cta.cta-primary:hover,
[data-theme="light"] a.nav-cta.cta-primary:focus-visible {
  color: var(--on-accent);
}
[data-theme="light"] .rail-lab {
  color: var(--ink);
  text-shadow:
    -1px -1px 0 #F4F8FA,
     1px -1px 0 #F4F8FA,
    -1px  1px 0 #F4F8FA,
     1px  1px 0 #F4F8FA,
     0 0 6px rgba(244, 248, 250, 0.95);
}
[data-theme="light"] .rail-item.cur .rail-lab {
  color: var(--accent);
  text-shadow:
    -1px -1px 0 #F4F8FA,
     1px -1px 0 #F4F8FA,
    -1px  1px 0 #F4F8FA,
     1px  1px 0 #F4F8FA,
    -2px  0 0 #F4F8FA,
     2px  0 0 #F4F8FA,
     0 -2px 0 #F4F8FA,
     0  2px 0 #F4F8FA,
     0 0 8px rgba(244, 248, 250, 0.98);
}
[data-theme="light"] .rail-item i {
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(244, 248, 250, 0.85);
}
[data-theme="light"] .rail-item.cur i {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 92, 86, 0.22);
}
[data-theme="light"] .rail::before {
  background: rgba(10, 92, 86, 0.28);
}
[data-theme="light"] .proc .pline {
  background: linear-gradient(180deg, var(--accent), rgba(10, 92, 86, 0.25));
}
[data-theme="light"] .stratum .bar {
  background: linear-gradient(90deg, var(--accent), rgba(10, 92, 86, 0.35));
}

/* Guard: small hero-layer parallax translates (≤12px) must never cause page h-scroll. */
body { overflow-x: hidden; }

/* ============================================================================
   PART 3 — Current skin, recolored aqua (02-design §3.B)
   Cinematic engineered calm: deep-ocean black, glacial aqua, horizontal current.
   ============================================================================ */

/* ---------- B.4 signature canvas (mounted by main.js) ----------
   Absolute overlay inside .signature-layer — occupies no layout space, zero CLS. */
.signature-layer .field { position: absolute; inset: 0; }

/* ---------- B.6 services: full-width stream rows (not cards) ---------- */
.service-list { display: block; margin-top: 2.5rem; border-bottom: 1px solid rgba(233, 241, 247, 0.1); }
.service {
  display: grid;
  grid-template-columns: 5.5rem minmax(9rem, 13rem) 1fr;
  gap: 1.5rem 1.25rem;
  align-items: baseline;
  padding-block: 1.6rem;
  border-radius: 0;
}
.service .service-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(233, 241, 247, 0.12);
  background: rgba(13, 22, 34, 0.6);
}
.service h3 { grid-column: 2; margin-top: 0; font-size: 1.375rem; font-weight: 800; }
/* description carries the value prop — full ink, not the footer-grey muted */
.service p { grid-column: 3; margin-top: 0; color: var(--ink); }
/* hairline separator (top of each row) — drawn on entry under motion */
.service::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(233, 241, 247, 0.1);
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok .services .service::before {
    transform: scaleX(0);
    transition: transform 0.7s var(--spring);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js.motion-ok .services.in-view .service::before { transform: scaleX(1); }
}
/* hover: underline draws left→right; content shifts 8px; spotlight (core) follows */
.service .u {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .service:hover .u { transform: scaleX(1); }
}
/* touch: brief full-width accent underline on :active */
.service:active .u { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .service .u { transition: transform 0.4s var(--spring); }
  html.motion-ok .service h3,
  html.motion-ok .service p { transition: transform 0.5s var(--spring); }
}
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .service:hover h3,
  html.motion-ok .service:hover p { transform: translateX(8px); }
}
@media (max-width: 700px) {
  .service {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem 1rem;
  }
  .service .service-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
  }
  .service h3 { grid-column: 2; grid-row: 1; }
  .service p { grid-column: 2; grid-row: 2; }
}

/* ---------- B.9 footer (no decorative divider) ---------- */
.site-footer { border-top: none; }

/* ---------- B.10 atmosphere overrides: three bands, blur 110px ---------- */
.aurora i { filter: blur(110px); }
.aurora i:nth-child(1) { top: 3%; transform: rotate(-14deg); opacity: 0.4; }   /* deep teal, hero */
.aurora i:nth-child(2) { top: 40%; transform: rotate(8deg); opacity: 0.3; }    /* indigo-navy */
.aurora i:nth-child(3) { top: 70%; transform: rotate(-22deg); opacity: 0.34; } /* abyssal cyan */
@media (prefers-reduced-motion: no-preference) {
  .aurora i:nth-child(1) { animation-duration: 28s; }
  .aurora i:nth-child(2) { animation-duration: 36s; }
  .aurora i:nth-child(3) { animation-duration: 44s; }
}
/* re-declared with Current angles — later @keyframes of the same name win */
@keyframes drift-1 {
  from { transform: rotate(-14deg) translateX(-7%); }
  to   { transform: rotate(-14deg) translateX(7%); }
}
@keyframes drift-2 {
  from { transform: rotate(8deg) translateX(7%); }
  to   { transform: rotate(8deg) translateX(-7%); }
}
@keyframes drift-3 {
  from { transform: rotate(-22deg) translateX(-7%); }
  to   { transform: rotate(-22deg) translateX(7%); }
}
/* Grain: paper-tooth level per §3 */
.grain { opacity: 0.05; }

/* ============================================================================
   PART 4 — Ledger stamp/rule/type choreography, recolored warm → aqua
   (rules use --ruled-line; prompt/cursor inherit the aqua --accent)
   ============================================================================ */

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

/* Skip-to-content: first focusable element in the body; off-screen until focused,
   then revealed as an accent chip above the grain layer (z 40). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: var(--bg);
  font: 600 0.9375rem/1.2 var(--sans);
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================================
   PART 5 — Watermark hero fusion + lead form (net-new)
   ============================================================================ */

/* ---------- nav: "Start a project" — stamp CTA (current fills the record) ----------
   Outline aqua frame at rest; on hover/focus the fill draws left→right (same grammar
   as service underlines / H1 hairlines). Sharp 2px corners — not a soft SaaS pill.
   Form submit keeps the solid .cta-primary fill. */
.site-header .nav-row { justify-content: flex-start; }
.site-header .wordmark { margin-right: auto; }
a.nav-cta.cta-primary {
  --nav-cta-ink: var(--accent);
  --nav-cta-fill: var(--accent);
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.65rem 1.35rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1.2;
  border-radius: 2px;
  border: 1px solid var(--nav-cta-ink);
  background: transparent;
  color: var(--nav-cta-ink);
  overflow: hidden;
  transition: color 0.4s var(--spring), border-color 0.25s ease;
}
a.nav-cta.cta-primary:hover { filter: none; }
a.nav-cta.cta-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-cta-fill);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: -1;
}
a.nav-cta.cta-primary .nav-cta-label {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  a.nav-cta.cta-primary::before {
    transition: transform 0.5s var(--spring);
  }
}
a.nav-cta.cta-primary:hover,
a.nav-cta.cta-primary:focus-visible {
  color: var(--bg);
  border-color: var(--nav-cta-fill);
}
a.nav-cta.cta-primary:hover::before,
a.nav-cta.cta-primary:focus-visible::before {
  transform: scaleX(1);
}
a.nav-cta.cta-primary:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  a.nav-cta.cta-primary {
    background: var(--nav-cta-fill);
    color: var(--bg);
  }
  a.nav-cta.cta-primary::before { display: none; }
}

/* ---------- hero H1: SANS display, stamped onto aqua hairlines ---------- */
.hero-h1 {
  font-family: var(--sans);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-top: 0;
}
.hero-h1 .h1-line { display: block; }
.hero-h1 .stamp { display: inline-block; }
.hero-h1 .stamp.accent { color: var(--accent); }
/* two aqua H1 hairlines: one under each line (the typed-line rule is the third) */
.hero-h1 .h1-line::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--ruled-line);
  margin-top: 0.3em;
}
.hero-body { margin-top: 1.4rem; }

/* ---------- hero rotating-keyword subhead (ported from Current preview §B.5) ----------
   Base (no-JS / reduced motion): the full static sentence (.kw-full) shows; .kw-anim is
   hidden — the complete page in its final state. Motion-ok: .kw-full goes visually-hidden
   (it stays the accessible text, still in the a11y tree), the aria-hidden animated layer
   shows, and one keyword rolls vertically through the slot. main.js sizes the slot to the
   current word's real offsetWidth (measured on the actual element, so it's correct in every
   browser incl. Safari) so the gap hugs the word and never clips. */
.kw-anim { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok .kw-full {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.js.motion-ok .kw-anim { display: inline; }
  html.js.motion-ok .kw-slot {
    display: inline-block;
    vertical-align: bottom;
    width: 8ch;              /* initial ≈ "software"; main.js sets the exact px from the real word's offsetWidth (correct in every browser) + animates the width */
    height: var(--kwh);
    overflow: hidden;
    font: 500 0.9375em/1.82 var(--mono);
    color: var(--accent);
    transition: width 0.45s var(--spring);
  }
  html.js.motion-ok .kw-word { display: inline-block; white-space: nowrap; will-change: transform, opacity; }
}

/* Signature choreography — hidden pre-states ONLY under html.js.motion-ok inside
   no-preference. Rules: scaleX 0→1 origin-left, 600ms spring, 90ms stagger.
   Words: opacity 0→1 + scale 1.12→1 + translateY(-4px)→0 + rotateX(-6°→0°) press,
   260ms spring, 70ms stagger from +300ms. */
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok .hero .h1-line::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--spring);
  }
  html.js.motion-ok .hero .h1-line:first-child::after { transition-delay: 0ms; }
  html.js.motion-ok .hero .h1-line:last-child::after { transition-delay: 90ms; }
  html.js.motion-ok .hero.in-view .h1-line::after { transform: scaleX(1); }

  /* the ONE hero 3D press — perspective() kept inline per-word so no preserve-3d chain
     is needed (robust, self-contained); rotateX presses each word flat as it lands */
  html.js.motion-ok .hero .stamp {
    opacity: 0;
    transform: perspective(700px) rotateX(-6deg) scale(1.12) translateY(-4px);
    transform-origin: center bottom;
    transition: opacity 0.26s var(--spring), transform 0.26s var(--spring);
    transition-delay: calc(300ms + var(--w, 0) * 70ms);
  }
  html.js.motion-ok .hero.in-view .stamp { opacity: 1; transform: none; }
}

/* ---------- CTA cursor-tilt (3D #2): ±4° on an inner span, layered on core's magnetic ---------- */
.cta { perspective: 500px; }
.cta-tilt { display: inline-block; }
button.cta {
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  -webkit-appearance: none;
  appearance: none;
}
button.cta[disabled] { opacity: 0.6; cursor: default; }

/* ---------- lead form ---------- */
.form-title {
  margin-top: 0;
  font-family: var(--sans);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.form-sub { margin-top: 0.9rem; max-width: 46ch; color: var(--ink); }
.lead-form { margin-top: 2.5rem; max-width: 660px; margin-inline: auto; }
.form-req-note { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); margin-bottom: 1.6rem; }
.form-req-note .req { color: var(--accent); }

.form-grid { display: grid; gap: 1.6rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
}

.field { position: relative; }
.field > label {
  display: block;
  font: 600 0.8125rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.field .req { color: var(--accent); margin-left: 0.15em; }
.field-hint { display: block; margin: 0.45rem 0 0; font: 400 0.75rem/1.4 var(--mono); color: var(--muted); }
.field-input { position: relative; }
.field input,
.field textarea {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 8rem; }
/* border-color + drawn underline are the focus polish; the core :focus-visible
   outline is deliberately NOT suppressed so keyboard focus stays clearly visible. */
.field input:focus,
.field textarea:focus { border-color: var(--accent); }
/* focus draws an aqua underline (reuse the line grammar) */
.field-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .field-line { transition: transform 0.4s var(--spring); }
}
.field-input:focus-within .field-line { transform: scaleX(1); }
/* error state — conveyed by TEXT (message) + aria-invalid + focus, never color alone */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }
.field-err {
  display: block;
  min-height: 1.15em;
  margin-top: 0.45rem;
  font: 500 0.8125rem/1.4 var(--mono);
  color: var(--error);
}

/* ---------- category multi-select (optional) ----------
   Real <input type="checkbox" name="category"> chips — native, zero-JS, keyboard
   accessible. Multiple checked → repeated `category=` params (URLSearchParams AND the
   no-JS POST both serialize them). accent-color paints the native check aqua; a subtle
   aqua wash marks the checked chip. The <fieldset>/<legend> is the group label; each
   input pairs with its own <label>. Optional field — no required asterisk. */
.cat-field {
  border: 0;
  padding: 0;
  min-inline-size: 0;   /* fieldset defaults to min-content width → let it shrink in the grid */
}
.cat-field legend {
  display: block;
  padding: 0;
  font: 600 0.8125rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.cat-hint {
  display: block;
  margin-top: 0.4rem;
  font: 400 0.8125rem/1.5 var(--mono);
  color: var(--muted);
}
.cat-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 480px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .cat-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.cat-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cat-chip:hover { border-color: var(--accent); }
/* higher specificity than `.field input` — custom empty square (not a solid block
   that reads as "already checked" on the light form band) */
.cat-chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--field-border);
  border-radius: 3px;
  background: var(--surface);
  background-image: none;
  box-shadow: none;
  accent-color: unset;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cat-chip:hover input[type="checkbox"] {
  border-color: var(--accent);
}
.cat-chip input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23F4F8FA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 L6.5 11.5 L12.5 4.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.cat-chip input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cat-chip-label {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink);
}
/* checked state: aqua wash + accent border (native check is already aqua). Degrades
   cleanly where :has() is unsupported — the native checkmark still signals state. */
.cat-chip:has(:checked) {
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* fields stamp in on reveal (ledger register) via the core [data-reveal] rise */

.form-actions { margin-top: 1.9rem; }
.form-status {
  margin-top: 1.15rem;
  min-height: 1.5em;
  font-size: 0.95rem;
  color: var(--muted);
}
.form-status.is-success { color: var(--accent); }
.form-status.is-error { color: var(--error); }
.form-note { margin-top: 1.4rem; max-width: 60ch; font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); }
.form-fallback { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--muted); }

/* honeypot: off-screen, not display:none (bots skip display:none) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- how we work: pipeline steps (mono phase labels) ----------
   The <ol> carries list semantics; data-phase on each <li> feeds the decorative
   aqua register mark. Phase names mirror the pipeline diagram (Plan → Deliver). */
.steps {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.6rem;
  max-width: 52ch;
}
.steps li {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.4;
}
.steps li::before {
  content: attr(data-phase);
  font: 600 0.625rem/1.25 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.35em;
}
@media (max-width: 700px) {
  .steps li { grid-template-columns: 4.75rem 1fr; gap: 0.75rem 1rem; }
  .steps li::before { font-size: 0.5625rem; letter-spacing: 0.06em; }
}

/* ---------- pricing ---------- */
.pricing-body { margin-top: 1.5rem; max-width: 60ch; color: var(--ink); }
.pricing-cta {
  margin-top: 1.9rem;
  display: flex;
  justify-content: center;
}
.text-link {
  display: inline-block;
  font: 500 0.9375rem/1.4 var(--mono);
  color: var(--accent);
  border-bottom: 1px solid var(--ruled-line);
  padding-bottom: 3px;
  transition: border-color 0.15s ease;
}
.text-link:hover { border-color: var(--accent); }

/* ============================================================================
   PART 6 — landing-page-imagery: section visuals (owner bundle C7/C9/C11/C12/
   C16/C20 + CD-1 raster backdrops). Same gate contract as everything above:
   hidden pre-states ONLY under html.js.motion-ok inside no-preference; no-JS
   and reduced-motion users get every visual complete. Scrubbed pieces run on
   native CSS scroll-driven animations (@supports animation-timeline: view())
   driving ONE registered custom property each; main.js writes that same single
   property as the rAF fallback. All geometry horizontal/linear — open polylines
   only; the C9 glow is a diffuse falloff (the one permitted round element).
   ============================================================================ */

/* Scrub properties: registered so the native scroll-timeline path can interpolate
   them. initial-value 1 = the complete state — the default everywhere the
   animation/scrub isn't running. */
@property --bp { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sp { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- CD-1 raster backdrops (Pricing only) ----------
   Owned generated artwork, self-hosted WebP. Decorative atmosphere: absolutely
   positioned (zero CLS), lazy, non-LCP, masked so it dissolves into the #070C14
   base at the section edges. Sits above the fixed aurora bands, below all text
   (the .container paints later) and below the grain overlay. Static in every
   state — nothing to disarm. */
.has-backdrop { position: relative; }
.has-backdrop > .container { position: relative; }
.section-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 0.3 keeps worst-case text contrast ≥ 4.5:1 (AA): the brightest pixel of either
     artwork composited at 0.3 over #070C14 measures 4.6:1+ against --muted and
     5.2:1+ against --accent (verified against the shipped WebPs). Don't raise. */
  opacity: 0.3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

/* ---------- C16 braided current (Services header) ----------
   One current splits into six labeled strands — every path an OPEN polyline
   sharing one start; labels are decorative mono duplicates of the real service
   names below (the whole block is aria-hidden). Draw-on is scrubbed by --bp
   (0 = nothing drawn, 1 = complete braid); per-strand stagger via --d. */
.braid { margin-top: 2.75rem; width: 100%; max-width: 760px; margin-inline: auto; }
.braid svg { width: 100%; height: auto; }
.braid .braid-h { aspect-ratio: 940 / 320; }
.braid .braid-v { display: none; aspect-ratio: 400 / 340; max-width: 340px; margin-inline: auto; }
@media (max-width: 700px) {
  .braid .braid-h { display: none; }
  .braid .braid-v { display: block; }
}
.braid path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-opacity: 0.8;
  /* draw progress: strand i spans --bp ∈ [--d, --d + ~0.69] */
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--bp) - var(--d, 0)) * 1.45, 1));
}
.braid text {
  font: 600 16px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
  /* label ignites (muted → accent) as its strand completes */
  fill: color-mix(in srgb,
        var(--accent) calc(clamp((var(--bp) - var(--d, 0)) * 1.45 - 0.9, 0, 0.1) * 1000%),
        var(--muted));
}
@media (prefers-reduced-motion: no-preference) {
  /* pre-state (nothing drawn) exists only under the full gate */
  html.js.motion-ok .braid { --bp: 0; }
  @supports (animation-timeline: view()) {
    html.js.motion-ok .braid {
      animation: braid-progress linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 55%;
    }
  }
}
@keyframes braid-progress { from { --bp: 0; } to { --bp: 1; } }

/* ---------- C9 process current (How we work) ----------
   The spine grows with scroll (--sp 0→1), a diffuse glow rides its tip, and
   main.js stamps each step (.hit — number press + tick draw) as the line
   reaches it, reversibly. No-JS / reduced motion: full spine, all steps
   registered, glow hidden. */
.proc { position: relative; padding-left: 2.6rem; }
/* (the .steps 2.5rem top margin collapses through .proc — the ol sits at y=0
   inside it, so the spine anchors at 0.5rem, not 2.5rem) */
.proc .pline {
  position: absolute;
  left: 0.9rem;
  top: 0.5rem;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--accent), rgba(88, 230, 217, 0.25));
  transform-origin: top;
  transform: scaleY(var(--sp, 1));
}
/* glow carrier: a spine-height invisible column translated by --sp so the ::after
   dot rides the tip — transform-only (zero layout shift, compositor-friendly) */
.proc .pglow {
  display: none;
  position: absolute;
  left: calc(0.9rem - 3px);
  top: 0.5rem;
  bottom: 0;
  width: 8px;
  pointer-events: none;
  transform: translateY(calc((var(--sp, 1) - 1) * 100%));
}
.proc .pglow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border-radius: 4px; /* diffuse tip falloff — permitted round element */
  background: var(--accent);
  filter: blur(3px);
  opacity: 0.9;
}
.proc .steps li { position: relative; }
/* register tick: draws from the spine toward the step number on .hit */
.proc .steps li::after {
  content: "";
  position: absolute;
  left: -1.7rem;
  top: 0.85em;
  width: 16px;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
}
@media (max-width: 700px) {
  .proc { padding-left: 2.1rem; }
  .proc .pline { left: 0.65rem; }
  .proc .pglow { left: calc(0.65rem - 3px); }
  .proc .steps li::after { left: -1.45rem; width: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok .proc { --sp: 0; }
  html.js.motion-ok .proc .pglow { display: block; }
  @supports (animation-timeline: view()) {
    html.js.motion-ok .proc {
      animation: proc-progress linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 50%;
    }
  }
  /* step pre-states + reversible stamps (class toggled by main.js) */
  html.js.motion-ok .proc .steps li {
    opacity: 0.35;
    transition: opacity 0.5s var(--spring);
  }
  html.js.motion-ok .proc .steps li.hit { opacity: 1; }
  html.js.motion-ok .proc .steps li::before {
    opacity: 0;
    transform: perspective(700px) rotateX(-6deg) scale(1.14);
    transform-origin: center bottom;
    transition: opacity 0.28s var(--spring), transform 0.28s var(--spring);
  }
  html.js.motion-ok .proc .steps li.hit::before { opacity: 1; transform: none; }
  html.js.motion-ok .proc .steps li::after {
    transform: scaleX(0);
    transition: transform 0.4s var(--spring);
  }
  html.js.motion-ok .proc .steps li.hit::after { transform: scaleX(1); }
}
@keyframes proc-progress { from { --sp: 0; } to { --sp: 1; } }

/* ---------- C11 scope equalizer (Pricing) ----------
   Three labeled strata drifting between proportions — transform-only, ≥9s cycle,
   running only while onscreen (.is-on, toggled both ways by main.js). Reduced
   motion / no-JS: fixed handsome proportions (--w), complete and still. Each
   cycle starts at its --w base so arming never snaps. */
.strata { margin-top: 2rem; max-width: 560px; display: grid; gap: 1.1rem; }
.stratum {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
.stratum .lab {
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.stratum .track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(185, 198, 210, 0.14);
}
.stratum .bar {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(88, 230, 217, 0.35));
  transform-origin: left;
  transform: scaleX(var(--w, 0.5));
}
@media (prefers-reduced-motion: no-preference) {
  html.js.motion-ok .strata.is-on .stratum:nth-child(1) .bar { animation: eq-1 10s ease-in-out infinite; }
  html.js.motion-ok .strata.is-on .stratum:nth-child(2) .bar { animation: eq-2 10s ease-in-out infinite; }
  html.js.motion-ok .strata.is-on .stratum:nth-child(3) .bar { animation: eq-3 10s ease-in-out infinite; }
}
/* every project is a different mix — the strata slowly re-balance */
@keyframes eq-1 { 0%, 100% { transform: scaleX(0.62); } 33% { transform: scaleX(0.34); } 66% { transform: scaleX(0.78); } }
@keyframes eq-2 { 0%, 100% { transform: scaleX(0.44); } 33% { transform: scaleX(0.72); } 66% { transform: scaleX(0.30); } }
@keyframes eq-3 { 0%, 100% { transform: scaleX(0.80); } 33% { transform: scaleX(0.52); } 66% { transform: scaleX(0.64); } }

/* ---------- C12 the field re-awakens (Start a project header) ----------
   main.js mounts a second flow-field canvas behind the header text ONLY (the
   wrapper ends before the form). z-index -1 inside the head's own stacking
   context keeps it under the text; pointer-events none keeps it inert. */
.contact-head { position: relative; z-index: 0; }
.contact-head .field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- C20 ledger rail (page-wide wayfinder) ----------
   Fixed right-edge register of labeled section links + connected dots.
   Built by main.js — absent no-JS. Hidden below 900px.
   Inactive labels: hover/focus only. Current label: always visible. */
.rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 16px;
  justify-items: end;
}
/* Vertical connector through the dot column */
.rail::before {
  content: "";
  position: absolute;
  right: 3.25px; /* centers on 8px dots */
  top: 4px;
  bottom: 4px;
  width: 1.5px;
  background: rgba(88, 230, 217, 0.35);
  pointer-events: none;
  z-index: 0;
}
.rail-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 2px;
  min-height: 1.25rem;
}
.rail-item:hover .rail-lab,
.rail-item:focus-visible .rail-lab {
  opacity: 1;
  transform: translate(0, -50%);
}
.rail-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.rail-lab {
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  transform: translate(3px, -50%);
  font: 600 0.625rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E9F1F7;
  white-space: nowrap;
  text-align: right;
  opacity: 0;
  pointer-events: none;
  /* Dual halo: dark outline for pale bg, soft light bloom for dark bg */
  text-shadow:
    -1px -1px 0 #070C14,
     1px -1px 0 #070C14,
    -1px  1px 0 #070C14,
     1px  1px 0 #070C14,
     0 0 6px rgba(7, 12, 20, 0.9),
     0 0 1px rgba(233, 241, 247, 0.45);
}
.rail-item i {
  display: block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #58E6D9;
  opacity: 0.45;
  transform-origin: center;
  box-shadow: 0 0 0 1px rgba(7, 12, 20, 0.35);
}
.rail-item.cur i {
  background: #58E6D9;
  opacity: 1;
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(88, 230, 217, 0.28);
}
.rail-item.cur .rail-lab {
  opacity: 1;
  transform: translate(0, -50%);
  color: #58E6D9;
  text-shadow:
    -1px -1px 0 #070C14,
     1px -1px 0 #070C14,
    -1px  1px 0 #070C14,
     1px  1px 0 #070C14,
    -2px  0 0 #070C14,
     2px  0 0 #070C14,
     0 -2px 0 #070C14,
     0  2px 0 #070C14,
     0 0 8px rgba(7, 12, 20, 0.95),
     0 0 2px rgba(233, 241, 247, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .rail-item i,
  .rail-lab {
    transition:
      transform 0.35s var(--spring),
      opacity 0.25s ease,
      color 0.25s ease,
      box-shadow 0.35s ease;
  }
}
@media (max-width: 900px) {
  .rail { display: none; }
}