.contact-card{
  max-width: 900px;
  margin: clamp(1rem, 4vw, 2rem) auto 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,60,0,.08), transparent 60%),
    var(--surface);
  border:1px solid #222;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.contact-card h2{
  font-family: Creepster, cursive;
  color: var(--accent);
  font-size: var(--step-2);
  margin: 0 0 .5rem;
  letter-spacing: .4px;
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 40%, transparent);
  animation: spooky-flicker 8s linear infinite;
}

.contact-intro{
  margin: 0 0 1rem;
  font-size: var(--step-0);
  color: #eaeaea;
}

.contact-form{
  display:grid;
  gap: clamp(.75rem, 2.5vw, 1rem);
}

.btn-cta{
  justify-self:start;
  display:inline-block;
  padding:.7rem 1.1rem;
  font-weight:700;
  border-radius: 999px;
  color:#fff;
  background: linear-gradient(180deg, #1a1a1a, #131313);
  border:1px solid #262626;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-cta:hover{
  transform: translateY(-1px);
  border-color: var(--ring);
  box-shadow: 0 0 0 6px var(--ring);
}

.form-note{
  margin:.25rem 0 0;
  font-size: var(--step--1);
  color:#bdbdbd;
}

@media (max-width: 420px){
  .btn-cta{ width:100%; text-align:center; }
}

.ig-card-carousel{ max-width: 1200px; margin: 0 auto; padding: 1.25rem; color: var(--text,#f2f2f2); }
.ig-card-carousel h2{ text-align:center; margin: 0 0 1rem; }

.ig-stage{
  position: relative;
  height: clamp(240px, 45vw, 460px);
  border-radius: var(--radius,16px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,60,0,.08), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow,0 10px 30px rgba(0,0,0,.35));
  overflow: hidden;
  perspective: 1200px;                 /* enables depth */
}

.ig-slides{ position: relative; width:100%; height:100%; }

.ig-slide{
  position: absolute; inset: 0;
  display: block; border-radius: var(--radius,16px); overflow: hidden;
  background:#000; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .45s ease, opacity .35s ease, filter .35s ease, z-index 0s .45s;
  pointer-events: none;                /* only active gets clicks */
  opacity: 0; transform: translateZ(-300px) scale(.85);
}
.ig-slide img{ width:100%; height:100%; object-fit: contain; aspect-ratio: 16/9; display:block; padding: 10px}

.ig-slide.is-active{
  transform: translateZ(0) scale(1);
  opacity: 1; z-index: 3; pointer-events: auto; filter:none;
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}
.ig-slide.is-prev{
  transform: translateX(-10%) translateZ(-140px) scale(.92);
  opacity: .7; z-index: 2; filter: brightness(.85) saturate(.9);
}
.ig-slide.is-next{
  transform: translateX(10%) translateZ(-140px) scale(.92);
  opacity: .7; z-index: 2; filter: brightness(.85) saturate(.9);
}
.ig-slide.is-off-left{  transform: translateX(-45%) translateZ(-300px) scale(.85); }
.ig-slide.is-off-right{ transform: translateX(45%)  translateZ(-300px) scale(.85); }

.ig-arrow{
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  width: 42px; height: 42px; 
  border-radius: 999px;
  color: #fff; font-size: 1.25rem; cursor: pointer;
  display:grid; place-items:center;
  z-index: 100;
}
.ig-arrow.left{  left: 10px; }
.ig-arrow.right{ right: 10px; }
.ig-arrow:hover{ background: rgba(255,255,255,.16); }

@media (max-width: 700px){
  .ig-stage{ height: clamp(260px, 55vw, 420px); }
  .ig-slide img{ aspect-ratio: 4/3; }
}