/* =========================================================
   services.css
   Services page layout (Dreamweaver-safe)
   Layout only + modal styles
   Button styling lives in ug.css (e.g. .portfolio-link)
   ========================================================= */

/* -----------------------------
   SERVICES INTRO
----------------------------- */

.services-intro{
  margin-top: 4px;
  margin-bottom: 32px;
}

.services-intro p{
  margin: 0;
}

/* -----------------------------
   SERVICES GRID (FLEXBOX)
----------------------------- */

.services-grid{
  display:flex;
  flex-wrap:wrap;
  gap:48px 36px;
  padding-top:12px;
}

/* Each service card */
.service-card{
  width: calc(33.333% - 24px);
  text-align:left;
}

/* -----------------------------
   SEPARATOR (LINE + DOT)
----------------------------- */

.service-sep{
  position:relative;
  margin-bottom:14px;
  height:10px;
}

.service-sep:before,
.service-sep:after{
  content:"";
  position:absolute;
  top:50%;
  width:40%;
  height:1px;
  background:#cfcfcf;
}

.service-sep:before{ left:0; }
.service-sep:after{ right:0; }

.service-sep .dot{
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  background:#111;
  border-radius:50%;
  transform:translate(-50%, -50%);
}

/* -----------------------------
   IMAGE
----------------------------- */

.service-img{
  margin:0 auto 14px;
  max-width:240px;
}

/* Make it obvious images are clickable */
.service-img.thumb-modal{
  cursor: zoom-in;
}

/* -----------------------------
   TEXT
----------------------------- */

.service-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:.8px;
  margin:10px 0 8px;
}

.service-copy{
  font-size:14px;
  margin-bottom:10px;
}

.service-bullets{
  margin-left:24px;
  padding-left:0;
  font-size:14px;
}

.service-bullets li{
  margin:4px 0;
}

/* -----------------------------
   PORTFOLIO CTA + DIVIDER
   (button style comes from ug.css)
----------------------------- */

.service-cta{
  margin:36px 0 12px;
  padding-top:24px;
  text-align:center;
  border-top:1px solid #e7e7e7;
}

/* -----------------------------
   RESPONSIVE
----------------------------- */

@media (max-width:980px){
  .service-card{
    width: calc(50% - 18px);
  }
}

@media (max-width:600px){
  .service-card{
    width:100%;
  }

  .service-img{
    max-width:240px;
  }
}

/* =========================
   IMAGE MODAL (LIGHTBOX)
   ========================= */

/* Modal wrapper */
.img-modal{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.img-modal.is-open{
  display: block;
}

/* Dark overlay */
.img-modal__backdrop{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.82);
}

/* Modal panel */
.img-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  max-width: 980px;
  transform: translate(-50%, -50%);
  background: rgba(20,20,20,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
}

/* Close button */
.img-modal__close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
}

.img-modal__close:hover{
  background: rgba(255,255,255,0.18);
}

/* Figure reset */
.img-modal__figure{
  margin: 0;
}

/* The enlarged image */
.img-modal__img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
}

/* Caption */
.img-modal__caption{
  margin-top: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.4;
}

/* Slightly tighter on very small screens */
@media (max-width: 520px){
  .img-modal__panel{
    padding: 10px;
  }
  .img-modal__img{
    max-height: 72vh;
  }
}