/* ═══════════════════════════════════════════════════════
   ARTSIDE LAB — MIDNIGHT THEATRE
   Art direction: cinematic, alive, premium editorial
   Pre-launch · noindex, nofollow
════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-global);
  color: var(--text-primary);
  font-family: var(--ff-b);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul { list-style: none; }
input, textarea, select { font: inherit; }

/* ── DESIGN TOKENS — MIDNIGHT THEATRE ── */
:root {
  /* Global background — matches Contact page exactly */
  --bg-global:   #050A14;

  /* Dark background system (kept for form/card elevation only) */
  --bg-main:     #050A14;
  --bg-midnight: #050A14;
  --bg-deep:     #050A14;
  --bg-elevated: #0A1628;  /* subtle card elevation only */
  --bg-soft:     #0A1628;

  /* Core palette */
  --ink-black:      #050A14;
  --midnight-blue:  #07111F;
  --deep-blue:      #0A1628;
  --electric-cobalt:#2B63FF;
  --stage-amber:    #B97838;
  --chrome-silver:  #C8CDD4;
  --body-dark:      #0D1B30;
  --body-light:     #D9E0EA;
  --secondary-light:#B7C1CF;

  /* Text colours */
  --text-primary:        #F4F7FB;
  --text-body:           #D9E0EA;
  --text-secondary:      #B7C1CF;
  --text-muted:          #96A3B5;
  --accent-blue:         #2B63FF;
  --border-subtle:       rgba(255,255,255,0.12);

  /* Mapped aliases kept for existing rules */
  --text-primary-dark:   #F4F7FB;
  --text-body-dark:      #D9E0EA;
  --text-secondary-dark: #B7C1CF;
  --text-label-dark:     #96A3B5;

  /* Light-section text (kept for service/legal pages only) */
  --text-primary-light:   #0D1520;
  --text-body-light:      #2C3A48;
  --text-secondary-light: #566070;
  --text-label-light:     #7A8898;

  /* Borders */
  --border-dark:  rgba(255,255,255,0.08);
  --border-light: rgba(12,20,32,0.10);
  --border-cobalt:rgba(38,93,255,0.30);

  /* Accents */
  --accent-blue: var(--electric-cobalt);
  --amber:       var(--stage-amber);

  /* Legacy aliases for service/legal pages */
  --deep-black:  var(--ink-black);
  --soft-black:  var(--midnight-blue);
  --graphite:    var(--body-dark);
  --graphite-2:  #0D1B30;
  --porcelain:   var(--bg-elevated);
  --soft-porcelain: var(--bg-soft);
  --off-white:   var(--bg-elevated);
  --chrome:      var(--bg-soft);
  --fg:          #EFF0EC;
  --silver:      var(--body-light);
  --dim:         var(--secondary-light);
  --label-c:     #647080;
  --blue:        var(--electric-cobalt);
  --void:        var(--ink-black);
  --g0:          var(--midnight-blue);
  --g1:          var(--body-dark);

  /* Fonts */
  --ff-d: 'Cormorant Garamond', Georgia, serif;
  --ff-b: 'Jost', system-ui, sans-serif;

  /* Spacing */
  --gutter:  clamp(24px, 5vw, 80px);
  --sec-pad: clamp(80px, 10vw, 160px);
  --radius:  2px;
}

/* ── TYPOGRAPHY SCALE ── */
.d-xl {
  font-family: var(--ff-d);
  font-size: clamp(52px, 7.5vw, 100px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text-primary-dark);
  text-wrap: balance;
}
.d-lg {
  font-family: var(--ff-d);
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--text-primary-dark);
  text-wrap: balance;
}
.d-md {
  font-family: var(--ff-d);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text-primary-dark);
  text-wrap: balance;
}
.d-sm {
  font-family: var(--ff-d);
  font-size: clamp(19px, 1.9vw, 28px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-primary-dark);
}
.label {
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-label-dark);
  margin-bottom: 32px;
  display: block;
}
.label--light { color: var(--text-label-light); }
em { font-style: italic; }

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--sec-pad) 0; position: relative; }

/* All sections — single global background matching Contact page (#050A14) */
.section--dark,
.section--midnight,
.section--deep-blue,
.section--graphite,
.section--soft,
.section--porcelain,
.section--light { background: var(--bg-global); }

/* ── REVEAL ANIMATIONS ── */
/* Content visible by default. The hidden state is applied only after JS
   successfully adds js-ready to <html>, so failures leave content readable. */
.rv {
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--rv-d, 0ms);
}
html.js-ready .rv:not(.in) {
  opacity: 0;
  transform: translateY(14px);
}
html.js-ready .rv.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .rv,
  html.js-ready .rv:not(.in),
  html.js-ready .rv.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── LOADER ── */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-main);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.55s ease;
}
.loader.out { opacity: 0; pointer-events: none; }
.loader-inner {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}
.loader-label {
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-label-dark);
}
.loader-bar-wrap { width: 120px; height: 1px; background: rgba(255,255,255,0.06); }
.loader-bar {
  height: 1px; width: 0;
  background: var(--electric-cobalt);
  transition: width 0.85s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  height: 60px;
  transition: background 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5,10,20,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-dark);
}
.nav-logo {
  display: flex; align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
}
.logo-mark-name {
  font-family: var(--ff-b);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
}
.nav-links {
  display: flex; align-items: center;
  gap: 36px;
  margin-left: auto;
}
.nav-link {
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary-dark);
  transition: color 0.2s;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--electric-cobalt);
  transition: width 0.25s ease;
}
.nav-link:hover { color: var(--text-primary-dark); }
.nav-link:hover::after { width: 100%; }

.nav-cta {
  padding: 8px 20px;
  border: 1px solid rgba(38,93,255,0.35);
  color: var(--text-primary-dark);
  transition: border-color 0.2s, background 0.2s;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.nav-cta::after { display: none; }
.nav-cta:hover {
  border-color: var(--electric-cobalt);
  background: rgba(38,93,255,0.08);
}

/* Language Switcher — refined, no heavy pill */
.lang-switcher {
  display: flex; align-items: center; gap: 0;
  margin-left: 28px;
  border-left: 1px solid var(--border-dark);
  padding-left: 20px;
}
.lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px;
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-label-dark);
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  min-height: 36px;
  min-width: 44px;
}
.lang-btn:hover { opacity: 0.85; color: var(--text-primary-dark); }
.lang-btn--active {
  opacity: 1;
  color: var(--text-primary-dark);
  border-bottom-color: var(--electric-cobalt);
}
.lang-btn:focus-visible {
  outline: 2px solid var(--electric-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}
.flag-icon { width: 16px; height: auto; border-radius: 1px; flex-shrink: 0; }

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px;
  padding: 8px;
  margin-left: 12px;
  cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.nav-burger span {
  display: block; width: 22px; height: 1px;
  background: var(--text-primary-dark);
  transition: transform 0.2s, opacity 0.2s;
}

/* ── MOBILE MENU ── */
.mob-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(5,10,20,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  padding: 80px var(--gutter) 40px;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.mob-menu.open { transform: translateX(0); }
.mob-menu-close {
  position: absolute; top: 14px; right: var(--gutter);
  font-size: 20px; color: var(--text-label-dark);
  cursor: pointer; padding: 10px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.mob-menu-close:hover { color: var(--text-primary-dark); }
.mob-menu-links {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 48px;
}
.mob-menu-link {
  font-family: var(--ff-d);
  font-size: clamp(30px, 7.5vw, 46px);
  font-weight: 300;
  color: var(--text-primary-dark);
  padding: 16px 0;
  border-bottom: 1px solid var(--border-dark);
  transition: color 0.2s, padding-left 0.25s;
  display: block;
  min-height: 60px;
  display: flex; align-items: center;
}
.mob-menu-link:hover {
  color: var(--electric-cobalt);
  padding-left: 8px;
}
.mob-menu-footer { margin-top: auto; }
.mob-menu-contact {
  font-size: 14px;
  color: var(--text-secondary-dark);
  margin-bottom: 8px;
}
.mob-menu-contact a {
  color: var(--text-secondary-dark);
  transition: color 0.2s;
}
.mob-menu-contact a:hover { color: var(--text-primary-dark); }
.mob-lang-switcher {
  display: flex; gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-dark);
}

.kb-nav a:focus,
.kb-nav button:focus {
  outline: 2px solid var(--electric-cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════
   HERO — FULL BLEED
   left:50% + margin-left:-50vw escapes any
   parent container constraint. overflow-x:clip
   suppresses the scrollbar 100vw would cause.
══════════════════════════════════════════ */
html, body { margin: 0; width: 100%; }
html { overflow-x: clip; }

.hero {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.hero-video-wrap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Background extension layer — <picture> is a pure positioning wrapper;
   object-fit/filter/transform only apply to the actual replaced element
   (the <img> inside it), never to <picture> itself. */
.hero-video-bg {
  display: block;
  position: absolute;
  inset: -3%;
  width: 106%; height: 106%;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}
.hero-video-bg img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: blur(18px) brightness(0.45) saturate(0.85);
  transform: scale(1.04);
  opacity: 0.75;
}

/* Main foreground: sharp, full contained composition */
.hero-video-main {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  transform: none;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}

/* Crossfade overlay: identical box/crop/mask treatment to the video above
   it (applied to its inner <img>, same reasoning as .hero-video-bg above),
   so the swap from static poster to decoded frame is invisible except for
   its own opacity transition. Visible by default (no JS required to show
   it, and correct with JS disabled); only JS ever adds .hero-poster-hide,
   and only once a real frame is actually playing. */
.hero-video-poster-overlay {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.32s ease;
}
.hero-video-poster-overlay img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}
.hero-video-poster-overlay.hero-poster-hide {
  opacity: 0;
}

/* ── MOBILE HERO — portrait screens ──
   The 16:9 source on a portrait viewport crops horizontally. object-fit:
   cover scales to fill height → only the centre band is visible.
   object-position: 50% 15% anchors the top of the visible window ~15% down
   the frame, keeping the Gëlle Fra's face, wreath and raised hands in view.
   bg layer is hidden (cover mode fills the viewport cleanly).
   Mask is removed so no edge fade appears on narrow screens.
══════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero-video-bg {
    display: none; /* not needed — cover fills the viewport */
  }
  .hero-video-main,
  .hero-video-poster-overlay img {
    object-fit: cover;
    object-position: 50% 15%; /* show statue crown + hands at top of frame */
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* 430×932 (iPhone 14 Plus / 15) */
@media (max-width: 430px) and (orientation: portrait) {
  .hero-video-main, .hero-video-poster-overlay img { object-position: 50% 12%; }
}

/* 390×844 (iPhone 14 / 15 Pro) */
@media (max-width: 390px) and (orientation: portrait) {
  .hero-video-main, .hero-video-poster-overlay img { object-position: 50% 12%; }
}

/* 375×812 (iPhone X / 11 Pro) */
@media (max-width: 375px) and (orientation: portrait) {
  .hero-video-main, .hero-video-poster-overlay img { object-position: 50% 14%; }
}

/* 360×800 (Android common) */
@media (max-width: 360px) and (orientation: portrait) {
  .hero-video-main, .hero-video-poster-overlay img { object-position: 50% 14%; }
}

/* Cinematic overlay: deep vignette with cobalt-tinted top */
.hero-video-overlay {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,
      transparent 28%,
      rgba(5,6,9,0.10) 60%,
      rgba(5,6,9,0.40) 100%),
    linear-gradient(to bottom,
      rgba(7,17,31,0.12) 0%,
      transparent        20%,
      transparent        70%,
      rgba(5,6,9,0.32)   100%);
}

/* Hero content */
.hero-content {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* CTA anchored just above the ticker */
.hero-cta-wrap {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  pointer-events: all;
  opacity: 0;
  animation: heroCTAFade 0.9s ease forwards 3.4s;
  z-index: 5;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .hero-cta-wrap { bottom: 22px; }
}
@keyframes heroCTAFade {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-wrap { animation: none; opacity: 1; }
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.hero-scroll-hint {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.hero-scroll-line {
  display: block; width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.22));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.20; transform: scaleY(0.6); }
  50%      { opacity: 0.9;  transform: scaleY(1); }
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  background: var(--electric-cobalt);
  color: #fff;
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  cursor: pointer;
  border: none;
  min-height: 48px;
}
.btn:hover { background: #1a4fe0; }
.btn:active { transform: scale(0.98); }
.btn-arrow { font-size: 14px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 32px;
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--text-primary-dark);
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
  cursor: pointer;
  min-height: 48px;
  position: relative;
}
.btn-ghost::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--electric-cobalt);
  transition: width 0.3s ease;
}
.btn-ghost:hover {
  border-color: rgba(38,93,255,0.50);
  background: rgba(38,93,255,0.06);
  color: #fff;
}
.btn-ghost:hover::after { width: 100%; }

/* ── MARQUEE STRIP ── */
.strip {
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 15px 0;
  background: var(--bg-global);
}
.strip-track {
  display: flex; align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.strip-item {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-label-dark);
  white-space: nowrap;
  padding: 0 22px;
}
.strip-dot {
  color: var(--electric-cobalt);
  font-size: 10px;
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
}

/* ══════════════════════════════════════════
   ABOUT — EDITORIAL CINEMATIC HERO
   Full-width, centred, no placeholder.
══════════════════════════════════════════ */

/* Section container */
.about-editorial {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(72px, 10vh, 140px) var(--gutter);
  /* Default spotlight position — fallback if JS is absent */
  --spotlight-x: 50%;
  --spotlight-y: 40%;
}

/* ── Decorative background ── */
.about-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Stronger cobalt glow centred behind the headline */
.about-glow-top {
  position: absolute;
  top: -5%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 60%;
  background: radial-gradient(ellipse at 50% 28%,
    rgba(38,93,255,0.13) 0%,
    rgba(38,93,255,0.05) 42%,
    transparent 68%);
}

/* Cursor-reactive spotlight */
.about-spotlight {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    650px circle at var(--spotlight-x, 50%) var(--spotlight-y, 40%),
    rgba(38,93,255,0.17),
    rgba(15,40,85,0.08) 38%,
    transparent 72%
  );
  /* No transition — CSS custom properties in gradients cannot be interpolated;
     a transition here causes the browser to skip visual updates entirely. */
}

/* Fabric canvas — subtle flowing sine lines */
.about-fabric {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.055;
}

/* Cinematic grain — CSS SVG noise, nearly invisible */
.about-editorial::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Edge vignette */
.about-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 110% at 50% 50%,
    transparent 36%,
    rgba(5,10,20,0.52) 100%);
}

/* ── Centred content ── */
.about-editorial-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.about-editorial .label {
  margin-bottom: 40px;
  letter-spacing: 0.24em;
}

/* Main headline — safe margins on smaller desktops */
.about-headline {
  font-family: var(--ff-d);
  font-size: clamp(3.2rem, 6vw, 6.8rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.032em;
  color: var(--text-primary);
  text-align: center;
  text-wrap: balance;
  width: min(100%, 1100px);
  padding-inline: clamp(1rem, 4vw, 3.5rem);
  margin-inline: auto;
  margin-bottom: 52px;
}

/* Italic line — brighter porcelain-silver, clearly readable */
.about-headline em {
  font-style: italic;
  color: #D8DEE8;
}

/* Body paragraphs */
.about-body-block {
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 0;
}
.about-body {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.80;
  color: var(--text-body);
  text-align: center;
  max-width: none;
  margin-bottom: 0;
}

/* Metadata — closer to text, more visible */
.about-detail {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 6px 14px;
  font-family: var(--ff-b);
  font-size: clamp(0.72rem, 0.8vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #AEB8C7;
  margin-top: 3rem;
}
.about-sep {
  color: var(--electric-cobalt);
  opacity: 0.55;
  font-size: 10px;
}

/* ── Entrance animations ── */
.about-anim {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(3px);
  transition:
    opacity  0.85s cubic-bezier(0.22,1,0.36,1) var(--anim-d, 0.2s),
    transform 0.85s cubic-bezier(0.22,1,0.36,1) var(--anim-d, 0.2s),
    filter   0.75s ease var(--anim-d, 0.2s);
}
.about-headline {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity  0.95s cubic-bezier(0.22,1,0.36,1) 0.14s,
    transform 0.95s cubic-bezier(0.22,1,0.36,1) 0.14s,
    filter   0.85s ease 0.14s;
}
.about-editorial.about-revealed .about-anim,
.about-editorial.about-revealed .about-headline {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .about-anim, .about-headline {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .about-editorial::before { display: none; }
}

/* Static spotlight on touch / no-hover devices — JS never runs there */
@media (hover: none), (pointer: coarse) {
  .about-editorial {
    --spotlight-x: 50%;
    --spotlight-y: 35%;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .about-editorial { min-height: auto; }
}
@media (max-width: 600px) {
  .about-headline {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
    line-height: 0.95;
    margin-bottom: 40px;
    padding-inline: clamp(0.75rem, 4vw, 1.5rem);
  }
  .about-editorial .label { margin-bottom: 32px; }
  .about-body-block { gap: 18px; }
  .about-body { font-size: 1.05rem; }
  .about-detail {
    font-size: 0.72rem;
    gap: 5px 10px;
    margin-top: 2.25rem;
  }
}

/* ══════════════════════════════════════════
   About → Services transition bridge
══════════════════════════════════════════ */

/* Tighten section spacing around the bridge */
.about-editorial   { padding-bottom: clamp(48px, 5vh, 80px); }
.svc-min           { padding-top:    clamp(48px, 5vw, 80px); }

/* Services heading: larger initial rise, scoped to this element only */
#services-heading.svc-min-anim                    { transform: translateY(28px); }
.svc-min-revealed #services-heading.svc-min-anim  { transform: translateY(0);   }

/* Bridge container */
.svc-bridge {
  position: relative;
  height: clamp(140px, 14vw, 180px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 3vw, 44px);
  gap: 16px;
}

/* Background gradient: continues cobalt atmosphere from About into Services */
.svc-bridge__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(38,93,255,0.06) 0%,
    transparent 100%
  );
}

/* Canvas: sine line continuation, drawn once by JS, shifted by CSS on scroll */
.svc-bridge__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Editorial label */
.svc-bridge__label {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--ff-b);
  font-size: clamp(0.58rem, 0.65vw, 0.68rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(38,93,255,0.52);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity  0.8s cubic-bezier(0.22,1,0.36,1) 0.22s,
    transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.22s;
}
.svc-bridge--visible .svc-bridge__label {
  opacity: 1;
  transform: translateY(0);
}

/* Cobalt rule — reveals left to right */
.svc-bridge__rule {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 2 * var(--gutter)));
  height: 1px;
  background: rgba(38,93,255,0.42);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1) 0s;
}
.svc-bridge--visible .svc-bridge__rule {
  transform: scaleX(1);
}

/* Mobile: compact, no canvas */
@media (max-width: 767px) {
  .about-editorial { padding-bottom: clamp(40px, 5vh, 60px); }
  .svc-min         { padding-top:    clamp(40px, 5vw, 64px); }
  .svc-bridge {
    height: clamp(80px, 12vw, 110px);
    padding-bottom: clamp(20px, 3vw, 32px);
  }
  .svc-bridge__lines { display: none; }
}

/* Reduced motion: show immediately, no animation */
@media (prefers-reduced-motion: reduce) {
  .svc-bridge__label {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
  .svc-bridge__rule {
    transform: scaleX(1);
    transition: none;
  }
  #services-heading.svc-min-anim { transform: translateY(0); }
}

/* ══════════════════════════════════════════
   SERVICES — EDITORIAL GRID
══════════════════════════════════════════ */

/* ── Introduction ── */
.svc-min { position: relative; }

.svc-min-intro {
  padding-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,0.055);
  margin-bottom: 0;
}
.svc-min-intro .label { margin-bottom: 20px; }

.svc-min-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
}

.svc-min-h2 {
  font-family: var(--ff-d);
  font-size: clamp(3.2rem, 5vw, 5rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.026em;
  color: var(--text-primary);
  text-wrap: balance;
}

.svc-min-note {
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--text-secondary);
  line-height: 1.72;
  max-width: 340px;
}

/* ── Entry animation ── */
.svc-min-anim {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition:
    opacity 0.75s cubic-bezier(0.22,1,0.36,1) var(--ovd, 0s),
    transform 0.75s cubic-bezier(0.22,1,0.36,1) var(--ovd, 0s),
    filter  0.65s ease var(--ovd, 0s);
}
.svc-min-revealed .svc-min-anim {
  opacity: 1; transform: translateY(0); filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .svc-min-anim { opacity:1; transform:none; filter:none; transition:none; }
}

/* ── Service list — two-column editorial grid ── */
.svc-min-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Vertical centre divider between columns */
.svc-min-list::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.06) 92%,
    transparent 100%
  );
  pointer-events: none;
}

/* ══════════════════════════════════════════
   SERVICE LIGHT ITEMS
══════════════════════════════════════════ */
.service-light-item {
  --li-x: 50%;
  --li-y: 50%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;

  min-height: clamp(135px, 12vw, 175px);
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.25rem;

  /* Row separators via border-top */
  border-top: 1px solid rgba(255,255,255,0.06);

  text-decoration: none;
  color: inherit;
  transition:
    color 280ms ease,
    border-color 280ms ease;
}

/* Row 1 (items 1 & 2) — list already has the top border */
.svc-min-list > .service-light-item:nth-child(1),
.svc-min-list > .service-light-item:nth-child(2) {
  border-top: none;
}

/* Hover / focus — cobalt top-border tint */
.svc-min-list > .service-light-item:nth-child(n+3):hover,
.svc-min-list > .service-light-item:nth-child(n+3):focus-visible {
  border-top-color: rgba(47,102,255,0.20);
}

/* Service 07 — full width, centred, covers vertical divider */
.svc-min-list > .service-light-item:nth-child(7) {
  grid-column: 1 / -1;
  width: min(100%, 620px);
  justify-self: center;
  /* Opaque background covers the vertical column divider cleanly */
  background: var(--bg-global);
  /* Fading top separator — replaces solid border */
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.055) 18%,
    rgba(255,255,255,0.055) 82%,
    transparent 100%
  ) 1;
}

/* Service 07 hover — subtle cobalt tint on the separator */
.svc-min-list > .service-light-item:nth-child(7):hover,
.svc-min-list > .service-light-item:nth-child(7):focus-visible {
  border-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(47,102,255,0.12) 18%,
    rgba(47,102,255,0.22) 82%,
    transparent 100%
  ) 1;
}

.service-light-item:focus-visible {
  outline: none;
}
.service-light-item:focus-visible .service-light-item__title {
  text-decoration: underline;
  text-decoration-color: rgba(47,102,255,0.55);
  text-underline-offset: 4px;
}

/* ── Light layer (::before) — contained to title area ── */
.service-light-item::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: min(420px, 90%);
  height: min(120px, 90%);
  transform: translate(-50%, -50%) translate(
    calc((var(--li-x) - 50%) * 0.10),
    calc((var(--li-y) - 50%) * 0.08)
  );
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  transition:
    opacity 350ms ease,
    transform 500ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

/* ── Sweep layer (::after) — visible only during press ── */
.service-light-item::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%, transparent 22%,
    rgba(255,255,255,0.045) 46%, rgba(255,255,255,0.045) 54%,
    transparent 78%, transparent 100%
  );
  opacity: 0;
  transform: translateX(-150%);
  transition: none;
}
.service-light-item.is-pressed::after {
  opacity: 1;
  animation: liSweep 170ms cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes liSweep {
  from { transform: translateX(-150%); opacity: 1; }
  to   { transform: translateX(150%);  opacity: 0; }
}

/* All content above light layers */
.service-light-item > * { position: relative; z-index: 1; }

/* ── Hover & focus light ── */
.service-light-item:hover::before,
.service-light-item:focus-visible::before { opacity: 0.12; }

/* ── Pressed light ── */
.service-light-item.is-pressed::before,
.service-light-item:active::before { opacity: 0.20; }

/* ── Number ── */
.service-light-item__number {
  font-family: var(--ff-b);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8F9BAE;
  opacity: 0.78;
  text-align: center;
  margin-bottom: 0.6rem;
  transition: color 280ms ease, opacity 280ms ease;
}
.service-light-item:hover .service-light-item__number,
.service-light-item:focus-visible .service-light-item__number,
.service-light-item.is-pressed .service-light-item__number {
  color: #2F66FF;
  opacity: 1;
}

/* ── Title ── */
.service-light-item__title {
  font-family: var(--ff-d);
  font-size: clamp(1.55rem, 1.8vw, 2rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: #F1F3F7;
  text-align: center;
  text-wrap: balance;
  max-width: 520px;
  margin-inline: auto;
  transition:
    color 280ms ease,
    transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.service-light-item:hover .service-light-item__title,
.service-light-item:focus-visible .service-light-item__title {
  color: #ffffff;
  transform: translateY(-2px);
}
.service-light-item.is-pressed .service-light-item__title {
  color: #ffffff;
}

/* ── Arrow ── */
.service-light-item__arrow {
  width: 14px; height: 14px;
  color: #AAB4C3;
  opacity: 0.22;
  margin-top: 0.6rem;
  flex-shrink: 0;
  transition:
    opacity 300ms ease,
    color 280ms ease,
    transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.service-light-item:hover .service-light-item__arrow,
.service-light-item:focus-visible .service-light-item__arrow {
  opacity: 0.85;
  color: #DDE5F1;
  transform: translate(4px, -4px);
}
.service-light-item.is-pressed .service-light-item__arrow {
  opacity: 1;
  color: #2F66FF;
  transform: translate(5px, -5px);
}

/* ══════════════════════════════════════════
   PER-SERVICE LIGHT COMPOSITIONS
   All lights constrained by ::before dimensions.
   Seven distinct identities, one visual system.
══════════════════════════════════════════ */

/* 01 — Thin diagonal cobalt beam */
.service-light-item--01::before {
  background:
    linear-gradient(-44deg, transparent 32%, rgba(38,93,255,1) 48%, rgba(100,150,255,1) 52%, transparent 68%),
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(38,93,255,0.35) 0%, transparent 70%);
  filter: blur(16px);
}

/* 02 — Controlled vertical stage spotlight */
.service-light-item--02::before {
  background:
    radial-gradient(ellipse 16% 100% at 50% 0%, rgba(160,190,255,1) 0%, rgba(38,93,255,0.75) 38%, transparent 72%),
    radial-gradient(ellipse 45% 55% at 50% 25%, rgba(38,93,255,0.35) 0%, transparent 70%);
  filter: blur(18px);
}

/* 03 — Two restrained side lights converging */
.service-light-item--03::before {
  background:
    radial-gradient(ellipse 28% 100% at 2%  50%, rgba(38,93,255,0.95) 0%, transparent 68%),
    radial-gradient(ellipse 28% 100% at 98% 50%, rgba(38,93,255,0.95) 0%, transparent 68%),
    radial-gradient(ellipse 35% 50% at 50% 50%, rgba(38,93,255,0.18) 0%, transparent 75%);
  filter: blur(15px);
}

/* 04 — Translucent cobalt wave with soft reflection */
.service-light-item--04::before {
  background:
    radial-gradient(ellipse 95% 65% at 50% 58%, rgba(38,93,255,0.85) 0%, rgba(20,55,140,0.45) 42%, transparent 70%),
    radial-gradient(ellipse 65% 35% at 50% 28%, rgba(80,130,255,0.45) 0%, transparent 62%);
  filter: blur(20px);
}

/* 05 — Three low-opacity vertical architectural beams */
.service-light-item--05::before {
  background:
    radial-gradient(ellipse 7% 100% at 29% 50%, rgba(38,93,255,0.95) 0%, transparent 74%),
    radial-gradient(ellipse 7% 100% at 50% 50%, rgba(55,108,255,0.95) 0%, transparent 74%),
    radial-gradient(ellipse 7% 100% at 71% 50%, rgba(38,93,255,0.95) 0%, transparent 74%);
  filter: blur(14px);
}

/* 06 — Circular aperture halo (cursor-follow) */
.service-light-item--06::before {
  background:
    radial-gradient(
      circle 58% at var(--li-x, 50%) var(--li-y, 50%),
      rgba(200,218,255,0.75) 0%,
      rgba(38,93,255,0.85) 28%,
      transparent 64%
    );
  filter: blur(16px);
}

/* 07 — Wide horizontal halo (wider light for full-width item) */
.service-light-item--07::before {
  width: min(580px, 90%);
  height: min(130px, 90%);
  background:
    radial-gradient(ellipse 100% 75% at 50% 50%, rgba(38,93,255,0.65) 0%, rgba(20,55,140,0.28) 42%, transparent 68%),
    radial-gradient(ellipse 20% 40% at 22% 50%, rgba(80,120,255,0.40) 0%, transparent 65%),
    radial-gradient(ellipse 14% 30% at 50% 50%, rgba(120,160,255,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 20% 40% at 78% 50%, rgba(80,120,255,0.40) 0%, transparent 65%);
  filter: blur(18px);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .service-light-item::before {
    filter: none;
    transform: translate(-50%, -50%) !important;
    transition: opacity 250ms ease;
  }
  .service-light-item::after { animation: none !important; opacity: 0 !important; }
  .service-light-item__title { transition: color 200ms ease; }
  .service-light-item:hover .service-light-item__title,
  .service-light-item:focus-visible .service-light-item__title { transform: none; }
  .service-light-item__arrow { transition: color 200ms ease, opacity 200ms ease; }
  .service-light-item:hover .service-light-item__arrow,
  .service-light-item:focus-visible .service-light-item__arrow { transform: none; }
}

/* ── Touch / coarse pointer — no cursor drift ── */
@media (hover: none), (pointer: coarse) {
  .service-light-item::before { transform: translate(-50%, -50%); }
  .service-light-item:active::before { opacity: 0.18; }
}

/* ══════════════════════════════════════════
   CTA — MINIMAL CENTRED
══════════════════════════════════════════ */
.svc-min-cta {
  position: relative;
  text-align: center;
  /* Reduced ~13% from previous clamp(40px,6vw,80px) */
  padding: clamp(34px, 5.2vw, 70px) 0;
  border-top: 1px solid rgba(255,255,255,0.055);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}
.svc-min-cta-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 50% 50%, rgba(38,93,255,0.06) 0%, transparent 65%);
}
.svc-min-cta-h {
  position: relative; z-index: 1;
  font-family: var(--ff-d);
  font-size: clamp(2rem, 3.6vw, 4rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 680px;
}
.svc-min-cta-text {
  position: relative; z-index: 1;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--text-secondary);
  line-height: 1.68;
  max-width: 400px;
  margin-top: 2px;
}
.svc-min-cta-btn {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 36px;
  border: 1px solid rgba(38,93,255,0.40);
  color: var(--text-primary);
  background: transparent;
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color 280ms ease,
    border-color 280ms ease,
    background-color 280ms ease,
    transform 350ms cubic-bezier(.22, 1, .36, 1);
}
.svc-min-cta-btn:hover,
.svc-min-cta-btn:focus-visible {
  border-color: rgba(47,102,255,0.80);
  background: rgba(38,93,255,0.07);
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}
.svc-min-cta-btn:active {
  background: rgba(38,93,255,0.14);
  transform: translateY(0);
  transition-duration: 80ms;
}
.svc-min-cta-btn svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}
.svc-min-cta-btn:hover svg,
.svc-min-cta-btn:focus-visible svg { transform: translate(4px, -4px); }
/* Explicit keyboard focus ring (outline cleared above, use box-shadow instead) */
.svc-min-cta-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(47,102,255,0.70);
}
@media (prefers-reduced-motion: reduce) {
  .svc-min-cta-btn { transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; }
  .svc-min-cta-btn:hover,
  .svc-min-cta-btn:focus-visible { transform: none; }
  .svc-min-cta-btn svg { transition: none; }
  .svc-min-cta-btn:hover svg,
  .svc-min-cta-btn:focus-visible svg { transform: none; }
}

/* ── Responsive ── */
@media (max-width: 767px) {
  /* Switch to single column */
  .svc-min-list {
    grid-template-columns: 1fr;
  }
  /* Hide vertical divider */
  .svc-min-list::before { display: none; }
  /* Restore row 1 items — they need top borders in single-column */
  .svc-min-list > .service-light-item:nth-child(1) { border-top: none; }
  .svc-min-list > .service-light-item:nth-child(2) {
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  /* Service 07 — revert to full single column */
  .svc-min-list > .service-light-item:nth-child(7) {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  .svc-min-intro-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-min-note { max-width: none; }
  .svc-min-h2 { font-size: clamp(2rem, 9vw, 3.2rem); }
  .service-light-item {
    min-height: 105px;
    padding: 1.2rem 1rem;
  }
  .service-light-item__title {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem);
    line-height: 1.17;
    max-width: 92%;
  }
  .svc-min-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .svc-min-cta-h { font-size: clamp(1.75rem, 7.5vw, 2.4rem); }
  .svc-min-cta-btn { width: 100%; justify-content: center; }
}

/* Keep legacy svc-table rules for individual service pages */
/* ══════════════════════════════════════════
   SERVICES — MIDNIGHT BLUE EDITORIAL
══════════════════════════════════════════ */

.services-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.services-note {
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--text-secondary-dark);
  max-width: 340px;
  line-height: 1.72;
}
.svc-table { border-top: 1px solid var(--border-dark); }
.svc-row {
  display: flex; align-items: center; gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border-dark);
  transition: background 0.25s, padding-left 0.25s;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.svc-row::before {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--electric-cobalt);
  transition: width 0.35s ease;
}
.svc-row:hover { background: rgba(38,93,255,0.04); padding-left: 8px; }
.svc-row:hover::before { width: 100%; }
.svc-row:hover .svc-arrow { transform: translateX(8px); opacity: 1; color: var(--electric-cobalt); }
.svc-n {
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-label-dark);
  min-width: 32px;
  transition: color 0.2s;
}
.svc-row:hover .svc-n { color: var(--electric-cobalt); }
.svc-name {
  font-family: var(--ff-d);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 300;
  color: var(--text-primary-dark);
  flex: 1;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.svc-row:hover .svc-name { color: #fff; }
.svc-arrow {
  color: var(--text-label-dark);
  font-size: 18px;
  margin-left: auto;
  opacity: 0.4;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.2s, color 0.2s;
}

/* ══════════════════════════════════════════
   PROCESS — DEEP BLUE WITH AMBER STAGE LIGHT
══════════════════════════════════════════ */
.section--deep-blue {
  background: var(--bg-global);
}
.section--deep-blue::after {
  content: '';
  position: absolute; bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(185,120,56,0.25) 35%,
    rgba(185,120,56,0.25) 65%,
    transparent);
  pointer-events: none;
}

.process-intro {
  max-width: 640px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.process-intro .about-body {
  max-width: none;
  color: var(--text-body-dark);
  font-size: clamp(17px, 1.25vw, 20px);
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-dark);
}
.process-step-card {
  background: var(--bg-global);
  padding: clamp(36px, 4.5vw, 64px);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.process-step-card:hover {
  background: rgba(11,26,48,0.6);
}

/* Amber stage-light corner accent per card */
.process-step-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(to right, var(--electric-cobalt), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.process-step-card:hover::before { opacity: 1; }

.process-step-bg-num {
  position: absolute;
  bottom: -16px; right: 16px;
  font-family: var(--ff-d);
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 300;
  line-height: 1;
  color: rgba(38,93,255,0.05);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.process-step-label {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--electric-cobalt);
  margin-bottom: 22px;
  display: block;
}
.process-step-title {
  font-family: var(--ff-d);
  font-size: clamp(21px, 2.1vw, 32px);
  font-weight: 300;
  color: var(--text-primary-dark);
  margin-bottom: 18px;
  line-height: 1.18;
}
.process-step-text {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-body-dark);
  line-height: 1.80;
}

/* Amber bottom light on section */
.process-intro + .process-steps {
  position: relative;
}

/* ══════════════════════════════════════════
   CONTACT — DARK FINALE
══════════════════════════════════════════ */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 120px);
  margin-top: 64px;
}
.contact-h2 { margin-bottom: 24px; }
.contact-statement {
  font-size: clamp(16px, 1.15vw, 18px);
  color: var(--text-body-dark);
  line-height: 1.78;
  max-width: 460px;
  margin-bottom: 40px;
}
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-detail {
  display: flex; flex-direction: column; gap: 5px;
  text-decoration: none;
}
.contact-detail-label {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-label-dark);
}
.contact-detail-value {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-primary-dark);
  transition: color 0.2s;
}
a.contact-detail:hover .contact-detail-value { color: var(--electric-cobalt); }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 9px; }
.form-label {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-label-dark);
}
.form-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary-dark);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.25s, background 0.25s;
  border-radius: var(--radius);
  width: 100%;
}
.form-input::placeholder { color: var(--text-label-dark); opacity: 0.7; }
.form-input:focus {
  outline: none;
  border-color: rgba(38,93,255,0.55);
  background: rgba(11,26,48,1);
  box-shadow: 0 0 0 3px rgba(38,93,255,0.08);
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23647080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-select option { background: var(--deep-blue); color: var(--text-primary-dark); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-submit { align-self: flex-start; margin-top: 4px; }
.form-privacy {
  font-size: 12px;
  color: var(--text-label-dark);
  line-height: 1.68;
  margin-top: 4px;
}
.form-privacy a {
  color: var(--text-secondary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.form-privacy a:hover { color: var(--text-primary-dark); }
.form-prelaunch-notice {
  font-size: 11.5px;
  color: var(--text-label-dark);
  line-height: 1.62;
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 2px solid rgba(38,93,255,0.20);
  opacity: 0.80;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
  background: var(--bg-main);
  border-top: 1px solid var(--border-dark);
  padding: clamp(56px, 6vw, 88px) 0 36px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: start;
}
.footer-logo { display: flex; flex-direction: column; gap: 14px; }
.footer-tagline {
  font-size: 13px;
  color: var(--text-secondary-dark);
  line-height: 1.65;
}
.footer-mid { display: flex; flex-direction: column; gap: 20px; }
.footer-copy { font-size: 12px; color: var(--text-label-dark); letter-spacing: 0.04em; }
.footer-links, .footer-services {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.footer-links a, .footer-services a {
  font-size: 13px;
  color: var(--text-secondary-dark);
  transition: color 0.2s;
  text-decoration: none;
}
.footer-links a:hover, .footer-services a:hover { color: var(--text-primary-dark); }
.footer-contact {
  display: flex; flex-direction: column; gap: 10px;
  text-align: right;
}
.footer-contact a, .footer-contact span {
  font-size: 13px;
  color: var(--text-secondary-dark);
  transition: color 0.2s;
  text-decoration: none;
  display: block;
}
.footer-contact a:hover { color: var(--text-primary-dark); }
.footer-bottom {
  border-top: 1px solid var(--border-dark);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a {
  font-size: 11px;
  color: var(--text-label-dark);
  letter-spacing: 0.06em;
  transition: color 0.2s;
  text-decoration: none;
}
.footer-legal a:hover { color: var(--text-secondary-dark); }
.footer-year { font-size: 11px; color: var(--text-label-dark); letter-spacing: 0.06em; }

/* ══════════════════════════════════════════
   SERVICE PAGES
══════════════════════════════════════════ */
.svc-page { padding-top: 60px; }

.svc-hero {
  position: relative;
  min-height: 420px;
  display: flex; align-items: flex-end;
  padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
  background: var(--bg-global);
}
.svc-hero-bg { position: absolute; inset: 0; }
.svc-hero-bg svg { width: 100%; height: 100%; }
.svc-hero-content { position: relative; z-index: 2; }
.svc-hero-content h1 {
  font-family: var(--ff-d);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-primary-dark);
  max-width: 700px;
  text-wrap: balance;
  margin-bottom: 20px;
}
.svc-hero-tagline {
  font-family: var(--ff-b);
  font-size: clamp(11px, 1vw, 13px);
  color: var(--text-secondary-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.svc-hero-num {
  position: absolute; right: var(--gutter);
  bottom: clamp(16px, 3vw, 36px);
  font-family: var(--ff-d);
  font-size: clamp(80px, 16vw, 220px);
  font-weight: 300;
  color: rgba(38,93,255,0.04);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none; user-select: none;
}

.svc-breadcrumb {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-dark);
  gap: 20px; flex-wrap: wrap;
}
.svc-breadcrumb a, .svc-nav-arrow {
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-label-dark);
  text-decoration: none;
  transition: color 0.2s;
  padding: 6px 0;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.svc-breadcrumb a:hover, .svc-nav-arrow:hover { color: var(--text-primary-dark); }
.svc-breadcrumb-right { display: flex; gap: 20px; }

.svc-intro {
  padding: clamp(48px, 5vw, 72px) 0;
  max-width: 780px;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: clamp(48px, 5vw, 72px);
}
.svc-intro p {
  font-family: var(--ff-d);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 300;
  line-height: 1.42;
  color: var(--text-primary-dark);
}

.svc-img-zone {
  position: relative;
  width: 100%;
  height: clamp(180px, 22vw, 360px);
  border: 1px solid var(--border-dark);
  overflow: hidden;
  margin-bottom: clamp(48px, 5vw, 80px);
  background: var(--bg-global);
}
.svc-img-zone svg { width: 100%; height: 100%; }
.svc-img-zone .img-zone-caption {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-b);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.14);
  white-space: nowrap;
  z-index: 2;
}

.svc-body {
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--text-body-dark);
  line-height: 1.82;
  max-width: 720px;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.svc-body p { margin-bottom: 22px; }
.svc-body p:last-child { margin-bottom: 0; }

.svc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(56px, 6vw, 96px);
}
.svc-block { border-top: 1px solid var(--border-dark); padding-top: 30px; }
.svc-block-label {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--electric-cobalt);
  margin-bottom: 22px;
  display: block;
}
.svc-list { display: flex; flex-direction: column; gap: 14px; }
.svc-list li {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-body-dark);
  line-height: 1.68;
  padding-left: 18px;
  position: relative;
}
.svc-list li::before {
  content: '';
  position: absolute; left: 0; top: 12px;
  width: 5px; height: 1px;
  background: var(--electric-cobalt);
}

.svc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(56px, 6vw, 96px);
}
.svc-for-card {
  background: var(--body-dark);
  border: 1px solid var(--border-dark);
  padding: clamp(24px, 2.5vw, 36px);
  transition: border-color 0.25s, background 0.25s;
}
.svc-for-card:hover {
  border-color: rgba(38,93,255,0.35);
  background: rgba(38,93,255,0.04);
}
.svc-for-title {
  font-family: var(--ff-d);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 300;
  color: var(--text-primary-dark);
  margin-bottom: 12px;
  line-height: 1.22;
}
.svc-for-desc {
  font-size: clamp(13px, 1vw, 15px);
  color: var(--text-body-dark);
  line-height: 1.74;
}

.examples-list {
  border-top: 1px solid var(--border-dark);
  margin-bottom: clamp(56px, 6vw, 96px);
}
.example-item {
  display: flex; gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--border-dark);
  align-items: flex-start;
}
.example-n {
  font-family: var(--ff-d);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  color: rgba(38,93,255,0.12);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 4px;
}
.example-text h4 {
  font-family: var(--ff-d);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  color: var(--text-primary-dark);
  margin-bottom: 10px;
  line-height: 1.3;
}
.example-text p {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--text-body-dark);
  line-height: 1.74;
}

.process-list {
  border-top: 1px solid var(--border-dark);
  margin-bottom: clamp(56px, 6vw, 96px);
}
.process-step {
  display: flex; gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--border-dark);
  align-items: flex-start;
}
.process-n {
  font-family: var(--ff-b);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--electric-cobalt);
  flex-shrink: 0;
  min-width: 24px;
  margin-top: 5px;
}
.process-body h4 {
  font-family: var(--ff-d);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  color: var(--text-primary-dark);
  margin-bottom: 10px;
  line-height: 1.3;
}
.process-body p {
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--text-body-dark);
  line-height: 1.74;
}

.svc-cta {
  background: var(--body-dark);
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--electric-cobalt);
  padding: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(48px, 5vw, 72px);
  display: flex; flex-direction: column; gap: 16px;
}
.svc-cta .d-md { margin-bottom: 4px; }
.svc-cta-p {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-body-dark);
  line-height: 1.74;
  max-width: 500px;
}
.svc-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

.svc-prev-next {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-dark);
  margin-bottom: clamp(56px, 6vw, 96px);
}
.svc-pn-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(24px, 3vw, 36px) 0;
  text-decoration: none;
  transition: background 0.2s;
}
.svc-pn-item:first-child { border-right: 1px solid var(--border-dark); padding-right: 32px; }
.svc-pn-item:last-child  { padding-left: 32px; align-items: flex-end; }
.svc-pn-item:hover { background: rgba(38,93,255,0.03); }
.svc-pn-dir {
  font-family: var(--ff-b);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-label-dark);
}
.svc-pn-title {
  font-family: var(--ff-d);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 300;
  color: var(--text-primary-dark);
}

/* ══════════════════════════════════════════
   LEGAL PAGES
══════════════════════════════════════════ */
.legal-page { padding-top: 100px; padding-bottom: var(--sec-pad); }
.legal-page h1 {
  font-family: var(--ff-d);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  color: var(--text-primary-dark);
  margin-bottom: 12px;
  text-wrap: balance;
}
.legal-meta {
  font-size: 13px;
  color: var(--text-label-dark);
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-dark);
}
.legal-body { max-width: 720px; }
.legal-body h2 {
  font-family: var(--ff-d);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 400;
  color: var(--text-primary-dark);
  margin: 44px 0 16px;
  line-height: 1.2;
}
.legal-body p, .legal-body li {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-body-dark);
  line-height: 1.82;
  margin-bottom: 14px;
}
.legal-body ul { padding-left: 20px; }
.legal-body ul li { list-style: disc; }
.legal-body a { color: var(--electric-cobalt); }
.placeholder-field {
  background: rgba(38,93,255,0.08);
  border: 1px solid rgba(38,93,255,0.18);
  padding: 2px 7px;
  border-radius: 2px;
  font-size: 13px;
  color: #6B9BFF;
  font-style: italic;
  display: inline;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .svc-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --gutter: 22px; --sec-pad: clamp(64px, 9vw, 110px); }

  .nav-links { display: none; }
  .nav-burger { display: flex; }

  /* about-grid removed — section is now full-width editorial */

  .services-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services-note { max-width: none; }

  .svc-grid-2 { grid-template-columns: 1fr; }
  .svc-grid-3 { grid-template-columns: 1fr; }

  .contact-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-contact { text-align: left; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .svc-prev-next { grid-template-columns: 1fr; }
  .svc-pn-item:first-child { border-right: none; border-bottom: 1px solid var(--border-dark); padding-right: 0; }
  .svc-pn-item:last-child { padding-left: 0; align-items: flex-start; }

  .svc-hero-content h1 { max-width: none; }
  .svc-cta { padding: clamp(28px, 5vw, 44px); }
}

@media (max-width: 480px) {
  :root { --gutter: 20px; }
  .footer-links, .footer-services { flex-direction: column; gap: 8px; }
  .svc-cta-actions { flex-direction: column; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn, .hero-actions .btn-ghost { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════
   INDIVIDUAL SERVICE PAGES (.sp-*)
   ═══════════════════════════════════════ */

/* Shared type scale — readability pass across service-01..07
   Targets verified against real computed pixel values at 1440px/390px viewports. */
.sp-page {
  --sp-fs-title:  clamp(2.75rem, 2.2rem + 2.8vw, 5rem);      /* ~46px mobile -> ~76px desktop */
  --sp-fs-intro:  clamp(1.1rem, 1.05rem + 0.3vw, 1.35rem);   /* ~18px mobile -> ~21px desktop */
  --sp-fs-heading:clamp(1.8rem, 1.6rem + 2.2vw, 2.6rem);      /* ~29px mobile -> ~42px desktop */
  --sp-fs-body:   clamp(1.06rem, 0.9rem + 0.4vw, 1.125rem);  /* ~17px mobile -> 18px desktop */
  --sp-fs-cta:    clamp(1.1rem, 0.95rem + 0.45vw, 1.2rem);   /* ~17.6px mobile -> ~19px desktop */
  --sp-fs-label:  0.8rem;                                     /* 12.8px — small labels, never below 12px */
  --sp-lh-title:  1.04;
  --sp-lh-intro:  1.6;
  --sp-lh-heading:1.2;
  --sp-lh-body:   1.72;
  --sp-measure:   720px;
  padding-top: 80px;
  overflow-wrap: break-word;
}

/* Back 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 36px; }
.sp-num {
  display: block;
  font-family: var(--ff-d);
  font-size: clamp(5rem, 13vw, 10rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(43,99,255,0.06);
  margin-bottom: -12px;
  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.01em;
  color: var(--text-primary);
  max-width: 90%;
  overflow-wrap: break-word;
  margin: 0 0 28px;
}
.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.68);
  max-width: var(--sp-measure);
  margin: 0;
}

.sp-cta { position: relative; }
.sp-cta > * { position: relative; z-index: 1; }

/* Content body */
.sp-content { padding-bottom: 64px; }

/* Two-column sections */
.sp-two-col {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 0 56px;
  padding: 48px 0;
  border-top: 1px solid var(--border-dark);
}

/* Full-width section */
.sp-section {
  padding: 48px 0;
  border-top: 1px solid var(--border-dark);
}

/* Section label */
.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.58);
  margin: 0 0 20px;
}

/* Lists (included, for, formats) */
.sp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-list 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.70);
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid rgba(188,194,204,0.055);
  position: relative;
}
.sp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--electric-cobalt);
  opacity: 0.5;
}

/* Brings statement */
.sp-brings-text {
  font-family: var(--ff-d);
  font-style: italic;
  font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.15rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(244,247,251,0.62);
  margin: 0;
}

/* Process (numbered 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.70);
  padding: 14px 0 14px 48px;
  border-bottom: 1px solid rgba(188,194,204,0.055);
  position: relative;
}
.sp-process li::before {
  content: counter(sp-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: var(--ff-b);
  font-size: var(--sp-fs-label);
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--electric-cobalt);
  opacity: 0.65;
}

/* CTA */
.sp-cta {
  border-top: 1px solid var(--border-dark);
  padding: 64px 0;
  text-align: center;
}
.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 12px;
}
.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.5);
  margin: 0 0 32px;
}
.sp-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Prev / Next navigation */
.sp-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-dark);
  padding: 40px 0;
}
.sp-pn-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  padding: 20px 0;
  transition: opacity 0.2s;
}
.sp-pn-item:hover { opacity: 0.6; }
.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.48);
}
.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;
}

/* Responsive */
@media (max-width: 767px) {
  .sp-two-col { grid-template-columns: 1fr; gap: 0; }
  .sp-two-col > div:first-child {
    padding-bottom: 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--border-dark);
  }
  .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; }
}