/* Variant shared extras */
.hero-banner {
  position: relative;
  overflow: hidden;
  background: #1b2744;
}
.hero-banner > img {
  width: 100%;
  height: min(72vh, 560px);
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,32,64,.42), rgba(22,32,64,.62));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
}
.hero-overlay h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  margin: 0 0 .35em;
}
.hero-overlay p {
  color: #f3f5f8;
  margin: 0 0 .45em;
  max-width: 720px;
  font-size: 1.12rem;
}
.hero-overlay .hero-tag {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
}

.service .card-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin: 0 0 .85rem;
}
.service { text-align: center; }

/* Slideshow */
.slideshow {
  position: relative;
  background: #1b2744;
  overflow: hidden;
}
.slideshow .slide {
  display: none;
  position: relative;
}
.slideshow .slide.is-active { display: block; }
.slideshow .slide img {
  width: 100%;
  height: min(70vh, 540px);
  object-fit: cover;
}
.slideshow .slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1rem 1.6rem;
  background: linear-gradient(transparent, rgba(15,22,40,.72));
  color: #fff;
  text-align: center;
}
.slideshow .slide-caption h1,
.slideshow .slide-caption p { color: #fff; margin: 0 0 .3rem; }
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.88);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  color: #222;
}
.slide-prev { left: 12px; }
.slide-next { right: 12px; }
.slide-dots {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.slide-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  padding: 0;
}
.slide-dots button.is-active { background: #fff; }

.work-strip-wrap { padding: 2.8rem 0 1.5rem; }
.work-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 1.2rem;
}
.work-strip img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* Split hero */
.split-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 460px;
  background: var(--light);
}
.split-hero .split-copy {
  padding: clamp(1.8rem, 4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-hero .split-copy h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--blue);
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
}
.split-hero .split-photo img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

.service-rows { padding: 2.5rem 0 1rem; }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
}
.service-row.reverse { direction: rtl; }
.service-row.reverse > * { direction: ltr; }
.service-row img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.service-row .service-copy {
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-row .num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #6d6d6d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
}

@media (max-width: 860px) {
  .work-strip { grid-template-columns: repeat(3, 1fr); }
  .split-hero,
  .service-row,
  .service-row.reverse { grid-template-columns: 1fr; direction: ltr; }
  .hero-banner > img,
  .slideshow .slide img { height: 320px; }
}
@media (max-width: 640px) {
  .work-strip { grid-template-columns: repeat(2, 1fr); }
}