/* AJ Design — cinematic scroll experience (all pages, loaded after styles.css).
   One scrollable journey: matrix-rain navy hero → full-viewport story sections
   → card-fan proof → booking. Everything here is namespaced xp- and driven by
   experience.js. The hero's glyph field replicates onto every dark surface
   ([data-xp-field]: dark acts, CTA bands, the footer) and a whisper-faint
   fixed page field runs behind the light sections — one pattern, joined up,
   top to bottom and page to page.

   Stays inside the house system: navy ink only, Inter display, premium easing,
   materials (glass, grain, circuit). The matrix rain is the one deliberate
   flourish beyond the DS's usual restraint — inked in navy/white, never neon. */

/* ---------- Journey shell ---------- */
/* clip (not hidden — no new scroll container): fan side-cards and the
   ±48px reveal offsets intentionally poke past the viewport edge */
html:has(.xp-body) { overflow-x: clip; }
.xp-body {
  background: var(--bg);
  overflow-x: clip;
}

/* top scroll progress */
.xp-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  background: linear-gradient(90deg, var(--aj-navy-500), var(--aj-navy-700));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* right-hand section rail */
.xp-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xp-rail a {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(22, 34, 63, 0.22);
  transition: background var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium);
}

.xp-rail a:hover { background: rgba(22, 34, 63, 0.5); transform: scale(1.25); }
.xp-rail a.is-current { background: var(--brand-ink); transform: scale(1.3); }

.xp-rail a::after {
  content: attr(data-xp-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  background: var(--aj-navy-900);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium);
}

.xp-rail a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.xp-rail.on-dark a { background: rgba(255, 255, 255, 0.32); }
.xp-rail.on-dark a:hover { background: rgba(255, 255, 255, 0.6); }
.xp-rail.on-dark a.is-current { background: #fff; }

.xp-rail a:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.xp-rail.on-dark a:focus-visible { outline-color: var(--ring-on-dark); }

/* ---------- Hero — cyber matrix, navy ink ---------- */
.xp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0D1526;
  color: var(--text-on-inverse);
  padding: 120px 0 96px;
}

/* the reactive glyph field — one glyph per ~56px cell, spotlight via --in */
.xp-tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 20), 1fr);
  grid-template-rows: repeat(var(--rows, 12), 1fr);
}

.xp-tile {
  --in: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: rgb(203 213 235 / calc(0.3 + var(--in) * 0.7));
  opacity: calc(0.14 + var(--in) * 0.86);
  text-shadow: 0 0 calc(var(--in) * 14px) rgba(231, 236, 244, 0.85);
  transform: scale(calc(1 + var(--in) * 0.18));
  transition: color 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}

.xp-tile.is-glitch { animation: xp-glitch 0.22s ease; }

@keyframes xp-glitch {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); color: #fff; opacity: 1; text-shadow: 0 0 12px #fff; }
  100% { transform: scale(1); }
}

/* gentle legibility falloff toward the very top and bottom edges */
.xp-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 21, 38, 0.6) 0%, rgba(13, 21, 38, 0) 18%, rgba(13, 21, 38, 0) 76%, rgba(13, 21, 38, 0.8) 100%);
}

.xp-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  background-image: var(--bg-circuit-light);
  background-size: var(--bg-circuit-size);
  opacity: 0.05;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%);
}

/* frosted content panel — keeps the copy readable over the live field
   (the reference sits its copy on a black/60 blur panel; ours is navy) */
.xp-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(920px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 48px clamp(20px, 5vw, 56px);
  border-radius: var(--radius-card);
  background: rgba(13, 21, 38, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.xp-hero__inner a,
.xp-hero__inner button { pointer-events: auto; }

/* status chip */
.xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.xp-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7BD3A8;
  box-shadow: 0 0 0 4px rgba(123, 211, 168, 0.16);
  animation: xp-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes xp-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(123, 211, 168, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(123, 211, 168, 0.05); }
}

.xp-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #fff;
}

/* gradient ink lives on each word (not the wrapper): the words animate with
   transform/filter, which paints them in their own layers — a background
   clipped on the parent can't show through, so each word carries its own. */
.xp-hero__title .accent .xp-word {
  color: transparent;
  background: linear-gradient(100deg, #8C9BB8 0%, #E7ECF4 50%, #8C9BB8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation:
    xp-word-in 0.9s var(--ease-premium) forwards,
    xp-shimmer 6s var(--ease-in-out) infinite;
  animation-delay: calc(0.25s + var(--i, 0) * 0.13s), 0s;
}

@keyframes xp-shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* word-by-word entrance: spans carry --i */
.xp-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(8px);
  animation: xp-word-in 0.9s var(--ease-premium) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.13s);
}

@keyframes xp-word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

.xp-hero__sub {
  margin: 0;
  width: min(56ch, 100%);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1.06rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}

.xp-hero .hero-buttons { justify-content: center; }

/* buttons keep house styling; on the dark hero the secondary goes ghost */
.xp-hero .btn-primary {
  background: #fff;
  color: var(--brand-ink-deep);
}
.xp-hero .btn-primary:hover { background: var(--aj-navy-100); }
.xp-hero .btn-primary svg { stroke: var(--brand-ink-deep); }
.xp-hero .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.xp-hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.xp-hero .btn:focus-visible { outline-color: var(--ring-on-dark); }

.xp-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

/* delayed fade for the post-headline rows */
.xp-hero__late {
  opacity: 0;
  animation: xp-fade-up 0.9s var(--ease-premium) forwards;
}
.xp-hero__late--1 { animation-delay: 0.1s; }
.xp-hero__late--2 { animation-delay: 1.5s; }
.xp-hero__late--3 { animation-delay: 1.75s; }

@keyframes xp-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Floating capability icons (myna-style, navy glass) ---------- */
.xp-icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.xp-icon {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation:
    xp-icon-in 0.9s var(--ease-premium) forwards,
    xp-bob var(--bob, 7s) var(--ease-in-out) calc(0.9s + var(--i, 0) * 0.12s) infinite;
  animation-delay: calc(0.5s + var(--i, 0) * 0.12s), calc(1.4s + var(--i, 0) * 0.12s);
}

.xp-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes xp-icon-in {
  from { opacity: 0; transform: translateY(22px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

@keyframes xp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Scroll cue ---------- */
.xp-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  animation: xp-fade-up 1s var(--ease-premium) 2.1s forwards;
}

.xp-scroll-cue:hover { color: rgba(255, 255, 255, 0.85); }

.xp-scroll-cue__mouse {
  width: 24px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 13px;
  position: relative;
}

.xp-scroll-cue__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  animation: xp-wheel 1.9s var(--ease-in-out) infinite;
}

@keyframes xp-wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Story sections ---------- */
.xp-section {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: 110px 0;
  scroll-margin-top: 64px;
}

.xp-section > .container,
.xp-section > .container-narrow { position: relative; z-index: 1; width: min(1140px, calc(100% - 40px)); }
.xp-section > .container-narrow { width: min(820px, calc(100% - 40px)); }

/* big ghost section index, top-left of each act */
.xp-section__num {
  position: absolute;
  top: 64px;
  left: max(24px, calc((100vw - 1140px) / 2));
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(22, 34, 63, 0.35);
  z-index: 1;
}

.xp-section__num::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 54px;
  height: 1px;
  margin-left: 12px;
  background: rgba(22, 34, 63, 0.22);
}

/* dark (inverse navy) act */
.xp-section--dark {
  background: var(--aj-navy-900);
  color: var(--text-on-inverse);
}

.xp-section--dark .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.xp-section--dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.xp-section--dark .btn-secondary:focus-visible { outline-color: var(--ring-on-dark); }

.xp-section--dark .xp-section__num { color: rgba(255, 255, 255, 0.4); }
.xp-section--dark .xp-section__num::after { background: rgba(255, 255, 255, 0.25); }
.xp-section--dark .eyebrow { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.xp-section--dark h2 { color: #fff; }
.xp-section--dark .section-subtitle { color: rgba(255, 255, 255, 0.68); }

/* tinted act — translucent so the fixed page field ghosts through and the
   glyph pattern reads as one continuous thread between the acts */
.xp-section--tint { background: rgba(243, 246, 251, 0.84); }
.xp-section--band { background: rgba(241, 243, 245, 0.84); }

/* ---------- Reveal variants (driven by experience.js) ----------
   The blur-up "focus in" from the reference hero block: elements start
   soft (blur 12px), low and transparent, then settle with a gentle
   spring drift — overshoot lives on transform only so the blur never
   flickers back. */
.xp-reveal {
  transition:
    opacity 0.8s var(--ease-premium),
    filter 0.8s var(--ease-premium),
    transform 1.1s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform, filter;
}

.xp-js .xp-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(12px);
}

.xp-js .xp-reveal--left { transform: translateX(-48px); }
.xp-js .xp-reveal--right { transform: translateX(48px); }
.xp-js .xp-reveal--scale { transform: scale(0.92) translateY(18px); }

.xp-js .xp-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------- Problems act: icon wells above each pain card ---------- */
.xp-pain-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint);
  margin-bottom: 16px;
}

.xp-pain-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--brand-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* icons draw themselves in as the card reveals */
.xp-pain-icon svg path,
.xp-pain-icon svg circle,
.xp-pain-icon svg rect {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.3s var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 90ms + 250ms);
}

.xp-reveal.is-in .xp-pain-icon svg path,
.xp-reveal.is-in .xp-pain-icon svg circle,
.xp-reveal.is-in .xp-pain-icon svg rect { stroke-dashoffset: 0; }

/* ---------- Card fan (case studies) ----------
   Transforms are set inline by experience.js (slot geometry, hover
   spread, deal-in); this block owns sizing, layering and the easing.
   The default curve is a strong back-out — the closest CSS cousin of
   the reference's elastic settle. */
.xp-fan-stage {
  position: relative;
  height: 560px;
  margin-top: 8px;
}

.xp-fan {
  position: relative;
  height: 100%;
  outline: none;
}

.xp-fan:focus-visible { outline: 3px solid var(--ring); outline-offset: 6px; border-radius: 20px; }

.xp-fan__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, 84vw);
  will-change: transform;
  backface-visibility: hidden;
  transform: translate(-50%, -50%);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1),
    opacity 0.45s var(--ease-premium);
  cursor: pointer;
}

/* deal-in states */
.xp-fan__card.is-predeal {
  opacity: 0;
  transition: none;
}

.xp-fan__card.is-dealing {
  opacity: 1;
  transition:
    transform 1s cubic-bezier(0.34, 1.45, 0.64, 1),
    opacity 0.5s ease-out;
}

.xp-fan__card:not(.is-active) .case-card {
  box-shadow: var(--shadow-soft);
}

.xp-fan__card.is-active { cursor: default; }
.xp-fan__card.is-active .case-card { box-shadow: var(--shadow-lg), var(--inner-highlight); }

/* fan controls */
.xp-fan-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
}

.xp-fan-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-premium),
              box-shadow var(--dur-base) var(--ease-premium);
}

.xp-fan-arrow:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.xp-fan-arrow:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.xp-fan-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xp-fan-dots {
  display: flex;
  gap: 10px;
}

.xp-fan-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(22, 34, 63, 0.2);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-premium),
              transform var(--dur-base) var(--ease-premium);
}

.xp-fan-dots button.is-current { background: var(--brand-ink); transform: scale(1.3); }
.xp-fan-dots button:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

/* ---------- Trust act (dark, circuit, signature) ---------- */
.xp-trust {
  position: relative;
  overflow: hidden;
}

.xp-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-circuit-light);
  background-size: var(--bg-circuit-size);
  opacity: 0.06;
  pointer-events: none;
}

.xp-trust .trust__quote { color: #fff; }
.xp-trust .trust__sub { color: rgba(255, 255, 255, 0.66); }

.xp-signature {
  font-family: var(--font-script);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 26px;
  display: inline-block;
  transform: rotate(-3deg);
}

/* ---------- Act-to-act cue chevron ---------- */
.xp-next {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  color: rgba(22, 34, 63, 0.35);
  animation: xp-nudge 2.2s var(--ease-in-out) infinite;
}

.xp-section--dark .xp-next { color: rgba(255, 255, 255, 0.4); }

.xp-next svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes xp-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
  50% { transform: translateX(-50%) translateY(7px); opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .xp-rail { display: none; }
}

@media (max-width: 900px) {
  .xp-icon { display: none; }
  .xp-icon:nth-child(-n+3) { display: flex; width: 46px; height: 46px; }
  .xp-icon:nth-child(-n+3) svg { width: 21px; height: 21px; }
}

@media (max-width: 768px) {
  .xp-icon:nth-child(-n+3) { display: none; }
  .xp-section {
    min-height: 0;
    padding: 84px 0;
    flex-direction: column; /* the act number stacks above the container */
    justify-content: center;
    align-items: stretch;
  }
  .xp-section__num {
    position: static;
    display: block;
    width: min(1140px, calc(100% - 40px));
    margin: 0 auto 18px;
  }
  .xp-hero { padding-top: 104px; }
  .xp-hero__title { font-size: clamp(2.1rem, 9vw, 2.9rem); }

  .xp-fan-stage { height: 540px; }
  .xp-fan__card { width: 86vw; }
  .xp-hero__inner { padding: 36px 18px; }
}

/* ---------- Reduced motion: static, fully readable ---------- */
@media (prefers-reduced-motion: reduce) {
  .xp-word,
  .xp-hero__late,
  .xp-scroll-cue,
  .xp-icon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .xp-chip .dot,
  .xp-hero__title .accent,
  .xp-scroll-cue__mouse::after,
  .xp-next { animation: none !important; }
  .xp-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .xp-pain-icon svg path,
  .xp-pain-icon svg circle,
  .xp-pain-icon svg rect {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .xp-fan__card { transition: none; }
  .xp-tile { transition: none; }
  .xp-tile.is-glitch { animation: none; }
}

/* ==================================================================
   Joined-up glyph field — the hero pattern, everywhere.
   ================================================================== */

/* whisper-faint fixed layer behind the light sections: navy-ink glyphs
   that glow gently under the cursor, page-wide. Sections with solid
   backgrounds paint over it; translucent acts let it breathe through. */
.xp-pagefield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.xp-pagefield .xp-tile {
  cursor: default;
  font-size: 0.95rem;
  color: rgb(22 34 63 / calc(0.065 + var(--in) * 0.15));
  opacity: calc(0.55 + var(--in) * 0.45);
  text-shadow: 0 0 calc(var(--in) * 10px) rgba(30, 48, 92, 0.22);
  transform: scale(calc(1 + var(--in) * 0.12));
}

/* content above the fixed field: every act, the nav and the footer sit in
   their own paint layer; transparent acts let the field show through */
.xp-section { z-index: 1; }

/* live field hosts outside the hero — dark acts, CTA bands, the footer */
[data-xp-field] { position: relative; overflow: hidden; }
/* lift host content above the tiles without disturbing each child's own
   positioning scheme (act numbers are absolute; containers already relative) */
[data-xp-field] > *:not(.xp-tiles):not(.xp-fieldveil) { z-index: 1; }
.footer > .container { position: relative; z-index: 1; }
.cta-band > .xp-tiles + * { position: relative; }

/* the replicated field is a notch dimmer than the hero so copy stays king */
[data-xp-field]:not(.xp-hero) > .xp-tiles .xp-tile {
  font-size: 0.92rem;
  color: rgb(203 213 235 / calc(0.2 + var(--in) * 0.65));
  opacity: calc(0.1 + var(--in) * 0.8);
}

/* soft centre dim keeps text legible over live tiles (hero has its veil) */
.xp-fieldveil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 65% at 50% 50%, rgba(13, 21, 38, 0.45) 0%, rgba(13, 21, 38, 0.08) 72%, rgba(13, 21, 38, 0) 100%);
}

/* ==================================================================
   Interior-page hero — the same pattern at chapter scale.
   ================================================================== */
.xp-hero--page {
  min-height: 72vh;
  min-height: 72svh;
  padding: 130px 0 84px;
}

.xp-hero--page .xp-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }

.xp-hero--page .xp-hero__inner { gap: 18px; padding: 42px clamp(20px, 4vw, 48px); }

/* about page headshot sits inside the dark hero panel */
.xp-hero__photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .xp-hero--page { min-height: 0; padding: 116px 0 64px; }
}

/* reduced motion: the joined fields hold their calm base state */
@media (prefers-reduced-motion: reduce) {
  .xp-pagefield .xp-tile,
  [data-xp-field] .xp-tile { transition: none; }
}

/* interior pages: lift non-positioned blocks into the positioned paint
   phase so they layer above the fixed page field (tree order then wins),
   and let the surface bands breathe like the homepage acts */
.xp-body .section,
.xp-body .page-head,
.xp-body .footer { position: relative; z-index: 1; }
.xp-body .section--surface { background: rgba(243, 246, 251, 0.84); }

/* long-form text over the page field gets a soft readable panel (About) */
.xp-body .about-text {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(22, 34, 63, 0.07);
  border-radius: 20px;
  padding: 36px clamp(20px, 4vw, 46px) 42px;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

/* ==================================================================
   Video lightbox — one shared cinematic player.
   ================================================================== */
/* CRITICAL: display:flex would override the hidden attribute's UA
   display:none — without this rule the invisible overlay eats every
   click on the page. */
.xp-lightbox[hidden] { display: none; }

.xp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity 0.24s var(--ease-premium);
}

.xp-lightbox.is-open { opacity: 1; }

.xp-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 21, 38, 0.82);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.xp-lightbox__stage {
  position: relative;
  margin: 0;
  width: min(1080px, 100%);
  transform: scale(0.96) translateY(10px);
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.xp-lightbox.is-open .xp-lightbox__stage { transform: none; }

.xp-lightbox__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #0D1526;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.xp-lightbox__caption {
  margin-top: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.xp-lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(13, 21, 38, 0.9);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) var(--ease-premium), background var(--dur-base) var(--ease-premium);
}

.xp-lightbox__close:hover { transform: scale(1.08); background: rgba(30, 48, 92, 0.95); }
.xp-lightbox__close:focus-visible { outline: 3px solid var(--ring-on-dark); outline-offset: 2px; }
.xp-lightbox__close svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .xp-lightbox__close { top: -54px; right: 0; }
}

/* play affordance inside hero / act CTAs */
.xp-video-cta svg.xp-play {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  margin-right: 2px;
}

.xp-video-cta .xp-video-cta__dur {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Act 01 — watch the real run, under the animated frame */
.xp-watch-real {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .xp-lightbox,
  .xp-lightbox__stage { transition: none; }
}

/* ==================================================================
   Hero film — the intro loops as the hero's centrepiece.
   Silent, muted autoplay; click opens the lightbox for a proper look.
   ================================================================== */
.xp-hero__film {
  position: relative;
  width: min(640px, 100%);
}

.xp-hero__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #0D1526;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}

.xp-hero__video:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.xp-hero__video:focus-visible { outline: 3px solid var(--ring-on-dark); outline-offset: 3px; }

.xp-hero__film-chip {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(13, 21, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  pointer-events: none;
}

.xp-hero__film-chip svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* the film joins the interactive allowlist inside the frosted panel */
.xp-hero__inner video { pointer-events: auto; }

/* keep the taller hero comfortable */
.xp-hero .xp-hero__inner { gap: 18px; }

@media (max-width: 768px) {
  .xp-hero__film { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-hero__video { transition: none; }
}


/* Act 01 — the real Speed-to-Lead capture previews inside the demo frame */
.demo-frame__film { position: relative; }

.demo-frame__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0D1526;
  cursor: pointer;
}

.demo-frame__film .xp-hero__film-chip { bottom: 14px; right: 14px; }

/* frame height follows the film (the 16/11 ratio was sized for the mock flow) */
.demo-frame:has(.demo-frame__film) { aspect-ratio: auto; }