/* services.css */

/* ===== HERO ===== */
.page-hero{
  padding:140px 0 100px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(90,107,30,0.18) 0%, rgba(90,107,30,0) 52%),
    radial-gradient(circle at 85% -10%, rgba(62,74,18,0.12) 0%, rgba(62,74,18,0) 55%),
    linear-gradient(160deg, #f7f6f2 0%, #efe8dc 100%);
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:-25% -10%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(62,74,18,0.06) 0,
      rgba(62,74,18,0.06) 1px,
      transparent 1px,
      transparent 16px
    );
  opacity:0.18;
  transform:rotate(-2deg);
  pointer-events:none;
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 62%);
  pointer-events:none;
}

.page-hero .container{
  position:relative;
  z-index:1;
}

.page-hero h1{
  font-size:52px;
  margin-bottom:15px;
}

.page-hero p{
  max-width:620px;
  margin:auto;
  font-size:17px;
  color:#555;
  line-height:1.7;
}

/* ===== SERVICES FLOW ===== */
.services-flow{
  padding:120px 0;
  background:#ffffff;
}

.flow-item{
  position:relative;
  max-width:900px;
  margin:0 auto 120px;
}

.flow-item.reverse{
  text-align:right;
}

/* NUMBER */
.flow-number{
  position:absolute;
  top:-20px;
  left:-90px;
  font-size:56px;
  font-family:'Sora',sans-serif;
  color:#5a6b1e;
  opacity:.18;
}

.flow-item.reverse .flow-number{
  left:auto;
  right:-90px;
}

/* CONTENT */
.flow-content h3{
  font-size:28px;
  margin-bottom:12px;
}

.flow-content p{
  max-width:620px;
  font-size:16px;
  line-height:1.8;
  color:#555;
}

.flow-item.reverse .flow-content p{
  margin-left:auto;
}

/* ===== CTA ===== */
.services-cta{
  background:#f3f2ed;
  padding:120px 0;
}

.services-cta h2{
  margin-bottom:25px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){

  .page-hero h1{
    font-size:36px;
  }

  .flow-item,
  .flow-item.reverse{
    text-align:left;
    margin-bottom:80px;
  }

  .flow-number{
    position:static;
    left:auto;
    right:auto;
    margin-bottom:10px;
    opacity:1;
    font-size:32px;
  }

  .flow-content p{
    margin:0;
  }
}

@media (max-width:900px){

  /* ===== CONTACT CARDS FINAL FIX ===== */
  .contact-grid{
    grid-template-columns:1fr;
    width:100%;
  }

  .contact-card{
    width:100%;
    max-width:100%;
    padding:28px 16px;
  }

  .hero-card{
    padding:24px 16px;
  }
}