:root{
  --vv-green:#287D47;       /* Brand green */
  --vv-cream:#FDF7EE;       /* Cream */
  --vv-edge-bg:rgba(0,0,0,.28);        /* Arrow panel */
  --vv-edge-bg-hover:rgba(0,0,0,.42);
  --vv-maxw:1200px;         /* Content width inside slide */
}

/* Full-bleed behavior (only for the full variant) */
.vv-hero-carousel.vv-hero--full{
  width:100vw; left:50%; right:50%;/* --- Vital & Vice: Hero essentials --- */
:root{ --vv-green:#287D47; --vv-cream:#FDF7EE; --vv-maxw:1200px; }

.vv-hero-carousel{ position:relative; color:#fff; }

/* full-bleed variant */
.vv-hero-carousel.vv-hero--full{
  position:relative; width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
}

/* one slide visible at a time */
.vv-hero-slide{ display:none !important; position:relative; min-height:clamp(420px,70vh,760px); }
.vv-hero-slide.is-active{ display:block !important; }

/* media fills frame */
.vv-hero-media, .vv-hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.vv-hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45));
}

/* content + controls */
.vv-hero-content{ position:relative; z-index:2; max-width:var(--vv-maxw);
  margin:0 auto; padding:clamp(20px,4vw,40px); display:grid; gap:10px; }
.vv-hero-content h1,.vv-hero-content h2{ margin:0; line-height:1.1; font-size:clamp(28px,5vw,56px); }
.vv-hero-content p{ margin:4px 0 8px; font-size:clamp(16px,2.2vw,20px); }
.vv-btn{ display:inline-block; background:var(--vv-green); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:10px; font-weight:600; }

.vv-hero-nav button{ position:absolute; top:0; bottom:0; width:clamp(54px,12vw,220px);
  background:rgba(0,0,0,.28); border:0; color:#fff; cursor:pointer; display:flex; align-items:center; gap:10px; padding:0 12px; }
.vv-hero-prev{ left:0; } .vv-hero-next{ right:0; }
.vv-hero-arrow{ font-size:clamp(20px,4vw,40px); opacity:.9; }
.vv-hero-peek{ pointer-events:none; font-size:clamp(12px,1.6vw,16px); opacity:.95; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:160px; }

.vv-hero-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:8px; z-index:3; }
.vv-hero-dots button{ width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.5); }
.vv-hero-dots button[aria-selected="true"]{ background:#fff; }

  margin-left:-50vw; margin-right:-50vw;
}

/* Height of the hero */
.vv-hero-slide{ min-height:clamp(420px, 70vh, 760px); }

/* Darken/lighten image overlay for readability */
.vv-hero-media::after{
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45));
}

/* Arrow panels + hit area width */
.vv-hero-nav button{ width: clamp(54px, 12vw, 220px); }

/* Peek text width */
.vv-hero-peek{ max-width:160px; }

/* Headline and body sizes */
.vv-hero-content h1,.vv-hero-content h2{ font-size:clamp(28px,5vw,56px); }
.vv-hero-content p{ font-size:clamp(16px,2.2vw,20px); }

/* Button color */
.vv-btn{ background: var(--vv-green); }

/* assets/css/vv-hero.css */

/* base styles remain the same… */

/* full-bleed behavior lives on the modifier */
.vv-hero-carousel.vv-hero--full{
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}