@font-face {
  font-family: "Saans";
  src: url("/fonts/Saans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Saans";
  src: url("/fonts/Saans-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --accent-1: #ccbf93;
  --accent-2: #0f2d49;
  --accent-3: #002a4e;
  --accent-4: #f2ead3;
  --accent-5: #6a7f94;
  --charcoal_gray: #141414;
  --font-body: "Inter", sans-serif;
  --font-display: "Manrope", "Inter", sans-serif;
  --page-bg: #f7f2e8;
}

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

html {
  background: var(--page-bg);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: var(--font-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.font-saans {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

button {
  cursor: pointer;
}

svg {
  flex: none;
}

.site_shell {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================ HERO ===============================
   Full-bleed plate + continuous client marquee.
   ================================================================= */

.hero-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* The parallax scrubs transform on this element. */
  will-change: transform;
}

.hero-plate-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source footage is teal stock; pull it onto the brand navy and drop
     the level so it reads as texture, not as a glowing sci-fi centrepiece. */
  filter: saturate(0.35) brightness(0.62) contrast(1.05);
  opacity: 0.55;
}

.hero-plate-tint {
  position: absolute;
  inset: 0;
  background: var(--accent-2);
  mix-blend-mode: color;
}

/* Darkens the edges and the type band so white copy always clears AA,
   whatever frame of the loop is showing behind it. */
.hero-plate-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(15, 45, 73, 0.92) 0%,
      rgba(15, 45, 73, 0.62) 38%,
      rgba(15, 45, 73, 0.78) 72%,
      rgba(15, 45, 73, 0.96) 100%
    ),
    radial-gradient(
      120% 80% at 50% 40%,
      rgba(15, 45, 73, 0) 0%,
      rgba(15, 45, 73, 0.55) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .hero-plate-media {
    display: none;
  }
}

/* --- Continuous client marquee --- */
.marquee {
  position: relative;
  overflow: hidden;
  /* Feathered ends so logos enter and leave instead of being chopped. */
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 46s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
}

/* The supplied logos are fully opaque with white backgrounds — no alpha to
   knock out. So the white is treated as the plate rather than fought: each
   mark sits on its own card and keeps its real brand colours against the
   navy. (Tinting them white instead flattens every logo to a blank box.) */
.marquee-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 176px;
  height: 76px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(3, 19, 34, 0.18);
}

.marquee-row img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Two identical rows sit side by side; shifting by exactly half the track
   lands row two where row one began, so the wrap is seamless. */
@keyframes marqueeScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .marquee {
    overflow-x: auto;
  }
}


/* ==================== PROBLEM / SOLUTION =========================
   Bento grid per the supplied design reference. Deep navy field sat
   between the light About section and the lighter navy of Core
   Offerings, so the three read as distinct bands rather than merging.

   No pin and no scroll driver — just a staggered entrance handled by
   the shared [data-reveal] hook in main.js, gated on .motion-ready so
   the cards are never left invisible when JS is absent.
   ================================================================= */

.bento-section {
  /* Deeper than --accent-2 so this band separates from Core Offerings. */
  padding: 96px 0 104px;
  /* The settle animation tilts and nudges cards outside their own box on
     the way in; clip so that never becomes a horizontal scrollbar. */
  overflow-x: clip;
}

.bento-head {
  text-align: center;
}

.bento-badge {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
}

.bento-heading {
  margin: 26px auto 0;
  color: #fff;
}

/* Second line drops to a muted lavender, as in the reference. */
.bento-heading span {
  display: block;
  color: #9fb0d0;
}

/* --- Grid --- */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 52px;
}

.bento-card {
  display: flex;
  flex-direction: column;
  /* Settle animation rotates about the card's own centre. */
  transform-origin: 50% 50%;
  will-change: transform;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.022) 100%
    );
}

.bento-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bento-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

.bento-tag {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.bento-card-body {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.62;
  color: #a3b1c9;
}

.bento-card-body strong {
  font-weight: 500;
  color: #fff;
}

/* --- Figures --- */
.bento-figure {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.bento-figure-value {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 3.9rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.bento-figure-value--lg {
  margin-top: 26px;
  font-size: clamp(3rem, 6vw, 4.6rem);
}

.bento-figure-label {
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.5;
  color: #a3b1c9;
}

.bento-figure .bento-figure-label {
  padding-top: 4px;
}

.bento-figure-label strong {
  font-weight: 500;
  color: #fff;
}

/* --- Client marks --- */
.bento-card--b {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}

.bento-marks {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bento-marks li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 44px;
  padding: 6px;
  border: 2px solid #08192c;
  border-radius: 10px;
  background: #fff;
}

/* Overlap, like the stacked avatars in the reference — but as plates,
   since these logos are wide and would be unreadable cropped to circles. */
.bento-marks li + li {
  margin-left: -12px;
}

.bento-marks img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bento-marks-label {
  font-size: 15px;
  color: #fff;
}

/* --- CTA --- */
.bento-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 0.75rem;
  background: var(--accent-1);
  color: var(--accent-2);
  font-size: 15px;
  font-weight: 600;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-cta:hover {
  transform: translateY(-2px);
}

.bento-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-cta:hover svg {
  transform: translateX(4px);
}

/* --- Reference layout --- */
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-card--a {
    grid-row: span 2;
  }

  .bento-card--e {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .bento-card {
    padding: 30px 32px;
  }

  /* Left card spans the full height; middle column splits short over
     tall; right column spans two rows; wide card closes the bottom
     across the middle and right columns. */
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  .bento-card--a {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .bento-card--b {
    grid-column: 2;
    grid-row: 1;
  }

  .bento-card--c {
    grid-column: 2;
    grid-row: 2;
  }

  .bento-card--d {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .bento-card--e {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  /* Figure sits at the foot of the tall left card, title block at the
     top — the vertical split in the reference. */
  .bento-card--a .bento-figure {
    margin-top: auto;
    padding-top: 40px;
  }

  .bento-card--d .bento-card-foot {
    margin-top: auto;
    padding-top: 40px;
  }
}

/* Entrance. Held back only when GSAP is present, so no-JS never sees an
   invisible grid. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ============ CORE OFFERINGS — HORIZONTAL SHOWCASE ===============
   Vertical scroll drives horizontal travel, after the Lenis site.

   The baseline is a native scroll-snap carousel — which is the right
   interaction on touch anyway — and the pinned version is layered on
   only at >=1024px with motion allowed and JS running. Card geometry
   (4:3, uniform height, wide gutter) is taken from the reference.
   ================================================================= */

.hscroll-stage {
  position: static;
  padding: 88px 0 96px;
}

.hscroll-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.hscroll-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.hscroll-title {
  max-width: 22ch;
  margin-top: 18px;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.hscroll-lede {
  max-width: 46ch;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

/* Editorial split: heading holds the left gutter, supporting copy balances
   it on the right, both sitting on the same baseline. */
@media (min-width: 1024px) {
  .hscroll-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 56px;
    align-items: end;
  }

  .hscroll-lede {
    margin-top: 0;
    justify-self: end;
  }
}

.hscroll-viewport {
  margin-top: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hscroll-viewport::-webkit-scrollbar {
  display: none;
}

.hscroll-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 0 20px;
}

/* --- Card --- */
.hcard {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 78vw;
  max-width: 400px;
  scroll-snap-align: center;
}

.hcard-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.hcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hcard-media[data-tone="gold"] {
  background: var(--accent-1);
}

.hcard-media[data-tone="cream"] {
  background: var(--accent-4);
}

.hcard-glyph {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  overflow: hidden;
}

.hcard-panel-word {
  padding: 0 24px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  color: var(--accent-2);
}

.hcard-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hcard-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--accent-2);
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hcard-arrow svg {
  width: 16px;
  height: 16px;
}

.hcard:hover .hcard-arrow,
.hcard:focus-visible .hcard-arrow {
  opacity: 1;
  transform: scale(1);
}

.hcard-kicker {
  margin-top: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.hcard-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  transition: color 300ms ease;
}

.hcard:hover .hcard-title,
.hcard:focus-visible .hcard-title {
  color: var(--accent-1);
}

.hcard-sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.hcard:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 8px;
  border-radius: 4px;
}

/* --- Progress rail --- */
.hscroll-rail {
  display: none;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}

.hscroll-progress {
  position: relative;
  display: block;
  width: 200px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.hscroll-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--accent-1);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.hscroll-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* --- Pinned horizontal travel --- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-hscroll-enhanced="true"] .hscroll-stage {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    min-height: 660px;
    padding: 0;
    overflow: hidden;
  }

  [data-hscroll-enhanced="true"] .hscroll-head {
    flex: none;
    /* site_shell sets margin-inline:auto. As a shrink-to-fit flex item that
       centres the whole block, so the heading drifts off the gutter the
       cards are aligned to. Stretching it leaves no free space to centre. */
    width: 100%;
    padding-top: 104px;
  }

  /* Native scrolling is handed back to the pin — the track is driven by
     transform instead, so the viewport must not scroll on its own. */
  [data-hscroll-enhanced="true"] .hscroll-viewport {
    flex: none;
    margin-top: 52px;
    overflow: visible;
    scroll-snap-type: none;
  }

  [data-hscroll-enhanced="true"] .hscroll-track {
    /* Reference gap, measured off the recording. */
    gap: 112px;
    /* Follows site_shell rather than a flat gutter: the shell caps at
       1500px, so a fixed 64px leaves the first card 202px adrift of the
       heading once the viewport passes that cap. */
    padding-inline: max(64px, calc((100% - 1500px) / 2 + 64px));
    will-change: transform;
  }

  [data-hscroll-enhanced="true"] .hcard {
    width: 400px;
    max-width: none;
    scroll-snap-align: none;
  }

  [data-hscroll-enhanced="true"] .hscroll-rail {
    display: flex;
    flex: none;
    /* Same shrink-to-fit centring trap as the head. */
    width: 100%;
    margin-top: auto;
    padding-bottom: 56px;
  }
}

/* ========================= HOW IT WORKS ==========================
   Sticky intro column, four steps running down a single rail.

   Cream ground on purpose: this sits between the navy offerings band
   and the white testimonial stack. The rail is drawn on the step
   marker rather than as one absolute line, so it survives any number
   of steps and stops cleanly on the last one.
   ================================================================= */

.hiw-section {
  /* Darker than --accent-5, which only clears 3.7:1 on cream. */
  --hiw-muted: #566b80;

  background: var(--page-bg);
  padding: 96px 0 104px;
}

.hiw-layout {
  display: grid;
  gap: 48px;
}

@media (min-width: 1024px) {
  .hiw-layout {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
  }

  .hiw-intro {
    position: sticky;
    top: 120px;
  }
}

/* --- Intro column --- */
.hiw-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a6a33;
}

.hiw-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.hiw-title {
  margin: 18px 0 0;
  color: var(--accent-2);
}

.hiw-lede {
  max-width: 44ch;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--hiw-muted);
}

.hiw-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 28px;
  padding: 0 24px;
  border-radius: 0.75rem;
  background: var(--accent-2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 45, 73, 0.18);
}

.hiw-cta:active {
  transform: none;
  box-shadow: none;
}

.hiw-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-cta:hover svg {
  transform: translateX(4px);
}

/* --- Steps --- */
.hiw-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hiw;
}

.hiw-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 40px;
}

.hiw-step:last-child {
  padding-bottom: 0;
}

/* Marker column: dot plus the connecting run to the next step. */
.hiw-marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hiw-marker::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -40px;
  width: 1px;
  background: rgba(15, 45, 73, 0.16);
}

.hiw-step:last-child .hiw-marker::after {
  display: none;
}

.hiw-dot {
  width: 12px;
  height: 12px;
  border: 1px solid var(--accent-1);
  border-radius: 999px;
  background: var(--page-bg);
  box-shadow: inset 0 0 0 3px var(--accent-1);
}

.hiw-body {
  padding: 24px 26px 26px;
  border: 1px solid rgba(15, 45, 73, 0.1);
  border-radius: 18px;
  background: #fff;
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-step:hover .hiw-body {
  transform: translateY(-3px);
  border-color: rgba(204, 191, 147, 0.7);
  box-shadow: 0 18px 60px rgba(15, 45, 73, 0.08);
}

/* Lottie tile, driven by the shared [data-lottie-icon] hook in main.js.
   The tile keeps its box whether or not the animation loads, so a missing
   or slow JSON never shifts the card. */
.hiw-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(204, 191, 147, 0.55);
  border-radius: 16px;
  background: var(--accent-4);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-step:hover .hiw-icon {
  transform: translateY(-2px);
}

.hiw-icon-art {
  display: block;
  width: 32px;
  height: 32px;
}

.hiw-icon-art svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

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

.hiw-name {
  margin: 16px 0 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-2);
}

.hiw-text {
  max-width: 58ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--hiw-muted);
}

.hiw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hiw-tags li {
  padding: 6px 12px;
  border: 1px solid rgba(15, 45, 73, 0.12);
  border-radius: 999px;
  background: var(--page-bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-2);
}

@media (min-width: 768px) {
  .hiw-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 28px;
  }

  .hiw-body {
    padding: 30px 34px 32px;
  }
}

/* ===================== USE CASE SPOTLIGHT ========================
   Three cases, identical anatomy, equal weight.

   Navy field on purpose: this sits between a white section and a cream
   one, so a near-white band here gave three pale sections in a row and
   no separation. It also gives the photography a ground to sit on.
   ================================================================= */

.uc-section {
  background: var(--accent-2);
  padding: 96px 0 104px;
}

.uc-head {
  display: grid;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.uc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.uc-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.uc-title {
  max-width: 18ch;
  margin-top: 18px;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}

.uc-lede {
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 1024px) {
  .uc-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 56px;
    align-items: end;
  }

  .uc-lede {
    justify-self: end;
  }
}

/* --- Cards --- */
.uc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .uc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .uc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Column layout with the outcome pushed to the foot, so all three
   outcomes land on one baseline regardless of copy length. */
.uc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.uc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.uc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-card:hover .uc-media img {
  transform: scale(1.04);
}

/* Just enough scrim to seat the chip — the previous version ran a 94%
   navy wash across the photo and buried it. */
.uc-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(
    to top,
    rgba(9, 28, 46, 0.78),
    rgba(9, 28, 46, 0)
  );
  pointer-events: none;
}

.uc-chip {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--accent-1);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.uc-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 24px 24px;
}

.uc-index {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.uc-index span {
  color: var(--accent-1);
}

.uc-name {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
}

.uc-facts {
  margin: 20px 0 0;
}

.uc-facts dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.uc-facts dd {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.uc-facts dd + dt {
  margin-top: 16px;
}

.uc-outcome {
  margin-top: auto;
  padding-top: 20px;
}

.uc-outcome-label {
  display: inline-block;
  padding-top: 14px;
  border-top: 2px solid var(--accent-1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.uc-outcome-text {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
}

/* --- Footer row --- */
.uc-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 44px;
}

.uc-cta-note {
  max-width: 40ch;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.uc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 0.75rem;
  background: var(--accent-1);
  color: var(--accent-2);
  font-size: 15px;
  font-weight: 600;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-cta:hover {
  transform: translateY(-2px);
}

.uc-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-cta:hover svg {
  transform: translateX(4px);
}

/* ========================= ABOUT — IMAGE SWIRL ===================
   A vortex: tiles orbit a fixed centre, contracting then expanding,
   while the section floods to brand navy and the positioning statement
   resolves.

   The baseline below is a plain content grid. The vortex is switched on
   only at >=1024px with motion allowed, so mobile, reduced-motion and
   no-JS visitors read the same tiles as an ordinary card grid.
   ================================================================= */

.testimonial-section {
  padding: 96px 0 108px;
  background: var(--page-bg);
  overflow-x: clip;
}

.testimonial-head {
  display: grid;
  gap: 28px;
  align-items: end;
}

.testimonial-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-5);
}

.testimonial-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.testimonial-title {
  max-width: 12ch;
  margin-top: 18px;
  color: var(--accent-2);
}

.testimonial-lede {
  max-width: 52ch;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(15, 45, 73, 0.72);
}

.testimonial-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.testimonial-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(204, 191, 147, 0.9);
  border-radius: 16px;
  background: #fff;
  color: rgba(15, 45, 73, 0.72);
  font-size: 15px;
  font-weight: 600;
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease,
    background-color 240ms ease,
    color 240ms ease;
}

.testimonial-nav-button svg {
  width: 18px;
  height: 18px;
}

.testimonial-nav-button:hover,
.testimonial-nav-button:focus-visible,
.testimonial-nav-button--active {
  border-color: var(--accent-1);
  color: var(--accent-2);
}

.testimonial-nav-button:hover,
.testimonial-nav-button:focus-visible {
  transform: translateY(-1px);
}

.testimonial-nav-button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

.testimonial-nav-button:disabled,
.testimonial-nav-button.swiper-button-disabled {
  opacity: 0.48;
  transform: none;
  cursor: default;
  pointer-events: none;
}

.testimonial-carousel {
  margin-top: 42px;
  overflow: hidden;
}

.testimonial-swiper {
  width: 100%;
  overflow: hidden;
}

.testimonial-track {
  align-items: stretch;
}

.testimonial-card {
  position: relative;
  display: flex;
  width: auto;
  height: auto;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(15, 45, 73, 0.08);
  border-radius: 28px;
  background: #fff;
}

.testimonial-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 320px;
  padding: 30px 32px;
  padding-right: clamp(190px, 42%, 370px);
}

.testimonial-quote {
  max-width: 22ch;
  color: var(--accent-2);
}

.testimonial-person {
  margin-top: 32px;
}

.testimonial-role {
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  color: var(--accent-2);
}

.testimonial-company {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(15, 45, 73, 0.56);
}

.testimonial-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(250px, 56%, 390px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--accent-4);
  clip-path: url(#testimonial-media-clip);
}

.testimonial-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

@media (min-width: 1024px) {
  [data-why-stack-enhanced="true"] [data-why-stack-canvas] {
    display: block;
    position: relative;
    min-height: 640px;
    overflow: hidden;
  }

  [data-why-stack-enhanced="true"] [data-why-stack-card] {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
  }

  [data-why-stack-enhanced="true"] [data-why-stack-card="1"],
  [data-why-stack-enhanced="true"] [data-why-stack-card="2"] {
    width: calc(50% - 8px);
    min-height: 250px;
  }

  [data-why-stack-enhanced="true"] [data-why-stack-card="1"] {
    left: 0;
    z-index: 1;
  }

  [data-why-stack-enhanced="true"] [data-why-stack-card="2"] {
    left: auto;
    right: 0;
    z-index: 1;
  }

  [data-why-stack-enhanced="true"] [data-why-stack-card="3"] {
    width: 100%;
    z-index: 3;
  }

  [data-why-stack-enhanced="true"] [data-why-stack-card="4"] {
    width: 100%;
    z-index: 4;
  }
}

@media (min-width: 1024px) {
  .testimonial-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .testimonial-swiper {
    padding-right: 2px;
  }
}

@media (max-width: 767px) {
  .testimonial-section {
    padding: 84px 0 96px;
  }

  .testimonial-card {
    min-height: 0;
    flex-direction: column;
  }

  .testimonial-copy {
    min-height: 0;
    padding: 26px 24px 18px;
  }

  .testimonial-quote {
    max-width: none;
  }

  .testimonial-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 230px;
  }
}

/* ========================== FINAL CTA ============================
   The page closes on a form, not on a link to a form.

   Deepest navy on the site under a faint gold rule grid. No photo:
   the two sections above are already photographic, and a third image
   ended the page on atmosphere instead of on the ask.
   ================================================================= */

.fcta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0 112px;
  background: #06182a;
}

/* Faint measured grid — data-adjacent, and it holds the eye without the
   glow-and-blob treatment the brand brief rules out. */
.fcta-grid-plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(204, 191, 147, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 191, 147, 0.06) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(
    120% 90% at 30% 40%,
    #000 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    120% 90% at 30% 40%,
    #000 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.fcta-layout {
  display: grid;
  gap: 48px;
}

@media (min-width: 1024px) {
  .fcta-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 80px;
    align-items: center;
  }
}

/* --- Offer --- */
.fcta-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.fcta-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.fcta-title {
  max-width: 16ch;
  margin: 20px 0 0;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
}

/* Second line drops to gold, so the promise carries the accent rather
   than a decorative flourish somewhere else in the section. */
.fcta-title span {
  display: block;
  color: var(--accent-1);
}

.fcta-lede {
  max-width: 50ch;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Proof row --- */
.fcta-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin: 36px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Each pair is its own column so the figure can be ordered above its
   label while the markup keeps the dt-then-dd order a <dl> needs. */
.fcta-proof > div {
  display: flex;
  flex-direction: column;
}

.fcta-proof dt {
  order: 2;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.fcta-proof dd {
  order: 1;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.fcta-alt {
  margin: 28px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.fcta-alt a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-decoration-color: rgba(204, 191, 147, 0.55);
  text-underline-offset: 4px;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fcta-alt a:hover {
  color: var(--accent-1);
}

/* --- Form --- */
.fcta-form {
  padding: 34px 32px 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

.fcta-form-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.fcta-form-note {
  margin: 8px 0 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.fcta-field {
  margin-bottom: 16px;
}

/* Labels stay visible above the field — placeholders alone disappear the
   moment someone starts typing. */
.fcta-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.fcta-field input,
.fcta-field select {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  transition:
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fcta-field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.fcta-field input:hover,
.fcta-field select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.fcta-field input:focus,
.fcta-field select:focus {
  outline: none;
  border-color: var(--accent-1);
  background: rgba(255, 255, 255, 0.08);
}

/* Native menus render on the OS surface, so the options need a dark
   background of their own or they land as black-on-black. */
.fcta-field select {
  appearance: none;
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      rgba(255, 255, 255, 0.6) 50%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 22px,
    calc(100% - 14px) 22px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.fcta-field select option {
  background: #0f2d49;
  color: #fff;
}

.fcta-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  margin-top: 22px;
  border: 0;
  border-radius: 0.75rem;
  background: var(--accent-1);
  color: var(--accent-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fcta-submit svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fcta-submit:hover {
  transform: translateY(-2px);
  background: #ded2a9;
  box-shadow: 0 18px 44px rgba(204, 191, 147, 0.26);
}

.fcta-submit:hover svg {
  transform: translateX(4px);
}

.fcta-submit:active {
  transform: none;
  box-shadow: none;
}

.fcta-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.fcta-assurances li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcta-assurances li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent-1);
}

.fcta-section a:focus-visible,
.fcta-section button:focus-visible,
.fcta-section input:focus-visible,
.fcta-section select:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .fcta-section {
    padding: 84px 0 92px;
  }

  .fcta-form {
    padding: 28px 22px 24px;
  }

  .fcta-proof {
    gap: 18px 28px;
  }

  .fcta-proof dd {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcta-submit,
  .fcta-submit svg {
    transition: none;
  }
}

.swirl-stage {
  position: static;
  height: auto;
  padding: 88px 20px 96px;
  isolation: isolate;
}

.swirl-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-5);
}

.swirl-eyebrow-rule {
  width: 32px;
  height: 1px;
  background: var(--accent-1);
}

.swirl-heading {
  max-width: 18ch;
  margin-top: 20px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent-2);
}

/* --- Tiles: a grid until the vortex takes over --- */
.swirl-field {
  display: grid;
  /* 150px keeps phones at two columns — sixteen full-width cards makes the
     section absurdly tall otherwise. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 40px;
}

.swirl-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  padding: 18px;
  overflow: hidden;
  border-radius: 6px;
}

.swirl-tile[data-tone="navy"] {
  background: var(--accent-2);
  color: #fff;
}

.swirl-tile[data-tone="gold"] {
  background: var(--accent-1);
  color: var(--accent-2);
}

.swirl-tile[data-tone="cream"] {
  background: var(--accent-4);
  color: var(--accent-2);
}

.swirl-tile[data-tone="plate"] {
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border: 1px solid rgba(15, 45, 73, 0.1);
  background: #fff;
}

.swirl-tile[data-tone="image"] {
  padding: 0;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 45, 73, 0.14);
}

.swirl-tile[data-tone="image"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* Full row whatever the track count. `span 2` forces a second column the
   grid has no room for on narrow phones, and the tracks go uneven. */
.swirl-tile[data-lead] {
  grid-column: 1 / -1;
  min-height: 220px;
}

.swirl-tile-logo {
  width: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

.swirl-tile-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.swirl-tile-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.swirl-tile-figure {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.swirl-tile-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.75;
}

/* --- Vortex-only machinery --- */
.swirl-mark,
.swirl-flood,
.swirl-cue {
  display: none;
}

.swirl-statement {
  max-width: 24ch;
  margin: 56px auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--accent-2);
}

.swirl-statement span {
  display: inline-block;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-swirl-enhanced="true"] .swirl-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 640px;
    padding: 0;
    /* The constellation is thrown well past the viewport on the way out;
       without this the page gains a horizontal scrollbar. */
    overflow: hidden;
  }

  [data-swirl-enhanced="true"] .swirl-intro {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  [data-swirl-enhanced="true"] .swirl-eyebrow {
    justify-content: center;
  }

  [data-swirl-enhanced="true"] .swirl-heading {
    max-width: 22ch;
    text-align: center;
  }

  /* Tiles leave the grid and become an absolutely-placed constellation. */
  [data-swirl-enhanced="true"] .swirl-field {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
    margin: 0;
    /* Scrubbed depth of field — see blurAt() in about-swirl.js. One layer
       for the whole constellation, so the blur costs a single GPU pass. */
    will-change: filter;
    pointer-events: none;
  }

  [data-swirl-enhanced="true"] .swirl-tile {
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 0;
    will-change: transform;
  }

  [data-swirl-enhanced="true"] .swirl-tile[data-lead] {
    grid-column: auto;
    /* Beats the grid rule's 220px floor — JS sets the real size inline. */
    min-height: 0;
  }

  [data-swirl-enhanced="true"] .swirl-tile[data-tone="image"] {
    box-shadow: none;
  }

  [data-swirl-enhanced="true"] .swirl-mark {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 15;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    color: var(--accent-1);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
  }

  [data-swirl-enhanced="true"] .swirl-mark svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  [data-swirl-enhanced="true"] .swirl-flood {
    display: block;
    position: absolute;
    inset: 0;
    /* Behind the tiles and the mark — the flood is a background change, and
       the constellation has to keep reading on top of it. */
    z-index: 5;
    background: var(--accent-2);
    clip-path: circle(0% at 50% 50%);
    pointer-events: none;
  }

  [data-swirl-enhanced="true"] .swirl-statement {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 18;
    width: min(21ch, 88vw);
    max-width: none;
    margin: 0;
    /* Own transform, so the word reveal only ever touches the inner spans. */
    transform: translate(-50%, -50%);
    font-size: clamp(2rem, 3.6vw, 3.5rem);
    color: #fff;
    opacity: 0;
  }

  [data-swirl-enhanced="true"] .swirl-cue {
    display: flex;
    position: absolute;
    bottom: 40px;
    left: 50%;
    z-index: 20;
    align-items: center;
    gap: 14px;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.swirl-cue-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-5);
}

.swirl-cue-rail {
  position: relative;
  display: block;
  width: 64px;
  height: 1px;
  overflow: hidden;
  background: rgba(15, 45, 73, 0.18);
}

.swirl-cue-rail span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 22px;
  background: var(--accent-1);
  animation: swirlCueSlide 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes swirlCueSlide {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(300%);
  }
}


.pixel-blast-layer {
  overflow: hidden;
  /* Needed so the layer receives pointerdown (ripples) and pointermove (liquid). */
  pointer-events: auto;
}

.pixel-blast-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* WebGL2 unavailable — fall back to a flat hero rather than a lesser effect. */
.pixel-blast-layer[data-pixel-blast-unsupported] {
  display: none;
}

.edge-fade-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      to right,
      var(--charcoal_gray) 0%,
      transparent 18%,
      transparent 82%,
      var(--charcoal_gray) 100%
    ),
    linear-gradient(
      to bottom,
      var(--charcoal_gray) 0%,
      transparent 18%,
      transparent 82%,
      var(--charcoal_gray) 100%
    );
}

.gradient-feature-card {
  isolation: isolate;
  background: #210029;
}

/* Main continuously moving gradient */
.animated-gradient-bg {
  position: absolute;
  inset: -30%;
  z-index: 0;

  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(93, 0, 139, 0.95) 0%,
      rgba(93, 0, 139, 0) 35%
    ),
    radial-gradient(
      circle at 70% 20%,
      rgba(219, 132, 224, 0.9) 0%,
      rgba(219, 132, 224, 0) 38%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(117, 50, 94, 0.9) 0%,
      rgba(117, 50, 94, 0) 38%
    ),
    radial-gradient(
      circle at 38% 75%,
      rgba(103, 33, 139, 0.95) 0%,
      rgba(103, 33, 139, 0) 40%
    ),
    linear-gradient(135deg, #16001d 0%, #400052 35%, #9e53aa 65%, #e6a1dc 100%);

  background-size: 130% 130%;
  filter: blur(20px);
  transform: scale(1.15);
  animation: gradientBackgroundMove 9s ease-in-out infinite alternate;
}

/* Animated blurry liquid-style shapes */
.gradient-orb {
  position: absolute;
  z-index: 1;
  border-radius: 45% 55% 60% 40% / 50% 42% 58% 50%;
  pointer-events: none;
  will-change: transform, border-radius;
}

.gradient-orb-one {
  top: -18%;
  left: 2%;
  width: 55%;
  height: 72%;
  background: rgba(57, 0, 80, 0.75);
  filter: blur(45px);
  animation: orbMoveOne 7s ease-in-out infinite alternate;
}

.gradient-orb-two {
  top: 17%;
  right: -10%;
  width: 56%;
  height: 82%;
  background: rgba(243, 164, 225, 0.55);
  filter: blur(55px);
  animation: orbMoveTwo 10s ease-in-out infinite alternate;
}

.gradient-orb-three {
  bottom: -35%;
  left: 28%;
  width: 55%;
  height: 75%;
  background: rgba(95, 18, 129, 0.8);
  filter: blur(50px);
  animation: orbMoveThree 8s ease-in-out infinite alternate;
}

@keyframes gradientBackgroundMove {
  0% {
    transform: scale(1.15) translate3d(-3%, -3%, 0) rotate(0deg);
    background-position: 0% 30%;
  }

  50% {
    transform: scale(1.25) translate3d(3%, 1%, 0) rotate(3deg);
    background-position: 70% 60%;
  }

  100% {
    transform: scale(1.18) translate3d(-1%, 4%, 0) rotate(-2deg);
    background-position: 100% 30%;
  }
}

@keyframes orbMoveOne {
  0% {
    transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1);
    border-radius: 45% 55% 60% 40% / 50% 42% 58% 50%;
  }

  100% {
    transform: translate3d(20%, 12%, 0) rotate(18deg) scale(1.18);
    border-radius: 60% 40% 42% 58% / 38% 58% 42% 62%;
  }
}

@keyframes orbMoveTwo {
  0% {
    transform: translate3d(6%, -10%, 0) rotate(0deg) scale(1.1);
    border-radius: 54% 46% 38% 62% / 46% 58% 42% 54%;
  }

  100% {
    transform: translate3d(-20%, 16%, 0) rotate(-22deg) scale(0.95);
    border-radius: 38% 62% 58% 42% / 62% 42% 58% 38%;
  }
}

@keyframes orbMoveThree {
  0% {
    transform: translate3d(-12%, 8%, 0) rotate(-8deg) scale(0.95);
    border-radius: 42% 58% 62% 38% / 58% 38% 62% 42%;
  }

  100% {
    transform: translate3d(18%, -20%, 0) rotate(20deg) scale(1.18);
    border-radius: 62% 38% 45% 55% / 40% 62% 38% 60%;
  }
}

/* Slightly intensify gradient on hover */
.gradient-feature-card:hover .animated-gradient-bg {
  filter: blur(16px) saturate(1.15);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient-bg,
  .gradient-orb {
    animation: none;
  }
}

.ai-masterpiece-card {
  overflow: hidden;
}

.ai-masterpiece-visual {
  isolation: isolate;
}

.ai-art-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.ai-art-card {
  position: absolute;
  width: 155px;
  height: 155px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.22);
  transform-origin: center;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    width 700ms cubic-bezier(0.22, 1, 0.36, 1),
    height 700ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms ease;
  will-change: transform;
}

.ai-art-card img {
  transform: scale(1.04);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default compact state */

.ai-art-card-1 {
  z-index: 1;
  transform: translate(-28px, 8px) rotate(-25deg) scale(0.88);
}

.ai-art-card-2 {
  z-index: 2;
  transform: translate(6px, -16px) rotate(24deg) scale(0.9);
}

.ai-art-card-3 {
  z-index: 3;
  transform: translate(27px, 22px) rotate(30deg) scale(0.88);
}

.ai-art-card-4 {
  z-index: 4;
  transform: translate(-18px, 26px) rotate(-16deg) scale(0.9);
}

.ai-art-card-main {
  z-index: 5;
  width: 170px;
  height: 170px;
  transform: translate(0, 4px) rotate(0deg);
}

/* Expanded hover state */

.ai-masterpiece-card:hover .ai-art-card-1 {
  transform: translate(-80px, 10px) rotate(-18deg) scale(0.96);
}

.ai-masterpiece-card:hover .ai-art-card-2 {
  transform: translate(38px, -38px) rotate(24deg) scale(1.08);
}

.ai-masterpiece-card:hover .ai-art-card-3 {
  transform: translate(75px, 34px) rotate(24deg) scale(0.92);
}

.ai-masterpiece-card:hover .ai-art-card-4 {
  transform: translate(-55px, 43px) rotate(-28deg) scale(0.98);
}

.ai-masterpiece-card:hover .ai-art-card-main {
  width: 175px;
  height: 175px;
  transform: translate(0, 31px) rotate(0deg);
}

.ai-masterpiece-card:hover .ai-art-card img {
  transform: scale(1);
}

/* Slight floating movement after expansion */

.ai-masterpiece-card:hover .ai-art-card-main {
  animation: aiMainCardFloat 3.8s ease-in-out infinite;
}

@keyframes aiMainCardFloat {
  0%,
  100% {
    transform: translate(0, 31px) rotate(0deg);
  }

  50% {
    transform: translate(0, 24px) rotate(1deg);
  }
}

@media (max-width: 1024px) {
  .ai-masterpiece-card {
    grid-column: span 12 / span 12;
  }

  .ai-masterpiece-card:hover .ai-art-card-1 {
    transform: translate(-65px, 10px) rotate(-18deg) scale(0.92);
  }

  .ai-masterpiece-card:hover .ai-art-card-2 {
    transform: translate(32px, -30px) rotate(24deg) scale(1);
  }

  .ai-masterpiece-card:hover .ai-art-card-3 {
    transform: translate(62px, 30px) rotate(24deg) scale(0.88);
  }

  .ai-masterpiece-card:hover .ai-art-card-4 {
    transform: translate(-48px, 37px) rotate(-28deg) scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-art-card,
  .ai-art-card img {
    transition: none;
  }

  .ai-masterpiece-card:hover .ai-art-card-main {
    animation: none;
  }
}

.card_with_img {
  background-image: url("https://img.magnific.com/free-photo/close-up-man-wearing-virtual-reality-gadget_23-2148864947.jpg?t=st=1785848396~exp=1785851996~hmac=3a3821271f87d7e971c62a24ddb45dd6a8d840ca745c6f09eeaa41a83beef2e8&w=1480");
}

.animated-json-icon {
  overflow: hidden;
  pointer-events: none;
}

.animated-json-icon svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ============================ FOOTER =============================
   Deeper navy than the final CTA above it, so the page ends on a
   distinct surface rather than one continuous dark block.

   Four link columns plus a brand column with the newsletter capture
   the blueprint asks for. The gold rule under each column title is
   the only ornament — everything else earns its place as a link,
   a contact detail or a reassurance.
   ================================================================= */

.ft {
  padding: 84px 0 32px;
  background: #071726;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}

.ft-top {
  display: grid;
  gap: 56px;
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .ft-top {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 88px;
  }
}

/* --- Brand column --- */
.ft-logo {
  display: inline-flex;
}

.ft-logo img {
  width: auto;
  height: 56px;
  object-fit: contain;
}

.ft-pitch {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

.ft-subscribe {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ft-subscribe-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.ft-subscribe-note {
  max-width: 42ch;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.52);
}

.ft-subscribe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ft-input {
  flex: 1 1 200px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  transition:
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.ft-input:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.ft-input:focus {
  outline: none;
  border-color: var(--accent-1);
  background: rgba(255, 255, 255, 0.08);
}

.ft-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 0.75rem;
  background: var(--accent-1);
  color: var(--accent-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-submit svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-submit:hover {
  transform: translateY(-2px);
  background: #ded2a9;
}

.ft-submit:hover svg {
  transform: translateX(3px);
}

.ft-submit:active {
  transform: none;
}

/* --- Link tree --- */
.ft-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

@media (min-width: 768px) {
  .ft-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
}

.ft-col-title {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.ft-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-1);
}

.ft-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hover is a brightness change only. An underline ran the full width of
   the link, tag pill included, which looked like a mistake — and any
   pseudo-element indents the label, because the flex gap reserves space
   even at zero width. */
.ft-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-list a:hover {
  color: #fff;
}

.ft-tag {
  padding: 3px 8px;
  border: 1px solid rgba(204, 191, 147, 0.4);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-1);
}

/* --- Contact column --- */
.ft-contact {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft-contact-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.ft-contact a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-contact a:hover {
  color: var(--accent-1);
}

.ft-address {
  font-size: 14px;
  font-style: normal;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Reassurance strip --- */
.ft-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.ft-assurances li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-assurances li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent-1);
}

/* --- Bottom bar --- */
.ft-bottom {
  display: grid;
  gap: 20px;
  padding-top: 26px;
}

@media (min-width: 1024px) {
  .ft-bottom {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 40px;
    align-items: center;
  }
}

.ft-copy {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.ft-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft-legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-legal a:hover {
  color: #fff;
}

.ft-social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-social svg {
  width: 16px;
  height: 16px;
}

.ft-social a:hover {
  transform: translateY(-2px);
  border-color: var(--accent-1);
  background: var(--accent-1);
  color: var(--accent-2);
}

/* Gold ring reads on this navy at any focus target in the footer. */
.ft a:focus-visible,
.ft button:focus-visible,
.ft input:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ft-submit,
  .ft-submit svg,
  .ft-social a,
  .ft-list a {
    transition: none;
  }
}

@media (max-width: 767px) {
  .ft {
    padding: 68px 0 28px;
  }

  .ft-submit {
    width: 100%;
  }
}