/*
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Genre: atmospheric · tone: exact, technical, quietly strange
 * Theme: studied-DNA (source: five supplied Refero style references) · anchor: TLDNXS blue
 * Macrostructure: Feature Stack · enrichment: H9 particle logo · nav: N9 · footer: Ft5
 * Contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57)
 */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--surface-deep);
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background: var(--surface-deep);
  color: var(--ink-strong);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: color-mix(in oklch, var(--brand-blue) 24%, transparent);
}

body::selection {
  background: var(--brand-blue);
  color: var(--ink-strong);
}

img,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

a,
button {
  touch-action: manipulation;
}

a:active {
  color: var(--brand-blue-bright);
}

[id] {
  scroll-margin-top: 5.5rem;
}

button,
input,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-mist);
  color: var(--ink-dark);
  font-weight: 600;
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.edge-nav {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  padding-right: max(1.5rem, env(safe-area-inset-right), calc((100vw - 90rem) / 2));
  padding-left: max(1.5rem, env(safe-area-inset-left), calc((100vw - 90rem) / 2));
  border-bottom: 1px solid transparent;
  font-family: var(--font-header);
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out);
}

.edge-nav.is-scrolled {
  border-color: var(--rule-soft);
  background: color-mix(in oklch, var(--surface-deep) 82%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  text-decoration: none;
}

.brand-lockup img {
  width: 1.75rem;
  height: 2rem;
  object-fit: contain;
}

.brand-word {
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.brand-word.footer {
  font-size: 5rem;
  margin-left: 15px;
}

.site-footer {
  background: #0b101c;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #f4f7fa;
  font-family: var(--font-header, system-ui, sans-serif);
  padding: 3rem clamp(1.25rem, 5vw, 5rem) 1.5rem;
  position: relative;
  z-index: 1;
}

.site-footer__top,
.site-footer__meta {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 76rem;
}

.site-footer__top { align-items: end; border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-bottom: 2rem; }
.site-footer__brand { align-items: center; color: inherit; display: inline-flex; flex-wrap: nowrap; font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 700; gap: 0.45em; letter-spacing: 0.08em; line-height: 0.9; text-decoration: none; white-space: nowrap; }
.site-footer__brand img { flex: 0 0 auto; height: 1.25em; width: 1.25em; }
.site-footer__top p { color: #bac5d0; font-family: var(--font-body, system-ui, sans-serif); line-height: 1.5; margin: 0; max-width: 31rem; }
.site-footer__meta { align-items: start; color: #aab7c5; font-size: 0.75rem; letter-spacing: 0.04em; padding-top: 1.25rem; }
.site-footer__meta nav { display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem; justify-content: end; }
.site-footer a { color: inherit; }
.site-footer__contact { align-items: center; display: inline-flex; }
.site-footer__contact svg { fill: none; height: 1.1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.1rem; }

@media (max-width: 42rem) {
  .site-footer__top,
  .site-footer__meta { align-items: start; flex-direction: column; }
  .site-footer__meta nav { justify-content: start; }
}

.brand-by {
  padding-left: 0.7rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.76rem;
}

.edge-nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.quiet-link,
.text-action {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.3em;
  transition: color 180ms ease;
}

button.text-action {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

.quiet-link:hover,
.text-action:hover {
  color: var(--ink-strong);
  text-decoration: underline;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid color-mix(in oklch, var(--brand-blue-action) 82%, var(--ink-strong));
  border-radius: 0;
  background: var(--brand-blue-action);
  box-shadow: 0 0.7rem 1.7rem color-mix(in oklch, var(--brand-blue-action) 24%, transparent);
  color: var(--action-ink);
  font-size: 0.92rem;
  font-weight: 600;
  gap: 0.65rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform 220ms var(--ease-out),
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.action::after {
  content: "";
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  background: var(--action-ink);
  -webkit-mask: url("../images/esotech-logo-white.svg") center / contain no-repeat;
  mask: url("../images/esotech-logo-white.svg") center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .action:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--brand-blue-bright) 54%, var(--brand-blue-action));
    background-color: var(--brand-blue-action-hover);
    box-shadow:
      0 0.95rem 2rem color-mix(in oklch, var(--brand-blue-action) 28%, transparent),
      0 0 0 1px color-mix(in oklch, var(--brand-blue-bright) 12%, transparent);
  }

  .action:hover::after {
    background: var(--action-ink);
    transform: translate(0.12rem, -0.12rem) rotate(-90deg);
  }
}

.action:active {
  transform: translateY(0) scale(0.985);
}

.action[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.action--small {
  min-height: 2.75rem;
  padding-inline: 1.1rem;
  font-size: 0.84rem;
}

.action--small::after {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.66rem;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 112svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 42%, color-mix(in oklch, var(--brand-blue) 13%, transparent), transparent 32%),
    var(--surface-deep);
}

.particle-field,
.particle-fallback,
.hero-haze {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.particle-field {
  z-index: -1;
  pointer-events: none;
}

.particle-fallback {
  z-index: -2;
  inset: auto;
  top: 47%;
  left: 74%;
  width: min(52vw, 46rem);
  height: min(70vh, 46rem);
  object-fit: contain;
  opacity: 0.62;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1.8rem 4rem color-mix(in oklch, var(--brand-blue) 24%, transparent));
  pointer-events: none;
  transition: opacity 460ms var(--ease-out);
}

.particle-field.is-ready ~ .particle-fallback {
  opacity: 0;
}

.hero-haze {
  z-index: -1;
  background: linear-gradient(90deg, var(--surface-deep) 0%, color-mix(in oklch, var(--surface-deep) 92%, transparent) 39%, transparent 67%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: end;
  min-height: 100svh;
  padding-block: 9rem 12rem;
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 44rem;
}

.hero__signal,
.section-cue {
  margin: 0 0 2rem;
  color: var(--brand-blue-bright);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero h1,
.platform-statement h2,
.flow-heading h2,
.handoff h2,
.built-close h2,
.walkthrough h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(4rem, 6vw, 5.35rem);
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.hero__lede {
  max-width: 62ch;
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.text-action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
}

.text-action__arrow {
  display: inline-block;
  color: var(--brand-blue-bright);
  transform: rotate(0deg);
  transition: transform 220ms var(--ease-out);
}

.text-action[aria-expanded="true"] .text-action__arrow {
  transform: rotate(180deg);
}

.hero__seam {
  position: absolute;
  inset: auto 0 0;
  height: 7rem;
  overflow: hidden;
}

.hero__seam span {
  position: absolute;
  inset: 42% -4% -58%;
  transform: rotate(-2.5deg);
  transform-origin: 50% 0;
  background: var(--surface-raised);
}

.signal-rail {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-block: 1px solid var(--rule-soft);
  background: var(--surface-raised);
  display: none; /* Hiding for now until we have more content to fill the rail. */
}

.signal-rail__track {
  display: flex;
  width: max-content;
  animation: signal-marquee 34s linear infinite;
}

.signal-rail:hover .signal-rail__track,
.signal-rail:focus .signal-rail__track,
.signal-rail:focus-within .signal-rail__track {
  animation-play-state: paused;
}

.signal-rail.is-offscreen .signal-rail__track {
  animation-play-state: paused;
}

.signal-rail__set {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  padding: 1rem 0 1rem 1.7rem;
  color: var(--ink-soft);
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-rail__set i {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0.25rem 0.8rem color-mix(in oklch, var(--brand-blue) 65%, transparent);
}

@keyframes signal-marquee {
  to { transform: translateX(-50%); }
}

.chapter {
  position: relative;
}

.chapter-seam {
  position: absolute;
  z-index: 1;
  inset: -5.5rem 0 auto;
  height: 5.6rem;
  overflow: hidden;
  pointer-events: none;
}

.chapter-seam__plane {
  position: absolute;
  inset: 45% -20% -70%;
  transform: rotate(2deg);
  background: inherit;
}

.chapter-seam--reverse .chapter-seam__plane {
  transform: rotate(-2deg);
}

.platform-statement {
  padding: var(--space-10) 0;
  background: var(--surface-raised);
}

.platform-statement .chapter-seam {
  background: var(--surface-raised);
}

.platform-statement__inner {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 2rem;
  align-items: end;
}

.platform-statement h2 {
  max-width: 18ch;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
}

.platform-statement__inner > p:last-child {
  align-self: end;
  max-width: 45ch;
  margin: 0 0 0.45rem;
  color: var(--ink-soft);
}

.feature-flow {
  padding: var(--space-10) 0 0;
  background: var(--surface-deep);
}

.flow-heading {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 3rem;
  align-items: end;
  padding-bottom: var(--space-9);
}

.flow-heading h2 {
  font-size: clamp(3.3rem, 6.2vw, 4rem);
}

.flow-heading p {
  max-width: 34rem;
  margin: 0 0 0.55rem;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.feature-stage {
  display: grid;
  grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.flow-copy-rail {
  position: sticky;
  top: 5rem;
  height: calc(100svh - 5rem);
  display: grid;
  align-items: center;
}

.flow-copy-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule), transparent);
}

.flow-copy {
  position: relative;
  grid-area: 1 / 1;
  max-width: 29rem;
  padding-left: 2rem;
  opacity: 0;
  transform: translateY(1.5rem);
  pointer-events: none;
  transition: opacity 460ms var(--ease-out), transform 620ms var(--ease-out);
}

.flow-copy::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: -0.22rem;
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--brand-blue-bright);
  border-radius: 50%;
  background: var(--surface-deep);
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}

.flow-copy.is-active::before,
.flow-copy:first-child::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 0.35rem color-mix(in oklch, var(--brand-blue) 15%, transparent);
}

.flow-copy.is-active,
.flow-copy:first-child {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.flow-copy-rail.has-active .flow-copy:first-child:not(.is-active) {
  opacity: 0;
  transform: translateY(-1.5rem);
}

.flow-index {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--brand-blue-bright);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.flow-copy h3 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.flow-copy p {
  max-width: 45ch;
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

.feature-visuals {
  padding-bottom: var(--space-10);
}

.feature-shot {
  min-height: 92svh;
  margin: 0;
  display: flex;
  align-items: center;
  perspective: 1000px;
}

.screen-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
  background: var(--surface-active);
  box-shadow: 0 2.2rem 5rem color-mix(in oklch, var(--surface-deep) 72%, transparent), inset 0 1px color-mix(in oklch, var(--ink-strong) 8%, transparent);
  transform-origin: 50% 50%;
  transition: border-color 480ms var(--ease-out), box-shadow 620ms var(--ease-out);
}

.screen-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklch, var(--brand-blue) 10%, transparent), transparent 24%);
  pointer-events: none;
}

.feature-shot.is-active .screen-frame {
  border-color: color-mix(in oklch, var(--brand-blue) 52%, var(--rule));
  box-shadow: 0 2.8rem 6rem color-mix(in oklch, var(--surface-deep) 78%, transparent), 0 0 0 1px color-mix(in oklch, var(--brand-blue) 12%, transparent);
}

.screen-frame--offset {
  transform: translateX(-3vw) rotate(-0.8deg);
}

.screen-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.743 / 1;
  object-fit: cover;
}

.screen-caption {
  position: absolute;
  z-index: 1;
  inset: auto 1rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in oklch, var(--ink-strong) 14%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--surface-deep) 72%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Pinned slideshow, contained within the shell. `.is-flow-pinned` is only
   ever added by refero-home.js once GSAP/ScrollTrigger has actually created
   the pin (see initScrollMotion), so no-JS and prefers-reduced-motion
   visitors keep the sticky-column layout above instead — every slide stays
   reachable there through normal scroll.

   `--nav-clearance` matches .edge-nav's min-height at this breakpoint (5rem)
   so the pinned card sits below the fixed nav instead of under it. */
@media (min-width: 48.0625rem) {
  .feature-stage.is-flow-pinned {
    --nav-clearance: 5rem;
    position: relative;
    display: block;
    width: var(--shell);
    margin-inline: auto;
    height: calc(100svh - var(--nav-clearance));
  }

  .feature-stage.is-flow-pinned .flow-copy-rail {
    position: absolute;
    inset: 0;
    z-index: 2;
    height: auto;
    padding: 2.5rem 2.5rem 0 2.5rem;
    background: linear-gradient(90deg, color-mix(in oklch, var(--surface-deep) 82%, transparent) 0%, color-mix(in oklch, var(--surface-deep) 45%, transparent) 34%, transparent 60%);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }

  .feature-stage.is-flow-pinned .feature-visuals {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding-bottom: 0;
  }

  .feature-stage.is-flow-pinned .feature-shot {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 900ms var(--ease-out);
  }

  .feature-stage.is-flow-pinned .feature-shot.is-active {
    opacity: 1;
    z-index: 1;
  }

  /* Card chrome (border, radius, shadow) is kept from the base .screen-frame
     rules above — only positioning changes so the card fills the pinned
     stage instead of sizing to the image's aspect ratio. The alternating
     rotated "offset" look doesn't read well at this size, so it's flattened. */
  .feature-stage.is-flow-pinned .screen-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .feature-stage.is-flow-pinned .screen-frame--offset {
    transform: none;
  }

  .feature-stage.is-flow-pinned .screen-frame img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

.handoff {
  padding: var(--space-10) 0;
  background: var(--surface-mist);
  color: var(--ink-dark);
  display: none;
}

.handoff .chapter-seam {
  background: var(--surface-mist);
}

.handoff__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.handoff .section-cue {
  color: var(--brand-blue-dark-label);
}

.handoff h2 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.5vw, 5.6rem);
}

.handoff__copy > p:last-child {
  max-width: 45ch;
  margin: 2rem 0 0;
  color: color-mix(in oklch, var(--ink-dark) 75%, transparent);
  font-size: 1.08rem;
}

.departure-board {
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--ink-dark) 14%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--surface-deep) 86%, transparent);
  box-shadow: 0 2.2rem 5rem color-mix(in oklch, var(--surface-deep) 30%, transparent);
  color: var(--ink-strong);
}

.departure-board__head,
.board-row {
  display: grid;
  grid-template-columns: 1.1fr 2.3fr 0.9fr;
  align-items: center;
  gap: 1rem;
}

.departure-board__head {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-muted);
  font-family: var(--font-data);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-toggle {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.board-toggle:hover {
  border-color: var(--brand-blue);
  color: var(--ink-strong);
}

.board-toggle:active {
  transform: translateY(1px);
}

.board-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.board-row {
  min-height: 5.2rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-data);
  font-size: clamp(0.7rem, 1.1vw, 0.84rem);
  overflow: hidden;
}

.board-row:last-child {
  border-bottom: 0;
}

.board-key {
  color: var(--ink-muted);
  text-transform: uppercase;
}

.board-value {
  color: var(--ink-strong);
  will-change: transform, opacity;
}

.board-state {
  justify-self: end;
  color: var(--brand-blue-bright);
}

.built-close {
  padding: var(--space-10) 0;
  background: var(--surface-deep);
}

.built-close__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

.built-close h2 {
  max-width: 11ch;
  font-size: clamp(3.5rem, 7vw, 4rem);
}

.built-close__body {
  padding-top: 4rem;
}

.built-close__body p {
  max-width: 45ch;
  margin: 0 0 1.3rem;
  color: var(--ink-soft);
  font-size: 1.12rem;
}

.built-close__body .text-action {
  margin-top: 1.4rem;
}

.walkthrough {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(7rem, 13vw, 12rem) 0;
  background: var(--surface-mist);
  color: var(--ink-dark);
}

.walkthrough__signal {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 68%;
  width: min(52rem, 70vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid color-mix(in oklch, var(--ink-strong) 24%, transparent);
}

.walkthrough__signal::before,
.walkthrough__signal::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid color-mix(in oklch, var(--ink-strong) 18%, transparent);
}

.walkthrough__signal::after {
  inset: 27%;
}

.walkthrough__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: end;
}

.walkthrough h2 {
  max-width: 13ch;
  font-size: clamp(3.4rem, 6.4vw, 4rem);
}

.walkthrough__inner > div:last-child {
  max-width: 33rem;
}

.walkthrough__inner p {
  margin: 0 0 2rem;
  color: color-mix(in oklch, var(--ink-dark) 88%, var(--surface-mist));
  font-size: 1.08rem;
}

.action--light {
  border-color: var(--brand-blue-action);
  background: var(--brand-blue-action);
  box-shadow: 0 0.8rem 2rem color-mix(in oklch, var(--surface-deep) 22%, transparent);
  color: var(--action-ink);
}

.statement-footer {
  padding: 3rem 0;
  border-top: 1px solid var(--rule-soft);
  background: var(--surface-deep);
}

.statement-footer__inner,
.footer-mark,
.footer-meta {
  display: flex;
  align-items: center;
}

.statement-footer__inner {
  justify-content: space-between;
  gap: 2rem;
}

.footer-mark {
  gap: 1rem;
}

.footer-mark img {
  width: 2.1rem;
  height: 2.5rem;
  object-fit: contain;
}

.footer-mark p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.footer-meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem 1.2rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.footer-meta a {
  color: var(--ink-soft);
  text-underline-offset: 0.25em;
}

/* Shared consultation modal injected by site-components.js. */
.sales-modal {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.sales-modal__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--surface-deep) 74%, transparent);
  backdrop-filter: blur(12px);
}

.sales-modal__card {
  overscroll-behavior: contain;
  position: relative;
  z-index: 1;
  width: min(50rem, 100%);
  max-height: calc(100svh - 2.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: 0 2.5rem 7rem color-mix(in oklch, var(--surface-deep) 78%, transparent);
}

.sales-modal__card--sm {
  width: min(34rem, 100%);
}

.sales-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-strong);
  font-size: 1.5rem;
  cursor: pointer;
}

.sales-modal__head .section-label {
  margin: 0 0 1rem;
  color: var(--brand-blue-bright);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sales-modal__head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.sales-modal__head p {
  max-width: 48ch;
  margin: 1rem 0 2rem;
  color: var(--ink-soft);
}

.sales-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.sales-field {
  display: grid;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.sales-field--full {
  grid-column: 1 / -1;
}

.sales-field input,
.sales-field textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface-deep);
  color: var(--ink-strong);
  padding: 0.85rem 0.9rem;
}

.sales-field input::placeholder,
.sales-field textarea::placeholder {
  color: var(--ink-muted);
}

.sales-field input:hover,
.sales-field textarea:hover {
  border-color: color-mix(in oklch, var(--rule) 68%, var(--ink-soft));
}

/* Preferred date/time inputs are flatpickr-driven (readonly, click to open)
   — cursor + a small icon signal that instead of native affordances. */
.sales-field input.sales-field__picker-input {
  cursor: pointer;
  padding-right: 2.5rem !important;
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 15px 15px;
}
.sales-field input.sales-field__picker-input--date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f96a3' stroke-width='1.3'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5'/%3E%3Cline x1='1.5' y1='6' x2='14.5' y2='6'/%3E%3Cline x1='4.5' y1='1' x2='4.5' y2='3.5'/%3E%3Cline x1='11.5' y1='1' x2='11.5' y2='3.5'/%3E%3C/svg%3E");
}
.sales-field input.sales-field__picker-input--time {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238f96a3' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.5V8l2.5 1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sales-schedule-note {
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: -0.3rem;
}

/* Flatpickr (preferred date / time pickers) — brand-matched dark skin.
   flatpickr.min.css now loads before this stylesheet on every page (see
   src/pages/*.astro) so equal-specificity rules here win naturally; a
   handful of flatpickr's own selectors are MORE specific than a simple
   override, so those are matched/exceeded explicitly below rather than
   relying on load order alone. */
.flatpickr-calendar {
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--surface-raised); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
span.flatpickr-weekday { color: var(--ink-strong); fill: var(--ink-strong); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--ink-soft); fill: var(--ink-soft); }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: var(--brand-blue); fill: var(--brand-blue); }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--ink-strong); }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--ink-muted); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--ink-muted); }
.flatpickr-day { color: var(--ink-soft); }
.flatpickr-day.today { border-color: var(--brand-blue); }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus { border-color: var(--brand-blue); background: var(--surface-active); color: var(--ink-strong); }
.flatpickr-day:hover { background: var(--surface-active); border-color: var(--surface-active); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--surface-deep); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--ink-muted); opacity: 0.35; text-decoration: line-through; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--ink-muted); }
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm { color: var(--ink-soft); }
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover { background: var(--surface-active); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--ink-muted); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--ink-muted); }

.sales-field input:disabled,
.sales-field textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-active);
}

.sales-field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.sales-field--check input {
  width: 1.25rem;
  height: 1.25rem;
}

.req,
.sales-form__status.is-error {
  color: var(--danger);
}

.hint,
.sales-form__status {
  color: var(--ink-muted);
  min-height: 1lh;
}

.sales-form__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.sales-form__actions .btn {
  min-height: 3rem;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--brand-blue-action);
  border-radius: 0;
  background: var(--brand-blue-action);
  color: var(--action-ink);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 220ms var(--ease-out),
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sales-form__actions .btn:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--brand-blue-bright) 54%, var(--brand-blue-action));
    background-color: var(--brand-blue-action-hover);
    box-shadow:
      0 0.95rem 2rem color-mix(in oklch, var(--brand-blue-action) 28%, transparent),
      0 0 0 1px color-mix(in oklch, var(--brand-blue-bright) 12%, transparent);
  }
}

.sales-modal__close:active {
  transform: translateY(1px);
}

.sales-form__actions .btn:active {
  transform: translateY(0) scale(0.985);
}

.sales-form__actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sales-modal__close:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-active);
}

.sales-form__success h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.7rem;
}

.sales-form__success p {
  color: var(--ink-soft);
}

@media (max-width: 68rem) {
  :root {
    --shell: min(100% - 2.5rem, 74rem);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .platform-statement__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .feature-stage {
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    gap: 2.5rem;
  }

  .handoff__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  :root {
    --shell: min(100% - 2rem, 44rem);
    --space-10: 7rem;
  }

  .edge-nav {
    min-height: 4.5rem;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .brand-by,
  .quiet-link {
    display: none;
  }

  .action--small {
    min-height: 2.75rem;
    padding-inline: 0.9rem;
  }

  .hero {
    min-height: 108svh;
  }

  .hero-haze {
    background: linear-gradient(0deg, var(--surface-deep) 0%, color-mix(in oklch, var(--surface-deep) 92%, transparent) 48%, transparent 82%);
  }

  .particle-fallback {
    top: 27%;
    left: 50%;
    width: min(80vw, 23rem);
    height: min(48vh, 25rem);
  }

  .hero__inner {
    display: flex;
    align-items: flex-end;
    min-height: 100svh;
    padding-block: 5rem 7rem;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 11vw, 4.5rem);
  }

  .hero__lede {
    font-size: 1rem;
  }

  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .platform-statement__inner,
  .flow-heading,
  .handoff__inner,
  .built-close__inner,
  .walkthrough__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-statement h2,
  .handoff h2 {
    font-size: clamp(2.75rem, 12vw, 4.4rem);
  }

  .flow-heading {
    padding-bottom: 4rem;
  }

  .flow-heading h2 {
    font-size: clamp(3rem, 13vw, 4.8rem);
  }

  .feature-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .flow-copy-rail,
  .feature-visuals {
    display: contents;
  }

  .flow-copy {
    grid-column: 1;
    max-width: none;
    margin-bottom: 2rem;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .flow-copy-rail::before,
  .flow-copy::before {
    display: none;
  }

  .flow-copy h3 {
    font-size: clamp(2.3rem, 10vw, 3.6rem);
  }

  .feature-shot {
    grid-column: 1;
    min-height: auto;
    margin-bottom: 7rem;
  }

  .flow-copy[data-copy="0"] { grid-row: 1; }
  .feature-shot[data-feature="0"] { grid-row: 2; }
  .flow-copy[data-copy="1"] { grid-row: 3; }
  .feature-shot[data-feature="1"] { grid-row: 4; }
  .flow-copy[data-copy="2"] { grid-row: 5; }
  .feature-shot[data-feature="2"] { grid-row: 6; }
  .flow-copy[data-copy="3"] { grid-row: 7; }
  .feature-shot[data-feature="3"] { grid-row: 8; }

  .screen-frame--offset {
    transform: none;
  }

  .screen-caption {
    position: static;
    border: 0;
    border-top: 1px solid var(--rule-soft);
    border-radius: 0;
    background: var(--surface-active);
    backdrop-filter: none;
  }

  .handoff__copy > p:last-child {
    margin-bottom: 2.5rem;
  }

  .departure-board__head {
    gap: 0.75rem;
  }

  .board-row {
    grid-template-columns: 0.9fr 1.7fr;
  }

  .board-state {
    display: none;
  }

  .built-close__body {
    padding-top: 0;
  }

  .walkthrough__inner > div:last-child {
    margin-top: 0.5rem;
  }

  .statement-footer__inner,
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-meta {
    gap: 0.65rem;
  }

  .sales-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-field--full {
    grid-column: auto;
  }
}

@media (max-width: 24rem) {
  :root {
    --shell: calc(100% - 1.5rem);
  }

  .edge-nav {
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-left: max(0.75rem, env(safe-area-inset-left));
  }

  .brand-word {
    font-size: 0.84rem;
  }

  .action--small {
    font-size: 0.76rem;
  }

  .board-row {
    gap: 0.5rem;
    padding-inline: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .signal-rail__track {
    transform: none;
  }

  .action:hover,
  .action:active,
  .action:hover::after,
  .sales-form__actions .btn:not(:disabled):hover,
  .sales-form__actions .btn:active {
    transform: none;
  }
}

/* ── LIGHT MODE ─────────────────────────────────────────────
   (.site-footer's light-mode pair lives in SiteFooter.astro's own
   scoped <style> — it already duplicates these hex colours there,
   and Astro's scoped output wins the cascade over this stylesheet.)

   .walkthrough / .handoff use --surface-mist + --ink-dark as a "highlight
   band" that stays legible against the page around it, in light mode that
   pairing inverts (see tokens.css) so the ring decoration — drawn from
   --ink-strong, which now points at dark text — needs to point at --ink-dark
   (now the light value) instead, or it goes invisible on the darkened band. */
[data-theme="light"] .walkthrough__signal,
[data-theme="light"] .walkthrough__signal::before,
[data-theme="light"] .walkthrough__signal::after {
  border-color: color-mix(in oklch, var(--ink-dark) 24%, transparent);
}

/* Dual-logo swap: pages/components render both a dark-background mark and a
   light-background mark for the same slot; CSS toggles which is visible. */
.brand-mark--light,
.product-mark--light {
  display: none;
}
[data-theme="light"] .brand-mark--dark,
[data-theme="light"] .product-mark--dark {
  display: none;
}
[data-theme="light"] .brand-mark--light,
[data-theme="light"] .product-mark--light {
  display: inline-block;
}

/* Same swap for the hero particle-fallback image (shown pre-JS / reduced-
   motion) and the system-map core mark — both render the literal source
   bitmap rather than tinting it via CSS, so they need a genuine light-mode
   asset rather than a colour override. */
.particle-fallback--light,
.system-map-mark--light {
  display: none;
}
[data-theme="light"] .particle-fallback--dark,
[data-theme="light"] .system-map-mark--dark {
  display: none;
}
[data-theme="light"] .particle-fallback--light,
[data-theme="light"] .system-map-mark--light {
  display: inline;
}

/* Fixed light/dark mode toggle, bottom-right of the viewport on every page
   that opts in via <ThemeToggle />. */
.theme-toggle {
  position: fixed;
  z-index: 250;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  color: var(--ink-strong);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.theme-toggle:hover {
  border-color: var(--brand-blue-bright);
  color: var(--brand-blue-bright);
}
.theme-toggle__icon {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__icon--moon { display: none; }
[data-theme="light"] .theme-toggle__icon--sun { display: none; }
[data-theme="light"] .theme-toggle__icon--moon { display: block; }

@media (max-width: 30rem) {
  .theme-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }
}