/* =====================================================================
   MIK STUDIO — shared stylesheet
   Palette: cream · bordeaux · white · light brown. No other colours.
   ===================================================================== */
:root{
  --cream:#FFF3E8;
  --bordeaux:#421C29;
  --bordeaux-deep:#2C121B;
  --white:#FFFFFF;
  --mist:#EBF2F5;
  --ink:#2B1A1F;
  --hair:rgba(43,26,31,.34);
  --hair-strong:rgba(43,26,31,.50);
  --hair-soft:rgba(43,26,31,.13);
  --ink-soft:#2B1A1F;
  --ink-meta:#55393F;
  --wine-45:rgba(66,28,41,.62);
  --on-dark:rgba(255,243,232,.90);
  --on-dark-soft:rgba(255,243,232,.62);
  --hair-light:rgba(255,243,232,.28);

  --disp:'Playfair Display','Heebo',Georgia,serif;
  --disp-he:'Heebo',system-ui,sans-serif;
  --disp-en:'Playfair Display','Heebo',Georgia,serif;
  --body:'Assistant',system-ui,sans-serif;
  --r-card:16px;
  --r-btn:999px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1200px;
  --prose:680px;
  --navh:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:18.5px;line-height:1.8;
  text-align:center;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
p{margin:0}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.skip{position:absolute;inset-inline-start:-9999px;background:var(--bordeaux);color:var(--cream);padding:12px 18px;z-index:300}
.skip:focus{inset-inline-start:0;top:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.prose{max-width:var(--prose);margin-inline:auto}
.sec{padding-block:clamp(58px,8vw,120px)}
.sec-tight{padding-block:clamp(40px,5vw,72px)}
.wine{background:var(--bordeaux);color:var(--cream)}
.wine .h1,.wine .h2,.wine .brand-xl{color:var(--cream)}
.paper{background:var(--white)}
.rule{height:1px;background:var(--hair);border:0;max-width:var(--prose);margin:0 auto}

/* ---------- type ---------- */
.en{direction:ltr;unicode-bidi:isolate}
.brand-xl{font-family:var(--disp);font-weight:500;text-transform:uppercase;line-height:.98;
  letter-spacing:-.01em;font-size:clamp(36.7px,6.7vw,89.0px);direction:ltr;unicode-bidi:isolate}
.h1{font-family:var(--disp);font-weight:500;text-transform:uppercase;line-height:1;
  letter-spacing:-.005em;font-size:clamp(32.4px,5.8vw,70.0px);direction:ltr;unicode-bidi:isolate}
.h2{font-family:var(--disp);font-weight:500;text-transform:uppercase;line-height:1.04;
  font-size:clamp(27.0px,4.3vw,53.0px)}
.h3{font-family:var(--disp);font-weight:500;font-size:clamp(20.5px,2.4vw,28.6px);line-height:1.2}
.eyebrow{font-family:var(--disp);font-weight:500;font-size:12.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--bordeaux)}
html[dir="rtl"] .eyebrow:not(.en){letter-spacing:.12em;font-size:13.5px}
.lead{font-size:clamp(17.8px,1.7vw,20.7px);color:var(--ink-soft)}
.h1,.h2,.brand-xl{color:var(--bordeaux)}
.small{font-size:15px;color:var(--ink-meta)}
.wine .lead,.wine .small{color:var(--on-dark)}
.wine .eyebrow{color:var(--cream)}
.num{direction:ltr;unicode-bidi:isolate}

.rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.rv.on{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 32px;background:var(--bordeaux);color:var(--cream);
  border:1.5px solid var(--bordeaux);border-radius:var(--r-btn);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--cream)}
.btn.line{background:transparent;color:var(--bordeaux);border-color:var(--bordeaux)}
.btn.line:hover{background:var(--bordeaux);color:var(--cream);border-color:var(--bordeaux)}
.btn.cream{background:var(--cream);color:var(--bordeaux);border-color:var(--cream)}
.btn.cream:hover{background:var(--white);border-color:var(--white);color:var(--bordeaux)}
.btn.ghost-light{background:transparent;color:var(--cream);border-color:var(--hair-light)}
.btn.ghost-light:hover{background:var(--cream);color:var(--bordeaux);border-color:var(--cream)}
.btn.sm{padding:11px 20px;font-size:13px}
.acts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- header ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:200;height:var(--navh);display:flex;align-items:center;
  background:rgba(255,243,232,.96);border-bottom:1px solid var(--hair-soft);transition:background .35s}
.nav.over{background:transparent;border-bottom-color:transparent}
.nav-in{display:flex;flex-direction:row;align-items:center;gap:22px;width:100%}
.nav .logo{width:84px}
.nav .lo-light{display:none}
.nav.over .lo-light{display:block}
.nav.over .lo-dark{display:none}
.links{display:flex;gap:20px;margin-left:auto}
.links a{font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding-block:4px;border-bottom:1px solid transparent}
.links a:hover{color:var(--bordeaux)}
.links a[aria-current="page"]{color:var(--bordeaux);border-bottom-color:var(--bordeaux)}
.nav.over .links a{color:var(--on-dark)}
.nav.over .links a:hover,.nav.over .links a[aria-current="page"]{color:var(--cream)}
.langsw{display:flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.08em}
.langsw button{background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--bordeaux);opacity:.5}
.langsw span{opacity:.35}
.langsw button[aria-current="true"]{opacity:1;border-bottom:1.5px solid currentColor}
.nav.over .langsw button{color:var(--cream)}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer;margin-left:auto}
.burger i{display:block;width:22px;height:2px;background:var(--bordeaux);margin:5px 0}
.nav.over .burger i{background:var(--cream)}

/* The header bar keeps one geometry in both languages: logo at the left,
   links / language switch / CTA at the right. Under dir="rtl" the flex row
   would otherwise mirror. row-reverse restores the physical order while each
   label keeps its own text direction, so a mixed string such as
   "להצטרפות ל-PRE-SALE" still reads correctly. The auto margins above are
   deliberately physical (margin-left) rather than logical for the same reason. */
html[dir="rtl"] .nav-in{flex-direction:row-reverse}
html[dir="rtl"] .langsw{flex-direction:row-reverse}

main{padding-top:var(--navh)}
main.flush{padding-top:0}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--bordeaux)}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero .poster{display:none}
.hero #vidT{display:none}
.hero .veil{position:absolute;inset:0;background:rgba(30,26,27,.48)}
.hero-in{position:relative;z-index:2;color:var(--cream);padding-block:calc(var(--navh) + 30px) 40px}
.hero .brand-xl{color:var(--cream)}
.hero .backline{font-family:var(--disp);font-weight:700;font-size:clamp(13px,1.8vw,16px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--cream);direction:ltr;unicode-bidi:isolate;
  margin-bottom:14px}
.hero .brand-he{margin-top:12px;font-family:var(--disp);font-weight:500;font-size:clamp(16.2px,2.2vw,22.3px);color:var(--on-dark)}
.hero .sub{margin-top:22px;color:var(--on-dark);max-width:54ch;margin-inline:auto;
  text-wrap:balance;hyphens:none}
.hero .dates{margin-top:clamp(30px,4vh,52px);padding-top:18px;border-top:1px solid var(--hair-light);
  display:flex;gap:6px 30px;justify-content:center;flex-wrap:wrap;font-size:14.5px;color:var(--on-dark)}
.hero .dates b{font-family:var(--disp);font-weight:700;color:var(--cream)}

/* The Hebrew hero sub carries its own <br>. 54ch is measured on Latin text and
   is a shade too narrow for that first line, and the balancer would re-break it
   anyway, so RTL gets a wider box and plain wrapping. */
html[dir="rtl"] .hero .sub{max-width:64ch;text-wrap:normal}

/* ---------- page hero (inner pages) ---------- */
.phero{padding-block:clamp(54px,8vw,104px) clamp(30px,4vw,54px)}
.phero .sub{margin-top:16px}

/* ---------- numbered blocks ---------- */
.block{border-top:1px solid var(--hair);padding-block:clamp(40px,5.5vw,74px)}
.block:last-of-type{border-bottom:1px solid var(--hair)}
.block .idx{font-family:var(--disp);font-weight:800;font-size:clamp(43.2px,7.6vw,91.2px);line-height:1;
  color:var(--bordeaux);direction:ltr}
.block .name{margin-top:10px}
.block .tag{margin-top:14px;font-family:var(--body);font-weight:400;font-size:17px;letter-spacing:.04em;color:var(--bordeaux)}
.block .body{margin-top:22px}
.block .body p+p{margin-top:14px}
.facts{display:flex;gap:10px 34px;justify-content:center;flex-wrap:wrap;margin-top:26px;
  font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.subhead{margin-top:26px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bordeaux)}

/* ---------- class specs (no imagery: type carries the page) ---------- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.specs .sp{padding:26px clamp(12px,2vw,26px)}
.specs .sp + .sp{border-inline-start:1px solid var(--hair)}
.specs .sp h4{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bordeaux)}
.specs .sp p{margin-top:12px;font-size:16.5px;color:var(--ink-soft)}
.block .rule-brown{height:2px;background:var(--bordeaux);width:56px;margin:26px auto 0;border:0}
.block .big-name{font-size:clamp(32.4px,6.0vw,67.8px)}
@media (max-width:900px){
  .specs{grid-template-columns:1fr}
  .specs .sp + .sp{border-inline-start:0;border-top:1px solid var(--hair)}
}

/* ---------- three-up preview ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);margin-top:44px}
.three .item{padding-top:22px;border-top:1px solid var(--hair)}
.three .item .idx{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--bordeaux);direction:ltr}
.three .item h3{margin-top:12px}
.three .item p{margin-top:10px}
.three .item a{display:inline-block;margin-top:16px;font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--hair);padding-bottom:3px}
.three .item a:hover{border-color:var(--bordeaux)}

/* ---------- six ---------- */
.six .n{font-family:var(--disp);font-weight:800;font-size:clamp(118.8px,19.4vw,233.2px);line-height:.82;color:var(--wine-45);direction:ltr}

/* ---------- schedule ---------- */
.dayrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.daybtn{background:transparent;border:1px solid var(--hair);border-radius:var(--r-btn);padding:11px 22px;cursor:pointer;
  font-family:var(--disp);font-weight:500;font-size:14px;color:var(--ink-soft)}
.daybtn[aria-selected="true"]{background:var(--bordeaux);color:var(--cream);border-color:var(--bordeaux)}
.slots{margin-top:30px;max-width:820px;margin-inline:auto}
.slot{display:grid;grid-template-columns:1fr 1.4fr 1fr auto;gap:14px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--hair);text-align:center}
.slot:first-child{border-top:1px solid var(--hair)}
.slot .t{font-family:var(--disp);font-weight:700;font-size:18px;direction:ltr}
.slot .n{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.04em;direction:ltr}
.slot .meta{font-size:14px;color:var(--ink-meta)}
.slot .st{font-size:13.5px;color:var(--ink-soft);font-family:var(--disp);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.closed{padding:40px 0;color:var(--ink-soft)}
.weeknote{margin-top:14px}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.plan{border-top:1px solid var(--hair);padding:26px 18px}
.plan.pop{border-top:3px solid var(--bordeaux)}
.plan .flag{display:block;min-height:15px;font-family:var(--disp);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bordeaux);direction:ltr}
.plan h3{margin-top:8px;direction:ltr}
.plan .amt{margin-top:12px;font-family:var(--disp);font-weight:800;font-size:38px;direction:ltr;unicode-bidi:isolate}
.plan .was{margin-top:4px;font-size:17px;color:var(--ink-meta);text-decoration:line-through;
  text-decoration-thickness:1.5px;text-underline-offset:2px;direction:ltr;unicode-bidi:isolate}
.plan .d{margin-top:10px;font-size:15.5px;color:var(--ink-soft)}
.plan .btn{margin-top:20px}
.wine .plan{border-top-color:var(--hair-light)}
.wine .plan.pop{border-top-color:var(--cream)}
.wine .plan .flag{color:var(--cream)}
.wine .plan .d{color:var(--on-dark)}
.wine .plan .was,.deep .plan .was{color:var(--white);opacity:.92}
.perks{list-style:none;margin:34px auto 0;padding:0;max-width:var(--prose)}
.perks li{padding:12px 0;border-bottom:1px solid var(--hair-light);font-size:16.5px;color:var(--on-dark)}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:34px auto 0}
.faq .cat{margin-top:44px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bordeaux)}
.qa{border-bottom:1px solid var(--hair)}
.qa:first-of-type{border-top:1px solid var(--hair)}
.qbtn{width:100%;background:none;border:0;cursor:pointer;padding:20px 44px;position:relative;
  font-family:var(--disp);font-weight:700;font-size:clamp(16.7px,1.8vw,19.1px);color:var(--bordeaux);text-align:center}
.qbtn:hover{color:var(--bordeaux)}
.qbtn .sign{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-weight:300;font-size:24px;line-height:1;color:var(--bordeaux)}
.ans{max-height:0;overflow:hidden;transition:max-height .45s ease}
.ans .inner{padding:0 0 22px;color:var(--ink-soft);max-width:var(--prose);margin-inline:auto}
.qa.open .ans{max-height:520px}

/* ---------- first class steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,32px);margin-top:38px}
.steps .s{padding-top:20px;border-top:1px solid var(--hair)}
.steps .s b{display:block;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--bordeaux);direction:ltr}
.steps .s h4{margin-top:10px;font-family:var(--disp);font-weight:700;font-size:16.5px}
.steps .s p{margin-top:8px;font-size:15.5px;color:var(--ink-soft)}
.wine .rule{background:var(--hair-light)}
.sec.wine .h2{color:var(--cream)}

/* ---------- story chapters ---------- */
.chapter{padding-block:clamp(34px,4.5vw,60px);border-top:1px solid var(--hair)}
.chapter .idx{font-family:var(--disp);font-weight:800;font-size:13.5px;letter-spacing:.16em;color:var(--bordeaux);direction:ltr}
.chapter h2{margin-top:10px}
.chapter .body{margin-top:22px}
.chapter .body p+p{margin-top:15px}
.closing{padding-block:clamp(44px,6vw,84px)}

/* ---------- footer ---------- */
footer{background:var(--bordeaux);color:var(--cream);padding-block:clamp(50px,6vw,80px) 28px}
footer .logo{width:110px;margin:0 auto}
footer .fnav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark)}
footer .fnav a:hover{color:var(--white)}
footer .finfo{margin-top:26px;font-size:16px;color:var(--on-dark);display:grid;gap:6px}
footer .finfo a:hover{color:var(--white)}
footer .legal{margin-top:26px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--on-dark)}
footer .copy{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair-light);font-size:13px;color:var(--on-dark)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .links{display:none}
  .links.open{display:grid;position:absolute;top:var(--navh);inset-inline:0;background:var(--cream);
    padding:20px var(--pad);gap:16px;border-bottom:1px solid var(--hair)}
  .links.open a{color:var(--bordeaux)}
  .burger{display:block}
  .nav .btn{display:none}
}

@media (max-width:1000px){
  .three,.plans{grid-template-columns:1fr;gap:0}
  .three .item{padding-block:22px 0}
  .plan{padding-block:24px}
  .steps{grid-template-columns:1fr 1fr}
  .slot{grid-template-columns:auto 1fr auto;row-gap:6px}
  .slot .meta{display:none}
}
@media (max-width:700px){
  :root{--navh:66px}
  body{font-size:17.5px}
  .hero #vidW{display:none}
  .hero #vidT{display:block}
  .hero video,.hero .poster{object-position:50% 50%}
  .steps{grid-template-columns:1fr}
  .dayrow{gap:6px}
  .daybtn{padding:9px 14px;font-size:13.5px}
  .slot{grid-template-columns:auto 1fr;text-align:start}
  .slot .st{text-align:end}
  .slot .btn{grid-column:1/-1;justify-self:center}
  .qbtn{padding-inline:34px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
  .hero video{display:none!important}
  .hero .poster{display:block}
  .ans{transition:none}
}




/* a very soft blue, background only — never type */
.mist{background:var(--mist)}

/* =====================================================================
   Dark sections: bordeaux and deep bordeaux. Cream is the page.
   ===================================================================== */
.deep{background:var(--bordeaux-deep);color:var(--cream)}
.wine,.deep{color:var(--cream)}
.wine .h1,.wine .h2,.wine .h3,.wine .brand-xl,.wine .qbtn,.wine .slot .t,.wine .slot .n,.wine .plan h3,.wine .steps .s h4,
.deep .h1,.deep .h2,.deep .h3,.deep .brand-xl,.deep .qbtn,.deep .slot .t,.deep .slot .n,.deep .plan h3,.deep .steps .s h4{color:var(--cream)}
.wine .lead,.wine .small,.wine .ans .inner,.wine .slot .meta,.wine .plan .d,.wine .specs .sp p,
.deep .lead,.deep .small,.deep .ans .inner,.deep .slot .meta,.deep .plan .d,.deep .specs .sp p{color:var(--on-dark)}
.wine .eyebrow,.wine .faq .cat,.wine .block .tag,.wine .specs .sp h4,.wine .plan .flag,
.deep .eyebrow,.deep .faq .cat,.deep .block .tag,.deep .specs .sp h4,.deep .plan .flag{color:var(--cream)}
.wine .block .idx,.wine .three .item .idx,.wine .chapter .idx,.wine .steps .s b,.wine .six .n,.wine .qbtn .sign,.wine .band .d,
.deep .block .idx,.deep .three .item .idx,.deep .chapter .idx,.deep .steps .s b,.deep .six .n,.deep .qbtn .sign,.deep .band .d{color:var(--on-dark-soft)}
.wine .block .rule-brown,.deep .block .rule-brown{background:var(--cream)}
.wine .qa,.wine .three .item,.wine .steps .s,.wine .chapter,.wine .plan,.wine .slot,
.deep .qa,.deep .three .item,.deep .steps .s,.deep .chapter,.deep .plan,.deep .slot{border-color:var(--hair-light)}
.wine .specs,.deep .specs{border-top-color:var(--hair-light);border-bottom-color:var(--hair-light)}
.wine .specs .sp+.sp,.deep .specs .sp+.sp{border-inline-start-color:var(--hair-light)}
.wine .slot:first-child,.deep .slot:first-child{border-top-color:var(--hair-light)}
.wine .plan.pop,.deep .plan.pop{border-top-color:var(--cream)}
.wine .btn,.deep .btn{background:var(--cream);color:var(--bordeaux);border-color:var(--cream)}
.wine .btn:hover,.deep .btn:hover{background:var(--white);border-color:var(--white)}
.wine .btn.line,.deep .btn.line{background:transparent;color:var(--cream);border-color:var(--hair-light)}
.wine .btn.line:hover,.deep .btn.line:hover{background:var(--cream);color:var(--bordeaux);border-color:var(--cream)}
.wine .qbtn:hover,.deep .qbtn:hover{color:var(--on-dark-soft)}
.wine .daybtn,.deep .daybtn{color:var(--on-dark);border-color:var(--hair-light)}
.wine .daybtn[aria-selected="true"],.deep .daybtn[aria-selected="true"]{background:var(--cream);color:var(--bordeaux);border-color:var(--cream)}
.block.wine,.block.deep{border-top-color:transparent}
.block.wine+.block,.block.deep+.block{border-top-color:var(--hair)}

.brandline{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:1.1;
  font-size:clamp(18.4px,2.4vw,27.6px);color:var(--bordeaux);direction:ltr;unicode-bidi:isolate}
.wine .brandline,.deep .brandline{color:var(--cream)}


/* =====================================================================
   Cards and quick links
   ===================================================================== */
.card{background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:clamp(22px,2.6vw,32px);text-align:center;transition:border-color .3s ease}
.card:hover{border-color:var(--hair-strong)}
.wine .card,.deep .card{background:rgba(255,243,232,.06);border-color:var(--hair-light)}
.wine .card:hover,.deep .card:hover{border-color:var(--cream)}

.three.cards{gap:clamp(14px,2vw,22px)}
.three.cards .item{border-top:0;padding-top:0}
.three.cards .card .idx{display:block}
.three.cards .card h3{margin-top:12px}
.three.cards .card p{margin-top:10px}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.quick a{display:block;background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:34px 18px;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;color:var(--bordeaux);
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.quick a:hover{background:var(--bordeaux);color:var(--cream);border-color:var(--bordeaux)}
.quick a b{font-weight:700}
.quick a span{display:block;margin-top:10px;font-family:var(--body);font-weight:400;font-size:16.5px;line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--ink-meta)}
.quick a:hover span{color:var(--on-dark)}
.wine .quick a,.deep .quick a{background:rgba(255,243,232,.06);border-color:var(--hair-light);color:var(--cream)}
.wine .quick a span,.deep .quick a span{color:var(--on-dark)}
.wine .quick a:hover,.deep .quick a:hover{background:var(--cream);color:var(--bordeaux);border-color:var(--cream)}
.wine .quick a:hover span,.deep .quick a:hover span{color:var(--ink-soft)}

/* plans as cards */
.plan{border-top:0;background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);padding:28px 22px}
.plan.pop{border:2px solid var(--bordeaux)}
.wine .plan,.deep .plan{background:rgba(255,243,232,.06);border-color:var(--hair-light)}
.wine .plan.pop,.deep .plan.pop{border:2px solid var(--cream)}
.plans{gap:12px}

/* About: the portrait gets the same treatment as the six reason tiles — cropped
   to a card, dark veil, cream display type centred over it. The wall behind her
   is pale, so it takes the heavier "bright" veil: cream measures 7.2:1 against
   the lightest 2% of pixels sitting under the text. A fixed 44/62 aspect keeps
   the crop proportional at every width: the frame shows from 3% to 95.5% of its
   height, so the mat stays in and only a sliver goes off the top and bottom. */
.me-card{max-width:440px;margin:0 auto}
.me-card .rc-tile{min-height:0;aspect-ratio:44/62}
.me-card .rc-tile img{object-position:50% 40%}
.me-card .rc-tile:hover img{opacity:1}
.me-card h2{margin:0;color:var(--cream);font-family:var(--disp-en);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.12;
  font-size:clamp(26px,3.6vw,42px)}
.me-card .me-line{margin-top:14px;color:var(--cream);line-height:1.5;
  font-size:clamp(16px,1.7vw,19px)}
html[dir="rtl"] .me-card h2{font-family:var(--disp-he);font-weight:500;letter-spacing:0}

/* A price block with four cards sits 4-up instead of wrapping a lone card onto
   a second row. :has keeps this away from the two- and three-card blocks, and
   both rules start at 1001px so the 1000px single-column rule above still wins
   on mobile. Browsers without :has simply keep the 3-up wrap. */
@media (min-width:1001px){
  .plans:has(.plan:nth-child(4)){grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1001px) and (max-width:1120px){
  .plans:has(.plan:nth-child(4)){grid-template-columns:repeat(2,1fr)}
}

/* who I am — personal opener */
.intro-me{max-width:var(--prose);margin:0 auto;padding-bottom:clamp(30px,4vw,52px)}
.intro-me .name{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(21.6px,2.8vw,31.8px);color:var(--bordeaux)}
.intro-me p{margin-top:16px;font-size:clamp(17.8px,1.8vw,20.7px);color:var(--ink-soft)}
.intro-me .sig{margin-top:22px;font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bordeaux)}
.pull{max-width:var(--prose);margin:clamp(32px,4vw,56px) auto 0;padding:clamp(24px,3vw,36px) 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--disp);font-weight:700;line-height:1.4;
  font-size:clamp(19.4px,2.6vw,28.6px);color:var(--bordeaux)}
.wine .pull,.deep .pull{color:var(--cream);border-color:var(--hair-light)}
@media (max-width:1000px){ .quick{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .quick{grid-template-columns:1fr} }

.block .big-name{margin-top:0}
.three.cards .card h3{margin-top:0}

.specs{border-radius:var(--r-card);border:1px solid var(--hair);overflow:hidden}
.sec.mist,.sec-tight.mist{border-radius:var(--r-card)}
.wrap>.slots{border-radius:var(--r-card)}


/* =====================================================================
   Safety net: anything dark-on-dark. Every rule that paints text with
   the ink colours gets a cream counterpart inside a dark block.
   ===================================================================== */
.wine .facts,.deep .facts,
.wine .sinfo,.deep .sinfo,
.wine .weeknote,.deep .weeknote,
.wine .closed,.deep .closed,
.wine .steps .s p,.deep .steps .s p,
.wine .specs .sp p,.deep .specs .sp p,
.wine .intro-me p,.deep .intro-me p,
.wine .slot .st,.deep .slot .st,
.wine .price-note,.deep .price-note{color:var(--white)}
.wine .facts,.deep .facts{color:var(--white)}
.wine .quick a span,.deep .quick a span{color:var(--white)}
.wine .links a,.deep .links a{color:var(--white)}

.wine .plan .was,.deep .plan .was{color:var(--white);opacity:.92}


/* =====================================================================
   Display type: the high-contrast serif from Mika's own brand graphics
   for English headlines; Hebrew glyphs fall back to Heebo automatically.
   ===================================================================== */




/* =====================================================================
   Typography — single source of truth.
   Latin display: Playfair Display — chosen for legibility at display sizes
   on the warm cream ground. Hairlines hold where a didone's disappear.
   Hebrew display: Heebo Light, matching the Hebrew in those graphics.
   Body, labels and numbers: Assistant / Heebo.
   ===================================================================== */
.brand-xl,.h1,.h2{font-family:var(--disp-en);font-weight:600;letter-spacing:.01em}
.h3,.block .big-name,.plan h3,.why .r h3,.intro-me .name{font-family:var(--disp-en);font-weight:600;letter-spacing:.005em}
.qbtn,.faq .cat{font-family:var(--disp-en);font-weight:600}
.eyebrow,.btn,.quick a b,.block .tag,.specs .sp h4,.plan .flag,.daybtn,
.slot .t,.slot .n,.steps .s b,.chapter .idx,.six .n,.block .idx,.hero .backline,
footer h4,footer .motto,.langsw,.links a{font-family:var(--body)}
.slot .t,.slot .n,.six .n,.block .idx,.chapter .idx,.steps .s b,.plan .amt{font-variant-numeric:lining-nums}

/* the English brand line never changes with the language */
html[dir="rtl"] .h1,html[dir="rtl"] .h2{font-family:var(--disp-he);font-weight:300;letter-spacing:0}
html[dir="rtl"] .brand-xl{font-family:var(--disp-en);font-weight:600;letter-spacing:.01em}
html[dir="rtl"] .h3,html[dir="rtl"] .intro-me .name,html[dir="rtl"] .qbtn,
html[dir="rtl"] .faq .cat{font-family:var(--disp-he);font-weight:400;letter-spacing:0}
html[dir="rtl"] .plan h3,html[dir="rtl"] .why .r h3,html[dir="rtl"] .block .big-name{font-family:var(--disp-en)}


/* =====================================================================
   HERO FOOTAGE — temporary treatment
   The current clip runs in black and white. When the new studio footage
   arrives, replace assets/hero-wide.mp4 and assets/hero-tall.mp4 and
   delete this one block to bring the colour back. Nothing else changes.
   ===================================================================== */
.hero video,.hero .poster{filter:grayscale(1) contrast(1.06)}

/* the story halves: layout in CSS, so the hidden attribute keeps working */
.story-part{display:grid;gap:15px;margin-top:18px}
.story-part[hidden]{display:none}

/* the studio page opens straight into the text — no second heading, less air */
body[data-page="about"] .phero{padding-block:clamp(44px,6vw,80px) clamp(10px,1.5vw,18px);border-bottom:0}
body[data-page="about"] .phero+.sec-tight{padding-top:clamp(14px,2vw,24px)}


/* =====================================================================
   Photography and texture
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;text-align:start}
.split.rev{direction:ltr}
html[dir="rtl"] .split{text-align:start}
.split .txt{text-align:center}
.shot{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--bordeaux-deep)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot.tall{aspect-ratio:3/4}
.shot.wide{aspect-ratio:4/3}
.shot.mono img{filter:grayscale(1) contrast(1.05)}

.strip-photo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}
.strip-photo .shot{aspect-ratio:3/4}


@media (max-width:1000px){
  .split{grid-template-columns:1fr;gap:26px}
  .split .shot{max-width:420px;margin-inline:auto}
  .strip-photo{grid-template-columns:1fr 1fr}
}

/* full frame: no forced ratio, so nothing is cropped */
.shot.natural{aspect-ratio:auto;background:transparent}
.shot.natural img{width:100%;height:auto}

/* marble as a section ground — the overlay is what keeps the text legible */
.sec.marble{position:relative;background-image:url(assets/tex-marble.webp);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.sec.marble::before{content:"";position:absolute;inset:0;background:rgba(255,243,232,.78)}
.sec.marble>*{position:relative;z-index:1}


/* =====================================================================
   Six reasons — tap a tile: the headline rises, the text appears over
   the photo, the photo fades back.
   ===================================================================== */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.rc{border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;background:var(--bordeaux)}
.rc-tile{position:relative;display:flex;align-items:center;min-height:clamp(300px,34vw,400px);
  transition:min-height .35s ease}
.rc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:opacity .45s ease,filter .45s ease}
.rc-veil{position:absolute;inset:0;background:rgba(30,26,27,.40);transition:background .45s ease}
.rc-tile.plain .rc-veil{background:transparent}
/* bright photos: measured, a 40% overlay leaves cream text at 2.30 — 64% brings it to 4.76 */
.rc-tile.bright .rc-veil{background:rgba(30,26,27,.64)}
.rc.open .rc-tile.bright .rc-veil{background:rgba(30,26,27,.46)}
.rc-content{position:relative;z-index:1;width:100%;padding:28px 24px;text-align:center}
.rc h3{margin:0;color:var(--cream);font-family:var(--disp-en);font-weight:600;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(17px,1.9vw,22px);line-height:1.18;
  direction:ltr;unicode-bidi:isolate;transition:transform .35s ease}
.rc-body{visibility:hidden;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .4s ease,max-height .45s ease,margin-top .35s ease}
.rc-body p{margin:0;color:var(--cream);font-size:16.5px;line-height:1.7}
.rc-hit{position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;cursor:pointer}
.rc-sign{position:absolute;inset-inline-end:14px;bottom:12px;color:var(--cream);
  font-family:var(--body);font-weight:300;font-size:24px;line-height:1;transition:transform .35s ease}
.rc-tile:hover img{opacity:.85}

.rc.open .rc-tile{align-items:flex-start}
.rc.open img{opacity:.16;filter:grayscale(1) contrast(1)}
.rc.open .rc-veil{background:rgba(30,26,27,.30)}
.rc.open .rc-body{visibility:visible;opacity:1;max-height:420px;margin-top:16px}
.rc.open .rc-sign{transform:rotate(45deg)}
.rc.open{border-color:var(--cream)}

@media (max-width:1000px){ .why{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .why{grid-template-columns:1fr} .rc-tile{min-height:240px} }
@media (prefers-reduced-motion:reduce){
  .rc-tile,.rc-tile img,.rc-veil,.rc-body,.rc h3,.rc-sign{transition:none}
}

/* the line that introduces the six reasons — same face as the rest of the site,
   just larger and heavier than a normal label */
.whylead{font-family:var(--disp-en);font-weight:600;
  font-size:clamp(20px,2.6vw,30px);line-height:1.32;letter-spacing:.01em;
  color:var(--bordeaux);max-width:28ch;margin-inline:auto}
html[dir="rtl"] .whylead{font-family:var(--disp-he);font-weight:500;letter-spacing:0;max-width:32ch}