/* ============================================================
   VahanCore marketing site, design system v5 "Morning Shift"
   Warm paper ground, machined graphite and brass, one sky signal.
   The page dips into dusk where the product turns on.
   No em dashes in rendered text. No app screenshots. AA verified.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-var-latin.woff2') format('woff2-variations'),
       url('fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('fonts/general-sans-var.woff2') format('woff2-variations'),
       url('fonts/general-sans-var.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Devanagari';
  src: url('fonts/plex-devanagari-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-var-latin.woff2') format('woff2-variations'),
       url('fonts/caveat-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper:        #FAF6EF;
  --card:         #FFFFFF;
  --manila:       #F1E6CC;
  --ink:          #17243A;
  --ink-soft:     #4A5A74;
  --sky-bright:   #38BDF8;
  --sky:          #0EA5E9;
  --sky-deep:     #0369A1;
  --sky-wash:     #E6F4FD;
  --dusk:         #0C1A2C;
  --dusk-raised:  #13263D;
  --dusk-text:    #EAF2F9;
  --dusk-soft:    #9FB4C9;
  --brass:        #A16207;
  --brass-bright: #E8B45A;
  --green:        #16A34A;
  --green-dusk:   #4ADE80;
  --focus:        #0284C7;
  --on-sky:       #17243A;  /* foreground on a sky fill; pinned in both themes (5.61:1 on --sky) */
  --hairline-light: rgba(23, 36, 58, 0.08);
  --hairline-dusk:  rgba(125, 211, 252, 0.14);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --font-ne: 'IBM Plex Sans Devanagari', 'General Sans', sans-serif;
  --font-hand: 'Caveat', cursive;

  --maxw: 1200px;
  --gutter: 24px;
  --nav-h: 76px;
  --radius-card: 16px;
  --radius-btn: 8px;
  --shadow-warm: 0 18px 50px -20px rgba(74, 52, 18, 0.18), 0 2px 6px rgba(23, 36, 58, 0.06);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0.6 0.6 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --hexes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%230369A1' stroke-width='1'%3E%3Cpath d='M28 1.6 51 14.9v26.6L28 54.8 5 41.5V14.9Z'/%3E%3Cpath d='M28 49.1 51 62.4V89L28 102.3 5 89V62.4Z'/%3E%3Cpath d='M0-22.9 23-9.6V17L0 30.3-23 17V-9.6Z'/%3E%3Cpath d='M56-22.9 79-9.6V17L56 30.3 33 17V-9.6Z'/%3E%3Cpath d='M0 24.6 23 37.9v26.6L0 77.8-23 64.5V37.9Z'/%3E%3Cpath d='M56 24.6 79 37.9v26.6L56 77.8 33 64.5V37.9Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 8px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.lenis, html.lenis-smooth { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--sky-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a[href], .btn, label { touch-action: manipulation; }
.form-req { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 8px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: #BAE6FD; color: var(--ink); }

h1, h2, h3 { line-height: 1.12; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 580;
  font-variation-settings: 'SOFT' 75, 'WONK' 0;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 22ch; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.375rem; color: var(--ink); }
p { max-width: 66ch; }

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 300;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px;
}
.skip-link:focus { left: 12px; }

.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sky-deep);
  margin-bottom: 18px;
}
.section-head { margin-bottom: 56px; }
.section-head h2 { margin-bottom: 0; }

.hl {
  background: linear-gradient(transparent 58%, rgba(232, 180, 90, 0.30) 58%, rgba(232, 180, 90, 0.30) 94%, transparent 94%);
  color: inherit;
}

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 220;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.05;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 16px 30px; border-radius: var(--radius-btn);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary {
  background: var(--sky); color: var(--on-sky);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
}
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(23, 36, 58, 0.25); }
.btn-outline { background: transparent; color: var(--sky-deep); border: 1px solid rgba(3, 105, 161, 0.4); }
.btn-sm { padding: 11px 20px; font-size: 0.9375rem; min-height: 44px; }
.btn-lg { padding: 19px 40px; font-size: 1.0625rem; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14, 165, 233, 0.38); }
  .btn-primary:active { transform: translateY(0); }
  .btn-ghost:hover { border-color: rgba(23, 36, 58, 0.5); transform: translateY(-2px); }
  .btn-outline:hover { border-color: var(--sky-deep); background: var(--sky-wash); transform: translateY(-2px); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--nav-h);
  box-shadow: 0 1px 0 var(--hairline-light); /* resting hairline so the bar reads as separate from the hero */
  transition: height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: 100%; display: flex; align-items: center; gap: 40px;
}
.nav-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.nav-brand:hover { text-decoration: none; }
.nav-mark { width: 36px; height: 36px; will-change: transform; }
.nav-word { font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.01em; transition: color 0.4s ease; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a:not(.nav-menu-cta) {
  color: var(--ink-soft); font-weight: 500; font-size: 0.9375rem;
  background: linear-gradient(var(--sky-deep), var(--sky-deep)) left bottom / 0 1px no-repeat;
  transition: color 0.25s ease, background-size 0.3s ease;
  padding-bottom: 3px;
}
.nav-links a:not(.nav-menu-cta):hover { color: var(--ink); text-decoration: none; background-size: 100% 1px; }
.nav-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-links + .nav-actions { margin-left: 0; }
.nav.scrolled {
  height: 60px;
  background: rgba(250, 246, 239, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline-light);
}
.nav.theme-dusk.scrolled { background: rgba(12, 26, 44, 0.82); box-shadow: 0 1px 0 var(--hairline-dusk); }
.nav.theme-dusk .nav-word { color: var(--dusk-text); }
.nav.theme-dusk .nav-links a:not(.nav-menu-cta) { color: var(--dusk-soft); background-image: linear-gradient(var(--sky-bright), var(--sky-bright)); }
.nav.theme-dusk .nav-links a:not(.nav-menu-cta):hover { color: var(--dusk-text); }

/* Mobile nav disclosure toggle + in-menu CTA (revealed only on narrow screens) */
.nav-toggle { display: none; }
.nav-menu-cta { display: none; }
.nav-toggle-bar {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.4s ease;
}
.nav.theme-dusk .nav-toggle-bar { background: var(--dusk-text); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; }
/* The visual stage fills one screen. With the motion layer on, the hero
   grows past the viewport and the stage sticks, so the 3D constellation
   collapse plays out fully in view before the section scrolls away. No-JS
   and reduced-motion users keep a clean, single-screen hero. */
.hero-stage { position: relative; height: 100svh; overflow: clip; }
.motion .hero { min-height: 200svh; }
.motion .hero-stage { position: sticky; top: 0; }
.hero-bg { position: absolute; inset: 0; }
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 62% 72%, rgba(186, 230, 253, 0.5), transparent 70%);
}
.hero-hexes {
  position: absolute; inset: 0;
  background-image: var(--hexes);
  background-size: 56px 97px;
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(70% 65% at 64% 60%, #000, transparent 75%);
  mask-image: radial-gradient(70% 65% at 64% 60%, #000, transparent 75%);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.hero.webgl-on .hero-canvas { opacity: 1; }
.hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(250, 246, 239, 0.92) 18%, rgba(250, 246, 239, 0) 60%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; padding: calc(var(--nav-h) + 24px) var(--gutter) 96px;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hero-title {
  font-size: clamp(2.75rem, 6.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 26px;
  color: #0C4A6E; /* logo V/C blue, matching the section titles */
}
body.vc-dark .hero-title { color: var(--sky); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line-inner { display: inline-block; will-change: transform; }
/* Devanagari has tall upper marks (shirorekha + vowel signs) that the reveal mask clips at
   the hero size; give the NE hero more line-height and top room inside the mask so the tops
   are not cut off. Margins keep the block footprint (and the reveal) the same. */
html.lang-ne .hero-title { line-height: 1.3; }
html.lang-ne .hero-title .line { padding-top: 0.26em; margin-top: -0.26em; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero-nepali {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero-underline {
  display: block; width: 230px; height: 2px; margin: 8px 0 22px;
  background: linear-gradient(90deg, var(--brass), rgba(161, 98, 7, 0));
  transform-origin: left center;
}
.hero-sub { font-size: 1.1875rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-phone { font-size: 0.9375rem; color: var(--ink-soft); }
.hero-phone a { font-weight: 500; }
/* Mobile-only vs desktop-only copy: desktop keeps the full wording, phones show a
   shorter version. Both carry data-ne so the EN/NE engine swaps whichever shows. */
.vc-only-m { display: none; }
.wyg-arrow { display: none; }
.hero-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1.5px solid rgba(23, 36, 58, 0.3); border-radius: 13px;
}
.hero-cue-dot {
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--sky-deep);
}
.hero-scrollnote {
  position: absolute; left: 50%; bottom: 80px; z-index: 2;
  transform: translateX(-50%);
  width: max-content; max-width: min(86vw, 34ch);
  text-align: center; line-height: 1.5;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--ink-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cue-dot { animation: cue 2.2s ease-in-out infinite; }
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  65% { transform: translateY(14px); opacity: 0; }
  66% { transform: translateY(0); opacity: 0; }
}


/* ---------- Paper slip pieces (shared by The Switch card) ---------- */
.slip-plate {
  position: absolute; top: 64px; left: 56px;
  font-family: var(--font-mono); font-weight: 500; font-size: 1.0625rem;
  letter-spacing: 0.04em; color: rgba(23, 36, 58, 0.78);
}
/* v17: match the Paper Years slip (dark bar + brass fold + red margin) so The Switch
   visibly begins from that same stack. These ride inside .card-paper, so the wipe
   transforms them away with the rest of the paper. */
.slip-bar { position: absolute; top: 34px; left: 56px; width: 148px; height: 15px; border-radius: 3px; background: rgba(23, 36, 58, 0.82); }
.slip-fold { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: linear-gradient(225deg, #E8B45A 46%, rgba(74, 52, 18, 0.2) 46%, transparent 54%); }
.scrib {
  position: absolute;
  font-family: var(--font-hand); font-weight: 500; font-size: 1.45rem;
  color: rgba(23, 36, 58, 0.55);
  white-space: nowrap;
}
.scrib-a { top: 86px; left: 58px; transform: rotate(-2deg); }
.scrib-b { top: 138px; left: 56px; transform: rotate(-1deg); }
.slip-ring {
  position: absolute; right: 28px; bottom: 46px;
  width: 74px; height: 74px; border-radius: 50%;
  border: 9px solid rgba(232, 161, 93, 0.2);
  filter: blur(0.4px);
}
.slip-thumb {
  position: absolute; right: 48px; top: 200px;
  width: 48px; height: 60px;
  background: radial-gradient(ellipse at center, rgba(23, 36, 58, 0.3), rgba(23, 36, 58, 0.12) 55%, transparent 72%);
  border-radius: 50%;
  transform: rotate(18deg);
  opacity: 0;
  filter: blur(1px);
}
.slip-thumb.is-set { opacity: 0.28; }

/* ---------- Transformation ---------- */
.t13n { position: relative; background: var(--paper); }
.t13n-pin {
  position: relative;
  padding: 110px var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 44px;
}
.t13n-dusk { position: absolute; inset: 0; background: var(--dusk); opacity: 0; display: none; }
.t13n-head { position: relative; z-index: 2; text-align: center; }
.t13n-title { transition: color 0.45s ease; margin: 0 auto; }
.t13n.is-dusk .t13n-title { color: var(--sky-bright); }
.t13n-stage { position: relative; z-index: 2; }
.t13n-caption {
  position: relative; z-index: 2;
  font-size: 1.1875rem; color: var(--ink-soft);
  transition: color 0.45s ease;
}
.t13n.is-dusk .t13n-caption { color: var(--dusk-soft); }

.t13n-card { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.card-paper {
  position: relative; order: 1;
  width: 320px; height: 426px;
  background: transparent;
  border-radius: 3px;
  box-shadow: 0 18px 44px -14px rgba(74, 52, 18, 0.4), 0 2px 5px rgba(23, 36, 58, 0.08);
}
/* The FRONT paper surface is its own layer (not .card-paper's CSS background, which
   would paint at the very bottom of the stacking context - BELOW the negative-z
   back-sheets, so they'd cover its ruled lines). As a z-index:0 child it sits ABOVE
   the back-sheets but below the writing, so the sheets only show as edges peeking
   past it. Rides inside .card-paper so the wipe still transforms it into the board. */
.slip-face {
  position: absolute; inset: 0; z-index: 0; border-radius: 3px;
  background:
    repeating-linear-gradient(rgba(23, 36, 58, 0) 0 27px, rgba(23, 36, 58, 0.1) 27px 28px),
    linear-gradient(173deg, #F4EAD2, #EADBB8 92%);
  box-shadow: 0 3px 7px rgba(23, 36, 58, 0.16);
}
.slip-face::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 38px;
  width: 1px; background: rgba(190, 70, 60, 0.35);
}
/* Back-sheets = the SAME cream ruled paper as the front (exactly like the Paper Years
   pile, where every card is identical and only the SHADOW separates the layers). They
   sit at z-index:-1 BEHIND .slip-face, so only their edges peek out as a compact fan
   around the top job card. Tone is identical to .slip-face - do NOT darken them, or they
   read as a different material behind the paper. The tight contact shadow (from .pp-card)
   + the drop shadow are what make each sheet legible against the warm/dusk background.
   Faded out before the wipe. */
.slip-sheet {
  position: absolute; inset: 0; border-radius: 3px;
  background:
    repeating-linear-gradient(rgba(23, 36, 58, 0) 0 27px, rgba(23, 36, 58, 0.1) 27px 28px),
    linear-gradient(173deg, #F4EAD2, #EADBB8 92%);
  box-shadow: 0 16px 30px -16px rgba(74, 52, 18, 0.5), 0 2px 4px rgba(23, 36, 58, 0.12);
  z-index: -1;
}
.slip-sheet.s1 { transform: rotate(-4.5deg) translate(-26px, 16px); }
.slip-sheet.s2 { transform: rotate(3.6deg) translate(28px, 10px); }
.slip-sheet.s3 { transform: rotate(-2deg) translate(-14px, 28px); }
.slip-sheet.s4 { transform: rotate(2.4deg) translate(16px, 22px); }
body.vc-dark .slip-sheet { box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.4); }
.card-digital {
  position: relative; order: 2;
  width: 320px; height: 426px;
  background: rgba(19, 38, 61, 0.92);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 44px rgba(56, 189, 248, 0.16), 0 24px 60px rgba(2, 8, 23, 0.4);
}
.dheader {
  position: absolute; top: 24px; left: 24px; right: 24px;
  height: 13px; border-radius: 7px;
  background: linear-gradient(90deg, var(--sky-bright), var(--sky), var(--sky-deep));
  transform-origin: left center;
}
.drow { position: absolute; left: 24px; right: 24px; display: flex; align-items: center; gap: 12px; }
.drow-1 { top: 18%; }
.drow-2 { top: 33%; }
.drow-3 { top: 48%; }
.drow-4 { top: 63%; }
.drow-5 { top: 78%; }
.dbar {
  height: 12px; border-radius: 6px;
  background: linear-gradient(rgba(159, 180, 201, 0.26), rgba(159, 180, 201, 0.16));
  transform-origin: left center;
}
.dbar-40 { width: 34%; }
.dbar-45 { width: 45%; }
.dbar-55 { width: 55%; }
.dbar-72 { width: 72%; }
.dbar-80 { width: 80%; }
.dchip {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: #BAE6FD;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid var(--hairline-dusk);
  border-radius: 4px;
  padding: 3px 9px;
  white-space: nowrap;
}
.dswatch { width: 16px; height: 16px; border-radius: 4px; background: var(--sky-bright); flex: none; }
.dtick { width: 24px; height: 24px; color: var(--green-dusk); flex: none; margin-left: auto; }
.edge { position: absolute; background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.7) 35%, rgba(56, 189, 248, 0.7) 65%, rgba(56, 189, 248, 0)); }
.edge-top { top: 0; left: 8px; right: 8px; height: 1px; transform-origin: left center; }
.edge-bottom { bottom: 0; left: 8px; right: 8px; height: 1px; transform-origin: right center; }
.edge-right, .edge-left { width: 1px; top: 8px; bottom: 8px; background: linear-gradient(rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.7) 35%, rgba(56, 189, 248, 0.7) 65%, rgba(56, 189, 248, 0)); }
.edge-right { right: 0; transform-origin: center top; }
.edge-left { left: 0; transform-origin: center bottom; }

.t13n-scan, .paper-ghost, .t13n-board, .t13n-dust, .t13n-list { display: none; }

/* Motion-mode stage: cards stack, the wipe machinery becomes available */
.motion .t13n-pin { min-height: 100vh; justify-content: center; }
.motion .t13n-dusk { display: block; }
.motion .t13n-card {
  position: relative;
  display: block;
  --card-h: 480px;
  width: min(360px, 84vw); height: var(--card-h);
}
.motion .card-paper, .motion .card-digital {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.motion .card-digital { z-index: 1; }
.motion .card-paper {
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--wipe, 0) * 1%), #000 calc(var(--wipe, 0) * 1% + 1px));
  mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--wipe, 0) * 1%), #000 calc(var(--wipe, 0) * 1% + 1px));
  /* don't clip the mask to the border-box, or the back-sheet edges that fan out past
     the card get cut off (the gradient is horizontally uniform + vertically repeats, so
     the pile stays fully opaque/visible; the sheets fade away before the wipe reaches them) */
  -webkit-mask-clip: no-clip; mask-clip: no-clip;
}
.motion .t13n-scan {
  display: block; position: absolute; z-index: 3;
  left: -6px; right: -6px; height: 2px;
  /* driven by --wipe through a transform so the scrubbed wipe never
     touches layout (top would force layout every scrolled frame) */
  top: 0;
  transform: translateY(calc(var(--wipe, 0) / 100 * var(--card-h, 480px)));
  will-change: transform;
  background: var(--sky-bright);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.8), 0 0 6px rgba(56, 189, 248, 0.9);
  mix-blend-mode: screen;
  opacity: 0;
}
.motion .paper-ghost {
  display: block; position: absolute; inset: 0; z-index: 4;
  background: rgba(244, 234, 210, 0.2);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
}
.motion .t13n-board {
  display: block; position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: min(880px, 94vw); height: 620px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.board-frame { width: 100%; height: 100%; }
.bf { stroke: rgba(125, 211, 252, 0.35); stroke-width: 1.5; }
.ghost {
  position: absolute;
  width: 220px; height: 250px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 12px;
  opacity: 0;
}
.ghost-1 { left: 40px; top: 64px; }
.ghost-2 { left: 40px; top: 338px; }
.ghost-3 { right: 40px; top: 64px; }
.ghost-4 { right: 40px; top: 338px; }
.ghost-5 { left: 330px; top: -22px; height: 110px; }
.ghost-6 { left: 330px; bottom: -22px; height: 110px; }
/* ghost-5/6 sit at left:330 and bleed past a phone's right edge, widening the page
   (which pushed the fixed nav controls + buttons off-screen). Hide them on mobile. */
@media (max-width: 900px) { .ghost-5, .ghost-6 { display: none; } }
/* Reception list: the card flattens into row 1, then the rest fill in */
.motion .t13n-list {
  display: flex; flex-direction: column; gap: 12px;
  position: absolute; z-index: 4;
  left: 50%; top: 50%;
  width: min(660px, 92vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0; /* motion-prep: JS reveals it in the morph beat */
}
.lrow {
  display: flex; align-items: center; gap: 14px;
  background: rgba(19, 38, 61, 0.92);
  border: 1px solid var(--hairline-dusk);
  border-radius: 10px;
  padding: 13px 18px;
  box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.16), 0 14px 30px rgba(2, 8, 23, 0.28);
}
.lrow .dchip { flex: none; }
.lbar {
  flex: 1; height: 11px; border-radius: 6px;
  background: linear-gradient(rgba(159, 180, 201, 0.26), rgba(159, 180, 201, 0.16));
}
.ldot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ldot-green { background: var(--green-dusk); box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
.ldot-sky { background: var(--sky-bright); box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); }
.ldot-amber { background: var(--brass-bright); box-shadow: 0 0 8px rgba(232, 180, 90, 0.6); }
.motion .t13n-dust {
  display: block; position: absolute; z-index: 5;
  left: -40px; top: -40px;
  width: calc(100% + 80px); height: calc(100% + 80px);
  pointer-events: none;
}


/* ---------- Why ---------- */
.why { background: var(--paper); padding: 120px 0 144px; }
.why-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* Why VahanCore reads as a 3-up grid of reasons (the trust/credibility cards
   first, then the product reasons), in the same hex-badge card idiom used
   elsewhere on the page. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px);
}
.why-card { display: flex; flex-direction: column; }
.hex-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 58px; flex: none;
  background: var(--sky-wash);
  color: var(--sky-deep);
  clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  margin-bottom: 16px;
}
.hex-badge svg { width: 27px; height: 27px; }
.why-card h3 { font-size: 1.1875rem; margin: 0 0 8px; }
.why-card p { color: var(--ink-soft); font-size: 1rem; max-width: 42ch; }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); padding: 64px 0 144px; }
.faq-inner { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); }
.faq-list { border-top: 1px solid var(--hairline-light); }
.faq-item {
  border-bottom: 1px solid var(--hairline-light);
  transition: background-color 0.3s ease, padding 0.3s ease;
}
/* Open state reads as a quiet tinted panel; no left-stripe accent. */
.faq-item.open { background: var(--sky-wash); border-radius: 10px; border-bottom-color: transparent; padding-left: 16px; padding-right: 16px; }
.faq-q { font-size: 1.0625rem; }
.faq-q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  text-align: left; font-weight: 600; color: var(--ink);
  padding: 22px 2px;
}
.faq-nut { width: 19px; height: 19px; flex: none; color: var(--ink-soft); transition: transform 0.35s ease, color 0.35s ease; }
.faq-item.open .faq-nut { transform: rotate(30deg); color: var(--sky-deep); }
.faq-a { overflow: hidden; }
.faq-a-inner { padding: 0 2px 24px; }
.faq-a-inner p { color: var(--ink-soft); max-width: 60ch; }

/* ---------- Final CTA ---------- */
.cta { position: relative; background: var(--dusk); overflow: clip; padding: 170px var(--gutter); text-align: center; }
.cta-hexes {
  position: absolute; inset: 0;
  background-image: var(--hexes);
  background-size: 56px 97px;
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
  mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
}
.cta-glow {
  position: absolute; left: 50%; top: 50%;
  width: 720px; height: 720px;
  margin: -360px 0 0 -360px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 62%);
  border-radius: 50%;
}
.cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta-title { color: var(--dusk-text); font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 16ch; } /* fixed near-white; --paper flips dark in dark mode */
.cta-title .w { display: inline-block; }
.cta-own { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--sky-bright); }
.cta-sub { color: var(--dusk-soft); font-size: 1.1875rem; }
.cta-btn { margin-top: 10px; }

/* ---------- Demo ---------- */
.demo { background: var(--paper); padding: 96px 0; }
.demo-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: start;
}
.demo-lede { color: var(--ink-soft); font-size: 1.125rem; margin: 20px 0 30px; }
.next-steps { list-style: none; padding: 0; counter-reset: step; margin-bottom: 36px; }
.next-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 18px 52px;
  color: var(--ink-soft);
  max-width: 52ch;
}
.next-steps li strong { color: var(--ink); font-weight: 600; }
.next-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.875rem;
  color: var(--brass);
  border: 1px solid rgba(161, 98, 7, 0.45);
  border-radius: 6px;
  padding: 3px 7px;
}
.demo-contact { border-top: 1px solid var(--hairline-light); padding-top: 24px; color: var(--ink-soft); }
.demo-contact p { margin-bottom: 4px; }
.demo-form {
  background: var(--card);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-warm);
  padding: 38px 34px;
  display: flex; flex-direction: column; gap: 20px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* CSS-native reveal: the card lifts while any field inside has focus */
.demo-form:focus-within { border-color: rgba(3, 105, 161, 0.45); box-shadow: 0 0 0 3px var(--sky-wash), var(--shadow-warm); }
.demo-form label { display: block; font-weight: 500; font-size: 0.9375rem; color: var(--ink); }
.field-optional { font-weight: 400; color: var(--ink-soft); }
.demo-form .req { color: var(--brass); font-weight: 600; margin-left: 1px; }
.demo-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 400px) { .demo-form .form-row { grid-template-columns: 1fr; } }
.demo-form input, .demo-form textarea {
  display: block; width: 100%; margin-top: 8px;
  font: inherit; color: var(--ink);
  background: #fff;
  border: 1px solid #64748B;
  border-radius: var(--radius-btn);
  padding: 12px 14px;
}
.demo-form textarea { resize: vertical; min-height: 84px; line-height: 1.4; }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: #64748B; }
.demo-form input:focus-visible, .demo-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.demo-form .btn { margin-top: 6px; }
.form-note { font-size: 0.875rem; color: var(--ink-soft); }

/* Honeypot: off-screen (not display:none, so some bots still fill it). */
.hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* Per-field validation, reusing the existing warning hue (no red invented). */
.field-error { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--brass); min-height: 1em; }
.demo-form input[aria-invalid="true"] { border-color: var(--brass); }

/* aria-live status region. */
.form-status { font-size: 0.875rem; color: var(--ink-soft); min-height: 1.2em; margin-top: 4px; }
.form-status.is-error { color: var(--brass); }

/* Sending spinner on the submit button. */
.demo-form .btn.is-sending { opacity: 0.9; }
.demo-form .btn.is-sending .btn-label::after {
  content: ''; display: inline-block;
  width: 0.8em; height: 0.8em; margin-left: 8px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: btnspin 0.7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Thank-you panel after a successful send. */
.demo-thanks h3 { color: var(--ink); margin-bottom: 8px; }
.demo-thanks h3::before {
  content: ''; display: inline-block;
  width: 0.7em; height: 0.7em; margin-right: 8px;
  border-radius: 50%; background: var(--green); vertical-align: 0;
}
.demo-thanks p { color: var(--ink-soft); }
.demo-thanks h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Reduced-motion: static ring, instant confirmation (layer-1 media gate, not .motion). */
@media (prefers-reduced-motion: reduce) {
  .demo-form .btn.is-sending .btn-label::after { animation: none; }
}

/* ---------- Footer ---------- */
.footer { background: var(--dusk); color: var(--dusk-soft); border-top: 1px solid var(--hairline-dusk); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 84px var(--gutter) 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr;
  gap: 48px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; color: var(--dusk-text); font-weight: 600; font-size: 1.125rem; margin-bottom: 18px; }
.footer-logo:hover { text-decoration: none; }
.footer-brand p { font-size: 0.9375rem; max-width: 30ch; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sky-bright);
  margin-bottom: 6px;
}
.footer-col a, .footer-col span { color: var(--dusk-soft); font-size: 0.9375rem; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-col a:hover { color: var(--dusk-text); }
.footer-legal {
  margin-top: 64px; padding: 26px 0;
  border-top: 1px solid var(--hairline-dusk);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.875rem;
}

/* ============================================================
   Motion preparation. The .motion class is added by site.js only
   when GSAP is available AND prefers-reduced-motion is not set,
   so nothing here can hide content from a no-JS or reduced-motion
   visitor. Hero elements are pre-hidden in CSS (above the fold,
   avoids entrance flash); everything below the fold is prepared
   with gsap.set from site.js.
   ============================================================ */
.motion .hero-title .line-inner { transform: translateY(112%); }
.motion .hero-sub,
.motion .hero-cta,
.motion .hero-phone { opacity: 0; transform: translateY(16px); }
.motion .hero-nepali { opacity: 0; }
.motion .hero-underline { transform: scaleX(0); }

.motion .t13n-pin { padding: 90px var(--gutter) 44px; gap: 82px; } /* lift the title clear of the board frame's top edge */
@media (max-height: 820px) {
  .motion .t13n-card { --card-h: 420px; }
  .motion .t13n-pin { gap: 30px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .demo-inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}

@media (max-width: 768px) {
  /* Bar shows the brand + a hamburger; the links and the booking CTA
     drop into a disclosure panel below (the bar's own CTA steps aside
     so the brand name never collides with it on a narrow screen). */
  .nav-inner { gap: 10px; }
  .nav-brand { flex: none; }
  .nav-actions { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 6px; width: 44px; height: 44px; flex: none; margin-left: auto;
  }
  .nav.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav-links {
    display: flex; flex-direction: column; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 6px var(--gutter) 12px;
    background: rgba(250, 246, 239, 0.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -18px rgba(74, 52, 18, 0.35), 0 1px 0 var(--hairline-light);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    pointer-events: none;
  }
  .nav.menu-open .nav-links { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .nav-links a:not(.nav-menu-cta) {
    padding: 15px 2px; font-size: 1.0625rem; color: var(--ink);
    background-image: none;
    border-bottom: 1px solid var(--hairline-light);
  }
  .nav-menu-cta { display: flex; width: 100%; margin-top: 12px; padding: 14px; font-size: 1rem; }
  .nav.theme-dusk .nav-links { background: rgba(12, 26, 44, 0.95); box-shadow: 0 18px 40px -18px rgba(2, 8, 23, 0.6), 0 1px 0 var(--hairline-dusk); }
  .nav.theme-dusk .nav-links a:not(.nav-menu-cta), body.vc-dark .nav-links a:not(.nav-menu-cta) { color: var(--dusk-text); border-color: var(--hairline-dusk); }
  /* No-JS fallback: there is no handler to open the drawer, so hide the
     inert toggle and the empty in-menu CTA, and keep the booking CTA in
     the bar. Links live in the footer nav for a no-JS visitor. The .js
     class is set synchronously in <head>, so this never flashes for JS users. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-menu-cta { display: none; }
  html:not(.js) .nav-actions { display: flex; }
  html:not(.js) .nav-links { display: none; }
  html:not(.js) .nav-links + .nav-actions { margin-left: auto; }
  /* Mobile bar: compact language + dark-mode toggles sit just before the hamburger
     (brand shrinks to make room); the drawer's duplicate toggles are dropped, and
     for JS users the bar's demo CTA stays in the drawer instead. */
  .nav-links + .nav-actions { display: flex; margin-left: auto; gap: 6px; align-items: center; }
  html.js .nav-actions .btn { display: none; }
  .nav-toggle { margin-left: 4px; }
  .nav-mark { width: 30px; height: 30px; }
  .nav-word { font-size: 1.0625rem; }
  .nav-actions .lang-pick { padding: 1px; }
  .nav-actions .lang-opt { padding: 5px 7px; font-size: 0.72rem; }
  .nav-actions .vc-darkbtn { display: none; }  /* dark toggle lives in the hamburger drawer on mobile */
  .hero-fade { background: linear-gradient(rgba(250, 246, 239, 0.97) 42%, rgba(250, 246, 239, 0.82) 62%, rgba(250, 246, 239, 0.35)); }
  .hero-inner { padding-bottom: 110px; }
  .hero-sub { font-size: 1.0938rem; max-width: 38ch; margin-bottom: 24px; line-height: 1.5; }
  .hero-nepali { font-size: 1.0625rem; line-height: 1.5; }
  .hero-underline { width: 140px; margin: 6px 0 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 8px; }
  .hero-cta .btn { width: 100%; min-height: 48px; white-space: normal; text-align: center; }
  .vc-only-d { display: none; }
  .vc-only-m { display: inline; }
  .why, .demo { padding: 88px 0; }
  .faq { padding: 40px 0 88px; }
  .cta { padding: 120px var(--gutter); }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-inner { padding-top: 64px; }
  /* "What you get": collapse each group into a tap-to-open card, like the FAQ. */
  #what .section-head { margin-bottom: 32px; }
  #what .wyg { padding-block: 0; border-bottom: 0; }
  #what .wyg + .wyg { border-top: 1px solid var(--hairline-light); }
  #what .wyg-grid { gap: 0; }
  #what .wyg-head { position: relative; top: auto; cursor: pointer; padding: 18px 38px 18px 0; -webkit-tap-highlight-color: transparent; }
  #what .wyg-head h3 { margin: .25rem 0 0; }
  #what .wyg-head .vc-lede-sm { margin: 6px 0 0; }
  #what .wyg-head:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 3px; border-radius: 6px; }
  #what .wyg-arrow { display: block; position: absolute; top: 20px; right: 2px; width: 20px; height: 20px; color: var(--ink-soft); transition: transform .25s ease; }
  #what .wyg.is-open .wyg-arrow { transform: rotate(180deg); color: var(--sky-deep); }
  #what .wyg-list { display: none; padding: 2px 0 18px; }
  #what .wyg.is-open .wyg-list { display: block; }
}

@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-cta .btn { width: 100%; }
  /* Smaller display floor so "The whole day runs" holds one line
     instead of dropping "runs" to an orphan line, down to a 320px phone. */
  .hero-title { font-size: clamp(1.75rem, 8.5vw, 2.55rem); }
  /* Narrowest phones: drop the Customer column so the remaining 4 read clearly. */
  #calm .qb table th:nth-child(4), #calm .qb table td:nth-child(4),
  #aud-panel-workshop .qb table th:nth-child(4), #aud-panel-workshop .qb table td:nth-child(4) { display: none; }
}

/* Reduced motion: stop the only pure-CSS animation, and let the mobile
   nav drawer appear instantly instead of sliding/fading. */
@media (prefers-reduced-motion: reduce) {
  .hero-cue-dot { animation: none; }
  .nav-links { transition: none; }
}

/* =========================================================================
   Site additions: device mockups, audience tabs, the paper-years scene,
   sticky-scroll What you get, banner, maker band, hero device cluster,
   scroll-to-top, dark mode. New class names only (vc-*), no clashes.
   ========================================================================= */
  /* =========================================================================
     Site additions on top of the v5 system: device mockups, audience tabs,
     the paper-years scene, sticky-scroll What you get, banner, maker band,
     hero device cluster, scroll-to-top, dark mode. New class names only.
     ========================================================================= */
  :root{
    /* aliases so the ported v2 component CSS reads the real tokens */
    --on-dusk:var(--dusk-text); --on-dusk-2:var(--dusk-soft);
    --line:var(--hairline-light); --line-2:rgba(23,36,58,.05); --dusk-line:var(--hairline-dusk);
    --paper-2:#F4EDE1; --ink-2:var(--ink-soft); --ink-3:#55637C;
    --r:16px; --r-sm:9px; --r-lg:22px; --r-pill:999px;
    --sh-1:var(--shadow-warm); --sh-2:0 10px 30px -12px rgba(74,52,18,.25);
    /* status-pill text, deepened so each label clears WCAG AA (4.5:1) on its tint */
    --st-ongoing:#8A4D04; --st-washing:var(--sky-deep); --st-pay:#166534; --st-queued:#475569;
    --st-ongoing-wash:#fdf3e3; --st-pay-wash:#e7f7ed; --st-queued-wash:#eef1f5;
    --dusk-deep:#0a1b30;
  }
  /* dark mode: flip the tokens the whole sheet is built on */
  body.vc-dark{
    --paper:#0C1A2C; --paper-2:#0a1726; --card:#13263D; --manila:#15273c;
    --ink:#EAF2F9; --ink-soft:#9FB4C9; --ink-2:#9FB4C9; --ink-3:#7e93a8;
    --hairline-light:rgba(125,211,252,.14); --line:rgba(125,211,252,.14); --line-2:rgba(125,211,252,.08);
    --sky-wash:rgba(56,189,248,.12); --shadow-warm:0 18px 50px -20px rgba(0,0,0,.55); --sh-1:var(--shadow-warm);
  }
  body.vc-dark .vc-alt{background:var(--paper-2)}
  body.vc-dark .demo-form input, body.vc-dark .demo-form textarea{background:#0a1726;border-color:#4a6a8c;color:var(--ink)}
  body.vc-dark .why-card:hover{background:transparent}
  /* v15: dark-mode top nav (the real .nav.scrolled bg is hardcoded light; override it) */
  body.vc-dark .nav.scrolled{background:rgba(12,26,44,.82);box-shadow:0 1px 0 var(--hairline-dusk)}
  body.vc-dark .nav-word{color:var(--dusk-text)}
  body.vc-dark .nav-links a:not(.nav-menu-cta){color:var(--dusk-soft);background-image:linear-gradient(var(--sky-bright),var(--sky-bright))}
  body.vc-dark .nav-links a:not(.nav-menu-cta):hover{color:var(--dusk-text)}
  body.vc-dark .grain{opacity:.09}
  /* Dark hero: the light-mode cream fade + bright sky glow read as generic
     "gradient-on-dark" and wash out the light title. Repaint the fade in dusk
     navy (keeps the text legible, matches the dusk passages) and drop the glow
     to a faint ambient so it is depth, not a neon sphere. */
  body.vc-dark .hero-glow{background:radial-gradient(72% 60% at 62% 70%, rgba(56,189,248,0.10), transparent 72%)}
  body.vc-dark .hero-fade{background:linear-gradient(90deg, rgba(12,26,44,0.94) 16%, rgba(12,26,44,0) 62%)}
  body.vc-dark .nav-toggle-bar{background:var(--dusk-text)}
  body.vc-dark .vc-darkbtn{border-color:var(--hairline-dusk);color:var(--dusk-text)}
  body.vc-dark .nav.menu-open .nav-links{background:rgba(12,26,44,.96)}
  /* Dark hero: the scroll cue (mouse outline + dot) uses ink-on-paper colors that
     vanish on the dusk hero. Repaint them in sky so the cue reads. */
  body.vc-dark .hero-cue{border-color:rgba(125,211,252,.45)}
  body.vc-dark .hero-cue-dot{background:var(--sky-bright)}
  /* The Switch is the "screen lighting up in a dark room" beat. In dark mode the
     whole page is already navy, so the scene, its card and its board frame all sit
     on the same flat tone and stop reading. Sink the scene backdrop below the page
     navy and lift the frame stroke, so the cream paper card, the digital card and
     the board separate again, the way they do against paper in light mode. */
  body.vc-dark .t13n{background:#070f1b}
  body.vc-dark .t13n-dusk{background:#070f1b}
  body.vc-dark .bf{stroke:rgba(125,211,252,.5)}
  /* v15: The Calm reveal (lightweight, mobile-safe, reduced-motion aware) */
  .calm-reveal{opacity:0;transform:translateY(28px)}
  .calm-reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .calm-reveal .qb tbody tr{opacity:0;transform:translateY(14px)}
  .calm-reveal.in .qb tbody tr{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
  .calm-reveal.in .qb tbody tr:nth-child(1){transition-delay:.18s}
  .calm-reveal.in .qb tbody tr:nth-child(2){transition-delay:.30s}
  .calm-reveal.in .qb tbody tr:nth-child(3){transition-delay:.42s}
  .calm-reveal.in .qb tbody tr:nth-child(4){transition-delay:.54s}
  .calm-reveal.in .qb tbody tr:nth-child(5){transition-delay:.66s}
  .calm-reveal .pill.ongoing{animation:calmpulse 2.2s ease-in-out infinite}
  @keyframes calmpulse{0%,100%{box-shadow:0 0 0 0 rgba(194,116,11,0);background:#fdf3e3}50%{box-shadow:0 0 0 5px rgba(194,116,11,.16);background:#fbe8c8}}
  @media(prefers-reduced-motion:reduce){.calm-reveal,.calm-reveal .qb tbody tr{opacity:1;transform:none}.calm-reveal .pill.ongoing{animation:none}}

  /* layout helpers (local, no clash) */
  .vc-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
  .vc-sect{padding:clamp(72px,9vw,128px) 0}
  .vc-alt{background:var(--paper-2)}
  .vc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
  .vc-lede{font-size:1.1875rem;color:var(--ink-soft);max-width:46ch;line-height:1.6}
  .vc-lede-sm{font-size:1rem}
  .vc-eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
  .vc-chapter{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);display:inline-flex;gap:.55em;align-items:center;margin-bottom:14px}
  .vc-chapter b{font-family:var(--font-display);font-style:italic;letter-spacing:0;text-transform:none;font-size:1.5em}
  .vc-quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;max-width:22ch;color:var(--ink)}

  /* device mockups (ported from the kit, token-aliased) */
  .device{position:relative;z-index:2}
  .demo-note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;text-align:center}
  .live-pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#0369A1;background:#E6F4FD;border-radius:var(--r-pill);padding:.3em .7em}
  .live-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 rgba(14,165,233,.5);animation:vcpulse 2s infinite}
  @keyframes vcpulse{70%{box-shadow:0 0 0 7px rgba(14,165,233,0)}100%{box-shadow:0 0 0 0 rgba(14,165,233,0)}}
  @media(prefers-reduced-motion:reduce){.live-pill::before{animation:none}}
  .device-phone{width:236px;margin-inline:auto;border-radius:34px;background:#0c1a2c;padding:9px;border:1px solid rgba(255,255,255,.08)}
  .device-phone .screen{background:#fff;border-radius:27px;overflow:hidden;aspect-ratio:1/1.96;display:flex;flex-direction:column;justify-content:center}
  .track{padding:14px 16px;text-align:center;font-size:12.5px}
  .track .pin{width:30px;height:30px;margin:0 auto 6px;display:grid;place-items:center;border-radius:10px;background:#E6F4FD;color:#0369A1}
  .track .pin svg{width:16px;height:16px}
  .track .track-title{font-family:var(--font-display);font-size:1.04rem;margin:.05rem 0;color:#17243A;line-height:1.08}
  .track .shop{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.05em;color:#55637C;text-transform:uppercase;margin-bottom:9px}
  .track .plate{font-family:var(--font-mono);font-weight:600;letter-spacing:.04em;background:#FAF6EF;border:1px solid rgba(23,36,58,.12);border-radius:8px;padding:.42em;margin:.12rem 0;color:#17243A;font-size:.92em;font-variant-numeric:tabular-nums}
  .track .veh{color:#55637C;font-size:.72rem;margin-bottom:9px}
  .track .steps{list-style:none;margin:0;padding:0;text-align:left;font-size:.76rem}
  .track .steps li{display:flex;align-items:center;gap:.5rem;padding:.26rem 0;color:#55637C}
  .track .steps .dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(23,36,58,.12);flex:none;display:grid;place-items:center;font-size:9px}
  .track .steps li.done{color:#41506A}.track .steps li.done .dot{background:var(--green);border-color:var(--green);color:#fff}
  .track .steps li.now{color:#17243A;font-weight:600}.track .steps li.now .dot{border-color:var(--sky);background:var(--sky);color:#fff;box-shadow:0 0 0 3px var(--sky-wash)}
  .track .eta{margin-top:8px;background:#E6F4FD;color:#0369A1;border-radius:8px;padding:.42em;font-weight:600;font-size:.74rem}
  .track .noapp{margin-top:6px;font-size:.62rem;color:#55637C}
  .device-laptop{max-width:540px;margin-inline:auto}
  .device-laptop .lid{background:#0c1a2c;border-radius:13px 13px 0 0;padding:8px;border:1px solid rgba(255,255,255,.08)}
  .device-laptop .screen{background:var(--dusk);border-radius:7px;overflow:hidden}
  .device-laptop .base{height:12px;background:linear-gradient(#cfd6df,#aeb7c4);border-radius:0 0 11px 11px;margin-inline:-20px;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
  .dash{padding:13px;color:var(--dusk-text);font-size:11px}
  .dash .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
  .dash .top b{font-family:var(--font-display);font-weight:580;font-size:.95rem;color:#fff}
  .dash .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:9px}
  .kpi{background:rgba(255,255,255,.05);border:1px solid var(--hairline-dusk);border-radius:8px;padding:7px}
  .kpi .lab{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--dusk-soft)}
  .kpi .num{font-family:var(--font-display);font-size:1.3rem;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
  .kpi .delta{font-size:8px;color:#4ade80;font-variant-numeric:tabular-nums}
  .pipeline{background:#06101c;border:1px solid var(--hairline-dusk);border-radius:8px;padding:8px 9px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
  .pipeline .lt{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dusk-soft)}
  .pipeline .st{font-size:9px;color:var(--dusk-soft)}.pipeline .st b{display:block;font-size:.95rem;color:#fff;font-family:var(--font-display);font-variant-numeric:tabular-nums}
  .dash .chart{display:flex;gap:5px;align-items:flex-end;height:42px;background:rgba(255,255,255,.04);border-radius:8px;padding:7px}
  .dash .chart span{flex:1;background:linear-gradient(var(--sky-bright),var(--sky-deep));border-radius:3px 3px 0 0;opacity:.85}
  .device-tv{max-width:600px;margin-inline:auto}
  .device-tv .panel{background:#fff;border:9px solid #0c1a2c;border-radius:13px;overflow:hidden;box-shadow:var(--sh-2)}
  .device-tv .neck{width:13px;height:13px;background:#0c1a2c;margin:0 auto}
  .device-tv .stand{width:84px;height:11px;background:#0c1a2c;border-radius:0 0 8px 8px;margin:0 auto}
  .qb{font-size:11px}
  .qb .qb-title{font-family:var(--font-display);font-weight:580;font-size:1rem;margin:0;padding:11px 13px 7px;color:#17243A}
  .qb table{width:100%;border-collapse:collapse}
  .qb th{font-size:8px;letter-spacing:.05em;text-transform:uppercase;color:#55637C;text-align:left;padding:5px 9px;border-bottom:1px solid rgba(23,36,58,.12)}
  .qb td{padding:7px 9px;border-bottom:1px solid rgba(23,36,58,.05);color:#41506A;font-size:10px;font-variant-numeric:tabular-nums}
  .qb .plate{font-family:var(--font-mono);font-weight:600;color:#17243A}
  .qb tr.exp td:first-child{box-shadow:inset 3px 0 0 #B91C1C}
  .qb .x{font-family:var(--font-mono);font-size:7px;color:#B91C1C;background:#fdecec;border-radius:4px;padding:1px 5px;letter-spacing:.05em}
  .pill{font-family:var(--font-mono);font-size:8px;letter-spacing:.04em;border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
  .pill.ongoing{color:var(--st-ongoing);background:var(--st-ongoing-wash)}
  .pill.washing{color:var(--st-washing);background:var(--sky-wash)}
  .pill.pay{color:var(--st-pay);background:var(--st-pay-wash)}
  .pill.queued{color:var(--st-queued);background:var(--st-queued-wash)}

  /* mouse-parallax hero device cluster (sits over the toned 3D backdrop) */
  .hero.vc-hero.webgl-on .hero-canvas{opacity:.5}
  .hero.vc-hero .hero-inner{max-width:var(--maxw);display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(24px,4vw,56px);align-items:center}
  .vc-stage{position:relative;min-height:clamp(340px,40vw,470px);perspective:1100px}
  .vc-pl{position:absolute;transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .vc-pl.tv{top:-2%;left:-3%;z-index:1}
  .vc-pl.tv .device-tv{width:330px}
  .vc-pl.lap{top:17%;left:13%;z-index:2}
  .vc-pl.lap .device-laptop{max-width:none;width:420px}
  .vc-pl.ph{bottom:-4%;right:-1%;z-index:3}
  .vc-pl.ph .device-phone{width:212px;cursor:pointer}
  .vc-pl.lap,.vc-pl.tv{cursor:pointer}
  .vc-pl:focus-visible{outline:2.5px solid var(--sky);outline-offset:6px;border-radius:10px}
  /* tactile feedback on the clickable device tiles (filter, so it never fights the parallax transform) */
  .vc-pl .device{transition:filter .2s ease}
  @media (hover:hover) and (pointer:fine){.vc-pl:hover .device{filter:brightness(1.03)}}
  .vc-pl:active .device{filter:brightness(.96)}
  .vc-cap{text-align:center;margin-top:1rem}
  /* keep the hero on one screen (devices respond to the mouse, not the scroll) */
  .motion .hero.vc-hero{min-height:auto}
  .motion .hero.vc-hero .hero-stage{position:relative;height:auto;min-height:100svh}

  /* audience tabs */
  .aud-tabs{display:inline-flex;gap:.3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem;box-shadow:var(--sh-1);margin:1.4rem 0 2.4rem}
  .aud-tab{border:0;background:transparent;border-radius:var(--r-pill);padding:.6em 1.3em;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink-soft);font-size:.95rem;transition:.18s}
  .aud-tab[aria-selected="true"]{background:var(--sky);color:#04222f;box-shadow:0 4px 12px rgba(14,165,233,.3)}
  .aud-panel{display:none;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
  .aud-panel[data-active]{display:grid;animation:vcfade .35s ease}
  /* phone + its caption share one centre axis, so the caption sits centred under the phone */
  .device-col{display:flex;flex-direction:column;align-items:center}
  @keyframes vcfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.aud-panel[data-active]{animation:none}}
  .aud-copy h3{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:580;margin:.3rem 0}
  .aud-copy ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.55rem}
  .aud-copy li{display:flex;gap:.55rem;color:var(--ink-soft)}
  .aud-copy li::before{content:"";flex:none;width:19px;height:19px;border-radius:6px;margin-top:2px;background:var(--sky-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-11'/%3E%3C/svg%3E") center/11px no-repeat}

  /* What you get: sticky-header outcome groups */
  .wyg{padding-block:clamp(38px,5.5vw,68px);border-bottom:1px solid var(--line-2)}
  .wyg:last-of-type{border-bottom:0}
  .wyg-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,56px);align-items:start}
  .wyg-head{position:sticky;top:96px}
  .wyg-num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;color:var(--brass);font-weight:600;font-variant-numeric:tabular-nums}
  .wyg-head h3{margin:.3rem 0 .5rem;font-family:var(--font-display);font-weight:580;font-size:clamp(1.4rem,2.4vw,1.9rem)}
  .wyg-list{columns:2;column-gap:clamp(24px,3vw,40px);list-style:none;padding:0;margin:0}
  .wyg-list li{break-inside:avoid;margin-bottom:1.2rem}
  .wyg-list b{display:block;font-family:var(--font-display);font-weight:580;font-size:1.04rem;color:var(--ink);margin-bottom:.12rem}
  .wyg-list span{color:var(--ink-soft);font-size:.96rem}

  /* Seen enough? banner + maker band + WhatsApp button */
  .seen-band{background:linear-gradient(150deg,var(--dusk),var(--dusk-deep));color:#fff;text-align:center;position:relative;overflow:hidden;padding:clamp(48px,7vw,84px) 0}
  .seen-band .glow{position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 0,rgba(56,189,248,.2),transparent)}
  .seen-band h2{color:#fff;margin:0 auto}
  .seen-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;position:relative}
  .maker-band{background:var(--manila);border-radius:var(--r-lg);padding:clamp(24px,3vw,44px)}
  body.vc-dark .maker-band{background:#0a1726;border:1px solid var(--hairline-dusk)}
  body.vc-dark .guarantee{border-color:var(--hairline-dusk)}
  .guarantee-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
  .guarantee{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-1)}
  .guarantee b{display:block;font-family:var(--font-display);font-weight:580;font-size:1.05rem;color:var(--ink);margin-bottom:.2rem}
  .guarantee span{color:var(--ink-soft);font-size:.94rem}
  .btn-wa{background:#25D366;color:#053b21;border:0}
  @media (hover:hover){.btn-wa:hover{background:#2ee676;transform:translateY(-2px)}}

  /* dark-mode toggle button in the nav */
  .vc-darkbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(23,36,58,.18);color:var(--ink);background:transparent;flex:none}
  .nav.theme-dusk .vc-darkbtn,body.vc-dark .vc-darkbtn{border-color:var(--hairline-dusk);color:var(--dusk-text)}
  .vc-darkbtn svg{width:19px;height:19px}
  /* show the moon in light mode (tap to go dark), the sun in dark mode (tap to go light) */
  .vc-darkbtn .icon-sun{display:none}
  body.vc-dark .vc-darkbtn .icon-moon{display:none}
  body.vc-dark .vc-darkbtn .icon-sun{display:block}

  /* floating WhatsApp + mobile bar */
  .wa-fab{position:fixed;right:18px;bottom:18px;z-index:130;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:var(--sh-2);transition:transform .2s ease,box-shadow .2s ease}
  @media (hover:hover){.wa-fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(2,8,23,.35)}}
  .wa-fab:active{transform:translateY(0)}
  .wa-fab svg{width:28px;height:28px;fill:#fff}

  /* ---- v15: ambient hero (bolts are background, devices stay the focus) ---- */
  .hero.vc-hero.webgl-on .hero-canvas{opacity:.62}

  /* ---- v15: The Paper Years, a tall pinned canvas scene (papers -> stack) ---- */
  /* v16: The Paper Years rebuilt in DOM (real paper, light, continuous into The Switch) */
  .pp{position:relative;background:var(--paper-2)}
  /* the tall scroll length the scatter-to-stack scene needs; no-JS/reduced-motion keeps content height.
     v17: dock into one stack, then one more scroll fans the surrounding stacks in. */
  .motion .pp{height:300vh}
  .pp-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  .pp-stage{position:absolute;inset:0;z-index:0}
  .pp-fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper-2) 24%,rgba(244,237,225,0) 62%)}
  body.vc-dark .pp-fade{background:linear-gradient(90deg,var(--paper-2) 24%,rgba(10,23,38,0) 62%)}
  .pp-copy{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
  .pp-copy .inner{max-width:30rem}
  /* scroll hint only makes sense with the motion scene; hidden (and higher-contrast) otherwise */
  .pp-hint{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:none}
  .motion .pp-hint{display:block}
  /* a real paper job card, same ruled paper + brass fold as The Switch */
  .pp-card{position:absolute;left:50%;top:50%;width:132px;height:174px;border-radius:3px;
    background:repeating-linear-gradient(rgba(23,36,58,0) 0 17px,rgba(23,36,58,.08) 17px 18px),linear-gradient(173deg,#F4EAD2,#EADBB8 92%);
    box-shadow:0 16px 32px -16px rgba(74,52,18,.45),0 2px 4px rgba(23,36,58,.07);will-change:transform}
  .pp-card::before{content:"";position:absolute;top:0;bottom:0;left:15px;width:1px;background:rgba(190,70,60,.32)}
  .pp-card .ph{position:absolute;top:13px;left:24px;right:13px;height:8px;border-radius:2px;background:rgba(23,36,58,.82)}
  .pp-card .pl{position:absolute;top:30px;left:24px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.03em;color:rgba(23,36,58,.66);font-variant-numeric:tabular-nums}
  /* v17: handwritten service notes under the plate (Caveat), like a real job card */
  .pp-card .pl-note{position:absolute;left:24px;font-family:var(--font-hand);font-weight:500;line-height:1;color:rgba(23,36,58,.52);white-space:nowrap}
  .pp-card .pl-note.n1{top:51px;font-size:12px;transform:rotate(-2.5deg)}
  .pp-card .pl-note.n2{top:71px;left:27px;font-size:11px;transform:rotate(-1.2deg)}
  .pp-card .fold{position:absolute;top:0;right:0;width:16px;height:16px;background:linear-gradient(225deg,#E8B45A 47%,rgba(74,52,18,.18) 47%,transparent 53%)}
  body.vc-dark .pp-card{box-shadow:0 16px 32px -16px rgba(0,0,0,.5)}
  /* v17: story 3 (The paperless days) gets the same freeze as #1/#2 - the section
     holds while the live-board rows fill in on scroll, then releases. Sticky pin like
     the Paper Years scene; only under .motion, so reduced-motion/no-JS stay normal. */
  .motion #calm{height:180vh}
  .motion #calm>.vc-wrap{position:sticky;top:0;min-height:100svh;align-content:center}
  /* v16: scroll-to-top button. v17: bottom-left on every width, so it never stacks on the chat FAB (bottom-right). */
  .to-top{position:fixed;left:22px;right:auto;bottom:24px;z-index:130;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s;cursor:pointer}
  .to-top.show{opacity:1;visibility:visible;transform:none}
  .to-top:hover{border-color:var(--sky);color:var(--sky-deep)}
  .to-top.show:active{transform:scale(.94)}
  .to-top svg{width:20px;height:20px}
  body.vc-dark .to-top{background:#13263D;border-color:var(--hairline-dusk);color:var(--dusk-text)}

  @media(max-width:900px){
    .vc-grid2,.aud-panel[data-active],.wyg-grid{grid-template-columns:1fr}
    .wyg-head{position:static}.wyg-list{columns:1}
    /* mobile hero: size to content, never force a full screen, no overflow/cut-off */
    .hero.vc-hero{min-height:auto}
    .motion .hero.vc-hero,.motion .hero.vc-hero .hero-stage{min-height:auto;height:auto;position:relative}
    .hero.vc-hero .hero-stage{height:auto}
    .hero.vc-hero .hero-inner{grid-template-columns:1fr;min-height:auto;padding:calc(var(--nav-h) + 18px) var(--gutter) 52px;gap:16px;align-items:start}
    .hero.vc-hero .hero-cue,.hero.vc-hero .hero-scrollnote{display:none}
    .hero.vc-hero.webgl-on .hero-canvas{opacity:.4}
    .hero.vc-hero .hero-title{font-size:clamp(2.25rem,7vw,3.25rem);margin-bottom:18px}
    /* Hero cluster (mobile): the desktop overlapping trio, scaled down per layer
       (transform:scale keeps each mockup undistorted) inside a compact clipped
       stage. Parallax is hover-gated so it never runs here; scaling .vc-pl keeps
       the click hit-areas aligned with the visuals. */
    .vc-stage{position:relative;min-height:0;display:block;width:min(360px,100%);height:220px;margin:14px auto 0;perspective:none;overflow:hidden}
    .vc-pl{position:absolute;transform-origin:top left}
    .vc-pl.tv,.vc-pl.lap{display:block}
    .vc-pl.tv{top:6px;left:0;z-index:1;transform:scale(.54)}
    .vc-pl.tv .device-tv{width:300px;max-width:300px}
    .vc-pl.lap{top:64px;left:64px;z-index:2;transform:scale(.44)}
    .vc-pl.lap .device-laptop{width:420px;max-width:420px}
    .vc-pl.ph{top:6px;right:6px;left:auto;z-index:3;transform:scale(.55);transform-origin:top right}
    .vc-pl.ph .device-phone{width:206px}
    /* Story-chapter + audience boards (mobile): keep the full queue legible and fit
       the column (the hero cluster TV is excluded - it lives in .vc-stage). */
    .vc-grid2 .device-tv,.aud-panel .device-tv{max-width:100%}
    .vc-grid2 .device-tv .qb-title,.aud-panel .device-tv .qb-title{font-size:.92rem;padding:9px 11px 6px}
    .vc-grid2 .device-tv .qb th,.aud-panel .device-tv .qb th{font-size:9px;padding:5px 5px}
    .vc-grid2 .device-tv .qb td,.aud-panel .device-tv .qb td{font-size:11px;padding:6px 5px;line-height:1.25}
    .vc-grid2 .device-tv .qb .plate,.aud-panel .device-tv .qb .plate{font-size:10px;letter-spacing:.01em;white-space:nowrap}
    .vc-grid2 .device-tv .pill,.aud-panel .device-tv .pill{font-size:8.5px;padding:2px 6px;white-space:nowrap}
    /* mobile paper scene: let it be a normal-height section, fade to bottom */
    .motion .pp{height:280vh}
    .pp-pin{align-items:flex-start}
    .pp-copy{padding-top:84px}
    /* mobile: drop the scattered paper cards into the empty space BELOW the copy
       (the desktop translateX shift does not apply in a single column, so they
       would otherwise sit centered behind the text) */
    .pp-stage{transform:translateY(26%)}
    .pp-fade{background:linear-gradient(180deg,var(--paper-2) 50%,rgba(244,237,225,0) 74%)}
    body.vc-dark .pp-fade{background:linear-gradient(180deg,var(--paper-2) 50%,rgba(10,23,38,0) 74%)}
    .pp-card{width:106px;height:140px}
    .pp-card .pl-note.n1{top:45px;font-size:10px}
    .pp-card .pl-note.n2{top:60px;font-size:9px}
  }

/* =========================================================================
   Bilingual EN/NE: language picker, Devanagari typography. Plus the
   What-you-get frozen section title and the Paper Years right-shift.
   ========================================================================= */
.lang-pick{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(23,36,58,.18);border-radius:var(--r-pill);padding:2px;background:transparent;flex:none}
.lang-opt{font-family:var(--font-mono);font-size:.78rem;font-weight:500;line-height:1;color:var(--ink-soft);padding:6px 10px;border-radius:var(--r-pill);transition:background-color .2s ease,color .2s ease;cursor:pointer}
.lang-opt[lang="ne"]{font-family:'Noto Sans Devanagari','Nirmala UI','IBM Plex Sans Devanagari',sans-serif}
.lang-opt.is-active{background:var(--sky);color:#04222f}
@media (hover:hover){.lang-opt:hover:not(.is-active){color:var(--ink)}}
.lang-pick--drawer{display:none}
.nav.theme-dusk .lang-pick,body.vc-dark .lang-pick{border-color:var(--hairline-dusk)}
.nav.theme-dusk .lang-opt,body.vc-dark .lang-opt{color:var(--dusk-soft)}
.nav.theme-dusk .lang-opt.is-active,body.vc-dark .lang-opt.is-active{color:#04222f}

/* Nepali rendering: Devanagari-capable fonts; drop the uppercasing and wide
   tracking that break Devanagari conjuncts. English stays untouched. */
/* Latin font FIRST, Devanagari as fallback: the browser picks per-glyph, so Latin
   (English, brand, plate numbers) always stays in the Latin font and Devanagari always
   renders in Noto - regardless of the EN/NE toggle. (Devanagari-first made English text
   render in Noto's Latin, e.g. the chat's English messages changed font on switch.) */
html.lang-ne body,html.lang-ne button,html.lang-ne input,html.lang-ne a{font-family:'General Sans','Noto Sans Devanagari','Nirmala UI','IBM Plex Sans Devanagari',system-ui,sans-serif}
html.lang-ne h1,html.lang-ne h2,html.lang-ne h3,html.lang-ne .vc-quote,html.lang-ne .hero-title,html.lang-ne .cta-title{font-family:'Fraunces','Noto Sans Devanagari','Nirmala UI','IBM Plex Sans Devanagari',Georgia,serif}
html.lang-ne .kicker,html.lang-ne .vc-chapter,html.lang-ne .vc-eyebrow,html.lang-ne .wyg-num,html.lang-ne .footer-col h3,html.lang-ne .demo-note,html.lang-ne .hero-scrollnote{font-family:'General Sans','Noto Sans Devanagari','Nirmala UI','IBM Plex Sans Devanagari',system-ui,sans-serif;text-transform:none;letter-spacing:0}
html.lang-ne .hero-title{font-weight:600}

@media (min-width:901px){
  /* The section title freezes while the four outcome groups scroll past,
     releasing at the section end; the per-group labels stick just beneath it.
     top is the SCROLLED nav height (60px): the bar shrinks to 60 once you are
     this far down the page, so sitting flush leaves no gap for content to bleed
     through above the frozen title. --what-title-h (set by site.js) keeps the
     group labels docked just under the title at any wrap/width. */
  #what .section-head{position:sticky;top:60px;z-index:6;background:var(--paper);margin-bottom:30px;padding:16px 0 18px;border-bottom:1px solid var(--line-2)}
  .wyg-head{top:calc(60px + var(--what-title-h, 188px) + 14px)}
  /* Paper Years: nudge the scattered cluster into the open right-hand space,
     clear of the left copy. Position only; the scatter animation is untouched. */
  .pp-stage{transform:translateX(20%)}
}

/* =========================================================================
   Chat assistant (replaces the floating WhatsApp button). Morning Shift
   tokens, dusk header with the hex motif, sky accents, ink-on-sky buttons.
   Dark-mode + reduced-motion aware. Bottom-right, above the back-to-top.
   ========================================================================= */
.vc-chat-nudge{
  position:fixed; right:84px; bottom:26px; z-index:139;
  display:flex; align-items:center; gap:8px;
  max-width:min(64vw, 230px);
  padding:9px 10px 9px 13px;
  background:var(--dusk); color:var(--dusk-text);
  border-radius:14px;
  box-shadow:0 14px 30px -12px rgba(2,8,23,.5);
  font-size:.85rem; line-height:1.3; cursor:pointer;
}
.vc-chat-nudge[hidden]{ display:none; }
.vc-chat-nudge::after{
  content:''; position:absolute; right:-5px; bottom:15px;
  width:11px; height:11px; background:var(--dusk);
  transform:rotate(45deg); border-radius:2px;
}
.vc-chat-nudge-msg{ font-weight:500; }
.vc-chat-nudge-x{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:1rem; line-height:1;
  color:var(--dusk-soft); cursor:pointer;
}
.vc-chat-nudge-x:hover{ color:var(--dusk-text); background:rgba(255,255,255,.08); }
@media (prefers-reduced-motion:no-preference){
  .vc-chat-nudge{ animation:vcNudgeIn .4s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes vcNudgeIn{ from{ opacity:0; transform:translateX(10px) scale(.94); } to{ opacity:1; transform:none; } }
.vc-chat-nudge.is-leaving{ opacity:0; transform:translateX(10px); transition:opacity .3s ease, transform .3s ease; }

.vc-chat-fab{
  position:fixed; right:18px; bottom:18px; z-index:140;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--sky); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 14px 30px -10px rgba(2,8,23,.45), 0 2px 6px rgba(23,36,58,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){ .vc-chat-fab:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(2,8,23,.5); } }
.vc-chat-fab:active{ transform:translateY(0); }
.vc-chat-fab:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.vc-chat-fab svg{ width:26px; height:26px; }
.vc-chat-fab .vc-chat-fab-close{ display:none; }
.vc-chat-fab.is-open .vc-chat-fab-open{ display:none; }
.vc-chat-fab.is-open .vc-chat-fab-close{ display:block; }

.vc-chat{
  position:fixed; right:18px; bottom:84px; z-index:139;
  width:min(360px, calc(100vw - 36px));
  height:min(540px, calc(100vh - 130px));
  display:flex; flex-direction:column;
  background:var(--card); color:var(--ink);
  border:1px solid var(--hairline-light); border-radius:18px;
  box-shadow:0 24px 60px -16px rgba(2,8,23,.45), 0 8px 22px -10px rgba(2,8,23,.28);
  overflow:hidden;
}
.vc-chat[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .vc-chat{ animation:vcChatIn .22s ease both; transform-origin:bottom right; }
}
@keyframes vcChatIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

.vc-chat-head{
  display:flex; align-items:center; gap:10px; padding:13px 14px;
  color:var(--dusk-text);
  background-color:var(--dusk);
  /* knock the hex pattern back so it stays a faint texture and the title reads clearly */
  background-image:linear-gradient(rgba(12,26,44,.78), rgba(12,26,44,.78)), var(--hexes);
  background-size:auto, 84px;
  background-repeat:no-repeat, repeat;
}
.vc-chat-mark{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:rgba(125,211,252,.16); color:var(--sky-bright); flex:0 0 auto; }
.vc-chat-mark svg{ width:18px; height:18px; }
.vc-chat-titles{ flex:1 1 auto; min-width:0; }
.vc-chat-title{ font-family:var(--font-body); font-weight:600; font-size:.95rem; line-height:1.15; }
.vc-chat-sub{ font-size:.72rem; color:var(--dusk-soft); margin-top:2px; }
.vc-chat-x{ background:transparent; border:0; color:var(--dusk-soft); cursor:pointer; width:44px; height:44px; display:grid; place-items:center; border-radius:8px; flex:0 0 auto; }
.vc-chat-x:hover{ color:var(--dusk-text); background:rgba(255,255,255,.08); }
.vc-chat-x:focus-visible{ outline:2px solid var(--sky-bright); outline-offset:1px; }
.vc-chat-x svg{ width:18px; height:18px; display:block; }

.vc-chat-log{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--paper); }
.vc-msg{ max-width:86%; padding:9px 12px; border-radius:14px; font-size:.86rem; line-height:1.45; }
.vc-msg-bot{ align-self:flex-start; background:var(--card); border:1px solid var(--hairline-light); border-bottom-left-radius:5px; color:var(--ink); }
.vc-msg-user{ align-self:flex-end; background:var(--sky-wash); border:1px solid #CDE8FA; border-bottom-right-radius:5px; color:var(--ink); }
.vc-typing{ display:inline-flex; gap:5px; align-items:center; padding:12px 14px; }
.vc-typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-soft); opacity:.5; }
@media (prefers-reduced-motion:no-preference){
  .vc-typing span{ animation:vcDot 1.1s infinite ease-in-out; }
  .vc-typing span:nth-child(2){ animation-delay:.16s; }
  .vc-typing span:nth-child(3){ animation-delay:.32s; }
}
@keyframes vcDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:.95; } }
.vc-msg-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.vc-msg-action{ font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; border-radius:7px; padding:8px 12px; min-height:44px; display:inline-flex; align-items:center;
  border:1px solid var(--sky); background:var(--sky); color:var(--ink); text-decoration:none; line-height:1.2; }
.vc-msg-action.is-ghost{ background:transparent; color:var(--sky-deep); }
.vc-msg-action:hover{ filter:brightness(.97); }
.vc-msg-action:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* Suggested prompts live inside the conversation (after the greeting) and clear
   once the user engages, so they never sit as a fixed bar eating the panel. */
.vc-chips-inline{ display:grid; grid-template-columns:1fr 1fr; gap:7px; max-width:100%; margin-top:2px; }
.vc-chip-cta{ border-color:var(--sky); color:var(--sky-deep); font-weight:600; }
.vc-chip{ font:inherit; font-size:.76rem; cursor:pointer; border-radius:16px; padding:6px 12px; min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.25;
  border:1px solid var(--hairline-light); background:var(--paper); color:var(--ink-soft); transition:border-color .15s, color .15s; }
.vc-chip:hover{ border-color:var(--sky); color:var(--sky-deep); }
.vc-chip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.vc-chat-input{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--hairline-light); background:var(--card); }
.vc-chat-input input{ flex:1 1 auto; min-width:0; font:inherit; font-size:.86rem; padding:9px 12px; border-radius:9px;
  border:1px solid var(--hairline-light); background:var(--paper); color:var(--ink); }
.vc-chat-input input:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.vc-chat-input button{ flex:0 0 auto; width:44px; min-height:44px; border:0; border-radius:9px; background:var(--sky); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.vc-chat-input button:hover{ filter:brightness(.97); }
.vc-chat-input button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.vc-chat-input button svg{ width:18px; height:18px; }

body.vc-chat-open .to-top{ opacity:0; visibility:hidden; }

body.vc-dark .vc-chat{ background:var(--dusk-raised); border-color:var(--hairline-dusk); color:var(--dusk-text); box-shadow:0 24px 64px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(125,211,252,.10); }
body.vc-dark .vc-chat-log{ background:var(--dusk); }
body.vc-dark .vc-msg-bot{ background:var(--dusk-raised); border-color:var(--hairline-dusk); color:var(--dusk-text); }
body.vc-dark .vc-msg-user{ background:rgba(125,211,252,.14); border-color:var(--hairline-dusk); color:var(--dusk-text); }
body.vc-dark .vc-chat-input{ background:var(--dusk-raised); border-color:var(--hairline-dusk); }
body.vc-dark .vc-chip-cta{ color:var(--sky-bright); border-color:var(--sky); }
body.vc-dark .vc-chip{ background:var(--dusk); border-color:var(--hairline-dusk); color:var(--dusk-soft); }
body.vc-dark .vc-chip:hover{ color:var(--sky-bright); border-color:var(--sky); }
body.vc-dark .vc-chat-input input{ background:var(--dusk); border-color:var(--hairline-dusk); color:var(--dusk-text); }
body.vc-dark .vc-chat-fab{ box-shadow:0 14px 30px -10px rgba(0,0,0,.6); }

@media (max-width:480px){
  .vc-chat{ right:10px; left:10px; width:auto; bottom:80px; height:calc(100vh - 104px); }
  .vc-chat-fab{ right:14px; bottom:14px; }
}

/* ===== H2: language + theme controls reachable in the mobile drawer ===== */
.nav-drawer-tools { display: none; }
@media (max-width: 768px) {
  .nav-drawer-tools { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hairline-light); }
  .nav-drawer-tools .lang-pick--drawer { display: none; }  /* language picker stays on the bar */
  .nav-drawer-tools .lang-opt { min-height: 44px; padding: 10px 16px; }
  .nav-drawer-tools .vc-darkbtn { display: grid; place-items: center; width: 44px; height: 44px; }
  body.vc-dark .nav-drawer-tools { border-color: var(--hairline-dusk); }
  /* to-top moves bottom-left on phones so it never crowds the chat FAB (bottom-right) */
  .to-top { left: 18px; right: auto; bottom: 18px; }
}

/* (Trust cards now live inside .why-grid as the first three reasons.) */

/* ============================================================
   Section-title "hierarchy flip": the section NAME is the heading, coloured in
   the brand brass (no number), and the old headline phrase drops to an italic
   supporting lede. Fixes the AI-slop inversion (a tiny label over a giant phrase).
   ============================================================ */
/* title colour = the deep blue of the V/C mark in the logo (harmonises with the sky
   palette instead of the off-brand amber); a lighter sky reads it on the dark theme */
.vc-flip-title{color:#0C4A6E}
body.vc-dark .vc-flip-title{color:var(--sky)}
.vc-flip-phrase{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.34;color:var(--ink-soft);
  max-width:40ch;margin-top:14px;letter-spacing:-.005em}
body.vc-dark .vc-flip-phrase{color:var(--dusk-soft)}
.t13n.is-dusk .vc-flip-phrase{color:var(--dusk-soft)}