.vss{
  --vss-bg:#0B0B10;
  --vss-accent:#F0C25E;
  --vss-text:#fff;
  --vss-transition:500ms;
  background:var(--vss-bg);
  color:var(--vss-text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  overflow-x:hidden;
  position:relative;
}
.vss *{box-sizing:border-box;}
.vss h1,.vss h2,.vss h3{font-family:inherit;font-weight:800;margin:0;}

/* ---------------- full-page background image ---------------- */
/* Fixed so it stays put and covers the whole viewport behind every section
   (top image row, video, bottom image grid) regardless of page scroll. */
.vss-bg-image{
  position:fixed;inset:0;z-index:0;pointer-events:none;
    background-position: center top;
}

/* ---------------- starfield background (static twinkle layer) ---------------- */
.vss-stars{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(2px 2px at 8% 12%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 22% 30%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 8%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 48% 22%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 14%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 75% 34%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 10%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 5% 55%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 70%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 30% 85%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 62%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 58% 78%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 60%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 82% 90%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 46%, var(--vss-accent), transparent 60%);
  opacity:.4;
}

/* ---------------- floating particles (animated, moves upward continuously) ---------------- */
/* fixed to the viewport so particles always fill the screen while any part of
   this [video_scroll] section is in view; JS toggles vss-particles-visible so
   they never bleed into the theme header/footer above or below this section. */
.vss-particles{
  position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;
  opacity:0;transition:opacity 500ms ease;
}
.vss-particles.vss-particles-visible{opacity:1;}
.vss-chunk{
  position:absolute;bottom:-5%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff8e0 0%, var(--vss-accent) 45%, rgba(240,194,94,0) 75%);
  box-shadow:0 0 6px 1px rgba(240,194,94,.55);
  animation-name:vssChunkFloat;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:var(--vss-chunk-duration,14s);
  will-change:transform,opacity;
}
@keyframes vssChunkFloat{
  0%{   transform:translate(0,0) scale(.6);   opacity:0; }
  8%{   opacity:1; }
  50%{  transform:translate(var(--vss-chunk-drift,20px),-60vh) scale(1); }
  92%{  opacity:.8; }
  100%{ transform:translate(0,-125vh) scale(.7); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .vss-chunk{animation:none;opacity:.5;}
}

/* ---------------- TOP SECTION: 3 image columns (replaces the old text hero) ---------------- */


/* ---------------- STICKY VIDEO-SCROLL SECTION ---------------- */
.vss-scrollytell{position:relative;z-index:1;height:2700vh;}
.vss-pin{
  position:absolute;top:0;left:0;width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.vss-pin.vss-fixed{position:fixed;top:50px;left:0;width:100%;}
.vss-pin.vss-bottom-pin{position:absolute;top:auto;bottom:0;}

/* background color panels, crossfaded per scroll segment, sitting behind the video */
.vss-bg-stack{position:absolute;inset:0;z-index:0;}
.vss-bg-panel{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--vss-transition) ease;
}
.vss-bg-panel.vss-active{opacity:1;}

/* the video itself, centered and pinned -- shown as a portrait, mobile-app-
   style frame (max 400px wide) rather than a wide landscape video */
.vss-video-frame{
    position: relative;
    width: 450px;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.vss-video-frame.is-active{
    opacity: 1;
    pointer-events: auto;
}

.vss-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
    margin:0 auto;
}


/*new css start*/

.vss-top{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:40px 4% 20px;
  margin-top: 100px;
}
.vss-top-row{
  display:flex;
  align-items:center;
  justify-content:center;
  /*gap:clamp(4px, 2vw, 20px);*/
  max-width:100%; 
}
.vss-top-img{
  display:block;
  height:auto;
  flex:0 0 auto;
}
.vss-top-img-center{
  max-width:min(420px, 60vw);
  order:2;
  z-index: 3;
}
.vss-top-img-left{
  max-width:min(110px, 16vw); 
  order:1;
  margin-right:-80px;         /* pull it in tighter against the banner */
}
.vss-top-img-right{
  max-width:min(110px, 16vw);
  order:3;
  margin-left:-80px;
}

@media (max-width:820px){
  .vss-top{padding:0px;}
  .vss-top-row{gap:clamp(2px, 1.5vw, 10px);}
  .vss-top-img-center{max-width:66vw !important;}
  .vss-top-img-left,.vss-top-img-right{max-width:45vw !important;}
}

@media (max-width:480px){
  .vss-top-img-center{max-width:70vw !important;}
  .vss-top-img-left,.vss-top-img-right{max-width:44px;}
}

/*new css end*/

@media (max-width:820px){
  .vss-video-frame{width:min(400px,90vw);}
  .vss-video{border-radius:20px;width: 100%;}
  .vss-hero {padding-top:60px;}
}

/*
 * Captions are now images (no text). They still get their opacity + transform
 * written directly by JS on every animation frame (smoothly eased), so they
 * move continuously as the user scrolls rather than snapping on/off -- this
 * motion logic is unchanged from the text version. The vss-show class +
 * transition below remain as a graceful fallback (no-JS, or the very first
 * paint).
 */
.vss-caption{
  position:absolute;
  max-width:var(--vss-caption-max-width,360px);
  margin-top:var(--vss-caption-margin-top,0);
  opacity:0;transform:translateY(50px);
  transition:opacity var(--vss-transition) ease, transform var(--vss-transition) ease;
  z-index:3;pointer-events:none;will-change:transform,opacity;
}
.vss-caption.vss-show{opacity:1;transform:translateY(0);}
.vss-caption img{
  display:block;max-width:100%;height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
/* left/right captions now sit near the top of the screen (above the
   centered video) instead of vertically centered beside it */
.vss-caption.vss-left{left:6%;top:50%;transform:translateY(40px);}
.vss-caption.vss-left.vss-show{transform:translateY(0);}
.vss-caption.vss-right{right:6%;top:50%;transform:translateY(40px);}
.vss-caption.vss-right.vss-show{transform:translateY(0);}
.vss-caption.vss-left img{margin-left:0;}
.vss-caption.vss-right img{margin-right:0;margin-left:auto;}
.vss-caption.vss-bottom{left:50%;bottom:0%;transform:translate(-50%,60px);width:100%;}
.vss-caption.vss-bottom.vss-show{transform:translate(-50%,0);}
.vss-caption.vss-bottom img{margin:0 auto;max-width:min(calc(var(--vss-caption-max-width,360px) * 1.35), 92vw);}

@media (max-width:820px){
  .vss-caption.vss-left,.vss-caption.vss-right{
    left:50%;right:auto;top:5%;transform:translate(-50%,40px);
  }
  .vss-caption.vss-left.vss-show,.vss-caption.vss-right.vss-show{transform:translate(-50%,0);}
  .vss-caption.vss-left img,.vss-caption.vss-right img{margin-left:auto;margin-right:auto;}
}

/* ---------------- BOTTOM SECTION: 2 rows x 3 image columns ---------------- */
.vss-bottom-grid{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:28px;
  padding:40px 6% 70px;
}
.vss-bottom-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.vss-bottom-cell{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-width:0;}
.vss-bottom-cell img{max-width:100%;height:auto;display:block;}
.vss-bottom-cell a{display:block;line-height:0;}

@media (max-width:820px){
  .vss-bottom-grid{padding:28px 5% 50px;gap:18px;}
  .vss-bottom-row{gap:10px;}
}

@media (max-width:767px){
  .vss-scrollytell{height:3700vh;}
}




@media (prefers-reduced-motion:reduce){
  .vss-caption,.vss-bg-panel,.vss-video-frame{transition:none;}
  .vss-chunk{animation:none;}
}

.vss-bottom-grid .vss-bottom-row:nth-child(2) {
  gap: 4px;                 /* tighter gap between icons */
  justify-content: center;  /* group them together instead of spreading edge-to-edge */
}

.vss-bottom-grid .vss-bottom-row:nth-child(2) .vss-bottom-cell {
  flex: 0 0 auto;   /* stop each cell from stretching to fill equal space */
}

.vss-bottom-grid .vss-bottom-row:nth-child(2) .vss-bottom-cell img {
    max-width: 130px;
    margin: 0px 10px;
}