/* === NVW Apple Cards – Bigger landscape, two-up, label BELOW image (attached), centered dots, right-side arrows === */
.nvw-cards{
  --card-w: min(1600px,96vw);
  --aspect: 16/9;
  --gap: 32px;
  --radius: 28px;
  --speed: 650ms;
  --per: 2;                       /* JS updates at breakpoints */

  /* LIGHT FROST (translucent white glass) */
  --frost-bg: rgba(255,255,255,.55);  /* translucent light */
  --frost-blur: 12px;                 /* blur radius */
  --frost-sat: 160%;                  /* saturation boost */
  --frost-border: rgba(0,0,0,.12);    /* subtle inner border */

  --headline-size: clamp(24px,2.8vw,40px);
  --headline-weight: 800;
  --kicker-weight: 600;

  width: var(--card-w);
  margin-inline: auto;
  position: relative;
  padding: 0 2em;
}

.nvw-cc__viewport{
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.nvw-cc__track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform var(--speed) cubic-bezier(.22,.61,.36,1);
  padding: 6px;
}

/* Card becomes a single unit: image on top, label panel attached beneath */
.nvw-card{
  flex: 0 0 calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per));
  border-radius: var(--radius);
  background: transparent;
  overflow: hidden;                 /* keeps the combined radius clean */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.nvw-card__frame{
  margin: 0;
  /* top corners rounded, bottom squared so the label panel can attach */
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: #111;
}
.nvw-card__frame img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect);
  object-fit: cover;
  transform: translateZ(0);
}

/* Label panel below, visually attached (shares bottom radius with the whole card) */
.nvw-card__label{
  position: relative;
  padding: 16px 20px 18px;
  color: #111C4E; /* darker text for light frost */
  border-radius: 0 0 var(--radius) var(--radius);
  /* overlap a few px into the image so the blur samples the photo */
  margin-top: -1px;

  /* translucent base + frosted effect */
  background: var(--frost-bg);
  backdrop-filter: saturate(var(--frost-sat)) blur(var(--frost-blur));
  -webkit-backdrop-filter: saturate(var(--frost-sat)) blur(var(--frost-blur));

  /* subtle hairline seam + soft inner border for definition */
}
/* subtle hairline at the seam for polish */
.nvw-card__label::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent);
}

.nvw-card__kicker{
  display:block;
  text-transform: uppercase;
  opacity:.95; margin:0 0 10px 0;
  font-size: 1.5em;
  line-height: 1.1;
  text-transform: uppercase;
  font-family: 'FS Benjamin Medium';
  font-weight: 400;
}
.nvw-card__headline{
  margin:0;
  font-size: 1em;
  line-height: 1.1;
  font-family: 'Poppins';
  font-weight: 400;
}

/* Controls wrapper below the slider */
.nvw-cc__controls{
  width: var(--card-w);
  margin: 14px auto 0;
  position: relative;
  height: 42px; /* matches button height */
}

/* Dots centered */
.nvw-cc__dotsbar{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; height: 42px;
  display: flex; align-items: center;
}
.nvw-cc__dots{
  display: inline-flex; gap: 10px;
}
.nvw-cc__dots .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: #EAE4DC; opacity:.95;
  transition: width .2s ease, background .2s ease, opacity .2s ease;
}
.nvw-cc__dots .dot.is-active{
  width: 26px; height: 8px; background: #B09043;
}

/* Arrows right */
.nvw-cc__arrows{
  position: absolute; right: 2em; top: 0;
  height: 42px; display:flex; align-items:center; gap:10px;
}
.nvw-cc__btn{
  width:42px; height:42px; border-radius:999px;
  background:#EAE4DC; color:#111C4E; border:0;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display:grid; place-items:center;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.nvw-cc__btn:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.28); background:#B09043; }

/* Breakpoints (two-up tablet, one-up phone) */
@media (max-width: 1024px){
  .nvw-cards{ --per: 2; }
}
@media (max-width: 768px){
  .nvw-cards{ --per: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nvw-cc__track{ transition: none; }
}