/* =============================================================================
   WORLD PANELS
   =============================================================================
   The content layer for 3D mode (html.is-world). Sections no longer sit on one
   big slab: every readable block is its own glass tile floating in the valley,
   so the scenery shows between tiles while the text keeps solid contrast.

   Building blocks
     tile    - glass card: cards, FAQ items, form panels, case-study blocks
     plate   - compact glass title plate for section headings / page headers
     beacon  - call-to-action tile with a warm glow (cta-band)
     pill    - small mono label (eyebrows, breadcrumb, tags, prices)

   Without html.is-world none of this applies, so the regular site (no WebGL,
   Data Saver) is untouched. */

html.is-world {
  --text: #f3efe6;
  --muted: #c3cddc;
  --line: rgb(255 255 255 / 0.14);
  --surface: rgb(10 14 24 / 0.6);
  --surface-strong: rgb(9 12 20 / 0.82);

  /* Written by world.js every frame (camera -> page bridge). */
  --world-steer-x: 0;
  --world-steer-y: 0;
  --world-bob: 0;
  --world-speed: 0;
  --world-sun-nx: 0.4;
  --world-sun-ny: -0.6;
  --world-origin-y: 50vh;
  --world-sun-color: #ffd2a0;
  --world-fog: #c9694f;

  /* How strongly the content layer follows the camera (less on phones). */
  --w-couple: 1;

  /* Glass picks up a little of this page's sky colour. */
  --w-glass: color-mix(in srgb, var(--world-fog) 9%, rgb(10 14 24 / 0.6));
  --w-glass-strong: color-mix(in srgb, var(--world-fog) 7%, rgb(8 11 19 / 0.8));
  --w-glass-soft: color-mix(
    in srgb,
    var(--world-fog) 10%,
    rgb(10 14 24 / 0.42)
  );

  /* Sunlight from the 3D scene: a glint on the side of each tile facing the
     sun, and a thin rim on that edge. Both move as the camera turns. */
  --w-light: radial-gradient(
    120% 120% at calc(50% + var(--world-sun-nx) * 60%)
      calc(50% + var(--world-sun-ny) * 70%),
    color-mix(in srgb, var(--world-sun-color) 24%, transparent) 0%,
    transparent 58%
  );
  --w-rim: inset calc(var(--world-sun-nx) * -1.5px)
    calc(var(--world-sun-ny) * -1.5px) 0
    color-mix(in srgb, var(--world-sun-color) 55%, transparent);
  --w-line: rgb(255 255 255 / 0.13);
  --w-line-hi: rgb(255 255 255 / 0.26);
  --w-accent: #ffad67;
  --w-accent-line: rgb(255 173 103 / 0.55);
  --w-accent-glow: rgb(255 173 103 / 0.2);
  --w-radius: 20px;
  --w-blur: blur(14px) saturate(1.35);
  --w-shadow:
    0 24px 60px rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.09);
  --w-sheen: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.06) 0%,
    rgb(255 255 255 / 0) 38%
  );
}

/* -----------------------------------------------------------------------------
   Sections: no slab. Spacing between them is where the flight shows through.
   ----------------------------------------------------------------------------- */
html.is-world main > section:not(.hero) {
  margin-block: clamp(4.5rem, 20vh, 12rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}

html.is-world main > section:not(.hero):first-of-type {
  margin-top: clamp(2.5rem, 10vh, 6rem);
}

/* Old per-component decoration the scene replaces. Functional pseudo-elements
   (FAQ toggle, list bullets, quote mark) are restyled below instead. */
html.is-world .project-card::after,
html.is-world .service-card::after,
html.is-world .pricing-card::after,
html.is-world .pricing-care::after,
html.is-world .pricing-addons::after,
html.is-world .process-panel::after,
html.is-world .process-panel::before,
html.is-world .contact-panel::after,
html.is-world .contact-panel::before,
html.is-world .testimonial-card::after,
html.is-world .faq-item::after,
html.is-world .page-header::before {
  display: none;
}

/* -----------------------------------------------------------------------------
   Tile: the shared glass card
   ----------------------------------------------------------------------------- */
html.is-world .service-card,
html.is-world .project-card,
html.is-world .testimonial-card,
html.is-world .pricing-card,
html.is-world .pricing-summary-card,
html.is-world .pricing-care,
html.is-world .pricing-addons,
html.is-world .faq-item,
html.is-world .process-panel,
html.is-world .contact-panel,
html.is-world .case-study__section,
html.is-world .about-copy,
html.is-world .site-footer {
  position: relative;
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  background: var(--w-light), var(--w-sheen), var(--w-glass);
  backdrop-filter: var(--w-blur);
  box-shadow: var(--w-rim), var(--w-shadow);
  color: var(--text);
  transition:
    translate 260ms ease,
    border-color 220ms ease,
    box-shadow 260ms ease,
    background 220ms ease;
}

/* Interactive tiles lift and catch the light. `translate` (not `transform`)
   so it stacks with the pointer tilt from motion.js. */
@media (hover: hover) {
  html.is-world .service-card:hover,
  html.is-world .project-card:hover,
  html.is-world .pricing-card:hover,
  html.is-world .pricing-summary-card:hover,
  html.is-world .faq-item:hover {
    translate: 0 -4px;
    border-color: var(--w-accent-line);
    box-shadow:
      var(--w-rim),
      0 0 0 1px var(--w-accent-glow),
      0 32px 80px rgb(0 0 0 / 0.42),
      inset 0 1px 0 rgb(255 255 255 / 0.12);
  }
}

/* Featured tiles carry a warm rim. */
html.is-world .pricing-card--featured,
html.is-world .pricing-summary-card--featured,
html.is-world .project-card--featured {
  border-color: var(--w-accent-line);
  box-shadow:
    0 0 0 1px var(--w-accent-glow),
    0 0 48px rgb(255 173 103 / 0.14),
    var(--w-rim),
    var(--w-shadow);
}

/* Grids: breathing room so the valley shows between tiles. */
html.is-world .services-grid,
html.is-world .projects-grid,
html.is-world .pricing-grid,
html.is-world .pricing-summary,
html.is-world .testimonials-grid,
html.is-world .faq-list,
html.is-world .case-study__grid {
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

html.is-world .case-study__body {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  background: none;
  border: 0;
  box-shadow: none;
}

html.is-world .case-study__section {
  padding: clamp(1.2rem, 2.6vw, 2rem);
}

/* -----------------------------------------------------------------------------
   Pill: small mono labels
   ----------------------------------------------------------------------------- */
html.is-world .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin: 0;
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--w-accent-line);
  border-radius: 999px;
  background: rgb(10 14 24 / 0.66);
  backdrop-filter: blur(8px);
  color: #ffdcb5;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none;
  animation: none;
}

html.is-world .eyebrow::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--w-accent);
  box-shadow: 0 0 10px var(--w-accent);
}

/* Section labels ("service menu", "investment"...) come from styles.css as
   ::before content on a few sections only. Hide the empty one everywhere
   else, and restyle the real labels as world pills. */
html.is-world .section-heading::before {
  display: none;
}

html.is-world .section--about .section-heading::before,
html.is-world .section--services .section-heading::before,
html.is-world .section--pricing .section-heading::before,
html.is-world .section--faq .section-heading::before,
html.is-world .section--contact .section-heading::before {
  display: inline-flex;
  min-height: 0;
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--w-accent-line);
  border-radius: 999px;
  background: rgb(10 14 24 / 0.66);
  color: #ffdcb5;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  opacity: 1;
  box-shadow: none;
  animation: none;
}

html.is-world .breadcrumb {
  width: fit-content;
  margin: clamp(1.5rem, 6vh, 3rem) auto 0;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--w-line);
  border-radius: 999px;
  background: var(--w-glass-soft);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

html.is-world .breadcrumb a {
  color: #ffdcb5;
}

html.is-world .tag-list li,
html.is-world .service-card__price,
html.is-world .card-label {
  border-color: var(--w-line-hi);
  background: rgb(255 255 255 / 0.05);
}

html.is-world .tag-list li {
  border: 1px solid var(--w-line);
  border-radius: 999px;
}

/* -----------------------------------------------------------------------------
   Plate: section headings and interior page headers
   ----------------------------------------------------------------------------- */
html.is-world .section-heading,
html.is-world .page-header {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  max-width: 58rem;
  margin-bottom: clamp(1.4rem, 4vh, 2.4rem);
  padding: clamp(1.2rem, 2.8vw, 2.1rem);
  border: 1px solid var(--w-line);
  border-radius: calc(var(--w-radius) + 4px);
  background: var(--w-light), var(--w-sheen), var(--w-glass-soft);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
}

/* Interior page headers: one centred title plate on every page. */
html.is-world .page-header {
  justify-items: center;
  max-width: 64rem;
  margin: 1rem auto clamp(1.4rem, 4vh, 2.4rem);
  text-align: center;
  background: var(--w-light), var(--w-sheen), var(--w-glass);
}

html.is-world .page-header__inner {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  padding: 0;
  text-align: center;
}

html.is-world .section-heading h2,
html.is-world .page-header h1,
html.is-world .about-copy h2,
html.is-world .contact-panel h2,
html.is-world .cta-band h2 {
  color: #f7f2e7;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}

html.is-world .section-heading h2,
html.is-world .about-copy h2,
html.is-world .contact-panel h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
}

html.is-world .page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.02;
}

html.is-world .section-heading p,
html.is-world .page-header p:not(.eyebrow) {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
}

html.is-world .section-link {
  color: #ffdcb5;
}

/* -----------------------------------------------------------------------------
   Beacon: call-to-action bands
   ----------------------------------------------------------------------------- */
html.is-world .cta-band {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid var(--w-accent-line);
  border-radius: calc(var(--w-radius) + 6px);
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      rgb(255 173 103 / 0.2) 0%,
      rgb(255 173 103 / 0) 60%
    ),
    var(--w-light), var(--w-glass-strong);
  backdrop-filter: var(--w-blur);
  box-shadow:
    0 0 0 1px var(--w-accent-glow),
    0 0 70px rgb(255 173 103 / 0.16),
    0 30px 80px rgb(0 0 0 / 0.4);
  text-align: center;
}

html.is-world .cta-band p {
  color: var(--muted);
}

html.is-world .cta-band__actions {
  justify-content: center;
}

/* -----------------------------------------------------------------------------
   Card internals
   ----------------------------------------------------------------------------- */
html.is-world .service-card {
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
}

html.is-world .service-card__icon {
  width: 3rem;
  height: 3rem;
  padding: 0.55rem;
  border: 1px solid var(--w-accent-line);
  border-radius: 14px;
  background: rgb(255 173 103 / 0.08);
  color: var(--w-accent);
}

html.is-world .service-card p,
html.is-world .project-card p,
html.is-world .pricing-card__summary,
html.is-world .case-study__section p,
html.is-world .case-study__list li,
html.is-world .faq-item__answer,
html.is-world .about-copy p {
  color: var(--muted);
}

html.is-world .service-card h3,
html.is-world .project-card h3,
html.is-world .pricing-card h3,
html.is-world .pricing-summary-card h3,
html.is-world .case-study__section h2,
html.is-world .case-study__section h3 {
  color: #f7f2e7;
}

html.is-world .service-card__link,
html.is-world .contact-link {
  color: var(--w-accent);
}

html.is-world .project-card {
  overflow: hidden;
}

html.is-world .project-card__thumb {
  margin: 0.6rem 0.6rem 0;
  border: 1px solid var(--w-line);
  border-radius: calc(var(--w-radius) - 6px);
  background: rgb(5 8 14 / 0.6);
}

/* One testimonial today: let it span the row instead of a third of it. */
html.is-world .testimonials-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

html.is-world .testimonial-card {
  width: min(100%, 56rem);
  justify-self: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

html.is-world .testimonial-card__quote {
  color: #f7f2e7;
}

html.is-world .testimonial-card__quote::before {
  color: var(--w-accent);
  opacity: 0.9;
}

html.is-world .pricing-card,
html.is-world .pricing-summary-card {
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

html.is-world .pricing-card__price,
html.is-world .tier-price {
  color: #fff6ea;
}

html.is-world .card-label {
  color: #ffdcb5;
}

html.is-world .case-study__list li::before,
html.is-world .build-list li::before {
  color: var(--w-accent);
}

/* -----------------------------------------------------------------------------
   FAQ
   ----------------------------------------------------------------------------- */
html.is-world .faq-item {
  overflow: hidden;
}

html.is-world .faq-item[open] {
  border-color: var(--w-accent-line);
  background: var(--w-light), var(--w-sheen), var(--w-glass-strong);
}

html.is-world .faq-item__question {
  color: #f7f2e7;
}

html.is-world .faq-item__question::after {
  border: 1px solid var(--w-accent-line);
  background: rgb(255 173 103 / 0.1);
  color: var(--w-accent);
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   About / process
   ----------------------------------------------------------------------------- */
html.is-world .about-copy {
  padding: clamp(1.2rem, 2.8vw, 2.1rem);
}

html.is-world .process-panel {
  padding: clamp(1.2rem, 2.6vw, 2rem);
  background: var(--w-light), var(--w-sheen), var(--w-glass-strong);
}

html.is-world .process-step {
  border-color: var(--w-line);
}

/* -----------------------------------------------------------------------------
   Contact panel and forms
   ----------------------------------------------------------------------------- */
html.is-world .contact-panel {
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: var(--w-light), var(--w-sheen), var(--w-glass-strong);
}

html.is-world .contact-panel__form-wrap,
html.is-world .contact-next-steps,
html.is-world .contact-urgency-note,
html.is-world .contact-trust-note {
  border-color: var(--w-line);
  background: rgb(255 255 255 / 0.03);
}

html.is-world .contact-form input:not([type="checkbox"], [type="radio"]),
html.is-world .contact-form select,
html.is-world .contact-form textarea {
  border: 1px solid var(--w-line-hi);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.05);
  color: #f7f2e7;
}

html.is-world .contact-form input::placeholder,
html.is-world .contact-form textarea::placeholder {
  color: rgb(243 239 230 / 0.45);
}

html.is-world .contact-form select option {
  background: #10151d;
  color: #f3efe6;
}

html.is-world .contact-form input:focus-visible,
html.is-world .contact-form select:focus-visible,
html.is-world .contact-form textarea:focus-visible {
  border-color: var(--w-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgb(255 173 103 / 0.28);
}

html.is-world .contact-prompt {
  border-color: var(--w-line-hi);
  background: rgb(255 255 255 / 0.04);
  color: #f3efe6;
}

/* -----------------------------------------------------------------------------
   Buttons over glass
   ----------------------------------------------------------------------------- */
html.is-world .button--secondary,
html.is-world .button--ghost {
  border-color: var(--w-line-hi);
  background: rgb(255 255 255 / 0.07);
  color: #f7f2e7;
}

html.is-world .button--secondary:hover,
html.is-world .button--ghost:hover {
  border-color: var(--w-accent-line);
  background: rgb(255 173 103 / 0.12);
}

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

/* Room under the footer so the fixed HUD never sits on top of its text. */
html.is-world body {
  padding-bottom: 4.5rem;
}

html.is-world .site-footer {
  margin-top: clamp(4rem, 16vh, 9rem);
  background: var(--w-light), var(--w-sheen), var(--w-glass-strong);
}

/* -----------------------------------------------------------------------------
   Flying with the camera: the whole content layer banks with the horizon
   (counter-clockwise when steering right, like the camera's roll),
   drifts against it like something closer to the lens than the valley,
   floats with the camera's bob and eases back when flying fast. The pivot
   is the middle of the screen (world.js keeps --world-origin-y current).
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.is-world main {
    transform-origin: 50% var(--world-origin-y);
    transform: perspective(1600px)
      translate3d(
        calc(var(--world-steer-x) * var(--w-couple) * -22px),
        calc(
          (var(--world-bob) * 4px + var(--world-steer-y) * 10px) *
            var(--w-couple)
        ),
        0
      )
      rotateY(calc(var(--world-steer-x) * var(--w-couple) * -2.4deg))
      rotateX(calc(var(--world-steer-y) * var(--w-couple) * 1.6deg))
      rotateZ(calc(var(--world-steer-x) * var(--w-couple) * -1.1deg))
      scale(calc(1 - var(--world-speed) * 0.03));
    will-change: transform;
  }

  /* Keep the fly-free and warp states (world.css) winning over the above. */
  html.is-world.is-peek main {
    transform: translateY(1.5rem);
  }

  html.is-world.is-warping main {
    transform: scale(1.12);
  }
}

/* -----------------------------------------------------------------------------
   Docking: tiles fly in from depth as the camera reaches them
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.is-world .service-card,
    html.is-world .project-card,
    html.is-world .testimonial-card,
    html.is-world .pricing-card,
    html.is-world .pricing-summary-card,
    html.is-world .faq-item,
    html.is-world .process-panel,
    html.is-world .contact-panel,
    html.is-world .case-study__section,
    html.is-world .about-copy,
    html.is-world .section-heading,
    html.is-world .cta-band {
      animation: worldDock linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}

@keyframes worldDock {
  from {
    opacity: 0;
    transform: perspective(1100px) translate3d(0, 46px, -180px) rotateX(9deg);
  }
}

/* -----------------------------------------------------------------------------
   Small screens: lighter blur (cheaper on phones), a touch more opacity
   ----------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html.is-world {
    --w-glass: color-mix(in srgb, var(--world-fog) 9%, rgb(10 14 24 / 0.7));
    --w-glass-soft: color-mix(
      in srgb,
      var(--world-fog) 10%,
      rgb(10 14 24 / 0.55)
    );
    --w-couple: 0.5;
    --w-blur: blur(9px) saturate(1.25);
    --w-radius: 16px;
  }

  html.is-world main > section:not(.hero) {
    margin-block: clamp(3.5rem, 14vh, 7rem);
  }
}

/* =============================================================================
   STATIONS: the panels standing in the valley (world-stations.js)
   =============================================================================
   html.is-stations is added when the panels are placed in the 3D scene.
   <main> becomes the camera element inside a fixed stage, and each section
   (or the breadcrumb + page header group) is a panel with its own matrix3d. */

.world-stage-spacer {
  display: none;
}

html.is-stations .world-stage-spacer {
  display: block;
}

html.is-stations .world-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: clip;
  pointer-events: none;
  transition: opacity 420ms ease;
}

html.is-stations .world-stage main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;

  /* The camera matrix changes every frame; a transition would smear it. */
  transition: none;
}

/* Through .world-stage so it outranks card rules (position: relative). */
html.is-stations .world-stage .world-stop {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  margin: 0;
  backface-visibility: hidden;
  pointer-events: auto;
  transition: none;

  /* Light per panel: world-stations.js sets --world-sun-nx / -ny on each
     panel from its own orientation to the sun. Re-declaring the light layers
     here makes them resolve with the panel's values, not the page's. */
  --w-light: radial-gradient(
    120% 120% at calc(50% + var(--world-sun-nx) * 60%)
      calc(50% + var(--world-sun-ny) * 70%),
    color-mix(in srgb, var(--world-sun-color) 24%, transparent) 0%,
    transparent 58%
  );
  --w-rim: inset calc(var(--world-sun-nx) * -1.5px)
    calc(var(--world-sun-ny) * -1.5px) 0
    color-mix(in srgb, var(--world-sun-color) 55%, transparent);
}

/* The flat page's section spacing (margin-block above) must not offset the
   placed panels; these selectors match its specificity. */
html.is-stations main > section:not(.hero),
html.is-stations main > section:not(.hero):first-of-type {
  margin: 0;
}

/* Split sections (world-stations.js): the section and its grids collapse to
   zero-size boxes that keep 3D, so each card inside can stand at its own spot
   in the scene. Their own frames and spacing step aside. */
html.is-stations main section.world-split:not(.hero),
html.is-stations main .world-split {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 1;
  overflow: visible;

  /* Any grouping property (isolation, filters, clipping, containment) would
     flatten the 3D context and collapse the cards onto one plane. */
  isolation: auto;
  filter: none;
  clip-path: none;
  contain: none;
  will-change: auto;
}

html.is-stations main .world-split::before,
html.is-stations main .world-split::after {
  display: none;
}

/* A card that stands alone keeps its own frame; trailing links centre. */
html.is-stations .world-rider {
  text-align: center;
}

/* A section heading that stands alone gets room for its corner brackets. */
html.is-stations main .world-stop[data-tag]:not(section) {
  padding: clamp(3.2rem, 4.4vw, 3.9rem) clamp(1.2rem, 3vw, 2.4rem)
    clamp(1.2rem, 3vw, 2.4rem);
}

/* Not cards: each section floats in the valley as open type. Its backing is
   a soft haze drawn in the 3D scene behind it (world-stations.js), so the
   fog, the trees and the time of day all act on it, and it has no edges. */
html.is-stations main > section.world-stop:not(.hero),
html.is-stations main > .world-station-group {
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html.is-stations main {
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.38);
}

/* Panels in 3D cannot blur what is behind them reliably, so the glass inside
   them is a little more solid instead. */
html.is-stations {
  /* Panel heights settle after fonts load; without this the browser would
     nudge the scroll position each time the spacer below them resizes. */
  overflow-anchor: none;
  --w-blur: none;
  --w-glass: color-mix(in srgb, var(--world-fog) 8%, rgb(10 14 24 / 0.78));
  --w-glass-soft: color-mix(in srgb, var(--world-fog) 9%, rgb(10 14 24 / 0.6));
  --w-glass-strong: color-mix(
    in srgb,
    var(--world-fog) 7%,
    rgb(8 11 19 / 0.88)
  );
}

html.is-stations main .eyebrow,
html.is-stations main .breadcrumb,
html.is-stations main .section-heading,
html.is-stations main .page-header,
html.is-stations main .cta-band {
  backdrop-filter: none;
}

/* Scroll-position effects belong to the flat page, not to placed panels. */
html.is-stations main .reveal {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
   Refined plates: structure without heft
   -----------------------------------------------------------------------------
   Each panel is open type on the scene's haze, framed by four fine corner
   brackets and an index tag; its cards are hairline frames with a coloured top
   edge. Every flavor sets its own --f (accent) below, so the same chrome reads
   differently from panel to panel. */
html.is-stations .world-stop[data-flavor] {
  --f: var(--w-accent);
  --fa: color-mix(in srgb, var(--f) 62%, transparent);
  --fh: color-mix(in srgb, var(--f) 16%, transparent);
  --stagger: 90ms;
}

html.is-stations .world-stop[data-flavor="ignite"],
html.is-stations .world-stop[data-flavor="beam"],
html.is-stations .world-stop[data-flavor="voice"],
html.is-stations .world-stop[data-flavor="plate"],
html.is-stations .world-stop[data-flavor="rise"] {
  --f: #ffad67;
}

html.is-stations .world-stop[data-flavor="scan"],
html.is-stations .world-stop[data-flavor="draw"] {
  --f: #2ee6ff;
}

html.is-stations .world-stop[data-flavor="blueprint"] {
  --f: #7fb2ff;
}

html.is-stations .world-stop[data-flavor="cascade"] {
  --f: #8fb8ff;
}

html.is-stations .world-stop[data-flavor="quote"] {
  --f: #ffd27a;
}

html.is-stations .world-stop[data-flavor="ledger"] {
  --f: #ffc766;
}

html.is-stations .world-stop[data-flavor="signal"] {
  --f: #ff8a5c;
}

html.is-stations .world-stop[data-tag]:not(.hero) {
  padding-top: clamp(3.2rem, 4.4vw, 3.9rem);
}

/* Corner brackets. */
html.is-stations .world-stop[data-tag]::before {
  --b: 20px;

  content: "";
  display: block;
  position: absolute;
  inset: 0.45rem;
  width: auto;
  height: auto;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  background:
    linear-gradient(var(--fa), var(--fa)) 0 0 / var(--b) 1px no-repeat,
    linear-gradient(var(--fa), var(--fa)) 0 0 / 1px var(--b) no-repeat,
    linear-gradient(var(--fa), var(--fa)) 100% 0 / var(--b) 1px no-repeat,
    linear-gradient(var(--fa), var(--fa)) 100% 0 / 1px var(--b) no-repeat,
    linear-gradient(var(--fa), var(--fa)) 0 100% / var(--b) 1px no-repeat,
    linear-gradient(var(--fa), var(--fa)) 0 100% / 1px var(--b) no-repeat,
    linear-gradient(var(--fa), var(--fa)) 100% 100% / var(--b) 1px no-repeat,
    linear-gradient(var(--fa), var(--fa)) 100% 100% / 1px var(--b) no-repeat;
}

/* Index tag: "03 / Work". */
html.is-stations .world-stop[data-tag]::after {
  content: attr(data-tag);
  display: block;
  position: absolute;
  inset: 1.25rem auto auto clamp(1.2rem, 3vw, 2.4rem);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  filter: none;
  z-index: 1;
  font: 500 0.68rem/1 var(--mono, monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fa);
  text-shadow: none;
  pointer-events: none;
}

/* Eyebrows: a small-caps label with a leading rule instead of a pill. */
html.is-stations .world-stop:not(.hero) .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f);
  text-shadow: none;
}

html.is-stations .world-stop:not(.hero) .eyebrow::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: currentcolor;
  opacity: 0.7;
}

/* The section labels styles.css adds as ::before ("service menu"...) share
   the eyebrow look, with the rule drawn as a background. */
html.is-stations
  main
  :is(.world-stop .section-heading, .world-stop.section-heading)::before {
  min-height: 0;
  padding: 0 0 0 2.35rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(currentcolor, currentcolor) 0 50% / 1.6rem 1px
    no-repeat;
  box-shadow: none;
  animation: none;
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f);
  text-shadow: none;
}

html.is-stations main .breadcrumb {
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
}

html.is-stations main .page-header,
html.is-stations main .page-header__inner {
  margin-inline: 0;
  text-align: left;
}

html.is-stations main .page-header .eyebrow {
  margin: 0 0 0.9rem;
}

html.is-stations main :is(h1, h2) {
  text-wrap: balance;
}

/* Headings that share a row with other content stay in proportion. */
html.is-stations main .about-copy h2,
html.is-stations main .contact-panel__intro h2 {
  font-size: clamp(1.55rem, 1.5vw + 0.9rem, 2.15rem);
  line-height: 1.16;
}

html.is-stations main .contact-next-steps__title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--f);
}

html.is-stations main .contact-submit-note,
html.is-stations main .contact-trust-note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

html.is-stations main :is(h2, h3) {
  letter-spacing: -0.015em;
}

/* Cards: hairline frames over the haze. */
html.is-stations main .service-card,
html.is-stations main .project-card,
html.is-stations main .testimonial-card,
html.is-stations main .pricing-card,
html.is-stations main .pricing-summary-card,
html.is-stations main .faq-item,
html.is-stations main .process-panel,
html.is-stations main .case-study__section,
html.is-stations main .about-copy,
html.is-stations main .contact-panel__form-wrap {
  position: relative;
  box-sizing: border-box;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 14px;
  background:
    linear-gradient(
      165deg,
      rgb(255 255 255 / 0.065),
      rgb(255 255 255 / 0.015) 58%
    ),
    rgb(8 11 19 / 0.34);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  backdrop-filter: none;

  /* Scroll-driven entry animations belong to the flat page; panels stand in
     a fixed stage where a view() timeline never advances. */
  animation: none;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition:
    translate 260ms ease,
    border-color 240ms ease,
    box-shadow 260ms ease;
}

/* The page's own section headings, headers and bands stay open type. */
html.is-stations main .section-heading,
html.is-stations main .page-header,
html.is-stations main .cta-band,
html.is-stations main .contact-panel,
html.is-stations main .contact-next-steps,
html.is-stations main .contact-urgency-note,
html.is-stations main .contact-trust-note {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
  padding: 0;
}

html.is-stations main .contact-urgency-note {
  padding-left: 0.9rem;
  border-left: 2px solid var(--fa);
}

html.is-stations main .faq-item {
  padding: 0;
}

html.is-stations main .faq-item__question {
  padding: 1.05rem 1.3rem;
}

html.is-stations main .faq-item__answer {
  padding: 0 1.3rem 1.2rem;
}

html.is-stations main .project-card {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
}

html.is-stations main .project-card__thumb {
  width: auto;
  max-height: none;
  margin: clamp(0.9rem, 1.8vw, 1.3rem);
  margin-right: 0;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 10px;
  background: #0a0e16;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

html.is-stations main .project-card__thumb svg,
html.is-stations main .project-card__thumb img {
  width: 100%;
  height: auto;
  animation: none;
}

html.is-stations main .testimonial-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}

html.is-stations main .project-card__body {
  align-content: center;
  gap: 0.85rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
}

html.is-stations main .project-card h3 {
  font-size: clamp(1.3rem, 1.6vw + 0.6rem, 1.7rem);
}

html.is-stations main .card-label {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--f);
}

html.is-stations main .tag-list {
  justify-content: flex-start;
}

html.is-stations main .tag-list li {
  padding: 0.3rem 0.6rem;
  font-size: 0.68rem;
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.04);
}

@media (width <= 720px) {
  html.is-stations main .project-card {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-stations main .project-card__thumb {
    margin: 0.9rem 0.9rem 0;
  }
}

/* A coloured edge across the top of each card; it draws in on arrival. */
html.is-stations main .service-card::before,
html.is-stations main .project-card::before,
html.is-stations main .testimonial-card::before,
html.is-stations main .pricing-card::before,
html.is-stations main .pricing-summary-card::before,
html.is-stations main .faq-item::before,
html.is-stations main .process-panel::before,
html.is-stations main .case-study__section::before,
html.is-stations main .about-copy::before,
html.is-stations main .contact-panel__form-wrap::before {
  content: "";
  position: absolute;
  inset: -1px 16px auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--f), transparent);
  opacity: 0.9;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 1;
  transition: none;
  display: block;
}

html.is-stations main .pricing-card--featured,
html.is-stations main .pricing-summary-card--featured,
html.is-stations main .project-card--featured {
  border-color: var(--fa);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 0 1px var(--fh);
}

/* Hover: the frame picks up the panel's colour and the card lifts a hair. */
@media (hover: hover) {
  html.is-stations main .service-card:hover,
  html.is-stations main .project-card:hover,
  html.is-stations main .pricing-card:hover,
  html.is-stations main .pricing-summary-card:hover,
  html.is-stations main .case-study__section:hover,
  html.is-stations main .faq-item:hover {
    translate: 0 -3px;
    border-color: var(--fa);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      0 0 0 1px var(--fh),
      0 18px 44px rgb(0 0 0 / 0.38);
  }
}

/* The card the camera last came to rest on (world-stations.js snapping).
   Open-type blocks (headings, bands) can be snap targets too; only framed
   cards light up. */
html.is-stations main .service-card.is-focus,
html.is-stations main .project-card.is-focus,
html.is-stations main .pricing-card.is-focus,
html.is-stations main .pricing-summary-card.is-focus,
html.is-stations main .faq-item.is-focus,
html.is-stations main .testimonial-card.is-focus,
html.is-stations main .case-study__section.is-focus,
html.is-stations main .process-panel.is-focus,
html.is-stations main .about-copy.is-focus,
html.is-stations main .contact-panel__form-wrap.is-focus {
  border-color: var(--fa);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 0 1px var(--fh),
    0 0 48px var(--fh);
}

html.is-stations main .has-spotlight.is-tilting {
  transform: none;
}

html.is-stations main .faq-item[open] {
  border-color: var(--fa);
  background:
    linear-gradient(
      165deg,
      rgb(255 255 255 / 0.08),
      rgb(255 255 255 / 0.02) 58%
    ),
    rgb(8 11 19 / 0.5);
}

html.is-stations main .section-heading,
html.is-stations main .page-header {
  padding: 0;
}

/* The last boxes: the hero headline plate, price and meta bands, marquee pills.
   The haze behind the panel does their job now. */
html.is-stations main .hero .hero__headline-row,
html.is-stations main .service-card__price,
html.is-stations main .card-label,
html.is-stations main .project-card__meta,
html.is-stations main .marquee__track span {
  border-color: transparent;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

html.is-stations main .hero .hero__headline-row,
html.is-stations main .service-card__price,
html.is-stations main .project-card__meta {
  padding-inline: 0;
}

html.is-stations main .marquee__track span {
  color: var(--w-rim, #ffdcb5);
}

/* The group panel's header plate no longer needs its own outer spacing. */
html.is-stations .world-station-group .breadcrumb {
  margin-top: 0;
}

html.is-stations .world-station-group .page-header {
  margin-bottom: 0;
}

/* Fly free and the page-to-page warp hide the panels with the stage. */
html.is-stations.is-peek .world-stage,
html.is-stations.is-warping .world-stage {
  opacity: 0;
}

/* =============================================================================
   FLAVORS: each panel arrives in its own way (world-flavors.js)
   =============================================================================
   world-stations.js adds .is-live to a panel while the camera is close, and
   removes it once the camera is well past, so flying back replays the arrival.
   [data-act] marks the pieces that animate (--i is their order); until the
   panel is live they wait invisible. Reduced motion skips all of it. */
@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 120%;
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- Waiting state ---------------------------------------------------- */
  html.is-stations .world-stop[data-flavor]:not(.is-live) [data-act] {
    opacity: 0;
  }

  html.is-stations .world-stop[data-flavor]:not(.is-live)::before,
  html.is-stations .world-stop[data-flavor]:not(.is-live)::after {
    opacity: 0;
  }

  html.is-stations .world-stop[data-flavor]:not(.is-live) .motion-rule {
    transform: scaleX(0);
  }

  /* ---- Shared chrome: brackets lock on, the tag types itself, edges draw -- */
  html.is-stations .world-stop[data-tag].is-live::before {
    animation: fl-lock 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }

  html.is-stations .world-stop[data-tag].is-live::after {
    animation: fl-type 800ms steps(16, end) 250ms backwards;
  }

  html.is-stations .world-stop[data-flavor].is-live .motion-rule {
    transform: scaleX(1);
    transition-delay: 600ms;
  }

  html.is-stations .world-stop[data-flavor].is-live .service-card::before,
  html.is-stations .world-stop[data-flavor].is-live .project-card::before,
  html.is-stations .world-stop[data-flavor].is-live .testimonial-card::before,
  html.is-stations .world-stop[data-flavor].is-live .pricing-card::before,
  html.is-stations
    .world-stop[data-flavor].is-live
    .pricing-summary-card::before,
  html.is-stations .world-stop[data-flavor].is-live .faq-item::before,
  html.is-stations .world-stop[data-flavor].is-live .process-panel::before,
  html.is-stations
    .world-stop[data-flavor].is-live
    .case-study__section::before,
  html.is-stations .world-stop[data-flavor].is-live .about-copy::before,
  html.is-stations
    .world-stop[data-flavor].is-live
    .contact-panel__form-wrap::before {
    animation: fl-edge 1000ms cubic-bezier(0.3, 0.7, 0.2, 1)
      calc(var(--i, 0) * var(--stagger) + 450ms) backwards;
  }

  html.is-stations
    .world-stop[data-flavor].is-live:is(
      .service-card,
      .project-card,
      .testimonial-card,
      .pricing-card,
      .pricing-summary-card,
      .faq-item,
      .process-panel,
      .case-study__section,
      .about-copy,
      .contact-panel__form-wrap
    )::before {
    animation: fl-edge 1000ms cubic-bezier(0.3, 0.7, 0.2, 1) 300ms backwards;
  }

  /* ---- Default arrival: a quiet rise ------------------------------------ */
  html.is-stations .world-stop[data-flavor].is-live [data-act] {
    animation: fl-rise 760ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * var(--stagger) + 120ms) backwards;
  }

  /* ---- ignite (hero): the headline lifts out of a mask, the CTA pulses --- */
  html.is-stations .world-stop[data-flavor="ignite"].is-live .marquee {
    animation: fl-glide 1300ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms backwards;
  }

  html.is-stations .world-stop[data-flavor="ignite"].is-live h1 {
    animation: fl-mask 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms backwards;
  }

  html.is-stations .world-stop[data-flavor="ignite"].is-live .hero__lede {
    animation: fl-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 640ms backwards;
  }

  html.is-stations .world-stop[data-flavor="ignite"].is-live .hero__actions {
    animation: fl-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 780ms backwards;
  }

  html.is-stations
    .world-stop[data-flavor="ignite"].is-live
    .hero__actions
    .button--primary {
    animation: fl-ring 1900ms ease-out 1700ms 2;
  }

  /* ---- scan (site check): a beam sweeps the panel, a 10-pip meter fills --- */
  html.is-stations .world-stop[data-flavor="scan"] .cta-band,
  html.is-stations .world-stop[data-flavor="beam"] .cta-band {
    position: relative;
    overflow: hidden;
    padding: 0.4rem 0 0.6rem;
  }

  html.is-stations .world-stop[data-flavor="scan"] .cta-band::before {
    content: "";
    position: absolute;
    inset: auto 0 auto;
    top: 0;
    width: auto;
    height: 160px;
    border: 0;
    border-bottom: 2px solid var(--f);
    border-radius: 0;
    background: linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb, var(--f) 22%, transparent)
    );
    box-shadow: 0 10px 28px var(--fa);
    translate: none;
    transform: translateY(-100%);
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 14%,
      #000 86%,
      transparent
    );
    pointer-events: none;
    opacity: 0;
  }

  html.is-stations .world-stop[data-flavor="scan"].is-live .cta-band::before {
    animation: fl-scan 1700ms cubic-bezier(0.45, 0, 0.3, 1) 150ms both;
  }

  html.is-stations .world-stop[data-flavor="scan"].is-live [data-act] {
    animation: fl-reveal 800ms ease-out calc(var(--i, 0) * 420ms + 260ms)
      backwards;
  }

  html.is-stations .world-stop[data-flavor="scan"] .cta-band__actions {
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }

  html.is-stations .world-stop[data-flavor="scan"] .cta-band__actions::after {
    content: "";
    width: 12.15rem;
    height: 5px;
    background: repeating-linear-gradient(
      90deg,
      var(--f) 0 0.9rem,
      transparent 0.9rem 1.25rem
    );
    opacity: 0.9;
  }

  html.is-stations
    .world-stop[data-flavor="scan"]:not(.is-live)
    .cta-band__actions::after {
    clip-path: inset(0 100% 0 0);
  }

  html.is-stations
    .world-stop[data-flavor="scan"].is-live
    .cta-band__actions::after {
    animation: fl-meter 1100ms steps(10, end) 1500ms backwards;
  }

  /* ---- beam (playbook band): a soft sheet of light crosses the band ------ */
  html.is-stations .world-stop[data-flavor="beam"] .cta-band::before {
    content: "";
    position: absolute;
    inset: -10% auto -10% 0;
    top: -10%;
    width: 26%;
    height: auto;
    border: 0;
    border-radius: 0;
    background: linear-gradient(
      100deg,
      transparent,
      color-mix(in srgb, var(--f) 30%, transparent) 50%,
      transparent
    );
    box-shadow: none;
    translate: none;
    transform: translateX(-130%) skewX(-16deg);
    mask-image: linear-gradient(
      180deg,
      transparent,
      #000 24%,
      #000 76%,
      transparent
    );
    pointer-events: none;
    opacity: 0;
  }

  html.is-stations .world-stop[data-flavor="beam"].is-live .cta-band::before {
    animation: fl-beam 1800ms cubic-bezier(0.45, 0, 0.25, 1) 350ms both;
  }

  html.is-stations .world-stop[data-flavor="beam"].is-live [data-act] {
    animation: fl-mask 900ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 140ms + 120ms) backwards;
  }

  html.is-stations .world-stop[data-flavor="beam"].is-live .button--primary {
    animation: fl-ring 1900ms ease-out 1500ms 1;
  }

  /* ---- blueprint (work, case studies): cards are unrolled left to right -- */
  html.is-stations .world-stop[data-flavor="blueprint"].is-live [data-act] {
    animation: fl-wipe 1000ms cubic-bezier(0.6, 0, 0.2, 1)
      calc(var(--i, 0) * 170ms + 120ms) backwards;
  }

  html.is-stations
    .world-stop[data-flavor="blueprint"].is-live
    .section-heading {
    animation: fl-mask 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms backwards;
  }

  html.is-stations
    .world-stop[data-flavor="blueprint"].is-live
    .project-card__thumb
    svg,
  html.is-stations
    .world-stop[data-flavor="blueprint"].is-live
    .project-card__thumb
    img {
    animation: fl-settle 1700ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 170ms + 150ms) backwards;
    animation-timeline: auto;
  }

  /* ---- quote (testimonial): the words are inked in, the mark drops in ---- */
  html.is-stations .world-stop[data-flavor="quote"].is-live [data-act] {
    animation: fl-rise 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms backwards;
  }

  html.is-stations
    .world-stop[data-flavor="quote"]
    .testimonial-card__quote::before {
    transform-origin: 0 100%;
    color: var(--f);
    opacity: 0.85;
  }

  html.is-stations
    .world-stop[data-flavor="quote"].is-live
    .testimonial-card__quote::before {
    animation: fl-mark 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms backwards;
  }

  html.is-stations
    .world-stop[data-flavor="quote"].is-live
    .testimonial-card__quote
    p {
    mask-image: linear-gradient(
      100deg,
      #000 calc(var(--p) - 16%),
      transparent var(--p)
    );
    animation: fl-ink 2300ms cubic-bezier(0.3, 0.2, 0.2, 1) 600ms backwards;
  }

  html.is-stations .world-stop[data-flavor="quote"] .testimonial-card__name {
    background: linear-gradient(var(--f), var(--f)) 0 100% / 100% 1px no-repeat;
    padding-bottom: 0.2rem;
  }

  html.is-stations
    .world-stop[data-flavor="quote"].is-live
    .testimonial-card__name {
    animation: fl-underline 1000ms cubic-bezier(0.3, 0.7, 0.2, 1) 2300ms
      backwards;
  }

  /* ---- draw (services): icons trace themselves, cards climb into a grid -- */
  html.is-stations
    .world-stop[data-flavor="draw"].is-live
    .service-card[data-act] {
    animation: fl-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 80ms + 200ms) backwards;
  }

  html.is-stations
    .world-stop[data-flavor="draw"]
    .service-card__icon
    [stroke] {
    stroke-dasharray: var(--len, 120);
    stroke-dashoffset: var(--len, 120);
    transition: stroke-dashoffset 1300ms cubic-bezier(0.3, 0.7, 0.2, 1)
      calc(var(--i, 0) * 80ms + 500ms);
  }

  html.is-stations
    .world-stop[data-flavor="draw"].is-live
    .service-card__icon
    [stroke] {
    stroke-dashoffset: 0;
  }

  /* Counters follow document order, so the section counts its cards even
     when each one stands alone. */
  html.is-stations main > section {
    counter-reset: svc;
  }

  html.is-stations .world-stop[data-flavor="draw"] .service-card {
    counter-increment: svc;
  }

  html.is-stations .world-stop[data-flavor="draw"] .service-card::after {
    content: counter(svc, decimal-leading-zero);
    display: block;
    position: absolute;
    inset: 1rem 1.1rem auto auto;
    font: 500 0.7rem/1 var(--mono, monospace);
    letter-spacing: 0.16em;
    color: var(--fa);
    pointer-events: none;
  }

  /* ---- ledger (pricing): prices are written in line by line -------------- */
  html.is-stations .world-stop[data-flavor="ledger"].is-live [data-act] {
    animation: fl-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 120ms + 150ms) backwards;
  }

  html.is-stations .world-stop[data-flavor="ledger"].is-live .tier-price,
  html.is-stations
    .world-stop[data-flavor="ledger"].is-live
    .pricing-card__price {
    animation: fl-ticker 800ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 120ms + 520ms) backwards;
  }

  html.is-stations
    .world-stop[data-flavor="ledger"]
    .pricing-summary-card--featured::after,
  html.is-stations
    .world-stop[data-flavor="ledger"]
    .pricing-card--featured::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      120% 90% at 50% 0,
      color-mix(in srgb, var(--f) 24%, transparent),
      transparent 64%
    );
    pointer-events: none;
    opacity: 0.5;
  }

  html.is-stations
    .world-stop[data-flavor="ledger"].is-live
    .pricing-summary-card--featured::after,
  html.is-stations
    .world-stop[data-flavor="ledger"].is-live
    .pricing-card--featured::after {
    animation: fl-breathe 3600ms ease-in-out 1200ms infinite alternate;
  }

  /* ---- voice (about): lines are spoken in from the side ------------------ */
  html.is-stations .world-stop[data-flavor="voice"].is-live [data-act] {
    animation: fl-left 800ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 70ms + 120ms) backwards;
  }

  html.is-stations .world-stop[data-flavor="voice"].is-live .process-step {
    animation-name: fl-right;
    animation-delay: calc(var(--i, 0) * 160ms + 420ms);
  }

  html.is-stations .world-stop[data-flavor="voice"] .build-list li::before {
    color: var(--f);
  }

  html.is-stations .world-stop[data-flavor="voice"].is-live .process-step span {
    animation: fl-badge 1500ms ease-out calc(var(--i, 0) * 160ms + 700ms)
      backwards;
  }

  /* ---- cascade (faq): questions tumble in from alternating sides ---------- */
  html.is-stations .world-stop[data-flavor="cascade"] .faq-item:nth-child(odd) {
    --dx: -34px;
  }

  html.is-stations
    .world-stop[data-flavor="cascade"]
    .faq-item:nth-child(even) {
    --dx: 34px;
  }

  html.is-stations
    .world-stop[data-flavor="cascade"].is-live
    .faq-item[data-act] {
    animation: fl-drop 760ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 85ms + 150ms) backwards;
  }

  html.is-stations
    .world-stop[data-flavor="cascade"].is-live
    .faq-item__question::after {
    animation: fl-spin 900ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 85ms + 500ms) backwards;
  }

  /* ---- signal (contact): the page answers back ---------------------------- */
  html.is-stations .world-stop[data-flavor="signal"].is-live [data-act] {
    animation: fl-rise 760ms cubic-bezier(0.2, 0.8, 0.2, 1)
      calc(var(--i, 0) * 75ms + 120ms) backwards;
  }

  html.is-stations
    .world-stop[data-flavor="signal"]
    .contact-link:first-child::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.65rem;
    border-radius: 50%;
    background: var(--f);
    vertical-align: middle;
  }

  html.is-stations
    .world-stop[data-flavor="signal"].is-live
    .contact-link:first-child::before {
    animation: fl-ping 2200ms ease-out 900ms infinite;
  }

  html.is-stations
    .world-stop[data-flavor="signal"].is-live
    .contact-form
    > .button--primary {
    animation:
      fl-rise 760ms cubic-bezier(0.2, 0.8, 0.2, 1)
        calc(var(--i, 0) * 75ms + 120ms) backwards,
      fl-ring 2600ms ease-out 1800ms infinite;
  }

  /* ---- plate (page header): title lifts out of a mask, a rule draws ------- */
  html.is-stations .world-stop[data-flavor="plate"].is-live .page-header h1 {
    animation: fl-mask 1050ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms backwards;
  }

  html.is-stations
    .world-stop[data-flavor="plate"].is-live
    .page-header
    .eyebrow {
    animation: fl-left 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms backwards;
  }

  html.is-stations .world-stop[data-flavor="plate"]::after {
    content: "";
    position: absolute;
    inset: auto clamp(1.2rem, 3vw, 2.4rem) 0;
    height: 1px;
    background: linear-gradient(90deg, var(--f), transparent 72%);
    transform-origin: 0 50%;
    pointer-events: none;
  }

  html.is-stations .world-stop[data-flavor="plate"].is-live::after {
    animation: fl-edge 1200ms cubic-bezier(0.3, 0.7, 0.2, 1) 700ms backwards;
  }

  /* ---- Interaction: opening an FAQ answer ---------------------------------- */
  html.is-stations main .faq-item[open] .faq-item__answer {
    animation: fl-open 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }

  /* ---- Keyframes ------------------------------------------------------------ */
  @keyframes fl-rise {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
  }

  @keyframes fl-left {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
  }

  @keyframes fl-right {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
  }

  @keyframes fl-drop {
    from {
      opacity: 0;
      transform: translateX(var(--dx, 0)) translateY(-12px);
    }
  }

  @keyframes fl-glide {
    from {
      opacity: 0;
      transform: translateX(14%);
    }
  }

  @keyframes fl-reveal {
    from {
      opacity: 0;
      transform: translateY(8px);
      letter-spacing: 0.04em;
    }
  }

  @keyframes fl-mask {
    from {
      opacity: 0;
      transform: translateY(0.45em);
      clip-path: inset(0 0 100% 0);
    }

    to {
      clip-path: inset(-12% -3% -12% -3%);
    }
  }

  @keyframes fl-wipe {
    from {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(-4px -4px -4px -4px);
    }
  }

  @keyframes fl-settle {
    from {
      transform: scale(1.14);
    }
  }

  @keyframes fl-edge {
    from {
      opacity: 0;
      transform: scaleX(0);
    }
  }

  @keyframes fl-lock {
    from {
      opacity: 0;
      transform: scale(1.07);
    }
  }

  @keyframes fl-type {
    from {
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(0);
    }
  }

  @keyframes fl-scan {
    0% {
      top: 0;
      opacity: 0;
    }

    12% {
      opacity: 1;
    }

    85% {
      opacity: 1;
    }

    100% {
      top: 100%;
      opacity: 0;
    }
  }

  @keyframes fl-meter {
    from {
      clip-path: inset(0 100% 0 0);
    }

    to {
      clip-path: inset(0);
    }
  }

  @keyframes fl-beam {
    0% {
      opacity: 0;
      transform: translateX(-130%) skewX(-16deg);
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateX(500%) skewX(-16deg);
    }
  }

  @keyframes fl-ink {
    from {
      --p: 0%;
    }

    to {
      --p: 120%;
    }
  }

  @keyframes fl-mark {
    from {
      opacity: 0;
      transform: scale(2.4) rotate(-14deg);
    }
  }

  @keyframes fl-underline {
    from {
      background-size: 0 1px;
    }
  }

  @keyframes fl-ticker {
    from {
      opacity: 0;
      transform: translateY(0.7em);
      clip-path: inset(0 0 100% 0);
    }

    to {
      clip-path: inset(-10% -5% -10% -5%);
    }
  }

  @keyframes fl-breathe {
    from {
      opacity: 0.25;
    }

    to {
      opacity: 0.85;
    }
  }

  @keyframes fl-badge {
    0% {
      transform: scale(0.6);
      box-shadow:
        0 0 0 0 color-mix(in srgb, var(--f) 70%, transparent),
        0 0 0 2px rgb(12 19 28 / 0.76);
    }

    45% {
      transform: scale(1.08);
    }

    100% {
      transform: scale(1);
      box-shadow:
        0 0 0 16px transparent,
        0 0 0 2px rgb(12 19 28 / 0.76);
    }
  }

  @keyframes fl-spin {
    from {
      opacity: 0;
      transform: rotate(-200deg) scale(0.4);
    }
  }

  @keyframes fl-ping {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--f) 65%, transparent);
    }

    70%,
    100% {
      box-shadow: 0 0 0 11px transparent;
    }
  }

  @keyframes fl-ring {
    0% {
      outline: 2px solid color-mix(in srgb, var(--f) 60%, transparent);
      outline-offset: 0;
    }

    100% {
      outline: 2px solid transparent;
      outline-offset: 16px;
    }
  }

  @keyframes fl-open {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}