/* VAISHNAVI INDUSTRIES — non-destructive visual corrections, 2026-10-26.
   Place AFTER the site's existing CSS. Keep the original theme. */
:root {
  --vi-ink: #0b1b25;
  --vi-gold: #efb76f;
  --vi-light: #fffaf3;
  scroll-padding-top: 130px;
}
html { scroll-padding-top: 130px; }
[id], section { scroll-margin-top: 130px; }

/* Product-card subtitles must remain readable on photographs. */
.vi-readable-caption {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.9) !important;
  background: rgba(4, 18, 27, .72) !important;
  border-radius: 7px;
  padding: 7px 11px;
  width: fit-content;
  max-width: 95%;
}

/* Place the existing opened menu adjacent to its trigger, not in the page centre.
   JS adds this class only after identifying a popup-type nav. */
.vi-menu-panel {
  position: fixed !important;
  top: var(--vi-menu-top, 95px) !important;
  right: var(--vi-menu-right, 24px) !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  width: min(340px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: min(620px, calc(100dvh - var(--vi-menu-top, 95px) - 12px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  z-index: 100005 !important;
  border-radius: 14px;
  background-color: #071a1f !important;
  color: #f9f9f5 !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
}
.vi-menu-panel a {
  color: #f8f9f5 !important;
  -webkit-text-fill-color: #f8f9f5 !important;
  opacity: 1 !important;
  min-height: 45px;
  align-content: center;
}
.vi-menu-panel a:hover, .vi-menu-panel a:focus-visible {
  background: rgba(239,183,111,.14);
  color: #ffd496 !important;
  -webkit-text-fill-color: #ffd496 !important;
}

/* New customer-facing product story uses original palette, no framework. */
.vi-project-benefits, .vi-finish-options {
  width: min(1220px, calc(100% - 40px));
  margin: 45px auto 60px;
  padding: clamp(22px, 3.5vw, 50px);
  border: 1px solid rgba(220,181,115,.35);
  border-radius: 24px;
  background: #101f27;
  color: #f8fafb;
}
.vi-project-benefits .vi-eyebrow, .vi-finish-options .vi-eyebrow {
  color: #efb76f; text-transform: uppercase; font-size: 12px;
  font-weight: 800; letter-spacing: .15em;
}
.vi-project-benefits h2, .vi-finish-options h2 {
  color: #fffaf3; font-size: clamp(25px, 3vw, 42px); line-height: 1.15;
  margin: 12px 0 16px; letter-spacing: -.025em;
}
.vi-project-benefits > p, .vi-finish-options > p {
  color: #d7e0e1; font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65; max-width: 940px;
}
.vi-benefit-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: 26px;
}
.vi-benefit {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  padding: 20px; border-radius: 15px; min-width: 0;
}
.vi-benefit h3 {color:#ffd496; margin:0 0 9px; font-size:18px; line-height:1.3;}
.vi-benefit p {color:#e2e8e9; margin:0; font-size:14px; line-height:1.65;}
.vi-project-benefits .vi-emphasis {color:#ffd496; font-weight:700;}
@media(max-width:900px) {
  :root, html {scroll-padding-top: 103px;}
  [id], section {scroll-margin-top:103px;}
  .vi-benefit-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media(max-width:590px) {
  .vi-benefit-grid {grid-template-columns:1fr;}
  .vi-project-benefits,.vi-finish-options {width:calc(100% - 24px);margin:28px auto 36px;padding:22px;}
  .vi-menu-panel {width: min(330px, calc(100vw - 20px)) !important;}
  .vi-readable-caption {font-size:15px!important;}
}
@media (prefers-reduced-motion: reduce) {
  .vi-project-benefits *, .vi-finish-options * { animation: none !important; transition: none !important; }
}