/* HERO ROTATOR */
.hero-visual {
  position: relative;
}

.rotator {
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--teal-dark);
  border: 8px solid rgba(255,255,255,0.78);
  box-shadow: 0 28px 58px rgba(13, 66, 71, 0.22);
}

.rotator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 39, 42, 0.05) 20%,
    rgba(8, 39, 42, 0.18) 62%,
    rgba(8, 39, 42, 0.74) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide--flower {
  background: linear-gradient(135deg, #fff6f7, #ffe5ea);
}

.slide--flower img {
  object-fit: contain;
  padding: 54px;
}

.slide--coastal {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.25), transparent 22%),
    linear-gradient(160deg, #f88c7f 0%, #f6b895 42%, #276f76 100%);
  display: grid;
  place-items: center;
}

.coastal-art {
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    url("../images/beach-scene.png") center/cover no-repeat;
  border: 10px solid rgba(255,255,255,0.45);
  box-shadow: 0 20px 42px rgba(0,0,0,0.2);
}

.rotator-caption {
  position: absolute;
  z-index: 4;
  left: 28px;
  right: 28px;
  bottom: 26px;
  color: var(--white);
}

.rotator-caption strong {
  display: block;
  font-size: 1.32rem;
  margin-bottom: 4px;
}

.rotator-caption span {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
}

.rotator-controls {
  position: absolute;
  z-index: 5;
  right: 24px;
  top: 22px;
  display: flex;
  gap: 8px;
}

.rotator-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.48);
  cursor: pointer;
  padding: 0;
  transition: 0.2s ease;
}

.rotator-dot.active {
  width: 30px;
  background: var(--white);
}


.hero-location {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-location strong {
  color: var(--teal-dark);
  white-space: nowrap;
}

.hero-location span {
  color: var(--muted);
}

/* SERVICES */
.card {
  background: #fffaf5;
  border: 1px solid rgba(23, 92, 99, 0.11);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 8px 28px rgba(23, 92, 99, 0.06);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(243, 111, 109, 0.14);
  color: var(--coral-dark);
  font-size: 1.55rem;
  margin-bottom: 18px;
}

.card h3 {
  margin-bottom: 10px;
  color: var(--teal-dark);
  font-size: 1.2rem;
}

.card p {
  margin-bottom: 0;
  color: #667d7f;
}

/* WHY US */
.why-image {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 32px;
  padding: 24px;
  backdrop-filter: blur(8px);
}

.why-image img {
  border-radius: 24px;
}

.why h2 {
  color: var(--white);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.why p {
  color: rgba(255,255,255,0.82);
}

.feature-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.feature {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
}

.feature-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--coral);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.feature strong {
  display: block;
  margin-bottom: 3px;
}

.feature small {
  color: rgba(255,255,255,0.72);
  font-size: 0.94rem;
}

/* SERVICE AREA */
.area-panel h2 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.05;
  color: var(--teal-dark);
  margin-bottom: 14px;
  letter-spacing: -0.04em;
}

.area-panel p {
  color: #657d7f;
}

.area-badge {
  min-height: 280px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(243, 111, 109, 0.10), rgba(243, 111, 109, 0.10)),
    url("../images/hibiscus.png") center/62% no-repeat,
    #fff7f9;
  border: 1px solid rgba(243, 111, 109, 0.15);
  display: grid;
  place-items: end center;
  padding: 24px;
  text-align: center;
  font-weight: 900;
  color: var(--teal-dark);
}

/* CTA */
.cta-box {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, var(--coral), #f79083);
  color: var(--white);
  padding: 54px 28px;
  border-radius: 34px;
  box-shadow: var(--shadow);
}

.cta-box::before,
.cta-box::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}

.cta-box::before {
  width: 240px;
  height: 240px;
  left: -90px;
  top: -90px;
}

.cta-box::after {
  width: 320px;
  height: 320px;
  right: -130px;
  bottom: -170px;
}

.cta-box h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.04em;
}

.cta-box p {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto 24px;
  color: rgba(255,255,255,0.88);
}

.cta-box .btn {
  position: relative;
  z-index: 1;
  background: var(--teal-dark);
  color: var(--white);
}

/* FOOTER */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: contain;
}

.footer-brand strong {
  display: block;
  color: var(--white);
  font-size: 1.05rem;
}

.footer-brand small {
  color: rgba(255,255,255,0.6);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
  font-weight: 700;
  font-size: 0.92rem;
}

.footer-note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.48);
}

/* HERO SLIDE ANIMATIONS */
.slide img,
.coastal-art {
  will-change: transform, opacity;
}

.slide.active.slide--beach img {
  animation: beachZoomDrift 5.2s ease-out both;
}

.slide.active.slide--flower img {
  animation: flowerFloatIn 1.15s cubic-bezier(.2,.8,.2,1) both,
             flowerBreathe 3.8s 1.15s ease-in-out infinite alternate;
}

.slide.active.slide--coastal .coastal-art {
  animation: coastalSpinIn 1.15s cubic-bezier(.2,.8,.2,1) both,
             coastalFloat 4s 1.15s ease-in-out infinite alternate;
}

.slide.active .rotator-caption {
  animation: captionSlideUp 700ms 180ms cubic-bezier(.2,.8,.2,1) both;
}

.rotator-dot.active {
  animation: dotPulse 1.6s ease-in-out infinite;
}

@keyframes beachZoomDrift {
  0% {
    transform: scale(1.04) translate3d(-1.2%, 1%, 0);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.12) translate3d(1.5%, -1%, 0);
    opacity: 1;
  }
}

@keyframes flowerFloatIn {
  0% {
    transform: translate3d(0, 42px, 0) scale(.82) rotate(-8deg);
    opacity: 0;
  }
  65% {
    transform: translate3d(0, -8px, 0) scale(1.035) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes flowerBreathe {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-12px) scale(1.035);
  }
}

@keyframes coastalSpinIn {
  0% {
    transform: translateX(80px) scale(.72) rotate(18deg);
    opacity: 0;
  }
  70% {
    transform: translateX(-8px) scale(1.035) rotate(-2deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes coastalFloat {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-10px) rotate(1.5deg);
  }
}

@keyframes captionSlideUp {
  0% {
    transform: translateY(22px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes dotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255,255,255,.0);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255,255,255,.12);
  }
}

/* CONTACT AREA */
.contact-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn-contact-alt {
  background: rgba(255,255,255,0.97) !important;
  color: var(--teal-dark) !important;
}

.contact-details {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
}

.contact-details a:hover,
.footer-brand a:hover {
  text-decoration: underline;
}


/* SCROLL-TRIGGERED SERVICE PEST ANIMATIONS */
.service-card {
  position: relative;
  overflow: visible;
}

.pest-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  font-size: 2.45rem;
  position: relative;
  opacity: 0;
  z-index: 10;
  will-change: transform, opacity;
}

/* ANT: obvious crawl from far left */
.service-card.is-visible .pest-icon--ant {
  animation: antCrawlAcross 1.9s ease-out both;
}

/* ROACH: obvious crawl from far right */
.service-card.is-visible .pest-icon--roach {
  animation: roachCrawlAcross 1.9s ease-out both;
}

/* SPIDER: drops in from above and bounces */
.service-card.is-visible .pest-icon--spider {
  animation: spiderDrop 1.55s ease-out both;
}

/* MOSQUITO: flies in with a big zig-zag */
.service-card.is-visible .pest-icon--mosquito {
  animation: mosquitoFlight 2s ease-out both;
}

@keyframes antCrawlAcross {
  0%   { opacity: 1; transform: translateX(-700px) translateY(8px) rotate(-16deg) scale(.7); }
  12%  { transform: translateX(-600px) translateY(-7px) rotate(12deg) scale(.73); }
  24%  { transform: translateX(-500px) translateY(9px) rotate(-11deg) scale(.77); }
  36%  { transform: translateX(-400px) translateY(-6px) rotate(10deg) scale(.81); }
  48%  { transform: translateX(-300px) translateY(8px) rotate(-9deg) scale(.86); }
  60%  { transform: translateX(-215px) translateY(-5px) rotate(8deg) scale(.9); }
  72%  { transform: translateX(-135px) translateY(7px) rotate(-6deg) scale(.94); }
  84%  { transform: translateX(-65px) translateY(-4px) rotate(4deg) scale(.98); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0) scale(1); }
}

@keyframes roachCrawlAcross {
  0%   { opacity: 1; transform: translateX(700px) translateY(8px) rotate(16deg) scale(.7); }
  12%  { transform: translateX(600px) translateY(-7px) rotate(-12deg) scale(.73); }
  24%  { transform: translateX(500px) translateY(9px) rotate(11deg) scale(.77); }
  36%  { transform: translateX(400px) translateY(-6px) rotate(-10deg) scale(.81); }
  48%  { transform: translateX(300px) translateY(8px) rotate(9deg) scale(.86); }
  60%  { transform: translateX(215px) translateY(-5px) rotate(-8deg) scale(.9); }
  72%  { transform: translateX(135px) translateY(7px) rotate(6deg) scale(.94); }
  84%  { transform: translateX(65px) translateY(-4px) rotate(-4deg) scale(.98); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0) scale(1); }
}

@keyframes spiderDrop {
  0%   { opacity: 1; transform: translateY(-480px) rotate(-15deg) scale(.65); }
  58%  { transform: translateY(28px) rotate(7deg) scale(1.08); }
  72%  { transform: translateY(-15px) rotate(-4deg) scale(.97); }
  84%  { transform: translateY(9px) rotate(3deg) scale(1.03); }
  93%  { transform: translateY(-4px) rotate(-1deg) scale(.99); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes mosquitoFlight {
  0%   { opacity: 1; transform: translate(720px, -180px) rotate(28deg) scale(.6); }
  15%  { transform: translate(590px, 100px) rotate(-20deg) scale(.68); }
  30%  { transform: translate(460px, -120px) rotate(17deg) scale(.76); }
  45%  { transform: translate(335px, 80px) rotate(-14deg) scale(.83); }
  60%  { transform: translate(220px, -70px) rotate(11deg) scale(.89); }
  75%  { transform: translate(125px, 45px) rotate(-8deg) scale(.95); }
  88%  { transform: translate(55px, -20px) rotate(5deg) scale(1.02); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}