/* ==========================================================================
   DrNourit — brand system
   drnourit.co.il · ד״ר נורית חומינר־קלפר
   Shared across index, about and all lecture pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Colour contrast is AA-verified against --bg (#F7F9F9) for every token that
   is ever used as text. --glow and --walnut-light are decoration only.
   -------------------------------------------------------------------------- */
:root{
  --bg:#F7F9F9;
  --surface:#FFFFFF;
  --ink:#0B1A24;
  --ink-soft:#16303F;
  --muted:#4E5E6B;        /* 6.33:1 */
  --faint:#5F6E7A;        /* 4.96:1 */
  --line:#E3EAED;
  --line-soft:#EFF4F5;

  --teal:#0A7C8A;         /* 4.65:1 — the "science" half of the brand */
  --teal-deep:#075A64;
  --teal-bright:#14A9BA;  /* accents / dark surfaces only */
  --teal-wash:#E9F5F6;

  --walnut:#A15C22;       /* 4.88:1 — the "nourishment" half */
  --walnut-deep:#7C4517;
  --walnut-light:#D89A56; /* decoration only */
  --walnut-wash:#FBF3EA;

  --glow:#F5C87A;         /* light. never text. */

  --shadow-sm:0 1px 2px rgba(11,26,36,.04), 0 4px 14px rgba(11,26,36,.04);
  --shadow-md:0 2px 6px rgba(11,26,36,.05), 0 20px 50px rgba(11,26,36,.08);
  --shadow-lg:0 30px 80px rgba(11,26,36,.14);

  --r:22px;
  --r-sm:14px;
  --r-xs:10px;
  --maxw:1180px;
  --nav-h:66px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Anchors must clear the sticky header. */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* Visible focus for everyone, not just form fields. */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;inset-inline-start:-9999px;top:12px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:15px;
}
.skip:focus{inset-inline-start:16px}

/* --------------------------------------------------------------------------
   3. Typography
   Heebo carries display and UI; Assistant carries body copy. Heebo's Latin is
   Roboto-derived, so the ExtraLight display weight reads the same way in both
   languages — one type system, not two.
   JetBrains Mono has NO Hebrew glyphs — it is confined to .lat only.
   -------------------------------------------------------------------------- */
/* Display type is Heebo ExtraLight against Heebo Bold. That weight contrast
   — hairline next to heavy, no intermediate — is the whole voice of the
   headline system; don't fill it in with a mid weight. */
h1,h2,.display{
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:200;
  letter-spacing:-.01em;
  line-height:1.08;
}
h1 b,h2 b,.display b{font-weight:700}
h3,h4,.ui{font-family:'Heebo',system-ui,sans-serif;letter-spacing:-.01em}

/* Latin-only micro-type. Never wrap Hebrew in this. */
.lat{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  direction:ltr;
  unicode-bidi:isolate;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
/* Numerals and statistics inside RTL prose keep their own order. */
.n{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* <em> carries Latin journal names inside Hebrew sentences. Without an
   isolate, the bidi algorithm reorders adjacent Latin runs into nonsense
   ("Foods, Nutrients ו־BMC…" comes out shuffled). */
em{unicode-bidi:isolate}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

/* Eyebrow — Hebrew stays RTL and un-letterspaced. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Heebo',sans-serif;font-weight:600;
  font-size:13.5px;letter-spacing:.02em;color:var(--teal);
}
.eyebrow::before{
  content:"";width:24px;height:2px;border-radius:2px;
  background:linear-gradient(to left,var(--teal),var(--teal-bright));flex:none;
}
.eyebrow.on-dark{color:var(--teal-bright)}
.eyebrow.walnut{color:var(--walnut)}
.eyebrow.walnut::before{background:linear-gradient(to left,var(--walnut),var(--walnut-light))}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;font-family:'Heebo',sans-serif;font-weight:500;font-size:15.5px;
  cursor:pointer;border:1px solid transparent;line-height:1;
  transition:transform .18s ease,box-shadow .25s ease,background .2s,border-color .2s,color .2s;
}
.btn-primary{background:var(--ink);color:#fff;padding:13px 24px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(11,26,36,.2)}
.btn-ghost{background:transparent;color:var(--ink);padding:13px 22px;border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-light{background:#fff;color:var(--ink);padding:13px 24px}
.btn-light:hover{background:var(--teal-bright);color:#fff;box-shadow:0 10px 30px rgba(20,169,186,.35)}
.btn .arw{font-size:1.05em;line-height:0}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
header{position:sticky;top:0;z-index:60}
.nav{
  background:rgba(247,249,249,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.86)}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px}
.brand .glyph{width:34px;height:34px;flex:none}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand .wm-he{font-family:'Heebo',sans-serif;font-weight:700;font-size:19px;color:var(--ink)}
.brand .wm-lat{
  font-family:'JetBrains Mono',monospace;direction:ltr;
  font-size:11px;letter-spacing:.15em;color:var(--faint);text-transform:uppercase;
}
/* Language switcher — present on every page, both trees */
.lang-switch{
  display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:999px;overflow:hidden;background:var(--surface);flex:none;
}
.lang-switch a{
  font-family:'Heebo',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:7px 13px;color:var(--muted);direction:ltr;transition:background .2s,color .2s;
}
.lang-switch a:hover{color:var(--ink);background:var(--bg)}
.lang-switch a[aria-current="true"]{background:var(--ink);color:#fff}
.mobile-menu .lang-switch{margin-top:16px}

.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{
  font-family:'Heebo',sans-serif;font-size:15.5px;color:var(--muted);font-weight:500;
  transition:color .2s;position:relative;padding:4px 0;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;bottom:-2px;right:0;left:0;height:2px;
  border-radius:2px;background:var(--teal);
}
.nav .btn-primary{padding:10px 20px;font-size:14.5px}
.nav-actions{display:flex;align-items:center;gap:12px}

/* Mobile menu — the previous build styled a toggle that did not exist. */
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;right:0;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,top .2s ease;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Full-height overlay below the bar. Every target is >=48px tall so it is
   comfortably tappable on a phone. */
.mobile-menu{display:none}
.mobile-menu.open{
  display:flex;flex-direction:column;justify-content:space-between;
  position:fixed;inset:var(--nav-h) 0 0;z-index:5;
  background:var(--bg);border-top:1px solid var(--line);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:mm-in .22s ease both;
}
@keyframes mm-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.mobile-menu ul{list-style:none;padding:6px 22px 0}
.mobile-menu li + li{border-top:1px solid var(--line)}
.mobile-menu li a{
  display:flex;align-items:center;min-height:58px;padding:16px 2px;
  font-family:'Heebo',sans-serif;font-size:19px;font-weight:500;color:var(--ink);
}
.mobile-menu li a:active{color:var(--teal)}

.mm-foot{
  padding:20px 22px calc(22px + env(safe-area-inset-bottom));
  display:grid;gap:11px;border-top:1px solid var(--line);background:var(--surface);
}
.mm-foot .btn{width:100%;min-height:54px;font-size:16.5px}
.mm-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-contact a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-family:'Heebo',sans-serif;font-size:15px;color:var(--muted);
}
.mm-contact a:active{border-color:var(--teal);color:var(--teal)}
.mm-contact svg{
  width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
section{padding:104px 0}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4vw,46px);margin-top:18px;font-weight:300}
.sec-head h2 b{font-weight:700;color:var(--ink)}
.sec-head h2 em{font-style:normal;color:var(--walnut)}
.sec-head p{color:var(--muted);font-size:18px;margin-top:18px}
.sec-alt{background:var(--surface);border-block:1px solid var(--line)}

/* --------------------------------------------------------------------------
   7. Chips & spec strip
   -------------------------------------------------------------------------- */
.chip{
  font-size:14.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);
  padding:7px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.chip.walnut .dot{background:var(--walnut)}

.spec-strip{border-block:1px solid var(--line);background:rgba(255,255,255,.6)}
.spec-strip .wrap{
  display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;
  padding-top:22px;padding-bottom:22px;
}
.spec-strip .lbl{
  font-family:'Heebo',sans-serif;font-size:13px;font-weight:600;color:var(--faint);
}
.spec-strip .aud{display:flex;flex-wrap:wrap;gap:10px}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D6E2E6}

.icon-badge{
  width:52px;height:52px;border-radius:15px;background:var(--teal-wash);
  display:flex;align-items:center;justify-content:center;flex:none;border:1px solid #D8ECEE;
}
.icon-badge svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.icon-badge.walnut{background:var(--walnut-wash);border-color:#F0DFC9}
.icon-badge.walnut svg{stroke:var(--walnut)}

/* readout: key/value micro-table used on lecture cards */
.readout{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line-soft);position:relative;z-index:1;
}
.readout div{display:flex;flex-direction:column;gap:1px}
.readout .k{font-size:12.5px;color:var(--faint);font-family:'Heebo',sans-serif;font-weight:500}
.readout .v{font-size:14.5px;color:var(--ink);font-weight:600;font-family:'Heebo',sans-serif}

/* --------------------------------------------------------------------------
   9. KPI band (lecture pages)
   -------------------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:26px 22px;box-shadow:var(--shadow-sm);
}
.kpi .fig{
  font-family:'Heebo',sans-serif;font-weight:200;font-size:46px;line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);direction:ltr;unicode-bidi:isolate;display:block;
}
.kpi .fig small{font-size:.5em;color:var(--walnut);font-weight:500}
.kpi .cap{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.kpi .src{
  font-size:12px;color:var(--faint);margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line-soft);
}
/* Source lines are Latin (journal, n, p-value). On the Hebrew site they must
   render LTR so the segments stay in written order, but stay flush right to
   line up with the Hebrew above. On the English site the page handles it. */
[dir="rtl"] .kpi .src{direction:ltr;unicode-bidi:isolate;text-align:right}
.kpi.accent{background:var(--ink);border-color:var(--ink)}
.kpi.accent .fig{color:#fff}
.kpi.accent .fig small{color:var(--glow)}
.kpi.accent .cap{color:#B7C6CE}
.kpi.accent .src{color:#8395A0;border-top-color:rgba(255,255,255,.12)}

/* --------------------------------------------------------------------------
   10. Prose
   -------------------------------------------------------------------------- */
.prose p{color:var(--muted);font-size:17.5px;margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--teal);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(10,124,138,.35)}
.prose a:not(.btn):hover{text-decoration-color:var(--teal)}
.prose ul{list-style:none;margin:0 0 20px}
.prose li{position:relative;padding-inline-start:26px;color:var(--muted);font-size:17px;margin-bottom:12px}
.prose li::before{
  content:"";position:absolute;inset-inline-start:4px;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--walnut-light);
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
form{position:relative;z-index:1;display:grid;gap:15px}
.field{display:grid;gap:7px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{font-size:14px;color:#B7C6CE;font-family:'Heebo',sans-serif;font-weight:500}
label .req{color:var(--glow)}
input,select,textarea{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:13px 15px;color:#fff;
  font-family:'Assistant',system-ui,sans-serif;font-size:15.5px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:#7E909B}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal-bright);background:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(20,169,186,.18);
}
/* custom chevron — appearance:none previously removed it with no replacement */
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7C6CE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;background-size:17px;
}
select option{color:#0B1A24;background:#fff}
textarea{resize:vertical;min-height:92px}
.form-note{font-size:13px;color:#8395A0;text-align:center}
.form-note a{color:#B7C6CE;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;right:-9999px;opacity:0;height:0;width:0;pointer-events:none}

/* --------------------------------------------------------------------------
   12. Dark CTA block
   -------------------------------------------------------------------------- */
.cta{padding-bottom:28px}
.cta-box{
  background:var(--ink);border-radius:32px;padding:62px 56px;position:relative;overflow:hidden;
  color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
}
.cta-box::after{
  content:"";position:absolute;left:-80px;top:-100px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(20,169,186,.32),transparent 70%);pointer-events:none;
}
.cta-box::before{
  content:"";position:absolute;right:-60px;bottom:-120px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(245,200,122,.16),transparent 70%);pointer-events:none;
}
.cta-box h2{font-size:clamp(30px,3.6vw,44px);margin:20px 0 16px;color:#fff}
.cta-box h2 b{font-weight:700}
.cta-box h2 em{font-style:normal;color:var(--glow)}
.cta-box > div{position:relative;z-index:1}
.cta-box p{color:#B7C6CE;font-size:17.5px;max-width:42ch}
.cta-direct{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cta-direct a{
  display:inline-flex;align-items:center;gap:9px;font-size:15.5px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:11px 18px;border-radius:999px;transition:background .2s,border-color .2s;
}
.cta-direct a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
.cta-direct svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
footer{padding:60px 0 46px;border-top:1px solid var(--line);background:var(--surface)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-grid h4{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:16px}
.foot-grid ul{list-style:none;display:grid;gap:11px}
.foot-grid a{color:var(--muted);font-size:15px}
.foot-grid a:hover{color:var(--teal)}
.foot-blurb{color:var(--muted);font-size:15px;margin-top:16px;max-width:34ch}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-top:26px;border-top:1px solid var(--line);
}
.copy{font-size:13px;color:var(--faint)}
.copy .lat{letter-spacing:.06em}

/* --------------------------------------------------------------------------
   14. Reveal — only hides content once JS is confirmed running
   -------------------------------------------------------------------------- */
.js .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.in{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media(max-width:960px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-actions .btn-primary{display:none}
  /* the domain line costs ~90px of bar width and the footer still carries it */
  .nav .brand .wm-lat{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .cta-box{grid-template-columns:1fr;padding:42px 28px;gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  section{padding:74px 0}
  .sec-head{margin-bottom:40px}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .nav-inner{padding:0 20px}
  .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .cta-box{border-radius:24px}
  footer .brand .wm-lat{font-size:12px}
}

/* iPhone SE / older Androids — 320px is the narrowest viewport worth supporting */
@media(max-width:360px){
  .nav-inner{padding:0 14px}
  .nav-actions{gap:8px}
  .brand{gap:9px}
  .brand .glyph{width:30px;height:30px}
  .brand .wm-he{font-size:17px}
  .lang-switch a{padding:7px 11px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   16. LTR overrides
   Everything else uses logical properties and flips on its own; these three
   cannot (gradients and background-position take physical keywords only).
   -------------------------------------------------------------------------- */
[dir="ltr"] .eyebrow::before{background:linear-gradient(to right,var(--teal),var(--teal-bright))}
[dir="ltr"] .eyebrow.walnut::before{background:linear-gradient(to right,var(--walnut),var(--walnut-light))}
[dir="ltr"] select{background-position:right 14px center;padding-left:15px;padding-right:42px}

/* Cookie notice -------------------------------------------------------- */
.cookie-bar{
  position:fixed;z-index:60;inset-inline:16px;bottom:16px;margin-inline:auto;max-width:720px;
  display:flex;align-items:center;gap:16px;padding:14px 18px;
  background:var(--ink);color:#E6EEF1;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
}
.cookie-bar p{margin:0;font-size:14.5px;line-height:1.55;flex:1}
.cookie-bar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-bar .btn{flex:none;padding:9px 20px;font-size:14.5px}
@media(max-width:600px){
  .cookie-bar{flex-direction:column;align-items:stretch;gap:10px;inset-inline:10px;bottom:10px}
}

/* Accessibility menu --------------------------------------------------- */
.a11y-fab{
  position:fixed;z-index:61;left:18px;bottom:18px;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
  background:var(--teal-deep);color:#fff;box-shadow:var(--shadow-md);cursor:pointer;
  transition:bottom .25s;
}
html.has-cookie-bar .a11y-fab{bottom:calc(var(--cb-h,0px) + 30px)}
.a11y-fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.a11y-fab svg circle{fill:currentColor;stroke:none}
.a11y-fab:hover{background:var(--ink)}
.a11y-panel{
  position:fixed;z-index:62;left:18px;bottom:82px;width:min(340px,calc(100vw - 36px));
  max-height:calc(100vh - 110px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:16px;
}
.a11y-panel[hidden]{display:none}
html.has-cookie-bar .a11y-panel{bottom:calc(var(--cb-h,0px) + 94px)}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.a11y-head h2{font-size:18px;font-weight:700;margin:0}
.a11y-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-grid button,.a11y-foot button{
  min-height:48px;padding:8px 10px;border-radius:var(--r-xs);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
}
.a11y-grid button[aria-pressed="true"]{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.a11y-foot a{color:var(--teal-deep);text-decoration:underline;font-size:14.5px}

/* Accessibility settings ----------------------------------------------- */
html.a11y-z1 body{zoom:1.12}
html.a11y-z2 body{zoom:1.25}
html.a11y-z3 body{zoom:1.4}
html.a11y-contrast{
  --bg:#FFFFFF;--surface:#FFFFFF;--ink:#000000;--ink-soft:#000000;--muted:#1A1A1A;--faint:#262626;
  --line:#4D4D4D;--line-soft:#8C8C8C;--teal:#004E57;--teal-deep:#003A41;--walnut:#5E3210;--walnut-deep:#4A270C;
  --teal-wash:#FFFFFF;--walnut-wash:#FFFFFF;
}
html.a11y-contrast .form-note,html.a11y-contrast .cta p{color:#FFFFFF}
html.a11y-contrast .glow,html.a11y-contrast .rays{display:none}
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px;text-decoration-thickness:2px;font-weight:700}
html.a11y-links a:not(.btn){background:#FFF3B0;color:#000 !important}
html.a11y-font body,html.a11y-font body *:not(svg):not(svg *){font-family:Arial,"Segoe UI",Helvetica,sans-serif !important;letter-spacing:.01em !important}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.a11y-motion .reveal{opacity:1 !important;transform:none !important}

/* FOODx logo ----------------------------------------------------------- */
.brand .logo{height:36px;width:auto;display:block}
footer .brand .logo{height:40px}
@media(max-width:600px){.brand .logo{height:30px}}