/* Vista Lead Generation — authoritative visual/layout reset
   Purpose: one rendering model for every website graphic across desktop/tablet/mobile. */
:root{
  --vlg-content:1180px;
  --vlg-gutter:32px;
  --vlg-radius:20px;
  --vlg-line:#e2e8f0;
}
html,body{max-width:100%;overflow-x:hidden!important}
img,svg{max-width:100%;height:auto}

/* One page rail everywhere. */
.shell,.mobile-panel nav{
  width:100%!important;
  max-width:calc(var(--vlg-content) + (var(--vlg-gutter) * 2))!important;
  padding-left:var(--vlg-gutter)!important;
  padding-right:var(--vlg-gutter)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
.product-stage,.scenic-strip,.scenic-strip.visual-frame{
  width:calc(100% - (var(--vlg-gutter) * 2))!important;
  max-width:var(--vlg-content)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
.hero-grid,.inner-hero-grid,.feature-switcher,.section-head,.split-feature,
.faq-layout,.contact-shell,.testimonial,.footer-grid,.team-grid,.pricing-grid,
.resource-grid,.step-cards,.process-grid,.three-info{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
}
.hero-grid>*,.inner-hero-grid>*,.feature-switcher>*,.section-head>*,.split-feature>*,
.faq-layout>*,.contact-shell>*,.testimonial>*,.footer-grid>*,.team-grid>*,.pricing-grid>*,
.resource-grid>*,.step-cards>*,.process-grid>*,.three-info>*{min-width:0!important;max-width:100%!important}

/* Kill every legacy layered graphic rule. Every active graphic is now one final image. */
.visual-frame{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  padding:0!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:hidden!important;
  border:1px solid rgba(25,39,74,.09)!important;
  border-radius:var(--vlg-radius)!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 16px 40px rgba(25,39,74,.09)!important;
  isolation:auto!important;
}
.visual-frame::before,.visual-frame::after{display:none!important;content:none!important;background:none!important}
.visual-frame .visual-fg,.visual-frame .safe-graphic{display:none!important}
.visual-frame .visual-composite{
  display:block!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:1!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Standard 16:10 graphic families. Source files are 1200x750, so nothing can crop. */
.hero-art.visual-frame,.inner-visual.visual-frame,.switch-visual.visual-frame,
.step-visual.visual-frame,.resource-art.visual-frame,.portrait-art.visual-frame{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
.hero-art.visual-frame .visual-composite,.inner-visual.visual-frame .visual-composite,
.switch-visual.visual-frame .visual-composite,.step-visual.visual-frame .visual-composite,
.resource-art.visual-frame .visual-composite,.portrait-art.visual-frame .visual-composite{
  aspect-ratio:8/5!important;
  object-fit:contain!important;
}
/* Wide strip sources are 1200x480. */
.scenic-strip.visual-frame .visual-composite{aspect-ratio:5/2!important;object-fit:contain!important}

/* Hero: image and caption are separate normal-flow blocks. */
.hero-art.visual-frame{margin-inline:auto!important}
.hero-art.visual-frame .quote-bubble,.hero-art.visual-frame .visual-caption{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:14px 18px!important;
  border:0!important;
  border-top:1px solid var(--vlg-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  font-size:13px!important;
  line-height:1.45!important;
}

/* Feature switcher: image first, live text below; never stacked over the image. */
.switch-visual.visual-frame{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.switch-visual.visual-frame .tab-pane{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
}
.switch-visual.visual-frame .pane-card{
  position:static!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:24px!important;
  border:0!important;
  border-top:1px solid var(--vlg-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Subpage hero: final image above the supporting metric/board. */
.inner-visual.visual-frame{display:flex!important;flex-direction:column!important;margin-inline:auto!important}
.inner-visual.visual-frame .metric-hero,
.inner-visual.visual-frame .vertical-board,
.inner-visual.visual-frame .about-logo-card{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:20px 22px!important;
  border:0!important;
  border-top:1px solid var(--vlg-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Homepage process cards: no legacy circles, labels or clipped decorations. */
.step-cards{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.step-card{
  width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;
  padding:16px!important;overflow:hidden!important;border-radius:18px!important;
}
.step-visual.visual-frame{margin:8px 0 22px!important;border-radius:14px!important}
.step-visual.visual-frame .photo-label,
.step-visual.visual-frame>i,.step-visual.visual-frame>b,.step-visual.visual-frame>svg,
.step-visual.visual-frame>span:not(.visual-caption){display:none!important}

/* Resource cards and testimonial image use the exact same media format. */
.resource-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
.resource-card{width:100%!important;min-width:0!important;overflow:hidden!important}
.resource-art.visual-frame{margin:0 0 16px!important;border-radius:15px!important}
.resource-art.visual-frame>svg{display:none!important}
.portrait-art.visual-frame{height:auto!important}

/* Contact image + details stay in flow. */
.contact-shell aside.visual-frame{display:flex!important;flex-direction:column!important;padding:0!important;overflow:hidden!important;color:inherit!important}
.contact-shell aside.visual-frame .contact-stat{
  position:static!important;margin:0!important;padding:14px 18px!important;
  border:0!important;border-top:1px solid var(--vlg-line)!important;border-radius:0!important;
  background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Green visual: image then supporting copy. */
.green-impact.visual-frame{display:flex!important;flex-direction:column!important;padding:0!important;overflow:hidden!important}
.green-impact.visual-frame .leaf{display:none!important}
.green-impact.visual-frame>b{font-size:52px!important;line-height:1!important;color:var(--navy)!important;text-shadow:none!important;padding:20px 22px 0!important}
.green-impact.visual-frame>p{color:var(--muted)!important;text-shadow:none!important;padding:0 22px 22px!important;margin:8px 0 0!important}

/* Price and contact scenic strips always follow the common rail. */
.scenic-strip.visual-frame{height:auto!important;min-height:0!important;overflow:hidden!important;border-radius:var(--vlg-radius)!important}

/* Cards never create horizontal overflow. */
.price-card,.info-card,.process-card,.team-card,.team-card-photo,.contact-form,.cta-card{min-width:0!important;max-width:100%!important}

@media(max-width:1100px){
  :root{--vlg-gutter:24px}
  .step-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-grid,.inner-hero-grid{grid-template-columns:1fr!important;gap:34px!important}
  .hero-art.visual-frame,.inner-visual.visual-frame,.switch-visual.visual-frame{width:min(100%,760px)!important;margin-inline:auto!important}
}
@media(max-width:720px){
  :root{--vlg-gutter:16px;--vlg-radius:18px}
  .step-cards,.resource-grid{grid-template-columns:1fr!important;gap:16px!important}
  .step-card,.resource-card{width:100%!important;max-width:100%!important;margin:0!important}
  .switch-visual.visual-frame .pane-card{padding:18px!important}
  .inner-visual.visual-frame .metric-hero,.inner-visual.visual-frame .vertical-board,.inner-visual.visual-frame .about-logo-card{padding:18px!important}
  .contact-shell aside.visual-frame .contact-stat{padding:13px 16px!important}
  .green-impact.visual-frame>b{font-size:44px!important;padding:18px 18px 0!important}
  .green-impact.visual-frame>p{padding:0 18px 18px!important}
  .pricing-grid,.three-info,.team-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  :root{--vlg-gutter:14px;--vlg-radius:16px}
  .hero-art.visual-frame .quote-bubble,.hero-art.visual-frame .visual-caption{padding:12px 14px!important;font-size:12px!important}
  .switch-visual.visual-frame .pane-card{padding:16px!important}
  .inner-visual.visual-frame .metric-hero,.inner-visual.visual-frame .vertical-board,.inner-visual.visual-frame .about-logo-card{padding:16px!important}
}