/* Extracted from the approved v11 mockup — do not hand-edit the tokens without re-running
   the contrast gate (scripts/check-contrast.mjs). Palette verified WCAG 2.0 AA, 12/12. */
@font-face{font-family:'Rubik';src:url(fonts/rubik-he.woff2) format('woff2');font-weight:100 900;font-display:swap;
 unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Rubik';src:url(fonts/rubik-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;
 unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
/* display candidates */
@font-face{font-family:'F1';src:url(fonts/suez-he.woff2) format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'F1';src:url(fonts/suez-latin.woff2) format('woff2');font-weight:400;font-display:swap;
 unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'F2';src:url(fonts/secular-he.woff2) format('woff2');font-weight:400;font-display:swap;}

/* ═══════════════════════════════════════════════════════════
   THE SITE
   ═══════════════════════════════════════════════════════════ */
:root{--sky:#e9f4f4;--cream:#fdfaf3;--sand:#f6eddd;--ink:#231f18;--mid:#5f574a;--mute:#726b5f;
 --hair:#ece3d3;--teal:#0d9488;--teal-text:#0b8176;--teal-btn:#0c857a;--deep:#0f766e;--sun:#e8a34d;--sun-text:#9b6d34;--sun-lg:#be863f;--coral:#dd8a70;
 }
/* font-family was scoped to .site in the mockup, so the footer and anything else outside it
   fell back to the browser default serif. */
body{margin:0;background:var(--cream);color:var(--ink);
 font-family:'Rubik',"Segoe UI",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
/* 🔴 `min-width:700px` REMOVED. It came from the mockup, where it kept the desktop layout
   intact inside the artifact frame. Shipped, it made the real site horizontally scrollable on
   every phone — and most traffic to an Israeli consumer site is mobile. It also works against
   WCAG 1.4.4 (resize text), because zooming to 200% then forces sideways scrolling. */
.site{font-family:'Rubik',"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);}
.site *{box-sizing:border-box;}
.site .nav{display:flex;align-items:center;gap:30px;padding:19px 50px;position:relative;z-index:6;}
.site .mark{font-weight:700;font-size:1.02rem;}
.site .lk{display:flex;gap:25px;font-size:.85rem;color:var(--mid);}
.site .lk a:hover{color:var(--deep);}
.site .sp{flex:1;}
.site .ghost{font-size:.82rem;font-weight:500;color:var(--mid);}
.site .pill{font-size:.82rem;font-weight:500;padding:9px 20px;border-radius:999px;background:var(--teal-btn);
 color:#fff;transition:transform .2s,box-shadow .2s;}
.site .pill:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(13,148,136,.32);}

/* ── hero ── */
.hero{position:relative;background:linear-gradient(180deg,var(--sky) 0%,#f2f7f1 46%,var(--cream) 100%);
 padding:40px 50px 14px;overflow:hidden;}
/* Centred, not tucked behind the copy. `left:50%` + translateX(-50%) centres it the same
   way in RTL and LTR, unlike an inset-inline offset which anchors it to the text side. */
.compass{position:absolute;top:-46px;left:50%;transform:translateX(-50%);
 width:470px;height:470px;opacity:.085;pointer-events:none;z-index:1;}
.compass .spin{transform-origin:250px 250px;animation:turn 150s linear infinite;}
@keyframes turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero .copy{position:relative;z-index:4;max-width:40ch;}
.hero .kick{font-size:.72rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 14px;}
.hero h1{font-family:'F1',Georgia,serif;font-weight:400;font-size:clamp(2.4rem,5.4vw,3.9rem);
 line-height:1.12;margin:0;white-space:nowrap;}
.hero h1 em{font-style:normal;color:var(--deep);}
.hero .sub{font-size:1.04rem;color:var(--mid);margin:18px 0 22px;max-width:38ch;line-height:1.68;}
.hero .cta{display:inline-block;background:var(--ink);color:#fff;font-weight:500;font-size:.92rem;
 padding:13px 30px;border-radius:999px;transition:transform .2s,box-shadow .2s;}
.hero .cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(35,31,24,.24);}
.pathwrap{position:relative;margin-top:2px;z-index:3;}
.pathwrap svg.road{width:100%;height:auto;display:block;}
.wp{position:absolute;text-align:center;width:154px;opacity:0;transition:opacity .5s ease;}
.wp.on{opacity:1;}
.wp .yr{font-size:.68rem;font-weight:600;letter-spacing:.08em;color:var(--deep);}
.wp .ev{font-size:.89rem;font-weight:500;color:var(--ink);margin-top:2px;line-height:1.32;}
.wp.start .yr{color:var(--coral);} .wp.end .yr{color:#9d6821;}
.cloud{animation:drift 46s linear infinite;}
.cloud.b{animation-duration:64s;animation-delay:-14s;}
.cloud.c{animation-duration:78s;animation-delay:-30s;}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(90px)}}
.thesis{position:relative;z-index:4;margin:6px 0 0;padding-bottom:30px;text-align:center;
 font-family:'F1',Georgia,serif;font-weight:400;font-size:1.38rem;color:var(--ink);}
.thesis span{color:var(--deep);}
.thesis small{display:block;font-family:'Rubik',sans-serif;font-size:.75rem;color:var(--mute);margin-top:9px;}

/* ── SECTION 2 — a page of its own ── */
.alone{background:var(--sand);padding:86px 60px 90px;min-height:620px;
 display:flex;flex-direction:column;justify-content:center;}
.alone .lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 12px;}
.alone h2{font-family:'F1',serif;font-weight:400;font-size:2.9rem;margin:0 0 10px;line-height:1.2;}
.alone .s{color:var(--mid);margin:0 0 44px;font-size:1.1rem;max-width:52ch;}
.srow{display:flex;align-items:center;gap:34px;padding:26px 0;border-top:1px solid #e3d7c0;
 opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.srow.on{opacity:1;transform:none;}
.srow:last-child{border-bottom:1px solid #e3d7c0;}
/* first flex child = the RIGHT-hand side in RTL — the number leads every row */
.srow .n{font-family:'F1',serif;font-weight:400;font-size:4.6rem;line-height:1;color:var(--deep);
 width:190px;flex:none;direction:ltr;text-align:start;font-variant-numeric:tabular-nums;}
.srow .txt{font-size:1.32rem;color:var(--ink);line-height:1.5;}
.srow .txt small{display:block;font-size:.9rem;color:var(--mute);margin-top:5px;}
.alone .src{margin:34px 0 0;font-size:.76rem;color:var(--mute);}

/* ── SECTION 3 — the six meetings, in full, in its own voice ── */
.six{background:#fff;padding:78px 60px 84px;}
.six .lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 12px;}
.six h2{font-family:'F2',sans-serif;font-weight:400;font-size:2.7rem;margin:0 0 8px;line-height:1.2;}
.six .intro{color:var(--mid);font-size:1.05rem;max-width:54ch;margin:0 0 42px;}
/* ── the stepper: the road again, but as a control you can walk ── */
.stepper{margin:0 0 34px;}
.strail{position:relative;height:2px;background:var(--hair);border-radius:2px;margin:0 26px 0 26px;}
.sfill{position:absolute;inset-inline-start:0;top:0;height:2px;border-radius:2px;
 background:linear-gradient(90deg,var(--sun),var(--teal));width:0;
 transition:width .55s cubic-bezier(.22,1,.36,1);}
/* 🔴 The stops must sit ABOVE the rail. `.strail` is position:relative, so it paints over
   any non-positioned sibling that follows it — the line ran straight through the numbers.
   Positioning the stops and lifting them is the fix. Third time this exact stacking trap
   has bitten in this project. */
.stops{position:relative;z-index:2;display:flex;justify-content:space-between;margin-top:-15px;}
.stop{appearance:none;background:none;border:0;padding:0;cursor:pointer;
 display:flex;flex-direction:column;align-items:center;gap:9px;font-family:inherit;}
.stop .sn{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--hair);
 color:var(--mute);font-family:'F2',sans-serif;font-size:.78rem;display:flex;align-items:center;
 justify-content:center;direction:ltr;font-variant-numeric:tabular-nums;
 transition:border-color .4s,color .4s,transform .4s,background .4s;}
.stop .sl{font-size:.78rem;font-weight:500;color:var(--mute);transition:color .4s;white-space:nowrap;}
.stop:hover .sn{border-color:#bfd8d2;}
.stop[aria-selected="true"] .sn{border-color:var(--teal);color:#fff;background:var(--teal-btn);transform:scale(1.14);}
.stop[aria-selected="true"] .sl{color:var(--ink);font-weight:600;}
.stop.done .sn{border-color:var(--sun);color:var(--sun-text);}

.panels{position:relative;min-height:238px;}
.panel{display:none;}
.panel.on{display:grid;grid-template-columns:1.05fr 1.25fr;gap:34px;align-items:start;}
.panel.on .pl,.panel.on .pr{animation:pin .5s cubic-bezier(.22,1,.36,1) both;}
.panel.on .pr{animation-delay:.09s;}
@keyframes pin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.panel .idx{font-family:'F2',sans-serif;font-size:3.4rem;line-height:.95;color:var(--sun-lg);
 direction:ltr;text-align:start;font-variant-numeric:tabular-nums;margin-bottom:10px;}
.panel .ttl{font-family:'F2',sans-serif;font-weight:400;font-size:1.85rem;margin:0 0 10px;line-height:1.2;}
.panel .qq{font-size:1.05rem;color:var(--deep);margin:0;line-height:1.5;}
.panel ul{margin:0;padding:0;list-style:none;}
.panel li{font-size:.96rem;color:var(--mid);line-height:1.5;padding:9px 0;
 display:flex;gap:11px;align-items:flex-start;border-bottom:1px solid var(--hair);}
.panel li:last-child{border-bottom:0;}
.panel li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
 flex:none;margin-top:8px;opacity:.55;}
.panel li b{color:var(--ink);font-weight:600;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;top:-60px;inset-inline-start:16px;z-index:50;background:var(--ink);
 color:#fff;padding:10px 18px;border-radius:0 0 10px 10px;font-size:.88rem;font-weight:500;
 transition:top .2s;}
.skip:focus{top:0;}
.autorow{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap;}
.pausebtn{appearance:none;background:#fff;border:1px solid var(--hair);border-radius:999px;
 padding:8px 16px;font-family:inherit;font-size:.82rem;color:var(--mid);cursor:pointer;
 display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,color .2s;}
.pausebtn:hover{border-color:#bfd8d2;color:var(--ink);}
.pausebtn .pi{width:9px;height:11px;flex:none;
 border-inline-start:3px solid currentColor;border-inline-end:3px solid currentColor;}
.pausebtn[aria-pressed="true"] .pi{border:0;width:0;height:0;
 border-top:6px solid transparent;border-bottom:6px solid transparent;
 border-inline-end:9px solid currentColor;}
.autohint{margin:0;font-size:.76rem;color:var(--mute);}

/* ── עלי ── */
.about{background:var(--sand);padding:76px 60px 72px;}
.aboutgrid{display:grid;grid-template-columns:330px 1fr;gap:48px;align-items:center;}
.portrait{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:20px;
 background:#e6dcc8;box-shadow:0 18px 40px rgba(35,31,24,.16);}
/* The source photo carries black pillar-bars (~13.5% each side). Scaling to 137% and
   centring pushes them outside the frame without distorting the image; the negative
   margin lifts the face to the optical centre. */
.portrait img{position:absolute;left:50%;top:0;transform:translateX(-50%);
 width:137%;height:auto;margin-top:-6%;display:block;}
.about .lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 12px;}
.about h2{font-family:'F1',serif;font-weight:400;font-size:2.5rem;margin:0 0 6px;line-height:1.15;}
.about .role{color:var(--deep);font-size:1rem;margin:0 0 20px;font-weight:500;}
.about .role span{color:var(--mute);}
/* The pull quote is the thesis of the whole page in her own words — it gets the display face
   and a rule, not body treatment. */
.pull{font-family:'F1',serif;font-weight:400;font-size:1.42rem;line-height:1.55;color:var(--ink);
 border-inline-start:3px solid var(--sun);padding-inline-start:20px;margin:0 0 22px;max-width:46ch;}
.about p.bio{font-size:1.02rem;color:var(--mid);line-height:1.75;margin:0;max-width:52ch;}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px;
 border-top:1px solid #e3d7c0;padding-top:34px;}
.pillar h3{font-family:'F2',sans-serif;font-weight:400;font-size:1.22rem;margin:0 0 10px;line-height:1.3;}
.pillar p{font-size:.94rem;color:var(--mid);line-height:1.65;margin:0 0 10px;}
.pillar ul{list-style:none;margin:0;padding:0;}
.pillar li{font-size:.92rem;color:var(--mid);line-height:1.5;padding:5px 0;display:flex;gap:9px;
 align-items:flex-start;}
.pillar li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);
 flex:none;margin-top:8px;opacity:.6;}
.pillar b{color:var(--ink);font-weight:600;}
.legal{margin:34px 0 0;font-size:.78rem;line-height:1.65;color:var(--mute);max-width:92ch;
 border-top:1px solid #e3d7c0;padding-top:18px;}
.legal b{color:var(--mid);font-weight:600;}

.calm{background:linear-gradient(180deg,var(--cream) 0%,#eef6f3 100%);padding:70px 50px 76px;text-align:center;}
.calm .lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 13px;}
.calm h2{font-family:'F1',serif;font-weight:400;font-size:2.7rem;margin:0;}
.calm p{margin:15px auto 26px;max-width:42ch;color:var(--mid);font-size:1.02rem;line-height:1.7;}
.calm .cta{display:inline-block;background:var(--ink);color:#fff;font-weight:500;font-size:.95rem;
 padding:14px 34px;border-radius:999px;transition:transform .2s,box-shadow .2s;}
.calm .cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(35,31,24,.22);}
.calm .fine{margin:16px 0 0;font-size:.79rem;color:var(--mute);}

@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important;}
 .wp,.srow,.mt{opacity:1!important;transform:none!important;}}
@media (max-width:900px){.mt{grid-template-columns:90px 1fr;} .mt ul{grid-column:2;}}

/* ═══════════════════════════════════════════════════════════════════
   Pages beyond the landing page: forms, login, 404, statement, footer.
   Same tokens — --teal/--sun stay FILL-only, text uses the -text/-btn
   variants. Re-run scripts/check-contrast.mjs after touching a colour.
   ═══════════════════════════════════════════════════════════════════ */

/* ── forms ── */
.leadform{max-width:520px;margin:0 auto;text-align:start;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.88rem;font-weight:500;color:var(--ink);margin-bottom:6px;}
.field .req{color:#9d6821;}
.field .opt{color:var(--mute);font-weight:400;font-size:.82rem;}
.field input,.field textarea{width:100%;padding:11px 14px;font-family:inherit;font-size:.95rem;
 color:var(--ink);background:#fff;border:1px solid #d9d2c3;border-radius:10px;}
.field input:focus,.field textarea:focus{outline:2px solid var(--deep);outline-offset:1px;
 border-color:var(--deep);}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#a3352a;}
.err{margin:6px 0 0;font-size:.83rem;color:#a3352a;}
.formstatus{margin:14px 0 0;font-size:.9rem;color:var(--mid);min-height:1.2em;}
.leadform .cta{border:0;font-family:inherit;cursor:pointer;width:100%;}
.leadform .cta:disabled{opacity:.6;cursor:default;}
/* Honeypot — hidden by CLIPPING, never by `left:-9999px`.
   🔴 In an RTL document a negative `left` overflows LEFTWARD: it pushed the document's
   scrollWidth to ~11,900px, moved the scroll origin, and rendered the entire page as a blank
   white viewport. Nothing in the markup or the DOM looked wrong — only a browser showed it.
   The clip technique keeps the field in the DOM and fillable by bots while adding no geometry;
   `aria-hidden` on the wrapper keeps it away from screen readers. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ── login / 404 ── */
.loginwrap{min-height:62vh;display:flex;align-items:center;justify-content:center;
 padding:60px 24px 80px;background:linear-gradient(180deg,var(--sky) 0%,var(--cream) 60%);}
.logincard{background:#fff;border:1px solid var(--hair);border-radius:20px;
 padding:38px 34px;max-width:480px;width:100%;box-shadow:0 16px 40px rgba(35,31,24,.08);}
.logincard .lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 12px;}
.logincard h1{font-family:'F1',Georgia,serif;font-weight:400;font-size:2rem;margin:0 0 12px;line-height:1.2;}
.loginlede{color:var(--mid);font-size:1rem;line-height:1.7;margin:0 0 24px;}
.loginnote{margin:22px 0 0;font-size:.85rem;color:var(--mute);}
.loginnote a{color:var(--deep);text-decoration:underline;}
.logincard .cta{border:0;font-family:inherit;cursor:pointer;width:100%;text-align:center;}
a.cta{display:inline-block;text-align:center;}

/* ── accessibility statement ── */
.docwrap{max-width:760px;margin:0 auto;padding:60px 24px 80px;}
.docwrap .lbl{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--deep);margin:0 0 12px;}
.docwrap h1{font-family:'F1',Georgia,serif;font-weight:400;font-size:2.3rem;margin:0 0 24px;}
.docwrap h2{font-family:'F2',sans-serif;font-weight:400;font-size:1.25rem;margin:30px 0 10px;}
.docwrap p,.docwrap li{color:var(--mid);font-size:1rem;line-height:1.75;}
.docwrap ul{padding-inline-start:20px;}
.docwrap a{color:var(--deep);text-decoration:underline;}
/* Unmistakably a draft — these must not ship as if they were real statements */
.tofill{border:1.5px dashed #9d6821;background:rgba(232,163,77,.08);border-radius:10px;
 padding:14px 16px;color:var(--ink)!important;}

/* ── footer ── */
.sitefoot{background:var(--ink);color:#f3efe6;padding:32px 0;}
.footinner{max-width:1100px;margin:0 auto;padding:0 50px;display:flex;align-items:center;
 gap:24px;flex-wrap:wrap;}
.footmark{margin:0;font-weight:700;font-size:.95rem;flex:1;min-width:180px;}
.footlinks{display:flex;gap:22px;flex-wrap:wrap;}
.footlinks a{font-size:.86rem;color:#cfc6b6;}
.footlinks a:hover{color:#fff;text-decoration:underline;}

@media (max-width:700px){
  .footinner{padding:0 24px;}
  .site .nav{padding:16px 24px;flex-wrap:wrap;gap:14px;}
  .site .lk{display:none;}
}

/* ── link + focus reset ──────────────────────────────────────────────
   🔴 Lifted from the mockup's shell, which was deliberately NOT extracted — without it every
   nav item, pill and CTA rendered with the browser's default underline. Underlines are kept
   where a link genuinely needs to be identifiable as one (.docwrap, .loginnote, footer hover),
   and removed where the control already reads as a control. */
.site a{color:inherit;text-decoration:none;}
.site .footlinks a,.sitefoot a{text-decoration:none;}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:3px;}
/* on the dark footer the teal outline is too low-contrast to see */
.sitefoot :focus-visible{outline-color:#f3efe6;}

/* Base control styles. The extracted mockup only ever scoped these as `.hero .cta` and
   `.calm .cta`, so the login and 404 buttons rendered as unstyled grey boxes. */
.cta{display:inline-block;background:var(--ink);color:#fff;font-weight:500;font-size:.95rem;
 padding:13px 30px;border-radius:999px;text-align:center;
 transition:transform .2s,box-shadow .2s;}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(35,31,24,.24);}

/* ── mobile ─────────────────────────────────────────────────────────
   The mockup was only ever viewed at desktop width. These are the rules that
   make it usable on a phone, which is where most of this traffic will land. */
@media (max-width:760px){
  .site .nav{padding:14px 20px;gap:14px;}
  .site .lk{display:none;}                 /* four anchors is not a mobile nav */
  .hero{padding:28px 20px 10px;}
  .hero .copy{max-width:none;}
  .hero h1{white-space:normal;}            /* one line is a desktop nicety, not a rule */
  .compass{width:300px;height:300px;top:-10px;opacity:.06;}
  .wp{width:110px;}
  .wp .ev{font-size:.75rem;}
  .thesis{font-size:1.05rem;padding-bottom:22px;}

  .alone{padding:48px 20px 52px;min-height:0;}
  .alone h2{font-size:1.9rem;}
  .srow{gap:16px;padding:20px 0;align-items:flex-start;}
  .srow .n{font-size:2.9rem;width:auto;min-width:104px;}
  .srow .txt{font-size:1.02rem;}

  .six{padding:48px 20px 54px;}
  .six h2{font-size:1.8rem;}
  /* the stepper scrolls sideways INSIDE its own strip rather than widening the page */
  .stepper{overflow-x:auto;padding-bottom:6px;}
  .stops{min-width:520px;}
  .strail{min-width:520px;}
  .panel.on{grid-template-columns:1fr;gap:18px;}
  .panels{min-height:0;}

  .about{padding:48px 20px 52px;}
  .aboutgrid{grid-template-columns:1fr;gap:26px;}
  .portrait{max-width:260px;}
  .about h2{font-size:1.9rem;}
  .pull{font-size:1.15rem;}
  .pillars{grid-template-columns:1fr;gap:24px;margin-top:32px;}

  .calm{padding:48px 20px 56px;}
  .calm h2{font-size:2rem;}
  .loginwrap{padding:36px 18px 56px;}
  .logincard{padding:26px 22px;}
  .docwrap{padding:40px 20px 60px;}
  .footinner{padding:0 20px;}
}

/* Nothing may push the page sideways — the honeypot already did once. */
html,body{overflow-x:hidden;}