/*
Theme Name: GearUp Code
Theme URI: https://gearupcode.com
Description: Custom theme for GearUp Code — software & IT services
Version: 1.0
Author: GearUp Code
*/

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --orange:       #FF5200;
  --orange-lt:    #FF7A3D;
  /* Full-strength --orange on a white card fails contrast for small text
     (the testimonial white-island cards). Only use this where orange is
     text someone has to read on a light surface, never on black — on
     black the full-strength orange already clears contrast easily. */
  --orange-deep:  #B33600;
  /* Same problem, opposite cause: --green is bright/light, so on white it
     nearly disappears rather than failing contrast the other direction.
     Deepened for on-white green text (the Fit diff's "+" column); the
     bright --green stays reserved for on-black status dots/checkmarks. */
  --green-deep:   #1C8F5A;
  --orange-dim:   rgba(255, 82, 0, 0.14);
  --orange-glow:  rgba(255, 82, 0, 0.22);

  --black:        #080808;
  --dark:         #0F0F0F;
  --dark-2:       #161616;
  --dark-3:       #1E1E1E;
  /* Veil alpha is the atmosphere dial: veil color == canvas color, so opacity
     doesn't change the base tone — it only controls how much of the fixed
     glow/dot-grid layers (z-index -1) bleeds through into sections. */
  --black-veil:   rgba(8, 8, 8, 0.80);
  --dark-veil:    rgba(15, 15, 15, 0.80);
  --white:        #FFFFFF;
  --white-80:     rgba(255, 255, 255, 0.80);
  /* RESTING BODY COPY LIVES HERE (~9.6:1 on this canvas).
     --white-55 was set as the body floor in the 2026-08-02 readability pass
     because it clears WCAG AA (6.2:1 vs the 4.5:1 minimum). It does clear it,
     and it still read as dim — AA is a legal floor, not a comfort target, and
     it was derived from dark-on-light research. Light text on a near-black
     canvas halates: thin strokes bloom and appear lighter and softer than the
     same measured ratio does in the other direction, so small 400-weight body
     text needs materially more contrast than the number suggests.
     --white-55 is now the SECONDARY tier (labels, meta, captions). */
  --white-70:     rgba(255, 255, 255, 0.70);
  --white-55:     rgba(255, 255, 255, 0.55);
  --white-30:     rgba(255, 255, 255, 0.30);
  --white-12:     rgba(255, 255, 255, 0.12);
  --white-07:     rgba(255, 255, 255, 0.07);
  --white-04:     rgba(255, 255, 255, 0.04);

  --green:        #3DD68C;
  --blue:         #4F9EFF;
  --purple:       #B07EFF;
  /* Hero-only "AI shades" — a punchier, more saturated pair than the sitewide
     --blue/--purple (which stay as-is; they're reused elsewhere for meanings
     this shouldn't disturb). Reserved for the hero's ambient glow specifically. */
  --electric-blue:   #00C2FF;
  --electric-purple: #9D4EFF;

  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Site-wide dot-grid texture — the same faint engineering texture Services and
   AI Advantage already use, extended everywhere so it's one consistent surface
   instead of appearing in only two sections. Fixed, whisper-quiet, always on
   (not scroll-gated, unlike the local ones) — it's structure, not a reveal. */
.site-dotgrid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Cursor light — a brighter copy of the dot-grid, revealed only in a soft
   radius around the pointer. The environment responds to the visitor; that's
   the "AI-enabled" signal, delivered as behavior instead of decoration.
   JS drives --cx/--cy; hidden entirely on touch devices (no pointer). */
.site-dotgrid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(79, 158, 255, 0.22) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 300px at var(--cx, 50%) var(--cy, 50%), #000 0%, transparent 100%);
          mask-image: radial-gradient(circle 300px at var(--cx, 50%) var(--cy, 50%), #000 0%, transparent 100%);
  transition: opacity 0.4s ease;
}
body.has-cursor-light .site-dotgrid::after { opacity: 1; }

/* Site-wide ambient AI atmosphere — the same blue/purple corner-glow technique
   used in the hero, held at near-invisible opacity so it's a continuous undertone
   the whole scroll instead of appearing only in the hero and AI Advantage. Fixed
   to the viewport, sits behind every section (negative z-index); each section's
   near-opaque background (see --black-veil / --dark-veil) lets a hint of it bleed
   through. AI Advantage's own .ai-glow elements amplify this same light locally. */
.site-ambient-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.site-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  mix-blend-mode: screen;
  opacity: 0.13;
}
.site-glow--blue {
  top: -12%;
  left: -10%;
  width: 56vw;
  height: 56vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(ellipse, var(--blue) 0%, var(--blue) 35%, transparent 72%);
  animation: siteGlowDrift1 44s ease-in-out infinite;
}
.site-glow--purple {
  bottom: -14%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(ellipse, var(--purple) 0%, var(--purple) 35%, transparent 72%);
  animation: siteGlowDrift2 52s ease-in-out infinite;
}
/* Mid glow — dimmer, keeps the middle of the viewport from reading as dead
   void between the two corner lights */
.site-glow--mid {
  top: 38%;
  left: 58%;
  width: 44vw;
  height: 44vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(ellipse, var(--blue) 0%, var(--purple) 45%, transparent 72%);
  opacity: 0.07;
  animation: siteGlowDrift3 60s ease-in-out infinite;
}

/* Slow wander — static light is a backdrop, moving light is an environment */
@keyframes siteGlowDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1);          opacity: 0.11; }
  33%      { transform: translate(6vw, 4vh) scale(1.08);   opacity: 0.16; }
  66%      { transform: translate(-2vw, 7vh) scale(0.96);  opacity: 0.12; }
}
@keyframes siteGlowDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1);           opacity: 0.12; }
  40%      { transform: translate(-5vw, -5vh) scale(1.1);   opacity: 0.16; }
  75%      { transform: translate(2vw, -8vh) scale(0.95);   opacity: 0.10; }
}
@keyframes siteGlowDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1);          opacity: 0.06; }
  50%      { transform: translate(-8vw, -10vh) scale(1.15); opacity: 0.09; }
}
@media (prefers-reduced-motion: reduce) {
  .site-glow { animation: none; }
}

/* ─── NAV ────────────────────────────────────────────────── */
/* Three-column grid with equal 1fr flanks so the link group centres on the
   viewport. Under the previous flex/space-between it centred in the gap
   between logo (83px) and the right-hand controls (206px), landing 61px —
   half that width difference — left of true centre. */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 60px;
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.site-nav.scrolled {
  /* Fully opaque, not rgba(8,8,8,0.94) — 6% see-through is invisible against
     most page content but a bold white heading sitting directly behind the
     fixed nav (e.g. /services' "Ten practices...") bleeds through as a
     faint ghost. Nothing should ever show through the nav once scrolled. */
  background: var(--black);
  border-bottom-color: var(--white-12);
}
.nav-logo {
  font-family: var(--font-head);
  font-size: 2.625rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0,0,0,0.60);
  display: inline-flex;
  align-items: center;
}
.logo-caret {
  color: var(--white);
  font-size: 1.05em;
  line-height: 1;
}
.logo-cursor {
  display: inline-block;
  width: 2.5px;
  height: 0.72em;
  background: var(--orange);
  margin-left: 3px;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255,82,0,0.65);
  animation: logoBlink 1.1s step-end infinite;
  flex-shrink: 0;
}
@keyframes logoBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.nav-logo  { justify-self: start; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; justify-self: center; }
.nav-links a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
  transition: color 0.2s, opacity 0.2s;
  text-shadow: 0 2px 12px rgba(0,0,0,0.70);
}
.nav-links a:hover { opacity: 0.75; }
.nav-cta {
  background: var(--orange) !important;
  color: var(--white) !important;
  padding: 10px 22px !important;
  border-radius: 5px;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
.nav-cta:hover {
  background: var(--orange-lt) !important;
  box-shadow: 0 0 24px var(--orange-glow) !important;
}

/* ─── NAV RIGHT CLUSTER (⌘K + Contact + burger) ──────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

/* ─── COMMAND PALETTE TRIGGER (nav) ──────────────────────── */
.nav-cmdk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--white-12);
  border-radius: 7px;
  color: var(--white-55);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-cmdk:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}
.nav-cmdk-kbd {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ─── COMMAND PALETTE ────────────────────────────────────── */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18vh 20px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
body.cmdk-open .cmdk-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.cmdk {
  width: 100%;
  max-width: 580px;
  background: var(--dark-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.6), 0 0 80px rgba(79, 158, 255, 0.06);
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
body.cmdk-open .cmdk { transform: translateY(0) scale(1); }

/* Input row */
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--white-07);
}
.cmdk-prompt {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--orange);
}
.cmdk-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  caret-color: var(--orange);
}
.cmdk-input::placeholder { color: var(--white-30); }
.cmdk-esc {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-30);
  border: 1px solid var(--white-12);
  border-radius: 5px;
  padding: 3px 7px;
}

/* Results list */
.cmdk-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 10px;
}
.cmdk-group-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-30);
  padding: 10px 12px 8px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white-80);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cmdk-item.is-selected,
.cmdk-item:hover {
  background: rgba(255, 82, 0, 0.10);
  color: var(--white);
}
.cmdk-item-icon {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--white-30);
  flex-shrink: 0;
  transition: color 0.12s, transform 0.12s;
}
.cmdk-item.is-selected .cmdk-item-icon,
.cmdk-item:hover .cmdk-item-icon {
  color: var(--orange);
  transform: translateX(2px);
}
.cmdk-item-hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--white-30);
  flex-shrink: 0;
}
.cmdk-item--action { color: var(--white); }
.cmdk-item--action .cmdk-item-icon { color: var(--orange); opacity: 0.7; }

.cmdk-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--white-30);
}

/* Footer hints */
.cmdk-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  border-top: 1px solid var(--white-07);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--white-30);
}
.cmdk-foot kbd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  border: 1px solid var(--white-12);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 5px;
  color: var(--white-55);
}

/* ─── HAMBURGER BUTTON ───────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
  position: relative;
}
.burger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
              opacity   0.2s ease,
              width     0.2s ease;
}

/* X state */
.nav-open .burger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .burger-line:nth-child(2) { opacity: 0; width: 0; }
.nav-open .burger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── OVERLAY ─────────────────────────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8, 8, 8, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
}

.nav-ol-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.nav-ol-link {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 700;
  color: var(--white-30);
  text-decoration: none;
  letter-spacing: -0.03em;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(18px);
  transition: color 0.2s ease,
              opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-ol-link:hover { color: var(--white); }
.nav-ol-cta { color: var(--orange) !important; }
.nav-ol-cta:hover { opacity: 0.70 !important; }

/* Stagger links in */
.nav-open .nav-ol-list li:nth-child(1) .nav-ol-link { opacity: 1; transform: none; transition-delay: 0.08s; }
.nav-open .nav-ol-list li:nth-child(2) .nav-ol-link { opacity: 1; transform: none; transition-delay: 0.13s; }
.nav-open .nav-ol-list li:nth-child(3) .nav-ol-link { opacity: 1; transform: none; transition-delay: 0.18s; }
.nav-open .nav-ol-list li:nth-child(4) .nav-ol-link { opacity: 1; transform: none; transition-delay: 0.23s; }
.nav-open .nav-ol-list li:nth-child(5) .nav-ol-link { opacity: 1; transform: none; transition-delay: 0.28s; }
.nav-open .nav-ol-list li:nth-child(6) .nav-ol-link { opacity: 1; transform: none; transition-delay: 0.33s; }

/* Show burger, hide desktop links on mobile */
@media (max-width: 960px) {
  .site-nav { padding: 0 20px; grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-cmdk { display: none; }
  .nav-burger { display: flex; }
  .nav-right { gap: 10px; }
  .nav-right .nav-cta { padding: 8px 16px !important; font-size: 0.875rem !important; }
}

/* ─── HERO SHELL ──────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 80px 100px;
  overflow: hidden;
  background: var(--black);
  text-align: center;
}

/* ─── HERO BACKGROUND ─────────────────────────────────────── */
.hero { background: #080808; }

/* Full-cover background video */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}

/* Slow, continuous zoom — "moving light = environment, static = backdrop"
   applied to the video itself: a barely-perceptible drift so the very first
   frame a visitor sees feels alive rather than a frozen loop. */
.hero-video {
  animation: heroVideoZoom 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroVideoZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; }
}

/* Dark overlay — keeps text readable over the video */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.65) 0%,
    rgba(8, 8, 8, 0.60) 50%,
    rgba(8, 8, 8, 0.80) 100%
  );
  pointer-events: none;
}

/* Ambient AI-atmosphere glow — sits above the video overlay, behind the
   copy. Purple/blue read as "synthetic/AI" atmosphere, distinct from the
   orange brand glow used everywhere else; kept low-opacity so it never
   competes with text contrast or the orange CTA/emphasis color. */
.hero-ai-glow {
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  animation: heroGlowIn 1.8s ease-out 0.15s forwards;
}
.hero-ai-glow--1 {
  top: -22%;
  left: -12%;
  width: 34vw;
  height: 34vw;
  max-width: 460px;
  max-height: 460px;
  background: radial-gradient(ellipse, var(--electric-blue) 0%, var(--electric-blue) 35%, transparent 72%);
}
.hero-ai-glow--2 {
  bottom: -24%;
  right: -10%;
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  background: radial-gradient(ellipse, var(--electric-purple) 0%, var(--electric-purple) 35%, transparent 72%);
}
@keyframes heroGlowIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 0.7; transform: scale(1); }
}
/* The looping heroGlowBreathe pulse was removed from the hero glows by
   request: the blue/purple pair now fades in once and holds constant. Only
   `heroGlowIn` remains on .hero-ai-glow above, and it ends `forwards` at
   opacity 0.7 / scale 1, so the resting state is steady.
   NOTE: the heroGlowBreathe keyframe below is still used by the AI Advantage
   section's own glows (.ai-glow--1/--2) — do not delete it. */
@keyframes heroGlowBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.1);  opacity: 0.88; }
}

/* ─── HERO CENTRE ─────────────────────────────────────────── */
.hero-center {
  position: relative;
  z-index: 20;
  max-width: 860px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-center::before {
  content: '';
  position: absolute;
  inset: -140px -200px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.28) 55%, transparent 78%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* Headline */
.hero-headline {
  font-family: var(--font-head);
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 24px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.80), 0 4px 48px rgba(0,0,0,0.50);
  /* Wider than .hero-center's 860px cap so line 1 fits unbroken;
     flex centering keeps it aligned with the rest of the hero */
  width: min(96vw, 1200px);
}
/* Two deliberate lines; block spans survive SplitType's word splitting.
   !important overrides the inline style="display:inline-block" that
   SplitType writes onto every element in its target subtree (not just
   the leaf word spans) — without it the two lines collapse onto one
   row when they fit, and wrap/overflow unpredictably when they don't. */
.hh-line { display: block !important; text-align: center; }
.hero-headline em {
  font-style: normal;
  color: var(--orange);
  text-shadow: 0 0 30px rgba(255,82,0,0.45), 0 2px 20px rgba(0,0,0,0.80);
}

.hero-sub {
  font-size: 1.0625rem;
  color: var(--white-80);
  max-width: 720px;
  margin-bottom: 48px;
  line-height: 1.85;
  font-weight: 400;
}

.hero-diff {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--orange);
  opacity: 0.90;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.hero-diff::before,
.hero-diff::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--orange);
  opacity: 0.4;
}

/* Prompt → Shipped bar — the pitch demonstrated: a real client ask types
   itself out, answered by the real shipped project. Glassy over the video. */
.hero-prompt {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: left;
  background: rgba(8, 8, 8, 0.55);
  border: 1px solid var(--white-12);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
}
.hero-prompt-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--white-80);
  min-height: 1.5em;
}
.hero-prompt-chevron {
  color: var(--orange);
  font-weight: 600;
  flex-shrink: 0;
}
.hero-prompt-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--orange);
  border-radius: 1px;
  margin-left: 2px;
  transform: translateY(2px);
  animation: logoBlink 1.1s step-end infinite;
}
.hero-prompt-result {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--white-70);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--white-07);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-prompt.is-answered .hero-prompt-result {
  opacity: 1;
  transform: translateY(0);
}
.hero-prompt-check {
  color: var(--green);
  font-weight: 600;
}

.hero-cta-area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 10px 24px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white-80);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.trust-dot {
  width: 5px; height: 5px;
  background: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,82,0,0.6);
}
.trust-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.18);
  margin: 0 16px;
  flex-shrink: 0;
}

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 5px;
  letter-spacing: 0.005em;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-primary:hover {
  background: var(--orange-lt);
  box-shadow: 0 0 40px rgba(255, 82, 0, 0.40);
  transform: translateY(-2px);
}
.btn-arrow { transition: transform 0.2s; }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }

/* Small corner-bracket ticks — decorative accent, opposite corners only */
.btn-primary::before,
.btn-primary::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--white);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s;
}
.btn-primary::before {
  top: -4px;
  left: -4px;
  border-right: none;
  border-bottom: none;
}
.btn-primary::after {
  bottom: -4px;
  right: -4px;
  border-left: none;
  border-top: none;
}
.btn-primary:hover::before,
.btn-primary:hover::after {
  opacity: 0.9;
}

/* ─── CODE WIDGET (reused by the AI Advantage terminal) ────── */
/* Chrome bar */
.cw-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--dark-3);
  border-bottom: 1px solid var(--white-12);
}
.cw-dots { display: flex; gap: 6px; }
.cw-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.cw-dot-red    { background: #FF5F57; }
.cw-dot-yellow { background: #FEBC2E; }
.cw-dot-green  { background: #28C840; }

.cw-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--white-55);
  background: var(--dark-2);
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--white-12);
}
.cw-tab-icon { color: var(--blue); font-size: 0.7rem; }

.cw-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  text-transform: uppercase;
}
.cw-live-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  animation: pulse 2s ease-in-out infinite;
}

/* Code panel */
.cw-code {
  padding: 18px 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  overflow-x: auto;
}
/* Block, not flex: a flex container drops the whitespace-only text nodes
   between children, which ate every space between the syntax spans and
   rendered "constplan" / "awaitagent" / "returndeploy". */
.code-line {
  display: block;
  padding: 0 18px;
  transition: background 0.15s;
}
.code-line.active-line {
  background: rgba(255,82,0,0.06);
  border-left: 2px solid var(--orange);
  padding-left: 16px;
}
.ln {
  display: inline-block;
  min-width: 28px;
  color: rgba(255,255,255,0.18);
  user-select: none;
  text-align: right;
  margin-right: 20px;
  font-size: 0.72rem;
}
/* Syntax colors */
.t-kw, .t-fn,
.t-obj, .t-cmt, .t-plain {
  letter-spacing: 0.01em;
}
.t-kw     { color: var(--purple); }
.t-fn     { color: var(--blue);   }
.t-obj    { color: #79C0FF;       }
.t-cmt    { color: rgba(255,255,255,0.25); }
.t-plain  { color: rgba(255,255,255,0.75); }

/* Terminal panel */
.cw-terminal {
  border-top: 1px solid var(--white-07);
  background: rgba(0,0,0,0.30);
}
.cw-term-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--white-07);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--white-30);
  text-transform: uppercase;
}
.cw-term-header svg { opacity: 0.4; }
.cw-term-body {
  padding: 12px 18px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.8;
  min-height: 88px;
}
.term-line { display: flex; align-items: baseline; gap: 7px; }
.term-prompt { color: var(--orange); user-select: none; }
.term-cmd    { color: var(--white-80); }
.term-out    { color: var(--white-70); padding-left: 14px; }
.term-ok     { color: var(--green); }
.term-url    { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.term-cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--orange);
  border-radius: 1px;
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ─── TRUST STRIP REVEAL ─────────────────────────────────── */

/* Statement: clip wipe left to right */
.trust-strip .trust-statement {
  clip-path: inset(-0.25em 100% -0.25em 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.trust-strip.in-view .trust-statement {
  clip-path: inset(-0.25em 0% -0.25em 0);
}

/* Marquee: fade in after statement */
.trust-strip .logo-track-wrap {
  opacity: 0;
  transition: opacity 0.9s ease 0.9s;
}
.trust-strip.in-view .logo-track-wrap {
  opacity: 1;
}

/* ─── TRUST STRIP ────────────────────────────────────────── */
.trust-strip {
  padding: 64px 80px 72px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

.trust-statement {
  text-align: center;
  margin-bottom: 36px;
  line-height: 1;
}
.ts-count {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-right: 0.2em;
}
.ts-phrase {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.03em;
}

/* Marquee track */
.logo-track-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Fade left & right edges */
.logo-track-wrap::before,
.logo-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.logo-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--black), transparent);
}
.logo-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--black), transparent);
}

.logo-track {
  display: flex;
  width: 100%;
  overflow: hidden;
}
.logo-track-inner {
  display: flex;
  align-items: center;
  gap: 0;
  animation: marquee 42s linear infinite;
  will-change: transform;
}
.logo-track-inner:hover { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  height: 48px;
  flex-shrink: 0;
  opacity: 0.35;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
  cursor: default;
}
.logo-item:hover {
  opacity: 0.9;
  filter: grayscale(0);
}
/* Text placeholder logos */
.logo-item span {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  white-space: nowrap;
}
/* Divider dot between logos */
.logo-item + .logo-item::before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  height: 20px;
  background: var(--white-12);
}
.logo-item { position: relative; }

/* ─── LIGHT THEME — Trust Strip ──────────────────────────────────────────
   Only real trap here: the marquee's edge-fade gradients are hardcoded to
   fade into --black. On paper they'd otherwise print a dark smudge at each
   edge instead of a fade, since the gradient's "transparent" end still
   fades FROM black, not from the section's actual background. */
body.theme-light .trust-strip { background: var(--paper); border-top: 1px solid var(--ink-08); }
body.theme-light .ts-count { color: var(--ink); }
body.theme-light .logo-track-wrap::before { background: linear-gradient(to right, var(--paper), transparent); }
body.theme-light .logo-track-wrap::after { background: linear-gradient(to left, var(--paper), transparent); }
body.theme-light .logo-item span { color: var(--ink); }
body.theme-light .logo-item + .logo-item::before { background: var(--ink-15); }

/* ─── SERVICES REVEAL ────────────────────────────────────── */

.services-section .services-eyebrow {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.services-section.in-view .services-eyebrow { opacity: 1; transform: translateY(0); }

.services-section .services-headline {
  clip-path: inset(-0.25em 100% -0.25em 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.services-section.in-view .services-headline {
  clip-path: inset(-0.25em 0% -0.25em 0);
}

.services-section .services-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s;
}
.services-section.in-view .services-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Cards: staggered fade rise */
.services-section .svc-col {
  opacity: 0;
  transform: translateY(24px);
}
.services-section .svc-col:nth-child(1) { transition: opacity 0.65s ease 0.65s, transform 0.65s ease 0.65s; }
.services-section .svc-col:nth-child(2) { transition: opacity 0.65s ease 0.80s, transform 0.65s ease 0.80s; }
.services-section .svc-col:nth-child(3) { transition: opacity 0.65s ease 0.95s, transform 0.65s ease 0.95s; }
.services-section .svc-col:nth-child(4) { transition: opacity 0.65s ease 1.10s, transform 0.65s ease 1.10s; }
.services-section.in-view .svc-col {
  opacity: 1;
  transform: translateY(0);
}

.services-section .services-footer {
  opacity: 0;
  transition: opacity 0.7s ease 1.25s;
}
.services-section.in-view .services-footer {
  opacity: 1;
}

.services-section .services-dotgrid {
  opacity: 0;
  transition: opacity 1.2s ease 0.1s;
}
.services-section.in-view .services-dotgrid { opacity: 1; }

/* ─── SERVICES SECTION ───────────────────────────────────── */
.services-section {
  position: relative;
  overflow: hidden;
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

/* Faint texture continuity with the sections around it */
.services-dotgrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Subtle wash + hairline so the section reads as its own plane without
   introducing a new colour or a hard band edge. */
.services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 82, 0, 0.045), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 42%);
}
.services-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 64px;
}
.services-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.services-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.services-sub {
  font-size: 1rem;
  color: var(--white-70);
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* 2×2 grid */
.services-grid {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--white-07);
  border-bottom: 1px solid var(--white-07);
}

/* Columns are divided by hairlines rather than boxed as cards — the section
   reads as one continuous band instead of four floating objects. */
.svc-col {
  display: flex;
  flex-direction: column;
  padding: 38px 32px 38px;
  min-height: 430px;
  border-left: 1px solid var(--white-07);
  transition: background 0.45s ease;
}
.svc-col:first-child { border-left: 0; }
.svc-col:hover { background: rgba(255, 255, 255, 0.018); }

.svc-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(255, 82, 0, 0.10);
  border: 1px solid rgba(255, 82, 0, 0.28);
  border-radius: 4px;
  padding: 7px 12px;
  transition: background 0.35s, border-color 0.35s, color 0.35s;
}
/* AI is the stated specialty — the filled chip carries that without adding a
   second badge element. */
.svc-col--accent .svc-chip {
  background: var(--orange);
  border-color: var(--orange);
  color: #0A0A0A;
}
.svc-col:hover .svc-chip { background: rgba(255, 82, 0, 0.20); }
.svc-col--accent:hover .svc-chip { background: var(--orange); filter: brightness(1.08); }

/* Oversized ghost numeral, centred in the slack between chip and list. */
.svc-num {
  margin: auto 0;
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--white);
  opacity: 0.09;
  user-select: none;
  transition: opacity 0.45s ease, color 0.45s ease;
}
.svc-col:hover .svc-num { opacity: 0.16; color: var(--orange); }

.svc-outcome {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--white-80);
  margin: 0 0 24px;
  /* Reserve two lines so every column's list starts on the same baseline —
     these strings wrap to 1 or 2 lines depending on the column. */
  min-height: 3.3em;
}

.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li {
  padding-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--white-80);
  margin-bottom: 14px;
  transition: border-color 0.35s, color 0.35s;
}
.svc-list li:last-child { margin-bottom: 0; }
.svc-col:hover .svc-list li { border-left-color: var(--orange); color: var(--white); }

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-col:nth-child(odd) { border-left: 0; }
  .svc-col:nth-child(n+3) { border-top: 1px solid var(--white-07); }
  .svc-col { min-height: 360px; }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .svc-col { border-left: 0; min-height: 0; padding: 28px 20px; }
  .svc-col + .svc-col { border-top: 1px solid var(--white-07); }
  .svc-num { margin: 22px 0; }
}
/* Bottom link */
.services-footer {
  text-align: center;
  margin-top: 64px;
}
.services-footer-note {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--white-55);
  margin-bottom: 16px;
}
.services-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  padding: 14px 32px;
  border: 1px solid var(--white-12);
  border-radius: 5px;
  background: transparent;
  transition: background 0.25s, border-color 0.25s, transform 0.15s;
}
.services-link-arrow { transition: transform 0.25s; }
.services-link:hover .services-link-arrow { transform: translateX(4px); }
.services-link:hover {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 36px rgba(255, 82, 0, 0.35);
  transform: translateY(-2px);
}

/* ─── TESTIMONIALS ───────────────────────────────────────── */
.testi-section {
  padding: 120px 0;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

.testi-header {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 80px;
}
.testi-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.testi-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  clip-path: inset(-0.25em 100% -0.25em 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.testi-section.in-view .testi-headline {
  clip-path: inset(-0.25em 0% -0.25em 0);
}
/* Static three-up grid. This was a 260vh scroll-pinned horizontal track —
   2.6 screens of scroll for three quotes that read fine at a glance.
   Collapsed to a single screen as part of the homepage trim. */
.testi-grid {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: stretch;
}

/* WHITE ISLAND (2026-08-30) — the one deliberate light-on-dark break on an
   otherwise all-black homepage. Was previously a naked left-rule pull-quote
   specifically to avoid being "a fourth bordered-card grid" alongside
   Services/Featured Work/For MSPs/Engagement — a plain white card would have
   run into that same complaint. A white card reads as a different material
   (paper pinned to a black wall), not another dark bordered card, so the
   variety argument still holds; see [[feedback_gearupcode_dark_theme]] for
   why the rest of the page stayed black instead of following this further. */
.testi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 52px 32px 32px;
  background: #FAFAF7;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.20);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1), box-shadow 0.5s ease;
}
.testi-card .tc-quote { flex: 1; }

/* Oversized quote glyph — the card's focal accent, brightens on hover.
   Orange stays full-strength here since it's decorative, not text — the
   contrast-tier rule below is only for things a visitor has to read. */
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 24px;
  font-family: var(--font-head);
  font-size: 3.75rem;
  line-height: 1;
  color: var(--orange);
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.testi-card:hover::before { opacity: 0.32; }

/* Staggered rise — replaces the motion lost when the 260vh scroll-driven
   horizontal track was collapsed to a static grid. */
/* Blur-to-focus entrance ("resolving into view") instead of a plain fade —
   the deliberate "AI driven" touch requested for these cards: content reads
   as materializing/generating rather than just sliding in. Kept to this one
   trick, no new colors or badges added — the ask was to keep the cards
   simple, and a claim like "AI-verified" would contradict the fact these
   quotes are still of unconfirmed provenance (see the project notes). */
.testi-section .testi-card {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
}
.testi-section .testi-card:nth-child(1) { transition: opacity .7s ease .05s, transform .7s cubic-bezier(.22,.61,.36,1) .05s, filter .7s ease .05s, box-shadow .5s ease; }
.testi-section .testi-card:nth-child(2) { transition: opacity .7s ease .18s, transform .7s cubic-bezier(.22,.61,.36,1) .18s, filter .7s ease .18s, box-shadow .5s ease; }
.testi-section .testi-card:nth-child(3) { transition: opacity .7s ease .31s, transform .7s cubic-bezier(.22,.61,.36,1) .31s, filter .7s ease .31s, box-shadow .5s ease; }
.testi-section.in-view .testi-card {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Hover lifts the card further off the black canvas — shadow deepens
   instead of the old border-brighten trick, since there's no border now. */
.testi-section.in-view .testi-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25);
}
.testi-card:hover .tc-photo { border-color: rgba(255, 82, 0, 0.70); }
.testi-card .tc-photo { transition: border-color 0.5s ease; }

@media (prefers-reduced-motion: reduce) {
  .testi-section .testi-card { opacity: 1; transform: none; filter: none; transition: none; }
  .testi-section.in-view .testi-card:hover { transform: none; }
}
/* Attribution row — photo sits inline with the name at the foot of the
   quote, which keeps the head of the card clear for the quote glyph. A
   hairline rule above separates it from the quote now that the card is a
   real bounded surface (didn't need one as a border-left rule on black). */
.tc-attrib {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(8, 8, 8, 0.08);
}
.tc-photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 82, 0, 0.30);
  flex-shrink: 0;
}
.tc-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 2026-08-30: re-cropped from the actual source pixels (500x500,
   testi-victoria-jax.jpg) -- her face/hair sits in roughly the top-left
   56% of the frame (x 6-62%, y 2-58%), with the right half empty
   background. The previous scale(1.25)/origin(30%,22%) window was too
   WIDE (80% of the image, x 6-86% / y 4-84%), so most of that empty
   background and part of her shoulders/torso still showed and her
   hairline sat right at the crop edge. scale(1.8) with this origin
   reproduces the verified crop: window = [origin - origin/scale, origin
   + (1-origin)/scale], width = 1/scale. */
.tc-photo-img--victoria { transform: scale(1.8); transform-origin: 14% 5%; }

/* Sized for a ~350px grid column, not the old 560px track card. */
.tc-quote {
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 500;
  color: rgba(8, 8, 8, 0.82);
  line-height: 1.65;
  letter-spacing: -0.005em;
  margin-bottom: 22px;
}

.tc-meta { display: flex; flex-direction: column; gap: 4px; }
.tc-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  letter-spacing: -0.01em;
}
.tc-co {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--orange-deep);
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── HOW WE WORK — parked, kept for the future /about page ──
   Section removed from the homepage in the 15→9 trim; its timezone
   trust block now lives inside Engagement Models. */
.how-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

.how-header {
  max-width: 1200px;
  margin-inline: auto;
  margin-bottom: 72px;
}
.how-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.how-section .how-eyebrow {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.how-section .how-headline {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.12s, transform 0.6s ease 0.12s;
}
.how-section .how-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.24s, transform 0.6s ease 0.24s;
}
.how-section.in-view .how-eyebrow,
.how-section.in-view .how-headline,
.how-section.in-view .how-sub {
  opacity: 1;
  transform: translateY(0);
}
.how-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.how-sub {
  font-size: 1.0625rem;
  color: var(--white-70);
  max-width: 620px;
  line-height: 1.75;
  font-weight: 400;
}

/* Step rows */
.how-steps { max-width: 1200px; margin-inline: auto; margin-bottom: 64px; position: relative; }

/* Scroll-fill rail — echoes the AI Advantage pipeline (plan → test → review → deploy)
   as a literal progress line: it fills as you scroll, same visual idea as a build running. */
.how-rail-track {
  position: absolute;
  left: -40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--white-10);
}
.how-rail-fill {
  position: absolute;
  left: -40px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 82, 0, 0.5);
  transition: height 0.1s linear;
}
.how-node {
  position: absolute;
  left: -46px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid var(--white-15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  z-index: 1;
}
.how-node-check {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--dark);
  opacity: 0;
  transition: opacity 0.2s;
}
.how-node.is-done {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 8px rgba(61, 214, 140, 0.5);
}
.how-node.is-done .how-node-check { opacity: 1; }

.how-step {
  display: grid;
  grid-template-columns: 96px 200px 1fr;
  align-items: center;
  gap: 0 52px;
  padding: 40px 0;
  border-top: 1px solid var(--white-07);
  position: relative;
  cursor: default;
  transition: background 0.25s;
}
.how-step:last-child { border-bottom: 1px solid var(--white-07); }
/* Inset orange left bar on hover — no layout shift */
.how-step::before {
  content: '';
  position: absolute;
  left: -80px; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  border-radius: 0 2px 2px 0;
}
.how-step:hover::before { transform: scaleY(1); }
.how-step:hover { background: rgba(255, 82, 0, 0.025); }

/* Step number */
.step-num {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--orange);
  opacity: 0.18;
  transition: opacity 0.3s;
  user-select: none;
}
.how-step:hover .step-num { opacity: 0.60; }

/* Step title */
.step-title {
  font-family: var(--font-head);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Step description */
.step-desc {
  font-size: 1rem;
  color: var(--white-70);
  line-height: 1.80;
  max-width: 520px;
  font-weight: 400;
  transition: color 0.25s;
}
.how-step:hover .step-desc { color: var(--white-80); }

/* Timezone / communication trust block */
.how-trust {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 44px 0 56px;
  border-top: 1px solid var(--white-07);
  margin-bottom: 8px;
}
.how-trust-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 0.75;
  margin-bottom: 14px;
}
.how-trust-text {
  font-size: 0.9375rem;
  color: var(--white-70);
  line-height: 1.75;
  font-weight: 400;
}

/* Reveal — scoped to both homes: the parked How We Work section and
   Engagement Models, where this block now lives on the homepage. */
.how-section .how-trust-item,
.engage-section .how-trust-item {
  opacity: 0;
  transform: translateY(14px);
}
.how-section .how-trust-item:nth-child(1),
.engage-section .how-trust-item:nth-child(1) { transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s; }
.how-section .how-trust-item:nth-child(2),
.engage-section .how-trust-item:nth-child(2) { transition: opacity 0.5s ease 0.16s, transform 0.5s ease 0.16s; }
.how-section .how-trust-item:nth-child(3),
.engage-section .how-trust-item:nth-child(3) { transition: opacity 0.5s ease 0.27s, transform 0.5s ease 0.27s; }
.how-section.in-view .how-trust-item,
.engage-section.in-view .how-trust-item {
  opacity: 1;
  transform: translateY(0);
}

/* Closing line */
.how-close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  /* Was --white-30 = 2.65:1. This is an 18px semibold statement line, not a
     divider — it was the single worst contrast failure in any resting text on
     the site, and it broke the project's own rule that --white-30 is for
     rules and decorative marks only. Predates the services page; it came
     over from the parked homepage. */
  color: var(--white-80);
  letter-spacing: -0.02em;
}
.how-close::before,
.how-close::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--white-12));
}
.how-close::after {
  background: linear-gradient(to left, transparent, var(--white-12));
}
.how-close em {
  font-style: normal;
  color: var(--orange);
}

/* ─── LIGHT THEME — How We Work ──────────────────────────────────────────
   The scroll-fill rail (echoing AI Advantage's build-pipeline motif) is this
   section's identity and stays untouched in concept — only the resting
   node's "blend into the canvas until done" trick needs its base color
   swapped from --dark to --paper so it still disappears correctly. */
body.theme-light .how-section { background: var(--paper); border-top: 1px solid var(--ink-08); }
body.theme-light .how-headline { color: var(--ink); }
body.theme-light .how-sub { color: var(--ink-60); }
body.theme-light .how-rail-track { background: var(--ink-15); }
body.theme-light .how-node { background: var(--paper); border-color: var(--ink-15); }
body.theme-light .how-step { border-top: 1px solid var(--ink-08); }
body.theme-light .how-step:last-child { border-bottom: 1px solid var(--ink-08); }
body.theme-light .step-title { color: var(--ink); }
body.theme-light .step-desc { color: var(--ink-60); }
body.theme-light .how-step:hover .step-desc { color: var(--ink-80); }
body.theme-light .how-trust { border-top: 1px solid var(--ink-08); }
body.theme-light .how-trust-text { color: var(--ink-60); }
body.theme-light .how-close { color: var(--ink-80); }
body.theme-light .how-close::before { background: linear-gradient(to right, transparent, var(--ink-15)); }
body.theme-light .how-close::after { background: linear-gradient(to left, transparent, var(--ink-15)); }

/* ─── FAQ (currently only on /about) ─────────────────────────────────────
   No numbering, no accordion — these questions aren't a sequence (the
   frontend-design skill flags numbered markers as wrong when order carries
   no information), and every answer is already fully public elsewhere on
   the site, so hiding it behind a click just adds friction for no reason.
   Plain weight contrast (bold question / regular answer) carries it. */
.faq-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}
.faq-inner { max-width: 1200px; margin: 0 auto; }
.faq-header { max-width: 640px; margin-bottom: 64px; }
.faq-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.faq-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.faq-sub {
  font-size: 1.0625rem;
  color: var(--white-55);
  line-height: 1.6;
  font-weight: 400;
}
.faq-list { max-width: 800px; }
.faq-item {
  padding: 36px 0;
  border-top: 1px solid var(--white-07);
}
.faq-item:last-child { border-bottom: 1px solid var(--white-07); }
.faq-q {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.faq-a {
  font-size: 1rem;
  color: var(--white-55);
  line-height: 1.8;
  font-weight: 400;
  max-width: 620px;
}

/* Reveal on scroll — header settles, then items stagger in one after another */
.faq-section .faq-eyebrow,
.faq-section .faq-headline,
.faq-section .faq-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.faq-section .faq-headline { transition-delay: 0.12s; }
.faq-section .faq-sub { transition-delay: 0.24s; }
.faq-section.in-view .faq-eyebrow,
.faq-section.in-view .faq-headline,
.faq-section.in-view .faq-sub {
  opacity: 1;
  transform: translateY(0);
}
.faq-item { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.faq-item:nth-child(1) { transition-delay: 0.30s; }
.faq-item:nth-child(2) { transition-delay: 0.38s; }
.faq-item:nth-child(3) { transition-delay: 0.46s; }
.faq-item:nth-child(4) { transition-delay: 0.54s; }
.faq-item:nth-child(5) { transition-delay: 0.62s; }
.faq-item:nth-child(6) { transition-delay: 0.70s; }
.faq-section.in-view .faq-item { opacity: 1; transform: translateY(0); }

/* ─── LIGHT THEME — FAQ ──────────────────────────────────────────────── */
body.theme-light .faq-section { background: var(--paper); border-top: 1px solid var(--ink-08); }
body.theme-light .faq-headline { color: var(--ink); }
body.theme-light .faq-sub { color: var(--ink-60); }
body.theme-light .faq-item { border-top: 1px solid var(--ink-08); }
body.theme-light .faq-item:last-child { border-bottom: 1px solid var(--ink-08); }
body.theme-light .faq-q { color: var(--ink); }
body.theme-light .faq-a { color: var(--ink-60); }

@media (max-width: 960px) {
  .faq-section { padding: 64px 20px 56px; }
  .faq-header { margin-bottom: 40px; }
}

/* ─── AI ADVANTAGE REVEAL ─────────────────────────────────── */

.ai-section .ai-headline {
  clip-path: inset(-0.25em 100% -0.25em 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.ai-section.in-view .ai-headline {
  clip-path: inset(-0.25em 0% -0.25em 0);
}

.ai-section .ai-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.45s, transform 0.7s ease 0.45s;
}
.ai-section.in-view .ai-sub { opacity: 1; transform: translateY(0); }

.ai-section .ai-tools-label,
.ai-section .ai-tools {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s;
}
.ai-section.in-view .ai-tools-label,
.ai-section.in-view .ai-tools { opacity: 1; transform: translateY(0); }

.ai-section .ai-widget {
  opacity: 0;
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(28px);
  transition: opacity 0.9s ease 0.5s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.ai-section.in-view .ai-widget {
  opacity: 1;
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(0);
}

.ai-section .ai-glow--1 { opacity: 0; }
.ai-section .ai-glow--2 { opacity: 0; }
.ai-section.in-view .ai-glow--1 {
  animation: heroGlowIn 1.8s ease-out 0.3s forwards, heroGlowBreathe 9s ease-in-out 2.1s infinite;
}
.ai-section.in-view .ai-glow--2 {
  animation: heroGlowIn 1.8s ease-out 0.5s forwards, heroGlowBreathe 11s ease-in-out 2.3s infinite;
}

.ai-section .ai-dotgrid {
  opacity: 0;
  transition: opacity 1.2s ease 0.2s;
}
.ai-section.in-view .ai-dotgrid { opacity: 1; }

.ai-benefits-strip {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.85s, transform 0.7s ease 0.85s;
}
.ai-section.in-view .ai-benefits-strip { opacity: 1; transform: translateY(0); }

/* ─── AI ADVANTAGE ───────────────────────────────────────── */
.ai-section {
  position: relative;
  overflow: hidden;
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

/* Ambient background: faint tech dot-grid + AI-atmosphere glow,
   same recipe as the hero glow, gated behind .in-view instead of autoplay */
.ai-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ai-dotgrid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 72% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 80% at 72% 30%, #000 0%, transparent 75%);
}
.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
}
.ai-glow--1 {
  top: -14%;
  right: -8%;
  width: 32vw;
  height: 32vw;
  max-width: 420px;
  max-height: 420px;
  background: radial-gradient(ellipse, var(--blue) 0%, var(--blue) 35%, transparent 72%);
}
.ai-glow--2 {
  bottom: -18%;
  left: -8%;
  width: 26vw;
  height: 26vw;
  max-width: 340px;
  max-height: 340px;
  background: radial-gradient(ellipse, var(--purple) 0%, var(--purple) 35%, transparent 72%);
}

.ai-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 88px;
  align-items: start;
}

/* Left column */
.ai-left {}

.ai-headline {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 24px;
}
.ai-headline em {
  font-style: normal;
  color: var(--orange);
}

.ai-sub {
  font-size: 1.0625rem;
  color: var(--white-70);
  line-height: 1.80;
  margin-bottom: 48px;
  max-width: 520px;
}

/* Tools */
.ai-tools-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-55);
  margin-bottom: 14px;
  font-family: var(--font-mono);
}
/* Three-column grid so the six tools sit as two even rows instead of
   wrapping 5 + a single orphan. justify-items:start keeps natural chip width. */
.ai-tools {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-items: start;
  gap: 8px 10px;
}
.ai-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--dark-2);
  border: 1px solid var(--white-12);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-55);
  letter-spacing: 0.01em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ai-tool:hover {
  border-color: rgba(255,82,0,0.35);
  color: var(--white-80);
  background: rgba(255,82,0,0.06);
}
.ai-tool-dot {
  width: 5px; height: 5px;
  background: var(--orange);
  border-radius: 50%;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Right column — revived terminal widget, the section's visual anchor */
.ai-right {
  display: flex;
  justify-content: flex-end;
}

.ai-widget {
  width: 100%;
  max-width: 460px;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  transform-origin: center center;
  box-shadow:
    0 0 0 1px rgba(255,82,0,0.10),
    0 40px 90px rgba(0,0,0,0.55),
    0 0 90px rgba(79,158,255,0.10);
  transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-widget:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(0);
  box-shadow:
    0 0 0 1px rgba(255,82,0,0.20),
    0 40px 90px rgba(0,0,0,0.55),
    0 0 120px rgba(79,158,255,0.16);
}

/* What this means for you — full-width strip below the two columns */
.ai-benefits-strip {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  margin-top: 72px;
  padding-top: 8px;
}

.ai-benefits-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-55);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.ai-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ai-benefit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px 0 0;
  border-top: 1px solid var(--white-07);
  transition: background 0.2s;
  cursor: default;
}

.benefit-arrow {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.30);
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  font-family: var(--font-mono);
}
.ai-benefit:hover .benefit-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.benefit-text {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white-80);
  letter-spacing: -0.015em;
  line-height: 1.5;
  transition: color 0.2s;
}
.ai-benefit:hover .benefit-text { color: var(--white); }
.benefit-text em {
  font-style: normal;
  color: var(--orange);
}

/* ─── FEATURED WORK REVEAL ───────────────────────────────── */

.work-section .work-headline {
  clip-path: inset(-0.25em 100% -0.25em 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.work-section.in-view .work-headline {
  clip-path: inset(-0.25em 0% -0.25em 0);
}

.work-section .work-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s;
}
.work-section.in-view .work-sub {
  opacity: 1;
  transform: translateY(0);
}

.work-section .work-card {
  opacity: 0;
  transform: translateY(20px);
}
.work-section .work-card:nth-child(1) { transition: opacity 0.65s ease 0.65s, transform 0.65s ease 0.65s; }
.work-section .work-card:nth-child(2) { transition: opacity 0.65s ease 0.85s, transform 0.65s ease 0.85s; }
.work-section .work-card:nth-child(3) { transition: opacity 0.65s ease 1.05s, transform 0.65s ease 1.05s; }
.work-section.in-view .work-card {
  opacity: 1;
  transform: translateY(0);
}

.work-section .work-footer {
  opacity: 0;
  transition: opacity 0.7s ease 1.2s;
}
.work-section.in-view .work-footer {
  opacity: 1;
}

/* ─── FEATURED WORK ──────────────────────────────────────── */
.work-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

.work-header {
  max-width: 1200px;
  margin-inline: auto;
  margin-bottom: 64px;
}
.work-cards {
  max-width: 1200px;
  margin-inline: auto;
}
.work-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.work-sub {
  font-size: 1rem;
  color: var(--white-70);
  font-weight: 400;
}

/* Project cards */
.work-cards { margin-bottom: 56px; }

.work-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 12px;
  margin: 0 -12px;
  border-top: 1px solid var(--white-07);
  position: relative;
  overflow: hidden;
  transition: background 0.35s;
}
.work-card:last-child { border-bottom: 1px solid var(--white-07); }

/* Left orange inset bar on hover */
.work-card::before {
  content: '';
  position: absolute;
  left: -80px; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  border-radius: 0 2px 2px 0;
  z-index: 1;
}
.work-card:hover::before { transform: scaleY(1); }

/* Techy dot grid bg on hover */
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at left center, rgba(255, 82, 0, 0.07) 0%, transparent 55%),
    radial-gradient(circle, rgba(255, 82, 0, 0.18) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.work-card:hover::after { opacity: 1; }
.work-card:hover { background: rgba(255, 82, 0, 0.025); }

/* The preview frames (wireframe-skeleton placeholder tiles) were removed
   2026-08-30 — the Aspyra logo saga (four failed attempts, see git history)
   made it obvious these were just empty placeholder squares once one of
   them had to hold something real, so the user asked for them gone
   entirely rather than kept as generic filler. Cards are text-only now. */

/* Left: content */
.wc-left { flex: 1; position: relative; z-index: 1; }

.wc-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.work-card:hover .wc-category { opacity: 1; }

.wc-title {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
  transition: color 0.2s;
}
.work-card:hover .wc-title { color: var(--white); }
.wc-title em {
  font-style: normal;
  color: var(--orange);
  text-shadow: 0 0 24px rgba(255,82,0,0.30);
}

.wc-outcome {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white-80);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  transition: opacity 0.2s;
}
.work-card:hover .wc-outcome { opacity: 1; }

.wc-desc {
  font-size: 0.9375rem;
  color: var(--white-70);
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 22px;
  transition: color 0.25s;
}
.work-card:hover .wc-desc { color: var(--white-80); }

.wc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wc-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-55);
  background: var(--white-04);
  border: 1px solid var(--white-07);
  border-radius: 100px;
  padding: 4px 12px;
  transition: color 0.2s, border-color 0.2s;
}
.work-card:hover .wc-tag {
  color: var(--white-55);
  border-color: var(--white-12);
}

/* Right: number + link */
.wc-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-shrink: 0;
  padding-top: 4px;
}
.wc-num {
  position: relative;
  display: inline-block;
  font-family: var(--font-head);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
  transition: -webkit-text-stroke-color 0.3s;
}
.work-card:hover .wc-num {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.20);
}
.wc-num::after {
  content: attr(data-num);
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.13);
  -webkit-text-stroke: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .wc-num::after {
  clip-path: inset(0% 0 0 0);
}

/* Aspyra card only — real brand colors sampled from their own logo file
   (assets/images/ASPYRA.png), not the logo mark itself: teal #007884,
   lime #B4D83C, EKG-line orange #FC9C3C. See the markup comment. */
#work-aspyra .wc-num {
  -webkit-text-stroke-color: rgba(0, 120, 132, 0.22);
}
#work-aspyra:hover .wc-num {
  -webkit-text-stroke-color: rgba(180, 216, 60, 0.35);
}
#work-aspyra .wc-num::after {
  color: rgba(0, 120, 132, 0.16);
}
#work-aspyra:hover .wc-num::after {
  color: rgba(180, 216, 60, 0.22);
}
#work-aspyra .wc-right { position: relative; }
#work-aspyra .wc-pulse {
  position: absolute;
  left: -44px;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
#work-aspyra .wc-pulse path {
  fill: none;
  stroke: #FC9C3C;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 292;
  stroke-dashoffset: 292;
  opacity: 0.9;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
#work-aspyra:hover .wc-pulse path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  #work-aspyra .wc-pulse path { transition: none; }
}

/* Cloud10 card only — their real logo has no brand color to sample (pure
   white), so this reuses their own logo's actual motif instead: bubbles
   that rise and fade in, in the site's water-blue rather than an invented
   "brand color". See the markup comment. */
#work-cloud10 .wc-right { position: relative; }
#work-cloud10 .wc-bubbles {
  position: absolute;
  left: -50px;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
#work-cloud10 .wc-bubble {
  fill: var(--blue);
  opacity: 0;
  transform-origin: center;
}
#work-cloud10:hover .wc-bubble {
  animation: wcBubbleRise 2.4s ease-in-out infinite;
}
#work-cloud10:hover .wc-bubble--1 { animation-delay: 0s; }
#work-cloud10:hover .wc-bubble--2 { animation-delay: 0.35s; fill: var(--white); }
#work-cloud10:hover .wc-bubble--3 { animation-delay: 0.15s; }
#work-cloud10:hover .wc-bubble--4 { animation-delay: 0.55s; fill: var(--white); }
#work-cloud10:hover .wc-bubble--5 { animation-delay: 0.25s; }
#work-cloud10:hover .wc-bubble--6 { animation-delay: 0.7s; fill: var(--white); }
@keyframes wcBubbleRise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  18% { opacity: 0.85; }
  80% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #work-cloud10:hover .wc-bubble { animation: none; }
}

/* Innovative Now card only — real colors + motif sampled live from
   innovativenow.com (navy #0A0D53, blue #2B9FE0, CTA orange #F36C21;
   their hero background is a connected-node network pattern). See the
   markup comment. A small network graph draws in through the "03" on
   hover — one team plugged into theirs. */
#work-innovative .wc-right { position: relative; }
#work-innovative .wc-network {
  position: absolute;
  left: -46px;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 46px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
#work-innovative .wc-net-line {
  stroke: #2B9FE0;
  stroke-width: 1.5;
  opacity: 0.8;
  transition: stroke-dashoffset 0.5s ease;
}
#work-innovative .wc-net-line:nth-of-type(1) { stroke-dasharray: 47; stroke-dashoffset: 47; transition-delay: 0s; }
#work-innovative .wc-net-line:nth-of-type(2) { stroke-dasharray: 51; stroke-dashoffset: 51; transition-delay: 0.2s; }
#work-innovative .wc-net-line:nth-of-type(3) { stroke-dasharray: 50; stroke-dashoffset: 50; transition-delay: 0.4s; }
#work-innovative .wc-net-line:nth-of-type(4) { stroke-dasharray: 48; stroke-dashoffset: 48; transition-delay: 0.6s; }
#work-innovative:hover .wc-net-line { stroke-dashoffset: 0; }
#work-innovative .wc-net-node {
  fill: #2B9FE0;
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#work-innovative .wc-net-node--hub { fill: #F36C21; }
#work-innovative:hover .wc-net-node { opacity: 1; transform: scale(1); }
#work-innovative:hover .wc-net-node--a { transition-delay: 0s; }
#work-innovative:hover .wc-net-node--b { transition-delay: 0.2s; }
#work-innovative:hover .wc-net-node--hub { transition-delay: 0.4s; }
#work-innovative:hover .wc-net-node--d { transition-delay: 0.6s; }
#work-innovative:hover .wc-net-node--e { transition-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  #work-innovative .wc-net-line,
  #work-innovative .wc-net-node { transition: none; }
}

/* GearUp Mind card only — in-house concept, so it gets the AI-section's own
   electric-blue/purple rather than the client cards' orange, and its own
   small "Try it" link that opens the real widget instead of the section's
   generic bottom CTA. */
.wc-try {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--electric-blue);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.wc-try-arrow { transition: transform 0.2s; }
.wc-try:hover .wc-try-arrow { transform: translateX(4px); }

#work-gearmind .wc-num {
  -webkit-text-stroke-color: rgba(0, 194, 255, 0.22);
}
#work-gearmind:hover .wc-num {
  -webkit-text-stroke-color: rgba(157, 78, 255, 0.35);
}
#work-gearmind .wc-num::after {
  color: rgba(0, 194, 255, 0.16);
}
#work-gearmind:hover .wc-num::after {
  color: rgba(157, 78, 255, 0.22);
}
#work-gearmind .wc-right { position: relative; }
#work-gearmind .wc-mind {
  position: absolute;
  left: -50px;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
#work-gearmind .wc-mind-bubble {
  fill: none;
  stroke: var(--electric-blue);
  stroke-width: 1.5;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  opacity: 0.85;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
#work-gearmind:hover .wc-mind-bubble { stroke-dashoffset: 0; }
#work-gearmind .wc-mind-dot {
  fill: var(--electric-purple);
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#work-gearmind:hover .wc-mind-dot { opacity: 0.9; transform: scale(1); }
#work-gearmind:hover .wc-mind-dot--1 { transition-delay: 0.55s; }
#work-gearmind:hover .wc-mind-dot--2 { transition-delay: 0.7s; }
#work-gearmind:hover .wc-mind-dot--3 { transition-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
  #work-gearmind .wc-mind-bubble { transition: none; }
  #work-gearmind .wc-mind-dot { transition: none; }
}

/* Bottom link */
.work-footer { text-align: center; }
.work-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  padding: 14px 32px;
  border: 1px solid var(--white-12);
  border-radius: 5px;
  background: transparent;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}
.work-footer-link:hover {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 36px rgba(255, 82, 0, 0.35);
  transform: translateY(-2px);
}
.work-footer-arrow { transition: transform 0.2s; font-family: var(--font-mono); }
.work-footer-link:hover .work-footer-arrow { transform: translateX(5px); }

/* ─── FOR MSPs ───────────────────────────────────────────── */
.msp-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
  overflow: hidden;
}

.msp-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.msp-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}

.msp-headline {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 2.6vw, 2.625rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.msp-headline em { font-style: normal; color: var(--orange); }

.msp-statement {
  font-size: 1rem;
  color: var(--white-70);
  line-height: 1.75;
  font-weight: 400;
  max-width: 460px;
  margin-bottom: 28px;
}

.msp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white-80);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.msp-link:hover { color: var(--orange); }
.msp-link-arrow { transition: transform 0.2s; font-family: var(--font-mono); }
.msp-link:hover .msp-link-arrow { transform: translateX(4px); }

/* Demo: toggle + live-branding card */
.msp-demo {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* was center: toggle and card are different widths,
                             so centring them misaligned both edges */
  gap: 28px;
  max-width: 440px;
  margin-left: auto;      /* sit against the column's right edge, mirroring
                             the copy column on the left */
}

.msp-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  background: var(--dark-3);
  border: 1px solid var(--white-12);
  border-radius: 100px;
  padding: 4px;
  width: 100%;
}
.msp-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--orange);
  border-radius: 100px;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.msp-toggle.is-co-branded .msp-toggle-thumb { transform: translateX(100%); }
.msp-toggle-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 9px 0;
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white-55);
  cursor: pointer;
  transition: color 0.3s;
}
.msp-toggle-btn.is-active { color: var(--black); }

.msp-card {
  width: 100%;
  background: var(--dark-2);
  border: 1px solid var(--white-12);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.msp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--white-07);
}
.msp-card-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.msp-card-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.msp-card-brand-mark--client {
  background: var(--orange-dim);
  color: var(--orange);
}
.msp-card-brand-name {
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msp-card-brand-divider,
.msp-card-brand-mark--gearup {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s ease, max-width 0.4s ease;
}
.msp-card-brand-mark--gearup { font-size: 0.9375rem; letter-spacing: -0.03em; width: auto; height: auto; background: none; }
.msp-card-brand-divider { color: var(--white-30); font-size: 0.75rem; font-weight: 400; }
.msp-card.is-co-branded .msp-card-brand-divider { opacity: 1; max-width: 16px; margin: 0 2px; }
.msp-card.is-co-branded .msp-card-brand-mark--gearup { opacity: 1; max-width: 60px; }
.msp-card-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--white-55);
  flex-shrink: 0;
}
.msp-card-title {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.4;
}
.msp-card-check { color: var(--green); }
.msp-card-text {
  font-size: 0.875rem;
  color: var(--white-70);
  line-height: 1.65;
}

/* Reveal on scroll */
.msp-section .msp-copy {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.msp-section .msp-demo {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.28s, transform 0.7s ease 0.28s;
}
.msp-section.in-view .msp-copy,
.msp-section.in-view .msp-demo {
  opacity: 1;
  transform: translateY(0);
}

/* ─── GEARUP FOR GOOD ────────────────────────────────────── */
.good-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

.good-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Impact stat strip — the checkable numbers, out of the fine print */
.good-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 64px;
}
.good-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 56px;
}
.good-stat + .good-stat {
  border-left: 1px solid var(--white-07);
}
.good-stat-num {
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.04em;
  line-height: 1;
}
.good-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white-55);
}
/* 2-column grid */
.good-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

/* Card shell — flex column so footer pins to bottom */
.good-card {
  display: flex;
  flex-direction: column;
  background: var(--dark-2);
  border: 1px solid var(--white-07);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.good-card:hover {
  border-color: rgba(255, 82, 0, 0.22);
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}

/* Top area: label + description */
.good-card-top {
  padding: 40px 40px 32px;
  border-bottom: 1px solid var(--white-07);
}

.good-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(255, 82, 0, 0.10);
  border: 1px solid rgba(255, 82, 0, 0.20);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 24px;
  transition: background 0.2s, border-color 0.2s;
}
.good-card:hover .good-label {
  background: rgba(255, 82, 0, 0.16);
  border-color: rgba(255, 82, 0, 0.35);
}

/* Program icon — custom line-art, same stroke language as AI Advantage icons */
.good-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  color: var(--orange);
  background: rgba(255, 82, 0, 0.08);
  border: 1px solid rgba(255, 82, 0, 0.18);
  margin-bottom: 22px;
  transition: background 0.25s, border-color 0.25s;
}
.good-card:hover .good-icon {
  background: rgba(255, 82, 0, 0.14);
  border-color: rgba(255, 82, 0, 0.32);
}

/* Second-person hook — the line the reader attaches to */
.good-hook {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 18px 0 14px;
}

.good-desc {
  font-size: 0.9375rem;
  color: var(--white-55);
  line-height: 1.85;
  font-weight: 400;
  transition: color 0.25s;
}
.good-card:hover .good-desc { color: var(--white-80); }

/* Middle area: who this is for */
.good-card-body {
  padding: 32px 40px;
  flex: 1;
  border-bottom: 1px solid var(--white-07);
}

.good-for-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--white-30);
  margin-bottom: 18px;
}

.good-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.good-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--white-55);
  line-height: 1.60;
  font-weight: 400;
  transition: color 0.2s;
}
.good-list li::before {
  content: '→';
  color: var(--orange);
  opacity: 0.65;
  flex-shrink: 0;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: opacity 0.2s;
}
.good-card:hover .good-list li { color: var(--white-80); }
.good-card:hover .good-list li::before { opacity: 1; }

/* Bottom area: CTA */
.good-card-foot {
  padding: 28px 40px;
}
.good-apply-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.2s;
}
.good-apply-link:hover { opacity: 0.70; }
.good-apply-arrow { transition: transform 0.2s; }
.good-apply-link:hover .good-apply-arrow { transform: translateX(5px); }

/* Closing block */
.good-close {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.good-close-line {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white-55);
  letter-spacing: -0.02em;
  line-height: 1.60;
}
.good-close-note {
  font-size: 0.8125rem;
  color: var(--white-30);
  line-height: 1.70;
  font-weight: 400;
}

/* Reveal on scroll */
.good-section .good-stat {
  opacity: 0;
  transform: translateY(12px);
}
.good-section .good-stat:nth-child(1) { transition: opacity 0.6s ease 0.30s, transform 0.6s ease 0.30s; }
.good-section .good-stat:nth-child(2) { transition: opacity 0.6s ease 0.42s, transform 0.6s ease 0.42s; }
.good-section .good-stat:nth-child(3) { transition: opacity 0.6s ease 0.54s, transform 0.6s ease 0.54s; }
.good-section.in-view .good-stat {
  opacity: 1;
  transform: translateY(0);
}

.good-section .good-card {
  opacity: 0;
  transform: translateY(20px);
}
.good-section .good-card:nth-child(1) { transition: opacity 0.65s ease 0.40s, transform 0.65s ease 0.40s; }
.good-section .good-card:nth-child(2) { transition: opacity 0.65s ease 0.55s, transform 0.65s ease 0.55s; }
.good-section.in-view .good-card {
  opacity: 1;
  transform: translateY(0);
}

.good-section .good-close {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.75s, transform 0.6s ease 0.75s;
}
.good-section.in-view .good-close {
  opacity: 1;
  transform: translateY(0);
}

/* ─── TEAM NOTE ──────────────────────────────────────────── */
.team-note-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

/* Split-column editorial layout — a fixed identity column beside a wide
   reading column, instead of one narrow centered letter. Gives the section
   real scale next to Testimonials/AI Advantage rather than reading small. */
.tn-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  align-items: start;
}

.tn-left {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tn-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange);
  opacity: 0.85;
}

.tn-headline {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.tn-left-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 32px;
  border-top: 1px solid var(--white-07);
}

.tn-signoff {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white-30);
  letter-spacing: -0.01em;
}

.tn-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.2s;
}
.tn-link:hover { opacity: 0.75; }
.tn-link-arrow { transition: transform 0.2s; }
.tn-link:hover .tn-link-arrow { transform: translateX(4px); }

/* Right column: prose */
.tn-right {
  max-width: 640px;
}

.tn-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.tn-body + .tn-pull,
.tn-pull + .tn-body {
  margin-top: 48px;
}

.tn-body p {
  font-size: 1.125rem;
  color: var(--white-55);
  line-height: 1.85;
  font-weight: 400;
}

/* Pull quote — no longer an inline blockquote; a full break in the reading
   rhythm you can't skim past. */
.tn-pull {
  position: relative;
  font-family: var(--font-head) !important;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--orange) !important;
  letter-spacing: -0.03em;
  line-height: 1.2 !important;
  padding: 8px 0 8px 32px;
}
/* Left border draws in on reveal instead of sitting static */
.tn-pull::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}
.team-note-section.in-view .tn-pull::before { transform: scaleY(1); }

/* Emphasis line */
.tn-emphasis {
  font-family: var(--font-head) !important;
  font-size: 1.1875rem !important;
  font-weight: 600 !important;
  color: var(--white-80) !important;
  letter-spacing: -0.02em;
  line-height: 1.4 !important;
}

/* Reveal on scroll — left column settles first, then the reading column
   cascades paragraph by paragraph, pull-quote landing as its own beat */
.team-note-section .tn-eyebrow {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.team-note-section .tn-headline {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease 0.22s, transform 0.65s ease 0.22s;
}
.team-note-section .tn-left-footer {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.34s, transform 0.6s ease 0.34s;
}
.team-note-section.in-view .tn-eyebrow,
.team-note-section.in-view .tn-headline,
.team-note-section.in-view .tn-left-footer {
  opacity: 1;
  transform: translateY(0);
}

.tn-right .tn-body p,
.tn-right .tn-pull {
  opacity: 0;
  transform: translateY(14px);
}
.tn-right .tn-body:nth-of-type(1) p:nth-child(1) { transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s; }
.tn-right .tn-body:nth-of-type(1) p:nth-child(2) { transition: opacity 0.6s ease 0.47s, transform 0.6s ease 0.47s; }
.tn-right .tn-pull { transition: opacity 0.6s ease 0.59s, transform 0.6s ease 0.59s; }
.tn-right .tn-body:nth-of-type(2) p:nth-child(1) { transition: opacity 0.6s ease 0.75s, transform 0.6s ease 0.75s; }
.tn-right .tn-body:nth-of-type(2) p:nth-child(2) { transition: opacity 0.6s ease 0.87s, transform 0.6s ease 0.87s; }
.tn-right .tn-body:nth-of-type(2) p:nth-child(3) { transition: opacity 0.6s ease 0.99s, transform 0.6s ease 0.99s; }
.team-note-section.in-view .tn-right .tn-body p,
.team-note-section.in-view .tn-right .tn-pull {
  opacity: 1;
  transform: translateY(0);
}

/* ─── LIGHT THEME — Team Note ────────────────────────────────────────────
   No new signature here on purpose: the daylight wash is the hero's one
   moment, and this section's identity already comes from the split-column
   letter layout + the pull-quote's draw-in border. Same paper as the hero
   (no tone shift) to keep the "one continuous canvas" rule the dark theme
   already established — just translated to light. */
body.theme-light .team-note-section {
  background: var(--paper);
  border-top: 1px solid var(--ink-08);
}
body.theme-light .tn-headline { color: var(--ink); }
body.theme-light .tn-left-footer { border-top: 1px solid var(--ink-08); }
body.theme-light .tn-signoff { color: var(--ink-40); }
body.theme-light .tn-body p { color: var(--ink-60); }
body.theme-light .tn-emphasis { color: var(--ink-80) !important; }

/* ─── ENGAGEMENT MODELS ──────────────────────────────────── */
.engage-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

.engage-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.engage-header {
  text-align: center;
  margin-bottom: 72px;
}
.engage-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.engage-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.engage-sub {
  font-size: 1.0625rem;
  color: var(--white-70);
  font-weight: 400;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* Three equal paths — spec-sheet cards, no "recommended" tier games */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
  /* 3D space for the cards' pointer-tracked tilt (assets/js/engage-animations.js). */
  perspective: 1200px;
}

.engage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dark-2);
  border: 1px solid var(--white-07);
  border-radius: 16px;
  padding: 36px 32px 32px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.engage-card:hover {
  border-color: var(--white-12);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Spotlight — follows the cursor inside the card (JS sets --spot-x/--spot-y
   on pointermove). Sits behind the real content since ::before is the first
   generated box in paint order. Opacity is a one-shot GSAP timeline
   (--spot-o), not a :hover toggle — it fades in on enter, then dissolves on
   its own after a beat, regardless of whether the pointer is still there. */
.engage-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle 260px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 82, 0, 0.16), transparent 70%);
  opacity: var(--spot-o, 0);
  pointer-events: none;
}

/* Animated gradient border — a conic-gradient ring masked to just the edge
   (padding-box vs content-box, XOR'd), with a bright arc that sweeps around
   (--border-angle driven by GSAP). Opacity is the same one-shot timeline as
   the spotlight (--ring-o): fades in on enter, then dissolves on its own —
   the rotation itself eases to a stop in sync, so it never just freezes
   mid-spin while fading. ::after paints last, on top of the real content,
   but the mask means only the 1px ring itself is ever opaque. */
.engage-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--border-angle, 0deg), transparent 0deg, transparent 260deg, var(--orange-lt) 300deg, var(--orange) 320deg, transparent 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--ring-o, 0);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* JS already skips the tilt tween and border-sweep entirely when reduced
     motion is on; this is just a static safety net against a stuck tilt. */
  .engage-card { transform: none !important; }
}

.engage-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
  opacity: 0.60;
  margin-bottom: 20px;
}

.engage-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.engage-for {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white-80);
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.engage-desc {
  font-size: 1rem;
  color: var(--white-70);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 28px;
}

/* Spec sheet — mono label / value hairline rows */
.engage-specs {
  margin-top: auto;
  margin-bottom: 28px;
}
.engage-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--white-07);
}
.engage-spec:last-child { border-bottom: 1px solid var(--white-07); }
.engage-spec-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-70);
  flex-shrink: 0;
}
.engage-spec-value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white-80);
  text-align: right;
}

.engage-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.2s;
}
.engage-cta:hover { opacity: 0.75; }
.engage-cta-arrow { transition: transform 0.2s; font-family: var(--font-mono); }
.engage-cta:hover .engage-cta-arrow { transform: translateX(4px); }

.engage-note {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--white-70);
  font-weight: 400;
}

/* Reveal on scroll */
.engage-section .engage-eyebrow,
.engage-section .engage-headline,
.engage-section .engage-sub {
  opacity: 0;
  transform: translateY(10px);
}
.engage-section .engage-eyebrow { transition: opacity 0.5s ease, transform 0.5s ease; }
.engage-section .engage-headline { transition: opacity 0.6s ease 0.12s, transform 0.6s ease 0.12s; }
.engage-section .engage-sub { transition: opacity 0.6s ease 0.24s, transform 0.6s ease 0.24s; }
.engage-section.in-view .engage-eyebrow,
.engage-section.in-view .engage-headline,
.engage-section.in-view .engage-sub {
  opacity: 1;
  transform: translateY(0);
}

.engage-section .engage-card {
  opacity: 0;
  transform: translateY(20px);
}
.engage-section .engage-card:nth-child(1) { transition: opacity 0.65s ease 0.38s, transform 0.65s ease 0.38s, border-color 0.25s, box-shadow 0.25s; }
.engage-section .engage-card:nth-child(2) { transition: opacity 0.65s ease 0.52s, transform 0.65s ease 0.52s, border-color 0.25s, box-shadow 0.25s; }
.engage-section .engage-card:nth-child(3) { transition: opacity 0.65s ease 0.66s, transform 0.65s ease 0.66s, border-color 0.25s, box-shadow 0.25s; }
.engage-section.in-view .engage-card {
  opacity: 1;
  transform: translateY(0);
}
.engage-section.in-view .engage-card:hover { transform: translateY(-4px); }

.engage-section .engage-note {
  opacity: 0;
  transition: opacity 0.6s ease 0.85s;
}
.engage-section.in-view .engage-note { opacity: 1; }

/* ─── PRINCIPLES ─────────────────────────────────────────── */
.principles-section {
  padding: 120px 80px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
}

/* Matches the 1200px content envelope used by For MSPs and Team Note directly
   above/below it, so the page doesn't widen/narrow between adjacent sections. */
.prin-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.prin-header {
  margin-bottom: 88px;
}
.prin-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 0.75;
  margin-bottom: 20px;
}
.prin-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.prin-sub {
  font-size: 1.0625rem;
  color: var(--white-55);
  font-weight: 400;
  line-height: 1.6;
}

/* Editorial list — a stated conviction, not a product feature grid.
   No boxes/hover-glow; a thin accent line draws in per-principle on scroll. */
.prin-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 40px;
  padding: 52px 0;
  border-top: 1px solid var(--white-07);
  cursor: default;
}
.prin-item:last-child { border-bottom: 1px solid var(--white-07); }

/* Ghost number */
.prin-num {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--orange);
  opacity: 0.30;
  line-height: 1;
}

.prin-item-body { position: relative; }

/* Accent line — draws left to right when the section reveals */
.prin-accent {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--orange);
  margin-bottom: 24px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Principle statement — the visual anchor */
.prin-statement {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.035em;
  line-height: 1.22;
  margin-bottom: 20px;
  max-width: 660px;
}

/* Body paragraph */
.prin-body {
  font-size: 1rem;
  color: var(--white-55);
  line-height: 1.85;
  font-weight: 400;
  max-width: 620px;
}

/* Proof tags — grounds each belief in a checkable practice instead of just
   asserting it; same chip language as Services/Featured Work/Tech Stack. */
.prin-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.prin-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--white-55);
  background: var(--white-04);
  border: 1px solid var(--white-07);
  border-radius: 100px;
  padding: 5px 13px;
  letter-spacing: 0.01em;
}

/* AI principle — tinted with the site's blue/purple AI-atmosphere pair
   instead of orange, same convention as the Tech Stack accent card. */
.prin-item--ai .prin-num { color: var(--blue); }
.prin-item--ai .prin-accent { background: linear-gradient(90deg, var(--blue), var(--purple)); }
.prin-item--ai .prin-tag {
  color: var(--white-80);
  background: rgba(79, 158, 255, 0.08);
  border-color: rgba(79, 158, 255, 0.18);
}

/* Reveal on scroll — items rise in staggered, accent line draws in after */
.principles-section .prin-headline {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
.principles-section .prin-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.22s, transform 0.6s ease 0.22s;
}
.principles-section.in-view .prin-headline,
.principles-section.in-view .prin-sub {
  opacity: 1;
  transform: translateY(0);
}

.prin-item {
  opacity: 0;
  transform: translateY(18px);
}
.prin-item:nth-child(1) { transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s; }
.prin-item:nth-child(2) { transition: opacity 0.6s ease 0.50s, transform 0.6s ease 0.50s; }
.prin-item:nth-child(3) { transition: opacity 0.6s ease 0.65s, transform 0.6s ease 0.65s; }
.prin-item:nth-child(4) { transition: opacity 0.6s ease 0.80s, transform 0.6s ease 0.80s; }
.principles-section.in-view .prin-item {
  opacity: 1;
  transform: translateY(0);
}

.prin-item:nth-child(1) .prin-accent { transition-delay: 0.55s; }
.prin-item:nth-child(2) .prin-accent { transition-delay: 0.70s; }
.prin-item:nth-child(3) .prin-accent { transition-delay: 0.85s; }
.prin-item:nth-child(4) .prin-accent { transition-delay: 1.00s; }
.principles-section.in-view .prin-accent { transform: scaleX(1); }

/* ─── LIGHT THEME — Principles ───────────────────────────────────────────
   Ghost numeral + orange accent line carry this section's identity already;
   only the text/hairline tokens flip. The AI item (#2) keeps the blue/purple
   convention in its background wash and accent, but the tag text moves to
   ink so it stays legible on paper (translucent white text was a dark-canvas
   trick that doesn't work in reverse). */
body.theme-light .principles-section { background: var(--paper); border-top: 1px solid var(--ink-08); }
body.theme-light .prin-headline { color: var(--ink); }
body.theme-light .prin-sub { color: var(--ink-60); }
body.theme-light .prin-item { border-top: 1px solid var(--ink-08); }
body.theme-light .prin-item:last-child { border-bottom: 1px solid var(--ink-08); }
body.theme-light .prin-statement { color: var(--ink); }
body.theme-light .prin-body { color: var(--ink-60); }
body.theme-light .prin-tag {
  color: var(--ink-60);
  background: var(--paper-2);
  border-color: var(--ink-15);
}
body.theme-light .prin-item--ai .prin-tag {
  color: var(--ink-80);
  background: rgba(79, 158, 255, 0.10);
  border-color: rgba(79, 158, 255, 0.28);
}

/* ─── FINAL CTA ──────────────────────────────────────────── */
.final-cta-section {
  position: relative;
  padding: 96px 80px 88px;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
  overflow: hidden;
  text-align: center;
}

/* Orange glow orb — sits dead-centre behind the text */
.fcta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255,82,0,0.18) 0%, rgba(255,82,0,0.06) 45%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: fctaGlowDrift 26s ease-in-out infinite;
}

.fcta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.fcta-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 0.75;
  margin-bottom: 28px;
}

.fcta-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 22px;
}

.fcta-sub {
  font-size: 1.0625rem;
  color: var(--white-70);
  line-height: 1.80;
  font-weight: 400;
  max-width: 500px;
  margin-bottom: 52px;
}

/* Actions: button + email */
.fcta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 44px;
}

.fcta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  padding: 18px 40px;
  border-radius: 5px;
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.fcta-btn:hover {
  background: var(--orange-lt);
  box-shadow: 0 0 60px rgba(255, 82, 0, 0.45), 0 0 120px rgba(255,82,0,0.15);
  transform: translateY(-2px);
}
.fcta-btn-arrow { transition: transform 0.2s; }
.fcta-btn:hover .fcta-btn-arrow { transform: translateX(5px); }

.fcta-email {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--white-70);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  border-bottom: 1px solid transparent;
}
.fcta-email:hover {
  color: var(--white);
  border-bottom-color: var(--white-30);
}

/* Trust signals row */
.fcta-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  font-size: 0.8125rem;
  color: var(--white-55);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.fcta-sep { margin: 0 14px; color: var(--white-12); }

/* Reveal on scroll — fast, single fade (the CTA shouldn't feel withheld) */
.final-cta-section .fcta-inner {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
}
.final-cta-section.in-view .fcta-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ─── LIGHT THEME — Final CTA ────────────────────────────────────────────
   The orange glow orb already carries this section's identity and is
   orange (not the blue/purple AI convention), so it needs no change at
   all — it reads as a warm halo on paper the same way it read on black. */
body.theme-light .final-cta-section { background: var(--paper); border-top: 1px solid var(--ink-08); }
body.theme-light .fcta-headline { color: var(--ink); }
body.theme-light .fcta-sub { color: var(--ink-60); }
body.theme-light .fcta-email { color: var(--ink-60); }
body.theme-light .fcta-email:hover { color: var(--ink); border-bottom-color: var(--ink-40); }
body.theme-light .fcta-trust { color: var(--ink-40); }
body.theme-light .fcta-sep { color: var(--ink-15); }

/* ─── SITE FOOTER ────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--black-veil);
  border-top: 1px solid var(--white-07);
  padding: 88px 80px 0;
}

/* Ambient light now pools behind the live-clock column instead of an empty
   centre — the same blue/purple "AI atmosphere" glow used sitewide, just
   re-aimed at the one piece of real content in the footer instead of dead
   space. Sits behind all real content (z-index 0 vs footer-inner's 1). */
.footer-glow {
  position: absolute;
  z-index: 0;
  top: 40%;
  right: 6%;
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  transform: translate(0, -50%);
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse, var(--blue) 0%, var(--purple) 55%, transparent 75%);
  opacity: 0.09;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Top: brand column + 4 nav columns */
.footer-top {
  display: grid;
  grid-template-columns: 220px repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--white-07);
}

/* Brand */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-logo {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--white);
  text-decoration: none;
  display: inline-block;
}
.footer-logo-caret {
  color: var(--white);
}
.footer-tagline {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white-55);
  line-height: 1.65;
  letter-spacing: -0.01em;
}
.footer-tagline em {
  font-style: normal;
  color: var(--orange);
}

/* Nav columns */
.footer-col-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-55);
  margin-bottom: 22px;
  display: block;
}
.footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-col-links a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--white-55);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color 0.2s;
}
.footer-col-links a:hover { color: var(--white); }

/* Deliberately quieter than its sibling links, not illegible */
/* Was dimmed to --white-30 at a smaller size, which read as a disabled link
   sitting next to three normal ones. It's a real destination — style it like
   its siblings. */
.footer-msp-link:hover { color: var(--white-80); }

.footer-email {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--orange) !important;
  opacity: 0.85;
}
.footer-email:hover { opacity: 1; }

/* Right Now — live overlap clock, the footer's signature. Real IANA-zone
   time (Asia/Kolkata / America/New_York), not a decorative flourish — see
   the geo-strip convention this borrows (mono, uppercase, green dot only
   during the real 9am-6pm ET overlap window). JS in main.js ticks it. */
.footer-live {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The shared .footer-col-label carries a 22px margin-bottom for its default
   sibling (a <ul>); here spacing between children comes from the flex gap
   above instead, so the margin would just double up on top of it. */
.footer-live .footer-col-label { margin-bottom: 0; }
.footer-clock-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-clock {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.footer-clock-time {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--white-80);
  letter-spacing: -0.01em;
}
.footer-clock-zone {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-30);
}
.footer-overlap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--white-30);
  transition: color 0.3s;
}
.footer-overlap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white-12);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.footer-overlap.is-active { color: var(--white-55); }
.footer-overlap.is-active .footer-overlap-dot {
  background: var(--green);
  box-shadow: 0 0 8px rgba(61, 214, 140, 0.6);
}
/* Blink, not a breathe — reads as "live" the way a recording indicator does,
   reinforcing that the clocks above are real time rather than a decorative
   readout. Matches the site's existing blink motif (the logo caret, the
   terminal cursor). Deliberately dips to 0.15 rather than 0: a status light
   that goes fully dark reads as "off", which would invert the meaning of the
   "Overlap active" label it sits next to. */
@media (prefers-reduced-motion: no-preference) {
  .footer-overlap.is-active .footer-overlap-dot {
    animation: footerDotBlink 1.4s ease-in-out infinite;
  }
}
@keyframes footerDotBlink {
  0%, 44%  { opacity: 1;    box-shadow: 0 0 10px rgba(61, 214, 140, 0.75); }
  52%, 60% { opacity: 0.15; box-shadow: 0 0 2px rgba(61, 214, 140, 0.15); }
  100%     { opacity: 1;    box-shadow: 0 0 10px rgba(61, 214, 140, 0.75); }
}

/* Content reveal — brand + 4 columns stagger in left to right. The footer had
   no entrance motion of its own once the old wordmark's rise (its only
   animated element) was removed; every other section on the page staggers
   in, so a flat footer read as the one static block on an otherwise-alive
   page. Same expo-out curve already used sitewide (was the wordmark's). */
.footer-top > * {
  opacity: 0;
  transform: translateY(16px);
}
.footer-top > *:nth-child(1) { transition: opacity 0.6s cubic-bezier(.22,.61,.36,1), transform 0.6s cubic-bezier(.22,.61,.36,1); }
.footer-top > *:nth-child(2) { transition: opacity 0.6s cubic-bezier(.22,.61,.36,1) 0.08s, transform 0.6s cubic-bezier(.22,.61,.36,1) 0.08s; }
.footer-top > *:nth-child(3) { transition: opacity 0.6s cubic-bezier(.22,.61,.36,1) 0.16s, transform 0.6s cubic-bezier(.22,.61,.36,1) 0.16s; }
.footer-top > *:nth-child(4) { transition: opacity 0.6s cubic-bezier(.22,.61,.36,1) 0.24s, transform 0.6s cubic-bezier(.22,.61,.36,1) 0.24s; }
.footer-top > *:nth-child(5) { transition: opacity 0.6s cubic-bezier(.22,.61,.36,1) 0.32s, transform 0.6s cubic-bezier(.22,.61,.36,1) 0.32s; }
.site-footer.in-view .footer-top > * {
  opacity: 1;
  transform: translateY(0);
}

/* Bottom strip */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 32px;
  opacity: 0;
  transition: opacity 0.6s ease 0.42s;
}
.site-footer.in-view .footer-bottom { opacity: 1; }
.footer-copy {
  font-size: 0.8125rem;
  color: var(--white-55);
  font-weight: 400;
}
/* Small mono prompt glyph, echoing the terminal chrome used elsewhere on the
   site (AI Advantage's code widget, mono eyebrows) — the closing line reads
   like a command finishing, not a stock legal footer. */
.footer-prompt {
  font-family: var(--font-mono);
  color: var(--orange);
  margin-right: 8px;
  opacity: 0.7;
}
.footer-legal {
  display: flex;
  align-items: center;
}
.footer-legal a {
  font-size: 0.8125rem;
  color: var(--white-30);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--white-55); }
.footer-legal-sep {
  margin: 0 12px;
  color: var(--white-12);
  font-size: 0.8125rem;
}

/* ─── SCROLL-TO-TOP ──────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--black-veil);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white-80);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s, color 0.2s, background 0.2s;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--dark-veil);
}
@media (max-width: 640px) {
  .scroll-top-btn { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn { transition: opacity 0.15s ease; }
}

/* ─── GEARBOT ────────────────────────────────────────────── */
/* Sitewide floating AI-agent widget. Bottom-right, stacked above
   .scroll-top-btn (also bottom-right, 44px tall) rather than sharing its
   row, so the two never overlap. */
.gearbot {
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 95;
}
.gearbot-toggle {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--black-veil);
  border: 1px solid var(--white-12);
  color: var(--white-80);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}
.gearbot-toggle:hover {
  border-color: rgba(0, 194, 255, 0.4);
  color: var(--white);
  transform: translateY(-2px);
}
.gearbot-toggle-icon { position: relative; z-index: 1; }
.gearbot-toggle-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--electric-blue), var(--electric-purple), var(--electric-blue));
  opacity: 0.4;
  filter: blur(10px);
  animation: gearbotPulse 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gearbotPulse {
  0%   { opacity: 0.28; transform: scale(0.92) rotate(0deg); }
  50%  { opacity: 0.55; transform: scale(1.1) rotate(180deg); }
  100% { opacity: 0.28; transform: scale(0.92) rotate(360deg); }
}
.gearbot.is-open .gearbot-toggle-icon { opacity: 0; }
.gearbot.is-open .gearbot-toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}

.gearbot-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: 320px;
  background: var(--dark-veil);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--white-12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.gearbot.is-open .gearbot-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.gearbot-panel[hidden] { display: block; } /* JS toggles visibility via .is-open, not [hidden], once first opened */

.gearbot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--white-07);
}
.gearbot-head-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
}
.gearbot-head-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--white);
  letter-spacing: -0.01em;
}
.gearbot-head-tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--electric-blue);
  background: rgba(0, 194, 255, 0.1);
  border: 1px solid rgba(0, 194, 255, 0.3);
  border-radius: 100px;
  padding: 2px 8px;
}
.gearbot-close {
  margin-left: auto;
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-30);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.gearbot-close:hover { color: var(--white-80); background: var(--white-07); }

.gearbot-body {
  padding: 16px 14px;
  min-height: 168px;
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* No justify-content: flex-end here on purpose — that's what silently
     broke scrolling up to earlier messages once a reply got long enough to
     overflow: flexbox can't scroll to content pushed above a flex-end-
     aligned container's visible area. main.js already sets scrollTop to
     scrollHeight after every new line, so the latest message still stays
     in view without needing flex alignment tricks that block scroll-up. */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
/* Explicit, always-visible scrollbar (Chrome/Safari/Edge) — the fix above
   made scrolling *work*, but a default OS scrollbar can still be nearly
   invisible until hover, which reads as "there's no way to scroll" even
   though there is. This makes the affordance itself visible. */
.gearbot-body::-webkit-scrollbar { width: 6px; }
.gearbot-body::-webkit-scrollbar-track { background: transparent; }
.gearbot-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}
.gearbot-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
.gearbot-line {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  animation: gearbotLineIn 0.4s ease forwards;
}
@keyframes gearbotLineIn {
  to { opacity: 1; transform: translateY(0); }
}
.gearbot-line--user {
  align-self: flex-end;
  background: var(--white-07);
  border: 1px solid var(--white-12);
  color: var(--white-80);
  border-bottom-right-radius: 4px;
}
.gearbot-line--bot {
  align-self: flex-start;
  background: rgba(0, 194, 255, 0.08);
  border: 1px solid rgba(0, 194, 255, 0.2);
  color: var(--white-80);
  border-bottom-left-radius: 4px;
}
.gearbot-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: rgba(0, 194, 255, 0.08);
  border: 1px solid rgba(0, 194, 255, 0.2);
}
.gearbot-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--electric-blue);
  opacity: 0.5;
  animation: gearbotTyping 1.1s ease-in-out infinite;
}
.gearbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.gearbot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes gearbotTyping {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.gearbot-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--white-07);
}
.gearbot-input {
  flex: 1;
  min-width: 0;
  background: var(--white-04);
  border: 1px solid var(--white-12);
  border-radius: 100px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--white-80);
  transition: border-color 0.2s, background 0.2s;
}
.gearbot-input::placeholder { color: var(--white-30); }
.gearbot-input:focus {
  outline: none;
  border-color: rgba(0, 194, 255, 0.4);
  background: var(--white-07);
}
.gearbot-input:disabled { opacity: 0.5; }
.gearbot-send {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 194, 255, 0.3);
  background: rgba(0, 194, 255, 0.1);
  color: var(--electric-blue);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.gearbot-send:hover:not(:disabled) { background: rgba(0, 194, 255, 0.2); border-color: rgba(0, 194, 255, 0.5); }
.gearbot-send:disabled { opacity: 0.4; cursor: default; }

.gearbot-cta {
  display: block;
  text-align: center;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--orange);
  border-top: 1px solid var(--white-07);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.gearbot-cta:hover { background: rgba(255, 82, 0, 0.06); color: var(--orange); }

@media (max-width: 640px) {
  .gearbot { right: 16px; bottom: 68px; }
  .gearbot-toggle { width: 46px; height: 46px; }
  .gearbot-panel { width: calc(100vw - 32px); max-width: 340px; bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .gearbot-toggle-glow { animation: none; opacity: 0.35; }
  .gearbot-panel { transition: opacity 0.15s ease; }
  .gearbot-line { animation: none; opacity: 1; transform: none; }
  .gearbot-typing span { animation: none; opacity: 0.6; }
}

/* ─── ENTRANCE ANIMATIONS ────────────────────────────────── */
/* Hidden by default — no animation plays until either GSAP takes
   over (hero-animations.js) or the fallback timer in functions.php's
   wp_head fires (only if GSAP hasn't taken over within 1.2s, e.g. a
   slow/failed CDN load). This avoids a flash-in-then-vanish-then-
   reanimate race between this CSS animation and GSAP's load time. */
.fade-rise {
  opacity: 0;
  transform: translateY(20px);
}
html.fade-rise-fallback .fade-rise {
  animation: fadeRise 0.65s ease forwards;
}
@keyframes fadeRise {
  to { opacity: 1; transform: translateY(0); }
}
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.28s; }
.d4 { animation-delay: 0.38s; }
.d5 { animation-delay: 0.48s; }
.d6 { animation-delay: 0.58s; }

/* ─── MOBILE RESPONSIVE OVERRIDES ────────────────────────────
   Placed at the end of the file so these win on source order
   for any specificity ties with the desktop rules above.
   Nav already has its own breakpoint at 960px (see top of file);
   this block handles every other section's layout at 768px. ─── */
@media (max-width: 768px) {

  /* Hero */
  .hero { padding: 100px 20px 60px; }
  .hero-prompt { padding: 14px 16px; margin-bottom: 32px; }
  .hero-prompt-line { font-size: 0.75rem; }
  .hero-prompt-result { font-size: 0.6875rem; }
  .hero-trust {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .trust-divider { display: none; }
  .hero-ai-glow { filter: blur(48px); }
  .hero-ai-glow--1 { width: 70vw; height: 70vw; }
  .hero-ai-glow--2 { width: 60vw; height: 60vw; }

  /* Trust Strip */
  .trust-strip { padding: 48px 20px 56px; }

  /* Services */
  .services-section { padding: 64px 20px 56px; }
  .services-grid { grid-template-columns: 1fr; grid-template-rows: none; }

  /* Featured Work */
  .work-section { padding: 64px 20px 56px; }
  .work-card { flex-direction: column; gap: 24px; }
  .wc-num { font-size: 2.5rem; }

  /* Testimonials — three-up grid collapses to a single column. */
  .testi-section { padding: 64px 0; }
  .testi-header { padding: 0 20px; }
  .testi-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 20px;
  }

  /* How We Work */
  .how-section { padding: 64px 20px 56px; }
  .how-step { grid-template-columns: 1fr; gap: 16px; }
  .step-title { font-size: 1.375rem; }
  .how-rail-track, .how-rail-fill, .how-node { display: none; }
  .how-trust { grid-template-columns: 1fr; gap: 32px; padding: 36px 0 40px; }

  /* AI Advantage */
  .ai-section { padding: 64px 20px 56px; }
  .ai-inner { grid-template-columns: 1fr; gap: 40px; }
  .ai-right { justify-content: center; }
  /* .ai-tools's desktop grid-template-columns:repeat(3,max-content) doesn't
     shrink below its content's intrinsic width — on a narrow viewport that
     inflated .ai-inner's single mobile column past the screen edge, dragging
     the code widget below it along with it (real device bug, not caught by
     desktop-width testing). Flex-wrap has no minimum intrinsic width. */
  .ai-tools { display: flex; flex-wrap: wrap; }
  .ai-glow { filter: blur(48px); }
  .ai-glow--1 { width: 65vw; height: 65vw; }
  .ai-glow--2 { width: 55vw; height: 55vw; }
  .ai-benefits-strip { margin-top: 48px; }
  .ai-benefits { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .ai-benefit { padding: 20px 0 0; }

  /* Engagement Models */
  .engage-section { padding: 64px 20px 56px; }
  .engage-grid { grid-template-columns: 1fr; }

  /* Principles */
  .principles-section { padding: 64px 20px 56px; }
  .prin-item { grid-template-columns: 1fr; gap: 12px 0; }
  .prin-num { font-size: 1.5rem; }

  /* GearUp for Good */
  .good-section { padding: 64px 20px 56px; }
  .good-grid { grid-template-columns: 1fr; }
  .good-stats { flex-wrap: wrap; row-gap: 28px; margin-bottom: 48px; }
  .good-stat { padding: 0 24px; }
  .good-stat-num { font-size: 2.125rem; }

  /* Team Note */
  .team-note-section { padding: 64px 20px 64px; }
  .tn-inner { grid-template-columns: 1fr; gap: 40px; }
  .tn-left { position: static; }
  .tn-left-footer { border-top: none; padding-top: 0; }
  .tn-right { max-width: 100%; }
  .tn-pull { font-size: 1.25rem !important; padding-left: 18px; }

  /* MSP Strip */
  .msp-section { padding: 64px 20px 56px; }
  .msp-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .msp-statement { max-width: 100%; }
  .msp-demo { align-items: center; }

  /* Final CTA */
  .final-cta-section { padding: 72px 20px 88px; }
  .fcta-glow { width: 100%; height: 320px; }

  /* Footer */
  .site-footer { padding: 56px 20px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked + extra bottom clearance so the fixed scroll-top-btn (40px,
     bottom:16px on this breakpoint) never sits on top of the legal links
     at the page's resting scroll position. */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 0 88px; }
}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGES — /about, /gearup-for-good, legal pages, 404
   Added when the homepage trim pushed content onto real pages. Reuses
   the site's existing tokens and atmosphere; no new visual language.
   ═══════════════════════════════════════════════════════════════════ */

/* Page hero — compact, carries the page's single h1. Deliberately shorter
   than the homepage hero so inner pages get to their content fast. */
.page-hero {
  position: relative;
  padding: 164px 80px 72px;
  background: var(--black-veil);
  border-bottom: 1px solid var(--white-07);
}
.page-hero-inner {
  max-width: 1200px;
  margin-inline: auto;
}
.page-hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
}
.page-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0;
  max-width: 940px;
}
.page-hero-title em {
  font-style: normal;
  color: var(--orange);
}
.page-hero-sub {
  margin: 26px 0 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--white-55);
  max-width: 60ch;
}

/* ─── LIGHT THEME — rolling out page by page, starting with /about ─────────
   Reason: the dark canvas (veils + blue/purple ambient glow) reads as a dim,
   enclosed room. Scoped entirely under body.theme-light so the rest of the
   site (still dark) is untouched. Deliberately does NOT reuse the sitewide
   blue/purple "AI signal" glow — this page isn't about AI, it's the founder
   origin story, so the signature is a warm daylight wash instead. */
body.theme-light {
  --paper:      #F6F5F1;
  --paper-2:    #EFEDE7;
  --ink:        #101010;
  --ink-80:     rgba(16, 16, 16, 0.80);
  --ink-60:     rgba(16, 16, 16, 0.60);
  --ink-40:     rgba(16, 16, 16, 0.40);
  --ink-15:     rgba(16, 16, 16, 0.15);
  --ink-08:     rgba(16, 16, 16, 0.08);
  background: var(--paper);
  color: var(--ink);
}

body.theme-light .page-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: none;
  padding: 196px 80px 108px;
}
/* Daylight wash — a soft warm glow breaking in from the top, the literal
   image behind "claustrophobic dark room → open, lit room." */
body.theme-light .page-hero::before {
  content: '';
  position: absolute;
  top: -260px;
  left: 50%;
  width: 1140px;
  height: 680px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 152, 64, 0.16), rgba(255, 152, 64, 0) 70%);
  pointer-events: none;
}
/* Fine grain keeps the off-white from reading flat/sterile at this scale */
body.theme-light .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
body.theme-light .page-hero-inner {
  position: relative;
  z-index: 1;
}
body.theme-light .page-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--orange);
}
body.theme-light .page-hero-eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--orange);
}
body.theme-light .page-hero-title {
  color: var(--ink);
}
body.theme-light .page-hero-title em {
  font-style: normal;
  color: var(--orange);
}
body.theme-light .page-hero-sub {
  color: var(--ink-60);
}
@media (max-width: 960px) {
  body.theme-light .page-hero { padding: 152px 20px 64px; }
  body.theme-light .page-hero::before { width: 720px; height: 460px; top: -200px; }
}

/* Long-form body — the legal pages render into this via the_content(). */
.page-body {
  padding: 88px 80px 120px;
  background: var(--dark-veil);
}
.page-body-inner {
  max-width: 760px;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--white-55);
}
.page-body-inner > * + * { margin-top: 22px; }
.page-body-inner h2 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-top: 48px;
}
.page-body-inner strong { color: var(--white-80); font-weight: 600; }
.page-body-inner a { color: var(--orange); text-decoration: none; }
.page-body-inner a:hover { text-decoration: underline; }

/* ─── 404 ───────────────────────────────────────────────────────── */
.err-section {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 180px 80px 120px;
  background: var(--black-veil);
}
.err-glow {
  position: absolute;
  z-index: 0;
  top: 42%;
  left: 50%;
  width: 56vw;
  height: 56vw;
  max-width: 680px;
  max-height: 680px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(ellipse, var(--orange) 0%, transparent 70%);
  opacity: 0.07;
  pointer-events: none;
}
.err-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
.err-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
}
.err-headline {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0;
}
.err-sub {
  margin: 24px 0 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--white-55);
  max-width: 52ch;
}

/* Echoes the AI Advantage terminal rather than inventing a new motif. */
.err-terminal {
  margin-top: 40px;
  max-width: 560px;
  padding: 18px 20px;
  border: 1px solid var(--white-07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.9;
}
.err-term-line .term-prompt { color: var(--orange); margin-right: 10px; }
.err-term-line .term-cmd { color: var(--white-80); word-break: break-all; }
.err-term-out { color: var(--white-30); }

.err-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
}
.err-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), filter 0.3s;
}
.err-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.err-btn-arrow { transition: transform 0.3s; }
.err-btn:hover .err-btn-arrow { transform: translateX(4px); }
.err-link {
  font-size: 0.9375rem;
  color: var(--white-55);
  text-decoration: none;
  border-bottom: 1px solid var(--white-07);
  padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}
.err-link:hover { color: var(--white); border-bottom-color: var(--orange); }

.err-suggest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--white-07);
  font-size: 0.875rem;
}
.err-suggest-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-30);
  margin-right: 6px;
}
.err-suggest a { color: var(--white-55); text-decoration: none; transition: color 0.25s; }
.err-suggest a:hover { color: var(--orange); }
.err-suggest-sep { color: var(--white-30); }

@media (max-width: 960px) {
  .page-hero { padding: 128px 20px 48px; }
  .page-hero-title { max-width: none; }
  .page-body { padding: 56px 20px 72px; }
  .err-section { padding: 128px 20px 72px; min-height: 0; }
  .err-links { gap: 20px; }
  .err-suggest { margin-top: 40px; }
}

/* ─── FIT FILTER ─────────────────────────────────────────────────
   Does the lead-qualification job that published pricing normally does
   (the user has decided against showing prices). Two contrasting lists,
   deliberately NOT another bordered-card grid — Services, Featured Work,
   For MSPs and Engagement already use that motif. */
.fit-section {
  padding: 120px 80px;
  background: var(--dark-veil);
  border-top: 1px solid var(--white-07);
}
.fit-inner {
  max-width: 1200px;
  margin-inline: auto;
}
.fit-header { margin-bottom: 64px; max-width: 62ch; }
.fit-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 0.75;
  margin-bottom: 18px;
}
.fit-headline {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}
.fit-sub {
  margin: 18px 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--white-70);
}

/* WHITE ISLAND, second and last one (2026-08-30) — a real GitHub-style diff
   reads on a light panel, not a dark one, so this is the one case where a
   white surface is more ACCURATE to the real thing being referenced, not
   just decoration. Colored per the universal diff convention (green =
   added) rather than brand orange, since that convention is what makes it
   instantly legible as a real diff to the technical buyers it's aimed at.
   No red for the "no" column on purpose — "not a fit" isn't an error/danger
   state, just quieter information, so it stays neutral ink instead of
   reaching for a whole new alarm color. See the Testimonials white card
   above for the first island and [[feedback_gearupcode_dark_theme]] for why
   the rest of the page isn't following either of these. */
.fit-diff {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 48px;
  background: #FAFAF7;
  border: 1px solid rgba(8, 8, 8, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.20);
}
.fit-diff-divider { background: rgba(8, 8, 8, 0.10); }
.fit-diff-col { padding: 32px 8px 32px 32px; }
.fit-diff-col--no { padding: 32px 32px 32px 8px; }

/* Real code comments read lowercase, not an uppercase marketing label — a
   small, deliberate signal that this section speaks in the visitor's own
   vocabulary rather than ours. */
.fit-diff-comment {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin: 0 0 22px;
  opacity: 0.85;
}
.fit-diff-col--yes .fit-diff-comment { color: var(--green-deep); }
.fit-diff-col--no  .fit-diff-comment { color: rgba(8, 8, 8, 0.42); }

.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 12px;
  margin: 0 -12px 2px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: background 0.2s, border-color 0.2s;
}
/* Marker carries the yes/no signal, same width as a diff gutter so every
   line's text starts at the same x position. */
.fit-diff-marker {
  flex-shrink: 0;
  width: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.5;
  text-align: center;
}
/* Added-line tint, same idea as GitHub/VS Code diff backgrounds — the wash
   sits under the text at rest, not just on hover, so the "yes" column
   reads as affirmed rather than waiting for interaction to prove it. */
.fit-diff-col--yes .fit-list li {
  color: rgba(8, 8, 8, 0.80);
  background: rgba(61, 214, 140, 0.10);
}
.fit-diff-col--yes .fit-diff-marker { color: var(--green-deep); }
.fit-diff-col--yes .fit-list li:hover {
  background: rgba(61, 214, 140, 0.18);
  border-left-color: var(--green-deep);
}
.fit-diff-col--no .fit-list li { color: rgba(8, 8, 8, 0.58); }
.fit-diff-col--no .fit-diff-marker { color: rgba(8, 8, 8, 0.32); }
.fit-diff-col--no .fit-list li:hover {
  background: rgba(8, 8, 8, 0.045);
  border-left-color: rgba(8, 8, 8, 0.28);
}

/* Reveal is now GSAP-driven (assets/js/fit-animations.js) — a real stagger
   across header text, then each row + its icon, rather than the two column
   blocks fading in as flat units. See that file for the reduced-motion and
   no-JS-fallback handling; no opacity:0 default lives in CSS anymore. */

@media (prefers-reduced-motion: reduce) {
  .footer-top > * { opacity: 1; transform: none; transition: none; }
  .footer-bottom { opacity: 1; transition: none; }
}

@media (max-width: 960px) {
  .fit-section { padding: 64px 20px; }
  .fit-header { margin-bottom: 40px; }
  .fit-diff { grid-template-columns: 1fr; gap: 0; }
  .fit-diff-divider { display: none; }
  .fit-diff-col { padding: 28px 20px; }
  .fit-diff-col--no {
    padding: 28px 20px;
    border-top: 1px solid var(--white-07);
  }
}


/* Right Now clock ticks in real time and its dot lights up on its own — that
   ambient liveliness is the footer's motion, so no separate scroll-reveal
   animation is layered on top of it. */


/* ─── FINAL CTA: motion ──────────────────────────────────────────
   The closing frame was entirely static. Same principle as the site-wide
   ambient layers: moving light reads as environment, static light reads as
   a backdrop. No new colour, no new motif. */
@keyframes fctaGlowDrift {
  0%, 100% { transform: translate(-50%, -50%) scale(1);      opacity: 1;    }
  33%      { transform: translate(-54%, -47%) scale(1.09);   opacity: 0.86; }
  66%      { transform: translate(-46%, -53%) scale(0.95);   opacity: 1.08; }
}

/* Staggered entrance so the CTA assembles rather than just appearing. */
.final-cta-section .fcta-eyebrow,
.final-cta-section .fcta-headline,
.final-cta-section .fcta-sub,
.final-cta-section .fcta-actions,
.final-cta-section .fcta-trust {
  opacity: 0;
  transform: translateY(18px);
}
.final-cta-section .fcta-eyebrow  { transition: opacity .6s ease .05s, transform .6s cubic-bezier(.22,.61,.36,1) .05s; }
.final-cta-section .fcta-headline { transition: opacity .7s ease .14s, transform .7s cubic-bezier(.22,.61,.36,1) .14s; }
.final-cta-section .fcta-sub      { transition: opacity .6s ease .26s, transform .6s cubic-bezier(.22,.61,.36,1) .26s; }
.final-cta-section .fcta-actions  { transition: opacity .6s ease .36s, transform .6s cubic-bezier(.22,.61,.36,1) .36s; }
.final-cta-section .fcta-trust    { transition: opacity .6s ease .46s, transform .6s cubic-bezier(.22,.61,.36,1) .46s; }
.final-cta-section.in-view .fcta-eyebrow,
.final-cta-section.in-view .fcta-headline,
.final-cta-section.in-view .fcta-sub,
.final-cta-section.in-view .fcta-actions,
.final-cta-section.in-view .fcta-trust {
  opacity: 1;
  transform: translateY(0);
}

/* Light sweeps across the button on hover. */
.fcta-btn { position: relative; overflow: hidden; }
.fcta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
  transition: transform 0.65s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.fcta-btn:hover::after { transform: translateX(120%); }
.fcta-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .fcta-glow { animation: none; }
  .final-cta-section .fcta-eyebrow,
  .final-cta-section .fcta-headline,
  .final-cta-section .fcta-sub,
  .final-cta-section .fcta-actions,
  .final-cta-section .fcta-trust { opacity: 1; transform: none; transition: none; }
  .fcta-btn::after { display: none; }
}

/* ─── SERVICES PAGE — HERO ───────────────────────────────────────
   Split hero for the Services pillar page: copy on the left, a practice
   index on the right that doubles as in-page navigation. Deliberately
   avoids every existing section's centerpiece motif — no terminal chrome
   (AI Advantage), no code-comment diff (Fit), no bordered-card grid
   (Services band / Work / MSP / Engagement). Its own identity is the
   ruled index list.
   ════════════════════════════════════════════════════════════════ */
.svch {
  position: relative;
  overflow: hidden;
  padding: 172px 80px 104px;
  background: var(--black-veil);
  border-bottom: 1px solid var(--white-07);
}

/* ── Aurora field ───────────────────────────────────────────────
   Replaced a drawn SVG convergence diagram (see page-services.php for why).
   Three blurred colour fields on long mismatched cycles, plus grain.

   This is the sitewide ambient-glow idea amplified for a hero, NOT a second
   competing system: it uses --electric-blue/--electric-purple, the pair that
   already exists specifically for hero glows, so the muted sitewide
   --blue/--purple keep their own meanings elsewhere untouched. */
.svch-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.svch-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* screen against the near-black canvas: colours add as light rather than
     sitting on top as paint, which is what keeps them from looking like
     flat coloured shapes. */
  mix-blend-mode: screen;
  will-change: transform;
}
/* Resized 2026-08-30: these blobs were the primary reason this hero didn't
   feel like the same product as the homepage hero. The homepage's
   .hero-ai-glow pair is a small, defined, restrained corner accent
   (max 460px/400px, 60px blur) — this was instead a huge, heavily-blurred
   atmospheric wash covering nearly half the viewport (max 780px/700px,
   90-100px blur) at low opacity, which reads as generic-abstract-SaaS
   rather than a light source. Matched to the homepage glow's actual scale
   and blur radius; opacity raised since a smaller/sharper shape needs more
   of it to still read, but kept below the homepage's 0.7 since this hero
   has no video+overlay underneath darkening the canvas first. */
.svch-blob--blue {
  top: -20%;
  left: -8%;
  width: 30vw;
  height: 30vw;
  max-width: 460px;
  max-height: 460px;
  background: radial-gradient(circle, var(--electric-blue) 0%, transparent 66%);
  opacity: 0.38;
  filter: blur(60px);
  animation: svchDrift1 37s ease-in-out infinite;
}
.svch-blob--purple {
  bottom: -22%;
  right: -6%;
  width: 26vw;
  height: 26vw;
  max-width: 400px;
  max-height: 400px;
  background: radial-gradient(circle, var(--electric-purple) 0%, transparent 66%);
  opacity: 0.34;
  filter: blur(65px);
  animation: svchDrift2 46s ease-in-out infinite;
}
/* Warm field keeps the brand temperature in the hero now that the separate
   orange glow div is gone. Deliberately the faintest of the three — orange is
   the action colour on this site and shouldn't read as atmosphere. */
.svch-blob--warm {
  top: 20%;
  left: 36%;
  width: 20vw;
  height: 20vw;
  max-width: 320px;
  max-height: 320px;
  background: radial-gradient(circle, var(--orange) 0%, transparent 64%);
  /* Was 0.10, on the reasoning that orange is the action colour and ambient
     orange competes with it. That still holds for hard-edged orange, but this
     blob is blurred and reads as colour temperature, not as an interactive
     mark, and 0.10 left the hero lit entirely by blue and purple, which is
     literally cold light. 0.15 warms the composition without putting a
     second "clickable" orange anywhere near the CTA. */
  opacity: 0.15;
  filter: blur(72px);
  animation: svchDrift3 59s ease-in-out infinite;
}

/* Three distinct paths at coprime-ish durations so the composite never
   visibly repeats. Transform-only — no layout, no paint of the blur itself. */
@keyframes svchDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(7vw, 4vh, 0) scale(1.12); }
  66%      { transform: translate3d(3vw, -3vh, 0) scale(0.95); }
}
@keyframes svchDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-6vw, -5vh, 0) scale(1.15); }
  75%      { transform: translate3d(-2vw, 3vh, 0) scale(0.94); }
}
@keyframes svchDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, 6vh, 0) scale(1.2); }
}

/* Fine grain. The single most effective thing for stopping large dark
   gradients from banding into visible steps, which is the usual reason an
   aurora background reads as cheap. Inline feTurbulence, no asset request. */
.svch-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Particle assembly ───────────────────────────────────────────
   FOURTH attempt at this hero's right-side decoration -- see the markup
   comment in page-services.php for the history. Same footprint, position
   and edge mask as the orbit rings it replaces (proven not to collide with
   the headline), so only the content of this box changed, not its layout
   contract with the rest of the hero. All drawing happens in
   services-particles.js (canvas) -- nothing here but the box itself. */
.svch-particles {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 88%, transparent 100%);
}

@media (max-width: 1180px) {
  /* Below this the copy column and the particle field start competing for
     the same pixels -- same call as the orbit rings it replaced. */
  .svch-particles { display: none; }
}

@media (max-width: 960px) {
  /* Three large blurs are the most expensive thing in this hero to composite.
     Keep two, shrink the blur radii, drop the warm field entirely. */
  .svch-blob--warm { display: none; }
  .svch-blob--blue { width: 90vw; height: 90vw; filter: blur(64px); }
  .svch-blob--purple { width: 80vw; height: 80vw; filter: blur(70px); }
}

@media (prefers-reduced-motion: reduce) {
  .svch-blob { animation: none; }
}
.svch-inner {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
}
/* Single column. The practice index that used to sit on the right became its
   own section: services need a summary and their own CTA each, which a hero
   sidebar can never give them without forcing permanent one-liners. Freeing
   the right half also lets the convergence field span the full width, which
   is the only reason that animation is worth its cost. */
.svch-copy { max-width: 900px; }

/* ── Left: copy ─────────────────────────────────────────────── */
.svch-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.svch-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
/* First touch of the "structured data" idea this hero introduces — the page's
   own schema type, named plainly. Quiet on purpose: the eyebrow still leads,
   this is a footnote next to it, not a second eyebrow. */
.svch-schema-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}
.svch-title {
  font-family: var(--font-head);
  /* Line 2 measured 609px at a 52px cap. The copy column is 900px now that
     the index column is gone, so 60px is safe (~703px projected) with real
     headroom. This has NOT been re-measured in a browser since the column
     widened — if the headline ever wraps to 3 lines, this cap is why. */
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0;
}
/* Two deliberate lines. No SplitType runs on this page, so no !important
   is needed here, unlike the homepage hero's .hh-line. */
.svch-line { display: block; }

/* ── Rotating noun ──────────────────────────────────────────────
   inline-grid with every word stacked in the SAME grid cell (grid-area 1/1).
   This is the whole trick and it is why there is no measuring code in the JS:
   grid sizes the container to its widest and tallest child automatically, so
   the container never changes size as words swap and the line cannot reflow
   mid-animation. The alternative — absolutely positioning the words and
   tweening the container width — collapses the container's height and needs
   width measurement that goes stale on resize. */
.svch-rot {
  display: inline-grid;
  vertical-align: baseline;
  /* Trailing slack equal to the widest word is invisible at the end of a
     line, so no alignment work is needed beyond starting them flush left. */
  justify-items: start;
}
.svch-rot-word {
  grid-area: 1 / 1;
  white-space: nowrap;
  color: var(--orange);
}
/* Without JS every word would stack visibly on top of the others. Hide all
   but the first by default; the JS reveals the ones it is about to animate.
   This means the no-JS/CDN-failure state is a correct static headline. */
.svch-rot-word:not(:first-child) { opacity: 0; }
.svch-sub {
  margin: 28px 0 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--white-70);
  max-width: 52ch;
}

/* Same glass-panel material as the homepage's .hero-prompt, deliberately —
   see the markup comment in page-services.php for why. */
.svch-terminal {
  width: 100%;
  max-width: 480px;
  margin: 28px 0 0;
  background: rgba(8, 8, 8, 0.55);
  border: 1px solid var(--white-12);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
}
.svch-terminal-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--white-80);
  min-height: 1.5em;
}
.svch-terminal-prompt {
  color: var(--orange);
  font-weight: 600;
  flex-shrink: 0;
}
.svch-terminal-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--orange);
  border-radius: 1px;
  margin-left: 2px;
  transform: translateY(2px);
  animation: logoBlink 1.1s step-end infinite;
}
.svch-terminal-result {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--white-70);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--white-07);
}
.svch-terminal-check {
  color: var(--green);
  font-weight: 600;
}

.svch-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 40px;
}
.svch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 4px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s;
}
.svch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px var(--orange-glow);
}
.svch-btn-arrow { transition: transform 0.3s cubic-bezier(.22,.61,.36,1); }
.svch-btn:hover .svch-btn-arrow { transform: translateX(4px); }

.svch-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white-70);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.28s, border-color 0.28s;
}
.svch-link:hover {
  color: var(--white);
  border-bottom-color: var(--white-30);
}
.svch-link-arrow { transition: transform 0.28s cubic-bezier(.22,.61,.36,1); }
.svch-link:hover .svch-link-arrow { transform: translateX(3px); }

.svch-meta {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--white-07);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.9;
  color: var(--white-70);
}
.svch-meta-sep { color: var(--white-30); margin: 0 6px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .svch-sub { max-width: 60ch; }
}

@media (max-width: 960px) {
  .svch { padding: 132px 20px 72px; }
  .svch-meta { margin-top: 36px; }
}

@media (max-width: 520px) {
  .svch-actions { gap: 16px 22px; }
  .svch-btn { width: 100%; justify-content: center; }
}

/* ── Motion ─────────────────────────────────────────────────────
   GSAP (assets/js/services-hero.js) owns the copy entrance and sets the hidden
   start state itself via from(), so nothing is ever stuck invisible if the CDN
   fails. The background is pure CSS and needs no JS at all now. Only the
   reduced-motion overrides live here (the aurora has its own, above). */
@media (prefers-reduced-motion: reduce) {
  .svch-btn,
  .svch-btn-arrow,
  .svch-link,
  .svch-link-arrow { transition: none; }
  /* The rotator never starts (its whole block is inside a matchMedia
     no-preference query), so the first word simply stays put. Pin it
     explicitly so it cannot be left mid-tween by a preference change. */
  .svch-rot-word:first-child { opacity: 1 !important; transform: none !important; }
}

/* ─── SERVICES PAGE — THE TEN ─────────────────────────────────────
   2-up hairline lattice; the two AI-era practices are promoted to full-width
   banners so the differentiators get the space and five identical rows get
   broken up. No card borders: Featured Work, For MSPs and Engagement Models
   already own that motif, and the homepage band owns the 4-across
   ghost-numeral treatment. Identity here is the lattice plus the icon set.
   ════════════════════════════════════════════════════════════════ */
.svcx {
  position: relative;
  padding: 120px 80px;
  /* Warm wash, then the veil colour beneath it. This section was lit entirely
     by cold light — a white blueprint grid, white traces, and the blue/purple
     sitewide ambient — which is the real reason it read as clinical. Two very
     diffuse radials shift the colour temperature without adding an element, a
     new colour token, or a byte of payload.

     Deliberately on .svcx and NOT on .svcx-bg, even though the circuit field
     lives there: .svcx-bg is display:none below 1080px (no gutters left to
     draw the traces in), so putting the warmth there would have quietly
     removed it on every phone.

     Alpha is capped well under the legibility ceiling on purpose. Ten cells
     of --white-55 copy sit on top of this; stronger than ~4% starts tinting
     the background behind small dim text rather than the section's edges.
     Precedent: the homepage services section's ::before wash at 4.5%.

     2026-08-30: base swapped from --dark-veil to --black-veil, matching
     every other content section on this page and the homepage (the two
     tokens differ by 7 RGB units, imperceptible on their own — this is a
     consistency fix, not a colour-temperature one). Also pushed the first
     radial's anchor down from 12% to 26% — at 12% it peaked close enough
     to the very top edge to read as a faint warm onset right at the seam
     with the hero above, the same "local wash starts abruptly at the
     boundary" pattern that caused real seams on the homepage. */
  background-color: var(--black-veil);
  background-image:
    radial-gradient(70% 55% at 0% 26%,   rgba(255, 82, 0, 0.038) 0%, transparent 70%),
    radial-gradient(65% 50% at 100% 88%, rgba(255, 122, 61, 0.028) 0%, transparent 72%);
  border-top: 1px solid var(--white-07);
}
.svcx-inner {
  /* Sits above .svcx-bg — both are children of .svcx, so without a position
     the background layer would paint over the content. */
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}

.svcx-header {
  max-width: 62ch;
  margin-bottom: 64px;
}
.svcx-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  opacity: 0.75;
  margin-bottom: 18px;
}
.svcx-headline {
  font-family: var(--font-head);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}
.svcx-sub {
  margin: 20px 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--white-70);
}

.svcx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--white-07);
}

.svcx-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 40px 30px 32px;
  border-top: 1px solid var(--white-07);
  transition: background 0.34s;
}
/* Vertical rule, drawn only on right-hand cells so it never lands on the
   grid's outer edge. See the template comment: this is an explicit class and
   NOT :nth-child(even), because the full-width banners break the odd/even
   sequence and nth-child silently stops matching after the first one. */
.svcx-item--r { border-left: 1px solid var(--white-07); }

/* Full-width banners for the two AI-era practices. */
.svcx-item--accent {
  grid-column: 1 / -1;
  padding: 38px 40px 34px 32px;
  background: linear-gradient(
    100deg,
    rgba(255, 82, 0, 0.045) 0%,
    rgba(255, 82, 0, 0.012) 42%,
    transparent 72%
  );
}
.svcx-item--accent .svcx-name { font-size: 1.5rem; }
.svcx-item--accent .svcx-desc { max-width: 74ch; }

/* Left accent bar. Grows on hover, and is also shown for :target so landing
   on /services#pos-systems from a link shows you where you arrived. */
.svcx-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 0;
  width: 2px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.34s cubic-bezier(.22,.61,.36,1);
}
.svcx-item:hover { background: var(--white-04); }
.svcx-item:hover::before,
.svcx-item:target::before { transform: scaleY(1); }
.svcx-item:target { background: var(--white-04); }
/* Banners keep their own wash on hover rather than losing it to --white-04. */
.svcx-item--accent:hover {
  background:
    linear-gradient(100deg, rgba(255, 82, 0, 0.075) 0%, rgba(255, 82, 0, 0.02) 45%, transparent 74%),
    var(--white-04);
}

/* ── Cell head: icon left, number right ─────────────────────────── */
.svcx-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.svcx-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--white-12);
  border-radius: 8px;
  color: var(--white-70);
  background: rgba(255, 255, 255, 0.022);
  transition: color 0.32s, border-color 0.32s, background 0.32s, transform 0.32s cubic-bezier(.22,.61,.36,1);
}
.svcx-ico svg { width: 21px; height: 21px; display: block; }
.svcx-item:hover .svcx-ico {
  color: var(--orange);
  border-color: rgba(255, 82, 0, 0.35);
  background: var(--orange-dim);
  transform: translateY(-2px);
}
/* The two banner cells carry the icon in brand colour at rest — they are the
   stated differentiators, and this is their one orange mark. */
.svcx-item--accent .svcx-ico {
  color: var(--orange);
  border-color: rgba(255, 82, 0, 0.28);
  background: var(--orange-dim);
}

.svcx-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.28);
  transition: color 0.3s;
}
.svcx-item:hover .svcx-num { color: var(--white-55); }

.svcx-name {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 12px;
}
.svcx-desc {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.7;
  /* Resting body copy is --white-70 now, not --white-55; see the token block
     for why AA-passing was not the same as readable here. --white-30 remains
     rules and decorative marks only. */
  color: var(--white-70);
  max-width: 46ch;
}

/* margin-top:auto pushes the CTA to the bottom so CTAs line up across a row
   even when the two summaries differ in length. */
.svcx-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-55);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.28s, border-color 0.28s;
}
.svcx-cta:hover {
  color: var(--orange);
  border-bottom-color: var(--orange-dim);
}
.svcx-cta-arrow { transition: transform 0.28s cubic-bezier(.22,.61,.36,1); }
.svcx-cta:hover .svcx-cta-arrow,
.svcx-item:hover .svcx-cta-arrow { transform: translateX(4px); }

/* ── Card photo, rolled out to all 8 non-accent cells (was a 2-card trial).
   Rolling the ORIGINAL 8:5 block out to all 8 would have added ~340px of
   image PLUS the separate icon/number row on top of every already-tall
   card — roughly doubling the section's height across 4 rows. Two changes
   fix that instead of just shrinking numbers:
   1. Much shorter aspect ratio (2.35:1, a banner strip, not a photo block).
   2. The icon+number row is GONE as a separate element — it now lives as a
      corner badge overlaid ON the photo (.svcx-badge below), reclaiming
      that entire row's height on every card.
   Same duotone pipeline as .svcband: grayscale kills stock's warm cast,
   contrast/brightness sits it in the page's dark range, a screen-blended
   tint re-lights it in the site palette, grain stops the darkened frame
   banding. See .svcband's comment block for the full reasoning.
   PLACEHOLDER MODE: no real photos exist yet for 6 of these 8 cells, so
   .svcx-img-placeholder stands in — same wrapper/tint/grain/badge, just a
   dark gradient behind a large faint ghost of the cell's own icon instead
   of an <img>. Swapping in a real photo later is: add the <img>, delete
   the .svcx-img-placeholder span. Nothing else about the card changes. */
.svcx-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--black);
}
.svcx-img,
.svcx-img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.20) brightness(0.80);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
.svcx-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #17191d 0%, #0b0c0e 100%);
}
.svcx-img-placeholder svg {
  width: 30%;
  height: 30%;
  color: rgba(255, 255, 255, 0.10);
}
.svcx-item:hover .svcx-img,
.svcx-item:hover .svcx-img-placeholder { transform: scale(1.035); }
.svcx-img-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg,
      rgba(0, 140, 215, 0.46) 0%,
      rgba(85, 50, 180, 0.30) 55%,
      rgba(150, 60, 15, 0.16) 100%);
  mix-blend-mode: screen;
}
.svcx-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Icon + number, overlaid bottom-left on the photo instead of stacked in
   their own row above the name (that row is what .svcx-top still is for
   the two accent/no-photo cells). Frosted chip so it reads over any
   photo tone once real images land. */
.svcx-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 6px;
  border-radius: 20px;
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.svcx-badge .svcx-ico {
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
}
.svcx-badge .svcx-ico svg { width: 14px; height: 14px; }
.svcx-badge .svcx-num { color: rgba(255, 255, 255, 0.6); }
.svcx-item:hover .svcx-badge .svcx-num { color: var(--white); }

/* Per-card echo of the schema inspector above: each of these ten cards is
   really a Service node in the page's JSON-LD ItemList, so each one carries
   a quiet tag saying so. Sits in the card's own top-padding strip, above
   the photo/placeholder rather than on it, so it never competes with the
   icon+number badge (which lives on the image itself). Near-invisible at
   rest — this is a detail for someone looking closely, not a second badge
   competing with the real one. */
.svcx-tag {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.16);
  transition: color 0.3s;
}
.svcx-item:hover .svcx-tag { color: var(--white-55); }
.svcx-item--accent .svcx-tag { top: 16px; right: 20px; }

/* AI Agents card, white by request (2026-08-30) — scoped to this one card
   by id, not the shared .svcx-item--accent class, since the SEO/AEO/GEO
   banner below it wasn't asked to change and shares that class. Same
   material as the other white islands (Testimonials, Fit diff): #FAFAF7,
   ink text, --orange-deep instead of full-strength --orange for anything
   that's actually text someone reads. */
#ai-automation,
#ai-automation:hover {
  background: #FAFAF7;
}
#ai-automation::before { background: var(--orange-deep); }
#ai-automation .svcx-name { color: var(--black); }
#ai-automation .svcx-desc { color: rgba(8, 8, 8, 0.68); }
#ai-automation .svcx-num { color: rgba(8, 8, 8, 0.35); }
#ai-automation:hover .svcx-num { color: rgba(8, 8, 8, 0.6); }
#ai-automation .svcx-tag { color: rgba(8, 8, 8, 0.2); }
#ai-automation:hover .svcx-tag { color: rgba(8, 8, 8, 0.55); }
#ai-automation .svcx-cta { color: var(--orange-deep); }
#ai-automation .svcx-cta:hover {
  color: var(--orange-deep);
  border-bottom-color: rgba(179, 54, 0, 0.35);
}
#ai-automation .svcx-ico {
  color: var(--orange);
  border-color: rgba(255, 82, 0, 0.3);
  background: rgba(255, 82, 0, 0.08);
}

@media (max-width: 900px) {
  .svcx-tag { display: none; }
  .svcx { padding: 88px 20px; }
  .svcx-header { margin-bottom: 44px; }
  .svcx-grid { grid-template-columns: 1fr; }
  /* Single column: the vertical rule has nothing to divide, and a banner
     spanning "both" columns is just a normal cell again. */
  .svcx-item--r { border-left: 0; }
  .svcx-item--accent { grid-column: auto; }
  .svcx-item,
  .svcx-item--accent { padding: 26px 16px 24px 22px; }
  .svcx-item--accent .svcx-name { font-size: 1.25rem; }
  .svcx-desc,
  .svcx-item--accent .svcx-desc { max-width: none; }
  .svcx-ico { width: 38px; height: 38px; }
  .svcx-ico svg { width: 19px; height: 19px; }
  /* No override needed — aspect-ratio scales with the card's own width at
     any breakpoint, unlike the fixed px height this replaced. */
}

@media (prefers-reduced-motion: reduce) {
  .svcx-item,
  .svcx-item::before,
  .svcx-ico,
  .svcx-num,
  .svcx-cta,
  .svcx-cta-arrow,
  .svcx-img { transition: none; }
  .svcx-item:hover .svcx-ico,
  .svcx-item:hover .svcx-img { transform: none; }
}

/* ── Circuit field ──────────────────────────────────────────────
   Blueprint grid + vertical traces with travelling pulses. A different visual
   language to the hero's aurora on purpose: right angles and rules read as an
   engineering drawing, where free curves read as decoration.

   EVERYTHING HERE IS CONFINED TO THE GUTTERS, outside the 1200px content
   envelope. Ten cells of --white-55 body copy live in this section; a moving
   highlight travelling behind small dim text is a legibility bug. The
   blueprint is masked to the edges and the traces are positioned at 3-13% /
   87-97%, so nothing crosses the content column.

   Pure CSS. The pulse is an animated background-position on a 1px element,
   which works at any section height with no measurement and no JS — unlike the
   hero's earlier SVG dash version, which needed path lengths and died on a
   stylesheet-vs-presentation-attribute conflict. */
.svcx-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fine engineering grid. LINES, not dots — the sitewide .site-dotgrid owns
   dots, and this needs to read as a different texture rather than a brighter
   copy of that one. */
.svcx-blueprint {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,  rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 84px);
  /* Visible in the gutters only, faded to nothing across the content column. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 15%, transparent 85%, #000 100%);
  mask-image: linear-gradient(to right, #000 0%, transparent 15%, transparent 85%, #000 100%);
}

.svcx-traces {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  /* Fade the traces out top and bottom so they never terminate on a hard edge
     against the section's own border. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
}
.svcx-traces--l { left: 0; }
.svcx-traces--r { right: 0; }

.svcx-trace {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  /* The resting trace. */
  background-color: rgba(255, 255, 255, 0.065);
  /* The travelling pulse, as a 130px-tall gradient band scrolled down the
     element. background-size is the band height, NOT 100%, which is what gives
     background-position somewhere to travel. */
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 45%,
    rgba(255, 255, 255, 0.95) 52%,
    transparent 100%
  );
  background-size: 1px 130px;
  background-repeat: no-repeat;
  animation: svcxTraceRun 7s linear infinite;
}
@keyframes svcxTraceRun {
  from { background-position: 0 -130px; }
  to   { background-position: 0 calc(100% + 130px); }
}

/* A small junction node per trace — the detail that makes these read as
   circuit traces rather than plain rules. Background matches the section so
   the trace appears to pass behind it. */
.svcx-trace::before {
  content: '';
  position: absolute;
  left: -2px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--dark);
}

/* Staggered positions, speeds and node heights. Mismatched durations mean the
   six traces never pulse in unison, which would read as a progress bar. */
.svcx-traces--l .svcx-trace:nth-child(1) { left: 3%;  animation-duration: 7.5s;  animation-delay: 0s; }
.svcx-traces--l .svcx-trace:nth-child(2) { left: 8%;  animation-duration: 10.5s; animation-delay: 2.6s; }
.svcx-traces--l .svcx-trace:nth-child(3) { left: 13%; animation-duration: 8.8s;  animation-delay: 5.1s; }
.svcx-traces--r .svcx-trace:nth-child(1) { left: 87%; animation-duration: 9.6s;  animation-delay: 1.3s; }
.svcx-traces--r .svcx-trace:nth-child(2) { left: 92%; animation-duration: 7.9s;  animation-delay: 4.2s; }
.svcx-traces--r .svcx-trace:nth-child(3) { left: 97%; animation-duration: 11.4s; animation-delay: 0.7s; }

.svcx-traces--l .svcx-trace:nth-child(1)::before { top: 18%; }
.svcx-traces--l .svcx-trace:nth-child(2)::before { top: 47%; }
.svcx-traces--l .svcx-trace:nth-child(3)::before { top: 71%; }
.svcx-traces--r .svcx-trace:nth-child(1)::before { top: 33%; }
.svcx-traces--r .svcx-trace:nth-child(2)::before { top: 62%; }
.svcx-traces--r .svcx-trace:nth-child(3)::before { top: 26%; }

@media (max-width: 1080px) {
  /* Below this width there are no gutters left to draw in — the field would be
     forced across the content column, which is exactly what it exists to
     avoid. Drop it rather than shrink it. */
  .svcx-bg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Traces stay as static rules; only the travelling pulse stops. */
  .svcx-trace { animation: none; background-image: none; }
}


/* ─── SERVICES PAGE — START HERE ──────────────────────────────────
   The page's warm block, and it is built to feel different from the lattice
   above on purpose. The Ten is hairlines, right angles, mono numerals and
   --white-55 body copy: correct, precise, cold. This inverts every one of
   those choices — a soft warm-tinted panel, generous radius, no vertical
   rules, and the reader's own words set large in the heading face.

   Warmth here is carried by colour temperature and geometry, not by imagery.
   The theme has four images total and none of them are product shots, so any
   "welcoming" photography would have to be stock or generated, which this
   project has ruled out repeatedly (see GearUp for Good's no-photography
   decision for the same argument).

   Orange is still on its one-role-per-component budget: it lights the panel
   and the route links, and nothing else in here is orange. The numerals stay
   white-dim so they read as sequence, not as accents. */
.routes-section {
  position: relative;
  /* 80px horizontal to match .svcx above it, so the panel's edge lands on the
     same line as the lattice's outer cells at every width, not just above
     1280px. The 1200px envelope only aligns things when the sections framing
     it share their padding too. */
  padding: 120px 80px;
  background: var(--black-veil);
}

.rt-inner {
  max-width: 1200px;
  margin-inline: auto;
  /* The warm panel. Two stacked radials rather than a flat tint so the warmth
     has a direction and a falloff, the way light does — a flat rgba wash over
     a large area reads as a coloured box instead. */
  background-image:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 82, 0, 0.075) 0%, transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(255, 122, 61, 0.05) 0%, transparent 60%);
  background-color: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 82, 0, 0.14);
  border-radius: 20px;
  padding: 72px 64px 64px;
}

.rt-header { max-width: 760px; }

.rt-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}

.rt-headline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 20px;
}

.rt-lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  /* --white-55 is the floor for resting body copy on this canvas (~6.3:1).
     Never --white-30 here; that is for rules and marks only. */
  color: var(--white-70);
  margin: 0;
}

.rt-list {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.rt-item {
  position: relative;
  padding-top: 28px;
  /* A hairline above each route instead of a box around it. Boxes would make
     this a fourth card grid on a page that already has the lattice and the
     engagement cards. */
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  transition: border-color 0.35s ease;
}

.rt-item:hover { border-top-color: rgba(255, 82, 0, 0.42); }

.rt-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--white-55);
  margin-bottom: 16px;
}

/* The spoken line. Set in the heading face at heading size because it is the
   only place on this page where the reader's voice appears rather than ours,
   and it should carry the same weight as our own headings do. */
.rt-said {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 14px;
  text-wrap: balance;
}

.rt-means {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  color: var(--white-70);
  margin: 0 0 18px;
}

.rt-goes {
  font-family: var(--font-mono);
  /* 11px uppercase mono with 0.1em tracking at --white-30 measured 2.65:1 —
     my own regression, and the worst combination on the page: small, spaced,
     all-caps and dim at once. Each of those costs legibility separately. */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-55);
  margin: 0;
}

.rt-goes a {
  color: var(--white-80);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 82, 0, 0.36);
  padding-bottom: 2px;
  transition: color 0.22s ease, border-color 0.22s ease;
}

.rt-goes a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.rt-goes-sep { padding: 0 4px; }

/* The signed line. This is the closest the site comes to a person speaking,
   so it gets air above it and a rule, not a card. */
.rt-note {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 700px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--white-80);
}

.rt-sign {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--white-70);
}

/* ── Reveal ─────────────────────────────────────────────────────
   Registered on the sitewide observer in main.js, same as every other
   section. Delays are short and self-contained: this block has no sibling
   animation to choreograph against, and long inherited delays are exactly
   what made the Engagement trust block invisible on a fast scroll once. */
.routes-section .rt-header,
.routes-section .rt-item,
.routes-section .rt-note {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.routes-section.in-view .rt-header,
.routes-section.in-view .rt-item,
.routes-section.in-view .rt-note {
  opacity: 1;
  transform: none;
}

.routes-section.in-view .rt-item:nth-child(1) { transition-delay: 0.10s; }
.routes-section.in-view .rt-item:nth-child(2) { transition-delay: 0.19s; }
.routes-section.in-view .rt-item:nth-child(3) { transition-delay: 0.28s; }
.routes-section.in-view .rt-note              { transition-delay: 0.36s; }

@media (max-width: 1080px) {
  .routes-section { padding: 96px 40px; }
  .rt-inner { padding: 56px 36px 48px; }
  /* Three 1fr columns get too narrow for a spoken line to hold its shape here;
     stacking keeps .rt-said on two lines instead of four. */
  .rt-list  { grid-template-columns: 1fr; gap: 0; }
  .rt-item  { padding: 26px 0; }
  .rt-item + .rt-item { border-top: 1px solid rgba(255, 255, 255, 0.10); }
}

@media (max-width: 720px) {
  .routes-section { padding: 88px 20px; }
  .rt-inner { padding: 40px 24px 36px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .routes-section .rt-header,
  .routes-section .rt-item,
  .routes-section .rt-note {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ─── SERVICES PAGE — OPERATIONS BAND ─────────────────────────────
   Reference implementation for photography in this theme. The rules below
   are written to be reused: point --band-img at a different file and the
   same treatment applies. See page-services.php for why the treatment
   matters more than the choice of picture.

   THE PIPELINE, in order — each step is doing a specific job:
     1. grayscale(1)      strip the photo's own colour; stock is lit warm and
                          this canvas is not, and that mismatch is the single
                          biggest reason stock reads as pasted on.
     2. contrast/bright   push it down into the page's value range so it is a
                          dark image on a dark page, not a bright rectangle.
     3. colour tint       re-light it in the site's own electric blue/purple
                          via mix-blend-mode, so it belongs to this palette.
     4. dark gradient     legibility floor under the text. Non-negotiable —
                          this page just had a readability pass and putting
                          copy over an untreated photo would undo it.
     5. grain             the same feTurbulence layer the hero uses. Grain is
                          what stops a heavily-darkened photo from banding. */
.svcband {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid var(--white-07);
  border-bottom: 1px solid var(--white-07);
  display: flex;
  align-items: flex-end;
}

.svcband-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Steps 1 and 2. */
  /* Tuned by simulating the whole pipeline offscreen and looking at the
     result, not by guessing. First attempt used brightness(0.42) and a
     `color` blend: the frame went almost black and the tint came out muddy
     brown, because `color` keeps the backdrop's luminance and there was
     almost none left to carry a hue. Keep the image bright enough here and
     let the gradient overlay below do the darkening. */
  filter: grayscale(1) contrast(1.20) brightness(0.80);
}

/* Step 3 (colour) and step 4 (legibility), stacked in one element.
   `color` blend takes the hue/saturation of this gradient and keeps the
   underlying luminance, which is what makes it a duotone rather than a
   coloured sheet laid on top. */
.svcband-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(0, 140, 215, 0.46) 0%,
      rgba(85, 50, 180, 0.32) 58%,
      rgba(150, 60, 15, 0.20) 100%);
  /* `screen` not `color`: screen lifts the shadows toward the tint, which is
     what "lit by a blue screen" actually looks like. `color` only re-hues
     luminance that already exists, so on a dark frame it produces mud. */
  mix-blend-mode: screen;
}
.svcband::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Heaviest at the bottom-left where the copy sits, so the right side keeps
     some of the monitor-wall detail instead of the whole frame going flat. */
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.93) 0%, rgba(8, 8, 8, 0.42) 50%, rgba(8, 8, 8, 0.14) 100%),
    linear-gradient(to right, rgba(8, 8, 8, 0.72) 0%, transparent 62%);
  pointer-events: none;
}

.svcband-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.svcband-copy {
  position: relative;   /* above ::after */
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 80px 48px;
}

.svcband-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.svcband-line {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 20ch;
  text-wrap: balance;
}

@media (max-width: 720px) {
  .svcband { height: 260px; }
  .svcband-copy { padding: 0 20px 32px; }
  /* The gradient has to work harder at this width: the copy spans nearly the
     full frame rather than sitting in a darkened left third. */
  .svcband::after {
    background: linear-gradient(to top, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.68) 60%, rgba(8, 8, 8, 0.42) 100%);
  }
}