/* ==========================================================================
   Gallery homepage. A lit sculpture under a halo ring, a hairline column grid,
   Didone display type and tiny letterspaced UI. Loads after tokens.css +
   main.css and restyles the shared components (quick form, intake dialog,
   mobile bar, badges).

   Pure white by default; the original gallery-dark palette is one attribute
   away, <html data-theme="dark">. Everything below reads from the tokens, so
   nothing else has to change to flip it. The hero is the one exception: it
   inverts locally because it sits on dark footage.
   ========================================================================== */
.page-cinematic {
  /* Utility strip + header, both of which sit over the top of the hero. An
     estimate for the first paint; js/cinematic.js sets the measured height. */
  --topbar-h: 7.25rem;
  /* White by default. The dark original is one attribute away:
     <html data-theme="dark"> or <body data-theme="dark">. */
  --c-bg: #ffffff;
  --c-bg-2: #f4f4f5;
  --c-surface: #ffffff;
  --c-ink: #14161a;
  --c-ink-2: #3f434a;
  --c-dim: #5e626a;
  --c-tint-rgb: 20 22 26;
  --c-panel-rgb: 255 255 255;
  --c-line: rgb(20 22 26 / 0.14);
  --c-line-2: rgb(20 22 26 / 0.26);
  --c-blue: #2540e0;
  --c-blue-rgb: 37 64 224;
  --c-blue-soft: #1e35c4;
  --c-blue-soft-rgb: 30 53 196;
  --c-amber: #8a5a1e;
  --c-amber-rgb: 138 90 30;
  --c-error: #b3261e;
  --c-error-rgb: 179 38 30;
  --c-wa: #157a40;
  --c-backdrop: rgb(20 22 26 / 0.45);
  --c-title-halo: rgb(255 255 255 / 0.85);
  --c-select-arrow: var(--icon-select-ink);
  /* Form field outlines: ≥ 3:1 against the surface they sit on (WCAG 1.4.11). */
  --c-field-line: rgb(20 22 26 / 0.52);
  /* The hero. Dark footage in either theme, so it has its own ground: a warm
     near-black the film's shadows (dark wood, lamplight) fall into, and light
     ink over it. */
  --c-hero-ground: #100d0b;
  --c-hero-ground-rgb: 16 13 11;
  --c-hero-ink-rgb: 255 255 255;
  /* The page's own values, captured here before the hero inverts them, for
     what sits in the hero but belongs to the page (the quick-check card).
     Custom properties resolve where they are declared, so these follow the
     theme and are unaffected by the hero's overrides further down. */
  --c-page-bg: var(--c-bg);
  --c-page-ink: var(--c-ink);
  --c-page-ink-2: var(--c-ink-2);
  --c-page-dim: var(--c-dim);
  --c-page-line: var(--c-line);
  --c-page-line-2: var(--c-line-2);
  --c-page-tint-rgb: var(--c-tint-rgb);
  --c-page-panel-rgb: var(--c-panel-rgb);
  --c-serif: 'Playfair Display', 'Frank Ruhl Libre', Georgia, serif;
  --c-sans: 'Heebo', 'Inter', system-ui, -apple-system, sans-serif;
  --dir: -1; /* RTL: +1 in LTR, used for arrow nudges */
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--c-sans);
  --header-h: 4.5rem;
}

[data-theme='dark'] .page-cinematic,
.page-cinematic[data-theme='dark'] {
  --c-bg: #0a0a0c;
  --c-bg-2: #0e0e12;
  --c-surface: #131317;
  --c-ink: #f4f1ea;
  --c-ink-2: #b8b4ac;
  --c-dim: #97938b;
  --c-tint-rgb: 244 241 234;
  --c-panel-rgb: 14 14 18;
  --c-line: rgb(244 241 234 / 0.1);
  --c-line-2: rgb(244 241 234 / 0.2);
  --c-blue: #3355ff;
  --c-blue-rgb: 51 85 255;
  --c-blue-soft: #6d8cff;
  --c-blue-soft-rgb: 109 140 255;
  --c-amber: #e2b887;
  --c-amber-rgb: 226 184 135;
  --c-error: #ff8b84;
  --c-error-rgb: 255 139 132;
  --c-wa: #4ade80;
  --c-backdrop: rgb(4 4 6 / 0.8);
  --c-title-halo: rgb(10 10 12 / 0.75);
  --c-select-arrow: var(--icon-select-paper);
  --c-field-line: rgb(244 241 234 / 0.45);
}

.page-cinematic ::selection {
  background: var(--c-ink);
  color: var(--c-bg);
}

.page-cinematic a {
  color: inherit;
}

.page-cinematic :focus-visible {
  outline: 2px solid var(--c-blue-soft);
  outline-offset: 3px;
}

.page-cinematic h1,
.page-cinematic h2,
.page-cinematic h3 {
  color: var(--c-ink);
  font-weight: 400;
}

.c-wrap {
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 4.5rem);
}

@media (min-width: 64em) {
  }

/* Lift the page above the hairline grid. The rail sets its own fixed
   position below, so it must not be caught by this rule. */
.page-cinematic main,
.page-cinematic .c-top,
.page-cinematic .c-foot {
  position: relative;
  z-index: 1;
}

/* Type helpers ------------------------------------------------------------ */
.c-serif {
  font-family: var(--c-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.c-kicker {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-dim);
}

html[dir='rtl'] .c-kicker {
  letter-spacing: 0.1em;
}

.c-num {
  font-family: var(--c-serif);
  font-size: 0.8rem;
  color: var(--c-dim);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.c-body {
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--c-ink-2);
}

.c-body--dim {
  color: var(--c-dim);
}

.c-rule {
  block-size: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

/* Sections ---------------------------------------------------------------- */
.c-section {
  /* Was clamp(4rem, 9vw, 8rem): sections read as islands separated by empty
     white. Tightened by roughly a third at every width. */
  padding-block: clamp(2.75rem, 6vw, 5.25rem);
}

.c-section--tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.c-head {
  display: grid;
  gap: 1.25rem;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.c-h2 {
  font-family: var(--c-serif);
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 1.04;
  max-width: 18ch;
}

.c-lede {
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--c-ink-2);
  max-width: 38ch;
}

@media (min-width: 64em) {
  .c-head--split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: 3rem;
  }
}

/* Buttons ----------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--c-line-2);
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-ink);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

html[dir='rtl'] .c-btn {
  letter-spacing: 0.06em;
}

.c-btn svg {
  inline-size: 0.95em;
  block-size: 0.95em;
}

.c-btn:hover {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}

.c-btn--solid {
  background: var(--c-ink);
  color: var(--c-bg);
  border-color: var(--c-ink);
}

.c-btn--solid:hover {
  background: transparent;
  color: var(--c-ink);
}

.c-btn--blue {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

.c-btn--blue:hover {
  background: transparent;
  color: var(--c-blue-soft);
  border-color: var(--c-blue-soft);
}

.c-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

html[dir='rtl'] .c-link {
  letter-spacing: 0.06em;
}

.c-link svg {
  inline-size: 0.9em;
  block-size: 0.9em;
  transition: translate var(--dur-fast) var(--ease-out);
}

.c-link:hover {
  color: var(--c-blue-soft);
}

/* `translate`, not transform: it applies outside the mirroring `scale` that
   css/icons.css puts on arrows in English, so the nudge goes forward in both
   languages. */
.c-link:hover svg {
  translate: calc(4px * var(--dir)) 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* Brand lockup: the client's gold monogram beside the wordmark. The supplied
   artwork is gold + cream on near-black, so the cream name disappears on a
   light surface — only the monogram is used here, and the wordmark stays live
   text (which also keeps it translatable). */
.c-brand__mark {
  block-size: 2.5rem;
  inline-size: auto;
  flex: none;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.45));
  transition: filter 0.32s ease;
}

.page-cinematic .c-top.is-stuck .c-brand__mark {
  /* No dark film behind it any more; the gold needs a little definition
     against white instead of a glow against black. */
  filter: drop-shadow(0 1px 1px rgb(20 22 26 / 0.28));
}

/* Menu button: two stacked words behind a mask, one visible at a time, and a
   plus that rotates a quarter turn plus 45deg into a cross. GSAP drives both. */
.nav-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.nav-close-btn:hover {
  background: rgb(var(--c-tint-rgb) / 0.08);
}

.nav-close-btn .menu-button-text {
  position: relative;
  display: block;
  block-size: 1.25em;
  overflow: hidden;
}

.nav-close-btn .menu-button-text .p-large {
  display: block;
  line-height: 1.25em;
  white-space: nowrap;
}

.nav-close-btn .icon-wrap {
  display: grid;
  place-items: center;
  inline-size: 0.7rem;
  block-size: 0.7rem;
}

/* Menu (Lucide's menu) and Close (Lucide's x) share the slot and crossfade on
   aria-expanded, so each meaning keeps its own icon. Lucide draws inside the
   middle of its 24 units, so the icons are drawn larger than the 0.7rem slot
   (and pulled back in by the negative margin) to fill it without changing the
   button. */
.nav-close-btn .menu-button-icon {
  --icon-stroke: 1.25;
  grid-area: 1 / 1;
  display: block;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  max-inline-size: none;
  margin: -0.25rem;
  transition:
    opacity var(--dur) var(--ease-out),
    rotate var(--dur) var(--ease-out);
}

.nav-close-btn .menu-button-icon--close,
.nav-close-btn[aria-expanded='true'] .menu-button-icon--open {
  opacity: 0;
  rotate: -45deg;
}

.nav-close-btn[aria-expanded='true'] .menu-button-icon--close {
  opacity: 1;
  rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .nav-close-btn .menu-button-icon {
    transition: none;
  }
}

/* Utility strip: sits on the hero's ground with the header, so it carries
   the hero's light ink. */
.c-utility {
  position: relative;
  z-index: 51;
  color: rgb(var(--c-hero-ink-rgb) / 0.74);
}

.c-utility a { color: inherit; }

/* Light on the ground, not the page's amber (3:1 on the near-black). The
   .page-cinematic prefix outranks the page-wide placeholder badge rule
   further down, which used to win and paint it amber. */
.page-cinematic .c-utility .badge--placeholder {
  background: rgb(var(--c-hero-ink-rgb) / 0.12);
  border-color: rgb(var(--c-hero-ink-rgb) / 0.28);
  color: rgb(var(--c-hero-ink-rgb) / 0.82);
}

/* Dynamic header: rides transparently over the hero film with light type, then
   settles into a solid white bar once the page moves. `.is-stuck` is set by
   cinematic.js. */
.page-cinematic .c-top {
  position: sticky;
  inset-block-start: 0;
  /* Must beat `.page-cinematic main`, which is z-index 1 and later in the DOM;
     the hero is pulled up underneath this bar. */
  z-index: 60;
  background: transparent;
  border-block-end: 1px solid transparent;
  --c-ink: #ffffff;
  --c-ink-2: rgb(255 255 255 / 0.86);
  --c-dim: rgb(255 255 255 / 0.72);
  --c-line: rgb(255 255 255 / 0.24);
  --c-line-2: rgb(255 255 255 / 0.4);
  --c-bg: #0d0f13;
  color: var(--c-ink);
  transition:
    background-color 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease,
    color 0.32s ease;
}

.page-cinematic .c-top.is-stuck {
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end-color: rgb(20 22 26 / 0.1);
  box-shadow: 0 1px 24px rgb(8 9 12 / 0.08);
  --c-ink: #14161a;
  --c-ink-2: #3f434a;
  --c-dim: #5e626a;
  --c-line: rgb(20 22 26 / 0.14);
  --c-line-2: rgb(20 22 26 / 0.26);
  --c-bg: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .page-cinematic .c-top { transition: none; }
}

.c-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
  flex-wrap: nowrap;
}

/* Nothing in the header row may wrap onto a second line. */
.c-top__inner > *,
.c-top__end > * {
  white-space: nowrap;
}

.c-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--c-ink);
}

.c-brand strong {
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.14em;
}

html[dir='rtl'] .c-brand strong {
  letter-spacing: 0.02em;
}

.c-brand small {
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-dim);
}

html[dir='rtl'] .c-brand small {
  letter-spacing: 0.1em;
}

.c-nav__list {
  display: none;
  gap: 1.75rem;
}

.c-nav__link {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-dim);
  white-space: nowrap;
  transition: color var(--dur-fast);
}

html[dir='rtl'] .c-nav__link {
  letter-spacing: 0.06em;
}

.c-nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--c-blue);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}

.c-nav__link:hover,
.c-nav__link.is-active {
  color: var(--c-ink);
}

.c-nav__link.is-active::after {
  transform: scaleX(1);
}

.c-top__end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.c-lang {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill, 999px);
}

/* HE · AR · RU (· EN): links to the same page in each language, and on the Hebrew home page the HE/EN buttons of the
   English toggle (scripts/lib/site.mjs, langSwitch). The current one is filled. */
.c-lang a,
.c-lang button {
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--c-dim);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background-color var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s);
}

.c-lang a {
  display: inline-block;
  line-height: normal;
  text-decoration: none;
}

/* In the menu: below the practice areas, above the call and WhatsApp buttons. */
.c-nav__lang {
  margin-block: 1rem;
}

.c-lang a:hover,
.c-lang button:hover {
  color: var(--c-ink);
}

.c-lang a[aria-current='true'],
.c-lang button[aria-pressed='true'] {
  background: var(--c-ink);
  color: var(--c-bg);
}

.c-top__tel {
  display: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--c-ink-2);
}

.c-top__tel:hover {
  color: var(--c-ink);
}

.c-top__book {
  display: none;
}

/* 3×3 dots menu button, as in the reference */
.c-dots {
  inline-size: 2.6rem;
  block-size: 2.6rem;
  display: grid;
  grid-template-columns: repeat(3, 3px);
  grid-auto-rows: 3px;
  gap: 3px;
  place-content: center;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

.c-dots i {
  inline-size: 3px;
  block-size: 3px;
  background: var(--c-ink);
  transition: background-color var(--dur-fast), transform var(--dur) var(--ease-out);
}

.c-dots:hover i {
  background: var(--c-blue-soft);
}

.c-dots[aria-expanded='true'] i:nth-child(2),
.c-dots[aria-expanded='true'] i:nth-child(4),
.c-dots[aria-expanded='true'] i:nth-child(6),
.c-dots[aria-expanded='true'] i:nth-child(8) {
  transform: scale(0);
}

/* The phone and the booking CTA come back as soon as there is room — they are
   the point of the header and must not wait for the full nav. */
@media (min-width: 64em) {
  .c-top__tel {
    display: inline-block;
  }

  .c-top__book {
    display: inline-flex;
  }

  /* While the header is clear over the hero, the hero leads. The booking
     button is drawn in outline (its solid white block was the brightest
     thing on the first screen, louder than the quick-check form), and the
     number steps aside: the hero carries it, under the form. Both come back
     as the header settles into its bar. */
  .page-cinematic .c-top:not(.is-stuck) .c-top__book {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-line-2);
  }

  .page-cinematic .c-top:not(.is-stuck) .c-top__book:hover {
    background: var(--c-ink);
    color: var(--c-bg);
    border-color: var(--c-ink);
  }

  .page-cinematic .c-top__tel {
    max-inline-size: 10rem;
    overflow: hidden;
  }

  .page-cinematic .c-top:not(.is-stuck) .c-top__tel {
    max-inline-size: 0;
    margin-inline-start: -1rem;
    opacity: 0;
    visibility: hidden;
  }
}


/* The link list needs considerably more room than that; below this width the
   dots drawer carries navigation instead. At 64em the row cramped and wrapped. */
@media (min-width: 80em) {
  .c-nav__list {
    display: flex;
  }
}

/* Mobile drawer (site.js toggles .is-open on #nav) */
.c-nav {
  position: fixed;
  /* Covers the whole viewport and lets the sticky header (z 60) sit on top of
     it; 45 was below the utility strip (51), which then punched through. */
  inset: 0;
  z-index: 55;
  /* GSAP owns display, and every transform below. No CSS transitions on the
     animated properties, or the two fight for the same values. */
  display: none;
  background: transparent;
}

.c-nav .overlay {
  position: absolute;
  inset: 0;
  background: rgb(8 9 12 / 0.55);
  opacity: 0;
  visibility: hidden;
}

.c-nav .menu-content {
  /* Half the page, anchored to the inline end — the overlay holds the rest. */
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(100%, 50vw);
  min-inline-size: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--topbar-h) + 1.5rem) clamp(1.25rem, 3vw, 2.5rem) 2rem;
  overflow: hidden auto;
}

@media (max-width: 47.99em) {
  .c-nav .menu-content {
    inline-size: 100%;
  }
}

/* .is-open is kept as a state hook for other rules; the motion is GSAP's. */

.c-nav__mobile {
  display: grid;
  gap: 0.25rem;
  border-block-start: 1px solid var(--c-line);
}

.c-nav__mobile a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-block-end: 1px solid var(--c-line);
  text-decoration: none;
  font-family: var(--c-serif);
  font-size: 1.9rem;
  line-height: 1;
}

.c-nav__actions {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* Kinetic drawer ----------------------------------------------------------
   Three panels sweep in from the inline end, staggered, and the links rise
   and un-rotate behind them. Each entry lifts its own ambient shape on hover.
   Transitions only — no animation library, so the folder stays dependency-free.
   -------------------------------------------------------------------------- */
.c-nav__panels {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.c-nav__panels .backdrop-layer {
  position: absolute;
  inset: 0;
}

.c-nav__panels .backdrop-layer:nth-child(1) { background: var(--c-bg-2); }
.c-nav__panels .backdrop-layer:nth-child(2) { background: rgb(var(--c-blue-rgb) / 0.07); }
.c-nav__panels .backdrop-layer:nth-child(3) { background: var(--c-bg); }


.c-nav .c-wrap {
  /* Descendant, not child: .c-wrap now sits inside .menu-content. As a child
     selector this stopped matching and the action buttons fell behind the
     panels. */
  position: relative;
  z-index: 2;
}

/* Ambient shapes, one per entry ------------------------------------------- */
.ambient-background-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.bg-shape {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 7%;
  /* Kept well clear of the list: at full width the marks ran under the labels
     and read as clutter rather than atmosphere. */
  inline-size: min(30vw, 20rem);
  block-size: auto;
  aspect-ratio: 1;
  translate: 0 -50%;
  opacity: 0;
  /* Falls away at the edges so it sits behind the type rather than competing. */
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 35%, transparent 100%);
  transition: opacity 0.35s var(--cubic-default);
}

.bg-shape.is-active {
  opacity: 0.85;
}

/* Below the breakpoint where the list has a free column, the shapes would sit
   straight under the labels — hide them rather than crowd the type. */
@media (max-width: 47.99em) {
  .ambient-background-shapes { display: none; }
}

/* Touch: never shrink a tap target below the accessible minimum. */
@media (max-width: 47.99em) {
  .page-cinematic .field input,
  .page-cinematic .field select,
  .page-cinematic .field textarea {
    min-height: 2.75rem;
    font-size: 1rem;  /* also stops iOS zooming the page on focus */
  }
}

.shape-element {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}


/* Entries rise and straighten, staggered by --i ---------------------------- */
.c-nav__mobile a {
  position: relative;
  transition: color var(--dur-fast);
}

/* The mask the links rise out of. */
.c-nav__mobile {
  overflow: hidden;
}

/* A wash that grows from the inline edge under the hovered entry. */
.c-nav__wash {
  position: absolute;
  inset-block: -0.25em;
  inset-inline: -0.6em;
  z-index: -1;
  background: rgb(var(--c-blue-rgb) / 0.07);
  transform: scaleX(0);
  transform-origin: var(--wash-origin, left center);
  transition: transform 0.45s var(--cubic-default);
}

html[dir='rtl'] .c-nav__wash {
  --wash-origin: right center;
}

.c-nav__mobile a:hover .c-nav__wash,
.c-nav__mobile a:focus-visible .c-nav__wash {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .c-nav__wash {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   Left rail: section dots (the reference's slide dots)
   -------------------------------------------------------------------------- */
.c-rail {
  position: fixed;
  inset-inline-start: clamp(0.85rem, 2.2vw, 2rem);
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
}

.c-rail a {
  position: relative;
  inline-size: 1.5rem;
  block-size: 0.5rem;
  display: grid;
  align-items: center;
}

.c-rail a::before {
  content: '';
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: var(--c-dim);
  transition: inline-size var(--dur) var(--ease-out), background-color var(--dur), border-radius var(--dur);
}

.c-rail a:hover::before {
  background: var(--c-ink);
}

.c-rail a.is-active::before {
  inline-size: 1.5rem;
  block-size: 2px;
  border-radius: 0;
  background: var(--c-blue);
}

@media (min-width: 64em) {
  .c-rail {
    display: flex;
    transition: opacity var(--dur) ease, visibility var(--dur);
  }

  /* The hero is one composed screen; the section dots join once the page
     moves on, rather than sitting in the hero's gutter. */
  body:has(.c-rail a[href='#hero'].is-active) .c-rail {
    opacity: 0;
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   Hero
   One screen, one composition. On wide screens the film is a framed plate on
   the inline-end side, and a single column on the other carries the headline,
   the lede, the quick-check form and a quiet line for calls. Below 64em the
   plate fills the screen behind the copy and the form opens as a sheet.
   The plate starts under the header, so the chrome sits on the hero's ground
   and never on the attorney's head and shoulders.
   -------------------------------------------------------------------------- */
.c-hero {
  --hero-pad: clamp(0.75rem, 4svh, 3rem);
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  /* Exactly one screen. The hero is pulled up under the utility strip and the
     header, so it starts at the top of the page and ends where the first
     screen does: nothing of the next section shows until the visitor scrolls.
     svh rather than dvh, so the height does not jump as a phone's toolbars
     slide away; vh is the fallback. Content taller than a very short window
     grows the hero instead of being clipped. */
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin-block-start: calc(-1 * var(--topbar-h));
  padding-block: calc(var(--topbar-h) + var(--hero-pad)) var(--hero-pad);
  background: var(--c-hero-ground);
  overflow: clip;
}

/* The hero is dark in either theme, so it inverts locally: light ink on its
   ground. --c-bg and --c-panel-rgb mean "the surface behind this" and flip
   with the ink. The quick-check card re-asserts the page's set (below). */
.c-hero {
  --c-ink: rgb(var(--c-hero-ink-rgb));
  --c-ink-2: rgb(var(--c-hero-ink-rgb) / 0.86);
  --c-dim: rgb(var(--c-hero-ink-rgb) / 0.7);
  --c-line: rgb(var(--c-hero-ink-rgb) / 0.22);
  --c-line-2: rgb(var(--c-hero-ink-rgb) / 0.4);
  --c-tint-rgb: var(--c-hero-ink-rgb);
  --c-title-halo: rgb(var(--c-hero-ground-rgb) / 0.55);
  --c-bg: var(--c-hero-ground);
  --c-panel-rgb: var(--c-hero-ground-rgb);
  color: var(--c-ink);
}

/* The plate: the still, and the film over it once it plays. */
.c-hero__stage {
  position: absolute;
  z-index: 0;
  inset-block: var(--topbar-h) 0;
  inset-inline: 0;
  overflow: hidden;
  pointer-events: none;
}

.c-hero__poster,
.c-hero__poster img,
.c-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.c-hero__poster img,
.c-hero__video {
  object-fit: cover;
  /* Top-aligned: where the plate is wider than the film (a phone on its side)
     the crop comes off the desk, not off his head. */
  object-position: 50% 0%;
}

/* The client's own portrait (4 Nov 2026) is taller than the film: the plate
   crops it top and bottom, so the crop keeps his face and comes off the desk. */
.c-hero__poster--photo img {
  object-position: 50% 24%;
}

/* The film's first frame is the still, so the hand-over is invisible; the
   fade only covers the moment the decoder takes over. */
.c-hero__video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.c-hero__stage.is-playing .c-hero__video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__video {
    transition: none;
  }
}

/* The plate's edges fall away into the ground, painted over the film and
   under the copy: under the header, and at the foot, where the copy stands
   on phones. The wide layout adds the edge towards the column. */
.c-hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 14%),
    linear-gradient(to top,
      var(--c-hero-ground) 0%,
      rgb(var(--c-hero-ground-rgb) / 0.94) 18%,
      rgb(var(--c-hero-ground-rgb) / 0.8) 36%,
      rgb(var(--c-hero-ground-rgb) / 0.52) 54%,
      rgb(var(--c-hero-ground-rgb) / 0) 76%);
}

.c-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.75rem, 2svh, 1.1rem);
  align-content: end;
}

.c-hero__copy {
  display: grid;
  gap: clamp(0.5rem, 1.4svh, 1rem);
}

/* Small type over the film: the brighter of the hero's inks, and the same
   soft halo as the headline. */
.c-hero__kicker {
  margin: 0;
  color: var(--c-ink-2);
  text-shadow: 0 1px 14px var(--c-title-halo);
}

.c-hero__title {
  font-family: var(--c-serif);
  font-size: clamp(2rem, min(9.5vw, 5.6svh), 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 2px 40px var(--c-title-halo);
}

/* "הצדק שלכם," shares a line when there is room; the last phrase always
   starts its own. Each phrase keeps its own mask for the rise-in. */
.c-hero__title.c-rise > span {
  display: inline-block;
  vertical-align: top;
  /* Room inside the mask for descenders ("yours"), given back below. */
  padding-block-end: 0.12em;
  margin-block-end: -0.12em;
}

.c-hero__title.c-rise > span:last-child {
  display: block;
}

/* The one lede. `pretty` keeps a last word from standing alone on its line
   ("אזרחיות."); the tight halo holds it off the brightest frames. */
.c-hero__lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.9rem, 0.84rem + 0.25vw, 1.08rem);
  line-height: 1.6;
  color: var(--c-ink-2);
  text-wrap: pretty;
  text-shadow: 0 0 2px rgb(var(--c-hero-ground-rgb) / 0.9), 0 1px 14px var(--c-title-halo);
}

/* Calls and WhatsApp, demoted to a line under the form (wide screens only:
   below 64em the phone bar carries them). */
.c-hero__alt {
  display: none;
}

.c-hero__scroll {
  display: none;
}

/* The About section's button row still uses the old hero's class. */
.c-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Keyboard focus on the hero's dark ground (and on the header while it is
   clear over the hero) is drawn in the hero's ink: the page's blue ring is
   2.2:1 on the near-black. Inside the quick-check card --c-ink is the page's
   ink again, so the card keeps a ring that reads on its own surface. */
.c-hero :focus-visible,
body:not(.nav-open) .c-top:not(.is-stuck) :focus-visible {
  outline-color: var(--c-ink);
}

.page-cinematic .c-utility :focus-visible {
  outline-color: rgb(var(--c-hero-ink-rgb));
}

@media (min-width: 64em) {
  .c-hero {
    /* The column, and the gutter .c-wrap puts beside it. The column keeps
       growing with the screen, so on a large display the copy and the card
       hold their share of the composition next to the film. */
    --hero-col: clamp(27rem, 36vw, 46rem);
    --hero-gutter: clamp(1rem, 4vw, 4.5rem);
    --hero-pad: clamp(1rem, 4svh, 3.5rem);
  }

  /* From the screen's inline-end edge to just under the column's far edge,
     wherever .c-wrap centres the column on a wide screen. */
  .c-hero__stage {
    inset-inline-start: auto;
    inline-size: calc(100% - max(0px, (100% - 88rem) / 2) - var(--hero-gutter) - var(--hero-col) + 2rem);
  }

  .c-hero__stage::after {
    background:
      linear-gradient(to bottom, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 16%),
      linear-gradient(to top, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.6) 7%, rgb(var(--c-hero-ground-rgb) / 0) 26%),
      linear-gradient(to left, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.72) 6%, rgb(var(--c-hero-ground-rgb) / 0) 20%),
      linear-gradient(to right, rgb(var(--c-hero-ground-rgb) / 0.5), rgb(var(--c-hero-ground-rgb) / 0) 12%);
  }

  html[dir='ltr'] .c-hero__stage::after {
    background:
      linear-gradient(to bottom, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 16%),
      linear-gradient(to top, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.6) 7%, rgb(var(--c-hero-ground-rgb) / 0) 26%),
      linear-gradient(to right, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.72) 6%, rgb(var(--c-hero-ground-rgb) / 0) 20%),
      linear-gradient(to left, rgb(var(--c-hero-ground-rgb) / 0.5), rgb(var(--c-hero-ground-rgb) / 0) 12%);
  }

  .c-hero__inner {
    grid-template-columns: minmax(0, var(--hero-col));
    align-content: center;
    gap: clamp(1rem, 2.6svh, 1.75rem);
  }

  /* Capped by the column too, so "Justice that's yours," keeps to one line
     however wide the screen is. */
  .c-hero__title {
    font-size: clamp(2.25rem, min(4.2vw, 6.2svh, var(--hero-col) / 9), 5.25rem);
  }

  .c-hero__lead {
    max-width: none;
  }

  /* The privacy note stays beside the send button, wrapping in its own box,
     rather than taking a row of its own under it. */
  .c-hero .quick-form__actions {
    flex-wrap: nowrap;
  }

  .c-hero .quick-form .btn--primary {
    flex: none;
    padding-inline: 1.1rem;
  }

  .c-hero .quick-form__privacy {
    min-inline-size: 0;
    line-height: 1.35;
  }

  .c-hero__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
    margin: 0;
    font-size: 0.76rem;
    color: var(--c-dim);
  }

  .c-hero__alt a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.2rem;
    color: var(--c-ink-2);
    text-decoration: none;
    border-block-end: 1px solid var(--c-line-2);
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }

  .c-hero__alt a:hover {
    color: var(--c-ink);
    border-color: var(--c-ink);
  }

  .c-hero__alt svg {
    inline-size: 0.95em;
    block-size: 0.95em;
    flex: none;
  }

  /* A cue that there is more below, centred under the plate. Both insets
     span the plate and the link is only as wide as its label (auto margins
     centre it), so its focus ring hugs the words. */
  .c-hero__scroll {
    position: absolute;
    z-index: 1;
    inset-block-end: clamp(0.75rem, 2.4svh, 1.6rem);
    inset-inline-end: 0;
    inset-inline-start: calc(max(0px, (100% - 88rem) / 2) + var(--hero-gutter) + var(--hero-col));
    inline-size: max-content;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-dim);
    transition: color var(--dur-fast);
  }

  html[dir='rtl'] .c-hero__scroll {
    letter-spacing: 0.08em;
  }

  .c-hero__scroll:hover {
    color: var(--c-ink);
  }

  .c-hero__scroll i {
    display: block;
    inline-size: 2.5rem;
    block-size: 1px;
    background: currentColor;
  }
}

/* Large displays. The column grows to its cap by 1280px, and past that the
   copy and the card would sit at laptop size beside a film that keeps
   growing. From 1920 × 992 the small type and the card (its labels, fields
   and button, as one piece) step up with the screen; the card is scaled
   with `zoom` so its own proportions hold. Only where the height is there
   too, so the hero still fits its one screen. */
@media (min-width: 120em) and (min-height: 62em) {
  .c-hero .quick-form {
    zoom: 1.1;
  }

  .c-hero__lead {
    font-size: 1.15rem;
  }

  .c-hero__kicker {
    font-size: 0.7rem;
  }

  .c-hero__alt {
    font-size: 0.82rem;
  }
}

@media (min-width: 150em) and (min-height: 75em) {
  .c-hero .quick-form {
    zoom: 1.2;
  }

  .c-hero__lead {
    font-size: 1.25rem;
  }

  .c-hero__kicker {
    font-size: 0.76rem;
  }

  .c-hero__alt {
    font-size: 0.88rem;
  }
}

/* 4K at 100%: a wider column and a larger headline as well. */
@media (min-width: 200em) and (min-height: 100em) {
  .c-hero {
    --hero-col: 58rem;
  }

  .c-hero__title {
    font-size: clamp(2.25rem, min(4.2vw, 6.2svh, var(--hero-col) / 9), 6.5rem);
  }

  .c-hero .quick-form {
    zoom: 1.45;
  }

  .c-hero__lead {
    font-size: 1.55rem;
  }

  .c-hero__kicker {
    font-size: 0.9rem;
  }

  .c-hero__alt {
    font-size: 1.05rem;
  }

  .c-hero__scroll {
    font-size: 0.78rem;
  }
}

/* Wide but portrait (a monitor on its side, a large tablet upright): the
   plate across the top, the column under it. A side plate there would be a
   narrow slice of an enormous face. Up to 4:5 the side plate still frames
   him well (his head and shoulders), and the stacked layout would not fit
   the column under a plate in a window that is only just taller than wide. */
@media (min-width: 64em) and (max-aspect-ratio: 4/5) {
  /* The plate takes whatever height the column leaves, in the flow. */
  .c-hero {
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .c-hero__stage {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    inset: auto;
    inline-size: auto;
    min-block-size: 36svh;
    margin-block-start: calc(-1 * var(--hero-pad));
  }

  .c-hero__stage::after,
  html[dir='ltr'] .c-hero__stage::after {
    background:
      linear-gradient(to bottom, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 12%),
      linear-gradient(to top, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.75) 14%, rgb(var(--c-hero-ground-rgb) / 0) 45%),
      linear-gradient(to left, rgb(var(--c-hero-ground-rgb) / 0.45), rgb(var(--c-hero-ground-rgb) / 0) 10%),
      linear-gradient(to right, rgb(var(--c-hero-ground-rgb) / 0.45), rgb(var(--c-hero-ground-rgb) / 0) 10%);
  }

  .c-hero__inner {
    grid-row: 2;
    grid-column: 1;
    justify-content: center;
    /* Stands on the plate's faded foot. */
    margin-block-start: -4rem;
  }

  .c-hero__scroll {
    display: none;
  }
}

/* Short wide screens (a laptop with its browser chrome, a window not
   maximised, a tablet on its side): everything still fits in the one screen.
   The utility strip steps aside (its address and accessibility link are in
   the footer too), the card drops its one-line introduction — the title and
   "one minute" say it — and the rhythm tightens. 56em (896px) because below
   that the full column (strip, intro line and all) no longer fits in
   English. */
@media (min-width: 64em) and (max-height: 56em) {
  [data-page='cinematic'] .c-utility {
    display: none;
  }

  .page-cinematic[data-page='cinematic'] {
    --topbar-h: var(--header-h);
  }

  .c-hero {
    --hero-pad: clamp(0.75rem, 2.6svh, 1.5rem);
  }

  .c-hero__inner {
    gap: clamp(0.75rem, 2.2svh, 1.25rem);
  }

  .c-hero .quick-form__head p {
    display: none;
  }
}

/* Shorter still (a 1366 × 768 laptop's viewport): a smaller headline and a
   closer rhythm keep it to the one screen. */
@media (min-width: 64em) and (max-height: 44em) {
  .c-hero__inner {
    gap: 0.6rem;
  }

  .c-hero__copy {
    gap: 0.35rem;
  }

  .c-hero__title {
    font-size: clamp(2rem, min(4vw, 5.4svh), 3rem);
  }

  .c-hero .quick-form__head {
    padding-block: 0.6rem 0.5rem;
  }

  .c-hero .quick-form__body {
    padding-block: 0.6rem 0.75rem;
  }

  .c-hero .quick-form__grid {
    gap: 0.45rem 0.75rem;
  }

  .c-hero .quick-form .field input,
  .c-hero .quick-form .field select {
    min-height: 2.3rem;
    padding-block: 0.3rem;
  }

  .c-hero .quick-form .checkbox,
  .c-hero .quick-form__actions {
    margin-block-start: 0.6rem;
  }
}

/* A window about 600px tall: the kicker steps aside too (the header carries
   the name, the footer the address). */
@media (min-width: 64em) and (max-height: 39em) {
  .c-hero__kicker {
    display: none;
  }

  .c-hero__lead {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .c-hero .quick-form .checkbox {
    line-height: 1.4;
  }
}

/* The shortest windows the wide layout meets (about 560px): the card's
   controls come down to their minimum comfortable size. */
@media (min-width: 64em) and (max-height: 36.5em) {
  .c-hero {
    --hero-pad: 0.35rem;
  }

  .c-hero__inner {
    gap: 0.45rem;
  }

  .c-hero .quick-form__grid {
    gap: 0.35rem 0.75rem;
  }

  .c-hero .quick-form .checkbox,
  .c-hero .quick-form__actions {
    margin-block-start: 0.45rem;
  }

  .c-hero .quick-form .field input,
  .c-hero .quick-form .field select {
    min-height: 2.1rem;
  }

  .c-hero .quick-form .btn--primary {
    min-height: 2.4rem;
  }
}

/* A phone on its side: the wide layout in miniature. The plate is the
   inline-end half of the screen, so he stands centred in his own half, and
   the copy takes the other half on the hero's ground. Laid over a full-width
   plate, a column of any useful width crossed his face: the plate is wider
   than 16:9 there, so the film fills the width and he is always centred. */
@media (max-width: 63.99em) and (max-height: 32em) and (orientation: landscape) {
  .c-hero {
    --hero-pad: 0.6rem;
  }

  .c-hero__stage {
    inset-inline-start: auto;
    inline-size: 54%;
  }

  .c-hero__inner {
    max-inline-size: 48%;
    margin-inline: 0 auto;
    gap: 0.6rem;
  }

  /* The copy stands on the ground here, not on the film. */
  .c-hero__inner::before {
    display: none;
  }

  /* Half a phone's width is too narrow for the address line (it took two
     lines in English); the header carries the name. */
  .c-hero__kicker {
    display: none;
  }

  .c-hero__copy {
    gap: 0.35rem;
  }

  .c-hero__title {
    font-size: clamp(1.4rem, 7.4svh, 2.1rem);
  }

  .c-hero__lead {
    max-width: none;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .qc-teaser {
    padding-block: 0.5rem;
  }

  .qc-teaser__arrow {
    inline-size: 2.2rem;
    block-size: 2.2rem;
  }

  /* Under the header, under the phone bar, and towards the copy. */
  .c-hero__stage::after {
    background:
      linear-gradient(to bottom, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 18%),
      linear-gradient(to top, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 30%),
      linear-gradient(to left, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.6) 8%, rgb(var(--c-hero-ground-rgb) / 0) 28%);
  }

  html[dir='ltr'] .c-hero__stage::after {
    background:
      linear-gradient(to bottom, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 18%),
      linear-gradient(to top, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0) 30%),
      linear-gradient(to right, var(--c-hero-ground), rgb(var(--c-hero-ground-rgb) / 0.6) 8%, rgb(var(--c-hero-ground-rgb) / 0) 28%);
  }
}

/* The seam into the page. The hero ends exactly at the foot of the first
   screen, so the seam is the top of the section below and only arrives as
   the visitor scrolls. It is an edge, not a fade: a brass rule (the gold of
   the monogram, and of the rule along the top of the quick-check card) where
   the dark ground stops, and under it a little of the office's lamplight
   spilling onto the page and dying away. A dark ramp laid over the light
   page read as a grey smudge — neither colour is in the palette. */
.c-strip {
  --seam: clamp(2.75rem, 5vw, 4rem);
  padding-block-start: var(--seam);
  border-block-end: 1px solid var(--c-line);
  /* The rule alone where color-mix() is not supported. */
  background: linear-gradient(rgb(var(--c-amber-rgb) / 0.85), rgb(var(--c-amber-rgb) / 0.85)) 0 0 / 100% 1px;
  background:
    linear-gradient(rgb(var(--c-amber-rgb) / 0.85), rgb(var(--c-amber-rgb) / 0.85)) 0 0 / 100% 1px,
    radial-gradient(ellipse 70% 100% at 50% 0, color-mix(in oklab, var(--c-amber) 22%, transparent), transparent 100%) 0 1px / 100% var(--seam),
    linear-gradient(to bottom, color-mix(in oklab, var(--c-amber) 12%, transparent), transparent) 0 1px / 100% var(--seam);
  /* None of the layers may tile. */
  background-repeat: no-repeat;
}

.c-strip__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-strip__list li {
  display: grid;
  gap: 0.3rem;
  padding: 1.25rem 1rem 1.25rem 0;
  border-inline-start: 1px solid var(--c-line);
}

.c-strip__list li:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.c-strip__list li:nth-child(odd) {
  padding-inline-start: 0;
}

.c-strip__list strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.c-strip__list span {
  font-size: 0.7rem;
  color: var(--c-dim);
  line-height: 1.5;
}

@media (min-width: 64em) {
  .c-strip__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .c-strip__list li:nth-child(odd) {
    padding-inline-start: 1.5rem;
  }

  .c-strip__list li {
    padding-inline-start: 1.5rem;
  }

  .c-strip__list li:first-child {
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Catalogue list (practice areas, numbered like exhibits)
   -------------------------------------------------------------------------- */
.c-list {
  border-block-start: 1px solid var(--c-line);
}

/* --------------------------------------------------------------------------
   Gallery plate (framed photograph with a caption, museum style)
   -------------------------------------------------------------------------- */
.c-plate {
  position: relative;
  margin: 0;
}

.c-plate__img {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
}

.c-plate__img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out), transform 1.2s var(--ease-out);
}

.c-plate__img.is-loaded img {
  opacity: 1;
}

.c-plate:hover .c-plate__img img {
  transform: scale(1.03);
}

.c-plate figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block-start: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-dim);
}

html[dir='rtl'] .c-plate figcaption {
  letter-spacing: 0.04em;
}

/* Halo behind a plate, echoing the hero ring. Centred with auto margins so it
   can never push the page sideways in either writing direction. */
.c-plate--halo::before {
  content: '';
  position: absolute;
  inset-block-start: -8%;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(24rem, 90%);
  aspect-ratio: 1;
  border: 1px solid rgb(var(--c-tint-rgb) / 0.22);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 60px rgb(var(--c-tint-rgb) / 0.06), inset 0 0 60px rgb(var(--c-tint-rgb) / 0.04);
}

/* Interlude: a gallery plate beside a short statement of the approach ------ */
.c-interlude {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.c-interlude > div {
  display: grid;
  gap: 1.1rem;
  align-content: center;
}

.c-interlude__quote {
  font-family: var(--c-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  max-width: 20ch;
  margin: 0;
}

@media (min-width: 64em) {
  .c-interlude {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.c-about__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.c-values {
  display: grid;
  gap: 0;
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--c-line);
}

.c-values li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-block-end: 1px solid var(--c-line);
  font-size: 0.82rem;
}

.c-values strong {
  font-weight: 600;
}

.c-values p {
  margin-block-start: 0.2rem;
  font-size: 0.74rem;
  color: var(--c-dim);
  line-height: 1.6;
}

@media (min-width: 64em) {
  .c-about__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */
.c-steps {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--c-line);
  counter-reset: step;
}

.c-steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-block-end: 1px solid var(--c-line);
}

.c-steps h3 {
  font-family: var(--c-serif);
  font-size: 1.35rem;
  line-height: 1.15;
  margin-block-end: 0.35rem;
}

.c-steps p {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--c-dim);
  max-width: 44ch;
}

@media (min-width: 64em) {
  .c-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Stories, reviews, knowledge (placeholder-aware cards)
   -------------------------------------------------------------------------- */
.c-cards {
  display: grid;
  gap: 1.25rem;
}

.c-card {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--c-line);
  background: linear-gradient(160deg, rgb(var(--c-tint-rgb) / 0.03), transparent 70%);
  transition: border-color var(--dur), background-color var(--dur);
}

.c-card:hover {
  border-color: var(--c-line-2);
}

.c-card--dashed {
  border-style: dashed;
}

.c-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.c-card h3 {
  font-family: var(--c-serif);
  font-size: 1.25rem;
  line-height: 1.2;
}

.c-card p {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--c-dim);
}

.c-card dl {
  display: grid;
  gap: 0.75rem;
}

.c-card dt {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin-block-end: 0.3rem;
}

html[dir='rtl'] .c-card dt {
  letter-spacing: 0.04em;
}

.c-card dd {
  margin: 0;
}

.c-quote {
  font-family: var(--c-serif);
  font-size: 2.5rem;
  line-height: 0.5;
  color: var(--c-line-2);
}

.c-source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-dim);
}

html[dir='rtl'] .c-source {
  letter-spacing: 0.02em;
}

.c-source svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

.c-note {
  margin-block-start: 1.5rem;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--c-dim);
  max-width: 60ch;
}

@media (min-width: 48em) {
  .c-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Knowledge entries as catalogue rows with a plate */
.c-article {
  display: grid;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

.c-article .c-plate__img {
  aspect-ratio: 4 / 3;
}

.c-article h3 {
  font-family: var(--c-serif);
  font-size: 1.3rem;
  line-height: 1.22;
  transition: color var(--dur-fast);
}

.c-article:hover h3 {
  color: var(--c-blue-soft);
}

.c-article p {
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--c-dim);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.c-faq {
  border-block-start: 1px solid var(--c-line);
  max-width: 62rem;
}

.c-faq details {
  border-block-end: 1px solid var(--c-line);
}

.c-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--c-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.25;
  transition: color var(--dur-fast);
}

.c-faq summary:hover {
  color: var(--c-blue-soft);
}

.c-faq summary::-webkit-details-marker {
  display: none;
}

/* Open / close: Lucide's chevron (css/icons.css), painted in the text colour. */
.c-faq summary::after {
  content: '';
  flex: none;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: currentColor;
  -webkit-mask: var(--icon-expand) center / contain no-repeat;
          mask: var(--icon-expand) center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}

.c-faq details[open] summary::after {
  transform: rotate(180deg);
}

.c-faq__body {
  padding-block-end: 1.5rem;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--c-ink-2);
  max-width: 62ch;
}

.c-faq__body a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Final CTA + footer
   -------------------------------------------------------------------------- */
.c-cta {
  position: relative;
  border-block-start: 1px solid var(--c-line);
}

.c-cta__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.c-cta__title {
  font-family: var(--c-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.02;
  max-width: 14ch;
}

.c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

.c-contacts {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--c-line);
  margin-block-start: 2.5rem;
}

.c-contacts li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-block-end: 1px solid var(--c-line);
  font-size: 0.8rem;
}

.c-contacts dt,
.c-contacts .c-contacts__label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-dim);
  align-self: center;
}

html[dir='rtl'] .c-contacts .c-contacts__label {
  letter-spacing: 0.04em;
}

.c-contacts a {
  text-decoration: none;
}

.c-contacts a:hover {
  color: var(--c-blue-soft);
}

@media (min-width: 64em) {
  .c-cta__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4.5rem;
  }
}

.c-foot {
  border-block-start: 1px solid var(--c-line);
  padding-block: 2.5rem 1.5rem;
}

.c-foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

.c-foot h3 {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-dim);
  margin-block-end: 0.9rem;
}

html[dir='rtl'] .c-foot h3 {
  letter-spacing: 0.06em;
}

.c-foot ul {
  display: grid;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.c-foot a {
  text-decoration: none;
  color: var(--c-ink-2);
}

.c-foot a:hover {
  color: var(--c-ink);
}

.c-wordmark {
  margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
  font-family: var(--c-serif);
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgb(var(--c-tint-rgb) / 0.1);
  white-space: nowrap;
  overflow: hidden;
}

.c-foot__bottom {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--c-dim);
}

.c-foot__bottom a {
  color: var(--c-dim);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.c-foot__disclaimer {
  max-width: 70ch;
}

@media (min-width: 48em) {
  .c-foot__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Shared components, restyled for the dark surface
   -------------------------------------------------------------------------- */
/* The hero's quick-check form has its own block at the end of this file
   ("Quick form — the card"); what follows is shared by every form field. */

.page-cinematic .field label,
.page-cinematic .field__label {
  /* Small uppercase type over a blurred, moving background needs more than the
     usual dim tone to stay legible. */
  color: rgb(255 255 255 / 0.92);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: 0.3rem;
}

html[dir='rtl'] .page-cinematic .field label,
html[dir='rtl'] .page-cinematic .field__label {
  letter-spacing: 0.04em;
}

.page-cinematic .field input,
.page-cinematic .field select,
.page-cinematic .field textarea {
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 8px;
  /* main.css sets min-height: 3rem on every field — that, not the padding, is
     what kept these tall. 2.05rem still clears the 44px touch target on the
     phone layout, which keeps its own larger sizing below 48em. */
  min-height: 2rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}

.page-cinematic .field input::placeholder {
  color: rgb(255 255 255 / 0.5);
}

.page-cinematic .field input:focus-visible,
.page-cinematic .field select:focus-visible,
.page-cinematic .field textarea:focus-visible {
  outline: none;
  background: rgb(255 255 255 / 0.18);
  border-color: rgb(255 255 255 / 0.7);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.16);
}

/* The native dropdown list is rendered by the OS, not the page — it needs
   real colours or it is white-on-white. */
.page-cinematic .field select option {
  background: #14161a;
  color: #ffffff;
}

.page-cinematic .field select {
  background-image: var(--c-select-arrow);
  background-position: left 0.6rem center;
  /* The `background: transparent` above is a shorthand, so it reset repeat and
     size and the arrow tiled across the field. Restate them. */
  background-repeat: no-repeat;
  background-size: 1.1rem;
}

html[dir='ltr'] .page-cinematic .field select {
  background-position: right 0.6rem center;
}

.page-cinematic .field select option {
  background: var(--c-surface);
  color: var(--c-ink);
}

.page-cinematic .field input:hover,
.page-cinematic .field select:hover,
.page-cinematic .field textarea:hover {
  border-color: var(--c-line-2);
}

.page-cinematic .field input:focus,
.page-cinematic .field select:focus,
.page-cinematic .field textarea:focus {
  border-color: var(--c-blue-soft);
  box-shadow: 0 1px 0 0 var(--c-blue-soft);
}

.page-cinematic .field.is-invalid input,
.page-cinematic .field.is-invalid select,
.page-cinematic .field.is-invalid textarea {
  border-color: var(--c-error);
}

.page-cinematic .field__error {
  color: var(--c-error);
}

.page-cinematic .checkbox a,
.page-cinematic .quick-form__privacy svg {
  color: var(--c-ink-2);
}

.page-cinematic .btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

html[dir='rtl'] .page-cinematic .btn--primary {
  letter-spacing: 0.04em;
}

.page-cinematic .btn--primary:hover {
  background: var(--c-blue);
  color: #fff;
  box-shadow: none;
}

.page-cinematic .btn--dark {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line-2);
  border-radius: 0;
}

.page-cinematic .btn--dark:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}

.page-cinematic .btn--whatsapp {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line-2);
  border-radius: 0;
}

.page-cinematic .btn--whatsapp svg {
  color: var(--c-wa);
}

.page-cinematic .btn--whatsapp:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}

.page-cinematic .form-success {
  background: rgb(var(--c-tint-rgb) / 0.04);
  border: 1px solid var(--c-line-2);
  border-radius: 0;
}

.page-cinematic .form-success h3 {
  font-family: var(--c-serif);
  font-weight: 400;
}

.page-cinematic .form-success p {
  color: var(--c-dim);
}

.page-cinematic .form-success__icon {
  background: var(--c-blue);
  border-radius: 0;
}

.page-cinematic .form-error {
  background: rgb(var(--c-error-rgb) / 0.1);
  border-color: rgb(var(--c-error-rgb) / 0.4);
  color: var(--c-error);
}

.page-cinematic .badge--placeholder {
  background: rgb(var(--c-amber-rgb) / 0.1);
  color: var(--c-amber);
  border-color: rgb(var(--c-amber-rgb) / 0.4);
  border-radius: 0;
}

.page-cinematic .badge--teal {
  background: transparent;
  border: 1px solid var(--c-line-2);
  color: var(--c-ink-2);
  border-radius: 0;
}

.page-cinematic .skeleton {
  background: linear-gradient(90deg, rgb(var(--c-tint-rgb) / 0.06), rgb(var(--c-tint-rgb) / 0.14), rgb(var(--c-tint-rgb) / 0.06));
  border-radius: 0;
}

.page-cinematic .notice--placeholder {
  background: rgb(var(--c-amber-rgb) / 0.07);
  border: 1px dashed rgb(var(--c-amber-rgb) / 0.4);
  color: var(--c-amber);
  border-radius: 0;
}

.page-cinematic .notice--info {
  background: rgb(var(--c-blue-soft-rgb) / 0.08);
  border: 1px solid rgb(var(--c-blue-soft-rgb) / 0.3);
  color: var(--c-ink-2);
  border-radius: 0;
}

/* Intake dialog */
.page-cinematic .intake__panel {
  background: var(--c-bg);
  border-inline-start: 1px solid var(--c-line);
}

.page-cinematic .intake__head {
  background: var(--c-bg-2);
  border-block-end: 1px solid var(--c-line);
}

.page-cinematic .intake__head h2 {
  font-family: var(--c-serif);
  font-weight: 400;
}

.page-cinematic .intake__head p {
  color: var(--c-dim);
}

.page-cinematic .intake__close {
  color: var(--c-ink);
}

.page-cinematic .intake__close:hover {
  background: rgb(var(--c-tint-rgb) / 0.08);
}

.page-cinematic .intake__backdrop {
  background: var(--c-backdrop);
}

.page-cinematic .flow__progress-meta {
  color: var(--c-dim);
}

.page-cinematic .flow__bar {
  background: var(--c-line);
  border-radius: 0;
}

.page-cinematic .flow__bar span {
  background: var(--c-blue);
  border-radius: 0;
}

.page-cinematic .flow__title {
  font-family: var(--c-serif);
  font-weight: 400;
}

.page-cinematic .flow__desc,
.page-cinematic .flow__footnote,
.page-cinematic .flow__handoff {
  color: var(--c-dim);
}

.page-cinematic .flow-option {
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 0;
  color: var(--c-ink);
}

.page-cinematic .flow-option:hover {
  border-color: var(--c-line-2);
  background: rgb(var(--c-tint-rgb) / 0.04);
  box-shadow: none;
}

.page-cinematic .flow-option[aria-pressed='true'] {
  border-color: var(--c-blue-soft);
  background: rgb(var(--c-blue-rgb) / 0.12);
  box-shadow: none;
}

/* Practice-area marks in this design: the accent blue on a faint blue tile,
   square like everything else here. */
.page-cinematic {
  --area-mark-ink: var(--c-blue-soft);
  --area-mark-bg: rgb(var(--c-blue-rgb) / 0.06);
  --area-mark-line: rgb(var(--c-blue-rgb) / 0.2);
}

.page-cinematic .flow__summary {
  background: rgb(var(--c-tint-rgb) / 0.03);
  border: 1px solid var(--c-line);
  border-radius: 0;
}

.page-cinematic .flow__summary dt {
  color: var(--c-dim);
}

.page-cinematic .flow__back {
  color: var(--c-dim);
}

.page-cinematic .flow__back:hover {
  color: var(--c-ink);
}

.page-cinematic .segmented span {
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 0;
  color: var(--c-ink-2);
}

.page-cinematic .segmented input:checked + span {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

/* Mobile action bar */
.page-cinematic .mobile-bar {
  background: rgb(var(--c-panel-rgb) / 0.92);
  border-block-start: 1px solid var(--c-line);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.page-cinematic .reveal {
  transform: translateY(26px);
}

.page-cinematic .reveal.is-visible {
  transform: none;
}

/* Headline words rise in sequence (the reference's text transitions) */
.c-rise > span {
  display: block;
  overflow: hidden;
}

.c-rise > span > i {
  display: block;
  font-style: inherit;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}

.c-rise.is-visible > span > i {
  transform: none;
}

.c-rise > span:nth-child(2) > i {
  transition-delay: 90ms;
}

.c-rise > span:nth-child(3) > i {
  transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .c-rise > span > i {
    transform: none !important;
  }

  .c-plate__img img {
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   Practice areas as folders. Hovering or focusing into one opens it and fans
   out the three stages of that area; picking a stage grows a panel out of the
   card it was picked from.
   -------------------------------------------------------------------------- */
.c-folders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.c-folder {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.9rem;
  padding: 1.15rem 1.15rem 1rem;
  border: 1px solid var(--c-line);
  background: rgb(var(--c-panel-rgb) / 0.45);
  perspective: 1000px;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.c-folder:hover,
.c-folder:focus-within {
  border-color: var(--c-line-2);
  box-shadow: 0 18px 44px rgb(var(--c-tint-rgb) / 0.1);
  transform: translateY(-2px);
}

/* The folder itself ------------------------------------------------------- */
.c-folder__stage {
  position: relative;
  block-size: 10.5rem;
}

.c-folder__back,
.c-folder__front,
.c-folder__shine,
.c-folder__tab {
  position: absolute;
  transform-origin: bottom center;
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.c-folder__back,
.c-folder__front,
.c-folder__shine {
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 8rem;
  block-size: 5.6rem;
  border: 1px solid var(--c-line-2);
}

.c-folder__back {
  inset-block-end: 1.1rem;
  background: rgb(var(--c-tint-rgb) / 0.05);
  z-index: 10;
}

.c-folder__tab {
  inset-inline-start: calc(50% - 4rem);
  inset-block-end: 6.7rem;
  inline-size: 3rem;
  block-size: 0.8rem;
  background: var(--c-blue);
  z-index: 10;
}

.c-folder__front {
  inset-block-end: 0.85rem;
  background: rgb(var(--c-tint-rgb) / 0.1);
  z-index: 30;
}

.c-folder__shine {
  inset-block-end: 0.85rem;
  border-color: transparent;
  background: linear-gradient(135deg, rgb(var(--c-panel-rgb) / 0.5) 0%, transparent 55%);
  z-index: 31;
}

.c-folder:hover .c-folder__back,
.c-folder:focus-within .c-folder__back {
  transform: rotateX(-16deg);
}

.c-folder:hover .c-folder__tab,
.c-folder:focus-within .c-folder__tab {
  transform: rotateX(-26deg) translateY(-2px);
}

.c-folder:hover .c-folder__front,
.c-folder:focus-within .c-folder__front,
.c-folder:hover .c-folder__shine,
.c-folder:focus-within .c-folder__shine {
  transform: rotateX(26deg) translateY(8px);
}

/* The three stage cards --------------------------------------------------- */
.c-folder__cards {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 2rem;
  block-size: 0;
  z-index: 20;
}

.c-folder__card {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 5rem;
  block-size: 6.4rem;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.35rem 0.45rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  box-shadow: 0 10px 24px rgb(var(--c-tint-rgb) / 0.16);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0) translateX(0) rotate(0deg) scale(0.5);
  --fan-x: 58px;
  --lift: -92px;
  transition:
    transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0ms),
    opacity 420ms var(--ease-out) var(--delay, 0ms),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
  z-index: calc(10 - var(--i, 0));
}

.c-folder__card .area-mark {
  --area-mark-size: 2.5rem;
}

.c-folder__card-label {
  font-size: 0.56rem;
  line-height: 1.25;
  text-align: center;
  color: var(--c-dim);
}

.c-folder:hover .c-folder__card,
.c-folder:focus-within .c-folder__card {
  opacity: 1;
  transform: translateY(var(--lift)) translateX(calc(var(--sign) * var(--fan-x))) rotate(var(--rot)) scale(1);
}

.c-folder__card:hover,
.c-folder__card:focus-visible {
  border-color: var(--c-blue);
  box-shadow: 0 14px 30px rgb(var(--c-tint-rgb) / 0.22);
}

/* Without hover there is nothing to reveal, so the cards start fanned out. */
@media (hover: none) {
  .c-folder__stage {
    block-size: 11.5rem;
  }

  .c-folder__card {
    opacity: 1;
    transform: translateY(var(--lift)) translateX(calc(var(--sign) * var(--fan-x))) rotate(var(--rot)) scale(1);
  }
}

/* A two-up grid leaves little room either side, so tighten the fan there. */
@media (max-width: 47.99em) {
  .c-folder__card {
    --fan-x: 27px;
    --lift: -78px;
    inline-size: 4.1rem;
    block-size: 5.4rem;
  }

  .c-folder__card .area-mark {
    --area-mark-size: 2rem;
    --area-mark-stroke: 1.75;
  }

  .c-folder__card-label {
    font-size: 0.5rem;
  }
}

/* The folder's tab is a detail of the closed folder. Where the papers rest fanned out above the folder (touch, reduced motion) it
   would stick out above them as a stray solid bar, so it is not drawn there. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .c-folder__tab {
    display: none;
  }
}

/* On a phone the two back papers are covered by the front one except for a sliver, so a label or an icon on them reads as clipped
   letters. They are drawn as plain paper edges; each is still a button named by its aria-label. */
@media (max-width: 47.99em) {
  .c-folder__card:not(:first-child) > * {
    visibility: hidden;
  }
}

/* Narrow phones (320 to 374 px): the card's content box is only 100 to 127 px wide, so the tray, the papers and the fan are drawn a
   little smaller and the whole illustration stays inside the card. The papers keep their bottom edge (the lift is the paper's
   height less 8 px), so only the width and the height change. */
@media (max-width: 23.4em) {
  .c-folder__back,
  .c-folder__front,
  .c-folder__shine {
    inline-size: 6.4rem;
  }

  .c-folder__card {
    --fan-x: 21px;
    --lift: -70px;
    inline-size: 3.7rem;
    block-size: 4.9rem;
    padding: 0.4rem 0.25rem 0.35rem;
  }

  .c-folder__card .area-mark {
    --area-mark-size: 1.8rem;
  }

  .c-folder__card-label {
    font-size: 0.46rem;
  }
}

@media (max-width: 21.25em) {
  .c-folder__back,
  .c-folder__front,
  .c-folder__shine {
    inline-size: 5.6rem;
  }

  .c-folder__card {
    --fan-x: 18px;
    --lift: -64px;
    inline-size: 3.3rem;
    block-size: 4.5rem;
  }

  .c-folder__card .area-mark {
    --area-mark-size: 1.6rem;
  }
}

.c-folder__head {
  display: grid;
  gap: 0.3rem;
}

.c-folder__title {
  font-family: var(--c-serif);
  font-size: 1.3rem;
  line-height: 1.1;
}

.c-folder__meta {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--c-dim);
}

.c-folder__cta {
  justify-self: start;
}

@media (min-width: 48em) {
  .c-folders {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 64em) {
  .c-folders {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   The stage panel
   -------------------------------------------------------------------------- */
.c-peek {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  /* One column that is exactly the screen's content box. With an auto column the panel's `min(42rem, 100%)` was resolved against
     the widest slide's text (not against the screen), so on a phone the panel came out wider than the screen and was centred
     around it: its left part was cut off by the screen edge. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  /* viewport-fit=cover: keep clear of the notch, the home bar and the rounded corners (a phone on its side). */
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.c-peek[hidden] {
  display: none;
}

body.peek-open {
  overflow: hidden;
}

.c-peek__backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.c-peek.is-open .c-peek__backdrop {
  opacity: 1;
}

.c-peek__panel {
  position: relative;
  z-index: 2;
  inline-size: min(42rem, 100%);
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  box-shadow: 0 40px 90px rgb(var(--c-tint-rgb) / 0.3);
  transform-origin: center center;
  transition:
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 300ms var(--ease-out);
}

/* The stage panel is swiped sideways (js/folder-cards.js): leave the browser only the vertical pan, so a horizontal swipe reaches the
   script as pointer events instead of being taken (and cancelled) as a page pan. */
.c-peek:not(.c-peek--read) .c-peek__panel {
  touch-action: pan-y;
}

.c-peek__close {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0.6rem;
  z-index: 3;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.c-peek__close:hover {
  background: rgb(var(--c-tint-rgb) / 0.06);
  border-color: var(--c-line);
}

.c-peek__close svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.c-peek__viewport {
  overflow: hidden;
}

.c-peek__track {
  display: flex;
  transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1);
}

.c-peek__slide {
  flex: 0 0 100%;
  min-inline-size: 100%;
  margin: 0;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
}

.c-peek__art {
  --area-mark-size: 7.5rem;
  /* The icon is 72px here, so 0.6 units draws a 1.8px line: the weight of the
     folder glyph and the intake tiles. */
  --area-mark-stroke: 0.6;
}

.c-peek__slide-title {
  font-family: var(--c-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.12;
}

.c-peek__note {
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--c-ink-2);
  max-width: 44ch;
}

.c-peek__bar {
  display: grid;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2rem) 1.25rem;
  border-block-start: 1px solid var(--c-line);
}

.c-peek__meta {
  display: grid;
  gap: 0.25rem;
}

.c-peek__title {
  font-family: var(--c-serif);
  font-size: 1.1rem;
  line-height: 1.2;
}

.c-peek__counter {
  font-size: 0.7rem;
}

.c-peek__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.c-peek__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 3;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-2);
  background: var(--c-bg);
  color: var(--c-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast);
}

.c-peek.is-open .c-peek__nav {
  opacity: 1;
}

.c-peek__nav:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}

.c-peek__nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

.c-peek__nav svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.c-peek__nav--prev {
  inset-inline-start: clamp(0.5rem, 3vw, 2.5rem);
}

.c-peek__nav--next {
  inset-inline-end: clamp(0.5rem, 3vw, 2.5rem);
}

.c-peek__dots {
  position: absolute;
  inset-block-end: clamp(1rem, 4vh, 2.5rem);
  inset-inline: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.c-peek.is-open .c-peek__dots {
  opacity: 1;
}

.c-peek__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgb(var(--c-panel-rgb) / 0.55);
  box-shadow: 0 0 0 1px var(--c-line-2);
  cursor: pointer;
  transition: transform var(--dur-fast), background-color var(--dur-fast);
}

.c-peek__dot[aria-selected='true'] {
  background: var(--c-blue);
  transform: scale(1.35);
}

@media (min-width: 40em) {
  .c-peek__bar {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* The stage panel on a phone (below 48em). The previous/next arrows are not laid over the panel at the screen's edges, where on a
   phone they sat on top of the description and cut the sentence: the panel and one pager row (arrow, dots, arrow) become a grid,
   so the arrows are below the panel, one at each end of the dots. The columns are logical, so in Hebrew (RTL) "previous" is on the
   right and in English on the left, as before; css/icons.css mirrors the arrow drawings on the English page. */
@media (max-width: 47.99em) {
  .c-peek:not(.c-peek--read) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    align-content: center;
    align-content: safe center;
    row-gap: 0.9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The backdrop stays the size of the screen when the grid has to scroll (a phone on its side). */
  .c-peek:not(.c-peek--read) .c-peek__backdrop {
    position: fixed;
  }

  .c-peek:not(.c-peek--read) .c-peek__panel {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .c-peek:not(.c-peek--read) .c-peek__nav,
  .c-peek:not(.c-peek--read) .c-peek__dots {
    position: static;
    translate: none;
    grid-row: 2;
    align-self: center;
  }

  .c-peek:not(.c-peek--read) .c-peek__nav--prev {
    grid-column: 1;
  }

  .c-peek:not(.c-peek--read) .c-peek__dots {
    grid-column: 2;
    inset: auto;
  }

  .c-peek:not(.c-peek--read) .c-peek__nav--next {
    grid-column: 3;
  }
}

/* A short screen (a phone on its side): the panel gives up some height so that it, and on a phone the pager below it, stay in view. */
@media (max-height: 32em) {
  .c-peek:not(.c-peek--read) .c-peek__art {
    --area-mark-size: 4.5rem;
  }

  .c-peek:not(.c-peek--read) .c-peek__slide {
    gap: 0.6rem;
    padding-block: 1.25rem;
  }

  .c-peek:not(.c-peek--read) .c-peek__bar {
    padding-block: 0.8rem;
    gap: 0.6rem;
  }
}

@media (max-height: 26em) {
  .c-peek:not(.c-peek--read) .c-peek__art {
    --area-mark-size: 3.25rem;
  }

  .c-peek:not(.c-peek--read) .c-peek__slide {
    gap: 0.4rem;
    padding-block: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-folder__card {
    opacity: 1 !important;
    transform: translateY(var(--lift)) translateX(calc(var(--sign) * var(--fan-x))) rotate(var(--rot)) scale(1) !important;
  }

  .c-folder__back,
  .c-folder__front,
  .c-folder__shine,
  .c-folder__tab {
    transform: none !important;
  }
}

/* The area's icon rests on the closed folder, and clears as it opens. */
.c-folder__glyph {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  inset-block-end: 2rem;
  --area-mark-size: 3rem;
  --area-mark-bg: var(--c-surface);
  z-index: 32;
  pointer-events: none;
  transition:
    opacity 280ms var(--ease-out),
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-folder:hover .c-folder__glyph,
.c-folder:focus-within .c-folder__glyph {
  opacity: 0;
  transform: translateY(12px) scale(0.75);
}

/* Where the cards rest fanned out (no hover, or reduced motion) they already
   show the area's icon, so the glyph stays hidden: one icon, not two stacked. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .c-folder__glyph {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Header while the drawer is open
   The drawer is half the page, so a solid bar would run across the dimmed half
   too. Instead the bar goes clear, steps back to the logo and the Close button
   (as in the reference), and Close takes dark ink because it always sits over
   the white panel: both are anchored to the inline end.
   body.page-cinematic.nav-open (0,3,1) outranks .c-top.is-stuck (0,3,0), so
   this also holds when the menu is opened after scrolling.
   -------------------------------------------------------------------------- */
body.page-cinematic.nav-open .c-top {
  background: transparent;
  border-block-end-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-cinematic .c-top .c-lang,
.page-cinematic .c-top .c-top__tel,
.page-cinematic .c-top .c-top__book,
.page-cinematic .c-top .c-nav__list {
  transition: opacity 0.3s var(--cubic-default), visibility 0.3s;
}

/* The number also opens and closes as the header settles (see "While the
   header is clear over the hero"), so the nav glides rather than jumps. */
.page-cinematic .c-top .c-top__tel {
  transition:
    opacity 0.3s var(--cubic-default),
    visibility 0.3s,
    max-inline-size 0.32s ease,
    margin 0.32s ease;
}

@media (prefers-reduced-motion: reduce) {
  .page-cinematic .c-top .c-top__tel {
    transition: none;
  }
}

body.page-cinematic.nav-open .c-top .c-lang,
body.page-cinematic.nav-open .c-top .c-top__tel,
body.page-cinematic.nav-open .c-top .c-top__book,
body.page-cinematic.nav-open .c-top .c-nav__list {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.page-cinematic.nav-open .nav-close-btn {
  background: #ffffff;
  color: #14161a;
  border-color: rgb(20 22 26 / 0.18);
  box-shadow: 0 2px 10px rgb(20 22 26 / 0.08);
}

body.page-cinematic.nav-open .nav-close-btn:hover {
  background: #f4f4f5;
}

/* Centre the list when it fits, top-align when it doesn't. Plain
   justify-content: center pushed the overflow off both ends, so on a short
   window the first entry sat unreachable under the header. */
.c-nav .menu-content {
  justify-content: flex-start;
}

.c-nav .menu-content > .c-wrap {
  margin-block: auto;
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   Drawer: scrolling, compactness, extra motion hooks
   -------------------------------------------------------------------------- */
/* Only the list scrolls. The panels and shapes are stretched to fill
   .menu-content; while .menu-content was itself the scroller they scrolled
   away with the list and left the bottom of the panel bare. */
.c-nav .menu-content {
  overflow: hidden;
}

.c-nav .menu-content > .c-wrap {
  min-block-size: 0;
  max-block-size: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* The page must not scroll behind the drawer at any width — main.css only
   locked it below 64em. */
body.nav-open {
  overflow: hidden;
}

/* Compact rows. */
.c-nav__mobile a {
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.85rem);
  padding: 0.62rem 0;
  gap: 0.85rem;
  border-block-end: 0;            /* drawn by .c-nav__rule so it can animate */
}

.c-nav__actions {
  margin-block-start: 1.25rem;
  gap: 0.5rem;
}

.c-nav__actions .c-btn {
  min-height: 2.6rem;
}

@media (max-height: 44em) {
  .c-nav__mobile a {
    font-size: 1.3rem;
    padding: 0.45rem 0;
  }

  .c-nav__actions {
    margin-block-start: 0.9rem;
  }
}

/* The row divider, drawn in from the inline start by the timeline. */
.c-nav__rule {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--c-line);
  transform-origin: left center;
  pointer-events: none;
}

html[dir='rtl'] .c-nav__rule {
  transform-origin: right center;
}

/* Hover: the label steps toward the reading direction, the number takes the
   accent. CSS, since it answers the pointer rather than the open/close. */
.c-nav__label {
  display: inline-block;
  transition: transform 0.55s var(--cubic-default);
}

.c-nav__mobile a:hover .c-nav__label,
.c-nav__mobile a:focus-visible .c-nav__label {
  transform: translateX(0.4rem);
}

html[dir='rtl'] .c-nav__mobile a:hover .c-nav__label,
html[dir='rtl'] .c-nav__mobile a:focus-visible .c-nav__label {
  transform: translateX(-0.4rem);
}

.c-nav__mobile .c-num {
  transition: color 0.4s var(--cubic-default);
}

.c-nav__mobile a:hover .c-num,
.c-nav__mobile a:focus-visible .c-num {
  color: var(--c-blue);
}

/* A soft blur on the page behind; it fades in with the overlay's autoAlpha. */
.c-nav .overlay {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
  .c-nav__label,
  .c-nav__mobile .c-num {
    transition: none;
  }
}

/* Rows fade out at the scroller's edges instead of being sliced by them. The
   padding keeps the resting first and last rows clear of the fade. */
.c-nav .menu-content > .c-wrap {
  padding-block: 1rem;
  mask-image: linear-gradient(to bottom, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
}

/* `.page-cinematic a` (0,1,1) outranks `.c-btn` / `.c-btn--solid` (0,1,0), so a
   button written as a link inherited its colour instead — on the inner pages
   the solid "Book" link came out ink on ink. Restated at link specificity. */
.page-cinematic a.c-btn {
  color: var(--c-ink);
}

.page-cinematic a.c-btn--solid {
  color: var(--c-bg);
}

.page-cinematic a.c-btn--solid:hover {
  color: var(--c-ink);
}

/* Cards may not be widened by their contents. At 48em the three-up review grid
   holds unbreakable placeholder badges ("ביקורת מאושרת תופיע כאן") that forced
   each card wider than its track and pushed the page 16px sideways. */
.c-card {
  min-width: 0;
}

.c-card .badge,
.c-card .c-source {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Same fault in the footer: "Facebook: link to be added" in a four-up column.
   Placeholder badges are the long ones, so they wrap wherever they sit. */
.page-cinematic .badge--placeholder {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.c-foot__cols > *,
.c-foot li {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* The utility strip wraps to two lines on a phone, taller than the
     --topbar-h the hero pulls up by, which left the office-hours badge
     sitting on a white band above the hero. Its content lives in the footer
     too (address, accessibility), so on phones the header alone sits over
     the hero. */
  .c-utility {
    display: none;
  }

  .page-cinematic {
    --topbar-h: var(--header-h);
  }
}

/* A phone on its side has no room for the strip either: the header alone
   sits over the hero there. */
@media (max-width: 63.99em) and (max-height: 32em) and (orientation: landscape) {
  [data-page='cinematic'] .c-utility {
    display: none;
  }

  .page-cinematic[data-page='cinematic'] {
    --topbar-h: var(--header-h);
  }
}

/* Trust strip, two-up (below 64em): only the second column carries the
   divider, and it gets breathing room from it. The first-child rule alone left
   the third item with a stray line on its outer edge. */
@media (max-width: 63.99em) {
  .c-strip__list li:nth-child(odd) {
    border-inline-start: 0;
  }

  .c-strip__list li:nth-child(even) {
    padding-inline-start: 1rem;
  }
}

/* Phone action bar in the homepage's button language: square corners, tracked
   capitals, ink for the primary action. */
/* The bar takes the page's panel, so it turns dark with the dark theme and
   its outlined Call and WhatsApp buttons (page ink) stay readable. */
.page-cinematic .mobile-bar {
  background: rgb(var(--c-panel-rgb) / 0.94);
  gap: 0.4rem;
}

.page-cinematic .mobile-bar .btn {
  border-radius: 0;
  min-height: 2.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: none;
}

.page-cinematic .mobile-bar .btn:not(.btn--dark):not(.btn--primary) {
  background: transparent;
  border: 1px solid var(--c-line-2);
  color: var(--c-ink);
}

.page-cinematic .mobile-bar .btn svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* The hairline column grid is the gallery's signature on wide screens; on a
   single-column phone layout its lines just cut through the copy. */
/* ==========================================================================
   Quick form as a popup below 64em
   Above 64em the form is a card in the hero column. Below it, the same
   element (.c-hero__meta — same form, same fields, same handlers) becomes a
   popup: a bottom sheet on phones, a centred dialog on tablets, opened from
   the quick-check bar under the hero copy. js/quick-sheet.js animates it.
   The surface is the same solid card in both roles ("Quick form — the card",
   at the end of this file).
   ========================================================================== */
.qc-teaser,
.qc-sheet__close,
.qc-sheet__grip,
.qc-sheet__backdrop {
  display: none;
}

@media (max-width: 63.99em) {
  /* --- the opener: the hero's one action at these widths ---------------- */
  /* Solid, in the hero's own button language (light on the dark ground), so
     it reads the same over every frame of the film. */
  .qc-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    max-inline-size: 26rem;
    padding-block: 0.75rem;
    padding-inline: 1.15rem 0.75rem;
    border: 1px solid var(--c-ink);
    border-radius: 0;
    background: var(--c-ink);
    color: var(--c-bg);
    box-shadow: 0 14px 36px rgb(var(--c-hero-ground-rgb) / 0.45);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: transform 0.35s var(--ease-out), background-color var(--dur-fast);
  }

  .qc-teaser:active {
    transform: scale(0.985);
  }

  .qc-teaser:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 3px;
  }

  .qc-teaser__text {
    display: grid;
    gap: 0.2rem;
  }

  .qc-teaser__title {
    font-family: var(--c-serif);
    font-size: 1.15rem;
    line-height: 1.15;
  }

  .qc-teaser__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--c-panel-rgb) / 0.74);
  }

  .qc-teaser__arrow {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-ink);
    transition: transform 0.45s var(--ease-out);
  }

  @media (hover: hover) {
    .qc-teaser:hover { background: rgb(var(--c-hero-ink-rgb) / 0.9); }
    .qc-teaser:hover .qc-teaser__arrow { transform: translateX(calc(4px * var(--dir))); }
  }

  /* --- the popup ------------------------------------------------------- */
  .c-hero__meta[data-qc-sheet] {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: none;
    align-items: end;
    justify-items: center;
    gap: 0;
    padding: 0;
  }

  .c-hero__meta[data-qc-sheet].is-open {
    display: grid;
  }

  .qc-sheet__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--c-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* While open, js/quick-sheet.js moves this element to the end of <body>.
     Inside the hero it was clipped to the hero's box on iOS Safari (fixed
     children of an overflow-clipped ancestor), and <main>'s stacking layer
     kept it under the header and the phone bar; at the top level neither can
     happen. Its colours come from the page tokens it carries itself (see
     .c-hero__meta in "Quick form — the card"), so it looks the same there. */
  body.qc-open {
    overflow: hidden;
  }

  /* The phone bar's actions duplicate nothing in the popup and it would sit
     over the send button. */
  body.qc-open .mobile-bar {
    visibility: hidden;
  }

  .c-hero__meta[data-qc-sheet] .quick-form {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    max-block-size: min(88dvh, 46rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    border-block-end: 0;
    box-shadow: 0 -12px 48px rgb(var(--c-hero-ground-rgb) / 0.35);
    padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  }

  .qc-sheet__grip {
    display: block;
    inline-size: 2.6rem;
    block-size: 4px;
    margin: 0.6rem auto 0;
    border-radius: 999px;
    background: var(--c-line-2);
    touch-action: none;
    cursor: grab;
  }

  .c-hero__meta[data-qc-sheet] .quick-form__head {
    align-items: flex-start;
    touch-action: none;    /* the head is a drag handle for swipe-to-close */
  }

  .qc-sheet__close {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-block: -0.35rem;
    margin-inline-start: 0.25rem;
    border: 1px solid var(--c-line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--c-ink);
    cursor: pointer;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
  }

  .qc-sheet__close:hover {
    background: rgb(var(--c-tint-rgb) / 0.06);
    border-color: var(--c-ink-2);
  }

  /* Bigger touch targets inside the popup — it only exists on touch-sized
     screens, and it has the room. */
  .c-hero__meta[data-qc-sheet] .field input,
  .c-hero__meta[data-qc-sheet] .field select {
    min-height: 2.75rem;
    font-size: 1rem;
  }

  .c-hero__meta[data-qc-sheet] .quick-form .btn--primary {
    inline-size: 100%;
    min-height: 3rem;
  }
}

/* Tablets: a centred dialog rather than a bottom sheet. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .c-hero__meta[data-qc-sheet] {
    align-items: center;
    padding: 1.5rem;
  }

  .c-hero__meta[data-qc-sheet] .quick-form {
    max-inline-size: 30rem;
    border-radius: 0;
    border-block-end: 1px solid var(--c-line);
    box-shadow: 0 30px 80px rgb(var(--c-hero-ground-rgb) / 0.45);
  }

  .qc-sheet__grip {
    display: none;
  }

  .c-hero__meta[data-qc-sheet] .quick-form__head {
    touch-action: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qc-teaser,
  .qc-teaser__arrow { transition: none; }
}

/* Contact rows: every value sits at the start of its cell. The fax is the one
   value not wrapped in an RTL link, and as a bare .num (direction: ltr) it
   aligned to the far left of the row. */
.c-contacts li > * {
  justify-self: start;
}

@media (max-width: 47.99em) {
  /* 38ch is a reading measure for wide screens; on a phone it left a third of
     the column empty beside every section intro. */
  .c-lede,
  .c-steps p,
  .c-note {
    max-width: none;
  }

  /* The statue plates ran almost a full screen tall each on a phone. The cap
     goes on the frame (its inline aspect-ratio gives way to max-block-size);
     capping the image instead left an empty grey frame below it. The image
     already covers its frame, so it crops from the centre. */
  .c-plate__img {
    max-block-size: 22rem;
  }
}

/* ==========================================================================
   Hero below 64em — the phone bar carries the actions
   ========================================================================== */
@media (max-width: 63.99em) {
  /* The phone bar (Call / WhatsApp / Book) is fixed over the foot of the
     screen at these widths. The hero still runs the full screen behind it,
     and its copy stands clear of it. */
  .c-hero {
    align-items: end;
    padding-block-end: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + var(--hero-pad));
  }

  /* The about section reuses the hero's button row; the phone bar carries
     the same actions at these widths. */
  .c-hero__cta {
    display: none;
  }
}

@media (max-width: 63.99em) {
  /* The copy carries its own shade. The plate's scrim is drawn in fractions
     of the screen, so on a shorter phone the kicker and the lede rose into
     its thin part, over his white collar. This one is anchored to the copy:
     it starts clear a little above the kicker and is deep by the time the
     first line begins, whatever the screen's height. */
  .c-hero__inner::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    inset-block: -5rem 0;
    background: linear-gradient(to bottom,
      rgb(var(--c-hero-ground-rgb) / 0) 0,
      rgb(var(--c-hero-ground-rgb) / 0.3) 2rem,
      rgb(var(--c-hero-ground-rgb) / 0.62) 3.75rem,
      rgb(var(--c-hero-ground-rgb) / 0.78) 5rem,
      rgb(var(--c-hero-ground-rgb) / 0.86) 100%);
    pointer-events: none;
  }
}

@media (max-width: 47.99em) {
  /* The kicker wrapped to two lines at the desktop tracking. */
  .c-hero__kicker {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
}


/* ==========================================================================
   Site background — the grain gradient (js/grain.js)
   One fixed layer behind everything. main, the header and the footers sit at
   z-index 1 above it; the hero film covers it at the top of the homepage.
   The CSS gradient here is what shows before the shader's first frame, and
   instead of it where WebGL is unavailable.
   ========================================================================== */
.c-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, #e3e8fb 0%, transparent 70%),
    radial-gradient(55% 45% at 100% 100%, #f3e9d6 0%, transparent 70%),
    #fbfbfa;
}

.c-grain canvas {
  display: block;
  inline-size: 100% !important;
  block-size: 100% !important;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.c-grain.is-live canvas {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   Arrows in English
   The directional icons are drawn for Hebrew and mirrored on the English page
   by css/icons.css. --dir sets which way their hover nudge goes on screen, so
   it flips with the language; the nudge itself uses the `translate` property,
   which the mirroring does not reverse.
   -------------------------------------------------------------------------- */
html[dir='ltr'] .page-cinematic {
  --dir: 1;
}

/* --------------------------------------------------------------------------
   Guided intake form fields (homepage dialog and pre-lander)
   The field rules above are the hero quick form's white-on-glass look, and
   they are written for every .field on the page. The guided intake sits on
   the page's own panel (white by default), so there its labels, the typed
   name and phone, the language select, the description box and the consent
   line came out white on white: the visitor could not see where to type.
   Here the intake gets the page's ink and surface tokens back, which also
   follow the dark theme. Only colours are restated — background-color, not
   the `background` shorthand, so the select's arrow keeps its no-repeat.
   -------------------------------------------------------------------------- */
.page-cinematic .flow .field label,
.page-cinematic .flow .field__label {
  color: var(--c-ink);
}

.page-cinematic .flow .field input,
.page-cinematic .flow .field select,
.page-cinematic .flow .field textarea {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line-2);
}

.page-cinematic .flow .field input::placeholder,
.page-cinematic .flow .field textarea::placeholder {
  color: var(--c-dim);
}

.page-cinematic .flow .field input:focus,
.page-cinematic .flow .field select:focus,
.page-cinematic .flow .field textarea:focus {
  border-color: var(--c-blue-soft);
}

.page-cinematic .flow .field.is-invalid input,
.page-cinematic .flow .field.is-invalid select,
.page-cinematic .flow .field.is-invalid textarea {
  border-color: var(--c-error);
}

.page-cinematic .flow .checkbox {
  color: var(--c-ink-2);
}

/* ==========================================================================
   Quick form — the card
   One solid surface for both of the form's roles (the card in the hero
   column, the sheet or dialog below 64em), so its contrast is a property of
   the design and not of whichever frame of the film is behind it. It is a
   piece of the page set into the hero: it takes the page's own surface and
   ink — white in the default theme, the dark surface in the dark one — not
   the hero's inverted set. Placed last so it wins over the shared field
   rules above at equal specificity.
   ========================================================================== */
.c-hero__meta {
  --c-bg: var(--c-page-bg);
  --c-ink: var(--c-page-ink);
  --c-ink-2: var(--c-page-ink-2);
  --c-dim: var(--c-page-dim);
  --c-line: var(--c-page-line);
  --c-line-2: var(--c-page-line-2);
  --c-tint-rgb: var(--c-page-tint-rgb);
  --c-panel-rgb: var(--c-page-panel-rgb);
  display: block;
  color: var(--c-ink);
}

.page-cinematic .quick-form {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  /* A brass rule along the top: the gold of the monogram, and the one
     ornament the card carries. */
  border-block-start: 2px solid var(--c-amber);
  border-radius: 0;
  box-shadow: 0 28px 70px rgb(var(--c-hero-ground-rgb) / 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-cinematic .quick-form__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: clamp(0.8rem, 1.8svh, 1.1rem) clamp(1rem, 1.5vw, 1.35rem) clamp(0.65rem, 1.4svh, 0.85rem);
  border-block-end: 1px solid var(--c-line);
}

.page-cinematic .quick-form__head h2 {
  margin: 0;
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--c-ink);
}

.page-cinematic .quick-form__head p {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.page-cinematic .quick-form .badge--teal {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  background: transparent;
  border: 1px solid var(--c-line-2);
  border-radius: 0;
  color: var(--c-ink-2);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.page-cinematic .quick-form__body {
  padding: clamp(0.75rem, 1.8svh, 1rem) clamp(1rem, 1.5vw, 1.35rem) clamp(0.9rem, 2svh, 1.2rem);
}

/* Name and phone share a row: when one of them shows an error (the phone's
   wraps to two lines) the other must keep its own height, so the two inputs
   stay on one line. */
.page-cinematic .quick-form__grid {
  gap: clamp(0.55rem, 1.3svh, 0.8rem) 0.75rem;
  align-items: start;
}

.page-cinematic .quick-form .field {
  gap: 0.3rem;
  align-content: start;
}

.page-cinematic .quick-form .field label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--c-ink-2);
}

.page-cinematic .quick-form .field input,
.page-cinematic .quick-form .field select {
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--c-field-line);
  border-radius: 0;
  box-shadow: none;
}

.page-cinematic .quick-form .field select {
  padding-inline-end: 2.2rem;
  background-image: var(--c-select-arrow);
  background-repeat: no-repeat;
  background-size: 1rem;
  background-position: left 0.7rem center;
}

html[dir='ltr'] .page-cinematic .quick-form .field select {
  background-position: right 0.7rem center;
}

.page-cinematic .quick-form .field select option {
  background: var(--c-surface);
  color: var(--c-ink);
}

.page-cinematic .quick-form .field input::placeholder {
  color: var(--c-dim);
  opacity: 1;
}

.page-cinematic .quick-form .field input:hover,
.page-cinematic .quick-form .field select:hover {
  border-color: var(--c-ink-2);
}

.page-cinematic .quick-form .field input:focus,
.page-cinematic .quick-form .field select:focus {
  outline: none;
  background-color: var(--c-surface);
  border-color: var(--c-blue-soft);
  box-shadow: 0 0 0 1px var(--c-blue-soft);
}

.page-cinematic .quick-form .field.is-invalid input,
.page-cinematic .quick-form .field.is-invalid select {
  border-color: var(--c-error);
}

/* An invalid field keeps its red edge while it is being corrected; the focus
   shows as the ring outside it. */
.page-cinematic .quick-form .field.is-invalid input:focus,
.page-cinematic .quick-form .field.is-invalid select:focus {
  border-color: var(--c-error);
  box-shadow: 0 0 0 2px var(--c-blue-soft);
}

/* Messages at the labels' size, so a failed submit grows the card as little
   as it can. */
.page-cinematic .quick-form .field__error {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--c-error);
}

.page-cinematic .quick-form .checkbox {
  margin-block-start: clamp(0.7rem, 1.6svh, 0.95rem);
  gap: 0.6rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--c-ink-2);
}

.page-cinematic .quick-form .checkbox.is-invalid {
  color: var(--c-error);
}

.page-cinematic .quick-form .checkbox a {
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The consent box, on every form of this design (the quick form, the guided
   intake on the homepage and the pre-lander): square, like the fields; ink
   when ticked. One look for one meaning, not the browser's own checkbox. */
.page-cinematic .checkbox input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0.14rem 0 0;
  border: 1px solid var(--c-field-line);
  border-radius: 0;
  background: var(--c-surface);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.page-cinematic .quick-form .checkbox input {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

/* The tick is Lucide's check (css/icons.css) as a mask, in the surface colour. */
.page-cinematic .checkbox input::after {
  content: '';
  inline-size: 80%;
  block-size: 80%;
  background: var(--c-surface);
  -webkit-mask: var(--icon-tick) center / contain no-repeat;
          mask: var(--icon-tick) center / contain no-repeat;
  opacity: 0;
}

.page-cinematic .checkbox input:checked {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.page-cinematic .checkbox input:checked::after {
  opacity: 1;
}

.page-cinematic .checkbox.is-invalid input {
  border-color: var(--c-error);
}

.page-cinematic .checkbox input:focus-visible {
  outline: 2px solid var(--c-blue-soft);
  outline-offset: 2px;
}

/* Windows High Contrast (forced colours) repaints backgrounds with the page
   colour, which would make these masked icons (the tick, the FAQ chevron)
   vanish. Paint them in the system text colour instead. */
@media (forced-colors: active) {
  .page-cinematic .checkbox input::after,
  .c-faq summary::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

.page-cinematic .quick-form__actions {
  margin-block-start: clamp(0.8rem, 1.8svh, 1.05rem);
  gap: 0.6rem 1rem;
}

/* The one solid thing on the card: the step to take. */
.page-cinematic .quick-form .btn--primary {
  min-height: 2.75rem;
  padding-block: 0.6rem;
  padding-inline: 1.5rem;
  border: 1px solid var(--c-ink);
  border-radius: 0;
  background: var(--c-ink);
  color: var(--c-bg);
  box-shadow: none;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

html[dir='rtl'] .page-cinematic .quick-form .btn--primary {
  letter-spacing: 0.04em;
}

.page-cinematic .quick-form .btn--primary:hover {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}

.page-cinematic .quick-form__privacy {
  font-size: 0.72rem;
  color: var(--c-dim);
}

.page-cinematic .quick-form__privacy svg {
  color: var(--c-ink-2);
}

.page-cinematic .quick-form .form-error {
  margin-block-start: 0.75rem;
}

.page-cinematic .quick-form .form-success {
  margin: clamp(1rem, 2svh, 1.35rem);
}

/* ==========================================================================
   Case results, press, reviews and the drawer's practice index
   (the content placement of 17 Oct 2026). The homepage and the content pages
   both use them, so they live here and not in pages.css.
   ========================================================================== */

/* A fourth card in the knowledge row: two-up, then four-up. */
@media (min-width: 48em) {
  .c-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  .c-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A case result: situation, what was at stake, what the office did, outcome.
   Built on .c-card (hairline box, label-over-text rows). The outcome row
   carries the brass rule, the gold of the monogram and of the quick form. */
.c-case {
  align-content: start;
}

.c-case__main {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-width: 0;
}

.c-case h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.18;
  text-wrap: balance;
}

.c-case dd {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.c-case__result {
  padding: 0.7rem 1rem;
  border-inline-start: 2px solid var(--c-amber);
  background: rgb(var(--c-amber-rgb) / 0.07);
}

.c-case .c-case__result dd {
  color: var(--c-ink);
  font-weight: 500;
}

.c-case .c-case__note {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--c-dim);
}

.c-case .c-case__summary {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* The card text rule (.c-card p) is more specific than .c-kicker: keep the kicker its own size. */
.c-case .c-kicker {
  font-size: 0.66rem;
}

.c-case__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* The wide form, on the content pages: the rows become hairline rows
   (label, text) and the proof sits beside them from 64em. */
.c-case--row {
  padding: clamp(1.25rem, 3vw, 2rem);
  gap: 1.5rem;
}

@media (min-width: 48em) {
  .c-case--row dl {
    gap: 0;
    border-block-start: 1px solid var(--c-line);
  }

  .c-case--row dl > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-block: 0.8rem;
    border-block-end: 1px solid var(--c-line);
  }

  .c-case--row dt {
    margin: 0;
    padding-block-start: 0.2rem;
  }
}

@media (min-width: 64em) {
  .c-case--proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: 2.5rem;
    align-items: start;
  }
}

/* The proof: a redacted document, small, in a mat. Never a link to the raw file. */
.c-case__proof {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-width: 0;
}

.c-proof {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
}

.c-proof__frame {
  padding: 0.5rem;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
}

.c-proof picture {
  display: block;
}

.c-proof img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  margin-inline: auto;
}

.c-proof--portrait img {
  max-inline-size: 15rem;
}

.c-proof figcaption {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-dim);
}

/* A press item: the quote is set apart with the brass rule. */
.c-press__quote {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--c-amber);
}

.c-press .c-press__quote p {
  font-family: var(--c-serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--c-ink);
}

.c-press__quote footer {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--c-dim);
}

/* A client review, word for word: stars, the text, who wrote it, where. */
.c-review {
  align-content: start;
  margin: 0;
}

.c-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--c-amber);
}

/* Solid stars (the symbol is filled), with a hairline of their own. */
.c-stars svg {
  --icon-stroke: 1;
  inline-size: 1rem;
  block-size: 1rem;
}

.c-stars__num {
  margin-inline-start: 0.55rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--c-dim);
}

.c-review blockquote {
  margin: 0;
}

.c-review .c-review__text {
  font-family: var(--c-serif);
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--c-ink);
  text-wrap: pretty;
}

.c-review__by {
  display: grid;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--c-dim);
}

.c-review__by strong {
  color: var(--c-ink);
  font-size: 0.88rem;
  font-weight: 600;
}

/* A staging mark on a card (ממתין לאישור) sits under the source line, not stretched across the grid. */
.c-review__by .badge {
  justify-self: start;
  margin-block-start: 0.35rem;
}

/* "LawReviews" is a name, not a label: no capitals. */
.c-review .c-source {
  margin-block-start: 0.35rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* The line under every results block. */
.c-note.c-disclaimer {
  max-width: none;
  margin-block-start: 1.75rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.9rem;
  color: var(--c-ink-2);
}

/* The drawer's index of the practice pages, under its big entries. It rises in
   with the contact actions (js/chrome.js). */
.c-nav__areas {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--c-line);
}

.c-nav__areas ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
  margin-block-start: 0.35rem;
}

.c-nav__areas a {
  display: block;
  padding-block: 0.45rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--c-ink-2);
  transition: color var(--dur-fast);
}

.c-nav__areas a:hover,
.c-nav__areas a:focus-visible {
  color: var(--c-blue-soft);
}

/* A practice folder: the intake button, and the area's own page when it has one. */
.c-folder__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

.c-folder__page {
  color: var(--c-dim);
}

/* The header's practice-area menu: the six pages under "תחומים". CSS only: it opens on
   hover and when focus is inside it (so Tab reaches it), and it shows only where the
   link list itself shows (80em). It takes the header's own tokens, so it is dark over
   the hero film and white once the bar is solid. */
.c-nav__list > li {
  position: relative;
}

.c-nav__sub {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -1rem;
  z-index: 5;
  min-inline-size: 13rem;
  padding-block: 0.5rem;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  box-shadow: 0 18px 44px rgb(var(--c-tint-rgb) / 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--dur-fast),
    transform var(--dur) var(--ease-out),
    visibility var(--dur-fast);
}

.c-nav__list > li:hover > .c-nav__sub,
.c-nav__list > li:focus-within > .c-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.c-nav__sub a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-ink-2);
}

.c-nav__sub a:hover,
.c-nav__sub a:focus-visible {
  color: var(--c-ink);
  background: rgb(var(--c-tint-rgb) / 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .c-nav__sub {
    transition: none;
    transform: none;
  }
}