/* =========================================================
   Bartal Cohen — v3
   ========================================================= */

:root {
  /* Typography — "Refined Serif" (default).
     Override via html[data-font="editorial|classical|modern"] below. */
  --ff-he: "Noto Serif Hebrew", "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --ff-he-display: "Noto Serif Hebrew", "Frank Ruhl Libre", "David Libre", serif;
  --ff-en: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-en-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --ff-ui: "Heebo", "Assistant", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-ui-en: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Ivory */
  --bg: #f4efe6;
  --bg-alt: #ece5d4;
  --ink: #1a1612;
  --ink-soft: #54483b;
  --ink-mute: #9c8d79;
  --rule: #d6ccb8;
  --brand: #1f55a3;
  --accent: #1f55a3;
  --card: #faf5ea;
}
html[data-theme="mono"] {
  --bg: #fafaf8;
  --bg-alt: #f1f1ee;
  --ink: #111;
  --ink-soft: #3a3a3a;
  --ink-mute: #a0a0a0;
  --rule: #e2e2df;
  --accent: #1f55a3;
  --card: #ffffff;
}
html[data-theme="dark"] {
  --bg: #121210;
  --bg-alt: #1b1a17;
  --ink: #ece5d5;
  --ink-soft: #b3a994;
  --ink-mute: #6b6253;
  --rule: #2d2a24;
  --accent: #6fa0dc;
  --card: #18171476;
}

/* Font variant: Editorial — Frank Ruhl Libre + Playfair Display */
html[data-font="editorial"] {
  --ff-he: "Frank Ruhl Libre", "Noto Serif Hebrew", "David Libre", "Times New Roman", serif;
  --ff-he-display: "Frank Ruhl Libre", "Noto Serif Hebrew", serif;
  --ff-en: "EB Garamond", "Playfair Display", Georgia, serif;
  --ff-en-display: "Playfair Display", "EB Garamond", Georgia, serif;
  --ff-ui: "Heebo", "Inter", system-ui, sans-serif;
  --ff-ui-en: "Inter", system-ui, sans-serif;
}

/* Font variant: Classical — David Libre + Libre Caslon Text */
html[data-font="classical"] {
  --ff-he: "David Libre", "Frank Ruhl Libre", "Noto Serif Hebrew", "Times New Roman", serif;
  --ff-he-display: "David Libre", "Frank Ruhl Libre", serif;
  --ff-en: "Libre Caslon Text", "EB Garamond", Georgia, serif;
  --ff-en-display: "Libre Caslon Text", "EB Garamond", Georgia, serif;
  --ff-ui: "Assistant", "Heebo", "Inter", system-ui, sans-serif;
  --ff-ui-en: "Inter", system-ui, sans-serif;
}

/* Font variant: Modern Sans — Assistant + Inter Tight. Sans-serif throughout for a minimalist register. */
html[data-font="modern"] {
  --ff-he: "Assistant", "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-he-display: "Assistant", "Heebo", system-ui, sans-serif;
  --ff-en: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-en-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ff-ui: "Assistant", "Heebo", system-ui, sans-serif;
  --ff-ui-en: "Inter Tight", "Inter", system-ui, sans-serif;
}
html[data-font="modern"] body { font-size: 16px; line-height: 1.7; }
html[data-font="modern"][lang="en"] body { font-size: 16.5px; }
html[data-font="modern"] .t-display { font-weight: 300; letter-spacing: -0.022em; }
html[data-font="modern"] .t-h2 { font-weight: 400; letter-spacing: -0.015em; }
html[data-font="modern"] .t-h3 { font-weight: 500; }
html[data-font="modern"] .practice-row .p-name,
html[data-font="modern"] .rec-tier { font-weight: 500; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-he);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  transition: background-color 800ms ease, color 800ms ease;
  overflow-x: hidden;
  position: relative;
}

/* Fixed backdrop stack — one image per section, crossfading elegantly
   as the reader moves between pages. Rendered by <Backdrop /> in app.jsx. */
.backdrop-stack {
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
}
.backdrop-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1600ms cubic-bezier(.2,.7,.2,1),
    transform 2400ms cubic-bezier(.2,.7,.2,1),
    background-position 2000ms cubic-bezier(.2,.7,.2,1),
    filter 1600ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

/* Soft vignette on top of the backdrop stack so body copy always reads cleanly */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 50% 30%,
      color-mix(in oklab, var(--bg) 10%, transparent) 0%,
      color-mix(in oklab, var(--bg) 45%, transparent) 50%,
      color-mix(in oklab, var(--bg) 82%, transparent) 100%);
  pointer-events: none;
}

/* Per-section crossfade. Each section activates one backdrop layer;
   all others fade back to 0. */
body[data-active="top"]        .backdrop-layer[data-layer="colonnade"] { opacity: 0.38; transform: scale(1); background-position: center 60%; }
body[data-active="firm"]       .backdrop-layer[data-layer="archways"]  { opacity: 0.22; transform: scale(1);    background-position: center 50%; }
body[data-active="practices"]  .backdrop-layer[data-layer="pediment"]  { opacity: 0.22; transform: scale(1);    background-position: center 55%; }
body[data-active="team"]       .backdrop-layer[data-layer="coffers"]   { opacity: 0.18; transform: scale(1);    background-position: center 50%; }
body[data-active="recognition"] .backdrop-layer[data-layer="pediment"] { opacity: 0.22; transform: scale(1.03); background-position: 40% 55%; filter: blur(0.5px); }
body[data-active="contact"]    .backdrop-layer[data-layer="colonnade"] { opacity: 0.30; transform: scale(1.02); background-position: center 38%; }

html[data-theme="dark"] .backdrop-layer { filter: brightness(1.1) contrast(0.85); }
html[data-theme="dark"] body[data-active="top"]        .backdrop-layer[data-layer="colonnade"] { opacity: 0.28; }
html[data-theme="dark"] body[data-active="firm"]       .backdrop-layer[data-layer="archways"]  { opacity: 0.16; }
html[data-theme="dark"] body[data-active="practices"]  .backdrop-layer[data-layer="pediment"]  { opacity: 0.16; }
html[data-theme="dark"] body[data-active="team"]       .backdrop-layer[data-layer="coffers"]   { opacity: 0.14; }
html[data-theme="dark"] body[data-active="recognition"] .backdrop-layer[data-layer="pediment"] { opacity: 0.16; }
html[data-theme="dark"] body[data-active="contact"]    .backdrop-layer[data-layer="colonnade"] { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  .backdrop-layer { transition: opacity 400ms linear; transform: none !important; }
}
html[lang="en"] body { font-family: var(--ff-en); font-weight: 400; font-size: 18px; line-height: 1.7; }

.ui { font-family: var(--ff-ui); font-feature-settings: "tnum" 1; }
html[lang="en"] .ui { font-family: var(--ff-ui-en); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

/* Type scale — elegant, refined */
.t-eyebrow { font-family: var(--ff-ui); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
html[lang="en"] .t-eyebrow { font-family: var(--ff-ui-en); letter-spacing: 0.26em; }

.t-display {
  font-family: var(--ff-he-display);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
html[lang="en"] .t-display {
  font-family: var(--ff-en-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.t-h2 {
  font-family: var(--ff-he-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
html[lang="en"] .t-h2 { font-family: var(--ff-en-display); font-style: normal; font-weight: 400; letter-spacing: -0.018em; }

.t-h3 {
  font-family: var(--ff-he-display);
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.008em;
}
html[lang="en"] .t-h3 { font-family: var(--ff-en-display); font-style: normal; font-weight: 500; letter-spacing: -0.015em; }

.t-body { font-size: 17px; line-height: 1.82; color: var(--ink-soft); }
html[lang="en"] .t-body { font-size: 17.5px; line-height: 1.7; }
.t-body-lg { font-size: 19.5px; line-height: 1.7; color: var(--ink-soft); }
html[lang="en"] .t-body-lg { font-size: 20px; line-height: 1.55; }
.t-small { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Shell */
.shell { max-width: 1160px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .shell { padding: 0 22px; } }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.05) blur(14px);
  -webkit-backdrop-filter: saturate(1.05) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 500ms ease;
}
.nav.scrolled { border-bottom-color: color-mix(in oklab, var(--rule) 60%, transparent); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 32px; }

.brand { display: flex; align-items: center; }
.brand-logo {
  height: 38px; width: auto; display: block;
  transition: opacity 300ms ease;
}
html[data-theme="dark"] .brand-logo.light { display: block; }
html[data-theme="dark"] .brand-logo.dark { display: none; }
html:not([data-theme="dark"]) .brand-logo.light { display: none; }
html:not([data-theme="dark"]) .brand-logo.dark { display: block; }

.nav-links { display: flex; gap: 40px; align-items: center; font-family: var(--ff-ui); font-size: 12.5px; letter-spacing: 0.04em; font-weight: 400; }
html[lang="en"] .nav-links { font-family: var(--ff-ui-en); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-links a { color: var(--ink-soft); position: relative; padding: 8px 0; transition: color 300ms ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }

.nav-right { display: flex; align-items: center; gap: 24px; }
.lang-toggle { font-family: var(--ff-ui); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-mute); border: none; background: transparent; cursor: pointer; padding: 6px 2px; transition: color 300ms ease; text-transform: uppercase; font-weight: 500; }
html[lang="en"] .lang-toggle { font-family: var(--ff-ui-en); }
.lang-toggle:hover { color: var(--ink); }
.nav-social { display: flex; gap: 14px; }
.nav-social a { width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink-mute); transition: color 300ms ease; }
.nav-social a:hover { color: var(--brand); }
.nav-social svg { width: 13px; height: 13px; }

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-inner { height: 68px; }
  .brand-logo { height: 30px; }
}

/* Hero */
.hero {
  min-height: 92vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 200px;
  padding-bottom: 96px;
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/hero-colonnade.svg");
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  z-index: -2;
  opacity: 1;
}
.hero::after {
  /* Gentle, bottom-weighted fade so the backdrop stays visible up top
     but dissolves into the body flow — the next section emerges softly. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--bg) 28%, transparent) 0%,
    color-mix(in oklab, var(--bg) 18%, transparent) 45%,
    color-mix(in oklab, var(--bg) 68%, transparent) 85%,
    var(--bg) 100%
  );
  z-index: -1;
  pointer-events: none;
}
html[data-theme="dark"] .hero::after {
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--bg) 40%, transparent) 0%,
    color-mix(in oklab, var(--bg) 28%, transparent) 45%,
    color-mix(in oklab, var(--bg) 75%, transparent) 85%,
    var(--bg) 100%
  );
}
.hero-eyebrow { margin-bottom: 36px; display: flex; align-items: center; gap: 14px; }
.hero-eyebrow::before { content:""; width: 28px; height: 1px; background: var(--ink-mute); }
.hero-title { max-width: 20ch; color: var(--ink); }
.hero-title .soft { color: var(--ink-soft); display: block; }
.hero-foot { margin-top: 96px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.hero-foot .where { max-width: 22ch; }
@media (max-width: 720px) { .hero { padding-top: 150px; padding-bottom: 56px; min-height: auto; } .hero-foot { margin-top: 56px; flex-direction: column; align-items: flex-start; gap: 20px; } }

/* Section */
.section { padding: 140px 0; position: relative; }
.section::before,
.section::after {
  /* Narrow top/bottom gradient bands let the backdrop breathe through at
     section boundaries — creates a soft "page change" transition. */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  pointer-events: none;
  z-index: -1;
}
.section::before { top: 0; background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 0%, transparent) 0%, color-mix(in oklab, var(--bg) 55%, transparent) 100%); }
.section::after { bottom: 0; background: linear-gradient(to top, color-mix(in oklab, var(--bg) 0%, transparent) 0%, color-mix(in oklab, var(--bg) 55%, transparent) 100%); }
@media (max-width: 860px) { .section { padding: 88px 0; } .section::before, .section::after { height: 80px; } }
.section-head { margin-bottom: 72px; max-width: 720px; }
.section-label { margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.section-label::before { content:""; width: 24px; height: 1px; background: var(--ink-mute); }

/* Firm */
.firm { max-width: 780px; }
.firm .t-body-lg { margin-bottom: 22px; max-width: 64ch; text-align: justify; text-justify: inter-word; hyphens: auto; }
html[lang="he"] .firm .t-body-lg { hyphens: none; }

/* Practices list */
.practice-list { border-top: 1px solid var(--rule); max-width: 900px; }
.practice-row { display: grid; grid-template-columns: 1fr 2fr; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--rule); gap: 32px; cursor: default; transition: color 400ms ease; }
.practice-row .p-name { font-family: var(--ff-he-display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); transition: color 400ms ease; }
html[lang="en"] .practice-row .p-name { font-family: var(--ff-en-display); font-style: normal; font-weight: 500; letter-spacing: -0.015em; }
.practice-row .p-detail { font-size: 15px; color: var(--ink-soft); line-height: 1.65; max-width: 52ch; text-align: justify; text-justify: inter-word; hyphens: auto; }
html[lang="he"] .practice-row .p-detail { hyphens: none; }
.practice-row:hover .p-name { color: var(--brand); }
@media (max-width: 720px) { .practice-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } }

/* Team */
.team { display: flex; flex-direction: column; gap: 0; }
.member {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.team .member:last-child { border-bottom: 1px solid var(--rule); }

.member-portrait {
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.member-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 10px,
      color-mix(in oklab, var(--ink-mute) 12%, transparent) 10px,
      color-mix(in oklab, var(--ink-mute) 12%, transparent) 11px);
}
.member-portrait::after {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--ff-he-display);
  font-size: 48px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
html[lang="en"] .member-portrait::after { font-family: var(--ff-en-display); font-style: normal; font-weight: 500; }

/* Real portrait photo — duotone-ish, quiet treatment */
.member-portrait.photo {
  background: var(--bg-alt);
}
.member-portrait.photo::before,
.member-portrait.photo::after { display: none; }
.member-portrait.photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  transition: filter 600ms ease;
}
.member:hover .member-portrait.photo { filter: grayscale(0%) contrast(1); }

.team-intro { max-width: 62ch; margin-bottom: 16px; color: var(--ink-soft); }

.member-body {}
.member-name { margin-bottom: 6px; }
.member-role { font-family: var(--ff-ui); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; font-weight: 500; }
html[lang="en"] .member-role { font-family: var(--ff-ui-en); }
.member-tagline { color: var(--ink-mute); margin-bottom: 24px; font-size: 11px; }
.member-bio { margin-bottom: 28px; max-width: 62ch; }
.member-bio p { margin-bottom: 14px; text-align: justify; text-justify: inter-word; hyphens: auto; }
html[lang="he"] .member-bio p { hyphens: none; }
.member-bio p:last-child { margin-bottom: 0; }

/* Notable Matters */
.cases { display: grid; gap: 48px; margin-top: 24px; }
.case-group { border-top: 1px solid var(--rule); padding-top: 28px; }
.case-group-name { color: var(--ink-mute); margin-bottom: 18px; }
.case-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 78ch; }
.case-item {
  position: relative;
  padding: 18px 0 18px 0;
  padding-inline-start: 28px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  line-height: 1.7;
}
.case-item:first-child { border-top: 1px solid var(--rule); }
.case-item::before {
  content: "";
  position: absolute;
  top: 28px;
  inset-inline-start: 0;
  width: 14px;
  height: 1px;
  background: var(--ink-mute);
}

.member-contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.member-contact {
  display: flex; flex-direction: column;
  padding-inline-end: 20px;
  border-inline-end: 1px solid var(--rule);
  min-width: 0;
}
.member-contact:last-child { border-inline-end: none; padding-inline-end: 0; }
.member-contact .mc-k {
  font-family: var(--ff-ui); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
html[lang="en"] .member-contact .mc-k { font-family: var(--ff-ui-en); }
.member-contact .mc-v { font-size: 14.5px; color: var(--ink); font-family: var(--ff-ui); letter-spacing: 0.01em; line-height: 1.3; word-break: break-word; }
html[lang="en"] .member-contact .mc-v { font-family: var(--ff-ui-en); }
.mc-icon { width: 11px; height: 11px; display: inline-flex; color: var(--ink-mute); flex-shrink: 0; }
.mc-icon svg { width: 100%; height: 100%; }
.member-contact.whatsapp .mc-v a { color: var(--brand); }
.member-contact .mc-v a { border-bottom: 1px solid transparent; transition: border-color 300ms ease; }
.member-contact .mc-v a:hover { border-bottom-color: var(--ink); }

@media (max-width: 820px) {
  .member { grid-template-columns: 140px 1fr; gap: 28px; padding: 40px 0; }
  .member-contacts { grid-template-columns: 1fr; gap: 0; }
  .member-contact { border-inline-end: none; border-bottom: 1px solid var(--rule); padding: 14px 0 12px; }
  .member-contact:last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .member { grid-template-columns: 1fr; gap: 24px; }
  .member-portrait { aspect-ratio: 1/1; max-width: 180px; }
}

/* Recognition — with source logos */
.rec-list {
  border-top: 1px solid var(--rule);
  max-width: 980px;
}
.rec-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.rec-source {
  font-family: var(--ff-ui);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
html[lang="en"] .rec-source { font-family: var(--ff-ui-en); }
.rec-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.rec-logo svg { width: 100%; height: 100%; }
.rec-tier {
  font-family: var(--ff-he-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html[lang="en"] .rec-tier { font-family: var(--ff-en-display); font-style: normal; font-weight: 500; letter-spacing: -0.015em; }
.rec-years {
  font-family: var(--ff-ui);
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  max-width: 28ch;
  text-align: end;
  line-height: 1.5;
}
html[lang="en"] .rec-years { font-family: var(--ff-ui-en); }
@media (max-width: 820px) {
  .rec-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; align-items: start; }
  .rec-years { text-align: start; }
}

/* Contact */
.contact-wrap { max-width: 720px; }
.contact-row { display: grid; grid-template-columns: 160px 1fr; gap: 32px; padding: 22px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.contact-row:last-child { border-bottom: 1px solid var(--rule); }
.contact-row .k { font-family: var(--ff-ui); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
html[lang="en"] .contact-row .k { font-family: var(--ff-ui-en); }
.contact-row .v { font-size: 17px; color: var(--ink); line-height: 1.55; font-family: var(--ff-ui); letter-spacing: 0.005em; white-space: nowrap; unicode-bidi: isolate; }
html[lang="en"] .contact-row .v { font-family: var(--ff-ui-en); }
/* Hebrew: smaller value text + narrower label gutter so the full office
   address reads on one line. */
html[lang="he"] .contact-row { grid-template-columns: 110px 1fr; gap: 22px; }
html[lang="he"] .contact-row .v { font-size: 14.5px; letter-spacing: 0; }
.contact-row .v a { border-bottom: 1px solid transparent; transition: border-color 300ms ease; }
.contact-row .v a:hover { border-bottom-color: var(--ink); }
@media (max-width: 720px) {
  .contact-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  html[lang="he"] .contact-row { grid-template-columns: 1fr; gap: 6px; }
  .contact-row .v { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Footer */
.footer { padding: 56px 0 48px; border-top: 1px solid var(--rule); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--ff-ui); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); }
html[lang="en"] .footer-inner { font-family: var(--ff-ui-en); }
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: var(--ink-soft); transition: color 300ms ease; display: inline-flex; align-items: center; gap: 8px; }
.footer-social a:hover { color: var(--brand); }
.footer-social svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .footer-inner { flex-direction: column; text-align: center; gap: 14px; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 1200ms cubic-bezier(.2,.7,.2,1), transform 1200ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 100ms; }
.reveal.d2 { transition-delay: 200ms; }
.reveal.d3 { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior: auto; } }

/* Tweaks */
.tweaks { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 100; background: var(--bg); border: 1px solid var(--rule); padding: 22px; font-family: var(--ff-ui); font-size: 12px; width: 260px; max-height: calc(100vh - 48px); overflow-y: auto; display: none; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.tweaks.show { display: block; }
.tweaks h5 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; font-weight: 500; }
.tweaks h5 + h5 { margin-top: 20px; }
.tweaks .row { display: flex; flex-direction: column; gap: 4px; }
.tweaks button.opt { all: unset; cursor: pointer; padding: 9px 12px; display: flex; align-items: center; gap: 10px; color: var(--ink-soft); transition: color 200ms ease, border-color 200ms ease; border: 1px solid transparent; }
.tweaks button.opt:hover { color: var(--ink); }
.tweaks button.opt.active { color: var(--ink); border-color: var(--rule); }
.tweaks .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--rule); }
.tweaks .lbl { flex: 1; letter-spacing: 0.03em; display: flex; flex-direction: column; gap: 2px; }
.tweaks .lbl .hint { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.05em; }