/* ═══════════════════════════════════════════════════════
   SERVICES PAGE — parallax: sticky hero + blocks scroll over it
   ═══════════════════════════════════════════════════════ */

/* ── STICKY HERO (main image stays pinned; blocks rise over it) ── */
.services-hero {
  position:sticky; top:0; z-index:1;
  height:100vh; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.services-hero-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:block; opacity:0.82;
}
.services-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(40,30,20,0.28) 0%, rgba(40,30,20,0.10) 40%, rgba(40,30,20,0.42) 100%);
}
.services-hero-text {
  position:relative; z-index:2;
  text-align:center; color:#f5eee1;
  padding:0 24px; max-width:760px;
}
.services-hero-text .page-label {
  color:rgba(245,238,225,0.85); opacity:1;
  font-size:9px; letter-spacing:0.32em; text-transform:uppercase; margin-bottom:22px;
}
.services-hero-text h1 {
  font-size:46px; font-weight:300; line-height:1.15; letter-spacing:0.04em;
  margin-bottom:26px;
}
.services-hero-text .hero-intro {
  font-size:13px; line-height:2; letter-spacing:0.03em;
  color:rgba(245,238,225,0.90); max-width:560px; margin:0 auto;
}
.services-scroll-cue {
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:2; width:22px; height:22px;
}
.services-scroll-cue svg { width:100%; height:100%; stroke:rgba(245,238,225,0.75); fill:none; stroke-width:1.2; animation:scrollBob 2.2s ease-in-out infinite; }
@keyframes scrollBob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
body.reduce-motion .services-scroll-cue svg { animation:none; }

/* ── FLOW — transparent wrapper; hero peeks between the floating blocks ── */
.services-flow {
  position:relative; z-index:2; background:transparent;
  padding:24px 0 0;
}

/* ── EACH SERVICE = its own floating square, moving over the sticky hero ── */
.service-block {
  width:calc(100% - 28px); max-width:1200px; margin:0 auto 24px;
  background:var(--bg);
  padding:80px 64px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
}
.service-block:nth-child(even) .service-media { order:-1; }

.service-copy { display:flex; flex-direction:column; align-items:center; text-align:center; }
.service-block .service-number {
  font-size:11px; letter-spacing:0.24em; color:#7a6a55; opacity:0.5; margin-bottom:18px;
}
.service-block .service-name {
  font-size:30px; font-weight:300; color:#3a2e22; letter-spacing:0.05em; line-height:1.15;
  margin-bottom:22px;
}
.service-block .service-desc {
  font-size:13px; line-height:1.95; color:#5a4e40; opacity:0.82; letter-spacing:0.02em;
  margin-bottom:26px;
}
.service-block .service-tag {
  font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.55;
}

/* image window with subtle inner parallax on scroll */
.service-media {
  position:relative; overflow:hidden; border-radius:6px;
  aspect-ratio:16/9; background:#e8e4dc;
  box-shadow:0 18px 44px rgba(58,46,34,0.16);
}
.service-media img {
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06); transition:transform 1.1s ease;
}
.service-block.visible .service-media img { transform:scale(1); }

/* reveal is opacity only; parallax movement comes from the shared .js-parallax rule */
.service-block {
  opacity:0;
  transition:opacity 0.9s ease;
}
.service-block.visible { opacity:1; }
body.reduce-motion .service-block { opacity:1; transform:none; }
body.reduce-motion .service-media img { transform:none; }

/* ── CTA ── */
.services-cta {
  position:relative; z-index:2; background:var(--bg);
  width:calc(100% - 28px); max-width:1200px; margin:0 auto;
  padding:80px 64px 90px;
  display:flex; justify-content:space-between; align-items:center; gap:32px;
}
.cta-text { font-size:15px; font-weight:300; font-style:italic; color:#3a2e22; opacity:0.7; letter-spacing:0.03em; }
.cta-btn {
  display:inline-block; font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:#4a3828; text-decoration:none;
  border:0.7px solid rgba(74,56,40,0.50); padding:14px 38px; border-radius:30px;
  transition:background 0.35s; white-space:nowrap;
}
.cta-btn:hover { background:rgba(74,56,40,0.08); }

/* ── MOBILE ── */
@media (max-width:767px) {
  .services-hero { height:100vh; }
  .services-hero-text h1 { font-size:30px; }
  .services-hero-text .hero-intro { font-size:12px; line-height:1.9; }
  .service-block {
    grid-template-columns:1fr; gap:26px; padding:56px 24px; text-align:center;
  }
  .service-block:nth-child(even) .service-media { order:0; }
  .service-copy { align-items:center; }
  .service-block .service-name { font-size:24px; }
  .services-cta { flex-direction:column; align-items:center; text-align:center; padding:56px 24px 70px; }
}
@media (min-width:768px) and (orientation:landscape) {
  .services-hero-text h1 { font-size:52px; }
}