/* ===========================================================
   Bizniaga Technologies — Services Page Stylesheet
   Only sections unique to services.html live here. Shared chrome
   (header, mega menu, footer, buttons) is in css/base.css.
   =========================================================== */

/* ---------------- Shared section scaffolding ---------------- */
.section { padding: 64px 0; }
.section-mist { background: var(--mist); }
.section-tight-bottom { padding-bottom: 64px; }
.center-text { text-align: center; margin-left: auto; margin-right: auto; }

.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--purple-start);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 8px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--navy);
}
.section-sub {
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
  margin: 0 0 36px;
  line-height: 1.6;
}

/* ---------------- Hero ---------------- */
.page-hero {
  position: relative;
  background: linear-gradient(120deg, #4b3fb0, #241866);
  color: #fff;
  overflow: hidden;
  padding: 140px 0 0;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 860px) {
  .page-hero-grid { grid-template-columns: 1fr 1fr; }
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.2;
}
.page-hero p {
  color: rgba(255,255,255,0.82);
  font-size: 15px;
  line-height: 1.7;
  max-width: 440px;
  margin: 0 0 26px;
}
.btn-cta {
  display: inline-block;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}
.page-hero-photo {
  width: 100%;
  height: 340px;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
  background: linear-gradient(160deg, #6c5ce7, #2a1f6b);
}
.page-hero-tab-wrap { position: relative; }
.page-hero-tab {
  position: absolute;
  right: 24px;
  top: 0;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 8px 8px 0 0;
}

/* ---------------- Full services grid (row cross-hover + autoplay) ---------------- */
.svc-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-row {
  display: flex;
  gap: 12px;
  height: 300px;
  transition: height 0.5s cubic-bezier(.4,0,.2,1);
}
/* The row NOT being hovered shrinks and equalizes — driven by a class
   toggled via that row's own mouseenter/mouseleave (see script/services.js),
   so gaps between cards within a row never trigger it, only leaving
   the row entirely does. */
.svc-row.row-shrunk { height: 96px; }

.svc-card {
  position: relative;
  flex: 1 1 0;
  border-radius: 16px;
  overflow: hidden;
  background-color: #1c2550;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: flex-grow 0.5s cubic-bezier(.4,0,.2,1);
}
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,12,36,0.92) 0%, rgba(10,12,36,0.3) 60%, transparent 100%);
}
.svc-card.is-active { flex-grow: 4; }
.svc-card:not(.is-active) { flex-grow: 1; }

/* While its own row is shrunk, every card goes to equal width regardless
   of is-active — the "evenly spread out width" state */
.svc-row.row-shrunk .svc-card { flex-grow: 1 !important; }

.svc-card-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}
.svc-card-inner h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0;
  transition: font-size 0.4s ease;
}
.svc-card:not(.is-active) .svc-card-inner h3 { font-size: 14px; }

.svc-row.row-shrunk .svc-card-inner { padding: 14px; }
.svc-row.row-shrunk .svc-card-inner h3 { font-size: 14px; }
.svc-row.row-shrunk .check-badge,
.svc-row.row-shrunk .svc-card-inner p { display: none; }

.svc-card-inner p {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin: 8px 0 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}
.svc-card.is-active .svc-card-inner p { opacity: 1; max-height: 80px; }

.check-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .svc-row { flex-direction: column; height: auto; }
  .svc-card { height: 90px; }
  .svc-card.is-active { height: 220px; }
  .svc-row.row-shrunk { height: auto; }
  .svc-row.row-shrunk .svc-card { height: 64px; }
}

/* ---------------- How We Work ---------------- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.step { text-align: center; position: relative; }
.step-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: relative;
  z-index: 1;
}
.step h4 { font-family: var(--font-display); font-size: 14px; margin: 0 0 6px; color: var(--navy); }
.step p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.steps-row::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
@media (max-width: 760px) {
  .steps-row { grid-template-columns: 1fr; gap: 32px; }
  .steps-row::before { display: none; }
}

/* ---------------- Why Choose Us ---------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.why-card {
  padding: 28px 20px;
  border-radius: 14px;
  background: var(--mist);
  border: 1px solid var(--line);
}
.why-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--purple-start);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 800;
}
.why-card h4 { font-family: var(--font-display); font-size: 15px; margin: 0 0 6px; color: var(--navy); }
.why-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr 1fr; } }

/* ---------------- Tech stack marquee ---------------- */
.tech-strip-wrap { overflow: hidden; }
.tech-strip {
  display: flex;
  gap: 16px;
  width: fit-content;
}
.tech-logo {
  flex: 0 0 auto;
  width: 130px;
  height: 56px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  object-fit: contain;
  padding: 8px;
}

/* ---------------- Closing CTA ---------------- */
.cta-section { padding-top: 20px; padding-bottom: 64px; }
.cta-banner {
  background: linear-gradient(100deg, var(--purple-start), var(--purple-end));
  color: #fff;
  text-align: center;
  padding: 56px 24px;
  border-radius: 24px;
  margin: 0 24px;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 10px;
}
.cta-banner p { color: rgba(255,255,255,0.8); margin: 0 0 22px; }
.cta-banner a {
  display: inline-block;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-banner a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* ================================================================
   SERVICES PAGE v2 — hero, services explorer, toolkit + CTA
   Each block is one screen; the page snaps between them like the
   homepage (script/services.js). Previous page: Backup/Version 5.
   ================================================================ */
:root { --nav-space: 92px; }
.sv-scene { min-height: 100vh; min-height: 100svh; }

/* Hero fills the screen; photo sits on the bottom edge */
.page-hero.sv-scene {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-space) + 4vh);
}
.page-hero.sv-scene .page-hero-grid { flex: 1; align-items: end; }
.page-hero.sv-scene .page-hero-grid > div { align-self: center; padding-bottom: 6vh; }
.page-hero.sv-scene h1 { font-size: clamp(30px, 2.4vw + 10px, 50px); }
.page-hero.sv-scene p { font-size: clamp(15px, 0.4vw + 12px, 18px); max-width: 520px; }
.page-hero.sv-scene .page-hero-photo { height: clamp(260px, 56vh, 560px); }

/* ---------------- Toolkit + CTA (one screen) ---------------- */
.sv-closing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-space) + 3vh) 0 6vh;
  background: #fff;
}
.sv-closing .section-title { font-size: clamp(26px, 1.4vw + 14px, 40px); }
.sv-closing .tech-strip-wrap { margin-bottom: clamp(36px, 7vh, 72px); }
.sv-cta { margin: 0; padding: clamp(40px, 7vh, 72px) 24px; }
.sv-cta h2 { font-size: clamp(24px, 1.2vw + 14px, 36px); }
.sv-cta .btn { display: inline-flex; padding: 12px 26px; border-radius: 999px; }
@media (max-width: 860px) { .sv-closing { padding: 64px 0; } }


/* ================================================================
   SERVICES DECK — stacked cards that flip away one by one
   ================================================================ */
.sv-deck-section {
  display: flex;
  align-items: stretch;
  padding: calc(var(--nav-space) + 2vh) 0 3vh;
  background: var(--mist);
}
.deck-wrap { width: 100%; display: flex; flex-direction: column; }
.deck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(14px, 2.4vh, 26px); }
.deck-head .section-title { margin: 0; font-size: clamp(26px, 1.4vw + 14px, 40px); }
.deck-head .section-eyebrow { margin-bottom: 4px; }
.deck-count { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--muted); letter-spacing: 1px; }
.deck-count span:first-child { color: var(--navy); }

/* The deck: all cards share one spot; JS sets each card's --d
   (distance from the front card: 0 = front, 1 = next, -1 = already gone) */
.deck {
  position: relative;
  flex: 1;
  min-height: 340px;
  perspective: 1600px;
  margin-bottom: 30px;           /* room for the peeking cards */
}
.deck-card {
  --d: 0;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  padding: clamp(28px, 4.5vh, 56px) clamp(28px, 3.4vw, 60px);
  border-radius: 26px;
  color: #fff;
  background: var(--card-color, var(--navy));
  box-shadow: 0 24px 50px rgba(18, 22, 58, 0.18);
  transform-origin: 50% 0%;
  transform: translateY(calc(var(--d) * 16px)) scale(calc(1 - var(--d) * 0.04));
  z-index: calc(50 - var(--d));
  transition:
    transform 0.85s cubic-bezier(.65,.05,.25,1),
    opacity 0.6s ease;
  will-change: transform;
}
/* cards further back than the 2nd peek stay hidden */
.deck-card.is-far { opacity: 0; pointer-events: none; }
/* cards already passed: flipped up and away */
.deck-card.is-gone {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-38%) rotateX(58deg) scale(0.88);
  transition: transform 0.85s cubic-bezier(.65,.05,.25,1), opacity 0.55s ease 0.2s;
}
.deck-card:not(.is-front) { cursor: pointer; }
.deck-card:not(.is-front) .deck-card-copy,
.deck-card:not(.is-front) .deck-card-media { opacity: 0; }
.deck-card-copy, .deck-card-media { transition: opacity 0.4s ease 0.25s; }

.deck-card-num {
  position: absolute;
  top: clamp(20px, 3.4vh, 34px);
  right: clamp(24px, 2.6vw, 40px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.6;
}
.deck-card-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, min(1.7vw, 3.8vh) + 8px, 46px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  max-width: 560px;
}
.deck-card-summary { margin: 0 0 12px; font-size: clamp(15px, min(0.5vw, 1.2vh) + 10px, 19px); line-height: 1.45; color: rgba(255,255,255,0.92); max-width: 520px; }
.deck-card-desc { margin: 0 0 clamp(16px, 2.6vh, 24px); font-size: clamp(13.5px, min(0.3vw, 0.8vh) + 10px, 15.5px); line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 500px; }
.deck-card-offers { list-style: none; margin: 0 0 clamp(18px, 3vh, 28px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.deck-card-offers li {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(255,255,255,0.12);
}
.deck-card-media {
  align-self: stretch;
  border-radius: 18px;
  min-height: 220px;
  background: var(--card-img, none) center / cover no-repeat,
              linear-gradient(150deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Dots tracker */
.deck-dots { display: flex; justify-content: center; align-items: center; gap: 10px; }
.deck-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(18,22,58,0.2);
  overflow: hidden;
  transition: width 0.4s cubic-bezier(.4,0,.2,1), background 0.3s ease;
}
.deck-dot::after { content: ""; position: absolute; inset: -8px -4px; }   /* bigger hit area */
.deck-dot:hover { background: rgba(18,22,58,0.38); }
.deck-dot.is-active { width: 36px; background: rgba(75,63,176,0.22); }
.deck-dot-fill { position: absolute; inset: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--purple-start)); }
.deck-dots.is-running .deck-dot.is-active .deck-dot-fill { animation: deckFill var(--deck-time, 12s) linear forwards; }
.deck-dots.is-paused .deck-dot-fill { animation-play-state: paused !important; }
@keyframes deckFill { to { width: 100%; } }

/* Short desktop screens */
@media (min-width: 861px) and (max-height: 680px) {
  .deck-card-desc { display: none; }
}

/* Phones / tablets: simple list of cards, no stacking */
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .sv-deck-section { padding: calc(var(--nav-space) + 16px) 0 56px; }
  .deck { perspective: none; margin: 0; min-height: 0; display: grid; gap: 16px; }
  .deck-card,
  .deck-card.is-gone,
  .deck-card.is-far {
    position: relative;
    inset: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }
  .deck-card:not(.is-front) .deck-card-copy,
  .deck-card:not(.is-front) .deck-card-media { opacity: 1; }
  .deck-card-media { min-height: 180px; order: -1; }
  .deck-dots, .deck-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck-card.is-gone { transition: opacity 0.3s ease; }
}

/* Deck refinements: real peek under the front card, heading stays on top
   while a card flips away, number sits above the title */
.deck-card { transform: translateY(calc(var(--d) * (4% + 14px))) scale(calc(1 - var(--d) * 0.04)); }
.deck-card.is-gone { z-index: 60; }
.deck-head { position: relative; z-index: 70; }
.deck-card-num { position: static; display: block; margin-bottom: 10px; }
.sv-deck-section { overflow: hidden; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .deck-card, .deck-card.is-gone, .deck-card.is-far { transform: none; z-index: auto; }
}
/* Old card's text disappears at once; the new card's text fades in after the flip */
.deck-card .deck-card-copy, .deck-card .deck-card-media { transition: opacity 0.15s ease; }
.deck-card.is-front .deck-card-copy, .deck-card.is-front .deck-card-media { transition: opacity 0.45s ease 0.35s; }
.deck { margin-bottom: 46px; }


/* ---------------- Deck v2: taller cards, compact label bar ---------------- */
.sv-deck-section { padding: calc(var(--nav-space) + 1.5vh) 0 2.4vh; }
.deck { margin-bottom: 40px; min-height: 380px; }
.deck-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.deck-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 0.4vw + 11px, 18px);
  color: var(--navy);
  letter-spacing: 0.2px;
}
.deck-bar .deck-count { justify-self: end; font-size: 14px; }
.deck-card-title { font-size: clamp(28px, min(1.9vw, 4.4vh) + 8px, 50px); }
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .deck-bar { display: block; order: -1; margin-bottom: 16px; }
  .deck-label { font-size: 24px; }
  .deck-wrap { display: flex; flex-direction: column; }
}


/* ---------------- Deck v3: no label, card + peeks fit inside the deck box ----------------
   The front card leaves --peek of space at the bottom; the cards behind it
   scale from their bottom edge and slide down into that space, so nothing
   spills past the deck onto the dots row. */
.deck { --peek: clamp(30px, 5vh, 44px); margin-bottom: clamp(12px, 2vh, 20px); min-height: 360px; }
.deck-card {
  inset: 0 0 var(--peek) 0;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--d) * var(--peek) / 2)) scale(calc(1 - var(--d) * 0.04));
}
.deck-bar .deck-dots { grid-column: 2; }
.deck-bar .deck-count { grid-column: 3; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .deck { --peek: 0px; }
  .deck-card { inset: auto; transform: none; }
}
.deck-card.is-gone { transform-origin: 50% 0%; }   /* flip away from the top edge, as before */


/* ================================================================
   Services v4: hero background image, narrower deck, flowing scene reveals
   ================================================================ */

/* ---- Hero: full background photo with a brand-coloured wash ---- */
.page-hero-bg {
  position: absolute;
  inset: -12% 0 -12% 0;           /* extra height so the parallax drift never shows an edge */
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(.22,.9,.32,1);
}
#sv-hero.is-in .page-hero-bg img { transform: scale(1); }
.page-hero-bg::after {              /* keeps the white text readable on any photo */
  content: "";
  position: absolute; inset: 0;
  background:
    /* 29 Oct: neutral shade only (was a purple/blue wash) so the photo keeps its own colours */
    linear-gradient(100deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.35), transparent 40%);
}
.page-hero > .container { position: relative; z-index: 1; }
/* Cut-out photo stands on the bottom edge (no box behind it) */
.page-hero.sv-scene .page-hero-photo {
  object-fit: contain;
  object-position: 50% 100%;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 20px 40px rgba(10, 6, 40, 0.45));
}

/* ---- Deck: a little narrower, leaving room either side to scroll the page ---- */
@media (min-width: 861px) {
  .deck, .deck-bar { width: 100%; max-width: 1020px; margin-left: auto; margin-right: auto; }
}

/* ---- Scene reveal (initSceneReveal in script/services.js) ----
   Hidden state offsets come from --rv-y (set per scene: + from below when
   scrolling down, - from above when scrolling up) and --rv-x (.rv-right). */
[data-reveal] .rv {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0px), var(--rv-y, 40px), 0) scale(0.98);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.4,0,.2,1);
}
[data-reveal] .rv-right { --rv-x: 64px; }
[data-reveal].is-in .rv {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s ease calc(var(--i, 0) * 120ms + 150ms),
    transform 0.9s cubic-bezier(.22,.9,.32,1) calc(var(--i, 0) * 120ms + 150ms);
}
[data-reveal].rv-reset .rv { transition: none !important; }
[data-reveal].rv-static .rv { opacity: 1; transform: none; transition: none; }

/* Title shine, replayed each time its section comes in */
.gleam { --gleam-base: var(--navy); --gleam-shine: #cfd2ff; }
.page-hero .gleam { --gleam-base: #ffffff; --gleam-shine: #b8adff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gleam {
    background-image: linear-gradient(110deg,
      var(--gleam-base) 0%, var(--gleam-base) 40%, var(--gleam-shine) 47%,
      #ffffff 50%, var(--gleam-shine) 53%, var(--gleam-base) 60%, var(--gleam-base) 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  [data-reveal].is-in .gleam { animation: svGleam 2.2s ease-in-out 0.9s 1 both; }
}
@keyframes svGleam { from { background-position: 100% 0; } to { background-position: 0% 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .rv { opacity: 1; transform: none; transition: none; }
  [data-reveal].is-in .gleam { animation: none; }
  .page-hero-bg img { transform: none; transition: none; }
}
/* Hero cut-out photo: taller */
.page-hero.sv-scene .page-hero-photo { height: clamp(320px, 74vh, 740px); }

/* CTA banner: world map overlay behind the text (shown in white so it reads on purple) */
.sv-cta { position: relative; overflow: hidden; isolation: isolate; }
.sv-cta > :not(.cta-map) { position: relative; z-index: 1; }
.cta-map {
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: min(85%, 860px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}
/* The closing section is a flex column, where the container's auto margins
   would let it grow to the marquee's full width on phones; keep it screen-wide */
.sv-closing > .container { width: 100%; }
@media (max-width: 640px) { .cta-map { width: 170%; } }

/* CTA banner colours matched to the live site's "We Are Trusted By" block:
   deep navy on the left to bright blue on the right, map in its own soft blue */
.sv-cta { background: linear-gradient(90deg, #111377 0%, #4c5ae1 100%); }
.cta-map { filter: none; opacity: 1; }

/* Hero folder tab: bottom-left corner, matching the homepage hero's active tab */
.page-hero-tabs {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  padding-left: 24px;
}
.page-hero-tabs .page-hero-tab {
  position: relative;
  top: auto; right: auto;
  display: block;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  padding: 14px 26px;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
  animation: svTabIn 0.5s cubic-bezier(.22,.9,.32,1) 0.6s both;
}
@keyframes svTabIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .page-hero-tabs { padding-left: 16px; }
  .page-hero-tabs .page-hero-tab { padding: 12px 16px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero-tabs .page-hero-tab { animation: none; } }

/* Toolkit logos: every logo sits in the same 34px-tall area (wide wordmarks
   get up to 84px of width), so square icons and text logos look balanced.
   The SVG files are trimmed to their artwork, so no logo carries extra blank space. */
.tech-strip { gap: clamp(12px, 1.2vw, 18px); }
.tech-logo {
  width: 148px;
  height: 72px;
  padding: 15px 26px;
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tech-logo:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(18, 22, 58, 0.08); }
@media (max-width: 640px) {
  .tech-logo { width: 130px; height: 64px; padding: 12px 20px; }   /* 29 Oct: a little bigger on phones */
}


/* ================================================================
   Phones: services as a swipeable stack (replaces the plain list)
   All cards share one grid cell, so the stack is as tall as the tallest
   card. The two cards behind peek out underneath; swiping left throws the
   front card off to the left and brings the next one forward, swiping
   right brings the previous one back. (Swipe logic: script/services.js)
   ================================================================ */
.deck-swipe-hint { display: none; }
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .sv-deck-section { padding: calc(var(--nav-space) + 16px) 0 40px; }
  .deck {
    display: grid;
    perspective: none;
    min-height: 0;
    margin: 0 0 30px;
    gap: 0;
  }
  .deck-card,
  .deck-card.is-gone,
  .deck-card.is-far {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;
    padding: 22px 20px 24px;
    gap: 16px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: 50% 100%;
    transition: transform 0.45s cubic-bezier(.22,.9,.32,1), opacity 0.35s ease;
  }
  .deck-card {
    transform: translateY(calc(var(--d) * 13px)) scale(calc(1 - var(--d) * 0.05));
    opacity: 1;
    pointer-events: auto;
    z-index: calc(50 - var(--d));
  }
  .deck-card.is-far { opacity: 0; pointer-events: none; transform: translateY(26px) scale(0.9); }
  .deck-card.is-gone { opacity: 0; pointer-events: none; transform: translateX(-125%) rotate(-12deg); z-index: 60; }
  .deck-card.is-dragging { transition: none; }
  .deck-card:not(.is-front) .deck-card-copy,
  .deck-card:not(.is-front) .deck-card-media { opacity: 0; }
  .deck-card-media { min-height: 140px; max-height: 160px; order: -1; }
  .deck-card-title { font-size: clamp(24px, 6.4vw, 30px); }

  /* Bar under the stack: swipe hint, dots, counter */
  .deck-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    order: 1;
    margin: 0;
  }
  .deck-dots { display: flex; }
  .deck-bar .deck-count { display: block; font-size: 13px; }
  .deck-swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--purple-start, #4b3fb0);
    transition: opacity 0.4s ease;
  }
  .deck-swipe-arrow { display: inline-block; animation: svSwipeL 1.6s ease-in-out infinite; }
  .deck-swipe-arrow:last-child { animation-name: svSwipeR; }
  #services-explorer.has-swiped .deck-swipe-hint { opacity: 0.45; }
  #services-explorer.has-swiped .deck-swipe-arrow { animation: none; }
}
@keyframes svSwipeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes svSwipeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .deck-swipe-hint { justify-content: center; margin: 0 0 14px; order: 0; }
  .deck { order: 0; }
  .deck-card-media { min-height: 120px; max-height: 130px; }
}

/* Hero cut-out photo: larger, and it rises up from the bottom edge
   (instead of sliding in from the right) each time the hero comes in */
.page-hero.sv-scene .page-hero-photo { height: clamp(380px, 92vh, 980px); justify-self: end; }
[data-reveal] .page-hero-photo.rv {
  transform: translateY(35%);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.4,0,.2,1);
}
[data-reveal].is-in .page-hero-photo.rv {
  transform: none;
  opacity: 1;
  transition:
    opacity 0.5s ease 0.25s,
    transform 1.1s cubic-bezier(.16,1,.3,1) 0.25s;
}
@media (max-width: 860px) {
  .page-hero.sv-scene .page-hero-photo { height: clamp(300px, 60vh, 560px); justify-self: center; }
}
/* The larger photo extends upward (its top is transparent) instead of making
   the banner taller than the screen, so the "Services" tab stays in view */
@media (min-width: 861px) {
  .page-hero.sv-scene { height: 100vh; height: 100svh; }
  .page-hero.sv-scene .page-hero-photo { margin-top: calc(-1 * (var(--nav-space) + 4vh)); max-height: calc(100svh - 12px); }
}


/* ================================================================
   Intro + description text tabs (Services cards + Products book)
   script/services.js adds .is-sliding to a card's text when the two
   lines shouldn't share the page (short screens, or a full page).
   Then "Overview" and "Details" tabs appear above the text and the
   two lines take turns, rising into place; a thin bar inside the
   active tab fills while its line is shown.
   ================================================================ */
.sv-deck-section .deck-card-desc { display: block; }   /* no longer hidden on short screens */
.ts-tabs { display: none; }
.is-sliding .ts-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 clamp(10px, 1.6vh, 14px);
}
.ts-tab {
  position: relative;
  overflow: hidden;
  padding: 6px 15px 8px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ts-tab:hover { border-color: rgba(255,255,255,0.65); color: #fff; }
.ts-tab.is-active { background: #fff; border-color: #fff; color: var(--navy); }
.ts-tab-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: rgba(18,22,58,0.12);
  opacity: 0;
}
.ts-tab.is-active .ts-tab-bar { opacity: 1; }
.ts-tab-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--purple-start)); }
.ts-tab.is-active .ts-tab-fill { animation: tsFill var(--text-time, 6s) linear forwards; }
@keyframes tsFill { to { width: 100%; } }

.is-sliding .ts-box { display: grid; }
.is-sliding .ts-slide {
  grid-area: 1 / 1;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(.22,.9,.32,1), transform 0.55s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0.55s;
}
.is-sliding .ts-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.12s, 0.12s, 0s;
}
.is-sliding .ts-box { margin-bottom: clamp(12px, 2.2vh, 22px); }
/* the description reads as a full line when it's on its own */
.is-sliding .deck-card-desc { align-self: start; font-size: inherit; color: rgba(255,255,255,0.88); }
.is-sliding .deck-card-summary { align-self: start; }
.is-sliding .ts-box { font-size: clamp(14px, min(0.5vw, 1.2vh) + 9px, 18px); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .is-sliding .ts-slide { transform: none; transition: none; }
  .ts-tab.is-active .ts-tab-fill { animation: none; width: 100%; }
}
/* Very short desktop windows: tighter card text so everything stays inside the card */
@media (min-width: 861px) and (max-height: 620px) {
  .deck-card { padding: 22px clamp(24px, 2.6vw, 44px); }
  .deck-card .deck-card-num { margin-bottom: 6px; }
  .deck-card .deck-card-title { font-size: clamp(22px, 4.2vh + 4px, 30px); margin-bottom: 8px; }
  .deck-card .deck-card-offers { margin-bottom: 14px; gap: 6px; }
  .deck-card .deck-card-offers li { padding: 4px 10px; font-size: 12px; }
  .deck-card .ts-box { font-size: 14.5px; margin-bottom: 12px; }
  .deck-card .deck-card-summary { font-size: 14.5px; }
}


/* ---------------- Phones: compact page banners (27 Oct) ----------------
   Services, Products and Careers: just the heading and intro over the
   background photo (about 60% of the screen); the cut-out people photo is
   left out on phones so the content starts sooner. */
@media (max-width: 640px) {
  .page-hero.sv-scene { min-height: 0; height: auto; padding: calc(var(--nav-space) + 44px) 0 96px; justify-content: center; }
  .page-hero.sv-scene .page-hero-grid { flex: none; }
  .page-hero.sv-scene .page-hero-grid > div { padding-bottom: 0; }
  .page-hero.sv-scene .page-hero-photo { display: none; }
}


/* ================================================================
   SERVICES DECK — SAME MOTION AS PHONES (28 Oct): the card stays centred
   with the next cards peeking underneath; moving on swings the front card
   off to the left along a curve (it rotates around a point below it) while
   the next card rises up from the stack. Products' book is unchanged.
   TO GO BACK to the up/down flip: delete this block.
   ================================================================ */
@media (min-width: 861px) and (min-height: 541px) {
  .deck:not(.deck--book) .deck-card.is-gone {
    transform-origin: 50% 160%;
    transform: translateX(-118%) rotate(-14deg);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(.55,.05,.3,1), opacity 0.45s ease 0.3s;
  }
  .deck:not(.deck--book) .deck-card { transition: transform 0.75s cubic-bezier(.22,.9,.32,1), opacity 0.5s ease; }
}



/* ---------------- CARD GRADIENTS (28 Oct) ----------------
   Each card's colour (--card-color, set in data/services-data.js or
   products-data.js) now runs as a gradient: lighter and slightly violet at
   the top-left, deeper at the bottom-right. Also used by the Products book
   (css/products.css). TO GO BACK: delete this block. */
.deck-card {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--card-color, #283a8a) 55%, #8f86ff) 0%, transparent 60%),
    linear-gradient(140deg, color-mix(in srgb, var(--card-color, #283a8a) 82%, #ffffff) 0%, var(--card-color, #283a8a) 45%, color-mix(in srgb, var(--card-color, #283a8a) 70%, #05061a) 100%);
}


/* ---------------- PILLS WITH POP-UP INFO (28 Oct) ----------------
   Services and Products cards: each main point is a pill; hovering (or
   tapping / tabbing to) it shows its one-line description in a small white
   pop-up just above the pill, so the rest of the card stays visible. */
.deck-card-offers li.has-tip { position: relative; cursor: default; transition: background 0.25s ease, color 0.25s ease; }
.deck-card-offers li.has-tip:hover,
.deck-card-offers li.has-tip:focus-visible { background: #fff; color: var(--navy); outline: none; }
.offer-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: max-content;
  max-width: 250px;
  padding: 9px 13px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink, var(--navy));
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 14px 32px rgba(6, 8, 30, 0.35);
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: 18px 100%;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.22,.9,.32,1);
}
.offer-tip::after { content: ""; position: absolute; left: 18px; top: 100%; border: 6px solid transparent; border-top-color: #fff; }
.deck-card-offers li.has-tip:hover .offer-tip,
.deck-card-offers li.has-tip:focus .offer-tip { opacity: 1; transform: none; }
/* pills in the right half of a row open their pop-up towards the left */
.deck-card-offers li.tip-left .offer-tip { left: auto; right: 0; transform-origin: calc(100% - 18px) 100%; }
.deck-card-offers li.tip-left .offer-tip::after { left: auto; right: 18px; }
/* the card text box must not clip the pop-up */
.deck-card .ts-box, .deck-card-copy { overflow: visible; }

/* ---------------- SCROLLING TEXT INSTEAD OF TABS (28 Oct) ----------------
   Intro and description always show together; when a card / book page is
   too full, the text box scrolls (fades at the bottom edge). */
.ts-tabs, .is-sliding .ts-tabs { display: none !important; }
.ts-box.is-scrolling {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 8px;
  margin-bottom: clamp(12px, 2vh, 20px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  padding-bottom: 18px;
}
.ts-box.is-scrolling::-webkit-scrollbar { width: 5px; }
.ts-box.is-scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 5px; }


/* ================================================================
   SERVICES RAIL (28 Oct) — desktop layout inspired by the reference
   video: dark section; a list of services on the left; the current
   service's big number, title, words and pills in the middle; its
   picture on a tilted 3D card on the right. Scrolling (or the list)
   moves to the next service: the words slide up and fade while the
   next ones rise in, and the tilted card glides up out of view as the
   next card rises from below. Phones keep the swipeable card stack.
   TO GO BACK: delete this block, remove "is-rail" from the section and
   "deck--rail" from the deck in services.html (or restore Version 22).
   ================================================================ */
.rail-index { display: none; }
@media (min-width: 861px) and (min-height: 541px) {
  .sv-deck-section.is-rail {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(60% 70% at 78% 50%, rgba(91, 79, 224, 0.28), transparent 70%),
      linear-gradient(160deg, #141036 0%, #0d0a2a 55%, #08061c 100%);
    color: #fff;
  }
  .is-rail .deck-wrap {
    display: grid;
    grid-template-columns: clamp(150px, 13vw, 210px) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(24px, 3vw, 56px);
    height: 100%;
  }
  .is-rail .deck-swipe-hint { display: none; }

  /* list of services */
  .rail-index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    grid-row: 1 / span 2;
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  .rail-index button {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: baseline;
    width: 100%;
    padding: 7px 0;
    border: 0;
    background: none;
    text-align: left;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-display);
    font-size: clamp(12px, min(0.3vw + 8px, 1.4vh + 3px), 14px);
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.35s ease;
  }
  .rail-index-num { font-size: 11px; opacity: 0.7; }
  .rail-index button::before {
    content: "";
    position: absolute;
    left: -17px; top: 50%;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--red), #8f86ff);
    transition: width 0.35s ease;
  }
  .rail-index button:hover { color: rgba(255, 255, 255, 0.75); }
  .rail-index li.is-active button { color: #fff; font-weight: 700; transform: translateX(6px); }
  .rail-index li.is-active button::before { width: 14px; }

  /* the deck becomes a stage; cards don't move as a whole any more */
  .deck.deck--rail { margin: 0; min-height: 0; height: 100%; perspective: none; }
  .deck--rail .deck-card,
  .deck--rail .deck-card.is-gone,
  .deck--rail .deck-card.is-far {
    background: none !important;
    box-shadow: none;
    transform: none;
    opacity: 1;
    padding: 0;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(24px, 3vw, 60px);
    transition: none;
    pointer-events: none;
  }
  .deck--rail .deck-card.is-front { pointer-events: auto; z-index: 55; }
  .deck--rail .deck-card.is-far { visibility: hidden; }

  /* words: rise in, slide up and fade out */
  .deck--rail .deck-card-copy,
  .deck--rail .deck-card:not(.is-front) .deck-card-copy {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.45s ease, transform 0.8s cubic-bezier(.22,.9,.32,1);
  }
  .deck--rail .deck-card.is-gone .deck-card-copy { transform: translateY(-70px); }
  .deck--rail .deck-card.is-front .deck-card-copy {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease 0.25s, transform 0.9s cubic-bezier(.22,.9,.32,1) 0.2s;
  }
  /* big number like the reference */
  .deck--rail .deck-card-num {
    position: static;
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(48px, min(5vw, 11vh), 96px);
    line-height: 1;
    letter-spacing: -2px;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.55);
  }

  /* tilted picture card: glides up and away, the next rises from below */
  .deck--rail .deck-card-media,
  .deck--rail .deck-card:not(.is-front) .deck-card-media {
    opacity: 1;
    align-self: center;
    height: clamp(260px, 58vh, 520px);
    min-height: 0;
    border-radius: 22px;
    background:
      var(--card-img, none) center / cover no-repeat,
      radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--card-color, #283a8a) 55%, #8f86ff) 0%, transparent 60%),
      linear-gradient(140deg, color-mix(in srgb, var(--card-color, #283a8a) 82%, #ffffff) 0%, var(--card-color, #283a8a) 45%, color-mix(in srgb, var(--card-color, #283a8a) 70%, #05061a) 100%);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
    transform: perspective(1400px) translateY(var(--rail-y, 0%)) rotateY(-16deg) rotateX(6deg) rotateZ(-3deg);
    transition: transform 1s cubic-bezier(.65,.05,.25,1), opacity 0.6s ease;
  }
  .deck--rail .deck-card { --rail-y: 112%; }               /* waiting below */
  .deck--rail .deck-card.is-front { --rail-y: 0%; }
  .deck--rail .deck-card.is-gone { --rail-y: -125%; }     /* gone up */
  .deck--rail .deck-card.is-gone .deck-card-media { opacity: 0.35; }

  /* bottom bar: only the counter */
  .is-rail .deck-bar { grid-column: 2; justify-content: flex-end; }
  .is-rail .deck-dots { display: none; }
  .is-rail .deck-count { color: rgba(255, 255, 255, 0.6); }
  .is-rail .deck-count span:first-child { color: #fff; }
}
@media (min-width: 861px) and (min-height: 541px) {
  .sv-deck-section.is-rail { display: flex; flex-direction: column; justify-content: center; }
  .is-rail .deck-wrap { height: auto; }
  .deck.deck--rail { height: calc(100svh - var(--nav-space) - 90px); max-height: 640px; }
  .deck--rail .deck-card, .deck--rail .deck-card.is-gone, .deck--rail .deck-card.is-far { align-items: center; }
  .deck--rail .deck-card { --rail-y: 125%; }
  .rail-index { align-self: center; }
}


/* ================================================================
   SERVICES RAIL v2 (29 Oct) — the rail is now the first screen (no banner):
   "Our Services" title, clear menu bar with the white logo, the current
   service's photo as a blurred background that crossfades, a wider text
   column, a small "Services · 02 / 07" label, and the pictures moving up
   like a film strip while the words pop in.
   ================================================================ */
.sv-deck-section.is-rail {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #141036 0%, #0d0a2a 55%, #08061c 100%);
}
.is-rail > .deck-wrap { position: relative; z-index: 1; }
/* background photo layers */
.rail-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rail-bg::after {                                   /* keeps the words readable over any photo */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 6, 20, 0.78) 0%, rgba(6, 6, 20, 0.55) 55%, rgba(6, 6, 20, 0.35) 100%),
    linear-gradient(0deg, rgba(6, 6, 20, 0.5) 0%, rgba(6, 6, 20, 0) 35%);
}
.rail-bg-layer {
  position: absolute;
  inset: -40px;                                     /* room for the blur at the edges */
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.05);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.9s ease, transform 1.6s cubic-bezier(.22,.9,.32,1);
}
.rail-bg-layer.is-empty { background: radial-gradient(60% 70% at 78% 50%, rgba(91, 79, 224, 0.3), transparent 70%); filter: none; }
.rail-bg-layer.is-on { opacity: 1; transform: scale(1); }

/* page title */
.rail-head { margin: 0 0 clamp(10px, 2.4vh, 26px); }
.rail-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(12px, min(0.3vw + 9px, 1.4vh + 5px), 14px);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.rail-eyebrow-line { width: 34px; height: 2px; background: linear-gradient(90deg, var(--red), #8f86ff); }
.rail-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, min(3.6vw, 7.4vh), 72px);
  line-height: 1; letter-spacing: -1px;
  color: #fff;
}

@media (min-width: 861px) and (min-height: 541px) {
  .sv-deck-section.is-rail { padding: calc(var(--nav-space) + 2vh) 0 3vh; }
  .is-rail .deck-wrap {
    grid-template-columns: clamp(150px, 12vw, 200px) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }
  .is-rail .rail-head { grid-column: 1 / -1; }
  .rail-index { grid-row: 2; }
  .is-rail .deck { grid-column: 2; grid-row: 2; }
  .is-rail .deck-bar { grid-column: 2; grid-row: 3; }
  .deck.deck--rail { height: calc(100svh - var(--nav-space) - 190px); max-height: 600px; min-height: 340px; }

  /* wider words, narrower picture */
  .deck--rail .deck-card,
  .deck--rail .deck-card.is-gone,
  .deck--rail .deck-card.is-far { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(28px, 3.4vw, 64px); }
  .deck--rail .deck-card-copy { max-width: 640px; }
  .deck--rail .deck-card-summary, .deck--rail .deck-card-desc, .deck--rail .deck-card-offers { max-width: none; }

  /* small label instead of the big number */
  .deck--rail .deck-card-num {
    font-size: clamp(11px, min(0.3vw + 8px, 1.3vh + 4px), 13px);
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    -webkit-text-stroke: 0;
    margin: 0 0 clamp(8px, 1.4vh, 14px);
  }

  /* words: the old ones fade quickly, the new ones pop up one after another */
  .deck--rail .deck-card-copy,
  .deck--rail .deck-card:not(.is-front) .deck-card-copy,
  .deck--rail .deck-card.is-gone .deck-card-copy { opacity: 0; transform: none; transition: opacity 0.25s ease; }
  .deck--rail .deck-card.is-front .deck-card-copy { opacity: 1; transform: none; transition: opacity 0.2s ease; }
  .deck--rail .deck-card.is-front .deck-card-copy > * { animation: railPop 0.7s cubic-bezier(.22,.9,.32,1) backwards; }
  .deck--rail .deck-card.is-front .deck-card-copy > :nth-child(1) { animation-delay: 0.35s; }
  .deck--rail .deck-card.is-front .deck-card-copy > :nth-child(2) { animation-delay: 0.42s; }
  .deck--rail .deck-card.is-front .deck-card-copy > :nth-child(3) { animation-delay: 0.5s; }
  .deck--rail .deck-card.is-front .deck-card-copy > :nth-child(4) { animation-delay: 0.58s; }
  .deck--rail .deck-card.is-front .deck-card-copy > :nth-child(5) { animation-delay: 0.66s; }
  .deck--rail .deck-card.is-front .deck-card-copy > :nth-child(6) { animation-delay: 0.74s; }

  /* pictures: a vertical film strip — the current frame moves up and away,
     the next one (peeking below) slides into place */
  .deck--rail .deck-card-media,
  .deck--rail .deck-card:not(.is-front) .deck-card-media {
    height: clamp(220px, 50vh, 440px);
    transform: perspective(1600px) translateY(var(--rail-y, 0%)) rotateY(-9deg) rotateX(3deg);
    transition: transform 0.95s cubic-bezier(.65,.05,.25,1), opacity 0.7s ease;
  }
  .deck--rail .deck-card { --rail-y: calc(100% + 30px); }
  .deck--rail .deck-card.is-front { --rail-y: 0%; }
  .deck--rail .deck-card.is-gone { --rail-y: calc(-100% - 30px); }
  .deck--rail .deck-card.is-gone .deck-card-media { opacity: 0; }
  .deck--rail .deck-card.is-far { visibility: visible; --rail-y: calc(200% + 60px); }
  .deck--rail .deck-card.is-far .deck-card-media { opacity: 0; }
  .deck--rail .deck-card:not(.is-front):not(.is-gone):not(.is-far) .deck-card-media { opacity: 0.55; }
}
@keyframes railPop { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* phones / tablets: dark section with the title above the swipeable cards */
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .sv-deck-section.is-rail { padding-top: calc(var(--nav-space) + 28px); }
  .is-rail .deck-swipe-hint { color: rgba(255, 255, 255, 0.6); }
  .is-rail .deck-count { color: rgba(255, 255, 255, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .deck--rail .deck-card.is-front .deck-card-copy > * { animation: none; }
  .rail-bg-layer { transition: none; }
}
@media (min-width: 861px) and (min-height: 541px) { .is-rail .deck-bar { display: none; } }   /* the label above the title already shows 01 / 07 */
@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) { .is-rail .rail-head { order: -3; } }

/* ---------------- FILM STRIP FIX (29 Oct) ----------------
   The older "swing off to the left" rule was still winning on the rail;
   these stronger rules keep each card in place so only the pictures move,
   straight up and down like a film strip, while the words are replaced. */
@media (min-width: 861px) and (min-height: 541px) {
  .deck.deck--rail .deck-card,
  .deck.deck--rail .deck-card.is-gone,
  .deck.deck--rail .deck-card.is-far {
    transform: none !important;
    transform-origin: 50% 50% !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .deck.deck--rail .deck-card.is-gone .deck-card-media { opacity: 0.35; }       /* fades as it leaves the top */
  .deck.deck--rail .deck-card.is-gone .deck-card-copy { opacity: 0 !important; }
}

/* ---------------- FILM STRIP v2 (29 Oct, from the user's diagram) ----------------
   All the pictures sit in one evenly spaced column. Moving on slides the whole
   column up by one frame: the current picture moves up (still fully visible)
   and the next one takes its place. No fading, no overlapping, no tilt — the
   section edges simply crop the frames above and below. --o (set by
   script/services.js) = frames away from the current one. */
@media (min-width: 861px) and (min-height: 541px) {
  .deck.deck--rail .deck-card .deck-card-media,
  .deck.deck--rail .deck-card.is-gone .deck-card-media,
  .deck.deck--rail .deck-card.is-far .deck-card-media,
  .deck.deck--rail .deck-card:not(.is-front):not(.is-gone):not(.is-far) .deck-card-media {
    opacity: 1 !important;
    visibility: visible;
    transform: translateY(calc(var(--o, 0) * (100% + var(--strip-gap, 64px)))) !important;
    transition: transform 0.9s cubic-bezier(.65,.05,.25,1) !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  }
  .deck.deck--rail .deck-card.is-far { visibility: visible !important; }
  .deck.deck--rail .deck-card:not(.is-front) .deck-card-media { filter: brightness(0.75); }
  .deck.deck--rail .deck-card .deck-card-media { transition: transform 0.9s cubic-bezier(.65,.05,.25,1), filter 0.6s ease !important; }
}

/* ---------------- PRODUCT 3D CAROUSEL (29 Oct, Products page) ----------------
   Same rail as Services. The current picture faces you; the previous one
   stands to its left and the next one to its right, turned away in 3D and
   dimmed. Moving on turns the row so the next picture swings round to the
   front. --o / --oa (script/services.js) = frames away (signed / absolute).
   Tune: --car-x (side offset), --car-turn (angle), --car-scale (side size). */
@media (min-width: 861px) and (min-height: 541px) {
  #svc-deck.deck--carousel { --car-x: 62%; --car-turn: 40deg; --car-scale: 0.78; }
  #svc-deck.deck--carousel .deck-card { z-index: calc(55 - var(--oa, 0) * 5) !important; }
  #svc-deck.deck--carousel .deck-card .deck-card-media {
    height: clamp(200px, 44vh, 400px) !important;
    width: 68%;
    justify-self: center;
    margin-left: 7%;            /* nudged right so the left picture clears the words */
    opacity: 1 !important;
    transform-origin: 50% 50% !important;
    /* each side picture: pushed sideways, turned to face inwards, smaller */
    transform: perspective(1300px)
      translateX(calc(var(--o, 0) * var(--car-x) + var(--o2, 0) * 14%))
      rotateY(calc(var(--os, 0) * var(--car-turn) * -1))
      scale(calc(1 - var(--on, 0) * (1 - var(--car-scale)))) !important;
    transition: transform 0.9s cubic-bezier(.65,.05,.25,1), filter 0.6s ease, opacity 0.5s ease !important;
  }
  #svc-deck.deck--carousel .deck-card:not(.is-front) .deck-card-media { filter: brightness(0.55); }
  /* only the current picture and one on each side show */
  #svc-deck.deck--carousel .deck-card.is-car-out .deck-card-media { opacity: 0 !important; }
}

/* ---------------- EDB link next to "Discuss" (29 Oct) ---------------- */
.deck-card-ctas, .pf-detail-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.deck-card-more, .pf-detail-more {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  transition: border-color 0.25s ease;
}
.deck-card-more:hover, .pf-detail-more:hover { border-color: #fff; }
.pf-detail-more[hidden] { display: none; }