/* ══════════════════════════════════════════════════════════════════
   תפריט נגישות — accessibility menu
   Liad Web Design

   Israeli law (תקנות שוויון זכויות לאנשים עם מוגבלות (התאמות נגישות
   לשירות), תשע"ג-2013, and ת"י 5568) requires the SITE to be accessible;
   a widget is not a substitute for that and cannot make an inaccessible
   page compliant. This one is a set of real user preferences on top of a
   page that already ships semantic landmarks, a skip link, visible focus,
   full keyboard operation and a reduced-motion path — plus the visible
   entry point and the link to the accessibility statement that the
   regulations do expect a visitor to be able to find.

   Loaded AFTER styles.css: the modes below are overrides by design.
   Self-contained — every token falls back, so this file and a11y.js can
   drop onto a demo that has a palette of its own.
   ══════════════════════════════════════════════════════════════════ */

.a11y{
  --a-ink:var(--ink,#0B0B0C);
  --a-ink-2:var(--ink-2,#45423C);
  --a-ink-3:var(--ink-3,#67635C);
  --a-bone:var(--bone,#F7F6F3);
  --a-cu:var(--cu,#9A4E18);
  --a-rule:var(--rule,#E4E1D9);
  --a-sans:var(--sans,system-ui,-apple-system,'Segoe UI',Arial,sans-serif);
  --a-r:var(--r4,30px);
  --a-r2:var(--r2,16px);

  position:fixed;z-index:150;
  inset-block-end:calc(20px + env(safe-area-inset-bottom));
  inset-inline-start:20px;
  font-family:var(--a-sans);
  direction:rtl;
  /* the wrapper is a positioning frame only — it must never eat clicks
     on the page behind the button */
  pointer-events:none;
}
.a11y > *{pointer-events:auto}

/* the sticky WhatsApp bar owns the bottom of the viewport below 1000px,
   so the button steps above it rather than sitting on it */
@media (max-width:999px){
  .a11y{inset-block-end:calc(84px + env(safe-area-inset-bottom));inset-inline-start:12px}
}

/* ── trigger ────────────────────────────────────────────────────── */
.a11y__btn{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--a-cu);color:#fff;
  box-shadow:0 1px 2px rgba(11,11,12,.06), 0 10px 26px rgba(11,11,12,.16);
  transition:transform .18s var(--ease-out,cubic-bezier(.16,1,.3,1)),box-shadow .3s ease-out;
}
.a11y__btn svg{width:28px;height:28px}
.a11y__btn:hover{transform:scale(1.06)}
.a11y__btn:active{transform:scale(.95)}
@media (max-width:999px){.a11y__btn{width:48px;height:48px}.a11y__btn svg{width:25px;height:25px}}

/* ── panel ──────────────────────────────────────────────────────── */
.a11y__panel{
  position:absolute;inset-block-end:calc(100% + 12px);inset-inline-start:0;
  width:min(340px,calc(100vw - 24px));
  max-height:min(600px,calc(100dvh - 130px));
  overflow-y:auto;overscroll-behavior:contain;
  padding:16px;border-radius:var(--a-r);
  background:var(--a-bone);
  border:1px solid var(--a-rule);
  box-shadow:0 2px 4px rgba(11,11,12,.05), 0 18px 44px rgba(11,11,12,.12), 0 44px 90px rgba(11,11,12,.09);
  color:var(--a-ink);
  transform-origin:0 100%;
  opacity:0;transform:translateY(10px) scale(.97);visibility:hidden;
  transition:opacity .24s ease-out,transform .32s var(--ease-out,cubic-bezier(.16,1,.3,1)),visibility 0s .32s;
}
.a11y__panel.is-open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.a11y__panel:focus{outline:none}

.a11y__head{display:flex;align-items:center;gap:10px;padding-block-end:12px;border-block-end:1px solid var(--a-rule)}
.a11y__title{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;margin-inline-end:auto}
.a11y__x{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  color:var(--a-ink-2);background:rgba(11,11,12,.05);
}
.a11y__x svg{width:16px;height:16px}
.a11y__x:hover{background:rgba(11,11,12,.1)}

.a11y__group{padding-block:13px;border-block-end:1px solid var(--a-rule)}
.a11y__lbl{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.13em;color:var(--a-ink-3);margin-block-end:9px}

/* text size stepper */
.a11y__step{display:flex;align-items:center;gap:8px}
.a11y__step button{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:rgba(11,11,12,.05);color:var(--a-ink);font-size:1.25rem;font-weight:700;line-height:1;
}
.a11y__step button:hover:not(:disabled){background:rgba(11,11,12,.1)}
.a11y__step button:disabled{opacity:.35;cursor:default}
.a11y__val{
  flex:1;height:42px;display:grid;place-items:center;border-radius:12px;
  background:rgba(11,11,12,.04);
  font-variant-numeric:tabular-nums;font-size:.875rem;font-weight:700;
  font-family:var(--mono,ui-monospace,monospace);direction:ltr;
}

/* Toggle tiles. Icon INLINE, not stacked: stacked tiles ran the panel past
   the fold on a 900px viewport and buried the reset and the statement link,
   which are the two things a visitor is most likely to have come for. */
.a11y__tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.a11y__tile{
  display:flex;flex-direction:row;align-items:center;gap:8px;
  min-height:46px;padding:8px 10px;border-radius:12px;
  background:rgba(11,11,12,.04);border:1px solid transparent;
  font-size:.78125rem;font-weight:600;line-height:1.2;text-align:start;color:var(--a-ink);
  transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out;
}
.a11y__tile svg{width:18px;height:18px;flex:none;color:var(--a-ink-3);transition:color .2s ease-out}
.a11y__tile:hover{background:rgba(11,11,12,.08)}
.a11y__tile[aria-pressed="true"]{background:var(--a-cu);border-color:var(--a-cu);color:#fff}
.a11y__tile[aria-pressed="true"] svg{color:#fff}
.a11y__tile[aria-pressed="true"]:hover{background:var(--a-cu)}

.a11y__foot{padding-block-start:13px;display:grid;gap:9px}
.a11y__reset{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;border-radius:var(--a-r2);
  background:rgba(11,11,12,.05);font-size:.8125rem;font-weight:600;color:var(--a-ink);
}
.a11y__reset:hover{background:rgba(11,11,12,.1)}
.a11y__reset svg{width:16px;height:16px}
.a11y__links{display:grid;gap:2px;font-size:.8125rem}
.a11y__links a{
  display:inline-flex;align-items:center;gap:6px;padding-block:5px;
  color:var(--a-cu);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.a11y__links svg{width:13px;height:13px}

/* the click-away layer. Transparent on purpose: the panel is small and the
   page behind it stays readable — a scrim would be theatre. */
.a11y__veil{position:fixed;inset:0;z-index:149;display:none}
.a11y__veil.is-open{display:block}

/* ══════════════════════════════════════════════════════════════════
   MODES — applied to <html> by a11y.js and restored from localStorage
   ══════════════════════════════════════════════════════════════════ */

/* ── high contrast ──────────────────────────────────────────────────
   Black ground, white type, one yellow for every accent. The glass
   material cannot survive here: translucency IS low contrast, so the
   blur radius goes to zero and every surface becomes opaque with a
   drawn edge. */
html.a11y-contrast{
  --bone:#000;--bone-2:#000;
  --ink:#fff;--ink-2:#fff;--ink-3:#fff;
  --rule:#767676;--rule-2:#8f8f8f;
  --cu:#FFD84D;--cu-deep:#FFE680;--cu-lift:#FFD84D;--cu-soft:rgba(255,216,77,.16);
  --on-ink:#fff;--on-ink-2:#fff;--on-ink-3:#fff;--rule-ink:#8f8f8f;
  --on-cu:#000;--on-cu-2:#000;--rule-cu:rgba(0,0,0,.5);
  --glass:#000;--glass-thick:#000;--glass-edge:#fff;--glass-line:#fff;
  --glass-ink:#000;--glass-ink-edge:#fff;--glass-cu:rgba(0,0,0,.13);--glass-cu-edge:#000;
  --blur:0px;--blur-lg:0px;
  --sh-1:none;--sh-2:none;--sh-3:none;
  background:#000;
}
html.a11y-contrast body{background:#000;color:#fff}
html.a11y-contrast .ambient{display:none}
/* the ink slab is now the same black as the page, so it needs a drawn edge
   to still read as an inset slab rather than a hole */
html.a11y-contrast .sec--ink{background:#000;outline:2px solid #fff;outline-offset:-2px}
/* the copper plate becomes the single yellow field on the page: black on
   #FFD84D is 13.5:1 */
html.a11y-contrast .sec--cu{background:#FFD84D;color:#000;outline:2px solid #fff;outline-offset:-2px}
/* both marker pills hardcode their tint, so neither follows the token swap */
html.a11y-contrast .sec--ink .marker{color:#FFD84D;background:rgba(255,216,77,.14)}
html.a11y-contrast .sec--ink .marker::before{background:#FFD84D}
html.a11y-contrast .sec--cu .marker{color:#000;background:rgba(0,0,0,.14)}
html.a11y-contrast .sec--cu .marker::before{background:#000}
html.a11y-contrast .sec--cu :focus-visible{outline-color:#000}
html.a11y-contrast .btn--cu,html.a11y-contrast .btn--bone{background:#FFD84D;color:#000;border-color:#fff}
html.a11y-contrast .btn--cu:hover,html.a11y-contrast .btn--cu:focus-visible{background:#FFE680;color:#000}
html.a11y-contrast .btn--ink,
html.a11y-contrast .btn--glass,
html.a11y-contrast .btn--glass-ink,
html.a11y-contrast .arw{background:#000;color:#fff;border:2px solid #fff}
html.a11y-contrast .btn--glass:hover,html.a11y-contrast .btn--glass:focus-visible,
html.a11y-contrast .btn--ink:hover,html.a11y-contrast .btn--ink:focus-visible,
html.a11y-contrast .arw:hover:not(:disabled){background:#FFD84D;color:#000}
/* photographs stay photographs, but they are lifted off a black page */
html.a11y-contrast img,html.a11y-contrast video{filter:contrast(1.12) brightness(1.04)}
/* The panel on the machine is a picture of ANOTHER site, and inverting its
   tokens is not enough on its own: its scrim is a hardcoded ivory gradient
   painted over a photograph, so the type would end up dark-on-pale inside an
   otherwise black page. The scrim is repainted black and the photo dropped
   back, which is what makes the screen readable rather than a bright hole. */
html.a11y-contrast .scr--barber{--iv:#000;--bk:#fff;--bk2:#fff;--bk3:#fff;--pt:#FFD84D;--rl:#8f8f8f}
html.a11y-contrast .scr--barber .scr__btn,
html.a11y-contrast .scr--barber .scr__cta{color:#000}
html.a11y-contrast .scr--barber .scr__cta--ghost{color:#fff;box-shadow:inset 0 0 0 2px #fff}
html.a11y-contrast .scr__photo{filter:grayscale(1) brightness(.42)}
html.a11y-contrast .scr__page::after{
  background:
    linear-gradient(to left,#000 3%,rgba(0,0,0,.9) 32%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.4) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0) 22%);
}

/* the widget's own surfaces are near-transparent tints — invisible on black,
   so they become drawn edges instead */
html.a11y-contrast .a11y__btn{color:#000}
html.a11y-contrast .a11y__panel{border:2px solid #fff}
html.a11y-contrast .a11y__tile,
html.a11y-contrast .a11y__reset,
html.a11y-contrast .a11y__x,
html.a11y-contrast .a11y__val,
html.a11y-contrast .a11y__step button{background:#000;border:1px solid #fff}
html.a11y-contrast .a11y__tile[aria-pressed="true"]{background:#FFD84D;color:#000;border-color:#FFD84D}
html.a11y-contrast .a11y__tile:hover,
html.a11y-contrast .a11y__reset:hover,
html.a11y-contrast .a11y__x:hover,
html.a11y-contrast .a11y__step button:hover:not(:disabled){background:#2a2a2a}

/* ── grayscale ──────────────────────────────────────────────────────
   Deliberately NOT `filter:grayscale()` on the root: a filter on an
   ancestor makes it the containing block for `position:fixed`, which
   would unpin the nav, the sticky bar and this widget. Tokens carry the
   colour on this site, so remapping them is both safer and exact. */
html.a11y-gray{
  --cu:#55524D;--cu-deep:#3B3935;--cu-lift:#D2CDC5;--cu-soft:rgba(85,82,77,.10);
}
html.a11y-gray img,html.a11y-gray video,html.a11y-gray .ambient{filter:grayscale(1)}
html.a11y-gray .ambient{opacity:.55}
html.a11y-gray .scr--barber{--pt:#3F3D39}
html.a11y-gray.a11y-contrast{--cu:#fff;--cu-deep:#fff;--cu-lift:#fff;--cu-soft:rgba(255,255,255,.16)}
html.a11y-gray.a11y-contrast .sec--cu,
html.a11y-gray.a11y-contrast .btn--cu{background:#fff;color:#000}

/* ── highlight links ────────────────────────────────────────────── */
html.a11y-links a,
html.a11y-links button{
  text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px;
  outline:2px dashed currentColor;outline-offset:3px;border-radius:6px;
}
/* the menu's own controls are exempt: outlining the panel that turned the
   outlines on is noise, and it underlined the +/− glyphs into nonsense */
html.a11y-links .a11y button{text-decoration:none!important;outline:0}
html.a11y-links .a11y a{outline:0}

/* ── readable text ──────────────────────────────────────────────────
   This design is set tight on purpose: -.045em tracking, .98 leading.
   That is exactly what a reader with low vision or dyslexia needs undone,
   so the mode relaxes the metrics rather than swapping in a novelty font. */
html.a11y-readable body{font-weight:500}
html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3,
html.a11y-readable .hero__h,html.a11y-readable .h2,html.a11y-readable .h2--sm,
html.a11y-readable .final__h,html.a11y-readable .stats__n,html.a11y-readable .specs__i dt{
  letter-spacing:-.005em!important;line-height:1.22!important;
}
html.a11y-readable p,html.a11y-readable li,html.a11y-readable dd,
html.a11y-readable .lede,html.a11y-readable .step__b,html.a11y-readable .faq__a{
  line-height:1.9!important;letter-spacing:.012em;word-spacing:.06em;
}
html.a11y-readable .marker,html.a11y-readable .ph{letter-spacing:.09em}
/* the two site-in-a-screen panels are pictures, not text to be re-set */
html.a11y-readable .scr *,html.a11y-readable .mini *{letter-spacing:revert;line-height:revert}

/* ── stop motion ────────────────────────────────────────────────────
   Mirrors the prefers-reduced-motion block. a11y.js additionally tells
   main.js to release every scroll-scrubbed scene back to its finished
   CSS value, so nothing is left frozen mid-scene. */
html.a11y-still{scroll-behavior:auto}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;transition-delay:0ms!important;
}
html.a11y-still .reveal,html.a11y-still [data-split] .w,
html.a11y-still .hero__h .ln > span,html.a11y-still .hero__sub,html.a11y-still .hero__acts,
html.a11y-still .specs,html.a11y-still .marker--top,html.a11y-still .machine,
html.a11y-still .chip,html.a11y-still .scr__eyebrow,html.a11y-still .scr__h span,
html.a11y-still .scr__p,html.a11y-still .scr__acts,html.a11y-still .scr__note,
html.a11y-still .scr__stats,html.a11y-still .scr__nav{opacity:1!important;transform:none!important}
html.a11y-still .hero__h .rule,html.a11y-still .chip__bar i{transform:scaleX(1)!important}
html.a11y-still .steps__track b{transform:none!important}
html.a11y-still .bp{display:none}

/* ── large cursor ───────────────────────────────────────────────── */
html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 11-6.2.6 3.4 6.9-2.6 1.3-3.4-6.9L5 19z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto!important;
}
html.a11y-cursor a,html.a11y-cursor button,html.a11y-cursor [role="button"],
html.a11y-cursor label,html.a11y-cursor summary,html.a11y-cursor input[type="range"]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.6c0-.9.7-1.6 1.5-1.6s1.5.7 1.5 1.6v7.1h.6V4.4c0-.9.7-1.6 1.5-1.6s1.5.7 1.5 1.6v5.3h.6V6.2c0-.9.7-1.6 1.5-1.6s1.5.7 1.5 1.6v9.3c0 4-2.4 7.5-6.3 7.5-3.1 0-4.6-1.3-6.3-4.2L3.4 13c-.5-.8-.2-1.8.6-2.2.8-.4 1.7-.1 2.2.6L9 15.1z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 2,pointer!important;
}

/* ── reading guide ──────────────────────────────────────────────── */
.a11y-ruler{
  position:fixed;inset-inline:0;z-index:148;height:44px;pointer-events:none;
  background:color-mix(in srgb,var(--cu,#9A4E18) 12%,transparent);
  border-block:2px solid var(--cu,#9A4E18);
  transform:translateY(-50%);
}

@media (prefers-reduced-motion:reduce){
  .a11y__btn,.a11y__panel,.a11y__tile{transition:none}
}