html { scroll-behavior:smooth; }
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);
  backdrop-filter:blur(10px);
}
nav a { color:#f0eeea; opacity:0.80; transition:opacity 0.3s, color 0.4s; }
nav.scrolled a { color:#6b5e4e; }

/* ── HERO ── */
.hero-spacer {
  width:100%; height:100vh;
}
.hero {
  position:fixed; top:0; left:0; width:100%; height:100vh; overflow:hidden; z-index:0;
  background:linear-gradient(160deg,#cac2b8,#b0a89e);
}
.slide {
  position:absolute; inset:0; opacity:0; overflow:hidden;
  transition:opacity 2s ease-in-out;
}
.slide img, .slide video {
  position:relative; top:-8%;
  width:100%; height:116%;
  object-fit:cover; object-position:center;
  display:block; will-change:transform;
}
body.reduce-motion .slide img, body.reduce-motion .slide video { animation:none !important; transform:none !important; top:0; height:100%; }
.slide.active { opacity:1; }
/* ── HERO KEN-BURNS DRIFT (applied per-slide, works for img + video) ── */
@keyframes hero-kb-out { from { transform:scale(1.08); } to { transform:scale(1.0); } }
@keyframes hero-kb-in  { from { transform:scale(1.0);  } to { transform:scale(1.08); } }
.slide.active.kb-out img, .slide.active.kb-out video { animation:hero-kb-out 7s ease forwards; }
.slide.active.kb-in  img, .slide.active.kb-in  video { animation:hero-kb-in  7s ease forwards; }
.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;
}
.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%;
  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); }
}
.arrow { display:none; }

/* ── CUSTOM HERO CURSOR ── */
.hero { cursor:none; }
#hero-cursor {
  position:fixed; z-index:50;
  pointer-events:none;
  display:flex; align-items:center; gap:10px;
  opacity:0;
  transition:opacity 0.25s ease;
  transform:translate(-50%, -50%);
}
#hero-cursor.visible { opacity:1; }
#hero-cursor svg {
  width:36px; height:36px;
  stroke:rgba(245,238,225,0.85); stroke-width:1;
  fill:none;
  transition:transform 0.3s ease;
}
#hero-cursor .cursor-label {
  font-family:'Montserrat','Assistant',sans-serif;
  font-size:8px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(245,238,225,0.75);
}
.dots {
  position:absolute; bottom:30px; left:50%;
  transform:translateX(-50%); z-index:20; display:flex; gap:8px;
}
.dot {
  width:4px; height:4px; border-radius:50%;
  background:rgba(245,238,225,0.35); cursor:pointer;
  transition:background 0.4s, transform 0.3s;
}
.dot.active { background:rgba(245,238,225,0.85); transform:scale(1.4); }
.scroll-hint {
  position:absolute; bottom:30px; right:44px; z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint span {
  font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(245,238,225,0.55); writing-mode:vertical-rl;
}
.scroll-line {
  width:1px; height:38px; background:rgba(245,238,225,0.35);
  transform-origin:top; animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform:scaleY(0); opacity:0; }
  45%  { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(0); opacity:0; }
}

/* ── 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; }
#about .principles {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 72px;
}
#about .principle {
  background:rgba(74,56,40,0.04);
  padding:30px 22px; cursor:default; text-align:center;
  opacity:0; transform:translateY(28px) scale(0.92);
  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-name {
  font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:#4a3828; margin-bottom:0;
}
#about .principle.in-view .principle-name,
#about .principle:hover .principle-name {
  margin-bottom:5px;
}
#about .principle-desc {
  font-size:10.5px; color:#7a6a55; line-height:1.7;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height 0.4s ease, opacity 0.4s ease;
}
#about .principle.in-view .principle-desc,
#about .principle:hover .principle-desc {
  max-height:80px; opacity:1;
}

/* ── PROJECTS SECTION ── */
#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; }
.proj-scroll-btn {
  display:none;
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  background:rgba(240,238,234,0.88); border:0.7px solid rgba(74,56,40,0.18);
  cursor:pointer; width:40px; height:40px; border-radius:50%;
  font-size:26px; color:#4a3828; line-height:1;
  align-items:center; justify-content:center;
  transition:background 0.25s, opacity 0.25s;
}
.proj-scroll-btn:hover { background:rgba(240,238,234,1); }
.proj-scroll-prev { left:-20px; }
.proj-scroll-next { right:-20px; }
#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 */
  scrollbar-width:none;
}
#projects .projects-preview::-webkit-scrollbar { display:none; }
#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); }
#services .srv-thumb { display:none; }

/* ── CONTACT SECTION ── */
#contact {
  position:relative; z-index:1;
  background:#f0eeea;
  box-shadow:inset 0 0 0 1000px rgba(74,56,40,0.04);
  width:calc(100% - 28px); max-width:1200px; margin:0 auto; padding:100px 48px;
  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 .contact-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.4fr; gap:100px;
}
#contact .contact-title {
  font-size:30px; font-weight:300; color:#3a2e22;
  letter-spacing:0.04em; line-height:1.3; margin-bottom:20px;
}
#contact .contact-intro {
  font-size:11.5px; line-height:1.9; color:#5a4e40; opacity:0.78;
  margin-bottom:36px;
}
.contact-items { display:flex; flex-direction:column; }
.contact-item {
  display:flex; align-items:center; gap:14px;
  padding:15px 0; border-bottom:0.5px solid rgba(74,56,40,0.10);
  text-decoration:none; transition:opacity 0.25s;
}
.contact-item:first-child { border-top:0.5px solid rgba(74,56,40,0.10); }
.contact-item:hover { opacity:0.65; }
.contact-icon {
  width:34px; height:34px; border:0.7px solid rgba(74,56,40,0.22);
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-icon svg { width:13px; height:13px; stroke:rgba(74,56,40,0.65); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact-lbl { font-size:7.5px; letter-spacing:0.20em; text-transform:uppercase; color:#7a6a55; opacity:0.60; margin-bottom:3px; }
.contact-val { font-size:11px; letter-spacing:0.04em; color:#4a3828; opacity:0.85; }
.social-row { display:flex; gap:10px; margin-top:24px; }
.social-btn {
  width:34px; height:34px; border:0.7px solid rgba(74,56,40,0.22);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:border-color 0.3s, background 0.3s;
}
.social-btn:hover { border-color:rgba(74,56,40,0.55); background:rgba(74,56,40,0.05); }
.social-btn svg { width:13px; height:13px; stroke:rgba(74,56,40,0.65); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* form */
.form-label-top {
  font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:#7a6a55; opacity:0.60; margin-bottom:28px; display:block;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
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[type="checkbox"] {
  /* checkbox style is in shared.css — do not override here */
  width:15px; height:15px; flex-shrink:0; cursor:pointer;
  accent-color:#4a3828; background-color:#f0eeea;
}
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; }
.submit-row { display:flex; align-items:center; justify-content:space-between; margin-top:28px; }
.submit-btn {
  font-family:'Montserrat','Assistant',sans-serif; font-size:9.5px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:#4a3828; background:none;
  border:0.7px solid rgba(74,56,40,0.50);
  padding:12px 36px; border-radius:30px; cursor:pointer;
  transition:background 0.35s;
}
.submit-btn:hover { background:rgba(74,56,40,0.08); }
.submit-note { font-size:8.5px; color:#7a6a55; opacity:0.55; }
.success-msg { display:none; margin-top:16px; font-size:10px; color:#5a7a55; }
.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); padding:64px 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:10px; margin-bottom:48px; }
  #about .about-name { font-size:clamp(18px,7vw,28px); }
  #about .about-portrait { width:96px; height:96px; }
  #about .about-text { font-size:13px; }
  .proj-scroll-btn { display:none; }
  #projects .projects-preview {
    flex-direction:column; height:auto;
    overflow-x:visible; scroll-snap-type:none;
    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 { opacity:1; }
  #projects .prev-info { opacity:1; transform:none; }
  #projects .prev-overlay, #projects .prev-info { opacity:1; transform:none; }
  /* SERVICES — mobile: centered stacked layout (num → name → desc → image) */
  #services .srv-showcase { grid-template-columns:1fr; gap:16px; }
  #services .srv-preview { display:none; }
  #services .srv-row {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:24px 12px; row-gap:6px;
  }
  #services .srv-row.is-active { padding-left:12px; }
  #services .srv-row .srv-num { order:0; margin-bottom:2px; opacity:0.55; }
  #services .srv-row.is-active .srv-num { opacity:1; }
  #services .srv-row .srv-name { order:1; font-size:20px; }
  #services .srv-row .srv-desc {
    order:2; grid-column:auto; max-width:300px; margin:0 auto;
  }
  #services .srv-row.is-active .srv-desc { max-height:200px; margin-top:8px; }
  /* centered thumbnail that opens under the active row */
  #services .srv-row .srv-thumb {
    order:3; display:block;
    width:100%; max-width:340px; aspect-ratio:16/10; margin:0 auto;
    max-height:0; opacity:0; overflow:hidden; object-fit:cover;
    transition:opacity 0.5s ease, max-height 0.55s ease, margin-top 0.5s ease;
  }
  #services .srv-row.is-active .srv-thumb { max-height:240px; opacity:1; margin-top:16px; }
  #contact .contact-inner { grid-template-columns:1fr; gap:48px; }
  .form-row { grid-template-columns:1fr; }
  .submit-row { flex-direction:column; align-items:flex-start; gap:16px; }
}
@media (min-width:768px) and (orientation:landscape) {
  .logo-img { width:240px; }
  .hero-tagline { font-size:12px; }
  .hero-btn { font-size:11px; padding:12px 34px; }
}