/* ==========================================================================
   Vikrant Design 2026: harrikumar.com design language for a solar business.
   Every class is prefixed vs- so the Eergx theme and Elementor stay untouched.
   ========================================================================== */
@font-face { font-family: "VS Jakarta"; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "VS Cormorant"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "VS Cormorant"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --vs-canvas: #f7f4ee;
  --vs-canvas-2: #efeadf;
  --vs-paper: #fffdf9;
  --vs-sky: #e9effa;
  --vs-ink: #16213a;
  --vs-ink-2: #4a5468;
  --vs-ink-3: #7b8496;
  --vs-line: rgba(20, 42, 92, 0.11);
  --vs-line-2: rgba(20, 42, 92, 0.2);
  --vs-blue: #0b3aa6;
  --vs-blue-2: #0a3192;
  --vs-blue-3: #08287a;
  --vs-blue-soft: #dfe7f8;
  --vs-sun: #f08a18;
  --vs-sun-2: #f6a83d;
  --vs-sun-soft: #fde9cf;
  --vs-sun-light: #ffd9a0;
  --vs-leaf: #5fa82e;
  --vs-leaf-soft: #e3f0d6;
  --vs-ivory: #fffaf2;
  --vs-grad-blue: linear-gradient(140deg, #1f52c9 0%, #0b3aa6 48%, #08287a 100%);
  --vs-grad-sun: linear-gradient(135deg, #ffd98f 0%, #f6a83d 45%, #e9790f 100%);
  --vs-wash-blue: radial-gradient(70% 90% at 100% 0%, rgba(31, 82, 201, 0.12), transparent 62%);
  --vs-wash-sun: radial-gradient(60% 80% at 0% 100%, rgba(246, 168, 61, 0.22), transparent 60%);
  --vs-r-xl: 34px;
  --vs-r-lg: 26px;
  --vs-r-md: 20px;
  --vs-r-sm: 14px;
  --vs-shadow-1: 0 1px 2px rgba(16, 32, 74, 0.05), 0 4px 12px -4px rgba(16, 32, 74, 0.08);
  --vs-shadow-2: 0 2px 6px rgba(16, 32, 74, 0.05), 0 22px 44px -18px rgba(16, 32, 74, 0.24);
  --vs-shadow-3: 0 6px 16px rgba(16, 32, 74, 0.06), 0 44px 90px -34px rgba(16, 32, 74, 0.38);
  --vs-shadow-blue: 0 12px 28px -12px rgba(11, 58, 166, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.26);
  --vs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vs-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --vs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vs-wrap: 1240px;
  --vs-gutter: clamp(16px, 4vw, 48px);
  --vs-appbar-h: 84px;
  --vs-safe-b: env(safe-area-inset-bottom, 0px);
  --vs-sans: "VS Jakarta", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vs-serif: "VS Cormorant", "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
}

/* ---------- Page base (pages built with this design) ---------- */
html.vs26 { scroll-padding-top: calc(var(--vs-appbar-h) + 16px); }
body.vs26 { background: var(--vs-canvas); }
body.vs26-native { margin: 0; color: var(--vs-ink); font: 400 16px/1.65 var(--vs-sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.vs26-native .elementor .e-con, body.vs26-native .elementor .e-con-inner {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px; --container-max-width: none; --content-width: 100%;
}
body.vs26-native .elementor-widget-html, body.vs26-native .elementor-widget-shortcode { width: 100%; }
body.vs26 .vs-page-pad { height: calc(var(--vs-appbar-h) + 8px); }

/* Old theme chrome is replaced by the new header/footer while the design is on */
body.vs26 #page > .progress-wrap,
body.vs26 #page > .progress-wrap + .elementor[data-elementor-type="wp-post"],
body.vs26 #page ~ .elementor[data-elementor-type="wp-post"],
body.vs26 .mystickyelements-fixed,
body.vs26 #preloader { display: none !important; }

/* ---------- Scoped reset ---------- */
.vs, .vs *, .vs *::before, .vs *::after { box-sizing: border-box; }
.vs { font-family: var(--vs-sans); color: var(--vs-ink); font-size: 16px; line-height: 1.65; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.vs img, .vs svg, .vs video { display: block; max-width: 100%; }
.vs img { height: auto; }
.vs a { color: inherit; text-decoration: none; }
.vs a:hover, .vs a:focus { color: inherit; text-decoration: none; }
.vs button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; }
.vs h1, .vs h2, .vs h3, .vs h4, .vs p, .vs figure, .vs blockquote, .vs dl, .vs dd, .vs ol, .vs ul { margin: 0; padding: 0; }
.vs ol, .vs ul { list-style: none; }
.vs h1, .vs h2, .vs h3, .vs h4 { text-transform: none; }
.vs ::selection { background: rgba(11, 58, 166, 0.16); }
.vs :focus-visible { outline: 2px solid var(--vs-blue); outline-offset: 3px; border-radius: 10px; }
.vs [hidden] { display: none !important; }
.vs .vs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.vs-locked, html.vs-locked body { overflow: hidden; }

.vs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vs .vs-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vs .vs-ic-sm { width: 16px; height: 16px; }
.vs .vs-ic-xs { width: 13px; height: 13px; }
.vs .vs-ic-fill { fill: currentColor; stroke: none; }

.vs .vs-wrap { width: 100%; max-width: calc(var(--vs-wrap) + var(--vs-gutter) * 2); margin-inline: auto; padding-inline: var(--vs-gutter); }

/* ---------- Type ---------- */
.vs .vs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--vs-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-blue); }
.vs .vs-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vs-sun); box-shadow: 0 0 0 4px rgba(240, 138, 24, 0.16); }
.vs .vs-h1, .vs .vs-h2, .vs .vs-hero-name, .vs .vs-card-title, .vs .vs-serif {
  font-family: var(--vs-serif); font-weight: 500; letter-spacing: -0.008em; color: var(--vs-ink);
}
.vs .vs-h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: 0.98; margin-top: 18px; text-wrap: balance; }
.vs .vs-h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; margin-top: 14px; text-wrap: balance; }
.vs .vs-h2--sm { font-size: clamp(30px, 3.4vw, 46px); }
.vs .vs-h1 em, .vs .vs-h2 em, .vs .vs-hero-name em { font-style: italic; color: var(--vs-blue); }
.vs .vs-h2 em.vs-sun, .vs em.vs-sun { color: var(--vs-sun); }
.vs .vs-light, .vs .vs-light em { color: var(--vs-ivory); }
.vs .vs-h2.vs-light em { color: var(--vs-sun-light); }
.vs .vs-lead { margin-top: 20px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.65; color: var(--vs-ink-2); max-width: 640px; text-wrap: pretty; }
.vs .vs-body { font-size: 17px; color: var(--vs-ink-2); line-height: 1.7; text-wrap: pretty; }

/* ---------- Buttons ---------- */
.vs .vs-btn {
  --h: 50px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 650 15px/1 var(--vs-sans); letter-spacing: 0.005em; white-space: nowrap; text-decoration: none;
  isolation: isolate; overflow: hidden; user-select: none; cursor: pointer;
  transition: transform 0.45s var(--vs-ease-spring), background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.35s var(--vs-ease-out);
}
.vs .vs-btn .vs-ic { transition: transform 0.45s var(--vs-ease-out); }
.vs .vs-btn:hover .vs-ic:last-child { transform: translateX(3px); }
.vs .vs-btn:active { transform: scale(0.965); transition-duration: 0.12s; }
.vs .vs-btn-lg { --h: 58px; padding: 0 30px; font-size: 16px; }
.vs .vs-btn-sm { --h: 42px; padding: 0 18px; font-size: 14px; }
.vs .vs-btn-block { width: 100%; }
.vs .vs-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.9s var(--vs-ease-out);
}
.vs .vs-btn:hover::after { transform: translateX(120%); }
.vs .vs-btn-primary, .vs .vs-btn-primary:hover, .vs .vs-btn-primary:focus { background: var(--vs-grad-blue); color: var(--vs-ivory); box-shadow: var(--vs-shadow-blue); }
.vs .vs-btn-primary:hover { box-shadow: 0 18px 36px -14px rgba(11, 58, 166, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.vs .vs-btn-sun, .vs .vs-btn-sun:hover { background: var(--vs-grad-sun); color: #3a1d00; box-shadow: 0 12px 28px -12px rgba(233, 121, 15, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.vs .vs-btn-ghost, .vs .vs-btn-ghost:hover { background: rgba(255, 253, 249, 0.6); border-color: var(--vs-line-2); color: var(--vs-ink); }
.vs .vs-btn-ghost::after { background: linear-gradient(105deg, transparent 30%, rgba(11, 58, 166, 0.08) 50%, transparent 70%); }
.vs .vs-btn-ghost:hover { background: var(--vs-paper); border-color: rgba(11, 58, 166, 0.35); }
.vs .vs-btn-ivory, .vs .vs-btn-ivory:hover { background: var(--vs-ivory); color: var(--vs-blue-2); box-shadow: 0 14px 30px -14px rgba(4, 18, 60, 0.5); }
.vs .vs-btn-ivory::after { background: linear-gradient(105deg, transparent 30%, rgba(11, 58, 166, 0.1) 50%, transparent 70%); }
.vs .vs-btn-outline-light, .vs .vs-btn-outline-light:hover { border-color: rgba(240, 246, 255, 0.42); color: var(--vs-ivory); background: rgba(255, 255, 255, 0.06); }
.vs .vs-btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(240, 246, 255, 0.7); }
.vs .vs-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.vs .vs-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; color: var(--vs-ink-2);
  transition: background-color 0.25s, color 0.25s, transform 0.4s var(--vs-ease-spring);
}
.vs .vs-icon-btn:hover { background: rgba(20, 42, 92, 0.06); color: var(--vs-ink); }
.vs .vs-icon-btn:active { transform: scale(0.92); }
.vs .vs-icon-btn b { font-size: 14px; font-weight: 700; }

.vs .vs-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--vs-blue);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 3px; transition: background-size 0.45s var(--vs-ease-out);
}
.vs .vs-link:hover { background-size: 100% 1.5px; color: var(--vs-blue); }
.vs .vs-link .vs-ic { transition: transform 0.45s var(--vs-ease-out); }
.vs .vs-link:hover .vs-ic { transform: translateX(4px); }

.vs .vs-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--vs-line-2); background: rgba(255, 253, 249, 0.7); font-size: 13.5px; font-weight: 600; color: var(--vs-ink-2);
  transition: border-color 0.25s, color 0.25s, background-color 0.25s, transform 0.4s var(--vs-ease-spring);
}
.vs a.vs-chip:hover, .vs button.vs-chip:hover { border-color: var(--vs-blue); color: var(--vs-blue); background: var(--vs-paper); transform: translateY(-2px); }
.vs .vs-chip:active { transform: scale(0.96); }
.vs .vs-chip.is-on { background: var(--vs-blue); border-color: var(--vs-blue); color: var(--vs-ivory); }

/* ---------- App bar ---------- */
.vs-appbar { position: fixed; inset: 0 0 auto 0; z-index: 9990; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; }
body.admin-bar .vs-appbar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .vs-appbar { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .vs-appbar { top: 0; } }
.vs-appbar-inner {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 24px;
  width: calc(100% - var(--vs-gutter) * 2); max-width: var(--vs-wrap); height: 70px; margin: 10px auto 0;
  padding: 0 10px 0 14px; border-radius: 999px; border: 1px solid transparent;
  transition: background-color 0.45s var(--vs-ease-out), border-color 0.45s, box-shadow 0.45s var(--vs-ease-out);
}
.vs-appbar.is-scrolled .vs-appbar-inner, .vs-appbar.is-solid .vs-appbar-inner {
  background: rgba(255, 253, 249, 0.88); border-color: rgba(20, 42, 92, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 32px -18px rgba(16, 32, 74, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
.vs .vs-brand { display: flex; align-items: center; flex: none; border-radius: 16px; }
.vs .vs-brand img { height: 50px; width: auto; transition: transform 0.6s var(--vs-ease-spring); }
.vs .vs-brand:hover img { transform: scale(1.04) rotate(-1.5deg); }
.vs .vs-topnav { position: relative; display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.vs .vs-topnav-link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--vs-ink-2);
  transition: color 0.25s, background-color 0.25s;
}
.vs .vs-topnav-link:hover { color: var(--vs-ink); background: rgba(11, 58, 166, 0.06); }
.vs .vs-topnav-link.is-active { color: var(--vs-blue); background: rgba(11, 58, 166, 0.08); }
.vs .vs-topnav-link .vs-ic { transition: transform 0.4s var(--vs-ease-out); }
.vs .vs-mega-wrap.is-open .vs-mega-trigger .vs-ic { transform: rotate(180deg); }
.vs .vs-appbar-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.vs .vs-appbar-cta { margin-left: 6px; }
.vs .vs-appbar-progress {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); background: var(--vs-grad-sun); opacity: 0.95;
}

/* Mega menu */
.vs .vs-mega-wrap { position: relative; }
.vs .vs-mega {
  position: absolute; left: 50%; top: calc(100% + 16px); width: 860px; padding: 12px;
  display: grid; grid-template-columns: 1fr 1fr 236px; gap: 12px;
  background: var(--vs-paper); border: 1px solid var(--vs-line); border-radius: 28px; box-shadow: var(--vs-shadow-3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(0.98); transform-origin: 50% 0;
  transition: opacity 0.3s var(--vs-ease-out), transform 0.45s var(--vs-ease-out), visibility 0s linear 0.3s;
}
.vs .vs-mega::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; }
.vs .vs-mega-wrap.is-open .vs-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.vs .vs-mega-col { display: grid; align-content: start; gap: 2px; }
.vs .vs-mega-head { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-ink-3); }
.vs .vs-mega-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; transition: background-color 0.25s; }
.vs .vs-mega-item:hover { background: var(--vs-canvas); }
.vs .vs-mega-item b { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--vs-ink); }
.vs .vs-mega-item small { display: block; font-size: 12.5px; color: var(--vs-ink-3); line-height: 1.35; margin-top: 2px; }
.vs .vs-mega-thumb { width: 46px; height: 46px; flex: none; border-radius: 13px; overflow: hidden; background: var(--vs-canvas-2); transition: transform 0.5s var(--vs-ease-spring); }
.vs .vs-mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vs .vs-mega-item:hover .vs-mega-thumb { transform: scale(1.06) rotate(-3deg); }
.vs .vs-mega-feature {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 22px; border-radius: 20px; text-align: left;
  background: var(--vs-grad-blue); color: var(--vs-ivory); overflow: hidden; isolation: isolate; min-height: 100%;
}
.vs .vs-mega-feature::before {
  content: ""; position: absolute; inset: -60px -60px auto auto; width: 200px; height: 200px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 199, 110, 0.55), rgba(255, 199, 110, 0) 70%);
}
.vs .vs-mega-feature b { font: 500 26px/1.05 var(--vs-serif); }
.vs .vs-mega-feature small { font-size: 13px; opacity: 0.82; line-height: 1.45; }
.vs .vs-mega-feature-go { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); transition: transform 0.45s var(--vs-ease-out), background-color 0.3s; }
.vs .vs-mega-feature:hover .vs-mega-feature-go { transform: translateX(4px); background: rgba(255, 255, 255, 0.24); }

/* ---------- Tab bar (phones & tablets) ---------- */
.vs-tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--vs-safe-b)); z-index: 9990;
  display: none; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: 68px; padding: 0 6px 8px; border-radius: 26px;
  background: rgba(255, 253, 249, 0.92); border: 1px solid rgba(20, 42, 92, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 40px -16px rgba(16, 32, 74, 0.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.vs .vs-tab {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--vs-ink-3); transition: color 0.3s;
}
.vs .vs-tab .vs-ic { width: 23px; height: 23px; transition: transform 0.5s var(--vs-ease-spring); }
.vs .vs-tab.is-active { color: var(--vs-blue); }
.vs .vs-tab.is-active .vs-ic { transform: translateY(-1px) scale(1.06); }
.vs .vs-tab:active .vs-ic { transform: scale(0.86); }
.vs .vs-tab--cta { color: var(--vs-ink-2); }
.vs .vs-tab-fab {
  width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vs-grad-sun); color: #3a1d00;
  box-shadow: 0 0 0 5px rgba(255, 253, 249, 0.95), 0 14px 26px -10px rgba(233, 121, 15, 0.75);
  transition: transform 0.5s var(--vs-ease-spring);
}
.vs .vs-tab--cta .vs-ic { width: 24px; height: 24px; }
.vs .vs-tab--cta:active .vs-tab-fab { transform: scale(0.9); }

/* ---------- Sections ---------- */
.vs-sec { padding-block: clamp(56px, 6vw, 96px); position: relative; overflow-x: clip; }
/* Slide-ins start off to the side (as on the original site); clip them so the page never scrolls sideways */
html.vs26 { overflow-x: clip; }
.vs-footer { overflow-x: clip; }
.vs-sec--tight { padding-block: clamp(40px, 4.4vw, 64px); }
.vs-sec--wash { background: var(--vs-wash-blue), var(--vs-wash-sun), linear-gradient(180deg, #f3f5f8, #f6f2ea); }
.vs-sec--sun {
  background:
    radial-gradient(55% 90% at 8% 0%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(31, 82, 201, 0.12), transparent 62%),
    linear-gradient(135deg, #fdebc9 0%, #fbdcae 45%, #f5e2cf 100%);
}
.vs-sec--sun .vs-eyebrow, .vs-sec--sun .vs-link { color: var(--vs-blue-3); }
.vs-sec--blue {
  position: relative; isolation: isolate; color: var(--vs-ivory); overflow: hidden;
  background:
    radial-gradient(50% 120% at 100% 0%, rgba(255, 184, 92, 0.3), transparent 60%),
    radial-gradient(45% 110% at 0% 100%, rgba(95, 168, 46, 0.28), transparent 62%),
    var(--vs-grad-blue);
}
.vs-sec--blue .vs-eyebrow { color: var(--vs-sun-light); }
.vs-sec--blue .vs-eyebrow::before { background: var(--vs-sun-light); box-shadow: 0 0 0 4px rgba(255, 217, 160, 0.2); }
.vs-sec--blue .vs-h2 { color: var(--vs-ivory); }
.vs-sec--blue .vs-h2 em { color: var(--vs-sun-light); }
.vs .vs-sec-head { max-width: 780px; margin-bottom: clamp(26px, 3vw, 44px); }
.vs .vs-sec-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vs .vs-sec-head--row > div { max-width: 760px; }
.vs .vs-sec-lead { margin-top: 16px; font-size: 17px; color: var(--vs-ink-2); max-width: 620px; text-wrap: pretty; }
.vs-sec--blue .vs-sec-lead { color: rgba(240, 246, 255, 0.86); }

/* Reveal */
.vs-js .vs .vs-rv { opacity: 0; transform: translate3d(0, 30px, 0); }
.vs-js .vs .vs-rv.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--vs-ease-out) var(--rd, 0ms), transform 1.1s var(--vs-ease-out) var(--rd, 0ms); }
/* Photos open like harrikumar.com: the frame unclips from the centre while the photo settles from a zoom.
   Individual translate/scale properties let the scroll parallax and hover zooms compose with it. */
.vs .vs-feature-photo, .vs .vs-card-thumb, .vs .vs-save-photo { --rr: 24px; }
.vs .vs-person-photo { --rr: var(--vs-r-xl); }
.vs .vs-shot-img, .vs .vs-post-img { --rr: 0px; }
.vs-js .vs .vs-rv-img { clip-path: inset(12% 9% 12% 9% round var(--rr, var(--vs-r-xl))); }
.vs-js .vs .vs-rv-img img { scale: 1.22; }
.vs-js .vs .vs-rv-img.is-in { clip-path: inset(0 0 0 0 round var(--rr, var(--vs-r-xl))); transition: clip-path 1.4s var(--vs-ease-out) var(--rd, 0ms); }
.vs-js .vs .vs-rv-img.is-in img { scale: 1; transition: scale 1.9s var(--vs-ease-out) var(--rd, 0ms), transform 1s var(--vs-ease-out); }
/* Photo cards tilt in 3D under the pointer */
.vs [data-vs-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transform-style: preserve-3d; transition: transform 0.7s var(--vs-ease-out), box-shadow 0.7s var(--vs-ease-out); }
html .vs [data-vs-tilt]:hover, html .vs [data-vs-tilt].is-tilting { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, -5px)); }
.vs [data-vs-tilt].is-tilting { transition: transform 0.15s linear, box-shadow 0.4s var(--vs-ease-out); --lift: -6px; box-shadow: var(--vs-shadow-3); }
.vs [data-vs-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.5s; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, 0.3), transparent 45%); }
.vs [data-vs-tilt].is-tilting::after { opacity: 1; }
/* Hero stage layers follow the pointer at different depths */
.vs .vs-stage-frame { translate: calc(var(--sx, 0) * 8px) calc(var(--sy, 0) * 8px); transition: translate 0.9s var(--vs-ease-out); }
.vs .vs-stage-card--a { translate: calc(var(--sx, 0) * 20px) calc(var(--sy, 0) * 18px); transition: translate 0.9s var(--vs-ease-out); }
.vs .vs-stage-card--b { translate: calc(var(--sx, 0) * -18px) calc(var(--sy, 0) * -14px); transition: translate 0.9s var(--vs-ease-out); }
.vs .vs-stage-sun { translate: calc(var(--sx, 0) * -26px) calc(var(--sy, 0) * -20px + var(--sun-y, 0px)); transition: translate 0.9s var(--vs-ease-out); }
.vs .vs-stage-tag { translate: calc(var(--sx, 0) * 12px) calc(var(--sy, 0) * 10px); transition: translate 0.9s var(--vs-ease-out); }

/* Original-site motion mode (GSAP + ScrollTrigger + SplitText + Lenis, as used by the Eergx theme) */
html.vs-gsap .vs .vs-hero-in { opacity: 1; transform: none; transition: none !important; }
html.vs-gsap .vs .vs-hn-in { transform: none; transition: none !important; }
html.vs-gsap .vs .vs-hn { clip-path: none; }
.vs [data-vs-slide] { --vs-sx: 0px; --vs-sy: 0px; translate: var(--vs-sx) var(--vs-sy); }
.vs .vs-pllx img { scale: 1.22; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Hero ---------- */
.vs-hero { position: relative; padding: calc(var(--vs-appbar-h) + 28px) 0 0; overflow: clip; isolation: isolate; }
.vs .vs-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vs .vs-hero-glow {
  position: absolute; right: -12%; top: -22%; width: 72vw; height: 92vh; max-width: 1100px;
  background: radial-gradient(closest-side, rgba(255, 196, 112, 0.45), rgba(253, 233, 207, 0.28) 45%, rgba(247, 244, 238, 0) 100%);
}
.vs .vs-hero-glow2 {
  position: absolute; left: -18%; bottom: -10%; width: 60vw; height: 70vh; max-width: 900px;
  background: radial-gradient(closest-side, rgba(31, 82, 201, 0.12), rgba(31, 82, 201, 0) 100%);
}
.vs .vs-hero-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--vs-line) 1px, transparent 1px), linear-gradient(90deg, var(--vs-line) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000 0%, transparent 70%);
  opacity: 0.55;
}
.vs .vs-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(30px, 3.2vw, 48px) 44px; min-height: min(780px, calc(100svh - var(--vs-appbar-h) - 120px)); }
.vs .vs-hero-copy { position: relative; z-index: 3; padding-block: 8px; min-width: 0; }
.vs .vs-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px;
  background: var(--vs-paper); border: 1px solid var(--vs-line); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.6);
  font: 800 11.5px/1 var(--vs-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--vs-ink-3);
}
.vs .vs-badge i { width: 24px; height: 24px; border-radius: 50%; background: var(--vs-grad-sun); box-shadow: 0 0 0 4px rgba(246, 168, 61, 0.18); animation: vsPulse 3.2s ease-in-out infinite; }
@keyframes vsPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(246, 168, 61, 0.18); } 50% { box-shadow: 0 0 0 9px rgba(246, 168, 61, 0.06); } }
.vs .vs-hero-name { font-size: clamp(64px, 8.6vw, 136px); line-height: 0.9; margin: 22px 0 0 -0.04em; letter-spacing: -0.012em; }
.vs .vs-hn { display: inline-block; clip-path: inset(-0.3em -0.3em 0 -0.3em); padding-bottom: 0.06em; }
.vs .vs-hn-in { display: inline-block; }
.vs-js .vs .vs-hn-in { transform: translate3d(0, 108%, 0); }
.vs-js .vs.is-ready .vs-hn-in, .vs-js .is-ready .vs-hn-in { transform: none; transition: transform 1.2s var(--vs-ease-out) 0.12s; }
.vs-js .is-ready .vs-hn + .vs-hn .vs-hn-in { transition-delay: 0.22s; }
.vs-js .vs .vs-hero-in { opacity: 0; transform: translate3d(0, 20px, 0); }
.vs-js .is-ready .vs-hero-in { opacity: 1; transform: none; transition: opacity 0.9s var(--vs-ease-out) calc(var(--d) * 70ms + 220ms), transform 1.1s var(--vs-ease-out) calc(var(--d) * 70ms + 220ms); }
.vs .vs-hero-rotator { margin-top: 18px; font-size: clamp(19px, 2vw, 26px); font-weight: 500; color: var(--vs-ink-2); letter-spacing: -0.01em; line-height: 1.4; }
.vs .vs-rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.4em; padding-inline: 0.04em; }
.vs .vs-rot-word {
  grid-area: 1 / 1; white-space: nowrap; font: italic 500 1.28em/1.04 var(--vs-serif); color: var(--vs-blue);
  transform: translate3d(0, 135%, 0); opacity: 0; transition: transform 0.85s var(--vs-ease-out), opacity 0.6s var(--vs-ease-out);
}
.vs .vs-rot-word:first-child { transform: none; opacity: 1; }
.vs-js .vs .vs-rot-word { transform: translate3d(0, 135%, 0); opacity: 0; }
.vs-js .vs .vs-rot-word.is-on { transform: none; opacity: 1; }
.vs-js .vs .vs-rot-word.is-out { transform: translate3d(0, -135%, 0); opacity: 0; }
.vs .vs-hero-lead { margin-top: 20px; max-width: 560px; font-size: 17.5px; color: var(--vs-ink-2); text-wrap: pretty; }
.vs .vs-hero-call {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 6px 18px 6px 6px; border-radius: 999px;
  border: 1px solid var(--vs-line-2); background: rgba(255, 253, 249, 0.75); font-size: 14px; font-weight: 650; color: var(--vs-ink-2);
  transition: border-color 0.25s, background-color 0.25s, transform 0.4s var(--vs-ease-spring);
}
.vs .vs-hero-call:hover { border-color: var(--vs-blue); color: var(--vs-ink); }
.vs .vs-hero-call span:first-child { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--vs-grad-blue); color: var(--vs-ivory); }
.vs .vs-hero-call b { color: var(--vs-ink); font-weight: 800; }
.vs .vs-hero-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 44px; align-items: center; padding-block: 26px; border-top: 1px solid var(--vs-line); }
.vs .vs-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vs .vs-quick-label { white-space: nowrap; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-ink-3); margin-right: 4px; }
.vs .vs-stats { display: flex; justify-content: space-between; gap: clamp(16px, 3vw, 40px); }
.vs .vs-stats > div { flex: 1; min-width: 0; }
.vs .vs-stats > div + div { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--vs-line); }
.vs .vs-stats dt { font: 500 clamp(36px, 3.6vw, 50px)/1 var(--vs-serif); color: var(--vs-ink); font-variant-numeric: lining-nums tabular-nums; }
.vs .vs-stats dt small { font-size: 0.6em; color: var(--vs-sun); }
.vs .vs-stats dd { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--vs-ink-3); max-width: 160px; line-height: 1.35; }

/* Hero stage: real installations crossfading in a glass frame, with a slow sun arc */
.vs .vs-stage { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 0.92; justify-self: center; }
.vs .vs-stage-sun {
  position: absolute; right: 2%; top: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 40% 38%, #fff3d6 0%, #ffd27a 32%, #f6a83d 62%, rgba(240, 138, 24, 0) 72%);
  filter: blur(0.3px); animation: vsSun 14s ease-in-out infinite alternate;
}
.vs .vs-stage-sun::after {
  content: ""; position: absolute; inset: -34%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(246, 168, 61, 0.16) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 46%, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 46%, #000 52%, transparent 100%);
  animation: vsSpin 60s linear infinite;
}
@keyframes vsSun { from { transform: translate(0, 6%); } to { transform: translate(-14%, -4%); } }
@keyframes vsSpin { to { transform: rotate(360deg); } }
.vs .vs-stage-frame {
  position: absolute; left: 0; right: 9%; top: 12%; bottom: 10%; z-index: 1;
  border-radius: 34px; overflow: hidden; background: #cfd9ea; border: 1px solid rgba(20, 42, 92, 0.12);
  box-shadow: 0 60px 100px -50px rgba(8, 40, 122, 0.55), 0 22px 40px -26px rgba(8, 40, 122, 0.35);
}
.vs .vs-stage-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--vs-ease-io); }
.vs .vs-stage-slide.is-on { opacity: 1; }
.vs .vs-stage-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.vs .vs-stage-slide.is-on img { animation: vsKen 9s ease-out forwards; }
@keyframes vsKen { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
.vs .vs-stage-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 40, 122, 0) 55%, rgba(8, 40, 122, 0.45) 100%);
}
.vs .vs-stage-sheen { position: absolute; top: 0; bottom: 0; left: -34%; width: 33%; z-index: 2; pointer-events: none; background: rgba(255, 255, 255, 0.3); animation: vsSheen 7s ease-in-out infinite; }
@keyframes vsSheen { 0% { opacity: 0; transform: translateX(-120%) skewX(-18deg); } 35% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(440%) skewX(-18deg); } }
.vs .vs-stage-cap {
  position: absolute; left: 18px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 253, 249, 0.94); box-shadow: var(--vs-shadow-2);
  font-size: 13px; font-weight: 750; color: var(--vs-ink);
}
.vs .vs-stage-cap i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--vs-blue-soft); color: var(--vs-blue); }
.vs .vs-stage-cap small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-sun); }
.vs .vs-stage-dots { position: absolute; right: 18px; bottom: 26px; z-index: 3; display: flex; gap: 6px; }
.vs .vs-stage-dots button { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.55); transition: width 0.45s var(--vs-ease-out), background-color 0.3s; }
.vs .vs-stage-dots button.is-on { width: 24px; background: #fff; }
.vs .vs-stage-card {
  position: absolute; z-index: 4; border-radius: 22px; overflow: hidden; background: var(--vs-paper); border: 4px solid var(--vs-paper);
  box-shadow: 0 30px 60px -28px rgba(8, 40, 122, 0.55);
}
.vs .vs-stage-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.vs .vs-stage-card--a { right: 0; bottom: 0; width: 34%; aspect-ratio: 4 / 3; animation: vsFloat 7s ease-in-out infinite; }
.vs .vs-stage-card--b { left: -5%; top: 3%; width: 27%; aspect-ratio: 1; animation: vsFloat 8s ease-in-out -3s infinite; }
@keyframes vsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.vs .vs-stage-tag {
  position: absolute; z-index: 5; right: 4%; top: 9%; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; background: rgba(255, 253, 249, 0.95); box-shadow: var(--vs-shadow-2);
  font-size: 12.5px; font-weight: 750; color: var(--vs-ink);
}
.vs .vs-stage-tag b { color: var(--vs-leaf); }
.vs .vs-stage-tag .vs-ic { color: var(--vs-leaf); }

/* Brand marquee */
.vs .vs-marquee {
  position: relative; overflow: hidden; padding: 18px 0; border-block: 1px solid var(--vs-line); background: rgba(255, 253, 249, 0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vs .vs-marquee-label { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }
.vs .vs-marquee-track { display: flex; width: max-content; animation: vsMarquee 48s linear infinite; }
.vs .vs-marquee:hover .vs-marquee-track { animation-play-state: paused; }
.vs .vs-marquee-track > div { display: flex; align-items: center; gap: 18px; padding-right: 18px; }
.vs .vs-logo-tile { display: grid; place-items: center; width: 150px; height: 66px; padding: 8px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--vs-line); }
.vs .vs-logo-tile img { max-height: 48px; width: auto; object-fit: contain; filter: saturate(0.9); transition: transform 0.5s var(--vs-ease-spring); }
.vs .vs-logo-tile:hover img { transform: scale(1.06); }
.vs .vs-marquee-word { font: 500 26px/1 var(--vs-serif); color: var(--vs-ink-2); white-space: nowrap; }
.vs .vs-marquee-word + i, .vs .vs-star { color: var(--vs-sun); font-style: normal; }
@keyframes vsMarquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Bento cards ---------- */
.vs .vs-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.vs .vs-card {
  --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; gap: 20px; min-height: 280px; padding: 28px;
  border-radius: var(--vs-r-xl); background: var(--vs-paper); border: 1px solid var(--vs-line); overflow: hidden; isolation: isolate;
  transition: transform 0.6s var(--vs-ease-out), box-shadow 0.6s var(--vs-ease-out), border-color 0.35s;
}
.vs .vs-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.45s;
  background: radial-gradient(480px circle at var(--mx) var(--my), rgba(11, 58, 166, 0.08), transparent 45%);
}
.vs .vs-card:hover { transform: translateY(-6px); box-shadow: var(--vs-shadow-2); border-color: rgba(11, 58, 166, 0.22); }
.vs .vs-card:hover::before { opacity: 1; }
.vs .vs-bento .vs-card:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.vs .vs-bento .vs-card:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.vs .vs-bento .vs-card:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
.vs .vs-bento .vs-card:nth-child(4) { grid-column: 1 / 7; grid-row: 3; }
.vs .vs-bento .vs-card:nth-child(5) { grid-column: 7 / 13; grid-row: 3; }
.vs .vs-card-no { position: absolute; top: 26px; right: 28px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--vs-ink-3); }
/* Service photos are large banners so visitors can see the real installations clearly */
.vs .vs-card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 8.5; flex: none; border-radius: 22px; overflow: hidden; background: var(--vs-canvas-2); box-shadow: 0 18px 34px -22px rgba(8, 40, 122, 0.55); }
.vs .vs-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vs-ease-out); }
.vs .vs-card:hover .vs-card-thumb img { transform: scale(1.06); }
.vs .vs-card-thumb::after { content: "View service"; position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 253, 249, 0.94); color: var(--vs-ink); font-size: 12px; font-weight: 750; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.45s var(--vs-ease-out); }
.vs .vs-card:hover .vs-card-thumb::after, .vs .vs-card:focus-visible .vs-card-thumb::after { opacity: 1; transform: none; }
.vs .vs-card-body { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-right: 56px; }
.vs .vs-card .vs-card-no { z-index: 2; top: 18px; right: 20px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 253, 249, 0.92); color: var(--vs-ink-2); }
.vs .vs-card--feature .vs-card-no { background: rgba(255, 255, 255, 0.16); color: var(--vs-ivory); }
.vs .vs-card-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-blue); }
.vs .vs-card-title { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.08; text-wrap: balance; }
.vs .vs-card-text { font-size: 15px; color: var(--vs-ink-2); line-height: 1.55; }
.vs .vs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vs .vs-tags span { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; border: 1px solid var(--vs-line-2); color: var(--vs-ink-2); }
.vs .vs-card-go {
  position: absolute; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--vs-line-2); color: var(--vs-ink);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s, transform 0.6s var(--vs-ease-out);
}
.vs .vs-card:hover .vs-card-go { background: var(--vs-blue); border-color: var(--vs-blue); color: var(--vs-ivory); transform: rotate(45deg); }
.vs .vs-card--feature { background: var(--vs-grad-blue); color: var(--vs-ivory); border-color: transparent; padding: 38px; box-shadow: 0 30px 60px -30px rgba(8, 40, 122, 0.6); }
.vs .vs-card--feature::before { background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 220, 160, 0.18), transparent 45%); }
.vs .vs-card--feature::after {
  content: ""; position: absolute; z-index: -1; right: -120px; top: -120px; width: 440px; height: 440px; border-radius: 50%;
  border: 1px solid rgba(255, 217, 160, 0.28); box-shadow: 0 0 0 40px rgba(255, 217, 160, 0.05), 0 0 0 80px rgba(255, 217, 160, 0.035), 0 0 0 120px rgba(255, 217, 160, 0.025);
}
.vs .vs-card--feature .vs-card-no, .vs .vs-card--feature .vs-card-text { color: rgba(240, 246, 255, 0.8); }
.vs .vs-card--feature .vs-card-kicker { color: var(--vs-sun-light); }
.vs .vs-card--feature .vs-card-title { color: var(--vs-ivory); font-size: clamp(34px, 3.4vw, 50px); max-width: 520px; }
.vs .vs-card--feature .vs-tags span { border-color: rgba(240, 246, 255, 0.3); color: rgba(240, 246, 255, 0.92); }
.vs .vs-card--feature .vs-card-go { border-color: rgba(240, 246, 255, 0.4); color: var(--vs-ivory); }
.vs .vs-card--feature:hover .vs-card-go { background: var(--vs-ivory); color: var(--vs-blue); border-color: var(--vs-ivory); }
.vs .vs-card--feature:hover { border-color: transparent; box-shadow: 0 40px 80px -30px rgba(8, 40, 122, 0.7); }
.vs .vs-feature-photo {
  position: relative; flex: 1 1 auto; min-height: 280px; margin: 4px -4px 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(2, 12, 40, 0.65); border: 1px solid rgba(255, 255, 255, 0.18);
}
.vs .vs-feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--vs-ease-out); }
.vs .vs-card--feature:hover .vs-feature-photo img { transform: scale(1.05); }
.vs .vs-feature-photo span {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 253, 249, 0.92);
  color: var(--vs-ink); font-size: 12px; font-weight: 750;
}
.vs .vs-card-row { display: flex; gap: 20px; align-items: flex-start; }

/* ---------- How it works ---------- */
.vs .vs-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.vs .vs-flow-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--vs-r-lg); background: rgba(240, 246, 255, 0.09); border: 1px solid rgba(240, 246, 255, 0.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.5s var(--vs-ease-out), background-color 0.4s, border-color 0.4s;
}
.vs .vs-flow-card:hover { transform: translateY(-6px); background: rgba(240, 246, 255, 0.15); border-color: rgba(255, 217, 160, 0.6); }
.vs .vs-flow-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vs .vs-flow-dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--vs-ivory); color: var(--vs-blue); box-shadow: 0 12px 26px -12px rgba(2, 12, 40, 0.6); }
.vs .vs-flow-dot .vs-ic { width: 24px; height: 24px; }
.vs .vs-flow-no { font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vs-sun-light); }
.vs .vs-flow-card h3 { font: 500 clamp(24px, 2vw, 30px)/1.1 var(--vs-serif); color: var(--vs-ivory); }
.vs .vs-flow-card p { font-size: 15px; line-height: 1.6; color: rgba(240, 246, 255, 0.86); }
.vs .vs-flow-card:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: 50%; right: -18px; width: 14px; height: 14px; margin-top: -7px;
  border-top: 2px solid var(--vs-sun-light); border-right: 2px solid var(--vs-sun-light); transform: rotate(45deg);
}
.vs .vs-flow-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.vs-sec--blue::before {
  content: ""; position: absolute; z-index: -1; right: -160px; top: -200px; width: 560px; height: 560px; border-radius: 50%;
  border: 1px solid rgba(255, 217, 160, 0.22); box-shadow: 0 0 0 46px rgba(255, 217, 160, 0.05), 0 0 0 92px rgba(255, 217, 160, 0.035), 0 0 0 138px rgba(255, 217, 160, 0.025);
}

/* ---------- About ---------- */
.vs .vs-person { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* The founder photo is shown whole (its own 505 x 577 proportions, no zoom or crop); the caption sits below it, never over it */
.vs .vs-person-photo { position: relative; display: flex; flex-direction: column; border-radius: var(--vs-r-xl); overflow: hidden; background: var(--vs-paper); box-shadow: var(--vs-shadow-3); border: 1px solid var(--vs-line); }
.vs .vs-person-photo img { display: block; width: 100%; height: auto; aspect-ratio: 505 / 577; object-fit: cover; object-position: 50% 0; }
.vs .vs-person-photo figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--vs-line); background: var(--vs-paper); font-size: 13px; color: var(--vs-ink-2);
}
.vs .vs-person-photo figcaption b { display: block; font: 600 20px/1.1 var(--vs-serif); color: var(--vs-ink); }
.vs .vs-person-photo figcaption .vs-years { font: 500 34px/1 var(--vs-serif); color: var(--vs-blue); }
.vs .vs-person-photo figcaption .vs-years small { font-size: 0.6em; color: var(--vs-sun); }
.vs .vs-person-copy .vs-body { margin-top: 22px; }
.vs .vs-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.vs .vs-mv div { padding: 18px; border-radius: 20px; background: var(--vs-paper); border: 1px solid var(--vs-line); }
.vs .vs-mv b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-sun); margin-bottom: 6px; }
.vs .vs-mv p { font-size: 14.5px; line-height: 1.55; color: var(--vs-ink-2); }
.vs .vs-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.vs .vs-roles li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--vs-paper); border: 1px solid var(--vs-line); transition: transform 0.5s var(--vs-ease-out), box-shadow 0.5s; }
.vs .vs-roles li:hover { transform: translateY(-3px); box-shadow: var(--vs-shadow-1); }
.vs .vs-roles b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-blue); }
.vs .vs-roles span span { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--vs-ink); }
.vs .vs-role-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--vs-blue-soft); color: var(--vs-blue); }
.vs .vs-role-ic--sun { background: var(--vs-sun-soft); color: #c25e00; }
.vs .vs-role-ic--leaf { background: var(--vs-leaf-soft); color: #3f7f17; }

/* ---------- Project rail ---------- */
.vs .vs-rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.vs .vs-rail::-webkit-scrollbar { display: none; }
.vs .vs-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.vs .vs-rail.is-dragging * { pointer-events: none; }
.vs .vs-rail-track { display: flex; gap: 16px; width: max-content; padding: 8px max(var(--vs-gutter), calc((100vw - var(--vs-wrap)) / 2)) 28px; }
.vs .vs-shot { position: relative; width: 330px; scroll-snap-align: start; scroll-margin-left: max(var(--vs-gutter), calc((100vw - var(--vs-wrap)) / 2)); border-radius: var(--vs-r-lg); overflow: hidden; background: var(--vs-paper); border: 1px solid var(--vs-line); box-shadow: var(--vs-shadow-1); transition: transform 0.6s var(--vs-ease-out), box-shadow 0.6s var(--vs-ease-out); }
.vs .vs-shot:hover { transform: translateY(-5px); box-shadow: var(--vs-shadow-2); }
.vs .vs-shot-img { aspect-ratio: 3 / 2; overflow: hidden; }
.vs .vs-shot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vs-ease-out); }
.vs .vs-shot:hover .vs-shot-img img { transform: scale(1.06); }
.vs .vs-shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.vs .vs-shot figcaption b { font-size: 14.5px; font-weight: 700; }
.vs .vs-shot figcaption span { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-ink-3); }
.vs .vs-shot--more { display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; background: var(--vs-grad-blue); color: var(--vs-ivory); border-color: transparent; }
.vs .vs-shot--more b { font: 500 32px/1.05 var(--vs-serif); }
.vs .vs-shot--more span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.vs .vs-rail-nav { display: flex; gap: 8px; }
.vs .vs-rail-nav button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--vs-line-2); background: var(--vs-paper); transition: background-color 0.3s, color 0.3s, transform 0.4s var(--vs-ease-spring); }
.vs .vs-rail-nav button:hover { background: var(--vs-blue); color: var(--vs-ivory); border-color: var(--vs-blue); }
.vs .vs-rail-nav button:active { transform: scale(0.92); }

/* ---------- Savings ---------- */
.vs .vs-save { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; }
.vs .vs-save-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); border-radius: var(--vs-r-xl); background: var(--vs-paper); border: 1px solid var(--vs-line); overflow: hidden; isolation: isolate; }
.vs .vs-save-card h3 { font: 500 clamp(30px, 3vw, 42px)/1.05 var(--vs-serif); }
.vs .vs-save-card p { color: var(--vs-ink-2); font-size: 16px; }
.vs .vs-save-card .vs-note { font: italic 500 21px/1.35 var(--vs-serif); color: var(--vs-blue); }
.vs .vs-save-card--photo { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 26px; align-items: center; }
.vs .vs-save-photo { align-self: stretch; border-radius: 24px; overflow: hidden; min-height: 260px; }
.vs .vs-save-photo img { width: 100%; height: 100%; object-fit: cover; }
.vs .vs-save-card--blue { background: radial-gradient(80% 90% at 100% 0%, rgba(255, 184, 92, 0.32), transparent 60%), var(--vs-grad-blue); color: var(--vs-ivory); border-color: transparent; }
.vs .vs-save-card--blue h3 { color: var(--vs-ivory); }
.vs .vs-save-card--blue p { color: rgba(240, 246, 255, 0.86); }
.vs .vs-save-card--blue .vs-note { color: var(--vs-sun-light); }
.vs .vs-save-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--vs-sun-soft); color: #c25e00; }
.vs .vs-save-card--blue .vs-save-ic { background: rgba(255, 255, 255, 0.14); color: var(--vs-sun-light); }
.vs .vs-save-ic .vs-ic { width: 28px; height: 28px; }

/* ---------- Testimonials ---------- */
.vs .vs-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vs .vs-quote { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: var(--vs-r-lg); background: var(--vs-paper); border: 1px solid var(--vs-line); transition: transform 0.6s var(--vs-ease-out), box-shadow 0.6s var(--vs-ease-out); }
.vs .vs-quote:hover { transform: translateY(-5px); box-shadow: var(--vs-shadow-2); }
.vs .vs-quote-mark { font: italic 500 72px/0.6 var(--vs-serif); color: var(--vs-sun); height: 30px; }
.vs .vs-quote blockquote { font: 500 22px/1.35 var(--vs-serif); color: var(--vs-ink); text-wrap: pretty; }
.vs .vs-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--vs-line-2); }
.vs .vs-quote figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 3px var(--vs-paper), 0 0 0 4px var(--vs-line-2); }
.vs .vs-quote figcaption b { display: block; font-size: 15px; font-weight: 800; }
.vs .vs-quote figcaption span { display: block; font-size: 13px; color: var(--vs-ink-3); font-weight: 600; }

/* ---------- Blog ---------- */
.vs .vs-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vs .vs-post { position: relative; display: flex; flex-direction: column; border-radius: var(--vs-r-lg); background: var(--vs-paper); border: 1px solid var(--vs-line); overflow: hidden; transition: transform 0.6s var(--vs-ease-out), box-shadow 0.6s var(--vs-ease-out), border-color 0.3s; }
.vs .vs-post:hover { transform: translateY(-5px); box-shadow: var(--vs-shadow-2); border-color: rgba(11, 58, 166, 0.2); }
.vs .vs-post-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vs-canvas-2); }
.vs .vs-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vs-ease-out); }
.vs .vs-post:hover .vs-post-img img { transform: scale(1.05); }
.vs .vs-post-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.vs .vs-post-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-ink-3); }
.vs .vs-post-meta span:first-child { padding: 5px 11px; border-radius: 999px; background: var(--vs-blue-soft); color: var(--vs-blue-2); letter-spacing: 0.04em; }
.vs .vs-post h3 { font: 500 25px/1.12 var(--vs-serif); text-wrap: balance; color: var(--vs-ink); }
.vs .vs-post p { font-size: 15px; color: var(--vs-ink-2); }
.vs .vs-post-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14px; font-weight: 700; color: var(--vs-blue); }
.vs .vs-post:hover .vs-post-more .vs-ic { transform: translateX(4px); }
.vs .vs-post-more .vs-ic { transition: transform 0.45s var(--vs-ease-out); }

/* ---------- Closing panel + survey pass ---------- */
.vs .vs-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 40px;
  padding: clamp(30px, 5.5vw, 76px); border-radius: 40px; overflow: hidden; isolation: isolate;
  background: var(--vs-grad-blue); color: rgba(240, 246, 255, 0.86); box-shadow: 0 40px 90px -40px rgba(8, 40, 122, 0.7);
}
.vs .vs-panel::before { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(95, 168, 46, 0.35), transparent); }
.vs .vs-panel::after {
  content: ""; position: absolute; z-index: -1; right: -140px; top: -160px; width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(255, 217, 160, 0.25); box-shadow: 0 0 0 46px rgba(255, 217, 160, 0.05), 0 0 0 92px rgba(255, 217, 160, 0.035), 0 0 0 138px rgba(255, 217, 160, 0.025);
}
.vs .vs-panel .vs-eyebrow { color: var(--vs-sun-light); }
.vs .vs-panel .vs-eyebrow::before { background: var(--vs-sun-light); }
.vs .vs-panel-copy > p { margin-top: 18px; font-size: 18px; max-width: 540px; }
.vs .vs-panel-contacts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-size: 14.5px; font-weight: 650; }
.vs .vs-panel-contacts a { display: inline-flex; align-items: center; gap: 8px; color: var(--vs-ivory); opacity: 0.9; }
.vs .vs-panel-contacts a:hover { opacity: 1; color: var(--vs-ivory); }
.vs .vs-pass-stage { display: grid; justify-items: center; gap: 14px; perspective: 1000px; }
.vs .vs-pass { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; width: min(380px, 100%); aspect-ratio: 1.586; }
.vs .vs-pass-face {
  position: relative; height: 100%; display: flex; flex-direction: column; padding: 22px 24px; border-radius: 24px; overflow: hidden; color: var(--vs-ink);
  background:
    repeating-radial-gradient(circle at 115% -20%, rgba(240, 138, 24, 0.12) 0 1px, transparent 1px 9px),
    radial-gradient(120% 90% at 0% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #fffaf2, #f4ead9 70%, #ecdcc4);
  box-shadow: 0 40px 70px -30px rgba(2, 12, 40, 0.6), 0 1px 0 #fff inset;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 0.7s var(--vs-ease-out);
}
.vs .vs-pass.is-tilting .vs-pass-face { transition: transform 0.12s linear; }
.vs .vs-pass-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.6), transparent 45%); }
.vs .vs-pass-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.45) 48%, transparent 58%); transform: translateX(-120%); animation: vsPassShine 7s var(--vs-ease-io) 2s infinite; }
@keyframes vsPassShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.vs .vs-pass-top { display: flex; justify-content: space-between; align-items: center; }
.vs .vs-pass-mono { font: 600 30px/1 var(--vs-serif); letter-spacing: -0.04em; background: var(--vs-grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs .vs-pass-mono i { font-style: italic; background: var(--vs-grad-sun); -webkit-background-clip: text; background-clip: text; }
.vs .vs-pass-kind { font-size: 10px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--vs-blue); }
.vs .vs-pass-mid { margin-top: auto; }
.vs .vs-pass small { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-ink-3); margin-bottom: 4px; }
.vs .vs-pass-mid b { display: block; font: 500 30px/1.05 var(--vs-serif); color: var(--vs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs .vs-pass-bot { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: end; gap: 12px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--vs-ink); }
.vs .vs-pass-bot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs .vs-pass-seal { width: 38px; height: 38px; border-radius: 50%; background: var(--vs-grad-sun); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.3), inset 0 0 0 5px rgba(120, 60, 0, 0.22), 0 4px 10px -4px rgba(60, 20, 0, 0.5); }
.vs .vs-pass-caption { font-size: 13px; color: rgba(240, 246, 255, 0.75); font-weight: 600; }

/* ---------- Footer ---------- */
.vs-footer { background: var(--vs-wash-blue), linear-gradient(180deg, var(--vs-canvas-2), #ece5d6); border-top: 1px solid var(--vs-line); padding: 60px 0 32px; }
.vs .vs-footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; }
.vs .vs-footer-brand img { height: 64px; width: auto; }
.vs .vs-footer-brand p { margin-top: 16px; max-width: 380px; font-size: 15px; color: var(--vs-ink-2); }
.vs .vs-footer-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 800; font-size: 17px; color: var(--vs-blue); }
.vs .vs-footer-phone:hover { color: var(--vs-blue-3); }
.vs .vs-socials { display: flex; gap: 8px; margin-top: 16px; }
.vs .vs-socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--vs-paper); border: 1px solid var(--vs-line); color: var(--vs-ink-2); transition: background-color 0.3s, color 0.3s, transform 0.4s var(--vs-ease-spring); }
.vs .vs-socials a:hover { background: var(--vs-blue); color: var(--vs-ivory); transform: translateY(-2px); }
.vs .vs-footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vs .vs-footer-cols h4 { font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-ink-3); margin-bottom: 14px; }
.vs .vs-footer-cols li + li { margin-top: 8px; }
.vs .vs-footer-cols a { font-size: 14.5px; font-weight: 600; color: var(--vs-ink-2); transition: color 0.25s; }
.vs .vs-footer-cols a:hover { color: var(--vs-blue); }
.vs .vs-footer-cols address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--vs-ink-2); }
.vs .vs-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--vs-line); font-size: 13.5px; color: var(--vs-ink-3); font-weight: 600; }
.vs .vs-footer-bottom a { color: var(--vs-ink-2); font-weight: 700; }
.vs .vs-footer-bottom a:hover { color: var(--vs-blue); }
.vs .vs-credit { display: inline-flex; align-items: center; gap: 12px; }
.vs .vs-credit-logo { position: relative; display: inline-block; line-height: 0; border-radius: 9px; transition: transform 0.35s var(--vs-ease-spring), filter 0.3s; }
.vs .vs-credit-logo:hover { transform: scale(1.05); filter: saturate(1.08); }
.vs .vs-credit-logo img { display: block; height: 38px; width: auto; border-radius: 9px; box-shadow: 0 8px 18px -10px rgba(170, 10, 24, 0.55); }
.vs .vs-credit-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vs .vs-spark { fill: none; stroke: url(#vsBabaGold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28 100; stroke-dashoffset: 28; filter: drop-shadow(0 0 9px rgba(250, 204, 21, 0.95)); animation: vsSpark 1.8s linear infinite; }
@keyframes vsSpark { 0% { stroke-dashoffset: 28; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.vs .vs-footer-motto { letter-spacing: 0.24em; text-transform: uppercase; font-size: 11.5px; font-weight: 800; color: var(--vs-sun); }

/* ---------- Sheets (quote, services, more) ---------- */
.vs-sheet { position: fixed; inset: 0; z-index: 99999; display: grid; align-items: center; justify-items: center; padding: 20px; visibility: hidden; pointer-events: none; }
.vs-sheet.is-open { visibility: visible; pointer-events: auto; }
.vs .vs-sheet-scrim { position: absolute; inset: 0; background: rgba(12, 22, 48, 0.42); opacity: 0; transition: opacity 0.35s var(--vs-ease-out); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vs-sheet.is-open .vs-sheet-scrim { opacity: 1; }
.vs .vs-sheet-panel {
  position: relative; width: min(560px, 100%); max-height: calc(100svh - 40px); overflow: auto; overscroll-behavior: contain;
  padding: 28px; border-radius: 30px; background: var(--vs-paper); box-shadow: var(--vs-shadow-3);
  opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.35s var(--vs-ease-out), transform 0.5s var(--vs-ease-out);
}
.vs-sheet.is-open .vs-sheet-panel { opacity: 1; transform: none; }
.vs .vs-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vs .vs-sheet-head h2 { font: 500 34px/1.05 var(--vs-serif); }
.vs .vs-sheet-head h2 em { font-style: italic; color: var(--vs-blue); }
.vs .vs-sheet-head p { margin-top: 8px; font-size: 15px; color: var(--vs-ink-2); }
.vs .vs-sheet-x { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--vs-canvas); }
.vs .vs-sheet-x:hover { background: var(--vs-canvas-2); }
.vs .vs-sheet-label { margin: 22px 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-ink-3); }
.vs .vs-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vs .vs-sheet-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.vs .vs-sheet-list { display: grid; gap: 4px; margin-top: 14px; }
.vs .vs-sheet-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; transition: background-color 0.25s; }
.vs .vs-sheet-list a:hover { background: var(--vs-canvas); }
.vs .vs-sheet-list b { display: block; font-size: 15px; font-weight: 700; }
.vs .vs-sheet-list small { display: block; font-size: 13px; color: var(--vs-ink-3); }
.vs .vs-sheet-list .vs-mega-thumb { width: 44px; height: 44px; }
.vs .vs-sheet-list .vs-role-ic { width: 44px; height: 44px; }
/* Contact Form 7 inside the quote sheet */
.vs .vs-form .wpcf7 { margin-top: 6px; }
.vs .vs-form form p, .vs .vs-form .wpcf7-form > div, .vs .vs-form .wpcf7-form > p { margin: 0 0 12px; }
.vs .vs-form label { display: block; font-size: 13px; font-weight: 700; color: var(--vs-ink-2); }
.vs .vs-form br { display: none; }
.vs .vs-form input[type="text"], .vs .vs-form input[type="tel"], .vs .vs-form input[type="email"], .vs .vs-form select, .vs .vs-form textarea {
  display: block; width: 100%; height: 52px; margin-top: 6px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--vs-line-2);
  background: #fff; font: 500 15px/1.2 var(--vs-sans); color: var(--vs-ink); box-shadow: none; outline: none; transition: border-color 0.25s, box-shadow 0.25s;
}
.vs .vs-form textarea { height: 120px; padding: 14px 16px; resize: vertical; }
.vs .vs-form input:focus, .vs .vs-form select:focus, .vs .vs-form textarea:focus { border-color: var(--vs-blue); box-shadow: 0 0 0 4px rgba(11, 58, 166, 0.1); }
.vs .vs-form fieldset.hidden-fields-container { display: none; }
.vs .vs-form .egx-contact-5-content, .vs .vs-form .item { display: block; width: auto; margin: 0 0 12px; padding: 0; border: 0; background: none; }
.vs .vs-form .btn-icon { display: none; }
.vs .vs-form input[type="submit"], .vs .vs-form button[type="submit"] {
  width: 100%; height: 54px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--vs-grad-blue); color: var(--vs-ivory);
  font: 700 15.5px/1 var(--vs-sans); cursor: pointer; box-shadow: var(--vs-shadow-blue); transition: transform 0.4s var(--vs-ease-spring), box-shadow 0.3s;
}
.vs .vs-form button[type="submit"] .btn-text { color: inherit; font: inherit; }
.vs .vs-form input[type="submit"]:hover, .vs .vs-form button[type="submit"]:hover { box-shadow: 0 18px 36px -14px rgba(11, 58, 166, 0.72); }
.vs .vs-form input[type="submit"]:active, .vs .vs-form button[type="submit"]:active { transform: scale(0.97); }
.vs .vs-form .wpcf7-spinner { position: absolute; margin: 18px 0 0 -40px; }
.vs .vs-form .wpcf7-response-output { margin: 12px 0 0 !important; padding: 12px 14px !important; border-radius: 14px; font-size: 14px; }
.vs .vs-form .wpcf7-not-valid-tip { font-size: 12.5px; margin-top: 4px; }

/* ---------- Inner pages: the original Eergx content (its photos, illustrations and animations) in the new look ----------
   The theme draws everything from a few variables, so swapping them re-colours buttons, icons, lines and gradients. */
body.vs26:not(.vs26-native) {
  --urbanist: var(--vs-sans);
  --inter: var(--vs-sans);
  --egx-pr-1: #0b3aa6;
  --egx-pr-2: #f6a83d;
  --egx-gd-1: linear-gradient(140deg, #1f52c9 0%, #0b3aa6 48%, #08287a 100%);
  --egx-gd-2: linear-gradient(90deg, #0b3aa6 0%, #f08a18 100%);
  --egx-heading-1: #16213a;
  --egx-para-1: #4a5468;
  --e-global-color-primary: #0b3aa6;
  --e-global-color-secondary: #16213a;
  --e-global-color-text: #4a5468;
  --e-global-color-accent: #f08a18;
  --e-global-typography-primary-font-family: "VS Cormorant";
  --e-global-typography-secondary-font-family: "VS Cormorant";
  --e-global-typography-text-font-family: "VS Jakarta";
  --e-global-typography-accent-font-family: "VS Jakarta";
  font-family: var(--vs-sans);
  color: var(--vs-ink-2);
  font-variant-numeric: lining-nums;
}
body.vs26:not(.vs26-native) #page :is(p, li, span, a, label, input, textarea, button, .elementor-widget-text-editor, .elementor-icon-list-text) { font-family: var(--vs-sans) !important; }
body.vs26:not(.vs26-native) #page :is(h1, h2, h3, h4, .elementor-heading-title, .egx-section-title-1, .hero-title, .title) { font-family: var(--vs-serif) !important; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.08; }
body.vs26:not(.vs26-native) #page :is(h1, h2, h3, h4, .elementor-heading-title) :is(span, div) { font-family: inherit !important; }
body.vs26:not(.vs26-native) #page :is(h5, h6) { font-family: var(--vs-sans) !important; letter-spacing: 0.02em; }
/* Section kickers in the theme become the harrikumar.com eyebrow style */
body.vs26:not(.vs26-native) #page :is(.egx-subtitle-1, .egx-sub-title, .sub-title, .subtitle) { font-family: var(--vs-sans) !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-blue) !important; }
/* Buttons: blue pill with the same sheen as the new header */
body.vs26:not(.vs26-native) #page :is(.egx-btn-1, .egx-btn-2, .egx-btn-3, .elementor-button) { border-radius: 999px !important; box-shadow: var(--vs-shadow-blue); background-image: var(--vs-grad-blue) !important; color: var(--vs-ivory) !important; }
body.vs26:not(.vs26-native) #page :is(.egx-btn-1, .egx-btn-2, .egx-btn-3, .elementor-button) * { color: inherit !important; }
/* Photos and cards get the softer harrikumar.com corners and shadows */
body.vs26:not(.vs26-native) #page :is(.elementor-widget-image img, .main-img, .img-cover) { border-radius: 26px; }
body.vs26:not(.vs26-native) #page .elementor-widget-image img { box-shadow: var(--vs-shadow-2); }
body.vs26:not(.vs26-native) #page :is(.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .nice-select) { border-radius: 16px !important; border: 1px solid var(--vs-line-2) !important; background: #fff !important; font-family: var(--vs-sans) !important; }
body.vs26:not(.vs26-native) .vs-page-pad { height: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  :root { --vs-appbar-h: 68px; }
  .vs .vs-topnav, .vs .vs-appbar-cta, .vs .vs-hide-tab { display: none; }
  .vs-tabbar { display: grid; }
  body.vs26 { padding-bottom: calc(90px + var(--vs-safe-b)); }
  .vs-appbar-inner { height: 58px; margin-top: 8px; padding: 0 6px 0 12px; justify-content: space-between; }
  .vs .vs-brand img { height: 40px; }
  .vs .vs-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .vs .vs-stage { max-width: 560px; }
  .vs .vs-hero-row { grid-template-columns: 1fr; row-gap: 26px; }
  .vs .vs-bento { grid-template-columns: 1fr 1fr; }
  .vs .vs-bento .vs-card:nth-child(n) { grid-column: auto; grid-row: auto; }
  .vs .vs-bento .vs-card--feature { grid-column: 1 / -1; min-height: 0; }
  .vs .vs-flow { grid-template-columns: 1fr 1fr; gap: 16px; }
  .vs .vs-flow-card:not(:last-child)::after { display: none; }
  .vs .vs-person { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px; align-items: start; }
  .vs .vs-person-photo { max-width: 400px; }
  .vs .vs-save { grid-template-columns: 1fr; }
  .vs .vs-quotes, .vs .vs-posts { grid-template-columns: 1fr 1fr; }
  .vs .vs-panel { grid-template-columns: 1fr; }
  .vs .vs-footer-top { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .vs-hero { padding-top: calc(var(--vs-appbar-h) + 22px); }
  .vs .vs-hero-name { font-size: clamp(60px, 18vw, 92px); }
  .vs .vs-btn-row { margin-top: 24px; }
  .vs .vs-btn-row .vs-btn { flex: 1 1 auto; }
  .vs .vs-stats { gap: 12px; }
  .vs .vs-stats > div + div { padding-left: 12px; }
  .vs .vs-stats dt { font-size: 34px; }
  .vs .vs-stats dd { font-size: 12px; }
  .vs .vs-stage { aspect-ratio: 1 / 0.98; }
  .vs .vs-stage-tag { top: 2%; right: 0; font-size: 11.5px; padding: 7px 11px; }
  .vs .vs-stage-cap { left: 12px; bottom: 12px; font-size: 12px; }
  .vs .vs-stage-dots { right: 12px; bottom: 20px; }
  .vs .vs-logo-tile { width: 124px; height: 56px; }
  .vs .vs-bento { grid-template-columns: 1fr; gap: 14px; }
  .vs .vs-card { padding: 24px; min-height: 0; }
  .vs .vs-card--feature { padding: 26px; }
  .vs .vs-card-thumb { border-radius: 18px; }
  .vs .vs-card-body { padding-right: 0; padding-bottom: 56px; }
  .vs .vs-card-go { right: 20px; bottom: 20px; }
  .vs .vs-feature-photo { min-height: 210px; }
  .vs .vs-flow { grid-template-columns: 1fr; }
  .vs .vs-mv, .vs .vs-roles { grid-template-columns: 1fr; }
  .vs .vs-person { grid-template-columns: 1fr; }
  .vs .vs-person-photo { max-width: 340px; width: 100%; }
  .vs .vs-save-card--photo { grid-template-columns: 1fr; }
  .vs .vs-save-photo { min-height: 200px; }
  .vs .vs-quotes, .vs .vs-posts { grid-template-columns: 1fr; }
  .vs .vs-shot { width: 78vw; max-width: 330px; }
  .vs .vs-panel { border-radius: 30px; padding: 30px 22px; }
  .vs .vs-pass-mid b { font-size: 26px; }
  .vs .vs-footer-cols { grid-template-columns: 1fr 1fr; }
  .vs .vs-footer-cols > div:last-child { grid-column: 1 / -1; }
  .vs-sheet { align-items: end; padding: 0; }
  .vs .vs-sheet-panel { width: 100%; max-height: 88svh; border-radius: 28px 28px 0 0; padding: 22px 18px calc(22px + var(--vs-safe-b)); transform: translateY(40px); }
  .vs .vs-sheet-head h2 { font-size: 30px; }
}
@media (max-width: 380px) {
  .vs .vs-hero-name { font-size: 58px; }
  .vs .vs-quick-label { width: 100%; }
  .vs .vs-sheet-alt { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vs .vs-spark { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
  .vs *, .vs *::before, .vs *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .vs-js .vs .vs-rv, .vs-js .vs .vs-hero-in { opacity: 1; transform: none; }
  .vs-js .vs .vs-rv-img { clip-path: none; }
  .vs-js .vs .vs-hn-in { transform: none; }
}