@charset "utf-8";

/* ════════════════════════════════════════════════════════════════════════
   ד״ר שמואל כגן · רפואת שיניים — demo
   World: Hebrew picture-book gouache on Material's structural discipline.

   Two rules govern everything below.
   1. EXACTLY TWO ELEVATION PLANES exist: the painted room (ground) and lifted
      paper (raised). There is never a third. A card inside a sheet is not a
      card — it is a hairline division of the same sheet.
   2. OCHRE IS NEVER DECORATION. It appears on an action or on a measurement,
      and nowhere else on this page.

   No gradient appears in this file, anywhere, by instruction. Depth comes from
   opaque flats and real cast shadow, which is what gouache does in life.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Faces ───────────────────────────────────────────────────────────────
   Secular One for display: its heavy geometric Hebrew matches the approved
   comp's headline silhouette. Frank Ruhl Libre was fetched, set beside the
   comp, and dropped — the comp's display is a sans, not a serif.
   Assistant carries every other word on the page. */
@font-face{font-family:'Secular';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/secular-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Secular';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/secular-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/assistant-hebrew.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/assistant-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* The room's own colours, sampled from the painted plates. */
  --g-900:#122E23;   /* deepest — footer, dark plates */
  --g-800:#1C4436;   /* the field: hero wall, method, book */
  --g-700:#27573F;
  --g-400:#7FBFA8;   /* the mint wall */
  --g-200:#C7E2D5;
  --g-100:#E6F1EA;   /* pale ground */
  --paper:#FBFAF5;   /* lifted paper — the only light plane */
  --cream:#F3EBD8;   /* the tiled floor */
  --ink:#14261F;
  --ink-2:#3A5348;   /* 7.7:1 on paper */
  --ochre:#D89A2A;   /* fills only */
  --ochre-t:#8A5A08; /* ochre as TEXT — 6.2:1 on paper. Never use --ochre for type. */
  --on-dark:#F4F7F2; /* 10.2:1 on --g-800 */
  --on-dark-2:#C9D9CF;/* 7.6:1 on --g-800 */

  /* Elevation. Two planes, so two shadows and no more. */
  --lift:0 2px 3px rgba(18,46,35,.09), 0 10px 22px rgba(18,46,35,.13), 0 26px 48px rgba(18,46,35,.10);
  --lift-sm:0 1px 2px rgba(18,46,35,.10), 0 4px 10px rgba(18,46,35,.10);

  /* Hand-cut paper: four unequal corners, so no sheet reads as a UI card. */
  --cut:5px 8px 6px 9px / 8px 5px 9px 6px;
  --pill:999px;

  /* 4pt grid. */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* One ramp: display, section head, and nothing between.
     The display is sized to the SHEET, not the viewport — it lives inside a
     ~30rem column, and a headline set to the screen wraps to two words a line. */
  --t-d1:clamp(1.95rem,3.15vw,3.2rem);
  --t-d2:clamp(1.85rem,3.5vw,3rem);
  --t-h3:clamp(1.1rem,1.45vw,1.32rem);
  --t-lede:clamp(1.06rem,1.35vw,1.28rem);
  --t-body:clamp(1rem,1.05vw,1.0625rem);
  --t-sm:.9rem; --t-xs:.8125rem; --t-micro:.7rem;

  --wrap:74rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--g-100);color:var(--ink);
  font:400 var(--t-body)/1.7 'Assistant',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote,table{margin:0}
ol,ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Bidi reorders a numeric range into nonsense; every number is isolated. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* ₪ sits outside Secular's subset, so amounts name their face explicitly. */
.cur{font-family:'Assistant',system-ui,sans-serif;font-weight:600}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:var(--s3) var(--s5);border-radius:0 0 8px 8px}
.skip:focus{inset-inline-start:var(--s5)}
:focus-visible{outline:3px solid var(--ochre-t);outline-offset:3px;border-radius:3px}

/* ── Type ─────────────────────────────────────────────────────────────── */
.d1{font-family:'Secular',system-ui,sans-serif;font-weight:400;
  font-size:var(--t-d1);line-height:1.06;letter-spacing:-.018em;color:var(--ink)}
.d1__turn{display:block;margin-top:.34em;color:var(--g-700)}
.d2{font-family:'Secular',system-ui,sans-serif;font-weight:400;
  font-size:var(--t-d2);line-height:1.16;letter-spacing:-.012em;margin-bottom:var(--s5)}
.h3{font-family:'Secular',system-ui,sans-serif;font-weight:400;
  font-size:var(--t-h3);line-height:1.3;letter-spacing:-.006em}
.lede{font-size:var(--t-lede);line-height:1.6;color:var(--ink-2);max-width:46ch}
.lede--w{max-width:52ch;margin-bottom:var(--s7)}
p{max-width:62ch}

.mark{display:inline-block;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:none;color:var(--ochre-t);background:var(--paper);
  padding:var(--s2) var(--s4);border-radius:var(--pill);margin-bottom:var(--s5);
  box-shadow:var(--lift-sm)}
.mark--on{color:var(--ink);background:var(--ochre)}
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;color:var(--ochre-t);
  margin-bottom:var(--s4)}
/* Every invented fact on this page wears one of these. */
.ph{display:inline-block;font-size:var(--t-micro);letter-spacing:.1em;color:var(--ink-2);
  border:1px dashed rgba(58,83,72,.45);border-radius:var(--pill);padding:.3rem .7rem}
.ph--wide{margin-top:var(--s5)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-weight:700;font-size:var(--t-sm);line-height:1;text-decoration:none;cursor:pointer;
  padding:.95rem 1.5rem;border-radius:var(--pill);border:2px solid transparent;
  transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease)}
.btn--go{background:var(--ochre);color:var(--ink);box-shadow:var(--lift-sm)}
.btn--go:hover{background:#E8AA3C;transform:translateY(-2px)}
.btn--go:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(20,38,31,.3)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(20,38,31,.05)}
.btn--lg{padding:1.15rem 2rem;font-size:1rem}
.btn--tel{padding:.95rem}
.btn--tel svg{width:1.25rem;height:1.25rem}

/* ── Paper ────────────────────────────────────────────────────────────── */
.sheet{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift)}

/* ── Reveal ───────────────────────────────────────────────────────────────
   14px and 550ms, once, and never again. The distance is deliberately below
   the threshold where a reader notices travel — the point is that the page
   feels awake, not that it performs.

   Hidden in CSS rather than by a JS-added class, so there is no flash of
   visible-then-hidden on load; the <noscript> block in the head puts everything
   back for readers without JS, and main.js reveals everything immediately if
   IntersectionObserver is missing. */
[data-rise]{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
[data-rise].is-in{opacity:1;transform:none}

/* ── Nav ──────────────────────────────────────────────────────────────────
   The bar is paper, not a tint. A translucent bar over this hero would sit on
   a bright window at one end and a dark wall at the other, and no single text
   colour survives both — the first build proved it. Paper also keeps the page
   at two planes: the bar is simply the topmost sheet. */
.nav{position:fixed;inset-inline:0;top:0;z-index:40;background:var(--paper);
  box-shadow:var(--lift-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s3) clamp(1.25rem,4vw,2.5rem);
  display:flex;align-items:center;gap:var(--s5)}
.nav.is-stuck{box-shadow:var(--lift)}
.nav.is-away{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--ink)}
.brand__mark{width:1.85rem;height:1.85rem;flex:none;color:var(--ochre-t)}
.brand__t{display:flex;flex-direction:column;line-height:1.15}
.brand__t b{font-family:'Secular',system-ui,sans-serif;font-weight:400;font-size:1.02rem}
.brand__t i{font-style:normal;font-size:var(--t-micro);letter-spacing:.1em;color:var(--ink-2)}
.nav__links{display:flex;gap:var(--s5);margin-inline-start:auto;font-size:var(--t-sm);font-weight:600}
.nav__links a{color:var(--ink-2);text-decoration:none;padding-block:var(--s2)}
.nav__links a:hover{color:var(--ink)}
.nav__cta{padding:.7rem 1.2rem}

/* ── 1 · Hero ─────────────────────────────────────────────────────────────
   Three planes: room, sheet, lamp. The lamp's shadow is a drop-shadow taken
   off its own alpha, so it falls across the sheet exactly as the comp painted
   it — and it moves when the parallax moves. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;background:var(--g-800);isolation:isolate}
.hero__room{position:absolute;inset:-4% -2% -2%;z-index:0}
.hero__room img{width:100%;height:100%;object-fit:cover;object-position:28% 58%;
  will-change:transform;transform:translate3d(0,var(--py,0),0)}
.hero__wrap{position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin-inline:auto;padding:6rem clamp(1.25rem,4vw,2.5rem) 4rem;
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr)}
/* Column 1 is the RIGHT column under dir=rtl, which is where the comp puts the
   sheet and where a Hebrew reader starts. */
.hero__sheet{grid-column:1;padding:clamp(1.75rem,2.8vw,2.6rem);
  transform:translate3d(0,var(--py,0),0)}
.hero__sheet .lede{margin-top:var(--s4)}
.hero__act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* Physical left/right on purpose: the lamp is tied to the painting, not to
   the reading direction. Mirroring it would light the room from the wrong side.
   Its width and offset are tuned so the SHADE — not the arm — is what crosses
   the sheet's leading edge; the arm crossing alone reads as a scratch. */
.hero__lamp{position:absolute;z-index:3;top:2%;left:33%;width:min(33vw,440px);height:auto;
  pointer-events:none;
  filter:drop-shadow(-12px 20px 16px rgba(18,46,35,.32));
  transform:translate3d(0,var(--py,0),0)}
.hero__scroll{position:absolute;z-index:3;bottom:var(--s6);left:50%;margin-left:-1.375rem;
  width:2.75rem;height:2.75rem;border-radius:var(--pill);
  display:grid;place-items:center;color:var(--ink);background:var(--paper);
  box-shadow:var(--lift-sm);animation:bob 2.6s var(--ease) infinite}
.hero__scroll svg{width:1.15rem;height:1.15rem}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── 2 · The admission ────────────────────────────────────────────────── */
.truth{background:var(--cream);padding-block:clamp(4rem,9vw,7.5rem)}
.truth__in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.truth__n{font-size:var(--t-lede);color:var(--ink-2);max-width:44ch;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--s3)}
.truth__n .num{font-family:'Secular',system-ui,sans-serif;font-size:clamp(3.4rem,8vw,6.4rem);
  line-height:.9;color:var(--ochre-t)}
.truth__t{font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.3rem,2.6vw,2.05rem);
  line-height:1.35;max-width:26ch}
.truth__t b{font-weight:400;color:var(--ochre-t)}

/* ── 3 · The equipment ────────────────────────────────────────────────────
   Four instruments, each on its own sheet, drawn as an object study and set
   like a plate from a catalogue of fine tools. This is where the page's claim
   to prestige is actually made: not gold and not a serif, but four precise
   objects rendered with care and captioned with real measurements. */
/* Mint, not cream: §2 above it is cream, and two cream bands in a row read as
   one section with a hole in the middle rather than as two. */
.engine{background:var(--g-100);padding-block:clamp(3rem,6vw,5rem)}
/* One per row, each a horizontal catalogue entry: plate at the leading edge,
   entry beside it. Two per row was the earlier answer and it cost the plate its
   job — at this wrap a two-up card leaves ~495px inside, and any plate past
   11rem crushes the entry to a 43ch column. So the plate stayed at 8.5rem and
   read as a bullet, which is the one thing this section cannot afford: it is
   where the page's claim to prestige is actually made, and it was making it at
   136px. One per row buys the plate 13.5rem and the entry a full measure. The
   section is ~0.6 screens taller for it, and that is the trade.
   Four narrow columns cramped the text and orphaned the fourth card onto its
   own row; stacking the plate above the text made the section twice as tall as
   the argument it carries. Both remain wrong. */
.kit{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.5rem)}
/* Row gap is zero on purpose. The entry's four lines are four grid items in
   column 2, so a symmetrical `gap` was spacing them vertically as well as
   spacing the plate horizontally — one value doing two unrelated jobs. The
   lines already carry their own margins; only the column needs the gutter.
   The clamp floors hold the phone layout exactly where it was: at 375px the
   plate is still 6rem and the entry still gets 191px, because side-by-side at
   that width is already at its limit and the fix here is a desktop fix. */
.kit__i{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:clamp(1rem,2.2vw,1.6rem);
  display:grid;grid-template-columns:clamp(6rem,17vw,13.5rem) minmax(0,1fr);
  column-gap:clamp(1rem,2.4vw,2rem);row-gap:0;align-items:start}
/* The plate holds column 1 for the whole entry. Without the span it sits in row
   one alone, so row one's height becomes the picture's height — and the
   heading, which is row two, gets pushed down the full height of the plate.
   That was a survivable 136px of white and would have been 216px of it. */
.kit__im{grid-row:1 / span 4;border-radius:6px;overflow:hidden;background:var(--cream)}
.kit__im img{width:100%;aspect-ratio:1;object-fit:cover}
.kit__i > :not(.kit__im){grid-column:2}
/* What the instrument retired, above its name — the device only means something
   against the thing the reader is actually afraid of. */
.kit__was{font-size:var(--t-xs);font-weight:700;line-height:1.45;color:var(--ochre-t);
  margin-bottom:var(--s2)}
.kit__i .h3{margin-bottom:var(--s3)}
.kit__i > p:not(.kit__was):not(.kit__spec){font-size:var(--t-sm);color:var(--ink-2)}
/* The spec line. Small caps register, tabular figures, hairline above: the
   catalogue voice, and the only place on the page where a number is allowed to
   sit on its own without a sentence around it. */
.kit__spec{margin-top:auto;padding-top:var(--s4);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;
  border-top:1px solid rgba(20,38,31,.14)}

/* ── 6 · What will not happen ─────────────────────────────────────────────
   Four negatives. The ✕ is drawn at reading weight, not as a bullet: it is the
   only mark on the page that means "this does not happen here". */
.nots{background:var(--g-100);padding-block:clamp(4.5rem,10vw,8rem)}
.nots .d2 em{font-style:normal;color:var(--ochre-t)}
.nlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:var(--s5)}
.n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  align-items:start;background:var(--paper);border-radius:var(--cut);
  box-shadow:var(--lift);padding:clamp(1.25rem,2.4vw,1.8rem)}
.n__x{width:2rem;height:2rem;flex:none;color:var(--g-700)}
.n .h3{margin-bottom:var(--s2)}
.n p{font-size:var(--t-sm);color:var(--ink-2)}

/* ── 7 · The comparison ───────────────────────────────────────────────────── */
.vs{background:var(--g-800);color:var(--on-dark);padding-block:clamp(4.5rem,10vw,8rem)}
.vs .d2{color:var(--paper)}
.cmp{width:100%;border-collapse:collapse;background:var(--paper);color:var(--ink);
  border-radius:var(--cut);overflow:hidden;box-shadow:var(--lift)}
.cmp th,.cmp td{padding:clamp(.85rem,1.8vw,1.15rem) clamp(.7rem,1.8vw,1.4rem);
  text-align:start;border-bottom:1px solid rgba(20,38,31,.1);font-weight:400}
.cmp thead th{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;color:var(--ink-2)}
.cmp tbody th{font-weight:700;font-size:var(--t-sm)}
.cmp td{font-size:var(--t-sm);color:var(--ink-2)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp__us{background:#F6EBD6;color:var(--ink)}
.cmp b{font-family:'Secular',system-ui,sans-serif;font-weight:400;font-size:1.15em}
/* The row this clinic loses. Marked, not hidden. */
.cmp__loss .cmp__us b{color:var(--ink-2)}
.cmp__note{margin-top:var(--s5);color:var(--on-dark-2);max-width:56ch}
/* `.ph` is drawn for paper grounds; this is the one section that puts a label
   chip on the dark field, so it restates both colours rather than inheriting
   ink-on-ink. */
.vs .ph{color:var(--on-dark-2);border-color:rgba(244,247,242,.4)}

/* ── 10 · The visit ───────────────────────────────────────────────────────
   Six steps in one screen instead of six screens. The tabs are the clock. */
.visit{background:var(--g-100);padding-block:clamp(4.5rem,10vw,8rem)}
.tl__tabs{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s3);
  scrollbar-width:thin;margin-bottom:var(--s5)}
/* A definite flex-basis, not `auto`. With `auto` the base size comes from the
   content, and the content is now a 720px-wide image asking for `width:100%` —
   a percentage that cannot resolve against an indefinite width, so the tab
   sizes to the intrinsic 720 and six of them tear the row apart. Naming the
   basis makes the image's percentage resolve against a real number. No shrink,
   so the row still scrolls on a phone rather than crushing six tabs into it. */
.tl__t{display:flex;flex-direction:column;gap:.15rem;flex:1 0 6.5rem;min-width:6.5rem;
  cursor:pointer;text-align:start;padding:.7rem 1rem;border-radius:var(--cut);
  background:var(--paper);border:2px solid transparent;box-shadow:var(--lift-sm);
  transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.tl__t b{font-family:'Secular',system-ui,sans-serif;font-weight:400;
  font-size:1.15rem;color:var(--ink-2)}
.tl__t span{font-size:var(--t-xs);font-weight:700;color:var(--ink-2)}
/* The six steps, all at once. Five of the six illustrations existed only inside
   a hidden panel — drawn, shipped, and never seen unless the reader thought to
   click. In the tab row they make the control the filmstrip it already called
   itself, and they hold up with JS off, which is the one case where the tabs
   otherwise lose five steps entirely. The panel image stays: it is three times
   this size and carries the detail. */
.tl__th{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;
  background:var(--g-200);margin-bottom:var(--s2)}
.tl__t:hover{border-color:rgba(20,38,31,.25)}
.tl__t.is-on{background:var(--g-800)}
.tl__t.is-on b{color:var(--ochre)}
.tl__t.is-on span{color:var(--on-dark)}
.tl__stage{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:clamp(1.25rem,2.6vw,1.9rem)}
.tl__p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
.tl__p[hidden]{display:none}
.tl__im{border-radius:6px;overflow:hidden;background:var(--g-200)}
.tl__im img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* The fear the step removes, in the visitor's own voice, above the answer. */
.tl__f{font-family:'Secular',system-ui,sans-serif;font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.45;color:var(--ochre-t);margin-bottom:var(--s4);
  padding-bottom:var(--s4);border-bottom:1px solid rgba(20,38,31,.12)}
.tl__tx .h3{margin-bottom:var(--s2)}
.tl__tx p:not(.tl__f){color:var(--ink-2)}
.tl__tx p b{color:var(--ink);font-weight:700}

/* ── 4 · The film ─────────────────────────────────────────────────────────
   The section is tall; the stage inside it is sticky and exactly one viewport.
   Scroll distance through the section IS the playhead. */
/* 260vh, down from 420. The scrub still resolves every one of the 120 frames;
   it just costs the reader 2.2 screens instead of 4.2. The film was 26% of the
   page's height and 6% of its words. */
.film{position:relative;height:260vh;background:var(--g-900)}
.film__stick{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;
  display:grid;place-items:center}
.film__c,.film__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__poster{z-index:1;transition:opacity .4s linear}
.film__poster.is-off{opacity:0}
.film__c{z-index:2}
.film__scrim{position:absolute;inset:0;z-index:3;background:rgba(12,30,23,.22);pointer-events:none}
/* The title rides the paper plane like everything else — white type dropped
   straight onto the film was the one place this page broke its own system, and
   it ghosted over the picture on the way out. It leaves early and completely. */
.film__head{position:relative;z-index:4;text-align:center;
  background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.75rem,4vw,3rem);margin-inline:var(--s5);
  transform:translate3d(0,var(--fh,0),0);opacity:var(--fo,1)}
.film__head[hidden]{display:none}
.film__h{color:var(--ink);margin-bottom:var(--s4)}
.film__hint{display:inline-flex;align-items:center;gap:var(--s2);margin-inline:auto;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.film__dot{width:.5rem;height:.5rem;border-radius:var(--pill);background:var(--ochre);flex:none}

/* Captions ride the lifted-paper plane rather than sitting on a scrim. */
.film__cap{position:absolute;z-index:5;inset-inline-start:clamp(1.25rem,5vw,4rem);
  bottom:clamp(4.5rem,10vh,7rem);max-width:min(30ch,74vw);
  font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.35;
  background:var(--paper);color:var(--ink);padding:var(--s4) var(--s5);
  border-radius:var(--cut);box-shadow:var(--lift);
  opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none}
.film__cap.is-on{opacity:1;transform:translateY(0)}
.film__bar{position:absolute;z-index:5;inset-inline:0;bottom:0;height:4px;background:rgba(244,247,242,.2)}
.film__bar i{display:block;height:100%;width:100%;background:var(--ochre);
  transform-origin:right center;transform:scaleX(var(--fp,0))}

/* ── 5 · Why it doesn't hurt ──────────────────────── */

.method{background:var(--g-800);color:var(--on-dark);padding-block:clamp(4.5rem,10vw,8.5rem)}
.method .d2{color:var(--paper)}
.method__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.facts{display:grid;gap:var(--s5);margin-block:var(--s6)}
.facts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-items:baseline;
  padding-bottom:var(--s5);border-bottom:1px solid rgba(244,247,242,.16)}
.facts li:last-child{border-bottom:0;padding-bottom:0}
.facts b{font-family:'Secular',system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;color:var(--ochre);white-space:nowrap}
.facts p{color:var(--on-dark-2);max-width:40ch}
.method__end{font-size:var(--t-lede);color:var(--on-dark)}
.method__end b{color:var(--paper);font-weight:700}
.method__out{margin-top:var(--s5);padding-top:var(--s5);color:var(--on-dark-2);
  border-top:1px solid rgba(244,247,242,.16)}
.method__fig{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:var(--s5);margin:0}
.method__fig img{border-radius:4px}
.method__fig figcaption{margin-top:var(--s3);font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--ink-2);text-align:center}

/* ── 6 · Treatments ───────────────────────────────────────────────────── */
.prices{background:var(--cream);padding-block:clamp(4.5rem,10vw,8.5rem)}
.tlist{display:grid;gap:0;background:var(--paper);border-radius:var(--cut);
  box-shadow:var(--lift);overflow:hidden}
.t{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1rem,2.5vw,2rem);
  align-items:center;padding:clamp(1.25rem,2.6vw,1.9rem) clamp(1.25rem,3vw,2.25rem);
  border-bottom:1px solid rgba(20,38,31,.1)}
.t:last-child{border-bottom:0}
/* Sized to be decoded. A glyph too small to read is decoration, which is the
   one thing this page must not carry — the first build drew these into a 64×40
   box where the tooth occupied 37px and every one of them read as a light bulb. */
.g{width:clamp(3.6rem,5.4vw,5rem);height:auto;color:var(--g-700);flex:none;
  stroke-linecap:round;stroke-linejoin:round}
.t__tx p{font-size:var(--t-sm);color:var(--ink-2);margin-top:.2rem;max-width:44ch}
.t__p{font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.15rem,2vw,1.6rem);
  color:var(--ochre-t);white-space:nowrap;display:flex;align-items:baseline;gap:.1em}

/* ── The price, at the button ─────────────────────────────────────────────
   Both of these exist because the form used to say "בלי תשלום" eight screens
   above a ₪250 exam. The number now travels with every primary action. */
.hero__price{margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-2)}
.hero__price b{color:var(--ink);font-weight:700;white-space:nowrap}
.book__price{margin-top:var(--s5);font-size:var(--t-sm);color:var(--on-dark-2)}
.book__price b{color:var(--paper);font-weight:700;white-space:nowrap}

/* ── The standing invitation ──────────────────────────────────────────────
   Desktop had ~13 screens between the hero and the form with no way to act:
   the dock is mobile-only and the nav button is 14px tall. */
.cta{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  margin-top:clamp(2.5rem,5vw,4rem);text-align:center}
.cta span{font-size:var(--t-sm);color:var(--ink-2)}
.cta--on span{color:var(--on-dark-2)}

/* ── Urgency, from the price list ─────────────────────────────────────────
   No countdown, no "offer ends", no invented scarcity — the portfolio has
   spent that device twice already. Both figures are lifted verbatim from the
   table above this block; the only variable between them is time. */
.delay{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(.75rem,2vw,1.5rem);align-items:stretch;
  margin-top:clamp(2.5rem,5vw,3.5rem)}
.delay__row{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:var(--s2)}
.delay__k{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;color:var(--ochre-t)}
.delay__v{font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.1rem,1.8vw,1.4rem);
  line-height:1.25}
.delay__p{margin-top:auto;padding-top:var(--s3);
  font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.4rem,2.6vw,2.1rem);
  line-height:1;color:var(--ink);display:flex;align-items:baseline;gap:.1em}
.delay__row--bad{background:var(--g-800)}
.delay__row--bad .delay__k{color:var(--ochre)}
.delay__row--bad .delay__v{color:var(--on-dark)}
.delay__row--bad .delay__p{color:var(--paper)}
.delay__arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);color:var(--ink-2);padding-inline:var(--s2)}
.delay__arrow svg{width:2.5rem;height:1.5rem}
.delay__arrow span{font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;
  white-space:nowrap}
.delay__note{margin-top:var(--s5);color:var(--ink-2);max-width:62ch}
.delay__note b{color:var(--ink);font-weight:700}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Native <details>: works with JS off, keyboard-operable for free, and the
   browser handles the open/close state. */
/* Cream, not mint. §10 above it is mint, and the rule stated at the top of the
   equipment section cuts both ways: two mint bands in a row read as one section
   with a hole in the middle. This one is worse than the cream case it was
   written for, because neither band carries a picture — six collapsed pills
   under a tabbed panel, on one continuous ground, is 2.2 screens that scan as a
   single undifferentiated slab. Paper on cream is already this page's pairing
   at §6 and §8, so nothing new is introduced. */
.faq{background:var(--cream);padding-block:clamp(4rem,9vw,7rem)}
.qa{display:grid;gap:var(--s3);max-width:52rem}
.qa__i{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift-sm);
  overflow:hidden}
.qa__i summary{cursor:pointer;list-style:none;padding:clamp(1rem,2vw,1.35rem);
  display:flex;align-items:center;gap:var(--s4);
  font-family:'Secular',system-ui,sans-serif;font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.35}
.qa__i summary::-webkit-details-marker{display:none}
.qa__i summary::after{content:"";flex:none;margin-inline-start:auto;
  width:.7rem;height:.7rem;border-inline-end:2.4px solid var(--ochre-t);
  border-block-end:2.4px solid var(--ochre-t);rotate:-45deg;
  transition:rotate .2s var(--ease)}
.qa__i[open] summary::after{rotate:135deg}
.qa__i summary:hover{background:rgba(20,38,31,.035)}
.qa__i > p{padding:0 clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.35rem);
  color:var(--ink-2);max-width:60ch}

/* ── 7 · The doctor ───────────────────────────────────────────────────── */
.dr{background:var(--g-100);padding-block:clamp(4.5rem,10vw,8.5rem)}
.dr__in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.dr__fig{margin:0;background:var(--paper);border-radius:var(--cut);
  box-shadow:var(--lift);padding:var(--s4)}
.dr__fig img{border-radius:4px;width:100%;aspect-ratio:4/5;object-fit:cover}
.dr__fig figcaption{margin-top:var(--s3);font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--ink-2);text-align:center}
/* The admission is set apart by being a different PAPER, not by a coloured tab
   down one edge — that tab is the most recognisable tell of a generated
   interface, and the detector is right to flag it. Ochre-tinted stock reads as
   a note written on something else, which is what this passage is. */
.admit{margin-top:var(--s6);background:#F6EBD6;border-radius:var(--cut);
  box-shadow:var(--lift);padding:clamp(1.5rem,3vw,2.25rem)}
.admit__k{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
  color:var(--ochre-t);margin-bottom:var(--s3)}
.admit__q{font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.05rem,1.7vw,1.32rem);
  line-height:1.5;max-width:48ch}

/* ── 8 · Proof and place ──────────────────────────────────────────────── */
.place{background:var(--cream);padding-block:clamp(4.5rem,10vw,8.5rem)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s5)}
.q{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;gap:var(--s4)}
.q blockquote p{font-family:'Secular',system-ui,sans-serif;font-size:1.06rem;line-height:1.5}
.q cite{font-style:normal;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;
  color:var(--ochre-t);margin-top:auto}
.place__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:var(--s5);margin-top:clamp(2.5rem,5vw,4rem)}
.hours,.addr{background:var(--paper);border-radius:var(--cut);box-shadow:var(--lift);
  padding:clamp(1.4rem,2.6vw,2rem)}
.status{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
  font-size:var(--t-sm)}
.status__dot{width:.7rem;height:.7rem;border-radius:var(--pill);background:var(--ink-2);flex:none}
.status.is-open .status__dot{background:#2F7A4F}
.status.is-shut .status__dot{background:#9A3B22}
.hrs{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.hrs th,.hrs td{text-align:start;padding:.42rem 0;font-weight:400;color:var(--ink-2);
  border-bottom:1px solid rgba(20,38,31,.08)}
.hrs td{text-align:end}
.hrs tr:last-child th,.hrs tr:last-child td{border-bottom:0}
.hrs tr.is-today th,.hrs tr.is-today td{color:var(--ink);font-weight:700}
.addr__a{font-family:'Secular',system-ui,sans-serif;font-size:1.25rem;line-height:1.4;
  margin-block:var(--s4) var(--s3)}
.addr__n{font-size:var(--t-sm);color:var(--ink-2)}
.addr__b{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ── 9 · The action ───────────────────────────────────────────────────── */
.book{background:var(--g-800);color:var(--on-dark);padding-block:clamp(4.5rem,10vw,8.5rem)}
.book .d2{color:var(--paper)}
.book .lede{color:var(--on-dark-2)}
.book__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.book__alt{margin-top:var(--s6);font-size:var(--t-sm);color:var(--on-dark-2)}
.book__alt a{font-weight:700;color:var(--paper)}

/* The section is light-on-dark; the form is a paper sheet sitting inside it and
   must reset the inherited colour or every label, legend and chip renders
   near-white on near-white. It did. */
.form{padding:clamp(1.6rem,3.2vw,2.6rem);position:relative;color:var(--ink)}
.form .h3,.form legend,.form label{color:var(--ink)}
.form__prog{height:4px;background:rgba(20,38,31,.1);border-radius:var(--pill);
  overflow:hidden;margin-bottom:var(--s6)}
.form__prog i{display:block;height:100%;background:var(--ochre);
  transform-origin:right center;transform:scaleX(var(--p,.333));
  transition:transform .35s var(--ease)}
.fs{border:0;padding:0;margin:0;min-width:0}
.fs__l{font-family:'Secular',system-ui,sans-serif;font-size:clamp(1.15rem,1.9vw,1.45rem);
  line-height:1.35;display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);padding:0}
.fs__n{display:grid;place-items:center;width:1.85rem;height:1.85rem;flex:none;
  border-radius:var(--pill);background:var(--ochre);color:var(--ink);
  font-size:.9rem;font-family:'Assistant',sans-serif;font-weight:700}
.fs__b{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:block;padding:.7rem 1.1rem;border-radius:var(--pill);
  border:2px solid rgba(20,38,31,.2);font-size:var(--t-sm);font-weight:600;
  transition:background-color .16s var(--ease),border-color .16s var(--ease)}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--g-800);border-color:var(--g-800);color:var(--paper)}
.chip input:focus-visible+span{outline:3px solid var(--ochre-t);outline-offset:3px}
.fld{margin-bottom:var(--s5)}
.fld label{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:var(--s2)}
.fld input{width:100%;padding:.9rem 1rem;border-radius:8px;background:var(--g-100);
  border:2px solid rgba(20,38,31,.16)}
.fld input:focus{outline:0;border-color:var(--g-800);background:var(--paper)}
.fld input[aria-invalid="true"]{border-color:#9A3B22}
.err{font-size:var(--t-xs);color:#8C3520;margin-top:var(--s2);font-weight:600}
.form__fine{font-size:var(--t-xs);color:var(--ink-2);margin-top:var(--s5)}
.done{text-align:center;padding-block:var(--s6)}
.done__m{width:3.4rem;height:3.4rem;color:var(--g-700);margin:0 auto var(--s4)}
.done p{margin-inline:auto;margin-bottom:var(--s4)}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--g-900);color:var(--on-dark-2);padding-block:clamp(3rem,6vw,4.5rem)}
.foot__in{display:grid;gap:var(--s5)}
.foot__b{font-family:'Secular',system-ui,sans-serif;font-size:1.15rem;color:var(--paper)}
.foot__c p{font-size:var(--t-sm)}
.foot__c a{font-weight:700;color:var(--paper)}
.foot__d{font-size:var(--t-xs);line-height:1.6;max-width:62ch;
  padding-top:var(--s5);border-top:1px solid rgba(244,247,242,.14)}
.foot__r{font-size:var(--t-sm);font-weight:700;color:var(--paper);text-decoration:none}
.foot__r:hover{color:var(--ochre)}

/* ── Back to the parent site ──────────────────────────────────────────── */
.ribbon{position:fixed;z-index:45;inset-inline-start:var(--s5);bottom:var(--s5);
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--t-xs);font-weight:700;text-decoration:none;color:var(--ink);
  background:var(--paper);padding:.6rem 1rem;border-radius:var(--pill);box-shadow:var(--lift);
  white-space:nowrap}
.ribbon:hover{background:var(--ochre)}

/* ── Mobile dock ──────────────────────────────────────────────────────── */
.dock{position:fixed;z-index:44;inset-inline:0;bottom:0;display:none;gap:var(--s3);
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--paper);box-shadow:0 -6px 20px rgba(18,46,35,.16);
  visibility:hidden;transform:translateY(100%);transition:transform .3s var(--ease),visibility .3s}
.dock.is-on{visibility:visible;transform:translateY(0)}
.dock .btn--go{flex:1}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .nav__links{display:none}
  .nav__cta{margin-inline-start:auto}
  .ribbon{display:none}
  .dock{display:flex}
  .method__in,.book__in,.dr__in{grid-template-columns:minmax(0,1fr)}
  .dr__fig{max-width:22rem}
}
@media (max-width:760px){
  /* The two prices stack, and the arrow turns to point down the page. */
  .delay{grid-template-columns:minmax(0,1fr)}
  .delay__arrow{flex-direction:row;padding-block:var(--s2)}
  .delay__arrow svg{rotate:-90deg}
  /* One at a time, picture above words. */
  .tl__p{grid-template-columns:minmax(0,1fr)}
  .n{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  /* The comparison keeps its three columns and scrolls rather than restacking:
     a comparison whose two sides stop sitting side by side is no longer one. */
  .cmp{display:block;overflow-x:auto;white-space:nowrap}
  .cmp th,.cmp td{white-space:normal;min-width:7.5rem}
}
@media (max-width:860px){
  /* Below this width the room cannot hold type: the sheet would cover the
     picture entirely. So the hero restacks — picture on top, paper below —
     and the lamp keeps its job by overlapping the seam between them. */
  .hero{min-height:auto;display:block}
  .hero__room{position:relative;inset:auto;height:52svh}
  .hero__room img{height:100%}
  .hero__wrap{display:block;padding:0 0 var(--s7)}
  .hero__sheet{margin:-14% var(--s4) 0;padding:var(--s6) var(--s5)}
  /* Restacked, the lamp keeps its job by crossing the seam between the picture
     and the sheet instead of the sheet's side edge. */
  .hero__lamp{width:52vw;right:auto;left:0;top:26%}
  .hero__scroll{display:none}
  .hero__act .btn{width:100%}
  .t{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s3)}
  .t__p{grid-column:2;justify-content:start}
  .film{height:230vh}
}
@media (max-width:520px){
  .truth__n{flex-direction:column;gap:var(--s2)}
  .fs__b{flex-direction:column}
  .fs__b .btn{width:100%}
}

/* ── Motion off ───────────────────────────────────────────────────────────
   Everything the motion system does is neutralised, including the film: it
   becomes a still, captions become a plain stacked list, and no scroll
   listener writes a transform. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .hero__room img,.hero__sheet,.hero__lamp{transform:none!important}
  /* Nothing rises and nothing counts: every element is simply present, and
     main.js never attaches the observer or runs the tally. */
  [data-rise]{opacity:1!important;transform:none!important}
  .film{height:auto}
  .film__stick{position:static;height:auto;aspect-ratio:16/9}
  .film__cap{position:static;opacity:1;transform:none;max-width:none;
    margin:var(--s4) auto 0}
  .film__bar{display:none}
  .hero__scroll{animation:none}
}