/* ---------- Hero ---------- */
.srv-hero{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(84px, 8vw, 120px) 0;
  color: #fff;
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('service-hero.jpg') center/cover no-repeat;
}
.srv-hero .eyebrow{
  margin: 0 0 .4rem;
  font-weight: 800;
  opacity: .95;
}
.srv-title{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: .2px;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  margin: 0 0 .5rem;
  color: #fff;
}
.srv-sub{
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(1rem, .25vw + .98rem, 1.1rem);
  opacity: .95;
}

/* ---------- Intro (light gradient like the rest of the site) ---------- */
.srv-intro{
  text-align: center;
  padding-inline: clamp(16px, 4vw, 24px);
  color: var(--primary-gray);
   max-width: 820px;                  /* keep it narrow/readable */
  margin: clamp(16px, 4vw, 40px) auto;
}

.srv-intro p{
  margin: 0;
  text-wrap: balance;                 /* nicer line breaks (modern browsers) */
}

/* ---------- Grid layout ---------- */
.srv-grid{
  display: grid;
  grid-template-columns: 1fr minmax(260px, 640px) 1fr; /* card | tall photo | card */
  gap: clamp(16px, 2.2vw, 24px);
  align-items: stretch;
  padding: 0 16px clamp(40px, 6vw, 64px);
}

/* Cards */
.srv-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 24px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .65rem;
}
.srv-icon{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.2rem;
}
.srv-card-title{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  color: var(--primary-dark);
  margin: .25rem 0 .25rem;
  font-size: clamp(1.25rem, .6vw + 1.1rem, 1.6rem);
}
.srv-card p{ margin: 0 0 .5rem; color: var(--primary-gray); }

.srv-cta{
  margin-top: auto;
  display: inline-block;
  font-weight: 800;
  color: var(--primary-dark);
  text-decoration: none;
}
.srv-cta:hover{ color: var(--accent); }

/* Tall photo in the middle column */
.srv-showcase{
  border-radius: 18px;
  background: var(--photo) center/cover no-repeat #ddd;
  min-height: 520px;
  box-shadow: var(--shadow-soft);
}

/* ===== Centered-portrait services grid ===== */
.services-stack{
  display:grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 460px) minmax(280px, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  margin-top: clamp(24px, 4vw, 48px);
}

/* Two stacked columns (left and right) */
.col-stack{
  display:grid;
  grid-auto-rows: auto;
  gap: clamp(16px, 2vw, 24px);
  align-content: start;
  align-items: start;
}

/* Portrait image in the middle */
.svc-portrait{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  min-height: 600px;                    /* nice tall portrait look on desktop */
  background: #eee;
}
.svc-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Service cards */
.svc-card{
  background:#fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  height: auto;
  align-self: start;
}
.svc-icon{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent, #f2c300);
  color:#111;
  font-size: 1.1rem;
  margin-bottom:.6rem;
}
.svc-title{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  color: var(--primary-dark, #1c2833);
  margin: 0 0 .35rem;
  font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem);
}
.svc-copy{
  color:#2e2e2e;
  margin: 0 0 .8rem;
}
.svc-link{
  margin-top: auto;
  font-weight: 800;
  text-decoration: none;
  color: var(--accent, #f2c300);
}
.svc-link:hover{
  color: var(--primary-dark, #1c2833);
}

/* Responsive: stack everything; portrait first */
@media (max-width: 991.98px){
  .services-stack{
    grid-template-columns: 1fr;
  }
  .svc-portrait{
    order: -1;
    min-height: 420px;
  }
  .col-stack{
    grid-auto-rows: auto;
  }
}

/* Second row reuses the same grid. The HTML already places image and cards in the right order. */

/* ---------- CTA band ---------- */
.srv-cta-band{
  background:
    radial-gradient(1000px 540px at -10% 110%, rgba(241,196,15,.14), transparent 60%),
    radial-gradient(1000px 540px at 110% -10%, rgba(99,102,241,.10), transparent 60%),
    #fafafa;
  padding: clamp(28px, 6vw, 56px) 0;
  text-align: center;
}
.band-inner h3{
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0 0 .35rem;
  font-size: clamp(1.4rem, .6vw + 1.2rem, 1.8rem);
}
.band-inner p{ margin: 0 0 .8rem; color: var(--primary-gray); }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px){
  .srv-grid{
    grid-template-columns: 1fr;
  }
  .srv-showcase{
    min-height: 360px;
  }
}

/* Center the two card columns against the portrait image (desktop only) */
@media (min-width: 992px){
  .services-stack{
    /* was: align-items: start; */
    align-items: center;        /* center grid items vertically in the row */
  }
  .services-stack .col-stack{
    align-self: center;         /* ensure each stack centers within its cell */
  }
}