/* =============================================================================
   service-page.css — shared styles for the standalone service pages
   (branding.html + websites.html). Reuses the main site's design tokens, --u
   canvas unit, topbar/menu/footer chrome and scroll-copy mechanic so the new
   pages feel like the same product. Page-specific accent colour is switched via
   a body theme class: .page-branding (acid/lime) and .page-websites (violet).

   Layout philosophy mirrors styles.css: desktop sizes are calc(N * var(--u))
   against a 1440x760 reference (--u ≈ 1px there); a single @media (max-width:900px)
   block bumps --u to a readable unit and reflows to one column.
   ========================================================================== */

:root {
  --lime: #c5ee5b;
  --pink: #ff5490;
  --violet: #7e6dff;
  --magenta: #f08bff;
  --dark: #08080a;

  /* Page accent — overridden per theme below. Branding default. */
  --accent: var(--acid);
  --accent-soft: var(--lime);
}

.page-branding {
  --accent: var(--acid);
  --accent-soft: var(--lime);
  --dome: var(--acid);
  --seam-dome: var(--violet); /* the dome that rises is the OTHER page's colour */
}

.page-websites {
  --accent: var(--violet);
  --accent-soft: #8b7bf0;
  --dome: var(--violet);
  --seam-dome: var(--acid);
}

.sp-section {
  position: relative;
}

/* Clip the horizontal bleed of full-bleed sections (dome margin, edge objects)
   on the sections themselves — NOT on html/body, which would turn the page into
   a scroll container and break the sticky step-stack (same reason styles.css
   only clips body). overflow-x:clip keeps the vertical dome-creep visible. */
.sp-projects,
.sp-brief,
.sp-seam {
  overflow-x: clip;
}

/* Constrained content shell, matching the main site's 1200-unit measure. */
.sp-shell {
  width: min(calc(1320 * var(--u)), calc(100vw - 40 * var(--u)));
  margin: 0 auto;
}

.sp-kicker {
  margin: 0 0 calc(56 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
}

.sp-kicker span {
  display: block;
  color: #8a8a8a;
}

/* Topbar, menu, pills, language switcher and their mobile + reduced-motion
   rules are REUSED from styles.css (linked before this file). Only the
   service-page-specific additions live here. */

/* Logo is a home link. styles.css positions .logo absolutely, so the wrapping
   <a> carries an explicit box and the img fills it. */
.topbar > a {
  position: absolute;
  left: 0;
  top: calc(7 * var(--u));
  width: calc(239 * var(--u));
  height: calc(31 * var(--u));
  display: block;
  z-index: 1;
}

.topbar > a .logo {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
}

/* The current page's nav item reads as active (accent underline). */
.menu-primary a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: calc(8 * var(--u));
  text-underline-offset: calc(8 * var(--u));
}

/* Blur the page content behind the open menu. */
body.menu-open .sp-page {
  filter: blur(calc(10 * var(--u)));
}

/* =============================  HERO  =====================================
   Per the mockups: the animated wordmark video fills the top, the sky continues
   below it, and three SMALL uppercase captions sit on the sky in a 3-column row
   (left value-prop / centre description / right "let's meet in barcelona") —
   the same caption pattern as the home page hero. */
.sp-hero {
  position: relative;
  width: 100%;
  /* Full first screen — the video fills it (cover) and the captions overlay the
     lower sky, matching the mockup (no empty band under the video). */
  height: 92vh;
  min-height: calc(520 * var(--u));
  overflow: hidden;
  background: linear-gradient(180deg, #aedaf5 0%, #cfe9fb 52%, #e9f4fd 100%);
}

.sp-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sp-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-hero-captions {
  position: absolute;
  left: 50%;
  bottom: calc(90 * var(--u));
  transform: translateX(-50%);
  z-index: 2;
  width: min(calc(1390 * var(--u)), calc(100vw - 48 * var(--u)));
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: calc(40 * var(--u));
}

.sp-hero-cap {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}

.sp-hero-cap--center {
  text-align: center;
  max-width: calc(440 * var(--u));
  justify-self: center;
}

.sp-hero-cap--right {
  text-align: right;
  justify-self: end;
  white-space: nowrap;
}

/* =====================  DARK SCROLL-COPY STATEMENT  ====================== */
.sp-statement {
  position: relative;
  z-index: 5;
  background: var(--dark);
  color: #f2f2f2;
  padding: calc(150 * var(--u)) 0;
}

/* Kickers on the dark stretch are light; their leading <span> is muted. */
.sp-statement .sp-kicker,
.sp-best .sp-kicker,
.sp-steps .sp-kicker {
  color: #f2f2f2;
}

.sp-statement .sp-kicker span,
.sp-best .sp-kicker span,
.sp-steps .sp-kicker span {
  color: #7a7a7a;
}

.sp-statement-copy {
  width: calc(1040 * var(--u));
  max-width: 86vw;
  margin: 0 auto;
  font-size: calc(73 * var(--u));
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
}

/* Websites copy is longer, so its measure is wider in the mockup (1188 vs 1040). */
.page-websites .sp-statement-copy {
  width: calc(1188 * var(--u));
  max-width: 88vw;
}

/* The shared scroll-copy highlight: start dim, brighten as it scrolls through
   (exact mockup colours: #464646 → #dadada). */
.sp-statement .scroll-char {
  color: #464646;
  transition: color 45ms linear;
}

/* =========================  "WHAT WE DO BEST" FLIP CARDS  ================
   The flip cards and the step cards share the page's long dark stretch with the
   statements (mirrors the home page's manifesto→services→method dark run). */
.sp-best {
  background: var(--dark);
  padding: calc(40 * var(--u)) 0 calc(120 * var(--u));
}

.sp-flip-row {
  width: min(calc(1336 * var(--u)), calc(100vw - 32 * var(--u)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 0;
}

/* Staggered row: cards 3 & 4 sit lower than 1 & 2 (per the mockup). */
.sp-flip-row .flip-card:nth-child(3),
.sp-flip-row .flip-card:nth-child(4) {
  margin-top: calc(70 * var(--u));
}

/* --- Flip card (Task E) ---------------------------------------------------
   Wrapper holds perspective; .flip-inner rotates; two faces with
   backface-visibility:hidden. Flip on hover, on keyboard focus-within and on a
   JS-toggled .is-flipped (tap). Reduced-motion swaps the 3D flip for a fade. */
.flip-card {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: calc(1600 * var(--u));
  aspect-ratio: 334 / 523;
}

.flip-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-card:focus-visible {
  outline: calc(3 * var(--u)) solid var(--ink);
  outline-offset: calc(4 * var(--u));
  border-radius: calc(22 * var(--u));
}

.flip-face {
  position: absolute;
  inset: 0;
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(20 * var(--u));
  color: var(--dark);
}

.flip-front {
  z-index: 2;
}

.flip-back {
  transform: rotateY(180deg);
}

/* Card colour comes from a modifier on the wrapper. */
.flip-lime .flip-face { background: var(--lime); }
.flip-pink .flip-face { background: var(--pink); }
.flip-violet .flip-face { background: var(--violet); color: var(--white); }
.flip-magenta .flip-face { background: var(--magenta); }

.flip-kicker {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.1;
  text-transform: lowercase;
}

.flip-kicker .step-n {
  flex: none;
  text-transform: none;
}

.flip-title {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(60 * var(--u));
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

.flip-front-media {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.flip-front-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Placeholder media panel for fronts whose final render/photo is pending. */
.flip-front-media.is-placeholder {
  border-radius: calc(12 * var(--u));
  background: rgba(8, 8, 10, 0.82);
  aspect-ratio: 16 / 11;
}

/* Back face: label top-right, caps copy centred, number bottom-right. */
.flip-back {
  justify-content: space-between;
}

.flip-back-label {
  font-size: calc(15 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
  text-align: right;
}

.flip-back-copy {
  margin: 0;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
}

.flip-back-num {
  font-size: calc(15 * var(--u));
  text-align: right;
}

.flip-hint {
  display: none;
}

/* ====================  "CONCEPT-LED APPROACH"  =========================== */
/* (reuses .sp-statement) */

/* =====================  "HOW WE CREATE" STEP CARDS  =====================
   On the dark stretch; the heading is a small centred kicker (per the mock),
   the colour cards float on the dark like the home page's service stack. */
.sp-steps {
  background: var(--dark);
  padding: calc(20 * var(--u)) 0 calc(130 * var(--u));
}

.sp-steps-title {
  margin: 0 0 calc(70 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  color: #f2f2f2;
}

/* Sticky 3D stack — same mechanic as the home page's service cards: each card
   pins, the following ones recede in Z + scale (driven by updateStepCards in
   service-page.js). The margin between cards is the scroll runway. */
.sp-steps-stack {
  position: relative;
  /* Step cards are a narrower measure than the flip row (per the mockup). */
  max-width: calc(1161 * var(--u));
  margin-inline: auto;
  perspective: calc(2200 * var(--u));
  perspective-origin: 50% 0;
}

.step-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(442 * var(--u));
  gap: calc(50 * var(--u));
  align-items: stretch;
  min-height: calc(422 * var(--u));
  padding: calc(31 * var(--u)) calc(10 * var(--u)) calc(31 * var(--u)) calc(32 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--white);
  color: var(--dark);
  position: sticky;
  top: calc(120 * var(--u));
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.step-card + .step-card {
  margin-top: calc(56 * var(--u));
}

.step-lime { background: var(--lime); }
.step-pink { background: var(--pink); }
.step-violet { background: var(--violet); color: var(--white); }
.step-white { background: var(--white); }

/* Left column: kicker pinned top, title + description pinned to the bottom. */
.step-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.step-kicker {
  display: flex;
  gap: calc(67 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
}

.step-kicker .step-n {
  flex: none;
}

.step-bottom {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(254 * var(--u));
  gap: calc(40 * var(--u));
  align-items: end;
}

.step-title {
  margin: 0;
  font-size: calc(54 * var(--u));
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

.step-desc {
  margin: 0 0 calc(4 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.18;
  text-transform: uppercase;
}

/* Empty dark media panel placeholder (no text inside, per the mock) — fills the
   card height beside the text. */
.step-media {
  border-radius: calc(16 * var(--u));
  background: var(--dark);
  min-height: calc(244 * var(--u));
}

.step-violet .step-media {
  background: #1a1530;
}

/* ====================  OUTRO: SOME PROJECTS + DOME + SEAM  ===============
   One continuous outro. "some projects" is transparent over the body's paper so
   the acid/violet dome below can rise (creep) up behind the objects — they
   straddle the dome's curved top, exactly like the mockup. The dome carries
   SHARE A BRIEF + footer, and the seam (peeking head + web glyphs) continues it. */
.sp-projects {
  position: relative;
  z-index: 3;
  background: transparent;
  padding: calc(80 * var(--u)) 0 0;
}

.sp-projects-stage {
  position: relative;
  width: min(calc(1320 * var(--u)), calc(100vw - 40 * var(--u)));
  height: calc(420 * var(--u));
  margin: 0 auto;
  /* objects can hang slightly below into the dome's top edge */
  pointer-events: none;
}

.sp-float {
  --sp-x: 0px;
  --sp-y: 0px;
  --sp-rz: 0deg;
  position: absolute;
  will-change: transform;
  transform: translate3d(var(--sp-x), var(--sp-y), 0) rotate(var(--sp-rz));
  transform-origin: center;
  filter: drop-shadow(0 calc(24 * var(--u)) calc(34 * var(--u)) rgba(14, 12, 13, 0.18));
}

.sp-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.sp-brief {
  position: relative;
  z-index: 1;
  background: transparent;
  /* creep up over "some projects" — the dome's curved top sits behind the
     lower objects. The extra scroll-driven rise is --dome-rise (JS). */
  margin-top: calc(-220 * var(--u));
}

.sp-brief-dome {
  --dome-rise: 0px;
  position: relative;
  /* the mockup dome is a big circle (~1636 dia) — approximate with a wide
     element whose top is a tall circular arc. */
  margin: 0 calc(-6.5vw);
  padding: calc(190 * var(--u)) calc(20 * var(--u)) calc(50 * var(--u));
  background: var(--dome);
  border-radius: 50% 50% 0 0 / calc(430 * var(--u)) calc(430 * var(--u)) 0 0;
  transform: translateY(var(--dome-rise));
  will-change: transform;
}

.sp-brief-word {
  margin: 0 auto;
  display: block;
  /* one line spanning ~full width (mockup: 204.78px on the 1440 frame); capped
     to 12.4vw so the 13-char word never overflows the viewport on wide screens */
  font-size: min(calc(205 * var(--u)), 12.4vw);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--dark);
}

.sp-brief-word:hover { color: var(--dark); }

.sp-brief-foot {
  width: min(calc(1320 * var(--u)), calc(100vw - 40 * var(--u)));
  margin: calc(36 * var(--u)) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  color: var(--dark);
  font-size: calc(14 * var(--u));
  text-transform: uppercase;
}

.sp-brief-foot a {
  color: var(--dark);
  text-decoration: none;
}

.sp-brief-foot a:hover { text-decoration: underline; }

/* ====================  SEAM → other page transition  ====================
   Continues the dome's colour. The head peeks up from the very bottom edge
   (cut off) surrounded by the next page's web/code glyphs — foreshadowing it. */
.sp-seam {
  position: relative;
  z-index: 1;
  background: var(--dome);
  margin: 0;
  padding: calc(20 * var(--u)) 0 0;
  text-align: center;
  overflow: hidden;
}

.sp-seam-hint {
  margin: 0 auto;
  font-size: calc(16 * var(--u));
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dark);
}

.sp-seam-stage {
  display: block;
  position: relative;
  height: calc(250 * var(--u));
  margin-top: calc(20 * var(--u));
}

.sp-seam-head {
  position: absolute;
  left: 50%;
  bottom: calc(-64 * var(--u));
  transform: translateX(-50%);
  width: calc(300 * var(--u));
  height: calc(300 * var(--u));
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 calc(20 * var(--u)) calc(34 * var(--u)) rgba(14, 12, 13, 0.2));
}

/* Foreshadow glyphs flanking the peeking head (the next page's accent colour). */
.sp-seam-web {
  position: absolute;
  z-index: 1;
  bottom: calc(70 * var(--u));
  color: var(--seam-dome);
  font-size: calc(46 * var(--u));
  font-weight: 800;
  line-height: 1;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(14, 12, 13, 0.14));
}

/* The rising dome curtain that covers the viewport during navigation (Task F).
   Fixed full-screen; scales up from the bottom-centre. JS adds .is-rising. */
.sp-curtain {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 300;
  width: 240vmax;
  height: 240vmax;
  transform: translateX(-50%) translateY(70%) scale(0.1);
  transform-origin: 50% 100%;
  border-radius: 50%;
  background: var(--seam-dome);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 760ms cubic-bezier(0.66, 0, 0.2, 1),
    opacity 200ms ease;
}

.sp-curtain.is-rising {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* The arrival intro shown when a page is entered via the seam (Task F, step 2).
   A full-screen accent panel with the head + web/code elements that settles
   away as the visitor scrolls / after a beat. */
.sp-arrival {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: var(--dome);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 600ms ease, transform 760ms cubic-bezier(0.66, 0, 0.2, 1);
}

.sp-arrival.is-leaving {
  opacity: 0;
  transform: translateY(-12%);
  pointer-events: none;
}

.sp-arrival[hidden] {
  display: none;
}

.sp-arrival-inner {
  position: relative;
  width: min(calc(720 * var(--u)), 90vw);
  display: grid;
  place-items: center;
  text-align: center;
}

.sp-arrival-hint {
  position: absolute;
  top: calc(-150 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--dark);
  white-space: nowrap;
}

.sp-arrival-head {
  position: relative;
  z-index: 2;
  width: calc(300 * var(--u));
  height: calc(300 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(30 * var(--u)) calc(40 * var(--u)) rgba(14, 12, 13, 0.22));
}

/* A soft brush swoosh behind the head (the violet mock, step 2). */
.sp-arrival-swoosh {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 58%;
  width: calc(560 * var(--u));
  height: calc(150 * var(--u));
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(calc(6 * var(--u)));
}

/* Decorative web/code glyphs scattered around the arrival head. */
.sp-web-el {
  position: absolute;
  z-index: 3;
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(40 * var(--u));
  line-height: 1;
  font-weight: 800;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(14, 12, 13, 0.18));
}

.sp-web-el.is-window {
  width: calc(120 * var(--u));
  height: calc(96 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.9);
  color: var(--violet);
  display: grid;
  place-items: center;
  font-size: calc(30 * var(--u));
}

.sp-web-el.is-doc {
  width: calc(110 * var(--u));
  height: calc(120 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.9);
}

/* =============================  FOOTER  ================================== */
.sp-footer {
  background: var(--paper);
  padding: calc(40 * var(--u)) 0;
}

/* =====================  REVEAL ON SCROLL (about-style)  ================= */
/* Mirrors the home page's about-reveal-line: elements slide up + fade in as
   they enter the viewport (JS adds .is-revealed via IntersectionObserver). */
.sp-reveal {
  opacity: 0;
  transform: translate3d(0, calc(42 * var(--u)), 0);
  will-change: transform, opacity;
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 460ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.sp-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =============================  MOBILE  ================================== */
@media (max-width: 900px) {
  /* Sticky 3D step-stack runs on phones too (parity with the home page's service
     cards): each card pins just below the topbar and the ones beneath recede as
     later cards arrive — transforms written by updateStepCards. */
  .step-card {
    top: 84px;
  }
  .step-card + .step-card {
    margin-top: 40px;
  }
  .sp-steps-stack {
    perspective: 1200px;
  }

  .sp-shell {
    width: calc(100vw - 28px);
  }

  /* Match the home page's larger mobile logo (the logo-link box sizes the img). */
  .topbar > a { top: 7px; width: 182px; height: 24px; }

  /* Hero */
  /* Mobile: video at its natural aspect (full wordmark, no cover-crop) with the
     captions below it on the sky, not overlaid. */
  .sp-hero { height: auto; min-height: 0; }
  .sp-hero-media { position: relative; inset: auto; aspect-ratio: 1280 / 765; height: auto; }
  .sp-hero-captions {
    position: static; transform: none; grid-template-columns: 1fr; gap: 5px;
    padding: 12px 0 22px; width: calc(100vw - 28px); margin: 0 auto;
  }
  .sp-hero-cap { font-size: 10.5px; }
  .sp-hero-cap--center { text-align: left; max-width: 100%; justify-self: stretch; }
  .sp-hero-cap--right { text-align: left; justify-self: start; white-space: normal; }

  /* Dark statements */
  .sp-statement { padding: 84px 0; }
  .sp-statement-copy { width: 90vw; max-width: 90vw; font-size: clamp(24px, 7.2vw, 34px); }

  /* Flip cards → 2 columns; flip via tap (.is-flipped). */
  .sp-best { padding: 64px 0; }
  .sp-flip-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sp-flip-row .flip-card:nth-child(3),
  .sp-flip-row .flip-card:nth-child(4) { margin-top: 0; }
  .flip-title { font-size: clamp(24px, 6vw, 32px); }
  .flip-card { aspect-ratio: 3 / 4; }

  /* Step cards → single column, media below text */
  .sp-steps { padding: 24px 0 64px; }
  .sp-steps-title { font-size: 12px; margin-bottom: 40px; }
  .step-card { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 20px; }
  .step-body { gap: 28px; }
  .step-kicker { gap: 28px; font-size: 12px; }
  .step-bottom { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .step-title { font-size: clamp(30px, 9vw, 44px); }
  .step-desc { font-size: 13px; }
  .step-media { min-height: 180px; aspect-ratio: 16 / 10; order: 3; }

  /* Some projects → shorter stage (JS scatters within it) */
  .sp-projects-stage { width: calc(100vw - 28px); height: 420px; }

  /* Share a brief */
  .sp-brief { margin-top: -120px; }
  .sp-brief-dome { border-radius: 50% 50% 0 0 / 120px 120px 0 0; padding: 96px 14px 36px; }
  /* the 205u one-liner is desktop-only; on phones it wraps and shrinks to fit */
  .sp-brief-word { font-size: clamp(48px, 17vw, 104px); white-space: normal; line-height: 0.9; }
  .sp-brief-foot {
    width: calc(100vw - 28px); flex-direction: column; align-items: flex-start; gap: 10px;
    font-size: 12px;
  }

  .sp-seam { padding: 24px 0 90px; }
  .sp-seam-head { width: 140px; height: 140px; }
  .sp-arrival-head { width: 200px; height: 200px; }
  .sp-arrival-hint { top: -96px; font-size: 13px; }
}

/* =========================  REDUCED MOTION  ============================= */
@media (prefers-reduced-motion: reduce) {
  /* Flip becomes an instant cross-fade instead of a 3D rotate. */
  .flip-inner { transform: none !important; }
  .flip-back {
    transform: none;
    opacity: 0;
    transition: opacity 0.001ms;
  }
  .flip-card:hover .flip-back,
  .flip-card:focus-visible .flip-back,
  .flip-card.is-flipped .flip-back {
    opacity: 1;
  }
  .flip-card:hover .flip-front,
  .flip-card:focus-visible .flip-front,
  .flip-card.is-flipped .flip-front {
    opacity: 0;
  }

  /* No floating parallax, no rising curtain animation. */
  .sp-float { transform: none !important; }
  .sp-curtain { display: none; }
  .sp-arrival { transition: none; }
}