/* =====================================================================
   dafna · DESIGN SYSTEM  (2026-08-15, rev 3)
   Loaded last on every page.

   Built on findings that five independent Hebrew-RTL site studies
   reached separately. The four that drove almost every rule here:

   1. Hebrew has no capitals and no italics, so hierarchy has only
      SIZE and WEIGHT — plus, if you introduce it, a small tracked
      Latin label as a third register. Never colour.
   2. Hebrew display type wants line-height BELOW 1.0 (0.90–0.95);
      it has no true ascenders and only five descending finals.
      Body text wants MORE leading than Latin, not less.
   3. The leading edge in RTL is the RIGHT. Rules, list markers,
      indicators and progress all originate there. Every English
      reference puts them left — copying them directly is a bug.
   4. Any Latin run, symbol or numeric range inside Hebrew must be
      bidi-isolated or it silently migrates and reverses meaning.
   ===================================================================== */

:root{
  /* ---- ground: warm monochrome. One accent, used as ink not as fill ---- */
  --pg:#efece4;        /* page */
  --pg-2:#f6f4ee;      /* raised */
  --pg-3:#fbfaf6;      /* paper */
  --dk:#2a2320;        /* the one dark band — warm, never #000 */
  --ink:#2c2924;
  --body:#5a544a;
  --mut:#8c8578;
  --line:rgba(28,26,23,.13);
  --line-2:rgba(28,26,23,.24);
  --accent:#5b2b33;    /* deep berry — booking action + active state only */
  --accent-d:#47212a;

  /* ---- radii: soft, consistent, never per-element ---- */
  --r-s:12px; --r-m:18px; --r-l:26px;

  /* ---- grid: 1440 = 70 + 1300 + 70 ---- */
  --gut:clamp(20px,5vw,70px);
  --max:1300px;
  /* measure: ~62 Hebrew characters. The single most common failure in
     the studied sites was 110–122 characters per line. */
  --measure:620px;      /* ~62 Hebrew characters at 17-19px */

  /* ---- vertical scale: THREE steps, not one token ---- */
  --sp-s:clamp(38px,4.4vw,64px);
  --sp-m:clamp(60px,7vw,104px);
  --sp-l:clamp(88px,10.5vw,156px);

  /* ---- motion: critically damped by default (Apple: no overshoot) ---- */
  --sp:cubic-bezier(.32,.72,0,1);
  --sp-soft:cubic-bezier(.22,1,.36,1);
}

.wrapx{width:min(var(--max),100%);margin-inline:auto;padding-inline:var(--gut)}

/* =====================================================================
   TYPE
   ===================================================================== */
h1,h2,h3,.big,.hero-title,.d-h1,.d-h2,.d-h3{
  font-family:'Assistant',sans-serif;color:var(--ink)}

/* display: tight leading, light weight, emphasis by WEIGHT only */
.d-h1{font-size:clamp(34px,4.4vw,62px);font-weight:300;line-height:.95;
  letter-spacing:-.025em;margin:0}
.d-h2{font-size:clamp(27px,3.1vw,44px);font-weight:300;line-height:.98;
  letter-spacing:-.022em;margin:0}
.d-h3{font-size:clamp(19px,1.7vw,24px);font-weight:500;line-height:1.28;
  letter-spacing:-.012em;margin:0}
.d-h1 b,.d-h2 b,.d-h1 strong,.d-h2 strong{font-weight:600}
/* Hebrew wraps badly at display size — clauses are hand-set, never auto */
.d-h1 span,.d-h2 span{display:block}

/* body: Hebrew needs MORE leading than Latin */
.d-lead{font-size:clamp(17px,1.15vw,19px);line-height:1.72;color:var(--body);
  max-width:var(--measure);margin:0}
.d-body{font-size:16.5px;line-height:1.78;color:var(--body);max-width:var(--measure);margin:0}
.d-sm{font-size:14.5px;line-height:1.65;color:var(--mut)}

/* the third register: a small tracked LATIN label.
   Hebrew cannot do this — no caps, no italics. Latin only ever carries
   labels here, never meaning the visitor must read. Always bidi-isolated. */
.d-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mut);unicode-bidi:isolate;direction:ltr;
  text-align:start}
[dir=rtl] .d-eyebrow{text-align:right}
.d-eyebrow--he{direction:rtl;letter-spacing:.16em;text-transform:none;font-size:12px}

/* any Latin / symbol / numeric range sitting inside Hebrew */
.ltr,bdi.ltr{unicode-bidi:isolate;direction:ltr}

/* =====================================================================
   THE LEADING-EDGE RULE
   One hairline at the START (right, in RTL) of every prose block.
   This is the device that gives a text-only page structure for free —
   and the one detail an English reference will teach you backwards.
   ===================================================================== */
.d-rule{border-inline-start:1px solid var(--line);padding-inline-start:clamp(18px,2.2vw,32px)}

/* =====================================================================
   ACTIONS — one vocabulary.
   Exactly one filled button exists per page: the booking action.
   Everything else is a text link with a leftward arrow (= forward in RTL).
   ===================================================================== */
.d-btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-s);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;padding:14px 26px;min-height:50px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);cursor:pointer;
  transition:background .28s var(--sp),transform .28s var(--sp),box-shadow .28s var(--sp)}
.d-btn:hover{background:var(--accent-d);border-color:var(--accent-d);
  box-shadow:0 10px 24px -14px rgba(91,43,51,.6)}
.d-btn:active{transform:scale(.975);transition-duration:.1s}

.d-link{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  letter-spacing:.02em;color:var(--ink);padding-bottom:3px;
  border-bottom:1px solid var(--line-2);
  transition:border-color .28s var(--sp),color .28s var(--sp)}
.d-link:hover{border-color:var(--ink)}
.d-btn i,.d-link i{font-style:normal;display:inline-block;
  transition:transform .3s var(--sp)}
.d-btn:hover i,.d-link:hover i{transform:translateX(-4px)}
.d-link--quiet{border-bottom-color:transparent;color:var(--mut);font-weight:400}
.d-link--quiet:hover{color:var(--ink);border-bottom-color:var(--line-2)}

/* =====================================================================
   ICONS — one family (Flaticon UIcons thin), one stroke, never mixed
   ===================================================================== */
.d-ico{width:24px;height:24px;display:block;fill:currentColor;flex:0 0 auto}
.d-ico--lg{width:30px;height:30px}

/* =====================================================================
   SECTIONS + RHYTHM
   Three spacing steps. Never two identical geometries in a row.
   ===================================================================== */
.d-sec{padding-block:var(--sp-m)}
.d-sec--s{padding-block:var(--sp-s)}
.d-sec--l{padding-block:var(--sp-l)}
.d-sec--pg{background:var(--pg)}
.d-sec--pg2{background:var(--pg-2)}
.d-sec--paper{background:var(--pg-3)}

/* the ONE dark band per page — warm, never black */
.d-dark{background:var(--dk);color:#f2ede6}
.d-dark .d-h1,.d-dark .d-h2,.d-dark .d-h3{color:#fff}
.d-dark .d-lead,.d-dark .d-body{color:rgba(242,237,230,.76)}
.d-dark .d-eyebrow{color:rgba(242,237,230,.5)}
.d-dark .d-rule{border-color:rgba(242,237,230,.2)}
.d-dark .d-link{color:#fff;border-bottom-color:rgba(242,237,230,.34)}
.d-dark .d-link:hover{border-color:#fff}

/* section head: label + title, with the title's own measure */
.d-head{display:grid;gap:14px;margin-bottom:clamp(28px,3.4vw,52px)}
.d-head .d-lead{margin-top:6px}
.d-head--split{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(20px,3vw,56px);align-items:end}
@media(max-width:820px){.d-head--split{grid-template-columns:1fr;gap:14px}}

/* =====================================================================
   IMAGES — exactly two ratios. Nothing else is permitted.
   Photography is scarce: it appears rarely and LARGE, so each
   appearance reads as an event rather than as wallpaper.
   ===================================================================== */
.d-fig{margin:0;overflow:hidden;border-radius:var(--r-l);background:#e7e3da}
.d-fig img{width:100%;height:100%;object-fit:cover;display:block}
.d-fig--p{aspect-ratio:1/1}    /* portrait / gesture */
.d-fig--l{aspect-ratio:3/2}    /* editorial / environment */

/* =====================================================================
   SPLIT — the workhorse. DOM is authored RTL-first: TEXT is always the
   first child, so mobile stacks message-before-image with no override.
   ===================================================================== */
.d-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,68px);align-items:center}
.d-split__text{max-width:var(--measure)}
.d-split__text>*+*{margin-top:clamp(14px,1.8vw,22px)}
@media(max-width:900px){
  .d-split{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .d-split__text{max-width:none}
  .d-fig--p{aspect-ratio:3/2}
}

/* =====================================================================
   INDEX ROWS — how 11 treatments are presented.
   Typographic bars, not a card grid: a grid of 11 cards needs 11
   photographs that do not exist, and it forces equal weight onto
   unequal treatments.
   ===================================================================== */
.d-index{border-top:1px solid var(--line)}
.d-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(16px,2.4vw,34px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:padding-inline .4s var(--sp),background .4s var(--sp)}
.d-row:hover{background:rgba(28,26,23,.022)}
.d-row__n{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--mut);
  min-width:2.4em;unicode-bidi:isolate;direction:ltr}
.d-row__t{font-size:clamp(18px,1.9vw,25px);font-weight:400;letter-spacing:-.015em;
  line-height:1.3;color:var(--ink);margin:0}
.d-row__s{font-size:14px;line-height:1.55;color:var(--mut);margin:5px 0 0;
  max-width:52ch}
.d-row__go{color:var(--mut);font-size:19px;line-height:1;
  transition:transform .35s var(--sp),color .35s var(--sp)}
.d-row:hover .d-row__go{transform:translateX(-5px);color:var(--ink)}
@media(max-width:600px){
  .d-row{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .d-row__go{display:none}
  .d-row__s{font-size:13px}
}

/* cluster label above a group of rows — breaks a wall of 11 */
.d-cluster{display:flex;align-items:baseline;gap:14px;margin:clamp(34px,4vw,56px) 0 12px}
.d-cluster:first-child{margin-top:0}
.d-cluster span{flex:1;height:1px;background:var(--line)}

/* =====================================================================
   FACTS — icon + label + value. The only place icons appear.
   ===================================================================== */
.d-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,2.6vw,38px)}
.d-fact{display:grid;gap:9px}
.d-fact .d-ico{color:var(--accent)}
.d-fact dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);unicode-bidi:isolate}
.d-fact dd{margin:0;font-size:16px;font-weight:500;color:var(--ink);line-height:1.4}
.d-dark .d-fact .d-ico{color:rgba(242,237,230,.62)}
.d-dark .d-fact dd{color:#fff}

/* =====================================================================
   BENEFITS — one string per item, so hierarchy lives INSIDE the line.
   The first benefit is the primary message and is set larger.
   ===================================================================== */
.d-bens{display:grid;gap:0}
.d-ben{padding:clamp(15px,1.7vw,20px) 0;border-top:1px solid var(--line);
  font-size:16.5px;line-height:1.62;color:var(--body)}
.d-ben:first-child{border-top:0;padding-top:0;
  font-size:clamp(20px,2vw,27px);font-weight:300;line-height:1.34;color:var(--ink);
  letter-spacing:-.015em}
.d-ben b{font-weight:600;color:var(--ink)}

/* =====================================================================
   MOTION — Apple: respond instantly, animate from the current value,
   critically damped, and always give reduced-motion a real equivalent.
   ===================================================================== */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .62s var(--sp-soft),transform .62s var(--sp-soft)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.06s} .rv-2{transition-delay:.12s} .rv-3{transition-delay:.18s}
.rv-4{transition-delay:.24s} .rv-5{transition-delay:.3s}

/* an image materialises — scale + fade together, never a bare opacity fade */
.rv-fig{opacity:0;transform:scale(1.03);
  transition:opacity .9s var(--sp-soft),transform 1.1s var(--sp-soft)}
.rv-fig.in{opacity:1;transform:none}

/* press feedback on every pressable, on pointer-DOWN */
a,button{-webkit-tap-highlight-color:transparent}

/* translucent chrome: content passes under the header */
header.solid{background:rgba(239,236,228,.74)!important;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgba(28,26,23,.07)!important}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-fig{opacity:1;transform:none;transition:opacity .2s linear}
  .d-row,.d-row__go,.d-btn,.d-link i{transition:none}
  .d-btn:active{transform:none}
}
@media(prefers-reduced-transparency:reduce){
  header.solid{background:var(--pg)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* =====================================================================
   REFINEMENT — the interval model.
   uestate holds a constant ~200px gap BETWEEN sections while section
   heights range 300→1728px, and that constant interval is why a short
   section and a tall one read as members of one document. Adopt the
   mechanism: fix the interval, let height follow content.
   A sparse treatment page is ALLOWED to be short. Never pad to a target.
   ===================================================================== */
:root{ --interval:clamp(78px,9vw,150px); --step:clamp(34px,4vw,72px); }
.d-sec{padding-block:var(--interval)}
.d-sec--s{padding-block:var(--step)}
.d-sec--l{padding-block:calc(var(--interval) * 1.25)}
.d-sec + .d-sec{padding-top:var(--interval)}

/* =====================================================================
   TWO-TIER SECTION HEADER
   Hebrew display has no italic, no small caps and a narrow usable
   weight range, so a Hebrew-only heading carries ONE signal. A small
   Latin category noun underneath adds a second register for free —
   and lets the Hebrew line get quieter, not louder.
   The Latin must be a CATEGORY NOUN (Treatments, Method, The Clinic).
   Never a slogan: marketing English cheapens every heading it touches.
   ===================================================================== */
.d-title{display:grid;gap:10px;justify-items:start}
.d-title .d-eyebrow{order:2;font-size:11.5px;letter-spacing:.2em}
.d-title .d-h2,.d-title .d-h1{order:1}


/* =====================================================================
   REFINEMENT — the interval model.
   uestate holds a constant ~200px gap BETWEEN sections while section
   heights range 300 to 1728px, and that constant interval is why a
   short section and a tall one read as members of one document.
   Adopt the mechanism: fix the interval, let height follow content.
   A sparse treatment page is ALLOWED to be short. Never pad to a target.
   ===================================================================== */
:root{ --interval:clamp(78px,9vw,150px); --step:clamp(34px,4vw,72px); }
.d-sec{padding-block:var(--interval)}
.d-sec--s{padding-block:var(--step)}
.d-sec--l{padding-block:calc(var(--interval) * 1.25)}

/* =====================================================================
   TWO-TIER SECTION HEADER
   Hebrew display has no italic, no small caps and a narrow usable weight
   range, so a Hebrew-only heading carries ONE signal. A small Latin
   category noun beneath it adds a second register for free, and lets the
   Hebrew line get quieter rather than louder.
   The Latin must be a CATEGORY NOUN (Treatments, Method, The Clinic).
   Never a slogan: marketing English cheapens every heading it touches.
   ===================================================================== */
.d-title{display:grid;gap:9px;justify-items:start}
.d-title .d-eyebrow{order:2;font-size:11px;letter-spacing:.22em}
.d-title .d-h1,.d-title .d-h2{order:1}

/* =====================================================================
   HOME HERO — photograph and message share a baseline.
   Facts sit below on their own rule, so the fold carries proof without
   the hero having to shout it.
   ===================================================================== */
.dhero{background:var(--pg);padding-block:clamp(96px,10vw,140px) clamp(40px,5vw,64px)}
.dhero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,4.6vw,72px);align-items:end}
.dhero__text{max-width:var(--measure);padding-bottom:clamp(4px,1vw,16px)}
.dhero__text>*+*{margin-top:clamp(16px,2.2vw,26px)}
.dhero__fig{max-height:clamp(340px,42vw,520px)}
.dhero__act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dhero__facts{margin-top:clamp(38px,4.6vw,66px);padding-top:clamp(24px,2.8vw,36px);
  border-top:1px solid var(--line)}

.dmanifesto{font-size:clamp(21px,2.5vw,33px);font-weight:300;line-height:1.42;
  letter-spacing:-.018em;color:var(--ink);max-width:24ch;margin:0}
.dmanifesto b{font-weight:600}

@media(max-width:900px){
  .dhero{padding-top:clamp(84px,15vw,112px)}
  .dhero__grid{grid-template-columns:1fr;gap:clamp(24px,5vw,34px);align-items:start}
  .dhero__text{max-width:none}
  .dhero__fig{max-height:clamp(240px,52vw,340px)}
  .d-facts{grid-template-columns:1fr 1fr;gap:22px}
  .dmanifesto{font-size:clamp(19px,5.2vw,26px);max-width:none}
}


/* display lines get their own, wider measure — a body measure orphans words */
.dhero__text{max-width:min(100%,640px)}
.dhero__text .d-h1{max-width:none}
.dhero__text .d-lead{max-width:var(--measure)}
.dmanifesto{max-width:min(100%,700px)}
@media(max-width:900px){
  .dhero__text,.dmanifesto{max-width:none}
}
.dmanifesto span{display:block}
@media(max-width:600px){.dmanifesto span{display:inline}}

/* the arrow is a hover affordance, not a permanent mark — a static arrow
   at the far end of every row leaves a large dead void mid-row */
.d-row__go{opacity:0;transition:opacity .3s var(--sp),transform .35s var(--sp),color .35s var(--sp)}
.d-row:hover .d-row__go,.d-row:focus-visible .d-row__go{opacity:1}
@media(hover:none){.d-row__go{opacity:.45}}

/* =====================================================================
   THE DARK BAND — appears once per page, never repeats.
   Every source frame is portrait, so a wide band is only cut from a
   frame where the subject already fills the width. Never squashed.
   ===================================================================== */
.dband{position:relative;overflow:hidden;min-height:clamp(400px,46vw,560px);
  display:flex;align-items:flex-end}
.dband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 44%}
.dband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(28,20,18,.86),rgba(28,20,18,.5) 52%,rgba(28,20,18,.12))}
.dband__in{position:relative;z-index:2;padding-block:clamp(40px,5vw,72px)}
.dband__in .d-lead{max-width:var(--measure)}
@media(max-width:900px){
  .dband{min-height:clamp(360px,70vw,460px)}
  .dband::after{background:linear-gradient(to top,rgba(28,20,18,.9),rgba(28,20,18,.44) 62%,rgba(28,20,18,.14))}
}

/* =====================================================================
   BRAND WATERMARK — the letterforms from the brand sheet.
   These are the logo at another scale, not decorative shapes, which is
   why they are admissible where an invented blob would not be.
   Held at watermark strength: they give sections different geometry
   without adding colour. mask-image, not background-image — the shipped
   SVGs are baked #e2e2e2 and vanish against the cream.
   ===================================================================== */
.wm{position:relative;overflow:hidden;isolation:isolate}
.wm::before{content:"";position:absolute;z-index:0;pointer-events:none;
  background:var(--ink);opacity:.045;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain}
.wm > *{position:relative;z-index:1}

/* each variant bleeds off a different edge, so no two sections that use
   the device end up with the same silhouette */
.wm--d::before{ -webkit-mask-image:url(a/mark-d.svg);      mask-image:url(a/mark-d.svg);
  width:min(46vw,560px);aspect-ratio:202/203; inset-inline-start:-9%; top:-14%}
.wm--n::before{ -webkit-mask-image:url(a/mark-n-line.svg); mask-image:url(a/mark-n-line.svg);
  width:min(38vw,430px);aspect-ratio:249/285; inset-inline-end:-7%;  bottom:-18%; opacity:.09}
.wm--f::before{ -webkit-mask-image:url(a/mark-f-line.svg); mask-image:url(a/mark-f-line.svg);
  width:min(22vw,240px);aspect-ratio:186/385; inset-inline-start:4%; bottom:-12%; opacity:.09}
@media(max-width:820px){
  .wm--d::before{width:70vw;inset-inline-start:-18%}
  .wm--n::before{width:58vw}
  .wm--f::before{display:none}
}

/* =====================================================================
   BRAND LOCKUP — the tagline travels with the wordmark, in English,
   at label scale. It is the third register, never a message to read.
   ===================================================================== */
.d-tag{display:block;font-size:11.5px;font-weight:400;letter-spacing:.13em;
  color:var(--mut);unicode-bidi:isolate;direction:ltr;text-align:right;margin-top:7px}
.d-tag b{font-weight:600;color:var(--ink)}

/* =====================================================================
   TREATMENT ROW — numbered, with a hairline spec line.
   The number and the spec row are what make a page with one paragraph
   of copy read as specified rather than as thin.
   Spec values are ONLY ever real; where a value is not verified the
   row states how it is set, which is true on every treatment.
   ===================================================================== */
.d-row__spec{display:flex;flex-wrap:wrap;gap:0 clamp(12px,1.6vw,22px);
  margin-top:9px;list-style:none;padding:0}
.d-row__spec li{font-size:12px;letter-spacing:.02em;color:var(--mut);
  position:relative;padding-inline-start:clamp(12px,1.6vw,22px)}
.d-row__spec li:first-child{padding-inline-start:0}
.d-row__spec li:first-child::before{display:none}
.d-row__spec li::before{content:"";position:absolute;inset-inline-start:0;top:.35em;bottom:.35em;
  width:1px;background:var(--line-2)}
.d-row__n{font-variant-numeric:tabular-nums}
@media(max-width:600px){.d-row__spec{display:none}}

/* =====================================================================
   STAGE HERO — an inset rounded photo panel floating on the page ground,
   with the header riding on top of it and the headline set into the
   photograph's own empty field. No scrim, no overlay panel: the frame is
   chosen for its emptiness, which is the only honest way to put type on
   a photograph.
   --subject-x controls which side the person occupies, so the same
   component works whichever way the final frame is shot.
   ===================================================================== */
.stage{--subject-x:72%;background:var(--pg);padding:clamp(76px,8vw,104px) var(--gut) 0}
.stage__panel{position:relative;width:min(var(--max),100%);margin-inline:auto;
  border-radius:clamp(18px,2.2vw,32px);overflow:hidden;background:#e7e3da;
  aspect-ratio:16/9;min-height:clamp(420px,50vw,660px)}
.stage__panel img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--subject-x) 32%}
/* a whisper of lift on the side the type sits, never a scrim over the face */
.stage__panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,rgba(247,245,240,.62),rgba(247,245,240,.16) 38%,transparent 62%)}
/* the source frame has her on the left and the clear wall on the right;
   RTL reads from the right, so the frame is mirrored to put the empty
   field under the type and keep her facing into the page */


.stage__copy{position:absolute;z-index:2;inset-block:0;inset-inline-start:auto;
  inset-inline-start:clamp(24px,5vw,74px);
  display:flex;flex-direction:column;justify-content:center;
  width:min(46%,470px);text-align:start}
.stage__copy .d-h1{font-size:clamp(26px,2.9vw,44px);line-height:1.24;letter-spacing:-.02em}
.stage__copy .d-lead{margin-top:16px;font-size:16px}
.stage__act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}

/* ── ההדר יושב מעל התמונה, לא עליה ──
   קודם הוא צף בתוך הפאנל כגלולה כהה. מעל תמונה בהירה הוא נקרא
   כרצועה אפורה שחוצה את הפריים. עכשיו הוא אלמנט עצמאי על הקרם,
   באותו רוחב כמו הפאנל ועם רווח ביניהם — כך התמונה נשארת שלמה
   והניווט קריא בלי שכבת כהות. */
.stage__bar{position:relative;z-index:3;
  width:min(var(--max),100%);margin:0 auto clamp(16px,1.9vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:clamp(56px,4.4vw,68px);
  padding:8px clamp(16px,1.8vw,26px);
  border-radius:clamp(20px,2.4vw,34px);
  background:#e7e3da}
.stage__bar .logo{width:92px;color:var(--ink)}
.stage__bar nav{display:flex;gap:clamp(14px,1.7vw,28px);font-size:13.5px;font-weight:500}
.stage__bar nav a{color:var(--ink);opacity:.78;transition:opacity .25s var(--ease-out)}
.stage__bar nav a:hover{opacity:1}
.stage__bar .d-btn{min-height:40px;padding:9px 22px;font-size:13px;
  background:var(--paper);color:var(--ink);border-color:transparent}
.stage__bar .d-btn:hover{background:#fff;box-shadow:none}

/* MOBILE — its own composition: the panel becomes a portrait crop and the
   message moves below it onto the cream, where Hebrew is fully legible. */
@media(max-width:900px){
  .stage{padding-top:clamp(64px,16vw,88px)}
  .stage__panel{aspect-ratio:390/562;min-height:0;max-height:68svh}
  .stage__panel::after{background:linear-gradient(to top,rgba(247,245,240,.5),transparent 42%)}
  .stage__copy{position:static;width:auto;padding:clamp(22px,6vw,32px) 2px 0;
    text-align:start}
  .stage__copy .d-h1{font-size:clamp(27px,7.4vw,36px)}
  .stage__bar{min-height:52px;padding:8px 14px;margin-bottom:14px;border-radius:22px}
  .stage__bar nav{display:none}
  .stage__bar .logo{width:74px}
}

/* the site header is replaced by the panel bar across the hero, then
   returns to normal once the stage scrolls away */
header#hdr.has-stage{opacity:0;pointer-events:none;transition:opacity .35s var(--sp)}
header#hdr.has-stage.solid{opacity:1;pointer-events:auto}
.stage__facts{margin-top:clamp(30px,3.6vw,52px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line)}
.stage__panel .logo svg{width:100%;height:auto;fill:currentColor}
@media(max-width:900px){.stage__facts{margin-top:26px}.d-facts{grid-template-columns:1fr 1fr;gap:20px}}

/* eyebrow and body copy sit on a photograph here, so they need their own
   values — the muted token vanishes against the wall */
.stage__copy .d-eyebrow{color:#7c7368}
.stage__copy .d-lead{color:#4c463e}

/* MOBILE — the wide frame crops her out entirely, so the panel switches
   to the portrait source and the message moves below onto the cream. */
@media(max-width:900px){
  .stage__panel{aspect-ratio:390/562;max-height:68svh}
  .stage__panel img{object-position:50% 50%}
  .stage__panel::after{background:linear-gradient(to top,rgba(247,245,240,.42),transparent 40%)}
  .stage__copy{position:static;width:auto;inset:auto;
    padding:clamp(24px,6vw,34px) 2px 0}
  .stage__copy .d-eyebrow{color:var(--mut)}
  .stage__copy .d-lead{color:var(--body)}
}

/* the copy is a sibling of the panel, so it overlays on desktop and sits
   on the cream on mobile without the panel's overflow clipping it */
.stage{position:relative}
.stage__copy{position:absolute;z-index:2;top:clamp(76px,8vw,104px);bottom:0;
  inset-inline-start:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));
  width:min(42%,440px)}
@media(max-width:900px){
  .stage__copy{position:static;width:auto;inset:auto;
    padding:clamp(24px,6vw,34px) var(--gut) 0}
}

/* hand-set display lines collapse to inline on small screens, so they need
   a real word space or the clauses run together */
@media(max-width:600px){
  .dmanifesto span::after,.d-h1 span::after,.d-h2 span::after{content:" "}
}
/* מסגרת המובייל היא קומפוזיציה נפרדת ומוכנה (390x562), ולא חיתוך
   של הפריים הרחב. לכן אין כאן מיקוד — הפאנל באותו יחס בדיוק,
   והתמונה יושבת מלאה. הכלל שהיה כאן כוונן חיתוך שכבר לא קיים. */

/* ═══════════════════════════════════════════════════════════════
   קרוסלת טיפולים  (2026-08-17)
   ───────────────────────────────────────────────────────────────
   מחליפה את האינדקס הטיפוגרפי. מהרפרנס נלקח **המבנה** בלבד —
   שלושה כרטיסים, תמונה למעלה, חצים — ולא השפה: כאן קרם/דיו,
   Assistant, ו-radius מרוסן כמו בשאר האתר.

   הגלילה היא scroll-snap נייטיבי. החצים רק דוחפים אותה, כך
   שגלילה במגע עובדת מעצמה ואין תלות בספרייה.
   ═══════════════════════════════════════════════════════════════ */
.d-caro{position:relative}
.d-caro__track{
  display:flex; gap:clamp(14px,1.7vw,24px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  /* פדינג צדדי שלילי כדי שהכרטיס הראשון יתיישר לגריד */
  padding-block:2px;
}
.d-caro__track::-webkit-scrollbar{display:none}

.d-tcard{
  flex:0 0 calc((100% - 2*clamp(14px,1.7vw,24px)) / 3);
  scroll-snap-align:start; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:14px;
}
.d-tcard__fig{
  aspect-ratio:1/1; overflow:hidden; border-radius:var(--r-sm);
  background:var(--cream2);
}
.d-tcard__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease-out);
}
.d-tcard:hover .d-tcard__fig img{transform:scale(1.03)}

.d-tcard__t{
  font-size:clamp(17px,1.35vw,20px); font-weight:400;
  letter-spacing:-.012em; line-height:1.35; margin:0; color:var(--ink);
}
.d-tcard__s{
  font-size:14px; line-height:1.6; color:var(--mut); margin:0;
}
.d-tcard__go{
  font-size:13px; letter-spacing:.02em; color:var(--ink);
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
}
.d-tcard__go i{
  font-style:normal; transition:transform .4s var(--ease-out);
}
.d-tcard:hover .d-tcard__go i{transform:translateX(-5px)}

/* ── חצים ──
   RTL: ← מקדם קדימה (שמאלה), → חוזר אחורה. */
.d-caro__nav{
  display:flex; gap:10px; justify-content:center;
  margin-top:clamp(24px,2.6vw,36px);
}
.d-caro__btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
  color:var(--ink); font-size:17px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s;
}
.d-caro__btn:hover{background:rgba(28,26,23,.04); border-color:var(--greige)}
.d-caro__btn:active{transform:scale(.94)}
.d-caro__btn[disabled]{opacity:.32; cursor:default}

@media(max-width:1024px){
  .d-tcard{flex-basis:calc((100% - clamp(14px,1.7vw,24px)) / 2)}
}
@media(max-width:600px){
  /* 1.15 כרטיסים — הצצה שמסמנת שיש עוד */
  .d-tcard{flex-basis:82%}
  .d-tcard__s{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .d-caro__track{scroll-behavior:auto}
  .d-tcard__fig img,.d-tcard__go i{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   הסלוגן הלועזי  (2026-08-17)
   ───────────────────────────────────────────────────────────────
   Raleway חל **אך ורק** כאן. כל שאר האתר נשאר Assistant, ולכן
   זו מחלקה משלה ולא שינוי בטוקן הגלובלי.

   לא uppercase: הניסוח נכתב במשפט רגיל, וקפיטליזציה כפויה
   הייתה הופכת אותו לתווית במקום לאמירה.
   ═══════════════════════════════════════════════════════════════ */
.d-tagline{
  display:block; font-family:'Raleway',sans-serif;
  font-size:clamp(12.5px,1.05vw,14.5px); font-weight:400;
  letter-spacing:.07em; line-height:1.5; color:var(--mut);
  margin-bottom:14px;
}
[dir=rtl] .d-tagline{direction:ltr; text-align:right}
.stage__copy .d-tagline{color:#7c7368}
@media(max-width:900px){
  .stage__copy .d-tagline{color:var(--mut); margin-bottom:10px}
}

/* ── הכותרת הראשית בלועזית ──
   Raleway, במשקל 300 כמו שאר הכותרות באתר. הטקסט לטיני בתוך
   פריסה RTL: direction:ltr כדי שהפיסוק יישב נכון, ויישור לימין
   כדי שיתחיל היכן שהעין העברית מתחילה. */
.d-h1--en{
  font-family:'Raleway',sans-serif; font-weight:300;
  letter-spacing:-.005em; line-height:1.16;
  direction:ltr; text-align:right;
}
.d-h1--en span{display:block}
.stage__copy .d-h1--en{font-size:clamp(30px,3.3vw,50px)}
@media(max-width:900px){
  .stage__copy .d-h1--en{font-size:clamp(29px,8vw,40px)}
  .d-h1--en span{display:inline}
}

/* ── עמוד הטיפולים: הפאנל של כל טאב הוא גריד ──
   כאן כל הטיפולים פרוסים בבת אחת, בניגוד לדף הבית שבו הם
   בקרוסלה. אותו רכיב כרטיס בדיוק — רק המכל שונה. */
/* הסלקטור זהה ל-.tabs .tp.active שב-style.css (0-3-0) ולא חלש
   ממנו. הכלל הקודם היה .tp.active ב-0-2-0, והפסיד ל-display:block —
   הגריד נקבע אך מעולם לא הופעל. */
.tabs .tp{display:none}
.tabs .tp.active{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,30px);
}
.tabs .tp.active .d-tcard{flex-basis:auto}
.d-tcard__eb{
  font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mut); margin-bottom:-6px;
}
@media(max-width:1024px){ .tabs .tp.active{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){  .tabs .tp.active{grid-template-columns:1fr; gap:26px} }

/* ── מסגרת לכרטיסייה  (2026-08-17) ──
   קו שיער אחד סביב הכרטיס, התמונה המרובעת יוצאת עד הקצה
   והרדיוס של הכרטיס חותך אותה. הטקסט מרופד בפנים.

   הקישור נדחף לתחתית ב-margin-top:auto — כך כל הכרטיסים
   מיישרים את השורה התחתונה שלהם גם כשהתיאורים באורך שונה. */
.d-tcard{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  gap:0;
  background:var(--paper);
  transition:border-color .35s var(--ease-out);
}
.d-tcard:hover{border-color:rgba(28,26,23,.26)}
.d-tcard__fig{border-radius:0}

.d-tcard__eb,.d-tcard__t,.d-tcard__s,.d-tcard__go{
  padding-inline:clamp(14px,1.15vw,18px);
}
.d-tcard__eb{margin-top:16px; margin-bottom:0}
.d-tcard__t{margin-top:12px}
.d-tcard__eb + .d-tcard__t{margin-top:6px}
.d-tcard__s{margin-top:8px}
.d-tcard__go{margin-top:auto; padding-top:16px; padding-bottom:18px}