/* ─────────────────────────────────────────
   ELYSIAN TRAVEL GROUP, services.css
   Services page: hero, the four services in one row, signature experiences.
   Requires: style.css
───────────────────────────────────────── */

/* Hero is the shared .split-hero in style.css; only the crop is page-specific. */
.svc-hero-img img { object-position: 62% 70%; }

/* ── THE FOUR SERVICES ─────────────────── */
.svc-pillars {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-section) var(--space-inline);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 44px);
}
.svc-pillar { text-align: center; }
.svc-pillar-img {
  aspect-ratio: 4 / 5;
  max-height: 62vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--sand);
}
.svc-pillar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-pillar-title {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(22px, 1.7vw, 27px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.svc-pillar-text {
  max-width: 300px;
  margin: 12px auto 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* ── SIGNATURE EXPERIENCES ───────────────
   Light band, one statement left, a portrait photo right. Kept off the dark
   ink so it never reads as the start of the footer. */
/* The house pattern: the Elysian leaf fan as a hairline, in a sparse
   half-drop repeat, alternating direction, one shade off the ground. */
.svc-signature {
  background-color: var(--stone);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 112px);
  padding: var(--space-section) max(var(--space-inline), calc((100vw - 1312px) / 2));
}
/* The house leaf fan, four times and large, blurred and half transparent:
   one behind the statement, the others turned and mirrored, bleeding off
   the edges. Filled rather than outlined: a hairline this big disappears
   under the blur. One layer, so blur and opacity apply once. */
.svc-signature::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137.5%20-10%20900%20900%22%3E%3Cg%20fill%3D%22%23D2C1A4%22%20transform%3D%22%22%3E%3Cpath%20d%3D%22M895%2C490%20C%20770%2C460%20590%2C340%20565%2C20%20C%20730%2C160%20850%2C370%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20810%2C440%20785%2C320%20890%2C205%20C%20915%2C330%20862%2C430%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20700%2C360%20520%2C225%20260%2C335%20C%20420%2C365%20620%2C455%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20680%2C530%20430%2C600%20325%2C860%20C%20500%2C800%20640%2C560%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20720%2C520%20555%2C660%20600%2C840%20C%20650%2C720%20720%2C560%20895%2C490%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left 6% center / auto 100% no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137.5%20-10%20900%20900%22%3E%3Cg%20fill%3D%22%23D2C1A4%22%20transform%3D%22rotate%28180%20587.5%20440%29%22%3E%3Cpath%20d%3D%22M895%2C490%20C%20770%2C460%20590%2C340%20565%2C20%20C%20730%2C160%20850%2C370%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20810%2C440%20785%2C320%20890%2C205%20C%20915%2C330%20862%2C430%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20700%2C360%20520%2C225%20260%2C335%20C%20420%2C365%20620%2C455%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20680%2C530%20430%2C600%20325%2C860%20C%20500%2C800%20640%2C560%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20720%2C520%20555%2C660%20600%2C840%20C%20650%2C720%20720%2C560%20895%2C490%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right -8% top -38% / auto 80% no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137.5%20-10%20900%20900%22%3E%3Cg%20fill%3D%22%23D2C1A4%22%20transform%3D%22translate%281175%200%29%20scale%28-1%201%29%22%3E%3Cpath%20d%3D%22M895%2C490%20C%20770%2C460%20590%2C340%20565%2C20%20C%20730%2C160%20850%2C370%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20810%2C440%20785%2C320%20890%2C205%20C%20915%2C330%20862%2C430%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20700%2C360%20520%2C225%20260%2C335%20C%20420%2C365%20620%2C455%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20680%2C530%20430%2C600%20325%2C860%20C%20500%2C800%20640%2C560%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20720%2C520%20555%2C660%20600%2C840%20C%20650%2C720%20720%2C560%20895%2C490%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left 44% bottom -45% / auto 72% no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22137.5%20-10%20900%20900%22%3E%3Cg%20fill%3D%22%23D2C1A4%22%20transform%3D%22rotate%2890%20587.5%20440%29%22%3E%3Cpath%20d%3D%22M895%2C490%20C%20770%2C460%20590%2C340%20565%2C20%20C%20730%2C160%20850%2C370%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20810%2C440%20785%2C320%20890%2C205%20C%20915%2C330%20862%2C430%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20700%2C360%20520%2C225%20260%2C335%20C%20420%2C365%20620%2C455%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20680%2C530%20430%2C600%20325%2C860%20C%20500%2C800%20640%2C560%20895%2C490%20Z%22%2F%3E%3Cpath%20d%3D%22M895%2C490%20C%20720%2C520%20555%2C660%20600%2C840%20C%20650%2C720%20720%2C560%20895%2C490%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left 30% top -42% / auto 58% no-repeat;
  filter: blur(10px);
  opacity: 0.5;
  pointer-events: none;
}
.svc-signature-body { max-width: 560px; justify-self: end; }
.svc-signature-statement {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 300;
  line-height: 1.28;
  color: var(--ink);
}
.svc-signature-link {
  display: inline-block;
  margin-top: 40px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(43,28,26,0.35);
  padding-bottom: 5px;
  transition: border-color 0.3s;
}
.svc-signature-link:hover { border-color: var(--ink); }
.svc-signature-img {
  justify-self: center;
  width: min(100%, 440px);
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - 160px);
  overflow: hidden;
  background: var(--sand);
}
.svc-signature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── RESPONSIVE ──────────────────────── */
@media (max-width: 1024px) {
  .svc-pillars {
    padding: var(--space-section-tablet) var(--space-inline-tablet);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 64px;
  }
  .svc-pillar-img { max-height: none; }
  .svc-signature { padding: var(--space-section-tablet) var(--space-inline-tablet); gap: 48px; }
}

@media (max-width: 768px) {
  .svc-pillars {
    padding: var(--space-section-mobile) var(--space-inline-mobile);
    grid-template-columns: 1fr;
    row-gap: 56px;
  }
  .svc-signature { grid-template-columns: 1fr; padding: var(--space-section-mobile) var(--space-inline-mobile); gap: 40px; }
  .svc-signature-body { justify-self: start; }
  .svc-signature-img { max-height: none; }
}