/* =========================================================================
   Homepage — Geometric accents (.vh-geo)
   Navy + yellow diagonal bands, hollow rings, triangles, dot-grids, plus
   registration marks, chevrons, squares — plus Pass-4 curved arcs, dashed
   blueprint guide-lines, 3×3 app-icon grids, corner brackets and CTA reticles
   — scattered down BOTH side gutters, each cluster turned a different way.
   Brighter near the CTAs so the eye is led toward them. Curves play against
   angles; precision marks + guide-lines tie the clusters into one blueprint.
   Purely decorative (aria-hidden + pointer-events:none).
   Isolated file — delete it (and its <link> in index.html, plus every
   .vh-geo div) to remove. No JS, no token changes.
   ========================================================================= */

/* ---- shared layer + shape primitives ----------------------------------- */
.vh-geo {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.vh-geo__band,
.vh-geo__ring,
.vh-geo__tri,
.vh-geo__dots,
.vh-geo__plus,
.vh-geo__chev,
.vh-geo__sq,
.vh-geo__arc,
.vh-geo__line,
.vh-geo__pix,
.vh-geo__bracket,
.vh-geo__target { position: absolute; }

/* filled parallelogram band */
.vh-geo__band {
  border-radius: 6px;
  transform: rotate(var(--r, -26deg));
  transform-origin: center;
}
/* hollow outline parallelogram (stack two for a concentric look) */
.vh-geo__ring {
  border: 2px solid rgba(232, 180, 0, 0.46);
  border-radius: 9px;
  background: transparent;
  transform: rotate(var(--r, -26deg));
  transform-origin: center;
}
/* right-triangle wedge */
.vh-geo__tri {
  background: rgba(232, 180, 0, 0.20);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
}
/* dot-grid texture (one element renders the whole grid) */
.vh-geo__dots {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.9px);
  background-size: 16px 16px;
  color: rgba(232, 180, 0, 0.50);
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
}
/* "+" registration / blueprint mark */
.vh-geo__plus {
  width: 16px; height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: rgba(232, 180, 0, 0.55);
}
/* chevron / arrow leading-line cue (right+bottom border = a corner) */
.vh-geo__chev {
  width: 26px; height: 26px;
  border: 3px solid rgba(232, 180, 0, 0.55);
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 2px;
  background: transparent;
  transform: rotate(var(--r, -45deg));
  transform-origin: center;
}
/* small rotated square */
.vh-geo__sq {
  width: 18px; height: 18px;
  background: rgba(232, 180, 0, 0.30);
  border-radius: 4px;
  transform: rotate(var(--r, 18deg));
  transform-origin: center;
}

/* ---- Pass-4 primitives ------------------------------------------------- */
/* concentric arc — curved counterpoint to the angular bands (open corner via
   two transparent borders; rotate to aim the opening). Stack two to nest. */
.vh-geo__arc {
  border: 2.5px solid rgba(232, 180, 0, 0.42);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: transparent;
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
}
/* dashed blueprint guide-line — set height per instance, width stays 0 so only
   the dashed border renders. Ties scattered clusters to a common spine. */
.vh-geo__line {
  width: 0;
  border-left: 2px dashed rgba(232, 180, 0, 0.30);
  background: transparent;
  transform: rotate(var(--r, 0deg));
  transform-origin: top center;
}
/* 3×3 app-icon grid — a quiet "we build apps" motif (rounded frame + dot grid
   reads as a phone home screen). Size instances roughly square. */
.vh-geo__pix {
  background-image: radial-gradient(rgba(232, 180, 0, 0.60) 0 4.5px, transparent 5.5px);
  background-size: 33.333% 33.333%;
  background-position: center;
  border: 1.5px solid rgba(232, 180, 0, 0.22);
  border-radius: 11px;
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
}
/* L-shaped corner bracket — precision/registration framing (rotate for corner) */
.vh-geo__bracket {
  border: 2.5px solid rgba(232, 180, 0, 0.50);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 3px 0 0 0;
  background: transparent;
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
}
/* concentric-circle reticle — CTA focus cue ("aim here") */
.vh-geo__target {
  border: 2px solid rgba(232, 180, 0, 0.60);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--color-accent) 0 2.5px, transparent 3.2px) center / 100% 100% no-repeat;
}
/* soft depth glow — large, blurred, behind content (own un-clipped element) */
.vh-geo--glow {
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 180, 0, 0.16), transparent 70%);
  filter: blur(6px);
}

/* ===================================================================== HERO */
/* Top-right of the hero stage, over the cinematic video. Sits above the navy
   overlay (z-index 1), below the copy container (z-index 2). Brightest set —
   a dot-grid + chevron add energy and point back toward the headline/CTA. */
.vh-geo--hero { top: -60px; right: -40px; width: 480px; height: 520px; --r: -26deg; }
.vh-geo--hero .vh-geo__band:nth-child(1) { top: 70px;  right: 30px; width: 520px; height: 64px; background: var(--color-accent); opacity: .66; }
.vh-geo--hero .vh-geo__band:nth-child(2) { top: 168px; right: 70px; width: 440px; height: 40px; background: var(--color-accent); opacity: .38; }
.vh-geo--hero .vh-geo__band:nth-child(3) { top: 250px; right: 0;    width: 360px; height: 30px; background: #fff;               opacity: .18; }
.vh-geo--hero .vh-geo__dots:nth-child(4) { top: 10px;  right: 14px; width: 132px; height: 96px; color: rgba(232,180,0,.55); }
.vh-geo--hero .vh-geo__chev:nth-child(5) { top: 350px; right: 150px; width: 34px; height: 34px; --r: 135deg; border-color: var(--color-accent); border-left-color: transparent; border-top-color: transparent; opacity: .8; }

/* ================================================================ FINAL CTA */
/* Bottom-left of the dark navy "Last call" section (already overflow:hidden).
   Most energetic side set — directional wedges + chevron flowing toward the
   "Book a free consultation" button. */
.vh-geo--cta { z-index: 0; left: -90px; bottom: -70px; width: 600px; height: 480px; --r: -26deg; }
.vh-geo--cta .vh-geo__band:nth-child(1) { left: -30px; bottom: 200px; width: 540px; height: 58px; background: var(--color-accent); opacity: .22; }
.vh-geo--cta .vh-geo__band:nth-child(2) { left: 20px;  bottom: 120px; width: 460px; height: 40px; background: var(--color-accent); opacity: .40; }
.vh-geo--cta .vh-geo__band:nth-child(3) { left: -10px; bottom: 54px;  width: 380px; height: 28px; background: #fff;               opacity: .10; }
.vh-geo--cta .vh-geo__chev:nth-child(4) { left: 70px;  bottom: 150px; width: 40px;  height: 40px; --r: 45deg; border-color: var(--color-accent); border-left-color: transparent; border-top-color: transparent; opacity: .85; }
.vh-geo--cta .vh-geo__plus:nth-child(5) { left: 250px; bottom: 250px; width: 18px;  height: 18px; color: rgba(232,180,0,.6); }

/* =========================================================================
   SIDE ACCENTS — scattered down BOTH edges of the page, behind content via
   isolation + negative z-index, self-clipping so nothing bleeds off-screen.
   ========================================================================= */
.vh-growth,
.vh-fv,
.vh-why,
.vh-stats2,
.vh-process,
.vh-testimonials,
.comparison,
.vh-faq,
.vh-insight { position: relative; isolation: isolate; }

.vh-geo--side {
  z-index: -1;
  overflow: hidden;
  width: 300px;
  height: 360px;
}
.vh-geo--side.vh-geo--mid { top: 50%; transform: translateY(-50%); }

/* --- GROWTH · left bands (+18°) ------------------------------------------ */
.vh-geo--growth { left: 0; --r: 18deg; }
.vh-geo--growth > :nth-child(1) { top: 36px;  left: -50px; width: 300px; height: 48px; background: var(--color-accent); opacity: .26; }
.vh-geo--growth > :nth-child(2) { top: 150px; left: -10px; width: 240px; height: 32px; background: var(--color-accent); opacity: .42; }
.vh-geo--growth > :nth-child(3) { top: 250px; left: -30px; width: 200px; height: 22px; background: #fff;               opacity: .10; }
/* GROWTH · right · dot-grid + plus marks + square (texture pack) */
.vh-geo--growth2 { right: 0; }
.vh-geo--growth2 > :nth-child(1) { top: 50px;  right: 24px;  width: 120px; height: 96px; color: rgba(232,180,0,.5); }   /* dots */
.vh-geo--growth2 > :nth-child(2) { top: 170px; right: 60px;  width: 18px;  height: 18px; }                               /* plus */
.vh-geo--growth2 > :nth-child(3) { top: 210px; right: 110px; width: 16px;  height: 16px; --r: 24deg; }                   /* sq */
.vh-geo--growth2 > :nth-child(4) { top: 250px; right: 40px;  width: 16px;  height: 16px; }                               /* plus */

/* --- FOUNDER VIDEO · right · concentric rings + thin band + chevron (-16°) */
.vh-geo--fv { right: 0; top: 70px; --r: -16deg; }
.vh-geo--fv > :nth-child(1) { top: 50px;  right: 28px;  width: 150px; height: 100px; }                                      /* ring */
.vh-geo--fv > :nth-child(2) { top: 66px;  right: 44px;  width: 118px; height: 70px;  border-color: rgba(232,180,0,.30); } /* ring (inner) */
.vh-geo--fv > :nth-child(3) { top: 158px; right: -20px; width: 250px; height: 20px;  background: var(--color-accent); opacity: .34; } /* band */
.vh-geo--fv > :nth-child(4) { top: 190px; right: 150px; width: 30px;  height: 30px;  --r: -135deg; }                        /* chev → toward CTA */

/* --- WHY · left · steep chevron-field bands (+42°) ----------------------- */
.vh-geo--why { left: 0; --r: 42deg; }
.vh-geo--why > :nth-child(1) { top: 70px;  left: 18px;  width: 26px; height: 200px; background: var(--color-accent); opacity: .24; }
.vh-geo--why > :nth-child(2) { top: 50px;  left: 78px;  width: 18px; height: 168px; background: var(--color-accent); opacity: .40; }
.vh-geo--why > :nth-child(3) { top: 100px; left: 128px; width: 14px; height: 124px; background: #fff;               opacity: .10; }
/* WHY · right · concentric rings + chevron */
.vh-geo--why2 { right: 0; --r: -18deg; }
.vh-geo--why2 > :nth-child(1) { top: 90px;  right: 40px; width: 110px; height: 110px; }                                     /* ring */
.vh-geo--why2 > :nth-child(2) { top: 108px; right: 58px; width: 74px;  height: 74px; border-color: rgba(232,180,0,.30); }  /* ring inner */
.vh-geo--why2 > :nth-child(3) { top: 220px; right: 70px; width: 30px;  height: 30px; --r: 45deg; }                          /* chev */

/* --- STATS2 · right · big bands (-32°) ----------------------------------- */
.vh-geo--stats2 { right: 0; --r: -32deg; }
.vh-geo--stats2 > :nth-child(1) { top: 30px;  right: -40px; width: 340px; height: 54px; background: var(--color-accent); opacity: .22; }
.vh-geo--stats2 > :nth-child(2) { top: 134px; right: 0;     width: 280px; height: 36px; background: var(--color-accent); opacity: .40; }
.vh-geo--stats2 > :nth-child(3) { top: 224px; right: -20px; width: 220px; height: 26px; background: #fff;               opacity: .10; }
/* STATS2 · left · plus marks + square + thin band */
.vh-geo--stats2b { left: 0; --r: 20deg; }
.vh-geo--stats2b > :nth-child(1) { top: 80px;  left: 30px;  width: 18px;  height: 18px; }                                   /* plus */
.vh-geo--stats2b > :nth-child(2) { top: 130px; left: 70px;  width: 18px;  height: 18px; --r: 24deg; }                       /* sq */
.vh-geo--stats2b > :nth-child(3) { top: 180px; left: 24px;  width: 16px;  height: 16px; }                                   /* plus */
.vh-geo--stats2b > :nth-child(4) { top: 220px; left: -30px; width: 220px; height: 22px; background: var(--color-accent); opacity: .24; } /* band */

/* --- PROCESS · left · ring + band (mixed) -------------------------------- */
.vh-geo--process { left: 0; top: 80px; }
.vh-geo--process > :nth-child(1) { top: 40px;  left: 30px;  width: 120px; height: 120px; --r: 14deg; }                                 /* ring */
.vh-geo--process > :nth-child(2) { top: 180px; left: -30px; width: 230px; height: 24px;  --r: 30deg; background: var(--color-accent); opacity: .26; } /* band */
/* PROCESS · right · dot-grid + band */
.vh-geo--process2 { right: 0; top: 120px; --r: -24deg; }
.vh-geo--process2 > :nth-child(1) { top: 30px;  right: 30px;  width: 116px; height: 88px; color: rgba(232,180,0,.42); }    /* dots */
.vh-geo--process2 > :nth-child(2) { top: 150px; right: -20px; width: 220px; height: 22px; background: var(--color-accent); opacity: .24; } /* band */

/* --- TESTIMONIALS · left · triangle + band + wedge ----------------------- */
.vh-geo--testimonials { left: 0; --r: 8deg; }
.vh-geo--testimonials > :nth-child(1) { top: 50px;  left: -30px; width: 160px; height: 160px; }                                        /* tri */
.vh-geo--testimonials > :nth-child(2) { top: 210px; left: -10px; width: 230px; height: 24px; --r: -18deg; background: var(--color-accent); opacity: .36; } /* band */
.vh-geo--testimonials > :nth-child(3) { top: 150px; left: 120px; width: 72px;  height: 72px; --r: -6deg; background: rgba(255,255,255,.08); } /* tri */
/* TESTIMONIALS · right · dot-grid + chevron + plus */
.vh-geo--testi2 { right: 0; }
.vh-geo--testi2 > :nth-child(1) { top: 60px;  right: 28px;  width: 120px; height: 96px; color: rgba(232,180,0,.46); }      /* dots */
.vh-geo--testi2 > :nth-child(2) { top: 190px; right: 70px;  width: 30px;  height: 30px; --r: -45deg; }                      /* chev */
.vh-geo--testi2 > :nth-child(3) { top: 240px; right: 30px;  width: 16px;  height: 16px; }                                   /* plus */
/* WWD "Founders trust" testimonials — drop the chevron accent (keep dots + plus).
   Scoped to .wwd-testi so the identical testi2 cluster in .wwd-prin keeps its
   chevron; left in the DOM so the plus stays :nth-child(3). */
.wwd-testi .vh-geo--testi2 > .vh-geo__chev { display: none; }

/* --- COMPARISON · right · bands up (+30°) -------------------------------- */
.vh-geo--comparison { right: 0; --r: 30deg; }
.vh-geo--comparison > :nth-child(1) { top: 50px;  right: -40px; width: 300px; height: 46px; background: var(--color-accent); opacity: .22; }
.vh-geo--comparison > :nth-child(2) { top: 154px; right: 0;     width: 240px; height: 30px; background: var(--color-accent); opacity: .40; }
.vh-geo--comparison > :nth-child(3) { top: 240px; right: -20px; width: 190px; height: 22px; background: #fff;               opacity: .10; }
/* COMPARISON · left · plus marks + two thin bands */
.vh-geo--comp2 { left: 0; --r: -30deg; }
.vh-geo--comp2 > :nth-child(1) { top: 70px;  left: 30px;  width: 18px;  height: 18px; }                                     /* plus */
.vh-geo--comp2 > :nth-child(2) { top: 120px; left: -20px; width: 210px; height: 20px; background: var(--color-accent); opacity: .26; } /* band */
.vh-geo--comp2 > :nth-child(3) { top: 200px; left: 40px;  width: 16px;  height: 16px; }                                     /* plus */
.vh-geo--comp2 > :nth-child(4) { top: 230px; left: -10px; width: 170px; height: 16px; background: var(--color-accent); opacity: .38; } /* band */

/* --- FAQ · left · ring + two bands (-22°) -------------------------------- */
.vh-geo--faq { left: 0; --r: -22deg; }
.vh-geo--faq > :nth-child(1) { top: 80px;  left: 22px;  width: 92px;  height: 128px; --r: -12deg; }                                    /* ring */
.vh-geo--faq > :nth-child(2) { top: 120px; left: 58px;  width: 150px; height: 18px; background: var(--color-accent); opacity: .40; }   /* band */
.vh-geo--faq > :nth-child(3) { top: 214px; left: -30px; width: 230px; height: 24px; background: var(--color-accent); opacity: .24; }   /* band */
/* FAQ · right · dot-grid + ring + plus */
.vh-geo--faq2 { right: 0; --r: 16deg; }
.vh-geo--faq2 > :nth-child(1) { top: 70px;  right: 30px; width: 116px; height: 92px; color: rgba(232,180,0,.46); }         /* dots */
.vh-geo--faq2 > :nth-child(2) { top: 180px; right: 50px; width: 96px;  height: 96px; }                                      /* ring */
.vh-geo--faq2 > :nth-child(3) { top: 250px; right: 24px; width: 16px;  height: 16px; }                                      /* plus */

/* --- INSIGHT · right · bands (-28°) + white wedge ------------------------ */
.vh-geo--insight { right: 0; --r: -28deg; }
.vh-geo--insight > :nth-child(1) { top: 40px;  right: -30px; width: 300px; height: 48px; background: var(--color-accent); opacity: .24; }
.vh-geo--insight > :nth-child(2) { top: 142px; right: 10px;  width: 240px; height: 32px; background: var(--color-accent); opacity: .40; }
.vh-geo--insight > :nth-child(3) { top: 214px; right: 44px;  width: 88px;  height: 88px; --r: 0deg; background: rgba(255,255,255,.08); } /* tri */
/* INSIGHT · left · chevron + square + band */
.vh-geo--insight2 { left: 0; --r: 24deg; }
.vh-geo--insight2 > :nth-child(1) { top: 80px;  left: 36px;  width: 32px;  height: 32px; --r: 45deg; }                       /* chev */
.vh-geo--insight2 > :nth-child(2) { top: 150px; left: 90px;  width: 18px;  height: 18px; --r: 18deg; }                       /* sq */
.vh-geo--insight2 > :nth-child(3) { top: 200px; left: -20px; width: 210px; height: 22px; background: var(--color-accent); opacity: .24; } /* band */

/* =========================================================================
   PASS 4 — additions threaded into the clusters above. The second-gutter
   (*2 / *b) clusters were defined earlier but only now wired into index.html,
   so BOTH gutters populate. A handful gain new Pass-4 primitives; the hero,
   founder-video and final-CTA clusters gain focus reticles + framing brackets;
   two sections get a soft depth glow. Same behind-content, self-clipping system.
   ========================================================================= */

/* GROWTH · left · trailing dashed guide-line beside the bands */
.vh-geo--growth > :nth-child(4) { top: 30px;  left: 168px; height: 250px; --r: 8deg; }   /* line */
/* GROWTH · right · app-icon grid joins the texture pack */
.vh-geo--growth2 > :nth-child(5) { top: 116px; right: 96px; width: 58px; height: 58px; --r: -8deg; } /* pix */

/* WHY · right · arc curving against the concentric rings */
.vh-geo--why2 > :nth-child(4) { top: 56px; right: 92px; width: 120px; height: 120px; --r: -30deg; }  /* arc */

/* STATS2 · left · arc anchoring the lower corner */
.vh-geo--stats2b > :nth-child(5) { top: 244px; left: 76px; width: 110px; height: 110px; --r: 150deg; } /* arc */

/* PROCESS · right · dashed guide-line */
.vh-geo--process2 > :nth-child(3) { top: 36px; right: 156px; height: 220px; --r: -8deg; }  /* line */

/* COMPARISON · left · corner bracket registration mark */
.vh-geo--comp2 > :nth-child(5) { top: 150px; left: 96px; width: 34px; height: 34px; --r: 0deg; }  /* bracket */

/* FAQ · right · app-icon grid */
.vh-geo--faq2 > :nth-child(4) { top: 250px; right: 88px; width: 54px; height: 54px; --r: 10deg; }  /* pix */

/* INSIGHT · left · arc + guide-line */
.vh-geo--insight2 > :nth-child(4) { top: 28px;  left: 92px; width: 110px; height: 110px; --r: 60deg; }  /* arc */
.vh-geo--insight2 > :nth-child(5) { top: 118px; left: 28px; height: 200px; --r: 6deg; }                 /* line */

/* HERO · corner bracket framing the top-right + reticle near the CTA */
.vh-geo--hero .vh-geo__bracket:nth-child(6) { top: 6px;   right: 56px;  width: 56px; height: 56px; --r: 90deg;  opacity: .55; }
.vh-geo--hero .vh-geo__target:nth-child(7)  { top: 300px; right: 64px;  width: 34px; height: 34px;             opacity: .85; }

/* FOUNDER VIDEO · reticle pointing toward the Founder Call CTA */
.vh-geo--fv > :nth-child(5) { top: 250px; right: 60px; width: 30px; height: 30px; opacity: .8; }  /* target */

/* FINAL CTA · reticle near the banner button */
.vh-geo--cta .vh-geo__target:nth-child(6) { left: 210px; bottom: 122px; width: 34px; height: 34px; opacity: .9; }

/* Soft depth glow behind the stats numbers — its own un-clipped element. The
   section is already position:relative + isolate, so a z-index:-1 child sits
   above the section bg, below content. (The final-CTA section already ships its
   own ::before glow in home.css, so no glow is added there.) */
.vh-geo--glow-stats { left: 50%; top: 42%; width: 380px; height: 380px; transform: translate(-50%, -50%); }

/* ============================================================= responsive */
/* Tablet: shrink the hero cluster. */
@media (max-width: 1024px) {
  .vh-geo--hero { width: 360px; height: 400px; top: -40px; right: -60px; }
  .vh-geo--hero .vh-geo__band:nth-child(1) { width: 380px; height: 48px; top: 50px; }
  .vh-geo--hero .vh-geo__band:nth-child(2) { width: 320px; height: 30px; top: 124px; }
  .vh-geo--hero .vh-geo__band:nth-child(3) { width: 260px; height: 22px; top: 186px; }
}

/* Mid widths: keep the side accents but tuck them tighter into the gutter
   (narrower clip box) so they don't crowd content. They now stay visible on
   laptops and split panes instead of disappearing. */
@media (max-width: 1180px) {
  .vh-geo--side { width: 200px; height: 320px; }
}

/* Small tablets and below: hide the side accents + depth glows for a clean
   layout (hero + final-CTA clusters stay until the phone breakpoint). */
@media (max-width: 880px) {
  .vh-geo--side,
  .vh-geo--glow { display: none; }
}

/* Phones: hide every accent. */
@media (max-width: 720px) {
  .vh-geo { display: none; }
}

/* =========================================================================
   ABOUT PAGE — side-accent clusters reusing the same .vh-geo--side system.
   The about sections (.ab-charter / .ab-awards / .ab-final) already ship
   position:relative + overflow:hidden + isolation:isolate, so these clip and
   sit behind content just like the home clusters. They inherit every
   responsive rule above (shrink ≤1180px, hide ≤880px / ≤720px).
   ========================================================================= */

/* CHARTER · left · diagonal bands (-22°) + corner bracket */
.vh-geo--ab-charter { left: 0; --r: -22deg; }
.vh-geo--ab-charter > :nth-child(1) { top: 40px;  left: -40px; width: 300px; height: 46px; background: var(--color-accent); opacity: .22; } /* band */
.vh-geo--ab-charter > :nth-child(2) { top: 140px; left: 0;     width: 240px; height: 30px; background: var(--color-accent); opacity: .40; } /* band */
.vh-geo--ab-charter > :nth-child(3) { top: 226px; left: -20px; width: 190px; height: 22px; background: #fff;               opacity: .10; } /* band */
.vh-geo--ab-charter > :nth-child(4) { top: 150px; left: 96px;  width: 34px;  height: 34px; --r: 0deg; }                                    /* bracket */
/* CHARTER · right · dot-grid + plus + square */
.vh-geo--ab-charter2 { right: 0; --r: 18deg; }
.vh-geo--ab-charter2 > :nth-child(1) { top: 60px;  right: 28px;  width: 116px; height: 92px; color: rgba(232,180,0,.46); }   /* dots */
.vh-geo--ab-charter2 > :nth-child(2) { top: 180px; right: 60px;  width: 18px;  height: 18px; }                                /* plus */
.vh-geo--ab-charter2 > :nth-child(3) { top: 224px; right: 104px; width: 16px;  height: 16px; --r: 24deg; }                    /* sq */

/* AWARDS · left · ring + band + plus + bracket (+24°) */
.vh-geo--awards { left: 0; --r: 24deg; }
.vh-geo--awards > :nth-child(1) { top: 60px;  left: 26px;  width: 110px; height: 110px; }                                     /* ring */
.vh-geo--awards > :nth-child(2) { top: 200px; left: -30px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--awards > :nth-child(3) { top: 70px;  left: 150px; width: 18px;  height: 18px; }                                      /* plus */
.vh-geo--awards > :nth-child(4) { top: 240px; left: 90px;  width: 32px;  height: 32px; --r: 0deg; }                           /* bracket */
/* AWARDS · right · dot-grid + band + reticle (-26°) */
.vh-geo--awards2 { right: 0; --r: -26deg; }
.vh-geo--awards2 > :nth-child(1) { top: 50px;  right: 26px;  width: 120px; height: 96px; color: rgba(232,180,0,.46); }       /* dots */
.vh-geo--awards2 > :nth-child(2) { top: 178px; right: -20px; width: 240px; height: 26px; background: var(--color-accent); opacity: .38; } /* band */
.vh-geo--awards2 > :nth-child(3) { top: 250px; right: 50px;  width: 32px;  height: 32px; opacity: .85; }                      /* target */

/* FINAL CTA · left · bands + chevron + reticle (-26°) */
.vh-geo--ab-final { left: 0; --r: -26deg; }
.vh-geo--ab-final > :nth-child(1) { top: 40px;  left: -40px; width: 300px; height: 48px; background: var(--color-accent); opacity: .24; } /* band */
.vh-geo--ab-final > :nth-child(2) { top: 150px; left: 0;     width: 240px; height: 30px; background: var(--color-accent); opacity: .40; } /* band */
.vh-geo--ab-final > :nth-child(3) { top: 232px; left: 60px;  width: 34px;  height: 34px; --r: 135deg; }                       /* chev */
.vh-geo--ab-final > :nth-child(4) { top: 246px; left: 150px; width: 32px;  height: 32px; opacity: .9; }                       /* target */
/* FINAL CTA · right · concentric rings + dots + plus (+16°) */
.vh-geo--ab-final2 { right: 0; --r: 16deg; }
.vh-geo--ab-final2 > :nth-child(1) { top: 70px;  right: 40px; width: 110px; height: 110px; }                                  /* ring */
.vh-geo--ab-final2 > :nth-child(2) { top: 180px; right: 30px; width: 116px; height: 92px; color: rgba(232,180,0,.42); }      /* dots */
.vh-geo--ab-final2 > :nth-child(3) { top: 250px; right: 24px; width: 16px;  height: 16px; }                                   /* plus */

/* HERO · left · diagonal bands (+20°) + dot-grid + plus */
.vh-geo--ab-hero { left: 0; --r: 20deg; }
.vh-geo--ab-hero > :nth-child(1) { top: 40px;  left: -40px; width: 300px; height: 46px; background: var(--color-accent); opacity: .20; } /* band */
.vh-geo--ab-hero > :nth-child(2) { top: 140px; left: 0;     width: 230px; height: 28px; background: var(--color-accent); opacity: .36; } /* band */
.vh-geo--ab-hero > :nth-child(3) { top: 224px; left: 30px;  width: 110px; height: 88px; color: rgba(232,180,0,.40); }                  /* dots */
.vh-geo--ab-hero > :nth-child(4) { top: 96px;  left: 150px; width: 16px;  height: 16px; }                                              /* plus */
/* HERO · right · concentric ring + thin band + corner bracket (-18°) */
.vh-geo--ab-hero2 { right: 0; --r: -18deg; }
.vh-geo--ab-hero2 > :nth-child(1) { top: 60px;  right: 34px;  width: 110px; height: 110px; }                                            /* ring */
.vh-geo--ab-hero2 > :nth-child(2) { top: 196px; right: -20px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--ab-hero2 > :nth-child(3) { top: 70px;  right: 150px; width: 34px;  height: 34px; --r: 90deg; opacity: .55; }                    /* bracket */

/* FOUNDER STORY · right · concentric ring + thin band + dot-grid (-16°) */
.vh-geo--ab-story { right: 0; --r: -16deg; }
.vh-geo--ab-story > :nth-child(1) { top: 50px;  right: 28px;  width: 120px; height: 96px; }                                             /* ring */
.vh-geo--ab-story > :nth-child(2) { top: 184px; right: -20px; width: 230px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--ab-story > :nth-child(3) { top: 250px; right: 40px;  width: 110px; height: 88px; color: rgba(232,180,0,.40); }                /* dots */

/* =========================================================================
   LIGHT-BAND geo adjustments — the founder-story + charter sections flipped to
   light backgrounds, so the white "ghost" band vanishes and the lime accents
   buzz against off-white. Recolor the white band to a navy ghost and soften the
   lime to lime-dark / lower alpha. Scoped to those two sections, so the
   homepage's identical clusters stay exactly as they are. (These clusters hide
   below 880px anyway, so this only affects desktop.)
   ========================================================================= */
/* charter: the one #fff ghost band → a navy ghost on light (higher specificity) */
.ab-charter .vh-geo--ab-charter > :nth-child(3) {
  background: var(--color-primary);
  opacity: .06;
}
/* lime bands — softer on off-white */
.ab-story .vh-geo__band,
.ab-charter .vh-geo__band { opacity: .18; }
/* lime outlines / marks → lime-dark, lower alpha so they don't vibrate */
.ab-story .vh-geo__ring { border-color: rgba(230,192,9,.40); }
.ab-charter .vh-geo__bracket {
  border-top-color: rgba(230,192,9,.42);
  border-left-color: rgba(230,192,9,.42);
}
.ab-story .vh-geo__dots,
.ab-charter .vh-geo__dots { color: rgba(230,192,9,.32); }
.ab-charter .vh-geo__plus { color: rgba(230,192,9,.45); }
.ab-charter .vh-geo__sq { background: rgba(230,192,9,.28); }

/* =========================================================================
   INVERTED-YELLOW geo adjustments — the final-CTA homepage sections flipped to
   a LIME-YELLOW background (see the matching block at the end of home.css). The
   token-driven bands (background: var(--color-accent)) already invert to navy
   via that section token swap; here we recolor only the HARDCODED lime
   (rgba(232,180,0,…)) and white (#fff) primitives to navy so the clusters stay
   legible on yellow.
   NOTE: STATS2 was removed from this group — it now renders on the DARK navy
   surface band again (with white bento cards), so its .vh-geo cluster keeps the
   base dark-theme treatment (gold bands + white ghost) untouched. Only
   .vh-lastcta / .wwd-cta are recolored below; the awards strip has no cluster.
   ========================================================================= */
/* white "ghost" bands → navy ghost (3-class selectors beat the 2-class per-instance rules) */
.vh-lastcta .vh-geo--cta   > :nth-child(3),
.wwd-cta    .vh-geo--cta   > :nth-child(3) { background: #0A1A3F; opacity: .08; }
/* "+" registration marks → navy */
.vh-lastcta .vh-geo__plus,
.wwd-cta    .vh-geo__plus { color: rgba(10, 26, 63, .55); }
/* CTA reticle ring → navy (its centre dot uses var(--color-accent) → already navy) */
.vh-lastcta .vh-geo__target,
.wwd-cta    .vh-geo__target { border-color: rgba(10, 26, 63, .55); }

/* =========================================================================
   CUSTOM APP DEV PAGE — side-accent clusters reusing the .vh-geo system.
   The .cad-section host sets position:relative + isolation:isolate (see
   custom-apps.css), so these clip (via the .vh-geo--side overflow:hidden box)
   and sit behind content (z-index:-1) just like the home/about clusters. They
   inherit every responsive rule above (shrink <=1180px, hide <=880px / <=720px;
   the bespoke hero/cta clusters survive to 720px like .vh-geo--hero/--cta).
   Clusters alternate gutters down the page; brightest near the hero + final CTA.
   ONE cluster touches a yellow surface — the manifesto — recolored at the end.
   ========================================================================= */

/* HERO · left · brightest set · bands + dots + chev + bracket + reticle (-24deg).
   Bespoke (not --side): the right gutter is occupied by .cad-hero__visual, so
   this lives in the LEFT gutter and aims a chevron + reticle back at the CTAs. */
.vh-geo--cad-hero { left: -40px; top: 80px; width: 460px; height: 480px; --r: -24deg; z-index: 0; overflow: hidden; }
.vh-geo--cad-hero .vh-geo__band:nth-child(1)    { top: 60px;  left: -30px; width: 460px; height: 56px; background: var(--color-accent); opacity: .50; }
.vh-geo--cad-hero .vh-geo__band:nth-child(2)    { top: 150px; left: 20px;  width: 380px; height: 38px; background: var(--color-accent); opacity: .32; }
.vh-geo--cad-hero .vh-geo__band:nth-child(3)    { top: 230px; left: -10px; width: 320px; height: 28px; background: #fff;               opacity: .12; }
.vh-geo--cad-hero .vh-geo__dots:nth-child(4)    { top: 8px;   left: 14px;  width: 120px; height: 90px; color: rgba(232,180,0,.50); }
.vh-geo--cad-hero .vh-geo__chev:nth-child(5)    { top: 320px; left: 150px; width: 34px;  height: 34px; --r: 45deg; opacity: .8; }
.vh-geo--cad-hero .vh-geo__bracket:nth-child(6) { top: 4px;   left: 56px;  width: 52px;  height: 52px; --r: 0deg; opacity: .55; }
.vh-geo--cad-hero .vh-geo__target:nth-child(7)  { top: 300px; left: 60px;  width: 34px;  height: 34px; opacity: .9; }

/* MANIFESTO (yellow bg) · left · bands + plus + square (+20deg) — recolored below */
.vh-geo--cad-manifesto { left: 0; --r: 20deg; }
.vh-geo--cad-manifesto > :nth-child(1) { top: 36px;  left: -50px; width: 300px; height: 48px; background: var(--color-accent); opacity: .26; } /* band */
.vh-geo--cad-manifesto > :nth-child(2) { top: 150px; left: -10px; width: 240px; height: 32px; background: var(--color-accent); opacity: .42; } /* band */
.vh-geo--cad-manifesto > :nth-child(3) { top: 250px; left: -30px; width: 200px; height: 22px; background: #fff;               opacity: .10; } /* ghost band */
.vh-geo--cad-manifesto > :nth-child(4) { top: 96px;  left: 150px; width: 18px;  height: 18px; }                                              /* plus */
.vh-geo--cad-manifesto > :nth-child(5) { top: 210px; left: 120px; width: 18px;  height: 18px; --r: 24deg; }                                  /* sq */

/* TIERS · right · concentric rings + band + chevron (-18deg) — chevron aims down toward the cards */
.vh-geo--cad-tiers { right: 0; --r: -18deg; }
.vh-geo--cad-tiers > :nth-child(1) { top: 80px;  right: 40px;  width: 110px; height: 110px; }                                     /* ring */
.vh-geo--cad-tiers > :nth-child(2) { top: 98px;  right: 58px;  width: 74px;  height: 74px; border-color: rgba(232,180,0,.30); }  /* ring inner */
.vh-geo--cad-tiers > :nth-child(3) { top: 224px; right: -20px; width: 240px; height: 24px; background: var(--color-accent); opacity: .34; } /* band */
.vh-geo--cad-tiers > :nth-child(4) { top: 196px; right: 70px;  width: 30px;  height: 30px; --r: 135deg; }                         /* chev */

/* DIFF · left · steep blueprint bands + dashed guide-line (+40deg) */
.vh-geo--cad-diff { left: 0; --r: 40deg; }
.vh-geo--cad-diff > :nth-child(1) { top: 60px;  left: 14px;  width: 26px; height: 200px; background: var(--color-accent); opacity: .24; } /* band */
.vh-geo--cad-diff > :nth-child(2) { top: 44px;  left: 74px;  width: 18px; height: 168px; background: var(--color-accent); opacity: .40; } /* band */
.vh-geo--cad-diff > :nth-child(3) { top: 96px;  left: 124px; width: 14px; height: 124px; background: #fff;               opacity: .10; } /* band */
.vh-geo--cad-diff > :nth-child(4) { top: 30px;  left: 168px; height: 250px; --r: 8deg; }                                                 /* line */

/* SERVICES · right · dot-grid + band + 3x3 app-icon grid (-28deg) — quiet "we build apps" motif */
.vh-geo--cad-services { right: 0; --r: -28deg; }
.vh-geo--cad-services > :nth-child(1) { top: 36px;  right: 28px; width: 116px; height: 90px; color: rgba(232,180,0,.46); }       /* dots */
.vh-geo--cad-services > :nth-child(2) { top: 168px; right: -20px; width: 230px; height: 24px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--cad-services > :nth-child(3) { top: 232px; right: 70px; width: 58px;  height: 58px; --r: -8deg; }                        /* pix */

/* TYPES · left · ring + band + plus + corner bracket (+24deg) */
.vh-geo--cad-types { left: 0; --r: 24deg; }
.vh-geo--cad-types > :nth-child(1) { top: 60px;  left: 26px;  width: 110px; height: 110px; }                                      /* ring */
.vh-geo--cad-types > :nth-child(2) { top: 206px; left: -30px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--cad-types > :nth-child(3) { top: 70px;  left: 156px; width: 18px;  height: 18px; }                                       /* plus */
.vh-geo--cad-types > :nth-child(4) { top: 244px; left: 90px;  width: 32px;  height: 32px; --r: 0deg; }                            /* bracket */

/* PRICING · right · bands + dot-grid + arc (-26deg) — arc curves against the price panel */
.vh-geo--cad-pricing { right: 0; --r: -26deg; }
.vh-geo--cad-pricing > :nth-child(1) { top: 40px;  right: -30px; width: 300px; height: 48px; background: var(--color-accent); opacity: .24; } /* band */
.vh-geo--cad-pricing > :nth-child(2) { top: 142px; right: 10px;  width: 240px; height: 32px; background: var(--color-accent); opacity: .40; } /* band */
.vh-geo--cad-pricing > :nth-child(3) { top: 224px; right: 44px;  width: 110px; height: 88px; color: rgba(232,180,0,.42); }       /* dots */
.vh-geo--cad-pricing > :nth-child(4) { top: 236px; right: 120px; width: 110px; height: 110px; --r: 150deg; }                      /* arc */

/* FINAL CTA · left · most energetic · bands + chevron + reticle (-26deg).
   Bespoke (not --side): lands on the dark navy SECTION bg (the yellow is the
   inner .cad-cta__card), so the standard lime palette is correct — no recolor. */
.vh-geo--cad-cta { z-index: 0; left: -60px; bottom: -40px; width: 520px; height: 420px; --r: -26deg; overflow: hidden; }
.vh-geo--cad-cta .vh-geo__band:nth-child(1)   { left: -30px; bottom: 210px; width: 460px; height: 52px; background: var(--color-accent); opacity: .26; }
.vh-geo--cad-cta .vh-geo__band:nth-child(2)   { left: 20px;  bottom: 128px; width: 380px; height: 38px; background: var(--color-accent); opacity: .42; }
.vh-geo--cad-cta .vh-geo__chev:nth-child(3)   { left: 80px;  bottom: 160px; width: 40px;  height: 40px; --r: 45deg; opacity: .85; }
.vh-geo--cad-cta .vh-geo__target:nth-child(4) { left: 220px; bottom: 132px; width: 34px;  height: 34px; opacity: .9; }

/* --- MANIFESTO yellow-surface recolor (mandatory) -----------------------
   .cad-manifesto sets background: var(--color-accent), so lime bands would be
   invisible on it. Recolor the hardcoded lime/white primitives to navy ghosts
   (mirrors the inverted-yellow block above). Scoped to .cad-manifesto only. */
.cad-manifesto .vh-geo__band { background: #0A1A3F; opacity: .10; }
.cad-manifesto .vh-geo--cad-manifesto > :nth-child(3) { background: #0A1A3F; opacity: .08; }
.cad-manifesto .vh-geo__plus { color: rgba(10, 26, 63, .55); }
.cad-manifesto .vh-geo__sq   { background: rgba(10, 26, 63, .30); }

/* =========================================================================
   CUSTOM WEBSITES PAGE — side-accent clusters reusing the .vh-geo system.
   The .cwd-* sections set position:relative + isolation:isolate + overflow
   (see cwd-*.css), so these clip and sit behind content (z-index:-1) exactly
   like the home/about/app clusters. They inherit every responsive rule above
   (shrink <=1180px, hide <=880px / <=720px); the bespoke hero/final clusters
   survive to 720px like .vh-geo--hero/--cta. Clusters alternate gutters down
   the page; brightest in the hero + the final CTA, quiet through the middle.
   ALL surfaces are navy here, so the standard lime palette is correct — no
   recolor needed (unlike the app page's yellow manifesto).
   ========================================================================= */

/* HERO · right · brightest set · bands + dots + chev + bracket + reticle (-26deg).
   Bespoke (not --side): lands in the RIGHT gutter behind the browser/phone
   mockups, framing them and aiming a chevron + reticle back toward the CTA.
   Hidden <=980px (single-column hero has no clear gutter — see media block). */
.vh-geo--cwd-hero { top: -50px; right: -50px; width: 480px; height: 520px; --r: -26deg; z-index: 0; overflow: hidden; }
.vh-geo--cwd-hero .vh-geo__band:nth-child(1)    { top: 58px;  right: 10px; width: 500px; height: 60px; background: var(--color-accent); opacity: .56; }
.vh-geo--cwd-hero .vh-geo__band:nth-child(2)    { top: 158px; right: 56px; width: 420px; height: 38px; background: var(--color-accent); opacity: .34; }
.vh-geo--cwd-hero .vh-geo__band:nth-child(3)    { top: 242px; right: 0;    width: 340px; height: 28px; background: #fff;               opacity: .14; }
.vh-geo--cwd-hero .vh-geo__dots:nth-child(4)    { top: 6px;   right: 16px; width: 126px; height: 92px; color: rgba(232,180,0,.52); }
.vh-geo--cwd-hero .vh-geo__chev:nth-child(5)    { top: 344px; right: 150px; width: 34px; height: 34px; --r: 135deg; opacity: .8; }
.vh-geo--cwd-hero .vh-geo__bracket:nth-child(6) { top: 2px;   right: 58px; width: 54px;  height: 54px; --r: 90deg; opacity: .52; }
.vh-geo--cwd-hero .vh-geo__target:nth-child(7)  { top: 300px; right: 62px; width: 34px;  height: 34px; opacity: .85; }

/* INTRO · right · subtle · ring + dot-grid + plus (-16deg) */
.vh-geo--cwd-intro { right: 0; --r: -16deg; }
.vh-geo--cwd-intro > :nth-child(1) { top: 64px;  right: 36px;  width: 104px; height: 104px; }                               /* ring */
.vh-geo--cwd-intro > :nth-child(2) { top: 196px; right: 44px;  width: 110px; height: 84px; color: rgba(232,180,0,.40); }  /* dots */
.vh-geo--cwd-intro > :nth-child(3) { top: 150px; right: 124px; width: 16px;  height: 16px; }                               /* plus */

/* WHY · left · subtle · two bands + chevron (+24deg) — chev points in toward steps */
.vh-geo--cwd-why { left: 0; --r: 24deg; }
.vh-geo--cwd-why > :nth-child(1) { top: 60px;  left: -40px; width: 260px; height: 30px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--cwd-why > :nth-child(2) { top: 142px; left: -10px; width: 200px; height: 22px; background: var(--color-accent); opacity: .42; } /* band */
.vh-geo--cwd-why > :nth-child(3) { top: 232px; left: 64px;  width: 30px;  height: 30px; --r: 135deg; }                                   /* chev */

/* BRAND · right · subtle · dot-grid + band + plus (-22deg) */
.vh-geo--cwd-brand { right: 0; --r: -22deg; }
.vh-geo--cwd-brand > :nth-child(1) { top: 50px;  right: 30px;  width: 110px; height: 86px; color: rgba(232,180,0,.40); }   /* dots */
.vh-geo--cwd-brand > :nth-child(2) { top: 184px; right: -20px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--cwd-brand > :nth-child(3) { top: 150px; right: 124px; width: 16px;  height: 16px; }                                /* plus */

/* PLATFORMS · left · subtle · ring + band + square (+20deg) */
.vh-geo--cwd-platforms { left: 0; --r: 20deg; }
.vh-geo--cwd-platforms > :nth-child(1) { top: 58px;  left: 24px;  width: 104px; height: 104px; }                                    /* ring */
.vh-geo--cwd-platforms > :nth-child(2) { top: 212px; left: -30px; width: 210px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */
.vh-geo--cwd-platforms > :nth-child(3) { top: 120px; left: 150px; width: 18px;  height: 18px; --r: 24deg; }                         /* sq */

/* FAQ · right · subtle · dot-grid + ring + plus (+16deg) */
.vh-geo--cwd-faq { right: 0; --r: 16deg; }
.vh-geo--cwd-faq > :nth-child(1) { top: 68px;  right: 30px; width: 112px; height: 88px; color: rgba(232,180,0,.42); }   /* dots */
.vh-geo--cwd-faq > :nth-child(2) { top: 182px; right: 48px; width: 96px;  height: 96px; }                                /* ring */
.vh-geo--cwd-faq > :nth-child(3) { top: 252px; right: 30px; width: 16px;  height: 16px; }                                /* plus */

/* FINAL CTA · left · most energetic · bands + chevron + reticle (-26deg).
   Bespoke (not --side): lands on the deepest-navy section bg, flowing up and
   in toward the breathing "Book a free consultation" button. Survives to 720px. */
.vh-geo--cwd-final { z-index: 0; left: -70px; bottom: -50px; width: 560px; height: 440px; --r: -26deg; overflow: hidden; }
.vh-geo--cwd-final .vh-geo__band:nth-child(1)   { left: -30px; bottom: 220px; width: 480px; height: 54px; background: var(--color-accent); opacity: .22; }
.vh-geo--cwd-final .vh-geo__band:nth-child(2)   { left: 20px;  bottom: 130px; width: 400px; height: 38px; background: var(--color-accent); opacity: .38; }
.vh-geo--cwd-final .vh-geo__band:nth-child(3)   { left: -10px; bottom: 60px;  width: 330px; height: 26px; background: #fff;               opacity: .10; }
.vh-geo--cwd-final .vh-geo__chev:nth-child(4)   { left: 80px;  bottom: 158px; width: 40px;  height: 40px; --r: 45deg; opacity: .85; }
.vh-geo--cwd-final .vh-geo__target:nth-child(5) { left: 230px; bottom: 138px; width: 34px;  height: 34px; opacity: .9; }

/* Single-column hero (<=980px) has no clear right gutter — retire the bold hero
   cluster there so bands never sit behind the now-full-width headline copy.
   The middle --side clusters already shrink <=1180 and hide <=880 above. */
@media (max-width: 980px) {
  .vh-geo--cwd-hero { display: none; }
}

/* =========================================================================
   Website to App Conversion (.vh-geo--wta-*) — Packet WTA-R1
   Cloned 1:1 from the .vh-geo--cad-* clusters above so the page carries the
   same gold blueprint accents in the same positions. Appended; no cad- rules
   touched. Sections: hero, manifesto, tiers, diff, services, types, compare.
   ========================================================================= */

/* HERO · left · bands + dots + chev + bracket + reticle (-24deg) */
.vh-geo--wta-hero { left: -40px; top: 80px; width: 460px; height: 480px; --r: -24deg; z-index: 0; overflow: hidden; }
.vh-geo--wta-hero .vh-geo__band:nth-child(1)    { top: 60px;  left: -30px; width: 460px; height: 56px; background: var(--color-accent); opacity: .50; }
.vh-geo--wta-hero .vh-geo__band:nth-child(2)    { top: 150px; left: 20px;  width: 380px; height: 38px; background: var(--color-accent); opacity: .32; }
.vh-geo--wta-hero .vh-geo__band:nth-child(3)    { top: 230px; left: -10px; width: 320px; height: 28px; background: #fff;               opacity: .12; }
.vh-geo--wta-hero .vh-geo__dots:nth-child(4)    { top: 8px;   left: 14px;  width: 120px; height: 90px; color: rgba(232,180,0,.50); }
.vh-geo--wta-hero .vh-geo__chev:nth-child(5)    { top: 320px; left: 150px; width: 34px;  height: 34px; --r: 45deg; opacity: .8; }
.vh-geo--wta-hero .vh-geo__bracket:nth-child(6) { top: 4px;   left: 56px;  width: 52px;  height: 52px; --r: 0deg; opacity: .55; }
.vh-geo--wta-hero .vh-geo__target:nth-child(7)  { top: 300px; left: 60px;  width: 34px;  height: 34px; opacity: .9; }

/* MANIFESTO (yellow bg) · left · bands + plus + square (+20deg) — recolored below */
.vh-geo--wta-manifesto { left: 0; --r: 20deg; }
.vh-geo--wta-manifesto > :nth-child(1) { top: 36px;  left: -50px; width: 300px; height: 48px; background: var(--color-accent); opacity: .26; }
.vh-geo--wta-manifesto > :nth-child(2) { top: 150px; left: -10px; width: 240px; height: 32px; background: var(--color-accent); opacity: .42; }
.vh-geo--wta-manifesto > :nth-child(3) { top: 250px; left: -30px; width: 200px; height: 22px; background: #fff;               opacity: .10; }
.vh-geo--wta-manifesto > :nth-child(4) { top: 96px;  left: 150px; width: 18px;  height: 18px; }
.vh-geo--wta-manifesto > :nth-child(5) { top: 210px; left: 120px; width: 18px;  height: 18px; --r: 24deg; }

/* TIERS · right · concentric rings + band + chevron (-18deg) */
.vh-geo--wta-tiers { right: 0; --r: -18deg; }
.vh-geo--wta-tiers > :nth-child(1) { top: 80px;  right: 40px;  width: 110px; height: 110px; }
.vh-geo--wta-tiers > :nth-child(2) { top: 98px;  right: 58px;  width: 74px;  height: 74px; border-color: rgba(232,180,0,.30); }
.vh-geo--wta-tiers > :nth-child(3) { top: 224px; right: -20px; width: 240px; height: 24px; background: var(--color-accent); opacity: .34; }
.vh-geo--wta-tiers > :nth-child(4) { top: 196px; right: 70px;  width: 30px;  height: 30px; --r: 135deg; }

/* DIFF · left · steep blueprint bands + dashed guide-line (+40deg) */
.vh-geo--wta-diff { left: 0; --r: 40deg; }
.vh-geo--wta-diff > :nth-child(1) { top: 60px;  left: 14px;  width: 26px; height: 200px; background: var(--color-accent); opacity: .24; }
.vh-geo--wta-diff > :nth-child(2) { top: 44px;  left: 74px;  width: 18px; height: 168px; background: var(--color-accent); opacity: .40; }
.vh-geo--wta-diff > :nth-child(3) { top: 96px;  left: 124px; width: 14px; height: 124px; background: #fff;               opacity: .10; }
.vh-geo--wta-diff > :nth-child(4) { top: 30px;  left: 168px; height: 250px; --r: 8deg; }

/* SERVICES · right · dot-grid + band + 3x3 app-icon grid (-28deg) */
.vh-geo--wta-services { right: 0; --r: -28deg; }
.vh-geo--wta-services > :nth-child(1) { top: 36px;  right: 28px; width: 116px; height: 90px; color: rgba(232,180,0,.46); }
.vh-geo--wta-services > :nth-child(2) { top: 168px; right: -20px; width: 230px; height: 24px; background: var(--color-accent); opacity: .30; }
.vh-geo--wta-services > :nth-child(3) { top: 232px; right: 70px; width: 58px;  height: 58px; --r: -8deg; }

/* TYPES · left · ring + band + plus + corner bracket (+24deg) */
.vh-geo--wta-types { left: 0; --r: 24deg; }
.vh-geo--wta-types > :nth-child(1) { top: 60px;  left: 26px;  width: 110px; height: 110px; }
.vh-geo--wta-types > :nth-child(2) { top: 206px; left: -30px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; }
.vh-geo--wta-types > :nth-child(3) { top: 70px;  left: 156px; width: 18px;  height: 18px; }
.vh-geo--wta-types > :nth-child(4) { top: 244px; left: 90px;  width: 32px;  height: 32px; --r: 0deg; }

/* COMPARE · right · bands + dot-grid + arc (-26deg) — reuses pricing geometry */
.vh-geo--wta-compare { right: 0; --r: -26deg; }
.vh-geo--wta-compare > :nth-child(1) { top: 40px;  right: -30px; width: 300px; height: 48px; background: var(--color-accent); opacity: .24; }
.vh-geo--wta-compare > :nth-child(2) { top: 142px; right: 10px;  width: 240px; height: 32px; background: var(--color-accent); opacity: .40; }
.vh-geo--wta-compare > :nth-child(3) { top: 224px; right: 44px;  width: 110px; height: 88px; color: rgba(232,180,0,.42); }
.vh-geo--wta-compare > :nth-child(4) { top: 236px; right: 120px; width: 110px; height: 110px; --r: 150deg; }

/* MANIFESTO yellow-surface recolor (mandatory) — scoped to .wta-manifesto only. */
.wta-manifesto .vh-geo__band { background: #0A1A3F; opacity: .10; }
.wta-manifesto .vh-geo--wta-manifesto > :nth-child(3) { background: #0A1A3F; opacity: .08; }
.wta-manifesto .vh-geo__plus { color: rgba(10, 26, 63, .55); }


/* =========================================================================
   Marketing Package (.vh-geo--mkp-*)
   Cloned 1:1 from the .vh-geo--wta-* clusters above so the Marketing Package
   page carries the same gold blueprint accents in the same positions.
   Appended; no wta- rules touched.
   ========================================================================= */
/* HERO · left · bands + dots + chev + bracket + reticle (-24deg) */
.vh-geo--mkp-hero { left: -40px; top: 80px; width: 460px; height: 480px; --r: -24deg; z-index: 0; overflow: hidden; }
.vh-geo--mkp-hero .vh-geo__band:nth-child(1)    { top: 60px;  left: -30px; width: 460px; height: 56px; background: var(--color-accent); opacity: .50; }
.vh-geo--mkp-hero .vh-geo__band:nth-child(2)    { top: 150px; left: 20px;  width: 380px; height: 38px; background: var(--color-accent); opacity: .32; }
.vh-geo--mkp-hero .vh-geo__band:nth-child(3)    { top: 230px; left: -10px; width: 320px; height: 28px; background: #fff;               opacity: .12; }
.vh-geo--mkp-hero .vh-geo__dots:nth-child(4)    { top: 8px;   left: 14px;  width: 120px; height: 90px; color: rgba(232,180,0,.50); }
.vh-geo--mkp-hero .vh-geo__chev:nth-child(5)    { top: 320px; left: 150px; width: 34px;  height: 34px; --r: 45deg; opacity: .8; }
.vh-geo--mkp-hero .vh-geo__bracket:nth-child(6) { top: 4px;   left: 56px;  width: 52px;  height: 52px; --r: 0deg; opacity: .55; }
.vh-geo--mkp-hero .vh-geo__target:nth-child(7)  { top: 300px; left: 60px;  width: 34px;  height: 34px; opacity: .9; }

/* MANIFESTO (yellow bg) · left · bands + plus + square (+20deg) — recolored below */
.vh-geo--mkp-manifesto { left: 0; --r: 20deg; }
.vh-geo--mkp-manifesto > :nth-child(1) { top: 36px;  left: -50px; width: 300px; height: 48px; background: var(--color-accent); opacity: .26; }
.vh-geo--mkp-manifesto > :nth-child(2) { top: 150px; left: -10px; width: 240px; height: 32px; background: var(--color-accent); opacity: .42; }
.vh-geo--mkp-manifesto > :nth-child(3) { top: 250px; left: -30px; width: 200px; height: 22px; background: #fff;               opacity: .10; }
.vh-geo--mkp-manifesto > :nth-child(4) { top: 96px;  left: 150px; width: 18px;  height: 18px; }
.vh-geo--mkp-manifesto > :nth-child(5) { top: 210px; left: 120px; width: 18px;  height: 18px; --r: 24deg; }

/* TIERS · right · concentric rings + band + chevron (-18deg) */
.vh-geo--mkp-tiers { right: 0; --r: -18deg; }
.vh-geo--mkp-tiers > :nth-child(1) { top: 80px;  right: 40px;  width: 110px; height: 110px; }
.vh-geo--mkp-tiers > :nth-child(2) { top: 98px;  right: 58px;  width: 74px;  height: 74px; border-color: rgba(232,180,0,.30); }
.vh-geo--mkp-tiers > :nth-child(3) { top: 224px; right: -20px; width: 240px; height: 24px; background: var(--color-accent); opacity: .34; }
.vh-geo--mkp-tiers > :nth-child(4) { top: 196px; right: 70px;  width: 30px;  height: 30px; --r: 135deg; }

/* DIFF · left · steep blueprint bands + dashed guide-line (+40deg) */
.vh-geo--mkp-diff { left: 0; --r: 40deg; }
.vh-geo--mkp-diff > :nth-child(1) { top: 60px;  left: 14px;  width: 26px; height: 200px; background: var(--color-accent); opacity: .24; }
.vh-geo--mkp-diff > :nth-child(2) { top: 44px;  left: 74px;  width: 18px; height: 168px; background: var(--color-accent); opacity: .40; }
.vh-geo--mkp-diff > :nth-child(3) { top: 96px;  left: 124px; width: 14px; height: 124px; background: #fff;               opacity: .10; }
.vh-geo--mkp-diff > :nth-child(4) { top: 30px;  left: 168px; height: 250px; --r: 8deg; }

/* SERVICES · right · dot-grid + band + 3x3 app-icon grid (-28deg) */
.vh-geo--mkp-services { right: 0; --r: -28deg; }
.vh-geo--mkp-services > :nth-child(1) { top: 36px;  right: 28px; width: 116px; height: 90px; color: rgba(232,180,0,.46); }
.vh-geo--mkp-services > :nth-child(2) { top: 168px; right: -20px; width: 230px; height: 24px; background: var(--color-accent); opacity: .30; }
.vh-geo--mkp-services > :nth-child(3) { top: 232px; right: 70px; width: 58px;  height: 58px; --r: -8deg; }

/* TYPES · left · ring + band + plus + corner bracket (+24deg) */
.vh-geo--mkp-types { left: 0; --r: 24deg; }
.vh-geo--mkp-types > :nth-child(1) { top: 60px;  left: 26px;  width: 110px; height: 110px; }
.vh-geo--mkp-types > :nth-child(2) { top: 206px; left: -30px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; }
.vh-geo--mkp-types > :nth-child(3) { top: 70px;  left: 156px; width: 18px;  height: 18px; }
.vh-geo--mkp-types > :nth-child(4) { top: 244px; left: 90px;  width: 32px;  height: 32px; --r: 0deg; }

/* COMPARE · right · bands + dot-grid + arc (-26deg) — reuses pricing geometry */
.vh-geo--mkp-compare { right: 0; --r: -26deg; }
.vh-geo--mkp-compare > :nth-child(1) { top: 40px;  right: -30px; width: 300px; height: 48px; background: var(--color-accent); opacity: .24; }
.vh-geo--mkp-compare > :nth-child(2) { top: 142px; right: 10px;  width: 240px; height: 32px; background: var(--color-accent); opacity: .40; }
.vh-geo--mkp-compare > :nth-child(3) { top: 224px; right: 44px;  width: 110px; height: 88px; color: rgba(232,180,0,.42); }
.vh-geo--mkp-compare > :nth-child(4) { top: 236px; right: 120px; width: 110px; height: 110px; --r: 150deg; }

/* MANIFESTO yellow-surface recolor (mandatory) — scoped to .mkp-manifesto only. */
.mkp-manifesto .vh-geo__band { background: #0A1A3F; opacity: .10; }
.mkp-manifesto .vh-geo--mkp-manifesto > :nth-child(3) { background: #0A1A3F; opacity: .08; }
.mkp-manifesto .vh-geo__plus { color: rgba(10, 26, 63, .55); }