/* Shared services page — extends marquee.css */

/* Hero network canvas — sits behind content like .mq-hero__network */
.sv-hero__network {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* Baseline stacking for headline lines — needed so the rotating-word
 * fallback case still renders one line per <span class="line">. */
.sv-hero__giant .line { display: block; }

/* Hero — uses .mq-hero scaffold but with services-specific layout */
.sv-hero {
  position: relative;
  background: var(--navy-800);
  color: #fff;
  min-height: 84vh;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: end;
  padding: 200px 64px 88px;
  overflow: hidden;
}
.sv-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 600px at 80% 30%, rgba(32,168,224,0.18), transparent 60%),
    radial-gradient(800px 500px at 10% 90%, rgba(240,88,40,0.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.sv-hero__vol {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: var(--fw-medium) 11px/1 var(--font-mono);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  align-self: center;
  justify-self: start;
  z-index: 2; position: relative;
}
.sv-hero__vol b { color: var(--sky-300); font-weight: 600; }

.sv-hero__inner { position: relative; z-index: 2; min-width: 0; }
.sv-hero__eyebrow {
  font: var(--fw-semibold) 11px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky-300);
  margin: 0 0 28px;
}
.sv-hero__giant {
  font: var(--fw-bold) clamp(72px, 11vw, 168px)/0.92 var(--font-display);
  letter-spacing: -0.04em;
  margin: 0 0 32px;
  text-wrap: balance;
  max-width: 1180px;
}
.sv-hero__giant em {
  font-style: normal;
  color: var(--sky-400);
  position: relative;
}
.sv-hero__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: flex-end;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 1280px;
}
.sv-hero__foot p {
  font: 400 20px/1.5 var(--font-sans);
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 540px;
}
.sv-hero__chips {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.sv-hero__chips a {
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 200ms ease, transform 200ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.sv-hero__chips a:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.sv-hero__chips a .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--c, var(--orange-500));
  box-shadow: 0 0 8px var(--c, var(--orange-500));
}

/* ── Service section ───────────────────────────────────────── */
.sv {
  padding: 120px 64px;
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-25);
  scroll-margin-top: 80px;
}
.sv--alt { background: var(--neutral-50); }
.sv__inner { max-width: 1440px; margin: 0 auto; }

.sv__head {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}
.sv__copy .ref {
  display: inline-flex; align-items: center; gap: 12px;
  font: var(--fw-semibold) 11px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c, var(--orange-500));
  margin: 0 0 28px;
}
.sv__copy .ref::before {
  content: "";
  width: 32px; height: 1px;
  background: currentColor;
}
.sv__copy h2 {
  font: var(--fw-bold) clamp(56px, 6.5vw, 104px)/0.95 var(--font-display);
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  color: var(--text-primary);
  text-wrap: balance;
}
.sv__copy h2 em { font-style: normal; color: var(--c, var(--orange-500)); }
.sv__copy .pitch {
  font: var(--fw-medium) 22px/1.4 var(--font-sans);
  color: var(--text-primary);
  margin: 0 0 20px;
  max-width: 600px;
}
.sv__copy .brief {
  font: 400 16px/1.7 var(--font-sans);
  color: var(--text-secondary);
  margin: 0 0 28px;
  max-width: 580px;
}
.sv__copy .stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  padding-top: 22px;
  border-top: 2px solid var(--c, var(--orange-500));
  max-width: 600px;
}
.sv__copy .stats > div b {
  display: block;
  font: var(--fw-bold) 28px/1 var(--font-mono);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.sv__copy .stats > div span {
  font: var(--fw-medium) 10px/1.3 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Visual card — distinctive per service via inner SVG */
.sv__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 20%, color-mix(in oklab, var(--c) 22%, transparent) 0%, transparent 70%),
    var(--cb, var(--orange-50));
  isolation: isolate;
  box-shadow:
    0 30px 60px -20px rgba(45, 56, 72, 0.25),
    0 12px 24px -12px rgba(45, 56, 72, 0.15);
}
.sv__visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c) 1px, transparent 1px),
    linear-gradient(90deg, var(--c) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.05;
  pointer-events: none;
}
.sv__visual .tag {
  position: absolute; top: 20px; left: 20px;
  font: var(--fw-semibold) 10px/1 var(--font-mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c, var(--orange-700));
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 2;
}
.sv__visual .tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.sv__visual .letter {
  position: absolute; bottom: 20px; right: 24px;
  font: var(--fw-bold) clamp(180px, 22vw, 280px)/0.85 var(--font-display);
  color: var(--c, var(--orange-500));
  letter-spacing: -0.06em;
  opacity: 0.18;
  z-index: 1;
}

/* Decorative SVG glyph centered in the card */
.sv__glyph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
}
.sv__glyph svg { width: 70%; height: 70%; color: var(--c, var(--orange-500)); }

/* Per-glyph animation */
.sv__glyph .float    { animation: sv-float    7s ease-in-out infinite; transform-origin: center; }
.sv__glyph .spin     { animation: sv-spin     22s linear infinite; transform-origin: center; }
.sv__glyph .pulse    { animation: sv-pulse    3.4s ease-in-out infinite; transform-origin: center; }
.sv__glyph .ripple   { animation: sv-ripple   3s ease-out infinite; transform-origin: center; }
.sv__glyph .shimmer  { animation: sv-shimmer  6s ease-in-out infinite; }
.sv__glyph .stream-a { animation: sv-stream   4.6s ease-in-out infinite; }
.sv__glyph .stream-b { animation: sv-stream   4.6s ease-in-out infinite reverse; }
.sv__glyph .blink    { animation: sv-blink    2.2s ease-in-out infinite; }

@keyframes sv-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sv-spin   { to { transform: rotate(360deg); } }
@keyframes sv-pulse  { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes sv-ripple { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes sv-shimmer{ 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes sv-stream { 0%,100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes sv-blink  { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Sub-services grid ─────────────────────────────────────────── */
.sv__sub-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 32px 0 20px;
  border-top: 2px solid var(--navy-600);
  margin-bottom: 24px;
}
.sv__sub-head h3 {
  font: var(--fw-bold) 24px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0;
}
.sv__sub-head h3 small {
  font: var(--fw-semibold) 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c, var(--orange-500));
  margin-left: 12px;
}
.sv__sub-head .count {
  font: var(--fw-medium) 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sv__sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--neutral-200);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  overflow: hidden;
}
.sv__sub {
  background: var(--neutral-25);
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: background 220ms ease;
}
.sv--alt .sv__sub { background: var(--neutral-50); }
.sv__sub:hover { background: #fff; }
.sv__sub::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--c, var(--orange-500));
  transition: width 360ms cubic-bezier(.16,.85,.3,1);
}
.sv__sub:hover::before { width: 100%; }
.sv__sub .num {
  font: var(--fw-semibold) 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--c, var(--orange-500));
  text-transform: uppercase;
}
.sv__sub h4 {
  font: var(--fw-semibold) 19px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.sv__sub p {
  font: 400 14px/1.55 var(--font-sans);
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}
.sv__sub .tag {
  font: var(--fw-medium) 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sv__sub .tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--c, var(--orange-500));
}

/* CTA section — pointer to homepage Get in touch */
.sv-cta {
  background: var(--navy-800);
  color: #fff;
  padding: 120px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sv-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(32,168,224,0.18), transparent 60%),
    radial-gradient(700px 400px at 80% 100%, rgba(240,88,40,0.12), transparent 60%);
  pointer-events: none;
}
.sv-cta__inner { position: relative; max-width: 920px; margin: 0 auto; }
.sv-cta h2 {
  font: var(--fw-bold) clamp(48px, 6vw, 88px)/0.98 var(--font-display);
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: #fff;
  text-wrap: balance;
}
.sv-cta h2 em { font-style: normal; color: var(--orange-400); }
.sv-cta p {
  font: 400 19px/1.55 var(--font-sans);
  color: rgba(255,255,255,0.78);
  margin: 0 0 36px;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.sv-cta a {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange-500); color: #fff;
  padding: 18px 28px; border-radius: 999px;
  font: var(--fw-semibold) 15px/1 var(--font-sans);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease, gap 200ms ease;
}
.sv-cta a:hover { background: var(--orange-600); transform: translateY(-2px); gap: 14px; }
.sv-cta__actions {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.sv-cta__secondary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85) !important;
}
.sv-cta__secondary:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.4);
}