/* Page 5262 only: contain the full-bleed prototype and inherit the approved brand tokens. */
body:is(.page-id-5262, .page-id-5281) {
  background: #121212;
}

/* This experimental canvas alone omits the imported theme header and floating demo controls. */
body:is(.page-id-5262, .page-id-5281) .elementor-location-header,
body:is(.page-id-5262, .page-id-5281) > .elementor-86,
body:is(.page-id-5262, .page-id-5281) .elementor-location-footer,
body:is(.page-id-5262, .page-id-5281) #reactheme-header,
body:is(.page-id-5262, .page-id-5281) #reactheme-footer,
body:is(.page-id-5262, .page-id-5281) .rts-header,
body:is(.page-id-5262, .page-id-5281) .rts-footer,
body:is(.page-id-5262, .page-id-5281) #scrollUp,
body:is(.page-id-5262, .page-id-5281) .wpml-ls-statics-footer,
body:is(.page-id-5262, .page-id-5281) .wpml-ls-statics-shortcode_actions {
  display: none;
}

/* Root scope: isolated local aliases read Elementor global variables first. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc {
  --road-red: var(--ge-red, #EB5D69);
  --road-amber: var(--ge-amber, #FDC547);
  --road-muted: var(--ge-text-muted, #A7AAB1);
  --road-reveal-duration: 850ms;
  --road-shell: 74rem;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: radial-gradient(ellipse at 90% 8%, #eb5d6908, transparent 33%), #121212;
  font-family: var(--ge-font-primary, Poppins), sans-serif;
}

/* Preserve the original three-step POC gutters; the full page uses native Atomic full-width sections. */
body.page-id-5262 .ge-road-poc {
  padding: 0 clamp(1.25rem, 5vw, 5rem);
}

/* Original POC intro: full-page hero layout is controlled exclusively in Atomic. */
body.page-id-5262 .ge-road-poc .ge-road-poc-intro {
  max-width: var(--road-shell);
  margin-inline: auto;
  padding: clamp(4rem, 7vw, 7rem) 0 2.75rem;
}

/* Intro accent: a small brand signature, separate from the heading text. */
body.page-id-5262 .ge-road-poc .ge-road-poc-intro::before {
  content: '';
  position: static;
  display: block;
  flex-shrink: 0;
  width: 3.25rem;
  height: 0.2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--road-red), var(--road-amber));
}

/* Scroll hint: allow a quiet pause after the introduction. */
body.page-id-5262 .ge-road-poc .ge-road-poc-intro > :last-child {
  margin-top: 1.25rem;
}

/* Timeline frame: native Elementor rows determine height and readable flow. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-timeline {
  position: relative;
  max-width: var(--road-shell);
  margin-inline: auto;
  padding: 0;
}

/* SVG host: absolutely positioned artwork cannot affect native content layout. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* SVG profiles: desktop visible by default, simpler variants selected at breakpoints. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-svg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Desktop road uses a full S curve. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-svg--desktop {
  display: block;
}

/* Road strokes: scale positions responsively without scaling lane or shoulder widths. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-road path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Road shoulder: subtle graphite edge, without high-contrast infographic outlines. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-edge {
  stroke: #393638;
  stroke-width: 64;
}

/* Asphalt surface: dark neutral pavement. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-asphalt {
  stroke: #1c1c1e;
  stroke-width: 61;
}

/* Inner shoulder: thin, muted lane-edge details. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-inner {
  stroke: #262628;
  stroke-width: 47;
}

/* Centre markings: understated dashes suggest an automotive road. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-lane {
  stroke: #a7aab14d;
  stroke-width: 1.5;
  stroke-dasharray: 5 12;
}

/* Progress wash: only a low-opacity tint illuminates the road surface. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-wash {
  stroke-width: 58;
  opacity: 0.09;
}

/* Progress line: a precise red-to-amber light follows the visitor's scroll position. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-progress {
  stroke-width: 2.5;
  opacity: 0.8;
}

/* Static fallback: a restrained, fully visible road remains when JavaScript is unavailable. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc:not(.is-enhanced) .ge-road-poc-progress {
  opacity: 0.3;
}

/* Connector strokes link each SVG checkpoint to its corresponding native card. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-connector {
  fill: none;
  stroke: #645342;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.65;
}

/* Pin halo: no perpetual pulse; only the currently active checkpoint receives a quiet glow. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin-halo {
  fill: #fdc54708;
  stroke: #fdc5471a;
  stroke-width: 1;
  opacity: 0;
  transition: opacity 450ms ease;
}

/* Pin face: durable dark background with a fine neutral rim. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin-face {
  fill: #171719;
  stroke: #696063;
  stroke-width: 1;
  transition: stroke 450ms ease, fill 450ms ease;
}

/* Checkpoint numbers: tabular Poppins numerals, readable independently from color. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin text {
  fill: #c3bec0;
  font: 500 14px var(--ge-font-primary, Poppins), sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  transition: fill 450ms ease;
}

/* Reached checkpoints retain a subtle brand border. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin.is-complete .ge-road-poc-pin-face {
  stroke: var(--road-red);
}

/* Active checkpoint: slightly warmer face and amber numerals. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin.is-active .ge-road-poc-pin-face {
  fill: #292016;
  stroke: var(--road-amber);
}

/* Active checkpoint halo fades smoothly without scaling surrounding content. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin.is-active .ge-road-poc-pin-halo {
  opacity: 1;
}

/* Active checkpoint number follows the brand amber. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-pin.is-active text {
  fill: var(--road-amber);
}

/* Native rows: each step receives enough breathing room for a comfortable reading rhythm. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 25rem;
  padding-block: 2.5rem;
}

/* Native content cards: understated panels, with meaningful copy edited in Elementor. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-card {
  position: relative;
  width: 37%;
  min-width: 0;
  padding: 2rem;
  border: 1px solid #ffffff10;
  border-radius: 0.35rem;
  background: linear-gradient(145deg, #ffffff04, #ffffff00), #151516;
  transition: opacity var(--road-reveal-duration) ease, transform var(--road-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1), border-color 500ms ease;
}

/* Card signature: small brand rule rather than a bright card background. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 2rem;
  width: 2.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--road-red), var(--road-amber));
}

/* Alternating middle card: the second step sits to the right of its checkpoint. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-step-two {
  justify-content: flex-end;
}

/* Enhanced reveal: only initialized JavaScript can opt cards into a hidden starting state. */
body.page-id-5262 .ge-road-poc.is-enhanced .ge-road-poc-step:not(.is-revealed) .ge-road-poc-card {
  opacity: 0;
  transform: translateY(1.25rem);
}

/* Reached native card: illumination is subtle and only tied to the active checkpoint. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-step.is-active .ge-road-poc-card {
  border-color: #fdc5473b;
}

/* Footer: a quiet endpoint, without adding more journey steps or a sales section. */
body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-footnote {
  max-width: var(--road-shell);
  margin-inline: auto;
  padding: 3.5rem 0 5rem;
  text-align: center;
  align-items: center;
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet SVG: gentler curves reserve more room for legible cards. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-svg--desktop { display: none; }
  /* Tablet SVG profile replaces the wider desktop S curve. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-svg--tablet { display: block; }
  /* Tablet cards retain comfortable padding within their alternating columns. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-card { width: 38%; padding: 1.4rem; }
  /* Tablet card titles use the existing card-title token to avoid cramped wrapping. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-card h2 { font-size: var(--ge-size-card-title, 1.5rem); }
  /* Tablet road widths are reduced, not the whole desktop layout. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-edge { stroke-width: 44; }
  /* Tablet pavement follows the narrower shoulder. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-asphalt { stroke-width: 41; }
  /* Tablet inner lane remains distinct but quiet. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-inner { stroke-width: 29; }
  /* Tablet illumination stays inside the road edges. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-wash { stroke-width: 38; }
}

@media (max-width: 767px) {
  /* Mobile intro: editorial hierarchy with a shorter top lead-in. */
  body.page-id-5262 .ge-road-poc .ge-road-poc-intro { padding-top: 3rem; padding-bottom: 2rem; }
  /* Mobile desktop road is replaced rather than scaled down. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-svg--desktop { display: none; }
  /* Mobile road is a straight, accessible vertical reading rail. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-svg--mobile { display: block; }
  /* Mobile rows keep every card in one column to the right of the road. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-step { min-height: 20rem; padding: 1.25rem 0 1.25rem 4.5rem; justify-content: flex-start; }
  /* Mobile cards fill their remaining readable column. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-card { width: 100%; padding: 1.4rem; gap: 0.8rem; }
  /* Mobile marker accent follows the smaller panel padding. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-card::before { left: 1.4rem; }
  /* Mobile road shoulders fit beside the cards with a clear gap. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-edge { stroke-width: 29; }
  /* Mobile pavement remains darker than the page. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-asphalt { stroke-width: 26; }
  /* Mobile inner shoulder leaves a narrow lane. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-inner { stroke-width: 18; }
  /* Mobile progress wash stays inside the narrower lane. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-wash { stroke-width: 23; }
  /* Mobile endpoint remains comfortably separated from the last card. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc .ge-road-poc-footnote { padding-top: 2rem; padding-bottom: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: anchor and keyboard scrolling never inherits smooth behavior on this page. */
  html:has(body:is(.page-id-5262, .page-id-5281)),
  body:is(.page-id-5262, .page-id-5281) { scroll-behavior: auto !important; }
  /* Reduced motion: content stays visible without entry movement. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc.is-enhanced .ge-road-poc-step:not(.is-revealed) .ge-road-poc-card { opacity: 1; transform: none; }
  /* Reduced motion: disable all prototype transitions while retaining visual hierarchy. */
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc *,
  body:is(.page-id-5262, .page-id-5281) .ge-road-poc *::before { transition: none !important; animation: none !important; }
}

/* Lenis trial: required root sizing is confined to this POC document. */
html.lenis:has(body:is(.page-id-5262, .page-id-5281)),
html.lenis > body:is(.page-id-5262, .page-id-5281) { height: auto; }

/* Lenis trial: wheel interpolation must not stack on CSS smooth scrolling. */
html.lenis:has(body:is(.page-id-5262, .page-id-5281)),
html.lenis > body:is(.page-id-5262, .page-id-5281) { scroll-behavior: auto !important; }

/* Native nested scrollers remain independent of desktop wheel smoothing. */
body:is(.page-id-5262, .page-id-5281) [data-lenis-prevent],
body:is(.page-id-5262, .page-id-5281) [data-lenis-prevent-wheel],
body:is(.page-id-5262, .page-id-5281) [data-lenis-prevent-touch] { overscroll-behavior: contain; }

/* Full journey upcoming state: content is always readable, including without JavaScript. */
body.page-id-5281 .ge-road-poc .ge-road-poc-card {
  background: #131315;
  border-color: #ffffff12;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: background-color 550ms ease, border-color 550ms ease, box-shadow 550ms ease;
}

/* Full journey upcoming titles: retain accessible contrast rather than hiding future steps. */
body.page-id-5281 .ge-road-poc .ge-road-poc-card h2 {
  color: #dddde1;
  transition: color 550ms ease;
}

/* Full journey upcoming descriptions: keep the approved muted brand color. */
body.page-id-5281 .ge-road-poc .ge-road-poc-card p:last-child {
  color: var(--road-muted);
  transition: color 550ms ease;
}

/* Full journey completed state: a faint red accent preserves visual progress. */
body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-complete .ge-road-poc-card {
  background-color: #181719;
  border-color: #eb5d692e;
}

/* Full journey completed titles remain slightly clearer than upcoming titles. */
body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-complete .ge-road-poc-card h2 {
  color: #eeeeF0;
}

/* Full journey completed descriptions retain comfortable reading contrast. */
body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-complete .ge-road-poc-card p:last-child {
  color: #b7b9c0;
}

/* Full journey current state: the existing checkpoint logic supplies this class. */
body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-active .ge-road-poc-card {
  background-color: #211c1d;
  border-color: #fdc54770;
  box-shadow: 0 0 1.6rem #eb5d6909;
}

/* Full journey active title: no scaling, translation or layout movement. */
body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-active .ge-road-poc-card h2 {
  color: var(--ge-text-primary, #ffffff);
}

/* Full journey active description: increased clarity is synchronized with its pin. */
body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-active .ge-road-poc-card p:last-child {
  color: #d3d4d8;
}

@media (max-width: 1024px) {
  /* Tablet/mobile active cards rely on border, surface and text instead of glow. */
  body.page-id-5281 .ge-road-poc .ge-road-poc-step.is-active .ge-road-poc-card { box-shadow: none; }
}