/* ═══════════════════════════════════════════════════════════════
   שוקוליטלי — 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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/IBMPlexSansHebrew-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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/IBMPlexSansHebrew-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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSansHebrew-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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSansHebrew-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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSansHebrew-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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSansHebrew-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;
  /* was "Heebo" — which is Google's Hebrew cut of Roboto, and reads as
     the default of every Israeli site. A reader's note on the live site
     was that the fonts felt machine-made from the first moment; the
     buttons and corners were the loudest part of that, but the body face
     was the rest of it. IBM Plex Sans Hebrew has actual editorial
     character and sits with Frank Ruhl Libre rather than under it.
     Self-hosted in fonts/ like everything else — the CSP forbids
     third-party requests, and the legal pages state the site calls out
     to nobody. Do not swap this for a Google Fonts link. */
  --sans: "IBM Plex Sans Hebrew", 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;
  /* Chips, badges and the cookie bar used to be 100px pills, and the
     buttons with them. A reader's note on the live site was that "the
     fonts and the buttons and the rounded frames feel artificial-
     intelligence from the first moment" — and the fully-rounded pill is
     the clearest single tell of a generated page. A boutique chocolate
     box is squared and foil-lined, so the type-adjacent shapes are too.
     Keep the WhatsApp float a pill: that one is a platform convention
     people recognise, not a stylistic choice. */
  --radius-chip: 2px;
  --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: var(--radius);
  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);
}

/* The hover state used to lift the button on a wide soft shadow, which is
   the other half of the generated-page look — a glow standing in for
   depth. The chocolate fill from ::before already carries the whole
   interaction; the button just needs to feel pressed. */
.btn:hover,
.btn:focus-visible {
  box-shadow: 0 1px 0 rgba(36, 16, 10, 0.16);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.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;
  /* This scrim used to run 0.92 / 0.42 / 0.94 and crushed a lit studio
     photograph of the collection into a black rectangle. It sits between
     two dark film sequences, so the page opened with nine unbroken
     screens of near-black and readers called the site "too dark" even
     though the palette below the fold is cream. Lightening it here is the
     one place the run can breathe without giving up the cinematic
     sequence: the photograph itself becomes the warm beat between the two
     films. The type above it holds because .statement__inner carries its
     own weight — measured on the delivered pixels, worst pixel. */
  background:
    radial-gradient(
      ellipse 62% 46% at 50% 42%,
      rgba(13, 4, 2, 0.5),
      transparent 74%
    ),
    linear-gradient(
      to bottom,
      rgba(13, 4, 2, 0.74) 0%,
      rgba(13, 4, 2, 0.3) 34%,
      rgba(13, 4, 2, 0.34) 64%,
      rgba(13, 4, 2, 0.78) 100%
    );
  pointer-events: none;
}

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

/* Once the section scrim was lightened so the photograph could read, a lit
   praline sitting directly behind the body copy took it to 3.30:1 — the
   display title still cleared its 3.0 large-text floor, but the paragraph
   did not clear 4.5. Same fix as .cinema__foot::before: a local, feathered
   scrim on the copy block rather than re-darkening the whole section,
   which would undo the reason for the change. Radial so it never reads as
   a panel behind centred type. Measured on the delivered pixels, worst
   pixel — do not weaken without re-measuring. */
.statement__inner::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 68% 68% at 50% 56%,
    rgba(13, 4, 2, 0.58) 0%,
    rgba(13, 4, 2, 0.48) 52%,
    transparent 82%
  );
}

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

/* was 0.68 and weight 300 — that was tuned against a near-black scrim.
   With the photograph now reading through, thin low-opacity type is the
   first thing to fall below 4.5:1. */
.statement__inner p {
  color: rgba(248, 240, 224, 0.92);
  max-width: 48ch;
  margin: 1.4rem auto 0;
  font-weight: 400;
  text-shadow: 0 1px 18px rgba(13, 4, 2, 0.9);
}

@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%
    ),
    /* The bottom ramp used to start at 84%, which was below the foot: the
       lead and the buttons sat straight on the frame, and a gold edge of
       the box lid measured 1.46:1 against cream type there. Sampling the
       delivered pixels — not the DOM — is the only way that shows up.
       The ramp now begins above the foot and is deep enough to clear
       4.5:1 on the worst pixel in the band. Do not raise these stops. */
    linear-gradient(
        to bottom,
        rgba(18, 7, 2, 0.78) 0%,
        rgba(18, 7, 2, 0.42) 22%,
        transparent 46%,
        transparent 58%,
        rgba(18, 7, 2, 0.34) 70%,
        rgba(18, 7, 2, 0.74) 86%,
        rgba(18, 7, 2, 0.86) 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 foot of the opening frame: the offer, the two calls to action, and
   the scroll cue, stacked in the one band of the take where light type
   survives. Everything above this is the box, and the lid carries a cream
   cartouche that swallowed cream type whole.
   --cue-lift is written by a11y.js and holds the exact height the cookie
   bar occupies from the bottom of the viewport. Hard-coded offsets were
   not an option: the bar wraps to two lines at some widths. */
.cinema__foot {
  position: absolute;
  inset-inline: 0;
  bottom: calc(clamp(1.2rem, 3.4vh, 2.4rem) + var(--cue-lift, 0px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--gutter);
  text-align: center;
  pointer-events: none;
}

/* The foot needs a scrim of its own, for the same reason .about__badge
   does: it is light type over a photograph. Deepening the section
   vignette was not enough — a gold seam on the box front runs straight
   through the lead's line, and it measured 1.36:1 against cream on the
   delivered pixels while the band around it looked perfectly dark. A
   global gradient strong enough to kill that one line would flatten the
   whole frame, so the scrim is local and feathered.
   Measured on the screenshot, not the DOM: worst pixel in the band, not
   the average. Do not weaken these stops without re-measuring. */
.cinema__foot::before {
  content: "";
  position: absolute;
  inset: -7rem -10% -6rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(14, 6, 2, 0.4) 14%,
    rgba(14, 6, 2, 0.74) 26%,
    rgba(14, 6, 2, 0.74) 100%
  );
}

/* The offer, stated before any scrolling. The first screen used to carry
   the name and nothing else, so a first-time visitor could not tell
   whether this was a shop, a studio or a blog — the single most repeated
   piece of feedback the site got. Held narrow so it never runs the full
   width of a desktop frame. */
.cinema__lead {
  max-width: 38ch;
  margin: 0;
  font-size: clamp(0.95rem, 0.88rem + 0.34vw, 1.16rem);
  line-height: 1.5;
  color: rgba(250, 230, 191, 0.95);
  text-shadow:
    0 2px 22px rgba(18, 7, 2, 0.95),
    0 1px 3px rgba(18, 7, 2, 0.9);
}

/* .cinema__foot is pointer-events:none so the film underneath stays
   clickable-through; the buttons have to opt back in or they are
   decorative. */
.cinema__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(0.9rem, 2.2vh, 1.4rem);
  pointer-events: auto;
}

@media (max-width: 560px) {
  .cinema__actions .btn {
    padding: 0.86em 1.5em;
    font-size: 0.88rem;
  }
}

/* The cue lives at the foot of the frame, clear of the product —
   on the lid it sat gold-on-brown and disappeared.
   --cue-lift is written by a11y.js and holds the exact height the cookie
   bar occupies from the bottom of the viewport. Without it the cue sat
   *behind* the bar, so a first-time visitor saw a still box and no hint
   at all that the page scrolls. Hard-coded offsets were not an option:
   the bar wraps to two lines at some widths. */
/* The cue used to be a bordered card carrying two lines of copy, because
   it was the only thing on the opening frame telling a first-time visitor
   the page moved at all. The buttons above it now carry that weight, so it
   is back to a single quiet line — three stacked blocks at the foot of the
   frame was one too many, and the card competed with the calls to action
   it sits under. It stays a real link so keyboard and touch users get the
   same journey. */
.cinema__cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: clamp(0.9rem, 2.4vh, 1.5rem);
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  color: rgba(250, 245, 234, 0.82);
  text-shadow: 0 1px 14px rgba(18, 7, 2, 0.95);
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
  transition: color var(--d-fast) var(--e-io);
}

.cinema__cue:hover,
.cinema__cue:focus-visible {
  color: rgba(250, 245, 234, 1);
}

.cinema__cue-lead {
  font-family: var(--serif, inherit);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

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

@media (max-width: 560px) {
  .cinema__cue-lead {
    font-size: 0.86rem;
    letter-spacing: 0.1em;
  }
  .cinema__cue i {
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema__cue i {
    animation: none;
  }
}

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

/* ── the chapters ──
   These used to be absolutely-positioned overlays inside the pin, faded in
   and out by the same ScrollTrigger that scrubbed the film. That bought
   3.2 screens of pinned scroll in which nothing on screen moved, and
   readers read it as the page being stuck rather than as a sequence: the
   finger travelled and the picture did not. They are ordinary scrolling
   panels now.

   Each one still sits on a real frame from the same take — the first on
   the frame the film ends on, so the pin releases straight into it with no
   cut — so the run reads as one piece of footage rather than as four
   tinted cards. This is also, almost exactly, the layout the
   reduced-motion path already used, which is why the .cinema--static
   overrides below shrank to nothing. */
.chapters {
  position: relative;
  z-index: 6;
}

.chapter {
  position: relative;
  min-height: 76svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    var(--still) center / cover no-repeat,
    var(--choc-black);
}

/* A phone gets a portrait crop of the same photograph rather than the wide
   one cover-cropped into a tall viewport, which threw away most of the
   frame. Only one of the two files is ever fetched. */
@media (max-width: 860px) {
  .chapter {
    background-image: var(--still-sm);
  }
}

/* The stills are deferred until the chapter is close: they are four full
   photographs, and a visitor who never scrolls past the film should not
   pay for them. warmChapters() adds .is-warm. Without the script the
   images simply load normally — the guard is scoped to .js-motion. */
.js-motion .chapter:not(.is-warm) {
  background-image: none;
}

/* 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;
  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: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter);
}

/* Visible by default so the copy survives a script that never runs; the
   motion build hides it and hands the reveal to the scroll. */
.js-motion .chapter__panel {
  opacity: 0;
}

/* A local, feathered scrim under the copy — the same move .cinema__foot
   and .statement__inner already make, and for the same reason.

   The chapters used to read against the film's final macro frame, which
   is dark everywhere. They now read against full-brightness stills, and
   measured on the delivered pixels the body copy fell to 3.28:1 against
   the brightest praline behind it. Darkening .chapter__scrim enough to
   fix that flattened the whole still into a black rectangle, which is
   the complaint this section exists to answer. This darkens only the
   ellipse the type occupies and leaves the frame itself lit. */
.chapter__panel::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 72% 66% at 50% 50%,
    rgba(11, 4, 1, 0.68) 0%,
    rgba(11, 4, 1, 0.56) 52%,
    transparent 84%
  );
}

.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: var(--radius-chip);
  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;
}

/* The pin loses its 100svh in this mode, so a bottom-anchored cue would
   drop to the foot of the whole stacked section. Pin it to the foot of the
   opening frame instead. */
.cinema--static .cinema__cue {
  bottom: auto;
  top: calc(max(100svh, 560px) - 9rem - var(--cue-lift, 0px));
}

.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: the chapters already lay out as scrolling panels, so all
   this mode has to do is skip the reveal. */
.cinema--static .chapter__panel {
  opacity: 1;
}

/* ── 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;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.6rem, 4vh, 3.2rem);
}

.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;
}

/* The section head, lifted out of the rail — see the note in index.html.
   Held to a reading measure so it never runs the full width of a desktop
   frame above a row of narrow cards. */
.gallery__head {
  padding-inline: max(var(--gutter), 7vw);
  max-width: 52ch;
  text-align: start;
}

/* The trailing card in the rail is a single call to action, not a
   product. It carried .gcard--intro purely to borrow that class's
   width, which stopped existing when the heading moved out of the rail. */
.gcard--cta {
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__head .h2 {
  color: #f6ecd8;
}

.gallery__head p:not(.hero__eyebrow) {
  color: rgba(246, 236, 216, 0.72);
  font-weight: 300;
  margin-block-end: 0;
}

/* 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: var(--radius-chip);
  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: var(--radius-chip);
  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);
}

/* Builder credit. Quieter than the legal line around it — it is an
   attribution, not something the visitor came for. */
.footer__credit {
  opacity: 0.82;
}

.footer__credit a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(250, 245, 234, 0.35);
}

.footer__credit a:hover {
  text-decoration-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: var(--radius-chip);
  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: var(--radius);
  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);
}

/* ── 33. REVIEWS ──────────────────────────────────────────────── */

/* Site reviews reuse .qcard for the frame, so a Google quote on the home
   page and a visitor review here read as the same object. Only the parts
   a Google quote does not have live below. */

.rcard {
  gap: 1.1rem;
}

/* The ” mark collides with a row of stars in the same corner. */
.rcard::before {
  content: none;
}

.rcard__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rcard__stars {
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.rcard__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.5rem;
}

.rcard__photos a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--hair);
}

.rcard__photos img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--d-mid) var(--e-out);
}

.rcard__photos a:hover img {
  transform: scale(1.05);
}

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

.rcard__meta {
  font-size: var(--t-kicker);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(43, 18, 7, 0.6);
}

.rsummary {
  margin-top: 0.6rem;
}

.rnote {
  margin-top: 1.6rem;
  text-align: center;
  font-weight: 300;
  color: rgba(43, 18, 7, 0.78);
}

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

.rgoogle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.6rem;
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--hair);
  text-align: center;
}

.rgoogle p {
  margin: 0;
  font-weight: 300;
}

/* ── the star picker ──
   Radios in DOM order 5→1 and a row reversal, so `~` can reach every star
   *after* the checked one — CSS has no previous-sibling combinator, and
   this is the one shape that lights the right stars without script. */

.rstars {
  border: 0;
  padding: 0;
  margin-bottom: 1.1rem;
}

.rstars legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--choc);
}

.rstars__row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
}

.rstars__row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rstars__row label {
  cursor: pointer;
  padding: 0.1rem 0.12rem;
  font-size: 1.9rem;
  line-height: 1.15;
  color: rgba(74, 30, 14, 0.26);
  transition: color var(--d-fast) var(--e-io);
}

.rstars__row label::before {
  content: "★";
}

.rstars__row input:checked ~ label,
.rstars__row label:hover,
.rstars__row label:hover ~ label {
  color: var(--gold);
}

.rstars__row input:focus-visible + label {
  outline: 2px solid var(--caramel);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── uploads ── */

.rupload {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.rupload__item {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hair);
}

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

.rupload__drop {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(24, 9, 3, 0.82);
  color: #faf5ea;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.rupload__drop:hover {
  background: var(--caramel-ink);
}

/* The honeypot must be reachable to a bot parsing the DOM and invisible
   to everyone else, so display:none is out.
   The usual `left:-9999px` is wrong here: this document is RTL, and a
   negative left is real horizontal overflow — it stretched scrollWidth to
   11,101px against a 1,440px viewport and pushed the whole page off
   screen. The clip-path pattern occupies no space at all. */
.rhp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.rconsent {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(43, 18, 7, 0.75);
}

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

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

/* Google reviews run from one word to eight lines. A grid would leave a
   crater under every short one, so this block flows in columns and each
   card is kept whole. */
.gquotes {
  columns: 3 260px;
  column-gap: clamp(1.2rem, 2.4vw, 2rem);
}

.grcard {
  break-inside: avoid;
  display: block;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
}

.grcard blockquote p {
  margin: 0 0 0.6rem;
}

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

.grcard figcaption {
  margin-top: 1.1rem;
}

/* A review below the display floor can be approved, but the database will
   not serve it. Say so in the panel rather than letting it look broken. */
.adm__badge.is-hidden-review {
  background: rgba(193, 74, 27, 0.12);
  color: var(--caramel);
  border-color: rgba(193, 74, 27, 0.35);
}