/* ---- Hero container ---- */
.hero{
  position: relative;
  height: calc(400px - 0px);      /* same height as header-section for now */
  display: grid;
  align-items: center;
}

/* Slides wrapper */
.slides{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Single slide */
.slide{
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  display: grid; align-items: center;
}

.slide.is-active{ opacity: 1; transform: translateY(0); }

/* Content block (left aligned like mock) */
.hero-content{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  color: #fff;
}

.hero-title{
  margin: 0 0 12px 0;
  font-weight: 700;
  letter-spacing: .6px;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
}

.hero-subtitle{
  margin: 0 0 28px 0;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  max-width: 58ch;
}

/* CTA buttons (reuse .btn base) */
.hero-cta{ display:flex; gap:16px; flex-wrap: wrap; }

.btn{
  border-radius: 10px !important
}

.btn-teal{
  background: #00C2A8;     /* Electric Teal from your palette */
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  color: #fff
}
.btn-teal:hover{ filter: brightness(1.05); transform: translateY(-1px); }

.btn-white{
  background: #fff !important;
  color: #1f2b4a;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.btn-white:hover{ transform: translateY(-1px); }

/* Slightly larger, chunkier buttons for hero */
.hero-cta .btn{ 
  padding: 14px 22px; 
  border-radius: 14px; 
  font-weight: 800; 
  text-decoration: none !important;
}

/* ---- Dots ---- */
.hero-dots{
  position: absolute;
  left: 50%; top: 310px;
  transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}
.dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 1px 4px rgba(0,0,0,.25) inset;
}
.dot.is-active{
  width: 36px; height: 14px;
  background: #00C2A8;     /* teal pill for active */
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}


.hero-dots .dot{ cursor:pointer; }
.hero-dots .dot:focus-visible{ outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.hero-dots .dot{ position:relative; }
.hero-dots .dot::after{ content:""; position:absolute; inset:-6px; } /* larger tap target */