/* ==========================================================================
   Bluefront AI — website
   Visual system for the Bluefront AI marketing site.
   Palette values are carried over from the original design recon.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --surface: #f3f7ff;
  --surface-2: #ffffff;
  --fg: #0b1b3f;
  --ink: #0b1b3f;
  --muted: #4a5a7d;
  --muted-2: #6b7b9c;
  --border: #e1e9f7;
  --border-strong: #c8d6ee;
  --accent: #1d5bff;
  --accent-hover: #0f46e0;
  --accent-soft: #e7eeff;
  --navy: #0a1c4a;

  --gray-50: #f7f9fd;
  --gray-100: #eef3fb;
  --gray-200: #e1e9f7;
  --gray-300: #c8d6ee;
  --gray-400: #9fb0cf;
  --gray-500: #6b7b9c;

  --container: 1308px;
  --scale: 1;
  --gutter: 2rem;
  --radius-pill: 625rem;
  --radius-xl: 2.5rem;
  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --radius-sm: 0.5rem;

  --font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { font-size: calc(16px * var(--scale, 1)); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Lenis smooth scrolling (vendored) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer__motion:focus-visible,
.footer a:focus-visible { outline-color: #fff; }

/* ---------- Skip link ---------- */

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.095);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; outline-color: #050505; }
main:focus { outline: none; }

/* ---------- Screen-reader-only text ---------- */

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

/* ---------- Layout primitives ---------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: 7.5rem; position: relative; }
#form { scroll-margin-top: 6.5rem; }
.section--dark { background: var(--surface); color: var(--ink); }
.section--light { background: var(--bg); color: var(--fg); }
.section--tight { padding-block: 5rem; }

/* ---------- Very large screens (2560px / 3840px) ----------
   Scale the rem-based type/spacing system and widen the container so the layout
   doesn't look miniature on 4K-class and ultrawide displays. Below 2560px
   --scale stays 1, so nothing changes. Media-query thresholds stay in px, so
   these do not shift any existing breakpoint. */
@media (min-width: 2560px) {
  :root { --scale: 1.25; --container: 1635px; }
}
@media (min-width: 3840px) {
  :root { --scale: 1.5; --container: 1962px; }
}

.overline {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.overline::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.section--light-overline .overline { color: var(--muted); }

.display-1 {
  font-size: clamp(2.75rem, 5.4vw, 4.5rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.display-2 {
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.lede { font-size: 1.188rem; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.section--dark .lede { color: var(--muted); }

.section-head { display: grid; gap: 1.25rem; margin-bottom: 3.5rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: calc(48px * var(--scale, 1));
  padding: 0 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .btn__arrow { transition: transform 0.22s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--light { background: var(--card); color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--gray-200); border-color: var(--gray-200); color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity 0.2s var(--ease);
}
.link-arrow:hover { opacity: 0.62; }
.link-arrow svg { transition: transform 0.22s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Navigation ---------- */

.nav-wrap {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding-top: 1rem;
  pointer-events: none;
  transition: padding-top 0.26s var(--ease);
}
.nav {
  pointer-events: auto;
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.95rem 1rem 0.95rem 1.9rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem;
  background: rgba(var(--ink-rgb), 0.32);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(var(--ink-rgb), 0.07);
  border-radius: var(--radius-pill);
  color: var(--ink);
  margin-inline: 1rem;
  transition: max-width 0.26s var(--ease), padding 0.26s var(--ease),
    gap 0.26s var(--ease), background-color 0.26s var(--ease),
    border-color 0.26s var(--ease), box-shadow 0.26s var(--ease),
    margin-inline 0.26s var(--ease);
}
@media (min-width: 1360px) { .nav { margin-inline: auto; } }

/* Compact pill state — toggled once, after the scroll threshold */
.nav-wrap.is-compact { padding-top: 0.5rem; }
.nav-wrap.is-compact .nav {
  max-width: calc(780px * var(--scale, 1));
  margin-inline: auto;
  padding: 0.3rem 0.35rem 0.3rem 0.95rem;
  gap: 0.6rem;
  background: rgba(var(--ink-rgb), 0.92);
  border-color: rgba(var(--ink-rgb), 0.14);
  box-shadow: 0 12px 34px rgba(var(--shadow-rgb), 0.129);
}
.nav-wrap.is-compact .brand { gap: 0.42rem; }
.nav-wrap.is-compact .brand__mark { width: calc(23px * var(--scale, 1)); height: calc(23px * var(--scale, 1)); }
.nav-wrap.is-compact .brand__name { font-size: 0.9rem; }
.nav-wrap.is-compact .nav__links { gap: 0.02rem; }
.nav-wrap.is-compact .nav__link { padding: 0.45rem 0.7rem; font-size: 0.84rem; }
.nav-wrap.is-compact .nav__cta { padding: 0.5rem 0.85rem; font-size: 0.84rem; }

.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); flex: none; grid-column: 1; grid-row: 1; justify-self: start; transition: gap 0.26s var(--ease); }
.brand__mark { width: calc(30px * var(--scale, 1)); height: calc(30px * var(--scale, 1)); flex: none; transition: width 0.26s var(--ease), height 0.26s var(--ease); }
.brand__mark svg { display: block; width: 100%; height: 100%; }
.brand__name { font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; transition: font-size 0.26s var(--ease); }
.brand__name b { font-weight: 500; }
.brand__name span { color: var(--muted-2); font-weight: 400; }
.brand__logo { display: block; height: calc(30px * var(--scale, 1)); width: auto; flex: none; transition: height 0.26s var(--ease); }
.nav-wrap.is-compact .brand__logo { height: calc(23px * var(--scale, 1)); }
/* First paint: boot.js adds .js-reveal before paint (motion allowed only), so
   the new mark does one short fade/rise instead of popping in. No layout
   impact (opacity + transform only) and nothing runs under reduced motion. */
html.js-reveal .brand__logo { animation: brand-mark-in 0.6s var(--ease) both; }
@keyframes brand-mark-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js-reveal .brand__logo { animation: none; } }

.nav__links { grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; gap: 0.15rem; transition: gap 0.26s var(--ease); }
.nav__link {
  position: relative; padding: 0.6rem 0.9rem; border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 400; color: rgba(var(--ink-rgb), .72);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
    padding 0.26s var(--ease), font-size 0.26s var(--ease);
}
.nav__link:hover { color: var(--ink); background: rgba(var(--ink-rgb), .1); }
.nav__link[aria-current="page"] { color: var(--ink); }

.nav__spacer { display: none; }
.nav__cta { grid-column: 3; grid-row: 1; justify-self: end; flex: none; transition: padding 0.26s var(--ease), font-size 0.26s var(--ease); }

.nav__toggle {
  display: none; flex: none;
  grid-column: 3; grid-row: 1; justify-self: end;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(var(--ink-rgb), .1); border: 1px solid rgba(var(--ink-rgb), .16);
  color: var(--ink); align-items: center; justify-content: center;
}
.nav__toggle:hover { background: rgba(var(--ink-rgb), .2); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--card); position: relative;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  pointer-events: auto;
  display: none; max-width: var(--container); margin: 0.6rem auto 0;
  margin-inline: 1rem;
  background: rgba(var(--ink-rgb), .96); backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--ink-rgb), .1); border-radius: 1.75rem;
  padding: 1.25rem; color: var(--ink);
}
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: 0.85rem 0.75rem; border-radius: 0.75rem; font-size: 1.05rem; color: rgba(var(--ink-rgb), .82); }
.mobile-menu a:hover { background: rgba(var(--ink-rgb), .08); color: var(--ink); }
.mobile-menu .btn { width: 100%; margin-top: 0.75rem; }

@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { padding-right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrap, .nav-wrap .nav, .nav-wrap .nav * { transition: none !important; }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--surface); color: var(--ink);
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 8rem; padding-bottom: 5rem;
  position: relative; overflow: hidden;
}
.hero > .container { width: 100%; position: relative; z-index: 1; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem; align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 2rem; } }
.hero h1 { max-width: 16ch; font-size: clamp(3.5rem, 7.5vw, 7rem); line-height: 0.98; }
.hero__accent { color: var(--accent); }
.hero__lede { margin-top: 1.75rem; max-width: 46ch; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.hero__aside { display: grid; gap: 1.5rem; }

/* ---------- Hero blueprint grid ----------
   A faint 1px grid sits behind the headline on a plane tilted 58deg in
   perspective (900px), fading out toward the horizon at the top. A pointer
   spotlight brightens the lines under the cursor (hot layer, radial mask).
   GSAP scrubs the plane flat and lifts the headline over the first 100vh. */

.hero__blueprint {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  perspective: 900px;
  pointer-events: none;
  /* Fade the grid out behind the text column so no line crosses the
     headline or the supporting line. Black = visible, transparent = hidden. */
  -webkit-mask-image: radial-gradient(78% 66% at 30% 50%, rgba(11, 27, 63,0.000) 0%, rgba(11, 27, 63,0.000) 40%, #000 100%);
          mask-image: radial-gradient(78% 66% at 30% 50%, rgba(var(--ink-rgb), 0.000) 0%, rgba(var(--ink-rgb), 0.000) 40%, #000 100%);
}
.hero__blueprint-plane {
  position: absolute; left: 0; right: 0; top: 0; height: 200%;
  transform-origin: 50% 0%;
  transform: rotateX(58deg) scale(1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 58%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 58%);
}
.hero__blueprint-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), .05) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero__blueprint-grid--hot {
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), .22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), .22) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(var(--ink-rgb), 0.000) 100%);
          mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(var(--ink-rgb), 0.000) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.hero__blueprint.is-pointer .hero__blueprint-grid--hot { opacity: 1; }

/* Static grid: no tilt, no cursor spotlight on narrow screens or reduced motion. */
@media (max-width: 900px) {
  .hero__blueprint-plane { transform: none !important; }
  .hero__blueprint-grid--hot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__blueprint-plane { transform: none !important; }
  .hero__blueprint-grid--hot { display: none; }
}
html[data-motion="off"] .hero__blueprint-plane { transform: none !important; }
html[data-motion="off"] .hero__blueprint-grid--hot { display: none; }
/* Promote the plane only while JS is actually scrubbing it on a wide,
   motion-on viewport; everywhere else it stays unpromoted. */
@media (min-width: 901px) {
  html.js-reveal:not([data-motion="off"]) .hero__blueprint-plane { will-change: transform; }
}

/* Stacked hero (single column): the text spans full width, so open the
   cleared radial zone across the centre band. */
@media (max-width: 940px) {
  .hero__blueprint {
    -webkit-mask-image: radial-gradient(120% 74% at 50% 44%, rgba(var(--ink-rgb), 0.000) 0%, rgba(var(--ink-rgb), 0.000) 42%, #000 100%);
            mask-image: radial-gradient(120% 74% at 50% 44%, rgba(var(--ink-rgb), 0.000) 0%, rgba(var(--ink-rgb), 0.000) 42%, #000 100%);
  }
}

/* ---------- Proof band ----------
   The stats/proof row sits in normal document flow directly after the
   full-viewport hero, with generous section padding. Its elements fade and
   slide up into place on entry, the same .reveal treatment used site-wide. */

.proof { padding-top: 8rem; }

.proof__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem; padding-bottom: 4rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
@media (max-width: 760px) { .proof__stats { grid-template-columns: 1fr; gap: 2rem; } }
.proof__stat strong {
  display: block; font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--ink);
}
.proof__stat > span { display: block; margin-top: 0.85rem; font-size: 0.95rem; color: var(--muted-2); }
/* The odometer is an inline-flex row of 1em digit wheels. This must out-specify
   ".proof__stat strong { display:block }" above, otherwise the wheels stack
   vertically. The stat's clamp() font-size is restated here so it applies to
   the `em`-sized wheels. */
.proof__stat strong.odometer {
  display: inline-flex; align-items: center;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1; color: var(--ink); overflow: hidden;
  /* Reserve the stat line box before JS builds the wheels: an empty
     inline-flex has zero height, so without this the proof band is short at
     first paint and grows when the odometer is injected. min-width keeps a
     three-digit value from reflowing its neighbours mid-build. */
  min-height: 1em;
  min-width: 3ch;
}
.proof__stat strong.odometer .odometer__digit { height: 1em; overflow: hidden; }

.proof__stats .reveal:nth-child(1) { transition-delay: 0s; }
.proof__stats .reveal:nth-child(2) { transition-delay: 0.1s; }
.proof__stats .reveal:nth-child(3) { transition-delay: 0.2s; }

.proof__disciplines {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem;
  margin-top: 4rem; padding-block: 1.9rem;
  border-block: 1px solid rgba(var(--ink-rgb), 0.12);
}
.proof__disciplines .overline { color: var(--muted-2); }
.proof__disciplines-list { font-size: 1rem; line-height: 1.5; color: var(--muted); }

/* ---------- Honesty notes (Step 48) ----------
   Visible, readable disclaimers for illustrative figures and product
   previews. Colour is chosen per section so contrast never drops. */
.claim-note { margin-top: 1.1rem; font-size: 0.82rem; line-height: 1.5; letter-spacing: 0.01em; color: var(--muted-2); }
.claim-note--dark { color: var(--muted-2); }
.section--dark .claim-note { color: var(--muted-2); }
.mock-caption { margin-top: 0.7rem; font-size: 0.78rem; line-height: 1.45; letter-spacing: 0.01em; color: var(--muted-2); }
.section--dark .mock-caption,
.mock-caption--dark { color: var(--muted-2); }

/* Odometer — each stat renders as per-digit scroll wheels that scrub as the
   proof band enters. Digits are built by JS; without JS/motion the final value
   is printed statically. The circle mask restricts the visible window to one
   digit row so the strips read as mechanics, not columns of numbers. */
.odometer {
  display: inline-flex; align-items: center;
  font-variant-numeric: tabular-nums;
  line-height: 1; overflow: hidden;
}
.odometer__digit {
  display: block; position: relative;
  width: 0.68em; height: 1em;
  overflow: hidden;
}
.odometer__strip {
  display: block; position: absolute; top: 0; left: 0; width: 100%;
}
@media (min-width: 901px) {
  html.js-reveal:not([data-motion="off"]) .odometer__strip { will-change: transform; }
}
.odometer__strip span { display: block; height: 1em; line-height: 1; }
.odometer__insert { width: 0.34em; }
.odometer__suffix { display: inline-block; opacity: 0; transform: translateY(0.18em); }
.odometer__suffix.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .odometer__suffix { opacity: 1; transform: none; }
}

/* ---------- Dark <-> light section transitions ----------
   Incoming sections are clipped to an inset rounded frame and settle to full
   bleed as they scroll in; the outgoing section recedes slightly. Only applied
   when JS can animate on a wide viewport (.js-reveal.od-transitions). Under
   reduced motion, when motion is off, or below 900px the sections keep their
   plain full-bleed backgrounds with a normal cross-fade. */
/* clip-path is only promoted while the transitions class is live (added by JS
   on wide, motion-on viewports); reduced-motion / mobile never pay for it. */
/* Never on a section that holds a pinned scene: ancestors with clip-path,
   transform or filter break position:fixed pinning. */
.od-transitions [data-od-reveal]:not(:has([data-bp-pin], [data-deck-pin], [data-tl-pin], [data-tl-pinned])) { will-change: clip-path; }
@media (max-width: 900px) {
  .od-transitions [data-od-reveal],
  .od-transitions [data-od-reveal] + * { clip-path: none !important; }
}

/* ---------- Services ---------- */

.services__intro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; margin-bottom: 4rem; }
@media (max-width: 860px) { .services__intro { grid-template-columns: 1fr; gap: 1.25rem; } }

.service__num { font-size: 0.8rem; color: var(--muted-2); letter-spacing: 0.12em; }
.service__kicker { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }

/* ---------- Modules: pinned stacking deck ----------
   Default (no JS / reduced motion / under 900px): the six cards sit in a
   normal stacked flow. When JS can animate (desktop + motion allowed) it adds
   .is-armed, the stage becomes a fixed 16:9 frame and each card slides up over
   the previous one as ScrollTrigger scrubs. Inside each mockup the content is
   scrubbed in sync with its card's arrival. */

.deck-pin { min-height: 100svh; display: grid; align-items: center; }
.deck-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem; align-items: center; }

.deck-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }
.deck-rail__item { position: relative; padding-left: 1.15rem; font-size: 0.76rem; letter-spacing: 0.14em; color: var(--muted-2); transition: color 0.3s var(--ease); }
.deck-rail__item::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.deck-rail__item.is-active { color: var(--fg); }
.deck-rail__item.is-active::before { background: var(--accent); transform: scale(1.5); }

.deck-stage { display: grid; gap: 2rem; }
.deck-card {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 4rem);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
}
.deck-card__body { display: grid; gap: 1rem; }
.deck-card__body p { font-size: 1rem; line-height: 1.6; color: var(--muted); }
.deck-card__media { display: grid; place-items: center; min-width: 0; }

.deck-pin.is-armed .deck-stage { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; }
.deck-pin.is-armed .deck-card {
  position: absolute; inset: 0;
  box-shadow: 0 34px 80px -38px rgba(var(--shadow-rgb), 0.42);
}
@media (max-height: 840px) {
  .deck-pin.is-armed .deck-stage { width: min(100%, calc(66vh * 16 / 9)); justify-self: center; }
}

/* Reserve the armed deck stage box (16:9) on the viewports where JS arms it,
   so auto -> aspect-ratio cannot jump the pinned deck at first paint. */
@media (min-width: 901px) {
  html.js-reveal:not([data-motion="off"]) .deck-pin .deck-stage {
    display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  }
  @media (max-height: 840px) {
    html.js-reveal:not([data-motion="off"]) .deck-pin .deck-stage {
      width: min(100%, calc(66vh * 16 / 9)); justify-self: center;
    }
  }
}

@media (max-width: 900px) {
  .deck-pin { min-height: 0; }
  .deck-layout { grid-template-columns: 1fr; }
  .deck-rail { display: none; }
  .deck-stage { display: grid; }
  .deck-card { position: relative; grid-template-columns: 1fr; }
}

/* ---------- Floating browser-chrome mockup (project rule 3) ---------- */

.browser-mock {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -26px rgba(var(--shadow-rgb), 0.32), 0 3px 10px rgba(var(--shadow-rgb), 0.05);
  overflow: hidden;
}
.browser-mock__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.browser-mock__dots { display: inline-flex; gap: 5px; flex: none; }
.browser-mock__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.browser-mock__dots i:nth-child(1) { background: #ff5f57; }
.browser-mock__dots i:nth-child(2) { background: #febc2e; }
.browser-mock__dots i:nth-child(3) { background: #28c840; }
.browser-mock__url {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; line-height: 1; color: var(--muted-2);
  background: var(--card); border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-mock__body {
  padding: clamp(0.9rem, 2vw, 1.5rem);
  display: grid; align-content: center; gap: 0.75rem;
  min-height: 148px;
}

.mock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mock-list__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--gray-50);
  font-size: 0.9rem; line-height: 1.3;
}
.mock-list__label { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; color: var(--fg); font-weight: 500; }
.mock-list__label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); }
.mock-list__row.is-done .mock-list__label::before { background: #1f9d55; }
.mock-list__row.is-progress .mock-list__label::before { background: var(--accent); }
.mock-list__status {
  flex: none; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-2);
}
.mock-list__row.is-done .mock-list__status { color: #1a7f45; }
.mock-list__row.is-progress .mock-list__status { color: var(--fg); }

.mock-metric { display: grid; gap: 0.4rem; }
.mock-metric__label {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2);
}
.mock-metric__value { font-size: clamp(1.9rem, 3.2vw, 2.85rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.mock-metric__note { font-size: 0.85rem; line-height: 1.45; color: var(--muted); }

.mock-bar { display: grid; gap: 0.6rem; }
.mock-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.9rem; font-weight: 500; color: var(--fg); }
.mock-bar__value { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.mock-bar__track { height: 12px; border-radius: var(--radius-pill); background: var(--gray-200); overflow: hidden; }
.mock-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); }
.mock-bar__note { font-size: 0.8rem; line-height: 1.45; color: var(--muted-2); }

/* ---------- What's actually broken ---------- */

.problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .problems { grid-template-columns: 1fr; } }
.problem {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem;
  align-items: start;
  background: rgba(var(--ink-rgb), .035);
  border: 1px solid rgba(var(--ink-rgb), .1);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.problem__num { font-size: 1.75rem; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--muted-2); }
.problem__body { display: flex; flex-direction: column; gap: 0.75rem; }
.problem__title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.problem__text { font-size: 0.98rem; line-height: 1.55; color: var(--muted); }

.section--light .problem { background: var(--gray-50); border-color: var(--border); }
.section--light .problem__title { color: var(--fg); }
.section--light .problem__text { color: var(--muted); }

.problem-quote {
  margin: 2.5rem 0 0;
  padding: 2.5rem;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: var(--radius-xl);
  background: rgba(var(--ink-rgb), .04);
}
.problem-quote blockquote {
  font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.25;
  font-weight: 400; letter-spacing: -0.02em; color: var(--ink); max-width: 34ch;
}
.problem-quote figcaption { margin-top: 1.25rem; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--muted-2); }

.section--light .problem-quote { border-color: var(--border); background: var(--gray-50); }
.section--light .problem-quote blockquote { color: var(--fg); }
.section--light .problem-quote figcaption { color: var(--muted-2); }
.section--gray .problem-quote { border-color: var(--border); background: var(--bg); }
.section--gray .problem-quote blockquote { color: var(--fg); }
.section--gray .problem-quote figcaption { color: var(--muted-2); }

/* ---------- Bluefront AI approach ---------- */

.approach__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.approach__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .approach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .approach__grid { grid-template-columns: 1fr; } }
.approach-card {
  display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
}
.approach-card__num { font-size: 1.75rem; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--muted-2); }
.section--light .approach-card__num,
.section--gray .approach-card__num { color: var(--muted-2); }
.approach-card__text { font-size: 1rem; line-height: 1.5; color: var(--muted); }
.approach-card__text strong { color: var(--fg); font-weight: 700; }

.section--dark .approach-card { background: var(--surface-2); border-color: rgba(var(--ink-rgb), .1); }
.section--dark .approach-card__text { color: var(--muted); }
.section--dark .approach-card__text strong { color: var(--ink); }

/* ---------- Blueprint scene (pinned) ----------
   The dark stage holds 14 glass chips that begin scattered and drift, then
   converge into an ordered 4-column grid, collapse into the Bluefront AI card,
   and expand into a dashboard. GSAP pins the section for 320vh and scrubs
   the sequence. Without motion (mobile, reduced motion, data-motion="off")
   the same stage reads as a static chip grid above the finished dashboard. */

.globe__intro { max-width: 46rem; }
.section--bp { padding-block: 0; }
.bp-pin { min-height: 100svh; display: flex; align-items: center; }
.bp-inner { width: 100%; }
.bp-scene { margin-top: 2rem; }
.bp-stage {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--ink-rgb), .09);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--ink-rgb), .05), transparent 62%),
    var(--card);
  overflow: hidden;
}
.bp-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(var(--ink-rgb), .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb), .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 100%);
}
.bp-chip {
  display: inline-flex; align-items: center;
  padding: .5rem .9rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em; line-height: 1;
  white-space: nowrap;
  color: rgba(var(--ink-rgb), .92);
  background: rgba(var(--ink-rgb), .08);
  border: 1px solid rgba(var(--ink-rgb), .16);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.133);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.bp-card {
  display: none;
  flex-direction: column; gap: 1.1rem;
  width: min(300px, 78%);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(var(--ink-rgb), .06);
  border: 1px solid rgba(var(--ink-rgb), .14);
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.190);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.bp-card__brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.bp-card__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bp-card__rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .6rem; border-top: 1px solid rgba(var(--ink-rgb), .1);
}
.bp-card__k { font-size: .82rem; color: rgba(var(--ink-rgb), .6); }
.bp-card__v { font-size: .95rem; font-weight: 700; color: var(--ink); }
.bp-dash {
  width: min(640px, 92%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--ink-rgb), .14);
  background: var(--card);
  box-shadow: 0 30px 70px rgba(var(--shadow-rgb), 0.209);
  overflow: hidden;
}
.bp-dash__chrome {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .1);
  background: rgba(var(--ink-rgb), .04);
}
.bp-dots { display: inline-flex; gap: .35rem; }
.bp-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--ink-rgb), .22); display: block; }
.bp-dots i:first-child { background: var(--accent); }
.bp-dash__url { font-size: .72rem; color: rgba(var(--ink-rgb), .55); letter-spacing: .02em; }
.bp-dash__body { padding: 1.25rem; }
.bp-dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.bp-kpi {
  display: grid; gap: .5rem;
  padding: 1rem; border-radius: var(--radius-sm);
  background: rgba(var(--ink-rgb), .04);
  border: 1px solid rgba(var(--ink-rgb), .08);
}
.bp-kpi__label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); }
.bp-kpi__val { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.bp-kpi__meter { display: block; height: 5px; border-radius: 999px; background: rgba(var(--ink-rgb), .12); overflow: hidden; }
.bp-kpi__meter i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: var(--accent); }
.bp-caption { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1.5rem; }
.bp-caption__item { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .62); transition: color .3s var(--ease); }
.bp-caption__item.is-active { color: var(--accent); }

/* Static fallback: chip grid above the finished dashboard (no motion). */
.bp-scene:not(.is-armed) .bp-stage {
  height: auto;
  padding: 1.75rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
}
.bp-scene:not(.is-armed) .bp-chips {
  position: static; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; width: 100%;
}
.bp-scene:not(.is-armed) .bp-chip { position: static; }
.bp-scene:not(.is-armed) .bp-card { display: none; }
.bp-scene:not(.is-armed) .bp-dash { width: min(640px, 100%); }

/* Armed: fixed-height stage, chips absolutely placed and animated by GSAP. */
.bp-scene.is-armed .bp-stage { height: clamp(260px, 46vh, 520px); }
.bp-scene.is-armed .bp-chips { position: absolute; inset: 0; }
.bp-scene.is-armed .bp-chip { position: absolute; top: 0; left: 0; opacity: .5; }
.bp-scene.is-armed .bp-card { display: flex; position: absolute; left: 50%; top: 50%; }
.bp-scene.is-armed .bp-dash { position: absolute; left: 50%; top: 50%; }

/* Reserve the armed stage height on the exact viewports where JS will arm it
   (wide + motion on), so the box is already its final size at first paint and
   the auto -> clamp switch cannot move the pinned scene. The static fallback
   below and on narrow/reduced-motion viewports keeps height:auto. */
@media (min-width: 901px) {
  html.js-reveal:not([data-motion="off"]) .bp-scene .bp-stage { height: clamp(260px, 46vh, 520px); }
}

@media (max-width: 900px) {
  .bp-pin { min-height: 0; padding-block: 5rem; }
  .bp-scene { margin-top: 1.5rem; }
}
@media (max-width: 560px) {
  .bp-dash__kpis { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */

.faq__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; }
@media (max-width: 900px) { .faq__layout { grid-template-columns: 1fr; gap: 1.75rem; } }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; background: none; border: 0; text-align: left;
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: 1.5rem 0; font-size: 1.05rem; font-weight: 400; color: var(--fg);
}
.faq__q:hover { color: var(--muted); }
.faq__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); position: relative; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--fg); transition: transform .25s var(--ease), background-color .25s var(--ease); }
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 12px; }
.faq__item.is-open .faq__icon { background: var(--surface); border-color: var(--surface); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: var(--card); }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__a { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.faq__a-inner { padding-bottom: 1.5rem; padding-right: 3rem; color: var(--muted); line-height: 1.6; }
.faq__a-inner a { border-bottom: 1px solid currentColor; }

/* ---------- CTA ---------- */

.cta { background: var(--accent); color: #fff; padding-block: 6rem; overflow: hidden; position: relative; }
.cta__inner { display: grid; gap: 2rem; justify-items: start; position: relative; z-index: 1; }
.cta h2 { max-width: 18ch; }
.cta__lead { max-width: 46ch; font-size: 1.15rem; line-height: 1.55; color: rgba(11, 27, 63,.88); }
.cta__note { font-size: 0.85rem; letter-spacing: 0.01em; color: rgba(11, 27, 63,.72); }
.cta__btn {
  display: inline-flex; align-items: center; gap: 1.25rem; align-self: start;
  background: var(--surface); color: var(--ink); border: 1px solid var(--surface);
  border-radius: var(--radius-pill); padding: 1.25rem 2rem; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.02em;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.cta__btn:hover { background: var(--surface-2); transform: translateY(-2px); }
.cta__btn svg { transition: transform .25s var(--ease); }
.cta__btn:hover svg { transform: translateX(4px); }

/* ---------- Footer ---------- */

.footer { background: var(--navy); color: #fff; padding-top: 6rem; padding-bottom: 0; overflow: hidden; position: relative; }
/* Oversized mark watermark on the right, behind all footer content. */
.footer__watermark { position: absolute; top: 46%; right: -5%; width: min(52vw, 660px); transform: translateY(-50%); opacity: 0.06; pointer-events: none; z-index: 0; line-height: 0; }
.footer__watermark img { display: block; width: 100%; height: auto; }
.footer > .container { position: relative; z-index: 1; }
@media (max-width: 600px) { .footer__watermark { width: min(82vw, 420px); right: -10%; top: 38%; opacity: 0.05; } }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-bottom: 4rem; }
.footer__tagline { max-width: 22ch; font-size: 1.35rem; line-height: 1.4; font-weight: 500; color: #fff; }
.footer__brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; color: #fff; }
.footer__mark { width: calc(34px * var(--scale, 1)); height: calc(34px * var(--scale, 1)); flex: none; }
.footer__mark svg { display: block; width: 100%; height: 100%; }
.footer__logo { display: block; height: calc(34px * var(--scale, 1)); width: auto; flex: none; }
.footer__brandname { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
@media (max-width: 900px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col--brand { grid-column: 1 / -1; }
}
.footer__col h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #7a7e7a; margin-bottom: 1rem; font-weight: 500; }
.footer__col a { display: block; padding: 0.35rem 0; color: var(--gray-300); font-size: 0.92rem; transition: color .2s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); padding-block: 1.5rem; font-size: 0.82rem; color: var(--gray-400); }
.footer__motion { appearance: none; background: transparent; color: var(--gray-300); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-pill); padding: 0.45rem 0.95rem; font-size: 0.82rem; font-weight: 500; line-height: 1; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.footer__motion:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.footer__motion[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.footer__motion:focus-visible { outline-color: var(--accent); }

/* ---------- Reveal ---------- */

.reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js-reveal .reveal { opacity: 0; transform: translateY(24px); }
html.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
/* Above the fold the reveal must not gate on opacity, otherwise the hero is
   invisible until the deferred JS runs and LCP is pushed past 2.5s. A
   transform-only rise keeps the entrance while the text paints at first paint. */
html.js-reveal .hero .reveal,
html.js-reveal .page-hero .reveal { opacity: 1; transform: none; animation: hero-rise .7s var(--ease) both; }
@keyframes hero-rise { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  html.js-reveal .hero .reveal, html.js-reveal .page-hero .reveal { animation: none; }
}

/* ---------- Scroll-scrubbed word reveal ----------
   JS splits each [data-word-reveal] block into word spans and scrubs them
   from opacity .14 + 6px blur to full clarity. The leading word flashes the
   accent colour for 150ms. Under reduced motion (no .js-reveal) the original
   text is left untouched at its resting state. */
.js-reveal [data-word-reveal] { opacity: 0; }
.js-reveal [data-word-reveal].is-split { opacity: 1; }
/* The split wraps words in a holder span and inline-block word spans. min-height
   is pinned to the pre-split height by JS so the box cannot grow or shrink;
   the holder is a plain inline so it does not introduce a new line box. */
[data-word-reveal] .word-reveal__holder { display: inline; }
[data-word-reveal] .word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transition: color .15s var(--ease);
}
[data-word-reveal] .word.is-accent { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  [data-word-reveal] .word { opacity: 1; filter: none; transition: none; }
}

/* ---------- Section variants & additions ---------- */

.section--gray { background: var(--gray-50); }

/* CTA on accent — light overline text and dot */
.cta .overline { color: #fff; }
.cta .overline::before { background: var(--surface); }

/* Footer wordmark */
.footer__wordmark { padding-top: 2rem; line-height: 0; }
.footer__wordmark svg { width: 100%; height: auto; display: block; }
.footer__wordmark text { fill: #fff; font-family: var(--font); font-weight: 500; letter-spacing: 0; }

@media (max-width: 600px) {
  :root { --gutter: 1.25rem; }
  .section { padding-block: 4.5rem; }
  .section--bp { padding-block: 0; } /* .bp-pin carries the spacing; without this the gap is doubled */
  .problem { padding: 1.5rem; gap: 1rem; }
  .deck-card { padding: 1.5rem; }
}

/* ---------- Cross-page view transitions ----------
   Native same-origin page transitions via the CSS View Transitions API.
   Browsers without support simply navigate normally. The nav and footer
   carry their own view-transition-name so they stay fixed while the page
   body (<main>) lifts out and the incoming page rises into place. */
@view-transition { navigation: auto; }

.nav-wrap { view-transition-name: site-nav; }
main { view-transition-name: page-main; }
.footer { view-transition-name: site-footer; }

/* Nav + footer persist between pages — no cross-fade, no movement. */
::view-transition-old(site-nav),
::view-transition-new(site-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation: none;
  mix-blend-mode: normal;
}

/* Outgoing page slides up 24px and fades; incoming rises from 24px below. */
@keyframes vt-page-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-page-in { from { opacity: 0; transform: translateY(24px); } }

::view-transition-old(page-main) {
  animation: 300ms var(--ease) both vt-page-out;
}
::view-transition-new(page-main) {
  animation: 300ms var(--ease) both vt-page-in;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   PAGE — PROCESS (process.html)
   ========================================================================== */

.page-hero { padding-top: 11rem; padding-bottom: 4.5rem; }
.page-hero .display-1 { max-width: 20ch; }
.page-hero .lede { margin-top: 1.5rem; }
/* 404: the brand mark above the message. */
.error-mark { display: block; width: 64px; height: auto; margin-bottom: 1.75rem; }

/* ---------- Horizontal timeline ---------- */
.tl-intro { padding-bottom: 3rem; }
.tl-intro .section-head { margin-bottom: 0; }

.tl-pinned { overflow-x: clip; }
.tl-pin { position: relative; }
.tl-track { display: flex; gap: 2rem; width: max-content; }
@media (min-width: 901px) {
  html.js-reveal:not([data-motion="off"]) .tl-pin.is-armed .tl-track { will-change: transform; }
}

.tl-head { padding-inline: var(--gutter); }
.tl-head__count {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
}
.tl-head__count b { color: var(--accent); font-weight: 500; }

.tl-line { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tl-line svg { width: 100%; height: 340px; overflow: visible; }
.tl-line path { fill: none; stroke: var(--gray-300); stroke-width: 2; }
.tl-line .tl-line__draw { stroke: var(--accent); }
.tl-line .tl-line__dot { fill: var(--accent); }

.tl-card {
  position: relative;
  width: min(78vw, 27rem); flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid rgba(var(--ink-rgb), .1);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.section--light .tl-card { background: var(--gray-50); border-color: var(--border); }
.tl-card.is-active { border-color: var(--accent); }
.tl-card__num {
  display: block; font-size: 0.85rem; letter-spacing: 0.14em;
  color: var(--muted-2); margin-bottom: 1.1rem;
  transition: color 0.35s var(--ease);
}
.tl-card.is-active .tl-card__num { color: var(--accent); }
.section--light .tl-card__num { color: var(--muted); }
.section--light .tl-card.is-active .tl-card__num { color: var(--accent); }
.tl-card__title { font-size: 1.35rem; line-height: 1.2; font-weight: 500; margin-bottom: 0.65rem; }
.tl-card__text { font-size: 1rem; line-height: 1.55; color: var(--muted); }
.section--dark .tl-card__text { color: var(--muted); }

/* Static vertical fallback (narrow screens / reduced motion) */
.tl-static { display: none; }
.tl-static__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.tl-static__item {
  position: relative; padding-left: 2.5rem;
  padding-bottom: 1.25rem;
}
.tl-static__item::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: -1.25rem;
  width: 2px; background: var(--gray-300);
}
.tl-static__item:last-child::before { display: none; }
.tl-static__item::after {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
}
.tl-static__num { display: block; font-size: 0.8rem; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 0.4rem; }
.tl-static__title { font-size: 1.15rem; font-weight: 500; margin-bottom: 0.35rem; }
.tl-static__text { font-size: 0.98rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 900px) {
  .tl-pinned { display: none; }
  .tl-static { display: block; }
}

/* ---------- Savings calculator ---------- */
.calc-section .section-head { margin-bottom: 3rem; }
.calc { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.calc__inputs { background: var(--bg); padding: 2.5rem; }
.calc__results {
  position: relative;
  background: radial-gradient(at 100% 0, #14306f, transparent 65%), var(--surface);
  color: #fff; padding: 2.5rem;
}
.calc__heading { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
.calc__heading h3 { font-size: 1.45rem; font-weight: 500; }
.calc__heading button {
  background: none; border: 0; font-size: 0.82rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.calc__inputs > p { margin: 0.6rem 0 1.75rem; font-size: 0.88rem; color: var(--muted); }
.calc__field { margin-bottom: 1.6rem; }
.calc__field > div { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 0.7rem; }
.calc__field label { font-size: 0.88rem; font-weight: 500; color: var(--fg); }
.calc__num { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.calc__num input {
  width: 68px; text-align: right; padding: 0.35rem 0.4rem;
  background: var(--gray-50); border: 1px solid var(--border); border-radius: 7px;
  color: var(--fg); font: inherit; font-size: 0.95rem; font-weight: 500;
}
.calc__num input:focus { background: var(--card); border-color: var(--border-strong); outline: none; }
.calc__num span { font-size: 0.75rem; color: var(--muted-2); }
.calc__field input[type="range"] {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  width: 100%; height: 5px; margin: 0.5rem 0; border-radius: 8px;
  background: linear-gradient(to right, var(--accent) var(--range-progress, 0%), var(--gray-200) var(--range-progress, 0%));
}
.calc__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--card); border: 4px solid var(--fg);
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb), 0.046); transition: box-shadow 0.2s;
}
.calc__field input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 4px solid var(--fg);
}
.calc__field input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .45); }
.calc__assumptions { border-top: 1px solid var(--border); padding-top: 1rem; }
.calc__assumptions summary,
.calc__method summary { cursor: pointer; font-size: 0.88rem; font-weight: 500; }
.calc__inline { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.1rem; }
.calc__inline label { display: grid; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.calc__inline input { width: 100%; min-width: 0; padding: 0.55rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--fg); font: inherit; }
.calc__assumptions p,
.calc__inline p { grid-column: 1 / -1; font-size: 0.76rem; line-height: 1.6; color: var(--muted-2); }

.calc__eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.calc__value { display: block; margin-top: 0.6rem; font-size: clamp(2.6rem, 4.4vw, 4.2rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; }
.calc__value-label { margin: 0.5rem 0 1.75rem; font-size: 0.95rem; color: var(--muted-2); }
.calc__metrics { display: flex; gap: 1.75rem; padding: 1.4rem 0; border-top: 1px solid rgba(var(--ink-rgb), .12); border-bottom: 1px solid rgba(var(--ink-rgb), .12); }
.calc__metrics > div { display: grid; gap: 0.3rem; }
.calc__metrics b { font-size: 1.8rem; font-weight: 500; letter-spacing: -0.035em; }
.calc__metrics b span { font-size: 1rem; color: var(--muted-2); }
.calc__metrics div > span { font-size: 0.72rem; color: var(--gray-500); }
.calc__bar { height: 10px; border-radius: 8px; background: rgba(var(--ink-rgb), .12); margin-top: 1.7rem; overflow: hidden; }
.calc__bar > span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transition: width 0.5s var(--ease); }
.calc__legend { display: flex; justify-content: space-between; margin-top: 0.55rem; font-size: 0.62rem; color: var(--gray-500); }
.calc__note { margin: 1.5rem 0; font-size: 0.92rem; line-height: 1.6; color: var(--gray-100); }
.calc__cta { display: inline-flex; }
.calc__secondary { display: block; margin: 0.95rem auto 0; text-align: center; background: none; border: 0; font-size: 0.8rem; color: var(--muted-2); text-decoration: underline; text-underline-offset: 3px; }
.calc__method { border-top: 1px solid var(--border); grid-column: 1 / -1; background: var(--gray-50); color: var(--fg); padding: 1.15rem 2.2rem; }
.calc__method p { max-width: 66rem; font-size: 0.8rem; line-height: 1.75; color: var(--muted); }
.calc__method p:last-of-type { color: var(--muted); }

@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc__inputs, .calc__results { padding: 1.6rem; }
}

/* ==========================================================================
   PAGE — CONTACT (contact.html)
   ========================================================================== */

.contact-form { display: grid; gap: 1.25rem; max-width: 34rem; }
.form-field { display: grid; gap: 0.5rem; }
.form-field label { font-size: 0.85rem; font-weight: 500; }
.form-field input,
.form-field textarea {
  width: 100%; padding: 0.85rem 1rem; font: inherit; font-size: 1rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg);
}
.section--dark .form-field input,
.section--dark .form-field textarea { background: var(--surface-2); border-color: rgba(var(--ink-rgb), .16); color: var(--ink); }
.form-field input:focus,
.form-field textarea:focus { outline: none; border-color: var(--accent); }
.form-field textarea { min-height: 7rem; resize: vertical; }
.form-field.is-invalid input,
.form-field.is-invalid textarea { border-color: #e5484d; }
.form-error { font-size: 0.78rem; color: #e5484d; display: none; }
.form-field.is-invalid .form-error { display: block; }
.form-error-note { display: none; font-size: 0.9rem; line-height: 1.6; color: #e5484d; }
.form-error-note.is-visible { display: block; }
.form-error-note a { color: var(--ink); text-decoration: underline; }
.form-success { display: none; padding: 2rem; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink); }
.form-success.is-visible { display: block; }
.form-success h2 { font-size: 1.4rem; font-weight: 500; margin-bottom: 0.6rem; }
.form-success p { color: var(--muted); line-height: 1.6; }
.contact-form.is-hidden { display: none; }
.contact-note { font-size: 0.85rem; color: var(--muted); }
.form-consent { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.form-consent a { color: var(--ink); text-decoration: underline; }
.legal { max-width: 72ch; }
.legal p { color: var(--muted); line-height: 1.7; margin-bottom: 1.25rem; }

/* ---------- Glass ERP stack ("One system for the whole firm")
   HTML/CSS only: a fanned stack of translucent panels. The base rules are the
   static, flatter layout (mobile, reduced motion, data-motion="off"); the 3D
   fan, one-time reveal, hover lift and pointer parallax are gated to wide
   screens with motion on. Not a pinned scene. ---------- */

.gerp {
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 82% 0%, rgba(var(--accent-rgb), .09), transparent 58%),
    radial-gradient(70% 90% at 8% 100%, rgba(0, 64, 173, .16), transparent 55%),
    var(--surface);
}
.gerp__head { max-width: 46rem; margin-bottom: 3rem; }

.gerp__viewport { position: relative; }
.gerp__stack { display: grid; gap: 1rem; }

.gerp__panel {
  position: relative;
  padding: 1.05rem 1.15rem 1.15rem;
  color: var(--ink);
  border: 1px solid rgba(var(--ink-rgb), .10);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(var(--ink-rgb), .11), rgba(var(--ink-rgb), .025) 42%, rgba(var(--ink-rgb), 0) 62%),
    rgba(var(--ink-rgb), .62);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 26px 55px -30px rgba(var(--shadow-rgb), 0.280), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
.gerp__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 58%, rgba(var(--accent-rgb), .07));
}

.gerp__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .10);
}
.gerp__title { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; }
.gerp__tag {
  flex: none;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: var(--radius-pill);
  padding: .28rem .55rem;
}
.gerp__tag--accent { color: #fff; background: var(--accent); border-color: var(--accent); }

.gerp-bars { display: grid; gap: .78rem; }
.gerp-bars__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: .7rem;
  font-size: .8rem;
  color: var(--muted);
}
.gerp-bars__k { color: var(--muted); }
.gerp-bars__track {
  position: relative;
  height: 9px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), .10);
  overflow: hidden;
}
.gerp-bars__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #9db9ff);
}
.gerp-bars__v { text-align: right; font-weight: 600; color: var(--ink); }

.gerp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.gerp-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem .7rem;
  font-size: .82rem;
}
.gerp-rows__k { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gerp-rows__v { justify-self: end; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.gerp-rows__meter {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), .10);
  overflow: hidden;
}
.gerp-rows__meter i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--accent); }
.gerp-rows li.is-risk .gerp-rows__v { color: #ffb27a; }
.gerp-rows li.is-risk .gerp-rows__meter i { background: #ff8a4c; }

.gerp-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.gerp-table th,
.gerp-table td { text-align: left; padding: .52rem .2rem; border-bottom: 1px solid rgba(var(--ink-rgb), .08); }
.gerp-table th { font-size: .64rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); }
.gerp-table td { color: var(--muted); }
.gerp-table th:last-child,
.gerp-table td:last-child { text-align: right; color: var(--ink); font-weight: 600; }
.gerp-table tr:last-child td { border-bottom: 0; }

.gerp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.gerp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.7rem;
  padding: .5rem .7rem;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: var(--radius-sm);
  background: rgba(var(--ink-rgb), .03);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}
.gerp-chip.is-done { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .10); }
.gerp-chip.is-active { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }

/* Flatter static layout: two columns on wide screens without motion. */
@media (min-width: 901px) {
  html:not(.js-reveal) .gerp__stack,
  html[data-motion="off"] .gerp__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3D fanned stack — wide screens, motion on only. */
@media (min-width: 901px) {
  html.js-reveal:not([data-motion="off"]) .gerp__viewport {
    perspective: 1700px;
    perspective-origin: 50% 42%;
    padding-block: 2.5rem;
  }
  html.js-reveal:not([data-motion="off"]) .gerp__stack {
    --px: 0;
    --py: 0;
    display: grid;
    width: min(100%, 690px);
    margin-inline: auto;
    aspect-ratio: 16 / 11;
    transform-style: preserve-3d;
    transform: rotateX(calc(6deg - var(--py) * 4deg)) rotateY(calc(-15deg + var(--px) * 5deg)) rotateZ(-1.5deg);
    transition: transform .35s var(--ease);
  }
  html.js-reveal:not([data-motion="off"]) .gerp__panel {
    grid-area: 1 / 1;
    align-self: center;
    transform:
      translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--rise, 0px)), calc(var(--tz, 0px) + var(--lift, 0px)))
      rotateZ(var(--rz, 0deg));
    transition: transform .65s var(--ease), opacity .65s var(--ease), box-shadow .3s var(--ease);
    will-change: transform;
  }
  html.js-reveal:not([data-motion="off"]) .gerp__panel:nth-child(1) { --tx: -7%; --ty: -9%; --tz: -130px; --rz: -4deg; }
  html.js-reveal:not([data-motion="off"]) .gerp__panel:nth-child(2) { --tx: -2.5%; --ty: -2%; --tz: -45px; --rz: -1.6deg; }
  html.js-reveal:not([data-motion="off"]) .gerp__panel:nth-child(3) { --tx: 2.5%; --ty: 5%; --tz: 45px; --rz: 1.6deg; }
  html.js-reveal:not([data-motion="off"]) .gerp__panel:nth-child(4) { --tx: 7%; --ty: 11%; --tz: 130px; --rz: 4.2deg; }

  /* One-time staggered rise when the stack scrolls into view. */
  html.js-reveal:not([data-motion="off"]) .gerp:not(.is-visible) .gerp__panel { opacity: 0; --rise: 52px; }
  html.js-reveal:not([data-motion="off"]) .gerp.is-visible .gerp__panel { opacity: 1; --rise: 0px; }
  html.js-reveal:not([data-motion="off"]) .gerp.is-visible .gerp__panel:nth-child(1) { transition-delay: .05s; }
  html.js-reveal:not([data-motion="off"]) .gerp.is-visible .gerp__panel:nth-child(2) { transition-delay: .14s; }
  html.js-reveal:not([data-motion="off"]) .gerp.is-visible .gerp__panel:nth-child(3) { transition-delay: .23s; }
  html.js-reveal:not([data-motion="off"]) .gerp.is-visible .gerp__panel:nth-child(4) { transition-delay: .32s; }

  /* Hover lifts a panel forward in depth. */
  @media (hover: hover) and (pointer: fine) {
    html.js-reveal:not([data-motion="off"]) .gerp__panel:hover {
      --lift: 54px;
      box-shadow: 0 42px 72px -34px rgba(var(--shadow-rgb), 0.280), inset 0 1px 0 rgba(255, 255, 255, .10);
      z-index: 6;
    }
  }
}

/* ---------- Spreadsheet chaos -> one system (pinned scrub scene) ----------
   A dark, pinned scene: a messy workbook on the left, three clean glass
   panels on the right. With motion on and a wide screen, a GSAP scrub lifts
   the workbook rows out as sparks that travel along the connector curves and
   settle into the invoice / utilization / phase panels (values tick up), the
   red #REF! cells fade, and the workbook dims and slides back behind the
   finished panels while the close line fades in. All transforms live on
   descendants of the pinned element. The static fallback (below 900px,
   reduced motion, data-motion="off") reads the same content as "The
   spreadsheet" stacked above the finished "Bluefront AI" panels. ---------- */

.chaos {
  padding-block: 0;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 88% 6%, rgba(var(--accent-rgb), .07), transparent 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(229, 72, 77, .10), transparent 55%),
    var(--surface);
}
.chaos__pin { min-height: 100svh; display: flex; align-items: center; padding: 6rem 0 2rem; }
.chaos__inner { width: 100%; }
.chaos__head { max-width: 76rem; margin-bottom: 1rem; }
.chaos__head .lede { max-width: 70ch; }
.chaos-scene { margin-top: .25rem; }
.chaos-stage { position: relative; }

.chaos-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.chaos-scene.is-armed .chaos-label { display: none; }

/* Static fallback: "The spreadsheet" above the finished panels. */
.chaos-scene:not(.is-armed) .chaos-stage { display: grid; gap: 1.1rem; }
.chaos-scene:not(.is-armed) .chaos-sheet,
.chaos-scene:not(.is-armed) .chaos-panels { max-width: 640px; }
.chaos-scene:not(.is-armed) .chaos-panels { display: grid; gap: 1rem; }
.chaos-scene:not(.is-armed) .chaos-lines,
.chaos-scene:not(.is-armed) .chaos-sparks { display: none; }
@media (min-width: 901px) {
  .chaos-scene:not(.is-armed) .chaos-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chaos-scene:not(.is-armed) .chaos-panels > :first-child { grid-column: 1 / -1; }
}

/* --- The workbook --- */
.chaos-sheet {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--ink-rgb), .12);
  background: var(--card);
  box-shadow: 0 26px 60px -30px rgba(var(--shadow-rgb), 0.280);
  font-size: .72rem;
}
.chaos-sheet__chrome {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .09);
  background: rgba(var(--ink-rgb), .04);
}
.chaos-dots { display: inline-flex; gap: .32rem; }
.chaos-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ink-rgb), .2); }
.chaos-dots i:nth-child(2) { background: #f5c542; }
.chaos-dots i:nth-child(3) { background: #33c28a; }
.chaos-sheet__file { font-size: .72rem; color: rgba(var(--ink-rgb), .6); letter-spacing: .01em; }

.chaos-sheet__grid { display: grid; }
.chaos-row {
  display: grid;
  grid-template-columns: 1.7rem repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid rgba(var(--ink-rgb), .05);
}
.chaos-row:last-child { border-bottom: 0; }
.chaos-row--head { background: rgba(var(--ink-rgb), .03); }
.chaos-rn {
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; color: rgba(var(--ink-rgb), .35);
  border-right: 1px solid rgba(var(--ink-rgb), .06);
}
.chaos-c {
  padding: .34rem .4rem;
  color: rgba(var(--ink-rgb), .74);
  border-right: 1px solid rgba(var(--ink-rgb), .05);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chaos-c:last-child { border-right: 0; }
.chaos-row--head .chaos-c {
  font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(var(--ink-rgb), .5); text-align: center;
}
.chaos-c--warm { background: rgba(245, 197, 66, .16); color: #ffe08a; }
.chaos-c--cool { background: rgba(96, 165, 250, .16); color: #bcd7ff; }
.chaos-c--mint { background: rgba(110, 192, 110, .16); color: #b6e8b6; }
.chaos-c--ref { background: rgba(229, 72, 77, .22); color: #ff9aa0; font-weight: 600; }

.chaos-sheet__tabs {
  display: flex; gap: .15rem;
  padding: .3rem .4rem 0;
  border-top: 1px solid rgba(var(--ink-rgb), .09);
  background: rgba(var(--ink-rgb), .03);
  overflow: hidden;
}
.chaos-sheet__tabs span {
  padding: .34rem .55rem .3rem;
  font-size: .66rem;
  color: rgba(var(--ink-rgb), .5);
  white-space: nowrap;
  border-radius: 7px 7px 0 0;
}
.chaos-sheet__tabs span.is-active { background: rgba(var(--accent-rgb), .12); color: var(--accent); }

/* --- The clean panels --- */
.chaos-panel { padding: .85rem .95rem .9rem; }
/* The old glass-stack rules tilt panels (rotateZ/translate3d) and put a CSS
   transition on transform/opacity, which fights the GSAP scrub and makes the
   scene feel uneven. The chaos panels stay flat and are driven only by GSAP. */
html.js-reveal:not([data-motion="off"]) .chaos-panel.gerp__panel {
  transform: none;
  transition: none;
  will-change: transform, opacity;
  grid-area: auto;
  align-self: auto;
}
html.js-reveal:not([data-motion="off"]) .chaos-panel.gerp__panel:hover { transform: none; box-shadow: 0 26px 55px -30px rgba(var(--shadow-rgb), 0.280), inset 0 1px 0 rgba(255, 255, 255, .06); }
.chaos-panel .gerp__bar { padding-bottom: .55rem; margin-bottom: .7rem; }
.chaos-panel .gerp-bars { gap: .6rem; }
.chaos-invoice { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chaos-invoice li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: var(--muted);
}
.chaos-invoice li b { color: var(--ink); font-weight: 600; }
.chaos-invoice li:last-child {
  margin-top: .1rem; padding-top: .55rem;
  border-top: 1px solid rgba(var(--ink-rgb), .10);
}
.chaos-phases { display: flex; flex-wrap: wrap; gap: .5rem; }
.chaos-phase {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; padding: .5rem .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  color: var(--muted);
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: var(--radius-sm);
  background: rgba(var(--ink-rgb), .03);
}
.chaos-phase.is-active {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
}
.chaos-panel__note { margin-top: .8rem; font-size: .74rem; line-height: 1.5; color: var(--muted-2); }

/* --- Connectors + travelling row sparks (armed only) --- */
.chaos-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.chaos-line {
  fill: none;
  stroke: rgba(var(--accent-rgb), .38);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
/* the live "energy" line: draws from the workbook to the panel as you scroll */
.chaos-line--glow {
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .75));
}
/* connection points on the workbook edge and the panel edge */
.chaos-node {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7));
  transform-box: fill-box;
  transform-origin: center;
}
.chaos-node--src { animation: chaos-node 1.8s ease-in-out infinite; }
@keyframes chaos-node { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .chaos-node--src { animation: none; } }
html[data-motion="off"] .chaos-node--src { animation: none; }
.chaos-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.chaos-spark {
  position: absolute; left: 0; top: 0;
  width: 38px; height: 7px;
  border-radius: 999px;
  /* a comet: bright head on the right, fading tail behind it, rotated along the curve */
  background: linear-gradient(90deg, rgba(29, 91, 255, 0), rgba(29, 91, 255, .95));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .6);
  opacity: 0;
  will-change: transform, opacity;
}

/* Armed: fixed-height stage, workbook + panels absolutely placed by GSAP. */
.chaos-scene.is-armed .chaos-stage { height: clamp(360px, 54vh, 520px); }
.chaos-scene.is-armed .chaos-sheet {
  position: absolute; left: 0; top: 50%;
  width: min(47%, 500px);
  z-index: 3;
}
.chaos-scene.is-armed .chaos-panels {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(45%, 470px);
  display: flex; flex-direction: column; justify-content: center; gap: .8rem;
  z-index: 3;
}

/* Reserve the armed stage height before JS arms it (wide + motion on, no
   reduced-motion preference), so the box is final-size at first paint. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.js-reveal:not([data-motion="off"]) .chaos-stage { height: clamp(360px, 54vh, 520px); }
}

/* short laptop screens: keep the whole pinned scene inside the viewport */
@media (min-width: 901px) and (max-height: 820px) {
  .chaos__pin { padding: 5.2rem 0 1rem; }
  .chaos .mock-caption { display: none; }
  .chaos-final { margin-top: 1rem; }
}
@media (max-width: 900px) {
  .chaos__pin { min-height: 0; padding-block: 5rem; }
  .chaos-scene { margin-top: 1.5rem; }
}

.chaos-final {
  margin: 2rem auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.js-reveal:not([data-motion="off"]) .chaos-final { opacity: 0; }
}

/* ==========================================================================
   PRINT
   A paper-friendly rendering: white page, black text, no interactive or
   decorative chrome. Content hidden by scroll-reveal animations is forced
   visible so nothing is ever lost on the printed page.
   ========================================================================== */

@media print {
  @page { margin: 1.5cm; }

  html, body {
    background: var(--card) !important;
    color: #000 !important;
  }
  body { overflow: visible !important; }

  /* Chrome that has no meaning on paper */
  .skip-link,
  .nav-wrap,
  .mobile-menu,
  .hero__blueprint,
  .pl-scene,
  .bp-scene,
  .chaos-scene,
  .deck-pin,
  .tl-pin,
  .browser-mock,
  .footer__motion,
  .calc__secondary,
  .od-transitions {
    display: none !important;
  }

  /* Flatten dark/gray surfaces into ink on paper */
  .section--dark,
  .section--gray,
  .cta,
  .calc__results,
  .calc__method,
  .footer,
  .hero,
  .page-hero {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Scroll-reveal must never hide content on the printed page */
  html.js-reveal .reveal,
  .reveal,
  .chaos-final,
  [data-word-reveal],
  .js-reveal [data-word-reveal],
  [data-word-reveal] .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Do not split key blocks across page breaks */
  .approach-card,
  .bp-card,
  .deck-card,
  .tl-card,
  .faq__item,
  .calc,
  .proof__stat,
  .form-field {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Keep the full URL for external links when a page is printed */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}



/* ---------- Process timeline: one full-screen pinned scene ----------
   The pinned block now fills the viewport and centres its content (heading,
   counter, card row), so there is no blank half-screen while it is pinned and
   no gap when it releases. Cards are styled by JS from their position, so the
   old CSS transition on opacity/transform (which fought the scroll) is off. */
.tl-pin__intro .section-head { margin-bottom: 0; }
.tl-stage { position: relative; }
.tl-stage .tl-line { position: absolute; inset: 0; z-index: 0; }
.tl-stage .tl-line svg { position: absolute; left: 0; top: 50%; width: 100%; height: 340px; transform: translateY(-50%); }
.tl-stage > .container { position: relative; z-index: 1; }
.tl-pin.is-armed .tl-card { transition: border-color 0.35s var(--ease); will-change: transform, opacity; }
@media (min-width: 901px) {
  .tl-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 2.25rem; padding: 6.5rem 0 2.5rem; }
  .tl-pin .tl-head { margin-block: 0; }
  .tl-pin > .container, .tl-pin > .tl-stage { width: 100%; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) #steps { padding-block: 0; }
  html:not([data-motion="off"]) #steps .tl-intro { display: none; }
}
/* Reduced motion or Pause motion on a wide screen: show the plain list, not a clipped row */
@media (prefers-reduced-motion: reduce) { .tl-pinned { display: none; } .tl-static { display: block; } }
html[data-motion="off"] .tl-pinned { display: none; }
html[data-motion="off"] .tl-static { display: block; }