/* Mifgash HaMazal, v2: white editorial serif over a soft animated background.
   Palette: lavender white, periwinkle, deep indigo.
   Mobile first; 4 languages (he/ar right-to-left, en/ru left-to-right). */

:root {
  --bg: #F4F4F2;
  --ink: #1B1F27;          /* headings, text, buttons */
  --gray: #333840;         /* secondary text, still high contrast on the light video */
  --accent: #8A6410;       /* the soft words in big headings: at least 3:1 even on the bluest part of the background */
  --line: rgba(27, 31, 39, .12);
  --glass: rgba(255, 255, 255, .55);
  --ok: #1C9A5E;
  --display: "Frank Ruhl Libre", "Noto Serif", "Noto Naskh Arabic", serif;
  --body: "Heebo", "Rubik", system-ui, sans-serif;
  --gutter: clamp(20px, 4vw, 32px);
  --max: 80rem;
  --r: 8px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
/* Arabic and Russian: fonts that actually contain those letters */
:root:lang(ar) { --display: "Noto Naskh Arabic", serif; --body: "Rubik", system-ui, sans-serif; }
:root:lang(ru) { --display: "Noto Serif", serif; --body: "Rubik", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: transparent; color: var(--ink); font: 500 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; padding-bottom: 80px; }
img, video, iframe, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 600; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); }
.skip:focus { top: 12px; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: lining-nums tabular-nums; }
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.soft { color: var(--accent); }
main:focus { outline: none; }

/* ------------------------------------------------- page colour under the film */
.site-bg { position: fixed; inset: 0; z-index: -2; background: var(--bg); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--r); font: 600 1rem var(--body); border: 1.5px solid transparent; cursor: pointer; transition: transform .2s ease, background-color .2s, border-color .2s; }
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-line { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); border-color: rgba(27, 31, 39, .22); }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn-lg { min-height: 60px; padding: 0 40px; font-size: 1.05rem; }
.btn-row, .cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- top bar */
.progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 300; transform: scaleX(0); transform-origin: left; background: var(--ink); }
[dir="rtl"] .progress { transform-origin: right; }
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(243, 244, 252, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.is-stuck { border-bottom-color: var(--line); }
.topbar-in { max-width: var(--max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); }
.logo { font: 400 1.7rem/1 var(--display); letter-spacing: -.01em; padding-block: 11px; white-space: nowrap; }
.topnav { display: none; gap: 26px; font-size: .92rem; font-weight: 600; }
.topnav a { color: var(--gray); transition: color .2s; }
.topnav a:hover { color: var(--ink); }
.top-end { display: flex; align-items: center; gap: 8px; }
.lang { display: none; gap: 4px; }
.lang button { min-width: 40px; min-height: 36px; padding-inline: 8px; background: var(--glass); border: 1.5px solid rgba(27, 31, 39, .18); border-radius: 6px; font: 600 .8rem var(--body); color: var(--ink); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.top-call { display: none; }
.burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1.5px solid rgba(27, 31, 39, .2); background: var(--glass); cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }

.drawer { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; flex-direction: column; gap: 24px; padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.drawer.is-open { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-nav { display: grid; }
.drawer-nav a { font: 400 2.1rem/1.2 var(--display); padding: 12px 0; border-bottom: 1px solid var(--line); }
.lang-drawer { display: flex; flex-wrap: wrap; }
.lang-drawer button { min-height: 44px; padding-inline: 14px; font-size: .95rem; }
.drawer > .btn { margin-top: auto; }

@media (min-width: 640px) { .top-call { display: inline-flex; } }
@media (max-width: 440px) { .topbar-in { gap: 8px; padding-inline: 14px; } .top-end { gap: 6px; } .logo { font-size: min(1.3rem, 6vw); } :root:lang(ru) .logo, :root:lang(en) .logo { font-size: min(1.1rem, 4.6vw); } }
@media (min-width: 1100px) {
  .topnav { display: flex; }
  .lang { display: flex; }
  .burger { display: none; }
}

/* ------------------------------------------------------------------- hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: var(--max); margin-inline: auto; padding: clamp(48px, 9vw, 110px) var(--gutter) clamp(64px, 10vw, 120px); }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: 26px; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: #A9B0CF; flex: none; }
.status.is-open .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(28, 154, 94, .16); }
.status.is-closed .dot { background: #C9503C; }
h1 { max-width: 80rem; font: 400 clamp(2.7rem, 8.6vw, 6.6rem)/1.04 var(--display); letter-spacing: -.02em; }
:root:lang(en) h1, :root:lang(ru) h1 { font-size: clamp(2.3rem, 6.6vw, 5.4rem); }
.lead { margin-top: 28px; max-width: 42rem; font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.75; font-weight: 700; color: var(--ink); }
.hero .cta-row { justify-content: center; margin-top: 40px; }
.meta { margin-top: 20px; font-size: .95rem; font-weight: 700; color: var(--ink); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s var(--ease) both; }
.rise-1 { animation: rise .8s var(--ease) .2s both; }
.rise-2 { animation: rise .8s var(--ease) .4s both; }
html.js:not(.intro-done) .rise, html.js:not(.intro-done) .rise-1, html.js:not(.intro-done) .rise-2 { animation-play-state: paused; }

/* ---------------------------------------------------------------- marquee */
.marquee { --n: 6; padding-block: 8px clamp(40px, 7vw, 80px); display: grid; gap: 10px; overflow: hidden; direction: ltr; }
[dir="rtl"] .tile { direction: rtl; }
.marquee-row { display: flex; gap: 10px; width: max-content; will-change: transform; }
.tile { flex: none; width: calc(100vw / var(--n) - 10px); width: calc(100cqw / var(--n) - 10px); aspect-ratio: 420 / 270; border-radius: 14px; overflow: hidden; display: grid; place-items: center; padding: 8px; background: #fff; text-align: center; box-shadow: 0 14px 30px -24px rgba(27, 31, 39, .45); }
.tile img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.tile-bleed { padding: 0; } .tile-bleed img { object-fit: cover; border-radius: 0; }
.tile-word { font: 500 clamp(.9rem, 1.6vw, 1.55rem)/1.15 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.tile-sky { background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------- sections */
/* main is a size container: on computers it sits beside the film panel, so its layouts follow its own width (@container) */
main { container-type: inline-size; }
.sec { padding-block: clamp(64px, 10vw, 128px); border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 12px; margin-bottom: clamp(30px, 5vw, 54px); }
.label { font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: .03em; }
h2 { font: 400 clamp(2.2rem, 5.2vw, 3.8rem)/1.06 var(--display); letter-spacing: -.015em; }
h3 { font: 500 1.45rem/1.2 var(--display); }
.age { display: inline-flex; align-items: center; font: 700 .7rem/1 var(--body); padding: 4px 6px; border: 1.5px solid currentColor; border-radius: 5px; color: var(--ink); direction: ltr; flex: none; }
.note { margin-top: 20px; font-size: .95rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* about */
.greet { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 18px; }
.greet-ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.scroll-text { max-width: 58rem; font: 400 clamp(1.55rem, 3.3vw, 2.5rem)/1.4 var(--display); letter-spacing: -.01em; }
.scroll-text .w { opacity: .2; transition: opacity 120ms linear; }
.about-sub { margin-top: 26px; max-width: 42rem; font-size: 1.05rem; font-weight: 600; color: var(--gray); }

/* products */
.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.products li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 20px 0; border-bottom: 1px solid var(--line); font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--display); }
@container (min-width: 640px) { .products { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 80px); } }

/* services */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@container (min-width: 700px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; overflow: hidden; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -28px rgba(27, 31, 39, .35); }
.card-logo { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 22px; background: #fff; }
.card-logo img { width: 100%; height: 100%; object-fit: contain; }
.card-logo.bleed { padding: 0; } .card-logo.bleed img { object-fit: cover; }
.card-body { padding: 20px 22px 24px; display: grid; gap: 6px; }
.card-body p { font-weight: 600; color: var(--gray); }
.card .age { position: absolute; top: 14px; inset-inline-end: 14px; background: #fff; }

/* hours + location */
.two { display: grid; gap: clamp(48px, 7vw, 96px); grid-template-columns: 1fr; }
@container (min-width: 880px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.hours-table { margin: 0; }
.hours-table > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hours-table dt { font-weight: 700; white-space: nowrap; }
.hours-table dd { margin: 0; text-align: end; font-weight: 700; color: var(--ink); }
.hours-table .is-today dt, .hours-table .is-today dd { color: var(--ink); font-weight: 800; }
.hours-table .is-today dt::after { content: attr(data-today); display: inline-block; margin-inline-start: 8px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: #fff; vertical-align: 2px; }
address { font: normal 400 clamp(1.5rem, 2.8vw, 2rem)/1.3 var(--display); }
.big-phone { display: inline-block; margin-top: 12px; padding-block: 6px; font: 600 clamp(1.9rem, 4vw, 2.6rem)/1 var(--body); letter-spacing: -.01em; }
#location .btn-row { margin-top: 22px; }
.map-wrap { position: relative; margin-top: 24px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .7); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* contact + poster */
.contact-grid { display: grid; gap: 40px; align-items: center; }
.contact h2 { font-size: clamp(2.8rem, 7.4vw, 5.6rem); }
.contact .lead { margin-top: 18px; }
.contact .btn-row { margin-top: 30px; }
@container (min-width: 760px) { .contact-grid { grid-template-columns: minmax(0, 1fr) 240px; column-gap: clamp(32px, 6vw, 80px); } }
.cloth-wrap { display: grid; justify-items: center; gap: 6px; }
.cloth { position: relative; width: min(70vw, 240px); height: min(94vw, 320px); cursor: grab; touch-action: pan-y; }
.cloth.is-grabbing { cursor: grabbing; }
.cloth canvas { width: 100%; height: 100%; touch-action: pan-y; }
.cloth.is-grabbing canvas { touch-action: none; }
.closing-hint { font-size: .85rem; font-weight: 600; color: var(--gray); text-align: center; }

/* ----------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-block: 36px 96px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.foot p { margin-bottom: 10px; }
.age-line { display: flex; gap: 10px; align-items: flex-start; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.legal-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding-block: 6px; }
.foot-bottom { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* ------------------------------------------------- floating buttons, mobile bar */
.to-top { position: fixed; z-index: 70; inset-inline-end: 16px; inset-block-end: 96px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s var(--ease); box-shadow: 0 12px 26px -16px rgba(27, 31, 39, .5); }
.to-top svg { width: 22px; height: 22px; }
body.scrolled .to-top { opacity: 1; pointer-events: auto; transform: none; }
.wa-float { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r); border: 1.5px solid rgba(27, 31, 39, .2); background: var(--glass); color: var(--ink); cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }
.motion-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r); border: 1.5px solid rgba(27, 31, 39, .2); background: var(--glass); color: var(--ink); cursor: pointer; }
.motion-toggle svg { width: 16px; height: 16px; flex: none; }
.motion-toggle .i-play, .motion-toggle.is-stopped .i-pause { display: none; }
.motion-toggle.is-stopped .i-play { display: block; }
.motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.action-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(243, 244, 252, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.ab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: var(--r); font-weight: 700; font-size: .98rem; color: var(--ink); background: var(--glass); border: 1.5px solid rgba(27, 31, 39, .2); }
.ab svg { width: 19px; height: 19px; }
.ab-call { background: var(--ink); border-color: var(--ink); color: #fff; }
.ab:active { transform: scale(.96); }

@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .foot { padding-bottom: 170px; }
  .action-bar { display: none; }
  .to-top { inset-inline-end: 30px; inset-block-end: 100px; }
  .wa-float { display: grid; place-items: center; position: fixed; z-index: 60; inset-block-end: 26px; inset-inline-end: 26px; width: 56px; height: 56px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 18px 36px -18px rgba(27, 31, 39, .6); opacity: 0; pointer-events: none; transition: opacity .3s, transform .2s; }
  body.scrolled .wa-float { opacity: 1; pointer-events: auto; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ----------------------------------------------------------- reveal + intro */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
html.js [data-reveal].in { opacity: 1; transform: none; }
.intro { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: var(--bg); animation: introOut 620ms cubic-bezier(.77, 0, .175, 1) 1400ms forwards; }
.intro-inner { display: grid; justify-items: center; gap: 16px; padding: 20px; }
.intro-title { font: 400 clamp(3.2rem, 14vw, 8rem)/1 var(--display); letter-spacing: -.02em; text-align: center; color: var(--ink); animation: introRise .7s var(--ease) .1s both; }
.intro-title span:last-child { color: var(--accent); }
.intro-sub { font-weight: 700; letter-spacing: .12em; font-size: .85rem; color: var(--gray); animation: introRise .7s var(--ease) .3s both; }
.intro-bar { width: 120px; height: 2px; background: var(--ink); transform: scaleX(0); animation: introBar .9s var(--ease) .35s forwards; }
@keyframes introRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes introBar { to { transform: scaleX(1); } }
@keyframes introOut { to { transform: translateY(-100%); visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise-1, .rise-2 { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-text .w { opacity: 1; }
  .btn:hover { transform: none; }
  .intro { animation: introFade .3s ease 1400ms forwards; }
  .intro-title, .intro-sub { animation: none; }
  .intro-bar { animation: none; transform: none; }
  @keyframes introFade { to { opacity: 0; visibility: hidden; } }
}

/* performance on phones and tablets: no glass blur over the moving background (it is recomputed every frame),
   use slightly more solid surfaces instead; same look, much lighter */
@media (max-width: 959px) {
  .topbar, .btn-line, .burger, .lang button, .motion-toggle, .card, .map-wrap, .to-top, .action-bar, .ab { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar { background: rgba(243, 244, 252, .94); }
  .action-bar { background: rgba(243, 244, 252, .96); }
  .btn-line, .burger, .lang button, .motion-toggle, .to-top, .ab { background: rgba(255, 255, 255, .85); }
  .card, .map-wrap { background: rgba(255, 255, 255, .8); }
  .ab-call { background: var(--ink); }
}

/* ---------------------------------------------------------- accessibility menu */
.a11y-panel { position: fixed; z-index: 450; top: 76px; inset-inline-end: 12px; width: min(calc(100vw - 24px), 360px); max-height: calc(100vh - 96px); overflow: auto; padding: 16px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(27, 31, 39, .5); }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.a11y-head h2 { font: 500 1.4rem/1.2 var(--display); }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 8px; border: 1.5px solid rgba(27, 31, 39, .2); border-radius: 10px; background: #fff; color: var(--ink); font: 600 .9rem/1.2 var(--body); cursor: pointer; text-align: center; }
.a11y-grid button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.a11y-sw { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .8rem/1 var(--body); }
.sw-contrast { background: linear-gradient(90deg, #000 50%, #fff 50%); border: 1.5px solid #000; }
.sw-dark { background: #000; box-shadow: inset 0 0 0 7px #000, inset 0 0 0 13px #FFE14D; }
.sw-gray { background: linear-gradient(90deg, #222, #ddd); }
.sw-links { text-decoration: underline; text-underline-offset: 3px; width: auto; }
.sw-font { width: auto; font-size: .95rem; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.a11y-foot a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- accessibility modes */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 137.5%; }
:root.a11y-readable { --display: "Heebo", "Rubik", system-ui, sans-serif; }
html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable .scroll-text, html.a11y-readable .products li { letter-spacing: 0; font-weight: 600; }
html.a11y-links a:not(.btn):not(.ab):not(.logo):not(.wa-float) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; background: #FFF3A8; color: #000; }
html.a11y-links .btn, html.a11y-links .ab { outline: 2px dashed currentColor; outline-offset: 2px; }
html.a11y-gray .site-bg, html.a11y-gray .topbar, html.a11y-gray main, html.a11y-gray .foot, html.a11y-gray .action-bar, html.a11y-gray .wa-float, html.a11y-gray .drawer { filter: grayscale(1); }

/* high contrast: black on white, no moving background */
:root.a11y-contrast { --bg: #FFFFFF; --ink: #000000; --gray: #000000; --accent: #0033A0; --line: #000000; --glass: #FFFFFF; }
html.a11y-contrast .site-bg { background: #fff; }
html.a11y-contrast .topbar, html.a11y-contrast .action-bar { background: #fff; border-color: #000; }
html.a11y-contrast :is(.card, .tile, .map-wrap, .btn-line, .ab, .burger, .icon-btn, .motion-toggle, .lang button, .to-top, .a11y-grid button) { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.a11y-contrast :is(.btn-dark, .ab-call, .lang button[aria-pressed="true"], .a11y-grid button[aria-pressed="true"]) { background: #000; color: #fff; }
html.a11y-contrast .scroll-text .w { opacity: 1 !important; }

/* dark contrast: white and yellow on black */
:root.a11y-dark { --bg: #000000; --ink: #FFFFFF; --gray: #FFFFFF; --accent: #FFE14D; --line: rgba(255, 255, 255, .55); --glass: #000000; }
html.a11y-dark body { color: #fff; }
html.a11y-dark .site-bg, html.a11y-dark .intro { background: #000; }
html.a11y-dark .topbar, html.a11y-dark .action-bar, html.a11y-dark .drawer, html.a11y-dark .a11y-panel { background: #000; color: #fff; border-color: #fff; }
html.a11y-dark :is(.card, .tile, .tile-sky, .map-wrap, .btn-line, .ab, .burger, .icon-btn, .motion-toggle, .lang button, .to-top, .a11y-grid button) { background: #000; color: #fff; border: 2px solid #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.a11y-dark :is(.btn-dark, .ab-call, .wa-float, .lang button[aria-pressed="true"], .a11y-grid button[aria-pressed="true"]) { background: #FFE14D; color: #000; border-color: #FFE14D; }
html.a11y-dark .card-logo, html.a11y-dark .tile:has(img) { background: #fff; }
html.a11y-dark .card .age { background: #000; }
html.a11y-dark .hours-table .is-today dt::after { background: #FFE14D; color: #000; }
html.a11y-dark .scroll-text .w { opacity: 1 !important; }
html.a11y-dark .progress { background: #FFE14D; }

/* large text: keep the bottom bar inside the screen */
.ab { min-width: 0; padding-inline: 4px; gap: 6px; font-size: .92rem; }
.ab svg { width: 17px; height: 17px; }
.ab span { min-width: 0; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 400px) { .ab:not(.ab-call) svg { display: none; } }
html.a11y-text-2 .ab svg, html.a11y-text-3 .ab svg { display: none; }
/* the phone menu must never be wider than the screen, even with the largest text */
.drawer { width: 100%; max-width: 100vw; overflow-x: hidden; }
.drawer > * { min-width: 0; max-width: 100%; }
.drawer-nav a { overflow-wrap: anywhere; }
.topbar-in > .logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drawer-top .logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.a11y-text-3 .ab { font-size: .8rem; }

/* ------------------------------------------------ language picker (below 1100px) */
.lang-pick { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border-radius: var(--r); border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 700 .9rem var(--body); cursor: pointer; }
.lang-btn svg { width: 20px; height: 20px; flex: none; }
.lang.lang-menu { display: grid; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 460; min-width: 160px; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(27, 31, 39, .45); }
.lang.lang-menu[hidden] { display: none; }
.lang.lang-menu button { min-height: 44px; width: 100%; font-size: 1rem; text-align: center; background: #fff; }
.lang-menu button:not([lang="he"]):not([lang="ar"]) { direction: ltr; }
@media (min-width: 1100px) { .lang-pick { display: none; } }
/* phones and tablets: the stop-motion switch lives in the accessibility menu, to keep the top bar uncluttered */
@media (max-width: 1099px) { .topbar .motion-toggle { display: none; } }
@media (min-width: 1100px) { .a11y-motion { display: none !important; } }
html.a11y-dark .lang-btn, html.a11y-dark .lang.lang-menu { background: #000; color: #fff; border-color: #fff; }
html.a11y-contrast .lang-btn { border: 2px solid #000; }
.lang.lang-menu button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
html.a11y-dark .lang.lang-menu button[aria-pressed="true"] { background: #FFE14D; border-color: #FFE14D; color: #000; }

/* ------------------------------------------------ scroll film (js/film.js, frames in assets/film/)
   The film fills the screen behind the whole page and walks into the shop as you scroll.
   The content comes up over it as message cards (.msg), one at a time, with the film showing between them. */
/* landscape screens get the wide frames (js/film.js), so the still picture is the wide first frame too */
/* upright frames on a wide screen (data saver only): a soft, blurred copy fills the sides */
/* a light shade at the top and bottom keeps the bar and the phone buttons readable over any frame */

/* the page itself is see-through; only the cards, the bar and the footer have a surface */
main > .sec { border-top: 0; padding-block: 34svh; }
main > .sec:first-of-type { padding-top: 22svh; }
.marquee { padding-block: 0; }
.foot { background: var(--bg); }

/* the message cards */
.msg { container-type: inline-size; position: relative; width: 100%; max-width: 560px; padding: clamp(22px, 5vw, 34px);
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(10, 14, 40, .55), 0 2px 8px rgba(10, 14, 40, .08); }
.msg .sec-head { margin-bottom: clamp(18px, 4vw, 28px); }
.msg h2 { font-size: clamp(2rem, 6vw, 3rem); }
.msg .scroll-text { font-size: clamp(1.3rem, 4.4vw, 1.75rem); }
.msg .products li { font-size: clamp(1.2rem, 4.2vw, 1.5rem); padding: 14px 0; }
.msg .cards { gap: 12px; }
.msg .card { background: #fff; box-shadow: none; border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.msg .card-logo { aspect-ratio: 21 / 9; padding: 14px; }
.msg.contact-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
.msg .cloth { width: min(60vw, 210px); height: min(80vw, 280px); }
.msg .btn-line { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.two { display: grid; grid-template-columns: 1fr !important; gap: 34svh; }
/* a card pops up slowly as it arrives: rises, fades in and settles */
html.js .msg[data-reveal] { opacity: 0; transform: translateY(56px) scale(.96); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); }
html.js .msg[data-reveal].in { opacity: 1; transform: none; }

/* first screen: the shop front, with the welcome card at the bottom */
.hero { max-width: var(--max); min-height: calc(100svh - 72px); justify-content: flex-end; align-items: stretch; text-align: start;
  padding: 0 var(--gutter) clamp(20px, 4svh, 40px); }
.msg-hero { max-width: 640px; }
.msg-hero .status { margin-bottom: 14px; }
.msg-hero h1 { font-size: clamp(2.2rem, 8.4vw, 3.8rem); }
.msg-hero .lead { margin-top: 16px; font-size: 1rem; }
.msg-hero .cta-row { justify-content: flex-start; margin-top: 22px; }
.msg-hero .btn-lg { min-height: 54px; padding: 0 26px; }
.msg-hero .meta { margin-top: 14px; }

/* phones: one card at a time across the screen */
@media (max-width: 699px) {
  body { padding-bottom: 0; }
  .foot { padding-bottom: 176px; }
  .hero { padding: 0 12px 92px; }          /* clear of the bottom bar */
  .msg-hero .cta-row, .msg-hero .meta { display: none; }   /* the bottom bar already has call, WhatsApp and directions */
  .msg-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .msg-hero .lead { font-size: .95rem; line-height: 1.6; }
  main > .sec .container { padding-inline: 12px; }
  .msg { border-radius: 16px; }
}
/* wide screens: the film fills the screen; cards take turns on its two sides */
@media (min-width: 900px) {
  .msg { max-width: min(480px, 40vw); }
  #products .msg, #hours .msg:first-child, #contact .msg { margin-inline-start: auto; }
  .hero .msg-hero { max-width: min(560px, 44vw); }
  .hero, main > .sec .container { max-width: none; }   /* cards at the screen edges, clear of the film in the middle */
  .msg-hero h1 { font-size: clamp(2.2rem, 2.7vw, 3.2rem); }
  /* the round buttons sit low in the middle, clear of the cards on both sides */
  .to-top, .wa-float { inset-inline-end: calc(50vw - 28px); inset-block-end: 22px; }
  .to-top { inset-inline-end: calc(50vw + 40px); inset-block-end: 27px; }
}

/* contrast modes: no film; plain page and plain cards */
html.a11y-contrast .msg { background: #fff; border: 2px solid #000; box-shadow: none; }
html.a11y-dark .msg { background: #000; color: #fff; border: 2px solid #fff; box-shadow: none; }
html.a11y-dark .msg .card, html.a11y-dark .msg .btn-line { background: #000; }
html.a11y-contrast .hero, html.a11y-dark .hero { min-height: 0; padding-top: 40px; }
html.a11y-contrast main > .sec, html.a11y-dark main > .sec { padding-block: 40px; }
html.a11y-contrast .two, html.a11y-dark .two { gap: 40px; }
@media (prefers-reduced-motion: reduce) { html.js .msg[data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------ shop colours (2026-10-22)
   Taken from the shop itself: the raspberry awning, the dark blue lettering of the sign, the blue chairs, white.
   Over the film there are no cards: the text stands on its own, bold white with a soft dark shadow, key words in raspberry.
   Only the closing page (#contact + footer) has a surface: the awning raspberry. */
:root { --shop-red: #D9A441; --shop-pink: #FFC83D; --shop-navy: #1F2430; --shop-blue: #3C4A63;
  --txt-shadow: 0 0 2px rgba(6, 8, 12, .9), 0 1px 3px rgba(6, 8, 12, .8), 0 4px 22px rgba(6, 8, 12, .7); }
.marquee { display: none; }               /* the word tiles were white boxes; the film says it better */
.progress { background: var(--shop-pink); }

/* text over the film */
.msg { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; color: #fff; text-shadow: var(--txt-shadow); }
.msg h1, .msg h2, .msg h3, .msg .scroll-text, .msg .products li { font-family: var(--body); color: #fff; }
.msg h1, .msg h2 { font-weight: 900; letter-spacing: -.015em; line-height: 1.05; }
.msg h3 { font-weight: 800; }
.msg .soft, .msg .greet-ic { color: var(--shop-pink); }
.msg :is(.label, .greet, .status, .lead, .meta, .note, .about-sub, address, .big-phone, .card-body p, .hours-table dt, .hours-table dd) { color: #fff; }
.msg .label { font-weight: 800; letter-spacing: .08em; }
.msg :is(.lead, .about-sub, .note, .card-body p, address) { font-weight: 700; }
.msg .scroll-text { font-weight: 800; line-height: 1.3; }
.msg .products { border-top-color: rgba(255, 255, 255, .4); }
.msg .products li { font-weight: 800; border-bottom-color: rgba(255, 255, 255, .4); }
.msg .age { color: #fff; border-color: #fff; background: none; text-shadow: none; box-shadow: 0 1px 8px rgba(6, 8, 12, .45); }
.msg .card { background: none; border: 0; box-shadow: none; overflow: visible; }
.msg .card-logo { border-radius: 12px; box-shadow: 0 12px 30px -14px rgba(6, 8, 12, .7); }
.msg .card-body { padding: 12px 2px 0; gap: 2px; }
.msg .card .age { background: var(--shop-red); border-color: var(--shop-red); }
.msg .hours-table > div { border-bottom-color: rgba(255, 255, 255, .4); }
.msg .hours-table .is-today dt, .msg .hours-table .is-today dd { color: #fff; }
.msg .hours-table .is-today dt::after { background: var(--shop-red); color: #fff; text-shadow: none; }
.msg .map-wrap { border: 0; box-shadow: 0 16px 40px -16px rgba(6, 8, 12, .7); }
.msg .btn-dark { background: var(--shop-red); color: #fff; text-shadow: none; }
.msg .btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.msg .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* top bar, bottom bar and the round buttons */
.topbar { background: linear-gradient(rgba(16, 24, 62, .78), rgba(16, 24, 62, .5)); border-bottom-color: transparent !important; }
@media (max-width: 959px) { .topbar { background: rgba(31, 36, 48, .9); } }
.topbar .logo, .topnav a { color: #fff; }
.topnav a:hover { color: var(--shop-pink); }
.topbar :is(.icon-btn, .burger, .motion-toggle, .lang-btn), .topbar .lang:not(.lang-menu) button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.topbar .lang:not(.lang-menu) button[aria-pressed="true"] { background: #fff; color: var(--shop-navy); border-color: #fff; }
.topbar .burger span { background: #fff; box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff; }
.topbar .top-call { background: var(--shop-red); }
.action-bar { background: rgba(31, 36, 48, .96); border-top-color: transparent; }
.ab { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.ab-call { background: var(--shop-red); border-color: var(--shop-red); }
.to-top { background: var(--shop-navy); color: #fff; border-color: transparent; }
.wa-float { background: var(--shop-red); }

/* the closing page: invitation, contact, 18+ notice, legal links and rights, all on the awning raspberry */
main > #contact.sec { padding-block: clamp(64px, 12svh, 120px) 28px; background: var(--shop-red); color: #fff; }
#contact .msg { text-shadow: none; max-width: 980px; margin-inline: auto; }
#contact .msg .soft { color: #FFE08A; }
#contact .msg h2 { font-size: clamp(2.6rem, 9vw, 4.6rem); }
#contact .msg .btn-dark { background: var(--shop-navy); }
#contact .closing-hint { color: #fff; font-weight: 700; }
@media (min-width: 900px) { #contact .msg.contact-grid { grid-template-columns: minmax(0, 1fr) 240px; align-items: center; column-gap: 64px; } }
.foot { background: var(--shop-red); color: #fff; border-top: 0; padding-top: 8px; }
.foot .container { max-width: 980px; border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 24px; }
.foot .age { color: #fff; border-color: #fff; }
.foot .legal-links a { color: #fff; }
.foot .foot-bottom { border-top-color: rgba(255, 255, 255, .35); }

/* contrast modes: plain black on white / white on black, no shadows */
html.a11y-contrast .msg, html.a11y-contrast .msg :is(h1, h2, h3, .soft, .label, .greet, .status, .lead, .meta, .note, .about-sub, address, .big-phone, .card-body p, .scroll-text, .products li, .hours-table dt, .hours-table dd, .age, .closing-hint),
html.a11y-contrast #contact, html.a11y-contrast .foot, html.a11y-contrast .foot :is(p, a, span, .age) { color: #000; text-shadow: none; border-color: #000; }
html.a11y-contrast main > #contact.sec, html.a11y-contrast .foot { background: #fff; }
html.a11y-contrast .topbar :is(.logo, .topnav a) { color: #000; }
html.a11y-contrast .topbar .burger span { background: #000; box-shadow: 0 -5px 0 #000, 0 5px 0 #000; }
html.a11y-dark .msg, html.a11y-dark .msg * { text-shadow: none; }
html.a11y-dark .msg .soft { color: #FFE14D; }
html.a11y-dark main > #contact.sec, html.a11y-dark .foot { background: #000; }
html.a11y-contrast .products, html.a11y-contrast .products li, html.a11y-contrast .hours-table > div { border-color: #000; }

/* closing page on phones: everything on one screen. The poster sits small beside "מוזמנים לקפוץ" (on its left),
   the four buttons in two rows, then the 18+ notice, legal links and rights. */
@media (max-width: 699px) {
  main > #contact.sec { padding-block: 40px 10px; }
  #contact .msg.contact-grid { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px 14px; align-items: start; }
  #contact .contact-text { display: contents; }
  #contact .msg h2 { grid-column: 1; grid-row: 1; font-size: clamp(2.2rem, 10.5vw, 2.8rem); align-self: center; }
  #contact .cloth-wrap { grid-column: 2; grid-row: 1 / span 2; }
  #contact .msg .cloth { width: 104px; height: 140px; }
  #contact .closing-hint { display: none; }
  #contact .lead { grid-column: 1; grid-row: 2; margin-top: 0; font-size: .95rem; line-height: 1.55; }
  #contact .btn-row { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #contact .btn-row .btn { min-height: 46px; padding: 0 10px; font-size: .92rem; }
  .foot { padding-block: 0 92px; font-size: .86rem; }
  .foot .container { padding-top: 14px; }
  .foot p { margin-bottom: 6px; }
  .foot .legal-links { margin-top: 6px; gap: 2px 16px; }
  .foot .foot-bottom { margin-top: 8px; padding-top: 10px; gap: 4px; }
}


/* ------------------------------------------------ hero B (2026-10-25): centred, bold, no floating objects
   The film stays behind; the first screen becomes one centred stack: status pill, big headline, the three real logos on white plates, call to action. */
.hero { align-items: center; text-align: center; justify-content: center; }
.hero .msg-hero { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.hero .status { padding: 8px 16px; border-radius: 999px; background: rgba(10, 12, 16, .55); border: 1px solid rgba(255, 255, 255, .28); text-shadow: none; color: #fff; }
.hero .msg-hero h1 { font-weight: 900; font-size: clamp(2.5rem, 11vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; }
.hero .msg-hero .lead { max-width: 34rem; }
.hero-logos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; justify-content: center; width: 100%; }
.hero-logos li { flex: 1 1 0; min-width: 0; max-width: 150px; background: #fff; border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; box-shadow: 0 6px 22px rgba(6, 8, 12, .35); }
.hero-logos img { width: 100%; height: auto; max-height: 48px; object-fit: contain; display: block; }
.hero .msg-hero .cta-row { justify-content: center; }
@media (min-width: 900px) {
  .hero .msg-hero { max-width: min(640px, 44vw); }
  .hero-logos li { max-width: 170px; }
}
html.a11y-contrast .hero-logos li, html.a11y-dark .hero-logos li { box-shadow: none; border: 2px solid #000; }
.hero .status { padding: 7px 14px; font-size: .84rem; line-height: 1.35; text-align: center; max-width: 100%; }
@media (max-width: 420px) { .hero .status { font-size: .78rem; gap: 7px; } }
/* wide screens: the film stands in the middle, so the stack sits at the screen edge as before */
@media (min-width: 900px) {
  .hero { align-items: stretch; text-align: start; }
  .hero .msg-hero { align-self: flex-start; align-items: flex-start; }
  .hero-logos { justify-content: flex-start; }
  .hero .msg-hero .cta-row { justify-content: flex-start; }
}

/* classic charcoal and gold (2026-10-25): the gold buttons carry dark text; the closing page is charcoal */
.msg .btn-dark, .topbar .top-call, .ab-call, .wa-float, .msg .card .age, .msg .hours-table .is-today dt::after { color: #1B1F27; text-shadow: none; }
main > #contact.sec, .foot { background: #1F2430; color: #fff; }
#contact .msg .btn-dark { background: var(--shop-red); color: #1B1F27; }

/* white as the main colour (2026-10-25): white bars, white closing page, charcoal text, gold only on the action buttons.
   The text over the film stays white; it has no surface of its own. */
.topbar { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line) !important; }
@media (max-width: 959px) { .topbar { background: rgba(255, 255, 255, .96); } }
.topbar .logo, .topnav a { color: #1B1F27; }
.topnav a:hover { color: #8A6410; }
.topbar :is(.icon-btn, .burger, .motion-toggle, .lang-btn), .topbar .lang:not(.lang-menu) button { background: transparent; color: #1B1F27; border-color: rgba(27, 31, 39, .35); }
.topbar .lang:not(.lang-menu) button[aria-pressed="true"] { background: #1B1F27; color: #fff; border-color: #1B1F27; }
.topbar .burger span { background: #1B1F27; box-shadow: 0 -5px 0 #1B1F27, 0 5px 0 #1B1F27; }
.action-bar { background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
.ab { color: #1B1F27; border-color: rgba(27, 31, 39, .35); }
.ab-call { border-color: var(--shop-red); }
.to-top { background: #1B1F27; }
main > #contact.sec, .foot { background: #fff; color: #1B1F27; }
#contact .msg :is(h2, h3, p, address, .lead, .big-phone, .meta, .label, a:not(.btn)), #contact .closing-hint { color: #1B1F27; }
#contact .msg .soft { color: #8A6410; }
#contact .msg .btn-line { color: #1B1F27; border-color: rgba(27, 31, 39, .5); background: transparent; }
#contact .msg .btn-line:hover { background: rgba(27, 31, 39, .06); border-color: #1B1F27; }
.foot .age { color: #1B1F27; border-color: #1B1F27; }
.foot .legal-links a, .foot :is(p, address, span) { color: #1B1F27; }
.foot .container, .foot .foot-bottom { border-top-color: rgba(27, 31, 39, .2); }


/* white main (2026-10-25): white cards over the film, black text and buttons, black bars of the closing page.
   Scoped so the contrast modes keep their own look. */
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg,
html:not(.a11y-contrast):not(.a11y-dark) .hero .msg-hero { background:#fff;color:#111;text-shadow:none;border-radius:16px;padding:20px 20px 22px;box-shadow:0 10px 34px -12px rgba(0,0,0,.45); }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg :is(h1,h2,h3,.scroll-text,.products li,.label,.greet,.status,.lead,.meta,.note,.about-sub,address,.big-phone,.card-body p,.hours-table dt,.hours-table dd,.age),
html:not(.a11y-contrast):not(.a11y-dark) .hero .msg-hero :is(h1,.lead,.meta,.status) { color:#111;text-shadow:none; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .soft,
html:not(.a11y-contrast):not(.a11y-dark) .hero .msg-hero .soft,
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .greet-ic { color:#111;box-shadow:none;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:7px;text-decoration-color:rgba(17,17,17,.22); }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .greet-ic { box-shadow:none; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .label { color:#555; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .products,
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .products li,
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .hours-table > div { border-color:rgba(17,17,17,.16); }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .age { color:#111;border-color:#111;background:none;box-shadow:none; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .card .age,
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .hours-table .is-today dt::after { background:#111;border-color:#111;color:#fff; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .card-logo { border:1px solid #e3e3e3;box-shadow:none; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .map-wrap { box-shadow:none;border:1px solid #e3e3e3; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .btn-dark,
html:not(.a11y-contrast):not(.a11y-dark) .hero .msg-hero .btn-dark { background:#111;color:#fff;border-color:#111; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg .btn-line,
html:not(.a11y-contrast):not(.a11y-dark) .hero .msg-hero .btn-line { background:#fff;color:#111;border-color:#111; }
html:not(.a11y-contrast):not(.a11y-dark) .hero .status { background:#F1F1F1;border:1px solid #ddd; }
html:not(.a11y-contrast):not(.a11y-dark) .hero-logos li { box-shadow:none;border:1px solid #e3e3e3; }
html:not(.a11y-contrast):not(.a11y-dark) .progress,
html:not(.a11y-contrast):not(.a11y-dark) .to-top,
html:not(.a11y-contrast):not(.a11y-dark) .wa-float { background:#111;color:#fff; }
html:not(.a11y-contrast):not(.a11y-dark) .topbar { background:rgba(255,255,255,.95); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .logo,
html:not(.a11y-contrast):not(.a11y-dark) .topnav a { color:#111; }
html:not(.a11y-contrast):not(.a11y-dark) .topnav a:hover { color:#555; }
html:not(.a11y-contrast):not(.a11y-dark) .topbar :is(.icon-btn,.burger,.motion-toggle,.lang-btn),
html:not(.a11y-contrast):not(.a11y-dark) .topbar .lang:not(.lang-menu) button { background:transparent;color:#111;border-color:rgba(17,17,17,.35); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .lang:not(.lang-menu) button[aria-pressed="true"] { background:#111;color:#fff;border-color:#111; }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .burger span { background:#111;box-shadow:0 -5px 0 #111,0 5px 0 #111; }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .top-call,
html:not(.a11y-contrast):not(.a11y-dark) .ab-call { background:#111;border-color:#111;color:#fff; }
html:not(.a11y-contrast):not(.a11y-dark) .action-bar { background:rgba(255,255,255,.97);border-top:1px solid #e3e3e3; }
html:not(.a11y-contrast):not(.a11y-dark) .ab { background:#fff;color:#111;border-color:rgba(17,17,17,.35); }
html:not(.a11y-contrast):not(.a11y-dark) main > #contact.sec,
html:not(.a11y-contrast):not(.a11y-dark) .foot { background:#111;color:#fff; }
html:not(.a11y-contrast):not(.a11y-dark) #contact .msg .btn-dark { background:#fff;color:#111;border-color:#fff; }
html:not(.a11y-contrast):not(.a11y-dark) #contact .msg .soft { color:#fff;box-shadow:none;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:7px;text-decoration-color:rgba(255,255,255,.35); }
@media (max-width: 959px) { html:not(.a11y-contrast):not(.a11y-dark) .topbar { background: rgba(255,255,255,.97); } }

html:not(.a11y-contrast):not(.a11y-dark) .action-bar .ab-call, html:not(.a11y-contrast):not(.a11y-dark) .topbar .top-call { background:#111; border-color:#111; color:#fff; }
html:not(.a11y-contrast):not(.a11y-dark) .msg .greet-ic, html:not(.a11y-contrast):not(.a11y-dark) .topbar .top-call svg { text-decoration:none; }

/* closing page on black: white text (beats the older white-closing-page rules above) */
html:not(.a11y-contrast):not(.a11y-dark) #contact .msg :is(h2, h3, p, address, .lead, .big-phone, .meta, .label, a:not(.btn)), html:not(.a11y-contrast):not(.a11y-dark) #contact .closing-hint { color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) #contact .msg .btn-line { color: #fff; border-color: rgba(255, 255, 255, .6); background: transparent; }
html:not(.a11y-contrast):not(.a11y-dark) #contact .msg .btn-line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .foot .age { color: #fff; border-color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .foot .legal-links a, html:not(.a11y-contrast):not(.a11y-dark) .foot :is(p, address, span) { color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .foot .container, html:not(.a11y-contrast):not(.a11y-dark) .foot .foot-bottom { border-top-color: rgba(255, 255, 255, .25); }
html:not(.a11y-contrast):not(.a11y-dark) .to-top, html:not(.a11y-contrast):not(.a11y-dark) .wa-float { background: #111; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .4); }


/* ======================================================================
   Dashboard hero (2026-10-25): full-bleed film, white glass cards, mono "::" labels.
   Phones and the contrast modes: normal flow. Wide screens: a 1440x900 frame in units --u. */
.dash { position: relative; padding: 14px 12px 20px; }
.dash-frame { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-inline: auto; }
.d-abs { position: static; }
.dash .d-user { order: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.94); color: #111; font: 500 12px/1.3 "JetBrains Mono", "Heebo", monospace; }
.d-dc { letter-spacing: -.12em; }
.d-crumb { order: 2; margin: 4px 0 0; color: #fff; font: 500 12.6px/1.4 "JetBrains Mono", "Heebo", monospace; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.d-title { order: 3; margin: 0; color: #fff; font: 300 clamp(46px, 15vw, 64px)/1.02 "Inter Tight", "Heebo", system-ui, sans-serif; letter-spacing: -.045em; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.d-chips { order: 4; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.d-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 9px; background: rgba(255,255,255,.92); color: #111; font: 500 13px/1 "JetBrains Mono", "Heebo", monospace; }
.d-dot { width: 14px; height: 14px; border-radius: 50%; background: #111; flex: none; }
.d-lead { order: 5; margin: 6px 0 clamp(120px, 22svh, 220px); color: #fff; font: 400 16px/1.6 "Inter Tight", "Heebo", sans-serif; text-shadow: 0 1px 8px rgba(0,0,0,.55); max-width: 36rem; }
.d-card { order: 6; position: relative; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.94); color: #111; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-family: "Inter Tight", "Heebo", system-ui, sans-serif; }
.d-label { display: block; margin-bottom: 10px; font: 500 11.5px/1 "JetBrains Mono", "Heebo", monospace; letter-spacing: .06em; text-transform: uppercase; }
.d-label::before { content: "::"; letter-spacing: -.12em; margin-inline-end: 4px; }
.d-greet { margin: 0; font: 400 25px/1.2 "Inter Tight", "Heebo", sans-serif; }
.d-sub { margin: 4px 0 14px; font-size: 14.5px; color: #444; }
.d-field { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-radius: 10px; background: #EFEFEF; color: #111; font: 500 14px/1 "JetBrains Mono", monospace; letter-spacing: .06em; }
.d-field svg { width: 18px; height: 18px; }
.d-where address { font-style: normal; font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
.d-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.d-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.d-logos li { background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 8px; display: flex; align-items: center; min-height: 64px; }
.d-logos img { width: 100%; height: auto; max-height: 52px; object-fit: contain; display: block; }
.d-hours .hours-table { margin: 0; padding: 0; }
.d-hours .hours-table > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(17,17,17,.1); font: 500 13px/1.3 "JetBrains Mono", "Heebo", monospace; color: #111; }
.d-hours .hours-table dt, .d-hours .hours-table dd { margin: 0; color: #111; }
.d-hours .hours-table > div:last-child { border-bottom: 0; }
.d-hours .hours-table .is-today dt::after { content: attr(data-today); margin-inline-start: 8px; padding: 1px 7px; border-radius: 6px; background: #111; color: #fff; font-size: 11px; }
.d-panel { position: relative; border-radius: 12px; background: #EFEFEF; padding: 14px 12px 12px; min-height: 230px; text-align: center; }
.d-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; font: 500 11.5px/1 "JetBrains Mono", "Heebo", monospace; letter-spacing: .04em; }
.d-arc svg { display: block; width: 100%; max-width: 250px; margin: 8px auto 0; }
.d-big { position: absolute; inset-inline: 0; top: 98px; font: 300 56px/1 "Inter Tight", sans-serif; letter-spacing: -.03em; }
.d-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: -6px; padding-inline: 10px; font: 500 13px/1 "JetBrains Mono", monospace; direction: ltr; }
.d-row strong { font: 500 14px/1 "Inter Tight", "Heebo", sans-serif; }
.d-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.d-tile { border-radius: 12px; background: #EFEFEF; padding: 10px 12px; }
.d-tl { display: block; font: 500 11px/1 "JetBrains Mono", "Heebo", monospace; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; color: #444; }
.d-tile b { font: 500 18px/1 "JetBrains Mono", "Heebo", monospace; }
.d-contact { display: flex; flex-direction: column; }
.d-contact .d-label { flex: none; }
.d-act { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 12px; margin-bottom: 8px; border-radius: 12px; background: #EFEFEF; color: #111; min-height: 76px; }
.d-act:last-child { margin-bottom: 0; }
.d-act .d-sq { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 10px; background: #111; color: #fff; display: grid; place-items: center; }
.d-act .d-sq svg { width: 22px; height: 22px; }
.d-act b { font: 500 20px/1.1 "JetBrains Mono", "Heebo", monospace; align-self: end; }
.d-act span { font-size: 13px; color: #444; align-self: start; }
.d-act:hover, .d-field:hover { background: #E4E4E4; }
.d-card .btn { min-height: 44px; }
html.a11y-contrast .d-card, html.a11y-contrast .d-chips li, html.a11y-contrast .dash .d-user { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; }
html.a11y-contrast .d-title, html.a11y-contrast .d-crumb, html.a11y-contrast .d-lead { color: #000; text-shadow: none; }
html.a11y-dark .d-card, html.a11y-dark .d-chips li, html.a11y-dark .dash .d-user { background: #000; color: #fff; border: 2px solid #fff; box-shadow: none; }
html.a11y-dark .d-card :is(.d-field, .d-panel, .d-tile, .d-act, .d-logos li) { background: #000; color: #fff; border: 1px solid #fff; }
html.a11y-dark .d-title, html.a11y-dark .d-crumb, html.a11y-dark .d-lead { color: #fff; text-shadow: none; }

@media (min-width: 900px) {
  html:not(.a11y-contrast):not(.a11y-dark) .dash { --u: min(calc(100vw / 1440), calc((100svh - 72px) / 900)); height: calc(100svh - 72px); min-height: 0; padding: 0; overflow: hidden; }
  html:not(.a11y-contrast):not(.a11y-dark) .dash-frame { display: block; position: absolute; left: 50%; top: 50%; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); max-width: none; margin: 0; transform: translate(-50%, -50%); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-abs { position: absolute; inset-inline-start: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w, 0) * var(--u)); height: calc(var(--h, 0) * var(--u)); margin: 0; }
  html:not(.a11y-contrast):not(.a11y-dark) .d-user, html:not(.a11y-contrast):not(.a11y-dark) .d-crumb, html:not(.a11y-contrast):not(.a11y-dark) .d-title, html:not(.a11y-contrast):not(.a11y-dark) .d-chips, html:not(.a11y-contrast):not(.a11y-dark) .d-lead { width: auto; height: auto; }
  html:not(.a11y-contrast):not(.a11y-dark) .dash .d-user { gap: calc(8 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(14 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-crumb { font-size: calc(12.6 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-title { font-size: calc(96 * var(--u)); line-height: 1; white-space: nowrap; }
  html:not(.a11y-contrast):not(.a11y-dark) .d-chips { gap: calc(8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-chips li { min-height: 0; height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(14 * var(--u)); gap: calc(8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-dot { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-lead { font-size: calc(17 * var(--u)); margin: 0; width: calc(560 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-card { padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden; }
  html:not(.a11y-contrast):not(.a11y-dark) .d-label { font-size: calc(11.5 * var(--u)); margin-bottom: calc(9 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-greet { font-size: calc(25 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-sub { font-size: calc(14.5 * var(--u)); margin: calc(2 * var(--u)) 0 calc(10 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-field { height: calc(37 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-field svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-where address { font-size: calc(17 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-btns { gap: calc(8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-card .btn { min-height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-logos { gap: calc(8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-logos li { min-height: calc(120 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-logos img { max-height: calc(90 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-hours .hours-table > div { padding: calc(3.5 * var(--u)) 0; font-size: calc(13 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-panel { min-height: 0; height: calc(242 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-pill { padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(11.5 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-arc svg { max-width: calc(250 * var(--u)); margin-top: calc(10 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-big { top: calc(118 * var(--u)); font-size: calc(70 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-row { font-size: calc(13 * var(--u)); margin-top: calc(-8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-row strong { font-size: calc(15 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-tiles { gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-tile { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-tl { font-size: calc(11 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-tile b { font-size: calc(18.5 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-act { min-height: 0; height: calc(118 * var(--u)); padding: calc(12 * var(--u)); margin-bottom: calc(8 * var(--u)); border-radius: calc(12 * var(--u)); column-gap: calc(12 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-act .d-sq { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-act .d-sq svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-act b { font-size: calc(21 * var(--u)); }
  html:not(.a11y-contrast):not(.a11y-dark) .d-act span { font-size: calc(13 * var(--u)); }
}
@media (min-width: 900px) {
  html:not(.a11y-contrast):not(.a11y-dark) .d-hours .hours-table > div { padding: calc(2.4 * var(--u)) 0; font-size: calc(12.5 * var(--u)); align-items: baseline; }
  html:not(.a11y-contrast):not(.a11y-dark) .d-hours .hours-table > div[data-day="sat"] dd { font-size: calc(10.5 * var(--u)); text-align: end; max-width: 70%; line-height: 1.25; }
}
.d-hours .hours-table > div[data-day="sat"] dd { text-align: end; }

/* no background video (2026-10-25): plain light page, dark hero text, tighter sections */
html:not(.a11y-contrast):not(.a11y-dark) .site-bg { background: #ECECEA; }
html:not(.a11y-contrast):not(.a11y-dark) .d-title, html:not(.a11y-contrast):not(.a11y-dark) .d-crumb, html:not(.a11y-contrast):not(.a11y-dark) .d-lead { color: #111; text-shadow: none; }
html:not(.a11y-contrast):not(.a11y-dark) .d-card, html:not(.a11y-contrast):not(.a11y-dark) .dash .d-user, html:not(.a11y-contrast):not(.a11y-dark) .d-chips li { border: 1px solid #dcdcd8; box-shadow: none; }
html:not(.a11y-contrast):not(.a11y-dark) .d-lead { margin-bottom: 18px; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec { padding-block: clamp(14px, 3svh, 28px); }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:first-of-type { padding-top: 8px; }
html:not(.a11y-contrast):not(.a11y-dark) .two { gap: 16px; }
html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg { border: 1px solid #dcdcd8; box-shadow: none; }
html:not(.a11y-contrast):not(.a11y-dark) main > #contact.sec { padding-block: clamp(40px, 8svh, 80px) 24px; margin-top: 24px; }
@media (min-width: 900px) {
  html:not(.a11y-contrast):not(.a11y-dark) .dash { margin-bottom: 8px; }
  html:not(.a11y-contrast):not(.a11y-dark) main > .sec .container { max-width: 980px; margin-inline: auto; }
  html:not(.a11y-contrast):not(.a11y-dark) main > .sec:not(#contact) .msg { max-width: none; margin-inline: 0; }
  html:not(.a11y-contrast):not(.a11y-dark) .two { grid-template-columns: 1fr 1fr !important; }
}

/* the icon sprite: hidden holder (was an inline style; inline styles are not allowed by the Content-Security-Policy) */
.sprite { position: absolute; }