/* ============================================================
   CHENSED SOLUTIONS — Website Redesign v1 · 2026-07-10
   Design DNA: VK Academy (structure, cards, two-tone headlines,
   stat counters, dark CTA panels) × Google Antigravity
   (whitespace, scroll word-reveal, aurora glows, pill buttons)
   Brand: Poppins / Merriweather · #FF002B · #84CC02 · #1F2B3D
   ============================================================ */

:root {
  --crimson: #FF002B;
  --crimson-dark: #d90025;
  --lime: #84CC02;
  --lime-dark: #6ea802;
  --gunmetal: #1F2B3D;
  --gunmetal-deep: #141d2b;
  --gunmetal-ink: #121821;
  --light: #F5F5F5;
  --gray: #9CA3AF;
  --gray-dark: #5b6675;
  --red-tint: #FF6B82;
  --green-tint: #B6E680;
  --paper: #FDFDFC;
  --cream: #FBF9F6;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 10px 40px -12px rgba(31, 43, 61, .12);
  --shadow-card: 0 18px 50px -20px rgba(31, 43, 61, .18);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --font-sans: 'Poppins', -apple-system, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--gunmetal);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: min(1180px, 92%); margin: 0 auto; }
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }

/* ---------- Typography ---------- */
.display {
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
}
.display .accent-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.accent-red { color: var(--crimson); }
.accent-green { color: var(--lime); }
h2.display { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--gray-dark);
  font-weight: 400;
  max-width: 62ch;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(31, 43, 61, .05);
  border: 1px solid rgba(31, 43, 61, .08);
  color: var(--gunmetal);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 4px rgba(255, 0, 43, .14);
  animation: pulse-dot 2.2s infinite;
}
.eyebrow .dot.green { background: var(--lime); box-shadow: 0 0 0 4px rgba(132, 204, 2, .16); }
.eyebrow.on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
@keyframes pulse-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
  will-change: transform;
}
.btn .arr { transition: transform .35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary {
  background: var(--crimson);
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(255, 0, 43, .45);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -8px rgba(255, 0, 43, .5); background: var(--crimson-dark); }
.btn-dark {
  background: var(--gunmetal);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(31, 43, 61, .5);
}
.btn-dark:hover { transform: translateY(-3px); background: var(--gunmetal-deep); }
.btn-ghost {
  background: rgba(255,255,255,.7);
  color: var(--gunmetal);
  border: 1.5px solid rgba(31, 43, 61, .16);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--gunmetal); }
.btn-ghost.on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.btn-ghost.on-dark:hover { border-color: #fff; }
.btn-lime { background: var(--lime); color: var(--gunmetal-ink); box-shadow: 0 12px 30px -8px rgba(132,204,2,.45); }
.btn-lime:hover { transform: translateY(-3px); background: var(--lime-dark); color:#fff; }

/* ---------- Nav ---------- */
.nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .35s, box-shadow .35s, padding .35s;
  padding: 18px 0;
}
.nav-wrap.scrolled {
  background: rgba(253, 253, 252, .85);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 30px -12px rgba(31,43,61,.15);
  padding: 10px 0;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-logo img { height: 40px; width: auto; }
.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nav-links a {
  font-size: .88rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--gunmetal);
  transition: background .25s, color .25s;
}
.nav-links a:hover { background: rgba(31,43,61,.06); }
.nav-links a.active { background: rgba(255, 0, 43, .09); color: var(--crimson); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone { font-size: .85rem; font-weight: 600; color: var(--gunmetal); }
.nav-phone span { color: var(--gray); font-weight: 400; }
.btn-nav { padding: 11px 24px; font-size: .85rem; }
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-burger span { width: 24px; height: 2.5px; background: var(--gunmetal); border-radius: 2px; transition: .3s; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(20, 29, 43, .98);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a { color: #fff; font-size: 1.5rem; font-weight: 600; padding: 12px; }
.mobile-menu a.active { color: var(--red-tint); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;
  background: var(--paper);
}
.hero-aurora {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-aurora::before, .hero-aurora::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  animation: drift 14s ease-in-out infinite alternate;
}
.hero-aurora::before {
  width: 620px; height: 620px;
  right: -160px; top: -120px;
  background: radial-gradient(circle, rgba(182,230,128,.55), rgba(132,204,2,.12) 60%, transparent 70%);
}
.hero-aurora::after {
  width: 520px; height: 520px;
  left: -180px; bottom: -160px;
  background: radial-gradient(circle, rgba(255,107,130,.4), rgba(255,0,43,.08) 60%, transparent 70%);
  animation-delay: -7s;
}
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(-40px, 30px) scale(1.08); }
}
.hero-pattern {
  position: absolute; right: -4%; top: 12%;
  width: min(46vw, 620px); opacity: .07; z-index: 0;
  animation: float-slow 12s ease-in-out infinite alternate;
}
@keyframes float-slow { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-24px) rotate(1.5deg); } }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-copy .display { margin-bottom: 26px; }
.hero-copy .display .line-sm {
  display: block;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--gray-dark);
  letter-spacing: -.01em;
  margin-bottom: 10px;
}
.hero-copy .lead { margin-bottom: 14px; }
.hero-sub { font-size: .98rem; color: var(--gunmetal); font-weight: 500; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: .8rem; color: var(--gray); margin-top: 18px; }

/* Hero visual card stack */
.hero-visual { position: relative; }
.hero-card {
  background: linear-gradient(150deg, var(--gunmetal) 0%, var(--gunmetal-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  color: #fff;
  box-shadow: 0 40px 90px -30px rgba(20, 29, 43, .55);
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/pattern-white.svg') no-repeat right -60px bottom -80px / 420px;
  opacity: .06;
}
.hero-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; position: relative; }
.hero-card p { font-size: .85rem; color: rgba(255,255,255,.65); margin-bottom: 24px; position: relative; }
.hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
.hero-metric {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  transition: transform .4s var(--ease-out), background .3s;
}
.hero-metric:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.hero-metric .num { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.hero-metric .num.red { color: var(--red-tint); }
.hero-metric .num.green { color: var(--green-tint); }
.hero-metric .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.55); margin-top: 4px; }
.hero-float {
  position: absolute;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  font-size: .82rem; font-weight: 600;
  animation: float-slow 7s ease-in-out infinite alternate;
}
.hero-float .ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1rem;
}
.hero-float.f1 { top: -26px; left: -40px; }
.hero-float.f1 .ic { background: rgba(132,204,2,.14); }
.hero-float.f2 { bottom: -24px; right: -20px; animation-delay: -3s; }
.hero-float.f2 .ic { background: rgba(255,0,43,.1); }
.hero-float small { display: block; font-weight: 400; color: var(--gray); font-size: .72rem; }

/* ---------- Trust / stats band ---------- */
.stats-band { padding: 40px 0 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.stat-card {
  background: #fff;
  border: 1px solid rgba(31,43,61,.07);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease-out), box-shadow .4s;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute; left: 26px; bottom: 0;
  width: 44px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--crimson);
}
.stat-card:nth-child(2n)::after { background: var(--lime); }
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.stat-card .num {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.stat-card .lbl {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gray);
  font-weight: 600;
  margin-top: 10px;
}

/* ---------- Word-reveal manifesto (Antigravity) ---------- */
.manifesto {
  background: var(--paper);
}
.manifesto-text {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  max-width: 900px;
}
.manifesto-text .w {
  color: rgba(31, 43, 61, .16);
  transition: color .5s ease;
}
.manifesto-text .w.lit { color: var(--gunmetal); }
.manifesto-text .w.lit.hl-red { color: var(--crimson); }
.manifesto-text .w.lit.hl-green { color: var(--lime-dark); }
.manifesto-tag {
  margin-top: 42px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--gunmetal);
}

/* ---------- Cards / services ---------- */
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.section-head .display { margin-bottom: 18px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.svc-card {
  background: #fff;
  border: 1px solid rgba(31,43,61,.07);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); border-color: rgba(255,0,43,.18); }
.svc-card .ic {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
  background: rgba(31,43,61,.05);
  transition: transform .45s var(--ease-out);
}
.svc-card:hover .ic { transform: scale(1.08) rotate(-4deg); }
.svc-card:nth-child(3n+1) .ic { background: rgba(255,0,43,.08); }
.svc-card:nth-child(3n+2) .ic { background: rgba(132,204,2,.12); }
.svc-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; }
.svc-card p { font-size: .9rem; color: var(--gray-dark); flex: 1; }
.svc-card .svc-link {
  margin-top: 22px;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--crimson);
  display: inline-flex; align-items: center; gap: 8px;
}
.svc-card .svc-link .arr { transition: transform .3s var(--ease-out); }
.svc-card:hover .svc-link .arr { transform: translateX(5px); }
.svc-card .tagline { font-size: .78rem; font-weight:600; color: var(--lime-dark); margin-bottom: 8px; text-transform: uppercase; letter-spacing:.1em; }

/* ---------- Sticky two-column process (Antigravity) ---------- */
.process { background: var(--cream); border-radius: 0; }
.process-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid rgba(31,43,61,.08);
}
.process-step:last-child { border-bottom: none; }
.process-num {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.process-num::before { content: ''; width: 34px; height: 2px; background: var(--crimson); display: inline-block; }
.process-step h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.process-step p { color: var(--gray-dark); max-width: 46ch; }
.process-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, var(--gunmetal), var(--gunmetal-deep));
}
.process-media img { width: 100%; height: 100%; object-fit: cover; }
.process-media .glow {
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 30% 30%, rgba(132,204,2,.25), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(255,0,43,.22), transparent 55%);
  filter: blur(40px);
}
.process-media .media-label {
  position: absolute; left: 24px; bottom: 22px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  padding: 12px 20px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--gunmetal);
  display: flex; gap: 8px; align-items: center;
}
.process-step:nth-child(even) .process-copy { order: 2; }
.process-step:nth-child(even) .process-media { order: 1; }

/* ---------- Brand photo frame (from brand reference layouts) ---------- */
.bframe { position: relative; }
.bframe .ph {
  position: relative; overflow: hidden;
  border-radius: 52px 52px 52px 0;
  aspect-ratio: 4/4.5;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.5);
}
.bframe.sq-tr .ph { border-radius: 52px 0 52px 52px; }
.bframe .ph img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85);
  transition: transform .7s var(--ease-out);
}
.bframe:hover .ph img { transform: scale(1.05); }
.bframe .ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(175deg, rgba(31,43,61,.5) 0%, rgba(31,43,61,.12) 45%, rgba(20,29,43,.55) 100%);
  pointer-events: none;
}
.bframe .mark {
  position: absolute; left: -16px; bottom: -16px;
  width: clamp(64px, 7vw, 92px); z-index: 3;
  filter: drop-shadow(0 10px 24px rgba(20,29,43,.45));
  transition: transform .5s var(--ease-out);
}
.bframe:hover .mark { transform: translateY(-6px) rotate(-3deg); }
.bframe.sq-tr .mark { left: auto; right: -16px; bottom: auto; top: -16px; transform: rotate(180deg); }
.bframe.sq-tr:hover .mark { transform: rotate(177deg) translateY(-6px); }
.bframe .corner {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--lime);
}
.bframe .corner.tr { top: -12px; right: -12px; }
.bframe .corner.bl { bottom: 24px; left: -12px; background: var(--crimson); }
.bframe .ph-label {
  position: absolute; left: 22px; bottom: 20px; z-index: 3;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  padding: 11px 18px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--gunmetal);
  display: flex; gap: 8px; align-items: center;
}

/* ---------- Drawn timeline "How it works" (Option F, dark) ---------- */
.process-dark {
  background: var(--gunmetal-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.process-dark::before {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/pattern-white.svg') no-repeat right -140px top -120px / 560px;
  opacity: .04; pointer-events: none;
}
.process-dark .container { position: relative; z-index: 1; }
.process-dark .lead { color: rgba(255,255,255,.62); }
.tl { position: relative; }
.tl-rail {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 4px; transform: translateX(-50%);
  background: rgba(255,255,255,.1); border-radius: 4px;
}
.tl-rail .fill {
  position: absolute; top: 0; left: 0; right: 0; height: 0%;
  background: linear-gradient(180deg, var(--crimson), var(--red-tint) 55%, var(--lime));
  border-radius: 4px;
}
.tl-rail .spark {
  position: absolute; left: 50%; transform: translate(-50%,-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--crimson);
  box-shadow: 0 0 0 6px rgba(255,0,43,.18), 0 0 18px rgba(255,0,43,.6);
}
.tl-step {
  display: grid; grid-template-columns: 1fr 130px 1fr;
  align-items: center; padding: 54px 0;
}
.tl-node {
  grid-column: 2; justify-self: center; position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--gunmetal); border: 2px solid rgba(255,255,255,.16);
  display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; color: rgba(255,255,255,.45);
  transition: border-color .5s, color .5s, transform .5s var(--ease-out), box-shadow .5s;
}
.tl-step.lit .tl-node {
  border-color: var(--crimson); color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(255,0,43,.12), 0 14px 34px -12px rgba(0,0,0,.5);
}
.tl-step.lit .tl-node.green { border-color: var(--lime); box-shadow: 0 0 0 8px rgba(132,204,2,.14), 0 14px 34px -12px rgba(0,0,0,.5); }
.tl-copy { padding: 0 8px; }
.tl-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; color: #fff; }
.tl-copy p { color: rgba(255,255,255,.65); max-width: 42ch; font-size: .95rem; }
.tl-copy .process-num { color: var(--red-tint); }
.tl-copy .process-num::before { background: var(--red-tint); }
.tl-copy .process-num.green { color: var(--green-tint); }
.tl-copy .process-num.green::before { background: var(--green-tint); }
.tl-step:nth-child(odd) .tl-copy { grid-column: 1; text-align: right; }
.tl-step:nth-child(odd) .tl-copy .process-num { justify-content: flex-end; }
.tl-step:nth-child(odd) .tl-copy .process-num::before { order: 2; }
.tl-step:nth-child(odd) .tl-copy p { margin-left: auto; }
.tl-step:nth-child(even) .tl-copy { grid-column: 3; }
.tl-step:nth-child(odd) .bframe { grid-column: 3; }
.tl-step:nth-child(even) .bframe { grid-column: 1; grid-row: 1; }
.tl-step .bframe { max-width: 400px; width: 100%; justify-self: center; opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.tl-step .tl-copy { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out) .1s, transform .8s var(--ease-out) .1s; }
.tl-step.lit .bframe, .tl-step.lit .tl-copy { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .tl-rail { left: 26px; }
  .tl-step { grid-template-columns: 52px 1fr; padding: 36px 0; gap: 0 14px; }
  .tl-node { grid-column: 1; grid-row: 1; width: 48px; height: 48px; font-size: .8rem; justify-self: start; }
  .tl-step .tl-copy, .tl-step:nth-child(odd) .tl-copy, .tl-step:nth-child(even) .tl-copy { grid-column: 2; grid-row: 1; text-align: left; }
  .tl-step:nth-child(odd) .tl-copy .process-num { justify-content: flex-start; }
  .tl-step:nth-child(odd) .tl-copy .process-num::before { order: 0; }
  .tl-step:nth-child(odd) .tl-copy p { margin-left: 0; }
  .tl-step .bframe, .tl-step:nth-child(odd) .bframe, .tl-step:nth-child(even) .bframe { grid-column: 2; grid-row: 2; margin-top: 20px; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-step .bframe, .tl-step .tl-copy { opacity: 1; transform: none; transition: none; }
}

/* ---------- Why choose ---------- */
.why-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(31,43,61,.07);
  padding: 32px 28px;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.why-card .ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 18px; font-size: 1.2rem;
  background: rgba(132,204,2,.13);
}
.why-card:nth-child(2n) .ic { background: rgba(255,0,43,.08); }
.why-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.why-card p { font-size: .87rem; color: var(--gray-dark); }

/* ---------- Why choose: Spotlight switcher (Option I) ---------- */
.spotlight-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: start; }
.rsn-list { display: flex; flex-direction: column; }
.rsn { border-bottom: 1px solid rgba(31,43,61,.09); padding: 4px 0; cursor: pointer; }
.rsn-head { display: flex; align-items: center; gap: 18px; padding: 18px 6px; }
.rsn-head .idx { font-size: .78rem; font-weight: 800; color: var(--gray); width: 30px; flex: none; transition: color .3s; }
.rsn-head h3 { font-size: 1.08rem; font-weight: 700; color: var(--gunmetal); flex: 1; transition: color .3s; }
.rsn-head .pluschev { color: var(--gray); font-weight: 800; transition: transform .4s var(--ease-out), color .3s; }
.rsn-body { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease-out); }
.rsn-body p { padding: 0 6px 20px 54px; font-size: .9rem; color: var(--gray-dark); }
.rsn-progress { height: 3px; background: rgba(31,43,61,.07); border-radius: 3px; margin: 0 6px 14px 54px; overflow: hidden; opacity: 0; }
.rsn.active .rsn-progress { opacity: 1; }
.rsn-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--crimson), var(--lime)); border-radius: 3px; }
.rsn.active .rsn-progress i { animation: rsnfill 6s linear forwards; }
@keyframes rsnfill { to { width: 100%; } }
.rsn.active .rsn-head .idx,
.rsn.active .rsn-head h3,
.rsn.active .rsn-head .pluschev { color: var(--crimson); }
.rsn.active .rsn-head .pluschev { transform: rotate(45deg); }
.proof-stage {
  position: sticky; top: 110px;
  background: linear-gradient(150deg, var(--gunmetal), var(--gunmetal-ink));
  border-radius: var(--radius-lg); color: #fff;
  min-height: 430px; overflow: hidden;
  box-shadow: 0 40px 90px -35px rgba(20,29,43,.6);
}
.proof-stage::before {
  content: ''; position: absolute; inset: -30%;
  background: radial-gradient(circle at 25% 25%, rgba(255,0,43,.16), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(132,204,2,.15), transparent 50%);
  filter: blur(50px); animation: drift 14s ease-in-out infinite alternate;
}
.proof-slide {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 40px;
  opacity: 0; transform: translateY(24px) scale(.97);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  pointer-events: none;
}
.proof-slide.on { opacity: 1; transform: none; }
.proof-slide .big-ic { font-size: 2.6rem; margin-bottom: 18px; }
.proof-slide .big-num {
  font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--green-tint); margin-bottom: 10px;
}
.proof-slide .big-num.red { color: var(--red-tint); }
.proof-slide .cap { font-size: .95rem; color: rgba(255,255,255,.72); max-width: 34ch; }
@media (max-width: 900px) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .proof-stage { position: static; min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .rsn.active .rsn-progress i { animation: none; width: 100%; }
}

/* ---------- Why choose: Bento grid (Option J) ---------- */
.bento { background: var(--paper); }
.bento-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}
.tile {
  border-radius: var(--radius-md); padding: 30px 28px;
  background: #fff; border: 1px solid rgba(31,43,61,.08);
  position: relative; overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s;
}
.tile:hover { transform: translateY(-7px); box-shadow: var(--shadow-card); }
.tile h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.tile p { font-size: .85rem; color: var(--gray-dark); }
.tile .t-ic {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; margin-bottom: 16px; background: rgba(132,204,2,.13);
  transition: transform .4s var(--ease-out);
}
.tile:hover .t-ic { transform: scale(1.12) rotate(-5deg); }
.tile-hero {
  grid-column: span 2; grid-row: span 2;
  color: #fff; border: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center;
}
.tile-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,29,43,.3) 0%, rgba(20,29,43,.55) 45%, rgba(18,24,33,.92) 100%);
}
.tile-hero > * { position: relative; }
.tile-hero h3 { font-size: 1.4rem; margin-bottom: 10px; }
.tile-hero p { color: rgba(255,255,255,.72); }
.tile-hero .hero-nums { display: flex; gap: 34px; margin-top: 22px; flex-wrap: wrap; }
.tile-hero .hero-nums .n { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--green-tint); line-height: 1; }
.tile-hero .hero-nums .n.red { color: var(--red-tint); }
.tile-hero .hero-nums .l { font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.55); margin-top: 7px; font-weight: 600; }
.tile-price {
  grid-column: span 2;
  background: var(--lime); border: none; color: var(--gunmetal-ink);
  display: flex; flex-direction: column; justify-content: center;
}
.tile-price h3 { font-size: 1.2rem; }
.tile-price p { color: rgba(31,43,61,.75); }
.tile-price .range { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 8px; }
.tile-partner { background: var(--crimson); border: none; color: #fff; }
.tile-partner h3 { color: #fff; }
.tile-partner p { color: rgba(255,255,255,.8); }
.tile-partner .t-ic { background: rgba(255,255,255,.16); }
.tile-partner .days { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tile-partner .days b {
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 5px 12px;
  font-size: .72rem; font-weight: 700;
  animation: daypulse 2.4s ease-in-out infinite;
}
.tile-partner .days b:nth-child(2) { animation-delay: .4s; }
.tile-partner .days b:nth-child(3) { animation-delay: .8s; }
@keyframes daypulse {
  0%,100% { transform: scale(1); background: rgba(255,255,255,.16); }
  50% { transform: scale(1.09); background: rgba(255,255,255,.3); }
}
.tile-pattern-bg::after {
  content: ''; position: absolute; right: -60px; bottom: -70px; width: 240px; height: 240px;
  background: url('../assets/pattern-colored.svg') no-repeat center / contain;
  opacity: .08; transition: transform .6s var(--ease-out);
}
.tile-pattern-bg:hover::after { transform: rotate(6deg) scale(1.06); }
.tile-photo {
  grid-column: span 2; border: none; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center 30%;
}
.tile-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,29,43,.05) 30%, rgba(18,24,33,.85) 100%);
}
.tile-photo > * { position: relative; }
.tile-photo .cap { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }
.tile-photo .mark-badge {
  position: absolute; top: 18px; left: 22px;
  width: 46px; filter: drop-shadow(0 6px 16px rgba(20,29,43,.4));
}
@media (max-width: 1000px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento-grid .tile { min-height: 180px; }
  .tile-hero { grid-column: span 2; min-height: 340px; }
}
@media (max-width: 620px) {
  .bento-grid { grid-template-columns: 1fr; }
  .tile-hero, .tile-price, .tile-photo { grid-column: span 1; }
}

/* ---------- Testimonials ---------- */
.testi-wrap { background: var(--gunmetal-ink); color: #fff; overflow: hidden; position: relative; }
.testi-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/pattern-white.svg') no-repeat right -120px top -100px / 600px;
  opacity: .04;
}
.testi-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  position: relative;
  transition: transform .4s var(--ease-out), background .3s;
}
.testi-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); }
.testi-card .quote-mark {
  font-family: var(--font-serif);
  font-size: 4rem; line-height: 1;
  color: var(--crimson);
  margin-bottom: 12px;
}
.testi-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
.testi-card p { font-size: .92rem; color: rgba(255,255,255,.72); margin-bottom: 26px; }
.testi-card .who { display: flex; align-items: center; gap: 14px; }
.testi-card .who .avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson), var(--red-tint));
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem; color: #fff;
}
.testi-card .who .avatar.g { background: linear-gradient(135deg, var(--lime-dark), var(--lime)); }
.testi-card .who strong { display: block; font-size: .9rem; }
.testi-card .who span { font-size: .76rem; color: rgba(255,255,255,.5); }
.testi-proof {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(132,204,2,.14);
  color: var(--green-tint);
  font-size: .76rem; font-weight: 700;
  padding: 7px 16px; border-radius: 999px;
  margin-bottom: 18px;
}

/* ---------- Cinema marquee testimonials (Option C) ---------- */
.cine { background: var(--cream); overflow: hidden; }
.cine-row { display: flex; gap: 24px; width: max-content; padding: 12px 0; }
.cine-row.r1 { animation: cine-l 42s linear infinite; }
.cine-row.r2 { animation: cine-r 48s linear infinite; }
.cine-row:hover { animation-play-state: paused; }
@keyframes cine-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cine-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cine-card {
  width: 420px; flex: none;
  background: #fff; border: 1px solid rgba(31,43,61,.08);
  border-radius: var(--radius-md); padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.cine-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-card); }
.cine-card .stars { color: #f5b301; letter-spacing: 3px; font-size: .85rem; margin-bottom: 12px; }
.cine-card p { font-size: .88rem; color: var(--gray-dark); margin-bottom: 18px; }
.cine-card .who { display: flex; align-items: center; gap: 12px; }
.cine-card .who .avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, var(--gunmetal), var(--gray-dark));
}
.cine-card .who .avatar.r { background: linear-gradient(135deg, var(--crimson), var(--red-tint)); }
.cine-card .who .avatar.g { background: linear-gradient(135deg, var(--lime-dark), var(--lime)); }
.cine-card .who strong { display: block; font-size: .85rem; color: var(--gunmetal); }
.cine-card .who span { font-size: .72rem; color: var(--gray); }
.cine-card .chip {
  display: inline-block; margin-bottom: 12px;
  background: rgba(132,204,2,.12); color: var(--lime-dark);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.cine-card .chip.r { background: rgba(255,0,43,.08); color: var(--crimson); }
.cine-fade { position: relative; }
.cine-fade::before, .cine-fade::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.cine-fade::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); }
.cine-fade::after { right: 0; background: linear-gradient(-90deg, var(--cream), transparent); }
@media (max-width: 720px) { .cine-card { width: 320px; } }
@media (prefers-reduced-motion: reduce) { .cine-row.r1, .cine-row.r2 { animation: none; } }

/* ---------- Dark CTA panel (VK Academy) ---------- */
.cta-panel {
  background: linear-gradient(150deg, var(--gunmetal) 0%, var(--gunmetal-ink) 100%);
  border-radius: calc(var(--radius-lg) + 8px);
  padding: clamp(48px, 7vw, 90px) clamp(28px, 6vw, 80px);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 50px 110px -40px rgba(20,29,43,.65);
}
.cta-panel::before {
  content: '';
  position: absolute; inset: -40%;
  background: radial-gradient(circle at 20% 20%, rgba(255,0,43,.18), transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(132,204,2,.16), transparent 45%);
  filter: blur(50px);
  animation: drift 16s ease-in-out infinite alternate;
}
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.cta-inner h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 20px; }
.cta-inner .cta-sub { color: rgba(255,255,255,.7); margin-bottom: 32px; max-width: 52ch; }
.cta-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.cta-list li { display: flex; gap: 14px; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.85); }
.cta-list li .check {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(132,204,2,.18); color: var(--lime);
  display: grid; place-items: center; font-size: .75rem; font-weight: 800;
  margin-top: 2px;
}
.cta-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-mini {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  transition: transform .4s var(--ease-out), background .3s;
}
.cta-mini:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); }
.cta-mini .ic { font-size: 1.5rem; margin-bottom: 10px; }
.cta-mini strong { display: block; font-size: .95rem; }
.cta-mini span { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.5); }

/* ---------- Contact / form ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contact-opt {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 0;
  border-bottom: 1px solid rgba(31,43,61,.08);
}
.contact-opt:last-child { border-bottom: none; }
.contact-opt .ic {
  flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(255,0,43,.08);
}
.contact-opt:nth-child(2n) .ic { background: rgba(132,204,2,.13); }
.contact-opt h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.contact-opt p { font-size: .88rem; color: var(--gray-dark); margin-bottom: 6px; }
.contact-opt .val { font-weight: 700; color: var(--gunmetal); font-size: .95rem; }

.form-card {
  background: #fff;
  border: 1px solid rgba(31,43,61,.08);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--crimson), var(--red-tint) 40%, var(--lime));
}
.form-card h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; }
.form-card .form-sub { font-size: .88rem; color: var(--gray-dark); margin-bottom: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 7px; color: var(--gunmetal); }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .92rem;
  padding: 14px 18px;
  border: 1.5px solid rgba(31,43,61,.14);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--gunmetal);
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 4px rgba(255,0,43,.09);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: .75rem; color: var(--gray); margin-top: 14px; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card {
  background: #fff;
  border: 1px solid rgba(31,43,61,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s;
  text-align: center;
  padding-bottom: 26px;
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card); }
.team-card .photo {
  aspect-ratio: 4/4.4;
  background: linear-gradient(160deg, var(--light), #e8ebee);
  overflow: hidden;
  margin-bottom: 20px;
}
.team-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.team-card:hover .photo img { transform: scale(1.05); }
.team-card h3 { font-size: 1.05rem; font-weight: 700; }
.team-card .role { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; color: var(--crimson); font-weight: 700; margin-top: 4px; }

/* ---------- Footer ---------- */
footer {
  background: var(--gunmetal-ink);
  color: #fff;
  padding: 80px 0 36px;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/pattern-white.svg') no-repeat left -140px bottom -140px / 520px;
  opacity: .04;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  position: relative;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img { height: 44px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: .88rem; color: rgba(255,255,255,.6); max-width: 40ch; }
.footer-slogan {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--green-tint);
}
.footer-col h4 {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.footer-col h4::before { content: ''; width: 26px; height: 2px; background: var(--crimson); }
.footer-col ul li { margin-bottom: 12px; }
.footer-col a, .footer-col li { font-size: .88rem; color: rgba(255,255,255,.65); transition: color .25s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 30px;
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  position: relative;
  flex-wrap: wrap;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-aurora::before, .hero-aurora::after, .hero-pattern, .hero-float, .cta-panel::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 170px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero .hero-aurora::before { width: 480px; height: 480px; opacity: .4; }
.page-hero .hero-aurora::after { width: 400px; height: 400px; opacity: .35; }
.breadcrumb { font-size: .8rem; color: var(--gray); margin-bottom: 22px; font-weight: 500; }
.breadcrumb a:hover { color: var(--crimson); }
.breadcrumb .sep { margin: 0 8px; }

/* ---------- Misc ---------- */
.band-light { background: var(--cream); }
.divider-soft { height: 1px; background: rgba(31,43,61,.08); }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pill-row .pill {
  background: #fff;
  border: 1.5px solid rgba(31,43,61,.1);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
  display: inline-flex; align-items: center; gap: 10px;
}
.pill-row .pill:hover { transform: translateY(-3px); border-color: var(--lime); box-shadow: var(--shadow-soft); }
.pill-row .pill .dot-sm { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }

.marquee-band {
  background: var(--gunmetal);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex; gap: 56px; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  color: rgba(255,255,255,.85);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 56px;
}
.marquee-track span::after { content: '✦'; color: var(--crimson); font-size: .7rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- FAQ ---------- */
.faq-item {
  background: #fff;
  border: 1px solid rgba(31,43,61,.08);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans);
  font-size: .98rem; font-weight: 600; color: var(--gunmetal);
  padding: 22px 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left;
}
.faq-q .chev { transition: transform .35s var(--ease-out); color: var(--crimson); font-weight: 800; }
.faq-item.open .faq-q .chev { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease-out);
}
.faq-a p { padding: 0 26px 24px; font-size: .9rem; color: var(--gray-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 70px; }
  .hero-visual { max-width: 560px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-inner { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-phone { display: none; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .btn-nav { display: none; }
  .grid-3, .grid-2, .stats-grid, .team-grid { grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .process-step:nth-child(even) .process-copy { order: 1; }
  .process-step:nth-child(even) .process-media { order: 2; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; }
  .hero-float.f1 { left: 0; }
  .hero-float.f2 { right: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-mini-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   HERO v2 · 2026-07-11 — dark gunmetal hero, watermark pattern,
   rotating pain-point headline, 5-card dashboard deck, ticker.
   Approved via hero-deck-preview.html.
   ============================================================ */

/* ---- dark nav variant (index hero) ---- */
.nav-dark .nav-links a { color: #fff; }
.nav-dark .nav-links a:hover { background: rgba(255,255,255,.08); }
.nav-dark .nav-links a.active { background: rgba(255,0,43,.18); color: var(--red-tint); }
.nav-dark .nav-phone { color: #fff; }
.nav-dark .nav-phone span { color: rgba(255,255,255,.5); }
.nav-dark .nav-burger span { background: #fff; }
.nav-dark.scrolled { background: rgba(18,24,33,.88); backdrop-filter: blur(14px); box-shadow: 0 6px 30px -12px rgba(0,0,0,.45); }

    /* ---- hero v2 ---- */
    .ho {
      position: relative; overflow: hidden;
      background: var(--gunmetal);
      color: #fff;
      padding: clamp(100px, 13vw, 150px) 0 0;
    }
    .ho-pattern {
      position: absolute; inset: 0; z-index: 1;
      background: url('../assets/pattern-white-tile.svg') repeat;
      background-size: 760px auto; background-position: left top;
      opacity: .055; pointer-events: none; user-select: none;
    }
    .ho-inner {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
      padding-bottom: clamp(70px, 9vw, 110px);
    }
    .ho .eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
    .ho h1 {
      font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
      font-size: clamp(2.4rem, 5.2vw, 3.9rem);
      margin-bottom: 26px; color: #fff;
    }
    .ho-rotator {
      display: inline-block; position: relative;
      font-family: var(--font-serif); font-style: italic; font-weight: 700;
      color: var(--crimson);
      min-width: 9ch;
    }
    .ho-rotator .word {
      display: inline-block;
      opacity: 0; transform: translateY(18px);
      position: absolute; left: 0; top: 0; white-space: nowrap;
      transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    }
    .ho-rotator .word.on { position: relative; opacity: 1; transform: none; }
    .ho-rotator .underline {
      position: absolute; left: 0; bottom: -6px; height: 4px; width: 100%;
      background: linear-gradient(90deg, var(--crimson), var(--lime));
      border-radius: 4px; transform-origin: left;
      animation: ho-under var(--cycle, 4s) var(--ease-out) infinite;
    }
    @keyframes ho-under { 0% { transform: scaleX(0); } 18% { transform: scaleX(1); } 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
    .ho h1 .into { color: var(--lime); font-family: var(--font-serif); font-style: italic; font-weight: 700; }
    .ho-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(255,255,255,.68); max-width: 52ch; margin-bottom: 12px; }
    .ho-sub { font-size: .96rem; font-weight: 500; color: #fff; margin-bottom: 34px; }
    .ho-sub strong { color: var(--lime); }
    .ho-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
    .btn-ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
    .btn-ghost-dark:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); transform: translateY(-2px); }
    .ho-note { font-size: .8rem; color: rgba(255,255,255,.45); margin-top: 18px; }

    /* ---------- deck of three dashboards ---------- */
    .ho-visual { position: relative; }
    .deck { position: relative; perspective: 1200px; }
    .dcard {
      position: absolute; inset: 0 auto auto 0; width: 100%;
      border-radius: var(--radius-md); overflow: hidden;
      box-shadow: 0 50px 110px -30px rgba(0,0,0,.55);
      transition: transform .8s var(--ease-out), opacity .8s var(--ease-out);
      will-change: transform, opacity;
      /* 2026-07-19 — all five dashboards render at one identical size.
         main.js already sizes .deck to the tallest card; previously each card
         kept its own intrinsic height inside that box, so the stacked layers
         behind the front card poked out by different amounts and the frame
         appeared to resize on every rotation. Filling the deck locks the
         silhouette; the flex column below lets the shorter cards distribute
         their slack instead of clustering at the top. */
      height: 100%;
      display: flex; flex-direction: column;
    }
    /* Bodies fill the card. .r-body stays a two-column grid — a blanket
       display:flex here would collapse the feed/donut pairing. */
    .dcard > .q-body, .dcard > .p-body,
    .dcard > .s-body, .dcard > .b-body { flex: 1; display: flex; flex-direction: column; }
    .dcard > .r-body { flex: 1; align-content: center; }
    /* Each card's primary visual absorbs the slack, so the shorter dashboards
       fill the shared frame instead of leaving dead space under the content.
       Mirrors the mobile carousel treatment further down this file. */
    .dcard .q-grid  { flex: 1; min-height: 0; }
    .dcard .p-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
    /* The cash-flow area chart was the single tallest block in the deck and so
       set the height for all five: its 480x170 viewBox at full card width
       rendered ~215px tall. Capping the width caps the height proportionally —
       no preserveAspectRatio="none", which would have squashed the dots into
       ellipses and thinned the line. ~50px comes off every card. */
    .dcard .p-chart svg { width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
    .dcard .s-chart { flex: 1; min-height: 104px; height: auto; }
    .dcard .b-row   { flex: 0 0 auto; }
    /* footers sit on the baseline of the card, not immediately under the content */
    .dcard .q-foot, .dcard .b-foot, .dcard .s-foot,
    .dcard .m-foot { margin-top: auto; }
    .dcard.is-front { z-index: 3; opacity: 1; transform: rotate(1.2deg); pointer-events: auto; }
    .dcard.is-mid   { z-index: 2; opacity: .55; transform: translateY(-26px) scale(.94) rotate(-1deg); pointer-events: none; }
    .dcard.is-back  { z-index: 1; opacity: .3;  transform: translateY(-48px) scale(.885) rotate(.6deg); pointer-events: none; }
    .dcard.is-hid   { z-index: 0; opacity: 0;   transform: translateY(-64px) scale(.84); pointer-events: none; }
    .dcard.is-exit  { z-index: 4; opacity: 0; transform: translateY(56px) scale(.97) rotate(3deg); pointer-events: none; }
    .deck-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; position: relative; z-index: 4; }
    .deck-dots i {
      width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18);
      overflow: hidden; position: relative; cursor: pointer;
    }
    .deck-dots i::after {
      content: ''; position: absolute; inset: 0; width: 0%;
      background: var(--lime); border-radius: 4px;
    }
    .deck-dots i.on::after { animation: dotfill var(--cycle, 7s) linear forwards; }
    @keyframes dotfill { to { width: 100%; } }

    /* ---------- shared window chrome ---------- */
    .dash-bar { display: flex; align-items: center; gap: 8px; background: var(--gunmetal-ink); padding: 12px 16px; }
    .dash-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
    .dash-bar i:nth-child(1) { background: var(--crimson); }
    .dash-bar i:nth-child(2) { background: #f5c518; }
    .dash-bar i:nth-child(3) { background: var(--lime); }
    .dash-bar .ttl { margin-left: 10px; font-size: .72rem; color: rgba(255,255,255,.6); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
    .live {
      font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: var(--lime-dark); display: inline-flex; align-items: center; gap: 7px;
    }
    .live::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
      box-shadow: 0 0 0 4px rgba(132,204,2,.16); animation: pulse-dot 2.2s infinite;
    }

    /* ---------- P: midnight cash-flow ---------- */
    .p-dash { background: linear-gradient(165deg, #26344a, var(--gunmetal-deep)); border: 1px solid rgba(255,255,255,.12); color: #fff; }
    .p-body { padding: 24px; }
    .p-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
    .p-row .h { font-size: .92rem; font-weight: 700; }
    .p-chart { position: relative; margin-bottom: 18px; }
    .p-chart svg { width: 100%; height: auto; display: block; }
    .p-line { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 620; stroke-dashoffset: 620; }
    .p-dash.play .p-line { animation: p-draw 2.2s var(--ease-out) forwards .3s; }
    @keyframes p-draw { to { stroke-dashoffset: 0; } }
    .p-fill { fill: url(#p-grad); opacity: 0; }
    .p-dash.play .p-fill { animation: p-fade .9s ease forwards 1.9s; }
    @keyframes p-fade { to { opacity: 1; } }
    .p-dot { fill: #fff; stroke: var(--lime); stroke-width: 3; opacity: 0; }
    .p-dash.play .p-dot { animation: p-pop .45s var(--ease-out) forwards; }
    .p-dash.play .p-dot.d1 { animation-delay: 1.15s; }
    .p-dash.play .p-dot.d2 { animation-delay: 2.15s; }
    @keyframes p-pop { from { opacity: 0; r: 0; } to { opacity: 1; r: 5.5; } }
    .p-badge {
      position: absolute; top: 4px; right: 8px;
      background: rgba(132,204,2,.15); border: 1px solid rgba(132,204,2,.35);
      color: var(--green-tint); font-size: .68rem; font-weight: 700;
      padding: 4px 11px; border-radius: 999px;
      opacity: 0; transform: translateY(8px);
    }
    .p-dash.play .p-badge { animation: p-badge-in .6s var(--ease-out) forwards 2.4s; }
    @keyframes p-badge-in { to { opacity: 1; transform: none; } }
    .p-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .p-kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 11px 13px; }
    .p-kpi .n { font-size: 1.15rem; font-weight: 800; color: var(--green-tint); line-height: 1.15; }
    .p-kpi .n.red { color: var(--red-tint); }
    .p-kpi .l { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-top: 3px; }

    /* ---------- Q: compliance tracker ---------- */
    .q-dash { background: linear-gradient(165deg, #26344a, var(--gunmetal-deep)); border: 1px solid rgba(255,255,255,.12); color: #fff; }
    .q-body { padding: 24px; }
    .q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .q-head .h { font-size: .92rem; font-weight: 700; }
    .q-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
    .q-list { display: flex; flex-direction: column; gap: 8px; }
    .q-item {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 9px 12px;
      font-size: .74rem; font-weight: 500;
    }
    .q-item .f { display: flex; flex-direction: column; }
    .q-item .f b { font-weight: 700; font-size: .76rem; }
    .q-item .f small { color: rgba(255,255,255,.55); font-size: .64rem; font-weight: 400; }
    .q-pill {
      font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 999px; white-space: nowrap;
      background: rgba(255,0,43,.16); color: var(--red-tint);
      transition: background .45s, color .45s, transform .45s var(--ease-out);
    }
    .q-item.done .q-pill { background: rgba(132,204,2,.18); color: var(--green-tint); transform: scale(1.05); }
    .q-ring { position: relative; width: 116px; height: 116px; flex: none; }
    .q-ring svg { transform: rotate(-90deg); width: 116px; height: 116px; }
    .q-ring .bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 9; }
    .q-ring .fg {
      fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round;
      stroke-dasharray: 307.9; stroke-dashoffset: 307.9;
      transition: stroke-dashoffset 1s var(--ease-out);
    }
    .q-ring .txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
    .q-ring .txt .n { font-size: 1.3rem; font-weight: 800; line-height: 1; }
    .q-ring .txt .l { font-size: .54rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-top: 3px; }
    .q-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: .7rem; color: rgba(255,255,255,.6); }
    .q-foot b { color: var(--green-tint); font-weight: 800; }

    /* ---------- R: live activity feed ---------- */
    .r-dash { background: linear-gradient(165deg, #26344a, var(--gunmetal-deep)); border: 1px solid rgba(255,255,255,.12); color: #fff; }
    .r-body { padding: 24px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: center; }
    .r-feed { display: flex; flex-direction: column; gap: 8px; }
    .r-note {
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 9px 12px;
      font-size: .72rem; font-weight: 500; line-height: 1.35;
      opacity: 0; transform: translateY(-14px);
      transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    }
    .r-note.on { opacity: 1; transform: none; }
    .r-note .ic {
      width: 30px; height: 30px; border-radius: 9px; flex: none;
      display: grid; place-items: center; font-size: .85rem;
      background: rgba(132,204,2,.18);
    }
    .r-note.red .ic { background: rgba(255,0,43,.16); }
    .r-note small { display: block; color: rgba(255,255,255,.55); font-size: .62rem; font-weight: 400; }
    .r-donut-wrap { text-align: center; }
    .r-donut {
      width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 10px;
      background: conic-gradient(var(--crimson) 0deg, rgba(255,255,255,.12) 0deg);
      display: grid; place-items: center;
    }
    .r-donut .hole { width: 94px; height: 94px; border-radius: 50%; background: var(--gunmetal-deep); display: grid; place-items: center; text-align: center; }
    .r-donut .n { font-size: 1.4rem; font-weight: 800; color: var(--red-tint); line-height: 1; }
    .r-donut .l { font-size: .52rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.55); margin-top: 3px; padding: 0 8px; }
    .r-cap { font-size: .66rem; color: rgba(255,255,255,.5); max-width: 20ch; margin: 0 auto; }

    /* ---------- S: sales performance ---------- */
    .s-dash { background: linear-gradient(165deg, #26344a, var(--gunmetal-deep)); border: 1px solid rgba(255,255,255,.12); color: #fff; }
    .s-body { padding: 24px; }
    .s-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
    .s-row .h { font-size: .92rem; font-weight: 700; }
    .s-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
    .s-big .n { font-size: 1.7rem; font-weight: 800; line-height: 1; }
    .s-delta {
      font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
      background: rgba(132,204,2,.18); color: var(--green-tint);
      padding: 4px 10px; border-radius: 999px;
    }
    .s-chart { display: flex; align-items: flex-end; gap: 10px; height: 104px; margin: 16px 0 14px; }
    .s-chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
    .s-chart .bar {
      border-radius: 6px 6px 3px 3px; height: 0%;
      background: linear-gradient(180deg, var(--lime), var(--lime-dark));
      transition: height 1.1s var(--ease-out);
    }
    .s-chart .col.dip .bar { background: linear-gradient(180deg, var(--red-tint), var(--crimson)); }
    .s-chart .m { font-size: .58rem; text-align: center; color: rgba(255,255,255,.45); letter-spacing: .08em; text-transform: uppercase; }
    .s-foot { display: flex; gap: 8px; flex-wrap: wrap; }
    .s-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px; padding: 6px 12px;
      font-size: .66rem; font-weight: 600; color: #fff;
    }

    /* ---------- B: budget vs actual (P&L) ---------- */
    .b-dash { background: linear-gradient(165deg, #26344a, var(--gunmetal-deep)); border: 1px solid rgba(255,255,255,.12); color: #fff; }
    .b-body { padding: 24px; }
    .b-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .b-head .h { font-size: .92rem; font-weight: 700; }
    .b-row { margin-bottom: 13px; }
    .b-lab { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; margin-bottom: 5px; }
    .b-chip {
      font-size: .58rem; font-weight: 700; letter-spacing: .06em;
      padding: 3px 9px; border-radius: 999px;
      background: rgba(132,204,2,.18); color: var(--green-tint);
      opacity: 0; transform: translateY(6px);
      transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    }
    .b-chip.over { background: rgba(255,0,43,.16); color: var(--red-tint); }
    .b-chip.on { opacity: 1; transform: none; }
    .b-track { height: 6px; background: rgba(255,255,255,.09); border-radius: 4px; position: relative; margin-bottom: 4px; }
    .b-track .fillb { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: rgba(255,255,255,.45); width: 0%; transition: width 1s var(--ease-out); }
    .b-track.actual .fillb { background: linear-gradient(90deg, var(--lime), var(--lime-dark)); opacity: 1; }
    .b-track.actual.over .fillb { background: linear-gradient(90deg, var(--red-tint), var(--crimson)); }
    .b-legend { display: flex; gap: 14px; font-size: .6rem; color: rgba(255,255,255,.55); margin-bottom: 14px; }
    .b-legend i { display: inline-block; width: 14px; height: 5px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
    .b-legend .lg-b i { background: rgba(255,255,255,.45); }
    .b-legend .lg-a i { background: var(--lime); }
    .b-foot { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-size: .7rem; color: rgba(255,255,255,.6); }
    .b-foot b { color: var(--green-tint); font-weight: 800; }

    /* ---------- floating chips ---------- */
    .ho-float {
      position: absolute; z-index: 5;
      display: flex; align-items: center; gap: 12px;
      background: #fff; border: 1px solid rgba(31,43,61,.08);
      border-radius: 14px; padding: 12px 18px;
      box-shadow: 0 24px 60px -18px rgba(0,0,0,.5);
      font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--gunmetal);
      animation: ho-bob 6s ease-in-out infinite;
    }
    .ho-float small { display: block; font-weight: 400; color: var(--gray-dark); font-size: .72rem; }
    .ho-float .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; flex: none; background: rgba(255,0,43,.09); }
    .ho-float.f1 { top: -24px; left: -34px; }
    .ho-float.f2 { bottom: 26px; right: -18px; animation-delay: -3s; }
    .ho-float.f2 .ic { background: rgba(132,204,2,.14); }
    @keyframes ho-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    /* ---------- ticker ---------- */
    .ho-ticker {
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03); overflow: hidden;
      padding: 16px 0;
    }
    .ho-ticker .track {
      display: flex; gap: 54px; width: max-content;
      animation: ho-scroll 30s linear infinite;
      font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55);
      white-space: nowrap;
    }
    .ho-ticker .track span::before { content: '✦'; color: var(--lime); margin-right: 14px; }
    @keyframes ho-scroll { to { transform: translateX(-50%); } }

    @media (max-width: 980px) {
      .ho-inner { grid-template-columns: 1fr; gap: 70px; }
      .ho-float.f1 { left: -6px; }
      .ho-float.f2 { right: -6px; }
      .ho h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
      .r-body { grid-template-columns: 1fr; }
      .r-donut-wrap { display: none; }
    }

/* ============================================================
   HEADER v2 · 2026-07-11 — glass capsule links, lime CTA,
   scroll progress line. Approved via header-combined-preview.html.
   ============================================================ */
.nav-v2 .nav-logo { display: inline-flex; align-items: center; gap: 9px; }
.nav-v2 .nav-logo img.mk { height: 34px; width: auto; }
.nav-v2 .nav-logo img.tp { height: 22px; width: auto; }
/* full lockup logo in header (2026-07-12) */
.nav-v2 .nav-logo img.logo-full { height: 44px; width: auto; }
@media (max-width: 560px) { .nav-v2 .nav-logo img.logo-full { height: 38px; } }
.nav-v2 .nav-links {
  gap: 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(10px);
  padding: 6px; border-radius: 999px;
  transition: background .35s, border-color .35s;
}
.nav-v2 .nav-links a { padding: 8px 18px; }
.nav-v2 .nav-links a:hover { background: rgba(255,255,255,.1); }
.nav-v2 .nav-links a.active { background: var(--crimson); color: #fff; font-weight: 600; }
.nav-v2.scrolled .nav-links { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.nav-v2 .nav-progress {
  position: absolute; left: 0; right: 0; bottom: -2.5px; height: 2.5px;
  background: rgba(255,255,255,.07);
}
.nav-v2 .nav-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--crimson), var(--lime));
}

/* ============================================================
   HERO v3 · 2026-07-11 — LIGHT THEME + Background C (dot grid).
   Approved via hero-light-preview.html. Overrides the dark hero
   and header variants; markup uses .ho-light + .ho-dots.
   ============================================================ */
/* header: light glass from the start */
.nav-v2 { background: rgba(253,253,252,.75); backdrop-filter: blur(10px); }
.nav-v2 .nav-links { background: rgba(31,43,61,.05); border-color: rgba(31,43,61,.1); }
.nav-v2 .nav-links a:hover { background: rgba(31,43,61,.07); }
.nav-v2.scrolled .nav-links { background: rgba(31,43,61,.04); border-color: rgba(31,43,61,.08); }
.nav-v2 .nav-progress { background: rgba(31,43,61,.07); }

/* hero: white canvas */
.ho.ho-light { background: #fff; color: var(--gunmetal); }
/* hero watermark — two-glyph, cursor-responsive (2026-07-11, option B from hero-watermark-alternatives-v2.html) */
.ho-wm { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* hero proof toasts — slide up inside the deck (2026-07-11, option D from hero-chips-alternatives.html) */
.ho-toast {
  position: absolute; left: 18px; bottom: 18px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid rgba(31,43,61,.08);
  border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.5);
  font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--gunmetal);
  opacity: 0; pointer-events: none;
  animation: ho-toast-cycle 9s ease-in-out infinite;
}
.ho-toast small { display: block; font-weight: 400; color: var(--gray-dark); font-size: .72rem; }
.ho-toast .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; flex: none; background: rgba(255,0,43,.09); }
.ho-toast.t2 { animation-delay: -4.5s; }
.ho-toast.t2 .ic { background: rgba(132,204,2,.14); }
@keyframes ho-toast-cycle {
  0%, 6% { opacity: 0; transform: translateY(14px); }
  12%, 42% { opacity: 1; transform: translateY(0); }
  48%, 100% { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .ho-toast { animation: none; opacity: 1; transform: none; }
  .ho-toast.t2 { display: none; }
}
.ho-dots {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(31,43,61,.16) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 78% 40%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 90% at 78% 40%, #000 20%, transparent 72%);
}
.ho-light .eyebrow { background: rgba(31,43,61,.05); border-color: rgba(31,43,61,.08); color: var(--gunmetal); }
.ho-light h1 { color: var(--gunmetal); }
.ho-light .ho-lead { color: var(--gray-dark); }
.ho-light .ho-sub { color: var(--gunmetal); }
.ho-light .ho-sub strong { color: var(--lime-dark); }
.ho-light .ho-note { color: var(--gray); }

/* deck + chips on light */
.ho-light .dcard { box-shadow: 0 40px 90px -30px rgba(31,43,61,.4); }
.ho-light .deck-dots i { background: rgba(31,43,61,.12); }
.ho-light .ho-float { box-shadow: 0 24px 60px -18px rgba(31,43,61,.35); }

/* ticker on light — gunmetal stripe (2026-07-11, option 2 from ticker-alternatives.html) */
.ho-light .ho-ticker { border-top-color: transparent; background: var(--gunmetal); }
.ho-light .ho-ticker .track { color: rgba(255,255,255,.6); }
.ho-light .ho-ticker .track span::before { color: var(--lime); }

/* ============================================================
   SECTIONS v2 · 2026-07-11 — Stats X (sparkline cards),
   Manifesto Z (pain strike-out), Services on gunmetal.
   Approved via stats-manifesto-alternatives.html.
   ============================================================ */
/* ---- stats X: sparkline cards ---- */
.stx { background: var(--cream); padding: 64px 0; }
.stx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stx-card {
  background: #fff; border: 1px solid rgba(31,43,61,.08); border-radius: var(--radius-md);
  padding: 26px 24px 20px;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.stx-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.stx-card .num { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.05; color: var(--gunmetal); }
.stx-card:nth-child(odd) .num { color: var(--crimson); }
.stx-card:nth-child(even) .num { color: var(--lime-dark); }
.stx-card .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gray-dark); margin: 6px 0 14px; }
.stx-card svg { width: 100%; height: 34px; display: block; }
.stx-card svg path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.stx-card:nth-child(odd) svg path { stroke: var(--red-tint); }
.stx-card:nth-child(even) svg path { stroke: var(--lime); }
.stx.in svg path { animation: stx-draw 1.6s var(--ease-out) forwards .4s; }
@keyframes stx-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 800px) { .stx-grid { grid-template-columns: 1fr 1fr; } }

/* ---- manifesto Z: pain strike-out ---- */
.mfz { background: var(--gunmetal); color: #fff; padding: clamp(80px, 10vw, 130px) 0; position: relative; overflow: hidden; }
.mfz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; position: relative; z-index: 2; }
.mfz h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.25;
}
.mfz h2 .g { color: var(--lime); }
.mfz-list { display: flex; flex-direction: column; gap: 18px; }
.pain { position: relative; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; color: rgba(255,255,255,.85); width: fit-content; transition: color .5s; }
.pain::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 2.5px;
  background: var(--crimson); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.pain.done { color: rgba(255,255,255,.32); }
.pain.done::after { transform: scaleX(1); }
.mfz-resolve {
  margin-top: 10px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.mfz-resolve.on { opacity: 1; transform: none; }
.mfz-resolve .g { color: var(--lime); }
.mfz-resolve .r { color: var(--crimson); }
.mfz-tag { margin-top: 22px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 600; }
@media (max-width: 860px) { .mfz-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---- services on gunmetal ---- */
.services-dark { background: var(--gunmetal); }
.services-dark .section-head .display { color: #fff; }
.services-dark .section-head .lead { color: rgba(255,255,255,.65); }

/* ---- founder's note: dark letter + blended portrait, Poppins body
   (2026-07-11 · design 2 + photo D from founder-photo-alternatives.html) ---- */
.fnote { background: var(--gunmetal); padding: clamp(64px, 7vw, 96px) 0; }
.fnote-grid { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }
.fnote .eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.fnote h2 {
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fff; margin: 16px 0 18px;
}
.fnote h2 .r { font-family: 'Merriweather', serif; font-style: italic; font-weight: 700; color: var(--lime); }
.fnote .letter p { font-family: 'Poppins', sans-serif; font-size: .98rem; color: rgba(255,255,255,.82); line-height: 1.8; margin-bottom: 18px; }
.fnote .letter p .hl { background: rgba(132,204,2,.24); color: #fff; padding: 0 4px; border-radius: 4px; }
.fnote .sig { margin-top: 26px; }
.fnote .sig .nm { font-weight: 800; color: #fff; font-size: 1rem; }
.fnote .sig .rl { font-size: .82rem; color: rgba(255,255,255,.55); }
.fnote .ph { position: relative; isolation: isolate; }
.fnote .ph img.pt {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  border-radius: 18px 18px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}
.fnote .ph .glyph { position: absolute; top: -34px; left: -44px; width: 130px; height: 130px; color: rgba(132,204,2,.16); z-index: -1; }
.fnote .ph .glyph2 { position: absolute; bottom: 26px; right: -40px; width: 110px; height: 110px; color: rgba(255,0,43,.14); z-index: -1; transform: rotate(180deg); }
@media (max-width: 900px) {
  .fnote-grid { grid-template-columns: 1fr; gap: 40px; }
  .fnote .ph { order: -1; max-width: 320px; margin: 0 auto; }
}
/* fnote animation: ink reveal on entry (B) + parallax drift (D) —
   2026-07-11, from founder-note-animation-alternatives.html */
.fnote .letter > * { opacity: 0; transition: opacity .8s ease; }
.fnote .letter > *:nth-child(1) { transition-delay: .05s; }
.fnote .letter > *:nth-child(2) { transition-delay: .2s; }
.fnote .letter > *:nth-child(3) { transition-delay: .45s; }
.fnote .letter > *:nth-child(4) { transition-delay: .7s; }
.fnote.go .letter > * { opacity: 1; }
.fnote .letter p .hl {
  background: linear-gradient(rgba(132,204,2,.28), rgba(132,204,2,.28)) no-repeat left center / 0% 100%;
  transition: background-size .9s var(--ease-out) 1.2s;
}
.fnote.go .letter p .hl { background-size: 100% 100%; }
.fnote .sig { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out) 1.6s; }
.fnote.go .sig { clip-path: inset(0 0 0 0); }
.fnote .ph { opacity: 0; transition: opacity 1s ease .2s; }
.fnote.go .ph { opacity: 1; }
.fnote .ph img.pt, .fnote .ph .glyph, .fnote .ph .glyph2 { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .fnote .letter > *, .fnote .ph { opacity: 1 !important; transition: none !important; }
  .fnote .sig { clip-path: none !important; }
  .fnote .letter p .hl { background-size: 100% 100% !important; }
}

/* ---- scroll-blend zone: stats → manifesto (2026-07-11 · option 4 from
   section-transitions-alternatives.html) ---- */
.blend-zone { background: var(--cream); }
.blend-zone .stx, .blend-zone .mfz { background: transparent; }

/* ---- services v3: light band, checkerboard cards + glyph ghosts
   (2026-07-11 · 5B+5C combo from services-alternatives-option5.html) ---- */
.services-light { background: var(--cream); }
.svl-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px 28px; border-radius: 18px;
  background: var(--gunmetal);
  box-shadow: 0 24px 60px -28px rgba(31,43,61,.5);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.svl-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -28px rgba(31,43,61,.65); }
.svl-card .wm {
  position: absolute; right: -26px; bottom: -30px; width: 150px; height: 150px; z-index: 1;
  color: rgba(255,255,255,.06);
  transition: color .4s, transform .4s var(--ease-out);
}
.svl-card:hover .wm { transform: scale(1.08) rotate(-6deg); }
.svl-card.wm-red:hover .wm { color: rgba(255,0,43,.35); }
.svl-card.wm-lime:hover .wm { color: rgba(132,204,2,.4); }
.svl-card .ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.5rem; background: rgba(255,255,255,.09); margin-bottom: 20px;
  position: relative; z-index: 2;
  transition: transform .35s var(--ease-out);
}
.svl-card:hover .ic { transform: scale(1.08) rotate(-4deg); }
.svl-card h3 { font-size: 1.12rem; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: -.01em; position: relative; z-index: 2; }
.svl-card p { font-size: .9rem; color: rgba(255,255,255,.62); line-height: 1.6; flex: 1; position: relative; z-index: 2; }
.svl-link {
  margin-top: 18px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lime); text-decoration: none; position: relative; z-index: 2;
}
.svl-link .arr { display: inline-block; transition: transform .3s var(--ease-out); }
.svl-card:hover .svl-link .arr { transform: translateX(5px); }
.svl-card.alt { background: #fff; box-shadow: 0 18px 44px -24px rgba(31,43,61,.25); }
.svl-card.alt:hover { box-shadow: 0 28px 56px -24px rgba(31,43,61,.35); }
.svl-card.alt .wm { color: rgba(31,43,61,.05); }
.svl-card.alt.wm-red:hover .wm { color: rgba(255,0,43,.22); }
.svl-card.alt.wm-lime:hover .wm { color: rgba(132,204,2,.3); }
.svl-card.alt .ic { background: rgba(255,0,43,.08); }
.svl-card.alt.wm-lime .ic { background: rgba(132,204,2,.14); }
.svl-card.alt h3 { color: var(--gunmetal); }
.svl-card.alt p { color: var(--gray-dark); }
.svl-card.alt .svl-link { color: var(--crimson); }

/* ============================================================
   FOUNDER SIGNATURE · 2026-07-11 — Rockybilly script written in
   by an animated pen (Signature 2, approved via
   signature-alternatives.html). White ink.
   ============================================================ */
.fnote .sig.sig2 { margin-top: 38px; clip-path: none; transition: none; } /* replaces the old block wipe */
.fnote .sig2 .script {
  display: block;
  position: relative;
  font-family: 'Rockybilly', 'Great Vibes', cursive;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.5;
  color: #fff;
  padding: 26px 0 0;
  margin-bottom: 2px;
  overflow: visible;
}
.fnote .sig2 .script .ch { display: inline-block; opacity: 0; }
.fnote .sig2 .script .ch.on { animation: pen-stroke .22s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes pen-stroke {
  0%   { opacity: 0; clip-path: inset(-150% 100% -150% -150%); transform: translateY(4px) rotate(-5deg); }
  35%  { opacity: 1; }
  70%  { clip-path: inset(-150% -150% -150% -150%); }
  100% { opacity: 1; clip-path: inset(-150% -150% -150% -150%); transform: none; }
}
.fnote .sig2 .pen {
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px;
  pointer-events: none; z-index: 3;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}
.fnote .sig2 .pen.on { opacity: 1; }
.fnote .sig2 .pen svg { display: block; width: 100%; height: 100%; transform-origin: 15% 85%; }
.fnote .sig2 .pen.on svg { animation: pen-wiggle .16s ease-in-out infinite alternate; }
@keyframes pen-wiggle { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

/* ============================================================
   FOUNDER PHOTO v2 · 2026-07-11 — Option B (gradient ring hover,
   coordinated glyphs, responsive sizing) + Antigravity-style live
   dot field. Approved via founder-photo-hover-alternatives.html.
   ============================================================ */
.fnote { position: relative; overflow: hidden; }
.fnote .fnote-dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.fnote .fnote-grid { position: relative; z-index: 2; }

/* photo group: gradient ring frame */
.fnote .ph .frame { position: relative; border-radius: 20px; padding: 3px; background: transparent; transition: background .5s; }
.fnote .ph img.pt {
  border-radius: 17px;
  -webkit-mask-image: none; mask-image: none;
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.fnote .ph .frame:hover { background: linear-gradient(135deg, var(--crimson), var(--gunmetal) 45% 55%, var(--lime)); } /* ring only when hovering the photo itself; image stays still */

/* glyphs: responsive sizing + coordinated hover */
.fnote .ph .glyph, .fnote .ph .glyph2 {
  width: clamp(64px, 34%, 130px); height: auto; aspect-ratio: 1.25/1;
  transition: transform .55s var(--ease-out), color .45s;
}
.fnote .ph .glyph { top: -8%; left: -13%; }
.fnote .ph .glyph2 { bottom: 4%; right: -12%; }
.fnote .ph .glyph:hover { transform: rotate(-8deg) scale(1.08); color: rgba(132,204,2,.34); }   /* each glyph reacts to its own hover */
.fnote .ph .glyph2:hover { transform: rotate(172deg) scale(1.08); color: rgba(255,0,43,.32); }
@media (max-width: 900px) { .fnote .ph { max-width: min(320px, 78vw); } }

/* ============================================================
   FOUNDER PHOTO v3 · 2026-07-11 — Option D "Pop-Out Portrait":
   background stays and dims, person zooms out of the frame with
   a lime→crimson rim light on his silhouette. Requires
   assets/founder-cutout.png (transparent). Approved via
   founder-photo-hover-alternatives.html.
   ============================================================ */
.fnote .ph .frame img.pt { aspect-ratio: 620/820; transition: filter .5s; } /* match cutout so layers align */
.fnote .ph .cutout {
  position: absolute; left: 3px; bottom: 3px;
  width: calc(100% - 6px); height: auto; display: block;
  pointer-events: none;
  transform-origin: bottom center;
  transition: transform .55s var(--ease-out), filter .55s;
}
.fnote .ph .frame:hover img.pt { filter: brightness(.72) saturate(.85); }
.fnote .ph .frame:hover .cutout {
  transform: scale(1.06);
  filter:
    drop-shadow(-3px -2px 0 rgba(132,204,2,.85))
    drop-shadow(3px 2px 0 rgba(255,0,43,.8))
    drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

/* ============================================================
   SERVICES DROPDOWN + SERVICE PAGES · 2026-07-11
   Dropdown lives in the capsule nav; sp-* components are the
   shared building blocks of the six individual service pages.
   ============================================================ */
/* ---- dropdown ---- */
.nav-links .has-drop { position: relative; }
.nav-links .has-drop > a .caret { display: inline-block; margin-left: 6px; font-size: .6rem; transition: transform .3s var(--ease-out); vertical-align: 1px; }
.nav-links .has-drop:hover > a .caret, .nav-links .has-drop:focus-within > a .caret { transform: rotate(180deg); }
.nav-links .has-drop::after { /* invisible hover bridge over the gap */
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
}
.nav-drop {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px; padding: 8px;
  background: rgba(253,253,252,.97); backdrop-filter: blur(14px);
  border: 1px solid rgba(31,43,61,.08); border-radius: 16px;
  box-shadow: var(--shadow-card);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  z-index: 90;
}
.has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px !important; border-radius: 10px !important;
  font-size: .85rem; color: var(--gunmetal); white-space: nowrap;
}
.nav-drop a .di { font-size: 1rem; width: 22px; text-align: center; flex: none; }
.nav-drop a small { display: block; font-size: .68rem; color: var(--gray-dark); font-weight: 400; }
.nav-drop a:hover { background: rgba(31,43,61,.05) !important; }
.nav-drop .view-all { border-top: 1px solid rgba(31,43,61,.07); margin-top: 6px; padding-top: 12px !important; color: var(--crimson); font-weight: 600; }
@media (max-width: 900px) { .nav-drop { display: none; } }

/* ---- service page hero ---- */
.sp-hero { position: relative; overflow: hidden; background: #fff; padding: clamp(120px, 15vw, 170px) 0 clamp(48px, 6vw, 72px); }
.sp-hero .sp-dots {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(31,43,61,.16) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 82% 30%, #000 15%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 90% at 82% 30%, #000 15%, transparent 70%);
}
.sp-hero .container { position: relative; z-index: 2; }
.sp-hero h1 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; font-size: clamp(2.2rem, 4.8vw, 3.6rem); max-width: 22ch; margin-bottom: 20px; }
.sp-hero h1 .accent-serif { font-family: var(--font-serif); font-style: italic; font-weight: 700; }
.sp-hero .lead { margin-bottom: 30px; }
.sp-hero .sp-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.sp-hero .sp-proof { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--light); border: 1px solid rgba(31,43,61,.07);
  border-radius: 999px; padding: 8px 15px;
  font-size: .74rem; font-weight: 600; color: var(--gunmetal);
}
.sp-chip b { color: var(--lime-dark); }

/* ---- "sound familiar" pain list ---- */
.sp-pains { background: var(--cream); }
.sp-pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; max-width: 900px; }
.sp-pain {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .95rem; color: var(--gunmetal); font-weight: 500; line-height: 1.6;
}
.sp-pain .x { color: var(--crimson); font-weight: 800; flex: none; margin-top: 1px; }
@media (max-width: 720px) { .sp-pain-grid { grid-template-columns: 1fr; } }

/* ---- what's included ---- */
.sp-inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sp-inc {
  background: #fff; border: 1px solid rgba(31,43,61,.08); border-radius: var(--radius-md);
  padding: 24px 22px;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.sp-inc:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.sp-inc .ck { color: var(--lime-dark); font-weight: 800; font-size: 1.05rem; }
.sp-inc h3 { font-size: .98rem; font-weight: 700; margin: 8px 0 6px; }
.sp-inc p { font-size: .85rem; color: var(--gray-dark); }
@media (max-width: 900px) { .sp-inc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sp-inc-grid { grid-template-columns: 1fr; } }

/* ---- how it works steps ---- */
.sp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: spstep; }
.sp-step {
  background: var(--gunmetal); color: #fff; border-radius: var(--radius-md);
  padding: 26px 24px; position: relative; overflow: hidden;
}
.sp-step::before {
  counter-increment: spstep; content: '0' counter(spstep);
  position: absolute; right: 14px; top: 6px;
  font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.07); line-height: 1;
}
.sp-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.sp-step h3 .n { color: var(--lime); }
.sp-step p { font-size: .84rem; color: rgba(255,255,255,.65); }
@media (max-width: 780px) { .sp-steps { grid-template-columns: 1fr; } }

/* ---- proof band ---- */
.sp-band { background: var(--gunmetal); color: #fff; padding: 44px 0; position: relative; overflow: hidden; }
.sp-band::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--crimson), var(--lime)); }
.sp-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; }
.sp-band .num { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: var(--green-tint); line-height: 1.1; }
.sp-band .num.red { color: var(--red-tint); }
.sp-band .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.5); margin-top: 5px; }
@media (max-width: 640px) { .sp-band-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---- other services strip ---- */
.sp-others { border-top: 1px solid rgba(31,43,61,.07); }
.sp-others .row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   TEAM v2 · 2026-07-11 — A3 Ring Avatars: conic brand ring spins
   on hover, cursor-magnetic portraits, live dot field background.
   Approved via team-optionA-alternatives.html.
   ============================================================ */
.a3-sec { position: relative; overflow: hidden; }
.a3-sec .container { position: relative; z-index: 2; }
.a3-dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.a3-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.a3-card { text-align: center; padding: 10px 6px; }
.a3-card .mag { display: block; will-change: transform; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.a3-card .ring {
  width: min(200px, 78%); aspect-ratio: 1; border-radius: 50%; margin: 0 auto 18px;
  padding: 5px;
  background: conic-gradient(var(--crimson), var(--lime), var(--crimson));
}
.a3-card:hover .ring { animation: a3spin 2.4s linear infinite; }
@keyframes a3spin { to { transform: rotate(360deg); } }
.a3-card .ring .ph {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: linear-gradient(160deg, var(--light), #e8ebee);
  border: 4px solid #fff;
}
.a3-card:hover .ring .ph { animation: a3counter 2.4s linear infinite; }
@keyframes a3counter { to { transform: rotate(-360deg); } }
.a3-card .ring .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.a3-card h3 { font-size: .95rem; font-weight: 700; line-height: 1.35; }
.a3-card .cred {
  display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .1em;
  background: rgba(132,204,2,.14); color: var(--lime-dark);
  border-radius: 999px; padding: 2px 8px; vertical-align: 2px; margin-left: 2px;
}
.a3-card .role { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-top: 6px; }
.a3-card .role.red { color: var(--crimson); }
.a3-card .role.green { color: var(--lime-dark); }
@media (max-width: 960px) { .a3-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .a3-grid { grid-template-columns: 1fr; } }

/* ============================================================
   WHO WE ARE HERO · 2026-07-12 — C2 Fan Spread: three partner
   quote cards held like a hand; the active voice rises to the
   front. Live responsive dot field behind, quotation watermark
   on each card. Approved via who-we-are-c-alternatives.html.
   ============================================================ */
.wa {
  position: relative; overflow: hidden; background: var(--cream);
  padding: clamp(110px, 13vw, 150px) 0 clamp(56px, 7vw, 80px);
}
.wa .container { position: relative; z-index: 2; }
.wa-dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.wa-head { text-align: center; margin-bottom: 26px; }
.wa-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.wa h1 {
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin-bottom: 20px;
}
.c2-stage { position: relative; height: 380px; perspective: 1000px; }
.c2-card {
  position: absolute; left: 8%; right: 8%; top: 16px;
  background: var(--gunmetal); color: #fff;
  border-radius: var(--radius-lg); padding: 34px 28px 24px;
  box-shadow: 0 34px 80px -28px rgba(31,43,61,.55);
  transform-origin: 50% 120%;
  transition: transform .7s var(--ease-out), opacity .7s, filter .7s;
  cursor: pointer; overflow: hidden;
}
.c2-card::before {
  content: '\201C'; position: absolute; top: -14px; left: 16px;
  font-family: var(--font-serif); font-size: 7rem; line-height: 1;
  color: rgba(132,204,2,.22); pointer-events: none;
}
.c2-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--lime));
}
.c2-card.pos-l { transform: rotate(-9deg) translateY(14px); z-index: 1; filter: brightness(.75); }
.c2-card.pos-r { transform: rotate(9deg) translateY(14px); z-index: 1; filter: brightness(.75); }
.c2-card.pos-c { transform: rotate(0) translateY(-10px) scale(1.03); z-index: 3; filter: none; }
.c2-card:hover { filter: none; }
.c2-card p {
  position: relative; font-family: var(--font-serif); font-style: italic;
  font-size: 1.02rem; line-height: 1.6; margin-bottom: 16px;
}
.c2-card .who { position: relative; display: flex; align-items: center; gap: 11px; }
.c2-card .who img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  object-position: center top; border: 2px solid rgba(132,204,2,.5);
}
.c2-card .who b { display: block; font-size: .8rem; }
.c2-card .who span { font-size: .68rem; color: rgba(255,255,255,.55); }
@media (max-width: 900px) {
  .wa-grid { grid-template-columns: 1fr; gap: 40px; }
  .c2-stage { height: 400px; }
}
@media (max-width: 560px) {
  .c2-stage { height: 470px; }
  .c2-card { left: 2%; right: 2%; }
  .c2-card.pos-l { transform: rotate(-6deg) translateY(12px); }
  .c2-card.pos-r { transform: rotate(6deg) translateY(12px); }
}

/* ============================================================
   FOUNDERS' STORY · 2026-07-12 — F3-A Vertical Spine: a brand-
   gradient line draws down as you scroll; four chapters step in
   from alternating sides with kicker + serif-accent headings.
   Approved via founders-story-f3-alternatives.html.
   ============================================================ */
.fstory { position: relative; overflow: hidden; background: var(--paper); padding-bottom: clamp(36px, 4vw, 56px); }
.fstory + .a3-sec { padding-top: clamp(36px, 4vw, 56px); }
.fstory .container { position: relative; z-index: 2; }
.fs-dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.fstory-tagline {
  margin-top: 52px; text-align: center; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--gunmetal);
}
.fstory-tagline .sweep {
  display: inline-block;
  background: linear-gradient(90deg, var(--gunmetal) 0%, var(--gunmetal) 32%, var(--crimson) 44%, var(--lime-dark) 56%, var(--gunmetal) 68%, var(--gunmetal) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fsweep 4.5s linear infinite;
}
.fstory-tagline .sweep.manual { animation: none; }
@keyframes fsweep { 0% { background-position: 100% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fstory-tagline .sweep { animation: none; background: none; color: var(--gunmetal); }
}
.fa-rail { position: relative; max-width: 880px; margin: 60px auto 0; }
.fa-rail::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%); background: rgba(31,43,61,.1);
}
.fa-line {
  position: absolute; left: 50%; top: 0; width: 2px; height: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--crimson), var(--lime));
}
.fa-item { position: relative; width: 44%; padding: 4px 0 56px; opacity: 0; transition: opacity .7s ease, transform .7s var(--ease-out); }
.fa-item.side-l { margin-left: 0; transform: translateX(-26px); text-align: right; }
.fa-item.side-r { margin-left: 56%; transform: translateX(26px); }
.fa-item.on { opacity: 1; transform: none; }
.fa-item .node {
  position: absolute; top: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--crimson); color: var(--crimson);
  font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: .92rem;
  box-shadow: 0 0 0 8px var(--paper); z-index: 2;
  transition: background .4s, color .4s;
}
.fa-item.side-l .node { right: -13.65%; transform: translateX(50%); }
.fa-item.side-r .node { left: -13.65%; transform: translateX(-50%); }
.fa-item.green .node { border-color: var(--lime); color: var(--lime-dark); }
.fa-item.on .node { background: var(--crimson); color: #fff; }
.fa-item.green.on .node { background: var(--lime); color: var(--gunmetal-ink); }
.fa-item .kick {
  font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 7px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease .1s, transform .5s var(--ease-out) .1s;
}
.fa-item.green .kick { color: var(--lime-dark); }
.fa-item.on .kick { opacity: 1; transform: none; }
.fa-item h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; color: var(--gunmetal);
}
.fa-item h3 .accent-serif { font-size: 1.06em; }
.fa-item .bar {
  width: 40px; height: 3px; border-radius: 3px; margin: 0 0 14px;
  background: linear-gradient(90deg, var(--crimson), var(--lime));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease-out) .3s;
}
.fa-item.side-l .bar { margin-left: auto; transform-origin: right center; background: linear-gradient(90deg, var(--lime), var(--crimson)); }
.fa-item.on .bar { transform: scaleX(1); }
.fa-item p { font-size: .9rem; line-height: 1.65; color: var(--gray-dark); }
.fa-item p .hl { font-weight: 700; color: var(--gunmetal); }
@media (max-width: 720px) {
  .fa-rail::before, .fa-line { left: 22px; transform: none; }
  .fa-item, .fa-item.side-l, .fa-item.side-r { width: auto; margin-left: 0; padding-left: 64px; text-align: left; transform: translateY(20px); }
  .fa-item.side-l .node, .fa-item.side-r .node { left: 22px; right: auto; transform: translateX(-50%); }
  .fa-item.side-l .bar { margin-left: 0; transform-origin: left center; }
  .fa-item.on { transform: none; }
}

/* ============================================================
   Floating stat cards — Colorway 3 (Apple Green) · 2026-07-16
   replaces the old .stx-card white cards in the blend-zone
   ============================================================ */
.stx-grid { align-items: stretch; }
.fstat{
  position:relative; border:1px solid rgba(255,255,255,.08); border-radius:20px;
  padding:28px 24px 26px; overflow:hidden;
  background:linear-gradient(180deg,#233a2c,#182c20);
  box-shadow:0 30px 50px -22px rgba(0,0,0,.65);
  animation:fstat-float 5.5s var(--ease-out) infinite;
}
.fstat:nth-child(2){ animation-delay:-1.3s; }
.fstat:nth-child(3){ animation-delay:-2.6s; }
.fstat:nth-child(4){ animation-delay:-3.9s; }
.fstat:hover{ animation-play-state:paused; box-shadow:0 40px 64px -20px rgba(0,0,0,.78); }
@keyframes fstat-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@media (prefers-reduced-motion:reduce){ .fstat{ animation:none; } }

.fstat > *{ position:relative; z-index:2; }
.fstat .fs-glow{ position:absolute; width:150px; height:150px; top:-42px; left:-22px; border-radius:50%;
  filter:blur(32px); opacity:.5; z-index:1; pointer-events:none;
  background:radial-gradient(circle,rgba(132,204,2,.5),transparent 65%); }
.fstat .fs-edge{ position:absolute; left:22px; right:22px; top:0; height:2px; border-radius:2px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--lime-dark),var(--lime),var(--lime-dark),transparent); }
.fstat .fs-ix{ position:absolute; top:18px; right:20px; font-size:.64rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.28); z-index:3; }
.fstat .fs-num{ font-weight:800; line-height:.95; letter-spacing:-.02em; font-size:clamp(1.9rem,2.6vw,2.7rem); color:#fff; }
.fstat:nth-child(odd) .fs-suf{ color:var(--crimson); }
.fstat:nth-child(even) .fs-suf{ color:var(--lime); }
.fstat .fs-delta{ display:inline-flex; align-items:center; gap:5px; margin-top:11px; font-size:.64rem; font-weight:700;
  letter-spacing:.04em; color:var(--green-tint); background:rgba(182,230,128,.1);
  border:1px solid rgba(182,230,128,.24); padding:3px 10px; border-radius:999px; }
.fstat .fs-sep{ display:block; height:1px; background:rgba(255,255,255,.1); margin:15px 0 12px; }
.fstat .fs-lbl{ font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.55); }

@media (max-width:800px){ .fstat{ padding:24px 20px 22px; } }

/* ============================================================
   Manifesto — A3 Editorial Pull-Quote layout · 2026-07-16
   ============================================================ */
.mfz-a3 .mfz-grid { grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
.mfz-a3 .mfz-list { padding-top: 50px; }   /* aligns the pains with the headline block */
.mfz-a3 .mfz-q { position: relative; padding-left: 34px; padding-top: 50px; }
.mfz-a3 .mfz-q .mfz-bar { position: absolute; left: 0; top: 60px; bottom: 8px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--crimson), var(--lime)); }   /* starts below the quote mark */
.mfz-a3 .mfz-q::before { content: '\201C'; position: absolute; left: 2px; top: 0;
  font-family: var(--font-serif); font-weight: 700; font-size: 4.6rem; line-height: 1;
  color: rgba(132,204,2,.28); pointer-events: none; }

/* Strike-through that works across wrapped pain lines (no stray line in the gap) */
.mfz-a3 .pain::after { display: none; }
.mfz-a3 .pain { text-decoration-line: line-through; text-decoration-color: transparent;
  text-decoration-thickness: 2.5px; transition: color .5s, text-decoration-color .55s var(--ease-out); }
.mfz-a3 .pain.done { text-decoration-color: var(--crimson); }
.mfz-a3 .mfz-q .eyebrow { background: transparent; border: 0; padding: 0; border-radius: 0; margin-bottom: 14px;
  color: rgba(255,255,255,.6); font-size: .66rem; font-weight: 700; letter-spacing: .2em; }
.mfz-a3 .mfz-q .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); display: inline-block; flex: none; }
.mfz-a3 .mfz-q h2 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }
.mfz-a3 .mfz-list .pain { opacity: .9; }
/* F3 — tagline signature under the headline */
.mfz-a3 .mfz-fill { margin-top: 26px; }
.mfz-a3 .mfz-rule { display: block; width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--lime)); margin-bottom: 14px; }
.mfz-a3 .mfz-sig { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.55); }
@media (max-width: 860px) {
  .mfz-a3 .mfz-grid { grid-template-columns: 1fr; gap: 34px; }
  .mfz-a3 .mfz-q { padding-top: 44px; }
  .mfz-a3 .mfz-list { padding-top: 0; }
}

/* ============================================================
   Cursor-reactive dot field behind stats + manifesto · 2026-07-16
   ============================================================ */
.blend-zone { position: relative; }
.blend-zone > .stx, .blend-zone > .mfz { position: relative; z-index: 1; }
.blend-dots { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 106% 92% at 50% 46%, #000 52%, transparent 94%);
          mask-image: radial-gradient(ellipse 106% 92% at 50% 46%, #000 52%, transparent 94%); }
@media (max-width: 760px) { .blend-dots { display: none; } }

/* ============================================================
   HERO · MOBILE ≤760px — 2026-07-18
   Resequenced copy block (condensed lead, full-width primary CTA,
   text-link secondary) + dashboard deck as a swipeable carousel
   of uniform condensed cards. Desktop (>760px) untouched.
   ============================================================ */
.ho-lead-m { display: none; }
/* mobile-only dashboard elements — hidden on desktop */
.m-hero, .m-foot, .r-strip { display: none; }
@media (max-width: 760px) {
  /* keep the carousel from inflating the grid column (min-width blowout) */
  .ho .ho-inner { grid-template-columns: minmax(0, 1fr); }
  .ho .ho-inner > * { min-width: 0; }
  .ho .ho-visual { max-width: 100%; }
  .ho .deck { max-width: 100%; }

  /* eyebrow: single line — Davao already lives in nav + footer */
  .ho .eb-loc { display: none; }
  .ho .eyebrow { font-size: .68rem; letter-spacing: .09em; padding: 9px 16px; gap: 7px; white-space: nowrap;
    width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex; }

  /* condensed lead lifts the primary CTA into the first screen */
  .ho .ho-lead { display: none; }
  .ho .ho-sub { display: none; }
  .ho .ho-lead-m { display: block; font-size: 1.02rem; line-height: 1.6; margin-bottom: 26px; }
  .ho-light .ho-lead-m strong { color: var(--lime-dark); font-weight: 700; }

  /* one full-width primary + quiet text-link secondary */
  .ho-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .ho-actions .btn-primary { width: 100%; justify-content: center; padding: 16px 24px; }
  .ho-actions .btn-ghost {
    background: none; border: none; backdrop-filter: none;
    align-self: center; padding: 10px 6px;
    font-size: .9rem; font-weight: 600; color: var(--gunmetal);
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-thickness: 1.5px; text-decoration-color: rgba(31,43,61,.35);
  }
  .ho-actions .btn-ghost:hover { transform: none; text-decoration-color: var(--crimson); }
  .ho .ho-note { text-align: center; margin-top: 10px; font-size: .72rem; text-wrap: balance; }
  .ho .ho-inner { gap: 44px; }

  /* ---- dashboard deck → swipeable carousel of uniform cards ---- */
  .ho .ho-toast { display: none; }           /* no overlays poking out of the cards */
  .ho .deck {
    height: auto !important;                 /* JS locks height for the desktop stack */
    perspective: none;
    display: flex; align-items: stretch; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    scrollbar-width: none;
  }
  .ho .deck::-webkit-scrollbar { display: none; }
  .ho .dcard,
  .ho .dcard.is-front, .ho .dcard.is-mid, .ho .dcard.is-back,
  .ho .dcard.is-hid, .ho .dcard.is-exit {
    position: relative; inset: auto;
    flex: 0 0 100%;                          /* full width — one dashboard at a time */
    min-width: 0;
    height: auto;                            /* carousel stretches via align-items, not the desktop 100% */
    opacity: 1; transform: none; pointer-events: auto; z-index: 1;
    scroll-snap-align: center;
    display: flex; flex-direction: column;   /* stretch = uniform height across cards */
    box-shadow: 0 26px 60px -26px rgba(31,43,61,.4);
    transition: none;
  }
  .ho .dcard > [class$="-body"] { flex: 1; display: flex; flex-direction: column; }
  /* pin each card's footer row to the bottom; content above stays top-stacked */
  .q-foot, .b-foot, .s-foot { margin-top: auto; padding-top: 12px; }

  /* ---- condensed rewrite: shared skeleton per card ----
     title row → hero metric (.m-hero) → compact visual → foot line
     Desktop-only pieces carry .m-hide; mobile-only pieces are
     .m-hero / .m-foot / .r-strip (hidden above 760px). */
  .m-hide { display: none !important; }
  .m-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .m-hero .n { font-size: 1.9rem; font-weight: 800; line-height: 1; color: #fff; }
  .m-hero .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.55); line-height: 1.5; }
  .m-hero .l small { display: block; font-size: .62rem; color: var(--green-tint); font-weight: 700; }
  .q-mh .n { color: var(--green-tint); }
  .m-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: .7rem; color: rgba(255,255,255,.6); }
  .m-foot b { color: var(--green-tint); font-weight: 800; }

  .q-body, .p-body, .s-body, .b-body, .r-body { padding: 16px; }
  .q-head, .p-row, .s-row, .b-head { margin-bottom: 10px; }

  /* Q · compliance: ring replaced by hero %; filings stretch to fill */
  .q-ring { display: none; }
  .q-grid { grid-template-columns: 1fr; flex: 1; }
  .q-list { height: 100%; justify-content: space-evenly; }
  .q-item { padding: 8px 10px; }
  .q-foot { margin-top: auto; padding-top: 12px; }

  /* P · cash-flow: KPIs replaced by hero + foot; chart fills the middle */
  .p-kpis { display: none; }
  .p-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; }
  .p-chart svg { width: 100%; height: auto; }

  /* S · sales: its own big number is the hero; bars fill the middle */
  .s-big .n { font-size: 1.9rem; }
  .s-chart { flex: 1; min-height: 84px; margin: 12px 0 0; }
  .s-foot { margin-top: auto; padding-top: 12px; }

  /* B · budget: 3 rows on mobile (.m-hide on cost of sales + long foot) */
  .b-legend { margin-bottom: 10px; }
  .b-row { margin-bottom: 10px; }

  /* R · feed: notes stretch; compact 95% strip pinned at the bottom */
  .r-body { gap: 8px; }
  .r-feed { flex: 1; justify-content: space-evenly; }
  .r-note { padding: 8px 10px; }
  .r-strip { display: flex; align-items: center; gap: 10px; margin-top: 12px;
    background: rgba(255,0,43,.12); border: 1px solid rgba(255,0,43,.25);
    border-radius: 10px; padding: 10px 12px; }
  .r-strip .l { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); font-weight: 700; white-space: nowrap; }
  .r-strip .bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
  .r-strip .bar i { display: block; height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, var(--crimson), var(--red-tint));
    transition: width .6s var(--ease-out); }
  .r-strip .n { font-size: .95rem; font-weight: 800; color: var(--red-tint); min-width: 4ch; text-align: right; }

  .deck-dots { margin-top: 18px; }
}

/* ============================================================
   STATS + MANIFESTO + CREDENTIALS · MOBILE ≤760px — 2026-07-18
   Tidy 2×2 stat grid (no float, no delta chips), reclaimed
   manifesto width, tightened section rhythm, centered cred rows.
   Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  /* section rhythm: collapse the stacked desktop paddings */
  .stx { padding: 44px 0 26px; }
  .mfz { padding: 36px 0 26px; }   /* clear air between the finale and the flow line */

  /* zone background: match the AI + Your CPA navy-ink gradient */
  .blend-zone { background: radial-gradient(120% 130% at 50% -10%, #101a2e 0%, #0c1322 60%, #080d17 100%); }
  /* keep the dot field visible on mobile (overrides the earlier hide rule) */
  .blend-dots { display: block; }

  /* ---- stats: tidy 2×2, equal heights, calm ---- */
  .stx-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fstat { padding: 18px 16px 16px; border-radius: 16px;
    display: flex; flex-direction: column; }
  .fstat .fs-num { font-size: 1.7rem; margin-bottom: 14px; }
  .fstat .fs-delta { display: none; }
  .fstat .fs-sep { margin: auto 0 10px; }
  .fstat .fs-ix { top: 14px; right: 16px; font-size: .56rem; }
  .fstat .fs-lbl { font-size: .58rem; letter-spacing: .12em; }
  .fstat .fs-glow { width: 110px; height: 110px; top: -34px; left: -18px; }

  /* ---- manifesto: one spine, tight quote, closed gaps ---- */
  .mfz-a3 .mfz-grid { gap: 24px; }
  .mfz-a3 .mfz-q { padding-left: 18px; padding-top: 24px; }
  .mfz-a3 .mfz-q::before { font-size: 2.8rem; top: -6px; }
  .mfz-a3 .mfz-q .mfz-bar { top: 30px; }
  .mfz-a3 .mfz-q h2 { font-size: 1.55rem; }
  .mfz-a3 .mfz-fill { margin-top: 16px; }
  .mfz-a3 .mfz-sig { font-size: .68rem; letter-spacing: .14em; }
  .mfz-a3 .mfz-list { padding-left: 18px; }   /* pains share the headline's left edge */
  .mfz-list { gap: 12px; }
  .pain { font-size: 1rem; }
  /* centered finale — pivots the left-spine manifesto into the centered strip */
  .mfz-a3 .mfz-list .mfz-resolve { font-size: 1.15rem; text-align: center;
    margin-left: -18px; width: calc(100% + 18px); margin-top: 20px; }

  /* ---- credential strip: compact, two deliberate logo rows, float kept ----
     (section. prefix out-specifies the inline <style> in index.html) */
  section.cred-strip { padding: 32px 0 40px; background: transparent; }
  section.cred-strip .cs-row { flex-direction: column; gap: 22px; }
  section.cred-strip .cs-vr { display: none; }
  section.cred-strip .cs-k { width: 100%; text-align: center; letter-spacing: .16em; }
  /* PROUD MEMBER · PICPA inline on one line */
  section.cred-strip .cs-grp:first-of-type { display: flex; align-items: center; justify-content: center; gap: 12px; }
  section.cred-strip .cs-grp:first-of-type .cs-k { width: auto; }
  /* all six certified logos on a single line */
  section.cred-strip .cs-grp:last-of-type { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(6px, 2vw, 10px); }
  section.cred-strip .cs-logo { height: clamp(22px, 7.6vw, 31px); }
  section.cred-strip .cs-logo.picpa { height: 40px; }
  section.cred-strip .cs-logo.elasticbooks { height: clamp(18px, 6.2vw, 25px); filter: drop-shadow(0 1px 10px rgba(255,255,255,.45)); }
  section.cred-strip .cs-pair { display: inline-flex; gap: 3px; }
}

/* ============================================================
   AI + YOUR CPA · MOBILE ≤760px — 2026-07-18
   Timeline rows (node left, console text right), glowing vertical
   connector through the nodes, HUD corners shrunk + tucked.
   .aiflow prefixes out-specify the inline <style> in index.html.
   Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  .aiflow .section-head .lead { max-width: 40ch; font-size: .95rem; }
  .aiflow .aiflow-track { margin-top: 36px; gap: 34px; padding-left: 6px; }
  /* connector segments: each step draws its line down to the next node,
     so the rail ends exactly at the last icon. HUD cyan rail, lime packets. */
  .aiflow .aiflow-step:not(:last-child)::before { content: ''; position: absolute; left: 26px; top: 52px; bottom: -36px; width: 2px; z-index: -1;
    background: rgba(63,212,255,.28);
    box-shadow: 0 0 8px rgba(63,212,255,.22); }
  .aiflow .aiflow-step:not(:last-child)::after { content: ''; position: absolute; left: 26px; top: 52px; bottom: -36px; width: 2px; z-index: -1;
    background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(166,230,58,.95) 16px 22px);
    background-size: 100% 26px;
    filter: drop-shadow(0 0 4px rgba(132,204,2,.7));
    animation: aiflow-tl-flow 1s linear infinite; }
  @keyframes aiflow-tl-flow { to { background-position: 0 26px; } }
  @media (prefers-reduced-motion: reduce) { .aiflow .aiflow-step:not(:last-child)::after { animation: none; display: none; } }
  .aiflow .aiflow-step { display: flex; align-items: flex-start; gap: 18px; text-align: left; }
  .aiflow .aiflow-node { width: 54px; height: 54px; font-size: 1.3rem; margin: 0; flex: none; }
  .aiflow .ob-body { padding: 0; min-width: 0; }
  .aiflow .ob-line { white-space: normal; margin-bottom: 8px; }
  .aiflow .aiflow-step h3 { font-size: .98rem; }
  .aiflow .aiflow-step p { font-size: .8rem; }
  .aiflow .ob-status { margin-top: 8px; }
  .aiflow .aiflow-foot { margin-top: 30px; font-size: .84rem; }
  /* HUD corners: shrink + tuck into the true corners */
  .aiflow .aiflow-corner { width: 28px; height: 28px; }
  .aiflow .aiflow-corner.tl { top: 14px; left: 14px; }
  .aiflow .aiflow-corner.tr { top: 14px; right: 14px; }
  .aiflow .aiflow-corner.bl { bottom: 14px; left: 14px; }
  .aiflow .aiflow-corner.br { bottom: 14px; right: 14px; }
}

/* ============================================================
   BUSINESS MADE SIMPLE (J3 journey) · MOBILE ≤760px — 2026-07-18
   Fixed step grid (node rail left, text right), rail ends at the
   last node, walker headroom trimmed. #services out-specifies the
   section's inline <style>. Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  #services .j3 { margin-top: 56px; }               /* was 104px of walker headroom */
  #services .j3-track { gap: 76px; padding-left: 46px; }   /* left lane for the rappeller */
  /* no connecting line between icons — the rappeller carries the journey */
  #services .j3-track::before { display: none; }
  /* the walker's fill (and its travelling dot) are desktop-only — mobile has its
     own scroll-driven .j3-progress + .j3-spark instead */
  #services .j3-fill, #services .j3-tip { display: none; }
  /* step grid: node owns column 1 (top-aligned); cap, title, chip stack in column 2 */
  #services .j3-step { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto;
    gap: 4px 18px; align-items: center; text-align: left; }   /* rappeller lane now lives left of the icons */
  #services .j3-node { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin: 0; }
  #services .j3-cap { grid-column: 2; margin: 0; letter-spacing: .12em; }
  #services .j3-step h3 { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.35; }
  #services .jn-wrap { grid-column: 2; justify-self: start; margin-top: 8px; }
  #services .j3-hint { margin-top: 30px; }
  /* balanced lead */
  #services .section-head .lead { max-width: 40ch; margin-left: auto; margin-right: auto; text-wrap: balance; }

  /* ---- stage separation: scroll-tracking line (same rail/fill/spark as How-it-works) ---- */
  #services .j3-track { counter-reset: stage; }
  /* rail runs through the node centers, BEHIND the icons (nodes are z-index 2) */
  #services .j3-track::after { content: ''; position: absolute; left: 76px; top: 4px; width: 4px; border-radius: 4px;
    height: calc(var(--rail-end, 100%) - 4px);   /* ends at the last icon's centre (JS-measured) */
    background: rgba(31,43,61,.1); z-index: 0; }
  #services .j3-progress { position: absolute; left: 76px; top: 4px; width: 4px; height: 0%; max-height: calc(100% - 8px);
    border-radius: 4px; z-index: 1;
    background: linear-gradient(180deg, var(--crimson), var(--red-tint) 55%, var(--lime)); }
  #services .j3-spark { position: absolute; left: 78px; transform: translate(-50%,-50%); width: 14px; height: 14px;
    border-radius: 50%; z-index: 1; opacity: 0;
    background: #fff; border: 3px solid var(--crimson);
    box-shadow: 0 0 0 6px rgba(255,0,43,.18), 0 0 18px rgba(255,0,43,.6); }
  /* thin separator between stages, text column only (centered in the 48px gap) */
  #services .j3-step:not(:last-of-type)::after { content: ''; position: absolute; left: 96px; right: 0; bottom: -38px;
    height: 1px; background: rgba(31,43,61,.1); }
  #services .j3-cap { padding-left: 14px; }
  #services .j3-step h3 { padding-left: 14px; }
  #services .jn-wrap { margin-left: 14px; }
  #services .j3-cap::before { counter-increment: stage; content: counter(stage, decimal-leading-zero) " · "; font-weight: 800; }
  /* spotlight-follow (option C): neutral slate column — only the stage the
     rappeller occupies (.lit) takes its tone color */
  #services .j3-cap { color: rgba(31,43,61,.45); }
  #services .j3-cap::before { color: rgba(31,43,61,.6); }
  #services .j3-step h3 { color: var(--gunmetal); }
  #services .j3-step.lit.red .j3-cap,
  #services .j3-step.lit.red .j3-cap::before,
  #services .j3-step.lit.red h3 { color: var(--crimson); }
  #services .j3-step.lit.lime .j3-cap,
  #services .j3-step.lit.lime .j3-cap::before,
  #services .j3-step.lit.lime h3 { color: var(--lime-dark); }
  /* service chips: gunmetal + white by default; tone scheme returns on the rappeller's stage */
  #services .jn-svc { background: var(--gunmetal); border-color: var(--gunmetal); color: #fff; }
  #services .j3-step.lit.red .jn-svc { background: var(--crimson); border-color: var(--crimson); color: #fff; }
  #services .j3-step.lit.lime .jn-svc { background: var(--lime-dark); border-color: var(--lime-dark); color: #fff; }
  /* obstacles sit in the rappeller's lane so his hops line up */
  #services .fs-obs { margin-left: var(--j3-lane, -42px); }
  /* tooltip card pinned inside the screen on tap — anchored to the pill's right edge */
  #services .jn-tip { --tx: 0%; --tail: 80%; left: auto; right: -12px; width: min(74vw, 300px); }

  /* ---- rappelling rig replaces the walker on the vertical track ----
     side view, hanging just right of the icon column, bouncing stage to stage */
  #services .fs-print { display: none; }                 /* no footprints mid-air */
  /* Lane offset is derived from the node, not hardcoded: his feet reach a fixed
     31.7px right of his centre, so the lane must be (node/2 + 14px) to keep them
     planted on the circle. Retuning --j3-node alone now keeps him in contact. */
  #services { --j3-node: 64px; --j3-lane: calc(-1 * (var(--j3-node) / 2 + 14px)); }
  #services .fs-walker { margin-left: var(--j3-lane); }  /* ride left of the icons */
  #services .fs-walker .fs-rap svg { transform: scaleX(-1); }  /* face the icon wall on his right */
  #services .fs-walker .fs-body { display: none; }       /* walking pose off */
  #services .fs-walker .fs-rap { display: block; }       /* rappel pose on */
  #services .fs-walker .fs-rope { display: block; position: absolute; left: calc(50% - 1px); bottom: 78%;
    width: 2px; height: 0; z-index: -1; border-radius: 2px;
    background: repeating-linear-gradient(180deg, #b7a58c 0 5px, #97815f 5px 10px); }
  /* speech bubble opens rightward from his far-left lane (was centered → clipped) */
  #services .fs-bubble { left: -12px; transform: translateX(0) scale(0); transform-origin: bottom left; }
  #services .fs-bubble::after { left: 24px; }
  #services .fs-bubble.pop { animation: fs-bubble-pop-m 1.9s var(--ease-out) forwards; }
  /* month clouds: smaller, tucked just above his rope */
  #services .fs-cloud { font-size: .6rem; padding: 5px 12px; }
  /* kick-off bounce while descending — pushes off the icon wall */
  #services .fs-walker.stepping { animation: fs-rap-bounce .6s ease-in-out infinite; }
  @keyframes fs-rap-bounce {
    0%, 100% { transform: translate(-50%,-98%) rotate(-3deg); }
    50%      { transform: translate(-56%,-98%) rotate(4deg); }
  }
  @keyframes fs-bubble-pop-m {
    0%   { opacity: 0; transform: translateX(0) scale(0); }
    10%  { opacity: 1; transform: translateX(0) scale(1.08); }
    17%  { transform: translateX(0) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(0) scale(.9); }
  }
}
/* rappel elements exist only on the vertical (mobile) track */
.fs-rap, .fs-rope { display: none; }
/* why-choose tracking line exists only on mobile */
.wcm-rail, .wcm-fill, .wcm-spark { display: none; }

/* ============================================================
   FOUNDER'S NOTE · MOBILE ≤760px — 2026-07-18
   Upright compressed figure, nameplate at his feet, clamped
   floor line, wider letter. section. prefix out-specifies the
   inline <style>. Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  section.fnote .stage { height: 360px; }
  section.fnote .guy { height: 300px; }
  /* upright — nothing to lean on when the pillar sits below */
  section.fnote .fig { transform: translateX(42%) rotate(0deg); }
  section.fnote.go .fig { transform: translateX(50%) rotate(0deg); }
  section.fnote .rim { width: 300px; height: 360px; }
  /* name chip docks as a nameplate under his feet, connector off */
  section.fnote .chip { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; width: max-content; max-width: 92vw; }
  section.fnote .chip b { white-space: nowrap; font-size: .78rem; }
  section.fnote .chip::after { display: none; }
  /* floor line stays inside the viewport */
  section.fnote .floor { left: 0; right: 0; }
  /* letter: wider text, watermark tucked inside, shorter pillar */
  section.fnote .lcol { padding-left: 24px; }
  section.fnote .qmark { top: -30px; right: 0; font-size: 6.5rem; }
  section.fnote .wall { top: -12px; bottom: -12px; }
  /* signature on one line; company suffix trimmed from the role */
  section.fnote .sig2 .script { font-size: clamp(1.1rem, 5vw, 1.5rem); white-space: nowrap; }
  section.fnote .sig .rl .rl-tjc { display: none; }
}

/* ============================================================
   WHAT HAPPENS NEXT · MOBILE ≤760px — 2026-07-18
   Compact call stage restored (owner ↔ CPA + flowing wire),
   steps as coin rows, full-width CTA. section.nxt out-specifies
   the inline <style>. Desktop (>760px) untouched; 761–900
   keeps the plain stacked fallback.
   ============================================================ */
@media (max-width: 760px) {
  /* vertical story: lady top-centre → 3 steps → CPA bottom-centre */
  section.nxt .nxt-stage { --hR: 300px; margin-top: 118px; display: flex; flex-direction: column; }  /* matches the founder's-note figure */
  section.nxt .nxt-wire, section.nxt .nxt-floor { display: none; }
  section.nxt .nxt-fig { display: block; position: relative; top: auto; left: auto; right: auto;
    width: max-content; margin: 0 auto; align-self: center; }
  /* flow order: lady → steps → CPA (CPA lands right above the CTA button) */
  section.nxt .nxt-figL { order: 1; margin-bottom: 30px; }
  section.nxt .nxt-meds { order: 2; }
  section.nxt .nxt-figR { order: 3; margin-top: 96px; margin-bottom: 6px; }
  section.nxt .nxt-fig .refl { display: none; }
  section.nxt .nxt-fig .nxt-chip { top: -64px; }
  section.nxt .nxt-chip b { font-size: .72rem; }
  section.nxt .nxt-chip span { font-size: .6rem; }
  /* flowing connector (SVG injected by JS): lady → coin column → CPA */
  section.nxt .nxt-mline { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
  section.nxt .nxt-mline .ml-base { fill: none; stroke: rgba(160,190,230,.2); stroke-width: 2; }
  section.nxt .nxt-mline .ml-flow { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 6 20;
    filter: drop-shadow(0 0 4px rgba(132,204,2,.7)); animation: nxt-mline-flow 1.2s linear infinite; }
  /* steps: number coin left, copy right (site-wide row pattern) */
  section.nxt .nxt-meds { padding: 34px 24px 6px; gap: 22px; grid-template-columns: 1fr; }
  section.nxt .nxt-med { display: grid; grid-template-columns: 64px 1fr; gap: 2px 16px; text-align: left; align-items: center; }
  section.nxt .nxt-num { grid-row: 1 / span 2; align-self: start; width: 64px; height: 64px; font-size: 1.15rem; margin: 0; }
  section.nxt .nxt-med h3 { margin-bottom: 2px; font-size: .98rem; }
  section.nxt .nxt-med p { max-width: none; margin: 0; font-size: .82rem; }
  /* CTA: full-width primary, centred note */
  section.nxt .nxt-cta { margin-top: 36px; padding: 0 24px; }
  section.nxt .nxt-cta .btn { width: 100%; justify-content: center; }
}
@keyframes nxt-mline-flow { to { stroke-dashoffset: -26; } }
.nxt-mline { display: none; }
@media (prefers-reduced-motion: reduce) { .nxt-mline .ml-flow { animation: none; } }

/* ============================================================
   TAKE THE NEXT STEP (form) · MOBILE ≤760px — 2026-07-18
   16px inputs (kills iOS focus-zoom), compact peeking figure +
   static caption, tap-button contacts, scrollable chips, denser
   card. section#form out-specifies the inline <style>.
   Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  /* 0 · keep the scrollable chips row from inflating the grid column
     (same min-width blowout as the hero carousel) */
  section#form .contact-grid { grid-template-columns: minmax(0, 1fr); }
  section#form .contact-grid > * { min-width: 0; }
  section#form .nxtA-formwrap, section#form .form-card { min-width: 0; max-width: 100%; }
  section#form .nxtA-chips { max-width: 100%; }

  /* 1 · no iOS zoom-on-focus */
  section#form .field input, section#form .field textarea { font-size: 16px; }

  /* 2 · figure, speech bubble, and arm overlays all off on mobile */
  section#form .nxtA-fig, section#form .nxtA-say,
  section#form .nxtA-hand, section#form .nxtA-armsh { display: none; }

  /* 3 · call + email as tap buttons, visit as a quiet line */
  section#form .nxtA-chan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  section#form .nxtA-chan .contact-opt { border: 1px solid rgba(31,43,61,.1); border-radius: 12px;
    background: #fff; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  section#form .nxtA-chan .contact-opt .val { font-size: .78rem; word-break: break-all; }
  section#form .nxtA-chan .contact-opt:nth-child(3) { grid-column: 1 / -1; flex-direction: row;
    align-items: center; background: transparent; border: none; padding: 6px 2px; }

  /* 4 · prefill chips: one swipeable line */
  section#form .nxtA-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  section#form .nxtA-chips::-webkit-scrollbar { display: none; }
  section#form .nxtA-chips button { flex: none; white-space: nowrap; }

  /* 5 · density */
  section#form .field { margin-bottom: 14px; }
  section#form .form-row { gap: 12px; }
  section#form .form-card { padding: 22px 18px; }
  section#form .nxtA-lead { text-wrap: balance; }
}

/* ============================================================
   BEFORE YOU ASK (FAQ) · MOBILE ≤760px — 2026-07-18
   Wider answers, tighter accordion, panel as compact action
   card. Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  section#faq .section-head .display { text-wrap: balance; }
  section#faq .faq-wrap { gap: 28px; }
  section#faq .faq-q { padding: 18px 2px; font-size: .95rem; }
  section#faq .faq-a p { padding: 0 8px 20px 2px; }
  section#faq .faq-panel { padding: 26px 22px; }
  section#faq .faq-panel::before { display: none; }   /* red glow orb off on mobile */
  section#faq .faq-panel .pdesc { max-width: none; }
  section#faq .faq-panel .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CLIENT SUCCESS STORIES · MOBILE ≤760px — 2026-07-18
   Marquee → swipe carousel: one snap-scrolling row of all 8
   unique quotes (JS merges row 2 in, hides loop duplicates).
   Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  .cine .cine-fade::before, .cine .cine-fade::after { width: 36px; }
  .cine .cine-row { animation: none !important; width: auto; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 14px; padding: 8px 4px 14px;
    scrollbar-width: none; }
  .cine .cine-row::-webkit-scrollbar { display: none; }
  .cine .cine-row.r2 { display: none; }              /* its unique cards move into row 1 */
  .cine .cine-card { width: min(78vw, 320px); scroll-snap-align: center; }
  .cine .cine-card p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .cine .cine-card.mob-hide { display: none !important; }   /* marquee loop duplicates */
}

/* ============================================================
   WHY CHOOSE (medallions) · MOBILE ≤760px — 2026-07-18
   Scroll-spotlight: the card nearest screen centre lights up
   (class-driven mirror of the desktop hover effect) + vertical
   compression. Desktop (>760px) untouched.
   ============================================================ */
@media (max-width: 760px) {
  /* compression: gaps were sized for ropes that are hidden on mobile */
  #wc-med .section-head { padding-top: 56px; }
  /* no rope connectors around the headline on mobile; bigger signboard type */
  #wc-med .assembly .hang-svg, #wc-med .assembly .link-svg { display: none; }
  #wc-med .assembly .signboard h2 { white-space: normal; font-size: clamp(1.75rem, 7.6vw, 2.3rem); line-height: 1.16; }
  #wc-med .mn-wrap { padding-top: 110px; }
  #wc-med .mn-grid { gap: 104px; }
  #wc-med .mnote { padding: 24px 20px 22px; }
  #wc-med .mnote p { font-size: .82rem; }
  #wc-med .mring { width: 72px; height: 72px; top: -92px; }
  #wc-med .mring .beam { top: 64px; }
  #wc-med .mring .in { font-size: 1.45rem; }

  /* tracking line: eyebrow → last medallion centre (rail behind everything) */
  #wc-med .wcm-rail, #wc-med .wcm-fill { display: block; position: absolute; left: 50%; transform: translateX(-50%);
    width: 4px; border-radius: 4px; z-index: 0; pointer-events: none;
    /* short stub behind the pill, invisible through the headline, full below it */
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 14px, transparent 40px,
      transparent calc(var(--wcm-fade, 150px) - 36px), #000 var(--wcm-fade, 150px));
            mask-image: linear-gradient(180deg, #000 0, #000 14px, transparent 40px,
      transparent calc(var(--wcm-fade, 150px) - 36px), #000 var(--wcm-fade, 150px)); }
  #wc-med .wcm-rail { background: rgba(31,43,61,.12); }
  #wc-med .stage.spot .wcm-rail { background: rgba(255,255,255,.14); }
  #wc-med .wcm-fill { height: 0; background: linear-gradient(180deg, var(--crimson), #ff5c75 55%, var(--lime)); }
  #wc-med .wcm-spark { display: block; position: absolute; left: 50%; transform: translate(-50%,-50%);
    width: 14px; height: 14px; border-radius: 50%; z-index: 0; opacity: 0; pointer-events: none;
    background: #fff; border: 3px solid var(--crimson);
    box-shadow: 0 0 0 6px rgba(255,0,43,.18), 0 0 18px rgba(255,0,43,.6); }

  /* night stage while the spotlight is active */
  #wc-med .stage.spot .jd-dots { opacity: 0; }
  #wc-med .stage.spot::before { opacity: 1; }
  #wc-med .stage.spot::after { opacity: 1; animation: twinkleB_wc 7s ease-in-out infinite; }
  #wc-med .stage.spot .signboard h2 { color: #f7f1de; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
  #wc-med .stage.spot .mnote { box-shadow: 0 26px 50px -22px rgba(0,0,0,.85); }
  #wc-med .stage.spot .mnote:not(.on) {
    background: radial-gradient(120% 100% at 50% 0%, #33445e 0%, #1F2B3D 55%, #16202f 100%);
    border-color: rgba(255,255,255,.12); }
  #wc-med .stage.spot .mnote:not(.on) h3 { color: #eef3f9; }
  #wc-med .stage.spot .mnote:not(.on) h3 .kick { color: #ff8fa1; }
  #wc-med .stage.spot .mnote:not(.on) p { color: #a7b4c6; }
  #wc-med .stage.spot .mnote:not(.on) .num { color: rgba(215,232,255,.28); }
  /* only bulbs the tracking line has touched are ON */
  #wc-med .stage.spot .mring.glow::before { opacity: 1; animation: haloPulse_wc 2.8s ease-in-out infinite; }
  #wc-med .stage.spot .mring.glow .ic { animation: bulbGlow_wc 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255,199,44,.55)) drop-shadow(0 0 8px rgba(255,152,0,.3)); }

  /* the spotlit card: lamp full-on, beam down, parchment glow */
  #wc-med .stage.spot .mnote.on { box-shadow: 0 38px 64px -24px rgba(0,0,0,.9); }
  #wc-med .stage.spot .mnote.on::before { opacity: 1; }
  #wc-med .stage.spot .mnote.on h3 { color: #1F2B3D; }
  #wc-med .stage.spot .mnote.on p { color: #4d463a; }
  #wc-med .stage.spot .mnote.on .num { color: rgba(31,43,61,.38); }
  #wc-med .stage.spot .mnote.on .mring::before { animation: none; opacity: 1; filter: blur(10px); transform: scale(1.2);
    background: radial-gradient(circle, rgba(255,210,64,.85) 0%, rgba(255,168,0,.38) 48%, rgba(255,168,0,0) 74%); }
  #wc-med .stage.spot .mnote.on .mring .beam { opacity: 1; transform: translateX(-50%) scaleY(1); }
  #wc-med .stage.spot .mnote.on .mring .in { background: radial-gradient(circle at 50% 44%, #fff6db 0%, #fffdf6 55%, #fff 100%);
    box-shadow: inset 0 0 18px rgba(255,199,44,.6), inset 0 0 6px rgba(255,168,0,.45); }
  #wc-med .stage.spot .mnote.on .mring .ic { animation: none;
    filter: drop-shadow(0 0 6px rgba(255,214,80,1)) drop-shadow(0 0 18px rgba(255,152,0,.75)) drop-shadow(0 0 30px rgba(255,152,0,.4)); }
}


/* ============================================================
   MOBILE NAV FIX · 2026-07-19
   Scoped to <=720px only — desktop nav untouched.
   Fixes: panel sat under the fixed header (z-index 99 vs 100),
   no scrolling so the CTA was cut off, no close affordance,
   background page scrolled behind the overlay.
   ============================================================ */
@media (max-width: 720px) {

  /* --- panel --- */
  .mobile-menu {
    z-index: 200;                         /* above .nav-wrap's original 100 */
    background: #141d2b;                  /* fully opaque — no bleed-through */
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + 84px) 22px
             calc(env(safe-area-inset-bottom, 0px) + 40px);
    transform: translateY(-10px);
    transition: opacity .3s var(--ease-out, ease), transform .3s var(--ease-out, ease);
  }
  .mobile-menu.open { transform: none; }

  /* --- links --- */
  .mobile-menu a {
    display: block;
    width: 100%;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 15px 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-menu a.mm-sub {
    font-size: .92rem;
    font-weight: 500;
    padding: 12px 4px 12px 18px;
    color: rgba(255,255,255,.72);
  }
  .mobile-menu a.mm-sub.active,
  .mobile-menu a.active { color: var(--red-tint); }
  .mobile-menu a.btn {
    margin-top: 26px;
    padding: 16px 24px;
    font-size: 1rem;
    text-align: center;
    border-bottom: 0;
  }

  /* --- header sits above the panel so the burger can close it --- */
  .nav-wrap { z-index: 300; }
  .nav-wrap.menu-open,
  .nav-wrap.menu-open.scrolled {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .nav-wrap.menu-open .nav-burger span { background: #fff; }

  /* --- burger becomes an X --- */
  .nav-burger span { transform-origin: center; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* --- lock the page behind the panel --- */
  body.menu-open { overflow: hidden; }
}


/* ============================================================
   MOBILE NAV · OPTION G — BOTTOM DOCK · 2026-07-19
   Scoped to <=720px. Replaces the burger + full-screen overlay
   with a thumb-zone dock. Desktop nav untouched.
   Markup lives at the foot of each page; behaviour in main.js.
   ============================================================ */
@media (max-width: 720px) {

  /* ---- retire the old mobile pattern ---- */
  .nav-burger { display: none !important; }
  .mobile-menu { display: none !important; }

  /* ---- top bar keeps the logo only ---- */
  .nav-wrap .nav-cta { display: none; }
  .nav-wrap.scrolled { padding: 8px 0; }

  /* ---- clear the dock so it never covers footer content ---- */
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

  /* ---- dock ---- */
  .cs-dock {
    position: fixed;
    left: 14px; right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 420;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 6px;
    background: rgba(18, 24, 33, .9);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
    transform: translateY(0);
    transition: transform .4s var(--ease-out, cubic-bezier(.22,1,.36,1));
  }
  /* slides away while the user scrolls down, returns on scroll up */
  .cs-dock.tucked { transform: translateY(calc(100% + 22px)); }

  .cs-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 54px; min-height: 46px; justify-content: center;
    padding: 5px 8px;
    border: 0; background: none; cursor: pointer;
    font-family: inherit;
    font-size: .58rem; font-weight: 600; letter-spacing: .03em;
    color: rgba(255, 255, 255, .5);
    transition: color .3s;
    -webkit-tap-highlight-color: transparent;
  }
  .cs-tab .i { font-size: 1.05rem; line-height: 1; }
  .cs-tab.current { color: #fff; }
  .cs-tab[aria-expanded="true"] { color: var(--green-tint, #B6E680); }

  .cs-consult {
    width: 50px; height: 50px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: 16px;
    background: var(--crimson, #FF002B);
    color: #fff; font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px rgba(255, 0, 43, .6);
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- services sheet ---- */
  .cs-sheet {
    position: fixed;
    left: 14px; right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
    z-index: 410;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    background: rgba(18, 24, 33, .97);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 22px 50px -16px rgba(0, 0, 0, .65);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transform-origin: 50% 100%;
    pointer-events: none;
    transition: opacity .38s var(--ease-out, cubic-bezier(.22,1,.36,1)),
                transform .42s cubic-bezier(.34, 1.56, .64, 1);
  }
  .cs-sheet.open { opacity: 1; transform: none; pointer-events: auto; }

  .cs-sheet .cs-ttl {
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .32);
    padding: 0 2px 10px;
  }
  .cs-sheet a {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 2px; min-height: 44px;
    font-size: .9rem; font-weight: 500;
    color: rgba(255, 255, 255, .78);
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .cs-sheet a .ic {
    width: 28px; height: 28px; flex: none;
    display: grid; place-items: center;
    font-size: .8rem; border-radius: 9px;
    background: rgba(255, 255, 255, .08);
  }
  .cs-sheet a.current { color: var(--red-tint, #FF6B82); }
  .cs-sheet a.view-all {
    color: var(--green-tint, #B6E680);
    font-weight: 600;
    margin-top: 4px;
  }

  .cs-scrim {
    position: fixed; inset: 0; z-index: 405;
    background: rgba(10, 15, 22, .5);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease-out, cubic-bezier(.22,1,.36,1));
  }
  .cs-scrim.open { opacity: 1; pointer-events: auto; }
}

/* the dock is a mobile-only component — never render it above 720px */
@media (min-width: 721px) {
  .cs-dock, .cs-sheet, .cs-scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-dock, .cs-sheet, .cs-scrim { transition-duration: .01ms !important; }
}

/* ============================================================
   FAQ "Before you ask" · cursor-responsive dot field · 2026-07-19
   Matches the light-section treatment used on #a3-sec: gunmetal
   dots at rest, warming to brand lime within the cursor radius.
   ============================================================ */
.faq-sec { position: relative; overflow: hidden; }
.faq-dots {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.faq-sec > .container { position: relative; z-index: 2; }

/* no cursor to respond to on touch — skip the canvas and the raf loop */
@media (max-width: 760px) { .faq-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .faq-dots { display: none; } }

/* ============================================================
   NAV v3 · TETHERED PILL + TWO-COLUMN DROPDOWN — 2026-07-19
   From 2026-07-19_nav-menu-design-mockups_v1.html: the bar keeps the
   HEADER v2 glass capsule (option 02), the dropdown takes option 01's
   compact two-column tethered card with stroked line icons.
   Bar styling is inherited from HEADER v2 above — not overridden here.
   ============================================================ */

/* --- caret: stroked chevron replaces the ▼ glyph --- */
.nav-links .has-drop > a .caret {
  width: 13px; height: 13px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: transform .3s var(--ease-out);
}

/* --- dropdown: two-column tethered card --- */
.nav-drop {
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(-8px);
  min-width: 0;
  width: 560px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(31,43,61,.45);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.nav-drop::before { /* arrow tether back to the capsule */
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  margin-left: -6px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid rgba(31,43,61,.08);
  border-top: 1px solid rgba(31,43,61,.08);
  border-radius: 2px;
  transform: rotate(45deg);
}
.nav-drop a {
  align-items: flex-start;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  white-space: normal;
}
/* line icons replace the emoji glyphs */
.nav-drop a .di {
  width: 19px; height: 19px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--crimson);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-drop a b {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.nav-drop a small { margin-top: 2px; line-height: 1.4; }
.nav-drop .view-all {
  grid-column: 1 / -1;
  align-items: center;
  margin-top: 8px;
  padding-top: 12px !important;
  font-size: .78rem;
}
.nav-drop .view-all .di { margin-top: 0; width: 16px; height: 16px; }

@media (max-width: 1080px) { .nav-drop { width: 480px; } }

/* re-assert the mobile hide: the grid rule above sits later in the cascade
   than the original @media (max-width:900px) { .nav-drop { display:none } } */
@media (max-width: 900px) { .nav-drop { display: none; } }

/* --- stacking fix: dropdown above the scroll-progress line ---
   .nav-v2 .nav-links carries backdrop-filter, which creates a stacking
   context — so .nav-drop's z-index:90 is trapped inside the capsule and
   can't outrank .nav-progress, which is positioned and later in the DOM.
   Lift the capsule, pin the progress line beneath it. */
.nav-v2 .nav-links { position: relative; z-index: 5; }
.nav-v2 .nav-progress { z-index: 1; }

/* ============================================================
   FOOTER v2 · THE WORKING FOOTER — 2026-07-19
   Approved from 2026-07-19_footer-alternatives_v1.html (option 01).
   Four columns: brand, all six services, company, contact.
   Contact rows are real tel:/mailto: links with stroked line icons
   (the 📞 ✉️ 📍 emoji rendered inconsistently across platforms).
   Legal links added to the bottom bar.
   Credential strip: PICPA + jurisdictions only — BOA/PRC line held
   back pending verified wording from TJC.
   ============================================================ */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 44px; }
.footer-brand p { margin-top: 4px; line-height: 1.7; }
.footer-col h4 { font-size: .68rem; margin-bottom: 20px; }
.footer-col h4::before { width: 22px; }
.footer-col a { display: inline-block; transition: color .22s, padding-left .22s var(--ease-out); }
.footer-col a:hover { padding-left: 5px; }

/* clickable contact rows */
.ft-contact { display: flex; align-items: center; gap: 11px; font-size: .86rem;
  color: rgba(255,255,255,.65); margin-bottom: 14px; transition: color .22s; }
/* 2026-07-19 — `.footer-col a{display:inline-block}` above outranks the flex
   rule on specificity (0,1,1 vs 0,1,0), so the phone and email anchors were
   falling back to inline-block: the icon and the value flowed as separate
   inline boxes and the long email wrapped onto its own line. Re-assert flex at
   matching specificity and keep each row on one line. Type is fluid so the
   email still fits a 320px phone without shrinking the shorter rows. */
.footer-col a.ft-contact { display: flex; }
.ft-contact { white-space: nowrap; font-size: clamp(.78rem, 3.1vw, .86rem); }
.footer-col a.ft-contact:hover { padding-left: 0; }   /* nudge-on-hover would clip the nowrap row */
a.ft-contact:hover { color: #fff; }
.ft-contact .fi { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--crimson);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-contact.static { cursor: default; }

/* credential strip */
.ft-creds { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ft-cred { display: flex; align-items: center; gap: 9px; font-size: .72rem;
  font-weight: 500; color: rgba(255,255,255,.5); }
.ft-cred .fi { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--lime);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* bottom bar legal links */
.footer-bottom .ft-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom .ft-legal a { color: rgba(255,255,255,.55); transition: color .2s; }
.footer-bottom .ft-legal a:hover { color: #fff; }

@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 620px)  { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL PAGES v2 · THE VAULT — 2026-07-19
   Approved from 2026-07-19_legal-pages-design-alternatives_v1.html
   (option 03), applied to privacy.html, terms.html, data-security.html.
   Full dark gunmetal ground, lime accents, serif headings, and a
   sticky contents rail whose tracking line fills with scroll depth.
   Pages carry .lg-page on <body> and .nav-dark on <header>.
   ============================================================ */
body.lg-page { background: var(--gunmetal-ink); }

/* --- nav must read on a dark ground from the first pixel --- */
.lg-page .nav-v2 { background: rgba(18,24,33,.72); }
.lg-page .nav-v2 .nav-links { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); }
.lg-page .nav-v2 .nav-links a { color: #fff; }
.lg-page .nav-v2 .nav-links a:hover { background: rgba(255,255,255,.1); }
.lg-page .nav-v2 .nav-progress { background: rgba(255,255,255,.09); }
.lg-page .nav-drop { background: rgba(18,24,33,.97); border-color: rgba(255,255,255,.12); }
.lg-page .nav-drop::before { background: rgba(18,24,33,.97); border-color: rgba(255,255,255,.12); }
.lg-page .nav-drop a { color: rgba(255,255,255,.85); }
.lg-page .nav-drop a small { color: rgba(255,255,255,.45); }
.lg-page .nav-drop a:hover { background: rgba(255,255,255,.08) !important; }
.lg-page .nav-drop .view-all { border-top-color: rgba(255,255,255,.12); }

/* --- hero --- */
.lg-hero { position: relative; background: var(--gunmetal-deep); color: #fff;
  padding: clamp(130px,15vw,175px) 0 clamp(46px,6vw,66px); overflow: hidden; }
.lg-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.2px);
  background-size: 26px 26px; }
.lg-hero > .container { position: relative; z-index: 2; }
.lg-hero .eyebrow { color: var(--lime); }
.lg-hero .eyebrow .dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(132,204,2,.18); }
.lg-hero h1 { font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(1.95rem,4.8vw,2.85rem);
  letter-spacing: -.035em; line-height: 1.14; max-width: 20ch; color: #fff; }
.lg-hero p { margin-top: 18px; font-size: .95rem; color: rgba(255,255,255,.6);
  max-width: 60ch; line-height: 1.75; }
.lg-meta { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 28px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); }
.lg-meta div { font-size: .74rem; color: rgba(255,255,255,.4); }
.lg-meta b { display: block; color: #fff; font-weight: 600; margin-top: 3px; font-size: .82rem; }

/* --- body --- */
.lg-body { padding: clamp(48px,6vw,74px) 0 clamp(64px,8vw,96px); background: var(--gunmetal-ink); }
.lg-layout { display: grid; grid-template-columns: 236px 1fr; gap: 56px; align-items: start; }

/* --- contents rail with scroll tracking line --- */
.lg-toc { position: sticky; top: 108px; }
.lg-toc h4 { font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; }
.lg-toc-rail { position: relative; padding-left: 2px; }
.lg-toc-rail::before { /* the unfilled track */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgba(255,255,255,.13); border-radius: 2px; }
.lg-toc-rail::after { /* the tracking line — height set by JS */
  content: ''; position: absolute; left: 0; top: 0; width: 2px; height: var(--lg-progress, 0%);
  background: linear-gradient(180deg, var(--crimson), var(--lime));
  border-radius: 2px; transition: height .12s linear; }
.lg-toc a { display: block; font-size: .8rem; color: rgba(255,255,255,.55);
  padding: 7px 0 7px 16px; transition: color .22s var(--ease-out), padding-left .22s var(--ease-out); }
.lg-toc a:hover { color: var(--lime); padding-left: 20px; }
.lg-toc a.on { color: #fff; font-weight: 500; }

/* --- document --- */
.lg-doc { max-width: 76ch; }
.lg-doc section { scroll-margin-top: 110px; padding-bottom: 34px; }
.lg-doc section + section { border-top: 1px solid rgba(255,255,255,.1); padding-top: 34px; }
.lg-doc h2 { font-family: var(--font-sans); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 14px; color: #fff;
  display: flex; gap: 12px; align-items: baseline; }
.lg-doc h2 .n { font-family: var(--font-mono,'JetBrains Mono',monospace); font-size: .74rem;
  font-weight: 500; color: var(--lime); flex: none; }
.lg-doc h3 { font-size: .92rem; font-weight: 600; margin: 22px 0 8px; color: #fff; }
.lg-doc p, .lg-doc li { font-size: .89rem; line-height: 1.82; color: rgba(255,255,255,.68); }
.lg-doc p + p { margin-top: 13px; }
.lg-doc ul, .lg-doc ol { margin: 12px 0 12px 20px; }
.lg-doc li { margin-bottom: 8px; }
.lg-doc li::marker { color: rgba(255,255,255,.35); }
.lg-doc strong { color: #fff; font-weight: 600; }
.lg-doc a:not(.lg-btn) { color: var(--green-tint); border-bottom: 1px solid rgba(182,230,128,.35); }
.lg-doc a:not(.lg-btn):hover { border-color: var(--green-tint); }

/* --- tables: zebra striping lifted from option 02 --- */
.lg-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .84rem; }
.lg-table th { text-align: left; font-weight: 600; color: #fff; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 11px 12px;
  background: rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.16); }
.lg-table th:first-child { border-radius: 8px 0 0 0; }
.lg-table th:last-child  { border-radius: 0 8px 0 0; }
.lg-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.62); vertical-align: top; line-height: 1.6; }
.lg-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }

/* --- callouts --- */
.lg-note { background: rgba(255,0,43,.08); border: 1px solid rgba(255,0,43,.25);
  border-radius: 12px; padding: 18px 20px; margin: 18px 0; }
.lg-note p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.8); }
.lg-note b { color: #fff; }
.lg-contact { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md); padding: 26px 28px; margin-top: 12px; }
.lg-contact h3 { color: #fff; margin-top: 0; }
.lg-contact p, .lg-contact li { color: rgba(255,255,255,.7); }
.lg-contact a { color: var(--green-tint) !important; border: none !important; }

/* --- seam: the page and the footer are both dark, so mark the join --- */
.lg-page footer { border-top: 1px solid rgba(255,255,255,.1); }

@media (max-width: 900px) {
  .lg-layout { grid-template-columns: 1fr; gap: 30px; }
  .lg-toc { position: static; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 18px; }
  .lg-toc-rail::before, .lg-toc-rail::after { display: none; }
  .lg-toc a { display: inline-block; padding: 5px 14px 5px 0; }
  .lg-toc a:hover { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .lg-toc-rail::after { transition: none; } }

/* logo lockup is dark-inked — invert it on the dark legal-page nav
   (matches how the footer already treats the same asset) */
.lg-page .nav-v2 .nav-logo img.logo-full { filter: brightness(0) invert(1); }
.lg-page .nav-burger span { background: #fff; }

/* Poppins throughout the legal pages (2026-07-19) — the serif headings
   are retired. Poppins is geometric and sets loose at display sizes, so
   headings run tighter tracking and the body measure is pulled in from
   76ch to 70ch to hold a comfortable line length. */
.lg-page h1, .lg-page h2, .lg-page h3, .lg-page h4 { font-family: var(--font-sans); }
.lg-doc { max-width: 70ch; }
.lg-doc p, .lg-doc li { font-size: .88rem; line-height: 1.85; }
.lg-doc h3 { letter-spacing: -.012em; }

/* ============================================================
   PANEL SNAP  ·  2026-07-19
   Opt in per page with <html class="snap-panels">, then mark the
   sections that should become full-screen stops with .snap-panel.

   Why panels and not just scroll-snap-type: the homepage's snap
   feel comes almost entirely from .plane-panel being min-height
   100vh. Declaring scroll-snap-type over natural-height sections
   does nothing perceptible, because there is no full screen of
   content to land on. Height is the effect; snap-type only steers it.

   Curated, not blanket: thin utility bands (the proof strip, the
   other-services block) are deliberately NOT panels — forcing a
   10-word strip to fill a screen looks broken.

   index.html and services.html are excluded; each runs its own
   variant (.plane-panel, and a rail-aware block respectively).
   ============================================================ */
html.snap-panels { scroll-snap-type: y proximity; scroll-padding-top: 0; }
html.snap-panels .snap-panel {
  min-height: 100vh;            /* fallback */
  min-height: 100svh;           /* mobile-safe viewport height */
  display: flex;
  flex-direction: column;
  /* 'safe center' matters here: when a panel's content is taller than the
     screen, plain centring overflows BOTH edges and the top becomes
     unreachable by scrolling. 'safe' falls back to start-alignment in that
     case, so nothing is ever stranded above the viewport. */
  justify-content: center;
  justify-content: safe center;
  scroll-snap-align: start;     /* land the panel's top edge, below the nav */
  /* 'always' is what makes the hand-off perceptible: the scroll cannot skate
     past a panel in one flick, it must come to rest on each one. Paired with
     proximity (not mandatory) so the tall non-panel sections stay free. */
  scroll-snap-stop: always;
  scroll-margin-top: 0;
}

/* Phones: forcing every panel to a full screen squeezes the content-heavy
   ones, so relax to natural flow and snap to the top edge instead —
   the same concession the homepage makes below 760px. */
@media (max-width: 760px) {
  html.snap-panels { scroll-padding-top: 64px; }
  html.snap-panels .snap-panel {
    min-height: 0; display: block;
    scroll-snap-align: start; scroll-margin-top: 64px;
  }
  html.snap-panels .snap-panel:first-of-type { scroll-snap-align: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.snap-panels { scroll-snap-type: none; }
  html.snap-panels .snap-panel { min-height: 0; display: block; }
}