/* ============================================
   AquaTerra Solutions — Services Page
   ============================================ */

/* ---- Services Hero ---- */
.sp-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sp-atmos-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(
    180deg,
    #A8C4D4 0%,
    #B8CEDD 30%,
    #C5D8E5 60%,
    #D8E5EE 100%
  );
}

.sp-atmos-sun {
  position: absolute;
  bottom: 45%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFE4A0 0%, #F5C860 40%, #E89040 100%);
  box-shadow:
    0 0 60px 30px rgba(245, 200, 80, 0.3),
    0 0 120px 60px rgba(245, 160, 50, 0.12);
  z-index: 1;
}

.sp-atmos-land {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, transparent 0%, var(--land-base) 30%);
  z-index: 2;
}

.sp-atmos-land::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background:
    radial-gradient(ellipse 90% 35% at 10% 80%, #D4B582 0%, transparent 100%),
    radial-gradient(ellipse 80% 30% at 85% 85%, #C8A870 0%, transparent 100%),
    radial-gradient(ellipse 100% 40% at 30% 90%, var(--land-mid) 0%, transparent 100%),
    radial-gradient(ellipse 90% 38% at 70% 88%, var(--land-mid) 0%, transparent 100%),
    linear-gradient(180deg, var(--land-dark) 0%, #7A5230 20%, #5C3D24 100%);
}

.sp-atmos-land::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  height: 12%;
  background:
    radial-gradient(ellipse 15% 80% at 8% 100%, var(--olive) 0%, transparent 100%),
    radial-gradient(ellipse 12% 70% at 22% 100%, var(--olive) 0%, transparent 100%),
    radial-gradient(ellipse 18% 90% at 55% 100%, var(--olive) 0%, transparent 100%),
    radial-gradient(ellipse 10% 65% at 78% 100%, var(--olive) 0%, transparent 100%),
    radial-gradient(ellipse 14% 75% at 93% 100%, var(--olive) 0%, transparent 100%);
  opacity: 0.6;
  z-index: 1;
}

.sp-hero-content {
  position: relative;
  z-index: 10;
  padding: 0 4rem 0 5.5rem;
  max-width: 800px;
}

.sp-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sp-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--terracotta);
}

.sp-headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--earth);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.sp-lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--earth-mid);
  max-width: 560px;
  line-height: 1.7;
}

.sp-scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--earth);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.4;
}

.sp-scroll-arrow {
  font-size: 1rem;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- Service Sections ---- */
.svc-section {
  background: var(--cream);
  padding: 7rem 0;
}

.svc-section--alt {
  background: var(--sand-light);
}

.svc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}

.svc-section--alt .svc-inner {
  direction: rtl;
}

.svc-section--alt .svc-content-col {
  direction: ltr;
}

.svc-section--alt .svc-visual-col {
  direction: ltr;
}

.svc-visual-col {
  position: relative;
}

.svc-visual {
  height: 520px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Irrigation visual */
.spv-irrigation {
  background:
    linear-gradient(135deg, #7BA5A0 0%, #5C8A82 40%, #3D6B60 100%);
}

.spv-irrigation::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(200,230,220,0.9) 2px, transparent 2px);
  background-size: 28px 28px;
  background-position: 14px 14px;
}

.spv-irrigation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 26px,
      rgba(255,255,255,0.1) 26px,
      rgba(255,255,255,0.1) 28px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 26px,
      rgba(255,255,255,0.07) 26px,
      rgba(255,255,255,0.07) 28px
    ),
    linear-gradient(180deg, transparent 0%, rgba(40,90,80,0.85) 100%);
}

/* Well / borehole visual */
.spv-well {
  background:
    radial-gradient(ellipse at 30% 80%, #8A7040 0%, #5C4A28 40%, #2C1F14 100%);
}

.spv-well::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 55%;
  background: linear-gradient(180deg, var(--stone) 0%, var(--terracotta-light) 100%);
  border-radius: 2px;
}

.spv-well::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(196,88,42,0.3) 0%, transparent 55%),
    radial-gradient(circle at 50% 82%, rgba(140,100,50,0.5) 0%, transparent 45%);
}

/* Solar visual */
.spv-solar {
  background:
    linear-gradient(160deg, #1A3A5C 0%, #2C5F8A 50%, #3E7BA8 100%);
}

.spv-solar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 48px 48px;
}

.spv-solar::after {
  content: '';
  position: absolute;
  top: 12%;
  right: 15%;
  width: 55px;
  height: 55px;
  background: radial-gradient(circle, rgba(255,220,100,0.85) 0%, rgba(255,200,80,0.35) 50%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255,200,80,0.4);
}

/* Consulting / farm visual */
.spv-consulting {
  background:
    linear-gradient(150deg, #6B7C5A 0%, #8A9E7A 50%, #A8B88A 100%);
}

.spv-consulting::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.5;
}

.spv-consulting::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  height: 38%;
  background:
    radial-gradient(ellipse 24px 17px at 18% 72%, rgba(60,50,30,0.55) 0%, transparent 100%),
    radial-gradient(ellipse 22px 15px at 38% 68%, rgba(60,50,30,0.5) 0%, transparent 100%),
    radial-gradient(ellipse 27px 19px at 62% 75%, rgba(60,50,30,0.5) 0%, transparent 100%),
    radial-gradient(ellipse 20px 13px at 82% 70%, rgba(60,50,30,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 23px 16px at 50% 78%, rgba(60,50,30,0.4) 0%, transparent 100%);
}

/* Content column */
.svc-content-col {
  padding: 3rem 3.5rem;
}

.svc-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--earth);
  margin-bottom: 1.5rem;
}

.svc-desc {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.svc-deliverables {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.svc-deliverables li {
  font-size: 0.82rem;
  color: var(--olive);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.svc-deliverables li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--terracotta-light);
  font-size: 0.7rem;
  top: 0.1em;
}

/* ---- Integration note ---- */
.svc-integrations {
  background: var(--earth);
  padding: 6rem 0;
}

.svc-int-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}

.svc-int-mark {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.svc-int-text h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--sand);
  margin-bottom: 0.75rem;
}

.svc-int-text p {
  font-size: 0.9rem;
  color: var(--stone-dark);
  line-height: 1.7;
  max-width: 580px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .svc-inner {
    grid-template-columns: 1fr;
    padding: 0 2.5rem;
  }

  .svc-section--alt .svc-inner {
    direction: ltr;
  }

  .svc-visual {
    height: 320px;
  }

  .svc-content-col {
    padding: 2.5rem 0;
  }

  .sp-hero-content {
    padding: 0 2.5rem;
  }
}

@media (max-width: 768px) {
  .svc-section {
    padding: 4rem 0;
  }

  .sp-hero {
    min-height: 65vh;
  }

  .sp-hero-content {
    padding: 0 1.75rem;
  }

  .sp-scroll-cue {
    display: none;
  }

  .svc-inner {
    padding: 0 1.5rem;
  }

  .svc-visual {
    height: 260px;
  }

  .svc-int-inner {
    padding: 0 1.5rem;
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .sp-headline {
    font-size: 2.8rem;
  }

  .svc-headline {
    font-size: 2rem;
  }
}