/* ═══════════════════════════════════════════════════════════════
   שוקוליטלי — Chocolate Editorial
   Design system · typography · layout · sections
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/FrankRuhlLibre-300-hebrew.woff2") format("woff2");
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/FrankRuhlLibre-300-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/FrankRuhlLibre-700-hebrew.woff2") format("woff2");
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/FrankRuhlLibre-700-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/FrankRuhlLibre-900-hebrew.woff2") format("woff2");
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/FrankRuhlLibre-900-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Heebo-300-hebrew.woff2") format("woff2");
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Heebo-300-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Heebo-400-hebrew.woff2") format("woff2");
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Heebo-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Heebo-500-hebrew.woff2") format("woff2");
  unicode-range:
    U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Heebo-500-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ── 1. RESET ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ── 2. TOKENS ────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --bg: #faf5ea;
  --bg-warm: #f4ead6;
  --surface: #fffdf8;

  /* chocolate */
  --ink: #24100a;
  --choc: #4a1e0e;
  --choc-deep: #2b1207;
  --choc-black: #180903;
  --choc-mid: #7a3b1e;

  /* accents */
  --caramel: #c14a1b;
  --caramel-ink: #ad3d11;
  --caramel-lt: #ef7a3c;
  --gold: #b8842a;
  --gold-lt: #d8ab4e;

  /* lifted straight off the logo artwork, so type set on dark ground is
     the same cream as the cartouche rather than a near-miss neutral */
  --brand-cream: #fae6bf;
  --brand-brown: #752e21;

  /* praline fillings — flood colors */
  --fill-caramel: #d8813a;
  --fill-nougat: #b8722d;
  --fill-white: #e6d3ae;

  /* lines */
  --hair: rgba(74, 30, 14, 0.14);
  --hair-strong: rgba(74, 30, 14, 0.26);
  --hair-light: rgba(250, 245, 234, 0.18);

  /* type */
  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans: "Heebo", system-ui, -apple-system, sans-serif;

  /* one overline scale for every eyebrow/kicker on the site */
  --t-kicker: 0.72rem;
  --ls-kicker: 0.24em;
  --t-body: clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
  --t-lead: clamp(1.12rem, 1rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem);
  --t-h2: clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem);
  --t-display: clamp(2.8rem, 1.4rem + 5.6vw, 6.6rem);
  --t-hero: clamp(3.6rem, 0.5rem + 14vw, 13rem);

  /* space */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --sec-y: clamp(4.5rem, 3rem + 7vw, 11rem);
  --wrap: 1240px;
  --wrap-tight: 860px;

  /* motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 200ms;
  --d-mid: 420ms;
  --d-slow: 800ms;

  --radius: 4px;
  --header-h: 74px;

  /* footprint reserved for the two fixed corner controls (a11y, WhatsApp)
     so the cookie bar can never land on top of either */
  --float-size: 52px;
  --float-gap: calc(1rem + var(--float-size) + 0.75rem);
}

/* ── 3. BASE ──────────────────────────────────────────────────── */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* film grain — the whole site sits under it */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--caramel);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--caramel);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  right: 1rem;
  z-index: 10000;
  padding: 0.85rem 1.4rem;
  background: var(--choc-deep);
  color: var(--bg);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top var(--d-fast);
}

.skip-link:focus {
  top: 1rem;
}

/* ── 4. TYPE PRIMITIVES ───────────────────────────────────────── */

.kicker {
  font-family: var(--sans);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--caramel-ink);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.kicker::before {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.kicker--center {
  justify-content: center;
}

.kicker--center::after {
  content: "";
  width: clamp(24px, 4vw, 52px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.on-dark .kicker,
.kicker.on-dark {
  color: var(--gold-lt);
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--choc-deep);
}

.h2 {
  font-size: var(--t-h2);
  margin-bottom: 1.1rem;
}

.h3 {
  font-size: var(--t-h3);
  line-height: 1.18;
}

.display {
  font-size: var(--t-display);
  line-height: 0.98;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.62;
  color: rgba(36, 16, 10, 0.78);
  max-width: 46ch;
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark .h2,
.on-dark .h3 {
  color: var(--bg);
}

.on-dark .lead,
.on-dark p {
  color: rgba(250, 245, 234, 0.78);
}

.accent {
  color: var(--caramel);
}

/* an ink-drawn underline for a highlighted word */
.mark {
  position: relative;
  display: inline-block;
  color: var(--caramel);
}

.mark::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.06em;
  width: 100%;
  height: 0.055em;
  background: currentColor;
  opacity: 0.32;
  transform-origin: right;
}

/* ── 5. LAYOUT ────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--tight {
  max-width: var(--wrap-tight);
}

.section {
  padding-block: var(--sec-y);
  position: relative;
}

.section--warm {
  background: var(--bg-warm);
}

.section--dark {
  background: var(--choc-deep);
  color: var(--bg);
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 70% 50% at 20% 0%,
      rgba(216, 83, 30, 0.13),
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 45% at 85% 100%,
      rgba(184, 132, 42, 0.11),
      transparent 60%
    );
}

.sec-head {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.sec-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}

.sec-head--center .lead {
  margin-inline: auto;
}

.rule {
  height: 1px;
  background: var(--hair);
  border: 0;
}

/* ── 6. BUTTONS ───────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--caramel);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.02em 2.1em;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-mid) var(--e-out),
    color var(--d-mid);
  box-shadow: 0 2px 0 rgba(36, 16, 10, 0.1);
}

/* chocolate fills the button from the bottom on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--choc-deep);
  transform: translateY(101%);
  transition: transform 460ms var(--e-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn:hover,
.btn:focus-visible {
  box-shadow: 0 12px 28px -12px rgba(43, 18, 7, 0.5);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--choc-deep);
  box-shadow: inset 0 0 0 1.5px var(--hair-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-fg: var(--bg);
  box-shadow: inset 0 0 0 1.5px transparent;
}

.btn--light {
  --btn-bg: var(--bg);
  --btn-fg: var(--choc-deep);
}

.btn--light::before {
  background: var(--caramel);
}

.btn--light:hover,
.btn--light:focus-visible {
  --btn-fg: #fff;
}

/* outlined button for dark ground — replaces the per-instance inline
   overrides that used to be pasted onto .btn--ghost */
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #faf5ea;
  box-shadow: inset 0 0 0 1.5px rgba(250, 245, 234, 0.32);
}

.btn--outline-light::before {
  background: var(--bg);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
  --btn-fg: var(--choc-deep);
  box-shadow: inset 0 0 0 1.5px transparent;
}

.btn--sm {
  padding: 0.72em 1.5em;
  font-size: 0.86rem;
}

.btn__ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform var(--d-mid) var(--e-out);
}

.btn:hover .btn__ico {
  transform: translateX(-3px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.btn-row--start {
  justify-content: flex-start;
}

/* text link with a wiping underline */
.tlink {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: var(--caramel-ink);
  padding-bottom: 2px;
}

.tlink::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0.001);
  transform-origin: right;
  transition: transform 380ms var(--e-out);
}

.tlink:hover::after,
.tlink:focus-visible::after {
  transform: scaleX(1);
}

.on-dark .tlink {
  color: var(--gold-lt);
}

/* ── 7. HEADER ────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background var(--d-mid) var(--e-out),
    box-shadow var(--d-mid) var(--e-out);
}

.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
  opacity: 0;
  transition: opacity var(--d-mid);
}

/* dark glass bar — reads as intentional over both dark and cream */
.site-header.is-stuck {
  background: rgba(20, 8, 3, 0.82);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}

.site-header.is-stuck::after {
  background: rgba(216, 171, 78, 0.24);
}

.site-header.is-stuck .brand__name,
.site-header.is-stuck .nav__link {
  color: #f6ecd8;
}

.site-header.is-stuck .brand__sub,
.site-header.is-stuck .nav__link[aria-current="page"] {
  color: var(--gold-lt);
}

.site-header.is-stuck .nav__link::after {
  background: var(--gold-lt);
}

.site-header.is-stuck .nav-toggle span {
  background: #f6ecd8;
}

.site-header.is-stuck .nav__cta {
  --btn-bg: transparent;
  --btn-fg: #f6ecd8;
  box-shadow: inset 0 0 0 1px rgba(216, 171, 78, 0.55);
}

.site-header.is-stuck .nav__cta::before {
  background: var(--gold-lt);
}

.site-header.is-stuck .nav__cta:hover,
.site-header.is-stuck .nav__cta:focus-visible {
  --btn-fg: var(--choc-black);
}

.site-header.is-stuck::after {
  opacity: 1;
}

/* over the dark opening frame the chrome goes light */
.site-header.on-dark:not(.is-stuck) .brand__name,
.site-header.on-dark:not(.is-stuck) .nav__link {
  color: #f6ecd8;
}

.site-header.on-dark:not(.is-stuck) .brand__sub {
  color: var(--gold-lt);
}

.site-header.on-dark:not(.is-stuck) .nav__link[aria-current="page"] {
  color: var(--gold-lt);
}

.site-header.on-dark:not(.is-stuck) .nav__link::after {
  background: var(--gold-lt);
}

.site-header.on-dark:not(.is-stuck) .nav-toggle span {
  background: #f6ecd8;
}

.site-header.on-dark:not(.is-stuck) .nav__cta {
  --btn-bg: transparent;
  --btn-fg: #f6ecd8;
  box-shadow: inset 0 0 0 1px rgba(216, 171, 78, 0.55);
}

.site-header.on-dark:not(.is-stuck) .nav__cta::before {
  background: var(--gold-lt);
}

.site-header.on-dark:not(.is-stuck) .nav__cta:hover,
.site-header.on-dark:not(.is-stuck) .nav__cta:focus-visible {
  --btn-fg: var(--choc-black);
}

.site-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

/* The real cartouche carries the name and the descriptor already, so the
   bar takes the logo alone — repeating "שוקוליטלי" beside it said the same
   thing twice at two different weights. The drop shadow is what lets the
   cream badge hold its edge over the cream pages as well as the dark ones. */
.brand__logo {
  display: block;
  height: clamp(38px, 3.2vw, 50px);
  width: auto;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(58, 22, 8, 0.3));
  transition: transform 600ms var(--e-out);
}

.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
  transform: scale(1.04);
}

.brand__name {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--choc-deep);
  line-height: 1;
}

.brand__sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--caramel-ink);
  margin-top: 3px;
}

.nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.nav__link {
  position: relative;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--choc);
  padding-block: 0.35rem;
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--caramel);
  transform: scaleX(0.001);
  transform-origin: right;
  transition: transform 340ms var(--e-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--caramel-ink);
}

.nav__cta {
  flex: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  inset-inline: 11px;
  height: 1.6px;
  background: var(--choc-deep);
  transition:
    transform 320ms var(--e-out),
    opacity 200ms;
}

.nav-toggle span:nth-child(1) {
  top: 16px;
}
.nav-toggle span:nth-child(2) {
  top: 22px;
}
.nav-toggle span:nth-child(3) {
  top: 28px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.2rem var(--gutter) 2rem;
    /* solid — the 0.97 translucency let page text ghost through on
       devices where backdrop-filter fails (seen on a real iPhone) */
    background: var(--bg);
    border-bottom: 1px solid var(--hair);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--d-mid) var(--e-out),
      opacity var(--d-mid),
      visibility var(--d-mid);
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    font-size: 1.35rem;
    font-family: var(--serif);
    font-weight: 700;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--hair);
  }

  .nav__cta {
    margin-top: 1.2rem;
    align-self: flex-start;
  }

  /* the drop-down panel is always cream, so the light-chrome colors the
     header wears over dark ground (on-dark / is-stuck) would render the
     links cream-on-cream — inside the panel the ink always stays dark */
  .site-header.on-dark:not(.is-stuck) .nav__link,
  .site-header.is-stuck .nav__link {
    color: var(--choc);
  }

  .site-header.on-dark:not(.is-stuck) .nav__link[aria-current="page"],
  .site-header.is-stuck .nav__link[aria-current="page"] {
    color: var(--caramel-ink);
  }

  .site-header.on-dark:not(.is-stuck) .nav__link::after,
  .site-header.is-stuck .nav__link::after {
    background: var(--caramel);
  }

  .site-header.on-dark:not(.is-stuck) .nav__cta,
  .site-header.is-stuck .nav__cta {
    --btn-bg: var(--caramel);
    --btn-fg: #fff;
    box-shadow: 0 2px 0 rgba(36, 16, 10, 0.1);
  }

  .site-header.on-dark:not(.is-stuck) .nav__cta::before,
  .site-header.is-stuck .nav__cta::before {
    background: var(--choc-deep);
  }

  .site-header.on-dark:not(.is-stuck) .nav__cta:hover,
  .site-header.on-dark:not(.is-stuck) .nav__cta:focus-visible,
  .site-header.is-stuck .nav__cta:hover,
  .site-header.is-stuck .nav__cta:focus-visible {
    --btn-fg: #fff;
  }
}

/* ── 8. HERO — full-bleed cinematic ───────────────────────────── */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--choc-black);
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}

.hero__stage video,
.hero__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

/* scrim — holds the type legible and pushes the footage back */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 68% 58% at 50% 46%,
      rgba(13, 4, 2, 0.42) 0%,
      rgba(13, 4, 2, 0.74) 58%,
      rgba(13, 4, 2, 0.92) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(13, 4, 2, 0.75) 0%,
      transparent 24%,
      transparent 58%,
      rgba(13, 4, 2, 0.9) 100%
    );
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  padding-inline: var(--gutter);
  text-align: center;
  color: var(--bg);
}

/* the rule-flanked overline: same scale and tracking as .kicker, only the
   decoration differs, so every section label reads at one size */
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: clamp(1rem, 2.5vw, 2.2rem);
  text-indent: var(--ls-kicker);
}

/* the single deliberate exception: the film's title card, where the wide
   tracking is doing cinematic work rather than labelling a section */
.cinema__title .hero__eyebrow {
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-weight: 400;
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: clamp(28px, 7vw, 96px);
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(216, 171, 78, 0.85));
  flex: none;
}

.hero__eyebrow::after {
  background: linear-gradient(to right, transparent, rgba(216, 171, 78, 0.85));
}

/* left/right-aligned variant — only the leading rule */
.hero__eyebrow--start {
  justify-content: flex-start;
}

.hero__eyebrow--start::after {
  display: none;
}

.hero__title {
  font-size: var(--t-hero);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: #f6ecd8;
  text-shadow:
    0 2px 40px rgba(13, 4, 2, 0.85),
    0 0 120px rgba(216, 83, 30, 0.28);
  will-change: transform;
}

.hero__title .glow {
  color: var(--gold-lt);
}

.hero__sub {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.05rem, 0.75rem + 1.15vw, 1.9rem);
  color: rgba(246, 236, 216, 0.9);
  margin-top: clamp(1rem, 2.5vw, 1.9rem);
  letter-spacing: 0.02em;
}

.hero__lead {
  max-width: 44ch;
  margin: 1.1rem auto clamp(1.8rem, 3.5vw, 2.8rem);
  font-size: var(--t-body);
  font-weight: 300;
  color: rgba(246, 236, 216, 0.62);
  line-height: 1.7;
}

.hero .btn-row {
  justify-content: center;
  position: relative;
  z-index: 3;
}

.hero__scroll {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: rgba(216, 171, 78, 0.75);
  text-indent: 0.32em;
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--gold-lt), transparent);
  animation: scrollCue 2.4s var(--e-io) infinite;
}

/* ── 8b. FULL-BLEED STATEMENT ─────────────────────────────────── */

.statement {
  position: relative;
  min-height: 78svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--choc-black);
  padding-block: clamp(5rem, 10vw, 9rem);
}

.statement__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
}

.statement__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 62% 46% at 50% 42%,
      rgba(13, 4, 2, 0.68),
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      rgba(13, 4, 2, 0.92) 0%,
      rgba(13, 4, 2, 0.42) 34%,
      rgba(13, 4, 2, 0.46) 64%,
      rgba(13, 4, 2, 0.94) 100%
    );
  pointer-events: none;
}

.statement__inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
  padding-inline: var(--gutter);
  text-align: center;
  color: var(--bg);
}

.statement__inner .display {
  color: #f6ecd8;
  text-shadow: 0 2px 40px rgba(13, 4, 2, 0.7);
}

.statement__inner p {
  color: rgba(246, 236, 216, 0.68);
  max-width: 48ch;
  margin: 1.4rem auto 0;
  font-weight: 300;
}

@keyframes scrollCue {
  0%,
  100% {
    transform: scaleY(0.25);
    transform-origin: top;
    opacity: 0.35;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
  46% {
    transform-origin: bottom;
  }
  99% {
    transform: scaleY(0.02);
    transform-origin: bottom;
  }
}

/* ── 8. CINEMA — the box film ─────────────────────────────────── */

.cinema {
  position: relative;
  background: #241007;
}

.cinema__pin {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Two layers of the same take: the poster paints frame one, and the canvas
   takes its place the moment the scrub begins. There used to be a looping
   video in between, but any loop long enough to show motion also meant the
   swap to frame one landed on a different camera position — a visible jump.
   The take only holds still for a third of a second, so the loop was buying
   nothing that the poster does not already give. */
.cinema__canvas,
.cinema__fallback,
.cinema__fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinema__fallback {
  z-index: 1;
}

.cinema__canvas {
  z-index: 3;
  opacity: 0;
  transition: opacity 320ms linear;
}

/* the canvas takes over once the first frame is decoded */
.cinema.is-live .cinema__canvas {
  opacity: 1;
}

.cinema__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 88% 78% at 50% 46%,
      transparent 58%,
      rgba(18, 7, 2, 0.5) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(18, 7, 2, 0.78) 0%,
      rgba(18, 7, 2, 0.42) 22%,
      transparent 46%,
      transparent 84%,
      rgba(18, 7, 2, 0.55) 100%
    );
}

/* the opening title card */
.cinema__title {
  position: absolute;
  inset-inline: 0;
  top: clamp(4.6rem, 11vh, 8.5rem);
  z-index: 4;
  text-align: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}

/* Sized to sit in the clean band above the box rather than across it: the
   lid already carries the wordmark, and a hero-scale name on top of it had
   the two fighting for the same square inch. */
.cinema__name {
  font-size: clamp(2rem, 0.9rem + 3.4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--brand-cream);
  text-shadow:
    0 2px 34px rgba(18, 7, 2, 0.92),
    0 0 100px rgba(216, 131, 58, 0.3);
}

/* The cue lives at the foot of the frame, clear of the product —
   on the lid it sat gold-on-brown and disappeared. */
.cinema__cue {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.4rem, 4vh, 2.8rem);
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  color: rgba(246, 236, 216, 0.92);
  text-shadow: 0 1px 14px rgba(18, 7, 2, 0.95);
  text-indent: 0.3em;
}

.cinema__cue i {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--gold-lt), transparent);
  animation: scrollCue 2.4s var(--e-io) infinite;
}

/* ── chapters — each one grounded in a frame of the film ── */

.chapter {
  position: absolute;
  inset: 0;
  z-index: 6;
  visibility: hidden;
  pointer-events: none;
}

.chapter.is-active {
  visibility: visible;
}

/* Every chapter is grounded in a real frame from the same shoot rather
   than in a flat tint, so the run never reads as an empty gradient. */
.chapter__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  overflow: hidden;
}

.chapter__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the source footage is graded very dark; lift it so the frame reads */
  filter: brightness(1.14) contrast(1.03) saturate(1.05);
}

/* one scrim treatment for every chapter — the copy always reads, and the
   typography no longer flips between cream and chocolate mid-run */
.chapter__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 76% 62% at 50% 50%,
      rgba(18, 7, 2, 0.62) 0%,
      rgba(18, 7, 2, 0.44) 55%,
      rgba(18, 7, 2, 0.68) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(18, 7, 2, 0.72) 0%,
      transparent 30%,
      transparent 70%,
      rgba(18, 7, 2, 0.6) 100%
    );
}

.chapter__panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem;
  opacity: 0;
}

.chapter.is-active .chapter__panel {
  pointer-events: auto;
}

.chapter__kicker {
  /* same overline treatment as .kicker / .hero__eyebrow site-wide */
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: rgba(246, 236, 216, 0.72);
  margin-bottom: 1rem;
  text-indent: var(--ls-kicker);
}

.chapter__title {
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 5rem);
  line-height: 1.02;
  color: #f6ecd8;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(18, 7, 2, 0.6);
}

.chapter__text {
  max-width: 46ch;
  margin: 1.2rem auto 1.6rem;
  font-weight: 300;
  color: rgba(246, 236, 216, 0.88);
  text-shadow: 0 1px 18px rgba(18, 7, 2, 0.6);
}

.chapter__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1.8rem;
}

.chapter__facts span {
  padding: 0.5em 1.2em;
  font-size: 0.88rem;
  color: #f6ecd8;
  background: rgba(24, 9, 3, 0.42);
  border: 1px solid rgba(246, 236, 216, 0.24);
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.chapter__facts b {
  font-family: var(--serif);
  font-weight: 900;
}

.chapter__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* progress dots for the chapter run */
.cinema__progress {
  position: absolute;
  inset-inline-end: clamp(1rem, 3vw, 2.4rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  opacity: 0;
  transition: opacity 400ms;
  pointer-events: none;
}

.cinema__progress.is-on {
  opacity: 1;
}

.cinema__progress i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 245, 234, 0.34);
  transition:
    background 300ms,
    transform 300ms;
}

.cinema__progress i.is-here {
  background: #faf5ea;
  transform: scale(1.5);
}

@media (max-width: 760px) {
  /* no room beside the copy at this width */
  .cinema__progress {
    display: none;
  }

  /* narrow frames need a heavier scrim under a full-width column of copy */
  .chapter__scrim {
    background: linear-gradient(
      to bottom,
      rgba(18, 7, 2, 0.78) 0%,
      rgba(18, 7, 2, 0.6) 40%,
      rgba(18, 7, 2, 0.66) 100%
    );
  }
}

/* ── static cinema (reduced motion / no JS) ───────────────────── */

.cinema--static .cinema__pin {
  height: auto;
}

.cinema--static .cinema__canvas,
.cinema--static .cinema__progress {
  display: none;
}

.cinema--static .cinema__fallback {
  position: relative;
  height: 100svh;
  min-height: 560px;
  opacity: 1 !important;
}

.cinema--static .cinema__fallback img {
  position: absolute;
  inset: 0;
}

/* Reduced motion: each chapter becomes a still panel over its own frame. */
.cinema--static .chapter {
  position: relative;
  inset: auto;
  visibility: visible;
  min-height: 72svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  /* no canvas in this mode, so each chapter carries its own frame from
     the same take — a still experience, not a stripped one */
  background:
    var(--still) center / cover no-repeat,
    var(--choc-black);
}

.cinema--static .chapter__frame,
.cinema--static .chapter__scrim {
  opacity: 1;
}

.cinema--static .chapter__panel {
  position: relative;
  inset: auto;
  opacity: 1;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
}

/* ── 9b. THE CUT (one macro take, scrubbed) ──────────────────────
   Same engine as the film: poster paints, canvas takes over. The
   subject sits centre-left in the take and the caramel runs left, so
   the copy holds the right-hand third — clear of the product, and the
   natural reading start in RTL. */

.cut {
  position: relative;
  background: var(--choc-black, #140702);
}

.cut__pin {
  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.cut__canvas,
.cut__fallback,
.cut__fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cut__fallback {
  z-index: 1;
}

.cut__canvas {
  z-index: 2;
  opacity: 0;
  transition: opacity 320ms linear;
}

.cut.is-live .cut__canvas {
  opacity: 1;
}

.cut__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 78% 70% at 34% 54%,
      transparent 42%,
      rgba(14, 6, 2, 0.55) 100%
    ),
    linear-gradient(
      to left,
      rgba(14, 6, 2, 0.86) 0%,
      rgba(14, 6, 2, 0.62) 26%,
      transparent 58%
    );
}

.cut__copy {
  position: absolute;
  z-index: 4;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(46ch, 47%);
  padding-inline: clamp(1.5rem, 3.4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
  text-align: start;
}

/* Sized so "החוץ פריך." holds one line in this column — at hero scale it
   broke to a word per line and read as four stacked fragments. */
.cut__copy .display {
  font-size: clamp(2rem, 0.9rem + 3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--brand-cream);
  text-shadow: 0 2px 34px rgba(14, 6, 2, 0.85);
}

.cut__copy .display em {
  font-style: italic;
  color: var(--gold-lt, #e8c47c);
}

.cut__text {
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.14rem);
  line-height: 1.72;
  color: rgba(246, 236, 216, 0.9);
  text-shadow: 0 1px 16px rgba(14, 6, 2, 0.9);
  max-width: 34ch;
}

@media (max-width: 860px) {
  /* Portrait leaves no clean column beside the praline, so the copy
     moves under it and the scrim turns vertical to match. */
  .cut__copy {
    inset-block: auto 0;
    inset-inline: 0;
    width: auto;
    padding-block: clamp(1.6rem, 6vw, 3rem);
    gap: 0.85rem;
  }

  .cut__vignette {
    background:
      radial-gradient(
        ellipse 92% 60% at 50% 34%,
        transparent 46%,
        rgba(14, 6, 2, 0.5) 100%
      ),
      linear-gradient(
        to top,
        rgba(14, 6, 2, 0.92) 0%,
        rgba(14, 6, 2, 0.68) 34%,
        transparent 64%
      );
  }
}

/* reduced motion / no JS: the opening frame with the copy set beside it */
.cut--static .cut__pin {
  height: auto;
  min-height: 76svh;
}

.cut--static .cut__canvas {
  display: none;
}

.cut--static .cut__fallback {
  opacity: 1 !important;
}

/* ── 10. JOURNEY (scrollytelling) ─────────────────────────────── */

.journey__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.journey__sticky {
  position: sticky;
  top: calc(var(--header-h) + 4vh);
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  background: var(--choc-deep);
  box-shadow: 0 40px 80px -40px rgba(43, 18, 7, 0.55);
}

.journey__media {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.journey__media:first-child {
  opacity: 1;
}

.journey__media img,
.journey__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the process footage is graded around 18% luminance — lift it so the
     step you are reading is actually legible as a picture */
  filter: brightness(1.28) contrast(1.05) saturate(1.08);
}

.journey__num {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 3;
  font-family: var(--serif);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(250, 245, 234, 0.22);
  pointer-events: none;
}

/* The steps column drives the scroll; keep its rhythm generous enough for
   one step to own the reading line, but not so long that the sticky frame
   releases into a screen of empty ground after step 04. */
.journey__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2.6rem, 10vh, 6rem);
  padding-block: 6vh 2vh;
}

.journey__step {
  opacity: 0.32;
  transition: opacity 500ms var(--e-out);
}

.journey__step.is-active {
  opacity: 1;
}

.journey__step h3 {
  font-size: var(--t-h3);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.journey__step h3 em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--caramel);
}

.journey__step p {
  color: rgba(36, 16, 10, 0.74);
  font-weight: 300;
  max-width: 40ch;
}

.on-dark .journey__step p {
  color: rgba(246, 236, 216, 0.72);
}

.on-dark .journey__step h3 em {
  color: var(--gold-lt);
}

.on-dark .journey__sticky {
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.9);
}

@media (max-width: 860px) {
  .journey__grid {
    grid-template-columns: 1fr;
  }

  .journey__sticky {
    position: relative;
    top: 0;
    aspect-ratio: 4 / 3;
  }

  .journey__steps {
    gap: 2.6rem;
    padding-block: 2.5rem 0;
  }

  .journey__step {
    opacity: 1;
  }
}

/* ── 11. HORIZONTAL GALLERY ───────────────────────────────────── */

.gallery {
  background: var(--choc-black);
  color: var(--bg);
  overflow: hidden;
}

.gallery__pin {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.gallery__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 50% 50%,
    rgba(216, 171, 78, 0.07),
    transparent 72%
  );
  pointer-events: none;
}

.gallery__track {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  padding-inline: max(var(--gutter), 7vw);
  will-change: transform;
}

.gcard {
  flex: none;
  width: clamp(260px, 27vw, 372px);
  text-align: center;
}

.gcard--intro {
  width: clamp(280px, 30vw, 420px);
  text-align: start;
}

.gcard--intro .h2 {
  color: #f6ecd8;
}

.gcard--intro p {
  color: rgba(246, 236, 216, 0.6);
  font-weight: 300;
}

/* a lit plinth for each praline */
.gcard__shot {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 58% 34% at 50% 74%,
      rgba(216, 171, 78, 0.2),
      transparent 68%
    ),
    linear-gradient(
      165deg,
      rgba(246, 236, 216, 0.055) 0%,
      rgba(246, 236, 216, 0.012) 42%,
      transparent 100%
    );
  box-shadow: inset 0 0 0 1px rgba(246, 236, 216, 0.07);
  transition:
    transform 620ms var(--e-out),
    box-shadow 620ms var(--e-out);
}

.gcard:hover .gcard__shot {
  transform: translateY(-10px);
  box-shadow:
    inset 0 0 0 1px rgba(216, 171, 78, 0.4),
    0 40px 60px -40px rgba(0, 0, 0, 0.9);
}

/* the cut-outs have wildly different aspect ratios — cap both axes so
   a wide praline fills as generously as a tall one */
.gcard__shot img {
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 80%;
  filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.8));
  transition: transform 700ms var(--e-out);
}

.gcard:hover .gcard__shot img {
  transform: scale(1.08) rotate(-2deg);
}

.gcard__idx {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--gold-lt);
  opacity: 0.7;
}

.gcard h3 {
  font-size: 1.25rem;
  margin-top: 1.3rem;
  color: #f6ecd8;
}

.gcard p {
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(246, 236, 216, 0.55);
  margin-top: 0.35rem;
}

@media (max-width: 860px) {
  .gallery__pin {
    min-height: auto;
    padding-block: var(--sec-y);
  }

  .gallery__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }

  .gallery__track::-webkit-scrollbar {
    display: none;
  }

  .gcard {
    scroll-snap-align: center;
  }
}

/* ── 12. WORKSHOP CARDS ───────────────────────────────────────── */

.wcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.2vw, 2rem);
}

/* The lift lives in CSS and the tilt in JS, composed through custom
   properties — so a card still has a designed hover on touch devices and
   before the first pointermove, instead of only once GSAP takes over. */
.wcard {
  --lift: 0px;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--lift), 0) rotateX(var(--rx))
    rotateY(var(--ry));
  transition:
    transform 400ms var(--e-out),
    box-shadow 400ms var(--e-out),
    border-color 400ms;
}

.wcard::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(to left, var(--caramel), var(--gold));
  transform: scaleX(0.001);
  transform-origin: right;
  transition: transform 520ms var(--e-out);
}

.wcard:hover,
.wcard:focus-within {
  --lift: -7px;
  box-shadow: 0 34px 60px -34px rgba(43, 18, 7, 0.42);
  border-color: transparent;
}

.wcard:hover::before,
.wcard:focus-within::before {
  transform: scaleX(1);
}

.wcard__idx {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--caramel);
  letter-spacing: 0.1em;
  margin-bottom: 1.4rem;
}

.wcard h3 {
  font-size: var(--t-h3);
  margin-bottom: 0.7rem;
}

.wcard p {
  font-weight: 300;
  color: rgba(36, 16, 10, 0.72);
  font-size: 0.96rem;
}

/* only the description absorbs slack, so prices line up across cards */
.wcard p:not([class]) {
  flex: 1;
}

.wcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.tag {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0.32em 0.85em;
  border-radius: 100px;
  background: rgba(216, 83, 30, 0.09);
  color: var(--caramel-ink);
}

.tag--gold {
  background: rgba(184, 132, 42, 0.13);
  color: #8c6318;
}

/* "החל מ־ | 75 ₪ | לאדם" — the number is a <bdi> so the ₪ and the digits
   stay one LTR run instead of being flung to the end of the RTL line. */
/* .wcard p sets 0.96rem and out-specifies a lone class, so the price rule
   has to match on the card too or the number renders at body size */
.wcard .wcard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--choc-deep);
}

.wcard__price small {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 300;
  color: rgba(36, 16, 10, 0.66);
}

/* ── 13. ABOUT / COUNTERS ─────────────────────────────────────── */

.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.about__portrait {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -44px rgba(43, 18, 7, 0.6);
}

.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.about__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43, 18, 7, 0.35), transparent 45%);
}

/* הכיתוב יושב ישירות מעל התמונה. בלי שכבת הצללה מתחתיו הניגודיות
   תלויה בפיקסל — נמדד 2.65 באזורים הבהירים של התמונה. ה-scrim
   מבטיח 4.5:1 בכל תמונה, בלי להסתיר אותה. */
.about__badge {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 3.5rem 1.4rem 1.4rem;
  background: linear-gradient(
    to top,
    rgba(22, 9, 3, 0.82) 0%,
    rgba(22, 9, 3, 0.62) 45%,
    rgba(22, 9, 3, 0) 100%
  );
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--bg);
}

.quote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.42;
  color: var(--choc);
  margin-block: 1.6rem;
  padding-inline-start: 1.4rem;
  border-inline-start: 2px solid var(--caramel);
}

.counters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.4rem);
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
}

.counter__num {
  direction: ltr;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--caramel);
  display: flex;
  align-items: baseline;
}

.counter__label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: rgba(36, 16, 10, 0.6);
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .about__grid {
    grid-template-columns: 1fr;
  }
}

/* ── 13b. SOCIAL PROOF ────────────────────────────────────────── */

.proof {
  background: var(--bg-warm);
  border-block: 1px solid var(--hair);
}

/* credentials strip — deliberately quiet, it sets up the quotes */
.marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem clamp(1.2rem, 3vw, 2.6rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.marks__item {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--caramel-ink);
}

/* the rating links back to the Google listing it is quoted from */
.marks__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  transition: color var(--d-mid);
}

.marks__rating:hover {
  color: var(--caramel);
}

.marks__stars {
  /* one star as an icon — five filled stars beside "4.7" would read as a
     perfect score, which it is not */
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.marks__item + .marks__item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex: none;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

.qcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.6rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  transition:
    transform var(--d-mid) var(--e-out),
    box-shadow var(--d-mid) var(--e-out),
    border-color var(--d-mid);
}

/* A decorative mark, not punctuation — hence the high „”-form, whose ink
   sits near the top of its em box and so stays in the card's padding
   instead of landing on the first line of the quote. */
.qcard::before {
  content: "”";
  position: absolute;
  top: 0.5rem;
  inset-inline-start: clamp(1rem, 2vw, 1.6rem);
  font-family: var(--serif);
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--caramel);
  opacity: 0.17;
  pointer-events: none;
}

.qcard:hover {
  transform: translateY(-5px);
  border-color: var(--hair-strong);
  box-shadow: 0 26px 50px -28px rgba(43, 18, 7, 0.35);
}

.qcard blockquote {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.24rem);
  font-weight: 400;
  line-height: 1.62;
  color: var(--choc-deep);
}

.qcard figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
}

.qcard__name {
  font-weight: 600;
  color: var(--choc);
}

.qcard__meta {
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: rgba(36, 16, 10, 0.66);
}

/* ── 14. INFO STRIP ───────────────────────────────────────────── */

.info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.info__item {
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
}

.on-dark .info__item {
  border-color: var(--hair-light);
}

/* טלפון ומייל כאן הם קישורים לחיצים — צריכים 24px גובה מגע */
.info__item dd a {
  display: inline-block;
  padding-block: 0.15rem;
}

.info__item dt {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--caramel);
  margin-bottom: 0.6rem;
}

.on-dark .info__item dt {
  color: var(--gold-lt);
}

.info__item dd {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--choc-deep);
  line-height: 1.45;
}

.on-dark .info__item dd {
  color: var(--bg);
}

/* ── 15. CTA BAND ─────────────────────────────────────────────── */

.cta {
  position: relative;
  background: var(--choc-deep);
  color: var(--bg);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse 60% 60% at 50% 0%,
      rgba(216, 83, 30, 0.22),
      transparent 65%
    ),
    radial-gradient(
      ellipse 80% 50% at 50% 100%,
      rgba(184, 132, 42, 0.14),
      transparent 62%
    );
}

.cta .display {
  color: var(--bg);
  max-width: 18ch;
  margin-inline: auto;
}

.cta p {
  color: rgba(250, 245, 234, 0.7);
  max-width: 44ch;
  margin: 1.2rem auto 2.4rem;
  font-weight: 300;
}

.cta .btn-row {
  justify-content: center;
}

/* ── 16. PAGE HERO (subpages) ─────────────────────────────────── */

.phero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(4rem, 10vw, 8rem))
    clamp(3rem, 6vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 60% at 70% 20%,
    rgba(216, 83, 30, 0.1),
    transparent 65%
  );
}

/* dark cinematic variant — a still frame behind the page title */
.phero--dark {
  background: var(--choc-black);
  color: var(--bg);
  padding-block: calc(var(--header-h) + clamp(6rem, 14vw, 11rem))
    clamp(5rem, 9vw, 8rem);
}

.phero--dark::before {
  display: none;
}

.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  will-change: transform;
}

.phero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phero--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 70% 60% at 30% 50%,
      rgba(13, 4, 2, 0.72),
      transparent 74%
    ),
    linear-gradient(
      to bottom,
      rgba(13, 4, 2, 0.9) 0%,
      rgba(13, 4, 2, 0.5) 40%,
      rgba(13, 4, 2, 0.96) 100%
    );
}

.phero--dark .phero__title {
  color: #f6ecd8;
  text-shadow: 0 2px 36px rgba(13, 4, 2, 0.8);
}

.phero--dark .lead {
  color: rgba(246, 236, 216, 0.72);
}

.phero__title {
  font-size: var(--t-display);
  line-height: 0.98;
  max-width: 14ch;
}

.phero .lead {
  margin-top: 1.4rem;
}

.phero__float {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 20px 26px rgba(43, 18, 7, 0.2));
  will-change: transform;
}

.phero__float--a {
  width: clamp(90px, 14vw, 200px);
  top: 22%;
  left: 6%;
}

.phero__float--b {
  width: clamp(60px, 9vw, 130px);
  bottom: 8%;
  left: 26%;
  opacity: 0.9;
}

@media (max-width: 760px) {
  .phero__float--b {
    display: none;
  }

  .phero__float--a {
    width: 100px;
    top: auto;
    bottom: 4%;
    left: 2%;
    opacity: 0.55;
  }
}

/* page-transition tint: the colour of the praline you came through */
.fill-veil {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
}

/* ── 17. EDITORIAL PRODUCT GRID ───────────────────────────────── */

.pgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
}

.pitem {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
  transition:
    transform 500ms var(--e-out),
    box-shadow 500ms var(--e-out);
}

.pitem:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -36px rgba(43, 18, 7, 0.4);
}

.pitem__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
}

.pitem__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--e-out);
}

.pitem:hover .pitem__media img {
  transform: scale(1.05);
}

.pitem__body {
  padding: clamp(1.3rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pitem__body h3 {
  font-size: var(--t-h3);
  margin-bottom: 0.6rem;
}

.pitem__body p {
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(36, 16, 10, 0.72);
  flex: 1;
}

.pitem__body .wcard__meta {
  margin-top: 1.2rem;
}

/* size variants — editorial rhythm, not a uniform grid */
.pitem--wide {
  grid-column: span 4;
}
.pitem--wide .pitem__media {
  aspect-ratio: 16 / 10;
}

.pitem--tall {
  grid-column: span 2;
}
.pitem--tall .pitem__media {
  aspect-ratio: 3 / 4;
}

.pitem--half {
  grid-column: span 3;
}
.pitem--half .pitem__media {
  aspect-ratio: 4 / 3;
}

.pitem--third {
  grid-column: span 2;
}
.pitem--third .pitem__media {
  aspect-ratio: 1;
}

@media (max-width: 900px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pitem--wide,
  .pitem--half {
    grid-column: span 2;
  }

  .pitem--tall,
  .pitem--third {
    grid-column: span 1;
  }
}

@media (max-width: 560px) {
  .pgrid {
    grid-template-columns: 1fr;
  }

  .pitem--wide,
  .pitem--half,
  .pitem--tall,
  .pitem--third {
    grid-column: span 1;
  }
}

/* ── 17b. WORKSHOP SPLIT ROWS ─────────────────────────────────── */

.wsplit {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2.4rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hair);
}

.wsplit--flip {
  grid-template-columns: 1.1fr 0.9fr;
}

.wsplit--flip .wsplit__media {
  order: 2;
}

.wsplit__media {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 70px -44px rgba(43, 18, 7, 0.55);
}

.wsplit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wsplit__badge {
  position: absolute;
  top: 1.1rem;
  inset-inline-start: 1.1rem;
  padding: 0.45em 1.1em;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  background: var(--caramel);
  border-radius: 100px;
  box-shadow: 0 10px 24px -10px rgba(24, 9, 3, 0.6);
  unicode-bidi: plaintext;
}

.wsplit__body .h3 {
  margin-block: 0.2rem 0.8rem;
}

.wsplit__body > p {
  font-weight: 300;
  color: rgba(36, 16, 10, 0.76);
  max-width: 52ch;
}

@media (max-width: 860px) {
  .wsplit,
  .wsplit--flip {
    grid-template-columns: 1fr;
  }

  .wsplit--flip .wsplit__media {
    order: 0;
  }

  .wsplit__media {
    position: relative;
    top: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ── 18. PRICING TABLE ────────────────────────────────────────── */

.ptable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.4rem;
  font-size: 0.92rem;
}

.ptable caption {
  text-align: start;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--caramel);
  margin-bottom: 0.8rem;
}

.ptable th,
.ptable td {
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--hair);
  text-align: start;
}

.ptable th {
  font-weight: 300;
  color: rgba(36, 16, 10, 0.72);
}

.ptable td {
  text-align: end;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--choc-deep);
}

.ptable tr:last-child th,
.ptable tr:last-child td {
  border-bottom: 0;
}

/* ── 19. INCLUDES LIST ────────────────────────────────────────── */

.checks {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.checks li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(36, 16, 10, 0.78);
}

.checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--caramel);
}

.on-dark .checks li {
  color: rgba(250, 245, 234, 0.78);
}

/* ── 20. FAQ ──────────────────────────────────────────────────── */

.faq {
  border-top: 1px solid var(--hair);
}

.faq__item {
  border-bottom: 1px solid var(--hair);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: start;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  font-weight: 700;
  color: var(--choc-deep);
  transition: color var(--d-fast);
}

.faq__q:hover {
  color: var(--caramel-ink);
}

.faq__q i {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
}

.faq__q i::before,
.faq__q i::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1.5px;
  background: var(--caramel);
  transition: transform 380ms var(--e-out);
}

.faq__q i::after {
  transform: rotate(90deg);
}

.faq__q[aria-expanded="true"] i::after {
  transform: rotate(0deg);
}

.faq__a {
  overflow: hidden;
  height: 0;
}

.faq__a > div {
  padding-bottom: 1.6rem;
  font-weight: 300;
  color: rgba(36, 16, 10, 0.74);
  max-width: 62ch;
}

/* ── 21. CONTACT ──────────────────────────────────────────────── */

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 860px) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
}

.clist {
  display: flex;
  flex-direction: column;
}

.clist__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--hair);
  transition: padding-inline-start 340ms var(--e-out);
}

.clist__row:hover {
  padding-inline-start: 0.5rem;
}

.clist__row:first-child {
  border-top: 1px solid var(--hair);
}

.clist__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(216, 83, 30, 0.09);
  font-size: 1.05rem;
}

.clist__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(36, 16, 10, 0.66);
}

.clist__value {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--choc-deep);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(36, 16, 10, 0.62);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
  font-size: 0.98rem;
  font-weight: 300;
  transition:
    border-color var(--d-fast),
    box-shadow var(--d-fast);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--caramel);
  outline-offset: 2px;
  border-color: var(--caramel);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field [aria-invalid="true"] {
  border-color: var(--caramel-ink);
  box-shadow: 0 0 0 2px rgba(173, 61, 17, 0.18);
}

.field__error {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--caramel-ink);
}

.form-card {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
}

/* ── טופס יצירת קשר ─────────────────────────────────────────── */

.form__send {
  width: 100%;
  justify-content: center;
}

.form__send + .form__send {
  margin-top: 0.7rem;
}

.form__status {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  font-weight: 400;
  text-align: center;
  min-height: 1.2em;
}

.form__status.is-error {
  color: var(--caramel-ink);
}

.form__status.is-ok {
  color: #1d6b3f;
}

.form__note {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(36, 16, 10, 0.7);
  text-align: center;
}

/* ── 22. LEGAL PAGES ──────────────────────────────────────────── */

.legal {
  max-width: 780px;
}

.legal h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  margin-block: 2.6rem 0.9rem;
}

.legal h3 {
  font-size: 1.1rem;
  margin-block: 1.6rem 0.6rem;
}

.legal p,
.legal li {
  font-weight: 300;
  color: rgba(36, 16, 10, 0.82);
  margin-bottom: 0.85rem;
}

.legal ul {
  padding-inline-start: 1.4rem;
  list-style: disc;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal a {
  color: var(--caramel-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 22b. LEGACY LEGAL PAGES (terms / accessibility) ──────────── */

.legal-page {
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) var(--sec-y);
}

.legal-page .container {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.legal-content h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  margin-bottom: 0.6rem;
}

.legal-content h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  margin-block: 2.6rem 0.9rem;
}

.legal-content h3,
.legal-content h4 {
  font-size: 1.08rem;
  margin-block: 1.6rem 0.6rem;
}

.legal-content p,
.legal-content li {
  font-weight: 300;
  color: rgba(36, 16, 10, 0.84);
  margin-bottom: 0.8rem;
}

.legal-content ul,
.legal-content ol {
  padding-inline-start: 1.5rem;
  margin-bottom: 1rem;
}

.legal-content ul {
  list-style: disc;
}

.legal-content ol {
  list-style: decimal;
}

.legal-content a {
  color: var(--caramel-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-toc,
.legal-box,
.legal-highlight {
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 4px;
  margin-block: 1.4rem;
}

.legal-highlight {
  border-inline-start: 3px solid var(--caramel);
}

/* כותרת תוכן העניינים היא h2 מטעמי היררכיה, אבל צריכה להיראות
   כתווית קטנה ולא כמו כותרת של פרק */
.legal-content .legal-toc__title {
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  margin-block: 0 0.7rem;
}

.legal-updated,
.legal-meta {
  font-size: 0.84rem;
  color: rgba(36, 16, 10, 0.66);
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.2rem;
  font-size: 0.92rem;
}

.legal-content th,
.legal-content td {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--hair);
  text-align: start;
  font-weight: 300;
}

.legal-content th {
  background: var(--bg-warm);
  font-weight: 500;
}

/* ── 23. FOOTER ───────────────────────────────────────────────── */

.site-footer {
  position: relative;
  background: var(--choc-black);
  color: rgba(250, 245, 234, 0.72);
  padding-block: clamp(3.5rem, 6vw, 6rem) 2rem;
  font-size: 0.92rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to left,
    transparent,
    rgba(216, 171, 78, 0.35),
    transparent
  );
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--hair-light);
}

@media (max-width: 760px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
}

.footer__logo {
  display: block;
  width: clamp(160px, 16vw, 210px);
  height: auto;
}

.footer__brand p {
  margin-top: 1rem;
  max-width: 34ch;
  font-weight: 300;
  color: rgba(250, 245, 234, 0.6);
}

.footer__title {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold-lt);
  margin-bottom: 1.1rem;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* יעד מגע של 24px לפחות — הריווח עובר מ-gap אל padding של הקישור
   עצמו, כך שהמראה נשמר אבל האזור הלחיץ גדל */
.footer__list a {
  color: rgba(250, 245, 234, 0.72);
  transition: color var(--d-fast);
  display: inline-block;
  width: fit-content;
  padding-block: 0.25rem;
}

.footer__list a:hover,
.footer__list a:focus-visible {
  color: var(--gold-lt);
}

.footer__legal {
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(250, 245, 234, 0.72);
}

/* יעד מגע של 24px לפחות לקישורים המשפטיים — הם חייבים להיות
   נגישים גם באצבע, בלי לשנות את הריווח הוויזואלי של השורה */
.footer__legal a {
  color: inherit;
  transition: color var(--d-fast);
  display: inline-block;
  padding-block: 0.32rem;
}

.footer__legal a:hover {
  color: var(--gold-lt);
}

/* ── 24. COOKIE BANNER ────────────────────────────────────────── */

/* A single quiet line, inset so it clears both floating controls:
   the a11y trigger sits bottom-inline-end, WhatsApp bottom-inline-start. */
#cookie-banner {
  position: fixed;
  inset-inline: var(--float-gap);
  bottom: 0.85rem;
  z-index: 9500;
  width: fit-content;
  max-width: calc(100% - var(--float-gap) * 2);
  margin-inline: auto;
  padding: 0.55rem 0.6rem 0.55rem 1.15rem;
  background: rgba(24, 9, 3, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(250, 245, 234, 0.14);
  border-radius: 100px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  color: rgba(250, 245, 234, 0.86);
  font-size: 0.8rem;
}

#cookie-banner[hidden] {
  display: none;
}

.cookie__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  justify-content: center;
}

.cookie__inner p {
  font-weight: 300;
  line-height: 1.4;
}

@media (max-width: 760px) {
  /* on a phone the two floats own the corners — sit above them instead */
  #cookie-banner {
    inset-inline: 0.75rem;
    bottom: calc(0.85rem + 52px + 0.75rem);
    width: auto;
    max-width: none;
    border-radius: 14px;
    padding: 0.75rem 1rem;
  }
}

.cookie__inner a {
  color: var(--gold-lt);
  text-decoration: underline;
}

.cookie__actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* ── 25. A11Y WIDGET ──────────────────────────────────────────── */

#a11y-trigger {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 9600;
  width: var(--float-size);
  height: var(--float-size);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #fff;
  background: var(--choc-deep);
  border-radius: 50%;
  box-shadow: 0 10px 26px -8px rgba(24, 9, 3, 0.6);
  transition: transform var(--d-fast) var(--e-out);
}

#a11y-trigger svg {
  width: 26px;
  height: 26px;
  color: var(--gold-lt);
  transition: color var(--d-mid);
}

#a11y-trigger:hover {
  transform: scale(1.08);
}

#a11y-trigger:hover svg {
  color: #fff;
}

#a11y-panel {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 4.8rem;
  z-index: 9600;
  width: min(280px, calc(100vw - 2rem));
  padding: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 30px 60px -24px rgba(43, 18, 7, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--d-mid),
    transform var(--d-mid) var(--e-out),
    visibility var(--d-mid);
}

#a11y-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#a11y-panel h2 {
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.a11y-grid button {
  padding: 0.55rem 0.4rem;
  font-size: 0.78rem;
  background: var(--bg-warm);
  border: 1px solid var(--hair);
  border-radius: 4px;
  color: var(--choc-deep);
  transition:
    background var(--d-fast),
    color var(--d-fast);
}

.a11y-grid button:hover {
  background: rgba(216, 83, 30, 0.1);
}

.a11y-grid button.active {
  background: var(--caramel);
  border-color: var(--caramel);
  color: #fff;
}

.a11y-grid .full {
  grid-column: span 2;
}

/* ── 26. A11Y WIDGET STATE OVERRIDES ──────────────────────────── */

.a11y-links a:not(.btn) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.a11y-contrast-high {
  --bg: #ffffff;
  --bg-warm: #f5f5f5;
  --surface: #ffffff;
  --ink: #000000;
  --choc-deep: #000000;
  --choc: #1a1a1a;
  --caramel: #a52f00;
  --caramel-ink: #8c2800;
  --hair: rgba(0, 0, 0, 0.5);
}

.a11y-contrast-high body::after {
  display: none;
}

.a11y-contrast-invert {
  filter: invert(1) hue-rotate(180deg);
}

.a11y-contrast-invert img,
.a11y-contrast-invert video {
  filter: invert(1) hue-rotate(180deg);
}

.a11y-text-115 {
  font-size: 18.4px;
}
.a11y-text-130 {
  font-size: 20.8px;
}
.a11y-text-150 {
  font-size: 24px;
}

.a11y-lines-160 body {
  line-height: 1.6 !important;
}
.a11y-lines-200 body {
  line-height: 2 !important;
}

/* ── 27. REVEAL + MOTION ──────────────────────────────────────── */

/* JS marks the document once GSAP is wired so nothing hides without it */
.js-motion [data-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js-motion [data-reveal] {
    opacity: 1 !important;
  }
}

.a11y-reduce-motion .js-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

.a11y-reduce-motion .hero__scroll i {
  animation: none;
}

/* Word-by-word title entrance. JS splits the heading into .word spans and
   removes .is-split if it can't, so an unsplit heading is never hidden. */
.js-motion .is-split .word {
  display: inline-block;
  clip-path: inset(0 0 108% 0);
  transform: translateY(0.32em);
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .is-split .word {
    clip-path: none !important;
    transform: none !important;
  }
}

.a11y-reduce-motion .js-motion .is-split .word {
  clip-path: none !important;
  transform: none !important;
}

/* ── 27b. FLOATING WHATSAPP ───────────────────────────────────── */

/* The main enquiry channel for this business. Sits opposite the a11y
   trigger and only appears once the opening frame is behind you. */
.wa-float {
  position: fixed;
  inset-inline-start: 1rem;
  bottom: 1rem;
  z-index: 9600;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: var(--float-size);
  padding-inline: 0.85rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: #faf5ea;
  background: var(--choc-deep);
  border: 1px solid rgba(216, 171, 78, 0.35);
  border-radius: 100px;
  box-shadow: 0 14px 32px -14px rgba(24, 9, 3, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity var(--d-mid) var(--e-out),
    transform var(--d-mid) var(--e-out),
    visibility var(--d-mid),
    background var(--d-mid),
    border-color var(--d-mid);
}

.wa-float.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.wa-float:hover,
.wa-float:focus-visible {
  background: var(--caramel);
  border-color: var(--caramel-lt);
  transform: translateY(-3px) scale(1.02);
}

.wa-float svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: #6fd08c;
  transition: color var(--d-mid);
}

.wa-float:hover svg,
.wa-float:focus-visible svg {
  color: #fff;
}

@media (max-width: 560px) {
  /* label drops away, the mark stays — the corner stays uncluttered */
  .wa-float {
    width: var(--float-size);
    padding-inline: 0;
    justify-content: center;
  }

  .wa-float span {
    display: none;
  }
}

/* ── 28. UTILITIES ────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-lg {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.center {
  text-align: center;
}

/* ── PICTURE WRAPPERS ─────────────────────────────────────────── */

/* <picture> is an inline box with no height of its own. Wrapping an <img>
   in one silently breaks `height: 100%` on the image — the percentage then
   resolves against the wrapper instead of the sized container, and the
   image collapses to its intrinsic aspect ratio inside a taller box.
   `display: contents` removes the wrapper from layout entirely so every
   existing `.parent img { height: 100% }` rule keeps working. */
picture {
  display: contents;
}

/* ── 29. MEASURE ──────────────────────────────────────────────── */

/* Running text tops out around 60 characters — past that the eye loses
   the line return. Headings and chips are exempt: they are sized, not
   read in long runs. */
.wrap p:not([class]),
.lead,
.chapter__text,
.journey__step p,
.wcard p,
.qcard blockquote,
.statement__inner p,
.cta p {
  max-width: 60ch;
}

.sec-head--center .lead,
.cta p,
.statement__inner p {
  margin-inline: auto;
}

/* ── 30. ATMOSPHERE ───────────────────────────────────────────── */

/* The grain sits over everything at a low level; dark sections take a
   little more of it, which is where film stock actually shows its tooth. */
.section--dark::after,
.cinema::after,
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.gallery,
.section--dark {
  position: relative;
}

/* ── 31. PAGE ENTRANCE ────────────────────────────────────────── */

/* Plays once per session. The veil is painted by CSS before any script
   runs, and JS is only responsible for taking it away — so a failed
   script can never leave the page behind a curtain. */
/* The entrance runs entirely in CSS so it begins at first paint rather
   than waiting for GSAP to arrive. Driving it from JS delayed the veil's
   exit until ~640 ms and pushed LCP out by nearly a second, because the
   heading it covers *is* the LCP element. JS only removes the node. */
.curtain {
  /* only ever shown on the session's first view — otherwise it would
     paint and be torn down again on every navigation */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--choc-black);
  pointer-events: none;
  animation: curtain-lift 900ms var(--e-out) forwards;
}

.curtain__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 74px;
  height: 74px;
  opacity: 0;
  animation: curtain-mark 900ms var(--e-out) forwards;
}

@keyframes curtain-lift {
  0%,
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes curtain-mark {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

html.is-entering .curtain {
  display: block;
}

html.is-entering body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .curtain {
    display: none;
  }
}

.a11y-reduce-motion .curtain {
  display: none;
}

/* ── 32. MAGNETIC BUTTONS ─────────────────────────────────────── */

/* JS feeds the offset in as custom properties so the CSS hover lift and
   the pointer pull compose instead of overwriting one another. */
.btn {
  --mx: 0px;
  --my: 0px;
  --btn-lift: 0px;
  translate: var(--mx) calc(var(--my) + var(--btn-lift));
}

.btn:hover,
.btn:focus-visible {
  --btn-lift: -2px;
}

.btn:active {
  --btn-lift: 0px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    translate: none;
  }
}

/* ── 27. ALLERGEN NOTICE ──────────────────────────────────────── */

/* חובת גילוי אלרגנים היא של העסק. ההודעה חייבת להיות קריאה
   וגלויה — לא הערת שוליים. */
.allergen {
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
}

.allergen__box {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-inline-start: 3px solid var(--caramel);
  border-radius: 4px;
}

.allergen__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-family: var(--serif);
}

.allergen__box p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.65;
  font-weight: 300;
}

.allergen__box p:last-child {
  margin-bottom: 0;
}

/* קישורי inline בתוך האזהרה — יעד מגע של 24px לפחות */
.allergen__box a {
  color: var(--caramel-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  padding-block: 0.2rem;
}

.allergen__meta {
  padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
  font-size: 0.84rem !important;
  color: rgba(36, 16, 10, 0.7);
}