/* ==========================================================================
   SHYAM ELECTRIC CO. — site stylesheet
   --------------------------------------------------------------------------
   Theme taken from the logo: logo yellow #FFD250 + deep charcoal / near-black,
   on a warm-white base.  Headlines: Archivo (bold, slightly condensed — echoes
   the "ELECTRIC COMPANY" wordmark).  Body: Outfit (served locally).
   Layout: golden ratio φ = 1.618 — spacing 6·10·16·26·42·68·110.
   All classes are prefixed  v-  (header classes:  sh-).
   ========================================================================== */

/* ---------- Outfit (local) ---------- */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../fonts/outfit-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../fonts/outfit-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ₹ sign — matching sans glyph */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 900; font-display: swap; unicode-range: U+20B9; src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2'); }

:root {
  /* brand */
  --sun: #FFD250;       /* logo yellow */
  --sun-2: #F2B807;     /* deeper yellow (hover, borders) */
  --sun-soft: #FFF5D1;
  --ink-gold: #7A5800;  /* yellow-family colour that is readable on white */
  --char: #141414;      /* near-black */
  --char-2: #1D1D1F;
  --char-3: #2C2C2E;
  --steel: #3A3A3C;     /* logo charcoal */
  /* legacy names used across the stylesheet (mapped to the new palette) */
  --navy: var(--char); --navy-2: var(--char-2); --navy-3: var(--char-3);
  --green: #1A1A1A; --green-2: #000000; --green-soft: #FFF3C8;
  --amber: var(--sun); --amber-2: var(--sun-2); --amber-soft: var(--sun-soft);
  --red: #C62828;
  --bg: #F6F4EF; --line: #E4DFD4; --line-2: #EEEAE2;
  --text: #141414; --text-2: #34312C; --text-3: #57524B;
  --on-dark: #FFFFFF; --on-dark-2: #E9E6E0;
  /* aliases used by a few inline styles */
  --ink: var(--char); --rule: var(--line); --cell: var(--char); --laterite: var(--ink-gold); --muted: var(--text-3);
  --s0: 6px; --s1: 10px; --s2: 16px; --s3: 26px; --s4: 42px; --s5: 68px; --s6: 110px;
  --wrap: 1240px; --gut: 26px;
  --r1: 8px; --r2: 12px; --r3: 18px;
  --sh-1: 0 1px 2px rgba(20,18,14,.06), 0 4px 14px rgba(20,18,14,.06);
  --sh-2: 0 2px 6px rgba(20,18,14,.06), 0 24px 48px -18px rgba(0,0,0,.30);
  --ease: cubic-bezier(.2,.75,.2,1);
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-d: 'Archivo', 'Outfit', system-ui, sans-serif;
  --head-h: 76px;
}
@media (max-width: 640px) { :root { --gut: 16px; } }

/* sitewide font (hero & header included — only the typeface changes there) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html body { font-family: var(--font); background: #fff; color: var(--text); margin: 0; overflow-x: clip; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* clearer text inside the hero/header (no faded copy anywhere) */
body .text-white\/40, body .text-white\/50 { color: rgba(255,255,255,.86) !important; }
body .text-white\/60 { color: rgba(255,255,255,.9) !important; }
body .text-white\/70, body .text-white\/80, body .text-white\/90 { color: rgba(255,255,255,.96) !important; }
body .text-slate-400 { color: #475569 !important; }
body .text-slate-500 { color: #334155 !important; }

/* ---------- base ---------- */
.v { font-family: var(--font); color: var(--text); font-size: 17px; line-height: 1.65; }
.v *, .v *::before, .v *::after { box-sizing: border-box; }
.v img { display: block; max-width: 100%; }
.v a { color: inherit; text-decoration: none; }
.v h1, .v h2, .v h3, .v h4, .v h5, .v p, .v figure, .v blockquote, .v dl, .v dd, .v ul, .v ol { margin: 0; padding: 0; }
.v ul, .v ol { list-style: none; }
.v :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.v-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.v-sec { padding-top: var(--s6); padding-bottom: var(--s6); position: relative; }
.v-sec--flush-top { padding-top: 0; }
.v-silver { background: var(--bg); }
.v-night { background: var(--navy); color: var(--on-dark-2); }
.v-blue { background: var(--navy-2); color: var(--on-dark-2); }
@media (max-width: 900px) { .v-sec { padding-top: var(--s5); padding-bottom: var(--s5); } }

/* ---------- type ---------- */
.v-d1, .v-d2, .v-d3 { font-family: var(--font); color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.v-d1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; }
.v-d2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; }
.v-d3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.25; letter-spacing: -.01em; }
.v-night .v-d1, .v-night .v-d2, .v-night .v-d3, .v-blue .v-d1, .v-blue .v-d2, .v-blue .v-d3,
.v-panel--night .v-d3, .v-ph .v-d1 { color: #fff; }
.v-lede { font-size: 18px; line-height: 1.65; color: var(--text-2); max-width: 640px; }
.v-night .v-lede, .v-blue .v-lede, .v-ph .v-lede { color: var(--on-dark-2); }
.v-small { font-size: 15px; color: var(--text-3); line-height: 1.6; }
.v-night .v-small, .v-blue .v-small, .v-panel--night .v-small { color: #D3CFC8; }
.v-num { font-weight: 700; letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.v-mark { display: none; }
.v-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 14px; font-weight: 600; margin-bottom: var(--s2); }
.v-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.v-night .v-label, .v-blue .v-label { background: rgba(255,255,255,.1); color: #fff; }
.v-accent { color: var(--green); }
.v-night .v-accent, .v-blue .v-accent { color: var(--amber); }

.v-head { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); align-items: end; margin-bottom: var(--s5); }
.v-head--center { display: block; text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.v-head--center .v-lede { margin: var(--s2) auto 0; }
@media (max-width: 900px) { .v-head { grid-template-columns: 1fr; gap: var(--s2); margin-bottom: var(--s4); } }

/* ---------- layout ---------- */
.v-phi { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); }
.v-phi-r { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); }
.v-mid { align-items: center; } .v-top { align-items: start; } .v-end { align-items: end; }
@media (max-width: 900px) { .v-phi, .v-phi-r { grid-template-columns: 1fr; gap: var(--s4); } }
.v-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.v-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.v-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
@media (max-width: 1024px) { .v-g3, .v-g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .v-g2, .v-g3, .v-g4 { grid-template-columns: 1fr; } }
.v-gap1 { margin-top: var(--s1) !important; } .v-gap2 { margin-top: var(--s2) !important; } .v-gap3 { margin-top: var(--s3) !important; } .v-gap4 { margin-top: var(--s4) !important; } .v-gap5 { margin-top: var(--s5) !important; }
.v-stick { position: sticky; top: 130px; }
@media (max-width: 900px) { .v-stick { position: static; } }

/* ---------- buttons ---------- */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: var(--r1); border: 2px solid transparent;
  font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.v-btn::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); transform: translateX(-101%); transition: transform .45s var(--ease); z-index: -1; }
.v-btn:hover::after { transform: none; }
.v-btn:hover { transform: translateY(-2px); }
.v-btn--sun { background: var(--amber); color: var(--navy) !important; }
.v-btn--sun:hover { box-shadow: 0 12px 26px -10px rgba(255,210,80,.7); }
.v-btn--blue { background: var(--green); color: #fff !important; }
.v-btn--blue:hover { box-shadow: 0 12px 26px -10px rgba(0,0,0,.45); }
.v-btn--navy { background: var(--navy); color: #fff !important; }
.v-btn--line { border-color: var(--navy); color: var(--navy) !important; background: transparent; }
.v-btn--line:hover { background: var(--navy); color: #fff !important; }
.v-btn--ghost { border-color: rgba(255,255,255,.6); color: #fff !important; background: transparent; }
.v-btn--ghost:hover { background: #fff; color: var(--navy) !important; }
.v-btn--wa { background: #1FA855; color: #fff !important; }
.v-btn--block { width: 100%; }
.v-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.v-btns { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.v-link { font-weight: 600; color: var(--green) !important; display: inline-flex; align-items: center; gap: 8px; }
.v-link svg { transition: transform .3s var(--ease); }
.v-link:hover svg { transform: translateX(4px); }
.v-night .v-link, .v-blue .v-link, .v-panel--night .v-link { color: var(--amber) !important; }

/* ---------- media frame ---------- */
.v-frame { position: relative; }
.v-frame__img { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1 / 1.1; background: var(--bg); }
.v-frame__img img { width: 100%; height: 100%; object-fit: cover; }
.v-frame::before { content: ""; position: absolute; inset: var(--s3) calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3); border: 2px solid var(--amber); border-radius: var(--r3); z-index: -1; }
.v-frame__badge { position: absolute; left: calc(-1 * var(--s3)); bottom: var(--s4); background: #fff; border-radius: var(--r2); padding: var(--s2) var(--s3); box-shadow: var(--sh-2); display: flex; align-items: center; gap: var(--s2); }
.v-frame__badge b { font-size: 34px; color: var(--green); line-height: 1; }
.v-frame__badge span { font-size: 14px; font-weight: 600; color: var(--text-2); line-height: 1.35; }
.v-arch { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1.618 / 1; background: var(--bg); }
.v-arch img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .v-frame::before { display: none; } .v-frame__badge { left: var(--s2); bottom: var(--s2); } .v-frame__img { aspect-ratio: 1.618 / 1; } }

/* ---------- counters strip ---------- */
.v-counts { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--r3); box-shadow: var(--sh-2); position: relative; z-index: 3; }
.v-counts > div { padding: var(--s4) var(--s3); text-align: center; }
.v-counts > div + div { border-left: 1px solid var(--line); }
.v-counts b { display: block; font-size: clamp(34px, 3.4vw, 46px); color: var(--navy); line-height: 1; font-weight: 700; }
.v-counts b em { font-style: normal; color: var(--amber-2); }
.v-counts > div > span { display: block; margin-top: var(--s1); font-size: 15px; font-weight: 500; color: var(--text-2); }
.v-counts-wrap { margin-top: calc(-1 * var(--s5)); position: relative; z-index: 4; }
@media (max-width: 900px) { .v-counts { grid-template-columns: 1fr 1fr; } .v-counts > div:nth-child(3) { border-left: 0; } .v-counts > div:nth-child(n+3) { border-top: 1px solid var(--line); } .v-counts-wrap { margin-top: 0; padding-top: var(--s4); } }

/* ---------- feature list ---------- */
.v-feats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.v-feat { display: flex; gap: var(--s2); align-items: flex-start; }
.v-feat .ic { width: 52px; height: 52px; border-radius: var(--r2); background: var(--green-soft); color: var(--green); display: grid; place-items: center; flex-shrink: 0; transition: background .3s, color .3s; }
.v-feat:hover .ic { background: var(--green); color: #fff; }
.v-feat .ic svg { width: 24px; height: 24px; }
.v-feat h4 { font-size: 18px; font-weight: 600; color: var(--text); }
.v-feat p { font-size: 15px; color: var(--text-3); margin-top: 4px; line-height: 1.55; }
.v-night .v-feat .ic { background: rgba(255,255,255,.08); color: var(--amber); }
.v-night .v-feat:hover .ic { background: var(--amber); color: var(--navy); }
.v-night .v-feat h4 { color: #fff; } .v-night .v-feat p { color: #D3CFC8; }
@media (max-width: 640px) { .v-feats { grid-template-columns: 1fr; } }

/* ---------- SERVICE CARDS ---------- */
.v-scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 1024px) { .v-scards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v-scards { grid-template-columns: 1fr; } }
.v-scard { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.v-scard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.v-scard:hover { transform: translateY(-8px); box-shadow: var(--sh-2); border-color: transparent; }
.v-scard:hover::after { transform: scaleX(1); }
.v-scard__img { position: relative; aspect-ratio: 1.618 / 1; overflow: hidden; background: var(--navy); }
.v-scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-scard:hover .v-scard__img img { transform: scale(1.08); }
.v-scard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0) 50%, rgba(14,14,14,.55)); }
.v-scard__tag { position: absolute; top: var(--s2); left: var(--s2); z-index: 2; background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.v-scard__ic { position: absolute; right: var(--s3); bottom: -28px; z-index: 3; width: 60px; height: 60px; border-radius: 50%; background: var(--amber); color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(255,210,80,.8); border: 4px solid #fff; transition: transform .5s var(--ease); }
.v-scard:hover .v-scard__ic { transform: rotate(-12deg) scale(1.06); }
.v-scard__ic svg { width: 24px; height: 24px; }
.v-scard__img { overflow: visible; }
.v-scard__img .mask { position: absolute; inset: 0; overflow: hidden; }
.v-scard__body { padding: var(--s4) var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.v-scard h3 { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--text); letter-spacing: -.01em; }
.v-scard p { font-size: 15.5px; color: var(--text-3); line-height: 1.6; }
.v-scard .v-check { margin-top: var(--s0); gap: 8px; }
.v-scard .v-check li { font-size: 15px; color: var(--text-2); }
.v-scard__foot { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }

/* ---------- checks ---------- */
.v-check { display: grid; gap: var(--s1); }
.v-check li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.v-check li::before { content: ""; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.v-night .v-check li, .v-panel--night .v-check li { color: var(--on-dark-2); }
.v-night .v-check li::before, .v-panel--night .v-check li::before { background-color: var(--amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- why band ---------- */
.v-why { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; }
.v-why__img { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1 / 1.15; position: relative; }
.v-why__img img { width: 100%; height: 100%; object-fit: cover; }
.v-why__img .stamp { position: absolute; right: var(--s3); bottom: var(--s3); background: var(--amber); color: var(--navy); border-radius: var(--r2); padding: var(--s2) var(--s3); font-weight: 700; line-height: 1.25; max-width: 220px; }
.v-why__img .stamp b { display: block; font-size: 34px; line-height: 1; }
@media (max-width: 900px) { .v-why { grid-template-columns: 1fr; gap: var(--s4); } .v-why__img { aspect-ratio: 1.618 / 1; } }

/* ---------- process steps ---------- */
.v-tl { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); position: relative; counter-reset: s; }
.v-tl::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.v-tl li { position: relative; }
.v-tl .dot { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid var(--green); color: var(--green); display: grid; place-items: center; font-weight: 700; font-size: 20px; position: relative; z-index: 1; transition: background .3s, color .3s; }
.v-tl li:hover .dot { background: var(--green); color: #fff; }
.v-tl .when { display: inline-block; margin-top: var(--s2); font-size: 13px; font-weight: 600; color: var(--green); background: var(--green-soft); padding: 3px 10px; border-radius: 999px; }
.v-tl h4 { font-size: 18px; font-weight: 700; margin-top: var(--s1); color: var(--text); }
.v-tl p { font-size: 15px; color: var(--text-3); margin-top: 6px; line-height: 1.55; }
.v-night .v-tl::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 8px, transparent 8px 14px); }
.v-night .v-tl .dot { background: var(--navy); border-color: var(--amber); color: var(--amber); }
.v-night .v-tl li:hover .dot { background: var(--amber); color: var(--navy); }
.v-night .v-tl .when { background: rgba(255,210,80,.16); color: var(--amber); }
.v-night .v-tl h4 { color: #fff; } .v-night .v-tl p { color: #D3CFC8; }
@media (max-width: 1024px) {
  .v-tl { grid-template-columns: 1fr; }
  .v-tl::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
  .v-night .v-tl::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.3) 0 8px, transparent 8px 14px); }
  .v-tl li { display: grid; grid-template-columns: 60px 1fr; column-gap: var(--s2); }
  .v-tl .dot { grid-row: span 3; } .v-tl .when { justify-self: start; margin-top: 4px; }
}

/* ---------- estimate ---------- */
.v-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--amber) 0 var(--p, 30%), rgba(255,255,255,.25) var(--p, 30%) 100%); outline: none; cursor: pointer; }
.v-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid var(--amber); box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: grab; }
.v-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid var(--amber); cursor: grab; }
.v-light .v-range { background: linear-gradient(90deg, var(--green) 0 var(--p, 30%), var(--line) var(--p, 30%) 100%); }
.v-light .v-range::-webkit-slider-thumb { border-color: var(--green); }
.v-light .v-range::-moz-range-thumb { border-color: var(--green); }
.v-range-scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-3); margin-top: var(--s1); }
.v-est { background: var(--navy); color: var(--on-dark-2); border-radius: var(--r3); padding: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s5); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.v-est::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 100% 0%, rgba(255,210,80,.22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(255,210,80,.10), transparent 60%); z-index: -1; }
.v-est .v-d2 { color: #fff; }
.v-est .bill { display: flex; align-items: baseline; gap: var(--s1); margin: var(--s3) 0 var(--s2); }
.v-est .bill b { font-size: clamp(42px, 5vw, 64px); color: #fff; line-height: 1; }
.v-est .bill span { color: var(--on-dark-2); }
.v-est .v-range-scale { color: #D3CFC8; }
.v-est-out { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--r2); overflow: hidden; }
.v-est-out div { background: rgba(255,255,255,.06); padding: var(--s2) var(--s3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.v-est-out span { font-size: 15px; color: var(--on-dark-2); }
.v-est-out b { color: #fff; font-size: 24px; }
.v-est-out .hl b { color: var(--amber); }
@media (max-width: 900px) { .v-est { grid-template-columns: 1fr; padding: var(--s4) var(--s3); gap: var(--s4); } }

/* ---------- projects ---------- */
.v-strip-ctl { display: flex; gap: var(--s1); }
.v-strip-ctl button { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: all .25s; }
.v-strip-ctl button:hover { background: var(--navy); color: #fff; }
.v-night .v-strip-ctl button { border-color: rgba(255,255,255,.6); color: #fff; }
.v-night .v-strip-ctl button:hover { background: #fff; color: var(--navy); }
.v-strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 82vw); gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s0) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) var(--s3); scrollbar-width: none; scroll-padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.v-strip::-webkit-scrollbar { display: none; }
.v-proj { scroll-snap-align: start; display: block; position: relative; border-radius: var(--r3); overflow: hidden; background: var(--navy); }
.v-proj .ph { aspect-ratio: 1 / 1.272; position: relative; overflow: hidden; }
.v-proj .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-proj:hover .ph img { transform: scale(1.07); }
.v-proj .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,0) 35%, rgba(14,14,14,.92) 100%); }
.v-proj .kw { position: absolute; left: var(--s3); top: var(--s3); z-index: 2; background: var(--amber); color: var(--navy); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.v-proj .cap { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 2; color: #fff; }
.v-proj h3 { font-size: 21px; font-weight: 700; line-height: 1.3; color: #fff; }
.v-proj .meta { font-size: 14.5px; color: #E9E6E0; margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v-proj .meta span + span::before { content: "·"; margin-right: 8px; color: var(--amber); font-weight: 700; }
.v-proj--wide .ph { aspect-ratio: 1.618 / 1; }

/* ---------- subsidy bars ---------- */
.v-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); align-items: end; height: 300px; border-bottom: 2px solid var(--navy); }
.v-tier { background: var(--navy-2); border-radius: var(--r1) var(--r1) 0 0; color: #fff; padding: var(--s2); display: flex; flex-direction: column; transform-origin: bottom; }
.v-tier b { font-size: clamp(20px, 2.2vw, 28px); line-height: 1; }
.v-tier span { font-size: 14px; color: #DAD6CF; margin-top: 6px; }
.v-tier:last-child { background: var(--green); }
.v-tier-x { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s1); font-size: 15px; font-weight: 600; color: var(--text); }
html.js .v-tiers.reveal-ready .v-tier { transform: scaleY(0); transition: transform 1s var(--ease); }
html.js .v-tiers.is-in .v-tier { transform: scaleY(1); }
html.js .v-tiers.is-in .v-tier:nth-child(2) { transition-delay: .15s; } html.js .v-tiers.is-in .v-tier:nth-child(3) { transition-delay: .3s; }

/* ---------- testimonials ---------- */
.v-tslider { overflow: hidden; }
.v-ttrack { display: flex; gap: var(--s3); transition: transform .7s var(--ease); }
.v .v-tcard { flex: 0 0 calc((100% - 2 * var(--s3)) / 3); background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4) var(--s3) var(--s3); position: relative; }
.v-tcard::before { content: ""; position: absolute; top: var(--s3); right: var(--s3); width: 42px; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD250'%3E%3Cpath d='M9.5 5C6 6.4 4 9.3 4 13v6h6v-6H7c0-2.4 1.2-4.2 3.3-5.1L9.5 5zm10 0C16 6.4 14 9.3 14 13v6h6v-6h-3c0-2.4 1.2-4.2 3.3-5.1L19.5 5z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
.v-tcard .stars { color: var(--amber); letter-spacing: 3px; font-size: 17px; }
.v-tcard p { margin-top: var(--s2); font-size: 16.5px; line-height: 1.65; color: var(--text-2); min-height: 6.6em; }
.v-tcard .who { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line-2); }
.v-tcard .ini { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.v-tcard b { display: block; font-size: 16.5px; color: var(--text); }
.v-tcard small { display: block; font-size: 14px; color: var(--text-3); }
.v-tdots { display: flex; gap: 8px; justify-content: center; margin-top: var(--s4); }
.v-tdots button { width: 10px; height: 10px; border-radius: 99px; border: 0; background: var(--line); cursor: pointer; transition: width .3s, background .3s; padding: 0; }
.v-tdots button.on { width: 32px; background: var(--green); }
@media (max-width: 1024px) { .v .v-tcard { flex-basis: calc((100% - var(--s3)) / 2); } }
@media (max-width: 640px) { .v .v-tcard { flex-basis: 100%; } }

/* ---------- FAQ ---------- */
.v-faq { display: grid; gap: var(--s1); }
.v-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); transition: border-color .3s, box-shadow .3s; }
.v-faq details[open] { border-color: var(--green); box-shadow: var(--sh-1); }
.v-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 20px var(--s3); font-size: 18px; font-weight: 600; color: var(--text); }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 22px; font-weight: 500; transition: transform .35s var(--ease), background .3s, color .3s; }
.v-faq details[open] summary::after { transform: rotate(45deg); background: var(--green); color: #fff; }
.v-faq details p { padding: 0 var(--s3) 20px; color: var(--text-2); font-size: 16px; line-height: 1.65; }
.v-silver .v-faq details { background: #fff; }

/* ---------- CTA band ---------- */
.v-cta { border-radius: var(--r3); background: linear-gradient(110deg, var(--green) 0%, var(--green-2) 55%, var(--navy) 100%); color: #fff; padding: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.v-cta::before { content: ""; position: absolute; right: -110px; top: -110px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,80,.5), transparent 65%); z-index: -1; }
.v-cta .v-d2 { color: #fff; }
.v-cta p { color: #ECE8E0; margin-top: var(--s2); font-size: 17px; }
.v-cta .side { display: grid; gap: var(--s1); }
@media (max-width: 900px) { .v-cta { grid-template-columns: 1fr; padding: var(--s4) var(--s3); } }

/* ---------- page header ---------- */
.v-ph { position: relative; background: var(--navy); color: var(--on-dark-2); overflow: hidden; isolation: isolate; }
.v-ph__bg { position: absolute; inset: 0; z-index: -2; }
.v-ph__bg img { width: 100%; height: 100%; object-fit: cover; }
.v-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(14,14,14,.96) 0%, rgba(14,14,14,.88) 50%, rgba(14,14,14,.6) 100%); }
.v-ph__in { padding-top: var(--s6); padding-bottom: var(--s5); max-width: 860px; }
.v-crumb { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 7px 16px; border-radius: 999px; }
.v-crumb a { color: var(--amber); font-weight: 600; }
.v-ph .v-d1 { margin-top: var(--s3); }
.v-ph .v-lede { margin-top: var(--s2); font-size: 19px; }
.v-ph__sun, .v-ph .v-arch { display: none; }
@media (max-width: 900px) { .v-ph__in { padding-top: var(--s5); padding-bottom: var(--s4); } }

/* ---------- panels / values / tags ---------- */
.v-panel { border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); background: #fff; }
.v-panel--night { background: var(--navy); border-color: var(--navy); color: var(--on-dark-2); }
.v-panel--night h3, .v-panel--night h4 { color: #fff; }
@media (max-width: 640px) { .v-panel { padding: var(--s3); } }
.v-val { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s3); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.v-val:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.v-val .ic { width: 56px; height: 56px; border-radius: var(--r2); background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.v-val .ic svg { width: 26px; height: 26px; }
.v-val h3 { font-size: 19px; font-weight: 700; margin-top: var(--s2); color: var(--text); }
.v-val p { font-size: 15.5px; color: var(--text-3); margin-top: 6px; line-height: 1.6; }
.v-night .v-val { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.v-night .v-val .ic { background: rgba(255,210,80,.15); color: var(--amber); }
.v-night .v-val h3 { color: #fff; } .v-night .v-val p { color: #D3CFC8; }
.v-tag { display: inline-block; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); }
.v-tag--sun { background: var(--amber); color: var(--navy); }
.v-tag--white { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.v-statement { font-size: clamp(20px, 2vw, 25px); line-height: 1.5; font-weight: 500; color: var(--text); }
.v-facts { border-top: 2px solid var(--navy); }
.v-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.v-facts dt { font-size: 16px; color: var(--text-2); }
.v-facts dd { font-size: 24px; color: var(--navy); }

/* ---------- tabs ---------- */
.v-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4); }
.v-tabs button { background: #fff; border: 1px solid var(--line); padding: 10px 20px; border-radius: 999px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .25s; }
.v-tabs button:hover { border-color: var(--navy); color: var(--navy); }
.v-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.v-tabs button em { font-style: normal; font-size: 13px; margin-left: 6px; opacity: .85; }
@media (max-width: 640px) { .v-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .v-tabs::-webkit-scrollbar { display: none; } .v-tabs button { flex-shrink: 0; } }

/* ---------- services detail rows ---------- */
.v-svc-row { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); align-items: center; padding: var(--s5) 0; border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.v-svc-row:nth-child(even) { grid-template-columns: 1.618fr 1fr; }
.v-svc-row:nth-child(even) .ph { order: 2; }
.v-svc-row .ph { border-radius: var(--r3); overflow: hidden; aspect-ratio: 1.618 / 1; position: relative; }
.v-svc-row .ph img { width: 100%; height: 100%; object-fit: cover; }
.v-svc-row .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-svc-row .desc { margin-top: var(--s2); color: var(--text-2); font-size: 17px; }
.v-svc-row .v-check { margin-top: var(--s3); grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .v-svc-row, .v-svc-row:nth-child(even) { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0; } .v-svc-row:nth-child(even) .ph { order: 0; } .v-svc-row .v-check { grid-template-columns: 1fr; } }

/* ---------- work list ---------- */
.v-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 1024px) { .v-work { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v-work { grid-template-columns: 1fr; } }
.v-work article { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s; }
.v-work article:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.v-work .ph { aspect-ratio: 1.618 / 1; overflow: hidden; position: relative; }
.v-work .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-work article:hover .ph img { transform: scale(1.06); }
.v-work .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-work .bd { padding: var(--s3); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v-work .kw { font-size: 30px; line-height: 1; color: var(--green); }
.v-work h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.v-work p { color: var(--text-3); font-size: 15px; line-height: 1.6; }
.v-work dl { margin-top: auto; padding-top: var(--s1); border-top: 1px solid var(--line-2); }
.v-work dl div { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px 0; font-size: 15px; }
.v-work dt { color: var(--text-3); } .v-work dd { font-weight: 600; text-align: right; color: var(--text); }

/* ---------- gallery ---------- */
.v-masonry { columns: 3; column-gap: var(--s2); }
.v-masonry a { display: block; break-inside: avoid; margin-bottom: var(--s2); border-radius: var(--r2); overflow: hidden; position: relative; background: var(--bg); }
.v-masonry img { width: 100%; height: auto; transition: transform .9s var(--ease); }
.v-masonry a:hover img { transform: scale(1.05); }
.v-masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s2) var(--s2); background: linear-gradient(transparent, rgba(14,14,14,.9)); color: #fff; font-size: 15px; font-weight: 600; transform: translateY(100%); transition: transform .45s var(--ease); }
.v-masonry a:hover figcaption, .v-masonry a:focus-visible figcaption { transform: none; }
@media (max-width: 900px) { .v-masonry { columns: 2; } }
@media (hover: none) { .v-masonry figcaption { transform: none; } }
.v-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,8,.95); display: none; align-items: center; justify-content: center; padding: var(--s5) var(--s4); }
.v-lb.on { display: flex; animation: vFade .3s ease; }
.v-lb img { max-width: 100%; max-height: 80vh; border-radius: var(--r1); }
.v-lb .cap { position: absolute; left: 0; right: 0; bottom: var(--s3); text-align: center; color: #fff; font-family: var(--font); font-size: 16px; }
.v-lb button { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: transparent; color: #fff; font-size: 26px; cursor: pointer; display: grid; place-items: center; }
.v-lb button:hover { background: #fff; color: var(--navy); }
.v-lb .x { top: var(--s3); right: var(--s3); } .v-lb .pv { left: var(--s3); top: 50%; transform: translateY(-50%); } .v-lb .nx { right: var(--s3); top: 50%; transform: translateY(-50%); }
@keyframes vFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- forms ---------- */
.v-form { display: grid; gap: var(--s3); }
.v-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 640px) { .v-row { grid-template-columns: 1fr; } }
.v-field label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.v-field input, .v-field select, .v-field textarea { width: 100%; min-height: 54px; padding: 0 var(--s2); border: 1.5px solid var(--line); border-radius: var(--r1); background: #fff;
  font-family: var(--font); font-size: 16px; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.v-field input::placeholder, .v-field textarea::placeholder { color: #77716A; }
.v-field textarea { padding: 14px var(--s2); min-height: 120px; resize: vertical; line-height: 1.5; }
.v-field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333302B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; padding-right: 48px; }
.v-field input:focus, .v-field select:focus, .v-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(242,184,7,.12); }
.v-alert { background: #FDECEC; color: #8B1A1A; border-left: 4px solid var(--red); padding: var(--s2); font-size: 15px; border-radius: 6px; }
.v-contact a, .v-contact div { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.v-contact svg { flex: 0 0 22px; margin-top: 3px; color: var(--amber); }
.v-contact b { display: block; color: #fff; font-size: 17px; word-break: break-word; font-weight: 600; }
.v-contact small { display: block; font-size: 14.5px; color: #D3CFC8; }

/* ---------- calculator ---------- */
.v-calc { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: start; }
.v-calc-in { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); box-shadow: var(--sh-1); }
.v-calc-out { background: var(--navy); color: var(--on-dark-2); border-radius: var(--r3); padding: var(--s4); position: sticky; top: 130px; overflow: hidden; isolation: isolate; }
.v-calc-out::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,80,.28), transparent 65%); z-index: -1; }
.v-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: var(--r2); padding: 5px; gap: 5px; }
.v-seg button { border: 0; background: transparent; padding: 13px; border-radius: var(--r1); font-family: var(--font); font-weight: 600; font-size: 16px; color: var(--text-2); cursor: pointer; transition: all .25s; }
.v-seg button.on { background: var(--green); color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.v-ctl { padding: var(--s3) 0; border-bottom: 1px solid var(--line-2); }
.v-ctl:last-child { border-bottom: 0; padding-bottom: 0; }
.v-ctl-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.v-ctl-top label { font-weight: 600; font-size: 17px; color: var(--text); }
.v-ctl-top output { font-size: 24px; color: var(--green); font-weight: 700; white-space: nowrap; }
.v-big { font-size: clamp(56px, 6vw, 80px); color: #fff; line-height: .95; font-weight: 700; }
.v-big small { font-size: .34em; color: var(--amber); margin-left: 6px; }
.v-kv { margin-top: var(--s3); border-top: 1px solid rgba(255,255,255,.16); }
.v-kv div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.v-kv span { font-size: 15.5px; color: var(--on-dark-2); }
.v-kv b { color: #fff; font-size: 19px; font-feature-settings: "tnum" 1; font-weight: 700; }
.v-kv .hl b { color: var(--amber); }
.v-calc-out .v-small { color: #D3CFC8; }
.v-chart { width: 100%; height: auto; display: block; margin-top: var(--s2); }
.v-chart .ax { stroke: var(--line); stroke-width: 1; }
.v-chart text { font-family: var(--font); font-size: 13px; fill: var(--text-3); }
.v-legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 15px; color: var(--text-2); margin-top: var(--s1); }
.v-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; }
.v-emi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; margin-top: var(--s3); }
.v-emi div { background: #fff; padding: var(--s2) var(--s3); }
.v-emi span { display: block; font-size: 14.5px; color: var(--text-3); }
.v-emi b { display: block; font-size: 24px; color: var(--text); margin-top: 4px; font-feature-settings: "tnum" 1; font-weight: 700; }
.v-emi .hl { background: var(--amber-soft); } .v-emi .hl b { color: var(--navy); }
@media (max-width: 1024px) { .v-calc { grid-template-columns: 1fr; } .v-calc-out { position: static; } }
@media (max-width: 640px) { .v-calc-in, .v-calc-out { padding: var(--s3); } .v-emi { grid-template-columns: 1fr; } .v-ctl-top output { font-size: 20px; } .v-ctl-top label { font-size: 15.5px; } }

/* ---------- B2B ---------- */
.v-b2b-stats { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.v-b2b-stats div { padding: var(--s3); border-bottom: 1px solid var(--line); }
.v-b2b-stats div:nth-child(odd) { border-right: 1px solid var(--line); }
.v-b2b-stats div:nth-last-child(-n+2) { border-bottom: 0; }
.v-b2b-stats b { display: block; font-size: 26px; line-height: 1.1; color: var(--navy); }
.v-b2b-stats span { font-size: 15px; color: var(--text-3); }
.v-pcard { border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: transform .45s var(--ease), box-shadow .45s, border-color .3s; }
.v-pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.v-pcard.sel { border-color: var(--green); box-shadow: 0 0 0 3px rgba(242,184,7,.25); }
.v-pcard .ph { aspect-ratio: 1.618 / 1; background: var(--bg); position: relative; overflow: hidden; }
.v-pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-pcard:hover .ph img { transform: scale(1.06); }
.v-pcard .ph .v-tag { position: absolute; left: var(--s2); top: var(--s2); }
.v-pcard .ph .v-tag--sun { left: auto; right: var(--s2); }
.v-pcard .bd { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.v-pcard .brand { font-size: 14px; font-weight: 600; color: var(--green); }
.v-pcard h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.v-pcard .desc { font-size: 15px; color: var(--text-3); line-height: 1.55; }
.v-specs { border: 1px solid var(--line-2); border-radius: var(--r1); overflow: hidden; }
.v-specs div { display: flex; justify-content: space-between; gap: var(--s2); padding: 9px 12px; font-size: 14.5px; }
.v-specs div:nth-child(odd) { background: var(--bg); }
.v-specs span { color: var(--text-3); } .v-specs b { text-align: right; font-weight: 600; color: var(--text); }
.v-pcard .foot { margin-top: auto; padding-top: var(--s2); display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s2); font-size: 14px; border-top: 1px dashed var(--line); }
.v-pcard .foot small { display: block; color: var(--text-3); font-size: 13.5px; }
.v-pcard .foot strong { display: block; font-size: 15.5px; color: var(--text); }
.v-pcard .foot .pr { text-align: right; } .v-pcard .foot .pr strong { color: var(--green); }
.v-pcard .acts { display: flex; gap: var(--s1); margin-top: var(--s2); }
.v-pcard .acts .v-btn { flex: 1; }
.v-pcard.sel .b2b-add { background: var(--amber); color: var(--navy) !important; }
.v-wa { width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--r1); display: grid; place-items: center; background: #E8F7EE; color: #1FA855; border: 1.5px solid #BFE6CF; transition: background .2s; }
.v-wa:hover { background: #1FA855; color: #fff; }
.v-search { position: relative; }
.v-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.v-search input { padding-left: 48px !important; }
.v-chips { display: flex; flex-wrap: wrap; gap: var(--s0); min-height: 28px; }
.v-chips span { display: inline-flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green); font-size: 14.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; }
.v-chips button { border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--green); padding: 0; }
.v-chips .none { background: none !important; padding: 0 !important; color: var(--text-3) !important; font-weight: 400 !important; font-size: 15px !important; }
.v-tray { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 160%); visibility: hidden; opacity: 0; z-index: 60; background: var(--navy); color: #fff; border-radius: 999px; padding: 8px 8px 8px 26px; display: flex; align-items: center; gap: var(--s2); box-shadow: 0 26px 42px -16px rgba(0,0,0,.6); transition: transform .45s var(--ease), opacity .3s, visibility .3s; max-width: calc(100% - 110px); font-family: var(--font); }
.v-tray.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.v-tray span { font-size: 15px; font-weight: 600; white-space: nowrap; }
.v-tray .v-btn { border-radius: 999px; }

/* ---------- footer ---------- */
.v-foot { background: #0B0B0B; color: #DAD6CF; font-size: 15.5px; }
.v-foot__big { padding-top: var(--s5); padding-bottom: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.v-foot__big .v-d2 { color: #fff; }
.v-foot__big p { color: #DAD6CF; margin-top: var(--s1); }
.v-foot__cols { display: grid; grid-template-columns: 1.618fr 1fr 1fr 1.272fr; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s5); }
.v-foot h5 { font-family: var(--font); color: #fff; font-size: 17px; font-weight: 700; margin: 0 0 var(--s2); position: relative; padding-bottom: 12px; }
.v-foot h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: var(--amber); }
.v-foot li + li { margin-top: 12px; }
.v-foot ul a { transition: color .2s, padding .2s; }
.v-foot ul a:hover { color: var(--amber); padding-left: 4px; }
.v-foot .brand { display: flex; align-items: center; gap: 14px; }
.v-foot .brand img { height: 64px; width: auto; }
.v-foot .brand b { display: block; font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.v-foot .brand b .r { color: #FF4B4B; } .v-foot .brand b .g { color: var(--amber); }
.v-foot .brand small { display: block; margin-top: 6px; color: var(--amber); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }
.v-foot .about { margin-top: var(--s3); max-width: 380px; line-height: 1.65; }
.v-foot .social { display: flex; gap: var(--s1); margin-top: var(--s3); }
.v-foot .social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; transition: all .25s; }
.v-foot .social a:hover { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.v-foot .ct a, .v-foot .ct div { display: flex; gap: 12px; align-items: flex-start; }
.v-foot .ct svg { flex: 0 0 18px; margin-top: 4px; color: var(--amber); }
.v-foot .ct > * + * { margin-top: var(--s2); }
.v-foot__bar { border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s3); padding-bottom: var(--s3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); font-size: 14.5px; color: #B9B4AB; }
@media (max-width: 1024px) { .v-foot__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .v-foot__big { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .v-foot__cols { grid-template-columns: 1fr; gap: var(--s4); } }

.v-empty { color: var(--text-3); padding: var(--s5) 0; text-align: center; }

/* ==========================================================================
   ANIMATION  (content is fully visible without JavaScript)
   ========================================================================== */
html.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-reveal="left"] { transform: translateX(-42px); }
html.js [data-reveal="right"] { transform: translateX(42px); }
html.js [data-reveal="zoom"] { transform: scale(.94); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
/* headline words rise from a mask */
.v-split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.v-split .w > span { display: inline-block; }
html.js .v-split.ready .w > span { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 55ms); }
html.js .v-split.ready.is-in .w > span { transform: none; }
/* image wipe */
html.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); }
html.js [data-wipe].is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .v-split.ready .w > span, html.js [data-wipe] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .v *, .v *::before, .v *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.v-pre { position: fixed; inset: 0; z-index: 9999; background: #fff; display: grid; place-items: center; font-family: var(--font); transition: clip-path .9s cubic-bezier(.76,0,.24,1); clip-path: inset(0 0 0 0); }
.v-pre.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.v-pre__in { display: grid; justify-items: center; gap: var(--s3); }
.v-pre__mark { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.v-pre__mark img { width: 92px; height: 92px; object-fit: contain; position: relative; z-index: 2; animation: vPulse 2s ease-in-out infinite; }
.v-pre__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--amber), var(--red), var(--green), var(--amber)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: vSpin 1.4s linear infinite; }
.v-pre__rays { position: absolute; inset: 14px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,210,80,.55) 0 4deg, transparent 4deg 30deg); -webkit-mask: radial-gradient(farthest-side, transparent 68%, #000 70%, #000 100%); mask: radial-gradient(farthest-side, transparent 68%, #000 70%, #000 100%); animation: vSpin 8s linear infinite reverse; }
.v-pre__name { font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: flex; gap: .06em; }
.v-pre__name span { display: inline-block; opacity: 0; transform: translateY(14px); animation: vLetter .6s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + .15s); }
.v-pre__name .r { color: var(--red); } .v-pre__name .g { color: var(--amber-2); }
.v-pre__bar { width: 200px; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.v-pre__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--amber)); border-radius: 4px; transition: width .35s ease; }
.v-pre__pct { font-size: 14px; font-weight: 600; color: var(--text-2); font-feature-settings: "tnum" 1; margin-top: -14px; }
@keyframes vSpin { to { transform: rotate(360deg); } }
@keyframes vPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes vLetter { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v-pre__ring, .v-pre__rays, .v-pre__mark img { animation: none; } .v-pre__name span { animation: none; opacity: 1; transform: none; } }

/* ==========================================================================
   SHYAM ELECTRIC — theme refinements on top of the base components
   ========================================================================== */
.v-d1, .v-d2, .v-d3, .sh-hero h1 { font-family: var(--font-d); font-stretch: 92%; font-weight: 800; letter-spacing: -.015em; }
.v-d3 { font-weight: 700; }
.v-label { background: var(--sun-soft); color: var(--char); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 700; }
.v-label::before { background: var(--sun-2); }
.v-night .v-label, .v-blue .v-label { background: rgba(255,210,80,.12); color: var(--sun); }
.v-link { color: var(--ink-gold) !important; }
.v-night .v-link, .v-blue .v-link, .v-panel--night .v-link { color: var(--sun) !important; }
.v-accent, .v-y { color: var(--ink-gold); }
.v-night .v-accent, .v-night .v-y, .v-ph .v-y { color: var(--sun); }
.v-btn--sun { color: var(--char) !important; }
.v-btn--sun:hover { background: var(--sun-2); }
.v-btn--blue { background: var(--char); }
.v-btn--blue:hover { background: #000; }
.v-check li::before { background-color: var(--sun); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.v-feat .ic, .v-val .ic { background: var(--sun-soft); color: var(--char); }
.v-feat:hover .ic { background: var(--sun); color: var(--char); }
.v-frame__badge b { color: var(--char); }
.v-frame__badge { border-left: 4px solid var(--sun); }
.v-tl .dot { border-color: var(--char); color: var(--char); }
.v-tl li:hover .dot { background: var(--sun); border-color: var(--sun); color: var(--char); }
.v-tl .when { background: var(--sun-soft); color: var(--ink-gold); }
.v-tier { background: var(--char-3); }
.v-tier:last-child { background: var(--sun); color: var(--char); }
.v-tier:last-child span { color: var(--char-3); }
.v-tdots button.on { background: var(--sun-2); }
.v-faq details[open] { border-color: var(--sun-2); }
.v-faq summary::after { background: var(--sun-soft); color: var(--char); }
.v-faq details[open] summary::after { background: var(--sun); color: var(--char); }
.v-field input:focus, .v-field select:focus, .v-field textarea:focus { border-color: var(--sun-2); box-shadow: 0 0 0 4px rgba(255,210,80,.28); }
.v-seg button.on { background: var(--char); }
.v-ctl-top output { color: var(--char); }
.v-light .v-range { background: linear-gradient(90deg, var(--sun-2) 0 var(--p, 30%), var(--line) var(--p, 30%) 100%); }
.v-light .v-range::-webkit-slider-thumb { border-color: var(--sun-2); }
.v-light .v-range::-moz-range-thumb { border-color: var(--sun-2); }
.v-work .kw { color: var(--char); }
.v-pcard .brand { color: var(--ink-gold); }
.v-pcard .foot .pr strong { color: var(--char); }
.v-pcard.sel { border-color: var(--sun-2); box-shadow: 0 0 0 3px rgba(255,210,80,.45); }
.v-chips span { background: var(--sun-soft); color: var(--char); }
.v-chips button { color: var(--char); }
.v-scard::after { background: linear-gradient(90deg, var(--char), var(--sun)); }
.v-tabs button.on { background: var(--char); border-color: var(--char); }
.v-cta { background: linear-gradient(110deg, #1F1F21 0%, #121212 55%, #000 100%); }
.v-cta::before { background: radial-gradient(circle, rgba(255,210,80,.45), transparent 65%); }
.v-cta p { color: var(--on-dark-2); }
.v-est::before { background: radial-gradient(600px 300px at 100% 0%, rgba(255,210,80,.22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(255,255,255,.06), transparent 60%); }
.v-foot .brand img { height: 58px; }
.v-pre__ring { background: conic-gradient(from 0deg, var(--sun), var(--char), var(--sun-2), var(--sun)); }
.v-pre__mark img { width: 100px; height: 100px; }
.v-pre__name { font-family: var(--font-d); font-stretch: 92%; }
.v-pre__name .r { color: var(--char); } .v-pre__name .g { color: var(--sun-2); }
.v-pre__bar i { background: linear-gradient(90deg, var(--char), var(--sun)); }
.v-ph::before { background: linear-gradient(95deg, rgba(14,14,14,.95) 0%, rgba(14,14,14,.86) 50%, rgba(14,14,14,.55) 100%); }
.v-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--sun) 0 30%, transparent 30%); }
.v-crumb a { color: var(--sun); }
.v-small a { text-decoration: underline; }
.v-tray { background: var(--char); }
.v-btn--wa { background: #1FA855; }

a.v-btn, .sh a, .sh-hero a, .m-bar a, .fab-wa { text-decoration: none; }

/* ==========================================================================
   HEADER  (sh-)
   ========================================================================== */
.sh { position: sticky; top: 0; z-index: 100; font-family: var(--font); }
.sh-top { background: var(--char); color: #D9D5CD; font-size: 13px; }
.sh-top .v-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.sh-top a, .sh-top span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sh-top a:hover { color: var(--sun); }
.sh-top svg { color: var(--sun); }
.sh-top .l, .sh-top .r { display: flex; gap: 22px; align-items: center; }
.sh-top .leg { color: var(--sun); font-weight: 600; letter-spacing: .04em; }
@media (max-width: 900px) { .sh-top .hide-m { display: none; } }
@media (max-width: 560px) { .sh-top .l { display: none; } .sh-top .v-wrap { justify-content: center; } }

.sh-bar { background: #fff; border-bottom: 1px solid var(--line); transition: background .3s, box-shadow .3s, border-color .3s; }
.sh-bar .v-wrap { display: flex; align-items: center; gap: 22px; height: var(--head-h); }
.sh-logo { display: flex; align-items: center; flex-shrink: 0; }
.sh-logo img { height: 50px; width: auto; display: block; }
.sh-logo .lt { display: none; }
.sh-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sh-nav > a, .sh-more > button { font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 9px 11px; border-radius: 8px; position: relative; background: none; border: 0; cursor: pointer; font-family: var(--font); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sh-nav > a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; background: var(--sun-2); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sh-nav > a:hover::after, .sh-nav > a.on::after { transform: scaleX(1); }
.sh-nav > a:hover, .sh-nav > a.on, .sh-more > button:hover { color: var(--char); }
.sh-nav > a.on { font-weight: 700; }
.sh-more { position: relative; }
.sh-more .menu { position: absolute; top: 100%; right: 0; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); padding: 8px; display: none; }
.sh-more:hover .menu, .sh-more:focus-within .menu { display: block; }
.sh-more .menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 15px; }
.sh-more .menu a:hover, .sh-more .menu a.on { background: var(--sun-soft); color: var(--char); }
.sh-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sh-cta .v-btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
.sh-burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--char); cursor: pointer; place-items: center; }
.sh-mob { display: none; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); max-height: calc(100vh - 110px); overflow-y: auto; }
.sh-mob.open { display: block; }
.sh-mob nav { padding: 10px var(--gut) 18px; display: grid; }
.sh-mob nav a { padding: 13px 4px; border-bottom: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-size: 16.5px; font-weight: 500; display: flex; justify-content: space-between; }
.sh-mob nav a.on { color: var(--ink-gold); font-weight: 700; }
.sh-mob .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gut) 20px; }
.sh-mob .btns .v-btn { min-height: 48px; font-size: 15px; padding: 0 12px; }
@media (max-width: 1180px) { .sh-nav > a, .sh-more > button { padding: 9px 8px; font-size: 14.5px; } .sh-nav > a::after { left: 8px; right: 8px; } .sh-cta .call { display: none; } }
@media (max-width: 1040px) { .sh-nav, .sh-cta { display: none; } .sh-burger { display: grid; } }
@media (max-width: 640px) { :root { --head-h: 66px; } .sh-logo img { height: 42px; } }

/* home: header sits over the hero, transparent until scrolled */
body.home .sh { position: fixed; left: 0; right: 0; }
body.home:not(.scrolled) .sh-bar { background: transparent; border-color: transparent; }
body.home:not(.scrolled) .sh-top { background: rgba(0,0,0,.35); }
body.home:not(.scrolled) .sh-logo .dk { display: none; }
body.home:not(.scrolled) .sh-logo .lt { display: block; }
body.home:not(.scrolled) .sh-nav > a, body.home:not(.scrolled) .sh-more > button { color: rgba(255,255,255,.92); }
body.home:not(.scrolled) .sh-nav > a.on { color: var(--sun); }
body.home:not(.scrolled) .sh-cta .call { border-color: rgba(255,255,255,.6); color: #fff !important; }
body.home:not(.scrolled) .sh-burger { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.35); color: #fff; }
body.home.scrolled .sh-bar { box-shadow: 0 6px 24px -12px rgba(0,0,0,.25); }

/* floating WhatsApp + call (mobile) */
.fab-wa { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #1FA855; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px -6px rgba(31,168,85,.6); transition: transform .25s var(--ease); }
.fab-wa:hover { transform: scale(1.07); }
.fab-wa::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31,168,85,.45); animation: fabPulse 2.4s ease-out infinite; }
@keyframes fabPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.m-bar { display: none; }
@media (max-width: 640px) {
  .m-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--char); border-top: 2px solid var(--sun); font-family: var(--font); }
  .m-bar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 10px; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; }
  .m-bar a + a { border-left: 1px solid rgba(255,255,255,.12); }
  .m-bar a.q { background: var(--sun); color: var(--char); }
  .m-bar svg { width: 20px; height: 20px; }
  .fab-wa { display: none; }
  body { padding-bottom: 62px; }
  .v-tray { bottom: 78px; }
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.sh-hero { position: relative; min-height: 640px; height: 94vh; max-height: 940px; background: #0A0A0A; color: #fff; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; font-family: var(--font); }
.sh-hero__bg { position: absolute; inset: 0; z-index: -2; }
.sh-hero__bg video, .sh-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-hero__bg img { opacity: 0; transition: opacity 1.4s ease; transform: scale(1.06); }
.sh-hero__bg img.on { opacity: 1; animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
.sh-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.62) 45%, rgba(8,8,8,.15) 100%), linear-gradient(0deg, rgba(8,8,8,.85) 0%, rgba(8,8,8,0) 45%); }
.sh-hero .v-wrap { width: 100%; padding-bottom: 56px; padding-top: calc(var(--head-h) + 70px); }
.sh-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.sh-hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--sun); }
.sh-hero h1 { margin: 18px 0 0; font-size: clamp(40px, 6.4vw, 86px); line-height: .98; color: #fff; text-transform: uppercase; }
.sh-hero h1 span { display: block; }
.sh-hero h1 .y { color: var(--sun); }
.sh-hero p.lede { margin: 22px 0 0; max-width: 560px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: #E9E6E0; }
.sh-hero .v-btns { margin-top: 30px; gap: 12px; }
.sh-hero__trust { margin-top: 44px; display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; max-width: 900px; }
.sh-hero__trust div { padding-right: 30px; margin-right: 30px; border-right: 1px solid rgba(255,255,255,.18); }
.sh-hero__trust div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.sh-hero__trust b { display: block; font-family: var(--font-d); font-stretch: 92%; font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.sh-hero__trust span { font-size: 13.5px; color: #CFCBC3; }
.sh-hero__dots { position: absolute; right: var(--gut); bottom: 56px; display: flex; gap: 8px; }
.sh-hero__dots button { width: 10px; height: 10px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s, background .3s; }
.sh-hero__dots button.on { width: 30px; background: var(--sun); }
@media (max-width: 900px) {
  .sh-hero { height: auto; min-height: 100svh; max-height: none; }
  .sh-hero__trust { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .sh-hero__trust div:nth-child(2) { border-right: 0; margin-right: 0; }
  .sh-hero__dots { display: none; }
}
@media (max-width: 640px) { .sh-hero .v-btns .v-btn { width: 100%; } .sh-hero__bg video { display: none; } }

/* ==========================================================================
   NEW HOME BLOCKS
   ========================================================================== */
/* trust strip */
.v-trust { background: var(--char); color: #fff; }
.v-trust .v-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.v-trust .it { padding: 34px 26px; display: flex; gap: 16px; align-items: flex-start; border-left: 1px solid rgba(255,255,255,.1); }
.v-trust .it:first-child { border-left: 0; padding-left: 0; }
.v-trust .ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: rgba(255,210,80,.12); color: var(--sun); display: grid; place-items: center; }
.v-trust b { display: block; font-family: var(--font-d); font-stretch: 92%; font-weight: 800; font-size: 20px; line-height: 1.2; }
.v-trust span { font-size: 14.5px; color: #CFCBC3; line-height: 1.5; display: block; margin-top: 4px; }
@media (max-width: 1024px) { .v-trust .v-wrap { grid-template-columns: 1fr 1fr; } .v-trust .it:nth-child(3) { border-left: 0; padding-left: 0; } .v-trust .it:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); } }
@media (max-width: 560px) { .v-trust .v-wrap { grid-template-columns: 1fr; } .v-trust .it { border-left: 0 !important; padding: 22px 0; } .v-trust .it + .it { border-top: 1px solid rgba(255,255,255,.1); } }

/* two worlds */
.v-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.v-world { position: relative; border-radius: var(--r3); overflow: hidden; min-height: 520px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s4); color: #fff; isolation: isolate; background: var(--char); }
.v-world > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.v-world:hover > img { transform: scale(1.05); }
.v-world::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.1) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.94) 100%); }
.v-world--el { background: radial-gradient(700px 400px at 100% 0%, rgba(255,210,80,.18), transparent 60%), var(--char); }
.v-world--el::before { display: none; }
.v-world .num { margin-bottom: auto; padding-bottom: 24px; font-family: var(--font-d); font-weight: 800; font-size: 14px; letter-spacing: .14em; color: var(--sun); }
.v-world--el .num { margin-bottom: 0; padding-bottom: 0; }
.v-world h3 { font-family: var(--font-d); font-stretch: 92%; font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.04; color: #fff; text-transform: uppercase; }
.v-world p { margin-top: 12px; color: #E9E6E0; font-size: 16.5px; max-width: 460px; }
.v-world .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.v-world .pills span { font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.06); }
.v-world .v-btns { margin-top: 24px; }
.v-world .elgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 22px 0 auto; padding-bottom: 28px; }
.v-world .elgrid span { aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); display: grid; place-items: center; color: var(--sun); transition: background .3s, transform .3s var(--ease); }
.v-world .elgrid span:hover { background: rgba(255,210,80,.12); transform: translateY(-3px); }
.v-world .elgrid svg { width: 46%; height: 46%; }
@media (max-width: 900px) { .v-worlds { grid-template-columns: 1fr; } .v-world { min-height: 460px; padding: var(--s3); } }
@media (max-width: 1100px) and (min-width: 901px), (max-width: 520px) { .v-world .elgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .v-world { min-height: 400px; } }

/* solar type chips (on-grid / hybrid / off-grid) */
.v-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s4); }
.v-type { border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s3); background: #fff; position: relative; overflow: hidden; }
.v-type::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sun); }
.v-type h4 { font-family: var(--font-d); font-stretch: 92%; font-weight: 800; font-size: 21px; }
.v-type p { margin-top: 6px; color: var(--text-3); font-size: 15.5px; }
.v-type small { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink-gold); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 900px) { .v-types { grid-template-columns: 1fr; } }

/* legacy timeline */
.v-legacy { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin-top: var(--s5); }
.v-legacy::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: linear-gradient(90deg, rgba(255,210,80,.25), var(--sun)); }
.v-legacy li { position: relative; padding-right: var(--s3); }
.v-legacy .dot { width: 48px; height: 48px; border-radius: 50%; background: var(--char); border: 2px solid var(--sun); display: grid; place-items: center; color: var(--sun); position: relative; z-index: 1; }
.v-legacy li:last-child .dot { background: var(--sun); color: var(--char); box-shadow: 0 0 0 8px rgba(255,210,80,.15); }
.v-legacy .yr { display: block; margin-top: 22px; font-family: var(--font-d); font-stretch: 90%; font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; color: var(--sun); }
.v-legacy h4 { margin-top: 10px; font-size: 19px; font-weight: 700; color: #fff; }
.v-legacy p { margin-top: 6px; color: #CFCBC3; font-size: 15.5px; line-height: 1.6; }
@media (max-width: 900px) {
  .v-legacy { grid-template-columns: 1fr; gap: var(--s4); }
  .v-legacy::before { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(255,210,80,.25), var(--sun)); }
  .v-legacy li { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding: 0; }
  .v-legacy .dot { grid-row: span 3; } .v-legacy .yr { margin-top: 4px; }
}

/* electrical category tiles */
.v-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.v-cat { background: #fff; border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s3); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; text-decoration: none; color: inherit; }
.v-cat:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.v-cat .ic { width: 56px; height: 56px; border-radius: 14px; background: var(--char); color: var(--sun); display: grid; place-items: center; transition: background .3s, color .3s; }
.v-cat:hover .ic { background: var(--sun); color: var(--char); }
.v-cat .ic svg { width: 26px; height: 26px; }
.v-cat h3 { font-family: var(--font-d); font-stretch: 92%; font-size: 20px; font-weight: 800; color: var(--text); margin-top: 6px; }
.v-cat p { font-size: 15px; color: var(--text-3); line-height: 1.55; }
.v-cat .ph { margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) 6px; aspect-ratio: 1.618/1; overflow: hidden; background: var(--bg); }
.v-cat .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.v-cat:hover .ph img { transform: scale(1.06); }
.v-cat .ph + .ic { margin-top: -46px; border: 4px solid #fff; position: relative; }
.v-cat .go { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-gold); display: inline-flex; align-items: center; gap: 6px; }
.v-night .v-cat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.v-night .v-cat h3 { color: #fff; } .v-night .v-cat p { color: #CFCBC3; } .v-night .v-cat .go { color: var(--sun); }
.v-night .v-cat .ic { background: rgba(255,210,80,.12); }
@media (max-width: 1024px) { .v-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .v-cats { grid-template-columns: 1fr; } }

/* electrical detail rows (electrical.php) */
.v-elrow { display: grid; grid-template-columns: 1fr 1.618fr; gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); align-items: start; scroll-margin-top: 130px; }
.v-elrow .side { display: flex; gap: var(--s2); align-items: flex-start; }
.v-elrow .side .ic { width: 64px; height: 64px; border-radius: 16px; background: var(--char); color: var(--sun); display: grid; place-items: center; flex-shrink: 0; }
.v-elrow .side .ic svg { width: 30px; height: 30px; }
.v-elrow .ph { margin-top: var(--s3); border-radius: var(--r3); overflow: hidden; aspect-ratio: 1.618/1; }
.v-elrow .ph img { width: 100%; height: 100%; object-fit: cover; }
.v-elrow .items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.v-elrow .items span { font-size: 14.5px; padding: 8px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--text-2); }
@media (max-width: 900px) { .v-elrow { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0; } }

/* wholesale band */
.v-whole { background: var(--sun); color: var(--char); border-radius: var(--r3); padding: var(--s5); display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s4); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.v-whole::before { content: ""; position: absolute; right: -60px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(20,20,20,.06); z-index: -1; }
.v-whole .v-d2 { color: var(--char); text-transform: uppercase; }
.v-whole .who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.v-whole .who span { font-weight: 700; font-size: 14.5px; padding: 8px 14px; border-radius: 999px; background: rgba(20,20,20,.08); }
.v-whole p { margin-top: var(--s2); font-size: 17px; color: #2E2A20; max-width: 560px; }
.v-whole .side { display: grid; gap: var(--s1); }
.v-whole .v-btn--line { border-color: var(--char); }
@media (max-width: 900px) { .v-whole { grid-template-columns: 1fr; padding: var(--s4) var(--s3); } }

/* brands */
.v-brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
.v-brand { background: #fff; border: 1px solid var(--line); border-radius: var(--r2); aspect-ratio: 1.618/1; display: grid; place-items: center; padding: 18px; text-align: center; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.v-brand:hover { border-color: var(--sun-2); box-shadow: var(--sh-1); transform: translateY(-3px); }
.v-brand img { max-width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; }
.v-brand:hover img { filter: none; opacity: 1; }
.v-brand b { font-family: var(--font-d); font-stretch: 90%; font-weight: 800; font-size: 19px; color: var(--text); letter-spacing: .01em; }
.v-brand small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 4px; font-weight: 500; }
@media (max-width: 1024px) { .v-brands { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .v-brands { grid-template-columns: repeat(2, 1fr); } }
.v-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.v-marquee__track { display: flex; gap: var(--s2); width: max-content; animation: marq 40s linear infinite; }
.v-marquee:hover .v-marquee__track { animation-play-state: paused; }
.v-marquee .v-brand { width: 190px; flex-shrink: 0; }
@keyframes marq { to { transform: translateX(-50%); } }

/* product card placeholder (no image yet) */
.v-pcard .ph .noimg { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(400px 200px at 100% 0%, rgba(255,210,80,.25), transparent 60%), var(--char); color: var(--sun); }
.v-pcard .ph .noimg svg { width: 52px; height: 52px; }

/* file input */
.v-file { border: 1.5px dashed var(--line); border-radius: var(--r1); padding: 14px 16px; background: var(--bg); display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }
.v-file input { min-height: 0 !important; border: 0 !important; padding: 0 !important; background: none !important; font-size: 14.5px; }
.v-ok { background: #EAF7EE; color: #14532D; border-left: 4px solid #1FA855; padding: var(--s2); font-size: 15px; border-radius: 6px; }

/* final CTA */
.v-final { text-align: center; }
.v-final .v-d2 { text-transform: uppercase; max-width: 860px; margin: 0 auto; }
.v-final p { max-width: 640px; margin: var(--s2) auto 0; }
.v-final .v-btns { justify-content: center; margin-top: var(--s4); }

/* review google button */
.v-greview { display: inline-flex; align-items: center; gap: 10px; }

/* segmented lead-type picker on contact */
.v-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v-pick label { position: relative; cursor: pointer; }
.v-pick input { position: absolute; opacity: 0; pointer-events: none; }
.v-pick span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 88px; border: 1.5px solid var(--line); border-radius: var(--r2); padding: 12px 8px; font-size: 14.5px; font-weight: 600; color: var(--text-2); background: #fff; transition: border-color .2s, background .2s; }
.v-pick span svg { color: var(--ink-gold); }
.v-pick input:checked + span { border-color: var(--char); background: var(--sun-soft); color: var(--char); box-shadow: inset 0 0 0 1px var(--char); }
.v-pick input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (max-width: 640px) { .v-pick { grid-template-columns: 1fr 1fr; } }

.v-foot .v-y { color: var(--sun); }
.v-whole .v-label::before { background: var(--char); }
body.home .v-foot__cols { padding-top: var(--s5); }
#main { overflow-x: clip; }

/* ==========================================================================
   GOLDEN-RATIO TYPE SCALE  (φ = 1.618)  +  HERO 100vh
   Base 16px → ×φ steps:  10 · 16 · 26 · 42 · 68
     small 13 · body 16 · lede 17–18 · h3 21–26 · h2 26–42 · h1 / hero 42–68
   Laptops (≈1280–1536px) land in the middle of each clamp; phones use the
   one-step-down scale (base 15px) further below.
   ========================================================================== */
:root { --fs-sm: 13.5px; --fs-body: 16px; --fs-lede: clamp(16px, 1.15vw, 18px);
        --fs-h3: clamp(19px, 1.55vw, 26px); --fs-h2: clamp(26px, 2.55vw, 42px);
        --fs-h1: clamp(32px, 3.6vw, 58px); --fs-hero: clamp(34px, 4.15vw, 68px); }

.v { font-size: var(--fs-body); line-height: 1.618; }
.v-d1 { font-size: var(--fs-h1); line-height: 1.1; }
.v-d2 { font-size: var(--fs-h2); line-height: 1.15; }
.v-d3 { font-size: var(--fs-h3); line-height: 1.3; }
.v-lede, .v-ph .v-lede { font-size: var(--fs-lede); line-height: 1.618; }
.v-small { font-size: 14.5px; }
.v-statement { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.55; }
.v-btn { min-height: 50px; padding: 0 24px; font-size: 15px; }
.v-btn--sm { min-height: 42px; padding: 0 16px; font-size: 14px; }
.v-label { font-size: 12px; padding: 5px 12px; }
.v-scard h3, .v-proj h3, .v-work h3, .v-pcard h3, .v-val h3 { font-size: clamp(17px, 1.3vw, 20px); }
.v-scard p, .v-cat p, .v-val p, .v-feat p, .v-type p { font-size: 15px; }
.v-cat h3, .v-type h4, .v-feat h4, .v-tl h4, .v-legacy h4 { font-size: clamp(17px, 1.25vw, 19px); }
.v-trust b { font-size: clamp(17px, 1.3vw, 19px); }
.v-trust span { font-size: 14px; }
.v-world h3 { font-size: clamp(26px, 2.55vw, 40px); }
.v-world p { font-size: 15.5px; }
.v-legacy .yr { font-size: clamp(30px, 2.9vw, 44px); }
.v-faq summary { font-size: 16.5px; padding: 17px var(--s3); }
.v-faq details p { font-size: 15.5px; }
.v-est .bill b { font-size: clamp(36px, 3.9vw, 56px); }
.v-big { font-size: clamp(48px, 4.6vw, 68px); }
.v-counts b { font-size: clamp(30px, 2.8vw, 42px); }
.v-foot { font-size: 15px; }
.sh-nav > a, .sh-more > button { font-size: 14.5px; }
.sh-cta .v-btn { min-height: 44px; font-size: 14.5px; }
.sh-logo img { height: 46px; }

/* ---------- HERO: full screen, lighter fade so the video shows ---------- */
.sh-hero { height: 100vh; height: 100svh; min-height: 560px; max-height: none; align-items: center; }
.sh-hero::before {
  background:
    linear-gradient(90deg, rgba(8,8,8,.62) 0%, rgba(8,8,8,.34) 42%, rgba(8,8,8,0) 75%),
    linear-gradient(0deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,0) 32%),
    linear-gradient(180deg, rgba(8,8,8,.35) 0%, rgba(8,8,8,0) 22%);
}
.sh-hero .v-wrap { padding-top: calc(var(--head-h) + 38px + 26px); padding-bottom: 34px; }
.sh-hero__eyebrow { font-size: 12.5px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.sh-hero h1 { margin-top: 14px; font-size: var(--fs-hero); line-height: 1.02; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.sh-hero p.lede { margin-top: 18px; max-width: 520px; font-size: var(--fs-lede); text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.sh-hero .v-btns { margin-top: 26px; }
.sh-hero__trust { margin-top: 34px; padding-top: 18px; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.sh-hero__trust b { font-size: clamp(17px, 1.3vw, 21px); }
.sh-hero__trust span { font-size: 13px; }
.sh-hero__dots { bottom: 34px; }
@media (max-height: 760px) and (min-width: 901px) {          /* short laptop screens */
  .sh-hero h1 { font-size: clamp(32px, 3.5vw, 54px); }
  .sh-hero__trust { margin-top: 24px; }
}
@media (max-width: 900px) {
  .sh-hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .sh-hero::before { background: linear-gradient(180deg, rgba(8,8,8,.45) 0%, rgba(8,8,8,.25) 40%, rgba(8,8,8,.65) 100%); }
}

/* ---------- phones: one step down on the same φ scale (base 15px) ---------- */
@media (max-width: 640px) {
  :root { --fs-body: 15px; --fs-lede: 15.5px; --fs-h3: 18.5px; --fs-h2: 24px; --fs-h1: 30px; --fs-hero: 31px; }
  .v-btn { min-height: 48px; font-size: 14.5px; padding: 0 18px; }
  .v-scard h3, .v-proj h3, .v-work h3, .v-pcard h3, .v-val h3, .v-cat h3 { font-size: 17px; }
  .v-world h3 { font-size: 24px; }
  .v-legacy .yr { font-size: 28px; }
  .v-faq summary { font-size: 15.5px; }
  .v-sec { padding-top: 52px; padding-bottom: 52px; }
  .sh-hero .v-wrap { padding-top: calc(var(--head-h) + 34px); padding-bottom: 80px; }
  .sh-hero__trust b { font-size: 16px; }
  .sh-logo img { height: 40px; }
}