/* ============================================================
   Vaultwave — Services.
   Header and footer inherit styles.css untouched.
   Between them, each pillar is built to behave like the thing it
   describes: strategy runs as a timeline, creative runs behind a
   viewfinder, media broadcasts, digital executes a pipeline.
   No pillar borrows another pillar's motion.
   ============================================================ */

/* ---------- shared small parts ---------- */

.micro-label {
  margin: 0 0 18px;
  color: var(--blue);
  font: 600 11px/1 "Manrope", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.micro-label.on-dark { color: var(--sky) }

/* Read-progress hairline. Width is set from JS. */
.scroll-rail {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.scroll-rail i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width .1s linear;
}

/* ---------- hero ---------- */

.svc-hero {
  position: relative;
  padding: 154px var(--pad) clamp(70px, 8vw, 120px);
  overflow: hidden;
  isolation: isolate;
}
/* Four streams converging. Canvas is a replaced element, so it needs
   explicit dimensions — `inset` alone leaves it at 300x150. */
.hero-field {
  position: absolute;
  z-index: -1;
  display: block;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: .85;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.svc-hero-inner { position: relative; max-width: var(--max); margin-inline: auto }

.svc-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--blue);
  font: 600 12px/1 "Manrope", Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.svc-eyebrow::before { content: ""; width: 40px; height: 2px; background: currentColor }

.svc-hero h1 {
  margin: 0;
  max-width: 16ch;
  font: 600 clamp(44px, 6.4vw, 92px)/.94 "Manrope", Arial, sans-serif;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.svc-hero h1 em { font-weight: 400; color: var(--blue) }
.svc-lead { margin: 26px 0 0; max-width: 58ch; color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65 }

/* ---------- pillar frame ---------- */

.pillar {
  position: relative;
  padding: clamp(72px, 8vw, 128px) var(--pad);
  scroll-margin-top: 84px;
  overflow: hidden;
}
.pillar > * { position: relative; max-width: var(--max); margin-inline: auto }

.pillar-no {
  display: block;
  margin: 0 0 16px;
  font: 800 13px "Manrope", Arial, sans-serif;
  color: var(--blue);
  letter-spacing: .18em;
}
.pillar h2 {
  margin: 0;
  font: 600 clamp(30px, 4vw, 56px)/1.02 "Manrope", Arial, sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 18ch;
}
.pillar-copy { margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; max-width: 62ch }

.pillar-head.on-dark .pillar-no { color: var(--sky) }
.pillar-head.on-dark h2 { color: #fff }
.pillar-head.on-dark .pillar-copy { color: #b9c8d8 }

/* ============================================================
   01 STRATEGY — a six-week track. The fill advances with scroll,
   and each week lights as the fill reaches it.
   ============================================================ */

/* No rule between the hero lead and the first pillar: the page should read
   as one continuous surface, not as two stacked panels. */
.pillar-strategy { border-top: 0 }

.weeks { margin-top: clamp(46px, 6vw, 82px) }

.weeks-scale {
  position: relative;
  height: 2px;
  margin-bottom: 22px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.weeks-scale i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--blue), var(--sky));
}

.weeks-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.week {
  --on: 0;
  position: relative;
  padding-top: 20px;
  color: var(--muted);
  transition: color .4s;
}
/* The tick that sits on the scale above each week. */
.week::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  transition: border-color .4s, transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
}
/* --line is a hairline border colour. On a 26-42px numeral it measured
   1.27:1 against the page — invisible until the scroll lights it blue. The
   not-yet-reached state should read as secondary, not as absent. */
.week b {
  display: block;
  font: 800 clamp(26px, 3.2vw, 42px)/1 "Manrope", Arial, sans-serif;
  letter-spacing: -.05em;
  color: #717f8e;
  transition: color .4s;
}
.week span { display: block; margin-top: 8px; font-size: clamp(12px, 1vw, 14px); letter-spacing: -.01em }

/* Hover only changes colour. Nothing moves under the pointer, so the
   target cannot slide out from under it mid-hover. */
.week:hover { color: var(--ink) }
.week:hover b { color: var(--blue) }
.week:hover::before { border-color: var(--blue); box-shadow: 0 0 0 6px #075cff14 }

.week.on { color: var(--ink) }
.week.on b { color: var(--blue) }
.week.on::before {
  border-color: var(--blue);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px #075cff1a;
}

.weeks-note {
  margin: clamp(34px, 4vw, 52px) 0 0;
  max-width: 74ch;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
}

.deliverables { margin-top: clamp(54px, 7vw, 96px) }
.deliverables-lede {
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  max-width: 60ch;
  font: 600 clamp(19px, 1.9vw, 26px)/1.4 "Manrope", Arial, sans-serif;
  letter-spacing: -.025em;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(14px, 1.15vw, 16px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s, transform .5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 55ms);
}
.checklist.in li { opacity: 1; transform: none }
.checklist .ui-icon {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  color: var(--blue);
  background: #075cff14;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset .5s ease;
  transition-delay: calc(var(--i) * 55ms + 180ms);
}
.checklist.in .ui-icon { stroke-dashoffset: 0 }

/* ============================================================
   02 CREATIVE — a studio. Real production footage behind a
   viewfinder, kit as camera-side callouts.
   ============================================================ */

.pillar-creative {
  background: #07101c;
  color: #e8eef6;
  padding-top: 0;
}

.studio {
  position: relative;
  min-height: clamp(420px, 52vh, 560px);
  display: flex;
  align-items: flex-end;
  /* Full-bleed inside a padded section. */
  max-width: none;
  margin-inline: calc(var(--pad) * -1);
  padding: clamp(80px, 10vw, 140px) var(--pad) clamp(44px, 5vw, 70px);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 74% 26%, #0d2745, transparent 66%),
    radial-gradient(60% 60% at 12% 84%, #10203a, transparent 70%),
    #07101c;
}
/* Film grain. An inline feTurbulence keeps this to one paint and no request. */
.grain {
  position: absolute;
  z-index: 2;
  inset: -50%;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: grain-shift 1.1s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0) }
  25%  { transform: translate(-3%, 2%) }
  50%  { transform: translate(2%, -3%) }
  75%  { transform: translate(-2%, -2%) }
  100% { transform: translate(0, 0) }
}

/* The reel runs full-bleed behind the stage. The file is portrait, so a
   landscape crop shows a band through the middle of the frame: that is the
   trade accepted here, because what this needs to deliver is movement behind
   the copy, not a viewable cut. */
.reel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(1.05) contrast(1.04);
}
/* Legibility layer. Light across the top so the footage stays visible, heavy
   at the bottom where the heading sits. */
.reel-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, #07101ca6 0%, #07101c66 30%, #07101cd9 72%, #07101cf7 100%),
    linear-gradient(90deg, #07101cc4 0%, #07101c4d 46%, transparent 72%);
}

/* The rack. Copy arrives soft and pulls sharp as the section is read. */
.rack {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  filter: blur(var(--blur, 12px));
  opacity: calc(.42 + var(--focus, 0) * .58);
  transition: filter .18s linear, opacity .18s linear;
  will-change: filter;
}

/* Viewfinder furniture. Sits over the footage, inside the gutters. */
.viewfinder { position: absolute; z-index: 3; inset: clamp(22px, 3vw, 40px) }
.vf { position: absolute; width: 26px; height: 26px; border: 2px solid #ffffff5c }
.vf.tl { top: 0; left: 0; border-right: 0; border-bottom: 0 }
.vf.tr { top: 0; right: 0; border-left: 0; border-bottom: 0 }
.vf.bl { bottom: 0; left: 0; border-right: 0; border-top: 0 }
.vf.br { bottom: 0; right: 0; border-left: 0; border-top: 0 }

.vf-rec, .vf-tc, .vf-focus {
  position: absolute;
  top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffffb8;
  font: 600 11px/1 "Manrope", Arial, sans-serif;
  letter-spacing: .18em;
}
.vf-rec { left: 44px }
.vf-tc { right: 44px; font-variant-numeric: tabular-nums }
.vf-focus { top: auto; bottom: 2px; left: 44px; color: #ffffff8a }
.vf-focus b { color: var(--sky); font-variant-numeric: tabular-nums }
.vf-rec i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
  animation: rec-blink 1.6s steps(1) infinite;
}
@keyframes rec-blink { 50% { opacity: .15 } }

/* Kit callouts. */
.rig {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(56px, 7vw, 90px);
  background: #ffffff12;
  border: 1px solid #ffffff12;
  border-radius: var(--radius);
  overflow: hidden;
}
/* Reveal by fade alone. These grids are `overflow: hidden` for their rounded
   corners, so a cell translated down by 14px hangs over that edge and has its
   bottom sliced off for as long as its stagger delay lasts. On a phone every
   cell is its own row, so every cell showed the slice. */
.rig article {
  padding: clamp(24px, 2.6vw, 34px);
  background: #07101c;
  opacity: 0;
  transition: opacity .55s, background .35s;
  transition-delay: calc(var(--i) * 65ms);
}
.rig.in article { opacity: 1 }
.rig article:hover { background: #0b1725 }
.rig b {
  display: block;
  margin-bottom: 10px;
  font: 600 17px "Manrope", Arial, sans-serif;
  letter-spacing: -.015em;
  color: #fff;
}
.rig span { display: block; color: #9db0c6; font-size: 14px; line-height: 1.65 }

/* Typical shoots, running as a strip. */
.shoots { margin-top: clamp(56px, 7vw, 90px) }
.shoots .micro-label { color: var(--sky) }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* The strip is one set of items plus an exact clone, shifted by half its
   width. Flex `gap` breaks that: it sits between items but not after the
   last one, so half the width is short by one gap and the loop jumps on
   every cycle. A trailing margin on every item makes the two halves
   genuinely identical. */
.marquee-row {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-row { animation-play-state: paused }
.marquee-row span {
  flex: none;
  margin-right: 12px;
  padding: 12px 22px;
  border: 1px solid #ffffff1f;
  border-radius: 100px;
  font-size: 15px;
  white-space: nowrap;
  color: #cbd8e6;
}
@keyframes marquee { to { transform: translateX(-50%) } }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 90px);
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid #ffffff17;
}
.split .micro-label { color: var(--sky) }
.split-col p:not(.micro-label) { margin: 0; color: #9db0c6; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.75 }

/* Turnaround. Bars grow to their share of the longest window. */
.turnaround { margin-top: clamp(56px, 7vw, 90px) }
.turnaround .micro-label { color: var(--sky) }
.bar {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff0a;
}
.bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #075cff59, #075cff14);
  transition: width 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .1s;
}
.turnaround.in .bar::before { width: var(--pct) }
.bar span, .bar b { position: relative }
.bar span { font-size: clamp(14px, 1.15vw, 16px); color: #cbd8e6 }
.bar b { font: 600 15px "Manrope", Arial, sans-serif; color: #fff; white-space: nowrap }
.turnaround-note { margin: 22px 0 0; color: #9db0c6; font-size: 14px; line-height: 1.7; max-width: 68ch }

/* ============================================================
   03 MEDIA — a live signal. Rings propagate; channels are tabs.
   ============================================================ */

.pillar-media { border-top: 1px solid var(--line) }

.broadcast {
  position: relative;
  margin-top: clamp(46px, 6vw, 82px);
  padding: clamp(46px, 6vw, 78px) clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow: hidden;
  isolation: isolate;
}
/* Expanding rings from the left edge — a transmitter, not a target. */
.signal { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.signal i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border: 1px solid #075cff2e;
  border-radius: 50%;
  opacity: 0;
  animation: propagate 5.6s ease-out infinite;
}
.signal i:nth-child(2) { animation-delay: 1.4s }
.signal i:nth-child(3) { animation-delay: 2.8s }
.signal i:nth-child(4) { animation-delay: 4.2s }
@keyframes propagate {
  0%   { transform: scale(.25); opacity: 0 }
  12%  { opacity: .9 }
  100% { transform: scale(6.5); opacity: 0 }
}

.channels { display: flex; flex-wrap: wrap; gap: 10px }
.channel {
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface-glass);
  color: var(--muted);
  font: 500 15px "Manrope", Arial, sans-serif;
  cursor: pointer;
  transition: color .28s, border-color .28s, background .28s, transform .28s cubic-bezier(.16, 1, .3, 1);
}
.channel:hover { color: var(--ink); border-color: var(--blue) }
.channel.is-on {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #075cff33;
}
.channel:focus-visible { outline: 3px solid #075cff55; outline-offset: 3px }

.channel-detail {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 62ch;
  min-height: 3.4em;
  font: 500 clamp(17px, 1.7vw, 23px)/1.5 "Manrope", Arial, sans-serif;
  letter-spacing: -.02em;
  animation: detail-in .4s cubic-bezier(.16, 1, .3, 1);
}
@keyframes detail-in { from { opacity: 0; transform: translateY(8px) } }

/* The eight-step plan, drawn as a connected run. */
.process { margin-top: clamp(56px, 7vw, 96px) }
.steps {
  counter-reset: s;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.steps li {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px) clamp(26px, 2.8vw, 34px);
  background: var(--surface);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  opacity: 0;
  transition: opacity .5s;
  transition-delay: calc(var(--i) * 60ms);
}
.steps.in li { opacity: 1 }
.steps li::before {
  counter-increment: s;
  content: "0" counter(s);
  display: block;
  margin-bottom: 14px;
  font: 800 12px "Manrope", Arial, sans-serif;
  letter-spacing: .14em;
  color: var(--blue);
}

.pr-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(38px, 4.4vw, 58px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.pr-copy h3 {
  margin: 0 0 16px;
  font: 600 clamp(21px, 2.3vw, 31px)/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -.035em;
  max-width: 20ch;
}
.pr-copy p:not(.micro-label) { margin: 0; color: var(--muted); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.75 }
.pr-modes { display: grid; gap: 10px }
.pr-modes article {
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  transition: border-color .3s;
}
.pr-modes article:hover { border-color: var(--blue) }
.pr-modes b { display: block; margin-bottom: 8px; font: 600 15px "Manrope", Arial, sans-serif }
.pr-modes p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65 }

.report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 96px);
}
.plain { margin: 0; padding: 0; list-style: none }
.plain li {
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(14px, 1.15vw, 16px);
  position: relative;
}
.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 1px;
  background: var(--blue);
}

/* The honesty note is deliberately styled as a stated limit, not a warning. */
.disclosure {
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 4px var(--radius) var(--radius) 4px;
  background: var(--surface-soft);
}
.disclosure p:not(.micro-label) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75 }

/* ============================================================
   04 DIGITAL — a system. Stack named, engagement as a pipeline
   that executes, automation as work leaving a manual queue.
   ============================================================ */

.pillar-digital {
  background: #050e19;
  color: #e8eef6;
  isolation: isolate;
}
.grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: none;
  margin: 0;
  background-image:
    linear-gradient(#ffffff0a 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 62% at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 62% at 50% 0%, #000 18%, transparent 76%);
}

/* ---------- the stack, run as a resolve ----------
   Sits in the space beside the heading rather than as a full-width strip.
   Sized so the whole run is visible without scrolling at any width. */

.digital-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}

.term {
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  background: #030a13;
  box-shadow: 0 26px 60px #00000059;
  overflow: hidden;
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-bottom: 1px solid #ffffff14;
  background: #08131f;
}
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff1f }
.term-bar i:first-child { background: #ff5f57 }
.term-bar i:nth-child(2) { background: #febc2e }
.term-bar i:nth-child(3) { background: #28c840 }
.term-bar span { margin-left: 8px; color: #6d8299; font-size: 11px; letter-spacing: .04em }

.term-body { padding: 16px 16px 14px }

.term-cmd { margin: 0 0 12px; color: #e8eef6; font-size: 12.5px; line-height: 1.4 }
.term-cmd b { color: var(--sky); font-weight: 400 }
.caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--sky);
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0 } }
/* The caret retires once the whole run has printed. */
.term.done .caret { animation: none; opacity: .25 }

.term-out { margin: 0; padding: 0; list-style: none }
.term-out li {
  display: grid;
  grid-template-columns: 13px 68px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11.5px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .28s, transform .28s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 165ms + 780ms);
}
.term.run .term-out li { opacity: 1; transform: none }
.term-out .arrow { color: var(--sky) }
.term-out .key { color: #6d8299 }
.term-out .pkgs { display: flex; flex-wrap: wrap; gap: 5px }

/* 3px of padding gave these a 23px box — a hair under the 24px minimum
   target size. */
.tok {
  padding: 5px 9px;
  border: 1px solid #ffffff1a;
  border-radius: 5px;
  background: #ffffff08;
  color: #cbd8e6;
  font: inherit;
  line-height: 1.35;
  cursor: help;
  /* Colour only. Nothing shifts position under the pointer. */
  transition: color .22s, border-color .22s, background .22s;
}
.tok:hover, .tok:focus-visible { color: #fff; border-color: var(--sky); background: #4da3ff1f }
.tok:focus-visible { outline: 2px solid #4da3ff8c; outline-offset: 2px }

.term-done { margin-top: 6px; padding-top: 10px; border-top: 1px solid #ffffff12 }
.term-done .arrow { color: #46d69a }
.term-done em { color: #fff; font-style: normal; font-size: 11.5px }

/* The live prompt: something is always being written here. */
.term-live {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #ffffff0d;
  color: #cbd8e6;
  font-size: 11.5px;
  line-height: 1.5;
  min-height: 2.3em;
}
.term-live b { color: var(--sky); font-weight: 400 }
/* Once the resolve has printed, the opening line hands the caret over. */
.term.done .caret-cmd { display: none }

.term-note {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid #ffffff0d;
  min-height: 3.1em;
  font-size: 11.5px;
  line-height: 1.5;
}
.term-note .hash { color: #6b899f }   /* #3d5468 was 2.52:1 on the terminal ground */
.term-note [data-note-text] { color: #9db0c6 }

/* The pipeline. A rail runs down the left; each stage lights as the
   section scrolls, so the engagement visibly executes. */
.pipeline { margin-top: clamp(56px, 7vw, 96px) }
.pipe {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(26px, 3vw, 40px);
  list-style: none;
  counter-reset: p;
}
.pipe::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: #ffffff1a;
}
.pipe li {
  position: relative;
  padding: 13px 0;
  color: #6d8299;
  font-size: clamp(14px, 1.15vw, 16px);
  transition: color .45s;
}
.pipe li::before {
  content: "";
  position: absolute;
  left: calc(clamp(26px, 3vw, 40px) * -1);
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #23384e;
  transition: background .45s, box-shadow .45s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pipe li.on { color: #e8eef6 }
.pipe li.on::before {
  background: var(--sky);
  transform: scale(1.3);
  box-shadow: 0 0 0 5px #4da3ff1f;
}

.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(56px, 7vw, 96px);
  background: #ffffff12;
  border: 1px solid #ffffff12;
  border-radius: var(--radius);
  overflow: hidden;
}
.cards-4 article { padding: clamp(24px, 2.6vw, 32px); background: #050e19; transition: background .35s }
.cards-4 article:hover { background: #0a1724 }
.cards-4 b { display: block; margin-bottom: 12px; font: 600 16px "Manrope", Arial, sans-serif; color: #fff }
.cards-4 p { margin: 0; color: #9db0c6; font-size: 14px; line-height: 1.7 }

/* ---------- the automation panel ----------
   Not a gradient. The panel is a switch with two states, and its colour is
   the argument: Manual is dark and heavy, Automated lifts into the page
   surface. Everything inside reads from the same four custom properties, so
   flipping one class re-themes the whole block in a single transition, and
   the light state is what breaks up the dark run. */

.automation {
  --panel: #0a1522;
  --panel-line: #ffffff14;
  --panel-ink: #e8eef6;
  --panel-muted: #93a7bd;
  --panel-row: #ffffff08;
  --panel-row-line: #ffffff12;
  --panel-dot: #2b435c;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .92fr);
  gap: clamp(32px, 4.5vw, 70px);
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(34px, 4vw, 56px);
  border: 1px solid var(--panel-line);
  border-radius: clamp(20px, 2.4vw, 32px);
  background: var(--panel);
  align-items: start;
  transition: background .7s cubic-bezier(.4, 0, .2, 1), border-color .7s;
}
.automation.is-auto {
  --panel: var(--surface);
  --panel-line: var(--line);
  --panel-ink: var(--ink);
  --panel-muted: var(--muted);
  --panel-row: var(--surface-soft);
  --panel-row-line: var(--line);
  --panel-dot: var(--line);
  box-shadow: 0 40px 90px #0000003d;
}
/* Dark mode has no white to travel to, so the lift is a lighter navy. */
html[data-theme="dark"] .automation.is-auto { --panel: #0d1c2e; --panel-row: #13273d }

/* The panel opens in its Manual state, which is dark even under the light
   theme, so --blue lands at 3.48 on it. The label follows the panel's own
   state rather than the page theme: --sky whenever the ground beneath it is
   dark, --blue only once the panel has lifted to the light surface. */
.automation .micro-label { color: var(--sky); transition: color .7s }
.automation.is-auto .micro-label { color: var(--blue) }
html[data-theme="dark"] .automation.is-auto .micro-label { color: var(--sky) }
.automation h3 {
  margin: 0 0 16px;
  font: 600 clamp(22px, 2.4vw, 32px)/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -.035em;
  color: var(--panel-ink);
  transition: color .7s;
}
.automation-copy p:not(.micro-label):not(.mode-hint) {
  margin: 0;
  color: var(--panel-muted);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  transition: color .7s;
}

/* ---------- the switch ---------- */

.mode { display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 3vw, 38px) }
.mode-label {
  font: 600 12px/1 "Manrope", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--panel-muted);
  transition: color .5s;
}
.automation:not(.is-auto) [data-side="off"],
.automation.is-auto [data-side="on"] { color: var(--panel-ink) }

.mode-switch {
  position: relative;
  flex: none;
  width: 62px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-radius: 100px;
  background: var(--panel-row);
  cursor: pointer;
  transition: background .5s, border-color .5s;
}
.mode-switch b {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel-dot);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .5s;
}
.automation.is-auto .mode-switch { background: #075cff1f; border-color: #075cff5c }
.automation.is-auto .mode-switch b { transform: translateX(30px); background: var(--blue) }
.mode-switch:focus-visible { outline: 3px solid #075cff66; outline-offset: 3px }

.mode-hint {
  margin: 14px 0 0;
  color: var(--panel-muted);
  font-size: 13.5px;
  line-height: 1.6;
  transition: color .7s;
}

/* ---------- the queue ---------- */

.queue { margin: 0; padding: 0; list-style: none }
.queue li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 6px;
  border: 1px solid var(--panel-row-line);
  border-radius: 10px;
  background: var(--panel-row);
  color: var(--panel-muted);
  font-size: 14px;
  transition: color .45s, border-color .45s, background .45s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.queue li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--panel-dot);
  transition: background .45s, box-shadow .45s;
}
/* The head of the run, moving down the list. */
.queue li.firing {
  color: var(--panel-ink);
  border-color: #075cff5c;
  background: #075cff14;
  transform: translateX(6px);
}
.queue li.firing::before { background: var(--blue); box-shadow: 0 0 0 4px #075cff26 }
/* Handed over: the dot becomes a tick. */
.queue li.done { color: var(--panel-ink); border-color: #075cff3d }
.queue li.done::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- closing band ---------- */

.svc-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 8vw, 108px) var(--pad);
  background: var(--navy);
  color: #fff;
  border-top: 1px solid #ffffff14;
}
.svc-cta::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -240px;
  top: -300px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  box-shadow: 0 0 0 70px #ffffff08;
  pointer-events: none;
}
.svc-cta-inner {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
}
.svc-cta h2 { margin: 0; font: 600 clamp(28px, 3.2vw, 44px)/1.08 "Manrope", Arial, sans-serif; letter-spacing: -.04em }
.svc-cta h2 em { font-weight: 400; color: var(--sky) }
.svc-cta p { margin: 12px 0 0; color: #b9c8d8; max-width: 46ch; font-size: 16px }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .rig, .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .automation, .pr-block, .digital-top { grid-template-columns: 1fr }
  .automation { padding: clamp(24px, 5vw, 34px) }
  .report-row { grid-template-columns: 1fr }
}

@media (max-width: 900px) {
  .checklist { grid-template-columns: 1fr }
  .split { grid-template-columns: 1fr }
  .svc-cta-inner { grid-template-columns: 1fr }
  /* Six columns of week labels stop being legible well before this. */
  .weeks-track { grid-template-columns: repeat(3, 1fr); gap: 22px 10px }
  .weeks-scale { display: none }
  .week { padding-top: 0 }
  .week::before { display: none }
}

@media (max-width: 640px) {
  .svc-hero { padding-top: 116px }
  /* Narrow screens compress the streams into the headline, so the field
     retreats to the upper band and drops back. */
  .hero-field {
    opacity: .4;
    height: 62%;
    mask-image: linear-gradient(180deg, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  }
  .rig, .cards-4, .steps { grid-template-columns: 1fr }
  .weeks-track { grid-template-columns: repeat(2, 1fr) }
  .studio { min-height: 380px }
  /* The copy fills far more of the stage on a phone, so the footage sits
     further back to keep the paragraph readable. */
  .reel-wash {
    background:
      linear-gradient(180deg, #07101cb8 0%, #07101c85 22%, #07101ce8 58%, #07101cfa 100%),
      linear-gradient(90deg, #07101cd1 0%, #07101c8f 60%, #07101c52 100%);
  }
  /* Smaller again on a phone, so the whole run is on screen at once. */
  .term-body { padding: 13px 13px 12px }
  .term-cmd { font-size: 11.5px; margin-bottom: 10px }
  .term-out li { grid-template-columns: 11px 58px minmax(0, 1fr); gap: 6px; padding: 3px 0; font-size: 10.5px }
  /* Was 2px, which shrank these to a 20px target on exactly the devices that
     need a bigger one. */
  .tok { padding: 5px 8px; border-radius: 4px }
  .term-done em, .term-note { font-size: 10.5px }
  .term-note { min-height: 3.4em }
  .vf-rec { left: 0 }
  .vf-tc { right: 0 }
  .viewfinder { inset: 16px }
  .bar { flex-direction: column; align-items: flex-start; gap: 6px }
  .marquee-row span { margin-right: 10px; padding: 10px 16px; font-size: 14px }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-row, .grain, .caret { animation: none }
  .term-out li { transition: none; opacity: 1; transform: none }
  .tok, .pr-modes article, .automation, .queue li, .mode-switch b { transition: none }
  .rack { filter: none; opacity: 1 }
  .signal i { animation: none; opacity: 0 }
  .vf-rec i { animation: none }
  .checklist li, .rig article, .steps li,
  .bar::before, .queue li, .pipe li, .pipe li::before,
  .week, .week b, .week::before, .channel {
    transition: none;
  }
  .checklist .ui-icon { stroke-dashoffset: 0; transition: none }
  .channel-detail { animation: none }
}

/* ---------- dark-mode accent ----------
   --blue (#075cff) is not redefined for dark. On the light-themed sections,
   which become dark grounds under the dark theme, every small accent using it
   sat at 3.70 — under the 4.5 floor for text that size. The .on-dark variants
   already used --sky for exactly this reason; these are the ones that were
   never given the same treatment because their sections are light by default.
   Large display type is left alone: it clears the 3:1 large-text threshold. */
html[data-theme="dark"] .svc-eyebrow,
html[data-theme="dark"] .pillar-no,
html[data-theme="dark"] .micro-label,
html[data-theme="dark"] .steps li::before,
html[data-theme="dark"] .plain li::before { color: var(--sky) }
html[data-theme="dark"] .plain li::before { background: var(--sky) }
html[data-theme="dark"] .svc-eyebrow::before { background: var(--sky) }