/* ============================================================================
   ענבל בן משה — shared stylesheet for the whole site.

   One file, loaded by every page, so the chrome can never drift between pages.

   Palette is hers, literally: the lilac of her bell logo (#D8B4E2 / #E6D5EC),
   a pearl-white ground (#FAFAFC) and soft anthracite text (#2D2B30) — never
   pure black, which she dislikes. The brass of the bell is the luxury accent.
   Every transition is long and eased: she asked for movement that is gentle,
   and explicitly not anything that flickers or jumps.
   ========================================================================= */
:root{
  color-scheme: only light;

  --lilac:#D8B4E2;
  --lilac-soft:#E6D5EC;
  --lilac-pale:#F3EAF7;
  --lilac-wash:#FAF6FC;
  --lilac-mid:#9164A9;  /* white-on-this measured 3.44–3.92:1 */
  --lilac-deep:#6B4C7E;

  /* The gold was #B99551, an olive brass; she wrote that she does not like
     that shade. This is a softer champagne that sits beside the lilac instead
     of fighting it. One place to change if she wants it warmer or cooler. */
  --brass:#C9A57C;
  /* Text-only variant. --brass stays for hairlines and rules; on white the
     accent itself is far under the 4.5:1 that running text needs. */
  --brass-text:#7E6242;
  --brass-soft:#E9DCC9;
  --brass-pale:#F7F1E8;

  --pearl:#FAFAFC;
  --white:#FFFFFF;

  --ink:#2D2B30;
  --ink-mid:#55505C;
  --ink-soft:#736D7A;   /* was #7C7684 — 4.01:1, under the 4.5 floor */

  --radius:20px;
  --radius-lg:30px;
  --hair:1px solid rgba(107,76,126,.11);
  --shadow:0 1px 2px rgba(45,43,48,.035), 0 12px 30px -20px rgba(107,76,126,.32);
  --shadow-lg:0 2px 4px rgba(45,43,48,.05), 0 30px 62px -30px rgba(107,76,126,.42);
  --maxw:none;        /* BEN_LEVEL_BAR §1: content runs edge to edge on a 2560 screen */
  --pad:clamp(20px,3vw,72px);
  --maxw-prose:52rem;  /* reading copy stays narrow, per the same rule */
  --slow:cubic-bezier(.25,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1150px 660px at 84% -8%, var(--lilac-pale) 0%, transparent 58%),
    radial-gradient(860px 580px at 4% 24%, #FDF4EC 0%, transparent 56%),
    var(--pearl);
  /* Her choice of type, by name: Alef for the running text, Bellefair for
     the headings. Both carry Hebrew natively. */
  font-family:"Alef",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.075rem; line-height:1.85; font-weight:400;
  /* Room for the fixed quick-call bar on phones. */
  padding-bottom:calc(env(safe-area-inset-bottom) + 74px);
}
@media(min-width:900px){body{padding-bottom:env(safe-area-inset-bottom)}}
img{max-width:100%;display:block;height:auto}

h1,h2,h3{
  /* Bellefair ships one weight, so the hierarchy is carried by size alone. */
  font-family:"Bellefair","Frank Ruhl Libre",Georgia,serif; font-weight:400; line-height:1.14;
  margin:0; color:var(--lilac-deep); letter-spacing:.004em;
}
h1{font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.06; font-weight:400; letter-spacing:-.005em}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:clamp(1.3rem,2.3vw,1.7rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
/* Headings are ONE colour. The old two-tone accent measured 2.84:1 against
   the hero background — under the 3:1 floor — so half of every headline
   looked faded. In body copy the accent stays, in a darker shade that passes. */
.em{color:#7A4F93; font-weight:inherit}
h1 .em, h2 .em, h3 .em{color:inherit}
.ltr{direction:ltr; unicode-bidi:plaintext}

.wrap{width:auto; max-width:none; margin-inline:0; padding-inline:var(--pad)}
.center{text-align:center}
.narrow{max-width:var(--maxw-prose); margin-inline:auto}
/* Full-bleed band. Safe only because html has overflow-x:clip. */
.bleed{margin-inline:calc(50% - 50vw); width:100vw}
:focus-visible{outline:3px solid var(--lilac-mid); outline-offset:3px; border-radius:8px}

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--lilac-deep); color:#fff; padding:14px 20px;
  border-radius:0 0 12px 0; font-weight:700; text-decoration:none;
}
.skip:focus{inset-inline-start:0}

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:60;
  /* Opaque on purpose. A translucent bar + backdrop-filter fogged the
     first line of copy on every page as it passed underneath. */
  background:var(--pearl);
  border-bottom:1px solid rgba(107,76,126,.1);
  padding-top:env(safe-area-inset-top);
}
.hdr::after{
  content:""; position:absolute; inset-inline:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--brass-soft) 25%,var(--brass-soft) 75%,transparent);
  opacity:.5;
}
.hdr-in{
  width:auto; max-width:none; margin-inline:0; padding-inline:clamp(12px,1vw,24px);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px;
}
.brand{color:var(--ink); display:inline-flex; align-items:center; gap:.65rem; min-height:44px; text-decoration:none; flex:none}
.brand .bell{width:26px;height:30px;flex:none;color:var(--brass)}
.brand-txt{display:flex; flex-direction:column; line-height:1.08}
.brand-n{font-family:"Bellefair","Frank Ruhl Libre",serif; font-weight:700; font-size:1.24rem; color:var(--lilac-deep)}
.brand-s{font-size:.65rem; font-weight:600; letter-spacing:.18em; color:var(--ink-soft)}
@media(max-width:400px){
  .hdr .brand-s{display:none}
  .hdr .brand-n{font-size:1.15rem}
  .hdr-in{gap:.55rem}
}

.hdr-nav{display:none; gap:.1rem}
.hdr-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding-inline:.8rem;
  color:var(--ink-mid); text-decoration:none; font-weight:600; font-size:.93rem;
  border-radius:999px; transition:color .45s var(--slow), background .45s var(--slow);
}
.hdr-nav a:hover{color:var(--lilac-deep); background:var(--lilac-pale)}
.hdr-nav a[aria-current="page"]{color:var(--lilac-deep); background:var(--lilac-pale)}
@media(min-width:1060px){.hdr-nav{display:flex}}

.hdr-end{display:flex; align-items:center; gap:.55rem; flex:none}
.hdr-cta{display:none}
@media(min-width:620px){.hdr-cta{display:inline-flex}}
.hdr .soc-row{display:none}
@media(min-width:1200px){.hdr .soc-row{display:flex}}

/* ── Social pills ───────────────────────────────────────────────────────── */
.soc-row{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:13px; text-decoration:none;
  color:var(--lilac-deep); background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(107,76,126,.13);
  transition:transform .45s var(--slow), background .45s var(--slow), color .45s var(--slow);
}
.soc svg{width:20px;height:20px}
.soc:hover{transform:translateY(-2px); color:#fff}
.soc-sp:hover{background:#1DB954}
.soc-am:hover{background:#FA243C}
.soc-td:hover{background:#111}
.soc-yt:hover{background:#E23B2E}
.soc-ig:hover{background:linear-gradient(135deg,#F7B733,#E1306C 48%,#833AB4)}
.soc-tt:hover{background:#2B2A2E}
.soc-fb:hover{background:#1877F2}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:54px; padding:.8rem 1.85rem; border-radius:999px; border:0; cursor:pointer;
  font-family:"Alef",sans-serif; font-size:1.02rem; font-weight:700;
  text-decoration:none; text-align:center;
  transition:transform .45s var(--slow), box-shadow .45s var(--slow), background .45s var(--slow);
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{
  background:linear-gradient(135deg,var(--lilac-mid) 0%,var(--lilac-deep) 100%); color:#fff;
  box-shadow:0 10px 26px -13px rgba(107,76,126,.66);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -15px rgba(107,76,126,.7)}
.btn-ghost{
  background:var(--white); color:var(--lilac-deep);
  box-shadow:inset 0 0 0 1.5px rgba(107,76,126,.2), var(--shadow);
}
.btn-ghost:hover{transform:translateY(-2px); background:var(--lilac-pale)}
.btn-sm{min-height:44px; padding:.5rem 1.15rem; font-size:.92rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2.75rem,5vw,4.5rem);
  background:linear-gradient(180deg,var(--lilac-pale) 0%,rgba(253,244,236,.55) 55%,transparent 100%);
  border-bottom:1px solid rgba(107,76,126,.09);
}
.hero::after{
  content:""; position:absolute; inset-inline:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--brass-soft) 30%,var(--brass-soft) 70%,transparent);
  opacity:.55;
}
/* A full-width band, per DESIGN_SYSTEM §7 — the previous floating card left
   the whole opening marooned in the middle of a wide screen. */
.hero-frame{
  position:relative; padding-block:clamp(1.5rem,4vw,3.5rem);
}
/* A decorative lilac orb used to sit here (inset-inline-end:-6rem => the LEFT
   edge in RTL, top:-8rem => straight under the header). Measured: it painted
   38,320 px at x[0-279] y[77-348] on a 390px screen. Never requested; removed
   at the source rather than covered. */
.hero-grid{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center}
@media(min-width:940px){.hero-grid{grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,5vw,5rem)}}
@media(min-width:1500px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; color:var(--lilac-deep);
  background:rgba(255,255,255,.85); padding:.55rem 1.2rem; border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--brass-soft);
}
.eyebrow .bell{width:14px;height:16px;color:var(--brass)}
.hero h1{margin-top:1.5rem}
.lede{max-width:46ch; margin-top:1.35rem; font-size:clamp(1.04rem,1.9vw,1.2rem); color:var(--ink-mid)}
.center .lede{margin-inline:auto}
.portrait{position:relative}
.keyart{
  position:relative; width:100%; aspect-ratio:1/1;
  display:grid; place-items:center;
}
.keyart svg{width:100%; height:auto; overflow:visible}
.keyart-note{
  margin-top:1rem; text-align:center; font-size:.84rem; color:var(--ink-soft);
}
.keyart-note b{color:var(--lilac-deep); font-weight:700}

/* ── Sections ───────────────────────────────────────────────────────────── */
.sec{padding:clamp(3rem,6.5vw,5.75rem) 0}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.72) 20%,rgba(255,255,255,.72) 80%,transparent)}
.sec-head{max-width:56ch; margin-bottom:clamp(2rem,4vw,3.1rem)}
.sec-head.center{margin-inline:auto; text-align:center}
.kicker{
  display:inline-flex; align-items:center; gap:.65rem; margin-bottom:.9rem;
  font-size:.69rem; font-weight:700; letter-spacing:.28em; color:var(--brass-text);
}
.kicker::before{content:""; width:6px;height:6px; transform:rotate(45deg); border:1px solid var(--brass)}
.kicker::after{content:""; width:38px; height:1px; background:linear-gradient(90deg,var(--brass-soft),transparent)}
.center .kicker{justify-content:center}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.grid-2{display:grid; gap:1.2rem; grid-template-columns:1fr}
.grid-3{display:grid; gap:1.15rem; grid-template-columns:1fr}
@media(min-width:640px){.grid-2,.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--white); border:var(--hair); border-radius:var(--radius);
  padding:1.7rem 1.55rem; box-shadow:var(--shadow);
  transition:transform .5s var(--slow), box-shadow .5s var(--slow);
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.card .ci{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:var(--lilac-pale); color:var(--lilac-deep); margin-bottom:1rem;
}
.card .ci svg{width:23px;height:23px}
.card h3{margin-bottom:.4rem}
.card p{font-size:.98rem; color:var(--ink-soft); margin:0}

/* Two-worlds cards — the dual positioning she asked for */
.world{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--white); border:var(--hair); border-radius:var(--radius-lg);
  padding:2rem 1.85rem 1.7rem; box-shadow:var(--shadow); overflow:hidden;
  transition:transform .5s var(--slow), box-shadow .5s var(--slow);
}
.world:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.world::before{
  content:""; position:absolute; inset-inline-end:-3rem; top:-3rem;
  width:11rem; height:11rem; border-radius:50%;
  background:radial-gradient(circle,var(--lilac-pale),transparent 70%);
}
.wnum{
  position:relative; font-family:"Bellefair","Frank Ruhl Libre",serif; font-weight:700; font-size:2.6rem;
  color:#AE77C1; line-height:1; display:block; margin-bottom:.2rem;
}
.world h3{position:relative}
.world p{position:relative; color:var(--ink-soft); margin:.5rem 0 1.1rem}
.wgo{
  position:relative; display:inline-flex; align-items:center; gap:.4rem; min-height:32px;
  font-weight:700; color:var(--lilac-deep); font-size:.96rem;
}
.wgo::after{content:"←"; transition:transform .45s var(--slow)}
.world:hover .wgo::after{transform:translateX(-4px)}

.marks{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.marks li{display:flex; gap:.75rem; align-items:flex-start}
.marks li::before{
  content:""; flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--brass); margin-top:.72rem;
}
.marks svg{width:20px;height:20px;flex:none;color:var(--brass);margin-top:.32rem}
.prose p{max-width:62ch}
.lesson-shot{max-width:min(100%, 760px); margin:2.2rem auto 0}

/* ── Content slots ──────────────────────────────────────────────────────── */
.slot{
  border:2px dashed rgba(107,76,126,.24); border-radius:20px;
  background:rgba(255,255,255,.7); padding:1.8rem 1.4rem; text-align:center;
}
.slot-lab{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.69rem; font-weight:700;
  letter-spacing:.12em; color:var(--lilac-deep); background:var(--lilac-pale);
  border-radius:999px; padding:.32rem .9rem; margin-bottom:.85rem;
}
.slot h3{font-size:1.1rem; margin-bottom:.5rem}
.slot p{font-size:.92rem; color:var(--ink-soft); line-height:1.7; margin:0; max-width:40ch; margin-inline:auto}
.slot ul{margin:.8rem 0 0; padding:0; list-style:none; font-size:.87rem; color:var(--ink-soft)}
.slot li{padding:.15rem 0}
/* The hero no longer hangs a huge empty box where a photo should be — a
   placeholder that size reads as "unfinished site", not "photo pending". */
.portrait .slot{max-width:420px; margin-inline:auto}

/* ── Embeds ─────────────────────────────────────────────────────────────── */
.embed{
  border-radius:var(--radius); overflow:hidden; border:var(--hair);
  box-shadow:var(--shadow); background:var(--white); line-height:0;
}
.embed iframe{display:block; width:100%; border:0}
.map iframe{filter:saturate(.85)}

/* ── Contact ────────────────────────────────────────────────────────────── */
.ct-grid{display:grid; gap:1.5rem}
@media(min-width:900px){.ct-grid{grid-template-columns:1fr 1fr; gap:2.2rem; align-items:start}}
/* Her portrait on the contact page, sized as she asked: small, beside the
   details — never a wall across the screen. */
.ct-side{display:grid; gap:1.4rem; align-items:center; grid-template-columns:1fr}
@media(min-width:560px){.ct-side{grid-template-columns:minmax(140px,220px) 1fr; gap:1.8rem}}
.portrait-sm{max-width:220px; width:100%}
.ct-list{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.ct-list a{
  display:inline-flex; align-items:center; gap:.7rem; min-height:52px;
  color:var(--ink); text-decoration:none; font-weight:600;
  padding-inline:.2rem; border-radius:12px;
  transition:color .45s var(--slow);
}
.ct-list a:hover{color:var(--lilac-deep)}
.ct-list svg{width:20px;height:20px;flex:none;color:var(--brass)}

form.ct{
  display:grid; gap:.9rem; background:var(--white); border:var(--hair);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow);
}
form.ct label{display:block; font-size:.87rem; font-weight:600; color:var(--ink-mid); margin-bottom:.35rem}
form.ct input{
  width:100%; min-height:52px; padding:.7rem 1rem; border-radius:14px;
  border:1px solid rgba(107,76,126,.2); background:var(--lilac-wash);
  color:var(--ink); font-family:inherit; font-size:1rem;  /* 16px+ or iOS zooms */
  transition:border-color .45s var(--slow), background .45s var(--slow);
}
form.ct input::placeholder{color:var(--ink-soft)}
form.ct input:focus{outline:none; border-color:var(--lilac-mid); background:var(--white)}
.ct-note{margin:.3rem 0 0; font-size:.87rem; color:var(--ink-soft)}
.ct-note.err{color:#9A3B5C; font-weight:600}
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0}

/* ── Reviews ─────────────────────────────────────────────────
   Her real Google reviews. Flat and solid on purpose — no tint, no blur, no
   float: the words are the content, the card only holds them. */
.gbadge{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 auto 1.8rem;
  padding:.65rem 1.15rem; border-radius:999px; text-decoration:none;
  background:var(--white); border:var(--hair); box-shadow:var(--shadow);
  color:var(--ink); font-weight:600; font-size:.95rem;
}
.gbadge{display:flex; width:fit-content}
.badges{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1rem; margin-bottom:1.8rem}
.badges .gbadge{margin:0}
.gbadge .qt-st svg{width:18px;height:18px;color:#1877F2;display:block}
.gbadge b{font-size:1.15rem; color:var(--lilac-deep); font-family:"Bellefair","Frank Ruhl Libre",serif}
.gbadge span{color:var(--ink-soft); font-size:.9rem}
.gbadge:hover{border-color:var(--lilac)}
/* a review that is a rating only: the five stars stand where the words would */
.qt-only{margin:0; color:var(--brass); letter-spacing:.12em; font-size:1.25rem; line-height:1.4}
.qt-st{color:var(--brass); letter-spacing:.12em; font-size:.95rem; line-height:1}

.qts{display:grid; gap:1.4rem}
@media(min-width:860px){.qts{grid-template-columns:repeat(3,1fr)}}
.qt{
  margin:0; padding:1.7rem 1.6rem 1.4rem;
  background:var(--white); border:var(--hair); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.85rem;
}
.qt blockquote{margin:0; font-size:1.02rem; line-height:1.8; color:var(--ink); white-space:pre-line}   /* a reviewer's own line breaks stay */
.qt figcaption{
  margin-top:auto; padding-top:.8rem; border-top:1px solid rgba(107,76,126,.12);
  font-weight:700; color:var(--lilac-deep); display:flex; flex-wrap:wrap;
  align-items:baseline; gap:.55rem;
}
.qt-src{font-weight:600; font-size:.85rem; color:var(--ink-soft)}

/* An empty box she can fill, marked so it is obvious it is not finished copy. */
.card-slot{
  color:var(--ink-soft); font-style:italic; font-size:.95rem;
  border:1.5px dashed rgba(107,76,126,.28); border-radius:12px;
  padding:.7rem .9rem; margin-top:.5rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ftr{margin-top:clamp(2rem,5vw,4rem); padding:clamp(2.6rem,5vw,4rem) 0 0;
  background:linear-gradient(180deg,rgba(243,234,247,.55),rgba(250,250,252,.9));
  border-top:1px solid rgba(107,76,126,.12)}
.ftr-grid{display:grid; gap:2rem}
@media(min-width:820px){.ftr-grid{grid-template-columns:1.5fr 1fr 1.2fr}}
.ftr-blurb{margin-top:1rem; font-size:.95rem; color:var(--ink-soft); max-width:40ch}
.ftr-h{font-family:"Alef",sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.22em; color:var(--brass-text); margin:0 0 .7rem}
.ftr-links{display:flex; flex-direction:column}
.ftr-links a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px; width:fit-content;
  color:var(--ink-mid); font-weight:600; text-decoration:none; font-size:.95rem;
  padding-inline:.2rem; transition:color .45s var(--slow);
}
.ftr-links a:hover{color:var(--lilac-deep); text-decoration:underline; text-underline-offset:4px}
.ftr-ct{list-style:none; margin:0; padding:0}
.ftr-ct a{
  display:inline-flex; align-items:center; gap:.6rem; min-height:46px;
  color:var(--ink-mid); text-decoration:none; font-weight:600; font-size:.94rem;
  transition:color .45s var(--slow);
}
.ftr-ct a:hover{color:var(--lilac-deep)}
.ftr-ct svg{width:18px;height:18px;flex:none;color:var(--brass)}
.ftr-base{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; justify-content:space-between;
  margin-top:2.2rem; padding-block:1.2rem 1.6rem; border-top:1px solid rgba(107,76,126,.1);
  font-size:.85rem; color:var(--ink-soft);
}
.ftr-base a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--ink-soft); font-weight:600; text-decoration:none;
}
.ftr-base a:hover{color:var(--lilac-deep); text-decoration:underline; text-underline-offset:4px}
.ftr-base p{margin:0}

/* ── Quick-call bar (phones) ────────────────────────────────────────────── */
.qbar{
  position:fixed; inset-inline:0; bottom:0; z-index:55;
  display:flex; gap:.6rem; padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:var(--pearl);
  border-top:1px solid rgba(107,76,126,.14);
}
.qbar .btn{flex:1; min-height:48px; padding-inline:.9rem; font-size:.97rem}
.qwa{background:#188741;   /* was #25D366 — white on it measured 1.98:1 */ color:#fff; box-shadow:0 8px 20px -12px rgba(37,211,102,.9)}
.qwa:hover{background:#147437}
@media(min-width:900px){.qbar{display:none}}

/* ── Menu ───────────────────────────────────────────────────────────────── */
.burger{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:46px; height:46px; flex:none; padding:0; cursor:pointer; border:0;
  background:var(--white); border-radius:14px;
  box-shadow:inset 0 0 0 1.5px rgba(107,76,126,.18), var(--shadow);
}
.burger:hover{background:var(--lilac-pale)}
.burger span{display:block; width:19px; height:2px; border-radius:2px; background:var(--lilac-deep);
  transition:transform .45s var(--slow), opacity .35s var(--slow)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1060px){.burger{display:none}}

.menu-bd{position:fixed; inset:0; z-index:70; background:rgba(45,43,48,.38);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .45s var(--slow)}
.menu-bd.on{opacity:1}
.menu{
  position:fixed; z-index:80; top:0; bottom:0; inset-inline-end:0;
  width:min(85vw,330px); background:var(--white);
  box-shadow:0 0 60px -12px rgba(45,43,48,.3);
  padding:calc(1.5rem + env(safe-area-inset-top)) 1.4rem 1.8rem;
  display:flex; flex-direction:column; gap:.24rem;
  transform:translateX(102%); transition:transform .5s var(--slow); overflow-y:auto;
}
/* The panel opens from the same edge the burger sits on. */
[dir="rtl"] .menu{transform:translateX(-102%)}
.menu.on,[dir="rtl"] .menu.on{transform:translateX(0)}
/* A class-level display:flex beats the UA's [hidden]{display:none}; without
   this the closed panel stays in the tab order and the accessibility tree. */
.menu[hidden],.menu-bd[hidden]{display:none}
.menu a{
  display:inline-flex; align-items:center; min-height:52px; min-width:44px; padding:0 .9rem;
  border-radius:14px; text-decoration:none; color:var(--ink); font-weight:600; font-size:1.05rem;
  transition:background .45s var(--slow), color .45s var(--slow);
}
.menu a:hover,.menu a[aria-current="page"]{background:var(--lilac-pale); color:var(--lilac-deep)}
.menu-cta{margin-top:1rem; justify-content:center; color:#fff !important}
.menu-cta:hover{color:#fff !important}
.menu-soc{margin-top:1.1rem; justify-content:center}
.menu-x{
  align-self:flex-end; width:46px; height:46px; margin-bottom:.6rem; border:0; border-radius:50%;
  cursor:pointer; font-size:1.25rem; line-height:1; background:var(--lilac-wash); color:var(--lilac-deep);
  box-shadow:inset 0 0 0 1.5px rgba(107,76,126,.16);
}

/* ── Long-press tooltip ─────────────────────────────────────────────────── */
.tip{
  position:fixed; z-index:150; max-width:min(84vw,300px);
  background:var(--lilac-deep); color:#fff; font-size:.86rem; line-height:1.5;
  padding:.6rem .9rem; border-radius:10px; pointer-events:none;
  box-shadow:0 12px 30px -8px rgba(45,43,48,.45);
  opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s;
}
.tip.on{opacity:1; transform:translateY(0)}

/* ── Reveal — slow, per "nothing that flickers quickly" ─────────────────── */
.rv{opacity:1; transform:none}
/* No entrance fade. It hid the page for ~800ms and needed another 1.1s to
   resolve — measured 2067ms to full opacity on a throttled phone. Content
   must be readable the instant it paints. */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}


/* ── Hero stat row — DESIGN_SYSTEM §7 item 6: three proof points. Values are
   hers, from the intake form: a doctorate, many years teaching, six subjects. */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:2.4rem; padding-top:1.8rem;
  border-top:1px solid rgba(107,76,126,.14);
  max-width:640px;
}
.stat{position:relative; padding-inline:.6rem}
.stat + .stat::before{
  content:""; position:absolute; inset-inline-start:0; top:12%; bottom:12%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(185,149,81,.4),transparent);
}
.stat-n{
  font-family:"Bellefair","Frank Ruhl Libre",serif; font-weight:700; line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.3rem); color:var(--lilac-deep);
}
.stat-l{
  margin-top:.45rem; font-size:clamp(.7rem,1.4vw,.82rem); font-weight:600;
  letter-spacing:.1em; color:var(--ink-soft);
}

/* Wide screens: let the grids actually use the room instead of stopping short. */
@media(min-width:1400px){
  .grid-3{grid-template-columns:repeat(3,1fr); gap:1.6rem}
  .grid-2{gap:1.8rem}
  .sec{padding-block:clamp(3.5rem,5vw,6.5rem)}
}

/* ── Video facades ───────────────────────────────────────────────────────
   Real videos from her channel. A facade (thumbnail + play) rather than a
   live iframe each: seven YouTube embeds would pull megabytes before anyone
   pressed play, and she asked for a fast, calm site. */
.vids{display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:1.6rem}
@media(min-width:620px){.vids{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vids{grid-template-columns:repeat(3,1fr)}}
.vid{
  position:relative; display:block; padding:0; border:var(--hair); cursor:pointer;
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); text-align:start; font:inherit; color:inherit;
  transition:transform .5s var(--slow), box-shadow .5s var(--slow);
}
.vid:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.vid img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.vid-play{
  position:absolute; inset-inline-start:50%; top:calc(50% - 1.5rem);
  transform:translateX(-50%) translateY(-50%);
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); color:var(--lilac-deep);
  box-shadow:0 8px 22px -8px rgba(45,43,48,.5);
  transition:transform .45s var(--slow), background .45s var(--slow);
}
.vid:hover .vid-play{transform:translateX(-50%) translateY(-50%) scale(1.06); background:#fff}
.vid-t{
  display:block; padding:.85rem 1rem 1.05rem; font-weight:600;
  font-size:.98rem; color:var(--lilac-deep); line-height:1.4;
}
.vid iframe{width:100%; aspect-ratio:16/9; border:0; display:block}

/* ── Real photographs ────────────────────────────────────────────────────
   Her own photographs, at their own proportions. The old 16/10 crop cut the
   lesson picture "exactly in the important place" — her words — so a portrait
   is never cropped again; width/height come from the file itself, which is
   what keeps the layout still while it loads. */
.portrait-photo{margin:0; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--brass-soft); box-shadow:var(--shadow-lg)}
.portrait-photo img{width:100%; height:auto; display:block}

/* ── Her illustrations, as the ground of a page ───────────────────────────
   She painted three; green belongs to the music page and blue to the blog,
   and she asked that they be a background, not pictures hung on the page.
   Exported at 1400px with only the paper grain softened, so the strokes read; no live filter for phones to pay for. */
body.art-green, body.art-blue{position:relative}
body.art-green::before, body.art-blue::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center; opacity:.82;   /* the painting IS the page (Ben 2026-09-09: "כרקע של העמוד, לא כתמונה") */
}
body.art-green::before{background-image:url(../img/art-green.jpg)}
body.art-blue::before{background-image:url(../img/art-blue.jpg)}
body.art-green{background:
  radial-gradient(1150px 660px at 84% -8%, #EAF3E2 0%, transparent 58%),
  radial-gradient(860px 580px at 4% 24%, #F1F7EA 0%, transparent 56%), #F8FBF5}
body.art-blue{background:
  radial-gradient(1150px 660px at 84% -8%, #E4EEF7 0%, transparent 58%),
  radial-gradient(860px 580px at 4% 24%, #EDF3F9 0%, transparent 56%), #F6F9FC}

.phs{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.5rem}
@media(min-width:620px){.phs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.phs{grid-template-columns:repeat(4,1fr)}}
.ph{margin:0; border-radius:var(--radius); overflow:hidden; border:var(--hair);
  box-shadow:var(--shadow); transition:transform .5s var(--slow), box-shadow .5s var(--slow)}
.ph:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.ph img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}

.bell-img{width:40px;height:40px;border-radius:11px;object-fit:cover;flex:none}

/* ── Late fixes, measured on the real page ──────────────────────────────── */
/* 375px: the accessibility button sat on top of the WhatsApp quick-bar button.
   On phones it now floats above the bar instead of over it. */
@media(max-width:899px){#a11y-root{bottom:calc(env(safe-area-inset-bottom) + 86px) !important}}
/* Five lesson cards in a three-column grid left one empty cell on the last
   row. Centred wrapping keeps the last row balanced at every width. */
[data-block="lessons"]{display:flex; flex-wrap:wrap; justify-content:center}
[data-block="lessons"] > .card{flex:1 1 300px; max-width:520px}
/* A 2560 screen is read from further away; the whole scale grows with it
   (BEN_LEVEL_BAR §1 — type is fluid, not a 1440 design stretched). */
@media(min-width:1800px){html{font-size:112%}}
@media(min-width:2400px){html{font-size:120%}}