:root{--ground:#f4f2eb;--surface:#fbfaf6;--ink:#141c2e;--muted:#4e5974;--accent:#ad851e;--on-accent:#111111;--accent-2:#c33822;--on-accent-2:#ffffff;--line:#d6d1c2;--font-display:"Noto Serif Hebrew",serif;--font-text:"Noto Sans Hebrew",sans-serif;--h1-weight:700;--h2-weight:500;--h1:clamp(2.6rem,6.2vw,5.4rem);--h1-lh:1.06;--h1-track:-0.01em;--r-sm:2px;--r-md:4px;--r-lg:6px;--r-btn:4px;--border:1px solid var(--line);--shadow:0 1px 2px rgba(0,0,0,.08);--ease:ease-out;--dur:160ms;--section-pad:clamp(88px,14vw,176px);--body:clamp(17px,.35vw + 16px,20px);--body-lh:1.75;--gap:clamp(28px,5vw,72px)}

/* type scale — every font-size on the page comes from one of these seven steps */
:root{--s1:.9rem;--s2:1rem;--s3:var(--body);--s4:clamp(1.25rem,1.9vw,1.65rem);--s5:clamp(1.7rem,3.2vw,2.7rem);--s6:var(--h1);--s7:clamp(4.2rem,15vw,11rem)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-text);font-size:var(--s3);line-height:var(--body-lh);font-weight:400}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 90% at 50% 0,transparent 62%,rgba(60,40,10,.06)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");opacity:.9;background-blend-mode:multiply}
body>*{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--font-display);letter-spacing:0;margin:0;text-wrap:balance}
h2{font-weight:var(--h2-weight);font-size:var(--s5);line-height:1.2}
h3{font-weight:var(--h2-weight);font-size:var(--s4);line-height:1.35}
p{margin:0 0 1.1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

.wrap{width:100%;max-width:1380px;margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.skip{position:fixed;right:12px;top:12px;z-index:50;display:inline-flex;align-items:center;min-height:44px;max-width:calc(100vw - 24px);padding:.7em 1.2em;background:var(--ink);color:var(--surface);font-size:var(--s2);border-radius:var(--r-sm);text-decoration:none;transform:translateY(-200%);transition:transform var(--dur) var(--ease)}
.skip:focus{transform:none}

/* ---------- top bar ---------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:22px 0 20px;border-bottom:1px solid var(--line)}
.topbar__brand{font-family:var(--font-display);font-weight:700;font-size:var(--s4);line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.topnav{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;font-size:var(--s2)}
.topnav a{color:var(--muted);text-decoration:none;padding:.6em 0;border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.topnav a.topnav__wa{color:var(--accent-2);font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;min-height:50px;padding:.95em 1.7em;border:1px solid transparent;border-radius:var(--r-btn);font:600 var(--s2)/1.2 var(--font-text);text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--wa{background:var(--accent-2);color:var(--on-accent-2)}
.btn--wa:hover{background:color-mix(in srgb,var(--accent-2) 86%,#000)}
.btn--ink{background:var(--ink);color:var(--surface)}
.btn--ink:hover{background:color-mix(in srgb,var(--ink) 86%,#fff)}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--surface)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,44px)}

/* ---------- hero (7/5, paper) ---------- */
.hero{padding-block:clamp(34px,4.6vw,62px) var(--section-pad)}
.hero__text{grid-column:1/span 7;align-self:start}
.hero__fig{grid-column:8/span 5;margin:0}
.hero h1{font-weight:var(--h1-weight);font-size:var(--s6);line-height:var(--h1-lh);letter-spacing:var(--h1-track)}
.hero__lede{max-width:34ch;margin-top:clamp(20px,2.4vw,30px);color:var(--muted)}
.hero__lede strong{color:var(--ink);font-weight:600}
.facts{list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.facts li{padding:.6em 1.4em .6em 0;margin-left:1.4em;border-right:1px solid var(--line);font-size:var(--s1);color:var(--muted)}
.facts li:first-child{border-right:0;padding-right:0;padding-left:0}
.facts b{display:block;color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:var(--s4);line-height:1.3;font-variant-numeric:tabular-nums}
.hero__fig img{width:100%;height:clamp(360px,58vh,600px);object-fit:cover;object-position:62% 58%;border-radius:var(--r-lg)}
.cap{margin:.9em 0 0;padding-top:.7em;border-top:1px solid var(--line);font-size:var(--s1);line-height:1.6;color:var(--muted)}

/* ---------- full-bleed band: photo as background, big type over it ---------- */
.band{position:relative;isolation:isolate;min-height:62vh;display:grid;align-items:end;background-color:var(--ink);background-image:linear-gradient(to top,rgba(20,28,46,.93),rgba(20,28,46,.74) 55%,rgba(20,28,46,.62)),url("/assets/band-linen.webp");background-size:cover,cover;background-position:50% 58%;background-repeat:no-repeat;color:var(--surface);padding-block:clamp(76px,11vw,140px);padding-inline:clamp(20px,4vw,64px)}
.band__num{font-family:var(--font-display);font-weight:500;font-size:var(--s7);line-height:1;margin:0;padding-block:.06em;font-variant-numeric:tabular-nums;grid-column:1/span 6}
.band__num small{display:block;font-family:var(--font-text);font-weight:400;font-size:var(--s3);line-height:1.6;color:#e8e3d6;margin-top:1rem;max-width:26ch}
.band__side{grid-column:8/span 5;align-self:end;color:#e8e3d6;max-width:34ch}
.band__side p:last-child{margin-bottom:0}

/* ---------- packages: wide rows, hairlines ---------- */
.sec{padding-block:var(--section-pad)}
.sec--tight{padding-block:clamp(64px,10vw,120px)}
.sec__head{grid-column:1/span 7}
.sec__note{grid-column:9/span 4;align-self:end;color:var(--muted);font-size:var(--s2);margin:0}
.pkgs{grid-column:1/-1;margin:clamp(40px,5vw,64px) 0 0}
.pkg{display:grid;grid-template-columns:repeat(12,1fr);gap:8px var(--gap);align-items:baseline;padding:clamp(28px,3.6vw,44px) 0;border-bottom:1px solid var(--line)}
.pkg h3{grid-column:1/span 4}
.pkg p{grid-column:5/span 5;margin:0;color:var(--muted);font-size:var(--s2)}
.pkg__price{grid-column:11/span 2;justify-self:end;font-family:var(--font-display);font-weight:500;font-size:var(--s5);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.pkgs__cta{grid-column:1/-1;margin-top:clamp(34px,4vw,52px)}

/* ---------- reading column with the heading in the margin ---------- */
.read{grid-column:2/span 5;grid-row:1}
.read p{max-width:62ch}
.read ul{margin:1.4em 0 0;padding:0;list-style:none}
.read li{padding:1em 0;border-top:1px solid var(--line)}
.read li b{font-weight:600}
.how__head{grid-column:8/span 4;grid-row:1;align-self:start}

/* ---------- materials pair ---------- */
.pair{align-items:start}
.pair__a{grid-column:1/span 5;margin:0}
.pair__b{grid-column:7/span 4;margin:clamp(40px,8vw,120px) 0 0}
.pair__a img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg)}
.pair__b img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg)}
.pair__text{grid-column:7/span 4;align-self:start;margin:clamp(20px,2.4vw,30px) 0 0;padding-top:.8em;border-top:1px solid var(--line);color:var(--muted);font-size:var(--s1);line-height:1.6;max-width:40ch}

/* ---------- studio + form ---------- */
.contact{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-inline:clamp(20px,4vw,64px)}
.contact__info{grid-column:1/span 5}
.contact__form{grid-column:7/span 6}
.meta{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0}
.meta li{padding:1em 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.3em 1em;align-items:baseline}
.meta span{color:var(--muted);font-size:var(--s1);min-width:7.5em}
.meta b{font-weight:500;font-family:var(--font-display);font-size:var(--s3)}
.meta a{text-decoration:none;border-bottom:1px solid var(--accent);display:inline-flex;align-items:center;min-height:44px}
.meta a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)}
.field{margin:0 0 18px}
.field label{display:block;font-size:var(--s1);color:var(--muted);margin-bottom:.5em}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.8em 1em;font:400 var(--s2)/1.5 var(--font-text);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm)}
.field textarea{min-height:92px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.check{display:flex;gap:.7em;align-items:flex-start;font-size:var(--s1);line-height:1.6;color:var(--muted);margin:4px 0 20px}
.check input{appearance:none;-webkit-appearance:none;width:44px;height:44px;min-height:0;flex:none;margin:-11px -11px -11px -9px;border:0;cursor:pointer;background-color:transparent;background-repeat:no-repeat;background-position:center,center;background-size:20px 20px,22px 22px;background-image:linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ink),var(--ink))}
.check input:checked{background-size:12px 12px,22px 22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.3 10.5 3' fill='none' stroke='%23fbfaf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(var(--ink),var(--ink))}
.check label{align-self:center}
.privacy{font-size:var(--s1);line-height:1.6;color:var(--muted);margin:16px 0 0}
.privacy a{border-bottom:1px solid var(--line)}
.form__msg{margin:16px 0 0;font-size:var(--s2);min-height:1.5em}
.form__msg[data-state="ok"]{color:var(--ink);font-weight:600}
.form__msg[data-state="err"]{color:var(--accent-2);font-weight:600}

/* ---------- footer ---------- */
.foot{padding-block:clamp(56px,7vw,88px) 44px;font-size:var(--s2);color:var(--muted)}
.foot__brand{grid-column:1/span 4}
.foot__brand b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--s4);color:var(--ink);margin-bottom:.5em}
.foot__nav{grid-column:6/span 7;display:flex;flex-wrap:wrap;gap:.9em 2.2em;align-self:start}
.foot__nav a{text-decoration:none;border-bottom:1px solid transparent;display:inline-flex;align-items:center;min-height:44px;padding-block:.2em}
.foot a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.foot__fine{grid-column:1/-1;margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);font-size:var(--s1);line-height:1.7}
.foot__fine p{margin:0 0 .6em}
.foot__fine a{border-bottom:1px solid var(--line)}

/* ---------- effects: curtain entrance + mask reveal ---------- */
.fx-line{display:block;overflow:hidden}
.fx-line>span{display:block}
.fx-js .fx-curtain__img{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.fx-js .fx-line>span{transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fx-js .fx-line:nth-child(2)>span{transition-delay:.12s}
.fx-js .fx-line:nth-child(3)>span{transition-delay:.24s}
.fx-js .fx-fade{opacity:0;transition:opacity .8s var(--ease) .55s}
.fx-go .fx-curtain__img{clip-path:inset(0)}
.fx-go .fx-line>span{transform:none;transition-delay:.42s}
.fx-go .fx-line:nth-child(2)>span{transition-delay:.54s}
.fx-go .fx-line:nth-child(3)>span{transition-delay:.66s}
.fx-go .fx-fade{opacity:1}
.fx-mask{overflow:hidden;transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.fx-mask img{transition:transform 1.6s cubic-bezier(.16,.84,.24,1)}
.fx-js .fx-mask{clip-path:inset(0 0 100% 0)}
.fx-js .fx-mask img{transform:scale(1.08)}
.fx-js .fx-mask.is-in{clip-path:inset(0)}
.fx-mask.is-in img{transform:none}

@media (max-width:900px){
  :root{--gap:26px;--s1:.95rem}
  .hero__text,.hero__fig,.band__num,.band__side,.sec__head,.sec__note,.read,.how__head,.pair__a,.pair__b,.pair__text,.contact__info,.contact__form,.foot__brand,.foot__nav{grid-column:1/-1}
  .hero{padding-block:26px clamp(64px,12vw,96px)}
  .hero__fig img{height:auto;aspect-ratio:4/3;object-position:70% 62%}
  .facts li{border-right:0;padding:.4em 0;margin:0;width:50%}
  .topbar{padding:14px 0 12px;flex-wrap:nowrap;align-items:center;gap:12px}
  .topnav{gap:0}
  .topnav a:not(.topnav__wa){display:none}
  .topnav a.topnav__wa{min-height:44px;display:inline-flex;align-items:center}
  .band{min-height:0;align-items:start;padding-block:clamp(56px,13vw,96px)}
  .band__num small{max-width:none}
  .pkg{gap:4px}
  .pkg h3{grid-column:1/span 8}
  .pkg p{grid-column:1/-1;order:3}
  .pkg__price{grid-column:9/span 4;align-self:start}
  .pair__b{margin-top:0}
  .two{grid-template-columns:1fr}
  .how__head,.read{grid-row:auto}
  .foot__nav{gap:.8em 1.8em;margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fx-js .fx-curtain__img,.fx-js .fx-line>span,.fx-js .fx-mask,.fx-js .fx-mask img,.fx-js .fx-fade{clip-path:none;transform:none;opacity:1;transition:none}
}
