:root {
  --hero-card-width: clamp(280px, 22vw, 410px);
  --hero-card-height: clamp(420px, 29vw, 550px);
  --hero-side-scale: .88;
  --hero-dim: .42;
  --hero-motion: 420ms;
  --hero-ease: cubic-bezier(.22,.68,0,1.05);
  --hero-cream: #f5f2eb;
  --hero-mobile-width: min(76vw, 320px);
  --hero-mobile-height: 430px;
}
.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--pale);
  padding: var(--size-18px) 0 var(--size-48px);
  touch-action: pan-y pinch-zoom;
}
.hero-card-stage { position:relative; height:var(--hero-card-height); }
.hero-card {
  position:absolute;
  top:50%;left:50%;
  width:var(--hero-card-width);height:var(--hero-card-height);
  overflow:hidden;
  border-radius:var(--size-16px);
  background:var(--color-f6f7f8);
  transform:translate(-50%,-50%) translateX(calc(var(--offset) * (var(--hero-card-width) * .94 + var(--size-16px)))) scale(var(--hero-side-scale));
  transition:transform var(--hero-motion) var(--hero-ease);
  z-index:1;
}
.hero-card.is-active { transform:translate(-50%,-50%);z-index:2; }
.hero-card.is-repositioning { transition:none; }
.hero-card--blue { background:var(--hero); }
.hero-card--cream { background:var(--hero-cream); }
.hero-card::after {
  content:"";position:absolute;inset:0;background:var(--color-000);
  opacity:var(--hero-dim);pointer-events:none;z-index:3;
  transition:opacity var(--hero-motion) ease;
}
.hero-card.is-active::after { opacity:0; }
.hero-card-image {
  position:absolute;bottom:0;left:0;width:100%;height:76%;object-fit:cover;
  mix-blend-mode:multiply;user-select:none;
  mask-image:linear-gradient(to bottom,var(--color-transparent),var(--color-000) 20%);
}
.hero-card--scene { background:var(--ink);color:var(--white); }
.hero-card--scene .hero-card-image { height:100%;mix-blend-mode:normal;mask-image:linear-gradient(to bottom,var(--color-transparent),var(--color-000) 45%); }
.hero-card-content {
  position:relative;z-index:2;text-align:center;padding:var(--size-44px) var(--gap) 0;
  opacity:0;transition:opacity var(--hero-motion) ease;
}
.hero-card.is-active .hero-card-content { opacity:1; }
.hero-card-content p { font-size:var(--size-12px);line-height:1.7;margin-bottom:var(--size-12px); }
.hero-card-content h2 { font-size:var(--size-28px);line-height:1.45; }
.hero-card-content a { display:inline-flex;align-items:center;gap:var(--size-14px);font-size:var(--size-11px);margin-top:var(--size-16px);padding:var(--size-8px) var(--size-16px);border-radius:var(--pill);background:var(--white);color:var(--ink); }
.hero-card-select { position:absolute;inset:0;width:100%;height:100%;z-index:4; }
.hero-arrow {
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  width:var(--size-44px);height:var(--size-44px);border-radius:50%;
  background:var(--white);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 var(--size-2px) var(--size-12px) var(--color-171c2010);
}
.hero-arrow--prev { right:calc(50% + var(--hero-card-width) / 2 + var(--size-12px)); }
.hero-arrow--next { left:calc(50% + var(--hero-card-width) / 2 + var(--size-12px)); }
.hero-arrow svg { width:var(--radius);height:var(--radius);fill:none;stroke:currentColor;stroke-width:1.5; }
.hero-arrow:hover { background:var(--pale); }
.hero-dots { position:absolute;z-index:5;bottom:var(--size-12px);left:50%;transform:translateX(-50%);display:flex;align-items:center; }
.hero-dots button { display:grid;place-items:center;width:var(--size-28px);height:var(--size-32px);padding:0; }
.hero-dots span { width:var(--size-6px);height:var(--size-6px);background:var(--muted);opacity:.35;border-radius:var(--pill); }
.hero-dots [aria-pressed="true"] span { width:var(--size-18px);background:var(--ink);opacity:1; }
.hero-carousel:has(.hero-card--scene.is-active) .hero-dots span { background:var(--white); }
@media(max-width:768px) {
  :root { --hero-card-width: min(46vw, 350px); }
  .hero-card-content { padding-top:var(--size-36px); }
  .hero-card-content h2 { font-size:var(--gap); }
}
@media(max-width:600px) {
  :root { --hero-card-width:var(--hero-mobile-width);--hero-card-height:var(--hero-mobile-height); }
  .hero-carousel { padding-top:var(--size-16px);padding-bottom:var(--size-40px); }
  .hero-card-content { padding-inline:var(--radius); }
  .hero-card-content p { font-size:var(--size-11px); }
  .hero-arrow { width:var(--size-36px);height:var(--size-36px); }
  .hero-arrow--prev { right:calc(50% + var(--hero-card-width) / 2 - var(--size-18px)); }
  .hero-arrow--next { left:calc(50% + var(--hero-card-width) / 2 - var(--size-18px)); }
}
@media(prefers-reduced-motion:reduce) {
  .hero-card,.hero-card-content,.hero-card::after { transition:none; }
}