/* ═══════════════════════════════════════════════════════
   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(240,238,234,0.30) 0%, rgba(240,238,234,0.08) 40%, rgba(240,238,234,0.38) 100%);
}
.services-hero-text {
  position:relative; z-index:2;
  text-align:center; color:rgba(58,46,34,0.85);
  padding:0 24px; max-width:760px;
}
.services-hero-text .page-label {
  color:rgba(90,78,64,0.80); 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;
  text-shadow:0 1px 24px rgba(240,238,234,0.55);
}
.services-hero-text .hero-intro {
  font-size:13px; line-height:2; letter-spacing:0.03em;
  color:rgba(74,56,40,0.85); 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:12px;
}
.service-block .service-desc:last-of-type { 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; }
}

/* ── WORKING WITH US — quiet collapsed Q&A, the last block on the page ── */
.services-faq {
  position:relative; z-index:2; background:var(--bg);
  width:calc(100% - 28px); max-width:1200px; margin:24px auto 24px;
  padding:90px 64px 100px;
  display:flex; flex-direction:column; align-items:center;
}
.faq-title {
  font-size:30px; font-weight:300; color:#3a2e22; letter-spacing:0.05em; line-height:1.15;
  margin-bottom:54px; text-align:center;
}
.faq-list { width:100%; max-width:820px; }
.faq-item { border-top:0.7px solid rgba(74,56,40,0.18); }
.faq-item:last-child { border-bottom:0.7px solid rgba(74,56,40,0.18); }
.faq-item summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:26px 4px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-q {
  font-size:15px; font-weight:300; color:#3a2e22; letter-spacing:0.03em; line-height:1.55;
  transition:opacity 0.3s;
}
.faq-item summary:hover .faq-q { opacity:0.7; }
/* a single fine line: standing "|" when closed, it turns and lies down "−"
   when the answer opens (her choice). Whole pixel thick - at 0.8px a
   horizontal line on a half-pixel row anti-aliased into near invisibility. */
.faq-icon { position:relative; flex:0 0 12px; width:12px; height:12px; }
.faq-icon::after {
  content:''; position:absolute; left:0; top:5px; width:12px; height:1px;
  background:rgba(74,56,40,0.6);
  transform:rotate(90deg); transition:transform 0.5s ease;
}
.faq-item[open] .faq-icon::after { transform:rotate(0deg); }
.faq-a {
  padding:0 4px 32px; max-width:700px;
  font-size:13px; line-height:1.95; color:#5a4e40; letter-spacing:0.02em;
}
.faq-a p + p, .faq-a ul + p { margin-top:12px; }
.faq-a ul { margin:12px 0 0; padding-inline-start:18px; }
.faq-a li { margin-bottom:6px; }
.faq-a strong { font-weight:500; color:#4a3828; }
/* soft open/close where the browser supports animating <details> */
:root { interpolate-size:allow-keywords; }
.faq-item::details-content {
  block-size:0; overflow:hidden; opacity:0;
  transition:block-size 0.5s ease, opacity 0.5s ease, content-visibility 0.5s allow-discrete;
}
.faq-item[open]::details-content { block-size:auto; opacity:1; }
body.reduce-motion .faq-item::details-content { transition:none; }
body.lang-he .faq-list { text-align:right; }
body.lang-he .faq-q { letter-spacing:0.01em; }
@media (max-width:767px) {
  .services-faq { padding:60px 22px 70px; }
  .faq-title { font-size:24px; margin-bottom:36px; }
  .faq-q { font-size:14px; }
  .faq-item summary { padding:22px 2px; gap:18px; }
}