/* ═══════════════════════════════════════════════════════
   ARTSIDE LAB — SERVICE PAGES EDITORIAL SYSTEM
   Loaded only on service-01..07.html. Shared system + one
   signature visual per page, scoped via body[data-service].
   No external assets, no runtime libraries, no video.
════════════════════════════════════════════════════════ */

/* Registered so browsers that support CSS Houdini's typed custom
   properties can smoothly interpolate the ambient layer's vertical
   position; harmless no-op fallback elsewhere (value just snaps). */
@property --s01-ambient-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 20%;
}

/* ── TYPE SCALE & TOKENS (scoped to .sp-page, not sitewide) ── */
.sp-page {
  --sp-fs-num:     clamp(4.5rem, 13vw, 12rem);
  --sp-fs-title:   clamp(2.75rem, 2.2rem + 3.8vw, 6.5rem);
  --sp-fs-intro:   clamp(1.15rem, 1.06rem + 0.55vw, 1.7rem);
  --sp-fs-heading: clamp(1.9rem, 1.68rem + 1.9vw, 3.6rem);
  --sp-fs-body:    clamp(1.08rem, 0.92rem + 0.4vw, 1.18rem);
  --sp-fs-cta:     clamp(1.1rem, 0.95rem + 0.45vw, 1.2rem);
  --sp-fs-label:   0.85rem;
  --sp-lh-title:   0.98;
  --sp-lh-intro:   1.55;
  --sp-lh-heading: 1.12;
  --sp-lh-body:    1.7;
  --sp-measure:    740px;
  padding-top: 80px;
  overflow-wrap: break-word;
}

/* ── BREADCRUMB ── */
.sp-back-wrap { padding: 18px 0; border-bottom: 1px solid var(--border-dark); }
.sp-back {
  font-family: var(--ff-b);
  font-size: var(--sp-fs-label);
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(188,194,204,0.62);
  text-decoration: none;
  transition: color 0.2s;
}
.sp-back:hover { color: var(--text-primary); }

/* ── HERO ── */
.sp-hero { padding: 60px 0 40px; position: relative; }
.sp-num {
  display: block;
  font-family: var(--ff-d);
  font-size: var(--sp-fs-num);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(43,99,255,0.07);
  margin-bottom: -18px;
  user-select: none;
  pointer-events: none;
}
.sp-h1 {
  font-family: var(--ff-d);
  font-weight: 300;
  font-size: var(--sp-fs-title);
  line-height: var(--sp-lh-title);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  max-width: 92%;
  overflow-wrap: break-word;
  margin: 0 0 30px;
}
.sp-intro {
  font-family: var(--ff-b);
  font-size: var(--sp-fs-intro);
  font-weight: 300;
  line-height: var(--sp-lh-intro);
  color: rgba(244,247,251,0.70);
  max-width: var(--sp-measure);
  margin: 0;
}

/* ── STATEMENT — one strong editorial line between hero and signature visual ── */
.sp-statement {
  padding: 8px 0 44px;
}
.sp-statement p {
  font-family: var(--ff-d);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 1.15rem + 1vw, 2.1rem);
  line-height: 1.35;
  color: rgba(244,247,251,0.86);
  max-width: 780px;
  margin: 0;
}

/* ── SIGNATURE VISUAL — full-container-width composition, unique per page ── */
.sp-signature {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  margin: 0 0 12px;
  overflow: hidden;
}
.sp-signature svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp-signature .sp-sig-caption {
  position: absolute;
  left: 0; bottom: -34px;
  font-family: var(--ff-b);
  font-size: var(--sp-fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(188,194,204,0.42);
}

/* Reveal-once state for signature visuals: resolved by default (no-JS / reduced-motion safe),
   JS adds .sp-signature--pre before paint, then removes it once the element enters view. */
.sp-signature.sp-signature--pre .sp-sig-anim {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.sp-signature .sp-sig-anim {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.sp-signature .sp-sig-path {
  stroke-dasharray: var(--dash, 400);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22,1,0.36,1);
}
.sp-signature.sp-signature--pre .sp-sig-path {
  stroke-dashoffset: var(--dash, 400);
}

/* ── OUTCOMES — 3-4 short blocks replacing the old two-column included/brings ── */
.sp-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px 48px;
  padding: 48px 0;
  border-top: 1px solid var(--border-dark);
}
.sp-outcome h3 {
  font-family: var(--ff-d);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  color: var(--text-primary);
  margin: 0 0 10px;
}
.sp-outcome p {
  font-family: var(--ff-b);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(188,194,204,0.62);
  margin: 0;
}

/* ── SECTION LABEL (reused for scope / process / audience headings) ── */
.sp-section { padding: 48px 0; border-top: 1px solid var(--border-dark); }
.sp-section-label {
  font-family: var(--ff-b);
  font-size: var(--sp-fs-label);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(188,194,204,0.60);
  margin: 0 0 24px;
}
.sp-section-heading {
  font-family: var(--ff-d);
  font-weight: 300;
  font-size: var(--sp-fs-heading);
  line-height: var(--sp-lh-heading);
  color: var(--text-primary);
  max-width: 780px;
  margin: 0 0 24px;
}

/* ── SCOPE OF WORK (list) ── */
.sp-scope { list-style: none; padding: 0; margin: 0; max-width: var(--sp-measure); }
.sp-scope li {
  font-family: var(--ff-b);
  font-size: var(--sp-fs-body);
  font-weight: 300;
  line-height: var(--sp-lh-body);
  color: rgba(244,247,251,0.72);
  padding: 12px 0 12px 18px;
  border-bottom: 1px solid rgba(188,194,204,0.06);
  position: relative;
}
.sp-scope li::before {
  content: '';
  position: absolute;
  left: 0; top: 21px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--electric-cobalt);
  opacity: 0.55;
}

/* ── PROCESS (4 steps) ── */
.sp-process { list-style: none; counter-reset: sp-step; padding: 0; margin: 0; }
.sp-process li {
  counter-increment: sp-step;
  font-family: var(--ff-b);
  font-size: var(--sp-fs-body);
  font-weight: 300;
  line-height: var(--sp-lh-body);
  color: rgba(244,247,251,0.72);
  padding: 16px 0 16px 52px;
  border-bottom: 1px solid rgba(188,194,204,0.06);
  position: relative;
  max-width: var(--sp-measure);
}
.sp-process li::before {
  content: counter(sp-step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 17px;
  font-family: var(--ff-b);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--electric-cobalt);
  opacity: 0.6;
}

/* ── AUDIENCE — short closing statement before the CTA ── */
.sp-audience p {
  font-family: var(--ff-d);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  line-height: 1.6;
  color: rgba(244,247,251,0.64);
  max-width: var(--sp-measure);
  margin: 0;
}

/* ── CTA ── */
.sp-cta { border-top: 1px solid var(--border-dark); padding: 68px 0; text-align: center; position: relative; }
.sp-cta::before {
  content: '';
  position: absolute;
  inset: -10% 20% auto 20%;
  height: 240px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(43,99,255,0.10), transparent 75%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.sp-cta > * { position: relative; z-index: 1; }
.sp-cta h2 {
  font-family: var(--ff-d);
  font-weight: 300;
  font-size: var(--sp-fs-heading);
  line-height: var(--sp-lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.sp-cta p {
  font-family: var(--ff-b);
  font-size: var(--sp-fs-cta);
  font-weight: 300;
  line-height: var(--sp-lh-body);
  color: rgba(188,194,204,0.55);
  margin: 0 0 34px;
}
.sp-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ── PREV / NEXT ── */
.sp-prevnext { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-dark); padding: 44px 0; }
.sp-pn-item { display: flex; flex-direction: column; gap: 8px; text-decoration: none; padding: 22px 0; transition: opacity 0.2s, transform 0.2s; }
.sp-pn-item:hover { opacity: 0.65; transform: translateY(-1px); }
.sp-pn-item:last-child { text-align: right; border-left: 1px solid var(--border-dark); padding-left: 32px; }
.sp-pn-item:first-child { padding-right: 32px; }
.sp-pn-dir {
  display: block;
  font-family: var(--ff-b);
  font-size: var(--sp-fs-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(188,194,204,0.5);
}
.sp-pn-num {
  font-family: var(--ff-d);
  font-style: italic;
  color: var(--electric-cobalt);
  opacity: 0.7;
  margin-right: 8px;
}
.sp-pn-title {
  display: block;
  font-family: var(--ff-d);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.25;
}

/* ═══════════════════════════════════════
   SIGNATURE VISUAL SYSTEMS — one per service
   All pure SVG/CSS, no external assets.
   ═══════════════════════════════════════ */

/* Shared line/node vocabulary */
.sp-sig-line   { fill: none; stroke: rgba(200,210,224,0.48); stroke-width: 1.25; }
.sp-sig-line--cobalt { stroke: rgba(43,99,255,0.6); }
.sp-sig-node   { fill: var(--electric-cobalt); }
.sp-sig-node--dim { fill: rgba(200,210,224,0.68); }
.sp-sig-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(43,99,255,0.12), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

/* 02 — THE PRODUCTION ENGINE: stacked planes assembling into one stage */
body[data-service="02"] .sp-sig-plane {
  transition: transform 1.1s cubic-bezier(0.22,1,0.36,1), opacity 1.1s ease;
}
body[data-service="02"] .sp-signature.sp-signature--pre .sp-sig-plane:nth-child(1) { transform: translate(-40px,-10px); opacity: 0; }
body[data-service="02"] .sp-signature.sp-signature--pre .sp-sig-plane:nth-child(2) { transform: translate(30px,6px); opacity: 0; }
body[data-service="02"] .sp-signature.sp-signature--pre .sp-sig-plane:nth-child(3) { transform: translate(-18px,18px); opacity: 0; }

/* 03 — THE TALENT CONSTELLATION: disciplines as nodes, one in focus on hover */
body[data-service="03"] .sp-constellation-node { cursor: default; }
body[data-service="03"] .sp-constellation-node circle { transition: r 0.4s ease, opacity 0.4s ease; }
body[data-service="03"] .sp-constellation-node text { transition: opacity 0.4s ease, fill 0.4s ease; opacity: 0.55; }
body[data-service="03"] .sp-constellation-node:hover circle,
body[data-service="03"] .sp-constellation-node:focus circle { r: 7; }
body[data-service="03"] .sp-constellation-node:hover text,
body[data-service="03"] .sp-constellation-node:focus text { opacity: 1; fill: var(--text-primary); }

/* 04 — THE SPATIAL FIELD: concentric arcs and a slow aurora */
body[data-service="04"] .sp-signature { aspect-ratio: 16 / 7.5; }
body[data-service="04"] .sp-sig-arc { transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22,1,0.36,1); }

/* 05 — THE SCENOGRAPHIC BLUEPRINT: wireframe stage geometry */
body[data-service="05"] .sp-blueprint { transform: perspective(900px) rotateX(6deg); transform-origin: 50% 100%; }

/* 06 — THE FRAME AND THE LIGHT: aperture + crop marks */
body[data-service="06"] .sp-aperture-blade { transition: transform 0.5s ease; transform-origin: 50% 50%; }
body[data-service="06"] .sp-signature:hover .sp-aperture-blade { transform: rotate(8deg); }

/* 07 — THE CULTURAL PULSE: a network sending energy outward, once */
body[data-service="07"] .sp-pulse-ring {
  transform-origin: 50% 50%;
  opacity: 0;
}
body[data-service="07"] .sp-signature:not(.sp-signature--pre) .sp-pulse-ring {
  animation: sp-pulse-once 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
body[data-service="07"] .sp-pulse-ring:nth-child(2) { animation-delay: 0.15s; }
body[data-service="07"] .sp-pulse-ring:nth-child(3) { animation-delay: 0.3s; }
@keyframes sp-pulse-once {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ═══════════════════════════════════════
   01 — LAMP + MOUSE-WAVE TITLE
   No imagery of any kind. Pure typography, light and motion:
   a CSS "lamp" (conic-gradient beams + blurred glows) sitting
   behind a two-layer title (a real, always-visible H1, and an
   aria-hidden sliced duplicate that JS animates into a restrained
   pointer-driven wave). Entrance is a handful of CSS @keyframes
   gated by html.js-hero-anim (added synchronously, pre-paint,
   only when motion is allowed) — default/no-JS/reduced-motion
   state is already the final, fully lit, fully readable title.
   ═══════════════════════════════════════ */
/* Two families only on this page: Cormorant Garamond (display, weights
   500/600, no italic) and Manrope (body/labels/numbers/buttons, weights
   400/500/600). Scoped to body[data-service] only — this redefines
   the shared --ff-b/--ff-d custom properties just within this page's
   subtree (including the inherited nav/footer), without touching the
   global :root values other pages rely on. */
body[data-service] {
  --ff-d: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-b: 'Manrope', Inter, Arial, Helvetica, sans-serif;
  /* One restrained lighting palette, reused by the lamp, the dividers,
     the CTA glow and the page-wide ambient layer — cobalt/midnight
     only, never a rainbow. */
  --s01-bg: #020814;
  --s01-deep: #040B18;
  --s01-navy: #061120;
  --s01-glow-cobalt: #2F6BFF;
  --s01-glow-cobalt-mid: #3B82FF;
  --s01-glow-cobalt-light: #6FA8FF;
  --s01-glow-deep: #14336F;
  --s01-glow-deep2: #0B2050;
  --s01-glow-silver: #C8CDD4;
  --s01-glow-white: #F3F6FB;
  --s01-glow-muted: #96A3B5;
  --s01-glow-muted2: #A4B0C2;
  --s01-line: rgba(120,150,220,0.16);
  /* Local overrides: this page's cobalt accent and headline colour are
     slightly re-tuned from the sitewide tokens, scoped only to this
     subtree (same trick as --ff-b/--ff-d above) — every other page
     keeps the original --electric-cobalt / --text-primary values. */
  --electric-cobalt: #3B82FF;
  --text-primary: #F3F6FB;
  --text-muted: #96A3B5;
}
body[data-service] .sp-page { padding-top: 0; position: relative; }
/* Page-wide ambient continuity: one extremely faint fixed radial cobalt
   layer behind all content. Its vertical position nudges slowly as the
   active section changes (see service-pages.js), never covers text,
   never becomes a spotlight. Maximum perceived opacity stays ~6%. */
body[data-service] .sp01-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background: radial-gradient(ellipse 70% 45% at 50% var(--s01-ambient-y, 20%), rgba(59,130,255,0.6), transparent 72%);
  transition: opacity 1.2s ease;
}
body[data-service] .sp-back-wrap,
body[data-service] .sp01-hero,
body[data-service] .sp01-intro,
body[data-service] .sp01-content,
body[data-service] .footer {
  position: relative;
  z-index: 1;
}
body[data-service] .sp-back-wrap {
  padding-top: 78px;
  border-bottom: none;
  position: relative;
  z-index: 6;
  background: var(--bg-global);
}

body[data-service] .sp01-hero {
  position: relative;
  min-height: calc(100svh - 123px);
  overflow: hidden;
  background: var(--s01-bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
}

body[data-service] .sp01-hero-stage {
  position: relative;
  width: 100%;
}

/* ── Title ── */
body[data-service] .sp01-title-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 976px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
/* The real, semantic H1 is the one and only stable title layer. It is
   never hidden by any state (JS-ready, wave-active, language switch,
   reduced motion, no-JS) — only the decorative wave overlay above it
   is conditional. This is deliberate: if the wave ever fails to render
   correctly, this title alone is still a complete, readable result. */
body[data-service] .sp01-title {
  position: relative;
  z-index: 2;
  display: block;
  opacity: 1;
  visibility: visible;
  font-family: var(--ff-d);
  font-weight: 500;
  font-size: clamp(56px, 6.6vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(180deg, #F4F7FB 0%, #D9E0EA 38%, #C8CDD4 72%, #A8B3C3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 26px rgba(59,130,255,0.18);
}
/* ── Entrance — only when html.js-hero-anim is present. The title
     rises into place once, 1550ms, forwards-filled; final keyframe
     values match the static (no-JS/reduced-motion) state exactly. ── */
html.js-hero-anim body[data-service] .sp01-title-wrap {
  animation: sp01-title-rise 1550ms cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes sp01-title-rise {
  0%   { opacity: 0.65; transform: translateY(14px); }
  16%  { opacity: 0.65; }
  42%  { transform: translateY(14px); }
  52%  { opacity: 1; }
  81%  { transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Scroll indicator, anchored near the hero's bottom edge ── */
body[data-service] .sp01-hero-scroll {
  position: absolute;
  left: 50%; bottom: 30px;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.75;
}
body[data-service] .sp01-hero-scroll span {
  display: block; width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--chrome-silver), rgba(59,130,255,0.5), transparent);
}

/* ── Introduction, directly under the lamp ── */
body[data-service] .sp01-intro {
  position: relative;
  z-index: 2;
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  max-width: 700px;
  margin: 28px auto 0;
  padding: 0 24px;
  text-align: center;
  color: var(--s01-glow-muted2);
}

/* ── Content below the hero: numbered sections, thin rules, no cards ──
   Controlled vertical rhythm: ~64px section padding (≈128px between two
   sections), ~40-60px head-to-content gap — not full-viewport blocks. */
body[data-service] .sp01-content { padding-top: 24px; }
body[data-service] .sp01-section {
  padding: 64px 0;
  border-top: 1px solid var(--border-dark);
  position: relative;
}
/* One consistent header for every section: number always on the left,
   line always extending right, label always flush-left below. Never
   alternates direction — this is deliberate, section-to-section rhythm. */
body[data-service] .sp01-section-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
body[data-service] .sp01-num {
  flex: 0 0 auto;
  min-width: 84px;
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.9rem + 2.8vw, 4.4rem);
  line-height: 1;
  color: rgba(59,130,255,0.18);
  user-select: none;
  transition: color 1s ease;
}
/* Section number activation: opacity/colour transition only, once, when
   the section first enters view — no scale jump, no glow cloud. */
body[data-service] .rv.in .sp01-num {
  color: rgba(59,130,255,0.32);
}
body[data-service] .sp01-rule {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, rgba(200,210,224,0.32), transparent);
  overflow: hidden;
}
/* GlowingEffect adaptation: a short cobalt/silver highlight sweeps once
   across part of the divider as its section enters view, then settles
   into a faint permanent accent. Restrained ARTSIDE LAB gradient only
   (no rainbow), maximum ~200px illuminated segment. */
body[data-service] .sp01-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, transparent, var(--s01-glow-deep) 30%, var(--s01-glow-cobalt) 45%, var(--s01-glow-white) 52%, var(--s01-glow-cobalt) 60%, transparent 82%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  background-position: -200px 0;
  opacity: 0;
}
body[data-service] .rv.in .sp01-rule::after {
  animation: sp01-rule-sweep 1.1s cubic-bezier(0.3,0.6,0.3,1) forwards;
}
@keyframes sp01-rule-sweep {
  0%   { opacity: 0;    background-position: -200px 0; }
  8%   { opacity: 0.85; }
  65%  { opacity: 0.85; background-position: 100% 0; }
  100% { opacity: 0.22; background-position: 100% 0; }
}
body[data-service] .sp01-section-label {
  font-family: var(--ff-b);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
  position: relative;
  padding-left: 14px;
}
body[data-service] .sp01-section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--electric-cobalt);
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body[data-service] .rv.in .sp01-section-label::before {
  opacity: 0.85;
  transform: translateY(-50%) scale(1);
}

/* Section 01 only: slightly taller bottom padding and a wider head-to-
   content gap than the shared rhythm above, so the new editorial grid
   has room to breathe without touching Sections 02-05's spacing. */
body[data-service] .sp01-content > .sp01-section:first-of-type {
  padding-bottom: 108px;
}
body[data-service] .sp01-content > .sp01-section:first-of-type .sp01-section-head {
  margin-bottom: 56px;
}
@media (max-width: 767px) {
  body[data-service] .sp01-content > .sp01-section:first-of-type { padding-bottom: 56px; }
}

/* Guiding line: a short thread of light bridging the lamp above into
   the first editorial section, echoed only here (not per section). */
body[data-service] .sp01-continuity { position: relative; }
body[data-service] .sp01-continuity::before {
  content: '';
  position: absolute;
  top: -48px; left: 50%;
  width: 1px; height: 96px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(200,210,224,0.4), rgba(59,130,255,0.22) 60%, transparent);
  pointer-events: none;
}

/* Section 01 — asymmetric editorial grid, not a centred quote block.
   Headline (Manrope, not the display serif) sits left at ~60% width,
   supporting paragraph runs alongside at ~35%; both start at the same
   top edge. A short differentiation line follows below, full-width. */
body[data-service] .sp01-why {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  column-gap: 92px;
  align-items: start;
}
body[data-service] .sp01-why-headline {
  font-family: var(--ff-b);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2.125rem, 2.05rem + 1vw, 3.25rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
  color: var(--text-primary);
  max-width: 740px;
  margin: 0;
}
body[data-service] .sp01-why-support {
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);
  line-height: 1.75;
  color: var(--s01-glow-muted2);
  max-width: 430px;
  margin: 0;
}
@media (max-width: 899px) {
  body[data-service] .sp01-why { grid-template-columns: 1fr; row-gap: 32px; }
  body[data-service] .sp01-why-headline { max-width: 100%; }
  body[data-service] .sp01-why-support { max-width: 100%; }
}
@media (max-width: 767px) {
  body[data-service] .sp01-why-headline { font-size: clamp(1.875rem, 1.7rem + 1.5vw, 2.25rem); line-height: 1.1; }
  body[data-service] .sp01-why-support { font-size: 1rem; }
}
/* One short cobalt mark instead of a card — signals this line is a
   distinct, specific claim rather than a continuation of the paragraph. */
body[data-service] .sp01-differentiator {
  position: relative;
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 720px;
  margin: 52px 0 0;
  padding-left: 22px;
}
/* A narrow cold-white centre with a subtle cobalt outer glow, activated
   once (scale + opacity) when the section first enters view. */
body[data-service] .sp01-differentiator::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 14px; height: 2px;
  background: linear-gradient(to right, var(--s01-glow-cobalt), var(--s01-glow-white));
  box-shadow: 0 0 6px 0 rgba(59,130,255,0.5);
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
body[data-service] .rv.in .sp01-differentiator::before {
  opacity: 0.85;
  transform: scaleX(1);
}
@media (max-width: 767px) {
  body[data-service] .sp01-differentiator { font-size: 0.9375rem; margin-top: 40px; }
}
/* Two explicit columns (not CSS multi-column) so both start at exactly
   the same vertical position regardless of item height: 01-04 left,
   05-07 right. Each item: small cobalt index, title, one sentence,
   thin separator — left-aligned always, no cards. */
/* Section 02 — two explicit columns (01-03 left, 04-05 right) so both
   start at exactly the same vertical position regardless of item
   height. Each item: small cobalt index, title, one sentence, thin
   separator — left-aligned always, no cards. */
body[data-service] .sp01-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
}
body[data-service] .sp01-scope-col {
  list-style: none; padding: 0; margin: 0;
  counter-reset: sp01-scope-item 0;
}
body[data-service] .sp01-scope-col--2 { counter-reset: sp01-scope-item 3; }
body[data-service] .sp01-scope-col li {
  counter-increment: sp01-scope-item;
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(188,194,204,0.06);
  text-align: left;
}
/* Editorial item separator glow: a short blue/silver highlight on
   pointer hover or keyboard focus — never a full border, never a card,
   the text never moves. Pure CSS, no pointer tracking needed. */
body[data-service] .sp01-scope-col li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--s01-glow-cobalt) 35%, var(--s01-glow-white) 50%, var(--s01-glow-cobalt) 65%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
body[data-service] .sp01-scope-col li:hover::after,
body[data-service] .sp01-scope-col li:focus-within::after,
body[data-service] .sp01-scope-col li:focus-visible::after {
  opacity: 0.5;
}
@media (hover: none), (pointer: coarse) {
  body[data-service] .sp01-scope-col li::after { display: none; }
}
body[data-service] .sp01-scope-num {
  font-family: var(--ff-b);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--electric-cobalt);
  opacity: 0.6;
  line-height: 1.5;
}
body[data-service] .sp01-scope-num::before {
  content: counter(sp01-scope-item, decimal-leading-zero);
}
body[data-service] .sp01-scope-text h3 {
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 8px;
  text-align: left;
}
body[data-service] .sp01-scope-text p {
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--s01-glow-muted2);
  margin: 0;
  text-align: left;
}

/* Section 03 — one horizontal editorial timeline on desktop (four equal
   steps sharing one guiding line); converts to a vertical timeline on
   tablet/mobile (see RESPONSIVE). No boxed cards either way. */
body[data-service] .sp01-process {
  list-style: none; counter-reset: sp01-step; padding: 0; margin: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
}
body[data-service] .sp01-process::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 9px;
  height: 1px;
  background: linear-gradient(to right, rgba(59,130,255,0.32), rgba(200,210,224,0.14));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
body[data-service] .rv.in .sp01-process::before {
  transform: scaleX(1);
}
body[data-service] .sp01-process li {
  counter-increment: sp01-step;
  position: relative;
  padding-top: 34px;
}
body[data-service] .sp01-process-num {
  position: absolute;
  top: 0; left: 0;
  background: var(--bg-global);
  padding-right: 8px;
  font-family: var(--ff-b);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--electric-cobalt);
  opacity: 0.55;
  text-shadow: none;
  transition: opacity 0.8s ease, text-shadow 0.8s ease;
}
/* One restrained cobalt highlight per step as the timeline reveals,
   staggered left-to-right — no continuous flow, no looping pulse. */
body[data-service] .rv.in .sp01-process-num {
  opacity: 0.9;
  text-shadow: 0 0 10px rgba(59,130,255,0.45);
}
body[data-service] .sp01-process li:nth-child(1) .sp01-process-num { transition-delay: 0.15s; }
body[data-service] .sp01-process li:nth-child(2) .sp01-process-num { transition-delay: 0.35s; }
body[data-service] .sp01-process li:nth-child(3) .sp01-process-num { transition-delay: 0.55s; }
body[data-service] .sp01-process li:nth-child(4) .sp01-process-num { transition-delay: 0.75s; }
body[data-service] .sp01-process-num::before {
  content: counter(sp01-step, decimal-leading-zero);
}
body[data-service] .sp01-process-text h3 {
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 8px;
}
body[data-service] .sp01-process-text p {
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--s01-glow-muted2);
  margin: 0;
}

/* Illustrative example (Section 04): clearly a hypothetical, not a real
   project — set apart from the deliverables list by a thin guiding line
   and its own small label, never a card. */
body[data-service] .sp01-example {
  position: relative;
  max-width: 850px;
  margin: 48px 0 0;
  padding-left: 20px;
  border-left: 1px solid rgba(59,130,255,0.28);
}
body[data-service] .sp01-example-label {
  display: block;
  font-family: var(--ff-b);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
body[data-service] .sp01-example h3 {
  font-family: var(--ff-b);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  color: var(--text-primary);
  margin: 0 0 10px;
}
body[data-service] .sp01-example p {
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--s01-glow-muted2);
  margin: 0;
}
body[data-service] .sp01-cta { text-align: center; }
body[data-service] .sp01-cta .sp01-section-head { justify-content: center; }
body[data-service] .sp01-audience-label {
  display: block;
  font-family: var(--ff-b);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
body[data-service] .sp01-audience {
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--s01-glow-muted2);
  max-width: var(--sp-measure);
  margin: 0 auto 34px;
}
/* Reassurance block: makes the first contact feel low-pressure. Plain
   text, no box, set apart only by its label and spacing. */
body[data-service] .sp01-first-step {
  max-width: var(--sp-measure);
  margin: 0 auto 44px;
}
body[data-service] .sp01-first-step-label {
  display: block;
  font-family: var(--ff-b);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
body[data-service] .sp01-first-step p {
  font-family: var(--ff-b);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--s01-glow-muted2);
  margin: 0;
}
body[data-service] .sp01-cta h2 {
  font-family: var(--ff-d);
  font-weight: 600;
  font-size: var(--sp-fs-heading);
  line-height: var(--sp-lh-heading);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 14px;
}
body[data-service] .sp01-cta-p {
  font-family: var(--ff-b);
  font-size: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--s01-glow-muted2);
  margin: 0 0 34px;
}
body[data-service] .sp01-cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* CTA glow — scoped to Service 01 only, so the shared .btn class used
   on every other page is untouched. A restrained cobalt/silver halo on
   hover/focus, no rainbow, no permanent pulsing, no large shadow. */
body[data-service] .sp01-cta-actions .btn {
  position: relative;
  z-index: 0;
}
body[data-service] .sp01-cta-actions .btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  background: linear-gradient(120deg, transparent, var(--s01-glow-deep), var(--s01-glow-cobalt), var(--s01-glow-silver), var(--s01-glow-cobalt), transparent);
  filter: blur(7px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
body[data-service] .sp01-cta-actions .btn:hover::before,
body[data-service] .sp01-cta-actions .btn:focus-visible::before {
  opacity: 0.3;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
  .sp-outcomes { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .sp-prevnext { grid-template-columns: 1fr; }
  .sp-pn-item:last-child { text-align: left; border-left: none; border-top: 1px solid var(--border-dark); padding-left: 0; }
  .sp-pn-item:first-child { padding-right: 0; }
  .sp-cta-actions { flex-direction: column; align-items: stretch; }
  .sp-cta-actions .btn, .sp-cta-actions .btn-ghost { justify-content: center; }
  .sp-signature { aspect-ratio: 4 / 5; margin-bottom: 8px; }
  body[data-service="04"] .sp-signature { aspect-ratio: 4 / 5; }
  .sp-blueprint { transform: none; }

  body[data-service] .sp01-hero { min-height: calc(100svh - 123px); padding-top: 48px; padding-bottom: 40px; }
  body[data-service] .sp01-title-wrap { margin-top: 0; max-width: 100%; }
  body[data-service] .sp01-title { font-size: clamp(48px, 12vw, 60px); line-height: 0.88; }
  body[data-service] .sp01-intro { font-size: 1.0625rem; margin-top: 24px; max-width: 92%; }
  body[data-service] .sp01-section { padding: 40px 0; }
  body[data-service] .sp01-section-head { gap: 16px; margin-bottom: 28px; }
  body[data-service] .sp01-num { font-size: clamp(2rem, 1.6rem + 4vw, 2.8rem); min-width: 64px; }
  body[data-service] .sp01-example { padding-left: 16px; margin-top: 36px; }
  body[data-service] .sp01-continuity::before { height: 64px; top: -40px; }
}

/* Tablet hero: same compact hierarchy and spacing logic as desktop,
   just a smaller title. */
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-service] .sp01-title { font-size: clamp(68px, 9vw, 82px); }
}

/* Tablet and below: Section 02 drops to one column, Section 03's timeline
   converts from horizontal to vertical — both at the same breakpoint, so
   the two sections stay in visual sync. "When space permits" for the
   four-step horizontal timeline means ~1024px and wider. */
@media (max-width: 1023px) {
  body[data-service] .sp01-scope { grid-template-columns: 1fr; }
  body[data-service] .sp01-process {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  body[data-service] .sp01-process::before {
    left: 8px; top: 6px; right: auto; bottom: 6px;
    width: 1px; height: auto;
    background: linear-gradient(to bottom, rgba(59,130,255,0.32), rgba(200,210,224,0.14));
    transform: scaleY(0);
    transform-origin: top center;
  }
  body[data-service] .rv.in .sp01-process::before {
    transform: scaleY(1);
  }
  body[data-service] .sp01-process li { padding-top: 0; padding-left: 32px; }
  body[data-service] .sp01-process-num {
    top: 2px; left: 0;
    background: var(--bg-global);
    padding-right: 0; padding-bottom: 4px;
  }
}

/* ═══════════════════════════════════════
   MOTION DISCIPLINE
   ═══════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  body[data-service="06"] .sp-signature:hover .sp-aperture-blade { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-signature.sp-signature--pre .sp-sig-anim { opacity: 1; transform: none; }
  .sp-signature.sp-signature--pre .sp-sig-path { stroke-dashoffset: 0; }
  body[data-service="02"] .sp-signature.sp-signature--pre .sp-sig-plane { transform: none !important; opacity: 1 !important; }
  body[data-service="07"] .sp-pulse-ring { animation: none !important; opacity: 0.35 !important; }
  .sp-sig-anim, .sp-sig-path, .sp-sig-plane, .sp-sig-arc, .sp-pn-item {
    transition: none !important;
  }

  /* Service-01 title: html.js-hero-anim is never added when this query
     matches (see the inline gate in service-01.html), so the plain,
     unprefixed rules above already show the final title immediately.
     This is a defensive backstop in case that ends up active anyway. */
  html.js-hero-anim body[data-service] .sp01-title-wrap {
    animation: none !important;
  }
  body[data-service] .sp01-title-wrap { opacity: 1 !important; transform: none !important; }

  /* Reduced motion: show the restrained final lighting state everywhere
     else too — no travelling sweeps, no pointer-follow, static accents. */
  body[data-service] .sp01-rule::after { animation: none !important; opacity: 0.22 !important; }
  body[data-service] .sp01-num { color: rgba(59,130,255,0.28) !important; }
  body[data-service] .sp01-differentiator::before { opacity: 0.8 !important; transform: scaleX(1) !important; transition: none !important; }
  body[data-service] .sp01-process::before { transform: none !important; transition: none !important; }
  body[data-service] .sp01-process-num { opacity: 1 !important; transition: none !important; }
  body[data-service] .sp01-ambient { transition: none !important; }
}