/* Hallmark · route: custom (bespoke) · full stamp in tokens.css.
 * Hebrew, RTL. Logical properties for flow; physical corners only for
 * overlays inside frames, on purpose. No letter-spacing, no italic anywhere.
 * Surfaces in order: the film (dark, pinned) · paper (wall, bridge)
 * · paper-2 (worked with) · paper (studio) · plum (contact). */

@import url("tokens.css?v=35");   /* bump on every tokens change: an @import is cached hard, and a stale copy drops new tokens silently */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-muted) transparent;
  scroll-behavior: smooth;             /* anchors only; no wheel hijack, no lerp */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-menu-open { overflow-y: hidden; }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b { font-weight: 600; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}
.hero :focus-visible,
.contact :focus-visible,
.sticky-cta:focus-visible { outline-color: var(--color-focus-light); }

/* Latin runs inside Hebrew: timecodes, the clock, the email. */
.ltr, .tc {
  direction: ltr;
  unicode-bidi: isolate;
}
.tc { font-variant-numeric: tabular-nums; }

/* ---------- the bar: fixed, serif, difference-blended so it reads on the film and on paper ---------- */
.top {
  position: fixed;
  inset: clamp(0.5rem, 1.2vw, 2.4rem) 0 auto 0;          /* sits a little down from the edge, as Lusion's does */
  z-index: var(--z-bar);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: clamp(5rem, 3.4rem + 2.4vw, 8.5rem);       /* 80 to 136px */
  padding: 0 clamp(1.25rem, 2.2vw, 4.5rem);
  direction: ltr;                                        /* logo left, pills right, his call; the labels stay Hebrew */
  color: var(--color-ink);
  font-family: var(--font-bar);             /* Rubik: the geometric face the bar wants, with real Hebrew */
  font-weight: 400;
  font-size: var(--text-meta);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top a, .top button { white-space: nowrap; }
.top__mark {
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.95rem, 0.75rem + 0.35vw, 1.25rem);
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-xs);
}
.top__mark:hover { text-decoration: underline; }
.top__right {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.top { transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.top.is-hidden { transform: translateY(-140%); }
.top--dark { color: var(--color-light); }   /* set by app.js while the film is under the bar */
.top__right { gap: clamp(0.5rem, 0.6vw, 1rem); }
/* Pills as on Lusion: one solid dark, one light grey, the same on the film and on
   paper. Solid fills, no blend, so the grain never shows through them. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 1.6em;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: clamp(0.95rem, 0.6rem + 0.6vw, 1.6rem);     /* 15 to 26px; the pill lands at 45 to 78px tall */
  font-weight: 700;                     /* Kav Geo Bold */
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-rule);            /* on paper: a grey a step under the band */
  color: var(--color-ink);
  transition: background 260ms var(--ease-out), color 260ms var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.top--dark .pill { background: var(--color-paper); }   /* on the film: paper-light */
.pill:hover { background: var(--brand-red); color: var(--color-paper); }         /* hover flips into the brand red */
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pill--fill, .top--dark .pill--fill { background: var(--brand-red); color: var(--color-paper); }   /* the call to action wears the mark's red */
.pill--fill:hover, .top--dark .pill--fill:hover { background: var(--color-paper); color: var(--brand-red); }   /* and inverts on hover */
.pill__dot { width: 0.3em; height: 0.3em; border-radius: 50%; background: currentColor; flex: none; }
.pill__dot--two { box-shadow: -0.5em 0 0 currentColor; margin-inline-start: 0.5em; }
.top__cta { display: none; }
@media (min-width: 60rem) { .top__cta { display: inline-flex; } }
.menu__close {
  appearance: none;
  background: none;
  border: 0;
  padding: var(--space-xs) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
  text-decoration: none;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.top__menu:hover, .menu__close:hover { text-decoration: underline; }
.top__menu:active, .menu__close:active { opacity: 0.7; }

/* ---------- hero: the film, full size, pinned; the sentence on it ---------- */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  min-height: 34rem;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--bar-h) var(--gutter) var(--space-xl);
  color: var(--color-light);
  overflow: clip;
}
.hero__film {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-dark);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.04;                 /* plain alpha, no blend mode: a blended full-screen layer is a repaint every frame */
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-scrim) 0%, transparent 30%, transparent 70%, var(--color-scrim) 100%);
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  font-size: var(--text-meta);
  color: var(--color-light-2);
}
.hero__meta span { white-space: nowrap; }
.hero__body {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}
@media (min-width: 60rem) {
  .hero__body {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2xl);
  }
}
.hero__line {
  font-size: var(--text-hero);            /* smaller than the wall title on purpose: the film is the hero, the sentence is its caption */
  font-weight: 600;
  line-height: 1.05;
  max-width: 25ch;                        /* three authored lines, each on one line: measured at the title's own size */
  overflow-wrap: anywhere;
  min-width: 0;
}
@media (max-width: 39.99rem) {
  /* the stripe and the bar assume one row each (nowrap); the shared token's
     floor (2.75rem = 44px) was too large to fit either sentence on one line
     at ANY phone width, not just the narrowest ones — this scales smoothly
     across the whole mobile range instead of stopping short at ~416px */
  .hero__line { font-size: clamp(1.5rem, 8vw, 2.8rem); }   /* measured: the longest line ("פרסומות שנועדו למכור." at 1.06em) is 10.9px wide per 1px of font, so 8vw keeps it at 0.87 of the viewport, inside the gutters from 320px up */
}
.hero__line .line { display: block; overflow: clip; }
.hero__line .line > span { display: block; padding-bottom: 0.08em; text-wrap: balance; }   /* a line that must wrap on a phone breaks evenly, not with one word orphaned */
.hero__line .line--light { font-weight: 300; }
/* lines two and three keep their spans as single-line hooks (the fit step in app.js measures them);
   the red strike and the red underline that used to be drawn on them are gone (round 34) */
.hero__line .line > .hero__stripe { display: inline-block; white-space: nowrap; }
.hero__line .line > .hero__line--bar { display: inline-block; white-space: nowrap; }
/* the pulse lives on an inner span, not .hero__line--bar itself: that outer
   span is also the direct child the entrance animation (rise) targets, and
   animation is a shorthand — a second rule setting it here would just lose
   to that rule's higher specificity instead of layering on top of it */
.hero__pulse {
  display: inline-block;
  font-size: 1.06em;                      /* a touch more prominent than line one */
}
.hero__ask { display: grid; gap: var(--space-lg); }   /* no ch cap here: ch is measured at body size, and 34ch of body type squeezed the title into a 550px column */   /* no ch cap here: ch is measured at body size, and 34ch of body type squeezed the title into a 550px column */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.hero__foot {
  display: grid;
  gap: var(--space-lg);
  max-width: 38ch;
  justify-self: end;                      /* the far side from the sentence: left, in RTL */
  margin-bottom: clamp(1.5rem, 4vh, 3.5rem);   /* clear of the next section's edge, which slides over the hero almost as soon as you scroll */
}
.hero__lede {
  font-size: var(--text-lede);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-light);          /* full light: the film behind it cuts to colour */
}

.cta {
  font-size: var(--text-lede);
  font-weight: 400;
  color: var(--color-light);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  padding-block: var(--space-xs);
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.cta:hover { text-decoration-thickness: 4px; }
.cta:active { opacity: 0.75; }

/* The one orchestrated entrance: the two lines rise out of a mask once the
   fonts have landed; the rest fades behind them. Gated on .js so a script
   failure never hides the headline. */
.js:not(.fonts-in) .hero__line .line > span { transform: translateY(110%); }
.js:not(.fonts-in) .hero__foot,
.js:not(.fonts-in) .hero__meta { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fonts-in .hero__line .line > span {
    animation: rise var(--dur-enter) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 120ms + 150ms);
  }
  .fonts-in .hero__foot,
  .fonts-in .hero__meta {
    animation: fade 600ms var(--ease-out) 650ms both;
  }
}
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Everything after the hero slides over it. */
.wall, .with, .pitch, .process, .studio, .contact {
  position: relative;
  z-index: var(--z-base);
  background: var(--color-paper);
}

/* ---------- the wall: films, credited like films ---------- */
.wall { padding-block: var(--space-3xl) var(--space-4xl); }

.wall__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding-inline: var(--gutter);
}
.wall__title {
  font-size: var(--text-giant);
  font-weight: 600;
  line-height: 0.95;
}
.wall__aside {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
}
.wall__note {
  max-width: var(--measure);
  font-size: var(--text-lede);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-ink-2);
}
.wall__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 3.5rem);
  row-gap: clamp(2rem, 3.5vw, 7rem);          /* v29: rows, not a scatter */
  padding: var(--space-3xl) var(--gutter) 0;
  align-items: start;
}

.frame { grid-column: 1 / -1; min-width: 0; }
.frame__fig {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: clip;
  container-type: inline-size;
  color: var(--film-ink);
}
/* Every film fits inside 85% of the screen height, whatever the screen: the cap is derived from the film's
   own ratio and the viewport, so a portrait on a 3440x1440 screen gets 688px of width instead of a rem cap
   that gave it 352 on every desktop. Narrow columns still win (min with 100%). */
@media (min-width: 40rem) {
  .frame--916 .frame__fig { max-width: min(100%, calc(85vh * 9 / 16)); margin-inline: auto; }
  .frame--11 .frame__fig  { max-width: min(100%, calc(85vh * 3 / 4));  margin-inline: auto; }
  .frame--1 .frame__fig, .frame--4 .frame__fig { max-width: min(100%, calc(85vh * 4 / 3)); margin-inline: auto; }
}
/* The colour layer is 20% taller than the frame so it can drift under the
   mask. Everything that must stay inside the visible frame (tags, timecodes,
   the type tiles) sits beside it, not inside it. */
.frame__film {
  position: absolute;
  inset: -10% 0;
}
.frame__inner {
  position: absolute;
  inset: 0;
  background: var(--film);
  transition: transform var(--dur-long) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .frame:hover .frame__inner { transform: scale(1.03); }
}
/* The slate number is ornament, drawn from a data attribute so it never
   enters the accessibility tree or the contrast audit as text. */
.frame__num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26cqw;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.16;
  pointer-events: none;
}
.frame__num::after { content: attr(data-num); }
/* Two tiles carry type instead of a number, the way a wall of real work mixes stills, type and cards. */
.frame__script {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10%;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 5.2cqw, 6rem);
  line-height: 1.3;
  text-align: center;
}
.frame__card {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: var(--space-xs);
  padding: 8% 9%;
}
.frame__card b {
  font-size: clamp(1.5rem, 8.5cqw, 9rem);
  font-weight: 600;
  line-height: 1.05;
}
.frame__card span {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3cqw, 2.4rem);
}
.frame__tag,
.frame__tc {
  position: absolute;
  bottom: 0;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-meta);
  line-height: 1;
  white-space: nowrap;
}
.frame__tag { right: 0; }   /* start side in RTL, on purpose physical */
.frame__fig:has(.frame__card) .frame__tag { top: 0; bottom: auto; }   /* the title card owns the bottom corner */
.frame__tc  { left: 0; }
/* portrait tiles: the tag stays in the corner like every other tile (a chip in the middle of the frame sat on
   the subject); only its size follows the tile's width */
.frame--916 .frame__tag {
  max-width: 90%;
  padding: clamp(0.3rem, 2cqw, 0.6rem) clamp(0.55rem, 3.5cqw, 1rem);
  font-size: clamp(0.7rem, 4cqw, 1rem);
}
.frame__credit {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-body);
  line-height: 1.35;
}
.frame__title { font-weight: 400; }
.frame__by {
  font-family: var(--font-serif);
  color: var(--color-ink-2);
}

@media (min-width: 60rem) {
  /* rows, each of one kind: the opener, three portraits, three portraits, the two 16:9 side by side,
     then the 4:3 and the 3:4 each centred. Mixed ratios never share a row, so no row has ragged bottoms. */
  .frame--1  { grid-column: 3 / 11; }
  .frame--2  { grid-column: 1 / 5; }
  .frame--6  { grid-column: 5 / 9; }
  .frame--3  { grid-column: 9 / 13; }
  .frame--5  { grid-column: 1 / 5; }
  .frame--9  { grid-column: 5 / 9; }
  .frame--7  { grid-column: 9 / 13; }
  .frame--8  { grid-column: 1 / 7; }
  .frame--10 { grid-column: 7 / 13; }
  .frame--4  { grid-column: 3 / 11; }
  .frame--11 { grid-column: 4 / 10; }
}
@media (max-width: 39.99rem) {
  .wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-sm);
    row-gap: var(--space-2xl);
  }
  .frame--1 { grid-column: 1 / -1; }
  .frame--2, .frame--6 { grid-column: span 1; }
  .frame--3, .frame--5, .frame--9, .frame--7 { grid-column: span 1; }
  .frame--4, .frame--8, .frame--10, .frame--11 { grid-column: 1 / -1; }
  .frame__credit { font-size: var(--text-meta); }
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .frame--1  { grid-column: 1 / 13; }
  .frame--2  { grid-column: 1 / 5; }
  .frame--6  { grid-column: 5 / 9; }
  .frame--3  { grid-column: 9 / 13; }
  .frame--5  { grid-column: 1 / 5; }
  .frame--9  { grid-column: 5 / 9; }
  .frame--7  { grid-column: 9 / 13; }
  .frame--8  { grid-column: 1 / 7; }
  .frame--10 { grid-column: 7 / 13; }
  .frame--4  { grid-column: 2 / 12; }
  .frame--11 { grid-column: 4 / 10; }
}
/* ---------- worked with: an index, not a logo wall ---------- */
.with {
  background: var(--color-paper-2);
  padding: var(--space-3xl) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 3.5rem);
  row-gap: var(--space-xl);
}
.with__title {
  grid-column: 1 / -1;
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--color-muted);
  text-align: center;
}
.with__list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55em;
  font-size: var(--text-statement);
  font-weight: 300;
  line-height: 1.35;
}
.with__list li::after {
  content: "·";
  margin-inline-start: 0.55em;
  color: var(--color-muted);
}
.with__list li:last-child::after { content: none; }
/* Logos: an endless marquee, every mark the same height, in full colour, one
   loop of the row and its own duplicate so the seam never shows. */
.with__marquee {
  grid-column: 1 / -1;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.with__marquee--stacked { display: grid; gap: var(--space-lg); }
.with__marquee__row {
  --marquee-shift: 50%;               /* app.js clones tracks to fill the viewport, then sets this to 100 / copies */
  display: flex;
  width: max-content;
  animation: with-marquee 30s linear infinite;
}
.with__marquee__row--reverse { animation-name: with-marquee-reverse; animation-duration: 34s; }
.with__marquee:hover .with__marquee__row { animation-play-state: paused; }
/* the exact number of track copies is set by app.js (enough to outrun the
   viewport at its current width, so the loop never shows a gap of empty
   track); the shift always matches one copy's share of the total row */
/* RTL: the row hangs from the right edge and overflows to the left, so the seamless loop runs from +one copy
   to 0 (leftward motion) and the reverse row from 0 to +one copy. A negative shift slides the whole row out of
   the box and shows empty track for most of the cycle, which is what the first cut of this marquee did. */
@keyframes with-marquee { from { transform: translateX(var(--marquee-shift)); } to { transform: translateX(0); } }
@keyframes with-marquee-reverse { from { transform: translateX(0); } to { transform: translateX(var(--marquee-shift)); } }
@media (prefers-reduced-motion: reduce) {
  .with__marquee__row { animation: none; }
}
.with__logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-lg) clamp(1.5rem, 3vw, 4.5rem);
  padding-inline-end: clamp(1.5rem, 3vw, 4.5rem);
}
.with__logos li { display: flex; align-items: center; min-height: 2.4rem; flex-shrink: 0; }
.with__logos img {
  display: block;
  height: calc(clamp(1.5rem, 1rem + 1.1vw, 3.2rem) * var(--k, 1));   /* --k evens the optical weight per mark */
  width: auto;                       /* never cap the width: a height plus a max-width squashes the wide marks */
  object-fit: contain;
  opacity: 0.92;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.with__logos li:hover img { opacity: 1; }
.with__name {
  font-size: var(--text-lede);
  font-weight: 400;
  white-space: nowrap;
  color: var(--color-muted);                 /* a name without a file sits at the grey of the marks, not louder */
}
@media (min-width: 60rem) {
  .with__title, .with__list, .with__marquee { grid-column: 1 / -1; }   /* label directly above the row, never a screen apart from it */
}

/* ---------- scroll craft, native and off under reduced motion or below 40rem ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wall__title {
      animation: settle-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    /* Text only ever moves; it never fades, so an audit run with the element
       off screen still measures full contrast. The colour layer fades. */
    .frame__fig {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes settle {
      from { transform: translateY(4vh) scale(0.965); }
      to   { transform: none; }
    }
    @keyframes settle-in {
      from { transform: translateY(6vh); }
      to   { transform: none; }
    }
    .frame__film {
      animation: film-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @media (min-width: 40rem) {
      .frame__film {
        animation: drift linear both, film-in linear both;
        animation-timeline: view(), view();
        animation-range: entry 0% exit 100%, entry 0% entry 55%;
      }
    }
    @keyframes drift {
      from { transform: translateY(-6%); }
      to   { transform: translateY(6%); }
    }
    @keyframes film-in {
      from { opacity: 0.25; }
      to   { opacity: 1; }
    }
    .with__list li {
      animation: settle-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* ---------- the pitch: why a good ad starts before Generate ---------- */
.pitch {
  padding: var(--space-4xl) var(--gutter);
  display: grid;
  justify-content: center;
  text-align: center;
}
.pitch__card {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  max-width: var(--column);
}
/* the three lines each sit one step up the type scale from the card version (round 34):
   the block has no box any more, so the words carry it alone */
.pitch__title {
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
.pitch__lede {
  font-size: var(--text-statement);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.pitch__body {
  font-size: var(--text-lede);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-ink-2);
  max-width: 44ch;                        /* the block grows with the screen; a paragraph keeps a reading measure */
  margin-inline: auto;
}

/* ---------- the process: five steps, a rail on the left that fills as you scroll ---------- */
.process {
  padding: var(--space-4xl) var(--gutter);
  display: grid;
  justify-content: center;
  justify-items: center;
  gap: var(--space-2xl);
}
.process__intro {
  display: grid;
  gap: var(--space-md);
  max-width: var(--column);
  text-align: center;
}
.process__intro-line {
  font-size: var(--text-lede);
  font-weight: 600;
  line-height: 1.4;
}
.process__intro-body {
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: 60ch;
  margin-inline: auto;
}
.process__title {
  font-size: var(--text-statement);
  font-weight: 600;
  line-height: 1.25;
  max-width: var(--column);
  text-align: center;
}
.process__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 6.5rem;
  display: grid;
  gap: var(--space-3xl);
  max-width: var(--column);
}
.process__rail {
  position: absolute;
  left: 0.4rem;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  background: var(--color-rule);
  border-radius: 2px;
}
.process__fill {
  position: absolute;
  inset: 0;
  background: var(--brand-red);
  transform: scaleY(1);              /* filled by default: the safe state with no JS and under reduced motion */
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .process__fill.js-scroll { transform: scaleY(0); }   /* app.js sets the real value inline as the page scrolls */
}
.process__traveler {
  position: absolute;
  left: calc(0.4rem - 4px);
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--brand-red) 18%, transparent), 0 0 1.1rem color-mix(in oklab, var(--brand-red) 65%, transparent);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.process__traveler.is-on { opacity: 1; }
.process__step { position: relative; }
.process__step-num {
  position: absolute;
  left: -5.4rem;
  top: -0.15em;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 1.2rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--color-muted);   /* was --color-rule, which measured 1.4:1 on paper and failed contrast */
  transition: color 400ms var(--ease-out);
}
.process__step-num.is-lit { color: var(--brand-red); }
.process__step-title {
  font-size: var(--text-lede);
  font-weight: 600;
  line-height: 1.3;
}
.process__text {
  margin-top: var(--space-xs);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.process__close {
  font-size: var(--text-statement);
  font-weight: 600;
  line-height: 1.25;
  max-width: var(--column);
  text-align: center;
  margin-inline: auto;
}
@media (max-width: 26rem) {
  .process__steps { padding-left: 4.25rem; }
  .process__rail { left: 0.35rem; }
  .process__traveler { left: calc(0.35rem - 4px); }
  .process__step-num { left: -3.3rem; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); }
}

/* ---------- the studio ---------- */
.studio {
  padding: var(--space-4xl) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.6vw, 3.5rem);
  row-gap: var(--space-xl);
  justify-items: center;
  text-align: center;
}
.studio__facts {
  grid-column: 1 / -1;
  font-size: var(--text-body);
  color: var(--color-ink-2);
  max-width: var(--column);
}

/* ---------- contact: the one accent surface ---------- */
.contact {
  background: var(--color-ink);             /* the contact band: dark, so the page ends the way it began; red on the button only */
  color: var(--color-on-accent);
  padding: var(--space-4xl) var(--gutter) var(--space-xl);
}
.contact__title {
  font-size: var(--text-section);
  font-weight: 300;
  line-height: 1.05;
  overflow-wrap: anywhere;
  min-width: 0;
}
.contact__title b { font-weight: 600; }
.contact__lede {
  margin-top: var(--space-xl);
  max-width: var(--measure);
  font-size: var(--text-lede);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-on-accent-2);
}
.contact__mail {
  display: inline-block;
  margin-top: var(--space-2xl);
  font-size: var(--text-statement);
  font-weight: 400;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out);
}
.contact__mail:hover { text-decoration-thickness: 4px; }
.contact__mail:active { opacity: 0.8; }


/* ---------- the menu: a full-screen dialog, four words and the address ---------- */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--bar-h) var(--gutter) var(--space-xl);
  border: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
}
.menu[open] { display: grid; }
.menu::backdrop { background: transparent; }
.menu__close {
  position: absolute;
  top: 0;
  left: var(--gutter);           /* the Menu button sits at the left end of the bar in RTL */
  min-height: var(--bar-h);
  font-size: var(--text-meta);
}
.menu__nav {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
}
.menu__nav a {
  font-size: var(--text-giant);
  font-weight: 600;
  line-height: 0.98;
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  transition: color var(--dur-micro) var(--ease-out);
}
.menu__nav a:hover { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em; }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-meta);
  color: var(--color-ink-2);
}
.menu__foot a { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: fade var(--dur-long) var(--ease-out) both; }
  .menu[open] .menu__nav a {
    animation: rise-menu 700ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms + 60ms);
  }
  @keyframes rise-menu { from { transform: translateY(0.35em); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- the opening: one line, a bar that fills, then the curtain lifts ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  align-content: end;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--gutter);
  background: var(--color-dark);
  color: var(--color-light);
  transition: transform 720ms var(--ease-in-out);
}
.loader__line {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
}
.loader__bar {
  height: 2px;
  background: var(--color-dark-2, oklch(24% 0.01 60));
}
.loader__bar i {
  display: block;
  height: 100%;
  background: var(--color-light);
  transform: scaleX(0);
  transform-origin: 100% 50%;      /* fills from the right, the way the line is read */
}
.loader.is-loading .loader__bar i { animation: load 1250ms var(--ease-in-out) forwards; }
@keyframes load { to { transform: scaleX(1); } }
.loader.is-done { transform: translateY(-100%); }
.js:not(.fonts-in) .loader__line { opacity: 1; }

/* ---------- mobile: one persistent way to reach contact ---------- */
.sticky-cta { display: none; }
@media (max-width: 39.99rem) {
  body { padding-bottom: 4.25rem; }
  .sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sticky);
    min-height: 3.5rem;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-ink);
    color: var(--color-light);
    font-size: var(--text-meta);
    text-decoration: none;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 404 ---------- */
.lost {
  min-height: 70svh;
  padding: calc(var(--bar-h) + var(--space-2xl)) var(--gutter) var(--space-4xl);
  display: grid;
  gap: var(--space-xl);
  align-content: start;
}
.lost__title {
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.05;
}
.lost__title b { font-weight: 300; }
.lost__lede { font-size: var(--text-lede); font-weight: 300; color: var(--color-ink-2); max-width: var(--measure); line-height: 1.55; }
.lost__links { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.lost .cta { color: var(--color-accent); }


/* ---------- v9: the person, the three ways in, the message that goes out as WhatsApp ---------- */
.who {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-lg);
  max-width: var(--column);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.who__title { font-size: var(--text-lede); font-weight: 600; line-height: 1.2; }
.who__lede { font-size: var(--text-body); font-weight: 300; line-height: 1.6; color: var(--color-ink-2); max-width: 46ch; }
.who__ask { font-size: var(--text-lede); font-weight: 600; line-height: 1.4; max-width: 46ch; }
.team {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, clamp(9rem, 15vw, 28rem)));   /* two founders, portraits capped so they never tower on a wide screen */
  justify-content: center;
  gap: var(--space-xl) var(--space-lg);
}
.member { display: grid; gap: var(--space-xs); align-content: start; }
.member__photo {
  aspect-ratio: 4 / 5;
  background: var(--color-paper-2);
  display: grid;
  place-items: center;
  font-size: var(--text-meta);
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
  overflow: hidden;
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member b { font-size: var(--text-body); font-weight: 600; }
.member span { font-size: var(--text-meta); font-weight: 300; line-height: 1.5; color: var(--color-ink-2); }
.who__note { color: var(--color-muted); font-size: var(--text-meta); }

.ways {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  max-width: var(--measure);
  border-top: var(--rule-hair) solid var(--color-on-accent-2);
}
.way {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-on-accent-2);
  color: var(--color-on-accent);
  text-decoration: none;
  font-size: var(--text-lede);
}
.way__label { font-weight: 600; }
.way__value {
  font-weight: 300;
  color: var(--color-on-accent-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color var(--dur-micro) var(--ease-out);
}
.way:hover .way__value { color: var(--color-on-accent); text-decoration-thickness: 2px; }
.way:focus-visible { outline: 3px solid var(--color-focus-light); outline-offset: 4px; }

.ask { margin-top: var(--space-2xl); max-width: var(--measure); display: grid; gap: var(--space-lg); }
.ask__title { font-size: var(--text-lede); font-weight: 300; color: var(--color-on-accent-2); }
.ask__field { display: grid; gap: var(--space-xs); font-size: var(--text-meta); color: var(--color-on-accent-2); }
.ask__field input,
.ask__field textarea {
  width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--color-on-accent-2);
  border-radius: 0;
  color: var(--color-on-accent);
  font: inherit;
  font-size: var(--text-lede);
  font-weight: 300;
  padding: var(--space-xs) 0;
  resize: vertical;
}
.ask__field ::placeholder { color: var(--color-on-accent-2); opacity: 0.75; }
.ask__field input:focus,
.ask__field textarea:focus { outline: none; border-bottom-color: var(--color-on-accent); }
.ask__field input:focus-visible,
.ask__field textarea:focus-visible { outline: 3px solid var(--color-focus-light); outline-offset: 6px; }
.ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.ask__send {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--brand-red);
  color: var(--color-paper);
  font: inherit;
  font-size: var(--text-lede);
  font-weight: 600;
  padding: 0.7em 1.4em;
  border-radius: 0;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.ask__send:hover { background: var(--color-paper); color: var(--brand-red); }
.ask__send:active { transform: translateY(1px); }
.ask__send:focus-visible { outline: 3px solid var(--color-focus-light); outline-offset: 4px; }
.ask__mail { color: var(--color-on-accent); font-size: var(--text-lede); font-weight: 300; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.ask__mail:hover { text-decoration-thickness: 2px; }


/* ---------- the wall's warp layer ---------- */
.wall__grid { position: relative; }
.wall__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; }
.has-warp .wall__gl { display: block; }
.frame { position: relative; z-index: 1; }
/* Barrier×Osher, תכשיטים and לזהות open the wall; behind "אני רוצה לראות עוד" the
   rest of the 9:16 films group together, then the mixed-ratio films group together. */
.frame--1 { order: 1; } .frame--2 { order: 2; } .frame--6 { order: 3; } .frame--3 { order: 4; } .frame--5 { order: 5; } .frame--9 { order: 6; } .frame--7 { order: 7; } .frame--8 { order: 8; } .frame--10 { order: 9; } .frame--4 { order: 10; } .frame--11 { order: 11; }
.has-warp .frame__inner { background: transparent; }

/* ---------- the wall's reveal: three films open it, the rest sit behind a button ---------- */
.wall__reveal {
  position: relative;
  overflow: hidden;
  transition: max-height 620ms var(--ease-out);
}
.wall__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 9rem;
  background: linear-gradient(to top, var(--color-paper), transparent);
  opacity: 1;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
.wall__reveal.is-open .wall__fade { opacity: 0; }
.wall__more {
  width: fit-content;
  margin: var(--space-2xl) auto 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 1.8em;
  border: 0;
  border-radius: 999px;
  background: var(--brand-red);
  color: var(--color-paper);
  font: inherit;
  font-size: clamp(0.95rem, 0.6rem + 0.6vw, 1.3rem);
  font-weight: 700;
  cursor: pointer;
  transition: background 260ms var(--ease-out), color 260ms var(--ease-out);
}
.wall__more:hover { background: var(--color-accent-hover); }
.wall__more-arrow { transition: transform 400ms var(--ease-out); flex: none; }
.wall__more[aria-expanded="true"] .wall__more-arrow { transform: rotate(180deg); }
.wall__more[hidden] { display: none; }


/* ---------- scrollbar: a thin ink line, no track, no arrows ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-muted); border-radius: 999px; }   /* mid grey reads on the film and on paper */
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }
::-webkit-scrollbar-button { display: none; height: 0; }


/* ---------- the mark: Click Productions, his files, one for paper and one for the film ---------- */
.top__logo { display: block; height: clamp(2rem, 1.1rem + 1.7vw, 4.4rem); width: auto; }
.top__logo--light { display: none; }
.top--dark .top__logo--dark { display: none; }
.top--dark .top__logo--light { display: block; }
.top__mark:hover { text-decoration: none; opacity: 0.85; }
.loader__logo { display: block; height: clamp(3rem, 2rem + 3vw, 7rem); width: auto; }


/* ---------- Latin runs get the kit's Futura; Hebrew never touches it ---------- */
.ltr, .tc, .way__value, .contact__mail { font-family: var(--font-latin); }

.pill:hover, .pill:hover * { text-decoration: none; }   /* the old menu-button underline must not come back on hover */


/* ---------- real films in the frames ---------- */
/* A film is never cropped: the tile takes the film's own ratio (inline --ratio on the article,
   read from the file), and contain is the guarantee if the two ever disagree by a pixel. */
.frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--film);
}
/* Under the warp layer the film shows only once its frame has arrived; until then the
   WebGL sheet draws it. The last frame (the sheet) is always drawn by the layer. */
.has-warp .frame__fig--film .frame__video { opacity: 0; transition: opacity 320ms var(--ease-out); }
.has-warp .frame__fig--film.is-live .frame__video { opacity: 1; }
.has-warp .frame__fig--film.is-sheet .frame__video { opacity: 0; }
.frame__fig--film .frame__tag { background: color-mix(in oklab, var(--color-dark) 55%, transparent); color: var(--color-light); padding: 0.2em 0.55em; }

/* ---------- film tiles: the film is the frame ----------
   The colour layer runs 20% taller than its frame and drifts on scroll, which is fine for a
   colour but pushes a film off its box. Film tiles pin the layer to the frame and keep only
   the entry fade, so the whole picture stays inside its box at every scroll position. */
.frame__fig--film .frame__film { inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @media (min-width: 40rem) {
      .frame__fig--film .frame__film { animation: film-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    }
  }
}


/* ================================================================
   Round 35: the bottom of the page, and getting in.
   ================================================================ */

/* ---------- skip link: the first thing a keyboard reaches ---------- */
.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100%;
  z-index: var(--z-loader);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-light);
  font-size: var(--text-meta);
  text-decoration: none;
  border-radius: 0 0 var(--space-xs) var(--space-xs);
}
.skip:focus { top: 0; }

/* ---------- the studio text, set as a spread instead of a stack ---------- */
.who__leads {
  display: grid;
  gap: var(--space-lg) var(--space-xl);
  text-align: start;
  justify-items: start;
}
@media (min-width: 60rem) {
  .who__leads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who__leads > :first-child { grid-column: 1 / -1; max-width: 62ch; }
}
.who__ask {
  font-size: var(--text-statement);
  font-weight: 600;
  line-height: 1.25;
  max-width: 24ch;
  text-wrap: balance;
}

/* ---------- the footer: four columns, then one quiet bar ---------- */
.sitefoot {
  /* .hero is position:sticky and stays pinned to the end of the document, so a static
     footer would be painted UNDER it; the contact band above solves this the same way. */
  position: relative;
  z-index: 1;
  background: var(--color-ink);
  color: var(--color-on-accent-2);
  padding: var(--space-2xl) var(--gutter) var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* auto-fit gave 14 tracks at 3440 and left 9 of them empty */
  gap: var(--space-xl) var(--space-lg);
  align-items: start;
  font-size: var(--text-meta);
}
@media (min-width: 36rem) {
  .sitefoot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sitefoot__brand { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  /* the brand block takes the slack so the three link columns keep a readable width */
  .sitefoot { grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); }
  .sitefoot__brand { grid-column: auto; }
}
.sitefoot__brand {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  min-width: 0;
}
.sitefoot__logo { width: clamp(9rem, 14vw, 16rem); height: auto; }
.sitefoot__tag { color: var(--color-on-accent); font-weight: 600; }
.sitefoot__col { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.sitefoot__head {
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--color-on-accent);
  margin-bottom: var(--space-2xs);
}
.sitefoot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.sitefoot a { color: inherit; text-decoration: none; text-underline-offset: 0.2em; }
.sitefoot a:hover { color: var(--color-on-accent); text-decoration: underline; }
.sitefoot__bar {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-on-accent-2) 40%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
}

/* ---------- the accessibility menu ---------- */
.a11y { position: fixed; inset-inline-start: 0; bottom: 0; z-index: var(--z-a11y); }
.a11y__button {
  position: fixed;
  inset-inline-start: var(--space-md);
  bottom: var(--space-md);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-light) 45%, transparent);
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-light);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}
.a11y__button:hover { transform: scale(1.06); }
.a11y__panel {
  position: fixed;
  inset-inline-start: var(--space-md);
  bottom: calc(3rem + var(--space-md) * 2);
  width: min(19rem, calc(100vw - var(--space-md) * 2));
  max-height: min(80vh, calc(100vh - 8rem));   /* at the largest text step a 32rem cap hid half the switches */
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--space-sm);
  box-shadow: 0 1rem 3rem -0.5rem color-mix(in oklab, var(--color-ink) 35%, transparent);
  display: grid;
  gap: var(--space-xs);
}
.a11y__panel[hidden] { display: none; }
.a11y__title { font-size: var(--text-lede); font-weight: 600; margin-bottom: var(--space-2xs); }
.a11y__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.a11y__opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--space-2xs);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-meta);
  text-align: start;
  cursor: pointer;
}
.a11y__opt:hover { background: var(--color-paper-2); }
.a11y__opt[aria-pressed="true"] { background: var(--color-ink); color: var(--color-light); border-color: var(--color-ink); }
.a11y__state { font-weight: 600; white-space: nowrap; }
.a11y__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: var(--text-meta);
}
.a11y__foot a { color: var(--color-ink-2); }
.a11y__reset, .a11y__close {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--space-2xs);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-meta);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
}
.a11y__close { justify-self: stretch; width: 100%; padding: var(--space-xs); }
.a11y__reset:hover, .a11y__close:hover { background: var(--color-paper-2); }

/* on phones the sticky WhatsApp bar owns the bottom edge, so the button sits above it */
@media (max-width: 39.99rem) {
  .a11y__button { bottom: calc(4.25rem + var(--space-xs) + env(safe-area-inset-bottom)); }
  .a11y__panel  { bottom: calc(4.25rem + 3rem + var(--space-sm) * 2 + env(safe-area-inset-bottom)); }
  /* the footer bar wraps here and its back-to-top link landed under the round button */
  .sitefoot { padding-bottom: calc(var(--space-xl) + 3.5rem); }
}

/* ---------- what the menu's switches actually do ---------- */
.a11y-text-1 { --a11y-k: 1.18; }
.a11y-text-2 { --a11y-k: 1.38; }

.a11y-contrast {
  --color-paper:   #fff;
  --color-paper-2: #f2f2f2;
  --color-ink:     #000;
  --color-ink-2:   #1a1a1a;
  --color-muted:   #262626;
  --color-rule:    #595959;
  --color-light-2: #f2f2f2;
  --brand-red:     #8c0000;
}
.a11y-contrast .film__tag { color: var(--color-ink-2); }

.a11y-links a:not(.a11y__button):not(.skip) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.a11y-font, .a11y-font body {
  --font-display: "Arial", "Arial Hebrew", system-ui, sans-serif;
  --font-serif:   "Arial", "Arial Hebrew", system-ui, sans-serif;
}

/* the site's own motion switch: warp.js and smooth.js already read `motion-off` */
.motion-off *, .motion-off *::before, .motion-off *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

/* ---------- the plain pages: accessibility, privacy, terms ---------- */
.doc {
  padding: var(--space-3xl) var(--gutter) var(--space-4xl);
  max-width: var(--column);
  margin-inline: auto;
}
.doc__title { font-size: var(--text-section); font-weight: 300; line-height: 1.05; }
.doc__meta { margin-top: var(--space-md); font-size: var(--text-meta); color: var(--color-muted); }
.doc h2 {
  font-size: var(--text-lede);
  font-weight: 600;
  line-height: 1.25;
  margin-top: var(--space-2xl);
  max-width: var(--measure);
}
.doc h3 { font-size: var(--text-body); font-weight: 600; margin-top: var(--space-lg); max-width: var(--measure); }
.doc p, .doc li {
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.doc p { margin-top: var(--space-md); }
.doc ul { margin-top: var(--space-md); padding-inline-start: 1.2em; display: grid; gap: var(--space-xs); }
.doc a { color: var(--color-ink); text-underline-offset: 0.2em; }
.doc__note {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-inline-start: 3px solid var(--brand-red);
}
.doc__note p { margin-top: var(--space-xs); }
.doc__note p:first-child { margin-top: 0; font-weight: 600; color: var(--color-ink); }

.a11y-mono body > *:not(.a11y) { filter: grayscale(1); }
.a11y-mono .a11y__button, .a11y-mono .a11y__panel { filter: grayscale(1); }
.doc__back { margin-top: 0; font-size: var(--text-meta); }


/* ---------- the bottom of the page at desktop widths ----------
   Measured at 3440: the contact band is full-bleed but its content was capped at the
   reading measure, so 813px of form sat against the right edge with 2400px of empty
   black beside it. The inline padding below centres the content block on the same
   band, and above 64rem the ways and the form sit side by side instead of stacking,
   which is also what takes the plain-text feel out of the bottom of the page. */
.contact, .sitefoot {
  padding-inline: max(var(--gutter), calc((100% - 110rem) / 2));
}
@media (min-width: 64rem) {
  .contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 6rem);
    align-items: start;
  }
  .contact__title, .contact__lede { grid-column: 1 / -1; }
  .ways, .ask { max-width: none; margin-top: var(--space-2xl); }
}