/* ==========================================================================
   Site: everything below the hero (home page), the practice-area pages, the
   articles library and the article page. Loads after cinematic.css and reads
   only its tokens (and tokens.css): no new colours.

   The rhythm, section after section: a small eyebrow beside a short brass
   rule, a large serif H2 whose second half is set in brass, a one or two line
   lede, generous padding, and white sections alternating with warm paper
   bands. Accents are thin rules; the one solid accent is the brass "call now".
   One subtle motion per section at most (.reveal, from js/site.js), and none
   under prefers-reduced-motion. Logical properties throughout (RTL first).
   ========================================================================== */
.page-cinematic {
  --s-band: var(--c-bg-2);
  --s-pad: clamp(4.25rem, 2.6rem + 6vw, 7.5rem);
  --s-gap: clamp(2rem, 0.75rem + 4.5vw, 5.5rem);
  --s-rule: var(--c-blue);
  --s-ink-strong: var(--c-ink);
  --s-text: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  /* Hebrew headings in Frank Ruhl Libre first, so their punctuation (? , .) is cut with the letters; the numerals
     keep Playfair Display (--c-serif), as the hero does. English (the home page's toggle) takes Playfair throughout. */
  --s-serif: 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif;
}

html[lang='en'] .page-cinematic {
  --s-serif: var(--c-serif);
}

/* Arabic (/ar/) and Russian (/ru/): the same tokens with the language's families. scripts/build-i18n.mjs adds their
   Google Fonts stylesheet to those pages only. Arabic: Noto Naskh Arabic for the headings, IBM Plex Sans Arabic for the
   text; the numerals keep Playfair Display (--c-serif, as in Hebrew). Russian: Playfair Display carries Cyrillic, so the
   headings take it throughout (Frank Ruhl Libre has none), and the text takes Inter (Heebo has none). */
html:lang(ar) .page-cinematic {
  --c-serif: 'Playfair Display', 'Noto Naskh Arabic', Georgia, serif;
  --s-serif: 'Noto Naskh Arabic', 'Playfair Display', Georgia, serif;
  --c-sans: 'IBM Plex Sans Arabic', 'Heebo', system-ui, -apple-system, sans-serif;
  --font-sans: var(--c-sans);
}

/* Arabic letters sit smaller on the body than Hebrew ones at the same size: the Arabic pages read a sixteenth larger
   (17px to the rem instead of 16), spacing with them, so the proportions hold. */
html:lang(ar) {
  font-size: 106.25%;
}

html:lang(ru) .page-cinematic {
  --s-serif: var(--c-serif);
  --c-sans: 'Inter', 'Heebo', system-ui, -apple-system, sans-serif;
  --font-sans: var(--c-sans);
}

/* The phone bar's three buttons keep to the screen: Russian capitals are wider, so they are tracked tighter. */
html:lang(ar) .page-cinematic .mobile-bar,
html:lang(ru) .page-cinematic .mobile-bar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html:lang(ru) .page-cinematic .mobile-bar .btn {
  gap: 0.4rem;
  padding-inline: 0.3rem;
  letter-spacing: 0.05em;
}

/* Long Russian words ("конфиденциальность") in the narrow columns break with a hyphen instead of pushing out. */
html:lang(ru) .c-strip__list li {
  hyphens: auto;
}

/* A long label (Russian runs a third longer than the Hebrew) wraps inside its button on a phone. */
@media (max-width: 47.99em) {
  html:lang(ar) .s-btn,
  html:lang(ru) .s-btn {
    white-space: normal;
    text-align: center;
  }
}

/* The e-mail address may break rather than push the contact column out on the narrowest phones. */
html:lang(ar) .s-rows__v,
html:lang(ru) .s-rows__v {
  overflow-wrap: anywhere;
}

/* The forms: a select is as wide as its longest option ("ДТП (дорожно-транспортные происшествия)"), so it is held to
   its field; and the submit label may wrap on a phone. */
html:lang(ar) .page-cinematic .field,
html:lang(ru) .page-cinematic .field,
html:lang(ar) .page-cinematic .field select,
html:lang(ru) .page-cinematic .field select {
  min-inline-size: 0;
  max-inline-size: 100%;
}

@media (max-width: 47.99em) {
  html:lang(ar) .page-cinematic .quick-form .btn,
  html:lang(ru) .page-cinematic .quick-form .btn {
    white-space: normal;
  }
}

/* The hero stays one screen. Its headline is sized to the Hebrew's short phrases (the column / 9); the Russian runs
   to three lines, so on a wide screen it is set to its own measure, and smaller again on a short one. The Hebrew hero's
   markup is untouched: this is the Russian copy's type size only. */
@media (min-width: 64em) {
  html:lang(ru) .c-hero__title {
    font-size: clamp(2rem, min(3.3vw, 4.8svh, var(--hero-col) / 12), 4.25rem);
  }
}

/* …and it takes the Hebrew's height tiers (css/cinematic.css, "≤ 56em tall", "≤ 44em") a little earlier. */
@media (min-width: 64em) and (max-height: 60em) {
  html:lang(ru) [data-page='cinematic'] .c-utility {
    display: none;
  }

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

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

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

  html:lang(ru) .c-hero .quick-form__head p {
    display: none;
  }
}

@media (min-width: 64em) and (max-height: 46em) {
  html:lang(ru) .c-hero__inner {
    gap: 0.6rem;
  }

  html:lang(ru) .c-hero__copy {
    gap: 0.35rem;
  }

  html:lang(ru) .c-hero__title {
    font-size: clamp(1.75rem, min(3vw, 4.2svh), 2.5rem);
  }

  html:lang(ru) .c-hero .quick-form__head {
    padding-block: 0.6rem 0.5rem;
  }

  html:lang(ru) .c-hero .quick-form__body {
    padding-block: 0.6rem 0.75rem;
  }

  html:lang(ru) .c-hero .quick-form__grid {
    gap: 0.45rem 0.75rem;
  }

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

  html:lang(ru) .c-hero .quick-form .checkbox,
  html:lang(ru) .c-hero .quick-form__actions {
    margin-block-start: 0.6rem;
  }
}

/* A phone on its side: the same split as the Hebrew, the Russian headline a size down. */
@media (max-width: 63.99em) and (max-height: 32em) and (orientation: landscape) {
  html:lang(ru) .c-hero__title {
    font-size: clamp(1.1rem, 5.4svh, 1.55rem);
  }

  html:lang(ru) .c-hero__copy,
  html:lang(ru) .qc-teaser {
    max-inline-size: none;
    inline-size: 100%;
  }

  html:lang(ru) .c-hero__lead {
    max-inline-size: none;
    font-size: 0.74rem;
  }

  html:lang(ru) .qc-teaser__title {
    font-size: 0.92rem;
    white-space: nowrap;
  }
}

/* The Russian header row. Cyrillic capitals with the Latin tracking (0.2em on the links, 0.16em on the booking button)
   and longer words ran the row past its 1408px cap at every desktop width once the header settled into its bar: the
   logo shrank to nothing and the menu button left the page. So the links and the button are tracked tighter, the link
   list waits for 90em (the menu carries it below, as it does for every language under 80em), and the login is its icon
   alone, its words kept for screen readers (the menu and the footer carry them in full). The logo never gives way. */
html:lang(ar) .c-top__inner > .c-brand,
html:lang(ru) .c-top__inner > .c-brand {
  flex-shrink: 0;
}

html:lang(ru) .c-nav__list {
  gap: 1.25rem;
}

html:lang(ru) .c-nav__link {
  letter-spacing: 0.08em;
}

html:lang(ru) .c-top .c-top__book {
  letter-spacing: 0.06em;
}

@media (min-width: 80em) and (max-width: 89.99em) {
  html:lang(ru) .c-nav__list {
    display: none;
  }
}

@media (min-width: 80em) {
  html:lang(ru) .c-top .s-login {
    padding-inline: 0.6rem;
  }

  html:lang(ru) .c-top .s-login span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Inside them, a Hebrew island (the reviews, quoted as written) keeps the Hebrew families. */
html:lang(ar) .page-cinematic [lang='he'],
html:lang(ru) .page-cinematic [lang='he'] {
  --c-serif: 'Playfair Display', 'Frank Ruhl Libre', Georgia, serif;
  --s-serif: 'Frank Ruhl Libre', 'Playfair Display', Georgia, serif;
  --c-sans: 'Heebo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: var(--c-sans);
  font-family: var(--c-sans);
}

.s-rule__n,
.s-index__n,
.s-case__n,
.s-step__n,
.p-hero__num {
  font-family: var(--c-serif) !important;
}

[data-theme='dark'] .page-cinematic,
.page-cinematic[data-theme='dark'] {
  --s-band: var(--c-bg-2);
}

/* Inner pages have no hero: the header is a solid bar from the first pixel. */
.page-sub {
  --topbar-h: var(--header-h);
}

/* Long reading sits on the plain page: no gradient layer behind the practice pages and the articles. */
.page-site .c-grain {
  display: none;
}

/* The contact form's consent message starts hidden; js/site.js shows it. */
.s-consent-error {
  display: none;
}

.s-head__link {
  margin: 1rem 0 0;
}

/* --------------------------------------------------------------------------
   Sections and their heads
   -------------------------------------------------------------------------- */
.s-sec {
  position: relative;
  padding-block: var(--s-pad);
}

.s-sec--band {
  background: var(--s-band);
}

.s-kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-family: var(--c-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--c-ink-2);
}

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

.s-kicker--rule::before {
  content: '';
  flex: none;
  inline-size: 2.25rem;
  block-size: 1px;
  background: var(--s-rule);
}

.s-kicker svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--c-dim);
}

.s-title {
  margin: 1.1rem 0 0;
  font-family: var(--s-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.9rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--s-ink-strong);
  text-wrap: balance;
}

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

.s-lede {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  line-height: 1.75;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.s-head {
  display: grid;
  gap: 1.25rem 4rem;
  margin-block-end: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}

.s-head--center {
  justify-items: center;
  text-align: center;
}

.s-head--center .s-kicker::before,
.s-head--center .s-kicker::after {
  content: '';
  flex: none;
  inline-size: 2.25rem;
  block-size: 1px;
  background: var(--s-rule);
}

@media (min-width: 64em) {
  .s-head--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }

  .s-head--split .s-lede {
    padding-block-end: 0.5rem;
  }
}

.s-prose p {
  margin: 0;
  font-size: var(--s-text);
  line-height: 1.85;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.s-prose p + p {
  margin-block-start: 1rem;
}

.s-prose p + .s-points {
  margin-block-start: 1.25rem;
}

/* --------------------------------------------------------------------------
   Buttons and links of this layer
   -------------------------------------------------------------------------- */
.s-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--c-line-2);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font: 600 0.92rem/1.2 var(--c-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

/* (0,2,0): outranks `.page-cinematic a { color: inherit }`, and the variants below win by order. */
.page-cinematic .s-btn {
  color: var(--c-ink);
}

.s-btn svg {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex: none;
}

.s-btn .num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

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

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

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

/* The one filled accent: calling now (cinematic.css's .c-btn--blue colours). */
.page-cinematic .s-btn--accent {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: #fff;
}

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

.page-cinematic .s-btn--wa {
  border-color: var(--c-wa);
  color: var(--c-wa);
}

.page-cinematic .s-btn--wa:hover {
  border-color: var(--c-wa);
  background: var(--c-wa);
  color: #fff;
}

.s-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.35rem;
  border: 0;
  border-block-end: 1px solid var(--s-rule);
  background: none;
  color: var(--c-ink);
  font: 600 0.9rem/1.3 var(--c-sans);
  text-decoration: none;
  cursor: pointer;
}

.page-cinematic a.s-link {
  color: var(--c-ink);
}

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

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

.s-link:hover svg {
  translate: calc(4px * var(--dir)) 0;
}

html[dir='ltr'] .page-cinematic {
  --dir: 1;
}

/* A line that closes a section with a call to action. */
.s-closer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--c-line);
}

.s-closer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink-2);
}

/* Results disclaimer and small notes. */
.s-note {
  margin: 1.5rem 0 0;
  max-width: 70ch;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--c-dim);
}

.s-note + .s-note {
  margin-block-start: 0.4rem;
}

.s-disclaimer {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.s-disclaimer::before {
  content: '';
  flex: none;
  inline-size: 1.25rem;
  block-size: 1px;
  translate: 0 -0.25em;
  background: var(--s-rule);
}

/* The staging notices keep their look from main.css; only their spacing here. */
.s-sec .notice {
  margin-block-end: 1.5rem;
}

/* --------------------------------------------------------------------------
   Client login: a quiet secondary link (header, drawer, footer)
   -------------------------------------------------------------------------- */
.s-login {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--c-line);
  color: inherit;
  font: 500 0.78rem/1.2 var(--c-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.s-login svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
  flex: none;
}

.s-login:hover {
  border-color: currentColor;
}

/* In the header row: from 64em, beside the phone, when there is room. */
.c-top .s-login {
  display: none;
}

@media (min-width: 64em) {
  .c-top .s-login {
    display: inline-flex;
  }
}

/* While the link list shares the row (80em up), the header's login is its icon alone until there is room for the
   words (96em); the words stay for screen readers, and the menu and the footer carry them in full. The row never wraps. */
@media (min-width: 80em) and (max-width: 95.99em) {
  .c-top .s-login {
    padding-inline: 0.6rem;
  }

  .c-top .s-login span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* While the header rides over the hero film it is light on dark. */
.c-top:not(.is-stuck) .s-login {
  border-color: rgb(255 255 255 / 0.32);
}

/* In the drawer it sits under the contact actions, as a plain text link. */
.c-nav__actions .s-login {
  justify-self: start;
  border-color: transparent;
  padding-inline: 0;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   1. The first hours (traffic and criminal)
   -------------------------------------------------------------------------- */
.s-rules {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line);
}

.s-rule {
  position: relative;
  padding-block: 1.75rem;
  border-block-end: 1px solid var(--c-line);
}

.s-rule__n {
  display: block;
  font-family: var(--s-serif);
  font-size: clamp(3.25rem, 2.5rem + 2.5vw, 4.75rem);
  line-height: 0.9;
  color: var(--c-line-2);
  font-variant-numeric: lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.s-rule__t {
  margin: 1rem 0 0.6rem;
  font-family: var(--s-serif);
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-ink);
}

.s-rule p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-ink-2);
}

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

@media (min-width: 72em) {
  .s-rules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    border-block-end: 1px solid var(--c-line);
  }

  .s-rule {
    padding: 2rem 2rem 2.25rem;
    border-block-end: 0;
  }

  .s-rule + .s-rule {
    border-inline-start: 1px solid var(--c-line);
  }

  .s-rule:first-child {
    padding-inline-start: 0;
  }

  .s-rule:last-child {
    padding-inline-end: 0;
  }
}

/* The dark bar under the rules: one line and the call. */
.s-callbar {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  border-block-start: 2px solid var(--c-blue);
  background: var(--c-ink);
  color: var(--c-bg);
}

.s-callbar__text {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  color: var(--c-bg);
}

.s-callbar__text span {
  display: block;
  margin-block-start: 0.35rem;
  font-family: var(--c-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.78;
}

.s-callbar .s-btn--ghost {
  border-color: rgb(var(--c-panel-rgb) / 0.35);
  color: var(--c-bg);
}

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

.page-cinematic .s-callbar .s-btn--ghost:hover {
  border-color: var(--c-bg);
  background: var(--c-bg);
  color: var(--c-ink);
}

@media (min-width: 64em) {
  .s-callbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
  }
}

@media (max-width: 47.99em) {
  .s-callbar .s-actions,
  .s-callbar .s-btn {
    inline-size: 100%;
  }
}

/* --------------------------------------------------------------------------
   2. Practice areas: a numbered index, not cards
   -------------------------------------------------------------------------- */
.s-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line-2);
}

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

.s-index__link {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  padding-block: 1.6rem;
  color: inherit;
  text-decoration: none;
}

.page-cinematic a.s-index__link {
  color: var(--c-ink);
}

/* The one motion here: a brass rule draws along the row under the pointer. */
.s-index__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 1px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: var(--s-origin, right);
  transition: transform var(--dur-slow) var(--ease-out);
}

html[dir='ltr'] .s-index__link::after {
  --s-origin: left;
}

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

.s-index__n {
  grid-row: span 3;
  padding-block-start: 0.55rem;
  font-family: var(--s-serif);
  font-size: 0.95rem;
  color: var(--c-dim);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}

.s-index__t {
  font-family: var(--s-serif);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1.12;
  color: var(--c-ink);
  transition: color var(--dur-fast);
}

.s-index__d {
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-index__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-start: 0.35rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-ink);
}

.s-index__more svg {
  inline-size: 0.95em;
  block-size: 0.95em;
  transition: translate var(--dur-fast) var(--ease-out);
}

.s-index__link:hover .s-index__more svg {
  translate: calc(5px * var(--dir)) 0;
}

@media (min-width: 64em) {
  .s-index__link {
    grid-template-columns: 4.5rem minmax(0, 0.95fr) minmax(0, 1.25fr) 9rem;
    align-items: baseline;
    gap: 2rem;
    padding-block: 2.1rem;
  }

  .s-index__n {
    grid-row: auto;
    padding: 0;
  }

  .s-index__more {
    justify-self: end;
    margin: 0;
  }
}

/* The other matters: shorter entries, each opening the intake at its area. */
.s-also {
  margin-block-start: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.s-also__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-end: 1.25rem;
}

.s-also__title {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  font-weight: 400;
  color: var(--c-ink);
}

.s-also__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line);
}

.s-also__item {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 0;
  border-block-end: 1px solid var(--c-line);
  scroll-margin-block-start: calc(var(--header-h) + 1.5rem);
}

.s-also__item h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
}

.s-also__item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--c-ink-2);
}

.s-also__item .s-link {
  justify-self: start;
  margin-block-start: 0.35rem;
  font-size: 0.82rem;
}

/* An address that jumped here (#area-road-accidents) marks its entry. */
.s-also__item:target {
  border-block-end-color: var(--c-blue);
}

@media (min-width: 48em) {
  .s-also__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

@media (min-width: 72em) {
  .s-also__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   3. Results: case files with their redacted proof
   -------------------------------------------------------------------------- */
.s-cases {
  display: grid;
  border-block-start: 1px solid var(--c-line-2);
}

.s-case {
  display: grid;
  gap: 1.75rem;
  padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  border-block-end: 1px solid var(--c-line);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

.s-case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--c-dim);
}

.s-case__n {
  font-family: var(--s-serif);
  font-size: 0.95rem;
  color: var(--c-dim);
  direction: ltr;
  unicode-bidi: isolate;
}

.s-case__area {
  font-weight: 600;
  color: var(--c-ink-2);
}

.page-cinematic a.s-case__area {
  color: var(--c-ink-2);
  text-decoration: none;
  border-block-end: 1px solid var(--c-line-2);
}

.page-cinematic a.s-case__area:hover {
  color: var(--c-blue-soft);
}

.s-case__tag {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--c-line-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-ink);
}

.s-case__title {
  margin: 0.85rem 0 0;
  font-family: var(--s-serif);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--c-ink);
  text-wrap: balance;
}

.s-case__facts {
  display: grid;
  gap: 1.1rem 2.5rem;
  margin: 1.5rem 0 0;
}

.s-case__facts div {
  display: grid;
  gap: 0.25rem;
}

.s-case__facts dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-dim);
}

.s-case__facts dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink-2);
}

.s-case__facts .s-case__result {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--c-blue);
}

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

.s-case__note {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--c-dim);
}

.s-case__links {
  margin: 1.25rem 0 0;
}

.s-case__proof {
  display: grid;
  gap: 1rem;
  align-content: start;
  /* A document beside the story, not a poster: never wider than this, even on a tablet's single column. */
  max-inline-size: 26rem;
}

@media (min-width: 48em) and (max-width: 55.99em) {
  .s-case__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-case__facts .s-case__result {
    grid-column: 1 / -1;
  }
}

.s-proof {
  margin: 0;
}

.s-proof__frame {
  padding: 0.55rem;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgb(var(--c-tint-rgb) / 0.04), 0 12px 32px rgb(var(--c-tint-rgb) / 0.06);
}

.s-proof__frame img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.s-proof--portrait .s-proof__frame {
  max-inline-size: 13rem;
}

/* The spec asks for a small proof thumbnail, not the document at full width: a wide clipping (the fraud case's large
   headline) otherwise reads as a raw screenshot across a whole card or phone screen. */
.s-proof:not(.s-proof--portrait) .s-proof__frame {
  max-inline-size: 17rem;
}

.s-proof figcaption {
  margin-block-start: 0.55rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--c-dim);
}

@media (min-width: 56em) {
  .s-case {
    grid-template-columns: minmax(0, 1fr) clamp(13rem, 24vw, 19rem);
    gap: 3.5rem;
  }

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

  .s-case__facts .s-case__result {
    grid-column: 1 / -1;
  }

  .s-proof--portrait .s-proof__frame {
    max-inline-size: none;
  }
}

/* On the home page's full width: a three-column case file. The title beside the facts beside the proof, so the eye
   reads across the row instead of down an empty column. */
@media (min-width: 64em) {
  .s-sec .s-case {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(12rem, 3fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 0 3rem;
    align-items: start;
  }

  .s-sec .s-case .s-case__main {
    display: contents;
  }

  .s-sec .s-case .s-case__meta { grid-column: 1; grid-row: 1; }
  .s-sec .s-case .s-case__title { grid-column: 1; grid-row: 2; }
  .s-sec .s-case .s-case__note { grid-column: 1; grid-row: 3; }
  .s-sec .s-case .s-case__links { grid-column: 1; grid-row: 4; }

  .s-sec .s-case .s-case__facts {
    grid-column: 2;
    grid-row: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
  }

  .s-sec .s-case .s-case__proof {
    grid-column: 3;
    grid-row: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   4. In the media
   -------------------------------------------------------------------------- */
.s-press-grid {
  display: grid;
  gap: 1.5rem;
}

.s-press {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgb(var(--c-tint-rgb) / 0.03), 0 18px 40px rgb(var(--c-tint-rgb) / 0.05);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

.s-press__outlet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-dim);
}

.s-press__outlet::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: var(--c-line);
}

.s-press h3 {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--c-ink);
}

.s-press blockquote {
  margin: 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 1px solid var(--c-blue);
}

.s-press blockquote p {
  margin: 0;
  font-family: var(--s-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--c-ink);
}

.s-press blockquote footer {
  margin-block-start: 0.5rem;
  font-size: 0.82rem;
  color: var(--c-dim);
}

.s-press__summary {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-press .s-case__note {
  margin: 0;
}

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

/* --------------------------------------------------------------------------
   5. Reviews: the first one large, the four after it in a row
   -------------------------------------------------------------------------- */
.s-reviews {
  display: grid;
  gap: 1.25rem;
}

.s-review {
  display: grid;
  gap: 1rem;
  align-content: start;
  margin: 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}

.s-review__stars {
  display: inline-flex;
  gap: 0.2rem;
  color: var(--c-amber);
}

.s-review__stars svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

.s-review blockquote {
  margin: 0;
}

.s-review__text {
  margin: 0;
  font-family: var(--s-serif);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--c-ink);
}

.s-review__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-block-start: auto;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.86rem;
  color: var(--c-dim);
}

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

.s-review__src {
  margin-inline-start: auto;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.s-review:first-child {
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border-color: transparent;
  border-block-start: 2px solid var(--c-blue);
  background: transparent;
}

.s-review:first-child .s-review__text {
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.4;
}

@media (min-width: 48em) {
  .s-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-review:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 72em) {
  .s-reviews {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   6. About
   -------------------------------------------------------------------------- */
.s-about {
  display: grid;
  gap: var(--s-gap);
  align-items: start;
}

.s-portrait {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 30px 60px rgb(var(--c-tint-rgb) / 0.07);
}

.s-portrait img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}

.s-portrait figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.25rem 0.1rem;
  font-size: 0.82rem;
  color: var(--c-dim);
}

.s-portrait figcaption strong {
  font-weight: 600;
  color: var(--c-ink);
}

.s-about__text .s-prose {
  margin-block-start: 1.75rem;
  max-width: 60ch;
}

.s-pull {
  margin: 2rem 0 0;
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid var(--c-line);
  border-inline-start: 2px solid var(--c-blue);
  background: var(--c-surface);
}

.s-pull p {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  line-height: 1.35;
  color: var(--c-ink);
}

.s-pull footer {
  margin-block-start: 1rem;
  font-size: 0.86rem;
  color: var(--c-dim);
}

.s-pull footer strong {
  display: block;
  font-family: var(--s-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--c-ink);
}

.s-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.s-chips li {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-line-2);
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--c-ink-2);
}

.s-chips strong {
  font-weight: 600;
  color: var(--c-ink);
}

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

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

.s-values .c-num {
  grid-row: span 2;
  font-size: 0.9rem;
  color: var(--c-dim);
}

.s-values strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}

.s-values p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--c-ink-2);
}

.s-about .s-actions {
  margin-block-start: 2rem;
}

@media (min-width: 48em) {
  .s-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

@media (min-width: 64em) {
  .s-about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .s-about__photo {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
  }
}

@media (max-width: 63.99em) {
  .s-portrait {
    max-inline-size: 26rem;
  }
}

/* --------------------------------------------------------------------------
   7. How a case runs: two timelines
   -------------------------------------------------------------------------- */
.s-track + .s-track {
  margin-block-start: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.s-track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-block-end: 1.75rem;
}

.s-track__head h3 {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 400;
  color: var(--c-ink);
}

.s-track__head p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-dim);
}

.s-timeline {
  --dot: 2.75rem;
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--dot) minmax(0, 1fr);
  gap: 0 1.1rem;
  padding-block-end: 1.75rem;
}

/* The thread between the numbers. */
.s-step::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--dot) / 2);
  inset-block: var(--dot) 0;
  inline-size: 1px;
  background: var(--c-line-2);
}

.s-step:last-child::before {
  display: none;
}

.s-step__n {
  display: grid;
  place-items: center;
  inline-size: var(--dot);
  block-size: var(--dot);
  border: 1px solid var(--c-blue);
  border-radius: 50%;
  background: var(--c-bg);
  font-family: var(--s-serif);
  font-size: 0.95rem;
  color: var(--c-ink);
  direction: ltr;
  unicode-bidi: isolate;
}

.s-sec--band .s-step__n {
  background: var(--s-band);
}

.s-step h4 {
  margin: 0.55rem 0 0.4rem;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
}

.s-step p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-step__lawyer {
  display: block;
  margin-block-start: 0.65rem;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--c-ink);
}

.s-step__lawyer b {
  font-weight: 600;
  color: var(--c-ink);
}

@media (min-width: 64em) {
  .s-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 1.75rem;
  }

  .s-step {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  /* Horizontal now: the thread runs from this number to the next. */
  .s-step::before {
    inset-inline-start: var(--dot);
    inset-inline-end: -1.75rem;
    inset-block: calc(var(--dot) / 2) auto;
    inline-size: auto;
    block-size: 1px;
  }

  .s-step h4 {
    margin-block-start: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   8. The courts in Haifa, and the office
   -------------------------------------------------------------------------- */
.s-courts-grid {
  display: grid;
  gap: var(--s-gap);
  align-items: start;
}

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

.s-courts div {
  display: grid;
  gap: 0.3rem;
  padding-block: 1.15rem;
  border-block-end: 1px solid var(--c-line);
}

.s-courts dt {
  font-family: var(--s-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--c-ink);
}

.s-courts dd {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-region {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 24px 50px rgb(var(--c-tint-rgb) / 0.06);
}

.s-region figure {
  margin: 0;
}

.s-region img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.s-region figcaption {
  padding: 0.5rem 1.25rem 0;
  font-size: 0.72rem;
  color: var(--c-dim);
}

.page-cinematic .s-region figcaption a {
  color: var(--c-dim);
}

.s-region__body {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.75rem;
}

.s-region__body h3 {
  margin: 0;
  font-family: var(--s-serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--c-ink);
}

.s-region__body p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-region .s-chips {
  margin: 0;
}

@media (min-width: 64em) {
  .s-courts-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* --------------------------------------------------------------------------
   9. Articles: cards (home, practice pages, related), the library
   -------------------------------------------------------------------------- */
.s-posts {
  display: grid;
  gap: 1.25rem;
}

.s-post {
  position: relative;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid var(--c-line);
  border-block-start: 2px solid var(--c-ink);
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.s-post:hover {
  border-block-start-color: var(--c-blue);
  box-shadow: 0 20px 44px rgb(var(--c-tint-rgb) / 0.08);
}

.s-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--c-dim);
}

.s-post__area {
  position: relative;
  z-index: 1;
  font-weight: 600;
}

.page-cinematic a.s-post__area {
  color: var(--c-ink-2);
  text-decoration: none;
}

.page-cinematic a.s-post__area:hover {
  color: var(--c-blue-soft);
}

.s-post__title {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem);
  font-weight: 400;
  line-height: 1.28;
  text-wrap: balance;
}

.page-cinematic .s-post__title a {
  color: var(--c-ink);
  text-decoration: none;
}

/* The whole card is the link: its title's link covers it. */
.s-post__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.s-post__title a:focus-visible {
  outline: none;
}

.s-post:has(.s-post__title a:focus-visible) {
  outline: 2px solid var(--c-blue-soft);
  outline-offset: 3px;
}

.s-post__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.4rem 0 0;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-dim);
}

@media (min-width: 48em) {
  .s-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72em) {
  .s-posts--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* No article yet: a quiet line, which the next build replaces. */
.s-empty {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--c-line);
  border-inline-start: 2px solid var(--c-blue);
  background: var(--c-surface);
}

.s-empty p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* --------------------------------------------------------------------------
   10. Questions and answers, all of them open
   -------------------------------------------------------------------------- */
.s-qa {
  display: grid;
  margin: 0;
  border-block-start: 1px solid var(--c-line-2);
}

.s-qa__item {
  padding-block: 1.5rem;
  border-block-end: 1px solid var(--c-line);
}

.s-qa__q {
  margin: 0 0 0.6rem;
  font-family: var(--s-serif);
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-ink);
}

.s-qa__a p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--c-ink-2);
}

.s-qa__a p + p {
  margin-block-start: 0.6rem;
}

.page-cinematic .s-qa__a a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-underline-offset: 0.2em;
}

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

  .s-qa--2 .s-qa__item:nth-child(-n + 2) {
    border-block-start: 0;
  }
}

.s-faq-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-start: 2rem;
  font-size: 0.86rem;
  color: var(--c-dim);
}

.s-faq-foot p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Contact: a dark form card beside the ways to reach the office
   -------------------------------------------------------------------------- */
.s-contact {
  display: grid;
  gap: var(--s-gap);
  align-items: start;
}

/* main.css still places .quick-form in a named "form" area (the removed Classic hero's grid): not here. */
.s-contact .s-formcard {
  grid-area: auto;
}

.s-contact__text .s-lede {
  margin-block-start: 1.25rem;
}

.s-rows {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line);
}

.s-rows li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 1rem;
  border-block-end: 1px solid var(--c-line);
}

.s-rows__k {
  display: block;
  font-size: 0.82rem;
  color: var(--c-dim);
}

.s-rows__v {
  font-size: 1.1rem;
  color: var(--c-ink);
}

.page-cinematic a.s-rows__v {
  color: var(--c-ink);
  text-decoration: none;
}

.page-cinematic a.s-rows__v:hover {
  color: var(--c-blue-soft);
}

.s-start {
  display: grid;
  gap: 0;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: start;
}

.s-start li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-ink-2);
}

.s-start .c-num {
  color: var(--c-dim);
}

.s-start strong {
  font-weight: 600;
  color: var(--c-ink);
}

/* The card is the page's own dark palette (cinematic.css's dark theme values), set locally. */
.s-formcard {
  --c-bg: #0a0a0c;
  --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.12);
  --c-line-2: rgb(244 241 234 / 0.22);
  --c-blue: #3355ff;
  --c-blue-soft: #6d8cff;
  --c-error: #ff8b84;
  --c-wa: #4ade80;
  --c-select-arrow: var(--icon-select-paper);
  --c-field-line: rgb(244 241 234 / 0.45);
  color: var(--c-ink);
}

.page-cinematic .s-formcard.quick-form {
  border: 0;
  border-block-start: 2px solid var(--c-blue);
  box-shadow: 0 30px 70px rgb(20 22 26 / 0.22);
}

.page-cinematic .s-formcard .quick-form__head {
  padding: 1.5rem 1.5rem 1.1rem;
}

.page-cinematic .s-formcard .quick-form__head h3 {
  margin: 0;
  font-family: var(--s-serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-ink);
}

.page-cinematic .s-formcard .quick-form__head p {
  font-size: 0.9rem;
}

.page-cinematic .s-formcard .quick-form__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* The one solid thing on the card, as on the hero's card: the step to take. */
.page-cinematic .s-formcard .btn--primary {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #14161a;
}

.page-cinematic .s-formcard .btn--primary:hover {
  background: transparent;
  color: var(--c-ink);
}

.s-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.8rem;
  color: var(--c-dim);
}

.s-or::before,
.s-or::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: var(--c-line);
}

.s-formcard .s-actions .s-btn {
  flex: 1 1 10rem;
  border-color: var(--c-line-2);
  color: var(--c-ink);
}

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

.page-cinematic .s-formcard .s-btn:hover {
  background: var(--c-ink);
  color: #14161a;
}

.page-cinematic .s-formcard .form-success h3 {
  color: var(--c-ink);
}

@media (min-width: 64em) {
  .s-contact {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.page-cinematic .s-foot {
  border-block-start: 1px solid var(--c-blue);
  padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) 1.75rem;
  background: var(--c-bg);
}

.s-foot__top {
  display: grid;
  gap: 2.5rem;
}

.s-foot__name {
  margin: 0;
  font-family: var(--s-serif);
  font-size: 1.6rem;
  color: var(--c-ink);
}

.s-foot__line {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--c-ink-2);
}

.s-foot__tel {
  margin: 1rem 0 0;
  font-family: var(--s-serif);
  font-size: 1.6rem;
}

.page-cinematic .s-foot__tel a {
  color: var(--c-ink);
  text-decoration: none;
}

.s-foot__brand .s-login {
  margin-block-start: 1.25rem;
}

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

.s-foot__h {
  margin: 0 0 0.9rem;
  font-family: var(--c-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-dim);
}

.s-foot ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--c-ink-2);
}

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

.page-cinematic .s-foot ul a:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-underline-offset: 0.25em;
}

.s-foot__k {
  display: block;
  font-size: 0.74rem;
  color: var(--c-dim);
}

@media (min-width: 64em) {
  .s-foot__top {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
  }

  .s-foot__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Inner pages: the page head, breadcrumbs, the page's own index
   -------------------------------------------------------------------------- */
.s-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--c-dim);
}

.s-crumbs li + li::before {
  content: '/';
  margin-inline-end: 0.35rem;
  color: var(--c-line-2);
}

.page-cinematic .s-crumbs a {
  color: var(--c-ink-2);
  text-decoration: none;
}

.page-cinematic .s-crumbs a:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.p-hero {
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  border-block-end: 1px solid var(--c-line);
  background: var(--s-band);
}

.p-hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}

.p-hero .s-kicker {
  margin-block-start: 2rem;
}

.p-title {
  margin: 1rem 0 0;
  font-family: var(--s-serif);
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  text-wrap: balance;
}

.p-lede {
  margin: 1.25rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.6;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.p-hero .s-actions {
  margin-block-start: 2rem;
}

/* The area's number, set large: the page's one ornament where there is no banner. */
.p-hero__num {
  display: none;
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(8rem, 4rem + 10vw, 15rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line-2);
  direction: ltr;
  unicode-bidi: isolate;
  justify-self: end;
}

.p-banner {
  margin: 0;
  justify-self: start;
  max-inline-size: 30rem;
  padding: 0.6rem;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 30px 60px rgb(var(--c-tint-rgb) / 0.08);
}

.p-banner img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (min-width: 64em) {
  .p-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4rem;
  }

  .p-hero__num {
    display: block;
  }

  .p-banner {
    justify-self: end;
  }
}

.p-layout {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.p-toc {
  align-self: start;
}

.p-toc__h {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-dim);
}

.p-toc ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line);
  counter-reset: toc;
}

.p-toc li {
  border-block-end: 1px solid var(--c-line);
}

.p-toc a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.5rem;
  padding-block: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
}

.page-cinematic .p-toc a {
  color: var(--c-ink-2);
}

.page-cinematic .p-toc a:hover,
.page-cinematic .p-toc a.is-active {
  color: var(--c-ink);
}

.p-toc a .c-num {
  color: var(--c-dim);
}

.p-toc a.is-active {
  box-shadow: inset calc(2px * var(--dir)) 0 0 var(--c-blue);
}

.p-toc__call {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}

.p-toc__call p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-ink-2);
}

.p-toc__call .s-btn {
  inline-size: 100%;
}

.p-body {
  min-width: 0;
}

.p-block {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  border-block-start: 1px solid var(--c-line);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

.p-block:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.p-h2 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--s-serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-ink);
}

.p-h2 .c-num {
  font-size: 0.95rem;
  color: var(--c-dim);
}

.p-block > .s-lede {
  margin-block: -0.5rem 1.5rem;
}

@media (min-width: 64em) {
  .p-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 5rem;
  }

  .p-toc {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
  }
}

@media (max-width: 63.99em) {
  .p-toc__call {
    display: none;
  }

  .p-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}

/* Lists with a hairline instead of a bullet. */
.s-points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line);
}

.s-points li {
  position: relative;
  padding: 0.85rem 0;
  padding-inline-start: 2rem;
  border-block-end: 1px solid var(--c-line);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.s-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.7rem;
  inline-size: 1rem;
  block-size: 1px;
  background: var(--c-blue);
}

@media (min-width: 48em) {
  .s-points--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

/* A practice page's process: the timeline, always vertical in the reading column. */
.p-body .s-timeline {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.p-body .s-step {
  grid-template-columns: var(--dot) minmax(0, 1fr);
  padding-block-end: 1.5rem;
}

.p-body .s-step::before {
  inset-inline-start: calc(var(--dot) / 2);
  inset-inline-end: auto;
  inset-block: var(--dot) 0;
  inline-size: 1px;
  block-size: auto;
}

.p-body .s-step h3 {
  margin: 0.55rem 0 0.35rem;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--c-ink);
}

.p-body .s-step h4 {
  margin-block-start: 0.55rem;
}

/* The closing call to action of an inner page: a dark band. */
.p-cta {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  border-block-start: 2px solid var(--c-blue);
  background: var(--c-ink);
  color: var(--c-bg);
}

.p-cta__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}

.p-cta .s-kicker {
  color: rgb(var(--c-panel-rgb) / 0.75);
}

.p-cta h2 {
  margin: 1rem 0 0;
  font-family: var(--s-serif);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--c-bg);
}

.p-cta p {
  margin: 1rem 0 0;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgb(var(--c-panel-rgb) / 0.78);
}

.p-cta .s-actions {
  margin-block-start: 1.75rem;
}

.page-cinematic .p-cta .s-btn {
  border-color: rgb(var(--c-panel-rgb) / 0.35);
  color: var(--c-bg);
}

.page-cinematic .p-cta .s-btn:hover {
  border-color: var(--c-bg);
  background: var(--c-bg);
  color: var(--c-ink);
}

.page-cinematic .p-cta .s-btn--accent {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: #fff;
}

.p-cta__rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid rgb(var(--c-panel-rgb) / 0.18);
}

.p-cta__rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid rgb(var(--c-panel-rgb) / 0.18);
  font-size: 0.95rem;
  color: rgb(var(--c-panel-rgb) / 0.75);
}

.page-cinematic .p-cta__rows a {
  color: var(--c-bg);
  text-decoration: none;
}

.p-cta__rows .num,
.s-rows .num {
  direction: ltr;
  unicode-bidi: isolate;
}

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

/* --------------------------------------------------------------------------
   The article page
   -------------------------------------------------------------------------- */
.a-hero .p-title {
  max-width: 22ch;
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem);
}

.a-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin: 1.75rem 0 0;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.9rem;
  color: var(--c-dim);
}

.a-byline strong {
  font-weight: 600;
  color: var(--c-ink);
}

.a-layout {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.a-main {
  min-width: 0;
  max-width: 44rem;
}

.a-prose {
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  line-height: 1.9;
  color: var(--c-ink-2);
}

.a-prose > * {
  margin: 0;
}

.a-prose > * + * {
  margin-block-start: 1.15rem;
}

.a-prose h2 {
  margin-block-start: 2.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--c-line);
  font-family: var(--s-serif);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.15rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-ink);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

.a-prose h3 {
  margin-block-start: 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

.a-prose h2 + *,
.a-prose h3 + * {
  margin-block-start: 0.75rem;
}

.a-prose strong {
  font-weight: 600;
  color: var(--c-ink);
}

.page-cinematic .a-prose a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-underline-offset: 0.22em;
}

.page-cinematic .a-prose a:hover {
  color: var(--c-blue-soft);
}

.a-prose ul,
.a-prose ol {
  padding: 0;
  list-style: none;
}

.a-prose li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.a-prose li + li {
  margin-block-start: 0.55rem;
}

.a-prose ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.95em;
  inline-size: 0.85rem;
  block-size: 1px;
  background: var(--c-blue);
}

.a-prose ol {
  counter-reset: li;
}

.a-prose ol > li {
  counter-increment: li;
}

.a-prose ol > li::before {
  content: counter(li);
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--s-serif);
  font-size: 0.95em;
  color: var(--c-dim);
}

.a-prose blockquote {
  padding: 0.25rem 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--c-blue);
  font-family: var(--s-serif);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--c-ink);
}

.a-prose blockquote p + p {
  margin-block-start: 0.75rem;
}

.a-toc {
  align-self: start;
}

.a-toc .p-toc__h {
  margin-block-end: 0.85rem;
}

.a-toc ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--c-line);
}

.a-toc li {
  border-block-end: 1px solid var(--c-line);
}

.a-toc a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.5rem;
  padding-block: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.45;
  text-decoration: none;
}

.page-cinematic .a-toc a {
  color: var(--c-ink-2);
}

.page-cinematic .a-toc a:hover,
.page-cinematic .a-toc a.is-active {
  color: var(--c-ink);
}

.a-toc a.is-active {
  box-shadow: inset calc(2px * var(--dir)) 0 0 var(--c-blue);
}

.a-toc .c-num {
  color: var(--c-dim);
}

.a-section {
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--c-line-2);
}

.a-section > h2 {
  margin: 0 0 1.25rem;
  font-family: var(--s-serif);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.15rem);
  font-weight: 400;
  color: var(--c-ink);
}

.a-note {
  display: flex;
  gap: 0.9rem;
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--c-line);
  border-inline-start: 2px solid var(--c-blue);
  background: var(--s-band);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.a-note p {
  margin: 0;
}

.a-cta {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 2.5rem;
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
  border-block-start: 2px solid var(--c-blue);
  background: var(--c-ink);
  color: var(--c-bg);
}

.a-cta h2 {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  font-weight: 400;
  color: var(--c-bg);
}

.a-cta p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgb(var(--c-panel-rgb) / 0.78);
}

.page-cinematic .a-cta .s-btn {
  border-color: rgb(var(--c-panel-rgb) / 0.35);
  color: var(--c-bg);
}

.page-cinematic .a-cta .s-btn:hover {
  border-color: var(--c-bg);
  background: var(--c-bg);
  color: var(--c-ink);
}

.page-cinematic .a-cta .s-btn--accent {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: #fff;
}

.a-related {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
  border-block-start: 1px solid var(--c-line);
  background: var(--s-band);
}

@media (min-width: 64em) {
  .a-layout {
    grid-template-columns: minmax(0, 44rem) 15rem;
    justify-content: space-between;
    gap: 5rem;
  }

  .a-toc {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
    grid-column: 2;
    grid-row: 1;
  }

  .a-main {
    grid-column: 1;
    grid-row: 1;
  }
}

/* --------------------------------------------------------------------------
   The articles library
   -------------------------------------------------------------------------- */
.ai-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: 0;
  list-style: none;
}

.ai-filter a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--c-line-2);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.page-cinematic .ai-filter a {
  color: var(--c-ink-2);
}

.ai-filter a .c-num {
  font-size: 0.78rem;
}

.page-cinematic .ai-filter a:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}

.page-cinematic .ai-filter a[aria-current='true'] {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-bg);
}

.page-cinematic .ai-filter a[aria-current='true'] .c-num {
  color: var(--c-bg);
}

.ai-group + .ai-group {
  margin-block-start: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

.ai-group {
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}

.ai-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--c-line-2);
}

.ai-group__head h2 {
  margin: 0;
  font-family: var(--s-serif);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.2rem);
  font-weight: 400;
  color: var(--c-ink);
}

.ai-group[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Phones (the 390px layout is the reference)
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .s-title {
    margin-block-start: 0.9rem;
  }

  .s-actions .s-btn {
    flex: 1 1 100%;
  }

  .s-closer {
    align-items: stretch;
  }

  .s-closer .s-btn {
    inline-size: 100%;
  }

  .s-index__link {
    padding-block: 1.35rem;
  }

  .s-case__proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-review:first-child {
    padding-inline: 0;
  }

  .s-rows__v {
    font-size: 1rem;
  }

  .page-cinematic .s-formcard .quick-form__head,
  .page-cinematic .s-formcard .quick-form__body {
    padding-inline: 1.15rem;
  }

  .p-hero .s-actions .s-btn {
    flex: 1 1 100%;
  }

  .ai-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 4.5rem));
    padding-inline: clamp(1rem, 4vw, 4.5rem);
    scrollbar-width: none;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: nothing travels
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .s-index__link::after,
  .s-index__more svg,
  .s-link svg,
  .s-post {
    transition: none;
  }
}

/* ==========================================================================
   Colour and art (4 November 2026). The client asked for "more colours on the
   white things, SVGs, art", so the "no new colours" rule above is lifted for
   this layer: every colour here is a tint or shade of the brand's own (the
   hero's warm near-black, the blue, the brass and champagne of cinematic.css),
   and every text pair holds 4.5:1 (3:1 for large type). The art is in
   assets/art/: fine line drawings made for this firm, decorative only (alt=""
   and aria-hidden="true"), set into the composition rather than boxed.

   The bands, top to bottom on the home page: warm paper (the first hours),
   soft blue-grey (practice areas), white (results), paper (media), deep navy
   (reviews), blue-grey (about), white (process), navy with the Haifa skyline
   (courts), white (articles), paper (questions), blue-grey (contact), and the
   navy footer.
   ========================================================================== */
.page-cinematic {
  --k-paper: #f8f3e9;
  --k-paper-deep: #efe4cf;
  --k-mist: #edf0f7;
  --k-mist-deep: #dde3f0;
  --k-navy: #131b3a;
  --k-navy-raised: #1c2650;
  --k-navy-ink: #f4efe6;
  --k-navy-ink-2: #dcdfe9;
  --k-navy-dim: #b9c1d9;
  --k-brass: #8a5a1e;
  --k-brass-deep: #6f4512;
  --k-brass-light: #dcb57f;
  --k-brass-wash: #edd9b3;
  --k-blue-wash: #dfe5f7;
  --k-blue-deep: #1b2fa6;
}

[data-theme='dark'] .page-cinematic,
.page-cinematic[data-theme='dark'] {
  --k-paper: #15120d;
  --k-paper-deep: #2a2217;
  --k-mist: #10131b;
  --k-mist-deep: #1d2333;
  --k-navy: #0b1024;
  --k-navy-raised: #151c3a;
  --k-brass: #e2b887;
  --k-brass-deep: #e2b887;
  --k-brass-wash: #3a2c18;
  --k-blue-wash: #1b2240;
  --k-blue-deep: #9fb0ff;
}

/* The bands. */
.s-sec--paper {
  --s-band: var(--k-paper);
  background: var(--k-paper);
}

.s-sec--mist {
  --s-band: var(--k-mist);
  background: var(--k-mist);
}

/* Deep navy with light type: the section's own tokens, so every rule inside it follows. */
.s-sec--navy,
.page-cinematic .s-foot {
  --c-ink: var(--k-navy-ink);
  --c-ink-2: var(--k-navy-ink-2);
  --c-dim: var(--k-navy-dim);
  --c-line: rgb(244 239 230 / 0.16);
  --c-line-2: rgb(244 239 230 / 0.3);
  --c-bg: var(--k-navy);
  --c-bg-2: var(--k-navy-raised);
  --c-surface: var(--k-navy-raised);
  --c-tint-rgb: 4 6 16;
  --c-panel-rgb: 28 38 80;
  --c-blue-soft: #b4c1ff;
  --c-amber: var(--k-brass-light);
  --c-wa: #5fd38d;
  --s-band: var(--k-navy);
  --s-rule: var(--k-brass-light);
  --s-ink-strong: var(--k-navy-ink);
  --k-brass-deep: var(--k-brass-light);
  background: var(--k-navy);
  color: var(--c-ink);
}

.page-cinematic .s-sec--navy .s-btn--accent:hover {
  border-color: var(--k-navy-ink);
}

/* An ornament on the seam between two bands: a brass lozenge between olive leaves. */
.s-divider {
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: clamp(11rem, 8rem + 10vw, 15rem);
  block-size: auto;
  margin-inline: auto;
  translate: 0 -50%;
  pointer-events: none;
}

/* Two-tone headings: the second half in brass, and one hand-drawn stroke under its last word or two. The stroke is a
   background on the existing accent span (no word is wrapped, so no Hebrew string is split): with the default
   box-decoration-break (slice) the span is measured as one unbroken line, so a stroke of at most 4em placed at its
   end lands under the end of its last line, however the heading wraps. */
.page-cinematic .s-title .s-accent {
  padding-block-end: 0.1em;
  color: var(--k-brass-deep);
  background: url('../assets/art/underline.svg') no-repeat 0 100% / min(100%, 4em) 0.2em;
}

html[dir='ltr'] .page-cinematic .s-title .s-accent {
  background-position: 100% 100%;
}

/* Directional art (the car drives the way the page reads) turns round on the English page. */
html[dir='ltr'] .s-art--dir,
html[dir='ltr'] img[src*='art/area-traffic.'] {
  scale: -1 1;
}

/* ---- 1. The first hours: four rules on white cards with brass numbers, then the navy bar. */
.s-urgent .s-rules {
  gap: 0.85rem;
  border: 0;
}

.s-urgent .s-rule {
  padding: 1.5rem 1.35rem 1.6rem;
  border: 1px solid var(--k-paper-deep);
  border-block-start: 2px solid var(--k-brass);
  background: var(--c-surface);
}

.s-urgent .s-rule__n {
  color: var(--k-brass);
}

@media (min-width: 48em) {
  .s-urgent .s-rules {
    column-gap: 0.85rem;
  }
}

@media (min-width: 72em) {
  .s-urgent .s-rules {
    border: 0;
  }

  .s-urgent .s-rule,
  .s-urgent .s-rule:first-child,
  .s-urgent .s-rule:last-child {
    padding: 1.85rem 1.6rem 2.1rem;
  }

  .s-urgent .s-rule + .s-rule {
    border-inline-start: 1px solid var(--k-paper-deep);
  }
}

.s-callbar {
  border-block-start-color: var(--k-brass-light);
  background: var(--k-navy);
}

/* ---- 2. Practice areas: every row carries its own drawing. */
.s-index__n {
  color: var(--k-brass);
}

.s-index__link {
  grid-template-columns: 2.75rem minmax(0, 1fr) clamp(4.75rem, 3.5rem + 5vw, 6.5rem);
}

.s-index__art {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  inline-size: 100%;
  block-size: auto;
}

.s-index__d,
.s-index__more {
  grid-column: 2 / -1;
}

@media (min-width: 64em) {
  .s-index__link {
    grid-template-columns: 3.25rem 8.25rem minmax(0, 0.95fr) minmax(0, 1.25fr) 9rem;
    gap: 2rem;
  }

  .s-index__art,
  .s-index__d,
  .s-index__more {
    grid-column: auto;
    grid-row: auto;
  }
}

.s-sec--mist .s-also {
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  border-block-start: 2px solid var(--k-blue-deep);
  background: var(--c-surface);
}

.s-sec--mist .s-also__list {
  border-block-start-color: var(--k-mist-deep);
}

.s-sec--mist .s-also__item {
  border-block-end-color: var(--k-mist-deep);
}

/* ---- 3. Results: each case a warm card with a brass rule; the press items in white on paper. */
.s-cases {
  display: grid;
  gap: 1.25rem;
}

.s-case {
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--k-paper-deep);
  border-block-start: 2px solid var(--k-brass);
  background: var(--k-paper);
}

.s-case__n {
  color: var(--k-brass);
}

.page-cinematic a.s-case__area {
  color: var(--k-blue-deep);
}

.s-case__tag {
  border-color: rgb(138 90 30 / 0.5);
  background: var(--c-surface);
  color: var(--k-brass-deep);
}

.s-press {
  border-block-start: 2px solid var(--k-blue-deep);
}

/* ---- 4. Reviews on navy: an olive wreath over the heading, brass stars. */
.s-laurel {
  inline-size: clamp(7rem, 5.5rem + 4vw, 9rem);
  block-size: auto;
  margin-block-end: -0.35rem;
}

.s-sec--navy .s-review {
  border-color: rgb(244 239 230 / 0.1);
  background: var(--k-navy-raised);
}

.s-sec--navy .s-review:first-child {
  border-color: transparent;
  border-block-start-color: var(--k-brass-light);
  background: transparent;
}

/* ---- 5. About on blue-grey. */
.s-sec--mist .s-pull {
  border-color: var(--k-mist-deep);
  border-inline-start-color: var(--k-brass);
  background: var(--k-paper);
}

.s-sec--mist .s-chips li {
  border-color: var(--k-mist-deep);
  background: var(--c-surface);
}

.s-values .c-num {
  color: var(--k-blue-deep);
}

/* ---- 6. Process: coloured numbers (blue for the criminal track, brass for the other), a drawing in every step. */
.page-cinematic .s-step__n {
  border-color: var(--c-blue);
  background: var(--k-blue-wash);
  color: var(--k-blue-deep);
}

.page-cinematic .s-track + .s-track .s-step__n {
  border-color: var(--k-brass);
  background: var(--k-brass-wash);
  color: var(--k-brass-deep);
}

.s-step__art {
  float: inline-end;
  inline-size: 3.75rem;
  block-size: auto;
  margin-block: 0.4rem 0.25rem;
  margin-inline-start: 0.75rem;
}

@media (min-width: 64em) {
  .s-track .s-step__art {
    float: none;
    display: block;
    inline-size: 4.5rem;
    margin: 1.1rem 0 -0.6rem;
  }
}

/* A practice page's timeline is one column: the step keeps a reading measure, so its drawing sits beside it. */
.p-body .s-step > div {
  max-inline-size: 36rem;
}

/* ---- 7. The courts on navy, the Haifa skyline along the foot of the band. */
.s-sec--skyline {
  padding-block-end: 0;
  overflow: hidden;
}

.s-skyline {
  display: block;
  inline-size: 100%;
  block-size: clamp(7.5rem, 4rem + 9vw, 14rem);
  margin-block-start: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  object-fit: cover;
  object-position: 62% 100%;
}

/* The office card keeps the light page's own ink on its white surface. */
.s-sec--navy .s-region {
  --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;
  --c-surface: #ffffff;
  --c-blue-soft: #1e35c4;
  --c-wa: #157a40;
  --s-rule: var(--c-blue);
  border-color: transparent;
  border-block-start: 2px solid var(--k-brass-light);
  color: var(--c-ink);
}

/* ---- 8. Articles: warm cards with a brass rule. */
.s-post {
  border-block-start-color: var(--k-brass);
  background: var(--k-paper);
}

.page-cinematic a.s-post__area {
  color: var(--k-blue-deep);
}

/* The empty state: a warm note with its own drawing. */
.s-empty {
  border-color: var(--k-paper-deep);
  border-inline-start-color: var(--k-brass);
  background: var(--k-paper);
}

.s-empty__art {
  display: block;
  inline-size: clamp(9rem, 7rem + 8vw, 12.5rem);
  block-size: auto;
  margin-block-end: 1.25rem;
}

/* ---- 9. Contact on blue-grey: the map at the address, the seal on the form. */
.s-sec--mist .s-rows,
.s-sec--mist .s-rows li {
  border-color: var(--k-mist-deep);
}

.s-rows li:has(> .s-rows__map) {
  grid-template-columns: 7rem minmax(0, 1fr) clamp(5rem, 3.5rem + 4vw, 6.75rem);
  align-items: center;
}

.s-rows__map {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.s-start .c-num {
  color: var(--k-brass);
}

.s-contact__form {
  position: relative;
}

.s-seal {
  position: absolute;
  z-index: 2;
  inset-block-start: -5.25rem;
  inset-inline-end: -0.75rem;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  inline-size: clamp(7.25rem, 6.5rem + 2vw, 8.5rem);
  aspect-ratio: 1;
  margin: 0;
  padding: 1.2rem;
  text-align: center;
  rotate: -8deg;
  pointer-events: none;
}

.s-seal img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.s-seal strong,
.s-seal span {
  position: relative;
  color: #6f4512;
}

.s-seal strong {
  font-family: var(--s-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}

.s-seal span {
  max-inline-size: 5.6em;
  margin-inline: auto;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.25;
}

/* The English words are longer: a size that keeps them inside the ring. */
html[lang='en'] .s-seal strong {
  font-size: 0.78rem;
}

html[lang='en'] .s-seal span {
  max-inline-size: 7em;
  font-size: 0.6rem;
}

/* Russian: longer still ("Полная конфиденциальность"), so smaller and hyphenated inside the ring. */
html:lang(ru) .s-seal strong {
  font-size: 0.74rem;
  hyphens: auto;
}

html:lang(ru) .s-seal span {
  max-inline-size: 7.5em;
  font-size: 0.58rem;
  hyphens: auto;
}

@media (max-width: 63.99em) {
  .s-contact__form {
    margin-block-start: 5rem;
  }

  .s-seal {
    inset-inline-end: 0.35rem;
  }
}

/* ---- The article: the "general information" box on paper, the call in navy, related articles on blue-grey. */
.a-note {
  border-color: var(--k-paper-deep);
  border-inline-start-color: var(--k-brass);
  background: var(--k-paper);
}

.a-cta {
  border-block-start-color: var(--k-brass-light);
  background: var(--k-navy);
}

.a-related {
  --s-band: var(--k-mist);
  background: var(--k-mist);
}

/* ---- The footer: the deep navy band that closes every page. */
.page-cinematic .s-foot {
  border-block-start: 2px solid var(--k-brass-light);
}

/* ---- Inner pages: a tinted head with the area's drawing, coloured numbers, the navy closing band. */
.p-hero {
  background: var(--k-mist);
}

.p-hero__art {
  float: inline-end;
  inline-size: clamp(7.5rem, 5rem + 9vw, 13rem);
  block-size: auto;
  margin-block-start: 1.25rem;
  margin-inline-start: 1rem;
}

.p-h2 .c-num,
.p-toc .c-num {
  color: var(--k-brass);
}

/* A shade lighter than the navy footer under it, so the two read as two bands. */
.p-cta {
  border-block-start-color: var(--k-brass-light);
  background: var(--k-navy-raised);
}

.p-hero__num {
  -webkit-text-stroke-color: rgb(138 90 30 / 0.45);
}

/* The page index's call buttons are links inside .p-toc, whose link rule (0,2,1) outranked the buttons' own colours
   (grey on black, 1.9:1) and their layout. They are buttons again. */
.page-cinematic .p-toc .p-toc__call a.s-btn {
  display: inline-flex;
  padding-block: 0.75rem;
}

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

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

.page-cinematic .p-toc .p-toc__call a.s-btn--wa {
  color: var(--c-wa);
}

.page-cinematic .p-toc .p-toc__call a.s-btn--wa:hover {
  color: #fff;
}