@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Rubik:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 
/* ============================================================
   SINGLE PROJECT PAGE
   ============================================================ */
 
.sp-page {
  --sp-vl-progress: 0; /* set by JavaScript on scroll: light running from the tools hub to the video box */
  background: #000000;
  color: #ffffff;
  font-family: "Rubik", sans-serif;
  overflow-x: clip;   /* hides sideways overflow without creating a second scrollbar */
  overflow-y: visible;
}

/* fallback for older browsers that do not support "clip" */
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
  .sp-page {
    overflow-x: visible;
  }
}
 
.sp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
  box-sizing: border-box;
}
 
/* ============================================================
   Single service banner start (same as Industries banner)
   ============================================================ */
 
/* ---------- wrap: only keeps the banner below the fixed header (same as About) ---------- */
.web-single-service-banner-wrap {
  --web-single-service-banner-header-h: 95px; /* your header height, change if needed */
  --web-single-service-banner-gap: clamp(1.5rem, 3vw, 2.5rem); /* space between header and banner */
 
  width: 100%;
  padding-top: calc(var(--web-single-service-banner-header-h) + var(--web-single-service-banner-gap));
}
 
@media (max-width: 900px) {
  .web-single-service-banner-wrap {
    --web-single-service-banner-header-h: 90px;
  }
}
 
@media (max-width: 640px) {
  .web-single-service-banner-wrap {
    --web-single-service-banner-header-h: 80px;
    --web-single-service-banner-gap: 1rem;
  }
}
 
/* ---------- banner (edge to edge, no radius) ---------- */
.web-single-service-banner {
  --web-single-service-banner-accent: #ffaa17;
  --web-single-service-banner-line: rgba(255, 170, 23, 0.22);
 
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #060606;
  border-top: 1px solid var(--web-single-service-banner-line);
  border-bottom: 1px solid var(--web-single-service-banner-line);
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}
 
/* slow amber light drifting across the background */
.web-single-service-banner__glow {
  position: absolute;
  top: -60%;
  right: -10%;
  z-index: 0;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.2), transparent 70%);
  pointer-events: none;
  animation: web-single-service-banner-drift 12s ease-in-out infinite alternate;
}
 
/* thin vertical guide lines (blueprint feel) */
.web-single-service-banner__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 25% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
 
/* big faint outlined word in the background (whole word visible, centered) */
.web-single-service-banner__watermark {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 0;
  translate: -50% -50%;
  font-family: "Oswald", "Arial Narrow", Impact, sans-serif; /* clean single outline */
  font-size: 19vw; /* sized by screen width, so the full word always fits */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 170, 23, 0.22);
  /* amber light that passes through the letters */
  background-image: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 170, 23, 0.4) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
 
/* same width as the other sections of the site */
.web-single-service-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
 
/* ---------- main block ---------- */
.web-single-service-banner__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 2rem;
  padding-top: clamp(1.6rem, 3.4vw, 2.6rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
 
/* breadcrumb: plain text, no pill */
.web-single-service-banner__breadcrumb {
  grid-column: 1 / -1;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  opacity: 0;
  translate: -14px 0;
}
 
.web-single-service-banner__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 500;
}
 
.web-single-service-banner__crumb-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
 
.web-single-service-banner__crumb-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}
 
.web-single-service-banner__crumb-link:hover {
  color: var(--web-single-service-banner-accent);
}
 
.web-single-service-banner__crumb-link:focus-visible,
.web-single-service-banner__cta:focus-visible {
  outline: 2px solid var(--web-single-service-banner-accent);
  outline-offset: 4px;
}
 
.web-single-service-banner__crumb-sep {
  width: 1px;
  height: 0.9em;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-24deg);
}
 
.web-single-service-banner__crumb-current {
  color: var(--web-single-service-banner-accent);
}
 
/* ---------- title ---------- */
.web-single-service-banner__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.26em;
  margin: 0;
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
 
/* each word is clipped, so it slides up from behind a line */
.web-single-service-banner__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
 
.web-single-service-banner__word-text {
  display: inline-block;
  translate: 0 110%;
}
 
.web-single-service-banner__word--accent {
  color: var(--web-single-service-banner-accent);
}
 
.web-single-service-banner__subtitle {
  max-width: 48ch;
  margin: clamp(0.5rem, 1.2vw, 0.8rem) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  line-height: 1.55;
  opacity: 0;
  translate: 0 12px;
}
 
/* ---------- button (square, matches the banner) ---------- */
.web-single-service-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.3rem;
  background: var(--web-single-service-banner-accent);
  color: #000;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  translate: 14px 0;
  transition: background 0.3s ease, gap 0.3s ease;
}
 
.web-single-service-banner__cta:hover {
  gap: 1.1rem;
  background: #ffbd45;
}
 
.web-single-service-banner__cta-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
 
/* ---------- entrance (starts when the loader is gone) ---------- */
.web-single-service-banner--play .web-single-service-banner__breadcrumb {
  animation: web-single-service-banner-slide 0.7s ease 0.05s forwards;
}
 
.web-single-service-banner--play .web-single-service-banner__word-text {
  animation: web-single-service-banner-rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.15s + var(--web-single-service-banner-i, 0) * 0.14s);
}
 
.web-single-service-banner--play .web-single-service-banner__subtitle {
  animation: web-single-service-banner-slide 0.8s ease 0.6s forwards;
}
 
.web-single-service-banner--play .web-single-service-banner__cta {
  animation: web-single-service-banner-slide 0.8s ease 0.75s forwards;
}
 
.web-single-service-banner--play .web-single-service-banner__watermark {
  animation:
    web-single-service-banner-fade 1.4s ease 0.3s forwards,
    web-single-service-banner-shine 6s ease-in-out 1.7s infinite,
    web-single-service-banner-float 7s ease-in-out 1.7s infinite alternate;
}
 
@keyframes web-single-service-banner-rise {
  to {
    translate: 0 0;
  }
}
 
@keyframes web-single-service-banner-slide {
  to {
    opacity: 1;
    translate: 0 0;
  }
}
 
@keyframes web-single-service-banner-fade {
  to {
    opacity: 1;
  }
}
 
/* light moves left to right through the word, then repeats */
@keyframes web-single-service-banner-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
 
/* very small up and down movement */
@keyframes web-single-service-banner-float {
  from {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(6px);
  }
}
 
@keyframes web-single-service-banner-drift {
  from {
    translate: 0 0;
  }
  to {
    translate: -22% 6%;
  }
}
 
/* ---------- tablet & mobile ---------- */
@media (max-width: 640px) {
  .web-single-service-banner__main {
    grid-template-columns: minmax(0, 1fr);
  }
 
  .web-single-service-banner__title {
    font-size: clamp(2.2rem, 11vw, 3rem);
  }
 
  /* keeps the banner short on phones */
  .web-single-service-banner__cta {
    display: none;
  }
}
 
/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .web-single-service-banner__glow {
    animation: none;
  }
 
  .web-single-service-banner__word-text,
  .web-single-service-banner__breadcrumb,
  .web-single-service-banner__subtitle,
  .web-single-service-banner__cta,
  .web-single-service-banner__watermark {
    animation: none !important;
    opacity: 1;
    translate: none;
  }
}
/* Single service banner end */
 
/* ============================================================
   Reveal on scroll
   ============================================================ */
 
.sp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sp-reveal--in {
  opacity: 1;
  transform: none;
}
 
/* ============================================================
   Stats
   ============================================================ */
 
.sp-stats {
  padding: 70px 0;
  border-bottom: 1px solid rgba(255, 170, 23, 0.25);
}
.sp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sp-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 6px 22px;
  border-left: 3px solid #ffaa17;
}
.sp-stat-value {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  color: #ffaa17;
}
.sp-stat-label {
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
 
/* ============================================================
   TIMELINE
   Image box and text alternate sides. Number in the center line.
   Amber light fills the line as you scroll down, and drains as you scroll up.
   ============================================================ */
 
.sp-tl {
  --sp-tl-progress: 0; /* set by JavaScript on scroll */
  position: relative;
  isolation: isolate;
  padding: clamp(60px, 9vw, 110px) 6vw;
  overflow: clip;
}
 
.sp-tl::before {
  content: "";
  position: absolute;
  top: 10%;
  left: -10%;
  z-index: -1;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 23, 0.12), transparent 70%);
  pointer-events: none;
}
 
.sp-tl-list {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
 
/* center line */
.sp-tl-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.08);
}
 
/* amber light that fills the line */
.sp-tl-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--sp-tl-progress, 0) * 100%);
  background: linear-gradient(180deg, #ffaa17, #ffbd45);
  box-shadow: 0 0 12px #ffaa17, 0 0 32px rgba(255, 170, 23, 0.45);
}
 
/* bright head at the bottom of the light */
.sp-tl-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transform: translateX(-50%);
  box-shadow: 0 0 16px 6px #ffaa17;
  opacity: clamp(0, var(--sp-tl-progress, 0) * 40, 1);
}
 
/* one step. --tl-on goes from 0 to 1 as the light reaches this step */
.sp-tl-item {
  --tl-on: clamp(0, (var(--sp-tl-progress, 0) - var(--tl-pos, 0)) * 10, 1);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
  align-items: center;
  padding: clamp(36px, 5vw, 64px) 0;
}
 
/* image box on the left (default) */
.sp-tl-visual {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: 100%;
  max-width: 420px;
  opacity: var(--tl-on);
  transform: translateX(calc(var(--tl-x, -1) * 48px * (1 - var(--tl-on))));
}
 
/* image box on the right for odd steps */
.sp-tl-item--flip .sp-tl-visual {
  grid-column: 3;
  justify-self: start;
}
 
.sp-tl-box {
  position: relative;
  padding: 8px;
  border-radius: 15px;
  border: 1px solid rgba(255, 170, 23, 0.45);
  background: #0a0a0a;
  box-shadow:
    0 0 calc(var(--tl-on) * 36px) #ffaa1752,
    inset 0 0 0 1px rgba(255, 170, 23, 0.1);
}
 
.sp-tl-box img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--tl-shot-pos, center);
  border-radius: 10px;
  transition: object-position 3s ease;
}
 
/* on hover the image slowly scrolls down, like browsing the page */
.sp-tl-item:hover .sp-tl-box img {
  object-position: bottom center;
}
 
/* numbered node on the center line */
.sp-tl-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #050505;
  border: 1px solid rgba(255, 170, 23, 0.4);
  box-shadow: 0 0 calc(var(--tl-on) * 26px) rgba(255, 170, 23, 0.8);
}
 
/* filled amber once the light reaches the number */
.sp-tl-node::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #ffaa17;
  opacity: var(--tl-on);
}
 
/* pulsing ring, shown only while the number is lit */
.sp-tl-pulse {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  opacity: var(--tl-on);
  pointer-events: none;
}
 
.sp-tl-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #ffaa17;
  animation: sp-tl-ping 2.4s ease-out infinite;
}
 
@keyframes sp-tl-ping {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
 
.sp-tl-num {
  position: relative;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 calc(var(--tl-on) * 14px) #ffaa17;
}
 
/* short amber connector from the number to the text */
.sp-tl-leader {
  position: absolute;
  top: 50%;
  left: calc(50% + 28px);
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, #ffaa17, rgba(255, 170, 23, 0.2));
  transform-origin: left center;
  transform: scaleX(var(--tl-on));
  opacity: var(--tl-on);
}
 
.sp-tl-item--flip .sp-tl-leader {
  left: auto;
  right: calc(50% + 28px);
  transform-origin: right center;
  background: linear-gradient(270deg, #ffaa17, rgba(255, 170, 23, 0.2));
}
 
/* text on the right (default) */
.sp-tl-content {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  max-width: 440px;
  padding-left: 12px;
  text-align: left;
  opacity: var(--tl-on);
  transform: translateX(calc(var(--tl-x, -1) * -48px * (1 - var(--tl-on))));
}
 
/* text on the left for odd steps, aligned toward the line */
.sp-tl-item--flip .sp-tl-content {
  grid-column: 1;
  justify-self: end;
  padding-left: 0;
  padding-right: 12px;
  text-align: right;
}
 
.sp-tl-title {
  margin: 0 0 0.9rem;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #ffffff;
}
 
.sp-tl-body {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}
 
.sp-tl-results {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}
 
.sp-tl-results li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}
 
.sp-tl-results li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
 
.sp-tl-results li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 9px;
  height: 9px;
  background: #ffaa17;
}
 
.sp-tl-item--flip .sp-tl-results li {
  padding: 12px 26px 12px 0;
  text-align: right;
}
 
.sp-tl-item--flip .sp-tl-results li::before {
  left: auto;
  right: 0;
}
 
/* ============================================================
   Tools ring (dark, massive)
   The timeline light reaches the junction, explodes once, then splits
   into a thick trunk and branches that light each tool card.
   The block is taller than the ring, and the ring is centred in it.
   When the ring is fully lit it sits in the middle of the space below the header,
   so every tool is visible. Then one spark runs from the hub down to the video box.
   Everything is scroll-linked: scroll up and it goes back.
   ============================================================ */
 
.sp-tt {
  --sp-tt-progress: 0; /* set by JavaScript on scroll */
  --sp-tt-lead: clamp(60px, 9vw, 110px); /* same as the timeline's bottom padding, so the light joins */
  --sp-tt-pin-h: max(560px, calc(100vh - 160px)); /* height of the block that holds the ring */
  position: relative;
  z-index: 2;
  padding: 0 6vw;
  background: #000000;
  color: #ffffff;
}
 
/* when there is no video below, leave room at the bottom */
.sp-tt--end {
  padding-bottom: 120px;
}
 
/* the block that holds the ring. The ring is centred in it, with room above and below */
.sp-tt-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sp-tt-pin-h);
}
 
.sp-tt-head {
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 2;
  max-width: 40%;
}
 
.sp-tt-head h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
}
 
.sp-tt-sub {
  margin: 12px 0 0;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffaa17;
}
 
/* centre trunk. It starts at the timeline's light head and runs down to the hub (the block's centre) */
.sp-tt-trunk {
  position: absolute;
  top: calc(-1 * var(--sp-tt-lead));
  left: 50%;
  z-index: 0;
  width: 4px;
  height: calc(50% + var(--sp-tt-lead));
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
}
 
.sp-tt-fill {
  --f: clamp(0, (var(--sp-tt-progress, 0) - var(--from, 0)) / (var(--to, 1) - var(--from, 0)), 1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--f) * 100%);
  background: linear-gradient(180deg, #ffaa17, #ffd27a, #ffaa17);
  box-shadow: 0 0 18px #ffaa17, 0 0 48px rgba(255, 170, 23, 0.6);
}
 
/* the stage holds the ring. It always fits in the space below the header and keeps the 1000 x 720 ratio */
.sp-tt-stage {
  position: relative;
  flex: none;
  width: max(300px, min(900px, 100%, calc((100vh - 280px) * 1.3889)));
  aspect-ratio: 1000 / 720;
}
 
.sp-tt-links {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
 
.sp-tt-track-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3;
}
 
.sp-tt-path {
  --f: clamp(0, (var(--sp-tt-progress, 0) - var(--from, 0)) / (var(--to, 1) - var(--from, 0)), 1);
  fill: none;
  stroke: #ffaa17;
  stroke-width: 4;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 10px #ffaa17);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--f));
}
 
/* one step of light for an element. --on goes 0 to 1 as the light reaches it */
.sp-tt-on {
  --on: clamp(0, (var(--sp-tt-progress, 0) - var(--tt-pos, 0)) * 12, 1);
}
 
/* central hub: big and bright */
.sp-tt-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #050505;
  border: 2px solid rgba(255, 170, 23, 0.6);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 calc(var(--on) * 70px) rgba(255, 170, 23, 0.95),
    0 0 calc(var(--on) * 140px) rgba(255, 170, 23, 0.4);
}
 
.sp-tt-core {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: #ffaa17;
  opacity: var(--on);
  box-shadow: 0 0 28px #ffaa17;
}
 
.sp-tt-pulse {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  opacity: var(--on);
  pointer-events: none;
}
 
.sp-tt-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #ffaa17;
  animation: sp-tt-ping 2.2s ease-out infinite;
}
 
@keyframes sp-tt-ping {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
 
/* junction: where the timeline light meets the trunk. The comic-style burst goes off once,
   then the white core stays lit. The burst is a little slower than the other steps. */
.sp-tt-junction {
  --on: clamp(0, (var(--sp-tt-progress, 0) - var(--tt-pos, 0)) * 5, 1);
  position: absolute;
  top: calc(-1 * var(--sp-tt-lead));
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}
 
/* comic-style explosion: yellow cloud with white streaks. Grows, holds, then fades out */
.sp-tt-boom {
  position: absolute;
  left: 0;
  top: 0;
  width: min(380px, 62vw);
  aspect-ratio: 300 / 170;
  height: auto;
  overflow: visible;
  transform-origin: 50% 66%;
  transform: translate(-50%, -66%) scale(calc(0.25 + var(--on) * 0.95));
  opacity: min(1, calc(var(--on) * (1 - var(--on)) * 6));
  filter: drop-shadow(0 0 16px rgba(255, 170, 23, 0.8));
  pointer-events: none;
}
 
.sp-tt-junction-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffaa17;
  box-shadow: 0 0 18px #ffaa17;
  transform: translate(-50%, -50%) scale(calc(0.3 + var(--on) * 2.4));
  opacity: calc(var(--on) * (1 - var(--on)) * 4);
}
 
.sp-tt-junction-core {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 calc(var(--on) * 22px) 6px #ffaa17;
  transform: translate(-50%, -50%) scale(var(--on));
  opacity: var(--on);
}
 
/* sparks. Each spark is a short line that flies out from the centre and fades */
.sp-tt-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
 
.sp-tt-sparks i {
  position: absolute;
  left: -1.5px;
  top: -9px;
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: #ffaa17;
  box-shadow: 0 0 12px #ffaa17;
  opacity: calc(var(--on) * (1 - var(--on)) * 4);
  transform:
    translate(
      calc(cos(var(--a)) * var(--d) * var(--on)),
      calc(sin(var(--a)) * var(--d) * var(--on))
    )
    rotate(calc(var(--a) - 90deg));
}
 
/* tool cards on the ring: bigger, with a heavier glow */
.sp-tt-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: clamp(130px, 15vw, 190px);
  padding: 24px 14px 20px;
  border-radius: 15px;
  border: 1px solid rgba(255, 170, 23, 0.55);
  background: #0a0a0a;
  text-align: center;
  opacity: var(--on);
  transform: translate(-50%, -50%) scale(calc(0.4 + var(--on) * 0.6));
  box-shadow:
    0 0 calc(var(--on) * 48px) rgba(255, 170, 23, 0.45),
    inset 0 0 calc(var(--on) * 24px) rgba(255, 170, 23, 0.12);
}
 
.sp-tt-card h3 {
  margin: 0;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
}
 
.sp-tt-tile {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 15px;
  background: #ffaa17;
  color: #000000;
  font-family: "Oswald", sans-serif;
  font-size: 25px;
  font-weight: 700;
  box-shadow: 0 0 calc(var(--on) * 30px) #ffaa17;
}
 
/* ============================================================
   Light from the tools hub down to the video box
   After the last tool is lit, one spark runs down this line, and the
   video box lights up when it arrives. Driven by --sp-vl-progress.
   ============================================================ */
 
/* empty space under the ring, the line runs through it */
.sp-vl {
  height: clamp(180px, 26vh, 280px);
}
 
/* the line starts at the hub (centre of the ring block) and ends at the video box */
.sp-tt-out {
  position: absolute;
  top: calc(var(--sp-tt-pin-h) / 2);
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 4px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
}
 
.sp-tt-out-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--sp-vl-progress, 0) * 100%);
  background: linear-gradient(180deg, #ffaa17, #ffd27a, #ffaa17);
  box-shadow: 0 0 18px #ffaa17, 0 0 48px rgba(255, 170, 23, 0.6);
}
 
/* the spark: a bright head at the bottom of the light */
.sp-tt-out-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  transform: translateX(-50%);
  box-shadow: 0 0 20px 8px #ffaa17, 0 0 46px 14px rgba(255, 170, 23, 0.55);
  opacity: clamp(0, var(--sp-vl-progress, 0) * 40, 1);
}
 
/* small burst on the top edge of the video box, when the light arrives */
.sp-vl-hit {
  --on: clamp(0, (var(--sp-vl-progress, 0) - 0.9) * 10, 1);
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}
 
/* ============================================================
   Tools band (white, old layout, kept for reference, not used)
   ============================================================ */
 
.sp-tech {
  padding: 110px 6vw;
  background: #ffffff;
  color: #000000;
  text-align: center;
}
.sp-tech h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000000;
}
.sp-tech-sub {
  margin: 12px 0 50px;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffaa17;
}
.sp-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.sp-tech-card {
  padding: 34px 20px 28px;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.sp-tech-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px -16px #ffaa1799;
}
.sp-tech-tile {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 15px;
  background: #ffaa17;
  color: #000000;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.sp-tech-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #000000;
}
 
/* ============================================================
   Video
   ============================================================ */
 
.sp-video {
  padding-top: 110px;
  padding-bottom: 110px;
}
 
/* the line from the tools ring ends right on top of the box, so no gap above it */
.sp-video--linked {
  padding-top: 0;
}
 
.sp-video-link {
  --vl-on: clamp(0, (var(--sp-vl-progress, 0) - 0.92) * 12, 1); /* 0 to 1 when the light arrives */
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid #ffaa17;
  box-shadow: 0 0 calc(12px + var(--vl-on) * 56px) rgba(255, 170, 23, calc(0.32 + var(--vl-on) * 0.5));
  background: #0b0b0b;
}
.sp-video-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: transform 0.6s ease, filter 0.4s ease;
}
.sp-video-link:hover img {
  transform: scale(1.03);
  filter: brightness(0.9);
}
.sp-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #ffaa17;
  box-shadow: 0 0 0 10px #ffaa1733;
  transform: translate(-50%, -50%);
}
.sp-play::before {
  content: "";
  margin-left: 8px;
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #000000;
}
.sp-video-cap {
  margin: 22px 0 0;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffaa17;
}
 
/* ============================================================
   Back link
   ============================================================ */
 
.sp-back {
  padding: 40px 6vw 90px;
  text-align: center;
}
.sp-back a {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffaa17;
  text-decoration: none;
}
.sp-back a:hover {
  text-decoration: underline;
}
 
/* ============================================================
   Responsive
   ============================================================ */
 
@media (max-width: 900px) {
  .sp-stats-grid {
    grid-template-columns: 1fr;
  }
  .sp-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* timeline on tablet & mobile: line moves to the left, image sits above the text */
@media (max-width: 760px) {
  .sp-tl-track {
    left: 28px;
    transform: none;
  }
 
  .sp-tl-item,
  .sp-tl-item--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 32px 0 32px 84px;
  }
 
  .sp-tl-node {
    position: absolute;
    left: 0;
    top: 32px;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }
 
  .sp-tl-item .sp-tl-visual,
  .sp-tl-item .sp-tl-content,
  .sp-tl-item--flip .sp-tl-visual,
  .sp-tl-item--flip .sp-tl-content {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    padding: 0;
    max-width: none;
    text-align: left;
  }
 
  .sp-tl-item--flip .sp-tl-results li {
    padding: 12px 0 12px 26px;
    text-align: left;
  }
 
  .sp-tl-item--flip .sp-tl-results li::before {
    left: 0;
    right: auto;
  }
 
  .sp-tl-leader {
    display: none;
  }
 
  /* tools ring becomes a simple 2-column grid. No trunk, branches, hub, junction or spark line */
  .sp-tt {
    padding: 80px 16px 90px;
  }
 
  .sp-tt-pin {
    display: block;
    height: auto;
  }
 
  .sp-tt-head {
    position: static;
    max-width: none;
    margin-bottom: 40px;
  }
 
  .sp-tt-trunk,
  .sp-tt-links,
  .sp-tt-hub,
  .sp-tt-junction,
  .sp-tt-out,
  .sp-vl-hit {
    display: none;
  }
 
  .sp-vl {
    height: 70px;
  }
 
  .sp-tt-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    aspect-ratio: auto;
  }
 
  .sp-tt-card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: scale(calc(0.4 + var(--on) * 0.6));
  }
}
 
@media (max-width: 480px) {
  .sp-wrap {
    padding: 0 16px;
  }
  .sp-tech,
  .sp-back {
    padding-left: 16px;
    padding-right: 16px;
  }
}
 
/* ============================================================
   Reduced motion
   ============================================================ */
 
@media (prefers-reduced-motion: reduce) {
  .sp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
 
  .sp-tl-visual,
  .sp-tl-content {
    transform: none !important;
  }
 
  .sp-tl-box img {
    transition: none;
  }
 
  .sp-tl-pulse::before {
    animation: none;
    opacity: 0;
  }
 
  /* no explosion or sparks: the ring sits in its final state */
  .sp-tt-boom,
  .sp-tt-junction-ring,
  .sp-tt-sparks,
  .sp-tt-pulse::before {
    display: none;
    animation: none;
  }
}

/* ---------- Call to action (LET'S CONNECT) ---------- */
.sp-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(60px, 9vw, 120px) 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 170, 23, 0.14), transparent 65%),
    #000;
  border-top: 1px solid rgba(255, 170, 23, 0.2);
}

.sp-cta-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffaa17;
}

.sp-cta-title {
  max-width: 820px;
  margin: 0 0 16px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.1;
  color: #fff;
}

.sp-cta-text {
  max-width: 560px;
  margin: 0 0 8px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.sp-cta .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  text-decoration: none;
  border:none;
}

.sp-cta-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.sp-cta .hero-btn:hover .sp-cta-icon {
  transform: translateX(5px);
}

.sp-cta-note {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}


/* =====================================================
   HIGHLIGHTS CAROUSEL (more than 3 highlights)
   ===================================================== */
.sp-hl {
  position: relative;
}

.sp-hl-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sp-hl-track::-webkit-scrollbar {
  display: none;
}

.sp-hl-track > .sp-stat {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  box-sizing: border-box;
}

.sp-hl-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.sp-hl-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #f5c400;
  background: transparent;
  color: #f5c400;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sp-hl-btn:hover {
  background: #f5c400;
  color: #111;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .sp-hl-track > .sp-stat { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 560px) {
  .sp-hl-track > .sp-stat { flex-basis: 100%; }
}

/* =====================================================
   FEATURE TEXT (html from the editor)
   ===================================================== */
.sp-tl-body ul,
.sp-tl-body ol {
  margin: 0.5em 0;
  padding-left: 1.3em;
}

.sp-tl-body ul { list-style: disc; }
.sp-tl-body ol { list-style: decimal; }
.sp-tl-body a { color: #f5c400; text-decoration: underline; }

/* =====================================================
   TOOL ICON inside the yellow tile
   ===================================================== */
.sp-tt-tile img {
  width: 56%;
  height: 56%;
  object-fit: contain;
  display: block;
}

/* =====================================================
   YOUTUBE VIDEOS (3 per row)
   ===================================================== */
.web-youtube-videos {
  --wyv-accent: #ffaa14;
  --wyv-card: rgba(128, 128, 128, 0.1);
  --wyv-line: #ffaa14;

  width: 100%;
  padding: clamp(56px, 8vw, 110px) 20px;
  box-sizing: border-box;
}

.web-youtube-videos__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.web-youtube-videos__head {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 52px);
}

.web-youtube-videos__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  border: 1px solid var(--wyv-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.web-youtube-videos__title {
  margin: 0;
  font-size: clamp(26px, 4.6vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
}

.web-youtube-videos__accent {
  color: var(--wyv-accent);
  font-family: "Oswald", sans-serif;
}

.web-youtube-videos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.web-youtube-videos__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wyv-line);
  border-radius: 18px;
  background: var(--wyv-card);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.web-youtube-videos__card:hover,
.web-youtube-videos__card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--wyv-accent);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.web-youtube-videos__card:focus-visible {
  outline: 3px solid var(--wyv-accent);
  outline-offset: 3px;
}

.web-youtube-videos__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.web-youtube-videos__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.web-youtube-videos__card:hover .web-youtube-videos__thumb img {
  transform: scale(1.08);
}

.web-youtube-videos__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.web-youtube-videos__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wyv-accent);
  box-shadow: 0 0 0 0 rgba(245, 196, 0, 0.55);
  animation: wyv-pulse 2.4s ease-out infinite;
  transition: transform 0.3s ease;
}

.web-youtube-videos__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: #111;
}

.web-youtube-videos__card:hover .web-youtube-videos__play {
  transform: scale(1.12);
}

.web-youtube-videos__num {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.web-youtube-videos__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
}

.web-youtube-videos__label {
  font-size: 14px;
  font-weight: 600;
}

.web-youtube-videos__arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--wyv-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.web-youtube-videos__card:hover .web-youtube-videos__arrow {
  transform: translateX(5px);
}

@keyframes wyv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 196, 0, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(245, 196, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 196, 0, 0); }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .web-youtube-videos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .web-youtube-videos {
    padding: 48px 16px 64px;
  }

  .web-youtube-videos__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .web-youtube-videos__play {
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-youtube-videos__play { animation: none; }
  .web-youtube-videos__card,
  .web-youtube-videos__thumb img { transition: none; }
}

/* =====================================================
   FEATURES: browser window + overlapping glass panel
   (same sp-tl classes, no JSX change)
   ===================================================== */
.sp-tl-list {
  max-width: 1200px;
  counter-reset: sp-feature;
}

/* the centre line and the node are not used in this design */
.sp-tl-track,
.sp-tl-node,
.sp-tl-leader {
  display: none;
}

.sp-tl-item,
.sp-tl-item--flip {
  --sp-num-size: clamp(90px, 14vw, 190px);
  --sp-num-pad: clamp(80px, 10vw, 140px);
  counter-increment: sp-feature;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding: var(--sp-num-pad) 0 clamp(44px, 6vw, 88px);
}

/* huge outlined number behind the row */
.sp-tl-item::before {
  content: counter(sp-feature, decimal-leading-zero);
  position: absolute;
  /* the top part of the number shows above the image, the rest hides behind it */
  top: calc(var(--sp-num-pad) - var(--sp-num-size) * 0.62);
  left: 2%;
  right: auto;
  z-index: 0;
  transform: none;
  font-family: "Oswald", sans-serif;
  font-size: var(--sp-num-size);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 170, 23, 0.06);
  -webkit-text-stroke: 2px rgba(255, 170, 23, calc(0.45 + var(--tl-on, 0) * 0.5));
  text-shadow: 0 0 calc(var(--tl-on, 0) * 30px) rgba(255, 170, 23, 0.45);
  pointer-events: none;
  user-select: none;
}

/* flipped rows: the image is on the right, so the number goes there */
.sp-tl-item--flip::before {
  left: auto;
  right: 2%;
}

/* ---------- image: browser window ---------- */
.sp-tl-item .sp-tl-visual {
  grid-column: 1 / 8;
  grid-row: 1;
  position: relative;
  z-index: 1;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  padding: 0;
  opacity: 1;
  transform: translateX(calc(var(--tl-x, -1) * 30px * (1 - var(--tl-on))));
}

.sp-tl-item--flip .sp-tl-visual {
  grid-column: 6 / 13;
  justify-self: stretch;
  padding: 0;
}

.sp-tl-box {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 170, 23, 0.4);
  background: #0a0a0a;
  box-shadow:
    18px 18px 0 rgba(255, 170, 23, 0.12),
    0 30px 60px -20px rgba(0, 0, 0, 0.9);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sp-tl-item--flip .sp-tl-box {
  box-shadow:
    -18px 18px 0 rgba(255, 170, 23, 0.12),
    0 30px 60px -20px rgba(0, 0, 0, 0.9);
}

/* window bar with three dots */
.sp-tl-box::before {
  content: "";
  display: block;
  height: 32px;
  background:
    radial-gradient(circle at 18px 16px, #ff5f57 4.5px, transparent 5.5px),
    radial-gradient(circle at 36px 16px, #febc2e 4.5px, transparent 5.5px),
    radial-gradient(circle at 54px 16px, #28c840 4.5px, transparent 5.5px),
    #161616;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-tl-box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: #000;
  transition: none;
}

.sp-tl-item:hover .sp-tl-box {
  transform: translateY(-6px);
}

.sp-tl-item:hover .sp-tl-box img {
  object-position: center;
}

/* ---------- text: glass panel overlapping the window ---------- */
.sp-tl-item .sp-tl-content,
.sp-tl-item--flip .sp-tl-content {
  grid-column: 7 / 13;
  grid-row: 1;
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: stretch;
  max-width: none;
  margin-bottom: -28px;
  box-sizing: border-box;
  padding: clamp(24px, 3vw, 40px);
  text-align: left;
  border: 0;
  border-left: 4px solid #ffaa17;
  border-radius: 0 16px 16px 0;
  background: rgba(8, 8, 8, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 24px 50px -16px rgba(0, 0, 0, 0.95),
    0 0 calc(var(--tl-on, 0) * 40px) rgba(255, 170, 23, 0.18);
  opacity: 1;
  transform: translateX(calc(var(--tl-x, -1) * -30px * (1 - var(--tl-on))));
  overflow-wrap: anywhere;
}

.sp-tl-item--flip .sp-tl-content {
  grid-column: 1 / 7;
}

/* small label: FEATURE 01 */
.sp-tl-content::before {
  content: "Feature " counter(sp-feature, decimal-leading-zero);
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 170, 23, 0.14);
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffaa17;
}

.sp-tl-content::after {
  display: none;
}

.sp-tl-title {
  margin: 0 0 14px;
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #ffffff;
}

.sp-tl-body {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  line-height: 1.75;
}

.sp-tl-body p,
.sp-tl-body div {
  margin: 0 0 0.7em;
}

.sp-tl-body > :last-child {
  margin-bottom: 0;
}

.sp-tl-body b,
.sp-tl-body strong {
  color: #ffffff;
  font-weight: 600;
}

.sp-tl-body ul,
.sp-tl-body ol {
  margin: 0.6em 0;
  padding-left: 1.3em;
}

.sp-tl-body li {
  margin-bottom: 0.4em;
}

.sp-tl-body li::marker {
  color: #ffaa17;
}

/* ---------- tablet and mobile: image on top, panel slides over its bottom edge ---------- */
@media (max-width: 900px) {
  .sp-tl {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sp-tl-item,
  .sp-tl-item--flip {
    --sp-num-size: clamp(80px, 24vw, 130px);
    --sp-num-pad: clamp(64px, 18vw, 96px);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-num-pad) 0 44px;
  }

  .sp-tl-item .sp-tl-visual,
  .sp-tl-item--flip .sp-tl-visual {
    grid-column: 1;
    grid-row: 1;
    transform: none;
  }

  .sp-tl-item .sp-tl-content,
  .sp-tl-item--flip .sp-tl-content {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
    margin: -28px 14px 0;
    padding: 22px 18px;
    transform: none;
  }

  .sp-tl-item::before,
  .sp-tl-item--flip::before {
    left: auto;
    right: 4%;
  }

  .sp-tl-box,
  .sp-tl-item--flip .sp-tl-box {
    box-shadow: 10px 10px 0 rgba(255, 170, 23, 0.12);
  }

  .sp-tl-box img {
    max-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-tl-box {
    transition: none;
  }
  .sp-tl-item:hover .sp-tl-box {
    transform: none;
  }
}