html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body.reduce-motion { scroll-behavior:auto; }
body { overflow-x:hidden; }

/* ── NAV OVERRIDE for hero (transparent → light on scroll) ── */
nav {
  background:transparent;
  backdrop-filter:none;
  transition:background 0.4s, backdrop-filter 0.4s;
}
nav.scrolled {
  background:rgba(240,238,234,0.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
nav a { color:#f0eeea; opacity:0.80; transition:opacity 0.3s, color 0.4s; }
nav.scrolled a { color:#6b5e4e; }

/* ── HERO — scroll-driven frame scene (Scene 1) ── */
/* 225vh = ~1.25 viewports of scroll: the frames follow the scroll natively
   (no stepping since 2026-10-15) and the move should pass in a few flicks
   of the wheel - she found the long stepped version felt stuck */
.hero-spacer {
  width:100%; height:225vh;
}
body.reduce-motion .hero-spacer { height:100vh; }
.hero {
  position:fixed; top:0; left:0; width:100%; height:100vh; overflow:hidden; z-index:0;
  background:linear-gradient(160deg,#cac2b8,#b0a89e);
  /* shows immediately on a slow connection, before the canvas has painted
     its first frame — same image as scene1's first frame, so there's no
     visible swap once the canvas takes over */
  background-image:url('../images/hero-scene/scene1/f001.webp');
  background-size:cover; background-position:center;
}
/* phones read the 1200px set (see SM in js/hero-scene.js and the preloads in
   index.html) — this condition must stay identical to those two */
@media (max-width:500px), (max-height:500px) {
  .hero { background-image:url('../images/hero-scene/scene1-sm/f001.webp'); }
}
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.vignette {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse 85% 85% at 50% 50%,
    transparent 45%, rgba(35,26,16,0.25) 100%);
}
.hero-content {
  position:absolute; inset:0; z-index:10;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.hero-content.is-hidden { opacity:0; }
.hero-content.is-hidden .hero-btn { pointer-events:none; }
.hero-brand {
  position:absolute; top:54%; left:50%; transform:translate(-50%,-50%);
  width:max-content; max-width:90vw;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-content .hero-btn { pointer-events:auto; }
.logo-img {
  width:clamp(110px, 32vw, 175px); display:block;
  animation:fadeUp 1.6s ease both;
}
.hero-tagline {
  font-size:12px; letter-spacing:0.32em; text-transform:uppercase;
  color:#1a1410; opacity:1; white-space:nowrap;
  animation:fadeUp 1.6s 0.25s ease both;
}
.hero-btn {
  position:absolute; bottom:9%; left:50%;
  /* real base transform — centring must not depend on the entry animation,
     which reduce-motion strips out */
  transform:translateX(-50%);
  display:inline-block; font-size:9px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:#1a1410; text-decoration:none;
  border:0.7px solid rgba(26,20,16,0.70);
  padding:10px 28px; border-radius:30px;
  white-space:nowrap;
  transition:background 0.35s;
  animation:fadeUpCenter 1.6s 0.45s ease both;
}
.hero-btn:hover { background:rgba(74,56,40,0.10); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUpCenter {
  from { opacity:0; transform:translate(-50%, 20px); }
  to   { opacity:1; transform:translate(-50%, 0); }
}
/* ── SCROLL PROMPT ──
   Fixed in the bottom-right corner, below the step dots (which sit at 50%
   height on the same edge), and shown in every stepped or pinned section —
   js/scroll-steps.js decides when. The WhatsApp and accessibility buttons
   moved to the left edge in shared.css to leave this corner free. */
.scroll-hint {
  position:fixed; bottom:26px; right:26px; z-index:400;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  pointer-events:none;
  opacity:0; transition:opacity 0.45s ease;
}
.scroll-hint.is-visible { opacity:1; }
.scroll-hint span {
  font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
  color:rgba(245,238,225,0.85);
  text-shadow:0 1px 8px rgba(26,21,16,0.45);
}
body.lang-he .scroll-hint span { font-size:11px; letter-spacing:0.12em; }
/* over the light services panel the pale version disappears — flip to ink */
.scroll-hint.on-light span { color:rgba(74,56,40,0.75); text-shadow:none; }
.scroll-hint.on-light .scroll-mouse { border-color:rgba(74,56,40,0.55); }
.scroll-hint.on-light .scroll-mouse::after { background:rgba(74,56,40,0.7); }
body.reduce-motion .scroll-hint { display:none; }
/* mouse outline: rounded rect + a dot that drops inside it */
.scroll-mouse {
  width:24px; height:38px; border-radius:13px;
  border:1.5px solid rgba(245,238,225,0.75);
  position:relative;
}
.scroll-mouse::after {
  content:''; position:absolute; left:50%; top:7px; margin-left:-2px;
  width:4px; height:4px; border-radius:50%;
  background:rgba(245,238,225,0.9);
  animation:mouseDot 2s ease-in-out infinite;
}
@keyframes mouseDot {
  0%   { opacity:0; transform:translateY(0); }
  25%  { opacity:1; }
  70%  { opacity:1; transform:translateY(14px); }
  100% { opacity:0; transform:translateY(16px); }
}
@media (max-width:767px) {
  .scroll-hint { bottom:16px; right:14px; gap:5px; }
  .scroll-mouse { width:19px; height:31px; border-radius:11px; }
  .scroll-mouse::after { top:5px; }
  @keyframes mouseDot {
    0%   { opacity:0; transform:translateY(0); }
    25%  { opacity:1; }
    70%  { opacity:1; transform:translateY(11px); }
    100% { opacity:0; transform:translateY(13px); }
  }
  .scroll-hint span { font-size:8px; }
  body.lang-he .scroll-hint span { font-size:10px; }
}

/* ── STEP DOTS — vertical progress dots for the stepped scenes ──
      light variant sits over the photo scenes; .srv-dots (below) darkens
      them for the light services background */
.step-dots {
  position:absolute; right:22px; top:50%; transform:translateY(-50%); z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:opacity 0.4s ease;
}
.step-dots.is-hidden { opacity:0; pointer-events:none; }
.step-dot {
  width:8px; height:8px; border-radius:5px;
  background:rgba(245,238,225,0.42);
  box-shadow:0 0 6px rgba(26,21,16,0.30);
  cursor:pointer;
  transition:background 0.35s, height 0.35s;
}
.step-dot.is-active { height:22px; background:rgba(245,238,225,0.95); }
body.reduce-motion .step-dots { display:none; }

/* ── SECTIONS SHARED ── */
.section {
  position:relative; z-index:1; background:#f0eeea;
  padding:100px 48px;
  width:calc(100% - 28px); max-width:1200px; margin:0 auto;
  opacity:0; transform:translateY(22px);
  transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.section.visible { opacity:1; transform:translateY(0); }
.section-divider {
  position:relative; z-index:1;
  height:36px;
}
.section-label {
  font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:#7a6a55; opacity:0.60; margin-bottom:20px; display:block;
  text-align:center;
}
.see-more {
  display:block; margin-top:36px; text-align:center;
  font-size:9px; letter-spacing:0.22em; text-transform:uppercase;
  color:#4a3828; text-decoration:none;
  border:0.7px solid rgba(74,56,40,0.45);
  padding:10px 28px; border-radius:30px;
  transition:background 0.3s;
  width:fit-content; margin-left:auto; margin-right:auto;
}
.see-more:hover { background:rgba(74,56,40,0.08); }

/* ── ABOUT SECTION ── */
#about { text-align:center; }
#about .about-header {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; margin-bottom:72px;
}
/* Consistent order everywhere (desktop + mobile + about.html): name → role → portrait */
#about .about-header > a:not(.about-portrait-link) { order:1; }
#about .about-role { order:2; }
#about .about-portrait-link { order:3; display:block; line-height:0; margin-top:24px; }
#about .about-name {
  font-size:clamp(24px,4.4vw,40px); font-weight:300;
  color:#3a2e22; line-height:1.2; letter-spacing:0.08em;
  text-transform:uppercase; white-space:nowrap;
  margin:0;
}
#about .about-role {
  font-size:9px; letter-spacing:0.24em; text-transform:uppercase;
  color:#7a6a55; opacity:0.65; line-height:1.9; margin-top:10px;
}
#about .about-portrait {
  width:118px; height:118px; border-radius:50%; object-fit:cover;
  object-position:center top;
  filter:grayscale(1); mix-blend-mode:multiply; display:block;
}
#about .about-text {
  font-size:14px; line-height:2.0;
  color:#5a4e40; opacity:0.82;
  max-width:760px; margin:0 auto;
}
#about .about-text strong { color:#3a2e22; font-weight:500; opacity:1; }
#about .about-text p + p { margin-top:20px; }
#about .about-see-more { display:inline-block; margin-top:40px; }
/* principles — image cards, two per row (same layout as the studio's price quotes) */
#about .principles {
  display:grid; grid-template-columns:repeat(2,1fr); gap:44px 36px;
  max-width:880px; margin:0 auto;   /* now after the bio window (her order, 2026-10-15) */
}
#about .principle {
  cursor:default; text-align:left;
  opacity:0; transform:translateY(28px) scale(0.96);
  transition:opacity 0.55s cubic-bezier(0.34,1.56,0.64,1), transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
}
#about .principle.pop-in { opacity:1; transform:translateY(0) scale(1); }
#about .principle-img {
  aspect-ratio:16/7; overflow:hidden; border-radius:18px;
  background:#e8e4dc; margin-bottom:18px;
}
#about .principle-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
#about .principle:hover .principle-img img { transform:scale(1.04); }
#about .principle-name {
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:#3a2e22; font-weight:500; margin-bottom:8px;
}
#about .principle-desc {
  font-size:12px; color:#5a4e40; opacity:0.85; line-height:1.8; max-width:400px;
}
body.lang-he #about .principle { text-align:right; direction:rtl; }
body.lang-he #about .principle-desc { font-size:13px; }

/* ── PROJECTS SECTION ── */
.projects-title-link { display:block; text-decoration:none; color:inherit; transition:opacity 0.3s; }
.projects-title-link:hover { opacity:0.7; }
#projects .projects-title {
  font-size:32px; font-weight:300;
  color:#3a2e22; letter-spacing:0.04em; margin-bottom:52px;
  text-align:center;
}
.projects-scroll-wrap { position:relative; }
#projects .projects-preview {
  display:flex; flex-direction:column; gap:40px;
  margin:0 -24px; /* break out slightly so the project images sit a bit wider than the text */
}
#projects .prev-item {
  width:100%; height:360px;
  position:relative; overflow:hidden; cursor:pointer;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:#f0eeea;
  border-radius:3px;
  transition:height 0.55s cubic-bezier(0.4,0,0.2,1);
}
#projects .prev-item:hover { height:470px; }
body.reduce-motion #projects .prev-item,
body.reduce-motion #projects .prev-item:hover { background-size:cover !important; }
#projects .prev-overlay {
  position:absolute; inset:0;
  background:rgba(18,12,6,0.38);
  transition:background 0.4s;
}
#projects .prev-item:hover .prev-overlay { background:rgba(18,12,6,0.52); }
#projects .prev-info {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
#projects .prev-name {
  font-size:15px; font-weight:300; letter-spacing:0.12em;
  color:rgba(245,238,225,0.95); margin-bottom:6px;
  transition:letter-spacing 0.4s;
}
#projects .prev-item:hover .prev-name { letter-spacing:0.18em; }
#projects .prev-cat {
  font-size:8px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(230,218,200,0.72);
}

/* ── SERVICES SECTION ── */
#services .services-title {
  font-size:32px; font-weight:300;
  color:#3a2e22; letter-spacing:0.04em; margin-bottom:48px;
  text-align:center;
}
/* ── SERVICES — interactive index list + preview ── */
#services .srv-showcase {
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;
}
#services .srv-list { display:flex; flex-direction:column; }
#services .srv-row {
  position:relative; display:grid;
  grid-template-columns:auto 1fr; align-items:baseline; column-gap:20px;
  padding:26px 4px; text-decoration:none;
  border-top:0.5px solid rgba(74,56,40,0.14);
  transition:padding-left 0.4s cubic-bezier(0.22,1,0.36,1);
}
#services .srv-list .srv-row:last-child { border-bottom:0.5px solid rgba(74,56,40,0.14); }
#services .srv-row .srv-num {
  font-size:10px; letter-spacing:0.16em; color:#7a6a55; opacity:0.5;
  transition:opacity 0.4s, color 0.4s; align-self:center;
}
#services .srv-row .srv-name {
  font-size:22px; font-weight:300; color:#3a2e22; letter-spacing:0.05em;
  transition:color 0.4s;
}
#services .srv-row .srv-desc {
  grid-column:2; max-width:420px;
  font-size:11.5px; line-height:1.75; color:#5a4e40; opacity:0;
  max-height:0; overflow:hidden;
  text-align:left; direction:ltr;
  transition:opacity 0.45s ease, max-height 0.5s ease, margin-top 0.45s ease;
}
/* keep Hebrew reading order but still block-aligned to the left */
body.lang-he #services .srv-row .srv-desc { direction:rtl; text-align:left; }
/* active / hovered row */
#services .srv-row.is-active { padding-left:14px; }
#services .srv-row.is-active .srv-num { opacity:1; color:#4a3828; }
#services .srv-row.is-active .srv-name { color:#1f1710; }
#services .srv-row.is-active .srv-desc {
  opacity:0.82; max-height:90px; margin-top:12px;
}
/* dim the non-active rows for focus */
#services .srv-list.has-active .srv-row:not(.is-active) .srv-name { color:#a89e90; }

/* preview image panel */
#services .srv-preview {
  position:relative; width:100%; aspect-ratio:4/5;
  overflow:hidden; background:#e8e4dc;
  box-shadow:0 20px 48px rgba(58,46,34,0.18);
  position:sticky; top:100px;
}
#services .srv-preview-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transform:scale(1.06);
  transition:opacity 0.7s ease, transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
#services .srv-preview-img.is-active { opacity:1; transform:scale(1); }

/* ── CONTACT SECTION — a transparent wrapper holding two separate floating
      "window" panels (form, then contact details), like about.html's cards ── */
#contact {
  position:relative; z-index:1;
  scroll-margin-top:90px;   /* clears the fixed nav when jumping to #contact */
  width:calc(100% - 28px); max-width:1200px; margin:0 auto;
  opacity:0; transform:translateY(22px);
  transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
#contact.visible { opacity:1; transform:translateY(0); }
.contact-panel {
  background:#f0eeea;
  box-shadow:inset 0 0 0 1000px rgba(74,56,40,0.04);
  padding:100px 48px;
}
.contact-panel + .contact-panel { margin-top:24px; padding:56px 48px; }
/* form — base styling for the real elements; the homepage form itself is
   inline-styled, so only the states it does NOT set inline matter here
   (focus, placeholder, option background) */
label { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.65; }
input, textarea, select {
  background:transparent; border:none;
  border-bottom:0.7px solid rgba(74,56,40,0.25);
  padding:10px 0; font-family:'Montserrat','Assistant',sans-serif;
  font-size:11.5px; color:#3a2e22; outline:none; width:100%;
  transition:border-color 0.3s; -webkit-appearance:none; border-radius:0;
}
input:focus, textarea:focus, select:focus { border-bottom-color:rgba(74,56,40,0.70); }
input::placeholder, textarea::placeholder { color:rgba(74,56,40,0.28); font-size:11px; }
textarea { resize:none; height:90px; }
select { cursor:pointer; }
select option { background:#f0eeea; color:#3a2e22; }
.req { color:#b07a5a; opacity:0.9; }
.field-error { font-size:8.5px; color:#b05a5a; letter-spacing:0.06em; margin-top:4px; display:none; }
.field-error.visible { display:block; }
input.invalid, textarea.invalid { border-bottom-color:rgba(176,90,90,0.6) !important; }

/* ── FOOTER ── */
footer {
  position:relative; z-index:1; background:#f0eeea;
  border-top:0.5px solid rgba(74,56,40,0.12);
  padding:28px 48px;
  display:flex; justify-content:space-between; align-items:center;
  width:calc(100% - 28px); max-width:none; margin:14px auto 0;
}
.footer-copy { font-size:8.5px; letter-spacing:0.12em; color:#7a6a55; opacity:0.55; }
.footer-links { display:flex; gap:24px; }
.footer-links a {
  font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:#7a6a55; opacity:0.55; text-decoration:none; transition:opacity 0.3s;
}
.footer-links a:hover { opacity:0.85; }

/* ── NAV-LOGO — override shared.css for hero transparent state ── */
.nav-logo { mix-blend-mode:normal; filter:brightness(0) invert(1); transition:filter 0.4s; }
nav.scrolled .nav-logo { filter:none; mix-blend-mode:multiply; }

/* ── HAMBURGER — hero-state color overrides ── */
.nav-toggle span {
  background:rgba(245,238,225,0.85);
  transition:transform 0.3s, opacity 0.3s, background 0.4s;
}
nav.scrolled .nav-toggle span { background:#4a3828; }

/* ── LANG BUTTON — hero transparent state ── */
nav:not(.scrolled) .lang-btn {
  color:rgba(245,238,225,0.80);
  border-color:rgba(245,238,225,0.40);
}
nav.scrolled .lang-btn { color:#6b5e4e; border-color:rgba(74,56,40,0.30); }

/* ── MOBILE ── */
@media (max-width:767px) {
  nav.scrolled { backdrop-filter:none !important; }
  .section { padding:80px 24px; width:calc(100% - 16px); }
  .section-divider { height:16px; }
  #contact { width:calc(100% - 16px); }
  .contact-panel { padding:64px 24px; }
  .contact-panel + .contact-panel { padding:40px 24px; }
  footer { width:calc(100% - 16px); margin-top:8px; flex-direction:column; gap:16px; text-align:center; padding:24px; }
  /* About mobile: reorder to name → role → portrait */
  #about .about-portrait-link { order:3; }
  #about .about-header > a:not(.about-portrait-link) { order:1; }
  #about .about-role { order:2; }
  #about .about-name { margin-top:0; }
  #about .about-header { margin-bottom:48px; flex-wrap:wrap; }
  /* Principles: 1 column on mobile */
  #about .principles { grid-template-columns:1fr; gap:32px; }
  #about .about-name { font-size:clamp(18px,7vw,28px); }
  #about .about-portrait { width:96px; height:96px; }
  #about .about-text { font-size:13px; }

  #projects .projects-preview {
    flex-direction:column; height:auto;
    gap:32px; margin:0;
  }
  #projects .prev-item {
    flex:0 0 auto; width:100%; height:120px;
    background-color:transparent;
    background-position:center center !important;
    border-radius:3px;
    will-change:height;
    transition:height 0.55s cubic-bezier(0.4,0,0.2,1);
  }
  #projects .prev-item.mob-active { height:230px; }
  #projects .prev-item:hover { height:120px; }
  #projects .prev-overlay, #projects .prev-info { opacity:1; transform:none; }
  /* SERVICES — mobile: same idea as desktop — the full six-row list under
     the image, the active row darkens and its description opens, so the text
     change is impossible to miss (2026-07-30). Compact sizes to fit 100vh. */
  .services-pin { height:400vh; }
  .services-pin-sticky {
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:64px; padding-bottom:16px;
  }
  #services .services-title { font-size:22px; margin-bottom:14px; }
  #services .srv-showcase { grid-template-columns:1fr; gap:12px; }
  #services .srv-preview {
    order:-1; position:relative; top:0; aspect-ratio:16/9;
    box-shadow:0 10px 26px rgba(58,46,34,0.16);
  }
  #services .srv-row { padding:9px 4px; column-gap:12px; }
  #services .srv-row.is-active { padding-left:10px; }
  #services .srv-row .srv-num { font-size:8.5px; }
  #services .srv-row .srv-name { font-size:14px; }
  #services .srv-row .srv-desc { font-size:10.5px; line-height:1.55; max-width:none; }
  #services .srv-row.is-active .srv-desc { max-height:64px; margin-top:6px; }
}

/* services step dots: dark variant on the light background, mobile only */
.srv-dots { display:none; right:8px; }
.srv-dots .step-dot { background:rgba(74,56,40,0.22); box-shadow:none; }
.srv-dots .step-dot.is-active { background:rgba(74,56,40,0.75); }
@media (max-width:767px) {
  body:not(.reduce-motion) .srv-dots { display:flex; }
}
@media (min-width:768px) and (orientation:landscape) {
  .logo-img { width:240px; }
  .hero-tagline { font-size:12px; }
  .hero-btn { font-size:11px; padding:12px 34px; }
}


/* ── PINNED SERVICES (desktop) — the split view stays on screen while
      scroll walks through the six services in order ── */
@media (min-width:768px) {
  .services-pin { position:relative; z-index:1; height:400vh; }
  .services-pin-sticky {
    position:sticky; top:0;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* ── PINNED SERVICES — reduce-motion fallback ──
      Without this the 400vh pin stays, and on mobile the one-row-at-a-time
      rule leaves five of the six services permanently unreachable (there is
      no accordion any more). Unpin and show the whole list instead. */
body.reduce-motion .services-pin { height:auto !important; }
body.reduce-motion .services-pin-sticky {
  position:static !important; height:auto !important; min-height:0 !important;
  overflow:visible !important; padding:80px 24px;
}
body.reduce-motion #services .srv-preview { display:none; }
body.reduce-motion #services .srv-row {
  display:flex !important;
  border-top:0.5px solid rgba(74,56,40,0.14);
  padding:22px 12px;
}
body.reduce-motion #services .srv-row .srv-desc {
  opacity:0.82; max-height:none; overflow:visible; margin-top:8px;
}

/* ── WHY US — Scene 2: one still background, cards roll one per step like
      the About card wheel, over the fixed background canvas ── */
/* The reveal (Mevaseret rising over Halutz) happens in the viewport BEFORE
   this section pins — see REVEAL_LEAD in hero-scene.js. Inside: a short
   settle for the heading, then the four cards. */
.scene2-cards {
  position:relative; z-index:1; background:transparent; height:420vh;   /* ~About wheel length (380vh) + room for the title + wheel entry */
}
.scene2-sticky {
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:70px 24px 0;   /* top: clears the fixed nav */
}
.scene2-sticky .drum-label, .scene2-sticky .drum-title { text-shadow:0 1px 20px rgba(240,238,234,0.6); }
/* a window like the About card wheel: the centred card in full, plus a
   slice of the previous card above and the next one below, edges faded */
.scene2-deck {
  position:relative; width:min(560px,88vw); height:450px; margin-top:0;
  --card-h:230px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.scene2-card {
  position:absolute; left:0; right:0;
  top:50%; height:var(--card-h); margin-top:calc(var(--card-h) / -2);
  background:rgba(247,242,235,0.66);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 40px;
  opacity:0;
  /* opacity/transform are driven per-scroll-frame by hero-scene.js, not a
     fixed-duration transition, so the rise can be scrubbed and reversed */
  will-change:opacity, transform;
}
/* scene-2 dots: vertical, at the side of the viewport (matching .step-dots) */
.scene2-dots {
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  flex-direction:column; align-items:center; gap:12px; margin-top:0;
}
.scene2-dots .drum-dot {
  width:8px; height:8px; border-radius:5px;
  background:rgba(245,238,225,0.42);
  box-shadow:0 0 6px rgba(26,21,16,0.30);
  cursor:pointer;
  transition:background 0.35s, height 0.35s;
}
.scene2-dots .drum-dot.is-active { height:22px; background:rgba(245,238,225,0.95); }
body.reduce-motion .scene2-cards { height:auto; }
body.reduce-motion .scene2-sticky { position:static; height:auto; padding:90px 24px; }
body.reduce-motion .scene2-deck { position:static; height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
body.reduce-motion .scene2-card {
  position:static; opacity:1 !important; transform:none !important; height:auto; margin-top:0;
  margin-bottom:20px; background:rgba(247,242,235,0.85);
}
body.reduce-motion .scene2-dots { display:none; }
@media (max-width:767px) {
  .scene2-cards { height:400vh; }
  .scene2-deck { height:470px; --card-h:250px; }
  .scene2-sticky { padding-top:60px; }
}

/* ── ABOUT TEXT WINDOW — the studio text sits in its own card ── */
.about-text-window {
  background:rgba(74,56,40,0.045);
  max-width:820px; margin:0 auto 80px;
  padding:48px 44px;
}
@media (max-width:767px) {
  .about-text-window { padding:32px 22px; margin-bottom:56px; }
}

/* ── HOME CONTACT FORM — centered, matching the contact page:
      label in the middle, fill-in line below it (overrides inline styles) ── */
#contactFormHome > div[style*="grid-template-columns"] {
  grid-template-columns:1fr !important;
  max-width:480px; margin-left:auto !important; margin-right:auto !important;
}
#contactFormHome div[style*="flex-direction:column"] {
  display:block !important; text-align:center !important;
}
#contactFormHome label { display:inline-block; }
#contactFormHome input:not([type="checkbox"]), #contactFormHome select, #contactFormHome textarea {
  text-align:center; text-align-last:center; margin-top:10px;
}
#contactFormHome div[style*="margin-bottom:20px"][style*="flex"] { max-width:480px; margin-left:auto !important; margin-right:auto !important; }
#contactFormHome div[style*="gap:10px"] { display:flex !important; justify-content:center !important; text-align:center; }
#contactFormHome div[style*="justify-content:space-between"] {
  justify-content:center !important; flex-direction:column; gap:16px;
}
#contactFormHome .field-error { text-align:center; }
#contactFormHome p[data-i18n="contact.success"] { text-align:center; }

/* ── QUOTE BAND ── */
.quote-band {
  position:relative; z-index:1; background:#ece7de;
  padding:110px 24px; text-align:center;
}
.quote-text {
  font-family:'Montserrat','Assistant',sans-serif;
  font-size:24px; font-weight:300; font-style:italic;
  color:#3a2e22; opacity:0.80; line-height:1.65; letter-spacing:0.03em;
  max-width:760px; margin:0 auto;
}
body.lang-he .quote-text { font-style:normal; }
@media (max-width:767px) {
  .quote-band { padding:72px 20px; }
  .quote-text { font-size:18px; }
}