/* ==========================================================================
   Teclab Solutions – Design System & Shared Stylesheet
   Light Theme · Three Pillars · Aura-Inspired Layout
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand Colours – Light Grey Theme (cards pop on grey) */
  --bg: #F1F3F7;
  --surface: #FFFFFF;
  --surface-2: #E8ECF3;
  --border: #E0E6F0;
  --border-bright: #C6CFE0;
  --text: #090D16;
  --muted: #4B5670;
  --accent: #0E7490;
  --accent-hover: #0891B2;
  --violet: #8B5CF6;
  --blue: #3B82F6;
  --grad: linear-gradient(90deg, #8B5CF6, #3B82F6, #0E7490);

  /* Glass / glow for hero band */
  --hero-bg: #090D16;
  --hero-text: #F9FAFB;
  --hero-muted: #9CA3AF;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glow-cyan: rgba(14, 116, 144, 0.08);
  --glow-violet: rgba(139, 92, 246, 0.08);

  /* Typography */
  --font-heading: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;

  /* Safe Area Spacing */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 90px);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Accessibility: Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--accent);
  color: #FFFFFF;
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 8px;
  z-index: 1000;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 20px;
}

/* Focus Visible Indicator */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Base Headings & Links */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   Reveal on Scroll — Aura-style rise: text moves up + de-blurs
   ========================================================================== */
html.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform, filter;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Hero entrance — same rise language on first paint */
.hero-copy h1 > span {
  display: block;
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  animation: heroRise .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-copy h1 > span:nth-child(2) { animation-delay: .1s; }
.hero-copy h1 > span:nth-child(3) { animation-delay: .2s; }
.hero-copy .lede,
.hero-copy .actions {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  animation: heroRise .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-copy .lede { animation-delay: .3s; }
.hero-copy .actions { animation-delay: .42s; }

@keyframes heroRise {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 10;
}

.muted {
  color: var(--muted);
}

/* ==========================================================================
   Subtle Background Accents (replaces dark parallax)
   ========================================================================== */
.scroll-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  background: var(--bg);
  overflow: hidden;
  pointer-events: none;
}

.scroll-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(180px);
  opacity: 0.35;
}

.scroll-glow.cyan {
  background: rgba(14, 116, 144, 0.15);
  width: 800px;
  height: 800px;
  top: -15%;
  left: -10%;
  animation: float 20s infinite alternate ease-in-out;
}

.scroll-glow.violet {
  background: rgba(139, 92, 246, 0.12);
  width: 700px;
  height: 700px;
  bottom: -10%;
  right: -10%;
  animation: float 15s infinite alternate-reverse ease-in-out;
}

.scroll-grid {
  display: none; /* Grid removed for light theme */
}

@keyframes float {
  0% { transform: translate(0, 0); }
  100% { transform: translate(80px, 40px); }
}

/* ==========================================================================
   Header & Navigation (Dark Glass Pill – every page, every scroll state)
   ========================================================================== */
.site-header {
  position: relative;
  margin: 16px auto 0;
  width: calc(100% - 32px);
  max-width: 1120px;
  z-index: 50;
  background: rgba(9, 13, 22, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 24px rgba(3, 7, 18, 0.35);
}

.site-header.is-scrolled {
  background: rgba(9, 13, 22, 0.92);
  box-shadow: 0 10px 36px rgba(3, 7, 18, 0.5);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  height: 48px;
  text-decoration: none;
}

.logo svg {
  height: 100%;
  width: auto;
  display: block;
}

nav.main ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

nav.main a {
  display: inline-block;
  padding: 8px 16px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}

nav.main a:hover,
nav.main a[aria-current="page"] {
  color: #FFFFFF;
}

nav.main a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.1);
}

nav.main a.nav-cta {
  background: #06B6D4;
  color: #090D16;
  font-weight: 700;
  margin-left: 12px;
}

nav.main a.nav-cta:hover {
  background: #22D3EE;
  color: #090D16;
}

/* ---------- Services mega-menu ----------
   Anchored to .site-header (the pill) rather than the <li>, so the panel
   is centred under the whole nav. position:static on the <li> keeps
   .site-header as the containing block. */
.nav-item {
  position: static;
}

nav.main a.nav-parent::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: min(900px, calc(100vw - 32px));
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Bridges the 12px gap so the pointer never leaves the hover target. */
.mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}

.mega-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 14px;
  background: rgba(9, 13, 22, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  box-shadow: 0 24px 54px rgba(3, 7, 18, 0.55);
}

/* nav.main a sets display:inline-block at (0,1,2), so these need the
   same or higher specificity to take effect. */
nav.main a.mega-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  text-decoration: none;
  transition: background 0.18s ease;
}

nav.main a.mega-item:hover,
nav.main a.mega-item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
}

.mega-thumb {
  display: block;
  flex: 0 0 auto;
  width: 68px;
  height: 44px;
  border-radius: 7px;
  overflow: hidden;
  background: #111827;
}

.mega-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mega-text {
  display: block;
  min-width: 0;
}

.mega-text strong {
  display: block;
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

.mega-text small {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 2px;
}

.mega-foot {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

nav.main .mega-foot a {
  display: block;
  padding: 8px 12px;
  color: #67E8F9;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
}

nav.main .mega-foot a:hover {
  color: #A5F3FC;
  background: rgba(255, 255, 255, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover .mega,
  .nav-item:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-item:hover .nav-parent::after,
  .nav-item:focus-within .nav-parent::after {
    transform: rotate(-135deg) translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega {
    transition: opacity 0.01ms linear, visibility 0.01ms linear;
    transform: translateX(-50%);
  }
}

/* Set by JS for tap-to-open on touch, where :hover is unreliable. */
.nav-item.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  min-height: 44px;
}

/* ==========================================================================
   Buttons (Light Theme)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-height: 48px;
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 4px 16px rgba(9, 13, 22, 0.12);
}

.btn-primary:hover {
  background: var(--accent);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(14, 116, 144, 0.25);
}

.btn-ghost {
  border-color: var(--border-bright);
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--text);
  background: var(--surface);
}

/* ==========================================================================
   Hero Section (Dark Band on Light Page)
   ========================================================================== */
.hero {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 120px 0 100px;
  background: var(--hero-bg);
  color: var(--hero-text);
  overflow: hidden;
}

/* Subtle gradient glow behind hero, plus a left-to-right darkening
   scrim so no bright glow sits behind the text column */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 13, 22, 0.55) 0%, rgba(9, 13, 22, 0.15) 45%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 30% 80%, rgba(139, 92, 246, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 70% 20%, rgba(14, 116, 144, 0.15), transparent);
  pointer-events: none;
}

/* Hero bottom: crisp 1px hairline (no gradient fade) */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.hero {
  border-bottom: 1px solid var(--border);
}

/* Home page only: the other pages have a dark body, so the header pill reads
   as part of the surface behind it. Here the body is light, so the hero band
   is pulled up under the pill and gives back exactly the height it took,
   leaving every element below the hero where it was. */
body.home {
  /* 16px header top margin + 64px nav row + 2px pill borders */
  --header-band: 82px;
}

body.home .hero {
  margin-top: calc(var(--header-band) * -1);
  padding-top: calc(120px + var(--header-band));
}

/* The corner brackets ride the top of the hero box, so without this they
   would sit behind the pill and cross its border. */
body.home .hero .frame-corners {
  top: calc(var(--header-band) + 22px);
}

body.home .site-header {
  box-shadow: none;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #F9FAFB;
  margin-bottom: 24px;
  position: relative;
}

/* Headline lines: solid near-white */
.hero h1 > span {
  display: block;
  color: #F9FAFB;
}

/* Gradient applies only to the short key phrase, mapped to the words */
.hero h1 .grad {
  display: inline;
  background: linear-gradient(90deg, #C4B5FD, #93C5FD, #67E8F9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .rule {
  display: none;
}

.hero p.lede {
  font-size: 1.2rem;
  color: #CBD5E1;
  max-width: 34em;
  margin: 0 0 40px;
  line-height: 1.6;
  position: relative;
}

.hero .actions {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}

.hero .btn-primary {
  background: #FFFFFF;
  color: var(--hero-bg);
}
.hero .btn-primary:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
}

.hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--hero-text);
}
.hero .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Hero Layout – two columns: copy left, shape box right
   ========================================================================== */
.hero > .wrap {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-copy {
  text-align: left;
}

/* Shape and floating tiles live in their own right-hand box,
   positioned inside it so they can never overlap text or buttons */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin-left: auto;
  pointer-events: none;
  z-index: 1;
}

.hero-shape {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.9;
  filter: drop-shadow(0 40px 80px rgba(59, 130, 246, 0.35));
}

/* Soft blurred capsule drifting across the shape */
.hero-pill {
  position: absolute;
  left: -2%;
  top: 56%;
  width: 34%;
  height: 11%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8B5CF6, #3B82F6);
  filter: blur(10px);
  opacity: 0.7;
  animation: pillDrift 9s ease-in-out infinite;
}

/* CoinCompass-style mini-widget tiles: dark glass, neon accent, crisp hairlines */
.float-tile {
  position: absolute;
  width: 128px;
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 14px;
  background: rgba(11, 16, 28, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 16px 34px rgba(3, 7, 18, 0.5),
    0 0 28px -6px var(--tc, #3B82F6),
    0 0 52px -14px var(--tc2, #06B6D4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: tileFloat 6s ease-in-out infinite;
  font-family: var(--font-mono);
}

.float-tile svg.mini {
  width: 100%;
  height: 38px;
  display: block;
  overflow: visible;
}

.mini-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}

.mini-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tc), var(--tc2));
  box-shadow: 0 0 10px 0 var(--tc);
}

.mini-head b {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0;
  color: #67E8F9;
}

/* Outcome metric: enterprise result, one tight row */
.mini-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}

.mini-metric b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  background: linear-gradient(90deg, #DDD6FE, #93C5FD 55%, #67E8F9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mini-metric span {
  font-size: 9px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}

/* Shared mini-widget paints */
.mini-frame { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.mini-sep { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.mini-pip { fill: rgba(255, 255, 255, 0.28); }
.mini-block { fill: var(--tc); opacity: 0.35; }
.mini-bar { fill: rgba(255, 255, 255, 0.32); }
.mini-bar.dim { opacity: 0.55; }
.mini-sweep { animation: sweep 3.2s ease-in-out infinite; }
.mini-track {
  fill: none; stroke: var(--tc); stroke-width: 1.5; opacity: 0.55;
  stroke-dasharray: 5 5; animation: dashflow 1.4s linear infinite;
}
.mini-node {
  fill: #0B1020; stroke: var(--tc); stroke-width: 1.8;
  animation: nodePulse 2.4s ease-in-out infinite;
}
.mini-node.n2 { animation-delay: 0.4s; }
.mini-node.n3 { animation-delay: 0.8s; }
.mini-axis { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.mini-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; stroke-dasharray: 2 3; }
.mini-spark {
  fill: none; stroke: #67E8F9; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 130; stroke-dashoffset: 130;
  filter: drop-shadow(0 0 5px rgba(103, 232, 249, 0.55));
  animation: sparkDraw 4.2s ease-in-out infinite;
}
.mini-tip {
  fill: #A5F3FC;
  transform-box: fill-box; transform-origin: center;
  animation: tipOn 4.2s ease-in-out infinite;
}
/* APPS checklist rows light up in sequence */
.chk { animation: chkIn 3s ease-in-out infinite; }
.chk.c2 { animation-delay: 0.35s; }
.chk.c3 { animation-delay: 0.7s; }
.mini-row { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.mini-tick { fill: none; stroke: var(--tc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tile-web  { --tc: #8B5CF6; --tc2: #3B82F6; top: 8%; left: 10%; }
.tile-flow { --tc: #3B82F6; --tc2: #06B6D4; top: 28%; right: 8%; left: auto; animation-delay: -2s; }
.tile-bi   { --tc: #14B8A6; --tc2: #67E8F9; bottom: 6%; left: 12%; top: auto; animation-delay: -4s; }
.tile-apps { --tc: #818CF8; --tc2: #C084FC; top: 56%; right: 8%; left: auto; animation-delay: -1s; }

@keyframes sweep {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateX(130px); opacity: 0; }
}

@keyframes dashflow {
  to { stroke-dashoffset: -10; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes sparkDraw {
  0% { stroke-dashoffset: 130; opacity: 0; }
  12% { opacity: 1; }
  62% { stroke-dashoffset: 0; opacity: 1; }
  82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes tipOn {
  0%, 50% { opacity: 0; transform: scale(0.4); }
  62%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes chkIn {
  0%, 100% { opacity: 0.35; }
  20%, 75% { opacity: 1; }
}

@keyframes tileFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(3deg); }
}

@keyframes pillDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(18%); }
}

/* ==========================================================================
   Wave band: "light through a dot mesh". A fixed halftone dot grid lit by
   soft glow ellipses drifting slowly beneath a dot-shaped mask. The dots
   never move — only the light travels, left to right with a slow vertical
   drift. Brand palette only. Dark backgrounds only (hero + footer).
   ========================================================================== */
.wave-band {
  --dot: 12px;
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
}

.wave-band--foot {
  top: 0;
  height: 160px;
}

/* Faint always-on mesh so the grid breathes even without light (~8%).
   Same rounded-square tile as the glow mask, in white. */
.wave-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: var(--dot) var(--dot);
  opacity: 0.08;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

/* Glow layer: fat bloom (about 1.6:1) with a hot core, masked by
   rounded-square tiles plus a four-edge feather. Only transform and
   opacity animate; the 24px blur is static. */
.wave-glow {
  position: absolute;
  top: -12%;
  width: 42%;
  height: 125%;
  border-radius: 50%;
  filter: blur(24px);
  will-change: transform, opacity;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5'/%3E%3C/svg%3E"), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-size: var(--dot) var(--dot), 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='2' y='2' width='8' height='8' rx='1.5'/%3E%3C/svg%3E"), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-size: var(--dot) var(--dot), 100% 100%, 100% 100%;
  mask-repeat: repeat, no-repeat, no-repeat;
  mask-composite: intersect, intersect;
}

/* Bloom 1: violet-blue with a hot lavender core */
.wave-glow.g1 {
  left: 0;
  background: radial-gradient(ellipse at center, rgba(196, 181, 253, 0.9) 0%, rgba(139, 92, 246, 0.6) 22%, rgba(59, 130, 246, 0.35) 45%, rgba(59, 130, 246, 0.12) 68%, transparent 85%);
  animation: drift1 21s ease-in-out infinite alternate;
  animation-delay: -7s;
}

/* Bloom 2: cyan with a hot near-white core, offset in phase */
.wave-glow.g2 {
  left: 0;
  background: radial-gradient(ellipse at center, rgba(165, 243, 252, 0.9) 0%, rgba(103, 232, 249, 0.6) 22%, rgba(6, 182, 212, 0.35) 45%, rgba(139, 92, 246, 0.15) 68%, transparent 85%);
  animation: drift2 17s ease-in-out infinite alternate;
  animation-delay: -11s;
}

/* Third slot kept in markup for symmetry; parked off-duty so two
   blooms run at a time and one always lights the band somewhere. */
.wave-glow.g3 {
  display: none;
}

/* Faint whole-hero version: same motion, peak about 0.3.
   (Kept for reuse; currently the hero uses the orbit field.) */
.wave-band--herobg .wave-glow.g1 {
  background: radial-gradient(ellipse at center, rgba(196, 181, 253, 0.3) 0%, rgba(139, 92, 246, 0.2) 22%, rgba(59, 130, 246, 0.12) 45%, rgba(59, 130, 246, 0.05) 68%, transparent 85%);
}

.wave-band--herobg .wave-glow.g2 {
  background: radial-gradient(ellipse at center, rgba(165, 243, 252, 0.3) 0%, rgba(103, 232, 249, 0.2) 22%, rgba(6, 182, 212, 0.12) 45%, rgba(139, 92, 246, 0.05) 68%, transparent 85%);
}

@keyframes drift1 {
  from { transform: translate3d(-100%, 8%, 0); opacity: 0.75; }
  50% { opacity: 1; }
  to { transform: translate3d(238%, -8%, 0); opacity: 0.85; }
}

@keyframes drift2 {
  from { transform: translate3d(-100%, -6%, 0); opacity: 0.7; }
  50% { opacity: 1; }
  to { transform: translate3d(238%, 6%, 0); opacity: 0.8; }
}

/* Paused off-screen or in a background tab */
.wave-band.is-paused .wave-glow,
body.is-tab-hidden .wave-glow {
  animation-play-state: paused;
}

/* Below 900px: stack the columns. Text first, then the shape box
   at about 70vw (max 380px), centred below the buttons */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero .actions {
    justify-content: center;
  }

  .hero p.lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visual {
    width: 70vw;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* Hide the floating tiles below 700px */
@media (max-width: 700px) {
  .float-tile {
    display: none;
  }
  /* Wave bands: shorter, one bloom, wider tile mesh */
  .wave-band {
    --dot: 16px;
  }
  .wave-band--hero {
    height: 140px;
  }
  .wave-glow.g2,
  .wave-glow.g3 {
    display: none;
  }
}

/* ==========================================================================
   Orbit field ("signal orbit" watermark): tilted particle rings on canvas.
   Decorative only; the keep-out mask around text is drawn in JS.
   ========================================================================== */
.orbit-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 30%, transparent 75%);
}

.orbit-field canvas {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  display: block;
}

/* Technical frame: L-shaped corner brackets, hero and footer */
.frame-corners {
  position: absolute;
  inset: clamp(12px, 2vw, 28px);
  z-index: 3;
  pointer-events: none;
}

.frame-corners .corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(255, 255, 255, 0.2);
}

.frame-corners .corner.tl {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.frame-corners .corner.tr {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}

.frame-corners .corner.bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.frame-corners .corner.br {
  bottom: 0;
  right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual,
  .hero-pill,
  .float-tile {
    animation: none;
  }
  .mini-spark,
  .mini-tip,
  .mini-node,
  .mini-track,
  .mini-sweep,
  .chk {
    animation: none;
  }
  .mini-spark { stroke-dashoffset: 0; opacity: 1; }
  .mini-tip,
  .mini-node,
  .chk {
    opacity: 1;
    transform: none;
  }
  .mini-sweep { opacity: 0; }
  .hero-copy h1 > span,
  .hero-copy .lede,
  .hero-copy .actions {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  /* Wave bands: single static composition, no motion */
  .wave-glow {
    animation: none;
  }
  .wave-glow.g1 { transform: translate3d(60%, 0, 0); }
  .wave-glow.g2 { transform: translate3d(150%, 4%, 0); }
}

/* ==========================================================================
   Hero Pillar Badges (Replaces Old Dashboard)
   ========================================================================== */
.hero-pillars {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 56px;
  flex-wrap: wrap;
  position: relative;
}

.pillar-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  color: var(--hero-text);
  transition: all 0.3s ease;
  animation: pillarFadeIn 0.6s ease both;
}

.pillar-badge:nth-child(2) { animation-delay: 0.15s; }
.pillar-badge:nth-child(3) { animation-delay: 0.3s; }

.pillar-badge:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.pillar-badge svg {
  flex-shrink: 0;
}

.pillar-badge .pillar-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
}

@keyframes pillarFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-badge {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Content Blocks & Section Headings
   ========================================================================== */
section.block {
  padding: 96px 0;
  position: relative;
  z-index: 1;
  background: var(--bg);
  transform-style: preserve-3d;
}

/* Soften the transition between light sections by alternating
   backgrounds instead of hard border-top lines.
   Toned (dark) sections opt out — they bring their own backgrounds. */
section.block + section.block:not(.tone-1):not(.tone-2):not(.tone-3) {
  background: var(--surface);
}

section.block + section.block + section.block:not(.tone-1):not(.tone-2):not(.tone-3) {
  background: var(--bg);
}

/* Graded dark tones (homepage): dark slate lightening as you scroll.
   White cards keep popping; headings switch to light. */
section.block.tone-1,
section.block.tone-2,
section.block.tone-3 {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Graded dark tones (homepage): dark slate lightening as you scroll.
   Rounded sheet tops give the card-over-card seam on every scroll.
   No pinning anywhere: sheets flow in strict document order so Four
   ways shows first, then How we work, then Handover — nothing can
   jump ahead or bury another section. */
main section.block.tone-1 { background: #151B29; }
main section.block.tone-2 { background: #1E2739; }
main section.block.tone-3 { background: #2B3750; }

main section.block.tone-1,
main section.block.tone-2,
main section.block.tone-3 {
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 50px rgba(2, 5, 12, 0.5);
  padding: 80px 0;
}

main section.block.tone-1 .section-head,
main section.block.tone-2 .section-head,
main section.block.tone-3 .section-head {
  margin-bottom: 44px;
}

/* Opt-in pinning: JS adds .tone-stick only to sheets short enough to
   pin without hiding content. The quote band pins too so it can slide
   over Handover; the footer never pins. */
main section.block.tone-stick {
  position: sticky;
  top: 84px;
}

main section.cta-band.tone-stick {
  position: sticky;
  top: 84px;
  /* Beat the previous sheet's stacking level so the quote band
     slides OVER Handover instead of under it. */
  z-index: 2;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 50px rgba(2, 5, 12, 0.5);
}

@media (max-width: 900px) {
  main section.block.tone-stick,
  main section.cta-band.tone-stick {
    position: static;
  }
}

/* Dark deck behind the stack: no light slivers at rounded corners. */
.stack {
  position: relative;
  z-index: 1;
  background: #0B0F1A;
}

section.block.tone-1 .section-head h2,
section.block.tone-2 .section-head h2,
section.block.tone-3 .section-head h2 {
  color: #F9FAFB;
}

section.block.tone-1 .section-head p.intro,
section.block.tone-2 .section-head p.intro,
section.block.tone-3 .section-head p.intro {
  color: #B6C0D4;
}

/* Glass tiles on dark tones (hencubed-style): frosted panels,
   hairline borders, light type. Light pages keep the white cards. */
section.block.tone-1 .bento-card,
section.block.tone-2 .bento-card,
section.block.tone-3 .bento-card,
section.block.tone-2 .why-card {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 18px 44px rgba(2, 5, 12, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

section.block.tone-1 .bento-card h3,
section.block.tone-2 .bento-card h3,
section.block.tone-3 .bento-card h3,
section.block.tone-2 .why-card h3 {
  color: #F9FAFB;
}

section.block.tone-1 .bento-card p,
section.block.tone-2 .bento-card p,
section.block.tone-3 .bento-card p,
section.block.tone-2 .why-card p {
  color: #B6C0D4;
}

section.block[class*="tone-"] .tag {
  color: #9ED9E8;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

section.block[class*="tone-"] .link-arrow {
  color: #67E8F9;
}

section.block[class*="tone-"] .bento-card:hover {
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 20px 50px rgba(2, 5, 12, 0.55),
    0 0 30px -8px rgba(103, 232, 249, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

section.block[class*="tone-"] .bento-card:hover h3 {
  color: #FFFFFF;
}

/* Process steps on dark tones */
section.block.tone-3 .step h3 { color: #F9FAFB; }
section.block.tone-3 .step p { color: #B6C0D4; }
section.block.tone-3 .step-num {
  background: #151B29;
  box-shadow: 0 0 0 6px #2B3750;
}
section.block.tone-3 .process-grid::before { background: rgba(255, 255, 255, 0.14); }

.section-head {
  margin-bottom: 56px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 16px;
}

.section-head p.intro {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 38em;
  margin: 0 auto;
}

/* ==========================================================================
   Bento Grid – Three Pillars (Aura-Inspired Cards)
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Four narrow columns, mint-style. The paragraph is given a reserved four-line
   height so the hover photo can start just below the longest copy block and sit
   at the same level on all four tiles. */
@media (min-width: 1100px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .bento-card {
    padding: 26px 22px;
  }

  .bento-card h3 {
    font-size: 1.14rem;
  }

  .bento-card p {
    font-size: 0.92rem;
    min-height: 100px;
  }

  .bento-icon {
    margin-bottom: 18px;
  }
}

.bento-card {
  background: #FFFFFF;
  border: 1px solid #E1E6EF;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(9, 13, 22, 0.04);
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(14, 116, 144, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.bento-card:hover::before {
  opacity: 1;
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: #F8FCFD;
  box-shadow: 0 14px 34px rgba(14, 116, 144, 0.14);
}

.bento-card:hover .tag {
  background: rgba(14, 116, 144, 0.14);
  border-color: rgba(14, 116, 144, 0.4);
  color: #0B5A6E;
}

.bento-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  color: var(--icon, var(--accent));
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.bento-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bento-card:hover .bento-icon {
  transform: translateY(-2px) scale(1.08);
}

/* Old layout classes retained for compatibility but overridden */
.bento-large-left,
.bento-small-right,
.bento-small-left,
.bento-large-right { /* no-op in 3-col layout */ }

/* Remove old scanner and brackets */
.bento-card::after, .bracket { display: none !important; }

.bento-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: var(--text);
  transition: color 0.3s;
}

.bento-card:hover h3 {
  color: var(--accent);
}

.bento-card p {
  color: var(--muted);
  font-size: 0.97rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.bento-art {
  width: 100%;
  height: 112px;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

.bento-art svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Hover reveal (landing page tiles only): the copy stays put, the tag row
   fades, and the pillar photo slides up into the lower half of the tile,
   leaving the Explore link on top of it. */
.bento-face {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* The tag row sits directly under the paragraph so the lower half of the tile
   reads as reserved for the reveal rather than as dead space. */
.bento-card .tags {
  margin-top: 18px;
  transition: opacity 0.24s ease, transform 0.36s cubic-bezier(0.23, 1, 0.32, 1);
}

.bento-card .link-arrow {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-top: 22px;
}

.bento-photo {
  position: absolute;
  inset: var(--photo-top, 55%) 0 0 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.bento-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(101%) scale(1.04);
  filter: saturate(0.95) brightness(0.9);
  transition: transform 0.62s cubic-bezier(0.62, 0.03, 0.24, 1), filter 0.5s ease;
}

/* Scrim keeps the link legible once the photo is over the card floor. */
.bento-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(9, 13, 22, 0), rgba(9, 13, 22, 0.74));
  opacity: 0;
  transition: opacity 0.45s ease 0.1s;
}

.bento-card:hover .tags,
.bento-card:focus-visible .tags {
  opacity: 0;
  transform: translateY(8px);
}

.bento-card:hover .bento-photo img,
.bento-card:focus-visible .bento-photo img {
  transform: translateY(0) scale(1);
  filter: saturate(1) brightness(1);
}

.bento-card:hover .bento-photo::after,
.bento-card:focus-visible .bento-photo::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tags,
  .bento-photo img,
  .bento-photo::after {
    transition: none;
  }

  .bento-card:hover .tags {
    transform: none;
  }

  .bento-card:hover .bento-photo img {
    transform: none;
  }
}

/* Service pillar photos sit inside the pillar's own column, not across
   the full page width, so the image reads as part of the service rather
   than a banner competing with the heading. */
.svc-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 0 0 28px;
}

.svc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svc-photo figcaption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  right: 18px;
  z-index: 2;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(9, 13, 22, 0.9);
}

.svc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 13, 22, 0.06), rgba(9, 13, 22, 0.42));
  pointer-events: none;
}

.related-card .rel-photo {
  display: block;
  height: 104px;
  margin: -24px -24px 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.related-card .rel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* Service cards enter one by one: a keyframed rise with a wide stagger
   so the row cascades left to right. Keyframes (not transition-delay)
   drive the entrance, so the hover lift stays instant afterwards. */
html.js .bento-grid .bento-card.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
  animation: cardIn 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 320ms);
  transition: transform 0.3s ease-out, border-color 0.3s, background 0.3s, box-shadow 0.4s;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(48px);
    filter: blur(6px);
  }
}

.tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--accent);
  background: rgba(14, 116, 144, 0.08);
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s, color 0.2s;
}

.bento-card:hover .link-arrow {
  color: var(--accent-hover);
  transform: translateX(5px);
}

/* ==========================================================================
   "How We Work with You" / Why Section
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.why-grid.four-col {
  grid-template-columns: repeat(4, 1fr);
}

.why-card {
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid #E1E6EF;
  border-radius: 12px;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 1px 2px rgba(9, 13, 22, 0.04);
}

.why-card:hover {
  border-color: var(--border-bright);
  box-shadow: 0 8px 24px rgba(9, 13, 22, 0.05);
}

.why-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--text);
}

.why-card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* ==========================================================================
   Four-Step Process Timeline
   ========================================================================== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  position: relative;
}

.process-grid::before {
  content: '';
  position: absolute;
  top: 24px;
  /* Anchors to the centre of the 48px step circles, which sit left-aligned in each column */
  left: 24px;
  right: calc(25% - 42px);
  height: 2px;
  background: var(--border);
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 24px;
  box-shadow: 0 0 0 6px var(--bg);
}

.step h3 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

.step p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   Page Headers (Services, About, Quote, Privacy)
   ========================================================================== */
.page-head {
  padding: 64px 0 48px;
  text-align: center;
}

.page-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin-bottom: 16px;
}

.page-head p {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 36em;
  margin: 0 auto;
}

.jump {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.jump a, .jump button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.jump a:hover, .jump button:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-2);
}

/* ==========================================================================
   Service Detail Blocks
   ========================================================================== */
.svc-detail {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.svc-detail h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 16px;
}

.svc-detail .lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.lists-card {
  background: #FFFFFF;
  border: 1px solid #E1E6EF;
  border-radius: 12px;
  padding: 40px;
  display: grid;
  gap: 32px;
}

.lists-card h3 {
  font-size: 1.15rem;
  margin-bottom: 16px;
  color: var(--text);
}

/* Chevron Lists */
ul.chev {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

ul.chev li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

ul.chev li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

.licence-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* ==========================================================================
   Services Dark Theme (matches "How we work with you" #1E2739 / #0B0F1A palette)
   ========================================================================== */
body.services-dark,
body.about-dark,
html:has(body.services-dark),
html:has(body.about-dark) {
  --bg: #0B0F1A !important;
  --surface: #151D2C !important;
  --surface-2: #1E2739 !important;
  --border: rgba(255, 255, 255, 0.08) !important;
  --border-bright: rgba(255, 255, 255, 0.16) !important;
  --text: #F9FAFB !important;
  --muted: #B6C0D4 !important;
  background-color: #0B0F1A !important;
  color: #F9FAFB !important;
}

body.services-dark,
body.about-dark {
  background-color: #0B0F1A !important;
  background-image: 
    radial-gradient(ellipse 90% 50% at 50% -5%, rgba(30, 39, 57, 0.85), transparent 75%),
    radial-gradient(ellipse 60% 40% at 90% 25%, rgba(14, 116, 144, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 65%, rgba(139, 92, 246, 0.12), transparent 60%) !important;
  color: #F9FAFB !important;
}

body.services-dark .scroll-bg,
body.about-dark .scroll-bg {
  background: #0B0F1A !important;
  background-color: #0B0F1A !important;
  background-image: 
    radial-gradient(ellipse 90% 50% at 50% -5%, rgba(30, 39, 57, 0.85), transparent 75%),
    radial-gradient(ellipse 60% 40% at 90% 25%, rgba(14, 116, 144, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 65%, rgba(139, 92, 246, 0.12), transparent 60%) !important;
}

body.about-dark .page-head h1,
body.services-dark .page-head h1 {
  color: #F9FAFB;
}

body.about-dark .page-head p,
body.services-dark .page-head p {
  color: #B6C0D4;
}

body.about-dark .prose p {
  color: #CBD5E1;
  font-size: 1.12rem;
  line-height: 1.8;
}

body.about-dark .why-card {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 18px 44px rgba(2, 5, 12, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

body.about-dark .why-card:hover {
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 20px 50px rgba(2, 5, 12, 0.55),
    0 0 30px -8px rgba(103, 232, 249, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
}

body.about-dark .why-card h3 {
  color: #F9FAFB;
}

body.about-dark .why-card p {
  color: #B6C0D4;
}

body.services-dark .jump a,
body.services-dark .jump button {
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.services-dark .jump a:hover,
body.services-dark .jump button:hover {
  color: #FFFFFF;
  border-color: #67E8F9;
  background: rgba(103, 232, 249, 0.12);
  box-shadow: 0 0 24px -4px rgba(103, 232, 249, 0.35);
}

body.services-dark .svc-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.services-dark .svc-detail h2 {
  color: #F9FAFB;
}

body.services-dark .svc-detail .lead {
  color: #B6C0D4;
}

body.services-dark .tag,
body.services-dark .svc-detail .tag {
  color: #9ED9E8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

body.services-dark .btn-ghost {
  color: #F9FAFB;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

body.services-dark .btn-ghost:hover {
  border-color: #67E8F9;
  color: #67E8F9;
  background: rgba(103, 232, 249, 0.1);
  box-shadow: 0 0 20px -4px rgba(103, 232, 249, 0.3);
}

/* Glass Lists Card matching .why-card from "How we work with you" */
body.services-dark .lists-card {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow:
    0 18px 44px rgba(2, 5, 12, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.services-dark .lists-card:hover {
  border-color: rgba(103, 232, 249, 0.4);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 24px 50px rgba(2, 5, 12, 0.55),
    0 0 32px -8px rgba(103, 232, 249, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.services-dark .lists-card h3 {
  color: #F9FAFB;
}

body.services-dark ul.chev li {
  color: #B6C0D4;
}

body.services-dark ul.chev li::before {
  border-top: 2px solid #06B6D4;
  border-right: 2px solid #06B6D4;
}

body.services-dark .licence-note {
  color: #94A3B8;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

/* Service Subpages Dark Theme Enhancements */
body.services-dark .breadcrumbs li {
  color: #94A3B8;
}

body.services-dark .breadcrumbs li + li::before {
  color: rgba(255, 255, 255, 0.2);
}

body.services-dark .breadcrumbs a {
  color: #67E8F9;
}

body.services-dark .breadcrumbs [aria-current="page"] {
  color: #F9FAFB;
}

body.services-dark .prose h2,
body.services-dark .section-head h2 {
  color: #F9FAFB;
}

/* The .prose block is a centred 44em column with left-aligned text; on the dark
   service pages its heading should sit with the rest of the centred layout.
   Scoped here so about.html and privacy.html keep left-aligned headings. */
body.services-dark .prose h2 {
  text-align: center;
}

body.services-dark .prose p,
body.services-dark .section-head p.intro {
  color: #B6C0D4;
}

body.services-dark .subpage-card {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(2, 5, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.services-dark .subpage-card:hover {
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 50px rgba(2, 5, 12, 0.55), 0 0 30px -8px rgba(103, 232, 249, 0.35);
}

body.services-dark .subpage-card h3 {
  color: #F9FAFB;
}

body.services-dark .subpage-card p,
body.services-dark .subpage-card ul {
  color: #B6C0D4;
}

body.services-dark .subpage-card .card-icon {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #67E8F9;
}

body.services-dark .deliverables-box {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(2, 5, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.services-dark .deliverables-box h3 {
  color: #F9FAFB;
}

body.services-dark .tech-pill {
  background: rgba(255, 255, 255, 0.06);
  color: #9ED9E8;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

body.services-dark .content-placeholder-box {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.16);
}

body.services-dark .content-placeholder-box h3 {
  color: #F9FAFB;
}

body.services-dark .content-placeholder-box p {
  color: #B6C0D4;
}

body.services-dark .related-services {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.services-dark .related-services h2 {
  color: #F9FAFB;
}

body.services-dark .related-card {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: #F9FAFB;
}

body.services-dark .related-card:hover {
  border-color: rgba(103, 232, 249, 0.45);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 50px rgba(2, 5, 12, 0.55), 0 0 30px -8px rgba(103, 232, 249, 0.35);
}

body.services-dark .related-card h3 {
  color: #F9FAFB;
}

body.services-dark .related-card p {
  color: #B6C0D4;
}

body.services-dark .related-card .rel-label {
  color: #94A3B8;
}

body.services-dark .step h3 {
  color: #F9FAFB;
}

body.services-dark .step p {
  color: #B6C0D4;
}

body.services-dark .step-num {
  background: #151B29;
  box-shadow: 0 0 0 6px #2B3750;
  color: #67E8F9;
}

body.services-dark .process-grid::before {
  background: rgba(255, 255, 255, 0.14);
}

/* Smooth Fade Up Transition Animation */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(4px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

html.js .fade-up.is-visible,
html.js .reveal.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ==========================================================================
   Prose / About Content
   ========================================================================== */
.prose {
  max-width: 44em;
  margin: 0 auto 56px;
  display: grid;
  gap: 20px;
  font-size: 1.15rem;
  color: var(--muted);
}

.prose p {
  line-height: 1.75;
}

.prose h2 {
  font-size: 1.35rem;
  margin-top: 16px;
  color: var(--text);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
}

/* ==========================================================================
   Quote Page & Form Styles
   ========================================================================== */
.quote-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 96px;
}

form.q {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  display: grid;
  gap: 24px;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field .hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.field-error {
  color: #DC2626;
  font-size: 0.85rem;
  display: none;
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: #DC2626;
}

/* #DC2626 only reaches ~3.6:1 on the dark page, failing AA for small text. */
body.services-dark .field-error,
body.services-dark .req {
  color: #F87171;
}

body.services-dark .field.has-error input,
body.services-dark .field.has-error textarea,
body.services-dark .field.has-error select {
  border-color: #F87171;
}

.field.has-error .field-error {
  display: block;
}

.req {
  color: #DC2626;
  font-weight: 700;
  margin-left: 2px;
}

/* Captcha Styling */
.captcha-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 2px;
}

.captcha-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #090D16;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

#captchaCanvas {
  display: block;
  border-radius: 6px;
  background: #090D16;
  vertical-align: middle;
}

.captcha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.captcha-btn:hover,
.captcha-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: #38BDF8;
  border-color: #38BDF8;
  outline: none;
}

.captcha-input-wrap {
  flex: 1;
  min-width: 140px;
}

.captcha-input-wrap input {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin: 0;
}

legend {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0 8px;
}

.checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 0.2s, background 0.2s;
}

.check:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.check input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}

/* Honeypot field (hidden from real users) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Aside Box / Timeline */
.aside-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
}

.aside-box h2 {
  font-size: 1.35rem;
  margin-bottom: 24px;
}

.aside-box ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 20px;
}

.aside-box li {
  color: var(--muted);
  font-size: 0.98rem;
}

.aside-box li b {
  color: var(--text);
}

.notice {
  padding: 24px;
  border-radius: 12px;
  background: rgba(14, 116, 144, 0.08);
  border: 1px solid var(--accent);
  color: var(--text);
  margin-top: 20px;
}

/* ==========================================================================
   Closing CTA Band — Nexus-style seamless dark close
   Shares hero-bg with footer so scroll to bottom feels like one
   continuous surface. Glow only, no hard gradient bar.
   ========================================================================== */
.cta-band {
  text-align: center;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139, 92, 246, 0.16), transparent),
    radial-gradient(ellipse 50% 45% at 50% 100%, rgba(6, 182, 212, 0.12), transparent);
  pointer-events: none;
}

.cta-band .wrap {
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 20px;
  color: #F9FAFB;
}

.cta-band p {
  color: #CBD5E1;
  font-size: 1.15rem;
  margin: 0 auto 40px;
  max-width: 34em;
}

.cta-band .btn-primary {
  background: #FFFFFF;
  color: var(--hero-bg);
}
.cta-band .btn-primary:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 0 40px;
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
  /* Finale covers the pinned quote band as it arrives. */
  z-index: 3;
}

/* Footer content stays above the wave band */
footer.site-footer .wrap {
  position: relative;
  z-index: 2;
}

footer.site-footer .muted {
  color: var(--hero-muted);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.foot-logo {
  display: block;
  height: 44px;
  margin-bottom: 16px;
}

.foot-logo svg {
  height: 100%;
  width: auto;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.foot a {
  color: var(--hero-muted);
  font-weight: 500;
  transition: color 0.2s;
}

.foot a:hover {
  color: var(--hero-text);
}

.legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hero-muted);
  font-size: 0.875rem;
}

/* ==========================================================================
   Testimonial Styles (Hidden Template / Ready for future use)
   ========================================================================== */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.testimonial {
  margin: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
}

.testimonial blockquote {
  margin: 0 0 12px;
  color: var(--text);
  font-style: italic;
}

.testimonial figcaption {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ==========================================================================
   Media Queries & Responsive Layouts
   ========================================================================== */
@media (max-width: 900px) {
  /* The 300px-wide logo SVG left no room for the Menu button below ~410px
     and pushed it past the viewport edge. Letting the logo shrink keeps the
     header inside the viewport; the SVG's viewBox preserves its ratio. */
  .site-header .wrap {
    padding: 0 14px;
  }

  .logo {
    min-width: 0;
    flex-shrink: 1;
  }

  .logo svg {
    max-width: 100%;
  }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  nav.main {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(9, 13, 22, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(3, 7, 18, 0.45);
  }

  nav.main.open {
    display: block;
  }

  nav.main ul {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  nav.main a {
    padding: 12px 16px;
    font-size: 1.05rem;
  }

  nav.main a.nav-cta {
    margin-left: 0;
    text-align: center;
  }

  /* In the hamburger sheet the mega becomes a plain indented sub-list.
     .nav-item.is-open is restated so JS state can't out-rank this. */
  .mega,
  .nav-item.is-open .mega {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .mega::before {
    display: none;
  }

  .mega-inner {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 0 0 0 12px;
    margin: 2px 0 6px;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  nav.main a.mega-item {
    padding: 8px 10px;
    gap: 10px;
  }

  .mega-thumb {
    width: 44px;
    height: 30px;
  }

  .mega-text strong {
    font-size: 0.88rem;
  }

  .mega-text small {
    display: none;
  }

  .mega-foot {
    margin-top: 0;
    padding-top: 4px;
    border-top: 0;
  }

  nav.main .mega-foot a {
    padding: 8px 10px;
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }

  .why-grid,
  .why-grid.four-col {
    grid-template-columns: 1fr;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-grid::before {
    display: none;
  }

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

  .quote-grid {
    grid-template-columns: 1fr;
  }

  .two {
    grid-template-columns: 1fr;
  }

  .checks {
    grid-template-columns: 1fr;
  }

  .hero-pillars {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .pillar-badge {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 20px;
  }
  .hero {
    padding: 72px 0 80px;
  }
  /* `body.home .hero` outranks the rule above, so repeat the mobile padding
     with the header band added back. */
  body.home .hero {
    padding-top: calc(72px + var(--header-band));
  }
  section.block {
    padding: 64px 0;
  }
}

/* ==========================================================================
   Service Subpages & Breadcrumbs
   ========================================================================== */
.breadcrumbs {
  margin-bottom: 24px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  font-family: var(--font-body);
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--border-bright);
}

.breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumbs a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.pillar-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(14, 116, 144, 0.08);
  color: var(--accent);
  border: 1px solid rgba(14, 116, 144, 0.2);
  margin-bottom: 16px;
}

.pillar-tag.violet {
  background: rgba(139, 92, 246, 0.08);
  color: var(--violet);
  border-color: rgba(139, 92, 246, 0.2);
}

.pillar-tag.blue {
  background: rgba(59, 130, 246, 0.08);
  color: var(--blue);
  border-color: rgba(59, 130, 246, 0.2);
}

.pillar-tag.cyan {
  background: rgba(6, 182, 212, 0.08);
  color: #0891B2;
  border-color: rgba(6, 182, 212, 0.2);
}

.subpage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.subpage-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.subpage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(9, 13, 22, 0.05);
  border-color: var(--border-bright);
}

.subpage-card .card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--accent);
  margin-bottom: 20px;
}

.subpage-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--text);
}

.subpage-card p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.subpage-card ul {
  margin-top: auto;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.subpage-card ul li {
  margin-bottom: 6px;
}

/* Deliverables & Technology sections */
.deliverables-box {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .deliverables-box {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 28px;
  }
}

.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.tech-pill {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Future expansion placeholder container */
.content-placeholder-box {
  background: rgba(255, 255, 255, 0.6);
  border: 2px dashed var(--border-bright);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin: 48px 0;
}

.content-placeholder-box h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--text);
}

.content-placeholder-box p {
  color: var(--muted);
  max-width: 38em;
  margin: 0 auto 20px;
  font-size: 1rem;
}

/* Related services bottom navigation */
.related-services {
  padding: 64px 0 80px;
  border-top: 1px solid var(--border);
}

.related-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.related-card {
  display: block;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  overflow: hidden;
  color: var(--text);
  transition: all 0.2s ease;
}

.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(9, 13, 22, 0.04);
}

.related-card .rel-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
}

.related-card h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.related-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.related-card .rel-arrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Service overview CTA row */
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

/* Flex ignores the parent's text-align, so the centred page header needs this
   explicitly. Pillar-card .svc-actions stay left-aligned. */
.page-head .svc-actions {
  justify-content: center;
}

/* ==========================================================================
   FAQ Accordion
   Answers stay expanded until JS adds .js to <html>, so the page is readable
   with scripting off.
   ========================================================================== */
.faq-cat {
  padding: 44px 0 8px;
  border-top: 1px solid var(--border);
  margin-bottom: 24px;
}

.faq-cat:first-of-type {
  border-top: 0;
  padding-top: 8px;
}

.faq-cat > h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin-bottom: 6px;
}

.faq-cat > p {
  color: var(--muted);
  margin-bottom: 26px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.faq-item.is-open {
  border-color: rgba(34, 211, 238, 0.42);
}

.faq-item h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.faq-trigger:hover {
  color: #22D3EE;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: #22D3EE;
  transition: transform 0.25s ease;
}

.faq-icon::before {
  width: 16px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 16px;
}

.faq-item.is-open .faq-icon::after {
  transform: rotate(90deg) scaleX(0);
}

html.js .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease;
}

html.js .faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  visibility: visible;
}

.faq-answer__inner {
  overflow: hidden;
}

.faq-answer__inner p,
.faq-answer__inner ul {
  padding: 0 22px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.faq-answer__inner p {
  margin: 0 0 14px;
}

.faq-answer__inner p:first-child {
  margin-top: 0;
}

.faq-answer__inner ul {
  margin: 0 0 16px;
  padding-left: 42px;
  list-style: disc;
}

.faq-answer__inner li {
  margin-bottom: 6px;
}

.faq-answer__inner a {
  color: #22D3EE;
}

/* Callout that points a service page at its FAQ category */
.faq-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  margin-top: 32px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  background: rgba(14, 116, 144, 0.09);
}

.faq-callout p {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

/* ==========================================================================
   Reduced Motion Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-glow.cyan,
  .scroll-glow.violet {
    animation: none;
  }
  .pillar-badge {
    animation: none;
    opacity: 1;
  }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}