/* ============================================================
   SHANI EZRA — interior design studio
   Palette : warm charcoal + cream + bronze
   Type    : Cormorant Garamond (Latin display) · Heebo (Hebrew)
   Signature: the "connector" divider — a hairline with a centred dot
   ============================================================ */

:root{
  --bg:        #131211;
  --bg-panel:  #191817;
  --bg-raise:  #201e1c;
  --ink:       #ece7dd;
  --ink-soft:  #b4ada1;
  --ink-faint: #857f74;
  --gold:      #c3a97b;
  --gold-dim:  #9a8760;
  --line:      rgba(236,231,221,.14);
  --line-gold: rgba(195,169,123,.45);

  --serif:  "Cormorant Garamond","Frank Ruhl Libre",Georgia,serif;
  --heb:    "Heebo","Assistant",system-ui,sans-serif;

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--heb);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:#141210; }

/* ---------- shared layout ---------- */
.wrap{ width:min(100% - 2.6rem, var(--maxw)); margin-inline:auto; }
.section{ padding-block:clamp(4.5rem,9vw,8.5rem); }
.eyebrow{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.95rem,1.6vw,1.15rem);
  letter-spacing:.06em;
  color:var(--gold);
  direction:ltr;
}

/* Latin bits keep the serif + LTR flow */
.lat{ font-family:var(--serif); direction:ltr; unicode-bidi:isolate; }

/* ---------- the connector divider ---------- */
.divider{ width:min(340px,64vw); height:12px; overflow:visible; }
.divider line{ stroke:var(--line-gold); stroke-width:1; }
.divider circle{ fill:none; stroke:var(--line-gold); stroke-width:1; }
.divider .dot{ fill:var(--gold); stroke:none; }
.divider--center{ margin-inline:auto; }

/* ---------- section heading ---------- */
.head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.5rem; margin-bottom:clamp(3rem,6vw,5rem); }
.head__title{
  font-family:var(--heb);
  font-weight:200;
  font-size:clamp(2rem,5vw,3.4rem);
  letter-spacing:.14em;
  line-height:1.1;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.3rem,4vw,3rem);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(16,15,14,.82);
  backdrop-filter:blur(14px);
  padding-block:.85rem;
  border-bottom:1px solid var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__mark{ width:26px; height:34px; }
.nav__mark path{ stroke:var(--ink); stroke-width:2.4; fill:none; }
.nav__name{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.42em; padding-inline-start:.42em; direction:ltr; }
.nav__links{ display:flex; gap:clamp(1.1rem,2.6vw,2.4rem); list-style:none; }
.nav__links a{
  position:relative; font-size:.82rem; letter-spacing:.16em; color:var(--ink-soft);
  padding-block:.4rem; transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  width:0; height:1px; background:var(--gold); transition:width .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__toggle{ display:none; background:none; border:0; cursor:pointer; width:30px; height:22px; position:relative; }
.nav__toggle span{ position:absolute; inset-inline:0; height:1.5px; background:var(--ink); transition:.35s var(--ease); }
.nav__toggle span:nth-child(1){ top:2px; }
.nav__toggle span:nth-child(2){ top:10px; }
.nav__toggle span:nth-child(3){ top:18px; }
.nav.is-open .nav__toggle span:nth-child(1){ top:10px; transform:rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.5rem 4rem;
  background:radial-gradient(120% 90% at 50% 38%, #1c1a18 0%, #131211 55%, #0d0c0b 100%);
}
.hero__eyebrow{
  font-family:var(--serif); font-style:italic; direction:ltr;
  font-size:clamp(1rem,2vw,1.35rem); letter-spacing:.12em; color:var(--ink-soft);
  opacity:0; transform:translateY(14px); animation:rise 1s var(--ease) .2s forwards;
}
.hero__mark{ width:74px; height:104px; margin-block:clamp(1.6rem,4vw,2.6rem);
  opacity:0; transform:translateY(14px); animation:rise 1.1s var(--ease) .45s forwards; }
.hero__mark path{ stroke:url(#goldgrad); stroke-width:2.2; fill:none; stroke-linecap:round; }
.hero__name{
  font-family:var(--serif); font-weight:400; direction:ltr;
  font-size:clamp(2.9rem,9vw,6.2rem); line-height:.95; letter-spacing:.2em;
  padding-inline-start:.2em;
  opacity:0; transform:translateY(16px); animation:rise 1.1s var(--ease) .65s forwards;
}
.hero__sub{
  margin-block:1.6rem 2rem; font-size:clamp(.9rem,2vw,1.05rem);
  letter-spacing:.34em; color:var(--gold); direction:ltr; text-transform:lowercase;
  opacity:0; transform:translateY(16px); animation:rise 1.1s var(--ease) .85s forwards;
}
.hero__div{ opacity:0; animation:fade 1.2s var(--ease) 1.05s forwards; }
.hero__scroll{
  position:absolute; inset-block-end:2rem; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.3em; color:var(--ink-faint);
  opacity:0; animation:fade 1.2s var(--ease) 1.5s forwards;
}
.hero__scroll span{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent);
  animation:drop 2.4s var(--ease) infinite; }

@keyframes rise{ to{ opacity:1; transform:translateY(0);} }
@keyframes fade{ to{ opacity:1; } }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top;} 45%{ transform:scaleY(1); transform-origin:top;} 55%{ transform:scaleY(1); transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:var(--bg); }
.about__grid{ display:grid; grid-template-columns:.85fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.about__img{ position:relative; aspect-ratio:3/4.1; overflow:hidden; }
.about__img img{ width:100%; height:100%; object-fit:cover; filter:brightness(.96); }
.about__img::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(0,0,0,.55); }
.about__body p{ color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.15rem); max-width:52ch; }
.about__body p + p{ margin-top:1.4rem; }
.about__lead{ color:var(--ink)!important; }
.about__bio{
  margin-top:2.4rem; padding-top:2.2rem; border-top:1px solid var(--line);
}
.about__bio .name{ font-family:var(--heb); font-weight:300; letter-spacing:.12em; color:var(--gold);
  font-size:1.25rem; margin-bottom:.7rem; }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ background:linear-gradient(var(--bg),#100f0e); }
.steps{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.steps__rail{ position:absolute; inset-inline:6%; inset-block-start:46px; height:1px; background:var(--line-gold); }
.step{ position:relative; text-align:center; padding-top:0; }
.step__ic{ width:58px; height:58px; margin-inline:auto; margin-bottom:1.4rem; }
.step__ic svg{ width:100%; height:100%; }
.step__ic svg *{ stroke:var(--gold); stroke-width:1.4; fill:none; vector-effect:non-scaling-stroke; }
.step__node{ width:11px; height:11px; border-radius:50%; background:var(--bg); border:1px solid var(--gold);
  margin-inline:auto; margin-bottom:1.4rem; position:relative; z-index:2; }
.step__node::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold); }
.step__title{ font-weight:300; letter-spacing:.16em; font-size:1.15rem; margin-bottom:.5rem; }
.step__txt{ color:var(--ink-faint); font-size:.9rem; line-height:1.6; max-width:22ch; margin-inline:auto; }

/* ============================================================
   PROJECTS
   ============================================================ */
.project{ position:relative; }
.project__stage{ position:relative; min-height:88svh; display:flex; align-items:flex-end; overflow:hidden; }
.project__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.project.reveal.is-in .project__stage img{ transform:scale(1); transition:transform 1.6s var(--ease); }
.project__stage::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.35) 45%, rgba(10,9,8,.15) 100%); }
.project__cap{ position:relative; z-index:2; width:100%; padding:0 clamp(1.4rem,5vw,4.5rem) clamp(2.5rem,5vw,4rem); }
.project__no{ font-family:var(--serif); direction:ltr; font-style:italic; color:var(--gold);
  font-size:clamp(1rem,2vw,1.3rem); letter-spacing:.1em; }
.project__title{ font-family:var(--serif); direction:ltr; font-weight:400;
  font-size:clamp(2.4rem,6.5vw,4.8rem); line-height:1; letter-spacing:.02em; margin-block:.3rem .9rem; }
.project__meta{ display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center;
  direction:ltr; font-family:var(--serif); font-size:clamp(1rem,1.8vw,1.25rem); color:var(--ink-soft); }
.project__meta span{ position:relative; padding-inline-end:1.1rem; }
.project__meta span:not(:last-child)::after{ content:"·"; position:absolute; inset-inline-end:0; color:var(--gold); }

.project__detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:start; padding-block:clamp(3.2rem,6vw,5rem); }
.project__body{ color:var(--ink-soft); font-size:clamp(1rem,1.4vw,1.13rem); max-width:56ch; }
.project__aside .k{ font-size:.72rem; letter-spacing:.26em; color:var(--gold); margin-bottom:1.4rem; }
.chips{ list-style:none; display:flex; flex-direction:column; gap:0; }
.chips li{ display:flex; align-items:baseline; gap:1rem; padding-block:1rem; border-top:1px solid var(--line); }
.chips li:last-child{ border-bottom:1px solid var(--line); }
.chips .n{ font-family:var(--serif); direction:ltr; color:var(--gold); font-size:1.4rem; min-width:1.6rem; }
.chips .t{ color:var(--ink); letter-spacing:.04em; }

/* gallery — dense 6-column editorial mosaic */
.gallery{ display:grid; gap:.7rem; padding-bottom:clamp(3rem,6vw,5rem);
  grid-template-columns:repeat(6,1fr); grid-auto-rows:14vw; grid-auto-flow:dense; }
.gallery figure{ position:relative; overflow:hidden; cursor:zoom-in; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .6s var(--ease); filter:brightness(.94); }
.gallery figure:hover img{ transform:scale(1.05); filter:brightness(1.02); }
.gallery figure::after{ content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .4s var(--ease); }
.gallery figure:hover::after{ border-color:var(--line-gold); }
.gallery .c2{ grid-column:span 2; } .gallery .c3{ grid-column:span 3; } .gallery .c4{ grid-column:span 4; }
.gallery .r2{ grid-row:span 2; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.voices{ background:#100f0e; }
.voices__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); }
.voice{ background:var(--bg-panel); border:1px solid var(--line); padding:clamp(1.8rem,2.6vw,2.6rem);
  display:flex; flex-direction:column; }
.voice__q{ font-family:var(--serif); direction:ltr; color:var(--gold); font-size:2.6rem; line-height:0; height:.7em; }
.voice__txt{ color:var(--ink-soft); font-size:1rem; line-height:1.85; flex:1; margin-block:1rem 1.6rem; }
.voice__by{ display:flex; align-items:center; gap:.8rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.voice__by .nm{ letter-spacing:.08em; color:var(--ink); }
.voice__by .ln{ flex:1; height:1px; background:var(--line-gold); }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{ background:radial-gradient(120% 100% at 50% 0%, #1b1917 0%, #100f0e 70%); text-align:center; }
.contact__title{ font-family:var(--serif); direction:ltr; font-weight:400; letter-spacing:.02em;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1.05; margin-block:1.6rem; }
.contact__title em{ font-style:italic; color:var(--gold); }
.contact__cta{ display:inline-flex; align-items:center; gap:.7rem; margin-top:.5rem;
  font-size:.82rem; letter-spacing:.24em; color:var(--ink); padding:1rem 2.4rem;
  border:1px solid var(--line-gold); transition:background .4s var(--ease), color .4s var(--ease); }
.contact__cta:hover{ background:var(--gold); color:#141210; }
.contact__rows{ margin-top:clamp(3rem,6vw,4.5rem); display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(1.6rem,5vw,4.5rem); color:var(--ink-soft); }
.contact__rows div{ display:flex; flex-direction:column; gap:.5rem; }
.contact__rows .k{ font-size:.68rem; letter-spacing:.26em; color:var(--gold); }
.contact__rows a,.contact__rows p{ color:var(--ink); font-size:1.02rem; direction:ltr; }

.foot{ border-top:1px solid var(--line); padding-block:2rem; }
.foot__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot__name{ font-family:var(--serif); direction:ltr; letter-spacing:.4em; padding-inline-start:.4em; }
.foot__note{ color:var(--ink-faint); font-size:.78rem; letter-spacing:.06em; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{ position:fixed; inset:0; z-index:90; background:rgba(9,8,7,.94); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:4vw;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lb.is-on{ opacity:1; visibility:visible; }
.lb img{ max-width:92vw; max-height:88vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .45s var(--ease); }
.lb.is-on img{ transform:scale(1); }
.lb__x{ position:absolute; inset-block-start:1.4rem; inset-inline-end:1.6rem; background:none; border:0;
  color:var(--ink-soft); font-size:2rem; cursor:pointer; line-height:1; transition:color .3s; }
.lb__x:hover{ color:var(--gold); }
.lb__nav{ position:absolute; inset-block-start:50%; transform:translateY(-50%); background:none; border:0;
  color:var(--ink-soft); font-size:2.6rem; cursor:pointer; padding:1rem; transition:color .3s; }
.lb__nav:hover{ color:var(--gold); }
.lb__prev{ inset-inline-start:1rem; } .lb__next{ inset-inline-end:1rem; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; }
.reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__links{ position:fixed; top:0; right:0; height:100svh; width:min(78vw,320px);
    flex-direction:column; justify-content:center; align-items:flex-start; gap:1.8rem;
    background:rgba(14,13,12,.97); backdrop-filter:blur(16px); padding-inline:2.4rem;
    transform:translateX(100%); transition:transform .5s var(--ease); border-left:1px solid var(--line); }
  .nav.is-open .nav__links{ transform:translateX(0); }
  .nav__links a{ font-size:1.05rem; }
  .nav__toggle{ display:block; z-index:70; }

  .about__grid{ grid-template-columns:1fr; gap:2.4rem; }
  .about__img{ aspect-ratio:4/3; max-height:60vh; }

  .steps{ grid-template-columns:1fr; gap:0; }
  .steps__rail{ inset-inline-start:calc(50% - .5px); inset-inline-end:auto; inset-block:70px auto;
    width:1px; height:calc(100% - 140px); background:var(--line-gold); }
  .step{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic body"; gap:1.2rem;
    text-align:start; padding-block:1.4rem; align-items:center; }
  .step__ic{ grid-area:ic; margin:0; width:46px; height:46px; }
  .step__node{ display:none; }
  .step__body{ grid-area:body; }
  .step__txt{ max-width:none; margin:0; }

  .project__detail{ grid-template-columns:1fr; gap:2.4rem; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw; }
  .gallery .c2,.gallery .c3,.gallery .c4{ grid-column:span 2; }
  .gallery .r2{ grid-row:span 1; }

  .voices__grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .project__meta{ font-size:1rem; }
  .contact__rows{ flex-direction:column; align-items:center; }
  .hero__name{ font-size:clamp(1.9rem,10.5vw,2.5rem); letter-spacing:.07em; }
  .hero__sub{ letter-spacing:.2em; font-size:.78rem; }
  .hero__mark{ width:60px; height:84px; }
  .nav__name{ display:none; }
  .contact__title{ font-size:clamp(1.9rem,8vw,2.6rem); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}